/* GRIDLINE public site — one shared stylesheet, no framework, no build.
 * Tokens are ui/DESIGN.md's :root values verbatim; the site and a dashboard
 * screenshot read as one system. No colour outside the amber/cyan/red identity. */
:root{
  --bg:#05060a; --panel:#0b0d13; --panel-deep:#07080d; --panel-hi:#10131c;
  --line:rgba(242,182,50,.14); --line-soft:rgba(242,182,50,.07); --line-hard:rgba(242,182,50,.30);
  --amber:#f2b632; --amber-hi:#ffd166; --cyan:#65d7e8; --red:#ff6b6b;
  --text:#d8dce6; --dim:#7b8194; --dimmer:#4c5265;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"Courier New",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --sp:clamp(1rem,3vw,2rem);
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--amber-hi);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber-hi);outline-offset:2px}
.wrap{max-width:1100px;margin:0 auto;padding:var(--sp)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:.6rem;z-index:2;background:var(--panel);border:1px solid var(--line-hard);padding:.5rem .8rem;color:var(--amber)}

header.nav{display:flex;align-items:baseline;gap:2rem;flex-wrap:wrap;padding:1rem var(--sp);border-bottom:1px solid var(--line-soft)}
.brand{font-family:var(--mono);font-weight:600;letter-spacing:.18em;color:var(--amber);text-transform:uppercase;font-size:1.05rem}
.brand small{display:block;letter-spacing:.06em;color:var(--dim);font-size:.68rem;text-transform:none;margin-top:.15rem}
.brand a{color:var(--amber)}
.nav-toggle{margin-left:auto;display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);background:var(--panel);border:1px solid var(--line-hard);padding:.4rem .7rem;cursor:pointer}
nav.links{margin-left:auto;display:flex;gap:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap}
nav.links a{color:var(--dim)} nav.links a:hover{color:var(--amber)}
nav.links a[aria-current="page"]{color:var(--amber)}
/* Desktop ignores the collapsed default; the menu is always shown. */
@media (min-width:721px){ nav.links[hidden]{display:flex} }
/* Mobile: a toggle reveals the menu, which starts collapsed via the `hidden`
   attribute in the markup so the page is usable with no JS run yet. */
@media (max-width:720px){
  .nav-toggle{display:block}
  nav.links{flex-basis:100%;flex-direction:column;gap:.7rem;margin-top:.8rem}
  nav.links[hidden]{display:none}
}

.hero{padding:4rem 0 2.5rem;border-bottom:1px solid var(--line-soft)}
.hero h1{font-family:var(--mono);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2;margin:0 0 1.2rem;color:var(--amber);font-weight:600;letter-spacing:.02em;max-width:22ch}
.hero p.lede{font-size:1.12rem;max-width:62ch;color:var(--text);margin:0 0 1.6rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.4rem}
.btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.75rem 1.2rem;border:1px solid var(--line-hard);color:var(--amber);background:var(--panel);cursor:pointer}
.btn.primary{background:var(--amber);color:#111;border-color:var(--amber)}
.btn:hover{text-decoration:none;border-color:var(--amber-hi)}
.meta{font-family:var(--mono);font-size:.72rem;color:var(--dimmer);letter-spacing:.06em}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line);margin:2.5rem 0}
.cell{background:var(--panel);padding:1.1rem 1.2rem}
.cell .v{font-family:var(--mono);font-size:1.7rem;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.1}
.cell .n{font-size:.8rem;color:var(--dim);margin-top:.4rem;line-height:1.45}

main{display:block}
section{padding:3rem 0;border-bottom:1px solid var(--line-soft)}
h1.page{font-family:var(--mono);font-size:clamp(1.4rem,3.5vw,2rem);color:var(--amber);font-weight:600;letter-spacing:.02em;margin:2.5rem 0 .6rem}
p.page-lede{font-size:1.08rem;max-width:64ch;color:var(--text);margin:0 0 1rem}
h2{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-weight:600;margin:0 0 .5rem}
h3.sub{font-family:var(--mono);font-size:1rem;color:var(--text);font-weight:600;margin:1.6rem 0 .4rem}
.h2note{color:var(--dim);max-width:70ch;margin:0 0 1.6rem;font-size:.95rem}
blockquote{border-left:2px solid var(--amber);background:var(--panel-deep);margin:0 0 1.5rem;padding:1rem 1.3rem;max-width:74ch;color:var(--text)}

table{border-collapse:collapse;width:100%;max-width:860px;font-size:.95rem}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
td.k{font-family:var(--mono);color:var(--amber);white-space:nowrap}
.no{color:var(--red);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em}
.yes{color:var(--cyan);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em}

pre.diag{font-family:var(--mono);font-size:.78rem;line-height:1.5;background:var(--panel-deep);border:1px solid var(--line);padding:1.1rem 1.3rem;overflow-x:auto;color:var(--text);max-width:860px}
pre.diag .a{color:var(--amber)} pre.diag .c{color:var(--cyan)} pre.diag .r{color:var(--red)} pre.diag .d{color:var(--dimmer)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{border:1px solid var(--line);background:var(--panel);padding:1.1rem 1.2rem}
.card h3{font-family:var(--mono);font-size:.92rem;margin:0 0 .5rem;color:var(--text);font-weight:600;line-height:1.35}
.card p{margin:0;color:var(--dim);font-size:.9rem}
.card p.rec{margin-top:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.card .tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(101,215,232,.3);padding:.15rem .45rem;margin-bottom:.6rem}
.card .tag.neg{color:var(--amber);border-color:var(--line-hard)}
.card .tag.built{color:var(--dim);border-color:var(--line-soft)}

form.ea{display:flex;gap:.6rem;flex-wrap:wrap;max-width:560px}
form.ea input{flex:1;min-width:220px;background:var(--panel-deep);border:1px solid var(--line-hard);color:var(--text);padding:.75rem .9rem;font-family:var(--mono);font-size:.85rem}
.form-note{font-size:.82rem;color:var(--dim);margin-top:.8rem;max-width:60ch}

ul.plain{padding-left:1.1rem;color:var(--text);max-width:72ch}
ul.plain li{margin-bottom:.5rem}
ol.steps{padding-left:1.2rem;color:var(--text);max-width:72ch}
ol.steps li{margin-bottom:.7rem}

footer{padding:2rem var(--sp);font-family:var(--mono);font-size:.72rem;color:var(--dimmer);letter-spacing:.06em;border-top:1px solid var(--line-soft)}
footer a{color:var(--dim);margin-right:1.4rem}