/* ============================================================================
   WARDEN — shared design system
   ----------------------------------------------------------------------------
   Extracted verbatim from the tokens and components already shipping across the
   14 pages, so adopting this changes NOTHING visually. It removes ~2,600 lines
   of duplicated inline CSS and adds the four things that were genuinely absent:
   a real cross-page <nav>, active-page highlighting, @media (hover:hover)
   guards, and menu scroll-locking.

   Page-specific CSS (risk matrix, hazard log, ledger rows, feed component,
   demo console) deliberately stays in its own page — it is not shared, and
   hoisting it here would make this file a dumping ground.

   CSP: moving these rules out of <style> is step 1 of 2 toward dropping
   style-src 'unsafe-inline'. Step 2 is the 111 inline style="" attributes still
   in the HTML — until those go, 'unsafe-inline' must stay in style-src.
   ========================================================================== */

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root{
  --bg:#000; --panel:#0B0D0F; --panel-2:#0e1116;
  --ink:#F4F5F6; --muted:#9BA0A7; --faint:#83878E;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.06);
  --accent:#A8B44C; --accent-ink:#A8B44C;
  --accent-soft:rgba(168,180,76,.09); --accent-line:rgba(168,180,76,.34);
  --ok:#7FBF8A; --ok-line:rgba(127,191,138,.4);
  --mod:#C9B24C; --high:#E0954E; --sev:#EF8B78; --sev-line:rgba(229,87,63,.4);
  --sans:'Switzer',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);

  /* safe-area, resolved once so every rule below can compose against it */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  --gutter:clamp(22px,5vw,40px);
  --bar-h:66px;
}

/* ── reset + base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* clip, NOT hidden. `hidden` on the root makes the viewport a scroll container,
   which silently kills position:sticky on the header and swallows anchor jumps.
   `clip` prevents the scroll without creating the container. It also fails
   loudly in testing instead of masking a real overflow bug. */
html,body{overflow-x:clip}

body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.6; font-size:16px; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 55% at 80% 100%, rgba(168,180,76,.07), rgba(168,180,76,0) 60%);
}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* iOS auto-zooms the whole page when a focused input is under 16px. */
input,select,textarea,button{font-family:inherit;font-size:16px}

.wrap{
  max-width:940px;margin:0 auto;
  padding-left:max(var(--gutter),var(--sal));
  padding-right:max(var(--gutter),var(--sar));
}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#000;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px}
.skip:focus{left:0}

/* ── header + cross-page nav ──────────────────────────────────────────────── */
header.bar{
  /* z-index 5, not 50 — matches the established site baseline. The value-diff
     pre-flight found this was the ONLY real conflict across six pages; raising it
     would have forced six override files to fight the shared sheet over nothing. */
  position:sticky;top:0;z-index:5;
  border-bottom:1px solid var(--line-soft);
  background:rgba(0,0,0,.72);backdrop-filter:blur(16px);
  padding-top:var(--sat);
}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:var(--bar-h);gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:500;font-size:16px;letter-spacing:.18em;flex:none}
.brand .mark{width:20px;height:23px;flex:none}

nav.site{display:flex;align-items:center;gap:26px}
nav.site a{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);position:relative;padding:6px 0;transition:color .2s;
}
nav.site a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
/* active page — orientation, not decoration */
nav.site a[aria-current="page"]{color:var(--ink)}
nav.site a[aria-current="page"]::after{transform:scaleX(1)}

.menu-toggle{
  display:none;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:4px;cursor:pointer;align-items:center;justify-content:center;
}
.menu-toggle svg{width:18px;height:18px}
.menu-toggle .i-close{display:none}
.menu-toggle[aria-expanded="true"] .i-open{display:none}
.menu-toggle[aria-expanded="true"] .i-close{display:block}

/* ── footer ───────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line-soft);padding:44px 0 60px;margin-top:24px;
  padding-bottom:calc(60px + var(--sab))}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.foot-links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;transition:color .2s}
.disclaimer{color:var(--faint);font-size:12px;line-height:1.7;margin-top:24px;max-width:760px}
.disclaimer b{color:var(--muted)}

/* ── page furniture ───────────────────────────────────────────────────────── */
.hero{padding:clamp(60px,11vh,110px) 0 clamp(36px,5vh,56px)}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px}
.kick i{width:6px;height:6px;background:var(--accent);border-radius:50%;font-style:normal;flex:none}
h1{font-weight:200;font-size:clamp(38px,6.4vw,72px);letter-spacing:-.045em;line-height:1;margin-top:24px}
.lede{color:var(--muted);font-size:17.5px;line-height:1.62;max-width:640px;margin-top:24px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.meta-row b{color:var(--accent-ink);font-weight:500}
.meta-row b.ok{color:var(--ok)} .meta-row b.warn{color:var(--mod)} .meta-row b.no{color:var(--sev)}

.notice{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:8px;
  padding:clamp(20px,2.6vw,26px);margin:clamp(28px,4.5vh,44px) 0;display:flex;gap:16px;align-items:flex-start}
.notice svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}
.notice .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.notice p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ink)}

section.blk{padding:clamp(28px,4.5vh,46px) 0;border-top:1px solid var(--line-soft)}
.blk > h2{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:16px}
.blk > h2 .hn{color:var(--accent-ink)}
.blk > h2::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.blk .lead{font-weight:300;font-size:clamp(23px,3vw,33px);letter-spacing:-.03em;
  line-height:1.16;margin-top:24px;max-width:760px}
.blk .body{margin-top:22px}
.blk p{color:var(--muted);font-size:15px;line-height:1.7;max-width:680px}
.blk p + p{margin-top:14px}
.blk p b{color:var(--ink);font-weight:500}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.card{border:1px solid var(--line);border-radius:6px;padding:22px 24px;background:var(--panel)}
.card h3{font-size:15px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;color:var(--ink)}
.card h3 .cn{font-family:var(--mono);font-size:11px;color:var(--accent-ink);letter-spacing:.1em}
.card p{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:12px;max-width:none}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.card li{font-size:13.5px;color:var(--muted);line-height:1.5;display:flex;gap:11px;align-items:flex-start}
.card li::before{content:"";width:4px;height:4px;margin-top:8px;flex:none;transform:rotate(45deg);background:var(--accent)}

/* status rows — deployed vs not */
.sgrid{margin-top:24px;display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.srow{background:var(--panel);padding:15px 18px;display:grid;grid-template-columns:88px 1fr;
  gap:6px 16px;align-items:baseline}
.srow b{color:var(--ink);font-weight:500;font-size:14.5px}
.srow .sn{grid-column:2;color:var(--muted);font-size:13px;line-height:1.6}
.spill{grid-row:span 2;align-self:start;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 0;border-radius:3px;text-align:center;border:1px solid}
.spill.ok{color:var(--ok);border-color:var(--ok-line);background:rgba(127,191,138,.08)}
.spill.part{color:var(--mod);border-color:rgba(201,178,76,.45);background:rgba(201,178,76,.08)}
.spill.no{color:var(--sev);border-color:var(--sev-line);background:rgba(229,87,63,.08)}
.foot-note{color:var(--faint);font-size:12.5px;line-height:1.7;margin-top:16px}

/* ── THE CRYPTO PROBLEM — deliberately NOT solved here ───────────────────────
   A 64-char SHA-256 or a base64 SPKI key is one unbreakable "word": left alone
   it sets the min-content width of its container and pushes the page wide. The
   treatment differs by context — prose-adjacent values should WRAP mid-string,
   command blocks should SCROLL (wrapping a command line makes it un-copyable).

   That logic lives in /css/verify.css, which is the only page that renders
   hashes and keys. An earlier draft of this file carried .spec/.hash/.kval/
   .adigest as shared components; they were modelled on verify.html but with
   different values (border-radius 6px vs 8px, typography on the <pre> rather
   than on `pre.spec code`), so when verify.html adopted this sheet BOTH rules
   applied and the code blocks reflowed — a 7.5% pixel diff. They were also used
   by exactly one page. Speculative shared components are a liability: promote a
   pattern here only once a SECOND page genuinely needs it. */

/* ── HOVER: only where a real pointer exists ──────────────────────────────────
   On touch, :hover latches after a tap and the element stays lit until you tap
   elsewhere. Gating every hover rule behind (hover:hover) removes that entirely.
   Focus-visible is kept OUTSIDE the query so keyboard users are unaffected. */
@media (hover:hover) and (pointer:fine){
  .back:hover{color:var(--ink);gap:13px}
  nav.site a:hover{color:var(--ink)}
  nav.site a:hover::after{transform:scaleX(1)}
  .foot-links a:hover{color:var(--accent-ink)}
  .menu-toggle:hover{border-color:var(--accent-line);color:var(--accent-ink)}
  .card:hover{border-color:var(--line)}
}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:9px;
  transition:color .2s,gap .3s var(--ease)}
.back .ar{color:var(--accent)}

/* ── touch targets ────────────────────────────────────────────────────────────
   Two tiers, and the distinction matters:

   BASELINE, unconditional — WCAG 2.2 SC 2.5.8 (Level AA) requires 24×24 CSS px
   and is NOT conditional on pointer type. Gating this behind (pointer:coarse)
   was a real bug: a touchscreen laptop reports a FINE pointer and would have
   been served 18px targets while the site claims AA. Caught by a CDP audit that
   measured the rendered boxes rather than trusting the media query.

   ENHANCED, coarse pointers — 44×44 is SC 2.5.5 (AAA) and the platform figure.
   Applied on touch, where the baseline is genuinely uncomfortable.

   In-prose links stay exempt under the standard's inline exception; inflating
   them would break text flow for no compliance gain. */
nav.site a,.foot-links a,.back{min-height:24px;display:inline-flex;align-items:center}
.menu-toggle{min-width:24px;min-height:24px}

@media (pointer:coarse){
  nav.site a,.foot-links a,.back{min-height:44px}
  .menu-toggle{width:44px;height:44px}
  .tlink{position:relative}
  .tlink::before{content:"";position:absolute;inset:-12px}
}

/* ── mobile nav ───────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .menu-toggle{display:inline-flex}
  nav.site{
    display:none;position:absolute;top:calc(var(--bar-h) + var(--sat));left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    padding:8px max(var(--gutter),var(--sal)) calc(24px + var(--sab));
    max-height:calc(100dvh - var(--bar-h) - var(--sat));overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  nav.site.open{display:flex}
  nav.site a{padding:15px 0;width:100%;border-bottom:1px solid var(--line-soft);
    font-size:14px;letter-spacing:.1em;color:var(--ink)}
  nav.site a::after{display:none}
  nav.site a[aria-current="page"]{color:var(--accent-ink)}
  nav.site a[aria-current="page"]::before{content:"▸ ";color:var(--accent)}

  .cols2{grid-template-columns:1fr}
  .foot-row{gap:12px}
}
@media (max-width:640px){
  .srow{grid-template-columns:1fr}
  .spill{grid-row:auto;justify-self:start;padding:4px 10px}
  .srow .sn{grid-column:1}
}

/* Scroll lock while the menu is open. position:fixed rather than overflow:hidden
   because iOS Safari ignores overflow:hidden on <body>. nav.js restores the
   scroll offset on close so the page does not jump to the top. */
body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}