/* ============================================================
 * TRM Odds Data — card-layout scoreboard.
 * Visual style mirrors the original trm-sports-data plugin's
 * compact card so cards from either plugin sit comfortably
 * on the same site. BEM prefix here is .trm-od (sibling to
 * the original's .trm-sd) so styles never collide.
 * ============================================================ */

.trm-od {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 1.25em 0;
    color: #1f2937;
}

.trm-od--message {
    padding: 12px 16px;
    background: #f6f7f7;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #6b7280;
}

/* ============================================================
 *  Operator-customizable accent palette.
 * ============================================================
 *  Two colors drive every emerald / blue accent in the plugin:
 *    --trm-od-scoreboard-accent  — scoreboard winner/live tint
 *    --trm-od-featured-highlight — featured-lines "best pick" tint
 *  Both can be overridden in Settings → Colors. The shade ladder
 *  below derives bg/border/hover from each base color via
 *  color-mix so picking one swatch updates the whole family. */
:root {
    --trm-od-scoreboard-accent:             #16a34a;
    --trm-od-scoreboard-accent-text:        color-mix(in srgb, var(--trm-od-scoreboard-accent) 80%, black);
    --trm-od-scoreboard-accent-bg:          color-mix(in srgb, var(--trm-od-scoreboard-accent) 10%, white);
    --trm-od-scoreboard-accent-header-bg:   color-mix(in srgb, var(--trm-od-scoreboard-accent)  6%, white);
    --trm-od-scoreboard-accent-border-soft: color-mix(in srgb, var(--trm-od-scoreboard-accent) 30%, white);
    --trm-od-scoreboard-accent-hover-bg:    color-mix(in srgb, var(--trm-od-scoreboard-accent) 18%, white);

    --trm-od-featured-highlight:            #1d4ed8;
    --trm-od-featured-highlight-border:     color-mix(in srgb, var(--trm-od-featured-highlight) 90%, white);
    --trm-od-featured-highlight-bg:         color-mix(in srgb, var(--trm-od-featured-highlight) 10%, white);
    --trm-od-featured-highlight-hover-bg:   color-mix(in srgb, var(--trm-od-featured-highlight) 18%, white);
}

/* ---- Header (heading + "Updated X ago") ---- */
.trm-od__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.trm-od__heading {
    margin: 0;
    font-size: 1.1em;
    font-weight: 700;
    color: #111827;
}

.trm-od__updated {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .trm-od__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* ---- Card grid ----
 * Column count is operator-configurable via the block's "Columns"
 * sidebar control (1-3). The wrapper picks up a .trm-od--cols-N
 * modifier and these rules supply the matching grid template.
 * Without a modifier (legacy posts saved before this attribute
 * existed), the default 3-column rule below applies. */
.trm-od__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* Column rules apply to both the scoreboard grid (.trm-od__grid)
 * and the futures grid (.trm-od-futures__grid) so the operator
 * picks columns once per block and the same CSS produces a
 * matching template in either layout. */
.trm-od--cols-1 .trm-od__grid,
.trm-od--cols-1 .trm-od-futures__grid { grid-template-columns: 1fr; }
.trm-od--cols-2 .trm-od__grid,
.trm-od--cols-2 .trm-od-futures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trm-od--cols-3 .trm-od__grid,
.trm-od--cols-3 .trm-od-futures__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Full Panel template — the three-panel card needs the full row
 * width to lay its odds / pitchers / meta panels side by side, so
 * it ignores the column control entirely and always renders one
 * card per row. The wrapper carries .trm-od--tpl-panels (and no
 * .trm-od--cols-N modifier), so this single rule pins the grid to
 * a single column at every breakpoint. */
.trm-od--tpl-panels .trm-od__grid { grid-template-columns: 1fr; }

/* Tablet — 3 columns collapses to 2 so cards don't crush below
 * the readable minimum (~250px including the odds boxes).
 * 1- and 2-column choices stay as-is. */
@media (max-width: 1159px) {
    .trm-od--cols-3 .trm-od__grid,
    .trm-od--cols-3 .trm-od-futures__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile — every multi-column setting collapses to 1. A 2-up
 * card row at phone width makes the odds cells fall off the
 * grid entirely. */
@media (max-width: 785px) {
    .trm-od--cols-2 .trm-od__grid,
    .trm-od--cols-2 .trm-od-futures__grid,
    .trm-od--cols-3 .trm-od__grid,
    .trm-od--cols-3 .trm-od-futures__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- 1-column override ----
 * When the operator picks 1 column, each card takes the full
 * content width and the 62px odds cells end up bunched against
 * the right edge while the team column absorbs all the extra
 * space. Bump the cell width and the gap between cells so the
 * three boxes spread out — strictly horizontal, no height,
 * padding, or font changes so the card stays the same height
 * as a multi-column card. */
.trm-od--cols-1 .trm-od-card__body {
    grid-template-columns: minmax(0, 1fr) 26px 96px 96px 96px;
    column-gap: 8px;
}

/* Narrow viewport guard — at phone widths the bumped 96px
 * cells overflow the card. Revert to the compact column
 * template below 540px. */
@media (max-width: 540px) {
    .trm-od--cols-1 .trm-od-card__body {
        grid-template-columns: minmax(0, 1fr) 26px 62px 62px 62px;
        column-gap: 5px;
    }
}

/* ---- Card chrome ---- */

.trm-od-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    /* overflow:hidden so the header's tinted background clips cleanly
     * to the card's rounded corners. */
    overflow: hidden;
    padding: 5px 8px 3px;
    font-size: 12px;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
}

/* Header bar: extends edge-to-edge via negative margins so the subtle
 * grey background reads as a tinted strip at the top of the card. */
.trm-od-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: -5px -8px 6px;
    padding: 7px 10px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    color: #4b5563;
}

.trm-od-card__when {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.trm-od-card__venue {
    text-align: right;
    color: #4b5563;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Live-game variant: tint the header bar so live games stand out in
 * the grid. Pulsing dot before the "when" string signals real-time
 * state without needing a separate badge. */
.trm-od-card--live .trm-od-card__header {
    background: var(--trm-od-scoreboard-accent-header-bg);
    border-bottom-color: var(--trm-od-scoreboard-accent-border-soft);
}
.trm-od-card--live .trm-od-card__when {
    color: var(--trm-od-scoreboard-accent-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.trm-od-card--live .trm-od-card__when::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--trm-od-scoreboard-accent);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: trm-od-pulse 1.6s infinite;
}

@keyframes trm-od-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(22, 163, 74, 0.5); }
    70%  { box-shadow: 0 0 0 6px  rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0    rgba(22, 163, 74, 0); }
}

/* Final-game variant: desaturate the whole card slightly so finished
 * games recede compared to scheduled/live ones in a mixed grid. The
 * Final label in the header gets bolded so the status still reads
 * clearly at a glance. */
.trm-od-card--final {
    background: #fafafa;
}
.trm-od-card--final .trm-od-card__header {
    background: #f3f4f6;
    border-bottom-color: #e5e7eb;
}
.trm-od-card--final .trm-od-card__when {
    color: #374151;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.trm-od-card--final .trm-od-team__name,
.trm-od-card--final .trm-od-team__record {
    color: #6b7280;
}
/* Odds boxes on finished games are non-actionable — drop the emerald
 * border to a neutral grey so they don't read as "click me." */
.trm-od-card--final .trm-od-odds {
    border-color: #d1d5db;
    background: #fafafa;
}
.trm-od-card--final .trm-od-odds:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* ---- Body grid ----
 * 5 columns: team flexes, fixed score (26px), three 62px odds cells.
 * 62px is tuned to be the smallest width that comfortably fits the
 * "MONEYLINE" header without wrapping. */
.trm-od-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px 62px 62px 62px;
    column-gap: 5px;
    row-gap: 2px;
    align-items: center;
    padding: 3px 0 2px;
}

.trm-od-card__col-headers { display: contents; }
.trm-od-card__col-headers > span {
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: #9ca3af;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 1px;
}
.trm-od-card__col-headers .trm-od-col--spread { grid-column: 3; }
.trm-od-card__col-headers .trm-od-col--ml     { grid-column: 4; }
.trm-od-card__col-headers .trm-od-col--total  { grid-column: 5; }

/* ---- "AT" separator ----
 * Thin line spans the full card width between the two team rows.
 * The "AT" label sits in column 1 with a white background so it
 * "breaks" the line cleanly around the text. */
.trm-od-card__at {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    margin: -1px 0;
    line-height: 1;
}

.trm-od-card__at-line {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 1px;
    background: #e5e7eb;
    align-self: center;
    z-index: 0;
}

.trm-od-card__at-label {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    justify-self: center;
    background: #fff;
    padding: 0 6px;
    color: #9ca3af;
    font-size: 9.5px;
    letter-spacing: 0.08em;
}

/* ---- Team row ----
 * The row wrapper uses display:contents so its children flow into
 * the parent .trm-od-card__body grid — that's what lines the two
 * teams up into shared columns. */
.trm-od-team { display: contents; }

.trm-od-team__id {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.trm-od-team__text { min-width: 0; }

/* Cards layout logo: small (20px) square so it sits next to the
 * team name without growing the row. object-fit:contain so any
 * aspect ratio inside the file (some PNGs are square, others
 * are wider) is preserved instead of squished. flex-shrink:0
 * stops the team-text from pushing the logo down to nothing on
 * narrow cards. */
.trm-od-team__logo {
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex-shrink: 0;
}

.trm-od-team__name {
    font-weight: 500;
    color: #111827;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-od-team__record {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 0;
}

.trm-od-team__score {
    grid-column: 2;
    text-align: center;
    color: #d4a017;
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---- Odds cells ----
 * Emerald border in the default state signals "clickable" so each
 * box reads like a tappable affiliate link at a glance. */
.trm-od-odds {
    border: 1px solid #10b981;
    border-radius: 3px;
    padding: 2px 3px;
    text-align: center;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    min-height: 30px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    /* Stretch to fill the grid row so the single-line moneyline box
     * matches the height of the two-line spread/total boxes on either
     * side. The parent .trm-od-card__body grid is set to
     * align-items: center, which would otherwise size each odds box
     * to its content. */
    align-self: stretch;
}

.trm-od-odds:hover {
    background: var(--trm-od-scoreboard-accent-bg);
    border-color: #10b981;
}

.trm-od-odds:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 1px;
}

.trm-od-odds__line,
.trm-od-odds__price,
.trm-od-odds__price--solo {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

/* Price-movement arrow.
 *
 * The renderer prints a <span> with a ▲ or ▼ glyph inside the price
 * span when the current price differs from previous_price AND the
 * price's source_updated_at is fresh. We hide the actual glyph and
 * paint a tall, skinny CSS triangle via ::before instead — pinned
 * to the right edge of the odds box, vertically centered. The
 * triangle is taller than wide for a "ticker" silhouette that
 * reads as movement without competing with the price text.
 *
 * Anchoring uses position:absolute against .trm-od-odds (which we
 * promote to position:relative below). Because the arrow is taken
 * out of flow, the centered price text doesn't shift when an arrow
 * appears or disappears on refresh — the layout is stable. */

/* Make the parent a positioning context for the absolutely-placed
 * arrow. Compatible with the existing flex column layout. */
.trm-od-odds { position: relative; }

/* Price-movement arrow rendered as a Font Awesome–style "arrow-down"
 * shape (stem + triangular head). Drawn via CSS mask using an inline
 * SVG so we can paint the shape any color we want via the element's
 * background-color. The unicode glyph in the underlying span is
 * hidden so the visible shape is the SVG; the glyph + aria-label
 * stay in the DOM for assistive tech.
 *
 * The base SVG points DOWN. The .--up modifier flips it via rotate
 * so we only carry one path through the cascade. */
.trm-od-odds__arrow {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    /* Sized for visual presence — taller than wide for the
     * directional "ticker" feel, but fatter than the earlier
     * triangle so the stem reads at small card sizes too. */
    width: 13px;
    height: 26px;
    /* Hide the underlying ▲/▼ text glyph — the visible shape comes
     * from the SVG mask below. */
    font-size: 0;
    line-height: 0;
    color: transparent;
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M297.4 598.6C309.9 611.1 330.2 611.1 342.7 598.6L470.7 470.6C483.2 458.1 483.2 437.8 470.7 425.3C458.2 412.8 437.9 412.8 425.4 425.3L352 498.7L352 64C352 46.3 337.7 32 320 32C302.3 32 288 46.3 288 64L288 498.7L214.6 425.3C202.1 412.8 181.8 412.8 169.3 425.3C156.8 437.8 156.8 458.1 169.3 470.6L297.3 598.6z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path d='M297.4 598.6C309.9 611.1 330.2 611.1 342.7 598.6L470.7 470.6C483.2 458.1 483.2 437.8 470.7 425.3C458.2 412.8 437.9 412.8 425.4 425.3L352 498.7L352 64C352 46.3 337.7 32 320 32C302.3 32 288 46.3 288 64L288 498.7L214.6 425.3C202.1 412.8 181.8 412.8 169.3 425.3C156.8 437.8 156.8 458.1 169.3 470.6L297.3 598.6z'/></svg>") no-repeat center / contain;
}
/* Down arrow uses the SVG as-is. Red. */
.trm-od-odds__arrow--down {
    background-color: #dc2626;
}
/* Up arrow rotates the same SVG 180°. Green. Combine with the
 * translateY for vertical centering so we don't clobber it. */
.trm-od-odds__arrow--up {
    background-color: var(--trm-od-scoreboard-accent);
    transform: translateY(-50%) rotate(180deg);
}

.trm-od-odds__line {
    font-size: 12px;
    color: #111827;
}

.trm-od-odds__price {
    font-size: 12px;
    color: #6b7280;
    margin-top: 1px;
}

.trm-od-odds__price--solo {
    font-size: 12px;
    color: #111827;
    margin-top: 0;
}

/* ---- Footer ---- */
.trm-od-card__footer {
    margin-top: 2px;
    padding-top: 3px;
    border-top: 1px solid #f1f1f4;
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.trm-od-card__weather {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-od-card__attribution { flex-shrink: 0; }

.trm-od-card__affiliate {
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 2px;
    color: #6b7280;
}

/* Status pill rendered just before "Odds provided by …". Two
 * variants share the same shape so they line up across cards in
 * the grid:
 *   --live    green, with pulsing white dot (in-progress game)
 *   --pregame blue, solid              (game hasn't started yet)
 * Finished games show no pill — the desaturated --final card style
 * already signals that state. */
.trm-od-card__status-pill,
.trm-od-row__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px 1px 5px;
    margin-right: 4px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.trm-od-card__status-pill--live,
.trm-od-row__status-pill--live {
    background: var(--trm-od-scoreboard-accent);
}

.trm-od-card__status-pill--live::before,
.trm-od-row__status-pill--live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: trm-od-pulse-light 1.6s infinite;
}

@keyframes trm-od-pulse-light {
    0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.65); }
    70%  { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}

.trm-od-card__status-pill--pregame,
.trm-od-row__status-pill--pregame {
    background: var(--trm-od-featured-highlight-border);
}

/* Pregame pill gets a static white dot — no pulse, since the game
 * isn't moving yet. Same shape as the live dot so the family reads
 * cohesively. */
.trm-od-card__status-pill--pregame::before,
.trm-od-row__status-pill--pregame::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

/* ============================================================
 * Table layout (.trm-od--table)
 * Stacked row-groups read as one continuous table — outer border
 * lives on the container, rows share thin dividers, and the last
 * row drops its bottom border so the container's stroke isn't
 * doubled. Shares the body font and color tokens with the cards
 * layout so the two layouts feel like siblings.
 * ============================================================ */
.trm-od--table .trm-od__table {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Container owns the outer chrome — border, radius, and the
     * overflow:hidden that clips the first row's grey venue strip
     * to the rounded top corners. */
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.trm-od-row {
    background: #fff;
    /* No per-row border-radius or outer border — the container
     * supplies both. Bottom border acts as the divider between
     * rows; :last-child drops it so the container's border isn't
     * doubled at the bottom edge. */
    border-bottom: 1px solid #e5e7eb;
    font-size: 12.5px;
    line-height: 1.3;
}

.trm-od-row:last-child {
    border-bottom: none;
}

/* Finished games dim slightly so upcoming games dominate visually
 * in a mixed slate. Matches the cards layout's --final variant. */
.trm-od-row--final {
    background: #fafafa;
    opacity: 0.92;
}

/* Live / final strip treatments — mirror the cards layout's
 * .trm-od-card__header variants so an in-progress game reads
 * the same in either view. The green dot + pulse animation
 * reuses the @keyframes trm-od-pulse already declared above
 * for the cards layout. */
.trm-od-row--live .trm-od-row__strip {
    background: var(--trm-od-scoreboard-accent-header-bg);
    border-bottom-color: var(--trm-od-scoreboard-accent-border-soft);
}
.trm-od-row--live .trm-od-row__when {
    color: var(--trm-od-scoreboard-accent-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.trm-od-row--live .trm-od-row__when::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--trm-od-scoreboard-accent);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: trm-od-pulse 1.6s infinite;
}

.trm-od-row--final .trm-od-row__strip {
    background: #f3f4f6;
    border-bottom-color: #e5e7eb;
}
.trm-od-row--final .trm-od-row__when {
    color: #374151;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---- Venue strip ---- */
.trm-od-row__strip {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    color: #4b5563;
}

.trm-od-row__when {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.trm-od-row__venue {
    text-align: right;
    color: #4b5563;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ---- Odds table ---- */
.trm-od-row__table {
    width: 100%;
    border-collapse: collapse;
    /* table-layout:fixed lets us assign predictable column widths
     * via th widths below — without it, the team-column would
     * absorb all the slack and the odds columns shrink to nothing
     * on tight breakpoints. */
    table-layout: fixed;
    /* Reset margin — most WP themes (GeneratePress included) apply
     * a default margin-bottom to <table> for prose readability,
     * which here would push the footer down by ~1em. caption-side
     * + spacing zeroed for defense-in-depth. */
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

.trm-od-row__table caption,
.trm-od-row__table thead,
.trm-od-row__table tbody,
.trm-od-row__table tr,
.trm-od-row__table th,
.trm-od-row__table td {
    /* Belt-and-suspenders reset for theme rules that target
     * descendants of the table — some themes give tbody/td their
     * own padding which would re-introduce the gap. */
    margin: 0;
}

.trm-od-row__th {
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 6px;
    background: #fafafa;
    border-bottom: 1px solid #f1f1f4;
}

.trm-od-row__th--team {
    text-align: left;
    padding-left: 12px;
    width: auto;
}

.trm-od-row__th--spread,
.trm-od-row__th--ml,
.trm-od-row__th--total {
    width: 22%;
}

.trm-od-row__team-cell,
.trm-od-row__cell {
    padding: 7px 6px;
    vertical-align: middle;
    border-top: 1px solid #f1f1f4;
}

.trm-od-row__team-cell {
    padding-left: 12px;
    text-align: left;
    /* Important: this stays as the default table-cell layout. We
     * tried `display: flex` here previously and it broke row-height
     * equality with the adjacent <td> cells — once a <td> stops
     * being display:table-cell, the table-row layout can't keep its
     * height in sync with siblings, and the editor iframe surfaces
     * the mismatch even where the front-end masks it. Flex behavior
     * is on the inner div below. */
}

.trm-od-row__team-inner {
    /* Flex container so the team name/record block flows on the
     * left and the score sits anchored to the right. min-width:0
     * on the text block lets long team names ellipsize instead of
     * pushing the score off-cell. */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table layout logo: same 20px sizing as cards so the two
 * layouts share a visual scale for the team identifier. Sits
 * inside the same flex inner that hosts the team-text and
 * team-score, so the existing gap:10px already separates it
 * from the team name. */
.trm-od-row__team-logo {
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex-shrink: 0;
}

.trm-od-row__team-text {
    flex: 1;
    min-width: 0;
}

.trm-od-row__cell {
    text-align: center;
}

.trm-od-row__team-name {
    font-weight: 500;
    color: #111827;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-od-row__team-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 1px;
}

/* Score box on the right of the team cell — same gold + tabular-nums
 * treatment the cards use, scaled up slightly since the table row
 * has more vertical breathing room than a card grid. Empty score
 * (pregame games) renders no element at all from the PHP side, so
 * there's no orphan space here. */
.trm-od-row__team-score {
    color: #d4a017;
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.trm-od-row--final .trm-od-row__team-name,
.trm-od-row--final .trm-od-row__team-meta {
    color: #6b7280;
}

/* Finished games desaturate the gold score the same way the card
 * layout dims its team text — keeps finals visually quiet. */
.trm-od-row--final .trm-od-row__team-score {
    color: #9ca3af;
}

/* ---- Odds cell (link or span inside <td>) ----
 * Sized to match the card-layout .trm-od-odds box exactly
 * (same min-height, padding, and line-height) so an odds box
 * looks identical whether the operator chose the cards layout
 * or the stacked-table layout. min-width keeps the box from
 * collapsing in narrow table cells. */
.trm-od-row__odds {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 30px;
    padding: 2px 3px;
    border: 1px solid #10b981;
    border-radius: 3px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.trm-od-row__odds:hover {
    background: var(--trm-od-scoreboard-accent-bg);
}

.trm-od-row__odds:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 1px;
}

/* Finished-game odds boxes drop the emerald to neutral grey —
 * they're not actionable for the user anymore. */
.trm-od-row--final .trm-od-row__odds {
    border-color: #d1d5db;
    background: #fafafa;
    cursor: default;
}

.trm-od-row--final .trm-od-row__odds:hover {
    background: #f3f4f6;
}

/* ---- Footer ----
 * Mirrors the cards layout footer exactly: weather summary on the
 * left, optional LIVE/PREGAME pill + "Odds provided by X" on the
 * right. Flex with space-between so the two ends anchor visually
 * opposite to the venue strip at the top of the row (which also
 * splits date/time left, venue right). */
.trm-od-row__footer {
    display: flex;
    justify-content: space-between;
    /* Center alignment instead of baseline — the attribution span
     * uses inline-flex (so the LIVE/PREGAME pill aligns with the
     * text), and inline-flex elements report their baseline at the
     * bottom of the box, not the text baseline. With baseline
     * alignment that drags the weather text downward to match the
     * attribution's bottom-of-box, leaving a visible gap above the
     * weather. align-items:center sidesteps that. */
    align-items: center;
    gap: 12px;
    /* Tight vertical padding so the weather/attribution strip
     * doesn't take more space than the team rows above it. */
    padding: 3px 12px;
    border-top: 1px solid #f1f1f4;
    font-size: 12px;
    line-height: 1.4;
    color: #9ca3af;
}

.trm-od-row__weather {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trm-od-row__attribution {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.trm-od-row__affiliate {
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 2px;
    color: #6b7280;
    margin-left: 2px;
}

/* Responsive — at narrow widths the 4-col table gets tight. Drop
 * the team-cell to be slimmer so the odds columns keep their
 * minimum width. Below ~520px the user can horizontally scroll
 * the table within its container — we don't try to stack into
 * mini-cards because that'd just be re-implementing the card
 * layout inside the table layout. */
@media (max-width: 640px) {
    .trm-od-row__th,
    .trm-od-row__team-cell,
    .trm-od-row__cell {
        padding-left: 8px;
        padding-right: 4px;
    }
    .trm-od-row__team-name { font-size: 12px; }
    .trm-od-row__th { font-size: 10px; }
    .trm-od-row__odds { min-width: 52px; min-height: 30px; padding: 2px 3px; }
}

/* ============================================================
 * Futures block (.trm-od--futures)
 *
 * One card per outcome. Cards stack in a responsive grid — at
 * full width 2 columns, narrows to 1 column on mobile. Each
 * card has the outcome name on the left and the cascade-chosen
 * odds box on the right. The odds box reuses .trm-od-odds so
 * it visually belongs to the scoreboard family.
 * ============================================================ */
/* Base grid declaration only — display, gap, and the bit of
 * top spacing. Column template is supplied by the shared
 * .trm-od--cols-N rules near the top of this file (which target
 * both .trm-od__grid and .trm-od-futures__grid).
 *
 * NOTE: deliberately no `grid-template-columns` here. This rule
 * has the same specificity as `.trm-od--cols-N .trm-od-futures__grid`
 * but sits later in the source, so any column template declared
 * in this block would override the cols-N rules and lock the
 * futures grid at one column count regardless of the modifier.
 * Leaving the template out lets the cols-N rules drive it. */
.trm-od--futures .trm-od-futures__grid {
    display: grid;
    gap: 6px 8px; /* row-gap 6, column-gap 8 — tighten vertical stacking between cards */
    margin-top: 8px;
}

.trm-od-futures-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12.5px;
}

.trm-od-futures-card__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-weight: 500;
}

/* The .trm-od-odds--futures modifier locks a comfortable width
 * for the price box and tightens it vertically. The base
 * .trm-od-odds class (defined in the scoreboard section above)
 * already supplies the emerald border, hover state, focus ring,
 * and tabular-nums typography.
 *
 * Vertical overrides: scoreboard cells hold two text rows
 * (line value + price) and need ~30px of room, but futures
 * cells show a single price line. Shrink the min-height and
 * zero out the inherited vertical padding so the box collapses
 * to roughly content height, condensing each futures card. The
 * inherited `align-self: stretch` would re-stretch the box to
 * the parent flex card's height — switch to `center` so the
 * card shrinks along with the box. */
.trm-od-odds--futures {
    min-width: 70px;
    flex-shrink: 0;
    /* Tighter than scoreboard's 30px but still gives the price
     * some breathing room — text is ~16-18px, this leaves a
     * couple px of air top and bottom. */
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    align-self: center;
}

/* Align scores to the left edge on final games so the digits in
 * the away and home rows occupy the same x-position regardless of
 * whether either row carries a ::after checkmark. Without this,
 * centered/right alignment shifts the digits when the checkmark
 * appears on one row but not the other. Scoped to --final so
 * live/scheduled games keep their original centered (cards) or
 * right-aligned (table) score placement. */
.trm-od-card--final .trm-od-team__score {
    text-align: left;
}
.trm-od-row--final .trm-od-row__team-score {
    text-align: left;
}

/* ============================================================
 *  Final-game winner highlight
 * ============================================================
 * The losing team keeps the standard .--final dim treatment
 * inherited from the parent card/row. The winning team's row
 * carries a --winner modifier so we can override that dim
 * back to full color and bump the name to bold — making the
 * outcome scannable at a glance in a grid of completed games.
 *
 * Small green chevron sits before the team name as a redundant
 * cue for readers who don't rely on color contrast.
 */

/* ---- Cards layout ---- */
.trm-od-card--final .trm-od-team--winner .trm-od-team__name {
    color: #111827;
    font-weight: 700;
}
.trm-od-card--final .trm-od-team--winner .trm-od-team__record {
    color: #4b5563;
}
.trm-od-card--final .trm-od-team--winner .trm-od-team__score {
    color: var(--trm-od-scoreboard-accent-text);
    font-weight: 700;
}
.trm-od-card--final .trm-od-team--winner .trm-od-team__score::after {
    /* Small inline checkmark to the right of the score number.
     * Compact font + tight margin so it fits inside the 26px
     * score grid column for typical 1-2 digit scores; 3-digit
     * scores will overflow slightly into the 5px column gap,
     * which is acceptable for the rare blowout. */
    content: "\2713";          /* ✓ U+2713 CHECK MARK */
    color: var(--trm-od-scoreboard-accent);
    margin-left: 3px;
    font-size: 1.15em;
    font-weight: 700;
}

/* ---- Table layout ---- */
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__team-name {
    color: #111827;
    font-weight: 700;
}
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__team-meta {
    color: #4b5563;
}
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__team-score {
    color: var(--trm-od-scoreboard-accent-text);
    font-weight: 700;
}
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__team-score::after {
    /* Same inline checkmark for the table layout. The score sits
     * inside a flex row with flexible width, so there's no grid
     * column to overflow — the checkmark just sits to the right
     * of the digits. */
    content: "\2713";
    color: var(--trm-od-scoreboard-accent);
    margin-left: 4px;
    font-size: 1.15em;
    font-weight: 700;
}

/* ============================================================
 * Final-game period scores (line score)
 * ============================================================
 * When a card or table row represents a finished game and the API
 * returned per-period scores, the renderer swaps the 3-cell odds
 * area for a per-sport line score. The grid template is driven by
 * a --period-count CSS custom property the PHP sets on the body
 * element, so the same CSS adapts to 3 (NHL), 4 (NFL/NBA), 9
 * (MLB), or more (extras / OT) periods. */

/* Cards layout ------------------------------------------------- */
.trm-od-card__body--periods {
    display: grid;
    /* Team identity flexes on the left; then up to 4 period cells
     * (renderer caps the visible count, default 4); then a wider,
     * bolder final-total cell on the right edge. Cells are sized
     * generously now that we're not trying to fit 9 innings — the
     * extra breathing room helps the numbers land where the eye
     * expects them on a scoreboard line. */
    grid-template-columns:
        minmax(0, 1fr)
        repeat(var(--period-count, 4), 30px)
        40px;
    column-gap: 4px;
    row-gap: 3px;
    align-items: center;
    padding: 4px 0 3px;
}

/* Period-mode header row reuses the display:contents trick so the
 * little 1/2/3/F header spans flow directly into the parent grid. */
.trm-od-card__col-headers--periods {
    display: contents;
}
.trm-od-card__col-headers--periods > span {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    font-weight: 600;
    padding-bottom: 2px;
}
/* First slot is the empty team-name placeholder — keep it blank so
 * the column headers align with their cells, not the team name. */
.trm-od-card__col-headers--periods > .trm-od-period-header--label {
    text-align: left;
}
.trm-od-card__col-headers--periods > .trm-od-period-header--final {
    color: #111827;
    font-weight: 700;
}

/* Each period cell — small tabular-num number centered in its
 * slot. Final cell uses bolder weight to stand apart from the
 * period numbers. */
.trm-od-period {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.3;
}
.trm-od-period--final {
    font-weight: 700;
    color: #111827;
    font-size: 15px;
}

/* In a final card the loser's text is already dimmed via the
 * --final modifier on the parent card. Apply the same dim to
 * period numbers + un-dim them on the winner row. */
.trm-od-card--final .trm-od-period {
    color: #6b7280;
}
.trm-od-card--final .trm-od-team--winner .trm-od-period {
    color: #111827;
}
.trm-od-card--final .trm-od-team--winner .trm-od-period--final {
    color: var(--trm-od-scoreboard-accent-text); /* green like the winner's total score */
}

/* AT separator inside the periods grid — span all columns. */
.trm-od-card__at--periods {
    grid-column: 1 / -1;
}

/* Tighten period cells further when there are many of them (MLB
 * with 9 innings) to avoid squeezing the team-name column. The
 * --period-count value is exposed to JS via getComputedStyle but
 * CSS itself can't read it as a number — so just use a generic
 * narrower padding at small card widths. */
@media (max-width: 540px) {
    .trm-od-card__body--periods {
        grid-template-columns:
            minmax(0, 1fr)
            repeat(var(--period-count, 4), 24px)
            32px;
        column-gap: 3px;
    }
    .trm-od-period { font-size: 13px; }
    .trm-od-period--final { font-size: 14px; }
}

/* Table layout ------------------------------------------------- */
/* Same idea as cards: replace the 3 odds <th>/<td>s with N period
 * cells plus a bold final cell. Native <table> handles the column
 * sizing — we just need to style the cells and dim the loser. */
.trm-od-row__th--period,
.trm-od-row__cell--period {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 6px 10px;
    min-width: 36px;
}
.trm-od-row__th--period {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.trm-od-row__th--final,
.trm-od-row__cell--final {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 6px 12px;
    min-width: 44px;
    font-weight: 700;
}
.trm-od-row__th--final {
    font-size: 11px;
    color: #1f2937;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trm-od-row__cell--period {
    color: #1f2937;
    font-size: 15px;
}
.trm-od-row__cell--final {
    color: #111827;
    font-size: 16px;
}
.trm-od-row--final .trm-od-row__cell--period {
    color: #6b7280;
}
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__cell--period {
    color: #111827;
}
.trm-od-row--final .trm-od-row__team--winner .trm-od-row__cell--final {
    color: var(--trm-od-scoreboard-accent-text);
}

/* Winner checkmark for period-mode finals.
 * The team name carries the indicator instead of the F-total cell
 * — keeps the result attached to the team identity rather than to
 * a number that already reads as a final score on its own. Selectors
 * are scoped to period-mode parents (.trm-od-card__body--periods /
 * .trm-od-row__table--periods) so the odds-mode rendering keeps
 * its score-column checkmark unchanged. */
.trm-od-card--final .trm-od-card__body--periods .trm-od-team--winner .trm-od-team__name::after {
    content: "\2713";          /* ✓ U+2713 CHECK MARK */
    color: var(--trm-od-scoreboard-accent);
    margin-left: 5px;
    font-size: 1.15em;
    font-weight: 700;
    /* Keep the glyph inline with the team-name baseline. */
    display: inline-block;
    vertical-align: baseline;
}

.trm-od-row--final .trm-od-row__table--periods .trm-od-row__team--winner .trm-od-row__team-name::after {
    content: "\2713";
    color: var(--trm-od-scoreboard-accent);
    margin-left: 5px;
    font-size: 1.15em;
    font-weight: 700;
    display: inline-block;
    vertical-align: baseline;
}

/* Winner's final-total cell — green box matching the checkmark.
 * Cards: the .trm-od-period--final is a span inside a CSS grid
 *   cell. We give it a real border + light-green background; the
 *   parent grid column is 40px (32px on narrow), so box-sizing
 *   keeps the border inside that allotment.
 * Tables: the same effect on the <td> via inset box-shadow so the
 *   td's intrinsic width/height isn't shifted by adding a border. */
.trm-od-card--final .trm-od-card__body--periods .trm-od-team--winner .trm-od-period--final {
    display: block;
    box-sizing: border-box;
    border: 1.5px solid var(--trm-od-scoreboard-accent);
    border-radius: 3px;
    background: var(--trm-od-scoreboard-accent-bg);
    padding: 1px 0;
    color: var(--trm-od-scoreboard-accent-text);
}

.trm-od-row--final .trm-od-row__table--periods .trm-od-row__team--winner .trm-od-row__cell--final {
    box-shadow: inset 0 0 0 1.5px var(--trm-od-scoreboard-accent);
    background: var(--trm-od-scoreboard-accent-bg);
    color: var(--trm-od-scoreboard-accent-text);
    border-radius: 3px;
}

/* ============================================================
 *  Featured Lines block
 * ============================================================
 * Reuses the scoreboard's card chrome (.trm-od-card +
 * .trm-od-card__header / __title / __when) so the visual
 * language stays identical across blocks. Featured-lines-
 * specific bits below cover the body content only — a three-
 * pill odds row and a small affiliate footer.
 *
 * Outer container shares the scoreboard's .trm-od__grid layout
 * so the responsive 1/2/3-col rules above apply for free. The
 * `card_count` block attribute controls how many cards render
 * (1-3); CSS doesn't know or care. */

.trm-od-card--featured-line {
    /* Most of the chrome is inherited from .trm-od-card. We
     * only need to override the body padding back up since the
     * default scorecard card uses tight 5px top padding to make
     * the team-row grid hug the header strip; featured-lines
     * has a different body shape and benefits from a bit more
     * vertical breathing room around the odds pills. */
    padding-bottom: 8px;
}

/* Inherit the grey strip from .trm-od-card__header. Title goes
 * on the left (Away @ Home), kickoff time on the right —
 * justify-content: space-between is already set on the parent
 * selector. We just need text styling for the title since it
 * doesn't exist in the scoreboard card. */
.trm-od-card--featured-line .trm-od-card__title {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

/* Criterion row — small "Why: X" line that surfaces the API's
 * scoring rule (Longest Underdog / Biggest Spread / Highest
 * Total). Sits between the grey header strip and the odds rows.
 * Lightweight type weight so it doesn't compete with the
 * matchup name above or the odds pills below. */
.trm-od-featured-line__criterion {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 0 0;
    font-size: 11px;
    line-height: 1.3;
}

.trm-od-featured-line__criterion-label {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trm-od-featured-line__criterion-value {
    color: var(--trm-od-featured-highlight);
    font-weight: 600;
}

/* Content wrapper inside the card — separate from the
 * scoreboard's .trm-od-card__body so we don't inherit its
 * 5-column grid. Just a vertical stack of the odds row plus
 * the small affiliate footer. */
.trm-od-featured-line__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 0 2px;
}

/* Three stacked rows — each row puts the market label on the
 * left and the value box on the right. The label column is a
 * fixed-ish width so the value boxes line up vertically across
 * the three rows, regardless of label text length. */
.trm-od-featured-line__odds {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trm-od-featured-line__odds-cell {
    /* 40 / 60 split — label column on the left, value box on the
     * right at roughly 60% of the card's interior width. 2fr / 3fr
     * keeps the three rows perfectly aligned vertically and scales
     * with the card width on narrow viewports. */
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.trm-od-featured-line__odds-label {
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

/* Value box — rendered as a rounded rectangle. Either an <a>
 * (when the pick has an affiliate URL) or a <span> fallback;
 * both classes get the same dimensions so hover-affordance is
 * the only visual difference. The fixed 144px grid column above
 * sets the width; the pill stretches to fill it. */
.trm-od-featured-line__odds-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 5px;
    text-align: center;
    min-height: 28px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* Anchor variant — hover/focus state for the clickable pills.
 * Subtle background bump signals "this opens the book" without
 * underlining the value (which would look weird on odds digits). */
a.trm-od-featured-line__odds-pill:hover,
a.trm-od-featured-line__odds-pill:focus {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #111827;
    text-decoration: none;
}

/* Highlighted cell — blue tint to call out the best pick
 * of the three markets for this game. Both label + pill flip
 * to blue so the column reads as one unit. */
.trm-od-featured-line__odds-cell--highlight .trm-od-featured-line__odds-pill {
    background: var(--trm-od-featured-highlight-bg);
    border-color: var(--trm-od-featured-highlight-border);
    color: var(--trm-od-featured-highlight);
    box-shadow: 0 0 0 1px var(--trm-od-featured-highlight-border) inset;
}

/* Highlighted + clickable: deepen the blue on hover so the
 * "best pick" call-to-action reads as the obvious target. */
a.trm-od-featured-line__odds-cell--highlight .trm-od-featured-line__odds-pill:hover,
.trm-od-featured-line__odds-cell--highlight a.trm-od-featured-line__odds-pill:hover,
.trm-od-featured-line__odds-cell--highlight a.trm-od-featured-line__odds-pill:focus {
    background: var(--trm-od-featured-highlight-hover-bg);
    border-color: var(--trm-od-featured-highlight);
    color: var(--trm-od-featured-highlight);
}

.trm-od-featured-line__odds-cell--highlight .trm-od-featured-line__odds-label {
    color: var(--trm-od-featured-highlight);
}

/* ============================================================
 *  Team Stats block — leaderboard table
 * ============================================================
 * Replaces the earlier card-style layout. Renders one <table>
 * with rank | team | league | configurable stat columns. The
 * active sort column gets a subtle grey background highlight
 * (header + body cells both) so the operator can see which stat
 * the API actually sorted on.
 *
 * Stat values come pre-formatted from the API (".243", "3.20",
 * etc.) — the renderer just prints them. Numeric tabular-nums
 * keeps the digit columns vertically aligned even when a row
 * has a smaller value (".07" next to ".333").
 *
 * Horizontal scroll wrapper: a 16-stat hitting table on a
 * narrow content column overflows the page. .scroller wraps
 * the table in an overflow-x:auto so the row stays readable
 * without forcing the operator to enable full-width alignment. */

.trm-od--team-stats {
    /* Inherits .trm-od top margin (1.25em) so the block has the
     * same vertical rhythm as the other blocks. */
}

/* --- Tabs ---------------------------------------------------
 * Visitor-facing toggle that switches between the categories
 * the API ships (Batting / Pitching / Fielding for MLB, etc.).
 * Clean underline-tab style matches the screenshot the design
 * was built from. Active tab gets a thicker accent-coloured
 * border; hover state on the others previews the affordance. */
.trm-od-team-stats__tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    /* Chrome promotes overflow-y to "auto" whenever overflow-x !=
     * visible. Pin overflow-y to hidden so the strip doesn't
     * sprout a vertical scrollbar (with up/down arrows) when
     * the tabs fit fine on screen. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.trm-od-team-stats__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin: 0;
    padding: 8px 18px 10px;
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    line-height: 1.2;
    transition: color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
    margin-bottom: -1px;  /* pull tab onto the strip's bottom border */
}

.trm-od-team-stats__tab:hover,
.trm-od-team-stats__tab:focus {
    color: #111827;
    outline: none;
}

.trm-od-team-stats__tab.is-active {
    color: #111827;
    border-bottom-color: var(--trm-od-scoreboard-accent, #111827);
}

/* --- Views -------------------------------------------------- */
.trm-od-team-stats__view {
    display: none;
}

.trm-od-team-stats__view.is-active {
    display: block;
}

.trm-od-team-stats__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.trm-od-team-stats__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.3;
    color: #1f2937;
}

/* --- Header row ---------------------------------------------
 * Uppercase, letter-spaced labels in muted grey. Bottom border
 * separates header from body without competing with the cell-
 * level dotted underlines. */
.trm-od-team-stats__th {
    padding: 10px 8px;
    text-align: right;
    vertical-align: bottom;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

/* The rank column has no header label — keep it narrow + flush
 * left so the row numbers below sit cleanly beneath nothing. */
.trm-od-team-stats__th--rank {
    width: 28px;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
}

.trm-od-team-stats__th--team,
.trm-od-team-stats__th--league {
    text-align: left;
}

.trm-od-team-stats__th--team {
    padding-left: 4px;
    min-width: 140px;
}

.trm-od-team-stats__th--league {
    padding-left: 12px;
    padding-right: 12px;
}

/* Active sort column — both the header and every cell in that
 * column get a faint grey tint so the eye can lock onto the
 * sorted axis. is-sort modifier comes from the renderer based
 * on the resolved sort key. */
.trm-od-team-stats__th.is-sort {
    background: #f3f4f6;
    color: #111827;
}

/* --- Body rows ----------------------------------------------
 * Per-cell padding mirrors the header so columns stay aligned.
 * Right-aligned for numerics; team/league columns override. */
.trm-od-team-stats__td {
    padding: 10px 8px;
    text-align: right;
    border-bottom: 1px solid #f3f4f6;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
    white-space: nowrap;
}

.trm-od-team-stats__td--rank {
    color: #9ca3af;
    font-weight: 500;
    text-align: left;
    padding-left: 4px;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

.trm-od-team-stats__td--team {
    text-align: left;
    padding-left: 4px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.trm-od-team-stats__td--league {
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
    color: #6b7280;
    font-weight: 600;
}

/* Sort-column tint on body cells. Slightly lighter than the
 * header tint so the row's existing background-on-hover (if
 * any) can layer on top without fighting. */
.trm-od-team-stats__td.is-sort {
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
}

/* Last row drops its bottom border so the table tail reads
 * clean against whatever sits below. */
.trm-od-team-stats__table tbody tr:last-child .trm-od-team-stats__td {
    border-bottom: 0;
}

/* Subtle row-hover affordance — helps the eye track across a
 * long row when stats are densely packed. Skips on touch
 * because hover misfires on tap. */
@media (hover: hover) {
    .trm-od-team-stats__row:hover .trm-od-team-stats__td {
        background: #fbfbfd;
    }
    .trm-od-team-stats__row:hover .trm-od-team-stats__td.is-sort {
        background: #f1f3f6;
    }
}

/* ---- No-vig win probability bar (derived from moneyline) ---- */
.trm-od-winprob{margin-top:.6rem;padding-top:.55rem;border-top:1px solid rgba(0,0,0,.06);}
.trm-od-winprob__head{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#8a8f98;margin-bottom:.3rem;text-align:center;}
.trm-od-winprob__bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:#e9ebee;}
.trm-od-winprob__seg{display:block;height:100%;}
/* Favored side green ("good"), underdog red, exact pick'em neutral. */
.trm-od-winprob__seg--fav{background:#16a34a;}
.trm-od-winprob__seg--dog{background:#dc2626;}
.trm-od-winprob__seg--even{background:#9ca3af;}
.trm-od-winprob__labels{display:flex;justify-content:space-between;margin-top:.3rem;font-size:.72rem;font-weight:600;color:#4b5563;}
.trm-od-winprob__pct--fav{color:#15803d;}
.trm-od-winprob__pct--dog{color:#b91c1c;}
.trm-od-winprob__pct--even{color:#6b7280;}

/* ---- Multi-panel card layout (odds | meta | probable pitchers) ---- */
.trm-od-card--panels .trm-od-card__panels{display:flex;flex-wrap:wrap;align-items:stretch;}
.trm-od-card--panels .trm-od-card__panel{padding:10px 14px;}
.trm-od-card--panels .trm-od-card__panel--odds{flex:1 1 320px;min-width:300px;}
.trm-od-card--panels .trm-od-card__panel--meta{flex:1 1 180px;min-width:170px;border-left:1px solid rgba(0,0,0,.06);}
.trm-od-card--panels .trm-od-card__panel--pitchers{flex:1 1 150px;min-width:150px;border-left:1px solid rgba(0,0,0,.06);}
.trm-od-card--panels .trm-od-card__panel--odds .trm-od-card__body{padding:0;}
.trm-od-meta__line{font-size:.78rem;color:#4b5563;margin-bottom:.4rem;}
.trm-od-card__panel--meta .trm-od-winprob{border-top:0;margin-top:.5rem;padding-top:0;}
.trm-od-panel__cap{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#8a8f98;margin:0 0 .45rem;}
.trm-od-pitchers__row{margin-bottom:.55rem;}
/* Line 1: name + hand + team (team smaller/muted, on the same line). */
.trm-od-pitchers__head{display:block;line-height:1.2;}
.trm-od-pitchers__name{font-size:.85rem;font-weight:600;color:#1f2937;}
.trm-od-pitchers__num{font-size:.7rem;color:#9ca3af;margin-left:4px;}
.trm-od-pitchers__hand{font-size:.7rem;color:#6b7280;margin-left:6px;}
.trm-od-pitchers__team{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:#9ca3af;margin-left:6px;}
/* Line 2: season W-L · ERA. */
.trm-od-pitchers__stats{display:block;font-size:.7rem;color:#6b7280;margin-top:.1rem;}
/* Phone: panels stack full-width; dividing left-borders become top-borders. */
@media (max-width:600px){
  .trm-od-card--panels .trm-od-card__panel--meta,
  .trm-od-card--panels .trm-od-card__panel--pitchers{border-left:0;border-top:1px solid rgba(0,0,0,.06);flex-basis:100%;}
}

/* Keep the odds body compact inside the panel layout regardless of the
   block's column setting — the odds panel is the phone-width column. */
.trm-od-card--panels .trm-od-card__panel--odds .trm-od-card__body{
  grid-template-columns: minmax(0,1fr) 26px 62px 62px 62px;
  column-gap:5px;
}

/* Column-segmented card header — segments mirror the panel flex widths so the
   "Probable pitchers" label lines up over the pitchers panel. Drop the
   edge-bleed margins so the segment x-offsets match the panels (card padding). */
.trm-od-card--panels .trm-od-card__header--cols{
  display:flex;align-items:baseline;gap:0;margin:-5px -8px 6px;padding:7px 0;
}
.trm-od-card__hcol{padding:0 14px;}
.trm-od-card__hcol--odds{flex:1 1 320px;min-width:300px;}
.trm-od-card__hcol--pitchers{flex:1 1 150px;min-width:150px;border-left:1px solid transparent;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;}
.trm-od-card__hcol--meta{flex:1 1 180px;min-width:170px;border-left:1px solid transparent;display:flex;justify-content:flex-end;}

/* Align the header segments to the panel origin (no horizontal edge-bleed) so
   the column labels sit exactly over their panels. */
.trm-od-card--panels .trm-od-card__header--cols{margin-left:0;margin-right:0;}

/* Center each pitcher on its team's odds row: offset past the column-header
   row (~14px + 2px row-gap), then two equal flex slots that center their
   content — since both team rows are equal height, each pitcher lands on its
   row. Tune --offset / --gap if it sits a hair high or low. */
.trm-od-card__panel--pitchers{display:flex;flex-direction:column;}
.trm-od-pitchers__offset{flex:0 0 16px;}
.trm-od-pitchers__gap{flex:0 0 18px;}
.trm-od-pitchers__slot{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;}
.trm-od-card__panel--pitchers .trm-od-pitchers__row{margin-bottom:0;}