/**
 * TheSpread Odds Engine — Frontend Display
 *
 * Consolidated stylesheet for the plugin's frontend output. This file is the
 * single source of truth for all visual styling — no inline styles in templates,
 * no element.style writes in JavaScript (one exception: the .tse-expanded
 * display toggle in tse-refresh.js, documented there).
 *
 * Sections:
 *   0. :root token block (v1.9.65) — semantic design tokens
 *   1. Base container + empty state + legacy table selectors
 *   2. Refresh status indicator ("Last updated" pill, stale/error states)
 *   3. Main odds table — grid layout, cells, teams, odds values
 *      3a. Grid column variants (standard / 3-way / moneyline-only)
 *      3b. Column header row
 *      3c. Category section header
 *      3d. Expanded panel (tabs, period lines, alternates, game props)
 *      3e. Main table mobile breakpoint
 *   4. Futures/props shared base — accordion groups, outcomes
 *      4a. Futures template overrides (.tse-futures-display ...)
 *      4b. Props template overrides (.tse-props-display ...)
 *   5. Shared responsive rules
 *
 * Token architecture (v1.9.65):
 *   All colors, font sizes, weights, and geometry reference the :root tokens
 *   below. Dark mode can be layered in later via a single
 *   @media (prefers-color-scheme: dark) { :root { ... } } block — no other
 *   rules should need to change.
 */

:root {
    /* Surface colors */
    --tse-surface-page:        #ffffff;
    --tse-surface-row:         #ffffff;
    --tse-surface-row-alt:     #fafafa;
    --tse-surface-header:      #f5f5f5;
    --tse-surface-hover:       #eeeeee;
    --tse-surface-panel:       #fafafa;
    --tse-surface-section:     #f7f7f7;
    --tse-surface-flash:       #ececec;

    /* Text colors */
    --tse-text-primary:        #111111;
    --tse-text-secondary:      #333333;
    --tse-text-muted:          #666666;
    --tse-text-faint:          #888888;
    --tse-text-disabled:       #cccccc;
    --tse-text-reversed:       #ffffff;

    /* Border colors */
    --tse-border-default:      #dddddd;
    --tse-border-subtle:       #eeeeee;
    --tse-border-faint:        #f0f0f0;
    --tse-border-strong:       #333333;

    /* Accent colors */
    --tse-accent-active:       #111111;

    /* Status colors (error/stale — single red, reserved use only) */
    --tse-status-error:        #c53030;

    /* Bet Now CTA — green (reserved hex aligns with the planned Slice D
       line-movement-up indicator). */
    --tse-bet-now-bg:          #00a050;
    --tse-bet-now-bg-hover:    #008040;

    /* Slice D — line movement direction colors */
    --tse-mv-up:               #00a050;
    --tse-mv-down:             #c53030;

    /* v1.9.89 — age-tier palette (direction-agnostic).
       v1.9.90 — cool swapped to a deeper blue (the prior gray-blue read
       too close to zebra striping).
       v1.9.92 — hot now red, warm now yellow (was yellow/orange). Red signals
       urgency for the freshest movements; the dedicated --tse-age-hot red
       (#dc2626) is bolder than the direction-down red (--tse-mv-down #c53030)
       so a green up-arrow on a red-tinted row remains visually unambiguous. */
    --tse-age-hot:             #dc2626;  /* red — last 1 minute */
    --tse-age-warm:            #fbbf24;  /* yellow — 1-3 minutes */
    --tse-age-cool:            #60a5fa;  /* blue — 3-5 minutes */

    /* Typography — v1.9.82: three sizes, three weights designed for presence.
       Display pairs with bold (data heroes); body with medium (supporting);
       meta with strong (uppercase labels). */
    --tse-font-meta:           12px;
    --tse-font-body:           14px;
    --tse-font-display:        16px;
    --tse-weight-medium:       500;
    --tse-weight-strong:       600;
    --tse-weight-bold:         700;

    /* Geometry */
    --tse-radius-sm:           4px;
    --tse-radius-md:           8px;
    --tse-border-width:        1px;
}

/* ─── Page header ─── */

.tse-page-header {
    padding: 0 0 12px 0;
    margin: 0 0 16px 0;
}
.tse-page-header .tse-refresh-status {
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: right;
    padding: 4px 0 8px 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.tse-page-header-rule {
    border: 0;
    border-top: 1px solid var(--tse-border-default);
    margin: 0;
    padding: 0;
    height: 0;
}
.tse-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.tse-page-nav {
    display: flex;
    gap: 24px;
    padding: 12px 4px 0 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 auto;
}
.tse-page-nav::-webkit-scrollbar {
    display: none;
}
.tse-page-nav-link {
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: 4px 0 8px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.tse-page-nav-link:hover {
    color: var(--tse-text-primary);
}
.tse-page-nav-link.tse-nav-active {
    color: var(--tse-text-primary);
    border-bottom-color: var(--tse-accent-active);
    cursor: default;
}

@media (max-width: 768px) {
    .tse-page-header {
        margin: 0 0 12px 0;
    }
    .tse-page-nav {
        gap: 16px;
    }
    .tse-page-header .tse-refresh-status {
        font-size: var(--tse-font-meta);
    }
}

/* ─── Movement-tier legend in page header ─── */

.tse-mv-legend {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
    font-size: var(--tse-font-meta);
    color: var(--tse-text-muted);
    font-weight: var(--tse-weight-medium);
    flex-wrap: wrap;
    /* v1.9.92 — sit under the right-aligned UPDATED timestamp, not under the
       left-aligned section nav. Legend stays a row beneath .tse-page-header-row. */
    justify-content: flex-end;
}

.tse-mv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tse-mv-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.tse-mv-legend-dot-hot  { background: var(--tse-age-hot); }
.tse-mv-legend-dot-warm { background: var(--tse-age-warm); }
.tse-mv-legend-dot-cool { background: var(--tse-age-cool); }

/* Mobile: legend stays inline if it fits, wraps gracefully if not */
@media (max-width: 768px) {
    .tse-mv-legend {
        gap: 8px;
        margin-top: 6px;
    }
}

/* ─── 1. Base ─── */

.tse-odds-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--tse-font-body);
    line-height: 1.4;
}
.tse-empty {
    padding: 20px;
    text-align: center;
    color: var(--tse-text-muted);
    font-style: italic;
}

/* v1.9.97 — sport-aware "no odds available" message rendered by
   render_no_odds_message(). NOTE: a separate `.tse-no-odds` class already
   exists below for per-cell em-dash placeholders inside odds rows; this
   container deliberately uses `.tse-no-odds-message` to avoid colliding
   with that cell-level usage. */
.tse-no-odds-message {
    padding: 40px 20px;
    margin: 16px 0;
    text-align: center;
    background: var(--tse-surface-section);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-md);
    color: var(--tse-text-secondary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.tse-no-odds-message-primary {
    margin: 0 0 14px 0;
    font-size: var(--tse-font-display);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
}
.tse-no-odds-message-cross,
.tse-no-odds-message-hub {
    margin: 6px 0;
    font-size: var(--tse-font-body);
}
.tse-no-odds-message a {
    color: var(--tse-text-primary);
    font-weight: var(--tse-weight-strong);
    text-decoration: underline;
}
.tse-no-odds-message a:hover {
    color: var(--tse-text-secondary);
}

/* Legacy table selectors preserved verbatim from the previous odds-display.css
   as a safety net. Likely dead code since templates now use CSS grid layouts,
   but kept unchanged to guarantee v1.9.64 produces pixel-identical output. */

.tse-odds-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tse-surface-row);
    border: 1px solid var(--tse-border-default);
}
.tse-odds-table thead { background: var(--tse-text-primary); color: var(--tse-text-reversed); }
.tse-odds-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: var(--tse-font-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--tse-weight-strong);
    white-space: nowrap;
}
.tse-odds-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tse-border-subtle);
    vertical-align: top;
}
.tse-odds-table tbody tr:hover { background: var(--tse-surface-section); }

.tse-col-time    { white-space: nowrap; font-size: var(--tse-font-body); color: var(--tse-text-secondary); min-width: 110px; }
.tse-col-matchup { font-weight: var(--tse-weight-strong); min-width: 180px; }
.tse-col-matchup .tse-at { color: var(--tse-text-faint); margin: 0 4px; font-weight: var(--tse-weight-medium); }
.tse-col-spread, .tse-col-ml, .tse-col-draw, .tse-col-total { min-width: 120px; }

.tse-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; }
.tse-line + .tse-line { border-top: 1px solid var(--tse-border-faint); }
.tse-team { font-size: var(--tse-font-body); color: var(--tse-text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tse-handicap { font-weight: var(--tse-weight-bold); color: var(--tse-text-primary); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.tse-odds { font-weight: var(--tse-weight-bold); color: var(--tse-text-secondary); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.tse-label { font-size: var(--tse-font-meta); color: var(--tse-text-muted); font-weight: var(--tse-weight-strong); text-transform: uppercase; }

@media (max-width: 768px) {
    .tse-odds-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tse-odds-table .tse-col-matchup { position: sticky; left: 0; background: var(--tse-surface-row); z-index: 1; }
    .tse-odds-table thead .tse-col-matchup { background: var(--tse-text-primary); }
    .tse-odds-table tbody tr:hover .tse-col-matchup { background: var(--tse-surface-section); }
}

/* ─── 2. Refresh status indicator ─── */
/* Replaces element.style.cssText writes from tse-refresh.js */

.tse-refresh-status {
    font-size: var(--tse-font-meta);
    color: var(--tse-text-muted);
    padding: 4px 16px;
    text-align: right;
}
.tse-refresh-status.tse-status-error {
    color: var(--tse-status-error);
}
.tse-refresh-status.tse-status-stale {
    color: var(--tse-status-error);
}

/* ─── 3. Main Odds Table ─── */

.tse-main-odds {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1100px;
}
.tse-game {
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-md);
    margin-bottom: 12px;
    background: var(--tse-surface-row);
    overflow: hidden;
}

/* 3a. Grid column variants — chosen by class on .tse-game-row.
   These preserve the exact PHP-driven grid template from the old inline style:
     grid-template-columns: 110px 1fr repeat(N, minmax(90px,140px));
   where N = 1 (ml-only), 3 (standard), or 4 (3-way with draw). */

.tse-game-row {
    display: grid;
    align-items: stretch;
}
/* v1.9.92 — bumped odds-column max from 140 → 160 so the Total cell (which
   carries an extra .tse-ou-label "U"/"O" prefix) fits its
   ou-label(14) + gap(6) + hcap(48) + gap(6) + price(56) + cell-padding(20) = 150px
   minimum content width without clipping the U/O on the left edge. */
.tse-game-row.tse-grid-standard {
    grid-template-columns: 110px 1fr repeat(3, minmax(90px, 160px));
}
.tse-game-row.tse-grid-3way {
    grid-template-columns: 110px 1fr repeat(4, minmax(90px, 160px));
}
.tse-game-row.tse-grid-mlonly {
    grid-template-columns: 110px 1fr repeat(1, minmax(90px, 160px));
}

.tse-cell {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
/* v1.9.92 — desktop: stacked (date line 1, time line 2). Mobile: inline.
   Inherits `.tse-cell { display: flex; flex-direction: column }` for the desktop
   stack; mobile flips to flex-direction: row in the @media block. The separator
   dot is hidden on desktop (visual noise when stacked) and shown inline on mobile. */
.tse-cell-time {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-medium);
    color: var(--tse-text-muted);
    text-align: center;
    border-right: 1px solid var(--tse-border-default);
    align-items: center;
    justify-content: center;
}
.tse-cell-time-date,
.tse-cell-time-time {
    display: block;
    white-space: nowrap;
}

.tse-cell-time-sep {
    display: none;  /* hidden on desktop — stacked layout doesn't need a separator */
    margin: 0 4px;
    color: var(--tse-text-muted);
}
.tse-cell-matchup {
    border-right: 1px solid var(--tse-border-default);
}
.tse-team-name {
    font-size: var(--tse-font-display);
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    padding: 2px 0;
}
.tse-cell-odds {
    text-align: center;
    border-right: 1px solid var(--tse-border-subtle);
}
.tse-odds-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--tse-font-display);
}
.tse-hcap {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tse-price {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-secondary);
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tse-ou-label {
    font-size: var(--tse-font-meta);
    color: var(--tse-text-muted);
    font-weight: var(--tse-weight-strong);
    min-width: 14px;
}
.tse-expand-toggle {
    cursor: pointer;
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-secondary);
    user-select: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tse-radius-sm);
}
.tse-expand-toggle:hover {
    background: var(--tse-surface-hover);
}

/* ─── Tab row (v1.9.78) ───
   A single row rendered as a sibling of .tse-game-row inside .tse-game.
   When $has_extra is true: [+ toggle] [tab buttons] [Bet Now].
   When $has_extra is false: a simpler variant with only a right-aligned Bet Now. */

.tse-tab-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 16px;
    border-top: 1px solid var(--tse-border-default);
    background: transparent;
}
/* v1.9.81 — outer `+`/`−` toggle sits flush-left at all breakpoints (matching
   inner accordion `+` positioning). 28-ish px tap target preserved via
   padding + negative-margin cancellation. */
.tse-tab-row .tse-expand-toggle {
    flex-shrink: 0;
    width: auto;
    height: auto;
    padding: 8px 10px;
    margin: -8px -10px;
}
.tse-tab-labels {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.tse-tab-labels::-webkit-scrollbar {
    display: none;
}
.tse-tab-row .tse-bet-now {
    flex-shrink: 0;
}
.tse-tab-row-simple {
    justify-content: flex-end;
}

.tse-bet-now {
    display: inline-block;
    background: var(--tse-bet-now-bg);
    color: #ffffff !important;
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: var(--tse-radius-sm);
    white-space: nowrap;
    transition: background 0.15s ease;
}
.tse-bet-now:hover {
    background: var(--tse-bet-now-bg-hover);
    opacity: 1;
    color: #ffffff !important;
    text-decoration: none;
}

.tse-no-odds {
    color: var(--tse-text-disabled);
    font-size: var(--tse-font-display);
}

/* ─── Slice D — line movement indicators (v1.9.85) ───
   Replaces the v1.9.65 flash animation. When AJAX delivers a new price or
   handicap value, JS adds direction (.tse-mv-up / .tse-mv-down) and tier
   (.tse-mv-tier-hot / -warm / -cool) classes to the parent .tse-odds-line
   (or .tse-chip / .tse-futures-outcome) AND to the value span itself.
   The line gets a colored background tint that decays through three tiers.
   The value span gets a small triangle arrow that shows in the hot tier only. */

/* ─── Slice D — age-tier row tints (direction-agnostic) ─── */

/* v1.9.96 — added `.tse-chip-grid .tse-chip.tse-mv-tier-*` to each rule so the
   chip variant wins specificity (0,0,3,0) against the zebra-striping rule
   `.tse-chip:nth-child(even)` (0,0,2,0) further down. Without this, every
   even-indexed chip's tint was painted over by the nth-child rule that ties
   on specificity but appears later in source order. Confirmed in templates
   that all chips render inside `<div class="tse-chip-grid">`. */
.tse-odds-line.tse-mv-tier-hot,
.tse-chip.tse-mv-tier-hot,
.tse-chip-grid .tse-chip.tse-mv-tier-hot,
.tse-futures-outcome.tse-mv-tier-hot { background: rgba(220, 38, 38, 0.15); }   /* red */

.tse-odds-line.tse-mv-tier-warm,
.tse-chip.tse-mv-tier-warm,
.tse-chip-grid .tse-chip.tse-mv-tier-warm,
.tse-futures-outcome.tse-mv-tier-warm { background: rgba(251, 191, 36, 0.18); }  /* yellow */

.tse-odds-line.tse-mv-tier-cool,
.tse-chip.tse-mv-tier-cool,
.tse-chip-grid .tse-chip.tse-mv-tier-cool,
.tse-futures-outcome.tse-mv-tier-cool { background: rgba(96, 165, 250, 0.15); } /* blue (unchanged) */

/* ─── Multi-level container indicators ─── */

/* Game card top edge stripe (skips column-header non-game) */
.tse-game[data-event-id].tse-mv-tier-hot {
    box-shadow: inset 0 3px 0 0 var(--tse-age-hot);
}
.tse-game[data-event-id].tse-mv-tier-warm {
    box-shadow: inset 0 3px 0 0 var(--tse-age-warm);
}
.tse-game[data-event-id].tse-mv-tier-cool {
    box-shadow: inset 0 3px 0 0 var(--tse-age-cool);
}

/* v1.9.91 — Tab dots. Padding-right for the dot space is applied via the
   `.tse-main-odds .tse-tab-labels .tse-tab` rule lower in this file (matching
   specificity with the existing `padding: 6px 0` declaration so it actually
   takes effect). */
.tse-tab {
    position: relative;
}
.tse-tab.tse-mv-tier-hot::after,
.tse-tab.tse-mv-tier-warm::after,
.tse-tab.tse-mv-tier-cool::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.tse-tab.tse-mv-tier-hot::after  { background: var(--tse-age-hot); }
.tse-tab.tse-mv-tier-warm::after { background: var(--tse-age-warm); }
.tse-tab.tse-mv-tier-cool::after { background: var(--tse-age-cool); }

/* Inner accordion right-edge stripe (Spreads / Totals / Moneyline inside Alternates / Game Props) */
.tse-sub-group.tse-mv-tier-hot > .tse-sub-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-hot);
}
.tse-sub-group.tse-mv-tier-warm > .tse-sub-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-warm);
}
.tse-sub-group.tse-mv-tier-cool > .tse-sub-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-cool);
}

/* Futures market accordion right-edge stripe */
.tse-futures-group.tse-mv-tier-hot > .tse-futures-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-hot);
}
.tse-futures-group.tse-mv-tier-warm > .tse-futures-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-warm);
}
.tse-futures-group.tse-mv-tier-cool > .tse-futures-header {
    box-shadow: inset -3px 0 0 0 var(--tse-age-cool);
}

/* Futures category section right-edge stripe */
.tse-category-section.tse-mv-tier-hot > .tse-category-heading {
    box-shadow: inset -3px 0 0 0 var(--tse-age-hot);
}
.tse-category-section.tse-mv-tier-warm > .tse-category-heading {
    box-shadow: inset -3px 0 0 0 var(--tse-age-warm);
}
.tse-category-section.tse-mv-tier-cool > .tse-category-heading {
    box-shadow: inset -3px 0 0 0 var(--tse-age-cool);
}

/* v1.9.90 — Direction arrows persist for the full 5-minute lifespan, regardless of tier.
   v1.9.91 — Arrows positioned absolutely with reserved padding-right on the value
   span. Inline-block + margin-left was adding 12px to the rendered width and
   pushing TOTAL/Spread cells past their grid track minmax(90px, 140px). With
   absolute positioning, the arrow occupies no layout width — the padding-right
   just reserves visual space inside the existing min-width allocation. The
   position+padding rule is scoped to VALUE SPANS only so container-row classes
   (.tse-odds-line / .tse-chip / .tse-futures-outcome — which also receive the
   direction class) keep their existing horizontal padding intact. */

.tse-price.tse-mv-up,
.tse-price.tse-mv-down,
.tse-hcap.tse-mv-up,
.tse-hcap.tse-mv-down,
.tse-odds.tse-mv-up,
.tse-odds.tse-mv-down,
.tse-handicap.tse-mv-up,
.tse-handicap.tse-mv-down,
.tse-futures-odds.tse-mv-up,
.tse-futures-odds.tse-mv-down,
.tse-futures-handicap.tse-mv-up,
.tse-futures-handicap.tse-mv-down {
    position: relative;
    padding-right: 8px;
}

.tse-mv-up::after,
.tse-mv-down::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.tse-mv-up::after {
    border-bottom: 6px solid var(--tse-mv-up);
}

.tse-mv-down::after {
    border-top: 6px solid var(--tse-mv-down);
}

/* Suppress arrow on container row elements — only show on the value span. */
.tse-odds-line.tse-mv-up::after,
.tse-odds-line.tse-mv-down::after,
.tse-chip.tse-mv-up::after,
.tse-chip.tse-mv-down::after,
.tse-futures-outcome.tse-mv-up::after,
.tse-futures-outcome.tse-mv-down::after {
    display: none;
}

/* 3b. Column header row — v1.9.78:
   Softer than v1.9.77's pure-black treatment. Medium-gray background, dark
   uppercase text, standard 1px border, plus a 2px bottom border in the
   primary text color for weight. Reads as a defined header without dominating. */

.tse-col-header {
    background: var(--tse-surface-header);
    border: 1px solid var(--tse-border-default);
    border-bottom: 2px solid var(--tse-text-primary);
    border-radius: var(--tse-radius-md);
    margin-bottom: 8px;
}
.tse-col-header .tse-game-row {
    background: transparent;
}
.tse-col-header .tse-cell {
    padding: 6px 10px;
    justify-content: center;
    color: var(--tse-text-primary);
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tse-col-header .tse-cell-time,
.tse-col-header .tse-cell-matchup,
.tse-col-header .tse-cell-odds {
    color: var(--tse-text-primary);
    border-right-color: var(--tse-border-default);
    text-align: center;
}

/* 3c. Category section header (main template — shown when multiple event
   categories on one page). Replaces inline styles on the group header div. */

.tse-category-section {
    scroll-margin-top: 80px;
}
.tse-main-odds .tse-category-group-header {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-bold);
    padding: 10px 16px;
    background: var(--tse-surface-hover);
    color: var(--tse-text-primary);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* First group gets a 1px top border; subsequent groups get the thicker 2px rule.
   Replaces the inline ternary that was building the border-top dynamically. */
.tse-main-odds .tse-category-group-header.tse-group-separator {
    border-top: 2px solid var(--tse-border-strong);
}

/* 3d. Expanded panel — tabs, period lines, alternates, game props */

.tse-expanded {
    background: var(--tse-surface-panel);
    border-top: 2px solid var(--tse-border-strong);
    display: none;
}
/* Tab buttons moved from .tse-tabs (deleted in v1.9.78) into .tse-tab-row >
   .tse-tab-labels. Selectors updated to match the new container; button
   styling itself is otherwise unchanged from v1.9.65. */
.tse-main-odds .tse-tab-labels .tse-tab {
    /* v1.9.91 — explicit longhand padding so the right-side dot reservation
       sits next to the existing top/bottom 6px without being clobbered by a
       shorthand redeclaration further up.
       v1.9.92 — bumped right reservation 18→22 to keep ≥8px gap to the now-10px dot. */
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0;
    padding-right: 22px;
    border: none;
    background: transparent;
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    line-height: normal;
}
.tse-main-odds .tse-tab-labels .tse-tab:hover {
    color: var(--tse-text-primary);
    background: transparent;
}
.tse-main-odds .tse-tab-labels .tse-tab.tse-tab-active {
    color: var(--tse-accent-active) !important;
    border-bottom-color: var(--tse-accent-active) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tse-tab-panel {
    padding: 0;
}
/* Panel visibility — replaces inline style="display:none;" on inactive panels */
.tse-tab-panel.tse-panel-hidden {
    display: none;
}

.tse-period-section {
    margin-bottom: 0;
}
.tse-period-title {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--tse-border-default);
    background: var(--tse-border-faint);
}

/* Period-lines row styling — replaces inline styles on period .tse-game-row */
.tse-period-row {
    border-bottom: 1px solid var(--tse-border-default);
}
.tse-period-row .tse-cell-time {
    font-weight: var(--tse-weight-strong);
    font-size: var(--tse-font-body);
    color: var(--tse-text-primary);
}
.tse-period-row .tse-team-name {
    font-size: var(--tse-font-body);
}

.tse-sub-group {
    margin-bottom: 0;
    border-bottom: 1px solid var(--tse-border-subtle);
}
.tse-sub-header {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
    padding: 10px 12px;
    background: var(--tse-surface-section);
    border: none;
    border-bottom: 1px solid var(--tse-border-default);
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tse-sub-header:hover {
    background: var(--tse-surface-hover);
}
/* v1.9.91 — replace the browser-default blue focus ring (visible on click since
   .tse-sub-header has role="button" tabindex="0") with a non-blue indicator.
   Using `outline` instead of `box-shadow` so it doesn't conflict with the tier
   right-edge stripe (which is itself an inset box-shadow). */
.tse-sub-header:focus {
    outline: none;
}
.tse-sub-header:focus-visible {
    outline: 2px solid var(--tse-text-primary);
    outline-offset: -2px;
    background: var(--tse-surface-hover);
}
.tse-sub-header .tse-arrow {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-secondary);
}
.tse-sub-header .tse-arrow.tse-open {
    transform: none;
}
.tse-sub-body {
    display: none;
    padding: 0;
}
.tse-sub-body.tse-sub-open {
    display: block;
}

.tse-chip-grid {
    column-count: 3;
    column-gap: 0;
}
.tse-chip {
    break-inside: avoid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--tse-surface-row);
    border-bottom: 1px solid var(--tse-border-subtle);
    font-size: var(--tse-font-body);
    gap: 6px;
    margin: 0;
}
.tse-chip:nth-child(even) {
    background: var(--tse-surface-section);
}
.tse-chip .tse-chip-name {
    flex: 1;
    color: var(--tse-text-secondary);
}
.tse-chip .tse-price {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-secondary);
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tse-chip .tse-hcap {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tse-period-val .tse-hcap {
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    min-width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tse-period-val .tse-price {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-secondary);
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 3e. Main table mobile breakpoint — preserved verbatim from inline block.
   Sport-label pseudo-content is now set per-variant class to avoid needing
   PHP-injected content: rules. */

@media (max-width: 768px) {
    /* v1.9.79 — main game rows use variant-specific multi-column layouts.
       Time and matchup cells span full width via `grid-column: 1 / -1` rules
       below; odds cells auto-flow into the remaining columns. Period rows
       (inside expanded panels) keep v1.9.64's single-column mobile layout. */
    .tse-game-row:not(.tse-period-row).tse-grid-standard {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .tse-game-row:not(.tse-period-row).tse-grid-3way {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
    .tse-game-row:not(.tse-period-row).tse-grid-mlonly {
        grid-template-columns: 1fr !important;
    }
    /* v1.9.88 — period rows on mobile use a compact 2-row card layout:
       row 1 = period name spanning full width (centered),
       row 2 = SPREAD / ML / TOTAL columns with labels above values.
       The team-matchup row is omitted because the parent main row already
       shows the teams. Saves ~50% scroll vs the full main-row treatment. */
    .tse-game-row.tse-period-row.tse-grid-standard {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .tse-game-row.tse-period-row.tse-grid-3way {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
    }
    .tse-game-row.tse-period-row.tse-grid-mlonly {
        grid-template-columns: 1fr !important;
    }
    .tse-col-header {
        display: none;
    }
    .tse-cell-time {
        border-right: none;
        border-bottom: 1px solid var(--tse-border-default);
        flex-direction: row;
        padding: 6px 12px;
        font-size: var(--tse-font-body);
        font-weight: var(--tse-weight-medium);
    }
    .tse-cell-matchup {
        border-right: none;
        padding: 8px 12px;
    }
    .tse-cell-odds {
        border-right: none;
        border-top: 1px solid var(--tse-border-subtle);
        padding: 8px 12px;
        flex-direction: row;
        justify-content: space-between;
    }
    /* v1.9.79 — main-game-row cell overrides. Scoped via :not(.tse-period-row)
       so period rows inside expanded panels keep the v1.9.64 inline-left layout.
       Time and matchup span full width; odds cells flow into their columns and
       switch from row-direction (label-left) to column-direction (label-above). */
    .tse-game-row:not(.tse-period-row) > .tse-cell-time,
    .tse-game-row:not(.tse-period-row) > .tse-cell-matchup {
        grid-column: 1 / -1;
    }
    .tse-game-row:not(.tse-period-row) > .tse-cell-time {
        text-align: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
    }
    /* v1.9.92 — mobile: flip date/time spans inline + show separator. */
    .tse-game-row:not(.tse-period-row) > .tse-cell-time .tse-cell-time-date,
    .tse-game-row:not(.tse-period-row) > .tse-cell-time .tse-cell-time-time {
        display: inline;
    }
    .tse-game-row:not(.tse-period-row) > .tse-cell-time .tse-cell-time-sep {
        display: inline;
        margin: 0 2px;
    }
    .tse-game-row:not(.tse-period-row) > .tse-cell-matchup {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 4px 12px;
    }
    .tse-game-row:not(.tse-period-row) > .tse-cell-odds {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-top: 1px solid var(--tse-border-default);
        padding: 8px 4px;
    }
    /* v1.9.88 — period-row cell overrides for mobile compact layout.
       cell-time spans full row 1 as a centered period label.
       cell-matchup is hidden (teams already shown in the main row above).
       cell-odds switches to flex-column so the existing ::before label
       rules below render labels above odds values, just like main rows. */
    .tse-game-row.tse-period-row > .tse-cell-time {
        grid-column: 1 / -1;
        text-align: center;
        font-weight: var(--tse-weight-strong);
        flex-direction: column;
        justify-content: center;
        border-bottom: 1px solid var(--tse-border-subtle);
    }
    .tse-game-row.tse-period-row > .tse-cell-matchup {
        display: none;
    }
    .tse-game-row.tse-period-row > .tse-cell-odds {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 6px 4px;
        border-top: none;
    }
    .tse-cell-odds::before {
        font-size: var(--tse-font-meta);
        font-weight: var(--tse-weight-strong);
        color: var(--tse-text-muted);
        text-transform: uppercase;
    }
    /* Spread label depends on sport — handled via body-level classes set by PHP */
    .tse-sport-spread .tse-cell-spread::before  { content: 'Spread'; }
    .tse-sport-runline .tse-cell-spread::before { content: 'Run Line'; }
    .tse-sport-puckline .tse-cell-spread::before{ content: 'Puck Line'; }
    .tse-cell-ml::before    { content: 'Moneyline'; }
    .tse-cell-total::before { content: 'Total'; }
    .tse-cell-draw::before  { content: 'Draw'; }
    /* v1.9.79 — soccer 3-way uses a compact 'O/U' label so the 4-column
       mobile layout fits at 375px. Soccer-only (THREE_WAY_SPORTS = [240]). */
    .tse-grid-3way .tse-cell-total::before {
        content: 'O/U';
    }
    .tse-odds-line {
        justify-content: flex-end;
    }
    .tse-tab-row {
        padding: 6px 12px;
        gap: 8px;
    }
    .tse-tab-labels {
        gap: 16px;
    }
    .tse-chip-grid {
        column-count: 1;
    }
}

/* ─── 4. Futures / Props shared base ─── */
/*
   These unscoped rules reproduce the exact values the pre-v1.9.64
   odds-display.css was producing. The props template never had inline
   overrides on most of these elements and relied on these defaults. The
   futures template used inline styles to override a handful of them — those
   overrides are now applied via the `.tse-futures-display` block below (4a).
   Do not modify a value here without verifying both templates remain
   pixel-identical to the pre-refactor rendering.
*/

.tse-futures-group {
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    margin-bottom: 8px;
    background: var(--tse-surface-row);
    scroll-margin-top: 80px;
}
.tse-futures-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--tse-surface-row);
    border-bottom: 1px solid var(--tse-border-default);
}
.tse-futures-header:hover {
    background: var(--tse-surface-hover);
}
.tse-closed .tse-futures-header {
    border-bottom: none;
}

.tse-futures-title {
    margin: 0;
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
    flex: 1;
}
.tse-futures-subtitle {
    font-size: var(--tse-font-meta);
    color: var(--tse-text-faint);
}
.tse-futures-toggle {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-secondary);
    flex-shrink: 0;
}

.tse-futures-body {
    padding: 0;
}
/* Collapsed body — replaces inline style="display:none;" on both templates */
.tse-closed .tse-futures-body {
    display: none;
}

.tse-futures-market {
    padding: 4px 16px;
}
.tse-futures-market + .tse-futures-market {
    border-top: 1px solid var(--tse-border-faint);
}

.tse-futures-outcome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.tse-futures-outcome + .tse-futures-outcome {
    border-top: 1px solid var(--tse-border-faint);
}
.tse-futures-name {
    flex: 1;
    color: var(--tse-text-secondary);
}
.tse-futures-handicap {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-secondary);
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.tse-futures-odds {
    display: inline-block;
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-secondary);
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Category body collapsed state — used by both templates.
   Replaces inline style="display:none;" on the body div. */
.tse-cat-closed .tse-category-body {
    display: none;
}

/* ─── 4a. Futures template overrides (.tse-futures-display) ─── */
/*
   These rules restate the exact inline values futures-display.php was
   applying before v1.9.64. Scoped to the .tse-futures-display container so
   they do not affect the props template.
*/

.tse-futures-display {
    scroll-behavior: smooth;
}
.tse-futures-display .tse-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tse-border-default);
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    background: var(--tse-surface-row);
    z-index: 10;
}
.tse-futures-display .tse-section-nav a {
    font-size: var(--tse-font-body);
    color: var(--tse-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    font-weight: var(--tse-weight-strong);
}
/* v1.9.78 — category heading: toggle moved to left, so the flex container
   is now a start-aligned row with a gap rather than space-between. */
.tse-futures-display .tse-category-heading {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-bold);
    margin: 8px 0;
    padding: 10px 16px;
    background: var(--tse-surface-hover);
    color: var(--tse-text-primary);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tse-futures-display .tse-cat-toggle {
    font-size: var(--tse-font-body);
}
.tse-futures-display .tse-futures-header {
    justify-content: flex-start;
    padding: 10px 16px;
    background: var(--tse-surface-row);
    border-bottom: 1px solid var(--tse-border-default);
}
.tse-futures-display .tse-futures-title {
    font-size: var(--tse-font-body);
    color: var(--tse-text-primary);
}
.tse-futures-display .tse-futures-subtitle {
    margin-top: 2px;
}
.tse-futures-display .tse-futures-outcome {
    justify-content: space-between;
    padding: 6px 16px;
    border-bottom: 1px solid var(--tse-border-subtle);
}
.tse-futures-display .tse-futures-odds {
    font-weight: var(--tse-weight-bold);
}

/* ─── 4b. Props template overrides (.tse-props-display) ─── */
/*
   Props previously relied on shared defaults for the .tse-futures-* elements
   (see section 4 above) and carried its own inline styles on the section
   nav, category heading, and container. Those inline styles are restated
   here scoped to .tse-props-display so nothing leaks into the futures
   template.
*/

.tse-props-display {
    scroll-behavior: smooth;
}
.tse-props-display .tse-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--tse-border-default);
    margin-bottom: 16px;
    position: sticky;
    top: 0;
    background: var(--tse-surface-row);
    z-index: 10;
}
/* v1.9.65 — blue link color dropped in favor of neutral secondary text. */
.tse-props-display .tse-section-nav a {
    font-size: var(--tse-font-body);
    color: var(--tse-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
/* v1.9.77 — matches futures category-heading treatment: medium-gray bar
   with border and radius, aligned with main-template section dividers. */
.tse-props-display .tse-category-heading {
    font-size: var(--tse-font-body);
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    margin: 8px 0;
    padding: 10px 16px;
    background: var(--tse-surface-hover);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-sm);
    cursor: pointer;
    user-select: none;
}

/* ─── 5. Shared responsive rules ─── */

@media (max-width: 768px) {
    .tse-futures-outcome {
        font-size: var(--tse-font-body);
    }
}

/* ─── Sidebar widget — compact tabbed odds (v1.9.99) ───
   v1.9.99 — refactored layout to match the main odds-table card style:
     - tab pattern copies `.tse-main-odds .tse-tab-labels .tse-tab` (gray text,
       black underline on active, no fill);
     - each game block is a bordered, rounded card;
     - per team, name-above + 3 cells (Spread / ML / Total) with light-gray
       cell backgrounds, tiny uppercase labels above values, single value per
       cell (no -110/-115 sub-prices);
     - Bet Now button reuses the existing `.tse-bet-now` class. */

.tse-sidebar-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    color: var(--tse-text-primary);
    background: var(--tse-surface-row);
    border: 1px solid var(--tse-border-default);
    border-radius: var(--tse-radius-md);
    padding: 8px;       /* v1.9.100 — was 12px */
    margin-bottom: 20px;
}

.tse-sidebar-title {
    font-size: 13px;
    font-weight: var(--tse-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px 0;
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--tse-border-default);
    color: var(--tse-text-primary);
}

/* Tabs — match main-odds pattern: gray text, black underline on active. */
.tse-sidebar-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tse-border-default);
    flex-wrap: wrap;
}

/* v1.9.100 — sidebar tabs are <button> elements, so theme/plugin button
   styling (any selector with element specificity, e.g. `.sidebar button`)
   wins against our class-only rule and re-paints them with brand color
   (red, in Mike's case). The main odds tab pattern at .tse-main-odds
   .tse-tab-labels .tse-tab.tse-tab-active solves this with !important on
   color/border/background — replicating the same defense here. */
.tse-sidebar-tab {
    background: transparent !important;
    border: none;
    padding: 6px 0;
    font-size: var(--tse-font-meta);
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-faint);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    line-height: normal;
    transition: color 0.15s, border-color 0.15s;
}

.tse-sidebar-tab:hover {
    color: var(--tse-text-primary) !important;
    background: transparent !important;
}

.tse-sidebar-tab-active {
    color: var(--tse-accent-active) !important;
    border-bottom-color: var(--tse-accent-active) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tse-sidebar-panel {
    display: none;
}

.tse-sidebar-panel-active {
    display: block;
}

.tse-sidebar-empty {
    padding: 20px 0;
    text-align: center;
    color: var(--tse-text-muted);
    font-size: 12px;
    font-style: italic;
}

/* v1.9.100 — game block: removed full border + radius. Now relies on a 1px
   bottom rule between games for separation. Cuts ~30% of vertical space. */
.tse-sidebar-game {
    padding: 6px 0;
    border-bottom: 1px solid var(--tse-border-subtle);
}

.tse-sidebar-game:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tse-sidebar-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;     /* v1.9.100 — was 8px */
    padding-bottom: 4px;    /* v1.9.100 — was 8px */
    border-bottom: 1px solid var(--tse-border-faint);
}

.tse-sidebar-game-meta {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--tse-text-muted);
    font-variant-numeric: tabular-nums;
}

.tse-sidebar-game-date {
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-secondary);
}

/* Bet Now button — reuses .tse-bet-now base, tightens for the sidebar size. */
.tse-bet-now.tse-sidebar-bet-now {
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.tse-sidebar-team-block {
    margin-top: 4px;        /* v1.9.100 — was 6px */
}

.tse-sidebar-team-block + .tse-sidebar-team-block {
    margin-top: 6px;        /* v1.9.100 — was 8px */
}

.tse-sidebar-team {
    font-size: 12px;            /* v1.9.101 — was 13px */
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tse-sidebar-cells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;               /* v1.9.100 — was 6px */
}

/* Single cell — tiny label on top, value below, light gray fill. */
.tse-sidebar-cell {
    background: var(--tse-surface-section);
    border: 1px solid var(--tse-border-subtle);
    border-radius: var(--tse-radius-sm);
    padding: 3px 4px;       /* v1.9.100 — was 4px 6px */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.tse-sidebar-cell-label {
    font-size: 9px;
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.tse-sidebar-cell-value {
    font-size: 11px;            /* v1.9.101 — was 13px */
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.tse-sidebar-cell-value .tse-hcap,
.tse-sidebar-cell-value .tse-price {
    /* Reset the page-wide .tse-hcap/.tse-price min-width + text-align rules
       that would otherwise inject 48-56px of empty space inside a cell that
       only needs ~40px. */
    min-width: 0;
    text-align: center;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.tse-sidebar-cell-value .tse-ou-label {
    font-size: 10px;
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-muted);
    min-width: 0;
}

/* ─── v1.9.100 — v2 layout: team columns side-by-side ───
   Two team columns. Each column shows the team name, then the team's
   spread/ML/total values stacked vertically with no labels (consistent
   ordering carries the meaning). No cell backgrounds or borders — clean
   text on white for ~50% less visual weight than v1's stacked layout. */

.tse-sidebar-game-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tse-sidebar-team-col {
    min-width: 0;
}

.tse-sidebar-team-col .tse-sidebar-team {
    text-align: center;
    margin-bottom: 4px;
}

.tse-sidebar-team-values {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tse-sidebar-team-value {
    text-align: center;
    padding: 2px 0;
    font-size: 11px;            /* v1.9.101 — was 13px */
    font-weight: var(--tse-weight-bold);
    color: var(--tse-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tse-sidebar-team-value .tse-hcap,
.tse-sidebar-team-value .tse-price {
    /* Reset page-wide min-widths that would otherwise inject 48-56px of
       blank space inside a v2 cell. */
    min-width: 0;
    text-align: center;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.tse-sidebar-team-value .tse-ou-label {
    margin-right: 2px;
    color: var(--tse-text-muted);
    font-size: 11px;
    font-weight: var(--tse-weight-strong);
}

.tse-sidebar-footer-link {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--tse-border-default);
    font-size: 11px;
    font-weight: var(--tse-weight-strong);
    color: var(--tse-text-primary);
    text-decoration: none;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tse-sidebar-footer-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .tse-sidebar-widget {
        font-size: 13px;
    }
    .tse-sidebar-cell-value,
    .tse-sidebar-team-value {
        font-size: 12px;        /* v1.9.101 — was 14px (proportional to new 11px desktop) */
    }
    .tse-sidebar-team {
        font-size: 13px;        /* v1.9.101 — was 14px (proportional to new 12px desktop) */
    }
}