/* Tokens live in tokens.css and are the single source of truth for color,
 * type, spacing, elevation, and team theming. Component CSS below
 * references them via var(--…).
 */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    font-family: var(--font-body);
    margin: 0;
    background: var(--bg-gradient, var(--bg));
    background-attachment: fixed;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

/* ---------- card surface (replaces six near-duplicate background+border+shadow blocks) ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
/* Reference-weight surfaces recede behind hero cards (used on /matchup secondary sections). */
.card-ref {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---------- focus ring (single rule covers every interactive control) ---------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- site header / nav ---------- */
.site-header {
    background: var(--navy);
    color: #fff;
    border-bottom: 3px solid var(--accent);
}
.site-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 56px;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.brand-mark {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
}
.brand-name {
    font-weight: 500;
    opacity: 0.88;
    font-size: 0.95rem;
}
.site-nav {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}
.site-nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 120ms, color 120ms;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
    margin-left: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: background-color 120ms, color 120ms;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.theme-toggle .theme-toggle-icon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--sun,
:root:not([data-theme="dark"]) .theme-toggle .theme-toggle-icon--moon {
    display: inline;
}

/* ---------- nav dropdown ---------- */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-trigger {
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    border: 0;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.45;
    transition: background-color 120ms, color 120ms;
}
.nav-dropdown-trigger:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.nav-dropdown-trigger .caret {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    opacity: 0.85;
}
.nav-dropdown.active .nav-dropdown-trigger {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-pop);
    padding: 0.4rem 0;
    z-index: 50;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 0.4rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}
.nav-dropdown-menu a:hover {
    background: var(--bg);
    color: var(--accent-strong);
}
.nav-dropdown-menu a.muted { color: var(--ink-muted); font-size: 0.82rem; }
.nav-dropdown-overview {
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem !important;
}
.nav-dropdown-section { padding: 0.25rem 0; }
.nav-dropdown-section + .nav-dropdown-section {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
}
.nav-dropdown-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    padding: 0.25rem 0.85rem;
}
.nav-dropdown-section a { padding-left: 1.4rem; }

/* ---------- analytics index list ---------- */
.analytics-list { margin: 0.5rem 0 0; }
.analytics-list dt {
    font-weight: 600;
    margin-top: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.analytics-list dt a { font-size: 1rem; }
.analytics-list dt a.muted {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-muted);
}
.analytics-list dd {
    margin: 0.2rem 0 0 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
    max-width: 64ch;
}
.analytics-page-header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.analytics-page-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
    font-weight: 600;
}
.analytics-page-header p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
    max-width: 70ch;
}
.analytics-page-header .howto-link {
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

main {
    padding: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- sections / typography ---------- */
section { margin: var(--space-6) 0; }
section h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    padding-left: 0.6rem;
    border-left: var(--accent-bar) solid var(--accent);
    line-height: 1.2;
}
section h4 {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- forms / filters ---------- */
fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: end;
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
}
legend {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--space-2);
}
label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--ink-muted);
    gap: 0.3rem;
    font-weight: 500;
}
select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    height: var(--control-height);
    padding: 0.5rem 2.2rem 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%235b6472' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.7rem center;
    transition: border-color 120ms, box-shadow 120ms;
    font-family: inherit;
}
select:hover { border-color: var(--ink-dim); }
select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

input[type="text"], input[type="number"] {
    height: var(--control-height);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    transition: border-color 120ms, box-shadow 120ms;
}
input[type="text"]:hover,
input[type="number"]:hover { border-color: var(--ink-dim); }
input[type="text"]:focus-visible,
input[type="number"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

button, .btn {
    height: var(--control-height);
    padding: 0 1.1rem;
    font-size: 0.9rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
    transition: background-color 120ms;
}
button:hover, .btn:hover { background: var(--accent-strong); }
#csv-link {
    height: var(--control-height);
    padding: 0 1.1rem;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    background: #fff;
    display: inline-flex;
    align-items: center;
    transition: background-color 120ms, border-color 120ms;
}
#csv-link:hover { background: var(--bg); border-color: var(--ink-dim); }

/* ---------- tabs / segmented ---------- */
.view-toggle {
    display: flex;
    gap: 0;
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    overflow: hidden;
    width: max-content;
    background: #fff;
}
.view-btn {
    height: var(--control-height);
    padding: 0 0.95rem;
    font-size: 0.85rem;
    background: #fff;
    color: var(--ink);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background-color 120ms, color 120ms;
}
.view-btn:last-child { border-right: 0; }
.view-btn:hover { background: var(--bg); }
.view-btn.active { background: var(--accent); color: #fff; }

/* ---------- result meta / empty / notice ---------- */
.result-meta { color: var(--ink-muted); font-size: 0.85rem; margin: 0.5rem 0; }
.result-meta .note {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-dim);
    font-style: italic;
    font-size: 0.78rem;
}
.empty { color: var(--ink-dim); font-style: italic; }
.badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.5em;
    border-radius: var(--radius-pill);
    background: var(--bg-chip);
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ---------- discipline page ---------- */
.discipline-filters {
    margin: 0.5rem 0 1.5rem;
}
.discipline-filter-bar {
    display: flex;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Segmented control for season type — three pills sharing a border. */
.discipline-segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--bg);
}
.discipline-segmented-option {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--ink-muted);
    border-right: 1px solid var(--border);
}
.discipline-segmented-option:last-child { border-right: 0; }
.discipline-segmented-option.is-active {
    background: var(--bg-chip-active);
    color: var(--ink);
    font-weight: 600;
}
.discipline-segmented-option input {
    /* Visually hidden but still keyboard-focusable through the label. */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.discipline-segmented-option:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Team filter: chip cluster with leading All / None actions. */
.discipline-team-filter {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.discipline-team-action {
    appearance: none;
    border: 1px dashed var(--ink-dim);
    background: transparent;
    color: var(--ink-muted);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.discipline-team-action:hover { color: var(--ink); border-color: var(--ink); }
.discipline-team-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--bg);
    /* Unchecked chips dim/strike through their code so the diff between
       'this team is included' vs 'this team is filtered out' is obvious
       — solves the all-checked = none-checked equivalence trap. */
    opacity: 0.55;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}
.discipline-team-chip:has(input:checked) {
    opacity: 1;
    background: var(--bg-chip-active);
    border-color: var(--ink-dim);
}
.discipline-team-chip input {
    /* Hide the native checkbox — the chip itself is the affordance. */
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.discipline-team-chip:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.discipline-section {
    margin: 1.5rem 0 2rem;
}
/* Collapsible <details>-based sections: the <summary> hosts the h3 and
   acts as a click target for show/hide. Strip the default disclosure
   triangle in favour of a custom chevron that rotates on open. */
details.discipline-section > .discipline-section-summary {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    padding: 0.15rem 0;
    border-radius: 4px;
}
details.discipline-section > .discipline-section-summary::-webkit-details-marker { display: none; }
details.discipline-section > .discipline-section-summary::before {
    content: '▸';
    color: var(--ink-muted);
    font-size: 0.8em;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
    width: 1em;
}
details.discipline-section[open] > .discipline-section-summary::before {
    transform: rotate(90deg);
}
details.discipline-section > .discipline-section-summary > h3 {
    display: inline;
    margin: 0;
}
details.discipline-section > .discipline-section-summary:hover {
    background: var(--bg-chip);
}
details.discipline-section > .discipline-section-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.discipline-section-subtitle {
    font-size: 0.85rem;
}
.discipline-chart {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    /* Center the chart and let it use the available space comfortably,
       without sprawling to the full main width which would push the
       bars too wide to read at a glance. */
    max-width: min(960px, 100%);
    margin: 0 auto;
}
/* SVG charts on /analytics/uncontested use `fill="currentColor"` throughout
   so a single rule re-tints them per theme. Setting `color` on the SVG
   resolves `currentColor` to `--ink-muted` (the same muted-text tone used
   for axis labels site-wide), and `--ink` is available for elements that
   override locally if they need full contrast. */
#headline-scatter,
#position-blocks {
    color: var(--ink-muted);
}
/* The stacked-bar chart needs a minimum drawing width to keep its 11px
   text legible. Below ~560px the team labels and trailing F-share labels
   overlap. The parent `.discipline-section` already provides horizontal
   scroll on narrow viewports via the natural overflow of `.discipline-chart`
   when a child exceeds its width. */
.discipline-section:has(#position-blocks) .discipline-chart {
    overflow-x: auto;
}
#position-blocks {
    min-width: 680px;
}
.discipline-bar-row {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.88rem;
}
.discipline-bar-label {
    text-align: right;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discipline-bar-track {
    position: relative;
    background: var(--bg-chip);
    border-radius: 3px;
    height: 0.6rem;
    overflow: hidden;
}
.discipline-bar-fill {
    background: var(--accent);
    height: 100%;
    opacity: 0.7;
}
/* Value label sits to the right of the bar track so the text never
   gets bisected by the bar fill width at narrow viewports. */
.discipline-bar-value {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-size: 0.82rem;
    white-space: nowrap;
}
.discipline-bar-value .muted { color: var(--ink-dim); margin-left: 0.25em; }
.discipline-team-table th,
.discipline-team-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.discipline-team-table th:first-child,
.discipline-team-table td:first-child {
    text-align: left;
    /* Pin team code to the left edge so PIM, PIM/60, PP%, PK% stay
       anchored to a team identifier when scrolling horizontally on
       narrow viewports. background-color is required for sticky cells
       so they cover scrolled-under columns. */
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 1;
}
.discipline-team-table thead th:first-child {
    background: var(--bg-elevated);
}
/* Visual cue that the table scrolls horizontally — only shown when the
   table actually overflows its container. The .is-overflowing class is
   toggled by a ResizeObserver in base.html so the gradient never appears
   on viewports wide enough to fit the table (which used to look like a
   stray vertical bar on the right edge). */
.table-scroll:has(.discipline-team-table) {
    position: relative;
}
.table-scroll:has(.discipline-team-table)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-gradient-bottom, var(--bg)));
    opacity: 0;
    transition: opacity 0.15s;
}
.table-scroll.is-overflowing:has(.discipline-team-table)::after {
    opacity: 1;
}
@supports (scroll-snap-type: x) {
    .table-scroll {
        scroll-snap-type: x proximity;
    }
}
.discipline-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
/* PK cards are denser (6-column table inside) — give them a touch more
   minimum width than the infraction-mix cards so the rightmost Δ
   column never clips on common laptop/desktop widths. Tightening
   font-size + per-column whitespace lets two cards still fit at
   typical content widths around 800px. */
.discipline-section-pk .discipline-breakdown {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.discipline-section-pk .discipline-pk-regulars { font-size: 0.8rem; }
.discipline-section-pk .discipline-pk-regulars th,
.discipline-section-pk .discipline-pk-regulars td {
    padding: 0.2rem 0.3rem;
}
.discipline-team-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.85rem 0.75rem;
    background: var(--bg);
}
.discipline-team-card h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}
.discipline-infraction-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.discipline-infraction-list li {
    display: grid;
    grid-template-columns: 1fr 2ch 1fr;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.84rem;
}
.discipline-infraction-name {
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discipline-infraction-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.discipline-infraction-bar {
    position: relative;
    height: 0.6rem;
    background: var(--bg-chip);
    border-radius: 2px;
    overflow: hidden;
}
.discipline-infraction-fill {
    display: block;
    height: 100%;
    background: var(--team-color, var(--accent));
    opacity: 0.7;
}
.discipline-liability-table th,
.discipline-liability-table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.discipline-liability-table th:first-child,
.discipline-liability-table td:first-child,
.discipline-liability-table th:nth-child(2),
.discipline-liability-table td:nth-child(2) { text-align: left; }

/* Sortable-table headers: clickable affordance + direction indicator. */
.sortable-table th.is-sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1em;  /* room for the arrow */
}
.sortable-table th.is-sortable:hover { color: var(--accent); }
.sortable-table th.is-sortable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.sortable-table th.is-sortable::after {
    content: '↕';
    position: absolute;
    right: 0.3em;
    color: var(--ink-dim);
    font-size: 0.78em;
    opacity: 0.5;
}
.sortable-table th.is-sortable.sort-asc::after  { content: '▲'; opacity: 1; color: var(--accent); }
.sortable-table th.is-sortable.sort-desc::after { content: '▼'; opacity: 1; color: var(--accent); }

/* PK A-squad cards: regulars + bucketed PK% tables */
.discipline-pk-card { padding: 0.6rem 0.75rem; }
.discipline-pk-regulars,
.discipline-pk-buckets {
    width: 100%;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    table-layout: auto;
}
.discipline-pk-regulars th,
.discipline-pk-regulars td,
.discipline-pk-buckets th,
.discipline-pk-buckets td {
    padding: 0.2rem 0.4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.discipline-pk-regulars th:first-child,
.discipline-pk-regulars td:first-child,
.discipline-pk-regulars th:nth-child(2),
.discipline-pk-regulars td:nth-child(2),
.discipline-pk-buckets th:first-child,
.discipline-pk-buckets td:first-child {
    text-align: left;
}
/* Δ column: explicit room so "+24.4" never clips. The glyph + sign
   together can reach ~5 chars, plus padding. */
.discipline-pk-regulars td:last-child,
.discipline-pk-regulars th:last-child {
    white-space: nowrap;
    min-width: 4.5ch;
    padding-right: 0.2rem;
}
.discipline-pk-buckets {
    margin-top: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.4rem;
}
/* Delta deltas pull from the existing semantic --pos / --neg tokens which
   already have proper dark-mode variants (see tokens.css). Polarity is
   ALSO encoded as a glyph in the template so colorblind users get the
   meaning without relying on hue. */
.delta-pos { color: var(--pos); font-weight: 600; }
.delta-neg { color: var(--neg); font-weight: 600; }
.delta-glyph { font-size: 0.78em; margin-right: 0.1em; }
.hint { color: var(--ink-muted); font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
.notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-left: var(--accent-bar) solid var(--amber);
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: #5a4700;
}
.notice code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85rem;
}
/* Dark mode: the brown notice text (#5a4700) is illegible on the dark warning
 * fill (--warn-bg #2a2415), so lift it to the bright amber accent. */
:root[data-theme="dark"] .notice {
    color: var(--amber);
}
:root[data-theme="dark"] .notice code {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- crumbs ---------- */
.crumbs {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: var(--ink-muted);
}
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- tables (single base, modifiers stack as additional classes) ---------- */
.table-scroll {
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
/* Modifier: cap the table to ~10 rows of vertical space and let the user
   scroll inside the wrapper. `table.results th` already paints
   `var(--bg-elevated)` as its background, so `position: sticky` on the head
   correctly covers tbody rows scrolling underneath in both light and dark
   themes. Used by long skater leaderboards. */
.table-scroll--capped {
    max-height: 420px;
    overflow-y: auto;
}
.table-scroll--capped thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Bottom border re-paints on the th instead of the tr because sticky
       cells don't clip the row's border in some browsers. */
    box-shadow: inset 0 -1px 0 var(--border);
}
table.results {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}
/* Standalone-table chrome — stripped automatically when wrapped in .table-scroll
   (the wrapper provides border + shadow) or when used as h2h-matrix variant. */
table.results.standalone {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
table.results th,
table.results td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
table.results tr:last-child td { border-bottom: 0; }
table.results th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--ink-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
table.results tbody tr:hover { background: var(--bg); }
table.results tr.is-goal { background: #fff7dd; }
table.results tr.is-goal:hover { background: #fff1c2; }
table.results tr.is-goal td { font-weight: 500; }

/* leaderboard modifier */
table.results.leaderboard td.num,
table.results.leaderboard th.num { text-align: right; }
table.results.leaderboard td.rank,
table.results.leaderboard th.rank { text-align: right; color: var(--ink-dim); width: 2.5rem; }
table.results.leaderboard td.pos { color: var(--pos); font-weight: 600; }
table.results.leaderboard td.neg { color: var(--neg); font-weight: 600; }
table.results.leaderboard th.text { text-align: left; }
table.results.leaderboard th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.1em;  /* room for the indicator */
}
table.results.leaderboard th.sortable::after {
    content: '↕';
    position: absolute;
    right: 0.3em;
    color: var(--ink-dim);
    font-size: 0.78em;
    opacity: 0.5;
}
table.results.leaderboard th.sortable.sort-active::after {
    content: '';  /* active column already renders its own ▾ inline */
}
table.results.leaderboard th.sortable:hover { background: var(--bg-elevated-strong); color: var(--ink); }
table.results.leaderboard th.sort-active { color: var(--navy); background: var(--bg-elevated-strong); }

/* summary-grid modifier (h2h summary table) */
table.results.summary-grid th,
table.results.summary-grid td { text-align: center; }
table.results.summary-grid tr.subhead th {
    font-size: 0.68rem;
    background: var(--bg-elevated-strong);
    font-weight: 700;
}

/* compact modifier (replaces the old .onice rule tree) */
table.results.compact th,
table.results.compact td { padding: 0.35rem 0.5rem; }
table.results.compact { font-size: 0.8rem; }

/* h2h-matrix — full borders, larger cells, fill support */
table.h2h-matrix {
    border-collapse: collapse;
    margin-top: 0.25rem;
    background: var(--surface);
    font-size: 0.78rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-variant-numeric: tabular-nums;
}
table.h2h-matrix th,
table.h2h-matrix td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    min-width: 140px;
    text-align: left;
}
table.h2h-matrix thead th { background: var(--bg-elevated); font-weight: 600; color: var(--ink-muted); }
table.h2h-matrix tbody th { background: #fafbfd; font-weight: 500; color: var(--ink); }
/* Mobile: the fixed 140px-per-cell matrix forces extreme horizontal scroll on
   phones. Shrink cells, padding and font under 720px so it stays usable (it
   still scrolls inside .table-scroll if a wider matrix needs it). */
@media (max-width: 720px) {
    table.h2h-matrix { font-size: 0.72rem; }
    table.h2h-matrix th,
    table.h2h-matrix td { min-width: 84px; padding: 0.4rem 0.45rem; }
}
.unit-label { font-weight: 500; line-height: 1.2; }
.unit-toi { font-size: 0.72rem; color: var(--ink-muted); margin-top: 0.15rem; }
.h2h-cell { color: var(--ink); }
.h2h-cell.empty { color: var(--ink-dim); text-align: center; }
.h2h-toi { font-weight: 600; }
.h2h-xg { font-size: 0.7rem; color: var(--ink-muted); }

/* ---------- utility: team-color text + cell-fill (replaces inline styles in templates) ---------- */
.team-colored { color: var(--team-color, var(--ink)); }
/* Several PWHL primaries (NY navy #0C2340, BOS forest #154734, TOR royal
   #003876, MIN purple #2E1A47) sit near-black and disappear against the
   dark theme bg (#0a1422 ≈ same luminance). Mix in white to lift them
   into a readable range while preserving the team's hue identity. */
:root[data-theme="dark"] .team-colored {
    color: color-mix(in srgb, var(--team-color, var(--ink)) 55%, #ffffff 45%);
}
.cell-fill { background: rgb(10 108 241 / var(--fill, 0)); }

a.skater-link { color: var(--accent); text-decoration: none; }
a.skater-link:hover { text-decoration: underline; }

/* ---------- shot map ---------- */
.shotmap-wrap {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    background: var(--surface);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
svg.shotmap { display: block; flex: 0 0 auto; max-width: 100%; height: auto; }
svg.shotmap circle[data-tip] { cursor: crosshair; }
#shotmap-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(20, 24, 30, 0.94);
    color: #f5f7fa;
    font: 500 0.78rem/1.25 var(--font-sans, system-ui, sans-serif);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    max-width: 280px;
    /* normal (not nowrap) so multi-word stat/filter definitions wrap inside
       the tooltip instead of running off-screen. Shotmap dot labels are short
       enough that wrapping never triggers. */
    white-space: normal;
}
#shotmap-tip[hidden] { display: none; }
.shotmap-legend {
    font-size: 0.82rem;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.25rem;
}
.shotmap-legend .hint {
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--ink-dim);
}
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 0.45rem;
    border-radius: 50%;
}
.swatch.dot-goal { background: var(--goal); }
.swatch.dot-shot { background: var(--accent); opacity: 0.55; }
.swatch.hex-lo { background: #eef5ff; border: 1px solid var(--border-strong); border-radius: 2px; }
.swatch.hex-hi { background: var(--goal); border-radius: 2px; }

/* ---------- matchup banner ---------- */
.matchup-banner {
    /* Hero card — full shadow, generous padding. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-5);
    margin: var(--space-4) 0 var(--space-5);
}
.matchup-banner h2 {
    margin: 0 0 var(--space-4);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.banner-sub {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.banner-meta {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.series-record {
    display: flex;
    gap: var(--space-4);
    align-items: stretch;
    flex-wrap: wrap;
}
.record-card {
    background: var(--bg);
    border-left: var(--accent-bar) solid var(--team-color, var(--navy));
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    min-width: 130px;
}
.record-team {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--team-color, var(--navy));
    margin-bottom: 0.15rem;
}
.record-row {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.record-row-sm {
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-top: 0.1rem;
}
.game-status { color: var(--ink-dim); font-size: 0.75rem; margin-left: 0.2rem; }

/* ---------- shotmap-duo (hero placement on /matchup) ---------- */
.shotmap-duo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    background: var(--surface);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.shotmap-duo > div { flex: 1 1 360px; min-width: 300px; }
.duo-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

/* ---------- on-ice grid (reference weight on /matchup) ---------- */
.onice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: var(--space-4);
}
.onice-block {
    background: var(--bg);
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--border);
    border-left: var(--accent-bar) solid var(--team-color, var(--border-strong));
    border-radius: var(--radius);
}
.onice-block table.results { border: 0; box-shadow: none; background: transparent; }
.onice-block .table-scroll { border: 0; box-shadow: none; background: transparent; }

.team-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--team-color, var(--navy));
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: none;
}

/* ---------- game page ---------- */
.game-header {
    background: var(--surface);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
}
.game-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    font-size: 1.15rem;
    font-weight: 600;
}
.game-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.game-team { color: var(--ink-muted); }
.game-meta {
    text-align: center;
    color: var(--ink-dim);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* ---------- series picker / chips ---------- */
.series-picker-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
}
.series-picker-set legend { font-weight: 600; padding: 0 var(--space-2); }
.game-chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: var(--bg-chip);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}
.game-chip:hover { border-color: var(--ink-dim); }
.game-chip input { margin: 0; }
.game-chip:has(input:checked) {
    background: var(--bg-chip-active);
    border-color: var(--accent);
}
.game-chip:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.series-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8rem;
}
.series-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.series-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- footer ---------- */
footer {
    padding: 1.25rem 1.5rem;
    color: var(--ink-dim);
    font-size: 0.78rem;
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    text-align: center;
}
.footer-contact {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--ink);
}
.footer-contact a {
    color: var(--brand-orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 107, 33, 0.5);
}
.footer-contact a:hover { border-bottom-color: var(--brand-orange); }

/* ---------- play-index panel (inside /matchup, collapsible) ---------- */
details.play-index-wrap {
    margin-top: var(--space-6);
}
details.play-index-wrap > summary {
    cursor: pointer;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: var(--accent-bar) solid var(--navy);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 120ms;
}
details.play-index-wrap > summary::-webkit-details-marker { display: none; }
details.play-index-wrap > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--ink-muted);
    transition: transform 120ms;
    font-size: 0.85rem;
}
details.play-index-wrap[open] > summary::before { transform: rotate(90deg); }
details.play-index-wrap > summary:hover { background: var(--bg); }
details.play-index-wrap > summary .play-index-summary-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-muted);
}
.play-index-panel {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.play-index-panel h3 { margin-top: 0; }
.play-index-panel .hint { margin-top: -0.25rem; margin-bottom: 0.9rem; }
.play-index-panel form { margin-bottom: 0.75rem; }
#mp-results { margin-top: 0.75rem; }

.mp-tallies { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.mp-tallies > span { white-space: nowrap; }
.mp-tallies .hint { margin: 0; color: var(--ink-muted); }

.mp-pager {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.75rem;
}
.mp-pager button {
    height: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--ink);
}
.mp-pager button:hover { background: var(--bg-elevated); }
.mp-pager .pager-meta { color: var(--ink-muted); font-size: 0.82rem; }

/* Drill-down affordances: cells that link into the panel. */
.drill-cell { padding: 0 !important; }
.drill-link {
    display: block;
    padding: 0.5rem 0.6rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.12s ease;
}
.drill-link:hover,
.drill-link:focus {
    background: var(--accent-soft);
    text-decoration: none;
    outline: none;
}
.h2h-cell.drill-cell .drill-link:hover { background: var(--accent-soft-strong); }

/* Shot-map duo labels are anchor tags — strip default link styling. */
a.duo-label { text-decoration: none; color: var(--ink); }
a.duo-label:hover { color: var(--navy); }

/* Watch column reserves a fixed width so layout stays stable when most
   games lack a youtube_video_id. */
.watch-cell {
    width: 3.5rem;
    text-align: center;
    white-space: nowrap;
}
.watch-link {
    display: inline-block;
    color: var(--youtube-red);
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
}
.watch-link:hover { color: var(--youtube-red-strong); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .onice-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .matchup-banner h2 .banner-meta { margin-left: 0; }
    .shotmap-duo { padding: var(--space-4); gap: var(--space-4); }
}
@media (max-width: 720px) {
    .site-header-inner { gap: 1rem; padding: 0 1rem; }
    .brand-name { display: none; }
    .site-nav a { padding: 0.5rem 0.55rem; font-size: 0.85rem; }
    /* Below 720px the nav tabs start to crowd. Make the strip horizontally
       scrollable (with snap) instead of letting tabs wrap or overlap the
       active state. Single-row order is preserved; users swipe to reveal
       offscreen tabs. */
    .site-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Edge-fade so users can see there's more nav to the right and
           that the strip scrolls — without it the cut-off items at 375px
           look like they don't exist. The fade slides as the strip scrolls
           because mask-position is anchored to the scroll container. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav > a,
    .site-nav > .nav-dropdown { flex-shrink: 0; scroll-snap-align: start; }
    /* The horizontally-scrolling nav clips the absolutely-positioned
       dropdown menu (overflow-x: auto forces overflow-y to clip too), so
       on mobile we anchor the menu to the viewport instead. The JS sets
       `top` from the trigger's bounding rect when opening. */
    .nav-dropdown-menu {
        position: fixed;
        top: auto;
        right: 1rem;
        left: 1rem;
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }
    main { padding: 1rem; }
    section h3 { font-size: 1.05rem; }
    fieldset { gap: var(--space-2) var(--space-3); padding: var(--space-3); }
    select { min-width: 140px; }
    .play-index-panel { padding: var(--space-3); }
    .game-title { gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
    .game-score { font-size: 1.6rem; }
}

/* ---------- advanced filters (WOWY, period/clock, sequence primitives) ---------- */
details.advanced-filters {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    background: var(--bg);
}
details.advanced-filters > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 0.25rem 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
details.advanced-filters > summary::-webkit-details-marker { display: none; }
details.advanced-filters > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--ink-muted);
    transition: transform 120ms;
    font-size: 0.85rem;
}
details.advanced-filters[open] > summary::before { transform: rotate(90deg); }
details.advanced-filters > fieldset { margin-top: 0.5rem; }
details.advanced-filters .hint { margin: 0 0 0.5rem 0; font-size: 0.85rem; }
label.checkbox,
label.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}
label.checkbox > input,
label.checkbox-label > input { margin: 0; }
.preset-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Pressure-tagged outline ring for shot-map dots. */
.shotmap-dot.pressure-tagged {
    stroke: var(--amber);
    stroke-width: 1.4;
}

/* Documentation pages. */
.doc-page { max-width: 760px; }
.doc-page h2 { margin-top: 1.5rem; }
.doc-page .caveats {
    border-left: var(--accent-bar) solid var(--amber);
    background: var(--amber-soft);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-page code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* ============================================================
   Glossary hover-terms + glossary page
   ============================================================ */

/* Inline prose term: subtle dotted underline marks it as hoverable and it
   links to the matching glossary anchor. */
.gloss-term {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-muted);
    cursor: help;
}
.gloss-term:hover,
.gloss-term:focus { text-decoration-color: var(--accent); }

/* Table header carrying a definition. Keeps existing header behavior
   (sorting clicks etc.) and adds the dotted-underline affordance + help
   cursor on the label text. */
.gloss-th { cursor: help; }
.gloss-th,
.gloss-label {
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-muted);
}
.gloss-label { cursor: help; }

/* Glossary page */
.glossary-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 1rem 0 1.5rem;
}
.glossary-toc a {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--bg-chip);
    color: var(--ink);
    text-decoration: none;
}
.glossary-toc a:hover { background: var(--accent); color: #fff; }
.glossary-section { margin-top: 2rem; }
.glossary-section h2 { margin-bottom: 0.25rem; }
.glossary-cat-blurb { color: var(--ink-muted); margin: 0 0 1rem; }
.glossary-list { margin: 0; }
.glossary-item {
    padding: 0.85rem 0;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
    scroll-margin-top: 5rem; /* clear the sticky header when jumping to an anchor */
}
.glossary-item dt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.glossary-abbr { font-weight: 700; font-size: 1.05rem; }
.glossary-name { color: var(--ink-muted); font-size: 0.92rem; }
.glossary-item dd { margin: 0; }
.glossary-item dd p { margin: 0.25rem 0; }
.glossary-formula code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.88rem;
}
.glossary-seealso { font-size: 0.9rem; }
:target.glossary-item { background: var(--amber-soft); border-radius: var(--radius-sm); }

/* ============================================================
   Splash page — PWHL-themed home redesign
   ============================================================ */

/* ---------- Hero ---------- */
.splash-hero {
    position: relative;
    color: var(--brand-ice);
    background: var(--surface-hero);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-hero);
}
.splash-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--surface-hero-overlay);
    pointer-events: none;
}
.splash-hero-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.25rem;
}
.splash-hero-eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-sm);
    color: var(--brand-orange);
    font-weight: 600;
}
.splash-hero-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
}
.splash-hero-sub {
    margin: 0;
    max-width: 64ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(247, 250, 252, 0.85);
}
.splash-hero-sub a {
    color: var(--brand-orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 107, 33, 0.5);
}
.splash-hero-sub a:hover { border-bottom-color: var(--brand-orange); }

.splash-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.splash-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(247, 250, 252, 0.7);
    font-variant-numeric: tabular-nums;
}
.splash-hero-meta strong { color: var(--brand-ice); font-weight: 600; }

.splash-hero-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
}
.splash-hero-toggle-label {
    color: rgba(247, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-xs);
    padding-left: 0.4rem;
}
.splash-hero-toggle-opt {
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    color: rgba(247, 250, 252, 0.7);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.splash-hero-toggle-opt:hover { color: var(--brand-ice); }
.splash-hero-toggle-opt.is-active {
    background: var(--brand-orange);
    color: #fff;
    font-weight: 600;
}

/* ---------- Daily Standouts (NHL-Edge-style top-of-page callout) ----------
   Full-bleed sunken band so the section reads as its own zone between
   the navy hero above and the white splash grid below. The inner
   container caps width at 1280px to align with the rest of the page. */
.daily-standouts {
    background: var(--surface-sunken);
    padding: 2rem 0 2.5rem;
    margin: 0 0 2rem;
    border-top: 1px solid var(--line-06);
    border-bottom: 1px solid var(--line-06);
}
.daily-standouts-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.daily-standouts-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.daily-standouts-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0;
}
.daily-standouts-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0;
    letter-spacing: 0.01em;
}
.daily-standouts-date {
    color: var(--ink-55);
    font-weight: 500;
    font-size: 1rem;
    margin-left: 0.25rem;
}
.daily-standouts-games {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-70);
}
.daily-standouts-game a {
    color: var(--brand-navy);
    text-decoration: none;
    border-bottom: 1px dashed var(--line-20);
}
.daily-standouts-game a:hover {
    border-bottom-color: var(--brand-orange);
}
.daily-standouts-game-sep {
    color: var(--ink-30);
}

/* Season Highlights section header — paired with daily-standouts above so
   the user reads a clear "daily vs season" split. Lives on the regular
   page background (no sunken band) for direct contrast with the section
   above. */
.splash-season {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.splash-season-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}
.splash-season-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0;
}

/* Compact highlights banner: small heading + Season toggle on one row,
   sitting on the light page background above the cards (replaces the old
   "Season Highlights" plain heading and the toggle that used to live in
   the navy hero). */
.splash-season-head--banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Light-background variant of the navy hero's pill toggle, for use on the
   compact banner (which is no longer inside the navy .splash-hero). */
.splash-hero-toggle--light {
    background: var(--surface-sunken);
    border-color: var(--line-12);
}
.splash-hero-toggle--light .splash-hero-toggle-label {
    color: var(--ink-55);
}
.splash-hero-toggle--light .splash-hero-toggle-opt {
    color: var(--ink-70);
}
.splash-hero-toggle--light .splash-hero-toggle-opt:hover {
    color: var(--brand-navy);
}
.splash-hero-toggle--light .splash-hero-toggle-opt.is-active {
    background: var(--brand-orange);
    color: #fff;
}
:root[data-theme="dark"] .splash-hero-toggle--light {
    border-color: rgba(255, 255, 255, 0.14);
}
:root[data-theme="dark"] .splash-hero-toggle--light .splash-hero-toggle-label {
    color: rgba(232, 236, 242, 0.55);
}
:root[data-theme="dark"] .splash-hero-toggle--light .splash-hero-toggle-opt {
    color: rgba(232, 236, 242, 0.7);
}
:root[data-theme="dark"] .splash-hero-toggle--light .splash-hero-toggle-opt:hover {
    color: var(--ink);
}

/* Three side-by-side winner cards. */
.daily-standouts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

/* Goalies-page hero row: 6 season-leader cards, slightly narrower than
   daily-standouts so all six fit on a typical wide viewport but still wrap
   gracefully on tablet / phone. Reuses `.daily-standout-card` for the cards
   themselves. */
.goalie-callouts,
.skater-callouts {
    margin: 1rem 0 1.5rem;
}
.goalie-callouts-head,
.skater-callouts-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
.goalie-callouts-row,
.skater-callouts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
/* Skaters callouts row override — only 4 cards, so we want either all-4-in-a-
   row (desktop) or 1-per-row (tablet), never the awkward "2 narrow columns"
   the auto-fit minmax(220px) lands on between 480px and 720px wide. Cards
   capped + container centered so a stretched 1-up doesn't look weird. */
@media (max-width: 980px) {
    .skater-callouts-row {
        grid-template-columns: minmax(0, 480px);
        justify-content: center;
    }
}
/* Responsive presentation swap: phone widths get the rotating ticker; tablet
   and desktop get the static cards row. Both are rendered server-side so
   there's no FOUC, just a CSS display toggle. */
.skater-callouts .skater-ticker { display: none; }
@media (max-width: 600px) {
    .skater-callouts .skater-callouts-row { display: none; }
    .skater-callouts .skater-ticker { display: block; }
}

/* Wide stat tables overflow narrow viewports. Containing the horizontal
   scroll inside the htmx target divs keeps the rest of the page (callouts,
   filters, ticker) at the natural viewport width instead of getting pushed
   sideways by the table's intrinsic column widths. */
#lb-results,
#g-results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Anchor the layout so the filter controls above don't jump when the
       HTMX row swap replaces the "Loading…" placeholder. */
    min-height: 320px;
}
/* Hero row: HD + PK side by side, each wide enough for the rink SVG. */
.goalie-callouts-row--large {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    margin-bottom: 1rem;
}
/* Large cards lay the headline + player blurb in the left column and the
   rink SVG in the right — drops card height roughly in half vs stacked.
   Named grid areas keep the rink as a single right-column block spanning
   all three left-column rows. At narrow widths the grid collapses to a
   single column (see media query below). */
.goalie-callout-large .daily-standout-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
        "photo      rink"
        "headline   rink"
        "supporting rink";
    column-gap: 1.25rem;
    row-gap: 0.6rem;
    align-items: center;
    text-align: center;
}
.goalie-callout-large .daily-standout-photo      { grid-area: photo; }
.goalie-callout-large .daily-standout-headline   { grid-area: headline; }
.goalie-callout-large .daily-standout-supporting { grid-area: supporting; }
.goalie-callout-large .goalie-callout-rink {
    grid-area: rink;
    margin: 0;
    padding: 0;
    background: transparent;
}
.goalie-callout-large .goalie-callout-rink svg.shotmap {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: #ffffff;
}
.goalie-callout-rink-caption {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    margin-top: 0.25rem;
    text-align: center;
}
/* Hero-stat + photo upsize, scoped to large cards only — the stat needs to
   carry equal visual weight to the rink it sits beside. */
.goalie-callout-large .daily-standout-value {
    font-size: 4rem;
    line-height: 1;
}
/* Specificity needs to beat .player-blurb--hero .player-photo which is
   declared later in this stylesheet. */
.goalie-callout-large .player-blurb--hero .player-photo,
.goalie-callout-large .player-blurb .player-photo {
    width: 120px;
    height: 120px;
}
@media (max-width: 720px) {
    .goalie-callout-large .daily-standout-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "headline"
            "supporting"
            "rink";
    }
}
.daily-standout-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.daily-standout-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-pop);
}
/* Team-color band naming the category — the section's spine, so it
   gets the top of every card instead of the muted pill it used to
   live in at the bottom. */
.daily-standout-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    padding: 0.45rem 0.75rem;
}
.daily-standout-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1rem 1.2rem;
    text-align: center;
}
.daily-standout-card .player-blurb {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.daily-standout-card .player-blurb-caption {
    align-items: center;
    text-align: center;
}
.daily-standout-card .player-meta {
    justify-content: center;
}
.daily-standout-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1;
}
.daily-standout-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    color: var(--brand-navy);
    letter-spacing: -0.01em;
    line-height: 1;
}
.daily-standout-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--team-color);
    margin-top: 0.15rem;
}
.daily-standout-supporting {
    font-size: 0.92rem;
    color: var(--ink-70);
    line-height: 1.4;
    margin: 0;
    max-width: 28ch;
}

/* Rotating ticker beneath the three winner cards. The static top
   border is gone — each slide carries its own team-colored solid band
   that reaches the edges of the rounded card and matches the band on
   the small standout cards above. */
.daily-ticker {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.daily-ticker-stage {
    position: relative;
    padding: 0 1.5rem 1rem;
}
.daily-ticker-slide {
    display: none;
    animation: dailyTickerFade 0.4s ease;
}
.daily-ticker-slide.is-active {
    display: block;
}
@keyframes dailyTickerFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
/* Negative horizontal margins pull the band out of the stage's side
   padding so it spans the full width of the rounded ticker frame.
   Matches `.daily-standout-band` styling above. */
.daily-ticker-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    padding: 0.55rem 0.75rem;
    margin: 0 -1.5rem 1.25rem;
}
.daily-ticker-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
}
.daily-ticker-player-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.daily-ticker-player {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Hero photo override: bigger than the small-card hero variant, with a
   thicker team-color ring so the player carries the slide. */
.daily-ticker-player .player-blurb {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
/* Specificity needs to beat `.player-blurb--hero .player-photo`, which
   sets 84px — the ticker hero photo wants to land at 130px so the
   player carries the slide. */
.daily-ticker-player .player-blurb--hero .player-photo {
    width: 130px;
    height: 130px;
}
.daily-ticker-player .player-blurb-caption {
    align-items: flex-start;
    text-align: left;
}
.daily-ticker-player .player-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    line-height: 1.05;
}
.daily-ticker-sub {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-65);
    line-height: 1.4;
}
.daily-ticker-headline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1;
    padding: 0.75rem 0;
    border-top: 1px solid var(--line-08);
}
.daily-ticker-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    color: var(--brand-navy);
    letter-spacing: -0.02em;
    line-height: 1;
}
.daily-ticker-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1rem;
    font-weight: 700;
    color: var(--team-color);
    margin-top: 0.2rem;
}
.daily-ticker-supporting {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink-75);
    line-height: 1.45;
}
.daily-ticker-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    margin: 0;
}
.daily-ticker-stat {
    background: var(--surface-sunken);
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.daily-ticker-stat dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ink-55);
}
.daily-ticker-stat dd {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.05;
}
.daily-ticker-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daily-ticker-videos-label {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--ink-60);
}
.daily-ticker-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.daily-ticker-video-item .play-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.daily-ticker-video-fallback {
    background: var(--surface-sunken);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    color: var(--ink-60);
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.daily-ticker-video-fallback .muted {
    color: var(--ink-45);
}
.daily-ticker-cta {
    align-self: flex-start;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-navy);
    text-decoration: none;
    background: var(--team-color-soft);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.daily-ticker-cta:hover {
    background: var(--team-color);
    color: var(--team-color-contrast);
}
.daily-ticker-shotmap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.daily-ticker-shotmap-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-65);
}
.daily-ticker-shotmap .shotmap {
    width: 100%;
    height: auto;
}
/* Stack legend below the rink — the ticker right column isn't wide
   enough to host the legend beside the SVG without truncation. */
.daily-ticker-shotmap .shotmap-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.daily-ticker-shotmap .shotmap-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--ink-70);
}
.daily-ticker-shotmap .shotmap-legend .hint {
    flex-basis: 100%;
}

/* Slide nav dots — labeled tabs for clarity. */
.daily-ticker-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem 1rem;
    border-top: 1px solid var(--line-08);
    background: var(--surface-sunken);
}
.daily-ticker-dot {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-60);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 36px;
}
.daily-ticker-dot:hover {
    color: var(--brand-navy);
    border-color: var(--line-15);
}
.daily-ticker-dot.is-active {
    background: var(--brand-navy);
    color: var(--brand-ice);
    border-color: var(--brand-navy);
}

/* What's New ticker — rotating single-frame strip on the home page.
   Reuses the daily-standouts band wrapper; these rules only style the
   rotating card + its dot controls. */
/* Expansion roster-moves ticker (home page). Rotating one-slide strip:
   player photo + move badge + origin→destination. Markup/JS mirror the
   former what's-new ticker; the dot controls reuse the same pattern. */
.exp-ticker {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.exp-ticker-stage {
    position: relative;
}
.exp-ticker-slide {
    display: none;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
}
.exp-ticker-slide.is-active {
    display: flex;
}
.exp-ticker-photo {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--line-08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.exp-ticker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exp-ticker-photo--jersey img,
.exp-ticker-photo--logo img {
    object-fit: contain;
    padding: 8px;
}
.exp-ticker-photo-fallback {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink-55);
}
.exp-ticker-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.exp-ticker-kind {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    flex-wrap: wrap;
}
.exp-ticker-badge {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-orange);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.55rem;
}
.exp-ticker-date {
    font-size: 0.8rem;
    color: var(--ink-55);
}
.exp-ticker-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
    color: var(--brand-navy);
}
.exp-ticker-route {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: var(--ink-78);
}
.exp-ticker-pos {
    font-size: 0.82rem;
    color: var(--ink-55);
}
.exp-ticker-team {
    font-weight: 700;
    color: var(--brand-navy);
}
.exp-ticker-team--to {
    color: var(--brand-orange);
}
.exp-ticker-arrow {
    color: var(--ink-55);
}
.exp-ticker-note {
    margin: 0.2rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-78);
    max-width: 60ch;
}
.exp-ticker-cta {
    align-self: flex-start;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-navy);
    text-decoration: none;
    border-bottom: 2px solid var(--brand-orange);
}
.exp-ticker-cta:hover {
    color: var(--brand-orange);
}
.exp-ticker-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem 1rem;
    border-top: 1px solid var(--line-08);
    background: var(--surface-sunken);
}
.exp-ticker-dot {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 36px;
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exp-ticker-dot:hover {
    color: var(--ink);
    border-color: var(--border-strong);
}
.exp-ticker-dot.is-active {
    background: var(--brand-navy);
    color: var(--brand-ice);
    border-color: var(--brand-navy);
}

/* Blog previews (home page): up to three recent posts, each with a small
   live glimpse of its signature table. */
.blog-previews {
    max-width: 1280px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
}
.blog-previews-head {
    margin-bottom: 1rem;
}
.blog-previews-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0 0 0.15rem;
}
.blog-previews-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-navy);
}
/* Shared two-column feature layout: the visual (a table or a big stat)
   sits on the left, the title + description + CTA on the right. Used by the
   single-item blog preview and the weekly spotlight; stacks on narrow
   screens. */
.feature-card {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.feature-visual {
    flex: 0 0 44%;
    max-width: 44%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface-sunken);
    border: 1px solid var(--line-08);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.feature-body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}
@media (max-width: 720px) {
    .feature-card { flex-direction: column; }
    .feature-visual { flex-basis: auto; max-width: none; }
}
.blog-preview-date {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-55);
}
.blog-preview-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.blog-preview-title a {
    color: var(--brand-navy);
    text-decoration: none;
}
.blog-preview-title a:hover {
    color: var(--brand-orange);
}
.blog-preview-summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-78);
}
.blog-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.blog-preview-table caption {
    caption-side: top;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-55);
    padding-bottom: 0.35rem;
}
.blog-preview-table th,
.blog-preview-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--line-08);
    text-align: left;
}
.blog-preview-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-55);
    font-weight: 700;
}
.blog-preview-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.blog-preview-table tbody tr:last-child td {
    border-bottom: none;
}
.blog-preview-cta {
    align-self: flex-start;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-navy);
    text-decoration: none;
    border-bottom: 2px solid var(--brand-orange);
}
.blog-preview-cta:hover {
    color: var(--brand-orange);
}

/* Weekly data spotlight (home page): computed stats that deep-link into the
   play-index / matchup tools. */
.spotlights {
    max-width: 1280px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
}
.spotlights-head {
    margin-bottom: 1rem;
}
.spotlights-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0 0 0.15rem;
}
.spotlights-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--brand-navy);
}
/* Spotlight reuses the shared .feature-card with a team-color left accent;
   its "visual" is a large computed stat instead of a table. */
.spotlight-feature {
    border-left: 4px solid var(--team-color, var(--brand-navy));
}
.spotlight-feature .feature-visual {
    align-items: flex-start;
    gap: 0.4rem;
}
.spotlight-feature .spotlight-value {
    font-size: 2.1rem;
}
.spotlight-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0;
}
.spotlight-headline {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--brand-navy);
}
.spotlight-value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.2rem 0 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
}
.spotlight-team {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--team-color, var(--brand-navy));
    background: var(--team-color-soft, var(--surface-sunken));
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.55rem;
}
.spotlight-supporting {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-78);
}
.spotlight-blurb {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink-55);
}
.spotlight-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-navy);
    text-decoration: none;
    border-bottom: 2px solid var(--brand-orange);
    padding-bottom: 1px;
}
.spotlight-cta:hover {
    color: var(--brand-orange);
}

/* Skater ticker — rotating single-frame variant for the Skaters page
   callouts. Simpler than the daily ticker since each slide only carries
   photo / name / big stat / supporting / CTA. Container caps at 720px
   centered so it doesn't stretch awkwardly on wide screens. */
.skater-ticker {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
}
.skater-ticker-stage {
    position: relative;
    padding: 0 1.5rem 1.25rem;
}
.skater-ticker-slide {
    display: none;
    animation: dailyTickerFade 0.4s ease;
}
.skater-ticker-slide.is-active { display: block; }
.skater-ticker-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    padding: 0.55rem 0.75rem;
    margin: 0 -1.5rem 1.25rem;
}
.skater-ticker-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}
.skater-ticker-player .player-blurb {
    grid-template-columns: auto auto;
    justify-content: center;
}
.skater-ticker-headline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
}
.skater-ticker-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-navy);
}
.skater-ticker-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
}
.skater-ticker-supporting {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.92rem;
    max-width: 44ch;
}
.skater-ticker-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--brand-navy);
    color: var(--brand-ice);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.15s ease;
}
.skater-ticker-cta:hover { opacity: 0.85; }
.skater-ticker-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1.25rem 1rem;
}
.skater-ticker-dot {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e3e6ec);
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.skater-ticker-dot:hover {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.skater-ticker-dot.is-active {
    background: var(--brand-navy);
    color: var(--brand-ice);
    border-color: var(--brand-navy);
}
@media (max-width: 720px) {
    .skater-ticker-value { font-size: 3rem; }
}

@media (max-width: 820px) {
    .daily-ticker-body {
        grid-template-columns: 1fr;
    }
    .daily-ticker-value {
        font-size: 3.5rem;
    }
}
@media (max-width: 720px) {
    .daily-standout-value {
        font-size: 2.5rem;
    }
}

/* ---------- Card grid (hero row + secondary grid) ---------- */
.splash-grid {
    display: grid;
    gap: 1.25rem;
    padding: 0 1.25rem 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}
.splash-grid--hero {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    margin-bottom: 1.5rem;
}
.splash-grid--secondary {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ---------- Card ---------- */
.splash-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border-top: 4px solid var(--team-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.splash-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-pop);
}

.splash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem 0.85rem;
    background: var(--team-color-soft);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.splash-card-head-text { min-width: 0; }
.splash-card-title {
    margin: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: var(--fs-h2);
    color: var(--brand-navy);
    line-height: var(--lh-snug);
}
.splash-card-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
    line-height: var(--lh-snug);
}
.splash-card-team-badge {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--team-color);
    color: var(--team-color-contrast);
    text-transform: uppercase;
}
.splash-card-empty {
    padding: 1.25rem 1.1rem;
    color: var(--ink-muted, #5b6472);
    font-style: italic;
}

.splash-card-foot {
    margin-top: auto;
    padding: 0.75rem 1.1rem 1rem;
    border-top: 1px solid var(--border, #e3e6ec);
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: flex-end;
}
.splash-card-cta {
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--team-color);
    transition: opacity 0.15s ease;
}
.splash-card-cta:hover { opacity: 0.7; text-decoration: underline; }
.splash-card-cta--secondary {
    color: var(--muted, #6b7280);
    font-weight: 500;
}

/* ---------- Entries list ---------- */
.splash-entries {
    list-style: none;
    margin: 0;
    padding: 0.6rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.splash-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.7rem 0.6rem 0.7rem 0.5rem;
    border-radius: 10px;
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.04));
    border-left: 3px solid var(--entry-team-color, var(--team-color));
    transition: background 0.15s ease;
}
.splash-entry:hover {
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.07));
    filter: brightness(0.98);
}
.splash-entry--rank-1 {
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.06));
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.splash-entry-rank-pill {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--entry-team-color, var(--team-color));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.2);
}
.splash-entry--rank-1 .splash-entry-rank-pill {
    width: 2.4rem; height: 2.4rem;
    font-size: 1.1rem;
}

.splash-entry-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.splash-entry-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}
.splash-entry-primary {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}
.splash-entry-secondary {
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
}

.splash-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
}
.splash-entry-meta-clock { font-variant-numeric: tabular-nums; }
.splash-entry-game {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.splash-entry-game:hover { color: var(--brand-navy); }
.splash-entry-meta .watch-link {
    color: var(--youtube-red, #cc0000);
    text-decoration: none;
    font-weight: 600;
}
.splash-entry-meta .watch-link:hover { text-decoration: underline; }

.splash-entry-cta {
    align-self: center;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-dim, #8a93a1);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.splash-entry-cta:hover {
    background: var(--entry-team-color, var(--team-color));
    color: #fff;
}

/* ---------- Player blurb ---------- */
.player-blurb {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: center;
    margin: 0;
}
.player-blurb .player-photo {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--team-color);
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
    flex-shrink: 0;
}
.player-blurb .player-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.player-blurb--logo .player-photo,
.player-blurb--jersey .player-photo {
    background: #fff;
}
.player-blurb--logo .player-photo img,
.player-blurb--jersey .player-photo img {
    object-fit: contain;
    padding: 6px;
    background: #fff;
}
.player-blurb .player-photo-fallback {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--team-color-contrast);
    letter-spacing: 0.04em;
}
.player-blurb-caption {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.player-blurb .player-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: var(--lh-snug);
    color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.player-blurb .player-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
}
.player-blurb .player-meta-item { font-variant-numeric: tabular-nums; }
.player-blurb .team-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.player-blurb--hero {
    gap: 1rem;
}
.player-blurb--hero .player-photo {
    width: 84px; height: 84px;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--team-color);
}
.player-blurb--hero .player-photo-fallback { font-size: 1.5rem; }
.player-blurb--hero .player-name { font-size: 1.4rem; }
.player-blurb--hero .player-meta { font-size: var(--fs-sm); }

/* ---------- Duo blurb: overlapped venn-style headshots ---------- */
.player-blurb--duo .player-duo-photos {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Two 48px circles with ~⅓ overlap — total visible width is 48 + 32 = 80px. */
    width: 80px;
    height: 48px;
    flex-shrink: 0;
}
.player-blurb--duo .player-photo--duo {
    position: absolute;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
}
.player-blurb--duo .player-photo--duo-a { left: 0; z-index: 1; }
.player-blurb--duo .player-photo--duo-b { left: 32px; z-index: 2; }
.player-blurb--duo .player-photo--duo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Single team-logo fallback when either headshot is missing. */
.player-blurb--duo-logo .player-duo-photos {
    width: 48px;
    justify-content: center;
}
.player-blurb--duo .player-photo--duo-fallback {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
    display: grid;
    place-items: center;
}
.player-blurb--duo .player-photo--duo-fallback img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    background: #fff;
    display: block;
}

/* ---------- Video thumbnail ---------- */
.play-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-top: 0.25rem;
}
.play-thumb:hover {
    transform: scale(1.015);
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color)),
                0 8px 22px rgba(0, 0, 0, 0.25);
}
.play-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.18s ease;
}
.play-thumb:hover img { filter: brightness(0.85); }
.play-thumb-overlay {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #fff;
}
.play-thumb-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.85);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s ease, background 0.18s ease;
}
.play-thumb:hover .play-thumb-icon {
    transform: scale(1.08);
    background: rgba(255, 0, 0, 1);
}
.play-thumb-stamp {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-pill);
}
.play-thumb-warn {
    margin-left: 0.3rem;
    font-weight: 500;
    opacity: 0.85;
}

/* ---------- Video embed (iframe) ---------- */
.play-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color));
    margin-top: 0.25rem;
}
.play-embed iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.play-embed-stamp {
    position: absolute;
    bottom: 0.5rem; left: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--radius-pill);
    pointer-events: none;
}

/* ---------- Hero card variant ---------- */
.splash-card--hero .splash-card-title { font-size: var(--fs-h1); }
.splash-card--hero .splash-card-head {
    padding: 1.25rem 1.4rem 1rem;
}
.splash-card--hero .splash-entries { padding: 0.8rem 1.4rem; }
.splash-card--hero .splash-entry--rank-1 {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 1rem;
    gap: 0.6rem 1rem;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-rank-pill {
    grid-row: 1; grid-column: 1;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-body {
    grid-row: 1; grid-column: 2;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-cta {
    grid-row: 1; grid-column: 2;
    justify-self: end;
    align-self: start;
}

/* ---------- Possession chain (kept, restyled) ---------- */
.splash-chain {
    margin-top: 0.25rem;
    font-size: var(--fs-xs);
}
.splash-chain summary {
    cursor: pointer;
    color: var(--ink-muted, #5b6472);
    font-weight: 500;
}
.splash-chain summary:hover { color: var(--brand-navy); }
.splash-chain-steps {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0 0 0 0.65rem;
    border-left: 2px solid var(--entry-team-color, var(--team-color));
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.splash-chain-steps li {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.splash-chain-steps li.is-goal {
    font-weight: 600;
    color: var(--brand-navy);
}
.splash-chain-steps .step-clock { color: var(--ink-dim, #8a93a1); min-width: 5em; }
.splash-chain-steps .step-zone { color: var(--ink-dim, #8a93a1); font-style: italic; }

/* ---------- Accessibility helper ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .splash-hero-inner { padding: 2rem 1rem 1.5rem; }
    .splash-grid--hero,
    .splash-grid--secondary { grid-template-columns: 1fr; }
    .splash-hero-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .splash-card--hero .splash-entry--rank-1 {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
    }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-rank-pill { grid-row: 1; grid-column: 1; }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-body { grid-row: 1; grid-column: 2; }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-cta { grid-row: 1; grid-column: 3; }
}

/* =================================================================
   Matchup page revamp — splash-aligned hero banner, stat-card grid,
   collapsible details. Layered on top of the legacy `.matchup-banner`,
   `.record-card`, `.onice-block`, `.h2h-matrix` rules above (kept for
   backward compat with any pages still using them).
   ================================================================= */

/* Sticky picker bar at the top — pill row, more compact than the
   legacy <fieldset> form. */
.matchup-picker-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface-hero, var(--brand-navy));
    color: #fff;
    padding: 0.85rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.matchup-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto;
}
.matchup-picker fieldset { all: unset; display: contents; }  /* kill legacy form styling if reused */
.matchup-picker-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.matchup-picker-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.matchup-picker select {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.8rem;
    font-size: var(--fs-sm);
    font-family: inherit;
    min-width: 140px;
}
.matchup-picker select option { color: #0d1620; }
.matchup-picker-vs {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-orange, #F26B21);
    font-size: 1.2rem;
    padding-bottom: 0.4rem;
}
.matchup-picker-go {
    align-self: stretch;
    background: var(--brand-orange, #F26B21);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.matchup-picker-go:hover { filter: brightness(1.1); }

/* Empty-state when no teams are selected. */
.matchup-empty {
    max-width: 760px;
    margin: 4rem auto;
    text-align: center;
    color: var(--ink-muted, #5b6472);
}
.matchup-empty h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Hero banner: two team-colored cards flanking a center separator. */
.matchup-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
    align-items: stretch;
}
.matchup-hero-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-card, 14px);
    border-top: 5px solid var(--team-color);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem 1rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.matchup-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--team-color-soft);
    z-index: 0;
}
.matchup-hero-card > * { position: relative; z-index: 1; }

.matchup-hero-card--b { text-align: right; }
.matchup-hero-card--b .matchup-hero-team,
.matchup-hero-card--b .matchup-hero-record {
    align-items: flex-end;
}

.matchup-hero-logo {
    grid-row: 1 / span 2;
    width: 72px; height: 72px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 5px var(--team-color);
    overflow: hidden;
}
.matchup-hero-logo img {
    width: 80%; height: 80%;
    object-fit: contain;
}
.matchup-hero-card--b .matchup-hero-logo {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: 2;
}
.matchup-hero-card--b > .matchup-hero-team,
.matchup-hero-card--b > .matchup-hero-record {
    grid-column: 1;
    order: 1;
}

.matchup-hero-team {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.matchup-hero-code {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--team-color);
    letter-spacing: 0.04em;
}
.matchup-hero-name {
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
    font-weight: 500;
    margin-top: 0.2rem;
}

.matchup-hero-record {
    display: flex;
    flex-direction: column;
}
.matchup-hero-record-big {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--brand-navy, #0A2540);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.matchup-hero-record-meta {
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
    margin-top: 0.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.matchup-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
    min-width: 130px;
}
.matchup-hero-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-orange, #F26B21);
    margin-bottom: 0.4rem;
}
.matchup-hero-vs {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--brand-navy, #0A2540);
    line-height: 1;
}
.matchup-hero-meeting {
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
    margin-top: 0.4rem;
}

/* Section titles + sub for major matchup sections. */
.matchup-section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.4rem;
}
.matchup-section-sub {
    margin: 0 0 1rem;
    color: var(--ink-muted, #5b6472);
    font-size: var(--fs-sm);
}

.matchup-cards-section,
.matchup-series,
.matchup-shotmaps,
.matchup-evolution {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}
.matchup-cards-empty {
    background: var(--surface-sunken, #f4f6fa);
    border-radius: var(--radius-card, 14px);
    padding: 1rem 1.25rem;
    color: var(--ink-muted, #5b6472);
    font-size: var(--fs-sm);
}

/* Series table: row hover lift, team-chip-aware. */
.matchup-series-table tbody tr {
    transition: background 0.15s ease;
}
.matchup-series-table tbody tr:hover {
    background: var(--surface-sunken, #f4f6fa);
}

/* Collapsible details block for the legacy analytics tables. */
.matchup-details {
    max-width: 1280px;
    margin: 2rem auto 1rem;
    padding: 0 1.25rem;
}
.matchup-details-summary {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-navy, #0A2540);
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    background: var(--surface-sunken, #f4f6fa);
    border-radius: var(--radius-card, 14px);
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.matchup-details-summary::-webkit-details-marker { display: none; }
.matchup-details-summary::before {
    content: "▶";
    font-size: 0.7rem;
    color: var(--brand-orange, #F26B21);
    transition: transform 0.18s ease;
}
.matchup-details[open] .matchup-details-summary::before {
    transform: rotate(90deg);
}
.matchup-details-hint {
    font-family: var(--font-body, inherit);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-muted, #5b6472);
}
.matchup-details-block {
    margin-top: 1.5rem;
}
.matchup-subsection-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.7rem;
}

/* Mobile: stack the matchup hero cards vertically. */
@media (max-width: 720px) {
    .matchup-hero {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .matchup-hero-center { padding: 0.5rem 0; }
    .matchup-picker {
        flex-direction: column;
        align-items: stretch;
    }
    .matchup-picker-vs { display: none; }
    .matchup-picker select { min-width: 0; width: 100%; }
}

/* =========================================================================
 * Dark theme overrides
 * Targeted swaps for the most visible hardcoded #fff surfaces that don't
 * already key off --surface. Scope guard: only colors flip; layout, sizes,
 * and component structure are unchanged. Dark mode polish (custom hover
 * states, shotmap palette tuning, etc.) is intentionally a follow-up.
 * ========================================================================= */
:root[data-theme="dark"] body { color: var(--ink); }

:root[data-theme="dark"] select {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] #csv-link {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] #csv-link:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
}
:root[data-theme="dark"] .view-toggle {
    background: var(--surface);
    border-color: var(--border);
}
:root[data-theme="dark"] .view-btn {
    background: var(--surface);
    color: var(--ink);
    border-right-color: var(--border);
}
:root[data-theme="dark"] .view-btn:hover { background: var(--surface-raised); }
:root[data-theme="dark"] .view-btn.active { background: var(--accent); color: #fff; }

/* Tables and cards rely mostly on tokenized surfaces, but a few rules use
 * literal whites. These keep table rows legible on a dark page. */
:root[data-theme="dark"] table { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] tbody td { border-color: var(--border); }

/* Player photo fallback wrappers stay light — the underlying jersey/logo
 * PNGs are designed for white backgrounds. Leave .player-photo--logo /
 * --jersey backgrounds alone; only adjust the outer card chrome. */

/* Text that uses var(--brand-navy) as a *foreground* color disappears on a
 * navy background. The brand color itself stays the same (it's still used
 * as a surface in the site header and the hero gradient) — these rules
 * only flip the *text* uses to --ink so headings/names stay legible. */
:root[data-theme="dark"] .splash-card-title,
:root[data-theme="dark"] .player-blurb .player-name,
:root[data-theme="dark"] .daily-standouts-title,
:root[data-theme="dark"] .daily-standouts-game a,
:root[data-theme="dark"] .exp-ticker-name,
:root[data-theme="dark"] .exp-ticker-team,
:root[data-theme="dark"] .exp-ticker-cta,
:root[data-theme="dark"] .exp-ticker-dot:hover,
:root[data-theme="dark"] .blog-previews-title,
:root[data-theme="dark"] .blog-preview-title a,
:root[data-theme="dark"] .blog-preview-cta,
:root[data-theme="dark"] .spotlights-title,
:root[data-theme="dark"] .spotlight-headline,
:root[data-theme="dark"] .spotlight-value,
:root[data-theme="dark"] .spotlight-cta,
:root[data-theme="dark"] .splash-entry-primary,
:root[data-theme="dark"] .splash-entry-game,
:root[data-theme="dark"] .splash-entry-game:hover,
:root[data-theme="dark"] .splash-chain summary,
:root[data-theme="dark"] .splash-chain summary:hover,
:root[data-theme="dark"] .skater-callouts-head h2,
:root[data-theme="dark"] .skater-ticker-dot:hover,
:root[data-theme="dark"] .daily-ticker-dot:hover,
:root[data-theme="dark"] table.results.leaderboard th.sort-active,
:root[data-theme="dark"] a.duo-label:hover,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
    color: var(--ink);
}

/* Hero band gradient is dark by design — let its eyebrow and accents
 * remain branded; only the body copy needs a bump on dark. */
:root[data-theme="dark"] .splash-hero-sub { color: rgba(255, 255, 255, 0.82); }
:root[data-theme="dark"] .splash-card-subtitle,
:root[data-theme="dark"] .splash-entry-secondary,
:root[data-theme="dark"] .splash-entry-meta,
:root[data-theme="dark"] .result-meta {
    color: var(--ink-muted);
}

/* Card surfaces in dark mode should sit on --surface, not white. */
:root[data-theme="dark"] .splash-card,
:root[data-theme="dark"] .daily-standout-card,
:root[data-theme="dark"] .goalie-callout-large {
    background: var(--surface);
    border-color: var(--border);
}

/* Daily standout / callout card text — the rules above set navy text on a
 * light card. In dark mode those are invisible against the dark surface,
 * so flip foreground tokens. */
:root[data-theme="dark"] .daily-standout-value,
:root[data-theme="dark"] .daily-standout-headline,
:root[data-theme="dark"] .daily-standouts-date {
    color: var(--ink);
}
:root[data-theme="dark"] .daily-standout-supporting {
    color: var(--ink-muted);
}
:root[data-theme="dark"] .exp-ticker-date,
:root[data-theme="dark"] .exp-ticker-pos,
:root[data-theme="dark"] .exp-ticker-note,
:root[data-theme="dark"] .blog-preview-date,
:root[data-theme="dark"] .blog-preview-summary,
:root[data-theme="dark"] .spotlight-supporting,
:root[data-theme="dark"] .spotlight-blurb {
    color: var(--ink-muted);
}
/* Team-color labels: when no team scope is set, --team-color falls back to
 * brand-navy which is invisible on dark. Override only the default; cards
 * with an explicit team scope still get their team-tinted label. */
:root[data-theme="dark"] .daily-standout-card:not([style*="--team-color"]) .daily-standout-label,
:root[data-theme="dark"] .splash-card:not([style*="--team-color"]) .daily-standout-label {
    color: var(--brand-orange);
}

/* Tickers (Skater + Daily) — same dark-on-dark issue as the static cards.
 * The tickers only render at narrow viewports so they were missed in the
 * first pass. Flip the navy text/label tokens to ink for legibility. */
:root[data-theme="dark"] .skater-ticker-value,
:root[data-theme="dark"] .daily-ticker-value,
:root[data-theme="dark"] .daily-ticker-stat dd {
    color: var(--ink);
}
:root[data-theme="dark"] .skater-ticker-supporting,
:root[data-theme="dark"] .daily-ticker-sub,
:root[data-theme="dark"] .daily-ticker-supporting,
:root[data-theme="dark"] .daily-ticker-stat dt,
:root[data-theme="dark"] .daily-ticker-videos-label {
    color: var(--ink-muted);
}
:root[data-theme="dark"] .daily-ticker-headline {
    border-top-color: var(--border);
}

/* =====================================================================
   Analytics blog
   Styles for /analytics/blog index, individual posts, and the embedded
   goalie comparison card used inside post prose.
   ===================================================================== */

.blog-index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.5rem;
}
.blog-index-item {
    border-left: 3px solid var(--accent, #cb1f3a);
    padding: 0.25rem 0 0.25rem 1rem;
}
.blog-index-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--ink);
}
.blog-index-title:hover { text-decoration: underline; }
.blog-index-meta {
    color: var(--ink-muted, #888);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.blog-index-summary {
    margin-top: 0.5rem;
    color: var(--ink);
}

.blog-post {
    max-width: 760px;
    margin: 0 auto;
}
.blog-post-header {
    margin-bottom: 2rem;
}
.blog-post-back {
    display: inline-block;
    color: var(--ink-muted, #888);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.blog-post-back:hover { text-decoration: underline; }
.blog-post-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.blog-post-meta {
    color: var(--ink-muted, #888);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
.blog-post-summary {
    font-size: 1.1rem;
    color: var(--ink);
    margin-top: 1rem;
    font-style: italic;
}
.blog-prose {
    margin: 1.5rem 0;
}
.blog-prose p { line-height: 1.6; }
.blog-embed-figure {
    margin: 1.5rem 0;
}

/* Goalie comparison card */
.goalie-compare {
    margin: 1.5rem 0;
}
.goalie-compare-split {
    margin-bottom: 2rem;
}
.goalie-compare-split-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}
.goalie-compare-table {
    width: 100%;
    border-collapse: collapse;
}
.goalie-compare-tile-header th { padding: 0; }
.goalie-compare-tile {
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-top: 4px solid var(--team-color, var(--accent, #cb1f3a));
    background: var(--surface, #fafafa);
}
.goalie-compare-tile-team {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--team-color, var(--accent, #cb1f3a));
}
.goalie-compare-tile-name {
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.15rem;
}
.goalie-compare-stat-row th {
    text-align: left;
    padding: 0.4rem 0.75rem;
    color: var(--ink-muted, #888);
    font-weight: 500;
    border-top: 1px solid var(--border, #eee);
}
.goalie-compare-stat {
    text-align: center;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--border, #eee);
    font-variant-numeric: tabular-nums;
}
.goalie-compare-leader {
    background: var(--accent-soft, rgba(203, 31, 58, 0.12));
    font-weight: 700;
}

@media (max-width: 720px) {
    /* On narrow screens, stack each split as one tile per row.
       Rotate to a vertical layout: tile header above its column of stats. */
    .goalie-compare-table thead { display: none; }
    .goalie-compare-table,
    .goalie-compare-table tbody,
    .goalie-compare-stat-row {
        display: block;
    }
    .goalie-compare-stat-row {
        display: grid;
        grid-template-columns: minmax(8rem, 1fr) repeat(3, 1fr);
        border-top: 1px solid var(--border, #eee);
    }
    .goalie-compare-stat-row th,
    .goalie-compare-stat-row td {
        border-top: none;
    }
}

/* Filter bar */
.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--surface, #fafafa);
    border: 1px solid var(--border, #eee);
    border-radius: 6px;
}
.blog-filter-caption {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: auto;
    align-self: center;
}
.blog-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.blog-filter-label {
    font-size: 0.8rem;
    color: var(--ink-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.blog-filter-bar select {
    padding: 0.3rem 0.5rem;
    font: inherit;
}
/* The pane visibility is driven by the `hidden` attribute — no extra CSS needed,
   but ensure animation doesn't fight the toggle. */
.blog-filter-pane[hidden] { display: none; }

/* ---- defender-of-the-year embeds ---- */
.defender-individual-table { margin-bottom: 0.5rem; }
.defender-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.defender-stat-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
}
.defender-stat-rank {
    font-size: 0.78rem;
    color: var(--ink-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.defender-rank-1 {
    color: var(--accent, #cb1f3a);
    font-weight: 700;
}

.defender-playmaker { margin: 0.5rem 0 0; }
.defender-playmaker-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.defender-playmaker-table th,
.defender-playmaker-table td {
    padding: 0.45rem 0.6rem;
    border-top: 1px solid var(--border, #eee);
    text-align: right;
}
.defender-playmaker-table thead th {
    border-top: none;
    font-weight: 500;
    color: var(--ink-muted, #888);
    font-size: 0.85rem;
    text-align: right;
}
.defender-playmaker-table thead th:first-child,
.defender-playmaker-table tbody th { text-align: left; }
.defender-playmaker-team {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink-muted, #666);
    width: 2.5rem;
}
.defender-playmaker-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--accent-soft, rgba(203, 31, 58, 0.14));
    color: var(--accent, #cb1f3a);
    border-radius: 999px;
}
.defender-playmaker-finalist th[scope="row"] { font-weight: 700; }
.defender-playmaker-bar-col { width: 38%; min-width: 12rem; }
.defender-playmaker-bar {
    position: relative;
    height: 18px;
    background: var(--surface, #f3f4f6);
    border-radius: 3px;
}
.defender-playmaker-bar-fill {
    height: 100%;
    background: var(--ink-muted, #cbd5e1);
    border-radius: 3px;
}
.defender-playmaker-bar-finalist { background: var(--accent, #cb1f3a); }
.defender-playmaker-bar-label {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--ink, #222);
    font-weight: 600;
}

.defender-blockmaps {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.defender-blockmap {
    margin: 0;
    flex: 1 1 280px;
    min-width: 260px;
    background: var(--surface, #fff);
    padding: 0.5rem 0.75rem 0.75rem;
    border: 1px solid var(--border, #eee);
    border-radius: 6px;
}
.defender-blockmap-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.defender-blockmap-count {
    font-size: 0.8rem;
    color: var(--ink-muted, #888);
    font-weight: 400;
}
.defender-blockmap-svg svg { max-width: 100%; height: auto; display: block; }

.defender-suppression {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0.5rem 0;
}
.defender-supp-card {
    background: var(--surface, #fafafa);
    border: 1px solid var(--border, #eee);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}
.defender-supp-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
}
.defender-supp-table,
.defender-pair-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}
.defender-supp-table th,
.defender-supp-table td,
.defender-pair-table th,
.defender-pair-table td {
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--border, #eee);
    text-align: right;
}
.defender-supp-table thead th,
.defender-pair-table thead th {
    border-top: none;
    font-weight: 500;
    color: var(--ink-muted, #888);
    font-size: 0.8rem;
}
.defender-supp-table thead th:first-child,
.defender-supp-table tbody th,
.defender-pair-table thead th:first-child,
.defender-pair-table tbody th { text-align: left; }
.defender-supp-team-col { text-align: center; }
.defender-supp-delta { font-weight: 600; }
.defender-supp-pos {
    color: #1f7a3a;
    background: rgba(31, 122, 58, 0.10);
}
.defender-supp-neg {
    color: #b3261e;
    background: rgba(179, 38, 30, 0.10);
}

.defender-common-opponents { overflow-x: auto; margin: 0.5rem 0; }
.defender-common-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
}
.defender-common-table th,
.defender-common-table td {
    padding: 0.35rem 0.55rem;
    border-top: 1px solid var(--border, #eee);
    text-align: right;
}
.defender-common-table thead th { border-top: none; }
.defender-common-table thead th[rowspan] {
    vertical-align: bottom;
    color: var(--ink-muted, #888);
    font-weight: 500;
    font-size: 0.8rem;
}
.defender-common-finalist-head {
    text-align: center;
    padding-bottom: 0.15rem;
    color: var(--ink, #222);
    border-bottom: 1px solid var(--border, #eee);
}
.defender-common-subhead th {
    color: var(--ink-muted, #888);
    font-weight: 500;
    font-size: 0.78rem;
    border-top: none;
}
.defender-common-table tbody th { text-align: left; font-weight: 600; }
.defender-common-table tbody td:nth-child(2) { text-align: center; }
.defender-common-na {
    text-align: center;
    color: var(--ink-dim, #aaa);
    font-style: italic;
}

.defender-snub {
    background: var(--surface, #fafafa);
    border-left: 4px solid var(--accent, #cb1f3a);
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border-radius: 0 6px 6px 0;
}
.defender-snub-title {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
}
.defender-snub p { margin: 0; line-height: 1.5; }
.defender-snub-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    table-layout: fixed;
}
.defender-snub-table thead th {
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-muted, #888);
    text-align: center;
    border-bottom: 1px solid var(--border, #eee);
    vertical-align: bottom;
}
.defender-snub-table tbody td {
    padding: 0.5rem;
    text-align: center;
    border-top: none;
}
.defender-snub-table .defender-stat-value { font-size: 1.4rem; }
.defender-snub-table .defender-snub-name {
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.5rem 0.75rem 0.5rem 0;
}

/* =====================================================================
   2026 Expansion tracker (/expansion) + homepage banner + nav link
   ===================================================================== */

/* ---- nav "Expansion" link: a small live dot to mark the marquee event ---- */
.exp-nav-link::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--brand-orange);
    vertical-align: middle;
}

/* ---- page header ---- */
.exp-header .exp-eyebrow {
    margin: 0 0 0.2rem;
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-orange);
    font-weight: 700;
}
.exp-intro { max-width: 75ch; }
/* Scoped to .exp-header so it beats the base `.analytics-page-header p` rule
   on specificity instead of with !important. */
.exp-header .exp-asof {
    margin-top: 0.4rem;
    font-size: var(--fs-xs);
    color: var(--ink-dim);
}

/* Client-rendered sections: hold vertical space before JS fills them so the
   page doesn't jump (CLS) when the roster/draft/sources HTML arrives. :empty
   stops matching the moment content is injected. */
#exp-draft-root:empty { display: block; min-height: 220px; }
#exp-rosters:empty { display: block; min-height: 480px; }

/* ---- phase tracker ---- */
.exp-now-banner {
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.exp-now-banner--active { border-left-color: var(--brand-orange); }
.exp-now-banner--upcoming { border-left-color: var(--accent); }
.exp-now-banner--done { border-left-color: var(--ink-dim); }
.exp-now-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 0.25rem;
}
.exp-now-banner--active .exp-now-eyebrow { color: var(--brand-orange); }
.exp-now-title { display: block; font-size: 1.2rem; font-weight: 700; line-height: var(--lh-snug); }
.exp-now-summary { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: var(--fs-sm); max-width: 80ch; }

/* stepper */
.exp-stepper {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}
.exp-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
}
.exp-step-num {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--fs-sm);
    background: var(--bg-elevated-strong);
    color: var(--ink-muted);
}
.exp-step-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.exp-step-name { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.exp-step-dates { font-size: var(--fs-xs); color: var(--ink-dim); }
.exp-step.is-past { opacity: 0.72; }
.exp-step.is-past .exp-step-num { background: var(--pos); color: #fff; }
.exp-step.is-active {
    border-color: var(--brand-orange);
    background: var(--brand-orange-soft);
    box-shadow: 0 0 0 1px var(--brand-orange) inset;
}
.exp-step.is-active .exp-step-num { background: var(--brand-orange); color: #fff; }
.exp-step.is-upcoming { opacity: 0.9; }
.exp-step--draft { border-style: dashed; }
.exp-step--draft .exp-step-num { background: var(--accent); color: #fff; }

/* key dates */
.exp-keydates-toggle { border-top: 1px dashed var(--border); padding-top: var(--space-3); }
.exp-keydates-toggle > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--accent);
}
.exp-keydates {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
.exp-keydate-group {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    background: var(--surface);
}
.exp-keydate-group.is-active { border-color: var(--brand-orange); }
.exp-keydate-group.is-past { opacity: 0.7; }
.exp-keydate-phase { margin: 0 0 var(--space-2) !important; font-size: var(--fs-sm) !important; }
.exp-keydate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.exp-keydate {
    display: grid;
    grid-template-columns: 1.1rem auto 1fr;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--fs-xs);
    row-gap: 0;
}
.exp-keydate-mark { color: var(--ink-dim); }
.exp-keydate.is-past .exp-keydate-mark { color: var(--pos); }
.exp-keydate-when { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-keydate-label { grid-column: 2 / -1; color: var(--ink); }
.exp-keydate-aud {
    grid-column: 2 / -1;
    color: var(--ink-dim);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.exp-keydate.is-past .exp-keydate-label { color: var(--ink-muted); }

/* ---- rosters ---- */
.exp-section-head { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.exp-section-title { margin: 0; font-size: var(--fs-h2); font-weight: 700; }
.exp-section-sub { margin: 0.2rem 0 0; color: var(--ink-muted); font-size: var(--fs-sm); }

/* ---- team filter (chip bar above the rosters) ---- */
.exp-filter { margin: 0 0 var(--space-4); }
.exp-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.exp-filter-action {
    appearance: none;
    border: 1px dashed var(--ink-dim);
    background: transparent;
    color: var(--ink-muted);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    cursor: pointer;
}
.exp-filter-action:hover { color: var(--ink); border-color: var(--ink); }
/* "All teams" is active when no individual team chips are picked. */
.exp-filter-action.is-active {
    border-style: solid;
    background: var(--bg-chip-active);
    color: var(--ink);
    border-color: var(--ink-dim);
}
.exp-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--bg);
    /* Unchecked chips dim so "included" vs "filtered out" reads clearly. */
    opacity: 0.55;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}
.exp-filter-chip:has(input:checked) {
    opacity: 1;
    background: var(--bg-chip-active);
    border-color: var(--ink-dim);
}
.exp-filter-chip input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.exp-filter-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- status-tag legend (collapsible key for the roster tags) ---- */
.exp-legend { margin: 0 0 var(--space-4); }
.exp-legend > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}
.exp-legend-grid {
    margin-top: var(--space-2);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2) var(--space-3);
}
.exp-legend-item { display: flex; align-items: baseline; gap: 0.4rem; font-size: var(--fs-xs); }
.exp-legend-item .exp-tag { flex: 0 0 auto; }
.exp-legend-desc { color: var(--ink-muted); }

.exp-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: var(--space-4);
}
.exp-team-grid--expansion { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }

.exp-team-card {
    border: 1px solid var(--border);
    border-top: 3px solid var(--team-color);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
}
.exp-team-card--expansion { background: linear-gradient(180deg, var(--team-color-soft, rgba(0,0,0,0.03)), transparent 120px), var(--surface); }
.exp-team-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-3); }
/* Collapsible summary: hide native marker, add a chevron that rotates on open. */
summary.exp-team-head { cursor: pointer; list-style: none; }
summary.exp-team-head::-webkit-details-marker { display: none; }
summary.exp-team-head::after {
    content: '▸';
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--ink-dim);
    transition: transform 0.15s ease;
}
.exp-team-card[open] > summary.exp-team-head::after { transform: rotate(90deg); }
.exp-team-badge {
    flex: 0 0 auto;
    min-width: 2.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-align: center;
}
.exp-team-headings { min-width: 0; }
.exp-team-name { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
.exp-team-note { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-dim); }
.exp-team-sub { margin: 0.1rem 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }

.exp-player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.exp-player {
    display: grid;
    grid-template-columns: 2.1rem 1fr auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}
.exp-player:first-child { border-top: none; }
.exp-player.is-actioned {
    margin: 0 -0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--team-color-soft, var(--accent-soft));
    border-radius: var(--radius-sm);
    border-top-color: transparent;
}
.exp-player.is-departed { opacity: 0.5; }
.exp-player.is-departed .exp-player-name { text-decoration: line-through; }

.exp-player-photo {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-elevated);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.exp-player-photo img { width: 100%; height: 100%; object-fit: cover; }
.exp-player-photo--jersey img, .exp-player-photo--logo img { object-fit: contain; padding: 2px; }
.exp-initials { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-muted); }

.exp-player-main { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.exp-player-name { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); }
.exp-player-pos {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink-dim);
    margin-left: 0.3rem;
    text-transform: uppercase;
}
.exp-player-jersey { font-size: var(--fs-xs); color: var(--ink-dim); margin-left: 0.2rem; }
.exp-player-contract { font-size: var(--fs-xs); color: var(--ink-muted); }
.exp-player-stats {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.exp-player-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.exp-tag {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    border: 1px solid transparent;
}
.tag-protected { background: rgba(21,128,61,0.16);  color: var(--pos);    border-color: rgba(21,128,61,0.35); }
.tag-signed    { background: var(--accent-soft);     color: var(--accent); border-color: var(--accent-soft-strong); }
.tag-resigned  { background: rgba(13,148,136,0.16);  color: var(--teal);   border-color: rgba(13,148,136,0.35); }
.tag-efo       { background: var(--amber-soft);      color: var(--amber);  border-color: rgba(245,158,11,0.4); }
.tag-fpo       { background: rgba(124,58,237,0.16);  color: var(--violet); border-color: rgba(124,58,237,0.35); }
.tag-selected  { background: var(--brand-orange-soft); color: var(--brand-orange); border-color: rgba(242,107,33,0.4); }
.tag-qualified { background: var(--bg-chip);         color: var(--ink-muted); border-color: var(--border-strong); }
.tag-retiring  { background: rgba(100,116,139,0.16); color: var(--slate);  border-color: rgba(100,116,139,0.4); }
.tag-generic   { background: var(--bg-chip);         color: var(--ink-muted); border-color: var(--border-strong); }

.exp-move { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.exp-move--from { color: var(--accent); }
.exp-move--to { color: var(--ink-dim); }
.exp-move-note { font-size: var(--fs-xs); color: var(--ink-dim); font-style: italic; }
.exp-src { font-size: 0.8rem; color: var(--ink-dim); text-decoration: none; }
.exp-src:hover { color: var(--accent); }

.exp-empty { color: var(--ink-dim); font-size: var(--fs-sm); padding: 0.5rem 0; }
.exp-departed { margin-top: var(--space-3); border-top: 1px dashed var(--border); padding-top: var(--space-2); }
.exp-departed-label {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ink-dim);
}

/* ---- sources disclosure ---- */
.exp-sources { margin-top: var(--space-6); }
.exp-sources > details > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-muted); }
.exp-sources-note { margin: var(--space-2) 0; font-size: var(--fs-sm); color: var(--ink-muted); max-width: 80ch; }
.exp-sources-list { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }
.exp-sources-list a { color: var(--accent); }

/* ---- Entry Draft board (round tabs + tables, above the rosters) ---- */
.exp-draft { margin: var(--space-6) 0; }
.exp-draft-head { margin-bottom: var(--space-3); }
.exp-draft-head a { color: var(--accent); text-decoration: none; }
.exp-draft-head a:hover { text-decoration: underline; }

.exp-draft-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--space-3); }
.exp-draft-tab {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-muted);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.exp-draft-tab:hover { color: var(--ink); }
.exp-draft-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.exp-draft-panel { display: none; }
.exp-draft-panel.is-active { display: block; }

.exp-draft-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.exp-draft-table th {
    text-align: left;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-dim);
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-strong);
}
.exp-draft-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.exp-draft-table th.exp-draft-num, .exp-draft-table td.exp-draft-num {
    width: 2.4rem; text-align: right; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.exp-draft-row.is-made .exp-draft-player { font-weight: 600; }
.exp-draft-empty { color: var(--ink-dim); }
.exp-draft-team { white-space: nowrap; font-weight: 600; }
.exp-draft-via { font-size: 0.72rem; font-weight: 400; color: var(--ink-dim); margin-left: 0.3rem; }
.exp-draft-via a { color: var(--ink-muted); }
.exp-draft-player a { color: var(--accent); text-decoration: none; }
.exp-draft-player a:hover { text-decoration: underline; }
.exp-draft-src { font-size: 0.72rem; color: var(--ink-dim); margin-left: 0.25rem; text-decoration: none; }

/* draft-picks subsection inside a team card */
.exp-draft-pick { align-items: baseline; }
.exp-draft-pick-badge {
    flex: none;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--ink-dim);
    background: var(--bg-chip);
    border-radius: var(--radius-pill);
    padding: 0.12rem 0.45rem;
    white-space: nowrap;
}

/* =================== play-style projection (how did your team change?) === */
/* Compact panel inside each team card on /expansion. */
.exp-profile { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--border); }
.exp-profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.exp-profile-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--ink-dim); }
.exp-profile-link { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.exp-profile-link:hover { text-decoration: underline; }
.exp-profile-coverage { margin: 0.3rem 0; font-size: 0.72rem; color: var(--ink-muted); }
.exp-profile-coverage--empty { font-style: italic; }
.exp-profile-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }

.exp-tag--strength { background: rgba(21,128,61,0.16); color: var(--pos); border-color: rgba(21,128,61,0.35); }
.exp-tag--weakness { background: rgba(190,18,60,0.14); color: var(--neg, #be123c); border-color: rgba(190,18,60,0.35); }
.exp-tag--limited  { background: var(--bg-chip); color: var(--ink-muted); border-color: var(--border-strong); }

/* Drill-down page. */
.exp-coverage-banner { margin: var(--space-3) 0; padding: var(--space-3); background: var(--bg-chip); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); font-size: var(--fs-sm); }
.exp-coverage-banner p { margin: 0.2rem 0; }
.exp-coverage-caveat { color: var(--ink-dim); font-size: 0.78rem; }
.exp-empty-block { margin: var(--space-4) 0; }

.exp-sw { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0; }
.exp-sw-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.exp-sw-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0.4rem 0.6rem; border-radius: var(--radius-md, 8px); border-left: 3px solid var(--border-strong); background: var(--surface); }
.exp-sw-item--strength { border-left-color: var(--pos); }
.exp-sw-item--weakness { border-left-color: var(--neg, #be123c); }
.exp-sw-label { font-weight: 600; }
.exp-sw-meta { font-size: var(--fs-sm); color: var(--ink-muted); white-space: nowrap; }
.exp-sw-z { color: var(--ink-dim); font-size: 0.72rem; }

.exp-metric-section { margin: var(--space-5) 0; }
.exp-metric-table th[title] { cursor: help; }
.exp-muted { color: var(--ink-dim); }
.exp-up { color: var(--pos); font-weight: 600; }
.exp-down { color: var(--neg, #be123c); font-weight: 600; }
.exp-zbar { display: inline-block; width: 80px; height: 8px; background: var(--bg-chip); border-radius: var(--radius-pill); overflow: hidden; vertical-align: middle; }
.exp-zbar-fill { display: block; height: 100%; }
.exp-zbar-fill--pos { background: var(--pos); }
.exp-zbar-fill--neg { background: var(--neg, #be123c); }
.exp-zval { font-size: 0.72rem; color: var(--ink-muted); margin-left: 0.4rem; }

/* --- Expansion-reshuffle blog post: combined comparison + player board --- */
/* These data-heavy sections break out of the 760px .blog-post prose column and
   centre on the page (within the 1280px <main>), so the wide tables/charts have
   room. The prose around them stays at reading width. */
.exp-compare-section, .exp-chart-section, .exp-board-section {
    margin: var(--space-5) auto;
    width: min(1180px, 94vw);
    margin-left: 50%;
    transform: translateX(-50%);
}
/* Player-board tables scroll vertically at ~20 rows; the sticky .draft-table
   header keeps the column labels visible while scrolling. */
.exp-board-scroll { max-height: 41rem; overflow-y: auto; }
.exp-badge-inline {
    display: inline-block;
    min-width: 2.1rem;
    padding: 0.1rem 0.35rem;
    margin-right: 0.4rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-align: center;
    vertical-align: middle;
}
.exp-compare-cell { white-space: nowrap; }
.exp-compare-val { font-variant-numeric: tabular-nums; }
.exp-compare-delta { display: block; font-size: 0.68rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.exp-compare-avg th, .exp-compare-avg td { font-weight: 600; color: var(--ink-muted); border-top: 2px solid var(--border-strong); }
.exp-compare-table thead th { cursor: pointer; }

.exp-bar-chart { margin: var(--space-3) 0; }
.exp-bar-chart-svg { color: var(--ink); max-width: 900px; }
.exp-chart-caption { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: 0.3rem; }

.exp-board-group { margin: var(--space-4) 0; }

.exp-team-links {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
}
.exp-team-links a {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    color: var(--ink);
}
.exp-team-links a:hover { background: var(--bg-elevated); }

.exp-change-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-5) 0; }
.exp-change-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.exp-change-player { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-sm); padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.exp-change-player--box { opacity: 0.85; }
.exp-change-name { font-weight: 600; }
.exp-change-pos { color: var(--ink-dim); font-size: 0.72rem; }
.exp-change-to { color: var(--ink-dim); }
.exp-change-from { color: var(--accent); font-size: 0.72rem; }
.exp-change-stat { color: var(--ink-muted); font-size: 0.74rem; margin-left: auto; }

.exp-contrib-section { margin: var(--space-5) 0; }
.exp-contrib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.exp-contrib-card { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); background: var(--surface); }
.exp-contrib-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--ink-dim); }
.exp-contrib-list { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: var(--fs-sm); }
.exp-contrib-list li { display: flex; justify-content: space-between; gap: 0.5rem; }

.exp-limited-section { margin: var(--space-5) 0; }
.exp-roster-section { margin: var(--space-5) 0; }
.exp-back { margin: var(--space-5) 0; font-size: var(--fs-sm); }
.exp-back a { color: var(--accent); text-decoration: none; }

@media (max-width: 640px) {
    .exp-sw, .exp-change-grid { grid-template-columns: 1fr; }
}

/* roster + lost stat tables (draft-board style) */
.exp-profile-cov { color: var(--ink-dim); font-size: 0.72rem; }
.exp-subhead { margin: var(--space-3) 0 0.3rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-muted); }
.exp-roster-table th { text-align: left; }
.exp-roster-table td { text-align: right; font-variant-numeric: tabular-nums; }
.exp-roster-table td.exp-league { text-align: left; color: var(--ink-muted); font-size: var(--fs-sm); }
.exp-row-pos { color: var(--ink-dim); font-size: 0.72rem; font-weight: 500; }
.exp-row-drafted {
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill);
    padding: 0.02rem 0.32rem; margin-left: 0.3rem; vertical-align: middle; white-space: nowrap;
}
.exp-row-box { opacity: 0.9; }
.exp-row-box td.exp-league { font-style: italic; }
.exp-lost-section, .exp-metric-section, .exp-roster-section, .exp-lost-impact-section { margin: var(--space-5) 0; }

/* ---- production lost to expansion ---- */
.exp-impact-headline {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--bg-chip);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    font-size: var(--fs-md, 1rem);
    line-height: 1.5;
}
.exp-impact-headline strong { font-variant-numeric: tabular-nums; }
.exp-chart { margin: var(--space-4) 0; }
.exp-impact-chart { color: var(--ink); width: 100%; }
.exp-chart-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}
.exp-legend-swatch {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
    margin-right: 0.15rem;
    margin-left: var(--space-2);
}
.exp-legend-swatch:first-child { margin-left: 0; }
.exp-legend-lost { opacity: 0.28; }
.exp-legend-out { background: #e2574c; }
.exp-legend-in { background: #2fa36b; }
.exp-share { display: block; color: var(--ink-dim); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.exp-impact-table tr.exp-impact-total th,
.exp-impact-table tr.exp-impact-total td { border-top: 2px solid var(--border); font-weight: 600; }

/* ---- homepage banner ---- */
.exp-home-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 1280px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-hero);
    background-image: var(--surface-hero-overlay), var(--surface-hero);
    color: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.exp-home-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-pop); }
.exp-home-banner-tag {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--brand-orange);
    color: #fff;
}
.exp-home-banner-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.exp-home-banner-body strong { font-size: 1.05rem; }
.exp-home-banner-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.8); }
.exp-home-banner-cta { flex: 0 0 auto; font-weight: 700; color: var(--brand-orange); }

/* ---- responsive ---- */
@media (max-width: 720px) {
    .exp-home-banner { flex-wrap: wrap; gap: var(--space-2); }
    .exp-home-banner-cta { width: 100%; }
    .exp-team-grid, .exp-team-grid--expansion { grid-template-columns: 1fr; }
    .exp-player-status { justify-content: flex-start; }
}


/* ============================================================
   2026 Entry Draft prospect board (/draft)
   ============================================================ */
.draft-summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0;
    margin: 1rem 0 0;
}
.draft-summary li {
    font-size: 0.9rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.draft-summary-n {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin-right: 0.35rem;
}
.draft-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.75rem 1.25rem;
    margin: 1.5rem 0 0.5rem;
}
/* Hint drops to its own line beneath the side-by-side filters. */
.draft-controls .draft-hint { flex-basis: 100%; }
.draft-filter {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}
.draft-filter select {
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    min-width: 16rem;
}
.draft-hint { font-size: 0.85rem; color: var(--ink-dim); margin: 0; }
.draft-group { margin: 2rem 0; }
summary.draft-group-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
summary.draft-group-title::-webkit-details-marker { display: none; }
summary.draft-group-title::before {
    content: "\25BE";  /* down triangle = expanded */
    color: var(--ink-muted);
    font-size: 0.9rem;
}
details.draft-group:not([open]) summary.draft-group-title::before {
    content: "\25B8";  /* right triangle = collapsed */
}
.draft-top-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-orange);
    background: var(--brand-orange-soft);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    margin-right: 0.35rem;
    white-space: nowrap;
    vertical-align: middle;
}
.draft-group-count {
    font-size: 0.95rem;
    color: var(--ink-muted);
    background: var(--bg-chip);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}
.draft-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.draft-table thead th {
    text-align: right;
    padding: 0.5rem 0.6rem;
    border-bottom: 2px solid var(--border-strong);
    color: var(--ink-muted);
    font-weight: 600;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--surface);
}
.draft-table th.draft-col-rank,
.draft-table th.draft-col-name,
.draft-table th.draft-col-nat,
.draft-table th.draft-col-team,
.draft-table th.draft-col-league { text-align: left; }
.draft-table tbody td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}
.draft-table td.draft-col-rank { color: var(--ink-dim); text-align: left; width: 2.5rem; }
.draft-table td.draft-col-name { text-align: left; font-weight: 600; }
.draft-table td.draft-col-nat,
.draft-table td.draft-col-team,
.draft-table td.draft-col-league { text-align: left; color: var(--ink-muted); }
.draft-table tbody tr:hover { background: var(--accent-soft); }
.draft-table td.draft-col-name a { color: var(--accent); text-decoration: none; }
.draft-table td.draft-col-name a:hover { text-decoration: underline; }
.draft-sources {
    margin: 2.5rem 0 1rem;
    font-size: 0.85rem;
    color: var(--ink-dim);
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.exp-step--draft .exp-step-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}
.exp-step--draft .exp-step-link:hover .exp-step-name { text-decoration: underline; }

/* ---- line combinations analytics entry (/analytics/team-lines) ---- */
.lines-pane-caption {
    margin: 0.75rem 0 0.25rem;
    padding-left: 0.55rem;
    border-left: 4px solid var(--team-color, var(--accent, #cb1f3a));
    font-size: 1.05rem;
}
.lines-subhead {
    margin: 1.25rem 0 0.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
}
.lines-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.lines-table th,
.lines-table td {
    padding: 0.3rem 0.5rem;
    text-align: right;
    white-space: nowrap;
}
.lines-table th:first-child,
.lines-table td.lines-members {
    text-align: left;
}
.lines-table tbody tr:nth-child(odd) { background: var(--surface-alt, rgba(127,127,127,0.06)); }
.lines-label { font-weight: 700; }
.lines-members { color: var(--ink-muted, #666); }

/* Every qualifying line is shown; the table scrolls so the page stays tidy.
   The header sticks so column labels stay visible while scrolling rows. */
.lines-scroll {
    max-height: 26rem;
    overflow-y: auto;
}
.lines-scroll .lines-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg, #f1efe8);
    box-shadow: inset 0 -1px 0 var(--border, rgba(127,127,127,0.25));
    z-index: 1;
}

.lines-pivot {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}
.lines-pivot th,
.lines-pivot td {
    padding: 0.85rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border, rgba(127,127,127,0.25));
}
.lines-pivot thead th {
    font-size: 0.9rem;
    white-space: normal;
    line-height: 1.2;
    vertical-align: bottom;
}
.lines-pivot th:first-child,
.lines-pivot th[scope="row"] {
    width: 11rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: normal;
    line-height: 1.2;
}
.lines-pivot tbody tr:nth-child(odd) td { background: var(--surface-alt, rgba(127,127,127,0.06)); }
.lines-pivot-empty { color: var(--ink-muted, #999); }
.lines-pivot-cell .lines-pivot-main {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
}
.lines-pivot-cell .lines-pivot-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--ink-muted, #777);
}