/* Layout: a phone-first portal. Sticky top bar, one centered column (max 880px), each view is a stacked set of panels. */
:root{
  --paper:#F4F6F9; --surface:#FFFFFF; --ink:#14213D; --muted:#56617A; --line:#DCE1EA;
  --crimson:#C1272D; --crimson-soft:#FBE8E9; --blue:#2B4C9B; --blue-soft:#E7ECF8;
  --ok:#1D774A; --ok-soft:#E3F2EA; --warn:#8F5B00; --warn-soft:#FCF0DA; --danger:#B42318;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1420; --surface:#162033; --ink:#E7EBF3; --muted:#9BA6BA; --line:#2A3650;
  --crimson:#F0646A; --crimson-soft:#3A1C24; --blue:#93ABEA; --blue-soft:#1E2C4A;
  --ok:#5FC28F; --ok-soft:#16301F; --warn:#E4B252; --warn-soft:#382A11; --danger:#FF8A80; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E1420; --surface:#162033; --ink:#E7EBF3; --muted:#9BA6BA; --line:#2A3650;
  --crimson:#F0646A; --crimson-soft:#3A1C24; --blue:#93ABEA; --blue-soft:#1E2C4A;
  --ok:#5FC28F; --ok-soft:#16301F; --warn:#E4B252; --warn-soft:#382A11; --danger:#FF8A80; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,6vw,3.1rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.5rem;font-weight:700}
h3{font-size:1.1rem;font-weight:500}
p{margin:0}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.proto{background:var(--warn-soft);color:var(--warn);font-size:.85rem}
.proto .wrap{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding-block:8px}
.proto b{font-weight:600}
.proto .roles{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid currentColor;background:transparent;border-radius:999px;padding:2px 10px;cursor:pointer;font-size:.8rem;color:inherit}
.chip[aria-pressed="true"]{background:var(--warn);color:var(--surface);border-color:var(--warn)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:1.15rem;margin-right:auto}
nav.links{display:flex;gap:4px;flex-wrap:wrap}
nav.links a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:8px;font-weight:600;font-size:.95rem}
nav.links a[aria-current="page"]{color:var(--ink);background:var(--blue-soft)}
main{padding-block:28px 64px}
.view{display:flex;flex-direction:column;gap:22px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.eyebrow{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--crimson)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:10px 18px;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--crimson);border-color:var(--crimson);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* home */
.hero{display:grid;gap:18px;padding-block:8px 4px}
.hero p.lead{font-size:1.15rem;max-width:60ch;color:var(--muted)}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.path{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--ink)}
.path:hover{border-color:var(--blue)}
.path strong{font-family:var(--f-display);font-size:1.05rem;font-weight:500}
.path span{color:var(--muted);font-size:.92rem}
.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 24px;margin:12px 0 0;padding:0;list-style:none}
.promises li{display:flex;gap:10px;align-items:flex-start}
.promises li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--crimson);clip-path:polygon(0 0,100% 50%,0 100%)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.fact{border-top:2px solid var(--ink);padding-top:8px}
.fact .num{font-family:var(--f-mono);font-size:1.4rem;font-weight:500;font-variant-numeric:tabular-nums}
.fact .lbl{font-size:.88rem;color:var(--muted)}
/* sign in */
.auth{max-width:420px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:16px;text-align:center}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:600;cursor:pointer}
.gdot{width:18px;height:18px;border-radius:50%;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.code{font-family:var(--f-mono);font-size:1.6rem;letter-spacing:.4em;text-align:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);width:100%}
.check{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:.95rem}
.check input{margin-top:5px}
.err{color:var(--danger);font-size:.88rem;min-height:1.2em}
/* form */
fieldset{border:1px solid var(--line);border-radius:14px;padding:18px;margin:0;background:var(--surface);display:grid;gap:14px}
legend{font-family:var(--f-display);font-weight:500;font-size:1.1rem;padding:0 6px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
label.f{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.92rem;min-width:0}
label.f small{font-weight:400;color:var(--muted)}
label.f input,label.f select,label.f textarea{font-weight:400;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--paper);width:100%;min-width:0}
label.f.bad input,label.f.bad select{border-color:var(--danger)}
.req{color:var(--crimson)}
.tests{display:grid;gap:8px}
.testrow{display:grid;grid-template-columns:110px 1fr 1fr;gap:8px;align-items:center}
.testrow b{font-family:var(--f-mono);font-weight:500;font-size:.9rem}
.testrow select,.testrow input{padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--paper);min-width:0;width:100%}
@media (max-width:520px){.testrow{grid-template-columns:1fr 1fr}.testrow b{grid-column:1/-1}}
.note{background:var(--blue-soft);border-radius:10px;padding:12px 14px;font-size:.93rem}
/* roadmap */
.progress{display:flex;flex-direction:column;gap:8px}
.bar{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--crimson);border-radius:999px;transition:width .4s}
ol.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:40px 1fr;gap:14px;position:relative;padding-bottom:14px}
.step::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--line)}
.step:last-child::before{display:none}
.step.done::before{background:var(--ok)}
.dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;border:2px solid var(--line);background:var(--surface);color:var(--muted);z-index:1}
.done .dot{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.current .dot{border-color:var(--crimson);color:var(--crimson);background:var(--crimson-soft)}
.sbody{min-width:0;padding-top:7px}
.shead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.shead h3{font-size:1.05rem}
.pill{font-family:var(--f-mono);font-size:.72rem;padding:2px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.now{background:var(--crimson-soft);color:var(--crimson)}
.pill.lock{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--blue-soft);color:var(--blue)}
.locked .sbody p{filter:blur(3px);opacity:.55;user-select:none}
.locked .shead h3{color:var(--muted)}
.current .card{margin-top:10px;background:var(--surface);border:1px solid var(--crimson);border-radius:12px;padding:16px;display:grid;gap:12px}
.who{font-size:.85rem;color:var(--muted)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-family:var(--f-mono);font-weight:500;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums;font-family:var(--f-mono);font-size:.88rem}
ul.cl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
ul.cl li{display:flex;gap:8px;align-items:center}
ul.cl li .box{width:18px;height:18px;border-radius:5px;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.7rem;color:var(--surface)}
ul.cl li.y .box{background:var(--ok);border-color:var(--ok)}
/* admin */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat .num{font-family:var(--f-mono);font-size:1.6rem;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:.85rem;color:var(--muted)}
tr.click{cursor:pointer}
tr.click:hover td,tr.sel td{background:var(--blue-soft)}
.detail{display:grid;gap:14px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;font-size:.95rem}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
textarea{min-height:70px;resize:vertical}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-weight:600;z-index:20}
/* news */
.news{display:grid;gap:14px}
.post{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.post time{font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.post .body{display:grid;gap:8px;min-width:0}
.impact{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:560px){.post{grid-template-columns:1fr;gap:8px}}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.fbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--muted)}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
footer{border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
footer .wrap{padding-block:20px;display:grid;gap:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
.mt6{margin-top:6px}.mt12{margin-top:12px}.mt14{margin-top:14px}
.small{font-size:.88rem}.xsmall{font-size:.85rem}
.h1sm{font-size:2rem;margin-top:6px}
.h2sm{font-size:1.15rem}
.between{justify-content:space-between}
.inline-label{flex-direction:row!important;align-items:center;gap:8px!important}
.inline-label select{width:auto!important}
.stack{display:grid;gap:12px}
.stack8{display:grid;gap:8px}
.measure{max-width:62ch}
.qr{width:200px;height:200px;margin:0 auto;background:#fff;border-radius:10px;padding:8px;border:1px solid var(--line)}
.secret{font-family:var(--f-mono);font-size:.85rem;word-break:break-all;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px}
.center{text-align:center}
.loading{color:var(--muted);padding:40px 0;text-align:center}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.small{padding:6px 12px;font-size:.88rem}
.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.inline-form .btn{height:42px}
td select{padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--paper)}
.note-item{border-left:3px solid var(--line);padding:4px 0 4px 12px;border-radius:0}
.note-item time{display:block;font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.beta{background:var(--blue-soft);color:var(--blue);font-size:.85rem}
.beta .wrap{padding-block:6px}
.prose{display:grid;gap:12px;max-width:68ch}
.prose h2{margin-top:10px}
.prose ul{margin:0;padding-left:20px;display:grid;gap:4px}
a.path{text-decoration:none}