/* nfl/css/app.css — Pick me a Winner
   ------------------------------------------------------------------
   Direction: NFL broadcast graphics. Condensed caps, scoreboard mono
   numerals, hard edges, and team colour doing the decorating instead of
   borders and shadows.

   The signature is the SPINE: four stacked bands of a player's own team
   colours down the left edge of their row. Every player's spine is unique
   to their draft, so the board is readable as colour before it is read as
   text — which is the whole point on a phone during the 1pm games.

   Deliberately not: rounded pills, drop shadows, cards floating on a
   gradient. The rows butt together into one continuous scoreboard.
*/

:root{
  /* cool broadcast ground — not paper, not black */
  --field:   #dfe5ec;
  --card:    #ffffff;
  --card-2:  #f4f7fa;
  --ink:     #0d141c;
  --ink-2:   #5c6875;
  --ink-3:   #8b96a3;
  --rule:    #c4ceda;
  --rule-2:  #e3e9f0;

  --hot:     #d7263d;   /* leader / live */
  --gain:    #0b8f4f;   /* win */
  --loss:    #b03040;   /* loss */

  --display: 'Saira Condensed', 'Oswald', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

/* A bare `hidden` attribute loses to any class that sets display, and the
   boards and week picker all set display. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--field);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.app-shell{
  max-width:940px;
  margin:0 auto;
  padding:0 0 64px;
}

a{ color:inherit; }

/* ── Masthead ───────────────────────────────────────────────────── */
/* Home link and season sit on a utility row; the title gets its own full
   width beneath. Tried baseline-aligning all three and the two-line title
   left the link floating in the middle of nowhere. */
.mast{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 12px;
  padding:16px 16px 12px;
  border-bottom:3px solid var(--ink);
}
.mast-home{
  order:1;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.mast-home:hover{ color:var(--ink); border-bottom-color:var(--hot); }

.mast-title{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:clamp(34px, 8vw, 56px);
  line-height:.86;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
  order:3;
  flex:0 0 100%;
  min-width:0;
}
.mast-meta{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  text-align:right;
  white-space:nowrap;
  order:2;
  margin-left:auto;
}
.mast-rule{
  font-family:var(--body);
  font-size:12.5px;
  color:var(--ink-2);
  padding:8px 16px 0;
}
.mast-rule b{ color:var(--ink); font-weight:700; }

/* ── Notices ────────────────────────────────────────────────────── */
.notice{
  display:flex;
  gap:10px;
  margin:12px 16px 0;
  padding:10px 12px;
  border-left:4px solid var(--ink);
  background:var(--card);
  font-size:12.5px;
  line-height:1.5;
}
.notice b{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
  padding-top:2px;
}
.notice code{ font-family:var(--mono); font-size:11.5px; white-space:nowrap; }
.notice-demo   { border-left-color:#1c6fd0; }
.notice-demo b { color:#1c6fd0; }
.notice-hold   { border-left-color:#c98a00; }
.notice-hold b { color:#a06e00; }
.notice-bad    { border-left-color:var(--hot); }
.notice-bad b  { color:var(--hot); }
.notice ul{ margin:4px 0 0; padding-left:16px; }

/* ── Status line ────────────────────────────────────────────────── */
.statline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 14px;
  margin:12px 0 0;
  padding:9px 16px;
  background:var(--ink);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.stat{ display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.stat-k{ color:#7d8996; }
.stat-v{ color:#fff; font-weight:600; }
.stat-v.hot{ color:#ff8290; }
.stat-v.live{ color:#5fe0a0; }
.statline-end{ margin-left:auto; }
.reload{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  background:none;
  border:0;
  border-bottom:2px solid #3d4a58;
  padding:1px 0;
  cursor:pointer;
}
.reload:hover{ border-bottom-color:var(--hot); }
.reload:disabled{ opacity:.45; cursor:default; }

/* ── Scores strip ───────────────────────────────────────────────── */
.strip{
  display:flex;
  align-items:stretch;
  background:var(--card);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.strip-tag{
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#fff;
  background:var(--ink-2);
  padding:8px 10px;
  display:flex;
  align-items:center;
  white-space:nowrap;
  flex-shrink:0;
}
.strip-track{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.strip-track::-webkit-scrollbar{ display:none; }
.score{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 13px;
  border-right:1px solid var(--rule-2);
  font-family:var(--mono);
  font-size:11.5px;
  white-space:nowrap;
  flex-shrink:0;
}
.score-t{ font-weight:600; }
.score-t.owned{ color:var(--ink); border-bottom:2px solid currentColor; }
.score-t:not(.owned){ color:var(--ink-3); }
.score-n{ font-weight:600; font-variant-numeric:tabular-nums; }
.score-at{ color:var(--ink-3); font-size:10px; }
.score-s{ color:var(--ink-3); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.score.on{ background:#fff4f5; }
.score.on .score-s{ color:var(--hot); font-weight:600; }

/* ── View switch ────────────────────────────────────────────────── */
.switch{
  display:flex;
  align-items:flex-end;
  gap:2px;
  padding:16px 16px 0;
}
.switch-h{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 auto 0 0;
  padding-bottom:5px;
}
.tab{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:none;
  border:0;
  border-bottom:3px solid transparent;
  padding:6px 10px;
  cursor:pointer;
}
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ink); border-bottom-color:var(--hot); }

/* ── Week picker ────────────────────────────────────────────────── */
.weeks{
  display:flex;
  align-items:center;
  margin:10px 0 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--card);
}
.weeks-track{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  flex:1;
}
.weeks-track::-webkit-scrollbar{ display:none; }
.wk{
  position:relative;
  min-width:40px;
  padding:10px 0 8px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  color:var(--ink-2);
  background:none;
  border:0;
  border-right:1px solid var(--rule-2);
  border-bottom:3px solid transparent;
  cursor:pointer;
  flex-shrink:0;
}
.wk:hover{ background:var(--card-2); color:var(--ink); }
.wk.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--hot); background:var(--card-2); }
/* the live week keeps a marker once you have browsed away from it */
.wk.now::after{
  content:"";
  position:absolute; top:4px; right:5px;
  width:4px; height:4px;
  background:var(--hot);
}
.wk-step{
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink-2);
  background:var(--card-2);
  border:0;
  padding:10px 12px;
  cursor:pointer;
  flex-shrink:0;
}
.wk-step:hover{ color:var(--ink); }

/* ── The board ──────────────────────────────────────────────────── */
.board{
  background:var(--card);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.row{
  display:grid;
  grid-template-columns:7px 30px minmax(0,1fr) auto;
  align-items:start;
  gap:0 11px;
  padding:0 14px 0 0;
  border-bottom:1px solid var(--rule-2);
  position:relative;
}
.row:last-child{ border-bottom:0; }

/* THE SIGNATURE — four bands of this player's own team colours */
.spine{
  align-self:stretch;
  background:linear-gradient(180deg,
    var(--c1) 0 25%, var(--c2) 25% 50%, var(--c3) 50% 75%, var(--c4) 75% 100%);
}

.pos{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  line-height:1;
  color:var(--ink-3);
  padding-top:15px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.pos small{
  display:block;
  font-family:var(--mono);
  font-size:8px;
  font-weight:500;
  letter-spacing:.06em;
  margin-top:2px;
}

.who{ min-width:0; padding:12px 0 12px; }
.name{
  font-family:var(--display);
  font-weight:700;
  font-size:24px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
}
.line{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-2);
  margin:4px 0 9px;
  font-variant-numeric:tabular-nums;
}
.line i{ font-style:normal; color:var(--ink-3); }

/* four teams, plain — no chips */
.squad{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:5px 12px;
}
.squad li{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11.5px;
  min-width:0;
}
.squad img{ width:17px; height:17px; object-fit:contain; flex-shrink:0; }
.squad .ab{ font-weight:600; }
.squad .rc{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.squad li.on .ab{ color:var(--hot); }
.squad li.bad .ab{ color:var(--hot); text-decoration:line-through; }

.tally{
  text-align:right;
  padding:11px 0 12px;
  min-width:52px;
}
.tally-n{
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:38px;
  line-height:.82;
  letter-spacing:-.02em;
  display:block;
  font-variant-numeric:tabular-nums;
}
.tally-k{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:block;
  margin-top:3px;
}
.tally-g{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--ink-3);
  display:block;
  margin-top:5px;
  white-space:nowrap;
}

/* leader: red rail + tinted row, no glow, no shadow */
.row.lead{ background:linear-gradient(90deg, #fff6f7, var(--card) 220px); }
.row.lead .pos{ color:var(--hot); }
.row.lead .tally-n{ color:var(--hot); }
.row.lead .tally-g{ color:var(--hot); font-weight:600; }
.row.out{ opacity:.5; }

.flag{
  font-family:var(--mono);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
  background:var(--hot);
  padding:2px 5px;
}

/* live dot — a square, because everything else round was the problem */
.on-air{
  width:6px; height:6px;
  background:var(--hot);
  flex-shrink:0;
  animation:blink 1.4s steps(1) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ── Week board ─────────────────────────────────────────────────── */
.fixtures{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--rule-2);
}
.fx{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 0;
  font-family:var(--mono);
  font-size:11.5px;
  border-bottom:1px solid var(--rule-2);
  min-width:0;
}
.fx:last-child{ border-bottom:0; }
.fx img{ width:17px; height:17px; object-fit:contain; flex-shrink:0; }
.fx-me{ font-weight:600; }
.fx-at{ color:var(--ink-3); font-size:10px; }
.fx-op{ color:var(--ink-2); }
.fx-sc{ font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto; }
.fx-when{ color:var(--ink-3); font-size:10px; margin-left:auto; white-space:nowrap; }
.fx-r{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  width:15px;
  text-align:center;
  flex-shrink:0;
}
.fx-r.w{ color:var(--gain); }
.fx-r.l{ color:var(--loss); }
.fx-r.t{ color:var(--ink-3); }
.fx.bye{ color:var(--ink-3); }
.fx.bye .fx-when{ letter-spacing:.09em; text-transform:uppercase; font-size:9.5px; }
.fx.on{ background:#fff4f5; }

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{
  padding:16px;
  font-family:var(--mono);
  font-size:10px;
  line-height:1.7;
  letter-spacing:.03em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.empty{
  padding:28px 16px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-2);
}

:focus-visible{ outline:2px solid var(--hot); outline-offset:1px; }

/* ── Phone ──────────────────────────────────────────────────────
   The masthead is the one thing that will not shrink: a condensed 9vw
   title beside a link and a year is wider than 390px, and the overflow
   pushed the wins column off the right edge of the board. Stack it. */
@media (max-width:619px){
  .mast{ padding:14px 14px 10px; }
  .mast-title{ font-size:clamp(34px, 12vw, 50px); }
  .mast-rule{ padding:8px 14px 0; font-size:12px; }
  .notice{ margin:10px 14px 0; }
  .statline{ padding:8px 14px; gap:0 12px; }
  .switch{ padding:14px 14px 0; }
  .switch-h{ font-size:17px; }
  .foot{ padding:14px; }
  /* records are the widest thing in a squad cell — let them breathe less */
  .squad{ gap:5px 10px; }
}

/* ── Wider than a phone ─────────────────────────────────────────── */
@media (min-width:620px){
  .app-shell{ padding-top:14px; }
  .row{ grid-template-columns:9px 42px minmax(0,1fr) auto; gap:0 16px; padding-right:20px; }
  .squad{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px 14px; }
  .fixtures{ grid-template-columns:1fr 1fr; column-gap:20px; }
  .fx:nth-last-child(2):nth-child(odd){ border-bottom:0; }
  .name{ font-size:27px; }
  .tally-n{ font-size:44px; }
  .pos{ font-size:23px; padding-top:16px; }
  .mast, .mast-rule, .statline, .switch, .notice, .foot{ padding-left:20px; padding-right:20px; }
  .notice{ margin-left:20px; margin-right:20px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}