/* ============================================================
   TrackEdge Race Cards — racecards.css
   Production stylesheet for the race cards page template.
   ============================================================ */

/* ── Animations ─────────────────────────────────────────────── */
@keyframes te-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

@keyframes te-flash {
    0%   { background: #fef9c3; }
    60%  { background: #fef9c3; }
    100% { background: transparent; }
}

/* ── Race cards compact hero (overrides the full 90vh homepage hero) ── */
.te-races-page .te-hero {
    min-height: unset;
    padding: 28px 24px 24px;
}
.te-races-page .te-hero__content {
    padding: 0;
}
.te-races-page .te-hero__title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    margin-bottom: 6px;
    line-height: 1.1;
}
.te-races-page .te-hero__sub {
    font-size: 0.875rem;
    margin: 0;
    color: var(--te-grey-200, #aaa);
}
.te-races-page .te-hero__meta {
    margin-top: 8px;
}

/* ── Page wrapper ───────────────────────────────────────────── */
.te-races-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* ── Hero header ────────────────────────────────────────────── */
.te-hero {
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    padding: 32px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.te-hero__title {
    color: #d4a017;
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.15;
}

.te-hero__sub {
    color: #ffffff;
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
}

.te-hero__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Live indicator */
.te-live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    animation: te-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.te-live-label {
    font-size: 0.72rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

#te-last-updated {
    font-size: 0.78rem;
    color: #ffffff;
    opacity: 0.7;
}

/* ── Date navigation bar ────────────────────────────────────── */
.te-date-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--te-dark, #1a1a2e);
    border-bottom: 1px solid #e2e4e9;
    padding: 0 20px;
}

.te-date-nav__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0;
}

.te-date-nav__track::-webkit-scrollbar {
    display: none;
}

/* Date pills */
.te-date-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #6b7280;
    border-radius: 6px 6px 0 0;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-bottom-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.te-date-pill:hover {
    color: #d4a017;
    text-decoration: none;
}

.te-date-pill--active {
    color: #d4a017;
    border-bottom-color: #d4a017;
    font-weight: 600;
}

.te-date-pill__day {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.te-date-pill__num {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.te-date-pill__mon {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ── Meetings container ─────────────────────────────────────── */
.te-meetings {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Empty state */
.te-empty {
    text-align: center;
    padding: 64px 24px;
    color: #6b7280;
}

.te-empty__icon {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
}

/* ── Venue card ─────────────────────────────────────────────── */
.te-venue {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: visible;
}

.te-venue__hd {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/* Venue header */
.te-venue__hd {
    background: linear-gradient(135deg, #1a2332 0%, #243044 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    cursor: pointer;
}

.te-venue__hd-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Collapse button */
.te-venue__collapse {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    line-height: 1;
    touch-action: manipulation;
}

.te-venue__collapse .te-icon-chevron {
    transition: transform 0.25s ease;
    display: inline-block;
}

.te-venue__collapse[aria-expanded="false"] .te-icon-chevron {
    transform: rotate(-90deg);
}

.te-venue__name {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.te-venue__state {
    background: #d4a017;
    color: #1a2332;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.te-venue__hd-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Track condition badges */
.te-cond {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.te-cond--good3,
.te-cond--good4 {
    background: #16a34a;
}

.te-cond--soft5,
.te-cond--soft6 {
    background: #f59e0b;
}

.te-cond--heavy8,
.te-cond--heavy9,
.te-cond--heavy10 {
    background: #7c3aed;
}

.te-cond--firm1,
.te-cond--firm2 {
    background: #dc2626;
}

.te-venue__rail {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
}

.te-venue__wx {
    display: flex;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    align-items: center;
}

/* Venue body */
.te-venue__bd {
    overflow: hidden;
}

.te-no-races {
    padding: 20px;
    color: #6b7280;
    font-style: italic;
}

/* ── Race strip (pill row) ──────────────────────────────────── */
.te-race-strip {
    background: #f5f6f8;
    border-bottom: 1px solid #e2e4e9;
    padding: 12px 16px;
}

.te-race-strip__scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.te-race-strip__scroll::-webkit-scrollbar {
    display: none;
}

/* Race pills */
.te-rpill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e2e4e9;
    border-radius: 8px;
    cursor: pointer;
    gap: 2px;
    transition: all 0.15s ease;
    min-width: 52px;
    font-family: inherit;
    flex-shrink: 0;
    touch-action: manipulation;
}

.te-rpill:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #d4a017;
}

.te-rpill--active {
    background: #1a2332;
    border-color: #1a2332;
    color: #ffffff;
}

.te-rpill__num {
    font-size: 0.85rem;
    font-weight: 700;
}

.te-rpill__time {
    font-size: 0.7rem;
    opacity: 0.7;
}

.te-rpill__badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-top: 2px;
}

.te-rpill__badge--soon {
    background: #fef3c7;
    color: #92400e;
}

.te-rpill__badge--closed {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ── Race panels ────────────────────────────────────────────── */
.te-race-panels {
    padding: 0;
}

.te-rpanel {
    padding: 0;
}

/* ── Race info bar ──────────────────────────────────────────── */
.te-rbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e4e9;
    flex-wrap: wrap;
}

.te-rbar__badge {
    width: 44px;
    height: 44px;
    background: #1a2332;
    color: #d4a017;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.te-rbar__info {
    flex: 1;
    min-width: 0;
}

.te-rbar__name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1a1a2e;
}

.te-rbar__meta {
    font-size: 0.82rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.te-rbar__sep {
    color: #d1d5db;
}

.te-rbar__prize {
    color: #d4a017;
    font-weight: 600;
}

.te-rbar__right {
    margin-left: auto;
}

/* Race status badges */
.te-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.te-status--soon {
    background: #fef3c7;
    color: #92400e;
}

.te-status--closed {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ── Runners table ──────────────────────────────────────────── */
.te-runners-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.te-rtable {
    width: 100%;
    min-width: 480px; /* compact 6-col field; scrolls only on small phones */
    border-collapse: collapse;
    font-size: 0.85rem;
}

.te-rtable thead th {
    background: #1a2332;
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 9px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.te-rtable tbody td {
    padding: 6px 9px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    color: #1a1a2e;
    vertical-align: middle;
}

/* Row alternating / hover states */
.te-rrow:nth-child(even) td {
    background: #fafbfd;
}

.te-rrow:hover td {
    background: #fffbeb;
}

/* Scratched row — race card */
.te-rrow--scratched td {
    opacity: 0.55;
    text-decoration: line-through;
}

/* Scratched row — sectionals table (mirrors race-card treatment) */
.te-sects-row--scratched td {
    opacity: 0.55;
    text-decoration: line-through;
}

/* ── Column widths ──────────────────────────────────────────── */
.te-th-no {
    width: 36px;
    text-align: center;
}

.te-th-brr {
    width: 46px;
    text-align: center;
}

.te-th-horse {
    min-width: 150px;
}

.te-th-jockey {
    min-width: 130px;
}

.te-th-trainer {
    min-width: 130px;
}

.te-th-form {
    width: 120px;
}

.te-th-career {
    width: 80px;
    text-align: center;
}

.te-th-jt {
    width: 54px;
    text-align: right;
}

.te-th-days {
    width: 46px;
    text-align: right;
}

.te-th-win {
    width: 68px;
    text-align: right;
}

.te-th-plc {
    width: 68px;
    text-align: right;
}

/* td column alignment matching th */
.te-td-no {
    text-align: center;
}

.te-td-brr {
    text-align: center;
}

.te-td-career {
    text-align: center;
}

.te-td-jt {
    text-align: right;
}

.te-td-days {
    text-align: right;
}

.te-td-win {
    text-align: right;
    font-weight: 700;
}

.te-td-plc {
    text-align: right;
    font-weight: 700;
}

/* ── Barrier balls ──────────────────────────────────────────── */
.te-brr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
}

.te-brr--1  { background: #e53e3e; }
.te-brr--2  { background: #edf2f7; color: #2d3748; border: 2px solid #cbd5e0; }
.te-brr--3  { background: #3182ce; }
.te-brr--4  { background: #d69e2e; color: #744210; }
.te-brr--5  { background: #38a169; }
.te-brr--6  { background: #9f7aea; }
.te-brr--7  { background: #ed8936; }
.te-brr--8  { background: #2d3748; }
.te-brr--9  { background: #ed64a6; }
.te-brr--10 { background: #319795; }
.te-brr--11 { background: #c05621; }
.te-brr--12 { background: #718096; }
.te-brr--13 { background: #667eea; }
.te-brr--14 { background: #b794f4; color: #44337a; }
.te-brr--15 { background: #4a5568; }
.te-brr--16 { background: #4a5568; }
.te-brr--17 { background: #4a5568; }
.te-brr--18 { background: #4a5568; }
.te-brr--19 { background: #4a5568; }
.te-brr--20 { background: #4a5568; }

/* ── Form boxes ─────────────────────────────────────────────── */
.te-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
}

.te-fb--1 { background: #d4a017; color: #1a1a2e; }
.te-fb--2 { background: #9ca3af; }
.te-fb--3 { background: #b45309; }
.te-fb--4 { background: #16a34a; }
.te-fb--5 { background: #16a34a; }
.te-fb--6 { background: #f59e0b; color: #1a1a2e; }
.te-fb--7 { background: #f59e0b; color: #1a1a2e; }
.te-fb--8 { background: #f59e0b; color: #1a1a2e; }
.te-fb--9 { background: #f59e0b; color: #1a1a2e; }
.te-fb--0 { background: #6b7280; }
.te-fb--x { background: #374151; }

.te-form-wrap {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
}

/* ── Odds cells ─────────────────────────────────────────────── */
.te-odds-in {
    color: #16a34a;
}

.te-odds-drift {
    color: #dc2626;
}

.te-cell-win,
.te-cell-plc {
    font-variant-numeric: tabular-nums;
}

/* Price flash animation */
.te-price-flash {
    animation: te-flash 1.2s ease-out;
}

/* ── Horse name / scratched label ───────────────────────────── */
.te-td-horse { line-height: 1.15; }
.te-horse-name {
    font-weight: 700;
    font-size: 0.9rem;
    display: block;
}

.te-horse-scr {
    display: inline-block;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Sortable column headers ────────────────────────────────── */
th[data-sortable] {
    cursor: pointer;
    user-select: none;
}

th[data-sortable]::after {
    content: ' ⇕';
    font-size: 0.7em;
    opacity: 0.5;
}

th[data-sortable].sort-asc::after {
    content: ' ▲';
    opacity: 1;
}

th[data-sortable].sort-desc::after {
    content: ' ▼';
    opacity: 1;
}

/* ── Sectionals block ───────────────────────────────────────── */
.te-sects {
    border-top: 2px solid #d4a017;
}

.te-sects__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fffbeb;
    flex-wrap: wrap;
    gap: 8px;
}

.te-sects__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a2332;
}

.te-sects__admin-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.te-sects__pub-btn {
    padding: 6px 14px;
    background: #1a2332;
    color: #d4a017;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    font-family: inherit;
}

.te-sects__pub-btn:hover {
    opacity: 0.85;
}

.te-sects__pub-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sectionals body and lock gate */
.te-sects__body {
    position: relative;
}

.te-sects__body--locked .te-sects-scroll table {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.te-lock-gate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
}

.te-lock-gate__card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    max-width: 300px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.te-lock-gate__icon {
    margin-bottom: 12px;
    font-size: 2rem;
    display: block;
}

.te-lock-gate__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2332;
    margin: 0 0 8px;
}

.te-lock-gate__desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 16px;
}

.te-lock-gate__btn {
    display: inline-block;
    background: #d4a017;
    color: #1a2332;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: opacity 0.15s ease;
}

.te-lock-gate__btn:hover {
    opacity: 0.88;
    text-decoration: none;
    color: #1a2332;
}

.te-lock-gate__login {
    margin-top: 12px;
    font-size: 0.8rem;
    color: #6b7280;
}

.te-lock-gate__login a {
    color: #d4a017;
    text-decoration: none;
}

.te-lock-gate__login a:hover {
    text-decoration: underline;
}

/* Sectionals scroll and table */
.te-sects-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.te-stable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.te-stable thead th {
    background: #f8f9fa;
    padding: 8px 10px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #e2e4e9;
    white-space: nowrap;
}

.te-stable tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
    color: #1a1a2e;
}

.te-stable tbody tr:nth-child(even) td {
    background: #fafbfd;
}

/* ── Responsive — 900px ─────────────────────────────────────── */
@media (max-width: 900px) {
    .te-th-trainer,
    .te-td-trainer {
        display: none;
    }
}

/* ── Responsive — 640px ─────────────────────────────────────── */
@media (max-width: 640px) {
    .te-hero {
        padding: 20px 16px;
    }

    .te-hero__title {
        font-size: 1.5rem;
    }

    .te-races-page {
        padding: 0 10px;
    }

    .te-th-jockey,
    .te-td-jockey,
    .te-th-career,
    .te-td-career,
    .te-th-jt,
    .te-td-jt {
        display: none;
    }

    .te-brr {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    .te-venue {
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .te-venue__hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }

    .te-venue__hd-right {
        flex-wrap: wrap;
        gap: 6px;
    }

    .te-race-strip__scroll {
        gap: 4px;
    }

    .te-rpill {
        min-width: 52px;
        min-height: 44px;
        padding: 10px 8px;
        font-size: 0.75rem;
    }

    .te-rbar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .te-rbar__name {
        font-size: 0.9rem;
    }

    .te-date-nav__track {
        gap: 4px;
    }

    .te-date-pill {
        min-width: 52px;
        padding: 8px 6px;
        font-size: 0.72rem;
    }

    .te-date-pill__num {
        font-size: 1.1rem;
    }

    .te-sects-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .te-stable {
        min-width: 600px;
    }
}

/* ============================================================
   DESIGN UPGRADE — saddlecloth numbers, run chips, odds arrows,
   sectional speed bars, mono numbers, mobile runner cards.
   ============================================================ */

/* Tabular figures so columns of numbers line up */
.te-td-win, .te-td-plc, .te-td-jt, .te-td-days, .te-td-no, .te-td-brr,
.te-stable td, .te-sects-avg, .te-rpill__time {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Saddlecloth number (coloured by runner number, like real racing) */
.te-silk {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 5px; border-radius: 5px;
    font-weight: 800; font-size: 0.82rem; color: #fff; line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.te-silk--1{background:#e53e3e}.te-silk--2{background:#edf2f7;color:#2d3748;border:1px solid #cbd5e0}
.te-silk--3{background:#3182ce}.te-silk--4{background:#d69e2e;color:#744210}
.te-silk--5{background:#38a169}.te-silk--6{background:#9f7aea}.te-silk--7{background:#ed8936}
.te-silk--8{background:#2d3748}.te-silk--9{background:#ed64a6}.te-silk--10{background:#319795}
.te-silk--11{background:#c05621}.te-silk--12{background:#718096}.te-silk--13{background:#667eea}
.te-silk--14{background:#b794f4;color:#44337a}.te-silk--15,.te-silk--16,.te-silk--17,
.te-silk--18,.te-silk--19,.te-silk--20{background:#4a5568}

/* Barrier as a plain, secondary pill (colour now lives on the saddlecloth) */
.te-brr-plain {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 4px; border-radius:4px;
    background:#23232f; color:#9aa0ad; font-size:0.78rem; font-weight:600;
    border:1px solid #2f2f3c;
}

/* Jockey / trainer line tucked under the horse name */
.te-horse-sub { display:block; font-size:0.7rem; color:#8a8a9a; margin-top:1px; line-height:1.15; }
.te-horse-sub::before { content:"("; }
.te-horse-sub::after  { content:")"; }

/* Run-style chips (factual pace read from sectionals, not the tip) */
.te-run {
    display:inline-block; min-width:34px; text-align:center; padding:2px 7px;
    border-radius:999px; font-size:0.68rem; font-weight:800; letter-spacing:.02em;
    text-transform:uppercase;
}
.te-run--leader     { background:#3a1407; color:#ff9f57; border:1px solid #6b2a10; }
.te-run--onpace     { background:#3a2f06; color:#ffd24a; border:1px solid #6b560f; }
.te-run--midfield   { background:#0c2438; color:#5bb8ef; border:1px solid #16466b; }
.te-run--backmarker { background:#241433; color:#c79cff; border:1px solid #46256b; }
.te-run--unk        { background:transparent; color:#54545f; font-weight:600; }
.te-th-run, .te-td-run { text-align:center; width:48px; }

/* Odds firm/drift arrows */
.te-odds-arrow { font-size:0.62rem; margin-left:3px; vertical-align:middle; }
.te-odds-arrow--in    { color:#22c55e; }
.te-odds-arrow--drift { color:#ef4444; }

/* Sectional Avg speed bar (visual magnitude behind the number) */
.te-sbar {
    position:relative; display:inline-flex; align-items:center; justify-content:flex-end;
    min-width:46px; padding:2px 6px; border-radius:4px; overflow:hidden;
    background:rgba(255,255,255,.04);
}
.te-sbar::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:var(--w,0%);
    background:linear-gradient(90deg,#16351f,#1f7a44); opacity:.6; z-index:0;
}
.te-sbar strong { position:relative; z-index:1; }
.te-sects-best .te-sbar strong { color:#5ef0a0; }
.te-sects-best .te-sbar::before { opacity:.85; }
/* Fastest split (L600/L400/L200) highlight — same green language as best Avg */
td.te-sects-l600.te-sects-best,
td.te-sects-l400.te-sects-best,
td.te-sects-l200.te-sects-best {
    background:#16351f; color:#5ef0a0; font-weight:800; border-radius:4px;
}

/* Sticky race-number tabs while scrolling a venue */
.te-race-strip { position:sticky; top:56px; z-index:6; background:var(--te-card,#1A1A24); }

/* ── Mobile: KEEP the table, just trim to the essential columns ─────────
   Stays tabular (one row per runner) — no stacked cards / endless scrolling.
   At ≤640px the existing rules already hide Jockey/Career/J-T%; here we also
   drop Run, Barrier, Days and Plc$, leaving: No · Horse(+jockey/trainer) ·
   Form · Win$ — which fits a phone with no sideways scroll. */
@media (max-width: 640px) {
    .te-th-run, .te-td-run,
    .te-th-brr, .te-td-brr,
    .te-th-days, .te-td-days,
    .te-th-plc, .te-td-plc { display: none; }
    .te-rtable thead th { padding: 7px 6px; font-size: 0.72rem; }
    .te-rtable tbody td  { padding: 8px 6px; font-size: 0.82rem; }
    .te-horse-name { font-size: 0.86rem; }
    .te-horse-sub  { font-size: 0.68rem; }
    .te-silk { min-width: 24px; height: 24px; font-size: 0.78rem; }
}