/**
 * TSE Ticker — Light theme (Phase 3.3 of the ticker rollout).
 *
 * Scoped under .tse-ticker. Reuses existing --tse-* design tokens from
 * public/css/odds-display.css (:root block at lines 31-95) for surface,
 * text, border, font, weight, and radius semantics. Adds seven new
 * --tse-ticker-* tokens for ticker-specific geometry (tile dimensions,
 * stripe width, arrow size, CTA cell width, data-row font size).
 *
 * Light theme only — Phase 3.4 will layer dark-theme overrides via a
 * [data-theme="dark"] selector or sibling :root block. v1.9.125 only
 * defines light-mode values.
 *
 * Tabular alignment: numeric columns use `font-variant-numeric:
 * tabular-nums` (the standard property over the older
 * `font-feature-settings: 'tnum'`) so signs and digit counts never push
 * the layout.
 */

:root {
    /* v1.9.125 — Phase 3.3 ticker geometry + sizing */
    --tse-ticker-height:        80px;
    --tse-ticker-tile-width:    210px;
    --tse-ticker-tile-gap:      6px;
    --tse-ticker-stripe-width:  3px;
    --tse-ticker-arrow-size:    32px;
    --tse-ticker-cta-width:     140px;
    /* Data rows — 13px keeps two team rows + total inside an 80px tile.
       Distinct semantic from --tse-font-meta (12px label) and
       --tse-font-body (14px body) per architect's guidance. */
    --tse-ticker-row-font:      13px;

    /* v1.9.126 — Phase 3.4 sport-switcher pills row geometry. Geometry
       tokens stay constant across themes; only surface/text/border
       overrides ship in the .tse-ticker-dark block at the end of this file. */
    --tse-ticker-pills-height:  30px;
    --tse-ticker-pill-radius:   12px;
}

/* ─── Container ─── */
/* v1.9.126 — restructured to flex column so .tse-ticker-pills (top) and
   .tse-ticker-bar (existing arrows + viewport + track) stack vertically.
   Container height is the sum of children — bar 80 + pills 30 = 110 normally,
   bar 80 alone when pills row hides via :empty (JS-load failure mode). */
.tse-ticker {
    width: 100%;
    background: var(--tse-surface-page);
    border-bottom: 1px solid var(--tse-border-default);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* ─── Sport-switcher pills row (above the bar) ─── */
.tse-ticker-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--tse-ticker-pills-height);
    padding: 0 10px;
    background: var(--tse-surface-section);
    border-bottom: 1px solid var(--tse-border-subtle);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy IE/Edge */
}
.tse-ticker-pills::-webkit-scrollbar {
    display: none;                  /* Chromium, Safari */
}
/* If JS fails to populate the pills (network error, broken file), the
   empty container collapses to zero height instead of showing a 30px
   gray strip. Pure CSS, free, graceful failure. */
.tse-ticker-pills:empty {
    display: none;
}

.tse-ticker-pill {
    flex-shrink: 0;
    height: calc(var(--tse-ticker-pills-height) - 8px);
    padding: 0 12px;
    background: var(--tse-surface-hover);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-ticker-pill-radius);
    color: var(--tse-text-primary);
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tse-ticker-pill:hover {
    background: var(--tse-surface-section);
    border-color: var(--tse-border-strong);
}
.tse-ticker-pill:focus {
    outline: 2px solid var(--tse-accent-active);
    outline-offset: 1px;
}
/* Active pill — token inversion gives automatic theme symmetry: in light
   theme the active pill is dark-fill / light-text; in dark theme the
   --tse-text-primary and --tse-text-reversed overrides flip the values
   so the active pill is light-fill / dark-text. No theme-specific
   selectors needed. */
.tse-ticker-pill-active,
.tse-ticker-pill-active:hover {
    background: var(--tse-text-primary);
    color: var(--tse-text-reversed);
    border-color: var(--tse-text-primary);
    cursor: default;
}

/* ─── Bar (the existing horizontal flex row from Phase 3.3, now wrapped) ─── */
.tse-ticker-bar {
    display: flex;
    align-items: center;
    height: var(--tse-ticker-height);
}

/* ─── Scroll arrows (left/right edges of the bar) ─── */
.tse-ticker-arrow {
    flex-shrink: 0;
    width: var(--tse-ticker-arrow-size);
    height: var(--tse-ticker-arrow-size);
    margin: 0 8px;
    background: var(--tse-surface-row);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    color: var(--tse-text-primary);
    font-size: 18px;
    font-weight: var(--tse-weight-bold);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tse-ticker-arrow:hover {
    background: var(--tse-surface-hover);
    border-color: var(--tse-border-strong);
}
.tse-ticker-arrow:focus {
    outline: 2px solid var(--tse-accent-active);
    outline-offset: 1px;
}

/* ─── Viewport (clips the track; track scrolls within) ─── */
.tse-ticker-viewport {
    flex: 1;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy IE/Edge */
}
.tse-ticker-viewport::-webkit-scrollbar {
    display: none;                  /* Chromium, Safari */
}

/* ─── Track (horizontal flex row of tiles + CTA cell) ─── */
.tse-ticker-track {
    display: flex;
    align-items: center;
    height: 100%;
    gap: var(--tse-ticker-tile-gap);
    padding: 0 4px;
}

/* ─── Tile (one game) ─── */
.tse-ticker-tile {
    flex-shrink: 0;
    width: var(--tse-ticker-tile-width);
    height: calc(var(--tse-ticker-height) - 12px);
    background: var(--tse-surface-row);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    overflow: hidden;
}
.tse-ticker-tile:hover {
    border-color: var(--tse-border-strong);
    background: var(--tse-surface-row-alt);
}
.tse-ticker-tile:focus {
    outline: 2px solid var(--tse-accent-active);
    outline-offset: -2px;
}

/* ─── Tile content rows ─── */
.tse-ticker-time {
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tse-ticker-teams {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tse-ticker-team-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--tse-ticker-row-font);
    line-height: 1.2;
    height: 18px;
}

.tse-ticker-stripe {
    flex-shrink: 0;
    width: var(--tse-ticker-stripe-width);
    align-self: stretch;
    background: var(--tse-text-faint);   /* JS overrides via inline style */
    border-radius: 1px;
}

.tse-ticker-abbr {
    flex-shrink: 0;
    width: 36px;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    font-size: var(--tse-ticker-row-font);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tse-ticker-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--tse-text-primary);
    font-weight: var(--tse-weight-strong);
    white-space: nowrap;
}

.tse-ticker-spread { width: 50px; }
.tse-ticker-ml     { width: 46px; }

/* ─── Total row (bottom, centered) ─── */
.tse-ticker-total-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--tse-ticker-row-font);
    line-height: 1.2;
    height: 16px;
}
.tse-ticker-total-label {
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── CTA cell (anchored at end of track) ─── */
.tse-ticker-cta {
    flex-shrink: 0;
    width: var(--tse-ticker-cta-width);
    height: calc(var(--tse-ticker-height) - 12px);
    margin-left: var(--tse-ticker-tile-gap);
    background: var(--tse-surface-hover);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    color: var(--tse-text-primary);
    font-weight: var(--tse-weight-bold);
    font-size: var(--tse-font-meta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.tse-ticker-cta:hover {
    background: var(--tse-surface-section);
    border-color: var(--tse-border-strong);
}
.tse-ticker-cta:focus {
    outline: 2px solid var(--tse-accent-active);
    outline-offset: -2px;
}

/* ─── Loading + empty states ─── */
.tse-ticker-loading,
.tse-ticker-empty {
    flex: 1;
    text-align: center;
    color: var(--tse-text-muted);
    font-size: var(--tse-font-body);
    padding: 0 16px;
    align-self: center;
    white-space: nowrap;
}

/* ─── v1.9.126 — Dark theme variant ───
 * Class-on-container approach: render_shell() emits .tse-ticker-light or
 * .tse-ticker-dark based on the ticker_theme setting (Phase 3.1). Token
 * overrides scope to the .tse-ticker-dark subtree via CSS variable
 * inheritance — children using var(--tse-surface-page) etc. automatically
 * pick up dark values. No per-element rule duplication.
 *
 * Geometry tokens (--tse-ticker-*) intentionally NOT overridden: tile
 * dimensions, stripe width, arrow size, pill radius are physical layout
 * values, not visual semantic. They stay constant across themes.
 *
 * Team-color stripes are rendered with inline styles by JS (per-game
 * primary_color from team-metadata.php). Inline styles win over class-
 * based tokens, so Celtics green stays Celtics green in dark mode.
 */
.tse-ticker-dark {
    --tse-surface-page:    #1a1a1a;
    --tse-surface-row:     #242424;
    --tse-surface-row-alt: #2a2a2a;
    --tse-surface-hover:   #303030;
    --tse-surface-section: #2e2e2e;
    --tse-text-primary:    #f0f0f0;
    --tse-text-secondary:  #cccccc;
    --tse-text-muted:      #999999;
    --tse-text-faint:      #777777;
    --tse-text-reversed:   #1a1a1a;
    --tse-border-default:  #3a3a3a;
    --tse-border-subtle:   #2e2e2e;
    --tse-border-strong:   #cccccc;
    --tse-accent-active:   #f0f0f0;
}