/* Qizmit field guide - the reader restyled onto the site's tokens (2026-10-01). Loaded AFTER reader.css (unlayered, so it wins).
   --pillar is set by index.html from ?p=<key>; everything accent-coloured derives from it, so each pillar's guide wears its own colour. */
:root, :root[data-theme=dark] {
  --bg:#0f121c; --sidebar:#0b0d14; --surface:#181C29; --surface-raised:#202638; --text:#e7e9f2; --muted:#a3abc0; --faint:#8790a8; --line:#2c3350;
  --accent: color-mix(in srgb, var(--pillar,#8F12C4) 58%, #fff); --link: var(--accent);
  --accent-bg: color-mix(in srgb, var(--pillar,#8F12C4) 20%, var(--surface));
  --header: rgba(15,18,28,.92); --code:#b9c8ff; --shadow:0 18px 65px #0008;
  --glow: color-mix(in srgb, var(--pillar,#8F12C4) 34%, transparent);
}
:root[data-theme=light] {
  --bg:#f2f0f6; --sidebar:#ffffff; --surface:#ffffff; --surface-raised:#f3f1f7; --text:#1f1c26; --muted:#5f5970; --faint:#6f6980; --line:#e2dde9;
  --accent: color-mix(in srgb, var(--pillar,#8F12C4) 92%, #000); --link: var(--accent);
  --accent-bg: color-mix(in srgb, var(--pillar,#8F12C4) 11%, #fff);
  --header: rgba(255,255,255,.93); --code:#2b4a9b; --shadow:0 18px 65px #3a2f5025;
  --glow: color-mix(in srgb, var(--pillar,#8F12C4) 22%, transparent);
}
body { font-family: "Noto Sans", Inter, ui-sans-serif, system-ui, sans-serif; }
.primary-button { color:#fff; background: var(--pillar,#8F12C4); box-shadow:0 8px 24px -8px var(--glow); }
:root[data-theme=dark] .primary-button { background: color-mix(in srgb, var(--pillar,#8F12C4) 78%, #000); }
/* brand tile: pillar colour, the pillar's icon (Identic keeps its own chevron mark) */
.brand .tile { letter-spacing:0; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg, color-mix(in srgb,var(--pillar,#8F12C4) 85%,#fff), var(--pillar,#8F12C4)); color:#fff; font-size:16px; box-shadow:0 6px 18px -6px var(--glow); flex:none; }
.brand .tile img { width:36px; height:36px; display:block; }
.brand .tile.mark { background:none; box-shadow:none; }
/* a coloured rule under the top bar + a glow behind the home hero */
.topbar { border-bottom:0; box-shadow:0 1px 0 var(--line); }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--pillar,#8F12C4), color-mix(in srgb,var(--pillar,#8F12C4) 25%, transparent) 55%, transparent); }
.reading-progress > div { background: var(--pillar,#8F12C4); }
.home-page main { background: radial-gradient(900px 380px at 82% -40px, var(--glow), transparent 70%); }
.hero-art { position:absolute; right:42px; top:26px; font-size:150px; line-height:1; color:var(--pillar,#8F12C4); opacity:.10; pointer-events:none; }
.home-page #home-intro { position:relative; }
.home-page #home-intro h1 { font-size:clamp(30px,3.3vw,44px); max-width:880px; }
.home-page #home-intro h1 span { background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 45%, var(--muted))); -webkit-background-clip:text; background-clip:text; color:transparent; }
.edition { color:var(--muted); }
.stats-grid { border:0; padding:0; gap:14px; }
.stats-grid > div { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px !important; position:relative; overflow:hidden; }
.stats-grid > div::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pillar,#8F12C4); }
.stats-grid strong { color:var(--accent); font-weight:700; letter-spacing:-.5px; }
.anchor-card { border-radius:16px; padding:22px; background:linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--pillar,#8F12C4) 7%, var(--surface))); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
.anchor-card:hover { border-color:var(--pillar,#8F12C4); transform:translateY(-3px); box-shadow:0 18px 40px -18px var(--glow); }
.anchor-card .card-symbol { position:absolute; right:18px; top:16px; font-size:22px; color:var(--accent); opacity:.85; }
.anchor-card.two .card-symbol, .anchor-card.three .card-symbol { opacity:.85; }
.anchor-card .card-link, .card-kicker { color:var(--accent); }
.nav-group a[aria-current=page] { border-left-color:var(--pillar,#8F12C4); }
.chip { border-color:color-mix(in srgb,var(--pillar,#8F12C4) 40%, var(--line)); }
.prose a { color:var(--link); }
.prose h2 { border-bottom:1px solid var(--line); padding-bottom:8px; }
.prose table th { background:var(--accent-bg); }
.prose blockquote { border-left-color:var(--pillar,#8F12C4); background:var(--accent-bg); }
/* the guide switcher (top bar) */
.fg-switch { position:relative; }
.fg-switch > summary { list-style:none; cursor:pointer; border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:12px; color:var(--muted); background:var(--surface); display:flex; gap:8px; align-items:center; }
.fg-switch > summary::-webkit-details-marker { display:none; }
.fg-switch[open] > summary { color:var(--text); border-color:var(--pillar,#8F12C4); }
.fg-menu { position:absolute; right:0; top:calc(100% + 8px); width:260px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; z-index:60; }
.fg-menu a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; text-decoration:none; font-size:13px; color:var(--text); }
.fg-menu a i { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:12px; background:var(--c); }
.fg-menu a:hover, .fg-menu a[aria-current=true] { background:var(--accent-bg); }
.fg-menu small { color:var(--muted); display:block; font-size:10px; }
.fg-home { margin-left:4px; font-size:12px; color:var(--muted); text-decoration:none; }
.fg-home:hover { color:var(--accent); }
@media (max-width:760px) { .hero-art { font-size:90px; right:14px; } .fg-switch > summary span { display:none; } .fg-home { display:none; } }

.sidebar-footer { gap:8px; }
.sidebar-footer > span:last-of-type { margin-left:0; letter-spacing:0; font-size:11px; }
.qzNavGuide { font-weight:600; }