:root{
  --bg:#f5f2e8;
  --surface:#ffffff;
  --surface-2:#ecefe2;
  --surface-3:#e2e6d5;
  --ink:#1b241c;
  --ink-dim:#5c6657;
  --ink-faint:#8b937f;
  --line:#d9d5c4;
  --line-strong:#c3bfa9;
  --field:#1f4430;
  --field-deep:#153323;
  --field-ink:#eef1e4;
  --field-ink-dim:#aebfa9;
  --accent:#bd8a2e;
  --accent-strong:#9c7124;
  --accent-ink:#3a2a08;
  --good:#2f7d4f;
  --good-bg:#e3f0e4;
  --bad:#a8472e;
  --bad-bg:#f5e4dd;
  --shadow:0 1px 2px rgba(27,36,28,.06), 0 8px 20px -12px rgba(27,36,28,.18);
  --focus:#2f6d47;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1510;
    --surface:#161f18;
    --surface-2:#1c271e;
    --surface-3:#243024;
    --ink:#eef1e6;
    --ink-dim:#a7b3a0;
    --ink-faint:#71806c;
    --line:#2a362b;
    --line-strong:#3a4a3a;
    --field:#0f2c1c;
    --field-deep:#0a2116;
    --field-ink:#eaf0e4;
    --field-ink-dim:#8fa387;
    --accent:#e0a83f;
    --accent-strong:#f0bb5a;
    --accent-ink:#241a05;
    --good:#59b781;
    --good-bg:#153223;
    --bad:#e08767;
    --bad-bg:#33201a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.5);
    --focus:#59b781;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1510;
  --surface:#161f18;
  --surface-2:#1c271e;
  --surface-3:#243024;
  --ink:#eef1e6;
  --ink-dim:#a7b3a0;
  --ink-faint:#71806c;
  --line:#2a362b;
  --line-strong:#3a4a3a;
  --field:#0f2c1c;
  --field-deep:#0a2116;
  --field-ink:#eaf0e4;
  --field-ink-dim:#8fa387;
  --accent:#e0a83f;
  --accent-strong:#f0bb5a;
  --accent-ink:#241a05;
  --good:#59b781;
  --good-bg:#153223;
  --bad:#e08767;
  --bad-bg:#33201a;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 24px -12px rgba(0,0,0,.5);
  --focus:#59b781;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:var(--accent-ink);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.page{max-width:960px;margin:0 auto;padding:0 20px 64px;}

.masthead{
  background:linear-gradient(180deg,var(--field) 0%,var(--field-deep) 100%);
  color:var(--field-ink);
  padding:28px 20px 22px;
}
.masthead-inner{max-width:960px;margin:0 auto;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--field-ink-dim);
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 10px;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}
h1{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  font-size:clamp(26px,4.2vw,38px);
  line-height:1.05;
  letter-spacing:.01em;
  margin:0 0 10px;
  text-wrap:balance;
  text-transform:uppercase;
}
.masthead-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:13px;
  color:var(--field-ink-dim);
}
.masthead-meta a{color:var(--field-ink);text-decoration:none;border-bottom:1px solid var(--field-ink-dim);}
.masthead-meta a:hover{border-color:var(--field-ink);}

.yardline{
  height:10px;
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 2px,transparent 2px 40px);
  background-color:var(--surface-2);
  border-bottom:1px solid var(--line);
}

.preseason-note{
  margin:18px 0 0;
  padding:10px 14px;
  border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--ink-dim);
  font-size:12.5px;
}

.summary-line{
  margin:14px 2px 0;
  font-size:12px;
  color:var(--ink-faint);
}

.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 0;
}
.tabs{
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  flex-wrap:wrap;
}
.tab-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--ink-dim);
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:500;
  font-size:13px;
  padding:8px 14px;
  border-radius:7px;
  cursor:pointer;
  white-space:nowrap;
}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{
  background:var(--field);
  color:var(--field-ink);
}
.search-wrap{
  position:relative;
  flex:1 1 220px;
  max-width:280px;
}
.search-wrap svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;stroke:var(--ink-faint);fill:none;stroke-width:2;pointer-events:none;
}
#search{
  width:100%;
  padding:9px 12px 9px 32px;
  border-radius:8px;
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif;
  font-size:13px;
}
#search:focus{border-color:var(--focus);}
#search::placeholder{color:var(--ink-faint);}

.table-card{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.table-scroll{
  /* No overflow here on purpose: the header's position:sticky needs the
     whole page as its scrolling context, not a boxed-in one, so the table
     scrolls with the rest of the page instead of needing its own hover. */
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-2);
  border-bottom:1px solid var(--line-strong);
  text-align:right;
  padding:7px 12px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
thead th:first-child,thead th:nth-child(2){text-align:left;}
thead th:first-child{border-top-left-radius:12px;}
thead th:last-child{border-top-right-radius:12px;}
thead th .arrow{opacity:.35;margin-left:4px;font-size:9px;}
thead th[aria-sort="ascending"] .arrow,thead th[aria-sort="descending"] .arrow{opacity:1;color:var(--accent-strong);}
thead th:hover{color:var(--ink);}

tbody td{
  padding:5px 12px;
  border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
tbody td:first-child,tbody td:nth-child(2){text-align:left;font-family:"IBM Plex Sans",sans-serif;}
tbody tr:nth-child(even) td{background:var(--surface-2);}
tbody tr:hover td{background:var(--surface-3);}
tbody tr:last-child td:first-child{border-bottom-left-radius:12px;}
tbody tr:last-child td:last-child{border-bottom-right-radius:12px;}
tbody tr:last-child td{border-bottom:none;}

td.rank{font-family:"Oswald",sans-serif;font-weight:500;font-size:14px;color:var(--ink-dim);}
td.team{font-weight:600;color:var(--ink);}
td.team a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
td.team a:hover{border-color:var(--ink-dim);}
td.wl b.w{color:var(--good);font-weight:600;}
td.wl b.l{color:var(--bad);font-weight:600;}
td.wl{font-family:"IBM Plex Mono",monospace;}
td.pos{color:var(--good);}
td.neg{color:var(--bad);}
table.schedule thead th{cursor:default;}

.empty-row td{
  text-align:center;
  color:var(--ink-faint);
  font-family:"IBM Plex Sans",sans-serif;
  padding:32px 12px;
}

footer{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  color:var(--ink-faint);
}
footer a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line-strong);}
footer a:hover{color:var(--ink);}

@media (max-width:640px){
  .controls{flex-direction:column;align-items:stretch;}
  .search-wrap{max-width:none;}
  /* Narrow screens need horizontal scroll to fit every column, which costs
     the sticky header (an overflow-x box also traps position:sticky) - an
     acceptable trade only at this width, where whole-page scroll matters less. */
  .table-scroll{overflow-x:auto;}
}