/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE GUIDE — full redesign (Vero, 2026-09-27). Self-contained: does not read the in-game
   accent/theme variables (those are cosmetic-pack-dependent and this is a utility surface), just
   `html[data-theme]` — the real DOM stamp (mvc-os.js), dark being the default per pn-ds.css.

   MOUNT POINT: #pnGd-root is appended to document.body directly (see pn-guide.js), a sibling of
   .pn-folio, not a descendant of it — .pn-folio carries a CSS transform in the cased iPad layout,
   which would otherwise resolve this dialog's `position:fixed` against the folio's box instead of
   the viewport (same trap the existing Finder windows already avoid the same way).

   WIDTH: iPad width (1024px) on desktop per the brief ("a wide window — use the iPad width on
   desktop"), full-screen on phone. Left rail = sticky chapter index; right pane scrolls
   independently, so no outer page ever needs to scroll sideways.

   SPECIFICITY NOTE: every rule below is anchored on the `#pnGd-root` ID, not bare classes. The
   game's own CSS carries body[data-view="office"]-scoped rules with 20-30 chained :not(.class)
   clauses AND !important (e.g. the generic `button` skin, `p:not([class])` text colour) — those
   out-specificity a bare `.pnGd-x{ color:… !important }` even though both are !important, because
   ties between two !important declarations are broken by specificity, not source order. Prefixing
   every selector with the `#pnGd-root` ID guarantees this stylesheet wins regardless of which
   view was open when the Guide was launched — verified by computed style, not by reading the CSS
   (measured live: .pnGd-x resolved to rgb(246,248,251) on light theme before this fix). ══════ */

/* STACKING (2026-10-03): the House layer (#house, house.css) sits at z-index 2147480000 over the
   whole game. At 20000 the Guide opened UNDER it — invisible, yet aria-modal and holding focus —
   whenever it was launched while a House screen was up. The Guide is an explicit, player-opened
   modal and every "Take me there" closes it before navigating, so it sits above the House. */
#pnGd-root{
  position:fixed; inset:0; z-index:2147480100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(6,8,14,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  animation:pnGd-in .22s ease-out;
}
@keyframes pnGd-in{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){ #pnGd-root{ animation:none } }

/* ── theme tokens (dark = default, matches pn-ds.css's own default) ────────────────────────── */
#pnGd-root{
  --gd-bg:#14161d; --gd-bg2:#1b1e27; --gd-ink:#f2f4f9; --gd-muted:rgba(233,238,248,.72);
  --gd-line:rgba(255,255,255,.14); --gd-line-2:rgba(255,255,255,.24);
  --gd-accent:#ff6a2b; --gd-on-accent:#0b0a08;      /* dark-theme accent ink pair, SST §5f: 7.3–7.9:1 */
  --gd-tab-on:rgba(255,106,43,.16);
  --gd-focus:#8fd1ff;
}
html[data-theme="light"] #pnGd-root{
  --gd-bg:#fbfaf7; --gd-bg2:#f3f1eb; --gd-ink:#171310; --gd-muted:#584237;
  --gd-line:rgba(11,28,48,.14); --gd-line-2:rgba(11,28,48,.26);
  --gd-accent:#b4380d; --gd-on-accent:#fdfaf6;       /* light-theme accent ink pair, SST §5f: 4.66:1+ */
  --gd-tab-on:rgba(180,56,13,.10);
  --gd-focus:#0b4fa8;
}

#pnGd-root .pnGd-win{
  width:min(1024px,94vw); max-width:1024px; height:min(760px,88vh);
  background:var(--gd-bg) !important; color:var(--gd-ink) !important;
  border:1px solid var(--gd-line-2); border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.03) inset;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ── title bar (Finder-style, per UX_RULES Law 10) ──────────────────────────────────────────── */
#pnGd-root .pnGd-bar{
  flex:none; height:46px; display:flex; align-items:center; gap:12px; padding:0 14px;
  background:var(--gd-bg2) !important; border-bottom:1px solid var(--gd-line);
}
#pnGd-root .pnGd-dots{ display:inline-flex; gap:6px; }
#pnGd-root .pnGd-dots i{ width:11px; height:11px; border-radius:50%; display:block; }
#pnGd-root .pnGd-dots i:nth-child(1){ background:#ff5f57; }
#pnGd-root .pnGd-dots i:nth-child(2){ background:#febc2e; }
#pnGd-root .pnGd-dots i:nth-child(3){ background:#28c840; }
#pnGd-root .pnGd-title{ font-weight:800; font-size:14px; letter-spacing:.01em; flex:1; text-align:center; margin-right:64px; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-x{
  appearance:none; min-height:32px !important; height:32px;
  border:1px solid var(--gd-line-2) !important; background:transparent !important;
  color:var(--gd-ink) !important; font:600 12.5px/1 Inter,sans-serif !important; padding:0 14px !important;
  border-radius:999px !important; cursor:pointer;
}
#pnGd-root .pnGd-x:hover{ background:var(--gd-line) !important; }
#pnGd-root .pnGd-x:focus-visible{ outline:2px solid var(--gd-focus); outline-offset:2px; }

/* ── mobile chapter picker (hidden on desktop) ──────────────────────────────────────────────── */
#pnGd-root .pnGd-picker{ display:none; flex:none; padding:10px 14px; border-bottom:1px solid var(--gd-line); background:var(--gd-bg2) !important; }
#pnGd-root .pnGd-pickLbl{ display:block; font:700 11px/1 Inter,sans-serif; letter-spacing:.06em; color:var(--gd-muted) !important; margin-bottom:6px; }
#pnGd-root .pnGd-pick{
  width:100%; min-height:44px; border-radius:10px; border:1px solid var(--gd-line-2);
  background:var(--gd-bg) !important; color:var(--gd-ink) !important; font:600 14px/1 Inter,sans-serif !important; padding:0 12px;
}
#pnGd-root .pnGd-pick:focus-visible{ outline:2px solid var(--gd-focus); outline-offset:1px; }

/* ── two-pane body ───────────────────────────────────────────────────────────────────────────── */
#pnGd-root .pnGd-body2{ flex:1 1 auto; min-height:0; display:flex; }

#pnGd-root .pnGd-rail{
  flex:none; width:268px; border-right:1px solid var(--gd-line); background:var(--gd-bg2) !important;
  display:flex; flex-direction:column; overflow-y:auto;
}
#pnGd-root .pnGd-search{
  flex:none; margin:12px 12px 6px; min-height:40px; border-radius:10px; border:1px solid var(--gd-line-2);
  background:var(--gd-bg) !important; color:var(--gd-ink) !important; font:500 14px/1 Inter,sans-serif !important; padding:0 12px;
}
#pnGd-root .pnGd-search::placeholder{ color:var(--gd-muted); opacity:1; }
#pnGd-root .pnGd-search:focus-visible{ outline:2px solid var(--gd-focus); outline-offset:1px; }

#pnGd-root .pnGd-idx{ display:flex; flex-direction:column; padding:4px 8px 14px; }
#pnGd-root .pnGd-idxItem{
  appearance:none; border:0 !important; background:transparent !important; text-align:left;
  padding:9px 10px !important; border-radius:9px !important; cursor:pointer; min-height:0 !important;
  display:flex; flex-direction:column; gap:1px; margin:1px 0; width:100%;
}
#pnGd-root .pnGd-idxItem:hover{ background:var(--gd-line) !important; }
#pnGd-root .pnGd-idxItem.is-on{ background:var(--gd-tab-on) !important; }
#pnGd-root .pnGd-idxItem.is-on .pnGd-idxH{ color:var(--gd-accent) !important; }
#pnGd-root .pnGd-idxH{ font:700 13.5px/1.3 Inter,sans-serif !important; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-idxK{ font:600 10px/1 Inter,sans-serif !important; letter-spacing:.06em; text-transform:uppercase; color:var(--gd-muted) !important; }
#pnGd-root .pnGd-idxItem[hidden]{ display:none !important; }
#pnGd-root .pnGd-idxItem:focus-visible{ outline:2px solid var(--gd-focus); outline-offset:-2px; }

/* ── reading pane ────────────────────────────────────────────────────────────────────────────── */
#pnGd-root .pnGd-read{ flex:1 1 auto; min-width:0; overflow-y:auto; padding:26px 34px 60px; }
#pnGd-root .pnGd-here{
  padding:16px 18px; margin-bottom:22px; border-radius:12px;
  background:var(--gd-tab-on) !important; border:1px solid var(--gd-line-2);
}
#pnGd-root .pnGd-hereK{ display:block; font:700 10.5px/1 Inter,sans-serif !important; letter-spacing:.08em; text-transform:uppercase; color:var(--gd-accent) !important; margin-bottom:6px; }
#pnGd-root .pnGd-here h3{ margin:0 0 6px; font:800 19px/1.2 Inter,sans-serif !important; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-here p{ margin:0; font-size:14.5px !important; line-height:1.55; color:var(--gd-muted) !important; }

#pnGd-root .pnGd-chapter{ display:none; }
#pnGd-root .pnGd-chapter.is-on{ display:block; animation:pnGd-rise .28s ease-out; }
@keyframes pnGd-rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #pnGd-root .pnGd-chapter.is-on{ animation:none } }

#pnGd-root .pnGd-eyebrow{ display:block; font:700 11px/1 Inter,sans-serif !important; letter-spacing:.08em; text-transform:uppercase; color:var(--gd-accent) !important; margin-bottom:10px; }
#pnGd-root .pnGd-h{ margin:0 0 14px; font:900 clamp(26px,3.4vw,34px)/1.08 Inter,sans-serif !important; letter-spacing:-.02em; color:var(--gd-ink) !important; max-width:26ch; }
#pnGd-root .pnGd-body{ max-width:64ch; font-size:16px !important; line-height:1.55; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-body p{ margin:0 0 14px; font-size:16px !important; line-height:1.55 !important; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-body b{ color:var(--gd-ink) !important; font-weight:800; }

#pnGd-root .pnGd-tipsHead{ margin:26px 0 10px; font:800 13px/1 Inter,sans-serif !important; letter-spacing:.02em; color:var(--gd-ink) !important; }
#pnGd-root .pnGd-tips{ margin:0; padding:0; list-style:none; max-width:64ch; display:flex; flex-direction:column; gap:10px; }
#pnGd-root .pnGd-tips li{
  position:relative; padding-left:20px; font-size:15px !important; line-height:1.5; color:var(--gd-ink) !important;
}
#pnGd-root .pnGd-tips li::before{ content:"\2192"; position:absolute; left:0; top:0; color:var(--gd-accent); font-weight:800; }

#pnGd-root .pnGd-goRow{ margin-top:26px; }
#pnGd-root .pnGd-take{
  appearance:none; border:1px solid var(--gd-accent) !important; background:var(--gd-accent) !important;
  color:var(--gd-on-accent) !important; font:800 14px/1 Inter,sans-serif !important; padding:0 20px !important;
  border-radius:999px !important; min-height:44px !important; cursor:pointer;
}
#pnGd-root .pnGd-take:hover{ filter:brightness(1.06); }
#pnGd-root .pnGd-take:focus-visible{ outline:2px solid var(--gd-focus); outline-offset:2px; }

#pnGd-root .pnGd-gloss{ max-width:64ch; margin:0; }
#pnGd-root .pnGd-gloss dt{ font:800 14.5px/1.3 Inter,sans-serif !important; color:var(--gd-ink) !important; margin-top:16px; }
#pnGd-root .pnGd-gloss dt:first-child{ margin-top:0; }
#pnGd-root .pnGd-gloss dd{ margin:3px 0 0; font-size:14.5px !important; line-height:1.55; color:var(--gd-muted) !important; }

/* ── scrollbars (keep them from being invisible on either theme) ───────────────────────────── */
#pnGd-root .pnGd-rail::-webkit-scrollbar, #pnGd-root .pnGd-read::-webkit-scrollbar{ width:9px; }
#pnGd-root .pnGd-rail::-webkit-scrollbar-thumb, #pnGd-root .pnGd-read::-webkit-scrollbar-thumb{ background:var(--gd-line-2); border-radius:6px; }

/* ── phone (<=760px): full-screen, chapter picker replaces the rail ─────────────────────────── */
@media (max-width:760px){
  #pnGd-root{ padding:0; }
  #pnGd-root .pnGd-win{ width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:100dvh; border-radius:0; border-width:0; }
  #pnGd-root .pnGd-picker{ display:block; }
  #pnGd-root .pnGd-rail{ display:none; }
  #pnGd-root .pnGd-title{ margin-right:52px; }
  #pnGd-root .pnGd-read{ padding:20px 18px 48px; }
  #pnGd-root .pnGd-h{ font-size:clamp(24px,7vw,30px) !important; }
  #pnGd-root .pnGd-body{ max-width:100%; }
  #pnGd-root .pnGd-tips{ max-width:100%; }
  #pnGd-root .pnGd-gloss{ max-width:100%; }
}