/* ============================================================================
   portal.css — 16:9 presentation layer, 1920×1080 target
   DEMONSTRATION ARTEFACT
   Large-screen controls, no page-level horizontal scroll; wide content scrolls
   inside its own container.

   Everything above the RESPONSIVE LAYER at the foot of this file is the
   presentation geometry and is unchanged: the 16:9 stage, the letterboxing and
   the five-column home grid still describe what a 1920×1080 projector shows.
   The responsive layer adds — and only adds — the phone and tablet behaviour,
   inside media queries that a presentation-sized viewport never matches. No
   content, wording, badge, source note or claim is altered by either layer.
   ========================================================================== */
:root{
  --bg:#0b0f14; --panel:#141c25; --panel2:#1b2530; --line:#2a3644;
  --ink:#e9eff6; --dim:#93a4b8;
  --live:#3fb950; --cache:#58a6ff; --fixture:#8b949e; --demo:#d29922; --unavail:#f85149;
  --accent:#58a6ff;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
  --u: clamp(10px, 0.52vw, 20px);          /* base spacing unit */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 clamp(15px,1.02vw,21px)/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;                          /* never a page-level scrollbar */
}

/* 16:9 stage, letterboxed on any other aspect */
.stage{
  position:absolute;inset:0;margin:auto;
  width:100vw;height:100vh;max-height:56.25vw;max-width:177.78vh;
  padding:calc(var(--u)*1.6) calc(var(--u)*2.2);
  display:flex;flex-direction:column;overflow:hidden;
}

.proto-banner{
  flex:0 0 auto;text-align:center;margin-bottom:calc(var(--u)*1.1);
  background:#3d1d1d;border:1px solid var(--unavail);color:#ffb4ae;
  border-radius:6px;padding:calc(var(--u)*.4) var(--u);
  font:700 clamp(10px,.62vw,14px)/1.3 var(--mono);letter-spacing:.06em;
}

.top{
  flex:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;
  gap:calc(var(--u)*2);padding-bottom:var(--u);border-bottom:1px solid var(--line);
}
#brand{margin:0;font-size:clamp(19px,1.55vw,34px);font-weight:650;letter-spacing:-.01em}
#tagline{margin:calc(var(--u)*.3) 0 0;color:var(--dim);font-size:clamp(12px,.82vw,18px)}
.top-right{display:flex;align-items:center;gap:var(--u);flex:0 0 auto}

.langs{display:flex;gap:calc(var(--u)*.3)}
button.lang{
  background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:6px;padding:calc(var(--u)*.42) calc(var(--u)*.85);
  font:700 clamp(11px,.7vw,15px) var(--mono);cursor:pointer;
}
button.lang.on{background:var(--accent);color:#04121f;border-color:var(--accent)}

a.nav,button.nav{
  background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:6px;padding:calc(var(--u)*.42) calc(var(--u)*.85);
  font:600 clamp(11px,.72vw,16px) inherit;cursor:pointer;text-decoration:none;
}
a.nav:hover,button.nav:hover{color:var(--ink);border-color:var(--accent)}

main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding-top:var(--u)}

/* ── home ─────────────────────────────────────────────────────────────── */
.tiles{
  display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*1.1);
  flex:0 0 auto;
}
a.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:calc(var(--u)*1.5) calc(var(--u)*1.2);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:calc(var(--u)*.5);
  transition:border-color .15s, transform .15s;min-height:0;
}
a.tile:hover{border-color:var(--accent);transform:translateY(-3px)}
.tile-n{font:700 clamp(10px,.66vw,14px) var(--mono);color:var(--dim);letter-spacing:.1em}
a.tile h2{margin:0;font-size:clamp(14px,1.02vw,23px);font-weight:650}
.tile-sub{margin:0;color:var(--dim);font-size:clamp(11px,.74vw,16px);flex:1 1 auto}
.tile-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--u)}
.tile-open{color:var(--accent);font-size:clamp(11px,.7vw,15px);font-weight:600}

.cta{display:flex;gap:var(--u);align-items:center;margin-top:calc(var(--u)*1.8);flex:0 0 auto}
button.primary,a.primary{
  background:var(--accent);color:#04121f;border:0;border-radius:10px;
  padding:calc(var(--u)*.95) calc(var(--u)*2);text-decoration:none;display:inline-block;
  font:700 clamp(14px,1.02vw,23px) inherit;cursor:pointer;
}
button.primary:hover,a.primary:hover{filter:brightness(1.08)}
button.primary:disabled{opacity:.38;cursor:default;filter:none}

/* ── badges ───────────────────────────────────────────────────────────── */
.badge-wrap{flex:0 0 auto}
.badge{
  display:inline-block;border-radius:999px;padding:.16em .8em;
  font:700 clamp(10px,.63vw,14px)/1.7 var(--mono);letter-spacing:.05em;white-space:nowrap;
}
.b-live{background:rgba(63,185,80,.14);color:var(--live);border:1px solid var(--live)}
.b-cache{background:rgba(88,166,255,.14);color:var(--cache);border:1px solid var(--cache)}
.b-fixture{background:rgba(139,148,158,.14);color:var(--fixture);border:1px solid var(--fixture)}
.b-demo{background:rgba(210,153,34,.14);color:var(--demo);border:1px solid var(--demo)}
.b-unavail{background:rgba(248,81,73,.14);color:var(--unavail);border:1px solid var(--unavail)}
.b-notrun{background:transparent;color:var(--dim);border:1px dashed var(--line)}

/* ── act rendering ────────────────────────────────────────────────────── */
.act-head{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(var(--u)*2);flex:0 0 auto}
.act-n{font:700 clamp(10px,.66vw,14px) var(--mono);color:var(--dim);letter-spacing:.1em}
.act-head h2{margin:calc(var(--u)*.2) 0 0;font-size:clamp(18px,1.45vw,32px);font-weight:650}
.act-sub{margin:calc(var(--u)*.25) 0 0;color:var(--dim);font-size:clamp(12px,.82vw,18px)}
.src-note{margin:calc(var(--u)*.45) 0 0;color:var(--dim);
  font:clamp(11px,.7vw,15px)/1.5 var(--mono)}

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:calc(var(--u)*1.1) calc(var(--u)*1.3);margin-top:var(--u);
  overflow-x:auto;                          /* wide content scrolls here */
}
.panel-real{border-left:4px solid var(--live)}
.panel-demo{border-left:4px solid var(--demo);background:var(--panel2)}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  gap:var(--u);margin-bottom:calc(var(--u)*.7);flex-wrap:wrap}
.panel-head h3{margin:0;font-size:clamp(13px,.92vw,20px);font-weight:650}

.field{display:grid;grid-template-columns:minmax(9em,15em) 1fr;gap:var(--u);
  padding:calc(var(--u)*.42) 0;border-top:1px solid rgba(255,255,255,.05)}
.field:first-of-type{border-top:0}
.f-label{color:var(--dim);font-size:clamp(11px,.76vw,17px)}
.f-value{font-size:clamp(12px,.84vw,19px);word-break:break-word}
.f-value.mono{font-family:var(--mono)}
.f-empty{color:var(--dim)}

.constitution{margin-top:calc(var(--u)*.8);padding-top:calc(var(--u)*.7);
  border-top:1px solid rgba(255,255,255,.06)}
.hash{font-family:var(--mono);color:var(--live);word-break:break-all;
  font-size:clamp(11px,.75vw,16px);margin:calc(var(--u)*.25) 0}

.warn{margin:calc(var(--u)*.35) 0 calc(var(--u)*.8);color:var(--demo);
  font-size:clamp(11px,.76vw,16px);line-height:1.45}
.note{margin:calc(var(--u)*.7) 0 0;color:var(--dim);
  font-size:clamp(11px,.76vw,16px);line-height:1.5}
.ro-notice{border-left:3px solid var(--demo);padding-left:var(--u)}

.transition{margin:0 0 var(--u);padding:calc(var(--u)*1.1) calc(var(--u)*1.3);
  background:linear-gradient(90deg,rgba(88,166,255,.12),transparent);
  border-left:4px solid var(--accent);border-radius:8px}
.transition-line{margin:0;font-size:clamp(15px,1.12vw,26px);font-weight:600}

.loading{color:var(--dim)}

/* ── scenario ─────────────────────────────────────────────────────────── */
.progress{display:flex;gap:calc(var(--u)*.6);flex:0 0 auto;margin-bottom:var(--u)}
.step{flex:1 1 0;display:flex;align-items:center;gap:calc(var(--u)*.5);
  padding:calc(var(--u)*.55) calc(var(--u)*.8);border-radius:8px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);transition:.15s;min-width:0}
.step:hover{border-color:var(--accent)}
.step.on{background:var(--accent);border-color:var(--accent);color:#04121f}
.step.done{border-color:var(--live)}
.step-n{font:700 clamp(11px,.72vw,16px) var(--mono);opacity:.75;flex:0 0 auto}
.step-l{font-size:clamp(11px,.76vw,17px);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.scene{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:calc(var(--u)*.6)}
.scene-pane{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.controls{display:flex;gap:var(--u);align-items:center;flex:0 0 auto;
  padding-top:var(--u);margin-top:var(--u);border-top:1px solid var(--line)}
.hint{color:var(--dim);font:clamp(10px,.66vw,14px) var(--mono);margin-left:auto}

/* ── selftest ─────────────────────────────────────────────────────────── */
.ctl{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:8px;padding:calc(var(--u)*.8) calc(var(--u)*1.1);margin-top:calc(var(--u)*.7)}
.ctl.pass{border-left-color:var(--live)}
.ctl.fail{border-left-color:var(--unavail)}
.ctl h4{margin:0 0 calc(var(--u)*.25);font-size:clamp(12px,.86vw,19px)}
.ctl p{margin:calc(var(--u)*.2) 0 0;color:var(--dim);font-size:clamp(11px,.72vw,15px)}
.ctl code{font-family:var(--mono);color:var(--ink)}
.summary{font:700 clamp(14px,1.05vw,24px) var(--mono);margin:var(--u) 0 0}
.summary.ok{color:var(--live)} .summary.bad{color:var(--unavail)}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{flex:0 0 auto;border-top:1px solid var(--line);margin-top:var(--u);
  padding-top:calc(var(--u)*.7);color:var(--dim);
  font:clamp(9px,.6vw,13px)/1.45 var(--mono);
  display:flex;justify-content:space-between;gap:var(--u);flex-wrap:wrap}

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

/* ── TerraScore Regional Analytics scene ──────────────────────────────── */
.ts-claims{display:flex;gap:calc(var(--u)*1.4);flex-wrap:wrap;margin:var(--u) 0 0;
  color:var(--dim);font-size:clamp(10px,.7vw,15px)}
.ts-claims span{position:relative;padding-left:calc(var(--u)*.8)}
.ts-claims span::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--cache)}
.ts-notes{margin-top:calc(var(--u)*.5)}

.ts-bar{display:flex;gap:var(--u);align-items:flex-end;flex-wrap:wrap;
  margin:var(--u) 0;padding-bottom:var(--u);border-bottom:1px solid var(--line);flex:0 0 auto}
.ts-sel{display:flex;flex-direction:column;gap:calc(var(--u)*.25);min-width:0}
.ts-sel-l{color:var(--dim);font-size:clamp(9px,.62vw,13px);text-transform:uppercase;letter-spacing:.08em}
.ts-sel select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:calc(var(--u)*.5) calc(var(--u)*.8);
  font:600 clamp(12px,.82vw,18px) inherit;cursor:pointer;min-width:8em;max-width:16em}
.ts-sel select:focus{outline:2px solid var(--accent);outline-offset:1px}
.ts-year{display:flex;flex-direction:column;gap:calc(var(--u)*.25)}
.ts-year-v{font:700 clamp(12px,.82vw,18px) var(--mono);color:var(--ink);
  padding:calc(var(--u)*.5) calc(var(--u)*.8);border:1px dashed var(--line);border-radius:7px}

.ts-body{display:grid;grid-template-columns:minmax(0,40%) 1fr;gap:calc(var(--u)*1.2);
  align-items:start;margin-top:calc(var(--u)*.4)}
.ts-left{min-width:0}
.ts-map{width:100%;height:auto;max-height:44vh;display:block;
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.ts-region{cursor:pointer;transition:opacity .12s}
.ts-region:hover{opacity:.82}
.ts-region:focus{outline:2px solid #fff;outline-offset:1px}
.ts-region.sel{filter:brightness(1.12)}

.ts-legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.7);align-items:center;
  margin-top:calc(var(--u)*.6);color:var(--dim);font:clamp(9px,.64vw,13px) var(--mono)}
.ts-legend-t{color:var(--ink);font-weight:700;margin-right:calc(var(--u)*.3)}
.ts-key{display:inline-flex;align-items:center;gap:calc(var(--u)*.3)}
.ts-sw{width:1.05em;height:.72em;border-radius:2px;display:inline-block;border:1px solid rgba(0,0,0,.35)}
.ts-sw-nodata{background:repeating-linear-gradient(45deg,#232c38 0 3px,#4a5663 3px 5px)}

.ts-right{min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.8)}
.ts-hero{grid-column:1/-1;background:linear-gradient(90deg,rgba(88,166,255,.14),transparent);
  border:1px solid var(--line);border-left:4px solid var(--cache);border-radius:10px;
  padding:calc(var(--u)*.9) calc(var(--u)*1.2);display:flex;align-items:baseline;
  gap:var(--u);flex-wrap:wrap}
.ts-hero-k{color:var(--dim);font-size:clamp(10px,.7vw,15px);text-transform:uppercase;
  letter-spacing:.08em;width:100%}
.ts-hero-v{font:700 clamp(26px,2.5vw,54px)/1 var(--mono);color:var(--ink)}
.ts-hero-u{color:var(--dim);font:clamp(11px,.76vw,17px) var(--mono)}
.ts-hero-na{font:700 clamp(18px,1.5vw,32px)/1 var(--mono);color:var(--unavail)}
.ts-hero-r{margin-left:auto;color:var(--dim);font:clamp(11px,.78vw,17px) var(--mono)}

.ts-card{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:calc(var(--u)*.7) calc(var(--u)*.9);min-width:0}
.ts-card-h{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*.5);
  margin-bottom:calc(var(--u)*.4)}
.ts-card h4{margin:0;font-size:clamp(11px,.78vw,17px);font-weight:650}
.ts-card-warn{border-left:3px solid var(--demo)}
.ts-card-na{border-left:3px solid var(--unavail);grid-column:1/-1}
.ts-row{display:flex;justify-content:space-between;gap:calc(var(--u)*.6);
  padding:calc(var(--u)*.16) 0;border-top:1px solid rgba(255,255,255,.045)}
.ts-row:first-of-type{border-top:0}
.ts-k{color:var(--dim);font-size:clamp(10px,.68vw,15px);min-width:0}
.ts-v{font:600 clamp(10px,.7vw,15px) var(--mono);text-align:right;word-break:break-word}
.ts-na{color:var(--unavail);font-style:italic}
.ts-note{margin:calc(var(--u)*.35) 0 0;color:var(--dim);font-size:clamp(9px,.63vw,13px);line-height:1.45}
.ts-unavail{color:var(--unavail);font-size:clamp(10px,.7vw,15px);margin:0}

.ts-prov{margin-top:var(--u);background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:calc(var(--u)*.6) calc(var(--u)*.9)}
.ts-prov summary{cursor:pointer;color:var(--dim);font:clamp(10px,.68vw,14px) var(--mono)}
.ts-prov summary:hover{color:var(--ink)}
.ts-prov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 calc(var(--u)*1.4);
  margin-top:calc(var(--u)*.5)}
.ts-prov-h{margin:calc(var(--u)*.7) 0 0;font-size:clamp(10px,.7vw,15px);color:var(--ink)}
.ts-gap{margin:calc(var(--u)*.25) 0 0;color:var(--dim);font-size:clamp(9px,.64vw,13px);line-height:1.45}
.ts-left .ts-card{margin-top:calc(var(--u)*.7)}

/* ── ProvableCORE evidence scene ──────────────────────────────────────── */
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--u);margin-top:calc(var(--u)*.6)}
.pc-head h3{margin:0;font-size:clamp(15px,1.18vw,27px);font-weight:650}
.pc-recid{font:600 clamp(11px,.76vw,17px) var(--mono);color:var(--cache);margin-top:.2em}
.pc-sourcenote{margin:calc(var(--u)*.4) 0 0;color:var(--ink);
  background:rgba(88,166,255,.09);border-left:3px solid var(--cache);
  border-radius:0 6px 6px 0;padding:calc(var(--u)*.45) calc(var(--u)*.8);
  font-size:clamp(11px,.74vw,16px);line-height:1.5}

.pc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:calc(var(--u)*1.1);margin-top:var(--u);align-items:start}
.pc-col{min-width:0;display:flex;flex-direction:column;gap:calc(var(--u)*.8)}
.pc-card{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:calc(var(--u)*.75) calc(var(--u)*1);min-width:0;overflow-x:auto}
.pc-card h4{margin:0 0 calc(var(--u)*.4);font-size:clamp(12px,.84vw,18px);font-weight:650}
.pc-card h5{margin:calc(var(--u)*.5) 0 calc(var(--u)*.2);font-size:clamp(10px,.7vw,15px);
  color:var(--dim);font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.pc-row{display:flex;justify-content:space-between;gap:calc(var(--u)*.6);
  padding:calc(var(--u)*.14) 0;border-top:1px solid rgba(255,255,255,.045)}
.pc-row:first-of-type{border-top:0}
.pc-k{color:var(--dim);font-size:clamp(10px,.66vw,14px);min-width:0}
.pc-v{font:600 clamp(10px,.68vw,15px) var(--mono);text-align:right;word-break:break-all}
.pc-unbound{color:var(--dim);font-style:italic}
.pc-binding{margin:calc(var(--u)*.3) 0;font:700 clamp(9px,.62vw,13px) var(--mono);
  color:var(--cache);letter-spacing:.03em;word-break:break-all}
.pc-note{margin:calc(var(--u)*.35) 0 0;color:var(--dim);
  font-size:clamp(10px,.66vw,14px);line-height:1.5}
.pc-actor .pc-v{color:var(--demo)}
.pc-redact{border-left:2px solid var(--demo);padding-left:calc(var(--u)*.5)}
.pc-nooverall{border-left:2px solid var(--cache);padding-left:calc(var(--u)*.5)}
.pc-explainer{border-left:2px solid var(--fixture);padding-left:calc(var(--u)*.5)}
.pc-grid{margin-top:calc(var(--u)*.3)}

/* three states — never two. not_checked is visually apart from failed. */
.pc-chip{display:inline-block;border-radius:999px;padding:.1em .6em;white-space:nowrap;
  font:700 clamp(9px,.6vw,13px)/1.7 var(--mono);letter-spacing:.04em}
.pc-verified{background:rgba(63,185,80,.15);color:var(--live);border:1px solid var(--live)}
.pc-failed{background:rgba(248,81,73,.15);color:var(--unavail);border:1px solid var(--unavail)}
.pc-notchecked{background:transparent;color:var(--fixture);border:1px dashed var(--fixture)}
.pc-verified-t{color:var(--live)} .pc-failed-t{color:var(--unavail)}
.pc-notchecked-t{color:var(--fixture);font-style:italic}
.pc-dim-row{align-items:center}
.pc-dim-v{display:flex;align-items:center;gap:calc(var(--u)*.4);flex-wrap:wrap;justify-content:flex-end}
.pc-token{font:clamp(9px,.6vw,13px) var(--mono);color:var(--dim);word-break:break-all}

.pc-leaf{border:1px solid var(--line);border-radius:7px;padding:calc(var(--u)*.45) calc(var(--u)*.6);
  margin-top:calc(var(--u)*.4);background:var(--panel2)}
.pc-leaf-h{display:flex;align-items:center;gap:calc(var(--u)*.5);flex-wrap:wrap}
.pc-leaf-i{font:700 clamp(10px,.66vw,14px) var(--mono);color:var(--cache)}
.pc-leaf-r{font-size:clamp(10px,.68vw,15px);flex:1 1 auto;min-width:0}
.pc-leaf-c{display:flex;gap:calc(var(--u)*.3)}
.pc-hash{font:clamp(9px,.6vw,13px) var(--mono);color:var(--dim);word-break:break-all;margin-top:.2em}
.pc-path{font:clamp(9px,.58vw,12px) var(--mono);color:var(--dim);word-break:break-all;
  padding-left:calc(var(--u)*.8)}

.pc-lookup-l{display:flex;flex-direction:column;gap:calc(var(--u)*.25)}
.pc-input{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:calc(var(--u)*.45) calc(var(--u)*.7);
  font:600 clamp(11px,.74vw,16px) var(--mono);width:100%}
.pc-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.pc-hint{margin:calc(var(--u)*.25) 0 0;color:var(--dim);font:clamp(9px,.62vw,13px) var(--mono)}
.pc-lookup-out{margin:calc(var(--u)*.4) 0 0;font-size:clamp(10px,.7vw,15px);line-height:1.45}

.pc-cases{display:flex;gap:calc(var(--u)*.4);flex-wrap:wrap;margin:calc(var(--u)*.5) 0}
button.pc-case{background:var(--panel2);color:var(--dim);border:1px solid var(--line);
  border-radius:7px;padding:calc(var(--u)*.35) calc(var(--u)*.7);
  font:600 clamp(10px,.66vw,14px) var(--mono);cursor:pointer}
button.pc-case.on{background:var(--accent);color:#04121f;border-color:var(--accent)}
.pc-case-h{display:flex;align-items:baseline;gap:calc(var(--u)*.6);flex-wrap:wrap}
.pc-case-h h5{margin:0}
.pc-mutation{color:var(--dim);font:clamp(9px,.62vw,13px) var(--mono)}
.pc-states{display:flex;gap:calc(var(--u)*1.2);margin:calc(var(--u)*.4) 0}
.pc-state{display:flex;align-items:center;gap:calc(var(--u)*.35)}
.pc-live{display:flex;justify-content:space-between;gap:var(--u);
  margin-top:calc(var(--u)*.5);padding-top:calc(var(--u)*.4);
  border-top:1px solid rgba(255,255,255,.06)}
.pc-live-v{font:600 clamp(10px,.68vw,15px) var(--mono);text-align:right}

a.pc-download{display:inline-block;background:var(--accent);color:#04121f;
  border-radius:8px;padding:calc(var(--u)*.5) calc(var(--u)*1.1);text-decoration:none;
  font:700 clamp(11px,.76vw,17px) inherit}
a.pc-download:hover{filter:brightness(1.08)}
.pc-limits{margin-top:var(--u);background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:calc(var(--u)*.5) calc(var(--u)*.9)}
.pc-limits summary{cursor:pointer;color:var(--dim);font:clamp(10px,.66vw,14px) var(--mono)}
.pc-warning{margin:calc(var(--u)*.2) 0 0;color:var(--demo);
  font:clamp(9px,.62vw,13px) var(--mono)}

/* ── ACS Bank OS authorization truth table ────────────────────────────── */
.bos-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*.8);
  margin-top:var(--u)}
.bos-stat{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:calc(var(--u)*.7) calc(var(--u)*1);border-left:3px solid var(--cache)}
.bos-stat-good{border-left-color:var(--live)}
.bos-stat-v{font:700 clamp(20px,1.9vw,42px)/1 var(--mono);color:var(--ink)}
.bos-stat-l{color:var(--dim);font-size:clamp(10px,.68vw,15px);margin-top:.35em}
.bos-method{margin:calc(var(--u)*.45) 0 0;color:var(--dim);
  font:clamp(9px,.64vw,13px) var(--mono)}

.bos-table{margin-top:var(--u);border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:var(--panel)}
.bos-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--u)*.7);padding:calc(var(--u)*.34) calc(var(--u)*.9);
  border-top:1px solid rgba(255,255,255,.05);align-items:center}
.bos-head{background:var(--panel2);border-top:0;color:var(--dim);
  font:700 clamp(9px,.62vw,13px) var(--mono);letter-spacing:.05em;text-transform:uppercase}
.bos-group{grid-column:1/-1;background:rgba(88,166,255,.07);
  padding:calc(var(--u)*.34) calc(var(--u)*.9);color:var(--cache);
  font:700 clamp(10px,.68vw,15px) inherit;border-top:1px solid var(--line)}
.bos-headline{background:rgba(255,255,255,.028)}
.bos-c-probe{font-size:clamp(10px,.72vw,16px);min-width:0}
.bos-c-old,.bos-c-new{display:flex;align-items:center;gap:calc(var(--u)*.4);
  justify-content:flex-end;min-width:0;flex-wrap:wrap}
.bos-v{font:700 clamp(9px,.64vw,14px) var(--mono);padding:.14em .6em;border-radius:5px;
  white-space:nowrap}
.bos-leak{background:rgba(248,81,73,.16);color:var(--unavail);border:1px solid var(--unavail)}
.bos-refused{background:rgba(63,185,80,.14);color:var(--live);border:1px solid var(--live)}
.bos-degraded{background:rgba(210,153,34,.15);color:var(--demo);border:1px solid var(--demo)}
.bos-neutral{background:transparent;color:var(--dim);border:1px solid var(--line)}
.bos-n{color:var(--dim);font:clamp(8px,.56vw,12px) var(--mono)}

.bos-effect{margin-top:var(--u);background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--live);border-radius:9px;
  padding:calc(var(--u)*.7) calc(var(--u)*1)}
.bos-effect h4{margin:0 0 calc(var(--u)*.3);font-size:clamp(12px,.84vw,18px)}

.bos-claims{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*.8);
  margin-top:var(--u)}
.bos-claim-col{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:calc(var(--u)*.7) calc(var(--u)*1)}
.bos-claim-yes{border-left:3px solid var(--live)}
.bos-claim-no{border-left:3px solid var(--unavail)}
.bos-claim-col h4{margin:0 0 calc(var(--u)*.3);font-size:clamp(11px,.78vw,17px)}
.bos-claim{margin:calc(var(--u)*.18) 0 0;color:var(--dim);
  font-size:clamp(10px,.7vw,15px);line-height:1.45}
.bos-claim-yes .bos-claim::before{content:"✓ ";color:var(--live)}
.bos-claim-no .bos-claim::before{content:"✕ ";color:var(--unavail)}
.bos-canonical{margin:var(--u) 0 0;padding:calc(var(--u)*.6) calc(var(--u)*1);
  background:rgba(88,166,255,.08);border-left:3px solid var(--cache);
  border-radius:0 7px 7px 0;font-size:clamp(11px,.76vw,17px);line-height:1.5}

/* ============================================================================
   RESPONSIVE LAYER — phones and tablets
   ============================================================================
   The rules above target a projector: one 16:9 stage, letterboxed, with the
   page itself unable to scroll. On a handset that geometry does not degrade —
   it CLIPS. Measured on the unmodified source at 360×800, the page could not
   scroll at all, the footer painted over the "Run full scenario" button, and
   the language buttons were 32×23 CSS px.

   So this layer does not "tweak" the stage; below a presentation-sized
   viewport it stops being a stage and becomes an ordinary scrolling document.
   Nothing here changes text, data, badges, source notes or claims — only
   geometry, type scale and hit-target size.

   Three thresholds, chosen from the target devices rather than from habit:

     (A) max-width:1023px OR max-height:599px
         Not a presentation surface. 768/820 tablets and the 844×390 landscape
         handset both land here — the second one only via the height clause,
         which is exactly why the clause exists. Releases the stage, gives the
         page real scroll, enlarges every touch target, raises the smallest
         type off its desktop floor, and honours the display cutout.
     (B) max-width:1023px
         Narrow enough that side-by-side columns stop being readable: the
         TerraScore map/cards split, the ProvableCORE two-column body, the
         Bank OS claim columns.
     (C) max-width:599px  /  (D) 600–1023px
         Handset vs tablet. Home tiles are one column on (C) and two on (D),
         and the Bank OS truth table restacks on (C) only.

   1920×1080 matches none of them and is therefore byte-for-byte the layout it
   was before this file changed.
   ========================================================================== */

/* ── (A) not a presentation surface ───────────────────────────────────────── */
@media (max-width:1023px), (max-height:599px){
  :root{ --u:12px }

  /* the page scrolls; the stage is no longer a fixed 16:9 window onto clipped
     content. min-height keeps a short page filling the screen. */
  html,body{height:auto;min-height:100%}
  body{overflow:visible;-webkit-text-size-adjust:100%}
  .stage{
    position:static;inset:auto;margin:0;
    width:auto;height:auto;max-width:none;max-height:none;
    min-height:100vh;min-height:100dvh;overflow:visible;
    /* safe-area: notch, rounded corners and the home indicator */
    padding-top:max(calc(var(--u)*1.1),env(safe-area-inset-top));
    padding-right:max(calc(var(--u)*1.1),env(safe-area-inset-right));
    padding-bottom:max(calc(var(--u)*1.4),env(safe-area-inset-bottom));
    padding-left:max(calc(var(--u)*1.1),env(safe-area-inset-left));
  }
  /* the inner scroller would trap the flick gesture inside a short box, and
     was also what let the footer sit on top of clipped content */
  .scene{flex:0 0 auto;min-height:0;overflow:visible;padding-right:0}
  main{flex:0 0 auto;overflow:visible}
  footer{margin-top:calc(var(--u)*1.4)}

  /* Header: nav and language controls stay on screen by wrapping. The desktop
     rule pins .top-right to flex:0 0 auto, so the box is sized to the whole
     row of controls laid out on ONE line and its own flex-wrap can never
     engage — measured at 360px it was 376px wide inside a 334px content box.
     Letting it shrink is what makes the wrap real. */
  .top{flex-wrap:wrap;gap:var(--u)}
  .top-right{flex:1 1 auto;min-width:0;max-width:100%;
    flex-wrap:wrap;gap:calc(var(--u)*.5);row-gap:calc(var(--u)*.5)}
  .act-head,.pc-head{flex-wrap:wrap}

  /* The /pccases diagnostic prints the verifier's result set into a <pre>,
     which does not wrap by default and dragged the document 248px sideways.
     Wrapping is layout only — the JSON it prints is unchanged. */
  pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}

  /* ── touch targets ─ every control a finger must hit is ≥44px in both axes.
     inline-flex is required because an <a> is inline and ignores min-height. */
  button.lang{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:calc(var(--u)*.4) calc(var(--u)*.7);font-size:14px}
  a.nav,button.nav{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:calc(var(--u)*.5) calc(var(--u)*.9);font-size:14px}
  button.primary,a.primary{
    min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;
    text-align:center;padding:calc(var(--u)*.8) calc(var(--u)*1.4)}
  button.pc-case{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  a.pc-download{min-height:44px;display:inline-flex;align-items:center;font-size:15px}
  .step{min-height:44px}
  .ts-sel select{min-height:44px;width:100%;max-width:none;font-size:15px}
  .pc-input{min-height:44px;font-size:15px}
  /* list-item, not flex: display:flex would delete the disclosure triangle */
  .ts-prov summary,.pc-limits summary{
    min-height:44px;padding:calc(var(--u)*.7) 0;font-size:13px}

  /* ── legibility: the desktop clamps bottom out at 8–10px, which is a
     projector floor, not a handset one. Sizes only; families untouched. */
  footer{font-size:11px;gap:calc(var(--u)*.5)}
  .badge{font-size:12px}
  .pc-chip{font-size:11px}
  .bos-v{font-size:11px}
  .bos-n,.bos-method{font-size:10px}
  .ts-legend,.ts-note,.ts-gap,.ts-unavail,.pc-note,.pc-hint,.pc-hash,.pc-path,
  .pc-token,.pc-binding,.pc-warning,.pc-mutation,.hint,.src-note{font-size:11px}
  .ts-sel-l{font-size:11px}
  .ts-k,.pc-k,.ts-v,.pc-v{font-size:12px}
  .tile-n,.act-n{font-size:11px}

  /* ── long values wrap instead of pushing the viewport sideways ─────────── */
  .f-value,.ts-v,.pc-v,.hash,.pc-binding,.pc-hash,.pc-path,.pc-token,
  .ts-hero-r,.bos-canonical,.ctl code{overflow-wrap:anywhere}
  .ts-row,.pc-row,.pc-live{flex-wrap:wrap}
  .ts-hero-r{margin-left:0;width:100%}
  .ctl code{display:inline-block;max-width:100%}
}

/* ── (B) too narrow for side-by-side columns ──────────────────────────────── */
@media (max-width:1023px){
  .ts-body{grid-template-columns:minmax(0,1fr)}
  .ts-map{max-height:none}                 /* the map takes the full width it has */
  .ts-right{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-prov-grid{grid-template-columns:minmax(0,1fr)}
  .pc-body{grid-template-columns:minmax(0,1fr)}
  .bos-claims{grid-template-columns:minmax(0,1fr)}
  /* an ellipsised act name is not a usable progress control; let it wrap */
  .step-l{white-space:normal;overflow:visible;text-overflow:clip}
}

/* ── (C) handset ──────────────────────────────────────────────────────────── */
@media (max-width:599px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .cta{flex-direction:column;align-items:stretch;gap:calc(var(--u)*.6)}
  .ts-right{grid-template-columns:minmax(0,1fr)}
  .bos-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*.15)}

  /* Bank OS truth table. The three columns become "probe on its own line, then
     OLD and CURRENT side by side" — applied to the HEAD row too, so the two
     verdict columns keep their own labels above them and no label is invented
     in CSS. Verdict text wraps rather than being cut off. */
  .bos-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*.35) calc(var(--u)*.5)}
  .bos-c-probe{grid-column:1/-1}
  .bos-c-old,.bos-c-new{justify-content:flex-start}
  .bos-v{white-space:normal;overflow-wrap:anywhere;text-align:left}

  /* TerraScore selectors: two per row, full width, 16px so iOS does not zoom
     the page in when one is focused */
  .ts-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .ts-sel,.ts-year{min-width:0}
  .ts-sel select,.pc-input{font-size:16px}

  /* scenario: two steps per row keeps the label readable and the target big */
  .progress{flex-wrap:wrap;gap:calc(var(--u)*.5)}
  .step{flex:1 1 calc(50% - var(--u)*.5)}
  .controls{flex-wrap:wrap;gap:calc(var(--u)*.6)}
  .controls button{flex:1 1 auto}
  .hint{margin-left:0;width:100%;order:3;text-align:center}

  .pc-states{flex-wrap:wrap;gap:calc(var(--u)*.6)}
  .pc-dim-v{justify-content:flex-start}
  .ts-claims{gap:calc(var(--u)*.7)}
}

/* ── (D) tablet ───────────────────────────────────────────────────────────── */
@media (min-width:600px) and (max-width:1023px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================================
   ODA PRE-SUBMISSION HARDENING LAYER — 2026-09-02
   ============================================================================
   First-screen narrative (hero, steps, legend), an identity line above the
   brand, a calmer demonstration banner, a visible keyboard focus ring and a
   company/contact line in the footer. Additive: no rule above is removed, no
   data, badge, source note or evidence state is changed by this layer.
   ========================================================================== */
.kicker{margin:0 0 calc(var(--u)*.3);color:var(--dim);
  font:600 clamp(10px,.66vw,14px)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* the banner is a statement of scope, not an error: amber, not red */
.proto-banner{background:#241f0f;border-color:#6f5a1e;color:#efcc72}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.foot-co{flex:1 1 100%;text-align:center}
.foot-co a{color:var(--dim);text-decoration:underline;text-underline-offset:.15em}
.foot-co a:hover{color:var(--ink)}

main.home{overflow-y:auto;padding-right:calc(var(--u)*.6)}
.hero{flex:0 0 auto;padding:calc(var(--u)*.9) 0 calc(var(--u)*1.3);
  border-bottom:1px solid var(--line);margin-bottom:calc(var(--u)*1.2)}
.hero-h{margin:0;font-size:clamp(22px,2vw,44px);font-weight:700;letter-spacing:-.015em;
  line-height:1.15;max-width:64ch}
.hero-lede{margin:calc(var(--u)*.6) 0 0;color:var(--ink);font-size:clamp(14px,1vw,22px);
  line-height:1.5;max-width:72ch}
.hero .cta{margin-top:calc(var(--u)*1)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:calc(var(--u)*2.4);margin-top:calc(var(--u)*1.3);align-items:start}
.hero-col{min-width:0}
.hero-sub{margin:0 0 calc(var(--u)*.5);font-size:clamp(12px,.86vw,19px);font-weight:650;color:var(--ink)}
.tiles-h{margin:0 0 calc(var(--u)*.6);color:var(--dim)}
.steps{margin:0;padding-left:1.7em;display:flex;flex-direction:column;gap:calc(var(--u)*.35);
  color:var(--dim);font-size:clamp(12px,.8vw,18px);line-height:1.45}
.steps li::marker{color:var(--accent);font:700 clamp(11px,.72vw,16px) var(--mono)}
.steps b{color:var(--ink);font-weight:650}
.hero-note{margin:0 0 calc(var(--u)*.7);color:var(--dim);font-size:clamp(11px,.76vw,17px);
  line-height:1.5;border-left:3px solid var(--accent);padding-left:calc(var(--u)*.8)}
.hero-stage{border-left-color:var(--demo)}
.legend-wrap{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:calc(var(--u)*.45) calc(var(--u)*.9)}
.legend-wrap summary{cursor:pointer;color:var(--dim);font:600 clamp(11px,.72vw,15px) var(--mono)}
.legend-wrap summary:hover{color:var(--ink)}
.legend{margin:calc(var(--u)*.5) 0 calc(var(--u)*.2);padding:0;list-style:none;display:flex;
  flex-direction:column;gap:calc(var(--u)*.3);color:var(--dim);font-size:clamp(11px,.72vw,16px);line-height:1.45}
.legend-k{font:700 clamp(10px,.62vw,13px) var(--mono);letter-spacing:.04em;color:var(--ink)}

@media (max-width:1023px), (max-height:599px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*1.2)}
  .hero-h{font-size:clamp(22px,6vw,32px)}
  .hero-lede{font-size:15px}
  .steps,.legend,.hero-note{font-size:13px}
  .legend-wrap summary{min-height:44px;display:list-item;padding:calc(var(--u)*.5) 0}
  .kicker{font-size:11px}
  .foot-co{text-align:left}
  .foot-co a{display:inline-flex;align-items:center;min-height:44px}
  .pc-k,.ts-k,.rv-k{overflow-wrap:anywhere}
}
/* short desktop/laptop screens: keep the first screen compact so the tiles start above the fold */
@media (min-width:1024px) and (max-height:850px){
  .hero{padding:calc(var(--u)*.5) 0 calc(var(--u)*.9);margin-bottom:calc(var(--u)*.8)}
  .hero-lede{margin-top:calc(var(--u)*.4)}
  .hero .cta{margin-top:calc(var(--u)*.7)}
  .hero-grid{margin-top:calc(var(--u)*.8)}
}