/* ============================================================================
   guide.css — Help-Center app-shell for LESSON pages
   Persistent topbar + left sidebar (lesson nav) + mobile drawer + prev/next.
   Injected/wired by /assets/guide-nav.js. Uses site.css design tokens.
   Loaded ONLY by /guides/v2/ lesson pages (not the marketing/blog/legal set).
   ============================================================================ */

/* Topbar (always the deep-purple guide bar, both themes — matches the index) */
.g-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:11px clamp(14px,4vw,24px);background:#3a1d6e;color:#fff}
.g-topbar .l{display:flex;align-items:center;gap:12px;min-width:0}
.g-topbar .r{display:flex;align-items:center;gap:14px}
.g-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;color:#fff;text-decoration:none;white-space:nowrap}
.g-brand:hover{text-decoration:none}
.g-brand .logo{width:30px;height:30px;border-radius:8px;background:var(--grad-brand);
  display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.g-links{display:flex;align-items:center;gap:18px;font-size:.9rem}
.g-links a{color:#fff;opacity:.9;text-decoration:none}
.g-links a:hover{opacity:1;text-decoration:none}
.g-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:8px;overflow:hidden}
.g-toggle button{background:transparent;color:#fff;border:0;padding:0 12px;min-height:36px;
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;opacity:.7}
.g-toggle button.on{background:#fff;color:#3a1d6e;opacity:1}
.g-theme,.g-burger{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:8px;width:38px;height:36px;cursor:pointer;font-size:1rem;display:inline-flex;
  align-items:center;justify-content:center}
.g-burger{display:none}

/* Layout: sidebar + reading column (+ optional right TOC). Full-width — fills 100% of the screen. */
.g-layout{max-width:none;margin:0 auto;display:grid;grid-template-columns:262px minmax(0,1fr);align-items:start}
@media(min-width:1160px){.g-layout.has-toc{grid-template-columns:262px minmax(0,1fr) 236px}}
.g-sidebar{position:sticky;top:58px;align-self:start;max-height:calc(100vh - 58px);overflow-y:auto;
  border-right:1px solid var(--border);background:var(--surface);padding:16px 10px 40px}
.g-filter{width:100%;min-height:38px;padding:8px 12px;margin:4px 4px 10px;font:inherit;font-size:.85rem;
  color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:8px}
.g-filter:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 24%,transparent)}
.g-sec{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:15px 12px 6px}
.g-link{display:block;padding:7px 12px;border-radius:8px;font-size:.9rem;color:var(--ink);text-decoration:none;line-height:1.35}
.g-link:hover{background:var(--accent-soft);color:var(--brand-ink);text-decoration:none}
.g-link.on{background:var(--accent-soft);color:var(--brand-ink);font-weight:700}
.g-link .n{font-weight:800;color:var(--brand-ink);margin-right:6px}
.g-link.home{font-weight:700;color:var(--brand-ink);margin-bottom:4px}
.g-link.hide{display:none}

/* Reading column: fills the whole content track (full-width) */
.guide main.container--prose{margin-inline:0;max-width:none;
  padding:clamp(20px,3vw,40px) clamp(20px,3.5vw,48px) 72px}

/* Right-side "On this page" table of contents (Make-style) */
.g-toc{position:sticky;top:74px;align-self:start;max-height:calc(100vh - 92px);overflow-y:auto;
  padding:22px 8px 22px 16px;font-size:.85rem;border-left:1px solid var(--border)}
.g-toc-h{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 10px 10px}
.g-toc a{display:block;padding:5px 10px;border-radius:6px;color:var(--muted);text-decoration:none;
  border-left:2px solid transparent;line-height:1.35;margin:1px 0}
.g-toc a:hover{color:var(--brand-ink);text-decoration:none}
.g-toc a.on{color:var(--brand-ink);border-left-color:var(--brand);background:var(--accent-soft);font-weight:600}
@media(max-width:1159px){.g-toc{display:none}}

/* Prev / next */
.g-prevnext{display:flex;gap:var(--s4);margin-top:var(--s10);flex-wrap:wrap}
.g-prevnext a{flex:1 1 220px;min-width:0;border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s4);background:var(--surface);text-decoration:none;color:var(--ink)}
.g-prevnext a:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none}
.g-prevnext .dir{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.g-prevnext .ttl{font-weight:700;color:var(--brand-ink);margin-top:3px}
.g-prevnext .nx{text-align:right}

/* Mobile drawer */
.g-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:28;opacity:0;visibility:hidden;transition:opacity .2s}
.g-backdrop.open{opacity:1;visibility:visible}
@media(max-width:900px){
  .g-layout{grid-template-columns:minmax(0,1fr)}
  .g-burger{display:inline-flex}
  .g-links{display:none}
  .g-sidebar{position:fixed;top:0;left:0;bottom:0;width:284px;max-height:100vh;z-index:29;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);
    border-right:1px solid var(--border)}
  .g-sidebar.open{transform:none}
}
@media(prefers-reduced-motion:reduce){.g-sidebar,.g-backdrop{transition:none}}