/* (rules are written html body>header.doc-top: the Valhalla door styles every header for its app, and these must win on both doors)
   /docs and /developers (owner 10-24, Design v2): the site's tokens and faces on a reading page. One column of ~72ch, a sticky chip row of
   the page's sections, readable code and tables that scroll inside themselves on a phone. The page's own header: logo + four links. */
body{padding-bottom:0}
html body>header.doc-top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:nowrap;min-height:0;align-items:center;gap:var(--sp-4);height:56px;padding:0 max(var(--sp-4),env(safe-area-inset-left));background:rgba(18,13,8,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html body>header.doc-top .home{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none}html body>header.doc-top .home img{width:28px;height:28px}html body>header.doc-top .brand{font:700 18px/1 var(--font-display);color:var(--gold-txt)}
html body>header.doc-top nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}html body>header.doc-top nav::-webkit-scrollbar{display:none}
html body>header.doc-top nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--r-ctl);color:var(--dim);font:600 var(--fs-sm)/1 var(--font-ui);text-decoration:none;white-space:nowrap}
html body>header.doc-top nav a:hover{color:var(--txt);background:var(--hover)}html body>header.doc-top nav a.on{color:var(--gold-txt);background:var(--accent-soft)}
.dev{max-width:820px;min-height:calc(100vh - 56px);margin:0 auto;padding:var(--sp-5) var(--sp-4) 64px;background:rgba(16,12,8,.9);box-shadow:0 0 0 1px var(--line);color:var(--txt);font:400 16px/1.65 var(--font-ui)}
.dev h1{margin:0 0 var(--sp-2);font:700 clamp(28px,4vw,38px)/1.15 var(--font-display);color:var(--gold-txt)}
.dev p.lead{margin:0 0 var(--sp-4);color:var(--dim);font-size:17px;line-height:1.55}
.dev h2{margin:var(--sp-6) 0 var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--line);font:700 var(--fs-h3)/1.25 var(--font-display);color:var(--gold-txt);scroll-margin-top:120px}
.dev h3{margin:var(--sp-5) 0 var(--sp-2);font:600 var(--fs-h4)/1.3 var(--font-ui);color:var(--txt);scroll-margin-top:120px}
.dev p,.dev li{color:var(--txt);font-size:16px;line-height:1.65;max-width:72ch}.dev p{margin:0 0 var(--sp-3)}
.dev ul,.dev ol{margin:0 0 var(--sp-3);padding-left:22px}.dev li{margin:4px 0}.dev li::marker{color:var(--gold)}
.dev b,.dev strong{color:#fff;font-weight:600}
.dev a{color:var(--gold-txt);text-decoration:underline;text-decoration-color:rgba(255,208,106,.4);text-underline-offset:3px}.dev a:hover{color:#ffe3a0}
.dev code{font:500 13.5px/1.5 var(--font-mono);background:var(--fill-2);border-radius:5px;padding:1px 6px;color:#ffe9b0;overflow-wrap:anywhere}
.dev pre{margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);background:#0c0906;border:1px solid var(--line);border-radius:var(--r-ctl);overflow-x:auto}
.dev pre code{display:block;padding:0;background:none;font-size:13px;line-height:1.6;color:#e9d9b5;white-space:pre;overflow-wrap:normal}
.dev table{display:block;width:100%;overflow-x:auto;margin:var(--sp-2) 0 var(--sp-4);border-collapse:collapse;font-size:var(--fs-dense)}
.dev th,.dev td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);line-height:1.5}
.dev th{font-size:var(--fs-cap);white-space:nowrap}.dev td:first-child{white-space:nowrap;font-weight:600}
/* every short column stays on one line (owner 10-24); only the description column wraps, and it gets room to read before it does — the table scrolls inside itself on a phone */
.dev td:not(:last-child){white-space:nowrap}.dev td:last-child{min-width:min(420px,70vw)}
.dev tr:hover td{background:none}
.dev .m{display:inline-block;min-width:46px;font:600 var(--fs-cap)/1 var(--font-mono);color:var(--grn)}.dev .m.post{color:#8fd0ff}
.dev .panel{padding:var(--sp-4)}.dev .panel p:last-child{margin-bottom:0}
.dev .note{color:var(--dim);font-size:var(--fs-dense)}
/* the page's sections as a chip row that stays in reach while you read */
.dev .toc{position:sticky;top:56px;z-index:10;display:flex;gap:6px;margin:0 calc(-1 * var(--sp-4)) var(--sp-3);padding:var(--sp-2) var(--sp-4);list-style:none;overflow-x:auto;scrollbar-width:none;background:linear-gradient(rgba(16,12,8,.97),rgba(16,12,8,.97) 80%,rgba(16,12,8,0))}
.dev .toc::-webkit-scrollbar{display:none}
/* more chips than fit: the row fades out at the edge instead of cutting a chip in half (10-24 sweep: "A…" sat cut at 1440), and the last chip can scroll clear of the fade */
.dev .toc{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.dev .toc::after{content:'';flex:0 0 28px}.dev .toc li{margin:0;flex:none;font-size:inherit}.dev .toc li::marker{content:none}
.dev .toc a{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--fill-2);color:var(--txt);font:600 var(--fs-sm)/1 var(--font-ui);text-decoration:none;white-space:nowrap}.dev .toc a:hover{border-color:rgba(255,190,90,.5);color:var(--gold-txt)}
.dev .back{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:760px){html body>header.doc-top{gap:var(--sp-2);height:52px;padding:0 var(--sp-3)}html body>header.doc-top .brand{display:none}html body>header.doc-top nav a{padding:0 8px;min-height:44px}.dev{padding:var(--sp-4) var(--sp-3) 48px}.dev .toc{top:52px;margin:0 calc(-1 * var(--sp-3)) var(--sp-3);padding:var(--sp-2) var(--sp-3)}.dev .toc a{min-height:36px}.dev th,.dev td{padding:8px 10px}.dev td:first-child{white-space:normal;min-width:120px}}
/* the admin page (owner 10-28 #4): the token row, the switches table, the digest row */
.adm .adm-key,.adm .adm-dig{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--sp-4)}.adm .adm-dig{margin-top:var(--sp-3)}
.adm label[for]{font-weight:600;color:var(--txt)}
.adm input[type=password],.adm input[type=number]{min-height:var(--ctl-h-sm);padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--fill-2);color:var(--txt);font:500 var(--fs-sm)/1 var(--font-ui)}
.adm input[type=password]{flex:1 1 220px;min-width:0}.adm input[type=number]{width:72px}
.adm .adm-t td{vertical-align:middle}.adm .adm-t td.adm-na{color:var(--dim)}.adm .adm-t .yl-switch,.adm .adm-def{vertical-align:middle}.adm .adm-def{margin-left:8px;font-size:var(--fs-cap)}
.adm .adm-t td:last-child{min-width:min(300px,60vw)}