:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #1a1c20;
  --muted: #666d7b;
  --border: #e2ddd2;
  --accent: #0B6E77; /* Big12ology brand teal — chrome only, never in the fill ramp */
  --full: #0d7a3f;
  --low: #b45309;
  --bad: #c0392b;
  /* Contrast-driven: 32% left the mid-scale ambers at 3.5:1,
     under the 4.5:1 WCAG AA floor. Hue carries the meaning. */
  --pctl: 27%;
  /* --dim is the tiebreaker's name for this color, and rules copied across
     brought the name with them. Five of them — the weather table's headers,
     the ledger's counts and team lists, the est badge — asked for a token
     this sheet never defined and silently inherited full-strength text
     instead of dimming. One alias, resolved per theme at the use site. */
  --dim: var(--muted);
  font-size: var(--t-copy);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181d;
    --surface: #1e2127;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --border: #2e323a;
    --accent: #3FC7CE;
    --full: #4ade80;
    --low: #fbbf24;
    --bad: #f87171;
    --pctl: 63%;
  }
}
:root[data-theme="dark"] {
    --bg: #16181d;
    --surface: #1e2127;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --border: #2e323a;
    --accent: #3FC7CE;
    --full: #4ade80;
    --low: #fbbf24;
    --bad: #f87171;
    --pctl: 63%;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
}

/* The header is .b12-head from brand.css — the same rule the tiebreaker and
   schedule headers use, down to the display face and the 1120px column. It
   was restyled here once and drifted: a different face, and an 880px column
   that left the title indented past the tab row under it. Only what is
   particular to this section belongs below. */
.dimyear { color: var(--muted); }
/* Its own size, not the h1's. Inheriting 26px made the native popup render
   its fourteen options at 26px, which is most of a screen. The face is set
   too, not inherited: the h1 is the condensed display face now, and a year
   is a control — it reads like the tiebreaker's year pills, which reset to
   the body face for the same reason. */
.dimyear select { font-size: var(--t-copy); font-weight: 700;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-variation-settings: normal; letter-spacing: 0;
  line-height: 1.2; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); padding: 3px 26px 3px 10px;
  vertical-align: 3px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'>\
<path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' \
stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center; background-size: 10px 6px; }
.dimyear select:hover { border-color: var(--accent); }
.dimyear select:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
body.tab-alltime #season-wrap { visibility: hidden; }
h1 { font-size: 1.35rem; margin: 0; letter-spacing: -0.01em; }
.controls { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
select {
  font: inherit;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  min-width: 9.5rem;
}
.card .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.card .value { font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums; }

main { padding: 0.25rem 1.5rem 1rem; }
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: relative;
}
/* The week columns run off the right edge and nothing said so — the table
   read as if Games and Capacity were all of it. This fades the live edge
   and drops the fade once you have scrolled to the end. */
.table-scroll { position: relative; }
.table-scroll::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  pointer-events: none; border-radius: 0 8px 8px 0;
  background: linear-gradient(to right, transparent, var(--surface));
  opacity: 1; transition: opacity .18s ease;
}
.table-scroll.at-end::after { opacity: 0; }
/* Above the table, not below it: a 16-row grid means nobody scrolls far
   enough to find a hint parked at the bottom. */
.scroll-hint {
  font-size: 0.74rem; color: var(--muted); margin: 0 0 0.4rem;
  display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end;
}
.scroll-hint .arrow { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0) }
                   50% { transform: translateX(3px) } }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint .arrow { animation: none; }
}


table { border-collapse: collapse; width: max-content; min-width: 100%; }
th, td {
  padding: 0.42rem 0.65rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th[aria-sort] { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) th[aria-sort] { color: var(--text); }
}
:root[data-theme="dark"] th[aria-sort] { color: var(--text); }
th.team, td.team { text-align: left; position: sticky; left: 0;
  background: var(--surface); z-index: 1; }
.table-scroll:not(.at-start) th.team, .table-scroll:not(.at-start) td.team {
  box-shadow: 6px 0 6px -5px rgba(0, 0, 0, .22); }
td.team { font-weight: 600; box-shadow: inset 3px 0 0 var(--tc, transparent); }
td.team .team-name { display: inline-block; vertical-align: middle; }
td.team .stadium { display: block; font-weight: 400; font-size: 0.72rem; color: var(--muted); }
/* Several marks carry a white plate inside the artwork itself, so on a dark
   page they read as stray white cards. CSS cannot recolor what is baked
   into the file — what it can do is make the plate look intended: one tile,
   same in both themes, that the artwork's own white sits flush against.
   Matches the tiebreaker's .mark exactly. */
.team-logo { width: 22px; height: 22px; object-fit: contain;
  vertical-align: middle; margin-right: 0.5rem;
  background: #f0ede6; border-radius: 4px; padding: 2px; }
h1 { display: flex; align-items: center; gap: 0.6rem; }
h1 .brand { height: 34px; width: auto; vertical-align: -8px; margin-right: 10px; }
tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }

td .pct { display: block; font-size: 0.72rem; color: var(--muted); }

td.season-total { font-weight: 650; border-left: 1px solid var(--border); }

tfoot td { font-weight: 600; border-top: 2px solid var(--border); }
tfoot td.team { font-weight: 650; }
tfoot .sub td { font-weight: 400; color: var(--muted); border-top: none; font-size: 0.78rem; }

.note { color: var(--muted); font-size: 0.8rem; padding: 0 1.5rem; }
footer { padding-bottom: 1.5rem; }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); gap: 1rem; margin-top: 1.25rem; }
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  min-width: 0;
}
.chart-card h2 { margin: 0; font-size: 0.95rem; letter-spacing: -0.01em; }
.chart-sub { margin: 0.15rem 0 0.6rem; color: var(--muted); font-size: 0.76rem; }
/* The CHART, not every svg that happens to be inside the card. This was a
   bare descendant selector, and it stopped being true the moment cards.js
   started injecting a collapse chevron into the heading: `.chart-card svg`
   outranks `.cardchev`, so the chevron took width:100% and, with a square
   viewBox and height:auto, resolved to a 300×300 arrow sitting where the
   chart should be. Excluded by role rather than by position, so chrome added
   to these headings later does not have to rediscover this. */
.chart-card svg:not(.cardchev) { width: 100%; height: auto; display: block; }
.chart-card .tick { font-size: var(--t-micro); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-card .lbl { font-size: var(--t-fine); fill: var(--text); }
.chart-card .val { font-size: var(--t-micro); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart-empty { color: var(--muted); font-size: 0.82rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
  align-items: center; margin: 0.1rem 0 0.4rem; font-size: 0.75rem;
  color: var(--muted); max-width: 100%; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.key-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.heat-legend { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.heat-scale { display: inline-block; width: 8rem; height: 8px; border-radius: 4px; }
#tooltip .tip-key { display: inline-block; width: 12px; height: 2.5px; border-radius: 1px; margin-right: 0.4rem; vertical-align: middle; }

td.game { cursor: default; }
td.game:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
td.game.sched .opp, td.game.away .opp {
  display: block;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 500;
}
td.game .sub {
  display: block;
  max-width: 8rem;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.7rem;
}
td.game .sub .win { color: var(--full); }
td.game .sub .loss { color: var(--bad); }
td.game.away { opacity: 0.45; }
td.game.away:hover { opacity: 1; }
/* --muted, not --border. A hairline token used as a text color put BYE at
   1.35:1 on the light card and 1.25:1 on the dark one, which is not
   de-emphasis, it is invisibility, and BYE is the cell's only content.
   --muted is the token that exists for exactly this: quiet but readable,
   5.20:1 light and 6.11:1 dark. */
td.bye {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-align: center;
}
.card .value .of { font-size: 0.85rem; font-weight: 500; color: var(--muted); }

#tooltip {
  position: absolute;
  z-index: 10;
  max-width: 20rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
/* The card hangs below the cell with a gap, and that gap belongs to the row
   underneath: aim for the box-score link and the pointer crosses the next
   game's cell, which swaps the card out from under you. This invisible strip
   bridges the gap so the trip from cell to link never leaves the tooltip.
   Keep the height >= the offset app.js positions the card with. Only for the
   cell-anchored card — the chart tooltips trail the cursor, and a strip
   reaching back toward it would eat their own mousemoves. */
#tooltip[data-anchor="cell"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}
#tooltip .tip-head { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
#tooltip .tip-opp { font-weight: 600; }
#tooltip .win { color: var(--full); }
#tooltip .loss { color: var(--bad); }
#tooltip .tip-wx, #tooltip .tip-src { color: var(--muted); }
#tooltip .tip-src { font-size: 0.72rem; }
#tooltip a { color: var(--accent); text-decoration: none; font-weight: 600; }
#tooltip a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tooltip a { color: var(--b12-teal-lit); }
}
:root[data-theme="dark"] #tooltip a { color: var(--b12-teal-lit); }

th .sortmode { color: var(--accent); font-weight: 700; }

/* records watch + weather panels */
.records-table { overflow-x: auto; }
.records-table table { border-collapse: collapse; width: 100%;
  font-size: 0.85rem; table-layout: fixed; }
.records-table th, .records-table td { text-align: left; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
  /* Cells inherit nowrap from the week grid, which left long venue names
     running out of their column and into the next one. */
  white-space: normal; overflow-wrap: anywhere; }
.records-table th { font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); }
.records-table th:first-child, .records-table td:first-child { width: 26%; }
.rw-dim { color: var(--muted); }
.rw-good { color: var(--full); }
.rw-bad { color: var(--bad); }
.rw-sub { display: block; color: var(--muted); font-size: 0.72rem;
  line-height: 1.3; margin-top: 1px; }

/* module tabs */
.subnav { display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem 1.5rem 0; }
.subnav a { font-size: 0.85rem; text-decoration: none; color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 0.25rem 0.85rem; background: var(--surface); }
.subnav a:hover { border-color: var(--accent); color: var(--text); }
.subnav a.on { background: var(--accent); border-color: var(--accent);
  color: #fff; }


/* team comparison chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.25rem 1.5rem 0; }
.chips button { font: inherit; font-size: 0.8rem; display: inline-flex;
  align-items: center; gap: 0.35rem; border: 1px solid var(--border);
  border-radius: 20px; padding: 0.25rem 0.7rem; background: var(--surface);
  color: var(--text); cursor: pointer; }
.chips button img { height: 14px; width: 14px; object-fit: contain; }
.chips button.on { color: #fff; font-weight: 700; }

.charts .span-all { grid-column: 1 / -1; }

/* value printed inside a bar: legible on any shade of the gradient */
svg text.val-in {
  fill: #fff;
  font-weight: 700;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.3);
  stroke-width: 2px;
}

/* pre-2024 seasons: conference tag beside the team name, era note card */
.team-name .conf { display: inline-block; margin-left: 0.4rem; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 0 0.4rem;
  vertical-align: 1px; font-weight: 500; }
.card.era-note { flex: 1 1 100%; }
.era-note .era-text { font-size: 0.85rem; color: var(--muted); line-height: 1.5;
  margin-top: 0.15rem; }

/* tooltip keys that mirror the chart's own glyphs */
#tooltip .tip-key-dot { width: 9px; height: 9px; border-radius: 50%; }
#tooltip .tip-key-bar { width: 3px; height: 12px; border-radius: 1px; }
#tooltip .tip-key-ring { width: 9px; height: 9px; border-radius: 50%;
  background: transparent !important; border: 2px solid currentColor; }

/* era scrubber: narrow the archive to a span of seasons */
.erabar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 1.5rem 0.25rem; font-size: 0.8rem; color: var(--muted); }
.erabar .era-label { min-width: 9.5rem; }
.erabar .era-label b { color: var(--text); font-variant-numeric: tabular-nums; }
.era-slider { position: relative; flex: 1 1 16rem; max-width: 26rem;
  height: 22px; }
.era-track, .era-fill { position: absolute; top: 9px; height: 4px;
  border-radius: 2px; }
.era-track { left: 0; right: 0; background: var(--border); }
.era-fill { background: var(--accent); pointer-events: auto; cursor: grab;
  /* a little taller than the track so it is grabbable */
  top: 7px; height: 8px; }
.era-fill.dragging { cursor: grabbing; }
.era-slider input[type=range] { position: absolute; inset: 0; width: 100%;
  margin: 0; background: none; pointer-events: none; -webkit-appearance: none;
  appearance: none; }
.era-slider input[type=range]::-webkit-slider-thumb { pointer-events: auto;
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
  cursor: grab; }
.era-slider input[type=range]::-moz-range-thumb { pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  border: 3px solid var(--accent); cursor: grab; }
.era-skip { font-size: 0.72rem; color: var(--bad); }
.chart-gap { font-size: 0.72rem; color: var(--muted); margin: 0.35rem 0 0;
  padding: 0 0.15rem; }
.era-quick { display: inline-flex; gap: 0.3rem; }
.erabar button { font: inherit; font-size: 0.75rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); border-radius: 20px;
  padding: 0.15rem 0.7rem; cursor: pointer; }
.erabar button:hover { border-color: var(--accent); color: var(--text); }

/* A capacity carried forward because the school has not published one. */
.estmark {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; margin-left: 5px; color: var(--dim);
  cursor: help; vertical-align: 1px;
}
.estmark:hover { border-color: var(--accent); color: var(--accent); }


/* Records watch team cell — logo then name, like every other team cell. */
.records-table td.rw-team { white-space: nowrap; }
.records-table td.rw-team .team-logo { margin-right: 0.45rem;
  vertical-align: -4px; }

/* Weather effects and the membership ledger — both are tables rather than
   charts, because seven rows and fifteen rows of text are not a shape. */
.weather-effects, .ledger { border-collapse: collapse; width: 100%;
  font-size: var(--t-label); margin-top: 4px; }
.weather-effects th, .weather-effects td, .ledger td { padding: 6px 8px;
  border-bottom: 1px solid var(--line); text-align: left;
  /* Same trap the records table hit: cells inherit nowrap from the week
     grid, and a table is at least as wide as its widest unbroken row. A
     sixteen-team membership list then ran past the card it sits in and over
     the panel beside it. Prose in a card wraps. */
  white-space: normal; }
.weather-effects th { font-weight: 600; font-size: var(--t-meta); color: var(--dim); }
.weather-effects td.num, .weather-effects th:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; }
.weather-effects td.dim { color: var(--dim); }
.weather-effects td.notable { font-weight: 700; }
.weather-effects tfoot td { font-weight: 600; border-bottom: none; }
.ledger td.lgyear { font-variant-numeric: tabular-nums; font-weight: 700;
  vertical-align: top; white-space: nowrap; width: 1%; }
.ledger .lg { margin: 2px 0; }
.ledger .lgname { font-weight: 600; }
.ledger .lg.b12 .lgname { color: var(--accent); }
.ledger .lgn { color: var(--dim); font-variant-numeric: tabular-nums; }
.ledger .lgteams { color: var(--dim); font-size: var(--t-row); }