/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PN ONBOARDING — first-run tour + "Guide" glossary extras (CEO, 2026-08-31)
   "on user first sign up/sign in you need to introduce a very simple step by step intro to the
   game, what each part does, what to look for — a very simple and always available USER Guide."

   SELF-CONTAINED, APPEND-ONLY, NAMESPACED: every rule below is scoped under `.pno-` (or the ids
   `#pno-tour`/`#pno-scrim`). It touches nothing the game already owns, cannot leak into any other
   surface, and can be deleted wholesale with zero effect on boot/gate/cascade. It deliberately
   REUSES the canonical `.lg-panel`/`.lg-titlebar`/`.lg-dot`/`.lg-btn` glass family (pn-glass.css)
   for the tour card, so it inherits AA-in-every-theme for free instead of re-deriving it — text
   inside reads the panel's OWN `--_ink`/`--lg-ink-dim` tokens (set by `.lg-panel`/`.lg-light`),
   never the page's `--mvc-*` tokens, so it stays correct however the panel itself is themed.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE SPOTLIGHT SCRIM ── one element does both jobs: OCCLUSION LAW (fully dims what's beneath,
   click anywhere on it = skip, matching the existing help/guide dismiss-on-backdrop-click idiom)
   and the "hole" is the ring below it, not a second element — no compositing tricks, no masks. */
/* ── THE SCRIM ── a full-screen click-catcher (click anywhere = skip). It is TRANSPARENT for an
   anchored step — the dim is punched around the target by the ring's box-shadow below, so the
   spotlighted content stays SHARP and fully readable (CEO, live-play: "you still don't show the
   actual content it's all blurred"). It only dims the whole screen itself on a CENTRED step (the
   welcome/closing cards, which have no target to spotlight). No blur, ever — blur was the bug. */
#pno-scrim{
  position:fixed; inset:0; z-index:10440;
  background:transparent;
  cursor:pointer; border:0; padding:0; margin:0;
}
#pno-scrim.pno-dim{ background:rgba(5,8,14,.62); }
body.mvc-light #pno-scrim.pno-dim{ background:rgba(20,14,8,.42); }

/* ── THE RING — sits at the live target's own rect (computed at runtime, never guessed). It carries
   BOTH the accent outline AND the dim, the dim as a huge spread box-shadow so everything OUTSIDE
   the ring darkens while the target inside the ring shows through crisp and un-blurred — a real
   spotlight hole, no masks. pointer-events:none: the scrim beneath catches the click, on purpose,
   so a tour cannot be half-dismissed by a stray tap on the very thing it is explaining. */
.pno-ring{
  position:fixed; z-index:10441; pointer-events:none;
  border-radius:14px;
  border:2px solid var(--accent, var(--acc,#f97316));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, var(--acc,#f97316)) 30%, transparent),
             0 0 0 9999px rgba(5,8,14,.62);
  transition:left .32s cubic-bezier(.22,1,.36,1), top .32s cubic-bezier(.22,1,.36,1),
             width .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1);
}
body.mvc-light .pno-ring{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, var(--acc,#f97316)) 30%, transparent),
             0 0 0 9999px rgba(20,14,8,.42);
}
@media(prefers-reduced-motion:reduce){ .pno-ring{ transition:none; } }

/* ── THE CARD — the coachmark itself. Finder-glass window (.lg-panel--window), same family as
   every other popup in the product (UX_RULES Law 10), progress dots + Back/Next/Skip in the one
   button hierarchy (.lg-btn). No .lg-panel--pad (fixed body padding below instead, so the titlebar
   sits flush per the family's own rule). */
.pno-card{
  position:fixed; z-index:10442;
  width:min(340px,88vw);
  animation:pnoIn .22s cubic-bezier(.22,1,.36,1) both;
}
@media(prefers-reduced-motion:reduce){ .pno-card{ animation:none; } }
@keyframes pnoIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }

/* ── HEADER: progress + one real close button. Replaces a fake macOS titlebar whose red
   "traffic light" was secretly the close control (2026-09-26 — "buttons and UX is weird"). */
.pno-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 12px 0 18px;
}
.pno-count{
  font:700 11px/1 var(--lg-mono,JB,ui-monospace,monospace); letter-spacing:.12em;
  text-transform:uppercase; color:var(--lg-ink-dim, rgba(234,241,251,.68));
}
/* Scoped under .pno-card so the game's global button rules cannot shave it — it measured 39px
   wide against a 40px declaration before this. 44px is the tap floor every other control uses. */
.pno-card .pno-x{
  margin-left:auto; flex:none; box-sizing:border-box; padding:0;
  width:44px; height:44px; min-width:44px; min-height:44px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; cursor:pointer;
  color:var(--lg-ink-dim, rgba(234,241,251,.68)); font-size:15px; line-height:1;
}
.pno-x:hover{ background:rgba(255,255,255,.08); color:var(--_ink, var(--lg-ink,#eef3fb)); }
.pno-x:focus-visible{ outline:2px solid var(--accent, var(--acc,#f97316)); outline-offset:2px; }
.lg-light .pno-x:hover{ background:rgba(0,0,0,.06); }

.pno-body{ padding:10px 18px 18px; }
.pno-eyebrow{
  display:block; font:800 9.5px/1 var(--lg-mono,JB,ui-monospace,monospace); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent, var(--acc,#f97316)); margin:0 0 8px;
}
/* !important only to beat pn-type-cabinet's !important window-heading size */
#pno-card.pno-card h3.pno-title{ margin:0 0 8px; font-size:18px !important; line-height:1.25; color:var(--_ink, var(--lg-ink,#eef3fb)); }
.pno-card p{ margin:0; font-size:14px; line-height:1.55; color:var(--lg-ink-dim, rgba(234,241,251,.68)); }

.pno-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--lg-brd, rgba(255,255,255,.12));
}
.pno-dots{ display:flex; gap:6px; align-items:center; }
.pno-dots i{
  display:block; width:6px; height:6px; border-radius:50%;
  background:var(--lg-ink-dim, rgba(255,255,255,.26)); opacity:.55; flex:none;
}
.pno-dots i.on{ background:var(--accent, var(--acc,#f97316)); opacity:1; width:16px; border-radius:4px; }
.pno-btns{ display:flex; gap:8px; margin-left:auto; }
/* 40px, not 36: these are the only controls on screen while the tour is open. */
.pno-btns .lg-btn{ min-height:40px; padding:0 16px; font-size:13px; }
/* Skip is an exit, not a step — a quiet text link on its own side, so it can never be mistaken
   for Back (they used to be identical outlined buttons sitting side by side). */
/* !important only to beat the game's own !important `button` border rule in style-01.css */
#pno-card .pno-skip{
  background:none !important; border:0 !important; box-shadow:none !important; padding:10px 4px; min-height:40px; cursor:pointer;
  font:600 13px/1 inherit; font-family:inherit;
  color:var(--lg-ink-dim, rgba(234,241,251,.68));
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.25);
}
.pno-skip:hover{ color:var(--_ink, var(--lg-ink,#eef3fb)); }
.pno-skip:focus-visible{ outline:2px solid var(--accent, var(--acc,#f97316)); outline-offset:2px; border-radius:6px; }

/* the welcome/closing steps have no target on screen — pn-onboarding.js computes their centred
   left/top in px (see place()); no CSS transform-based centering here on purpose — it would
   collide with the entrance animation's own `transform` end-keyframe (see @keyframes pnoIn). */

/* narrow phones: keep the card off the very edge, never under the device bezel */
@media (max-width:420px){
  .pno-card{ width:min(320px,90vw); }
}

/* ── "REPLAY THE TOUR" + THE GLOSSARY, injected into the EXISTING always-available Guide panel
   (window.pnGuideOpen) rather than duplicating it — see pn-onboarding.js. `.pn-guide` is a
   deliberate fixed-dark seam (style-01.css §THE GUIDE — no light variant), so this matches its
   OWN hardcoded palette exactly rather than reading page theme tokens, which is what keeps every
   other section of that same panel legible. */
.pno-extra{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }

/* the ordered "do these in order" checklist — a numbered rail (not a bullet list) so a brand-new
   player reads it as a literal sequence of actions, matching the tour's own "Step N of 7" idiom. */
.pno-firstweek{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pno-firstweek li{ display:flex; align-items:flex-start; gap:10px; }
.pno-fw-n{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-top:1px; border-radius:50%;
  font:800 11px/1 var(--lg-mono,JB,ui-monospace,monospace); color:#0B0E14;
  background:var(--accent, var(--acc,#f97316));
}
.pno-firstweek b{ display:block; font-size:13.5px; font-weight:700; color:#F6F3FF; }
.pno-firstweek span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.45; color:rgba(234,241,251,.68); }

.pno-glossary{ margin:0; }
.pno-glossary dt{ margin-top:12px; font-weight:700; font-size:13.5px; color:#F6F3FF; }
.pno-glossary dt:first-child{ margin-top:0; }
.pno-glossary dd{ margin:3px 0 0; font-size:13px; line-height:1.5; color:rgba(234,241,251,.72); }
.pno-replay{ margin-top:16px; }
.pno-replay .lg-btn{ width:100%; justify-content:center; }