@font-face{font-family:'Sohne';src:url('fonts/Sohne-Buch.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Kraftig.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Halbfett.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sohne';src:url('fonts/Sohne-Dreiviertelfett.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sohne Schmal';src:url('fonts/SohneSchmal-Dreiviertelfett.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sohne Schmal';src:url('fonts/SohneSchmal-Halbfett.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Tiempos Text';src:url('fonts/TiemposText-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

/* The house palette, carried over whole. Paper rather than white, ink rather
   than black, and one highlight that means "this is yours". */
:root{
 --paper:#FAFAF6;--card:#FFFDF7;--ink:#191917;--body:#26251F;
 --mut:#605F58;--mut2:#4C4A43;--fnt:#9C9B92;
 --hr:rgba(25,25,23,.09);--hr2:rgba(25,25,23,.2);
 --hl:#FFE86B;--hls:#FFD84D;--acc:#2451B3;
 --sans:'Sohne',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --serif:'Tiempos Text',Georgia,serif;
 --cond:'Sohne Schmal','Sohne',sans-serif;
 --cardsh:0 1px 1px rgba(25,25,23,.04),0 6px 16px -10px rgba(25,25,23,.3);
 --pad:20px;
 --e-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
/* The browser hides [hidden] with display:none from its own stylesheet, which
   any author rule setting display quietly beats. .cnd is a grid, so hiding it
   did nothing you could see — the award search had been marking rows hidden
   and painting them anyway. Author it once, here, rather than remembering it
   at every call site. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--paper)}
/* The browser paints its own colour over a tapped control before ours arrives —
   a blue wash on iOS and a blue ring in Chrome — so a team chip flashed blue on
   the way to its own colour. Selection feedback is the stylesheet's job here,
   and the keyboard ring below is the only outline anything gets. */
html{-webkit-tap-highlight-color:transparent}
button,a,input,[tabindex]{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
 font-size:16px;line-height:1.45;padding-bottom:60px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}

/* ---- masthead ----------------------------------------------------------- */
/* where a removed element lives out its last two hundred milliseconds */
.ghosts{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.mast{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;
 padding:14px var(--pad);background:rgba(250,250,246,.9);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 border-bottom:1px solid var(--hr)}
/* The mark turns over when the step does. The shield is the thing at rest and
   the thing you come back to; the clover is what it passes through — four
   petals meeting at a point, borrowed whole from the fantasy app, where a mark
   with fourfold symmetry is what let a turn read as a turn without ever coming
   to rest somewhere arbitrary. A square box so both sit on the same centre:
   the shield is contained inside it and keeps its own portrait proportion. */
.wm{position:relative;width:22px;height:22px;flex:none;color:var(--ink)}
.wm>*{position:absolute;inset:0}
.wms{background:url('art/nfl.png') center/contain no-repeat}
.wmc{display:block;width:100%;height:100%;opacity:0;padding:1px}
/* The turn is on the box and the swap is on its two faces, so the shield is
   already gone before the rotation is far enough along to read as a shield
   lying over. The dip in scale is what makes it a change of state rather than
   a spinning picture. */
@keyframes wmturn{
 0%{transform:rotate(0) scale(1)}
 50%{transform:rotate(180deg) scale(.84)}
 100%{transform:rotate(360deg) scale(1)}}
@keyframes wmshield{0%,100%{opacity:1}16%,84%{opacity:0}}
@keyframes wmclover{0%,100%{opacity:0}16%,84%{opacity:1}}
.wm.turn{animation:wmturn 760ms cubic-bezier(.62,.02,.28,1)}
.wm.turn .wms{animation:wmshield 760ms cubic-bezier(.62,.02,.28,1)}
.wm.turn .wmc{animation:wmclover 760ms cubic-bezier(.62,.02,.28,1)}
@media(prefers-reduced-motion:reduce){
 .wm.turn,.wm.turn .wms,.wm.turn .wmc{animation:none}}
.mt{font-size:17px;font-weight:700;letter-spacing:-.03em}

/* ---- the sheet and its rhythm ------------------------------------------- */
.sheet{padding:0 var(--pad) 40px;max-width:760px;margin:0 auto}
.sect{margin-top:42px}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
/* baselines line up two pieces of writing; a control has none worth aligning */
.sh.act{align-items:center}
.sh h4{font-size:21px;font-weight:700;letter-spacing:-.028em;line-height:1.1}
.sh>span{font-size:12.5px;color:var(--mut);flex:none}
/* The picture's own control, on the picture's own line. The full pill under a
   card sat a page-scroll away from the thing it saves once the card is as tall
   as the card is; up here it arrives with the heading that names it, and it is
   sized as the one action in a section rather than as the one action on the
   page. */
.dlb{flex:none;padding:9px 15px;border-radius:8px;
 background:var(--ink);color:var(--paper);
 font-size:13.5px;font-weight:600;letter-spacing:-.012em;
 box-shadow:0 1px 3px rgba(25,25,23,.18);
 transition:transform .12s var(--e-out),background .14s var(--e-out)}
.dlb:hover{background:var(--body)}
.dlb:active{transform:scale(.98)}
.sh+*{margin-top:14px}

/* The rail above already numbers the steps, so the header is the headline and
   nothing else. Clear rides in a second column beside the headline's first
   line, and collapses that column to nothing when there is nothing to clear. */
.phx{position:relative;padding-top:30px;
 display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.phx>*{grid-column:1}
/* Two destructive controls at two scales: the filled pill in the header wipes
   the step and asks twice, the ghost chip on a division redoes just that one.
   Both are absent until there is something to clear, and both arrive and leave
   on the same short rise. */
/* Clear keeps a visible box — it is the destructive one, and a chip reads as a
   thing you press. The box is what aligns to the column here, not the text, so
   the fill does not hang past the cards the way a bare word would. Reset stays
   plain text: boxed is the heavier of the two. */
.clr{grid-column:2;grid-row:1;justify-self:end;margin-top:5px;
 overflow:hidden;
 font-family:var(--cond);font-size:12.5px;font-weight:700;letter-spacing:.07em;
 text-transform:uppercase;color:var(--mut);
 padding:6px 9px;border-radius:7px;background:rgba(25,25,23,.055);
 white-space:nowrap;opacity:0;transform:translateY(-4px);
 transition:background .16s var(--e-out),color .16s var(--e-out),
  width .22s var(--e-out),opacity .2s var(--e-out),transform .26s var(--e-out)}
.clr.in{opacity:1;transform:none}
.clr:hover{background:rgba(25,25,23,.1);color:var(--ink)}
.clr.in:active{transform:scale(.95)}
/* the fill arrives only once it is armed, so the colour itself is the warning */
.clr.armed,.clr.armed:hover{background:var(--hls);color:var(--ink)}
.clrl{display:block}
.phx h1{font-size:31px;font-weight:700;letter-spacing:-.032em;line-height:1.08;
 text-wrap:balance}
.lede{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--mut2);
 margin-top:12px;max-width:46ch;text-wrap:pretty}
.hint{font-family:var(--serif);font-size:14.5px;line-height:1.5;color:var(--mut2);
 margin-top:12px;max-width:52ch}
.hint.done{color:var(--fnt)}

/* ---- progress rail ------------------------------------------------------- */
/* It was called a rail and there was no rail: four dots floating in four
   columns, with nothing to say they were a sequence or how far along it you
   were. There is a track now, inked in as far as you have reached, and the
   dots sit on it rather than beside each other.

   One equal column per step, however many there are — a fixed count outlives
   the steps it was written for, and a five-column track holding four buttons
   parks them all to the left of a column that is not there any more. --n is
   how many there are and --i how far the ink runs, both set by rail(). */
.rail{--n:4;--i:0;position:relative;
 display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
 padding:16px var(--pad) 2px;max-width:760px;margin:0 auto}
/* No gap between the columns, so a dot's centre is exactly half a column in
   from its own edge and the track can be drawn from arithmetic alone. */
/* Behind the buttons, not over them: both are positioned children of the same
   nav, so without a layer the later one — the track — paints across the faces
   of the dots and strikes their numerals through. */
.rail::before,.rail::after{content:'';position:absolute;top:32.5px;height:2px;
 border-radius:2px;z-index:0;
 left:calc(var(--pad) + (100% - var(--pad)*2)/var(--n)/2)}
.rail::before{right:calc(var(--pad) + (100% - var(--pad)*2)/var(--n)/2);
 background:var(--hr2);opacity:.45}
.rail::after{width:calc((100% - var(--pad)*2)/var(--n)*var(--i));
 background:var(--ink);transition:width .42s var(--e-out)}
.rl{display:flex;flex-direction:column;align-items:center;gap:9px;padding:5px 2px 8px;
 position:relative;z-index:1;background:none;border:0;cursor:pointer}
/* the ring of paper is what lets the track pass behind the dots without
   touching them, at any track colour */
.rl i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
 font-style:normal;font-size:11.5px;font-weight:700;
 background:var(--paper);color:#C6C5BC;
 box-shadow:0 0 0 4px var(--paper),inset 0 0 0 2px var(--hr2);
 transition:background .16s,color .16s,box-shadow .16s}
.rl span{font-size:13px;font-weight:500;color:var(--fnt);letter-spacing:-.012em;
 white-space:nowrap;transition:color .16s}
/* Only a step still to come is drawn as an outline. A filled dot is already a
   shape against the paper and does not need an edge to say so — a ring in its
   own colour is either invisible or, in the highlight's case, a second gold
   the design does not otherwise use. */
.rl.ok i{background:var(--ink);color:var(--paper);
 box-shadow:0 0 0 4px var(--paper)}
.rl.ok span{color:var(--mut)}
.rl.on i{background:var(--hl);color:var(--ink);
 box-shadow:0 0 0 4px var(--paper),0 1px 3px rgba(25,25,23,.18)}
.rl.on span{color:var(--ink);font-weight:600}
.rl[disabled]{cursor:default}
.rl[disabled] span{color:#C6C5BC}

/* ---- the team's mark ------------------------------------------------------
   One object at four sizes. A real logo sits on the paper unboxed; a team
   with no file on disk gets a tile in its own colour carrying its
   abbreviation, which is a designed stand-in rather than a guess at a
   trademark. Both occupy the same square, so a mixed set still lines up. */
.mark{display:grid;place-items:center;flex:none;width:26px;height:26px;position:relative}
.mark img{width:100%;height:100%;object-fit:contain;display:block}
.mark.tile{border-radius:5px;background:var(--tc)}
.mark.tile i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.02em;
 color:#fff;line-height:1}
.mark.none{width:0}
.mark.sm{width:22px;height:22px}
.mark.sm.tile i{font-size:7.5px}
.mark.bg{width:38px;height:38px;margin:0 auto 6px}
.mark.bg.tile i{font-size:12px}
.mark.lg{width:46px;height:46px}
.mark.lg.tile i{font-size:14px}


/* ---- seeding --------------------------------------------------------------
   The top four are placed rather than picked, so the row is a thing you move
   rather than a thing you fill. Arrows instead of drag: a drag handle on a
   phone competes with the page scroll, and the whole interaction here is
   four small moves. */
/* Same label as a division's: same face, size, tracking, optical left inset,
   and the same distance to the cards under it. Two screens with two sizes of
   the same thing was the whole complaint. */
/* Set the way the export card sets the same line — Söhne, sentence case, one
   step down from the conference above it — so the two are reading the same
   sheet. */
.bandl{margin:0;padding-left:3px;padding-bottom:3px;
 font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.bandl em{font-family:var(--sans);font-style:normal;font-size:12.5px;font-weight:400;
 letter-spacing:-.005em;text-transform:none;color:var(--fnt);margin-left:10px}
.bandl+.seeds{margin-top:10px}
.bandl.wc{margin-top:24px}
/* .bandl's own margin:0 outranks .sh+* at equal specificity, so the gap under
   the conference head has to be named here */
.sh+.bandl{margin-top:14px}
.seeds{display:grid;gap:6px}
.sd{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 4px 0 10px;
 border-radius:8px;background:var(--card);box-shadow:var(--cardsh);
 transition:background 180ms var(--e-out);will-change:transform}
.sd.full{background:var(--tc)}
.sd.full .sdt{color:var(--tf)}
.sd.full .sdb{color:var(--tc);background:var(--tf)}
.sd.full .sdx{color:var(--tf);background:rgba(255,255,255,.16)}
.sd.full .sdx:hover{background:rgba(255,255,255,.3)}
.sd.full .gripd{background:var(--tf);opacity:.5}
.sd.full .grip:hover{background:rgba(255,255,255,.16)}
.sd.full .grip:hover .gripd{opacity:.85}
.sd.full .mark.tile{background:var(--tf)}
.sd.full .mark.tile i{color:var(--tc)}
.sd.open{background:rgba(25,25,23,.035);box-shadow:none}
/* The seed is the whole point of the row and it was set smaller than the
   division badge at the other end of it. It is a numeral now rather than a
   chip in a circle — the same move the export card makes, at the same share
   of the row's height — which buys the size out of the box it was sitting in
   rather than out of the row. Fixed width, so the names line up down the
   column whatever the digit. */
.sdn{flex:none;width:30px;text-align:center;font-style:normal;
 font-size:30px;font-weight:700;letter-spacing:-.05em;line-height:1;
 color:#C6C5BC;font-variant-numeric:tabular-nums}
.sd.full .sdn{color:var(--tf)}
.sdt{flex:1;min-width:0;text-align:left;font-size:15.5px;font-weight:600;
 letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdt.empty{font-weight:400;color:var(--fnt);font-size:14px}
.sdb{flex:none;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:var(--mut2);background:rgba(255,255,255,.6);
 padding:3px 6px;border-radius:3px}
.sdx{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
 font-size:12px;color:var(--mut);background:rgba(25,25,23,.06)}
.sdx:hover{background:rgba(25,25,23,.12);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 white-space:nowrap}

/* the grip, and the two states a drag puts a row into */
.grip{flex:none;display:grid;grid-template-columns:repeat(2,4px);gap:3px;
 justify-content:center;align-content:center;width:34px;height:38px;border-radius:6px;
 cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
 transition:background .15s var(--e-out)}
.gripd{width:4px;height:4px;border-radius:50%;background:rgba(25,25,23,.3)}
.grip:hover{background:rgba(25,25,23,.07)}
.grip:hover .gripd{background:rgba(25,25,23,.5)}
.grip:active{cursor:grabbing}
.grip:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.seeds.dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
.sd.slide{transition:transform 190ms cubic-bezier(.2,.7,.3,1)}
.sd.lift{position:relative;z-index:5;cursor:grabbing;
 box-shadow:0 2px 6px rgba(25,25,23,.14),0 16px 34px -12px rgba(25,25,23,.5);
 transform-origin:50% 50%}
.sd.lift .grip .gripd{background:rgba(25,25,23,.55)}
.sd.held{box-shadow:var(--cardsh),0 0 0 2px var(--hls)}
@media(prefers-reduced-motion:reduce){.sd.slide{transition:none}}

/* ---- the bracket ---------------------------------------------------------
   Three columns a conference, each with fewer games than the last, so the
   shape converges. The games distribute with space-around inside a common
   height, which is what makes a column of two sit between a column of three
   without anything being positioned by hand. The connecting lines are drawn
   into the SVG underneath after layout — see lines() — because where a game
   ends up depends on the width the column got. */
.bkt{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:0 var(--bgap,26px);align-items:stretch}
.blines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bcol{display:flex;flex-direction:column;min-width:0;position:relative;z-index:1}
/* the same label as a division's or a seeding band's, only as small as three
   of them across one column will allow */
.bch{font-family:var(--cond);font-size:11.5px;font-weight:700;letter-spacing:.05em;
 text-transform:uppercase;color:var(--mut);text-align:center;margin-bottom:10px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgs{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:14px}
.bgm{display:grid;border-radius:8px;background:var(--card);overflow:hidden;
 box-shadow:var(--cardsh);min-width:0}
.bsl{display:grid;grid-template-columns:17px auto minmax(0,1fr);align-items:center;gap:6px;
 min-height:42px;padding:0 9px;text-align:left;min-width:0;
 transition:background 180ms var(--e-out),opacity 180ms var(--e-out)}
.bsl+.bsl{border-top:1px solid var(--hr)}
/* nothing has reached it yet, so it recedes rather than holding a card's worth
   of weight next to games that have actually been played */
.bgm.open{background:rgba(25,25,23,.035);box-shadow:none}
.bgm.open .bsl+.bsl{border-top-color:transparent}
.bsl.held{cursor:default}
.bsl.held .bnm,.bsl.held .bsd{color:var(--mut)}
.bsl.held .mark{opacity:.55}
.bsd{font-style:normal;font-size:12px;font-weight:600;color:var(--fnt);text-align:center}
.bnm{font-size:13.5px;font-weight:600;letter-spacing:-.01em;min-width:0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsl .mark{opacity:.8}
.bsl.empty{cursor:default}
.bsl.empty .bnm{color:var(--fnt);font-weight:400}
.bsl.lost{opacity:.44}
.bsl.lost:hover{opacity:.7}
.bsl.w{background:var(--tc)}
.bsl.w .bnm{font-weight:700;color:var(--tf)}
.bsl.w .bsd{color:var(--tf);opacity:.65}
.bsl.w .mark{opacity:1}
.bsl.w .mark.tile{background:var(--tf)}
.bsl.w .mark.tile i{color:var(--tc)}
.bsl:active{background:rgba(25,25,23,.05)}

/* the final is not a bracket cell — it is the one game everything led to */
/* The wild-card pool on seeding. These rules were deleted in error when step
   one moved from dragging to tapping — they read like leftovers from that UI,
   but the pool still uses them, and without them the list rendered as a run of
   unstyled text. */
.tms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}
.tm{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
 grid-template-areas:"d c" "d n";gap:0 10px;align-items:center;text-align:left;
 padding:8px 12px;border-radius:8px;background:var(--card);box-shadow:var(--cardsh);
 transition:background 180ms var(--e-out),box-shadow 180ms var(--e-out),
            transform 110ms var(--e-out)}
/* The template names a column for the badge and nothing claimed it, so the logo
   auto-placed into the first free cell and sat against the city line instead of
   spanning both. Same row as a division's, so it should read as the same card. */
.tm>.mark{grid-area:d}
.tm.on>.mark{opacity:1}
.tct{grid-area:c;font-size:11.5px;color:var(--mut);line-height:1.25;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnm{grid-area:n;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm:active{transform:scale(.97)}
.tm.on{background:var(--tc);box-shadow:var(--cardsh)}
.tm.on .tnm{font-weight:700;color:var(--tf)}
.tm.on .tct{color:var(--tf);opacity:.7}
.tm.on .mark.tile{background:var(--tf)}
.tm.on .mark.tile i{color:var(--tc)}

.sbw{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.sbh{padding:16px 8px 18px;border-radius:10px;background:var(--card);
 box-shadow:var(--cardsh);text-align:center;min-width:0;
 transition:background .16s var(--e-out)}
.sbc{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.sbn{display:block;font-size:19px;font-weight:600;letter-spacing:-.024em;margin-top:2px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbh.empty{cursor:default;box-shadow:none;background:rgba(25,25,23,.03)}
.sbh.empty .sbn{font-weight:400;color:var(--fnt);font-size:14px}
.sbh.lost{opacity:.5}
.sbh.w{background:var(--tc)}
.sbh.w .sbn{font-weight:700;color:var(--tf)}
.sbh.w .sbc{color:var(--tf);opacity:.72}
.sbv{font-family:var(--cond);font-size:12.5px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:var(--fnt);flex:none;line-height:1}
.champ{display:flex;align-items:center;gap:14px;margin-top:14px;padding:17px 18px;
 border-radius:10px;background:var(--ts);box-shadow:var(--cardsh)}
.champ span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--tsf);opacity:.72;flex:none}
.champ b{font-size:22px;font-weight:700;letter-spacing:-.028em;margin-left:auto;
 text-align:right;line-height:1.15;color:var(--tsf)}

/* ---- awards -------------------------------------------------------------- */
.awd{display:grid;gap:12px}
.awin{width:100%;padding:12px 14px;border-radius:8px;border:0;background:var(--card);
 box-shadow:var(--cardsh);font-size:17px;font-weight:600;letter-spacing:-.018em;
 outline:0;transition:box-shadow .15s}
.awin::placeholder{font-weight:400;color:var(--fnt)}
.awin:focus{box-shadow:var(--cardsh),0 0 0 2px var(--hls)}
.awin.wide{margin-top:14px}
.awd.has .awin{background:color-mix(in srgb,var(--tc) 12%,var(--card))}
.awt{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.tmini{display:grid;place-items:center;min-height:40px;border-radius:6px;
 background:rgba(25,25,23,.04);transition:background .14s,transform .12s var(--e-out)}
.tmini .mark{opacity:.5;transition:opacity .14s}
.tmini:hover .mark{opacity:.85}
.tmini.on{background:color-mix(in srgb,var(--tc) 20%,var(--paper))}
.tmini.on .mark{opacity:1}
.tmini:active{transform:scale(.95)}
.mark.xs{width:22px;height:22px}
.bsl .mark.xs{width:19px;height:19px}
.mark.xs.tile i{font-size:7px}

/* ---- the card and the buttons ------------------------------------------- */
/* ---- the pictures ---------------------------------------------------------
   A 1080px card drawn into a phone's 335px column is at 31% of its size — the
   scale where the team name across the header still reads and the seed rows
   under it turn to grain. Widening the preview does not fix that: running it
   to the edges buys twelve percent and costs the card its edge, its shadow and
   its alignment with the heading above it, so it stops reading as a picture of
   something and starts reading as the page. It stays a thumbnail, and tapping
   it opens the card at a size you can actually read. */
.cardwrap{border-radius:10px;overflow:hidden;box-shadow:var(--cardsh);
 background:var(--card);cursor:zoom-in}
#card1,#card2{display:block;width:100%;height:auto}

.lightbox{position:fixed;inset:0;z-index:60;background:rgba(25,25,23,.94);
 overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 animation:fadeIn 160ms var(--e-out)}
/* Centring a child that is bigger than its scroll container clips the overflow
   on the leading edge — align-items does, auto margins do not. The inner box is
   as wide as its content and at least as wide as the screen, so the centring
   happens inside the scrollable area rather than against it. */
.lbin{min-width:100%;min-height:100vh;min-height:100dvh;width:max-content;display:flex}
/* As wide as the screen, or as tall as it — whichever shows more of the card —
   and never past 1080, which is the card. Fitting the height alone would hand a
   short window something smaller than the preview it was opened from. */
.lbin img{display:block;margin:auto;height:auto;max-width:none;
 width:min(1080px,max(100vw,80vh));width:min(1080px,max(100vw,80dvh))}
.lbx{position:fixed;top:12px;right:12px;width:38px;height:38px;border:0;
 border-radius:50%;background:rgba(250,250,246,.14);color:var(--paper);
 font-size:15px;line-height:1;cursor:pointer;
 transition:background .15s var(--e-out)}
.lbx:hover{background:rgba(250,250,246,.26)}
.acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.nextbar{margin-top:42px}
.next{display:inline-grid;place-items:center;min-height:50px;padding:0 24px;
 border-radius:9px;background:var(--ink);color:var(--paper);
 font-size:15.5px;font-weight:600;letter-spacing:-.012em;
 box-shadow:0 1px 3px rgba(25,25,23,.2);transition:transform .12s var(--e-out)}
.next:active{transform:scale(.99)}
.next.off{background:rgba(25,25,23,.09);color:var(--fnt);box-shadow:none;cursor:default}
.ghost{display:inline-grid;place-items:center;min-height:50px;padding:0 20px;
 border-radius:9px;font-size:15px;font-weight:500;color:var(--mut)}
.ghost:hover{color:var(--ink)}
.nextbar .next{width:100%}

/* ---- motion ---------------------------------------------------------------
   The entrance belongs to the step change and to nothing else. It runs off a
   class the router adds for one paint, so a pick inside a step cannot trigger
   it — a whole page re-entering every time you tap a chip is what makes an app
   feel like it is reloading rather than responding.

   Selection is a transition on the element that was touched, not an animation
   on the page around it: press feedback under the finger, then colour arriving
   over 180ms on a decelerating curve. Nothing moves position, because a
   control that shifts when you choose it is a control you have to re-find. */
.sheet.enter>*{animation:blockIn 320ms var(--e-out) backwards}
.sheet.enter>*:nth-child(2){animation-delay:45ms}
.sheet.enter>*:nth-child(3){animation-delay:80ms}
.sheet.enter>*:nth-child(n+4){animation-delay:105ms}
@keyframes blockIn{from{opacity:0;transform:translateY(8px)}}

/* a region redrawn mid-step arrives without travelling */
.fadein{animation:fadeIn 200ms var(--e-out) backwards}
@keyframes fadeIn{from{opacity:0}}

@media(min-width:601px){
 .tms{grid-template-columns:repeat(4,minmax(0,1fr))}
 .pool{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bkt{--bgap:40px}
 .bsl{grid-template-columns:20px auto minmax(0,1fr);min-height:44px;gap:8px}
 .bnm{font-size:15px}
 .bch{font-size:12px}
 .phx h1{font-size:38px}
 .rl span{font-size:14px}
 .nextbar .next{width:auto;min-width:280px}
}
@media(max-width:400px){
 .rl span{font-size:11.5px}
 .bkt{--bgap:16px}
 .bsl{grid-template-columns:14px auto minmax(0,1fr);gap:4px;padding:0 4px}
 .bnm{font-size:12.5px}
 .awt{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:0s!important;transition-duration:0s!important}
}

/* ---- the award board ------------------------------------------------------
   Fifty names is too many for a text box and too many for a grid, so it is a
   filtered list: search at the top, the field ranked by price underneath, and
   a write-in at the bottom for anyone the board has missed. Once a pick is
   made the list collapses to the pick, because the decision is done. */
.finder{margin-top:14px}
.fsearch{width:100%;padding:11px 14px;border-radius:8px;border:0;background:var(--card);
 box-shadow:var(--cardsh);font-size:15.5px;outline:0;transition:box-shadow .15s}
.fsearch::placeholder{color:var(--fnt)}
.fsearch:focus{box-shadow:var(--cardsh),0 0 0 2px var(--hls)}
.cnds{margin-top:10px;max-height:330px;overflow-y:auto;-webkit-overflow-scrolling:touch;
 border-radius:8px;background:var(--card);box-shadow:var(--cardsh)}
.cnd{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
 gap:10px;width:100%;min-height:48px;padding:0 13px;text-align:left;
 transition:background 140ms var(--e-out)}
.cnd:active{background:rgba(25,25,23,.07)}
.cnd+.cnd{border-top:1px solid var(--hr)}
.cnd:hover{background:rgba(25,25,23,.035)}
.cnd .mark{opacity:.9}
.cnn{font-size:15px;font-weight:600;letter-spacing:-.018em;min-width:0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnt{font-size:11.5px;color:var(--mut);white-space:nowrap}
.cno{font-size:13px;font-weight:600;color:var(--mut2);min-width:52px;text-align:right;
 font-variant-numeric:tabular-nums}
.cnone{font-family:var(--serif);font-size:14.5px;color:var(--mut2);margin-top:12px}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 grid-template-areas:"m n x" "m s x";gap:1px 13px;align-items:center;
 margin-top:14px;padding:14px 14px 15px;border-radius:9px;box-shadow:var(--cardsh);
 background:var(--tc,var(--card));overflow:hidden;position:relative}
.pick .mark{grid-area:m}
/* The cut-out sits straight on the team's colour — a plate behind it only drew
   a second card inside the first — and it stands on the card's bottom edge
   rather than floating above it. The negative margin is the card's own bottom
   padding, so the figure reaches the border and the card's overflow clips it
   to the same rounded corner. */
/* The cut-outs are landscape, 600x436 every one of them, so a square box was
   taking the shoulders off: height is set and the width follows the picture.

   The card had thirty spare pixels above and below a 46px face, so the face can
   fill it without the card growing. It only stays out of the height because it
   is taken out of the flow — a picture in the grid would set the row height and
   push the card taller, which is what a bigger one did. An empty cell holds the
   column open for it instead. */
.pkfw{grid-area:m;width:99px}
.pkf{position:absolute;left:14px;bottom:0;height:91%;width:auto;
 object-fit:contain;object-position:50% 100%;display:block;background:none}
.pkn{grid-area:n;font-size:19px;font-weight:700;letter-spacing:-.026em;align-self:end;
 min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkn{color:var(--tf,var(--ink))}
.pkm{grid-area:s;font-size:12.5px;align-self:start;color:var(--tf,var(--mut2));opacity:.74}
/* the control sits on the team's colour, so it is tinted from the foreground
   rather than from ink — a white wash would vanish on the pale fills */
.pkx{grid-area:x;font-size:13px;font-weight:500;color:var(--tf,var(--mut));
 padding:7px 10px;border-radius:6px;
 background:color-mix(in srgb,var(--tf,#191917) 16%,transparent)}
.pkx:hover{background:color-mix(in srgb,var(--tf,#191917) 28%,transparent)}

/* ---- the wide screen ------------------------------------------------------
   Everything above this is a phone's column, and on a desktop it read as one:
   a 760px strip down the middle of a 1400px page with the two conferences
   stacked one under the other, which is the one arrangement the card this app
   produces never uses. So the steps take the shape of their own output — the
   seeds are AFC beside NFC, the three awards are the row they are printed as —
   and the two steps whose content is a single wide object, the bracket and the
   pictures, keep one column and spend the width on the object instead.

   Two tiers rather than one. The column pair arrives as soon as there is room
   for two readable columns; the three-across award boards need a good deal
   more — a pick sets a headshot, a name, a club and a control, and Christian
   McCaffrey needs 166 of the 309 a third of the full sheet leaves — so they
   wait for the width at which the sheet stops growing. Asking for both at the
   same width would either hold the pair back or hand the boards a width they
   cannot use. */
@media(min-width:940px){
 /* A thousand of content is the card's two 472s and the gutter between them,
    inside a page margin twice the phone's. The sheet is free to be narrower
    than that on the way up — the columns simply share whatever there is — but
    never wider, or the rows stretch past the length a name needs and the page
    goes back to looking like a phone that grew. */
 .sheet{max-width:1080px;padding-left:40px;padding-right:40px}

 .sheet[data-step="seeds"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;align-items:start}
 /* the header and the button that carries you on belong to the step rather
    than to either conference, so they span */
 .sheet[data-step="seeds"]>.phx,.sheet[data-step="seeds"]>.nextbar{grid-column:1/-1}
 /* every column starts on the same line, whatever the one beside it holds */
 .sheet[data-step="seeds"]>.sect{margin-top:40px}
 /* a conference column has half the room the whole sheet had, and its pools
    are sized off the column rather than off the window */
 .sheet[data-step="seeds"] .pool{grid-template-columns:repeat(2,minmax(0,1fr))}

 /* A name is a few words long however wide the page is; the field it goes in
    should not be a thousand pixels because the picture under it is. */
 .sheet[data-step="share"] .awin.wide{max-width:440px}
}

@media(min-width:1080px){
 .phx h1{font-size:44px}
 .rail{padding-top:20px}

 .sheet[data-step="awards"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:36px;align-items:start}
 .sheet[data-step="awards"]>.phx,.sheet[data-step="awards"]>.nextbar{grid-column:1/-1}
 .sheet[data-step="awards"]>.sect{margin-top:40px}
 /* Three picks across cannot also run the name, the club and the control on
    one line, so the control takes its own — held to the card's right edge
    rather than left under the club. The cut-out is absolutely positioned and
    stands on the bottom edge, so it is at its widest exactly where that third
    line sits: started from the left the button lands on the player's shoulder,
    and it lands somewhere different on each of the three. Against the right
    edge it clears every one of them and the three agree with each other. */
 .sheet[data-step="awards"] .pick{grid-template-areas:"m n" "m s" "m x";gap:1px 13px}
 .sheet[data-step="awards"] .pkx{justify-self:end;margin-top:9px;
  position:relative;z-index:1}
 /* three boards at once is the whole point of the arrangement; give them the
    height the window has to spare */
 .sheet[data-step="awards"] .cnds{max-height:420px}
}