/* ═══════════════════════════════════════════════════════════════════════════
   Tutorials — tour layer styles (Tutorials v1, ARCH WO 20260719-0704).
   Own file under script-src/style-src 'self' — nothing here rides the inline
   monolith (WO §2.5; PK 2.4 #6/#20). Visual language: the locked house style —
   Figtree over material-black with the dashboard gold (WO §3), matching the
   app's dark tokens (--bg/--surface/--gold in index.html :root).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800&display=swap');

/* Above EVERY app popup — the gold combobox menu and the venue flyout are 6200, #confirmmodal is 6300.
   A tour that drives a form opens those popups on purpose, and at 3000 they painted over the subtitle
   rail and the coach card: the narration disappeared behind the very dropdown it was describing, on
   any viewport short enough for the two to meet. Being on top costs nothing — the spotlight is a
   CUT-OUT, so whatever the hole frames still renders undimmed underneath, and the blocker now
   genuinely captures input for those popups too (watch-only, WO §2.1).
   7000 is deliberately clear of the app's band rather than one above it; the e2e pin
   ("Tour layer stacks above every app popup") fails if anything of ours ever climbs past it. */
#tut-layer { position: fixed; inset: 0; z-index: 7000; font-family: 'Figtree', 'DM Sans', sans-serif; }
#tut-layer[hidden] { display: none; }

/* Input blocker — the viewer only watches (WO §2.1): real pointer input is captured
   here for the tour's duration; the runner's synthetic clicks dispatch directly on
   app elements and never pass through this layer. */
.tut-blocker { position: absolute; inset: 0; pointer-events: auto; }

/* THE SPOTLIGHT — a HIGHLIGHT, never a dim (Joshua, Edits 3: "I never want to dim any part of the page.
   I just want the spotlight to highlight over a section without dimming anything else. Eliminate dimming.")

   It was a cut-out: a small box whose 200vmax box-shadow darkened the entire rest of the page, so the
   "spotlight" was really the absence of a scrim. That scrim is gone in both its forms — the .78 black-out
   AND the .40 light scrim Edits 2 #2 introduced for centred steps. What frames the target now is additive:
   a gold ring, a soft gold outer glow, and a barely-there gold wash inside the box. The app is at full
   brightness everywhere, including under the box. Do NOT reintroduce a shadow, an overlay, or a
   backdrop-filter to "help it read" — the reason those were removed is that they dim, whatever they are
   called. Contrast comes from the ring and the pulse.

   Moving/resizing it animates the box — the whole "driver" feel is this transition. */
.tut-hole {
  position: absolute; border-radius: 12px; pointer-events: none;
  background: rgba(201, 168, 76, .07);                /* a gold WASH, not a shade — brightens, never darkens */
  box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 0 26px 6px rgba(201, 168, 76, .30);
  outline: 2px solid rgba(201, 168, 76, .95);         /* --gold */
  outline-offset: 2px;
  transition: top .5s cubic-bezier(.4, 0, .2, 1), left .5s cubic-bezier(.4, 0, .2, 1),
              width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1),
              border-radius .5s ease, opacity .3s ease;
}
/* Centred steps (a narration-only beat with no element to frame) now show NOTHING at all — with no scrim
   there is no "centred treatment" left to draw, and a ring around empty space would point at nothing.
   The coach card carries those steps on its own, which is what it was already doing behind the scrim. */
.tut-hole.tut-hole-center { outline-color: transparent; background: none; box-shadow: none; }
/* Screen change: the box goes at the same moment the surface does (Edits 3) — it must never be left
   framing whatever now happens to sit at the old coordinates. `visibility` rides the same transition so
   the ring cannot flash at its old size on the way out. */
.tut-hole.tut-hole-off { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
/* Re-entry from OFF is a CUT, not a travel. The .5s position transition above is the driver feel, and it is
   right when the box moves between two things on ONE screen. But it also animated the box in from wherever
   the LAST screen left it — the full width of the viewport, on every step and twice inside the
   Sheets -> Pre-Litigation hop. Suppressed for the placing frame only (see spotlight()). */
.tut-hole.tut-hole-jump { transition: none; }
/* The paired second box (the Complete step). Same vocabulary as the primary — it must read as the other
   half of one thought, not as a different kind of mark — so it inherits every .tut-hole rule and only
   sits a hair softer, which is what keeps the primary reading as the main subject. */
.tut-hole.tut-hole2 { background: rgba(201, 168, 76, .05); }
.tut-hole.tut-pulse { animation: tutPulse 1.8s ease-in-out infinite; }
@keyframes tutPulse {
  0%, 100% { outline-color: rgba(201, 168, 76, .95); outline-offset: 2px; box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 0 26px 6px rgba(201, 168, 76, .30); }
  50%      { outline-color: rgba(201, 168, 76, .50); outline-offset: 5px; box-shadow: 0 0 0 1px rgba(201, 168, 76, .20), 0 0 40px 12px rgba(201, 168, 76, .45); }
}

/* Ghost cursor — the presenter's hand. */
.tut-cursor {
  position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 4;
  color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
  transition: top .8s cubic-bezier(.45, 0, .2, 1), left .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease;
  opacity: 0;
}
.tut-cursor.on { opacity: 1; }
.tut-cursor .tut-ripple {
  position: absolute; left: -9px; top: -9px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, .9); opacity: 0; transform: scale(.3);
}
.tut-cursor.clicking .tut-ripple { animation: tutRipple .55s ease-out; }
@keyframes tutRipple { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* Coach card — ONE dedicated home, the ABSOLUTE bottom LEFT (Joshua, Edits 2 #8: moved off the bottom-right so
   it never covers the Generate button the tour is highlighting); it never floats with the target. The rail is
   centered (min(760px, 92vw)), so the corner is clear on wide screens; on narrower viewports the media rule
   below lifts the coach back above the rail so it can't cover the controls. */
.tut-coach {
  position: absolute; z-index: 5; left: 16px; bottom: 16px; max-width: 340px; min-width: 220px;
  background: linear-gradient(180deg, #1d1d1f, #151517);
  border: 1px solid #33302a; border-radius: 14px; padding: 12px 16px 11px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(201, 168, 76, .12);
  transition: opacity .35s ease;
  opacity: 0;
}
.tut-coach.on { opacity: 1; }
.tut-coach-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #c9a84c; display: flex; align-items: center; gap: 7px;
}
.tut-coach-kicker .lu, .tut-coach-kicker svg { width: 15px; height: 15px; }
.tut-coach-title { font-size: .94rem; font-weight: 700; color: #f2ede2; line-height: 1.3; margin-top: 5px; }
.tut-coach-title[style*="none"] + .tut-coach-body { margin-top: 0; }
.tut-coach-body { display: none; }

/* The simulated completion-date entry (rev B: a task completes by entering the date,
   not ticking a box) — an input-look box the ghost cursor "types" today's date into. */
.tut-datebox {
  position: absolute; z-index: 6; display: flex; align-items: center;
  height: 30px; padding: 0 10px; border-radius: 6px;
  background: #101210; border: 1.5px solid #79a94f; color: #d7e8c8;
  font-family: 'DM Sans', 'Figtree', sans-serif; font-size: .82rem; font-weight: 600; letter-spacing: .03em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 3px rgba(121, 169, 79, .15);
}
.tut-datebox::after { content: ""; width: 1.5px; height: 1em; background: #abcf8c; margin-left: 2px; animation: tutCaret 1s step-end infinite; }
@keyframes tutCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* The animated check used by the simulated task-complete. */
.tut-check {
  position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(121, 169, 79, .18);
  border: 2px solid #79a94f; color: #abcf8c;
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.6, .4, 1);
}
.tut-check.on { opacity: 1; transform: scale(1); }
.tut-check svg { width: 20px; height: 20px; }

/* A cloned card mid-flight (simulated archive): the clone travels, the data stays. */
.tut-flyclone { position: absolute; z-index: 6; pointer-events: none; overflow: hidden;
  transition: transform .8s cubic-bezier(.5, 0, .8, .4), opacity .8s ease; }
.tut-flyclone.away { transform: translateX(130%) rotate(1.5deg); opacity: 0; }
.tut-flyclone.back { transition: opacity .5s ease; opacity: 1; }

/* Demo card (fallback when the viewer's real feed has no suitable card):
   drawn in the Live Stream card vocabulary (WO §3), clearly badged EXAMPLE. */
.tut-demo-card {
  position: absolute; z-index: 5; width: min(560px, 82vw);
  background: #1a1a1a; border: 1px solid #2a2a2a; border-left: 4px solid var(--tut-spine, #79a94f);
  border-radius: 10px; padding: 12px 14px; font-family: 'DM Sans', 'Figtree', sans-serif;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6);
  transition: top .5s ease, left .5s ease, opacity .35s ease; opacity: 0;
}
.tut-demo-card.on { opacity: 1; }
.tut-demo-badge {
  position: absolute; top: -10px; right: 12px; background: #c9a84c; color: #121212;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; padding: 2px 9px; border-radius: 999px;
}
.tut-demo-head { display: flex; align-items: center; gap: 9px; }
.tut-demo-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 7px; background: var(--tut-chip, rgba(121,169,79,.16)); color: var(--tut-text, #abcf8c); }
.tut-demo-chip svg { width: 15px; height: 15px; }
.tut-demo-title { font-size: .9rem; font-weight: 600; color: #e8ecf3; }
.tut-demo-body { font-size: .8rem; color: #8a93a6; margin: 6px 0 4px; }
.tut-demo-meta { font-size: .72rem; color: #8a93a6; display: flex; justify-content: space-between; }
.tut-demo-meta b { color: var(--tut-text, #abcf8c); font-weight: 600; }

/* The Studio tour's EXAMPLE run card (order T-SL v02): the Live Stream's OWN card, drawn by LSRunCard.html
   into the .nf-row chassis, laid over the top of the feed and badged EXAMPLE like the demo card above.
   #tut-layer scopes it above app.css's .nf-row (app.css loads after this file). Presentation only. */
#tut-layer .tut-demo-run { position: absolute; z-index: 5; box-shadow: 0 16px 44px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; }
#tut-layer .tut-demo-run.on { opacity: 1; }

/* ── The rail: subtitles + chrome, bottom-center. Subtitles are ALWAYS on (WO §2.8). ── */
.tut-rail {
  /* hugs the bottom edge (Joshua: use the blank space; the sub was covering on-screen detail) */
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  z-index: 7; width: min(760px, 92vw); pointer-events: auto;
}
.tut-sub {
  background: rgba(10, 10, 12, .88); border: 1px solid rgba(201, 168, 76, .22);
  border-radius: 12px; padding: 10px 18px; text-align: center;
  font-size: .94rem; line-height: 1.45; color: #f0ead9; font-weight: 500;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
.tut-controls {
  /* ONE line, always (Joshua): no wrap — the row sizes to its content (it may run wider than
     the subtitle box) and centers under the rail; labels compact on narrow viewports below. */
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 7px auto 0;
  flex-wrap: nowrap; white-space: nowrap; width: max-content; max-width: 97vw;
  transition: opacity .45s ease;   /* the idle fade (Joshua, Edits 3) — "make it fade in and out nicely" */
}
/* Idle: the row fades out and stops taking clicks, but the RAIL keeps its box, so moving the mouse
   down there is what brings it back. Fading the row rather than the rail is deliberate — see railWake(). */
#tut-layer.tut-rail-idle .tut-controls { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tut-controls { transition: opacity .2s ease; } }
.tut-btn { flex: none; }
.tut-langs, .tut-dots { flex: none; }
.tut-btn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(26, 26, 28, .92);
  border: 1px solid #33302a; color: #cfd4de; border-radius: 999px; padding: 7px 14px;
  font-family: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; letter-spacing: .02em;
}
.tut-btn:hover { border-color: #c9a84c; color: #e9d9a8; }
.tut-btn svg { width: 15px; height: 15px; }
.tut-btn[disabled] { opacity: .35; pointer-events: none; }
.tut-cc.on { border-color: rgba(201, 168, 76, .55); color: #c9a84c; }   /* CC toggle: lit while subtitles show */
.tut-cc-badge {                                                          /* literal CC in a rounded box (Joshua) — reads bigger than a glyph */
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 5px; padding: 1px 5px;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; line-height: 1.2;
}
#tut-layer.tut-cc-off .tut-sub { visibility: hidden; }                  /* CC off: hide the text, keep the rail's footprint stable */
/* Language selector: ONE button + a popup (Joshua) — no inline pill row. */
.tut-langwrap { position: relative; flex: none; }
.tut-lang-cur { font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.tut-lang-menu {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 110px; background: rgba(20, 20, 22, .97); border: 1px solid #33302a; border-radius: 10px;
  padding: 5px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); z-index: 8;
}
.tut-lang {
  display: block; width: 100%; text-align: center; background: none; border: none; border-radius: 7px;
  color: #8a93a6; padding: 8px 12px; font-family: inherit; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; cursor: pointer;
}
.tut-lang:hover { background: rgba(255, 255, 255, .06); color: #cfd4de; }
.tut-lang.on { background: rgba(201, 168, 76, .16); color: #c9a84c; }
.tut-dots { display: inline-flex; gap: 5px; align-items: center; margin: 0 4px; }
.tut-dot { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3e; transition: background .3s, transform .3s; cursor: pointer; position: relative; }
.tut-dot::after { content: ""; position: absolute; inset: -8px -2px; }   /* a larger transparent hit target so a 6px dot is clickable, without shifting the rail layout */
.tut-dot.done { background: rgba(201, 168, 76, .45); }
.tut-dot.now { background: #c9a84c; transform: scale(1.35); }
.tut-dot:hover { background: rgba(201, 168, 76, .7); }
/* The whole-tutorial countdown (Joshua): sits between the dots and Back, counts down to 0:00. */
.tut-timer {
  flex: none; margin: 0 2px; padding: 3px 9px; border-radius: 999px;
  background: rgba(26, 26, 28, .72); border: 1px solid #33302a;
  color: #9a9ea8; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; min-width: 3.1em; text-align: center;
}
.tut-timer:empty { display: none; }
.tut-mute .tut-slash { display: none; }
.tut-mute.off .tut-slash { display: block; }

/* ── ?tourdebug=1 banner (spec v02 item 4) ──
   Only ever rendered under the flag. Sits inside #tut-layer's stacking context in the same band as the
   rail (z-7) and the language popup (z-8) — top-left, because the coach card owns bottom-right and the
   rail owns bottom-centre. Deliberately ugly: it is a defect report for whoever is editing the surface,
   not part of the tour's visual language, and it should read as out-of-place. */
.tut-debug {
  position: absolute; z-index: 9; left: 14px; top: 14px; max-width: min(560px, 46vw);
  background: rgba(28, 12, 12, .96); border: 1px solid #a8443f; border-radius: 10px;
  padding: 9px 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); pointer-events: none;
}
.tut-debug-h {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #f0928c; margin-bottom: 5px;
}
.tut-debug-i {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .72rem; line-height: 1.45; color: #f3d9d7; word-break: break-word;
}

/* ── The Tutorials section inside the User Account modal (host a, WO §2.4a):
      rides the Announcements list idiom (.ann-list/.ann-item are app classes);
      these are only the tutorial-specific extras. ── */
.tut-item-row { display: flex; align-items: center; gap: 14px; }
.tut-item-play {
  /* rev C (Joshua): no shaded fill — a clean white outlined play; muted once watched */
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: none; border: 1.5px solid rgba(255, 255, 255, .65); color: #fff;
  transition: background .2s, transform .2s;
}
.ann-item:hover .tut-item-play { background: rgba(255, 255, 255, .08); transform: scale(1.06); }
.tut-item-play.watched { border-color: rgba(138, 147, 166, .45); color: #8a93a6; }
.tut-item-play svg { width: 17px; height: 17px; margin-left: 2px; }
.tut-item-main { flex: 1; min-width: 0; }
.tut-item-tags { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tut-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; color: #8a93a6; border: 1px solid #2a2a2a; border-radius: 999px; padding: 2px 9px;
}
.tut-tag svg { width: 11px; height: 11px; }
/* Series grouping: a sub-heading above each group of cards. Modeled on the modal's own sub-heading idiom
   (#profilemodal .pm-list-h — muted, uppercase, letter-spaced) so it reads as subordinate to .pm-sec-title
   rather than competing with it. The "Part N" tag is the one ACCENTED tag, because it carries the reading
   ORDER of a series — the only thing in the tag row a viewer has to act on. It reads --gold rather than a
   literal on purpose: the account modal remaps --gold to its blue inside the content pane, so the tag tints
   with the card hover it sits in instead of being the lone house-gold element in a blue surface. */
.tut-series + .tut-series { margin-top: 22px; }
.tut-series-h {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: #8a93a6; margin: 0 0 2px;
}
.tut-tag--part { color: var(--gold); border-color: var(--gold-soft); }

/* ── The opening-deck overlay (Batch 7) ──
   Same shape as the app's Announcements deck viewer (#annviewer): a full-screen frame above the account
   modal, with one close affordance in the top-right, letting the self-contained deck run its own nav inside.
   It sits just BELOW #tut-layer's 7000: the two are never up at once (the deck closes as the tour starts),
   and keeping the tour layer strictly on top preserves the "above every app popup" pin. */
#tut-deck { display: none; position: fixed; inset: 0; z-index: 6900; background: #000; }
#tut-deck.on { display: block; }
.tut-deck-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tut-deck-close {
  position: absolute; top: 14px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; background: rgba(20, 20, 20, .72); border: 1px solid rgba(255, 255, 255, .18);
  color: #e6e6e6; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.tut-deck-close:hover { background: rgba(40, 40, 40, .92); color: #fff; border-color: #fff; }
.tut-deck-close svg { width: 20px; height: 20px; }

@media (max-width: 900px) {   /* narrow: buttons go icon-only so the single line always fits */
  .tut-pause-lbl, .tut-next-lbl, .tut-prev-lbl, .tut-exit-lbl { display: none; }
  .tut-dots { display: none; }
}
@media (max-width: 1480px) {
  .tut-coach { bottom: 118px; }   /* the centered rail's end reaches the corner here — lift above it */
}
@media (max-width: 720px) {
  .tut-coach { max-width: 86vw; }
  .tut-sub { font-size: .88rem; }
}