/* Matchup Index styles. Hand-written and token-only: every color, size, space,
   radius and font reads a custom property from tokens.css, which is a byte copy
   of ImperialismMap's generated file (docs/design/ and
   sites/imperialismmap/docs/design/ own the values; a test pins the copy).
   palette.css then reassigns the color tokens to this site's own navy and brass.
   There is no Tailwind build here, so no node_modules and no npm step.
   Team colors are data (TeamIdentity), set inline as --team-color. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

/* Controls a script wires up are in the markup from the start and show only once base.html's head
   script has marked <html class="js">, so revealing them never shifts the page. */
:root:not(.js) .js-only { display: none; }

body {
    font-family: var(--font-body);
    font-size: var(--type-base);
    line-height: var(--leading-body);
    color: var(--text-primary);
    background-color: var(--chrome-bg);
}

main { background-color: var(--background); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-heading);
}
h1 { font-size: var(--type-3xl); }
h2 { font-size: var(--type-2xl); }
h3 { font-size: var(--type-lg); }
@media (min-width: 768px) {
    h1 { font-size: var(--type-4xl); }
}

a { color: var(--link); text-decoration: none; }
a:hover, a:active { color: var(--link-hover); }
p a, li a, td a { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

ul, ol { list-style: none; }

.section-shell {
    max-width: 1200px;
    margin-inline: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    width: 100%;
}

.page-section { padding-top: var(--space-8); padding-bottom: var(--space-4); }

.skip-link {
    position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-control);
    background-color: var(--surface); color: var(--text-primary);
    transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Header and footer sit on the chrome green, like the sibling sites. */
.site-header { position: relative; color: var(--text-on-primary); border-bottom: 1px solid var(--header-border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-header__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--type-xl); color: var(--header-accent); margin-right: auto; }
.site-header__brand:hover { color: var(--header-accent); }
.site-header__tools { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 24rem; justify-content: flex-end; }
.site-header__tools .site-search--header { flex: 1 1 auto; }
.site-header__menu {
    display: none; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
    border-radius: var(--radius-control); border: 1px solid var(--header-border); background: transparent;
    color: var(--text-on-primary); cursor: pointer;
}
.site-header__menu:hover, .site-header__menu[aria-expanded="true"] { color: var(--header-accent); border-color: var(--header-accent); }
/* Mid widths: the links take their own row under the brand and search. Wide: one row. Phones: behind the menu button. */
.site-nav { order: 3; flex: 0 0 100%; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-nav a { display: inline-block; padding: var(--space-1) 0; color: var(--text-on-primary); font-size: var(--type-sm); font-weight: 600; white-space: nowrap; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--header-accent); }
@media (min-width: 1024px) {
    .site-header__inner { flex-wrap: nowrap; gap: var(--space-6); }
    .site-header__brand { margin-right: 0; }
    .site-nav { order: 0; flex: 0 1 auto; margin-left: auto; }
    .site-header__tools { flex: 0 1 20rem; }
}
@media (max-width: 639px) {
    .site-header__tools { flex: none; }
    .site-header__menu { display: inline-flex; }
    .site-nav { display: none; }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; gap: 0; padding-bottom: var(--space-2); }
    .site-nav li + li { border-top: 1px solid var(--header-border); }
    .site-nav a { display: block; padding: var(--space-3) 0; font-size: var(--type-base); }
}
.site-footer { color: var(--text-on-primary-muted); font-size: var(--type-sm); padding-top: var(--space-10); padding-bottom: var(--space-8); }
.site-footer a { color: var(--text-on-primary-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-on-primary); text-decoration: underline; }
/* Same shape as ImperialismMap's and VenueStats' footers: four labeled columns, then the end block. */
.site-footer__grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__about { grid-column: 1 / -1; }
@media (min-width: 768px) { .site-footer__about { grid-column: auto; } }
.site-footer__heading { margin-bottom: var(--space-3); font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--header-accent); }
.site-footer__heading--next { margin-top: var(--space-6); }
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__end { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--header-border); text-align: center; display: grid; gap: var(--space-2); }
.site-footer__disclaimer { max-width: 65ch; margin-inline: auto; font-size: var(--type-xs); }
@media (max-width: 639px) { .site-footer ul { gap: 0; } .site-footer li a { display: inline-block; padding: var(--space-2) 0; } }

.crumbs { padding-top: var(--space-4); padding-bottom: var(--space-2); font-size: var(--type-sm); color: var(--text-secondary); }
/* Under breadcrumbs the page's h1 sits close; the full top padding is for pages without them (home). */
.crumbs + .page-section, .crumbs + .legal-doc { padding-top: var(--space-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-muted); }

.lead { color: var(--text-secondary); margin-top: var(--space-2); }
.note { color: var(--text-secondary); font-size: var(--type-sm); margin-top: var(--space-2); }
.label { font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary); }

.stack > * + * { margin-top: var(--space-4); }
.block { margin-top: var(--space-8); }
/* minmax(0, ...) so a wide table scrolls in its wrapper instead of stretching the track past the viewport. */
.two-up { display: grid; gap: var(--space-8); margin-top: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .two-up.two-up--single { grid-template-columns: minmax(0, 1fr); }
}

.card-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: 1fr 1fr 1fr; } }
.card { padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.card a { font-family: var(--font-display); font-weight: 700; font-size: var(--type-xl); }

.link-grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .link-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .link-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Record bar: the series score, the page's headline. */
.record-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center;
    padding: var(--space-6); border-radius: var(--radius-card);
    background: var(--surface); border: 1px solid var(--border);
}
.record-bar__team { display: flex; flex-direction: column; gap: var(--space-1); }
.record-bar__team--right { text-align: right; align-items: flex-end; }
.record-bar__swatch { width: 100%; height: var(--space-2); border-radius: var(--radius-xs); background: var(--team-color, var(--border)); }
.record-bar__name { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; }
.record-bar__wins { font-family: var(--font-display); font-size: var(--type-5xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.record-bar__mid { text-align: center; color: var(--text-secondary); font-size: var(--type-sm); }
.record-bar__lead { color: var(--text-primary); font-family: var(--font-display); font-size: var(--type-lg); font-weight: 800; }
/* Phones: the two sides stay side by side, the summary goes under them. */
@media (max-width: 639px) {
    .record-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "mid mid"; gap: var(--space-4) var(--space-3); padding: var(--space-4); }
    .record-bar__team:first-child { grid-area: a; }
    .record-bar__team--right { grid-area: b; }
    .record-bar__mid { grid-area: mid; padding-top: var(--space-3); border-top: 1px solid var(--border); }
    .record-bar__name { font-size: var(--type-lg); overflow-wrap: anywhere; }
    .record-bar__wins { font-size: var(--type-4xl); }
}

/* Timeline: the lead chart stretches with the page (preserveAspectRatio none), so its
   text, dot and tick labels are HTML laid over it by percentage and stay a readable size. */
.timeline__note { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--type-sm); }
.timeline__plot { --tl-gutter: 2.75rem; --tl-h: 220px; position: relative; padding-left: var(--tl-gutter); }
.timeline__chart {
    position: relative; height: var(--tl-h); border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--surface); overflow: hidden;
}
.timeline__chart svg { display: block; width: 100%; height: 100%; }
.timeline__yaxis { position: absolute; left: 0; top: 1px; width: calc(var(--tl-gutter) - var(--space-1)); height: var(--tl-h); }
.timeline__ytick, .timeline__ylabel { font-size: var(--type-xs); color: var(--text-muted); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline__ytick { position: absolute; right: 0; transform: translateY(-50%); }
.timeline__ytick--even { color: var(--text-secondary); font-weight: 700; }
.timeline__grid { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.timeline__grid--lead { stroke-opacity: 0.6; }
.timeline__area { fill: var(--team-color, var(--border-hover)); fill-opacity: 0.5; stroke: none; }
.timeline__zero { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.timeline__line { fill: none; stroke: var(--text-primary); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.timeline__edge {
    position: absolute; left: var(--space-2); padding: 0 var(--space-1); border-radius: var(--radius-xs);
    background: var(--surface); font-size: var(--type-xs); color: var(--text-secondary); line-height: 1.4;
}
.timeline__edge--top { top: 2px; }
.timeline__edge--bottom { bottom: 2px; }
.timeline__stripwrap { position: relative; margin-top: var(--space-1); }
.timeline__ylabel { position: absolute; left: calc(-1 * var(--tl-gutter)); width: calc(var(--tl-gutter) - var(--space-1)); top: 50%; transform: translateY(-50%); text-align: right; }
.timeline__strip { display: block; width: 100%; height: 28px; }
.timeline__cell { fill: var(--team-color, var(--border-hover)); stroke: var(--text-muted); stroke-opacity: 0.35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.timeline__cell--post { stroke: var(--text-primary); stroke-opacity: 1; stroke-width: 2; }
.timeline__ticks { position: relative; height: 1.4em; font-size: var(--type-xs); color: var(--text-muted); }
.timeline__tick { position: absolute; top: var(--space-1); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline__tick::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--space-1)); height: var(--space-1); border-left: 1px solid var(--border-hover); }
.timeline__tick--start { transform: none; }
.timeline__tick--start::before { left: 0; }
.timeline__tick--end { transform: translateX(-100%); }
.timeline__tick--end::before { left: 100%; }
/* Interactive layer (static/js/timeline.js adds these; none exist without JS). */
.timeline__plot.is-interactive .timeline__chart { cursor: crosshair; }
.timeline__plot.is-interactive .timeline__stripwrap { cursor: pointer; }
.timeline__chart:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.timeline__guide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--text-secondary); pointer-events: none; }
.timeline__pt {
    position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--text-primary);
    background: var(--team-color, var(--border-hover));
}
.timeline__cellmark { position: absolute; top: -2px; bottom: -2px; box-sizing: border-box; border: 2px solid var(--text-primary); border-radius: 2px; box-shadow: 0 0 0 1px var(--surface); pointer-events: none; }
.timeline__tip {
    position: absolute; z-index: 2; max-width: min(17rem, calc(100% - 8px)); padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs); border: 1px solid var(--border-hover); background: var(--surface); color: var(--text-primary);
    box-shadow: var(--shadow-md); font-size: var(--type-sm); line-height: 1.35; pointer-events: none;
}
.timeline__tip.is-pinned { pointer-events: auto; }
.timeline__tip-head { font-weight: 700; }
.timeline__tip-line { color: var(--text-secondary); }
.timeline__tip-line:last-of-type { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.timeline__tip-key { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-1); border-radius: 2px; background: var(--team-color, var(--border-hover)); border: 1px solid var(--border-hover); }
.timeline__dock { margin-left: calc(-1 * var(--tl-gutter)); }
.timeline__dock:empty { display: none; }
.timeline__tip.is-docked { position: static; max-width: none; margin-top: var(--space-2); box-shadow: none; }
.timeline__tip.is-docked[hidden] { display: none; }
.timeline__nowrap { white-space: nowrap; }
.timeline__tip-link { display: inline-block; margin-top: var(--space-1); font-weight: 700; }
tr.is-target > td { animation: timeline-target 2.6s ease-out; }
@keyframes timeline-target { 0%, 60% { background: var(--border-hover); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.is-target > td { animation: none; background: var(--border-hover); } }
.timeline__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--type-sm); color: var(--text-secondary); }
.timeline__legend-item { display: inline-flex; align-items: center; white-space: nowrap; }
.timeline__key { background: var(--team-color, var(--border-hover)); display: inline-block; width: 12px; height: 12px; margin-right: var(--space-1); border-radius: 2px; border: 1px solid var(--border-hover); }
.timeline__key--tie { background: var(--border-hover); }
.timeline__key--post { background: transparent; border: 2px solid var(--text-primary); }
.timeline__scale { color: var(--text-muted); margin-left: auto; }
.timeline__streaks { margin: var(--space-2) 0 0; font-size: var(--type-sm); color: var(--text-primary); }
@media (max-width: 639px) {
    .timeline__plot { --tl-h: 180px; }
    .timeline__tick:nth-child(even) { display: none; }
    .timeline__scale { margin-left: 0; flex-basis: 100%; }
}

.scope-selector { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.scope-selector button {
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-control);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
    font: inherit; font-size: var(--type-sm); cursor: pointer;
}
.scope-selector button:hover { background: var(--surface-hover); }
.scope-selector button[aria-pressed="true"] { background: var(--action-primary); color: var(--on-action-primary); border-color: var(--action-edge); }
.scope-selector button[aria-pressed="true"] .sub-count { color: var(--on-action-primary); }

.infobox { padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); margin-top: var(--space-4); }

.data-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--type-sm); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
/* Phones: tighter cells so a five-column game table fits without scrolling sideways. */
@media (max-width: 639px) {
    .data-table th, .data-table td { padding: var(--space-2) var(--space-1); }
    .data-table th:first-child, .data-table td:first-child { padding-left: 0; }
    .data-table th:last-child, .data-table td:last-child { padding-right: 0; }
    .mchip { min-width: 8rem; }
    .mchip__team { white-space: normal; }
}
/* Phones: a game row reads as two lines, winner and score, then season, date, site and round. */
@media (max-width: 639px) {
    .data-table--games thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .data-table--games tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
    .data-table--games td { padding: 0; border: 0; color: var(--text-secondary); }
    .data-table--games td:empty { display: none; }
    .data-table--games .game-winner { order: -1; flex: 0 0 calc(100% - 7rem - var(--space-3)); color: var(--text-primary); }
    .data-table--games td.num { order: -1; flex: 0 0 7rem; color: var(--text-primary); font-weight: 600; }
    .data-table--games .game-chip { flex-basis: 100%; }
}
/* Phones: the titles table's long season lists take a full-width line under the label. */
@media (max-width: 639px) {
    .data-table--honors thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .data-table--honors tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
    .data-table--honors td { padding: 0; border: 0; color: var(--text-secondary); }
    .data-table--honors .honor-label { color: var(--text-primary); font-weight: 600; }
    .data-table--honors .honor-count { margin-left: auto; color: var(--text-primary); font-weight: 600; }
    .data-table--honors .honor-seasons { flex-basis: 100%; }
}
/* Secondary columns drop out on phones; a record list repeats them in the line under its matchup (.row-meta). */
.row-meta { display: none; }
@media (max-width: 639px) {
    .data-table .hide-sm { display: none; }
    .row-meta { display: block; margin-top: var(--space-1); font-size: var(--type-xs); color: var(--text-secondary); }
    .data-table--games .game-chip--lead { order: -1; }
}
/* nowrap: tables.js wraps each heading in a sort button, and a heading that wrapped before it ("Win %" on a
   phone) and not after, or the reverse, would move every row once the script runs. */
.data-table th { font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-secondary); white-space: nowrap; }
.data-table .num { text-align: right; }
.nowrap { white-space: nowrap; }
.data-table tr[hidden] { display: none; }
/* Sortable headings (static/js/tables.js wraps each in a button). */
.data-table .sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.data-table .sort-btn:hover { color: var(--text-primary); }
.data-table .sort-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.data-table.is-sortable th .sort-btn::after { content: "\2195"; opacity: 0.35; font-size: 0.9em; }
.data-table.is-sortable th[aria-sort="ascending"] .sort-btn::after { content: "\2191"; opacity: 1; }
.data-table.is-sortable th[aria-sort="descending"] .sort-btn::after { content: "\2193"; opacity: 1; }
.data-table.is-sortable th[aria-sort] { color: var(--text-primary); }

/* A matchup card small enough for a table cell (partials/_matchup_chip.html). */
.mchip { display: inline-flex; flex-direction: column; gap: var(--space-1); min-width: 12rem; max-width: 24rem; color: var(--text-primary); text-decoration: none; }
.mchip:hover { color: var(--text-primary); }
.mchip:hover .mchip__team { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
.mchip__teams { font-weight: 600; line-height: var(--leading-compact); }
.mchip__team { white-space: nowrap; }
.mchip__dot { display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-1); border-radius: 50%; background: var(--team-color, var(--border-hover)); vertical-align: 0.05em; }
.mchip__vs { font-weight: 400; font-size: var(--type-xs); color: var(--text-muted); }
.mchip__bar { display: flex; height: 4px; border-radius: var(--radius-xs); overflow: hidden; background: var(--border); }
.mchip__seg { min-width: 0; background: var(--team-color, var(--border-hover)); }
.mchip__seg--tie { background: var(--border-hover); }

/* Records hubs and list pages: the league switcher, the filter bar and "Show more". */
.records-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.records-nav .quiz-chips { list-style: none; padding: 0; }
.quiz-chip[aria-current="page"] { background: var(--action-primary); color: var(--on-action-primary); border-color: var(--action-edge); }
a.quiz-chip[aria-current="page"]:hover { color: var(--on-action-primary); }
.table-tools { margin-top: 0; margin-bottom: var(--space-2); }
.table-more { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.table-more[hidden] { display: none; }

/* Matchup page: the record lists this pair appears on. */
.record-book { margin-top: var(--space-3); border-top: 1px solid var(--border); }
.record-book__item { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--type-sm); }
.record-book__list { font-weight: 600; }
.record-book__places { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.record-book__place { font-variant-numeric: tabular-nums; }
.record-book__place.is-first { font-weight: 700; }
@media (max-width: 480px) { .record-book__item { grid-template-columns: 1fr; gap: var(--space-1); } }
.sub-count { color: var(--text-secondary); }
.tag-post { color: var(--link); font-weight: 600; }
.winner-swatch { display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); border-radius: 50%; background: var(--team-color, var(--border)); }

details.decade > summary { cursor: pointer; padding: var(--space-2) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--type-lg); }

/* Design rule: a surface about one team wears that team's colors, never the site navy (chrome only).
   The header is filled with the team's color and its text takes --team-ink (white or near-black,
   whichever contrasts more, picked in timeline.ink_for); --team-accent is a stripe of the next color.
   Without team colors it falls back to a plain surface. */
.hub-header { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); }
.hub-header--team { background: var(--team-color); color: var(--team-ink); border-color: transparent; border-bottom: var(--space-2) solid var(--team-accent, var(--team-color)); }
.hub-header--team a { color: inherit; text-decoration-thickness: 1px; }
.hub-header__kicker { font-size: var(--type-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); opacity: 0.85; }
.hub-header h1 { margin-top: var(--space-1); }
.hub-header__lead { margin-top: var(--space-2); font-size: var(--type-lg); max-width: 48rem; }
.hub-header__former { margin-top: var(--space-2); font-size: var(--type-sm); opacity: 0.85; }
.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.stat { display: flex; flex-direction: column; }
.stat__value { font-family: var(--font-display); font-size: var(--type-2xl); font-weight: 800; font-variant-numeric: tabular-nums; }

/* About, Contact and legal pages: prose across the full section shell, as every other page. */
.legal-doc { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.legal-doc h2 { font-size: var(--type-xl); margin-top: var(--space-8); }
.legal-doc h3 { font-size: var(--type-lg); margin-top: var(--space-5); }
.legal-doc p, .legal-doc ul { margin-top: var(--space-3); }
.legal-doc ul { list-style: disc; padding-left: var(--space-6); }
.legal-doc li + li { margin-top: var(--space-2); }
.legal-doc .updated { color: var(--text-secondary); font-size: var(--type-sm); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Search combobox: header (compact, collapses to an icon under 640px) and page (league pages). */
.site-search { position: relative; }
.site-search__form { position: relative; }
.site-search__input {
    width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--type-sm);
}
.site-search__input::placeholder { color: var(--text-muted); }
.site-search__toggle {
    display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--radius-control); border: 1px solid var(--header-border); background: transparent;
    color: var(--text-on-primary); cursor: pointer;
}
.site-search__toggle:hover { color: var(--header-accent); }
.site-search--header { flex: 0 1 22rem; }
.site-search--page { max-width: 36rem; margin-top: var(--space-4); }
.site-search--page .site-search__input { padding: var(--space-3) var(--space-4); font-size: var(--type-base); }
.site-search__list {
    position: absolute; z-index: 50; top: calc(100% + var(--space-1)); left: 0; right: 0; max-height: 70vh; overflow-y: auto;
    border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg);
}
.site-search--header .site-search__list { min-width: min(26rem, calc(100vw - 2 * var(--space-5))); left: auto; }
.site-search__list[hidden] { display: none; }
.site-search__option a { text-decoration: none; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); color: var(--text-primary); }
.site-search__option--pair a { padding-left: var(--space-5); }
.site-search__option[aria-selected="true"] { background: var(--surface-hover); }
.site-search__label { font-weight: 600; font-size: var(--type-sm); }
.site-search__sub { font-size: var(--type-xs); color: var(--text-secondary); }
.site-search__empty { padding: var(--space-3); font-size: var(--type-sm); color: var(--text-secondary); }
@media (max-width: 639px) {
    .site-search--header { position: static; flex: none; }
    .site-search--header .site-search__toggle { display: inline-flex; }
    .site-search--header .site-search__form { display: none; position: absolute; left: var(--space-5); right: var(--space-5); top: calc(100% - var(--space-1)); z-index: 60; }
    .site-search--header.is-open .site-search__form { display: block; }
    .site-search--header .site-search__input { padding: var(--space-3) var(--space-4); font-size: var(--type-base); box-shadow: var(--shadow-lg); }
    .site-search--header .site-search__list { min-width: 0; left: 0; }
}

/* Home hero: the search is the page's first move, so it runs large. */
.hero .lead { max-width: 40rem; font-size: var(--type-lg); }
.site-search--hero { max-width: 40rem; margin-top: var(--space-6); }
.site-search--hero .site-search__input { padding: var(--space-4) var(--space-5); font-size: var(--type-lg); border-radius: var(--radius-card); border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.site-search--hero .site-search__list { left: 0; }

/* Matchup cards: both teams, a two-color bar of wins, and the record line. */
.league-feature { margin-top: var(--space-6); }
.league-feature h3 a { color: var(--text-primary); }
.matchup-grid { display: grid; gap: var(--space-3); margin-top: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .matchup-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .matchup-grid { grid-template-columns: repeat(4, 1fr); } }
.matchup-card { border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.matchup-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.matchup-card__link { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-4); color: var(--text-primary); text-decoration: none; }
.matchup-card__link:hover { color: var(--text-primary); }
.matchup-card__teams { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: var(--type-base); line-height: 1.25; }
.matchup-card__vs { font-family: var(--font-body); font-weight: 400; font-size: var(--type-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.matchup-card__bar { display: flex; height: var(--space-2); border-radius: var(--radius-xs); overflow: hidden; background: var(--border); margin-top: auto; }
.matchup-card__seg { min-width: 0; background: var(--team-color, var(--border)); }
.matchup-card__seg--tie { background: var(--border-hover); }
.matchup-card__meta { font-size: var(--type-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Team page opponent filter. */
.filter { margin-top: var(--space-3); max-width: 24rem; }
.filter__input {
    width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--type-sm);
}
[data-filter-group][hidden], [data-filter-empty][hidden] { display: none; }
.card-grid--compact { gap: var(--space-3); margin-top: var(--space-3); grid-template-columns: 1fr 1fr; }
.card-grid--compact .card { padding: var(--space-3) var(--space-4); }
.card-grid--compact .card a { font-size: var(--type-lg); }
.card-grid--compact .note { margin-top: 0; }
@media (min-width: 1024px) { .card-grid--compact { grid-template-columns: repeat(4, 1fr); } }

/* Dark mode: team colors lift to a lightness floor (relative color syntax) so near-black navies and
   greens stay visible on the dark surface while bright colors pass through. Only elements that carry an
   inline --team-color are lifted, so tie and neutral cells keep their token colors. The @supports probe
   spells the exact expression used: Safari 16.4-17 parses plain relative colors but reads l as a percentage,
   which makes max(l, 0.62) invalid at computed time and leaves the color unset. Chroma is boosted 1.8x
   (capped at 0.2, never lowered, c=0 stays gray) so lifted navies and greens keep their hue instead of washing out. */
@supports (color: oklch(from red max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h)) {
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) :is(.timeline__area, .timeline__cell)[style*="--team-color"] { fill: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
        :root:not([data-theme="light"]) :is(.timeline__key, .timeline__pt, .timeline__tip-key, .matchup-card__seg, .record-bar__swatch, .winner-swatch, .mchip__dot, .mchip__seg)[style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
        :root:not([data-theme="light"]) .record-bar__team[style*="--team-color"] .record-bar__swatch { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
        :root:not([data-theme="light"]) .quiz-choice[style*="--team-color"] { border-top-color: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
        :root:not([data-theme="light"]) .quiz-bar__seg[style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
        :root:not([data-theme="light"]) .team-card__colors > [style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    }
    :root[data-theme="dark"] :is(.timeline__area, .timeline__cell)[style*="--team-color"] { fill: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    :root[data-theme="dark"] :is(.timeline__key, .timeline__pt, .timeline__tip-key, .matchup-card__seg, .record-bar__swatch, .winner-swatch, .mchip__dot, .mchip__seg)[style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    :root[data-theme="dark"] .record-bar__team[style*="--team-color"] .record-bar__swatch { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    :root[data-theme="dark"] .quiz-choice[style*="--team-color"] { border-top-color: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    :root[data-theme="dark"] .quiz-bar__seg[style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
    :root[data-theme="dark"] .team-card__colors > [style*="--team-color"] { background: oklch(from var(--team-color) max(l, 0.62) max(c, min(calc(c * 1.8), 0.2)) h); }
}

/* Header link to the quiz sits at the end of the league row. */
.site-nav__extra a { color: var(--header-accent); }

/* Home: the quiz card under the hero search. */
.quiz-promo {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: center;
    max-width: 40rem; margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border);
    border-top: var(--space-2) solid var(--action-primary); color: var(--text-primary);
}
.quiz-promo:hover { background: var(--surface-hover); color: var(--text-primary); }
.quiz-promo__title { font-family: var(--font-display); font-weight: 800; font-size: var(--type-xl); }
.quiz-promo__text { grid-column: 1; color: var(--text-secondary); font-size: var(--type-sm); }
.quiz-promo__go { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 800; color: var(--link); }

/* Who leads? quiz. Team colors are a band on top of each choice and the reveal bar, never a fill behind text. */
.quiz { margin-top: var(--space-6); max-width: 46rem; }
.quiz-controls { display: grid; gap: var(--space-2); }
/* Until quiz.js has the questions, a copy of the first question's frame holds their space (with JS
   only); the no-JS link list shows without JS, or once loading the questions has failed. */
.quiz-placeholder { display: none; }
:root.js .quiz:not(.is-failed) > .quiz-placeholder { display: block; }
:root.js .quiz:not(.is-failed) > .quiz-fallback { display: none; }
.quiz-placeholder .quiz-chip, .quiz-placeholder .quiz-choice { cursor: default; }
/* The prompt is a <p> here, so the page outline keeps one quiz heading: give it the h2's face. */
.quiz-placeholder .quiz-prompt { font-family: var(--font-display); font-weight: 700; line-height: var(--leading-heading); }
.quiz-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quiz-chip {
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-control);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
    font: inherit; font-size: var(--type-sm); cursor: pointer;
}
.quiz-chip:hover { background: var(--surface-hover); }
.quiz-chip[aria-pressed="true"] { background: var(--action-primary); color: var(--on-action-primary); border-color: var(--action-edge); }
.quiz-stage { margin-top: var(--space-6); }
.quiz-count { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--type-sm); color: var(--text-secondary); }
.quiz-count strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quiz-score { font-weight: 600; color: var(--text-primary); }
.quiz-progress { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-1); margin-top: var(--space-2); }
.quiz-progress__step {
    height: 1.25rem; border-radius: var(--radius-xs); border: 1px solid var(--border-hover); background: var(--surface);
    display: flex; align-items: center; justify-content: center; font-size: var(--type-2xs); font-weight: 800; line-height: 1;
}
.quiz-progress__step.is-current { border-color: var(--text-primary); border-width: 2px; }
.quiz-progress__step.is-right { border-color: var(--success); color: var(--success); }
.quiz-progress__step.is-wrong { border-color: var(--error); color: var(--error); }
.quiz-league { margin-top: var(--space-6); }
.quiz-prompt { font-size: var(--type-2xl); margin-top: var(--space-1); }
.quiz-prompt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.quiz-meetings { margin-top: var(--space-1); }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.quiz-choice {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
    min-height: 9rem; padding: var(--space-4); text-align: left; cursor: pointer;
    border-radius: var(--radius-card); border: 2px solid var(--border); border-top: var(--space-3) solid var(--team-color, var(--border-hover));
    background: var(--surface); color: var(--text-primary); font: inherit;
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.quiz-choice:hover:not([aria-disabled="true"]) { background: var(--surface-hover); transform: translateY(-2px); }
.quiz-choice:active:not([aria-disabled="true"]) { transform: translateY(0); }
.quiz-choice[aria-disabled="true"] { cursor: default; }
.quiz-choice__key {
    align-self: flex-start; min-width: 1.5rem; padding: 0 var(--space-2); border-radius: var(--radius-xs); text-align: center;
    border: 1px solid var(--border-hover); color: var(--text-secondary); font-size: var(--type-xs); font-weight: 700;
}
.quiz-choice__name { font-family: var(--font-display); font-weight: 800; font-size: var(--type-xl); line-height: var(--leading-heading); overflow-wrap: anywhere; }
.quiz-choice__mark { min-height: 1.25em; font-size: var(--type-sm); font-weight: 700; }
.quiz-choice.is-leader { border-color: var(--success); border-top-color: var(--team-color, var(--border-hover)); }
.quiz-choice.is-leader .quiz-choice__mark { color: var(--success); }
.quiz-choice.is-wrong { border-color: var(--error); border-style: dashed; border-top-style: solid; border-top-color: var(--team-color, var(--border-hover)); }
.quiz-choice.is-wrong .quiz-choice__mark { color: var(--error); }
.quiz-hint { display: none; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--type-xs); }
@media (hover: hover) and (pointer: fine) { .quiz-hint { display: block; } }
.quiz-result { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.quiz-result:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.quiz-result.is-right { border-color: var(--success); }
.quiz-result.is-wrong { border-color: var(--error); }
.quiz-verdict { font-family: var(--font-display); font-weight: 800; font-size: var(--type-xl); }
.quiz-result.is-right .quiz-verdict { color: var(--success); }
.quiz-result.is-wrong .quiz-verdict { color: var(--error); }
.quiz-lead { margin-top: var(--space-1); font-weight: 600; }
.quiz-bar { display: flex; height: var(--space-3); margin-top: var(--space-3); border-radius: var(--radius-xs); overflow: hidden; background: var(--border); }
.quiz-bar__seg { flex: 0 1 0; min-width: 0; background: var(--team-color, var(--border-hover)); transition: flex-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.quiz-bar__seg--tie { background: var(--text-muted); }
.quiz-bar__nums { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); font-size: var(--type-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.quiz-actions--end { justify-content: flex-start; }
.quiz-link { font-size: var(--type-sm); }
.quiz-btn {
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-control); border: 1px solid var(--border-hover);
    background: var(--surface); color: var(--text-primary); font: inherit; font-weight: 700; cursor: pointer;
}
.quiz-btn:hover { background: var(--surface-hover); }
.quiz-btn--primary { background: var(--action-primary); color: var(--on-action-primary); border-color: var(--action-edge); }
.quiz-btn--primary:hover { background: var(--action-primary-hover); }
.quiz-end { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); text-align: center; }
.quiz-end:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.quiz-end__score { font-family: var(--font-display); font-weight: 800; line-height: 1; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.quiz-end__points { font-size: 5rem; }
.quiz-end__total { font-size: var(--type-3xl); color: var(--text-secondary); }
.quiz-end__verdict { margin-top: var(--space-3); font-size: var(--type-lg); }
.quiz-end__grid { margin-top: var(--space-4); font-size: var(--type-2xl); letter-spacing: 0.1em; overflow-wrap: anywhere; }
.quiz-end .quiz-actions { justify-content: center; }
a.quiz-chip { text-decoration: none; }
a.quiz-chip:hover { color: var(--text-primary); }
.quiz-share-status { min-height: 1.5em; }
.quiz-share-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--type-sm); color: var(--text-secondary); }
.quiz-share-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--link); cursor: pointer; }
.quiz-share-link:hover { text-decoration: underline; }
.quiz-days { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-4); }
.quiz-share-text { display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-2); font: inherit; font-size: var(--type-sm); background: var(--background); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-xs); }
/* Server-rendered part of the quiz pages: the sample question and the FAQ. */
.quiz-sample > * { max-width: 46rem; }
.quiz-sample details { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.quiz-sample summary { cursor: pointer; font-weight: 700; }
.quiz-sample details p { margin-top: var(--space-2); }
.quiz-faq { max-width: 46rem; display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.quiz-faq dt { font-family: var(--font-display); font-weight: 700; }
.quiz-faq dd { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.quiz-review__title { margin-top: var(--space-8); }
.quiz-review { margin-top: var(--space-2); }
.quiz-review__row { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.quiz-review__mark { font-weight: 800; }
.quiz-review__mark.is-right { color: var(--success); }
.quiz-review__mark.is-wrong { color: var(--error); }
.quiz-review__rec { grid-column: 2; color: var(--text-secondary); font-size: var(--type-sm); }
@media (max-width: 639px) {
    .quiz-choice { min-height: 7rem; padding: var(--space-3); }
    .quiz-choice__name { font-size: var(--type-lg); }
    /* Most pairs have a name that wraps at this width, so the placeholder holds two lines. */
    .quiz-placeholder .quiz-choice__name { min-height: 2lh; }
    .quiz-end__points { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-choice, .quiz-bar__seg { transition: none; }
    .quiz-choice:hover:not([aria-disabled="true"]) { transform: none; }
}
.legal-doc .contact-form { display: flex; justify-content: center; margin-top: var(--space-6); }

/* Day/Night toggle (partials/_theme_toggle.html): the header's icon-button look, as the search toggle. */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
    border-radius: var(--radius-control); border: 1px solid var(--header-border); background: transparent;
    color: var(--text-on-primary); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background-color: color-mix(in srgb, var(--text-on-primary) 10%, transparent); border-color: var(--header-accent); color: var(--header-accent); }
.theme-toggle [hidden] { display: none; }
.theme-toggle span { display: inline-flex; }
:root.theme-no-transition, :root.theme-no-transition *, :root.theme-no-transition *::before, :root.theme-no-transition *::after { transition: none !important; }

/* Team cards (partials/_team_card.html): league and conference pages. The team's colors are a band
   across the top, never a fill behind text; former names and seasons sit under the name. */
.team-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-card { border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.team-card[hidden] { display: none; }
.team-card:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.team-card__link { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: 0 var(--space-4) var(--space-3); color: var(--text-primary); text-decoration: none; }
.team-card__link:hover { color: var(--text-primary); }
.team-card__link:hover .team-card__name { text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 2px; }
.team-card__colors { display: flex; height: var(--space-2); margin: 0 calc(-1 * var(--space-4)) var(--space-2); background: var(--border); }
.team-card__colors > span { flex: 1; background: var(--team-color, var(--border-hover)); }
.team-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--type-base); line-height: var(--leading-heading); }
.team-card__alt { font-size: var(--type-xs); color: var(--text-secondary); line-height: var(--leading-compact); }
.team-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--space-3); }
.team-card__span { font-size: var(--type-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.team-card__meta { margin-top: auto; padding-top: var(--space-1); font-size: var(--type-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* League page team filters (static/js/team_filter.js wires the bar; .js-only shows it). */
.team-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.team-filters__field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 12rem; max-width: 20rem; }
.team-filters select.filter__input { appearance: auto; }
.team-filters__count { flex-basis: 100%; margin-top: 0; }
.chip-row { display: inline-flex; border: 1px solid var(--border-hover); border-radius: var(--radius-control); overflow: hidden; align-self: flex-end; }
.chip { padding: var(--space-2) var(--space-4); border: 0; background: var(--surface); color: var(--text-primary); font: inherit; font-size: var(--type-sm); cursor: pointer; }
.chip + .chip { border-left: 1px solid var(--border-hover); }
.chip:hover { background: var(--surface-hover); }
.chip[aria-pressed="true"] { background: var(--action-primary); color: var(--on-action-primary); }

/* League page conferences, each with its divisions under it. */
.group-grid { display: grid; gap: var(--space-3) var(--space-6); margin-top: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.group-entry { padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.group-entry__name { font-weight: 700; }
.group-entry__divs { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-1); font-size: var(--type-sm); }
.group-entry__former { margin-top: var(--space-1); font-size: var(--type-xs); color: var(--text-muted); }
.group-entry__former a { color: var(--text-secondary); }

/* Team page home venues: a dated list, the current home marked. */
.venue-list { margin-top: var(--space-3); border-top: 1px solid var(--border); }
.venue-list__item { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--type-sm); }
.venue-list__span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.venue-list__item.is-current .venue-list__name { font-weight: 700; }
/* An era's colors as recorded (no dark-mode lift: these are the team's own swatches, not a chart fill). */
.era-swatches { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
.era-swatch { display: inline-block; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); border: 1px solid var(--border); background: var(--team-color, var(--border)); }

/* Citation markers (partials/_cite.html) and the sources card (partials/_sources.html). */
.cite { font-size: var(--type-xs); font-weight: 600; margin-left: var(--space-1); }
.cite a { text-decoration: none; }
.cite + .cite { margin-left: 0; }
.sources-card-wrap { padding-top: var(--space-12); padding-bottom: var(--space-8); }
.sources-card { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); font-size: var(--type-sm); color: var(--text-secondary); }
.sources-card > * + * { margin-top: var(--space-2); }
.sources-card__title { font-size: var(--type-lg); color: var(--text-primary); }
.sources-card__list { list-style: decimal; padding-left: var(--space-6); }
.sources-card__list li + li { margin-top: var(--space-1); }
.sources-card__list li:target { background: var(--selected-tint); }
.sources-card__name { font-weight: 600; color: var(--text-primary); }

/* Conference membership timeline (partials/_membership_timeline.html, js/group_timeline.js). Bar fills are
   team colors set as SVG fill attributes; the season cursor is one line per lane at var(--gtl-x). */
.gtl { --gtl-x: 0%; margin: 0; }
.gtl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.gtl-year { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-sm); color: var(--text-secondary); }
.gtl-year input { width: min(20rem, 60vw); accent-color: var(--action-primary); }
.gtl-readout { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 10rem; }
.gtl-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.gtl-lanes { list-style: none; margin: 0; padding: 0; }
.gtl-lane, .gtl-axis { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-3); align-items: center; }
.gtl-lane { padding: var(--space-1) 0; }
.gtl-lane[hidden] { display: none; }
.gtl-lane__label { min-width: 0; font-size: var(--type-sm); line-height: var(--leading-compact); }
.gtl-lane__name { font-weight: 400; }
.gtl-lane.is-current .gtl-lane__name { font-weight: 700; }
.gtl-lane__text { font-size: var(--type-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gtl-lane__plot { position: relative; display: block; }
.gtl-lane__bar { display: block; width: 100%; height: 0.875rem; background: var(--surface-hover); border-radius: var(--radius-xs); outline: 1px solid var(--border); }
.gtl-seg--nocolor { fill: var(--text-muted); }
.gtl.has-cursor .gtl-lane__plot::after { content: ""; position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); left: var(--gtl-x); width: 2px; margin-left: -1px; background: var(--text-primary); pointer-events: none; }
.gtl-lane.is-out .gtl-lane__label, .gtl-lane.is-out .gtl-lane__bar { opacity: 0.4; }
.gtl-axis__ticks { position: relative; display: block; height: 1.25rem; border-top: 1px solid var(--border); margin-top: var(--space-1); }
.gtl-tick { position: absolute; top: var(--space-1); transform: translateX(-50%); font-size: var(--type-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gtl-tick--start { transform: none; }
.gtl-tick--end { transform: translateX(-100%); }
.data-table a.is-current { font-weight: 700; }
@media (min-width: 40rem) {
    .gtl-lane, .gtl-axis { grid-template-columns: minmax(10rem, 18rem) 1fr; }
    .gtl-lane { padding: 2px 0; }
}

/* "On this page" (partials/_page_toc.html, static/js/page.js): a pinned row of section links on
   phones and tablets. Its height is reserved before the script fills it, so nothing jumps. */
.page-toc { display: none; }
@media (max-width: 1023px) {
    .page-toc {
        display: block; position: sticky; top: 0; z-index: 40; min-height: 3rem;
        margin-top: var(--space-4); background: var(--background); border-bottom: 1px solid var(--border);
    }
    .page-toc ul { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: var(--space-2) 0; }
    .page-toc ul::-webkit-scrollbar { display: none; }
    .page-toc li { flex: none; }
    .page-toc a {
        display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-control);
        border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
        font-size: var(--type-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
    }
    .page-toc a[aria-current] { background: var(--action-primary); color: var(--on-action-primary); border-color: var(--action-edge); }
    main h2, main section[id] { scroll-margin-top: 4rem; }
}

/* Long lists on phones: the first ten rows (or PHONE_CARDS team cards), then "Show all"
   (partials/_show_all.html). Wider screens show everything and never the button. */
.show-all { display: none; }
@media (max-width: 639px) {
    table[data-collapse]:not(.is-expanded) > tbody > tr:nth-child(n+11) { display: none; }
    .team-grid[data-collapse]:not(.is-expanded) > [data-over] { display: none; }
    .league-features[data-collapse]:not(.is-expanded) > .league-feature:nth-child(n+4) { display: none; }
    .show-all {
        display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-3);
        border-radius: var(--radius-control); border: 1px solid var(--border-hover); background: var(--surface);
        color: var(--text-primary); font: inherit; font-size: var(--type-sm); font-weight: 600; cursor: pointer;
    }
    .show-all:hover { background: var(--surface-hover); }
    .show-all[hidden] { display: none; }
}