/* =============================================================================
   HockeyPickem
   An ice rink, not a dashboard.

   Every colour is a rink marking: the pale blue-white of fresh ice, the white
   of the boards, and the two line colours. Nothing else earns a place, so blue
   and red stay meaningful -- blue is "this is actionable", red is "this is
   wrong, or this player will not play". A third accent would dilute both.

   Type does the arena work. Barlow Condensed is jersey numbering and rink-board
   signage: condensed, uppercase, widely tracked, used only for headings and
   labels. IBM Plex Sans carries body text. IBM Plex Mono carries EVERY number
   with tabular figures, because a budget that reflows as it counts down reads
   as broken.
   ============================================================================= */

/* ---- fonts: self-hosted, no third-party request at runtime ---------------- */
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Light by intent, not by default. Without this, Chrome's auto-dark inverts
     the whole palette on a device set to dark mode -- and an inverted rink is
     not a dimmer rink, it is a different design. Declaring the scheme tells the
     browser the light palette is deliberate and to leave it alone. Paired with
     <meta name="color-scheme" content="light"> in the layout head. */
  color-scheme: light;

  /* rink markings. Contrast ratios measured, not estimated. */
  --ice:      #E8EEF5;   /* fresh ice, page background */
  --panel:    #FFFFFF;   /* boards */
  --blue:     #1B3A8C;   /* blue line  -- 10.34:1 on white, 8.85:1 on ice */
  --blue-ink: #163075;   /* pressed / hover */
  --red:      #C8102E;   /* centre red -- 5.88:1 on white (fills only) */
  --red-ink:  #8E0B20;   /* red TEXT on light -- 9.46:1 on white */
  --ink:      #10131A;   /* near-black text -- 15.91:1 on ice */
  --muted:    #4E586B;   /* secondary text -- 6.13:1 on ice */
  --line:     #C9D6E4;   /* faint rink crease */
  --line-2:   #E1E9F2;
  --board:    #0E1116;   /* scoreclock housing */
  --board-2:  #1A1F29;

  --r:   6px;
  --r-s: 4px;
  --pad: 1rem;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 16px/1.55 var(--sans);
  color:var(--ink);
  background:var(--ice);
  /* faint vertical hairlines: ice under floodlight, not a grid */
  background-image:linear-gradient(90deg,#ffffff55 1px,transparent 1px);
  background-size:64px 100%;
}

/* ---- numbers: one rule, applied everywhere ------------------------------- */
/* Tabular figures mean 4 and 11 occupy the same box, so a counter ticking down
   never nudges the layout around it. */
.num,.chip,.stat .v,.sc-num,.sc-val,.code,td.n,.stats .v,.formline b,.pager a,.pager b,
.fam h3 .count{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:0;
}

/* ---- headings and labels ------------------------------------------------- */
h1,h2,h3,.label,.tab,.btn,button,th{
  font-family:var(--cond);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
h1{font-size:1.9rem;line-height:1.1;margin:0 0 .25rem}
h2{font-size:1.25rem;margin:1.75rem 0 .5rem}
h3{font-size:.95rem;margin:0 0 .4rem;color:var(--muted);letter-spacing:.12em}
p{margin:.5rem 0}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:2px}
.sub{color:var(--muted);font-size:.95rem;margin:0 0 1rem}
.muted{color:var(--muted);font-size:.9rem}

/* ---- focus: never removed, always obvious -------------------------------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--r-s)}
.scoreclock :focus-visible{outline-color:#FFFFFF}

/* =============================================================================
   Header
   ============================================================================= */
.bar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.6rem 1rem;background:var(--panel);
  border-bottom:3px solid var(--blue);
}
.brand{
  font-family:var(--cond);font-weight:700;font-size:1.35rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem;
}
.brand::before{content:'';width:.62rem;height:.62rem;border-radius:50%;
  background:var(--red);flex:0 0 auto}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--cond);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.9rem}
.bar nav a{color:var(--blue);text-decoration:none}
.bar nav a:hover{text-decoration:underline}
.who{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--line)}

main{max-width:62rem;margin:0 auto;padding:1.25rem 1rem 4rem}

/* =============================================================================
   Panel -- the one container
   ============================================================================= */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--pad);margin:1rem 0;
}
.panel > h2:first-child,.panel > h3:first-child{margin-top:0}
.panel-accent{border-left:4px solid var(--blue)}

/* =============================================================================
   Flash
   ============================================================================= */
.flash{
  border-radius:var(--r);padding:.7rem .9rem;margin:.75rem 0;
  border:1px solid var(--line);background:var(--panel);font-size:.95rem;
}
.flash.ok{border-left:4px solid var(--blue)}
.flash.err{border-left:4px solid var(--red);color:var(--red-ink)}

/* =============================================================================
   Forms
   ============================================================================= */
label{display:block;margin:.85rem 0;
  font-family:var(--cond);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.82rem;color:var(--muted)}
.label{font-family:var(--cond);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:.82rem;color:var(--muted)}
input,select,textarea{
  display:block;width:100%;max-width:24rem;margin-top:.3rem;
  font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-s);
  padding:.55rem .65rem;min-height:44px;
}
input::placeholder{color:#6C7688}
input:focus-visible,select:focus-visible{border-color:var(--blue)}
label small{display:block;margin-top:.25rem;font-family:var(--sans);
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}

button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--cond);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.95rem;line-height:1;
  padding:.7rem 1.1rem;min-height:44px;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  border-radius:var(--r-s);cursor:pointer;text-decoration:none;
}
button:hover,.btn:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
button:disabled{background:#5C677E;border-color:#5C677E;cursor:not-allowed}
button.ghost{background:transparent;color:var(--blue)}
button.ghost:hover{background:#EDF2F9}
button.danger{background:var(--red);border-color:var(--red)}
button.danger:hover{background:#A80D26;border-color:#A80D26}
button.link{background:none;border:0;color:var(--blue);text-decoration:underline;
  padding:.5rem .2rem;min-height:44px}
button.link:hover{background:none;color:var(--blue-ink)}
.inline{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.inline input,.inline select{width:auto;margin-top:0}
form.inline{margin:0}

/* =============================================================================
   Tables
   ============================================================================= */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin:1rem 0}
table{border-collapse:collapse;width:100%;min-width:22rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line-2);white-space:nowrap}
th{font-size:.75rem;letter-spacing:.1em;color:var(--muted);background:#F4F8FC;
  border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right}
tr.light td{background:#FFF6E8}

/* =============================================================================
   THE SCOREBOARD -- signature element
   Arena scoreclock: oversized mono digits in a near-black housing, points
   REMAINING as the hero number because that is what an entrant is actually
   managing. The bar beneath is budget consumed; it turns red the moment the
   lineup can no longer be completed.
   ============================================================================= */
.scoreclock{
  position:sticky;top:0;z-index:20;background:var(--board);
  border-radius:var(--r);margin:1rem 0;
  box-shadow:0 2px 14px #0e111633;overflow:hidden;
}
.sc-main{display:flex;align-items:stretch}
.sc-hero{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  padding:.7rem 1.1rem;min-width:6.5rem;border-right:1px solid #FFFFFF22}
.sc-num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:2.9rem;line-height:1;color:#fff}
.sc-lab{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:#A9B9CE;margin-top:.25rem}
.sc-side{display:flex;flex:1 1 auto}
.sc-cell{flex:1 1 5rem;display:flex;flex-direction:column;justify-content:center;
  padding:.7rem .9rem;border-right:1px solid #FFFFFF14}
.sc-cell:last-child{border-right:0}
.sc-val{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:1.4rem;line-height:1;color:#E8EEF5}
.sc-bar{height:6px;background:#FFFFFF1F}
.sc-fill{display:block;height:100%;width:0;background:#7AA2F0;transition:width .18s ease}
.sc-msg{margin:0;padding:.45rem .9rem;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;
  color:#A9B9CE;background:var(--board-2)}
.scoreclock.over .sc-num{color:#FF9AA9}
.scoreclock.over .sc-fill{background:var(--red)}
.scoreclock.over .sc-msg{color:#FFC2CC}
.scoreclock.ready .sc-fill{background:#63C48D}
.scoreclock.ready .sc-msg{color:#BFE8CF}
.scoreclock.locked{background:#2A2F3A}
.scoreclock.locked .sc-fill{background:#8A97AC}

/* =============================================================================
   Lineup slots
   ============================================================================= */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:.9rem;margin:1rem 0}
.fam{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.75rem}
.fam h3{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--line);padding-bottom:.35rem;margin-bottom:.5rem}
.fam h3 .count{color:var(--ink);font-size:.9rem;font-weight:700}
.slot{margin:.3rem 0}
.slot.empty{padding:.7rem .6rem;border:1px dashed var(--line);border-radius:var(--r-s);
  color:#5F6B80;font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;text-align:center}
.slotbtn{display:flex;width:100%;gap:.55rem;align-items:center;text-align:left;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:.45rem .55rem;border-radius:var(--r-s);min-height:44px;
  font-family:var(--sans);font-weight:400;text-transform:none;letter-spacing:0;cursor:pointer}
.slotbtn:hover{background:#F4F8FC;border-color:var(--blue)}
.slotbtn .x{margin-left:auto;color:var(--red);font-size:1.35rem;line-height:1;flex:0 0 auto}
.slot .nm{font-weight:600;font-size:.95rem}
.slot .mut{display:block;color:var(--muted);font-size:.78rem}
.slot.filled > div{display:flex;gap:.55rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-s);padding:.45rem .55rem}

/* =============================================================================
   Cost chip -- cheap to dear runs ice-pale to rink-red. Cost is temperature.
   ============================================================================= */
.chip{
  flex:0 0 2.1rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;
  border-radius:var(--r-s);font-weight:700;font-size:1rem;
  background:#DCE6F2;color:var(--ink);border:1px solid #C2D2E6;
}
.chip.c1{background:#F1F5FA;color:#3C4658}
.chip.c2{background:#DDE8F6;color:#22365E}
.chip.c3{background:#C3D6F0;color:#1B3A8C;border-color:#A9C4E8}
.chip.c4{background:#A8C3EA;color:#14295F;border-color:#8FB0E0}
.chip.c5{background:#F3D3D8;color:#8E0B20;border-color:#E9BCC3}
.chip.c6{background:#EDB9C1;color:#8E0B20;border-color:#E2A2AC}
.chip.c7{background:#DE8B98;color:#4D070F;border-color:#D27987}
.chip.c8{background:var(--red);color:#fff;border-color:#A80D26}

/* =============================================================================
   Player rows
   ============================================================================= */
.tabs{display:flex;gap:.4rem;margin:1.25rem 0 .6rem;flex-wrap:wrap}
.tab{padding:.55rem 1rem;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  color:var(--ink);text-decoration:none;font-size:.85rem}
.tab:hover{border-color:var(--blue);color:var(--blue)}
.tab.on{background:var(--blue);border-color:var(--blue);color:#fff}

.plist{list-style:none;margin:.5rem 0 0;padding:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prow{border-bottom:1px solid var(--line-2)}
.plist li:last-child{border-bottom:0}
.prow form{margin:0}
.prowbtn{display:flex;width:100%;gap:.65rem;align-items:center;text-align:left;
  background:none;border:0;color:var(--ink);padding:.6rem .7rem;min-height:52px;
  font-family:var(--sans);font-weight:400;font-size:1rem;
  text-transform:none;letter-spacing:0;cursor:pointer}
.prowbtn:hover{background:#F4F8FC}
.prowbtn.static{cursor:default}
.prow.picked{background:#EDF3FC;box-shadow:inset 3px 0 0 var(--blue)}
.prow.doubt{box-shadow:inset 3px 0 0 var(--red)}
.prow.picked.doubt{box-shadow:inset 3px 0 0 var(--red)}

.who-cell{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.who-cell .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-cell .mut{color:var(--muted);font-size:.78rem;font-family:var(--cond);
  font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tick{font-family:var(--cond);font-weight:700;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--blue);
  padding:.12rem .35rem;border-radius:2px;margin-left:.4rem;vertical-align:.08em}
.warn{color:var(--red-ink);font-weight:700}
/* A former member keeps their scored weeks in the standings; the badge says
   why they are there without implying they are still playing. */
.tick.former{background:#5F6B80}

/* Each stat is a number over its own label, so neither needs a legend. The
   columns are FIXED width and the labels wrap inside them: a label that runs
   long costs a line of height, never a pixel of the name's width. */
.stats{margin-left:auto;display:flex;gap:.5rem;align-items:flex-start;flex:0 0 auto}
.pstat{display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:0 0 auto;line-height:1.06}
.pstat-g{width:3.4rem}
.pstat-f{width:4.8rem}
.pstat .v{font-weight:700;font-size:1.05rem}
.pstat .v.none{color:var(--muted);font-weight:500}
.pstat .k{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;font-size:.62rem;color:var(--muted);margin-top:.2rem}
.pstat .k2{display:block;letter-spacing:.05em}

/* The narrow-screen form stat. Sentence case on purpose: it is a phrase, not
   a column label, and uppercase condensed at this length reads as shouting. */
.formline{display:none;color:var(--muted);font-size:.72rem;line-height:1.3}
.formline b{font-weight:700;color:var(--ink)}

.pager{display:flex;flex-wrap:wrap;gap:.3rem;margin:.9rem 0}
.pager a,.pager b{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.3rem .5rem;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--panel);text-decoration:none}
.pager a{color:var(--blue)}
.pager b{background:var(--blue);border-color:var(--blue);color:#fff}

/* =============================================================================
   Invite code and stat blocks
   ============================================================================= */
.code{font-weight:700;font-size:1.75rem;letter-spacing:.22em;margin:.35rem 0;
  color:var(--ink);background:var(--ice);border:1px dashed var(--line);
  border-radius:var(--r-s);padding:.6rem .7rem;overflow-wrap:anywhere}
.stat{display:inline-flex;flex-direction:column;margin:0 1.5rem .5rem 0}
.stat .v{font-size:1.5rem;font-weight:700;line-height:1}
.stat .k{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;color:var(--muted);margin-top:.15rem}
.saverow{margin:1rem 0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.searchrow{margin:.5rem 0}

/* =============================================================================
   Narrow screens -- verified down to 380px
   ============================================================================= */
@media (max-width:30rem){
  main{padding:1rem .7rem 3rem}
  h1{font-size:1.5rem}
  .sc-num{font-size:2.35rem}
  .sc-hero{min-width:5.4rem;padding:.6rem .8rem}
  .sc-cell{padding:.6rem .6rem;flex-basis:4rem}
  .sc-val{font-size:1.15rem}
  .sc-lab{font-size:.62rem;letter-spacing:.1em}
  /* Form leaves the stat columns and becomes a full-width line of its own:
     a line of height instead of width off the name. GAMES stays a column --
     it belongs beside the chip, being part of what the cost is derived from.
     flex-wrap is scoped to this breakpoint so the wide layout cannot wrap. */
  .prowbtn{gap:.5rem;padding:.55rem .5rem;flex-wrap:wrap}
  .pstat-f{display:none}
  .pstat-g{width:2.7rem}
  .pstat .k2{display:none}
  .formline{display:block;flex:0 0 100%;margin-top:.1rem}
  .chip{flex-basis:1.95rem;width:1.95rem;height:1.95rem;font-size:.95rem}
  .grid{grid-template-columns:1fr}
  .bar{padding:.5rem .7rem}
  .brand{font-size:1.15rem}
  .bar nav{gap:.7rem;font-size:.82rem;width:100%;margin-left:0}
  .code{font-size:1.3rem;letter-spacing:.14em}
  input,select{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* =============================================================================
   Headshot and team badge
   Both are identification, not signal. The cost chip is the only thing in a row
   that carries a graded meaning, so neither of these competes with it: the mug
   is a neutral disc and the badge is small, unbordered, and lives inside the
   secondary metadata line rather than beside the chip.
   ============================================================================= */
.mug{
  flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:#DDE5EF;                  /* neutral disc, shows through if absent */
  border:1px solid var(--line-2);
  display:block;
}
/* Fixed intrinsic size: the row never reflows as thumbnails arrive. */
.mug img{width:36px;height:36px;display:block;object-fit:cover;border-radius:50%}

.team{
  display:inline-block;
  font-family:var(--cond);font-weight:700;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;
  background:var(--tc,#4E586B);color:var(--tt,#FFFFFF);
  padding:0 .3rem;border-radius:2px;vertical-align:.06em;
}
@media (max-width:30rem){
  .mug,.mug img{flex-basis:32px;width:32px;height:32px}
}

/* =============================================================================
   Results
   The comparison that matters is cost against what was actually scored, so
   those two sit at opposite ends of each line with the name between them.
   ============================================================================= */
.rankcell{color:var(--muted);width:2.5rem}
td.strong{font-weight:700}

.weeklist{list-style:none;margin:.5rem 0;padding:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.weeklist li{border-bottom:1px solid var(--line-2)}
.weeklist li:last-child{border-bottom:0}
.weeklist a{display:flex;gap:.75rem;align-items:baseline;flex-wrap:wrap;
  padding:.7rem .8rem;text-decoration:none;color:var(--ink);min-height:44px}
.weeklist a:hover{background:#F4F8FC}
.weeklist .wk{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em}
.weeklist .mut{color:var(--muted);font-size:.85rem}

.entry.mine{border-left:4px solid var(--blue)}
.entryhead{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:.6rem;margin-bottom:.4rem}
.entryhead .rank{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:1.35rem;color:var(--muted);min-width:1.6rem}
.entryhead .ename{font-family:var(--cond);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.06em;flex:1 1 8rem}
.entryhead .etot,.entryhead .espend{display:flex;flex-direction:column;text-align:right}
.entryhead .etot .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:1.5rem;line-height:1}
.entryhead .espend .v{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.05rem;line-height:1;color:var(--muted)}
.entryhead .k{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.65rem;color:var(--muted);margin-top:.2rem}

.slotlist{list-style:none;margin:0;padding:0}
.sline{display:flex;gap:.6rem;align-items:center;padding:.4rem 0;
  border-bottom:1px solid var(--line-2)}
.sline:last-child{border-bottom:0}
.sstat{margin-left:auto;text-align:right;display:flex;flex-direction:column;flex:0 0 auto}
.sstat .pts{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:1.05rem}
.sstat .pts.neg{color:var(--red-ink)}
.sstat .mut{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--muted);font-size:.72rem;white-space:nowrap}
.ghostlink{background:transparent;color:var(--blue);border-color:var(--blue)}
.ghostlink:hover{background:#EDF2F9;color:var(--blue-ink)}

@media (max-width:30rem){
  .entryhead .ename{font-size:1rem;flex-basis:100%;order:-1}
  .entryhead .etot .v{font-size:1.3rem}
  .sstat .mut{font-size:.68rem}
  .rankcell{width:2rem}
}

/* =============================================================================
   Landing page
   The only page addressed to someone who has never seen the game, so it is
   also the only page that shows components out of context. They are the REAL
   components -- a genuine .chip, a genuine .scoreclock -- not pictures of
   them, so the page cannot drift from what the product actually looks like.
   ============================================================================= */
.hero{margin:.5rem 0 2rem}
.hero h1{font-size:2.5rem;line-height:1.05;margin-bottom:.6rem}
.hero-lede{font-size:1.15rem;line-height:1.5;max-width:34rem;margin:0 0 1.1rem}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .6rem}

/* ---- three steps --------------------------------------------------------- */
.steps{list-style:none;margin:.5rem 0 2rem;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pad);display:flex;gap:.8rem;align-items:flex-start}
/* The step number is a jersey number, not a bullet. */
.step-n{flex:0 0 auto;width:2.1rem;height:2.1rem;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:1.1rem;
  background:var(--blue);color:#fff;border-radius:var(--r-s)}
.step-body{min-width:0;flex:1 1 auto}
.step-body h3{color:var(--ink);font-size:1.05rem;letter-spacing:.06em;margin-bottom:.3rem}
.step-body p{font-size:.95rem}
.step-vis{margin:.8rem 0 0}
/* The demo scoreclock must not stick to the viewport the way the real one does. */
.scoreclock.demo{position:static;margin:0;box-shadow:none}
.scoreclock.demo .sc-num{font-size:2.1rem}
.scoreclock.demo .sc-hero{min-width:5rem;padding:.55rem .8rem}
.scoreclock.demo .sc-cell{padding:.55rem .7rem}
.scoreclock.demo .sc-val{font-size:1.1rem}

.chiprow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0}
.chiprow-lab{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.65rem;color:var(--muted);margin-left:.25rem}

.rhythm{display:flex;flex-direction:column;gap:.35rem}
.rhythm-i{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;color:var(--muted);
  padding-left:.7rem;border-left:2px solid var(--line)}
.rhythm-i .rhythm-d{color:var(--ink);font-weight:700}

/* ---- the squeeze --------------------------------------------------------- */
.squeeze-lede{font-size:1.1rem;font-weight:600;margin:0 0 .8rem}
.squeeze-math{background:var(--ice);border-radius:var(--r-s);padding:.7rem .8rem;
  margin:.8rem 0}
.squeeze-math b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.squeeze-close{border-top:1px solid var(--line);padding-top:.8rem;margin-top:1rem;
  color:var(--muted)}

/* Cost, who, games -- the three facts the comparison turns on, in that order.
   The games column is fixed width so the two rows align on it. */
.cmp{list-style:none;margin:.6rem 0;padding:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp-row{display:flex;gap:.65rem;align-items:center;padding:.55rem .6rem;
  border-bottom:1px solid var(--line-2)}
.cmp-row:last-child{border-bottom:0}
.cmp-who{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;line-height:1.25}
.cmp-who .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-who .mut{color:var(--muted);font-size:.78rem}
.cmp-g{flex:0 0 3.2rem;display:flex;flex-direction:column;align-items:center;
  line-height:1.06}
.cmp-g b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-size:1.05rem;color:var(--ink)}
/* The word stays at every width. A bare number beside a hockey player reads as
   goals -- the same misreading the picker's stat labels were rebuilt to stop. */
.cmp-g .lab{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;font-size:.62rem;color:var(--muted);margin-top:.2rem}

/* ---- scoring / rhythm panels --------------------------------------------- */
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1rem;margin:1rem 0}
.two-up .panel{margin:0}
h2.flush,h3.flush{margin-top:0}
.scoring{min-width:0}
.scoring td{border-bottom:1px solid var(--line-2);white-space:nowrap}
.scoring tr:last-child td{border-bottom:0}
.scoring td.n b{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;font-size:1.05rem}
.scoring td.n.neg b{color:var(--red-ink)}
.rhythm-list{margin:0}
.rhythm-list dt{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem;margin-top:.7rem}
.rhythm-list dt:first-child{margin-top:0}
.rhythm-list dd{margin:.15rem 0 0;font-size:.92rem;color:var(--muted)}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =============================================================================
   Footer -- site-wide. The NHL disclaimer belongs on every page, not just the
   one that markets the product.
   ============================================================================= */
.foot{border-top:1px solid var(--line);background:var(--panel);
  padding:1.25rem 1rem 2rem;margin-top:2rem}
.foot-in{max-width:62rem;margin:0 auto;display:flex;gap:1rem;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between}
.foot p{margin:0;color:var(--muted);font-size:.82rem;max-width:40rem}
.foot nav{display:flex;gap:1rem;flex-wrap:wrap;
  font-family:var(--cond);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.8rem}

/* =============================================================================
   Landing page at 380px
   ============================================================================= */
@media (max-width:30rem){
  .hero h1{font-size:1.85rem}
  .hero-lede{font-size:1.02rem}
  .hero-cta .btn{flex:1 1 100%}
  .step{gap:.65rem;padding:.8rem}
  .step-n{width:1.8rem;height:1.8rem;font-size:.95rem}
  .squeeze-lede{font-size:1rem}
  .foot-in{flex-direction:column;gap:.6rem}
}

/* =============================================================================
   Public pools and signup
   ============================================================================= */
/* The public list reuses .weeklist's rows; it only needs a place to put the
   join control at the end of the line. */
.pubpool{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  padding:.7rem .8rem}
.pubpool .wk{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em}
.pubpool .mut{color:var(--muted);font-size:.85rem}
.pubjoin{margin-left:auto}
.pubjoin .muted{font-size:.8rem}
/* Turnstile renders a fixed 300px widget; give it room without letting it
   push the form wider than the inputs above it. */
.ts-wrap{margin:1rem 0;max-width:100%;overflow-x:auto}
@media (max-width:30rem){
  .pubjoin{margin-left:0;flex-basis:100%}
  /* form.inline is inline-flex, so the button inside it needs the form to
     stretch too or Join renders narrow next to a full-width Open. */
  .pubjoin form,.pubjoin .btn,.pubjoin button{width:100%}
}

/* Admin: the one number that has to be readable at arm's length on a phone. */
.bigstate{font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:2rem;line-height:1;margin:.2rem 0 .6rem}
.bigstate.on{color:var(--blue)}
.bigstate.off{color:var(--muted)}

/* Pager context line: how many, where you are, and where your own row is. */
.pagemeta{margin:.8rem 0 .2rem}

/* =============================================================================
   Completion guard
   A blocked row stays fully readable -- the entrant needs to see who it is and
   why they cannot have them. Greyed, not hidden and not faded into
   illegibility: the reason line is the point.
   ============================================================================= */
.prow.blocked{background:#F7F9FC}
.prow.blocked .prowbtn{cursor:not-allowed}
.prow.blocked .prowbtn:hover{background:#F7F9FC}
.prow.blocked .nm{color:var(--muted)}
/* The chip keeps its colour: the cost is exactly what the entrant is being
   told to reconsider, so washing it out would hide the reason. */
.blockwhy{display:block;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;
  color:var(--red-ink);line-height:1.25;margin-top:.1rem}
.blockwhy[hidden]{display:none}

/* Four cells is one more than the clock used to carry; the slots cell is the
   one that goes when there is no room for it, because the slot grid below
   says the same thing. */
.sc-slots{border-right:0}
@media (max-width:30rem){
  .sc-slots{display:none}
}

/* The unfillable explainer sits under the clock and names the way out. */
.stuckbox{border-left:4px solid var(--red);line-height:1.45}

/* =============================================================================
   Sort bar
   Both directions are one tap. Ascending cost is how you fill the last slots
   and descending is how you spend the budget -- different jobs, so neither is
   hidden behind a second tap on the other.
   ============================================================================= */
.sortbar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.9rem 0 .2rem}
.sortbar-lab{font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;color:var(--muted);margin-right:.1rem}
.sortpair{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--panel);overflow:hidden}
.sortpair.on{border-color:var(--blue)}
.sortpair-lab{display:inline-flex;align-items:center;padding:0 .5rem;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;color:var(--ink)}
.sortbtn{display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;min-width:2rem;padding:0 .5rem;text-decoration:none;
  color:var(--blue);font-family:var(--cond);font-weight:600;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}
.sortbtn.arrow{border:0;border-left:1px solid var(--line);border-radius:0;
  font-size:.62rem;min-width:1.9rem}
.sortbtn:hover{background:#EDF2F9}
.sortbtn.on{background:var(--blue);border-color:var(--blue);color:#fff}
/* Visually hidden, still read aloud: the arrows alone are not a label. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
@media (max-width:30rem){
  .sortbar{gap:.3rem}
  .sortpair-lab{padding:0 .4rem;font-size:.68rem}
  .sortbtn{padding:0 .4rem;font-size:.7rem}
}