/* Gamebell website: the beta landing, the feedback board, the account and legal pages.
   Derived from the approved board (docs/superpowers/specs/2026-11-04-beta-landing-board.html) without its mockup parts.
   Tokens from the beta-landing spec §4.1: ink and paper only, amber only for time and live,
   card red only for errors (as a marker, the text stays paper or ink), 4 px radius on controls, 0 elsewhere.
   Built by `npm run site:assets` into /assets/site.<hash>.css; the font URLs below are rewritten by that build. */

/* ---------- Faces: Archivo, self-hosted Latin subsets (plan P4). Optional: a late font never swaps, nothing moves. ---------- */
@font-face{font-family:"Archivo"; src:url(/assets/archivo-condensed-black.aaef483d65.woff2) format("woff2"); font-weight:900; font-stretch:62.5%; font-style:normal; font-display:optional}
@font-face{font-family:"Archivo"; src:url(/assets/archivo-condensed-bold.fedc420560.woff2) format("woff2"); font-weight:700; font-stretch:62.5%; font-style:normal; font-display:optional}
@font-face{font-family:"Archivo"; src:url(/assets/archivo-expanded-black.0699f35c01.woff2) format("woff2"); font-weight:900; font-stretch:125%; font-style:normal; font-display:optional}
@font-face{font-family:"Archivo"; src:url(/assets/archivo-expanded-extrabold.518f7ac928.woff2) format("woff2"); font-weight:800; font-stretch:125%; font-style:normal; font-display:optional}
@font-face{font-family:"Archivo"; src:url(/assets/archivo-bold.fbbb354c89.woff2) format("woff2"); font-weight:700; font-stretch:100%; font-style:normal; font-display:optional}

:root{
  color-scheme:dark;
  --ink:#000000; --paper:#ffffff; --muted:#A39F97; --muted-p:#5F5A52;
  --clock:#FFB000; --red:#E5383B;
  --rule:rgba(255,255,255,.14); --rule-p:rgba(0,0,0,.12);
  --hover:rgba(255,255,255,.08); --hover-p:rgba(0,0,0,.05);
  --field:rgba(255,255,255,.5); --field-p:rgba(0,0,0,.55);
  --e:cubic-bezier(.2,.7,.2,1); --e-nav:cubic-bezier(.4,0,.2,1);
  --t-hover:120ms; --t-std:200ms; --t-nav:260ms;
  --ui:-apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --disp:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --hdr:56px; --strip:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink); color:var(--paper); scrollbar-gutter:stable; scroll-padding-top:84px; -webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0; background:var(--ink); color:var(--paper); font:400 17px/1.55 var(--ui); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
/* A short page ends with its footer at the foot of the screen, not under a screen of empty ink (browser pass). */
body{display:flex; flex-direction:column; min-height:100vh; min-height:100svh}
#main{flex:1 0 auto; display:flex; flex-direction:column}
/* A .wrap straight under main (the legal pages) keeps its full width: auto margins on a flex item would centre it at its content width. */
#main>.wrap{width:100%}
body::before{content:""; position:fixed; inset:0 0 auto 0; height:env(safe-area-inset-top,0px); background:var(--ink); z-index:60}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--paper); outline-offset:2px}
.paper :focus-visible{outline-color:var(--ink)}
#main:focus{outline:none}
.sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-120px; z-index:70; background:var(--paper); color:var(--ink); padding:8px 12px; border-radius:4px; font-weight:600; text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 64px)}
.wrap{max-width:1232px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}

/* CJK: headings and body in the language's own system face; Archivo stays on numerals, codes and the wordmark.
   Each heading weight is one the face really has (Hiragino Sans W8, Apple SD Gothic Neo ExtraBold, PingFang SC Semibold),
   and the browser never thickens a face it lacks (no synthetic bold). */
:root{
  --cjk-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",var(--ui);
  --cjk-ko:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",var(--ui);
  --cjk-zh:"PingFang SC","Microsoft YaHei","Noto Sans SC",var(--ui);
}
:lang(ja) .h1, :lang(ja) .lede{font-family:var(--cjk-ja)}
:lang(ja) .h1{font-weight:800; font-stretch:100%; letter-spacing:0; line-height:1.25; word-break:auto-phrase; font-size:clamp(32px, 3.4vw + 8px, 58px)}
:lang(ja) .lede{word-break:auto-phrase}
:lang(ko) .h1, :lang(ko) .lede{font-family:var(--cjk-ko)}
:lang(ko) .h1{font-weight:800; font-stretch:100%; letter-spacing:0; line-height:1.25; word-break:keep-all; font-size:clamp(32px, 3.4vw + 8px, 58px)}
:lang(ko) .lede{word-break:keep-all}
:lang(zh-Hans) .h1, :lang(zh-Hans) .lede{font-family:var(--cjk-zh)}
:lang(zh-Hans) .h1{font-weight:600; font-stretch:100%; letter-spacing:0; line-height:1.25; font-size:clamp(32px, 3.4vw + 8px, 58px)}
/* Titles take the face of their own language (`:lang` on the element), so an English post on a Japanese page keeps Archivo. */
:is(.sec-h,.last-h,.page-h,.post-h):lang(ja){font-family:var(--cjk-ja); font-weight:800; font-stretch:100%; letter-spacing:0; line-height:1.25; word-break:auto-phrase}
:is(.sec-h,.last-h,.page-h,.post-h):lang(ko){font-family:var(--cjk-ko); font-weight:800; font-stretch:100%; letter-spacing:0; line-height:1.25; word-break:keep-all}
:is(.sec-h,.last-h,.page-h,.post-h):lang(zh-Hans){font-family:var(--cjk-zh); font-weight:600; font-stretch:100%; letter-spacing:0; line-height:1.25}
:lang(ja) .last-h, :lang(ko) .last-h, :lang(zh-Hans) .last-h{font-size:clamp(36px, 5vw + 8px, 80px)}
/* The smaller display lines too (spec 4.1): rows, post titles, sport names, the suggest label, the reminder drawing. */
:is(.does-row h3,.ptitle,.req-name,.sug-l,.dr-name,.thread-h,.who):lang(ja){font-family:var(--cjk-ja); font-weight:700; font-stretch:100%; letter-spacing:0}
:is(.does-row h3,.ptitle,.req-name,.sug-l,.dr-name,.thread-h,.who):lang(ko){font-family:var(--cjk-ko); font-weight:700; font-stretch:100%; letter-spacing:0}
:is(.does-row h3,.ptitle,.req-name,.sug-l,.dr-name,.thread-h,.who):lang(zh-Hans){font-family:var(--cjk-zh); font-weight:600; font-stretch:100%; letter-spacing:0}
/* Small Japanese and Chinese text breaks between phrases and never strands a closing mark (no 1-2 glyph tails). */
:lang(ja){word-break:auto-phrase; line-break:strict}
:lang(zh-Hans){line-break:strict}
p,li{text-wrap:pretty}
/* Chrome's pretty wrap ignores phrase breaks (it split 架|空 at 360 px), so Japanese text keeps auto-phrase alone. */
:is(p,li):lang(ja){text-wrap:wrap}
:lang(ja), :lang(ko), :lang(zh-Hans){font-synthesis-weight:none}
:lang(de) .h1{hyphens:manual}

/* ---------- Header, notch tab, dock ---------- */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; height:var(--hdr); background:var(--ink); border-bottom:1px solid var(--rule); view-transition-name:site-header}
.hdr-in{height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px}
.wm{flex:none; font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:20px; line-height:1; letter-spacing:-.01em; color:var(--paper); text-decoration:none; padding:6px 0}
/* Header labels never wrap (Japanese broke mid-word at 360 px); below 360 px Feedback gives way with an ellipsis, never a sideways scroll. */
.hnav{display:flex; align-items:center; gap:6px; min-width:0}
.hlink{position:relative; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:600; text-decoration:none; padding:8px 10px; border-radius:4px}
.hlink::after{content:""; position:absolute; left:10px; right:10px; bottom:3px; height:2px; background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform var(--t-hover) var(--e)}
.hlink:hover::after,.hlink[aria-current="page"]::after{transform:scaleX(1)}
.lang{position:relative; flex:none}
.lang-btn{position:relative; display:inline-flex; align-items:center; gap:10px; height:36px; padding:0 12px; white-space:nowrap; background:var(--ink); color:var(--paper); border:1px solid var(--rule); border-radius:4px; font-size:15px; font-weight:600; transition:transform var(--t-hover) var(--e)}
.lang-btn::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--hover); opacity:0; transition:opacity var(--t-hover) var(--e); pointer-events:none}
.lang-btn:hover::before{opacity:1}
.lang-btn:active{transform:scale(.98)}
.ln-short{display:none}
.chev{display:block; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--t-nav) var(--e-nav)}
.lang-btn[aria-expanded="true"] .chev{transform:translateY(2px) rotate(225deg)}
.lang-list{position:absolute; right:0; top:calc(100% + 8px); z-index:61; min-width:210px; margin:0; padding:6px 0; list-style:none; background:var(--ink); border:1px solid var(--rule); visibility:hidden; opacity:0; transform:translateY(4px); transition:opacity var(--t-nav) var(--e-nav), transform var(--t-nav) var(--e-nav), visibility 0s linear var(--t-nav)}
.lang-list.open{visibility:visible; opacity:1; transform:none; transition:opacity var(--t-nav) var(--e-nav), transform var(--t-nav) var(--e-nav), visibility 0s}
/* The list's entries are links to /lang/{code} (plan P12), styled as the board's buttons. */
.lang-list a{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:9px 16px; background:none; border:0; color:var(--paper); text-align:left; font-size:15px; text-decoration:none}
.lang-list a::before{content:""; position:absolute; inset:0; background:var(--hover); opacity:0; transition:opacity var(--t-hover) var(--e)}
.lang-list a:hover::before{opacity:1}
.lang-list a[aria-current="true"]::after{content:""; width:6px; height:6px; background:var(--paper)}
/* Without the script (no .js on the root) the list opens on hover and while focus is inside it, so the links still work.
   The ::before strip bridges the 8 px gap under the button, so the pointer can reach the list. */
html:not(.js) .lang:hover .lang-list,html:not(.js) .lang:focus-within .lang-list{visibility:visible; opacity:1; transform:none; transition:opacity var(--t-nav) var(--e-nav), transform var(--t-nav) var(--e-nav), visibility 0s}
html:not(.js) .lang-list::before{content:""; position:absolute; left:0; right:0; top:-9px; height:9px}

/* The notch tab keeps its outline when the island docks under it, so the notch still reads as the dash in the score. */
.notch-tab{--nw:180px; --nh:28px; --nr:10px; position:fixed; top:env(safe-area-inset-top,0px); left:50%; z-index:55; width:var(--nw); height:var(--nh); margin-left:calc(var(--nw) / -2); background:var(--ink); border-radius:0 0 var(--nr) var(--nr); pointer-events:none; view-transition-name:notch-tab}
.notch-tab::after{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.24); border-top:0; border-radius:inherit}
.dock{position:fixed; top:env(safe-area-inset-top,0px); left:50%; z-index:54; height:var(--bh); width:var(--dw); margin-left:calc(var(--dw) / -2); overflow:hidden; pointer-events:none; view-transition-name:dock}
.dock-in{position:relative; transform:translateY(-100%); transition:transform var(--t-std) var(--e)}
.dock-in::after{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.24); border-top:0; border-radius:0 0 var(--r) var(--r); pointer-events:none}
.is-docked .dock-in{transform:none}

/* ---------- The scorebug, one object at several sizes ---------- */
.sb{--fs:1; --gap:5px; --pad:7px; color:var(--paper)}
.sb-dock{--notch:180px; --tail:52px; --blk:96px; --bh:28px; --code:11px; --num:17px; --clk:12px; --led:5px; --r:9px; --dw:calc(var(--notch) + 2 * (var(--tail) + var(--blk)))}
.sb-mini{--notch:96px; --tail:44px; --blk:84px; --bh:30px; --code:10px; --num:17px; --clk:11px; --led:5px; --r:9px; --pad:6px; width:max-content}
.bar{display:grid; grid-template-columns:var(--tail) var(--blk) var(--notch) var(--blk) var(--tail); height:var(--bh); position:relative; z-index:1}
.tail{--fs:1; background:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0}
.sb-c .tail.l{border-bottom-left-radius:var(--r)}
.sb-c .tail.r{border-bottom-right-radius:var(--r)}
.ntch{background:var(--ink); position:relative}
.cam{position:absolute; left:50%; top:46%; width:calc(var(--bh) * .2); height:calc(var(--bh) * .2); border-radius:50%; border:1px solid rgba(255,255,255,.2); transform:translate(-50%,-50%)}
.blk{position:relative; overflow:hidden; background:var(--ink); min-width:0}
.lay{--fs:1; position:absolute; inset:0; display:flex; align-items:center; gap:var(--gap); padding:0 var(--pad); background:var(--c); color:var(--t); white-space:nowrap}
.blk.h .lay{justify-content:flex-end}
.blk.a .lay{justify-content:flex-start}
.code{font-family:var(--disp); font-weight:800; font-stretch:125%; font-size:calc(var(--code) * var(--fs)); line-height:1}
.num{display:inline-flex; font-family:var(--disp); font-weight:900; font-stretch:62.5%; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap}
.bar .num{font-size:calc(var(--num) * var(--fs))}
.clk{display:inline-flex; font-family:var(--disp); font-weight:700; font-stretch:62.5%; font-size:calc(var(--clk) * var(--fs)); line-height:1.1; color:var(--clock); white-space:nowrap; word-spacing:.2em; font-variant-numeric:tabular-nums}
.led{display:block; width:var(--led); height:var(--led); background:var(--clock); animation:blink 1s step-end infinite}
.led.off{background:rgba(255,255,255,.2); animation:none}
.paused .led{animation:none}
@keyframes blink{0%{opacity:1}50%{opacity:.35}100%{opacity:.35}}
.rc{display:inline-grid; overflow:hidden}
.rc>span{grid-area:1/1}
.cover{display:block; width:calc(var(--num) * .95); height:calc(var(--num) * .7); background:currentColor}
.tail .cover{width:24px; height:8px; background:rgba(255,255,255,.3)}

/* Expanded body: names, the big score, a caption, the team rails. */
.body{display:grid; grid-template-columns:var(--rail) minmax(0,1fr) auto minmax(0,1fr) var(--rail); height:var(--bodyh); background:var(--ink); border-radius:0 0 var(--r) var(--r); overflow:hidden; align-items:center}
.rail{position:relative; height:100%; overflow:hidden}
.rail .lay{padding:0}
.nm{font-family:var(--disp); font-weight:700; font-size:var(--name); line-height:1.12; padding:0 2.2cqi; min-width:0}
.nm.a{text-align:right}
.col{min-width:0; padding:0 2.4cqi}
.col .nm{padding:0}
.col.a{text-align:right}
.ln{margin-top:1cqi; min-height:2.8em; font-family:var(--ui); font-size:var(--ln); line-height:1.4; color:var(--muted); white-space:pre-line}
.mid{display:grid; justify-items:center; gap:.4cqi; padding:0 .8cqi}
.big{display:flex; gap:3.4cqi; font-size:calc(var(--big) * var(--bs, 1)); line-height:1}
.big .num{font-size:inherit; line-height:1.05}
.capt{font-size:var(--cap); color:var(--muted); white-space:nowrap}

/* Hero screen: a strip of a Mac display's top, the island hanging from the notch. Trimmed to the island. */
.screen{position:relative; container-type:inline-size; background:var(--paper); color:var(--ink); overflow:hidden; padding-bottom:22px}
.sb-hero{--iw:76cqi; --notch:20cqi; --tail:9cqi; --blk:calc((var(--iw) - var(--notch) - 2 * var(--tail)) / 2); --bh:8.5cqi; --code:2.15cqi; --num:5.4cqi; --clk:2.3cqi; --led:1cqi; --r:2.2cqi; --gap:1cqi; --pad:1.3cqi; --bodyh:19cqi; --rail:1.1cqi; --name:max(11px, 2.35cqi); --big:10.5cqi; --cap:max(10px, 1.55cqi); width:var(--iw); margin:0 auto; position:relative}
.mb{position:absolute; inset:0 0 auto 0; height:8.5cqi; display:flex; align-items:center; justify-content:space-between; padding:0 2.2cqi; font-size:max(9px, 1.6cqi); border-bottom:1px solid var(--rule-p)}
.mb-l{display:flex; gap:1.6cqi} .mb-l b{font-weight:700}
.bat{display:block; position:relative; width:3.1cqi; height:1.5cqi; border:1px solid currentColor; border-radius:2px}
.bat::before{content:""; position:absolute; top:1px; bottom:1px; left:1px; right:35%; background:currentColor; border-radius:1px}
.bat::after{content:""; position:absolute; right:-3px; top:30%; width:2px; height:40%; background:currentColor}
@container (max-width:520px){
  .sb-hero{--iw:96cqi; --notch:22cqi; --tail:11cqi; --bh:11cqi; --code:2.7cqi; --num:6.6cqi; --clk:2.8cqi; --led:1.3cqi; --r:2.8cqi; --bodyh:25cqi; --rail:1.4cqi; --name:max(11px, 3.1cqi); --big:12.5cqi; --cap:max(10px, 2.6cqi)}
  .mb{height:11cqi} .mb>*{visibility:hidden}
}

/* ---------- Buttons and fields ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 18px; border-radius:4px; border:1px solid var(--paper); background:var(--paper); color:var(--ink); font-size:16px; font-weight:600; white-space:nowrap; text-decoration:none; transition:transform var(--t-hover) var(--e)}
.btn::after{content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; opacity:0; transition:opacity var(--t-hover) var(--e); pointer-events:none}
.btn:hover::after{opacity:.1}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent; color:var(--paper)}
.btn.sm{height:36px; padding:0 14px; font-size:15px}
.btn[disabled]{cursor:progress}
.paper .btn{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.paper .btn.ghost{background:transparent; color:var(--ink)}
.tbtn{position:relative; display:inline-flex; align-items:center; height:32px; padding:0 12px; background:transparent; color:var(--paper); border:1px solid var(--field); border-radius:4px; font-size:14px; font-weight:600; transition:transform var(--t-hover) var(--e)}
.tbtn::after{content:""; position:absolute; inset:0; background:var(--paper); opacity:0; transition:opacity var(--t-hover) var(--e); border-radius:inherit; pointer-events:none}
.tbtn:hover::after{opacity:.1}
.tbtn:active{transform:scale(.98)}
.field{height:48px; padding:0 14px; background:var(--ink); color:var(--paper); border:1px solid var(--field); border-radius:4px; font-size:16px; min-width:0; width:100%}
.field::placeholder{color:var(--muted); opacity:1}
.field[aria-invalid="true"]{border-color:var(--red)}
textarea.field{height:auto; padding:12px 14px; line-height:1.5; resize:vertical}
select.field{height:36px; width:auto; padding:0 34px 0 10px; font-size:15px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.paper .field{background:var(--paper); color:var(--ink); border-color:var(--field-p)}
.paper .field::placeholder{color:var(--muted-p)}
/* One line down to 375 px; a long label (German) wraps the button to its own full-width line. */
.frow{display:flex; flex-wrap:wrap; gap:8px}
.frow .field{flex:999 1 10rem; width:auto}
.frow .btn{flex:1 0 auto}
/* Errors: paper (or ink) text with a card-red square, in space kept for them. */
.ferr{display:flex; align-items:center; gap:8px; min-height:1.45em; font-size:15px; color:var(--paper); opacity:0; transition:opacity var(--t-std) var(--e)}
.ferr::before{content:""; width:8px; height:8px; background:var(--red); flex:none}
.ferr:empty::before{opacity:0}
.paper .ferr{color:var(--ink)}
.has-err .ferr{opacity:1}
.verr{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:14px; color:var(--paper)}
.verr::before{content:""; width:8px; height:8px; background:var(--red); flex:none}
.verr:empty::before{display:none}
.paper .verr{color:var(--ink)}

/* ---------- Beta form: idle, sending, sent. The one collapse: the row folds away while the answer grows from under it. ---------- */
.beta{max-width:560px}
.fx-a,.fx-b{display:grid; transition:grid-template-rows var(--t-std) var(--e)}
.fx-a{grid-template-rows:1fr}
.fx-b{grid-template-rows:0fr}
.fx-a>div,.fx-b>div{min-height:0; min-width:0}
.fx-b>div{overflow:hidden}
.sent .fx-a{grid-template-rows:0fr}
.sent .fx-a>div{overflow:hidden}
.sent .fx-b{grid-template-rows:1fr}
.fx-b.open>div{overflow:visible}
.answer{min-height:48px; display:flex; align-items:center; font-size:17px; font-weight:600; opacity:0; transform:translateY(12px); transition:opacity var(--t-std) var(--e), transform var(--t-std) var(--e)}
.answer:focus{outline:none}
.sent .answer{opacity:1; transform:none}
.instant,.instant *{transition:none!important}
.under{display:grid; margin-top:10px}
.under>*{grid-area:1/1; min-width:0}
.note{font-size:15px; color:var(--muted); transition:opacity var(--t-std) var(--e)}
.has-err .note{opacity:0}
.opt{display:flex; align-items:center; gap:10px; margin-top:12px; padding-bottom:2px; font-size:15px}
.opt label{cursor:pointer}
.opt input{appearance:none; -webkit-appearance:none; flex:none; display:grid; place-content:center; width:18px; height:18px; margin:0; border:1px solid var(--paper); border-radius:4px; background:transparent; cursor:pointer}
.opt input::before{content:""; width:9px; height:5px; border-left:2px solid var(--paper); border-bottom:2px solid var(--paper); transform:translateY(-1px) rotate(-45deg); opacity:0; transition:opacity var(--t-hover) var(--e)}
.opt input:checked::before{opacity:1}
.opt input:focus-visible{outline:2px solid var(--paper); outline-offset:2px}
.fine{margin-top:12px; font-size:14px; color:var(--muted)}
.fine a{color:var(--paper); text-underline-offset:3px}
.qs{padding-top:14px; display:grid; gap:18px}
.qs-lead{font-size:15px; color:var(--muted)}
.qs fieldset{border:0; margin:0; padding:0; min-width:0}
.qs legend{padding:0; margin-bottom:10px; font-size:15px; font-weight:600}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; left:0; top:0; opacity:0; width:1px; height:1px; margin:0}
.chip label{position:relative; display:inline-flex; align-items:center; height:36px; padding:0 12px; border:1px solid var(--field); border-radius:4px; font-size:15px; cursor:pointer; transition:transform var(--t-hover) var(--e); user-select:none}
.chip label::after{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--paper); opacity:0; transition:opacity var(--t-hover) var(--e); pointer-events:none}
.chip label:hover::after{opacity:.1}
.chip label:active{transform:scale(.98)}
.chip input:checked+label{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.chip input:focus-visible+label{outline:2px solid var(--paper); outline-offset:2px}
.saved{font-size:14px; color:var(--muted); min-height:1.5em}

/* ---------- Hero ---------- */
.hero{padding:72px 0 88px}
.hero-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.h1:focus{outline:none}
.h1{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:clamp(36px, 4.4vw + 8px, 72px); line-height:1; letter-spacing:-.015em; overflow-wrap:break-word}
.lede{font-size:19px; line-height:1.5; margin:24px 0 32px; max-width:34em; text-wrap:pretty}
.demo-ctl{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px}
.demo-cap{font-size:14px; color:var(--muted); margin-left:6px}
/* The caption and the stage line keep the size of their longest text: every served match's words sit invisibly in the
   same grid cell (.cap-ghost), so the 4 s change never moves the row or the section under it (spec 6.3, CLS 0). */
.demo-cap,.stage-meta{display:grid}
.demo-cap>span,.stage-meta>span{grid-area:1/1}
.stage-meta{align-items:end}
/* Plain wrap: the pretty wrap broke "Made-/up teams." to save the last word a line of its own. */
.demo-cap,.stage-meta{text-wrap:wrap}
.cap-ghost{visibility:hidden}
/* What the script shows or hides is decided by the scripting media query, so the first paint is already the scripted
   layout; the .js class arrives after the deferred module and moved the caption (browser pass, C69). */
#demo-next{display:none}
@media (scripting:none){.demo-ctl .tbtn,.stage-btn{display:none}}
@media (scripting:enabled) and (prefers-reduced-motion:reduce){#demo-pause{display:none} #demo-next{display:inline-flex}}

/* ---------- Video stage: the island at full depth, hanging from the notch ---------- */
.stage-sec{padding:0 0 104px}
.cap-h{font-family:var(--ui); font-size:14px; font-weight:400; color:var(--muted); margin:0 0 12px}
.stage{position:relative; aspect-ratio:16/9; border:1px solid var(--rule); background:var(--ink); container-type:inline-size; overflow:hidden}
.stage-art{position:absolute; inset:0}
.stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sb-stage{--iw:84cqi; --notch:24cqi; --tail:9cqi; --blk:calc((var(--iw) - var(--notch) - 2 * var(--tail)) / 2); --bh:9cqi; --code:2.4cqi; --num:5.8cqi; --clk:2.4cqi; --led:1cqi; --r:2.2cqi; --gap:1cqi; --pad:1.3cqi; --bodyh:37cqi; --rail:1.2cqi; --name:max(12px, 3cqi); --ln:max(11px, 1.6cqi); --big:18cqi; --cap:max(11px, 1.7cqi); width:var(--iw); margin:0 auto; position:relative}
.stage-art::before{content:""; position:absolute; left:0; right:0; top:calc(9cqi - 1px); height:1px; background:var(--rule)}
.sb-stage .ntch::before{content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.24); border-top:0; border-radius:0 0 var(--r) var(--r)}
.scene{position:absolute; left:0; right:0; top:var(--bh); height:var(--bodyh); overflow:hidden; border-radius:0 0 var(--r) var(--r)}
.scene-in{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8cqi; background:var(--c, var(--ink)); color:var(--t, var(--paper)); border-radius:0 0 var(--r) var(--r); transform:translateY(-101%); transition:transform var(--t-std) var(--e)}
.scene.on .scene-in{transform:none}
.sc-word{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:7cqi; line-height:1}
.sc-sub{font-family:var(--disp); font-weight:700; font-size:max(11px, 2cqi)}
.stage-meta{position:absolute; left:2.4cqi; right:calc(2.4cqi + 88px); bottom:2.4cqi; font-size:max(12px, 1.4cqi); color:var(--muted)}
.stage-btn{position:absolute; right:2.2cqi; bottom:1.8cqi; z-index:2}
@container (max-width:520px){
  .sb-stage{--iw:94cqi; --notch:22cqi; --tail:10cqi; --bh:10cqi; --code:2.7cqi; --num:6.2cqi; --clk:2.7cqi; --led:1.2cqi; --r:2.6cqi; --bodyh:30cqi; --rail:1.5cqi; --name:max(11px, 3.4cqi); --big:15cqi; --cap:max(10px, 2.5cqi)}
  .stage-art::before{top:calc(10cqi - 1px)}
  .ln{display:none}
  .sc-word{font-size:7.4cqi}
}

/* ---------- Section heads, programme style: a 2 px rule, then the title ---------- */
.sec-h{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:clamp(30px, 2.6vw + 12px, 48px); line-height:1.04; letter-spacing:-.012em; padding-top:20px; border-top:2px solid currentColor}
.sec-p{margin-top:16px; font-size:18px; max-width:60ch; text-wrap:pretty}

/* ---------- What it does (paper) ---------- */
.paper{background:var(--paper); color:var(--ink)}
.does{padding:104px 0}
.does-list{list-style:none; margin:44px 0 0; padding:0}
.does-row{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:24px 64px; align-items:center; padding:34px 0; border-top:1px solid var(--rule-p)}
.does-row:last-child{border-bottom:1px solid var(--rule-p)}
.does-row h3{font-family:var(--disp); font-weight:700; font-size:24px; line-height:1.15; margin-bottom:8px}
.does-row .txt p{max-width:56ch}
.does-row .more{margin-top:12px}
.does-row .more a{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.draw{justify-self:end}
.d-remind{width:300px}
.dr-name{display:block; font-family:var(--disp); font-weight:700; font-size:15px}
.dr-times{display:flex; align-items:baseline; gap:18px; margin-top:4px}
.dr-old{font-family:var(--disp); font-weight:700; font-stretch:62.5%; font-size:26px; line-height:1; color:var(--muted-p); text-decoration:line-through; text-decoration-thickness:2px}
.dr-new{font-family:var(--disp); font-weight:700; font-stretch:62.5%; font-size:46px; line-height:1; color:var(--ink)}
/* The app's half-and-half scarf (Next and Recent rows), one per served sport. Static. */
.d-sw{display:flex; gap:8px}
.d-sw i{display:grid; grid-template-rows:1fr 1fr; width:14px; height:56px}
.d-sw b{background:var(--c)}
.qa{margin-top:36px; max-width:65ch; color:var(--muted-p); font-size:16px}
.qa .q{font-weight:600}

/* ---------- What should we add next? A plain list: no rank and no count (private beta plan P3). ---------- */
.next{padding:104px 0 88px}
.next-in{max-width:760px}
.signed{margin-top:12px; min-height:1.5em; font-size:15px; color:var(--muted)}
.req-main{display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:16px; align-items:center}
.req-tbl{margin-top:24px}
.req-list{list-style:none; margin:0; padding:0; border-top:2px solid var(--paper)}
.req{position:relative; background:var(--ink); border-bottom:1px solid var(--rule)}
.req-main{min-height:64px}
.req-name{font-family:var(--disp); font-weight:700; font-size:20px; line-height:1.2; min-width:0}
.vbtn{position:relative; width:100%; height:40px; padding:0 12px; border:1px solid var(--paper); border-radius:4px; background:transparent; color:var(--paper); font-size:15px; font-weight:600; transition:transform var(--t-hover) var(--e)}
.vbtn::after{content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity var(--t-hover) var(--e); pointer-events:none}
.vbtn:hover::after{opacity:.1}
.vbtn:active{transform:scale(.98)}
.vbtn[aria-pressed="true"]{background:var(--paper); color:var(--ink)}
.req-more:empty{display:none}
.req-more{padding:0 0 20px}
.ask label{display:block; font-size:15px; margin-bottom:10px}
.ask .under{margin-top:6px}
.ask-done{font-size:16px} .ask-done b{font-weight:600}
.ask-done span{color:var(--muted)}
.paper .ask-done span{color:var(--muted-p)}
.ask-done:focus{outline:none}
.req-tools{display:flex; margin-top:16px}
/* Script-only parts by the scripting media query, not the late .js class (C69): a page opened at #add-next does not jump. */
@media (scripting:none){.req-tools{display:none}}
@media (scripting:enabled){.req-list.short .req:nth-child(n+11){display:none}}
.suggest{margin-top:44px; max-width:560px}
.sug-l{display:block; font-family:var(--disp); font-weight:700; font-size:20px; margin-bottom:12px}
.suggest .under{margin-top:6px}
.sug-done{margin-top:4px; font-size:15px; color:var(--muted)}
#suggest-ask{max-width:560px}

/* ---------- Last call: the page's one loud size ---------- */
.last{padding:104px 0 112px; border-top:1px solid var(--rule)}
.last-h{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:clamp(44px, 8.6vw, 132px); line-height:.92; letter-spacing:-.015em}
.last-grid{display:grid; gap:28px; margin-top:40px}
.last-grid .sec-p{margin-top:0}
@media (min-width:1100px){.last-grid{grid-template-columns:minmax(0,27rem) minmax(0,35rem); gap:72px; align-items:start}}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--rule); padding:48px 0 max(72px, env(safe-area-inset-bottom,0px))}
.ftr .wm{font-size:18px}
.flinks{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 20px; font-size:15px}
.flinks a{position:relative; display:inline-block; text-decoration:none; padding:4px 0}
.flinks a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor; opacity:0; transition:opacity var(--t-hover) var(--e)}
.flinks a:hover::after{opacity:1}
.fline{margin-top:14px; font-size:14px; color:var(--muted); max-width:72ch}

/* ---------- Feedback board (ink) ---------- */
.board{padding:56px 0 104px}
.bhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.page-h{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:clamp(38px, 3vw + 20px, 64px); line-height:1; letter-spacing:-.015em; overflow-wrap:break-word}
.page-h:focus{outline:none}
.board-p{margin-top:16px; font-size:18px; max-width:60ch}
.filters{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 28px; margin-top:40px; border-bottom:1px solid var(--rule)}
.seg{display:flex; gap:22px; border:0; margin:0; padding:0; min-width:0}
.seg .o{position:relative}
.seg input{position:absolute; left:0; top:0; opacity:0; width:1px; height:1px; margin:0}
.seg label{position:relative; display:block; padding:12px 0; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer}
.seg label::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--paper); transform:scaleX(0); transition:transform var(--t-std) var(--e)}
.seg input:checked+label{color:var(--paper)}
.seg input:checked+label::after{transform:scaleX(1)}
.seg input:focus-visible+label{outline:2px solid var(--paper); outline-offset:2px}
/* The sort tabs sit on the filter rule like the kind tabs; the Status select keeps its own 6 px above it. */
.fright{display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px 24px}
.sel{display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:15px; color:var(--muted)}
/* With script the filters apply on change, so Apply is gone from the first paint (C69: hiding it late moved the list). */
@media (scripting:enabled){#filters-go{display:none}}
.posts{list-style:none; margin:0; padding:0}
.post{position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--rule); background:var(--ink)}
.post::before{content:""; position:absolute; top:0; bottom:0; left:-12px; right:-12px; background:var(--hover); opacity:0; transition:opacity var(--t-hover) var(--e); pointer-events:none}
.post:hover::before{opacity:1}
.pvote{position:relative; z-index:1; width:56px; height:60px; display:grid; place-items:center; align-content:center; gap:3px; padding:0; border:1px solid var(--field); border-radius:4px; background:transparent; color:var(--paper); transition:transform var(--t-hover) var(--e)}
.pvote:active{transform:scale(.98)}
.pvote .num{font-size:26px; line-height:1}
.caret{display:block; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid currentColor}
.pvote[aria-pressed="true"]{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.ptitle{font-family:var(--disp); font-weight:700; font-size:19px; line-height:1.25; color:var(--paper); text-decoration:none}
.ptitle::after{content:""; position:absolute; inset:0}
.ptitle:focus-visible{outline:none}
.ptitle:focus-visible::after{outline:2px solid var(--paper); outline-offset:-2px}
.pmeta{margin-top:4px; font-size:14px; color:var(--muted)}
.pmeta .pin{color:var(--paper); font-weight:600}
.pmore{position:relative; z-index:1; max-width:560px}
.pmore:not(:empty){margin-top:14px}
.empty{padding:24px 0; color:var(--muted)}
.go-on{margin-top:28px}
#link-again{margin-top:8px}
/* The link page's line holds its three texts in one cell, and with script the box keeps the button's row from the
   first paint: on a short page the footer sits in the first screen, and the script's changes must not move it. */
.link-line{display:grid}
.link-line>span{grid-area:1/1}
@media (scripting:enabled){#link-box{min-height:56px}}
.composer{margin-top:32px; padding:24px 0 28px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; gap:18px; max-width:720px}
.composer .lbl2{display:block; font-size:15px; font-weight:600; margin-bottom:8px}
.composer .row2{display:flex; justify-content:space-between; align-items:baseline}
.hint{font-size:13px; color:var(--muted); margin-top:6px}
.count{font-size:13px; color:var(--muted)}
.similar{font-size:14px; color:var(--muted)}
.similar a{color:var(--paper); display:block; margin-top:4px}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.composer .under{margin-top:0}
.composer .chips label{height:36px}
#post-ask:empty,#reply-ask:empty,#post-vote-ask:empty{display:none}
#post-ask,#reply-ask{margin-top:16px; max-width:560px}

/* ---------- One post (paper), on the same grid as the header ---------- */
.paperpage{flex:1 0 auto; padding:40px 0 104px}
.narrow{max-width:792px}
.back{display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600; text-decoration:none; padding:4px 0}
.back::before{content:""; width:7px; height:7px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg)}
.phead{display:grid; grid-template-columns:56px minmax(0,1fr); gap:20px; align-items:start; margin-top:28px}
.post-h{font-family:var(--disp); font-weight:700; font-size:clamp(26px, 1.6vw + 18px, 36px); line-height:1.15}
.post-h:focus{outline:none}
.paper .pvote{border-color:var(--field-p); color:var(--ink)}
.paper .pvote[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.paper .pmeta{color:var(--muted-p); font-size:15px}
.paper .pmeta .pin{color:var(--ink)}
.pmeta b{color:var(--ink); font-weight:600}
#post-vote-ask{margin:16px 0 0 76px; max-width:520px}
.post-body{margin:24px 0 0 76px; max-width:65ch}
.post-body p+p{margin-top:14px}
.thread-h{margin:48px 0 0; font-family:var(--disp); font-weight:700; font-size:20px}
.thread{list-style:none; margin:16px 0 0; padding:0}
.reply{padding:20px 0; border-top:1px solid var(--rule-p)}
.who{font-family:var(--disp); font-weight:700; font-size:16px}
.when{color:var(--muted-p); font-size:14px; margin-left:8px}
.reply p{margin-top:6px; white-space:pre-line; max-width:65ch}
.reply.owner{background:var(--ink); color:var(--paper); padding:20px 16px; margin:0 -16px; border-top-color:var(--ink)}
.reply.owner .when{color:var(--muted)}
.olabel{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:15px}
.sys{display:flex; align-items:center; gap:10px; padding:14px 0; border-top:1px solid var(--rule-p); font-size:14px; color:var(--muted-p)}
.sys::before{content:""; width:8px; height:8px; background:var(--ink); flex:none}
.sys b{color:var(--ink); font-weight:600}
.reply-form{margin-top:28px; padding-top:24px; border-top:2px solid var(--ink); display:grid; gap:12px}
.reply-form .lbl2{font-family:var(--disp); font-weight:700; font-size:18px}
.reply-form .as{font-size:14px; color:var(--muted-p); min-height:1.45em}
.reply-form .under{margin-top:0}
.namefield label{display:block; font-size:15px; font-weight:600; margin-bottom:8px}
.paper .hint{color:var(--muted-p)}
/* The owner's controls and the author's edit form on the paper post page; the owner's reply stays ink. */
.paper .sel{color:var(--muted-p)}
.paper .chip label{border-color:var(--field-p)}
.paper .chip label::after{background:var(--ink)}
.paper .chip input:checked+label{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.paper .chip input:focus-visible+label{outline-color:var(--ink)}
.paper select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center}
.paper .composer{border-color:var(--rule-p)}
.reply.owner .btn.ghost{color:var(--paper); border-color:var(--paper)}
.reply.owner :focus-visible{outline-color:var(--paper)}

/* ---------- Legal pages and pricing (legal.ts legalShell, build ruling C7): plain text on ink, from the old page style ---------- */
.legal{padding-block:56px 104px}
.legal h1{font-family:var(--disp); font-weight:900; font-stretch:125%; font-size:clamp(32px, 2vw + 20px, 48px); line-height:1.04; letter-spacing:-.012em; margin:0 0 20px; overflow-wrap:break-word}
.legal h2{font-family:var(--disp); font-weight:700; font-size:22px; line-height:1.2; margin:40px 0 10px}
.legal p,.legal ul{margin:0 0 16px; max-width:65ch}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:4px}
.legal a{text-underline-offset:3px}
.legal .lead{font-size:19px; text-wrap:pretty}
.legal .muted{color:var(--muted)}
.legal code{font:inherit; font-weight:600}
.legal .button{position:relative; display:inline-flex; align-items:center; height:48px; padding:0 18px; border-radius:4px; background:var(--paper); color:var(--ink); font-weight:600; text-decoration:none; transition:transform var(--t-hover) var(--e)}
.legal .button:active{transform:scale(.98)}

/* ---------- The owner's desk (English, owner only): the board's type and hairlines (browser pass, C70) ---------- */
.desk .sec-h{margin-top:56px}
.desk h3{margin:28px 0 10px; font-size:17px}
.desk-counts{display:flex; flex-wrap:wrap; gap:6px 28px; margin:24px 0 0}
.desk-counts div{display:flex; align-items:baseline; gap:8px}
.desk-counts dt{color:var(--muted)}
.desk-counts dd{margin:0; font-weight:600}
.desk-tally,.desk-activity,.desk-sports{list-style:none; margin:0; padding:0}
.desk-tally{display:flex; flex-wrap:wrap; gap:4px 24px}
.desk-filters{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:28px 0 16px}
.desk-scroll{overflow-x:auto; margin-top:16px}
.desk-table{width:100%; min-width:640px; border-collapse:collapse; font-size:15px}
.desk-table th,.desk-table td{padding:10px 12px 10px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
.desk-table th{font-weight:600; color:var(--muted); border-bottom:2px solid var(--paper)}
.desk .actions{margin-top:16px}
.desk-activity li,.desk-sports li{padding:12px 0; border-bottom:1px solid var(--rule)}
.desk-activity form{margin-top:8px}

/* ---------- Demo sides (plan P9, P34): the invented teams' block colours as classes, no inline style. --c fill, --t text. ---------- */
.k-nvl{--c:#C4161C; --t:#FFFFFF}
.k-hbc{--c:#6CB4EE; --t:#000000}
.k-glw{--c:#1F7A4D; --t:#FFFFFF}
.k-cvn{--c:#B5562B; --t:#FFFFFF}
.k-rdg{--c:#0E6E8C; --t:#FFFFFF}
.k-mrb{--c:#F47B20; --t:#000000}
.k-fbk{--c:#34479E; --t:#FFFFFF}
.k-ims{--c:#7A2E5A; --t:#FFFFFF}
.k-grf{--c:#8E2547; --t:#FFFFFF}
.k-pcr{--c:#2A9D8F; --t:#000000}
.k-kld{--c:#3A7D2C; --t:#FFFFFF}
.k-ogt{--c:#E0457B; --t:#000000}
.k-acb{--c:#1D5FA8; --t:#FFFFFF}
.k-rkw{--c:#8C1D2C; --t:#FFFFFF}
.k-ehb{--c:#6B4423; --t:#FFFFFF}
.k-tnm{--c:#7FB8D9; --t:#000000}
.k-qln{--c:#5B3FA0; --t:#FFFFFF}
.k-dsk{--c:#455A64; --t:#FFFFFF}
.k-qrn{--c:#B23A48; --t:#FFFFFF}
.k-vls{--c:#4C6A92; --t:#FFFFFF}

/* ---------- Small helpers: a fieldset that draws nothing; the owner's view of a hidden post or reply ---------- */
.plain{border:0; margin:0; padding:0; min-width:0}
.mod-hidden{opacity:.5}

/* ---------- Reveals (below the fold only, once, no stagger) ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal].rv{opacity:0; transform:translateY(12px)}
  [data-reveal].rv.in{opacity:1; transform:none; transition:opacity var(--t-std) var(--e), transform var(--t-std) var(--e)}
}

/* ---------- View transitions between pages: header, notch tab and dock stay perfectly still ---------- */
@view-transition{navigation:auto}
::view-transition-group(site-header),::view-transition-group(notch-tab),::view-transition-group(dock){animation:none}
::view-transition-old(site-header),::view-transition-old(notch-tab),::view-transition-old(dock){display:none}
::view-transition-new(site-header),::view-transition-new(notch-tab),::view-transition-new(dock){animation:none}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms; animation-timing-function:var(--e-nav)}

/* ---------- Narrow screens ---------- */
@media (max-width:899px){
  :root{--strip:20px}
  .notch-tab{--nw:88px; --nh:20px; --nr:7px}
  .sb-dock{--notch:88px; --tail:40px; --blk:72px; --bh:20px; --code:9px; --num:13px; --clk:10px; --led:4px; --r:6px; --gap:4px; --pad:5px}
  .hdr-in{padding-top:var(--strip)}
  .lang-btn{height:32px}
  /* 44 px to the finger: the link by its padding, the button by a hit area past its 32 px outline. */
  .hlink{padding-block:10px; line-height:24px}
  .hlink::after{bottom:6px}
  .lang-btn::after{content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px}
  .wm{font-size:17px}
  .hero{padding:36px 0 56px}
  .hero-in{grid-template-columns:minmax(0,1fr); gap:40px}
  .lede{font-size:17px; margin:20px 0 28px}
  .stage-sec{padding-bottom:72px}
  .does,.next{padding:72px 0}
  .last{padding:72px 0 80px}
  .does-row{grid-template-columns:minmax(0,1fr); padding:28px 0}
  .draw{justify-self:start}
  .does-row h3{font-size:21px}
  .post-body,#post-vote-ask{margin-left:0}
  .req-main{grid-template-columns:minmax(0,1fr) 76px; gap:10px}
  .board{padding-top:40px}
}
@media (max-width:420px){
  .hdr-in{gap:12px}
  .hnav{gap:2px}
  .hlink{padding-inline:6px}
  .hlink::after{left:6px; right:6px}
  .lang-btn{padding:0 10px; gap:8px}
  .ln-long{display:none}
  .ln-short{display:inline}
  .seg{gap:16px}
  .req-name{font-size:18px}
  .frow .btn{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important; animation-duration:0s!important; animation-iteration-count:1!important}
  .led{animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}