/* V2: contemporary sports desk, with a quiet nod to printed box scores. */
:root {
  --bg:#fff; --surface:#fff; --surface-2:#f6f7f9;
  --ink:#14161a; --ink-soft:#60656e; --ink-faint:#666c75;
  --line:#e3e5e9; --accent:#2858d6; --accent-soft:#edf2ff;
  --live:#217456; --shadow:transparent;
  --headline:var(--font-body);
  --masthead:"UnifrakturCook", Georgia, serif;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark; --bg:#101114; --surface:#101114; --surface-2:#191b20;
    --ink:#f5f6f8; --ink-soft:#a8aeb9; --ink-faint:#a8aeb9;
    --line:#30343c; --accent:#a2baff; --accent-soft:#222c43; --live:#71d6ae;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#101114; --surface:#101114; --surface-2:#191b20;
  --ink:#f5f6f8; --ink-soft:#a8aeb9; --ink-faint:#a8aeb9;
  --line:#30343c; --accent:#a2baff; --accent-soft:#222c43; --live:#71d6ae;
}
body { background-image:none; }
.wrap { max-width:1280px; padding-inline:48px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px; background:var(--ink); color:var(--bg); }
.skip-link:focus { top:12px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:12px; }
.masthead-title { font:700 34px/1.15 var(--masthead); letter-spacing:0; }
.masthead-period { color:var(--accent); }
.masthead-deck { display:flex; align-items:center; gap:24px; font-size:12px; color:var(--ink-soft); }
.masthead-deck span { padding-left:24px; border-left:1px solid var(--line); font:10px var(--font-body); letter-spacing:1px; }
nav { position:relative; border-block:1px solid var(--line); background:var(--bg); backdrop-filter:none; }
.nav-inner { min-height:52px; padding-block:4px; }
.wordmark { font-size:11px; font-weight:400; letter-spacing:.1px; color:var(--ink-soft); }
.wordmark .dot { width:5px; height:5px; background:var(--ink); }
.nav-right { gap:10px; }
.weekpills { max-width:none; }
.weekpill, .icon-btn, .filter-toggle, .layout-btn, .conf-pill, .conf-select, .detail-tab { min-height:44px; }
.icon-btn { width:44px; border-radius:8px; }
#gameDate { min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); }
.hero { padding-block:12px; display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center; }
.hero .eyebrow { grid-column:1; color:var(--ink-soft); font-size:10px; letter-spacing:1.5px; margin:0; }
.hero h1 { font:400 22px/1.2 var(--font-body); letter-spacing:-.6px; }
.edition-note { grid-column:1; grid-row:3; margin:0; color:var(--ink-soft); font-size:14px; }
.hero > .weekpills { grid-column:2; grid-row:1/3; padding:2px; gap:4px; background:var(--surface-2); border-radius:10px; }
.hero .weekpill { padding-inline:24px; border-radius:7px; font-family:inherit; font-size:12px; font-weight:400; }
.hero .weekpill.active { background:var(--surface); color:var(--ink); border-color:var(--line); }
#scores { border-top:1px solid var(--ink); padding-top:8px; }
.section-head { align-items:center; gap:8px; margin-bottom:10px; }
/* section-head-right stacks two internal rows (status+refresh, then
   controls) once it wraps, which would otherwise vertically center the
   heading against their combined height, landing it in the gap between
   the two rows instead of level with the top one. */
.section-head h2 { align-self:flex-start; }
.section-head-right { flex:1; justify-content:flex-start; gap:6px 10px; }
.section-head .sub { letter-spacing:0; font-size:10px; }
.data-status { background:none; color:var(--ink-soft); padding:3px 0; font-size:9px; letter-spacing:.3px; }
.data-status::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--live); margin-right:6px; vertical-align:middle; }
.filter-toggle { border-radius:7px; font-family:inherit; text-transform:none; font-size:11px; letter-spacing:0; }
.conf-filter { order:2; width:100%; justify-content:flex-start; gap:6px; }
.conf-pill, .conf-select { border-radius:6px; font-family:inherit; font-size:11px; font-weight:400; }
.conf-pill.active { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.layout-switch { background:var(--surface-2); border:0; padding:3px; border-radius:8px; }
.layout-btn { font-family:inherit; font-size:11px; letter-spacing:0; text-transform:none; padding-inline:12px; border-radius:6px; }
.layout-btn.active { background:var(--surface); color:var(--ink); }
.games { gap:16px; }
.games.mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.game-card, .games.mode-condensed { border-radius:0; }
.game-card { border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.game-card:hover { border-color:var(--ink-soft); box-shadow:none; }
.game-card.conf-match, .game-card.conf-match:hover { box-shadow:inset 2px 0 var(--accent); }
.grid-style .grid-main { padding:4px 12px 10px; }
.grid-top { min-height:44px; margin-bottom:0; }
.status { font-size:10px; letter-spacing:.5px; }
.team-row { grid-template-columns:28px minmax(0,1fr) auto; padding-block:6px; gap:12px; }
.team-name { min-width:0; overflow-wrap:anywhere; }
.team-name, .row-style .row-side-name { font:400 15px/1.4 var(--font-body); }
.team-name b { font-weight:400; }
.team-name .rec, .row-style .row-side .rec { font-family:inherit; font-size:10px; font-weight:400; margin-top:3px; }
.score, .row-style .row-num { font:400 28px/1.2 var(--font-body); letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.box-toggle { min-height:44px; background:transparent; justify-content:space-between; padding-inline:12px; font-family:inherit; text-transform:none; font-size:11px; letter-spacing:0; }
.box-toggle:hover { background:var(--surface-2); }
.box-panel-inner { background:var(--surface-2); padding:24px; }
.box-label { color:var(--ink-soft); font-size:9px; letter-spacing:1.5px; }
.detail-tabs { border:0; border-bottom:1px solid var(--line); background:transparent; padding:0; border-radius:0; gap:16px; }
.detail-tab { flex:none; font-family:inherit; font-size:12px; text-transform:none; letter-spacing:0; padding-inline:4px; border-radius:0; border-bottom:2px solid transparent; }
.detail-tab.active { box-shadow:none; background:none; color:var(--ink); border-bottom-color:var(--ink); }
.leader-name { font:400 14px var(--font-body); }
.player-team-name { font:400 20px var(--headline); }
.leader-row { padding:10px 0 14px; border-bottom:1px solid var(--line); }
.leader-label { text-align:left; font-size:9px; }
.leader-line { line-height:1.7; font-size:10px; }
.cond-style .cond-row { min-height:52px; }
footer { margin-top:48px!important; border-top:1px solid var(--line); text-align:left; line-height:1.7; }
.footer-brand { font:400 22px var(--headline); letter-spacing:-.6px; color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:900px) {
  .grid-style.open .box-panel-inner { display:grid; grid-template-columns:1fr 2fr; gap:0 32px; }
  .grid-style.open .leaders-block { grid-column:1; grid-row:1/3; border-right:1px solid var(--line); padding-right:24px; }
  .grid-style.open .detail-tabs, .grid-style.open .detail-tabpanel { grid-column:2; }
  .grid-style.open .box-panel-inner:not(:has(.leaders-block:not([hidden]))) { display:block; }
}
@media(max-width:1000px) {
  .games.mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-head { display:block; }
  .section-head-right, .conf-filter { justify-content:flex-start; }
  .masthead-deck { display:none; }
}
@media(max-width:620px) {
  .wrap { padding-inline:20px; }
  .masthead { padding-block:10px; }
  .masthead-title { font-size:30px; letter-spacing:0; }
  .nav-inner { flex-wrap:nowrap; gap:8px; min-height:52px; }
  .wordmark { display:none; }
  .nav-right { width:100%; justify-content:space-between; }
  .nav-right .weekpills { gap:8px; }
  .nav-right .weekpill { padding-inline:10px; font-size:11px; }
  .nav-right #gameDate { max-width:145px; font-size:11px; }
  .hero { padding-block:10px; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
  .hero h1 { font-size:16px; letter-spacing:-.5px; }
  .hero .eyebrow { font-size:8px; letter-spacing:0; line-height:1.5; }
  .edition-note { display:none; }
  .hero > .weekpills { grid-column:2; grid-row:1/3; margin:0; }
  .hero .weekpill { padding-inline:10px; font-size:11px; }
  #scores { padding-top:6px; }
  /* Matches styles.css's own precedent: "Box scores" is a real visible
     heading down to this breakpoint, then becomes sr-only once the hero
     h1 and nav wordmark are the only context narrow viewports keep. */
  .section-head h2 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .section-head .section-head-right { grid-template-columns:1fr auto; gap:2px 8px; }
  #freshness { grid-column:1; grid-row:1; font-size:9px; }
  #refreshScores { grid-column:2; grid-row:1; justify-self:end; }
  #dataStatus { grid-column:1; grid-row:2; justify-self:start; font-size:8px; letter-spacing:0; }
  .layout-switch { grid-column:2; grid-row:2; justify-self:end; }
  .layout-btn { flex:1; justify-content:center; padding:6px; gap:4px; font-size:10px; }
  .section-head-right .conf-filter { grid-row:3; gap:6px; }
  .conf-pill, .conf-select { font-size:11px; padding-inline:10px; }
  .games.mode-grid { grid-template-columns:1fr; gap:12px; }
  .grid-style .grid-main { padding:2px 4px 8px; }
  .grid-style .team-row { grid-template-columns:28px minmax(0,1fr) auto; gap:12px; }
  .grid-style .team-row .crest { width:28px!important; height:28px!important; }
  .grid-style .team-name, .grid-style.open .team-name { font-size:16px; }
  .grid-style .score, .grid-style.open .score { font-size:28px; }
  .grid-style .box-toggle { font-size:11px; padding-inline:4px; }
  .grid-style .box-panel-inner { padding:18px 12px; }
  .row-style .row-side-name { font-size:15px; }
  .detail-tab { min-height:44px; font-size:12px; }
  .leader-name { font-size:13px; }
  .leader-line { font-size:10px; }
  .cond-style .cond-row { gap:3px; padding-inline:4px; }
  footer { margin-top:30px!important; font-size:9px; }
}
@media(max-width:360px) { .wrap { padding-inline:14px; } .masthead-title { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Readable, thumb-friendly controls without inflating the score rows. */
.pin-btn, .cond-toggle { width:44px; height:44px; }
.pin-btn::before { content:none; }
.conf-label { color:var(--ink-soft); font-size:11px; align-self:center; white-space:nowrap; }
.conf-filter { align-items:center; }
.status, .grid-style .status, .section-head .sub, .data-status, .team-name .rec, .grid-style .team-name .rec,
.row-style .row-side .rec, .leader-label, .leader-line, .box-label { font-size:11px; line-height:1.5; }
.data-status { text-transform:none; letter-spacing:0; }
.data-status.stale { color:#865b13; background:none; }
.data-status.stale::before { background:#a76b08; }
:root[data-theme="dark"] .data-status.stale { color:#efc573; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .data-status.stale { color:#efc573; } }
.cond-style .cond-row { grid-template-columns:44px 18px 1fr 30px 14px 18px 1fr 30px auto 44px; }
@media(max-width:620px) {
  .hero { padding-block:6px; }
  .hero .eyebrow { font-size:10px; }
  #freshness, #dataStatus, .layout-btn, .leader-line, footer { font-size:11px; line-height:1.5; }
  .section-head .section-head-right { grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; }
  .layout-btn { padding-inline:5px; gap:3px; }
  .layout-btn svg { width:12px; }
  .section-head-right .conf-filter { flex-wrap:wrap; overflow:visible; gap:4px; }
  .conf-pill, .conf-select { padding-inline:8px; }
  .cond-style .cond-row { grid-template-columns:44px 16px minmax(24px,1fr) 24px 10px 16px minmax(24px,1fr) 24px 44px; gap:2px; padding-inline:0; }
  .cond-status { grid-row:2; grid-column:2/9; justify-self:start; padding-bottom:6px; }
  .cond-toggle { grid-row:1; grid-column:9; }
}

.account-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding-inline:10px; border:1px solid var(--line); border-radius:7px; font-size:12px; color:var(--ink); text-decoration:none; white-space:nowrap; }
a.masthead-title { text-decoration:none; color:var(--ink); }
.masthead { gap:8px; }
@media(max-width:360px) { .masthead-title { font-size:26px; } .account-link { font-size:11px; padding-inline:8px; } }

/* One compact control row; conference choices scroll within their own lane. */
.section-head-right .score-controls { display:flex; align-items:center; gap:10px; width:100%; min-width:0; grid-column:1 / -1; grid-row:2; }
.score-controls .conf-filter { order:0; flex:1; min-width:0; width:auto; flex-wrap:nowrap; overflow-x:auto; }
.score-controls .conf-filter[hidden] { display:none; }
.score-controls .conf-pill, .score-controls .conf-select { flex-shrink:0; }
.score-controls .layout-switch { flex-shrink:0; margin-left:auto; }
@media(max-width:600px) {
  .section-head-right .score-controls { gap:6px; }
  .section-head-right .score-controls .conf-filter { flex-wrap:nowrap; overflow-x:auto; gap:4px; }
  .score-controls .conf-label { display:none; }
  .score-controls .conf-pill { padding-inline:7px; }
  .score-controls .layout-btn svg { display:none; }
}

.score-status { display:flex; align-items:center; flex-wrap:wrap; gap:2px 10px; min-width:0; grid-column:1; grid-row:1; }