/* statsmith — the soft system.
   Rounded surfaces, hairlines, lower-contrast text, mono numbers, and
   light that follows the cursor. Motion only where it means something. */
:root{
  --paper:#0f1113;--surface:#15181c;--surface-2:#1b1f24;--inset:#0c0e10;
  --ink:#e9e5dc;--ink-2:#a6a198;--ink-3:#6c675f;
  --hair:rgba(255,255,255,.07);--hair-2:rgba(255,255,255,.12);
  --accent:#3fb37f;--accent-ink:#6fcfa0;--accent-soft:rgba(63,179,127,.16);
  --warm:#d9a066;--warm-soft:rgba(217,160,102,.14);
  --sans:'Sora',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:14px;--ease:cubic-bezier(.16,1,.3,1);color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body{background:radial-gradient(900px 500px at 70% -10%, rgba(63,179,127,.06), transparent 60%),var(--paper)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input:focus-visible{outline:none}
.page{max-width:1160px;margin:0 auto;padding:0 40px 96px}
h3{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
form{margin:0}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 0 16px;border-bottom:1px solid var(--hair)}
.mast .l,.mast .r{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.mast .r{display:flex;justify-content:flex-end;align-items:center;gap:18px}.mast .r a{transition:color .2s}.mast .r a:hover{color:var(--ink)}
.mast .brand{display:inline-flex;align-items:center;font:700 24px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}.mast .brand .logo{width:27px;height:27px;display:block;margin-right:8px}   /* the mark at 1.1 of the type, centred on the lowercase word */.mast .brand i{font-style:normal;color:var(--accent)}
.mast .l b{color:var(--accent);font-weight:500}
.ask-sm{position:relative;width:300px}
.ask-sm input{width:100%;font:500 13.5px/1 var(--sans);padding:11px 44px 11px 14px;background:var(--surface);border:1px solid var(--hair);border-radius:10px;outline:none;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.ask-sm input::placeholder{color:var(--ink-3)}.ask-sm input:focus{border-color:rgba(63,179,127,.6);box-shadow:0 0 0 4px var(--accent-soft)}
.ask-sm b,.dock b,.search .hint b{font:500 11px/1 var(--mono);color:var(--ink-2);border:1px solid var(--hair-2);padding:3px 6px;border-radius:6px;font-weight:500}
.ask-sm b{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
input:disabled{opacity:.5}

/* the ask field at the thumb, phones only */
.dock{display:none}

/* ── landing ──────────────────────────────────────────────────────────── */
.hero-l{display:grid;grid-template-columns:7fr 5fr;gap:56px;padding:88px 0 64px;align-items:center}
.kicker{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.kicker:before{content:"";width:24px;height:1px;background:var(--accent);opacity:.7}
h1{font:700 60px/1.04 var(--sans);letter-spacing:-.035em;margin:0 0 22px;max-width:12ch;color:var(--ink)}
h1 em{font-style:normal;color:var(--accent-ink)}
h1 .sc{display:block}h1 .sc .wd{white-space:nowrap}h1 .sc .g{display:inline-block;text-align:center}h1 .sc .g.busy{color:var(--ink-3)}
.lede{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0 0 36px}
.search{position:relative;max-width:620px}
.search input{width:100%;font:500 18px/1 var(--sans);padding:20px 118px 20px 22px;background:var(--surface);border:1px solid var(--hair-2);border-radius:var(--r);outline:none;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);transition:border-color .25s,box-shadow .25s,background .25s}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{border-color:rgba(63,179,127,.6);background:var(--surface-2);box-shadow:0 0 0 4px var(--accent-soft),0 20px 40px -20px rgba(63,179,127,.35)}
.search .hint{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:500 12px/1 var(--mono);color:var(--ink-3);display:flex;gap:6px;align-items:center;pointer-events:none}
.search .hint b{padding:4px 7px;border-radius:7px;background:var(--surface-2)}
.hint2{font:400 12.5px/1.6 var(--mono);color:var(--ink-3);margin-top:14px}
.court{color:var(--ink);display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.court svg{width:100%;aspect-ratio:500/460;display:block}
.court path,.court rect,.court circle,.court line{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s var(--ease) forwards}
.court svg > *:nth-child(n+2){animation-delay:.6s}
.court .cap{font:400 11.5px/1.5 var(--mono);color:var(--ink-3);text-align:right;max-width:260px}

/* ── cards ────────────────────────────────────────────────────────────── */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.strip.records{margin-top:8px}
.card{position:relative;display:block;padding:22px 20px 20px;background:var(--surface);border-radius:var(--r);border:1px solid var(--hair);overflow:hidden;color:var(--ink);transition:transform .35s var(--ease),border-color .3s;animation:rise .6s var(--ease) backwards}
.card:nth-child(2){animation-delay:.05s}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}.card:nth-child(6){animation-delay:.25s}
.card:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(111,207,160,.9), transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
.card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(63,179,127,.10), transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
a.card:hover{transform:translateY(-2px);border-color:var(--hair-2)}.card:hover:before,.card:hover:after{opacity:1}
.card .n{font:500 38px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.card .w{font:600 13px/1.35 var(--sans);margin-top:12px;color:var(--ink);text-transform:capitalize}
.card .s{font:400 12px/1.4 var(--mono);color:var(--ink-3);margin-top:4px;min-height:1.4em;text-transform:none}
.card .n.txt{font:600 18px/1.25 var(--sans);letter-spacing:-.01em;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.card.lead .n,.card.me .n{color:var(--accent-ink)}
.card.me{border-color:rgba(63,179,127,.35);background:linear-gradient(180deg, rgba(63,179,127,.08), transparent 70%), var(--surface)}
.box{padding:8px 0 40px}
.box .strip{grid-template-columns:repeat(6,1fr);gap:12px}
.box .strip.wrap{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.box .card .n{font-size:34px}
.box .card .n.txt,.card .n.txt{font-size:18px}

/* ── lists ────────────────────────────────────────────────────────────── */
.asks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;padding:36px 0 0;border-top:1px solid var(--hair)}
.asks h2{grid-column:1/-1;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.ask{display:grid;grid-template-columns:40px minmax(0,1fr) fit-content(45%);align-items:baseline;gap:14px;padding:16px 12px;margin:0 -12px;border-radius:10px;border-bottom:1px solid var(--hair);transition:background .25s}
.ask:hover{background:var(--surface);border-bottom-color:transparent}
.ask .i{font:500 12px/1 var(--mono);color:var(--ink-3)}
.ask .q{font:500 15.5px/1.4 var(--sans);color:var(--ink-2);transition:color .2s}.ask:hover .q{color:var(--ink)}
.ask .a{font:500 13px/1 var(--mono);color:var(--ink-3);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .2s,transform .3s var(--ease);transform:translateX(4px);opacity:.75}
.ask:hover .a{color:var(--accent-ink);transform:none;opacity:1}
.foot{display:flex;justify-content:space-between;gap:24px;padding:64px 0 0;font:400 12px/1.6 var(--mono);color:var(--ink-3);flex-wrap:wrap}
.foot b{color:var(--ink-2);font-weight:500}

/* ── the question ─────────────────────────────────────────────────────── */
.qline{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:22px;padding:30px 0 26px}
.qline .k{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.qline input{font:600 24px/1.25 var(--sans);letter-spacing:-.015em;background:none;border:none;border-bottom:1px solid transparent;color:var(--ink);outline:none;width:100%;padding:0 0 8px;min-width:0;transition:border-color .25s}
.qline input:hover{border-bottom-color:var(--hair-2)}.qline input:focus{border-bottom-color:var(--accent)}
.qline .h{font:500 12px/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.qline .h b{color:var(--ink-2);font-weight:500;border:1px solid var(--hair-2);padding:4px 7px;border-radius:7px;background:var(--surface);margin-left:4px}

/* ── the single answer ────────────────────────────────────────────────── */
.ans{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:36px 0 40px;align-items:stretch}
.hero{display:grid;grid-template-columns:auto minmax(220px,1fr);gap:28px;align-items:center;height:100%}
.num{font:500 284px/.78 var(--mono);letter-spacing:-.075em;font-variant-numeric:tabular-nums;margin:0 0 0 -12px;color:var(--ink);white-space:nowrap}
.num .d{min-width:.5em}
.num .d{display:inline-block;text-align:center}.num .d.busy{color:var(--ink-3)}
.num.text{font:700 64px/1.05 var(--sans);letter-spacing:-.03em;white-space:normal;margin:0;max-width:16ch}
.ans.one{grid-template-columns:1fr;padding:44px 0 28px}
.hero.textual{grid-template-columns:1fr;gap:16px;height:auto}
.hero.textual .u{font:500 15px/1 var(--mono);color:var(--accent-ink);letter-spacing:.02em}
.side{display:grid;gap:14px;align-self:center}
.side .u{font:500 15px/1 var(--mono);color:var(--accent-ink);letter-spacing:.02em}
.side .who{font:700 34px/1.08 var(--sans);letter-spacing:-.03em}.side .who.long{font-size:22px;line-height:1.3;letter-spacing:-.02em}
.side .pl{font:400 13px/1.6 var(--mono);color:var(--ink-3)}.side .pl b{color:var(--ink-2);font-weight:500}
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:24px 26px;display:grid;gap:26px;align-content:end}
.panel svg{width:100%;display:block;color:var(--ink);overflow:visible}
.panel svg text{font:500 10.5px var(--mono);fill:var(--ink-2)}
.spark svg{height:84px}
.spark path.l{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 1.4s var(--ease) forwards .2s}
.spark circle{transform-origin:center;transform-box:fill-box;transform:scale(0);animation:pop .5s var(--ease) forwards 1.5s}
.spark text.v{opacity:0;animation:fade .4s forwards 1.7s}
.spark .ends,.ends{display:flex;justify-content:space-between;gap:12px;font:400 11px/1 var(--mono);color:var(--ink-3);margin-top:8px}
.ends span{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ruler svg{height:54px}
.ruler line.me{transform:translateX(-120px);animation:slide 1s var(--ease) forwards .6s}
.where{font:400 12px/1.6 var(--mono);color:var(--ink-3);margin-top:8px}.where b{color:var(--accent-ink);font-weight:500}
.field svg{height:84px}
.field rect{transform-origin:bottom;transform-box:fill-box;transform:scaleY(0);animation:grow .6s var(--ease) forwards}
.ctx{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0 40px}

/* ── the games behind it ──────────────────────────────────────────────── */
.games{padding:8px 0 40px}
.tbl{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
table{width:100%;border-collapse:collapse}
th{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:16px 20px 14px;border-bottom:1px solid var(--hair)}
th.r,td.r,th.n,td.n{text-align:right}
td{padding:14px 20px;border-bottom:1px solid var(--hair);font:500 14px/1.3 var(--sans);vertical-align:middle;transition:background .2s}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
td.lead{color:var(--accent-ink);font-weight:600}
td.q{color:var(--ink-3);font:400 12.5px/1.3 var(--mono)}
tr.top td{background:rgba(63,179,127,.06)}
tr.top td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tbody tr.top:hover td{background:rgba(63,179,127,.1)}

/* ── the standing ─────────────────────────────────────────────────────── */
.standing{padding:14px 0 8px}
.standing.top{padding-top:8px}
.standing .head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:0 0 22px}
.standing h2{font:700 40px/1 var(--sans);letter-spacing:-.03em;margin:0;text-transform:capitalize}
.standing h2 small{display:block;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.standing .lead{text-align:right}
.standing .lead .n{font:500 56px/1 var(--mono);letter-spacing:-.05em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.standing .lead .n .d{display:inline-block;text-align:center}
.standing .lead .w{font:500 12.5px/1.4 var(--mono);color:var(--ink-3);margin-top:6px}
.standing td{padding:0 20px;height:60px}
td.rank{width:56px;font:500 12.5px/1 var(--mono);color:var(--ink-3)}
td.team b{font:600 17px/1.2 var(--sans)}
td.bar{padding-right:40px}
.bar .t{height:8px;border-radius:99px;background:var(--hair);overflow:hidden}
.bar .f{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg, rgba(233,229,220,.35), rgba(233,229,220,.75));transition:width .9s var(--ease)}
td.val{width:110px;font:500 24px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
td.gap{width:100px;font:400 12.5px/1 var(--mono);color:var(--ink-3)}
tr.top td.val{color:var(--accent-ink)}
tr.top .bar .f{background:linear-gradient(90deg, rgba(63,179,127,.6), var(--accent-ink))}
.standing.list td{padding:14px 20px;height:auto}
.standing.list h2{text-transform:none}

/* ── refusal ──────────────────────────────────────────────────────────── */
.ref{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:28px 0 40px}
.ref h2{font:700 40px/1.05 var(--sans);letter-spacing:-.03em;margin:0 0 16px;max-width:14ch}
.ref h2 em{font-style:normal;color:var(--warm)}
.ref p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:46ch;margin:0 0 26px}
/* a reference page with no side panel: one column, a reading measure */
.ref.one{grid-template-columns:1fr;max-width:680px}
.ref.one p{max-width:62ch}
.ref h3{font:600 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:34px 0 10px}
.ref p.dim{color:var(--ink-3);font-size:13px}
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.parse{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:20px 22px;font:400 15px/2 var(--mono);color:var(--ink);max-width:560px}
.parse .u{border-bottom:1px solid rgba(63,179,127,.7);padding-bottom:1px}
.parse .x{color:var(--warm);border-bottom:1px dashed var(--warm);padding-bottom:1px;animation:breathe 2.4s var(--ease) 1}
.parse .key{display:flex;gap:22px;font-size:11.5px;color:var(--ink-3);margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);line-height:1.4}
.parse .key i{display:inline-block;width:18px;border-bottom:1px solid var(--accent);margin-right:6px;vertical-align:middle}
.parse .key i.d{border-bottom-style:dashed;border-color:var(--warm)}
.ref .side{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:24px 26px;align-self:start;display:block}
.try{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--hair)}
.try:first-of-type{border-top:none;padding-top:0}
.try .i{font:500 12px/1 var(--mono);color:var(--ink-3)}
.try .q{font:500 15px/1.4 var(--sans);color:var(--ink-2);transition:color .2s}.try:hover .q{color:var(--ink)}
.try .a{font:500 12.5px/1 var(--mono);color:var(--ink-3);white-space:nowrap;transition:color .2s}.try:hover .a{color:var(--accent-ink)}
.note{font:400 12px/1.6 var(--mono);color:var(--ink-3);margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)}
.side > .note:first-child{margin-top:0;padding-top:0;border-top:none}
.note b{color:var(--accent-ink);font-weight:500}

/* ── choice ───────────────────────────────────────────────────────────── */
.ch{padding:28px 0 40px}
.ch h2{font:700 40px/1.05 var(--sans);letter-spacing:-.03em;margin:0 0 10px}
.ch p{font-size:16px;color:var(--ink-2);margin:0 0 28px;max-width:56ch}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.opt{padding:28px 30px;animation:none}
.opt .k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.opt .m{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;margin:12px 0 6px}
.opt .e{font:400 12.5px/1.6 var(--mono);color:var(--ink-3)}
.opt .n{font:500 64px/1 var(--mono);letter-spacing:-.05em;margin:26px 0 6px;font-variant-numeric:tabular-nums}
.opt .n small{font-size:14px;letter-spacing:0;color:var(--ink-3);margin-left:8px}
a.opt{display:block;color:inherit;text-decoration:none}
.opt .rs{margin:22px 0 4px}
.opt .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px solid var(--hair-2)}
.opt .r span{font:400 14px/1.3 var(--sans);color:var(--ink-2)}
.opt .r b{font:500 28px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.opt .more{font:400 12px/1.6 var(--mono);color:var(--ink-3);padding-top:8px}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes fade{to{opacity:1}}
@keyframes slide{to{transform:none}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes breathe{0%{background:transparent}30%{background:var(--warm-soft)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bar .f{width:var(--w)!important}.ruler line.me,.spark circle,.field rect{transform:none!important}.spark path.l{stroke-dashoffset:0!important}.spark text.v{opacity:1!important}}

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .page{padding:0 20px 120px}
  .mast{display:flex;justify-content:space-between;padding:16px 0 14px}.mast .l,.mast .ask-sm{display:none}.mast .brand{font-size:22px}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;padding:12px 16px 24px;background:linear-gradient(180deg, transparent, var(--paper) 30%);z-index:5}
  .dock .f{position:relative}
  .dock input{width:100%;font:500 16px/1 var(--sans);padding:16px 52px 16px 18px;background:var(--surface-2);border:1px solid var(--hair-2);border-radius:16px;outline:none;color:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
  .dock input::placeholder{color:var(--ink-3)}.dock input:focus{border-color:rgba(63,179,127,.6)}
  .dock b{position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:5px 8px;border-radius:8px}
  .hero-l{grid-template-columns:1fr;gap:20px;padding:32px 0 24px}
  h1{font-size:38px;max-width:none}.lede{font-size:15px;margin-bottom:22px}
  .search{display:none}.hint2{display:none}
  .court svg{aspect-ratio:500/300}.court .cap{display:none}
  .strip{grid-template-columns:1fr 1fr;gap:10px}.card{padding:16px 16px 14px}.card .n{font-size:30px}
  .box .strip{display:flex;overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
  .box .strip::-webkit-scrollbar{display:none}.box .strip .card{flex:0 0 150px;scroll-snap-align:start}
  .asks{grid-template-columns:1fr;gap:0;padding-top:26px}
  .ask{grid-template-columns:28px 1fr;gap:8px 10px;padding:12px 0;margin:0;border-radius:0}.ask .a{grid-column:2;white-space:normal;transform:none;opacity:1;color:var(--accent-ink)}
  .qline{grid-template-columns:1fr;gap:8px;padding:18px 0 14px;border-bottom:1px solid var(--hair)}.qline .h{display:none}.qline input{font-size:19px}
  .ans{grid-template-columns:1fr;gap:18px;padding:26px 0 8px}
  .hero{grid-template-columns:1fr;gap:10px;height:auto}
  .num{font-size:min(128px, 22vw)!important;line-height:.85;margin-left:-6px}.num.text{font-size:34px!important}
  .side{gap:8px}.side .who{font-size:26px}.side .u{font-size:13px}.side .pl{font-size:12px}
  .panel{padding:18px;gap:20px}
  .ctx{grid-template-columns:1fr;gap:12px;padding:12px 0 24px}
  .standing .head{grid-template-columns:1fr auto;padding-bottom:14px}.standing h2{font-size:30px}.standing .lead .n{font-size:40px}.standing .lead .w{display:none}
  .standing td{height:auto;padding:12px 14px}
  td.bar,th.bar{display:none}
  .games th{padding:12px 12px 10px}.games td{padding:11px 12px}.games td,.games th{white-space:nowrap}
  .games .n:not(.lead){display:none}   /* a phone shows the game and the number it made */
  td.team b{font-size:14.5px}td.val{font-size:22px;width:auto}td.gap{width:auto;font-size:11px}
  th{padding:12px 14px 10px}td{padding:12px 14px}
  .games .tbl{overflow-x:auto}
  .ref{grid-template-columns:1fr;gap:20px;padding:22px 0 28px}.ref h2{font-size:30px}
  .opts{grid-template-columns:1fr}
  .foot{padding-top:40px}
}

/* ── waiting ──────────────────────────────────────────────────────────── */
/* a light travels the border of the field that asked: the same cursor
   light as the cards, moving on its own because nothing else can */
form[data-ask]{position:relative}
form.busy input{color:var(--ink-2)}
form.busy .hint b,form.busy > b,form.busy .h b,form.busy .f b{color:transparent}
form.busy .hint b,form.busy .h b{position:relative}
form.busy .hint b:after,form.busy > b:after,form.busy .h b:after,form.busy .f b:after{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid var(--hair-2);border-top-color:var(--accent);animation:spin .8s linear infinite}
.search.busy input,.ask-sm.busy input,.dock.busy input{border-color:rgba(63,179,127,.35)}
.search.busy:after,.ask-sm.busy:after,.dock.busy .f:after{content:"";position:absolute;inset:-1px;border-radius:var(--r);padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg), transparent 0 70%, var(--accent-ink) 92%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sweep 1.6s linear infinite}
.ask-sm.busy:after{border-radius:10px}.dock.busy .f:after{border-radius:16px}
/* the status sits below the field, out of its box, so the field, its chip
   and its travelling light keep their places while it is there */
.status{position:absolute;left:0;top:calc(100% + 8px);font:400 12px/1.6 var(--mono);color:var(--ink-3);animation:fade .3s;text-transform:none;letter-spacing:0;white-space:nowrap}
.ask-sm .status{left:auto;right:0;text-align:right}
.dock .status{left:16px;top:auto;bottom:calc(100% - 6px)}
.qline .status{position:static;grid-column:2;white-space:normal}
.qline.busy input{border-bottom-color:var(--accent)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes sweep{to{--a:360deg}}
@keyframes spin{to{transform:rotate(360deg)}}

/* the admin page: the site's cards and tables, denser */
.adm .top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:28px 0 0}
.adm h1{font:700 30px/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 8px}
.adm .lede{font:400 14px/1.6 var(--mono);color:var(--ink-3);max-width:640px;margin:0}
.adm .periods{display:inline-flex;flex-shrink:0;background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:3px}
.adm .periods a{font:500 12px/1 var(--mono);color:var(--ink-3);padding:8px 12px;border-radius:7px;white-space:nowrap;transition:color .2s,background .2s}
.adm .periods a:hover{color:var(--ink)}.adm .periods a.on{color:var(--ink);background:var(--surface-2);box-shadow:0 0 0 1px var(--hair-2) inset}
.adm .meta{font:400 12px/1.6 var(--mono);color:var(--ink-3);margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--hair)}
.adm h2{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:38px 0 14px}
.adm h2 .cmp,.adm h3 .cmp,.adm summary .cmp{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);opacity:.8;margin-left:10px}
.adm h3{font:600 14px/1.3 var(--sans);margin:0 0 10px}
.adm .figs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 14px}
.adm .figs.five{grid-template-columns:repeat(5,1fr)}.adm .figs.four{grid-template-columns:repeat(4,1fr)}
.adm .fig{padding:16px 16px 14px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;min-width:0}
.adm .fig .v{font:500 30px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm .fig .v small{font-size:13px;margin-left:3px;color:var(--ink-3);letter-spacing:0}
.adm .fig .l{font:600 12.5px/1.3 var(--sans);margin-top:10px;color:var(--ink)}
.adm .fig .s{font:400 11.5px/1.5 var(--mono);color:var(--ink-3);margin-top:4px;min-height:1.5em;display:flex;flex-wrap:wrap;gap:0 8px}
.adm .d{white-space:nowrap}.adm .d.good{color:var(--accent-ink)}.adm .d.bad{color:var(--warm)}.adm .d.flat{color:var(--ink-3)}
.adm .panel{padding:16px 18px 12px}
.adm .panel h3{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.adm .panel svg{width:100%;height:auto;display:block}
.adm .panel svg text{font:400 10px var(--mono);fill:var(--ink-3)}.adm .panel svg text.v{fill:var(--ink-2)}
.adm .panel .sub{font:400 11.5px/1.5 var(--mono);color:var(--ink-3);margin:8px 0 0}
.adm .empty{font:400 12px/1.5 var(--mono);color:var(--ink-3);padding:40px 0;text-align:center}
.adm .key{display:flex;gap:18px;font:400 11.5px var(--mono);color:var(--ink-3);margin-top:8px}
.adm .key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.adm .key i.a{background:var(--accent)}.adm .key i.r{background:var(--ink-3);opacity:.7}.adm .key i.w{background:var(--warm)}
.adm .two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:0 0 26px}
.adm .two.charts{gap:10px;margin:0 0 10px}
.adm .tailbox{margin:0 0 8px}.adm summary{font:600 14px/1.3 var(--sans);cursor:pointer;padding:10px 0;list-style:none}
.adm summary::-webkit-details-marker{display:none}.adm summary:before{content:"+";display:inline-block;width:18px;color:var(--ink-3);font:500 14px var(--mono)}
.adm details[open] summary:before{content:"–"}
.adm table{font:400 13px/1.45 var(--mono);margin:0 0 16px;width:100%;table-layout:fixed;border-collapse:collapse}
.adm th.nn{width:52px}.adm th.nn.w{width:78px}.adm th.dim{width:64px}.adm th.tag{width:96px}.adm th.when{width:92px}
.adm th.txt{width:38%}.adm th.half{width:44%}
.adm th{text-align:left;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:0 8px 8px 0;border-bottom:1px solid var(--hair)}
.adm td{padding:7px 8px 7px 0;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-2);font:400 13px/1.45 var(--mono)}
.adm tbody tr:hover td{background:transparent}
.adm td.q,.adm td.txt,.adm td.err{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm td.q{color:var(--ink)}.adm td.txt{color:var(--ink-2)}.adm td.err{color:var(--ink-3)}.adm td.q a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair)}
.adm td.nn,.adm th.nn{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm td.dim{color:var(--ink-3);white-space:nowrap}.adm td.tag{color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.adm .act button{font:500 13px var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:8px;padding:8px 12px;cursor:pointer}
.adm .act button:hover{border-color:var(--accent)}
.adm .note{font:400 13px var(--mono);color:var(--accent-ink);margin:0 0 16px}
.adm td.note{color:var(--ink-3);white-space:nowrap;overflow:visible}
@media (max-width:1000px){.adm .figs,.adm .figs.five,.adm .figs.four{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.adm .top{flex-direction:column;align-items:flex-start}.adm .two{grid-template-columns:1fr}.adm .fig .v{font-size:24px}}
@media (max-width:560px){.adm .figs,.adm .figs.five,.adm .figs.four{grid-template-columns:repeat(2,1fr)}.adm .periods{width:100%;overflow-x:auto}}