/* ═══════════════════════════════════════════════════════════════════
   SAOS · Domain — shared site layer (Task 14-b, mobile revolution)
   One mobile-nav discipline for every front of this home:
   - 44px minimum touch targets (Apple HIG / Material)
   - burger dropdown for the .nhead fronts, built from each page's own
     .links (progressive enhancement: no JS → no hiding)
   - wallet .tabs wrap instead of hiding tabs beyond the edge
   - safe-area insets for notched phones, focus-visible rings,
     no horizontal scroll, zinc+gold palette (no indigo, no blue)
   Loaded AFTER each page's inline styles, so these rules win ties.
   ═══════════════════════════════════════════════════════════════════ */

/* ── injected burger button (all viewports, hidden on wide screens) ── */
.sitenav-btn {
  display: none;
  margin-inline-start: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.sitenav-btn svg { width: 20px; height: 20px; pointer-events: none; }
.sitenav-btn:focus-visible { outline: 2px solid #d4af37; outline-offset: 2px; }

/* ── dropdown panel (hidden by default; opened by .nav-open on header) ──
   Task 15-a: the open-state + link styling live OUTSIDE the width media —
   the panel can only open when a burger is visible and clicked, so this is
   viewport-independent; it fixes the market band 761–900px where the page
   hides its own link row but the shared burger appears at ≤900px. */
.sitenav-panel { display: none; }
html.js .nav-open .sitenav-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex-basis: 100%;
  padding: 6px 0 10px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  margin-top: 10px;
}
.sitenav-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--mut, #a1a1aa);
  text-decoration: none;
  border: 1px solid transparent;
}
.sitenav-panel a:hover, .sitenav-panel a[aria-current="page"] {
  color: var(--gold, #d4af37);
  background: rgba(212, 175, 55, .08);
}

@media (max-width: 760px) {
  /* JS is present → collapse the inline row into the burger panel */
  html.js .nhead .sitenav-btn { display: flex; }
  html.js .nhead .links { display: none; }
  .nhead .wrap { flex-wrap: wrap; }

  /* wallet: never hide tabs beyond the edge — wrap them, 44px targets
     (nav.tabs matches the page's own higher-specificity rule; this file
     loads after the inline styles, so the tie breaks our way) */
  nav.tabs, .tabs { flex-wrap: wrap; gap: 6px; }
  .tabs a, .tabs button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* keep header controls thumb-sized (truth.langbtn, backlinks) */
  header .langbtn, header .backlink, header a[class] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* inputs never trigger the iOS focus zoom */
  input, select, textarea { font-size: max(16px, 1em); }

  /* table cells keep enough air on phones */
  table { font-size: 12.5px; }
}

/* ── safe-area insets (notched phones) ── */
header.nhead, header.gate-head, header.site {
  padding-top: max(14px, env(safe-area-inset-top));
}
body > footer, footer {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* ── accessibility: visible focus everywhere, no scroll bleed ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
  border-radius: 4px;
}
html { overflow-x: clip; }

/* ── quiet scrollbars for scrollable rails (desktop browsers) ── */
.tabs, .mobilenav { scrollbar-width: thin; scrollbar-color: #3f3f46 transparent; }
.tabs::-webkit-scrollbar, .mobilenav::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb, .mobilenav::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }

/* ── the SPA front (index.html): bring its own burger to 44px ── */
#burger { width: 44px; height: 44px; }
#mobnav a { min-height: 44px; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Task 15-a — hub/ inner tree + market: one design-token block.
   Scoped to body.sop and header.sop-float so the verified root fronts
   keep byte-for-byte the behavior they were proven with. Zinc+gold
   only (no indigo, no blue), zero JS dependencies — same doctrine.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --sop-bg: #09090b; --sop-panel: #18181b; --sop-border: #27272a;
  --sop-tx: #fafafa; --sop-mut: #a1a1aa; --sop-dim: #71717a;
  --sop-gold: #d4af37; --sop-purple: #a78bfa; --sop-green: #22c55e;
  --sop-radius: 12px; --sop-radius-sm: 9px; --sop-gap: 14px;
  --sop-speed: .15s; --sop-navh: 76px;
}

/* sticky-footer discipline: short pages keep the footer at the fold */
body.sop { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.sop > footer { margin-top: auto; }

/* header row: wrap instead of overflow on phones; burger is a peer */
body.sop header.top { flex-wrap: wrap; row-gap: 8px; }
/* big static promo headers (hub index): burger docks top inline-end */
body.sop > header.nhead:not(.top) { position: relative; }
body.sop > header.nhead:not(.top) .sitenav-btn {
  position: absolute; top: 18px; inset-inline-end: 22px; margin: 0;
}

/* typography rhythm: one line-height/balance policy over the tree
   (pages keep their own sizes — these are fallbacks, not overrides) */
body.sop { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.sop :is(h1, h2, h3, h4) { line-height: 1.25; text-wrap: balance; }
body.sop main p, body.sop main li { line-height: 1.65; }
/* anchored headings never hide under the sticky/fixed bars */
body.sop :is(h2, h3)[id], body.sop :is(section, div, li)[id] { scroll-margin-top: var(--sop-navh); }

/* one motion speed for every interactive element of the tree */
body.sop :is(a, button, summary, [class*="btn"], [class*="card"]) {
  transition: color var(--sop-speed) ease, background-color var(--sop-speed) ease,
    border-color var(--sop-speed) ease, transform var(--sop-speed) ease,
    opacity var(--sop-speed) ease, box-shadow var(--sop-speed) ease;
}

/* overflow guards: wide tables/code scroll inside themselves, the
   page itself never scrolls sideways (html clip is already global).
   Long receipt hashes inside cells must wrap, or a table's
   min-content width drags the whole page 150px past the viewport
   (measured on receipts/ at 390px — the one real overflow found). */
body.sop pre { max-width: 100%; overflow-x: auto; }
body.sop table { max-width: 100%; }
body.sop td, body.sop th { overflow-wrap: anywhere; }
body.sop img, body.sop video { max-width: 100%; height: auto; }
body.sop main { overflow-x: clip; }

/* floating burger for pages without any header/nav (explainer scenes,
   posters, deck): fixed, out of flow — cannot disturb page layouts */
header.sop-float {
  position: fixed; top: 14px; inset-inline-start: 14px; z-index: 1000;
  width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: none;
}
header.sop-float .sitenav-btn { display: none; }
header.sop-float .sitenav-panel {
  position: fixed; top: 64px; inset-inline-start: 14px;
  width: min(300px, 86vw); max-height: 76vh; overflow: auto;
  background: var(--sop-panel); border: 1px solid var(--sop-border);
  border-radius: var(--sop-radius); padding: 8px; margin: 0;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}
@media (max-width: 760px) {
  html.js header.sop-float .sitenav-btn { display: flex; }
  html.js header.sop-float.nav-open .sitenav-panel {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  }
}

/* market fixed bars: their own CSS drops the link row at ≤900px —
   show the shared burger in exactly that band so no viewport is
   left navless; safe-area padding for notched phones */
@media (max-width: 900px) {
  html.js nav.nhead .sitenav-btn { display: flex; }
}
nav.nhead { padding-top: env(safe-area-inset-top); }

/* A4 poster pages (the two one-pagers): their .page sheet is a fixed
   210mm (≈794px) print canvas — scale it to the phone instead of
   scrolling sideways. zoom is layout-aware (a transform would leave
   the 794px layout box behind); engines without :has/zoom keep
   today's behavior, so this is pure enhancement. */
@media (max-width: 820px) {
  html.js body:has(header.sop-float) .page { zoom: calc(100vw / 794px); }
}

/* print: hide the interactive layer; the pages carry their own
   print palettes (white bg, dark ink) since the weave-mirror birth */
@media print {
  body.sop .sitenav-btn, body.sop .sitenav-panel,
  header.sop-float, nav.nhead .sitenav-btn, nav.nhead .sitenav-panel {
    display: none !important;
  }
}

/* ═══ Task 15-a completion: numerics + opt-in scale/rhythm tokens ═══
   tabular-nums: repo-wide measurement shows NO body.sop page sets
   font-variant-numeric (only the root fronts, which carry no .sop), so
   this rule cannot collide — receipt hashes and money digits align in
   every table column instead of jittering.
   The 4px spacing steps and the 6-step type scale ship as opt-in
   tokens: hub pages style their own h1/h2 font-sizes directly
   (measured), so sizes stay page-owned — a page adopts a token only
   when it chooses to; zero rendering change until then. */
:where(body.sop) :is(td, th) { font-variant-numeric: tabular-nums; }
:root {
  --sop-s1: 4px; --sop-s2: 8px; --sop-s3: 12px; --sop-s4: 16px;
  --sop-s6: 24px; --sop-s8: 32px; /* 4px spacing rhythm */
  --sop-fs-xs: 12px; --sop-fs-sm: 13px; --sop-fs-md: 15px;
  --sop-fs-lg: 18px; --sop-fs-xl: 22px; --sop-fs-2xl: 28px; /* type scale */
}