/* /Components/Layout/AdminTopBar.razor.rz.scp.css */
/* AdminTopBar styles live globally in wwwroot/css/rallytrack.css so they
   can be shared with PublicChrome. This file intentionally empty. */
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Centred shell for unauthenticated pages (login, first-time setup). */

.rt-auth-shell[b-u2e89v8erg] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    color: var(--fg);
    padding: var(--s-5);
}

.rt-auth-card[b-u2e89v8erg] {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
/* /Components/Layout/EventContextMenu.razor.rz.scp.css */
/* =========================================================================
   Event context menu — horizontal tabs that appear under the top bar when
   the admin is inside an event (/admin/events/{id}/...). Matches the
   .event-tabs treatment from the mockup (~lines 455–478).

   Selectors use ::deep so the rules reach the <a> elements rendered by the
   <NavLink> child component (whose root sits in NavLink's CSS isolation
   scope, not this component's).
   ========================================================================= */

.rt-event-context[b-ig7l0up9ff] {
    position: sticky;
    /* Sticks to the top of the scrolling .rt-admin-main (which begins directly
       below the fixed top bar), so top: 0 pins it under the top bar. */
    top: 0;
    z-index: 40;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line);
}

.rt-event-context-tabs[b-ig7l0up9ff] {
    display: flex;
    gap: 0;
    padding: 0 var(--s-5);
    overflow-x: auto;
}

.rt-event-context-tabs[b-ig7l0up9ff]  .rt-event-tab {
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
}

.rt-event-context-tabs[b-ig7l0up9ff]  .rt-event-tab:hover {
    color: var(--fg);
    text-decoration: none;
}

.rt-event-context-tabs[b-ig7l0up9ff]  .rt-event-tab.active {
    color: var(--fg);
    border-bottom-color: var(--rally-red);
}

@media (max-width: 640.98px) {
    .rt-event-context-tabs[b-ig7l0up9ff] {
        padding: 0 var(--s-3);
    }
    .rt-event-context-tabs[b-ig7l0up9ff]  .rt-event-tab {
        padding: 12px 12px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =========================================================================
   Admin shell — three-region chrome per design.md §11.0:
   - Top bar (sticky, full width)
   - Sidebar (collapsible on desktop; slide-in drawer on mobile)
   - Main column: EventContextMenu (when inside an event) + page content

   Sidebar visibility is driven by JS-managed body classes (sb-collapsed for
   desktop hide, sb-open for mobile drawer). The hamburger in AdminTopBar
   toggles them via window.RallyTrack.Sidebar.toggle().
   ========================================================================= */

.rt-admin-shell[b-8mn5kvs9r5] {
    /* Pin the shell to the viewport so the top bar and sidebar stay fixed and
       only the main column scrolls vertically (an app-shell layout). */
    height: 100vh;
    overflow: hidden;
    background: var(--bg-base);
    color: var(--fg);
    display: flex;
    flex-direction: column;
}

.rt-admin-body[b-8mn5kvs9r5] {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.rt-admin-sidebar[b-8mn5kvs9r5] {
    width: 220px;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    flex-shrink: 0;
}

.rt-admin-main[b-8mn5kvs9r5] {
    flex: 1 1 auto;
    min-width: 0;
    /* The vertical scroll container for page content, so the sidebar stays
       fixed while the right pane scrolls. The event-context tabs are the first
       child here and stick to the top of THIS box (top: 0) — i.e. directly
       under the fixed top bar. Pages that need horizontal scroll (scoring grid)
       still supply their own width-constrained wrapper with overflow:auto. */
    overflow-y: auto;
}

.rt-admin-main .content[b-8mn5kvs9r5] {
    padding: var(--s-5) var(--s-6);
}

/* Mobile-drawer chrome (the body.sb-* visibility rules live in the global
   wwwroot/css/rallytrack.css because component-scoped CSS can't target the
   <body> element). */

@media (max-width: 768px) {
    .rt-admin-sidebar[b-8mn5kvs9r5] {
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        z-index: 45;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: var(--shadow-2);
    }

    .rt-admin-main .content[b-8mn5kvs9r5] {
        padding: var(--s-4);
    }
}

/* ── Error UI ───────────────────────────────────────────────────────────── */

#blazor-error-ui[b-8mn5kvs9r5] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--rally-red);
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    color: var(--fg);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-body);
}

#blazor-error-ui .dismiss[b-8mn5kvs9r5] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =========================================================================
   Admin sidebar nav. Lives inside the .rt-admin-sidebar from MainLayout.
   The brand row is owned by AdminTopBar; this component is nav links only.
   ========================================================================= */

.rt-sidebar-nav[b-2mylok37ih] {
    padding: var(--s-4) 0;
}

.rt-sidebar-section[b-2mylok37ih] {
    padding: var(--s-4) var(--s-4) var(--s-2);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-dim);
}

.nav-item[b-2mylok37ih] {
    padding: 0;
}

.nav-item[b-2mylok37ih]  .nav-link {
    color: var(--fg-muted);
    background: none;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    line-height: 2.5rem;
    width: 100%;
    padding: 0 var(--s-4);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.nav-item[b-2mylok37ih]  a.active {
    background-color: var(--bg-elevated);
    color: var(--fg);
    border-left-color: var(--rally-red);
}

.nav-item[b-2mylok37ih]  .nav-link:hover {
    background-color: var(--bg-elevated);
    color: var(--fg);
    text-decoration: none;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* =========================================================================
   Public site layout — slim chrome topbar per §11.0 concern 8.
   The chrome itself is owned by Components/Layout/PublicChrome.razor and
   shares .rt-topbar / .logo-mark / .chrome-clock / .chrome-countdown styles
   with the admin top bar (defined globally in wwwroot/css/rallytrack.css).
   ========================================================================= */

.rt-public-main[b-fvwwcpih66] {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--s-6);
}

#blazor-error-ui[b-fvwwcpih66] {
    background: var(--bg-elevated);
    border-top: 1px solid var(--rally-red);
    bottom: 0;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    color: var(--fg);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font-body);
}

#blazor-error-ui .dismiss[b-fvwwcpih66] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5fq3updh8t],
.components-reconnect-repeated-attempt-visible[b-5fq3updh8t],
.components-reconnect-failed-visible[b-5fq3updh8t],
.components-pause-visible[b-5fq3updh8t],
.components-resume-failed-visible[b-5fq3updh8t],
.components-rejoining-animation[b-5fq3updh8t] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-retrying[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-failed[b-5fq3updh8t],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-5fq3updh8t] {
    display: block;
}


#components-reconnect-modal[b-5fq3updh8t] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5fq3updh8t 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-5fq3updh8t 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-5fq3updh8t 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-5fq3updh8t]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-5fq3updh8t 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-5fq3updh8t {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-5fq3updh8t {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-5fq3updh8t {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-5fq3updh8t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-5fq3updh8t] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-5fq3updh8t] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-5fq3updh8t] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-5fq3updh8t] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-5fq3updh8t] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-5fq3updh8t] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-5fq3updh8t 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-5fq3updh8t] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-5fq3updh8t {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/EventSetup.razor.rz.scp.css */
/* ── Lifecycle confirmation modals ───────────────────────────────────────── */

.pa-comment-overlay[b-zfzj481hen] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-comment-box[b-zfzj481hen] {
    background: var(--bg-surface);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    min-width: 22rem;
    max-width: 30rem;
    box-shadow: var(--shadow-2);
}
/* /Components/Pages/Admin/ScoringGrid.razor.rz.scp.css */
/* =========================================================================
   Scoring grid — dark-mode design system.
   Cell states per design.md §11.4.4 (attention-based, not source-based).
   Visual reference: docs/rallytrack-mockups.html lines 858–1001.

   Cell backgrounds fill the td edge-to-edge (no radius, no internal gap)
   so the colour blocks read as a continuous strip across the row. Zero
   E/L and zero Penalty values render dim — they hold a value, just not
   an actionable one. Non-zero E/L and Penalty cells get a red background
   to draw the eye.
   ========================================================================= */

/* ── Grid frame ─────────────────────────────────────────────────────────── */

/* Fill the available viewport space below the admin chrome. The offset
   accounts for AdminTopBar (64px), EventContextMenu (~44px), .content
   vertical padding (48px = 2 × var(--s-5)), the "← Setup / Scoring Grid"
   heading row including its mb-3 (~56px), the heat tab strip (~38px), and
   a small grace gap. Tune the offset if those rows change height. */
.scoring-grid-wrap[b-in9vpfei29] {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: auto;
    height: calc(100vh - 250px);
    min-height: 400px;
}

.scoring-grid[b-in9vpfei29] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: var(--bg-surface);
    margin: 0;
}

/* ── Sticky header rows ─────────────────────────────────────────────────── */

.scoring-grid thead tr.sticky-row[b-in9vpfei29] {
    position: sticky;
    z-index: 3;
}

/* Row 1 holds the rowspan=2 "Car" corner. The z-index on each <tr> creates a
   stacking context, so the Car cell's own z-index can't beat a sibling row —
   without this, row 2 (later in the DOM, equal z-index) painted its subheaders
   OVER the frozen Car corner during horizontal scroll. Raising row 1 above row
   2 fixes that; the two rows never overlap elsewhere (different `top` bands),
   so nothing else is affected. */
.scoring-grid thead tr.sticky-row-1[b-in9vpfei29] { top: 0; z-index: 4; }
.scoring-grid thead tr.sticky-row-2[b-in9vpfei29] { top: var(--hdr1, 36px); z-index: 3; }

/* ── Sticky car column ──────────────────────────────────────────────────── */

.scoring-grid .sticky-col[b-in9vpfei29] {
    position: sticky;
    z-index: 1;
    background: var(--bg-elevated);
}

.scoring-grid thead .sticky-col[b-in9vpfei29] {
    z-index: 4;
    background-color: var(--bg-elevated-2);
    color: var(--fg);
}

.sticky-col-car[b-in9vpfei29] {
    left: 0;
    min-width: 3.5rem;
    width: 3.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

/* §11.4.4 car-number colour model. Out of competition (DNS/DNF/ELT/DQ): solid
   red background with light text. Still running but penalised, or with an
   unresolved row conflict: red text on the default background. The out state
   wins (it sets the background; text stays light). No text badges. */
.scoring-grid tbody td.sticky-col-car.car-out[b-in9vpfei29] {
    background: var(--rally-red) !important;
    color: #fff;
    font-weight: 800;
}

.scoring-grid tbody td.sticky-col-car.car-penalty[b-in9vpfei29] {
    color: var(--rally-red);
    font-weight: 800;
}

/* Car number is clickable to highlight the row. */
.scoring-grid tbody td.car-clickable[b-in9vpfei29] {
    cursor: pointer;
    user-select: none;
}

/* Row highlight (click a car number): a thin green outline around the whole
   row so the operator can track it across the wide, horizontally-scrolled grid.
   border-collapse:separate means we draw the rectangle from the cells — a green
   top+bottom on every cell, plus a green left edge on the frozen car column and
   a green right edge on the last cell. */
.scoring-grid tbody tr.row-selected td[b-in9vpfei29] {
    border-top: 1px solid var(--green) !important;
    border-bottom: 1px solid var(--green) !important;
}

.scoring-grid tbody tr.row-selected td.sticky-col-car[b-in9vpfei29] {
    border-left: 1px solid var(--green) !important;
}

.scoring-grid tbody tr.row-selected td:last-child[b-in9vpfei29] {
    border-right: 1px solid var(--green) !important;
}

/* ── Header chrome ──────────────────────────────────────────────────────── */

.scoring-grid thead th[b-in9vpfei29] {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-dim);
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-strong);
    border-right: 1px solid var(--line);
    text-align: center;
    white-space: nowrap;
    background: var(--bg-elevated);
}

.sub-col[b-in9vpfei29] {
    min-width: 3rem;
    vertical-align: bottom;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px !important;
}

.col-target[b-in9vpfei29] { min-width: 3rem;   width: 3rem;   }
.col-el[b-in9vpfei29]     { min-width: 3rem;   width: 3rem;   }
.col-pt[b-in9vpfei29]     { min-width: 3.5rem; width: 3.5rem; }
.col-pa[b-in9vpfei29]     { min-width: 3.5rem;               }
.col-calc[b-in9vpfei29]   { min-width: 3rem;   width: 3rem;   }
.col-live[b-in9vpfei29]   { min-width: 3.5rem; width: 3.5rem; }

/* Group dividers between TC/SS blocks. */
.scoring-grid .group-end[b-in9vpfei29] {
    border-right: 2px solid var(--line-strong) !important;
}

/* Row-1 group headers — calmer green for TC, calmer blue for SS to match
   the cell-tone palette below. */
.scoring-grid thead .item-group-header[b-in9vpfei29] {
    white-space: normal;
    line-height: 1.2;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.scoring-grid thead .item-group-header.bg-tc[b-in9vpfei29] {
    background-color: #0F1A24 !important;
    color: var(--green);
}

.scoring-grid thead .item-group-header.bg-ss[b-in9vpfei29] {
    background-color: #0E1B2A !important;
    color: var(--cyan);
}

/* ── Body cells: defaults ───────────────────────────────────────────────── */
/* Cells render flush — zero padding on the td, the content lives in a
   <span class="cell-ro"> (read-only) or the rendered <input> (editable).
   Padding lives on the inner element so the background colour fills the
   entire td. */

.scoring-grid tbody td[b-in9vpfei29] {
    padding: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    height: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    position: relative;
    color: var(--fg);
    background: transparent;
    vertical-align: middle;
}

.scoring-grid tbody tr:nth-child(even) td:not(.cell-prov):not(.cell-verified):not(.cell-conflict):not(.cell-tc):not(.cell-ss):not(.cell-penalty):not(.cell-el-late):not(.cell-el-early):not(.cell-na):not(.cell-focus):not(.pa-applied)[b-in9vpfei29] {
    background: var(--bg-stripe);
}

.scoring-grid tbody tr:hover td:not(.cell-prov):not(.cell-verified):not(.cell-conflict):not(.cell-tc):not(.cell-ss):not(.cell-penalty):not(.cell-el-late):not(.cell-el-early):not(.cell-focus)[b-in9vpfei29] {
    background: var(--bg-elevated);
}

/* ── Cell-tone classes (design.md §11.4.4 + mockup CSS) ─────────────────── */
/* "Routine value present" tones: calm green for TC check-ins, calm blue
   for stage Start/Finish/StageTime. These keep the eye moving across the
   grid rather than stopping on every populated cell. */

.scoring-grid tbody td.cell-tc[b-in9vpfei29] {
    background: rgba(43, 182, 115, 0.10) !important;
    color: var(--green);
}

.scoring-grid tbody td.cell-ss[b-in9vpfei29] {
    background: rgba(56, 189, 248, 0.10) !important;
    color: var(--cyan);
}

/* "Dim" tone for legitimate zero/no-action values — Target Time, zero
   E/L, dash Penalty Time, empty Penalty Adjust placeholder. */
.scoring-grid tbody td.cell-dim[b-in9vpfei29],
.scoring-grid tbody td.cell-target[b-in9vpfei29] {
    color: var(--fg-dim);
}

/* "Attention required" tones — non-zero E/L and Penalty Time get the red
   penalty background. Direction of E/L is signalled by text colour:
   late = rally-red, early = cyan. */
.scoring-grid tbody td.cell-penalty[b-in9vpfei29] {
    background: var(--rally-red-glow) !important;
    color: var(--rally-red);
}

.scoring-grid tbody td.cell-el-late[b-in9vpfei29] {
    background: var(--rally-red-glow) !important;
    color: var(--rally-red);
}

.scoring-grid tbody td.cell-el-early[b-in9vpfei29] {
    background: var(--rally-red-glow) !important;
    color: var(--cyan);
}

/* ── Attention-based verification states ────────────────────────────────── */

.scoring-grid tbody td.cell-empty[b-in9vpfei29] {
    color: var(--fg-faint);
}

.scoring-grid tbody td.cell-prov[b-in9vpfei29] {
    background: var(--amber-glow) !important;
    color: var(--amber);
}

.scoring-grid tbody td.cell-verified[b-in9vpfei29] {
    background: var(--green-glow) !important;
    color: var(--green);
}

.scoring-grid tbody td.cell-conflict[b-in9vpfei29] {
    background: var(--pink-glow) !important;
    color: var(--pink);
}

.scoring-grid tbody td.cell-conflict[b-in9vpfei29]::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pink);
    z-index: 1;
}

.scoring-grid tbody td.cell-na[b-in9vpfei29] {
    color: var(--fg-faint);
    background: rgba(255, 255, 255, 0.02) !important;
}

.scoring-grid tbody td.cell-focus[b-in9vpfei29] {
    outline: 2px solid var(--rally-red);
    outline-offset: -2px;
    background: var(--rally-red-glow) !important;
    color: var(--fg);
}

/* ── §11.4.4 (v2.13.2): RallySafe-event cell states ─────────────────────── */
/* Two new tones layered on top of the default styling for RallySafe
   events specifically. The default state is unchanged — no extra class is
   needed when the cell holds a RallySafe-provided value, and (per item 10)
   none is needed either when the operator types into a previously-empty
   cell — that's identical data entry to a Manual-mode event, so it renders
   with the same default cell-tc tone rather than a distinct one. */

/* "No time recorded — check timecard". The TC has no ControlTime row at
   all, prompting the operator to enter the value from the paper timecard.
   The yellow tone draws the eye without screaming "error"; the cell is
   editable, and typing into it resolves to the default cell-tc tone. */
.scoring-grid tbody td.cell-empty-tc[b-in9vpfei29] {
    background: var(--amber-glow) !important;
    color: var(--amber);
}

/* Operator overwrote what RallySafe provided. Stronger tone than the
   manual-entry green because overrides are exceptional. The comment
   triangle is added via the existing .note-indicator span, set by the
   render path when OverrideSource is populated. */
.scoring-grid tbody td.cell-manual-override[b-in9vpfei29] {
    background: var(--purple-glow) !important;
    color: var(--purple);
}

/* §6.4 strict-chain break — this TC has a check-in but its anchor is
   missing, so E/L cannot be computed. The cell stays genuinely blank
   (no background tint) because the upstream yellow TC carries the signal.
   Distinguished from cell-dim (which is the on-time / no-data treatment
   with subtle dimming): cell-blank renders truly empty so the operator's
   eye doesn't stop here. */
.scoring-grid tbody td.cell-blank[b-in9vpfei29] {
    color: transparent;
    background: transparent !important;
}

/* ── Penalty Adjust special (§11.4.4) ───────────────────────────────────── */
/* Zero values dim out (no operator action needed); non-zero values turn
   red to signal the COC has applied an override. */

.scoring-grid tbody td.pa-zero[b-in9vpfei29] {
    color: var(--fg-dim);
}

.scoring-grid tbody td.pa-applied[b-in9vpfei29] {
    color: var(--rally-red);
    font-weight: 600;
    background: var(--rally-red-glow) !important;
}

/* ── Input chrome inside editable cells ─────────────────────────────────── */

.scoring-grid td[b-in9vpfei29]  .form-control {
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font-family: var(--font-mono);
    font-size: 10.5px;
    height: 28px;
    padding: 0 6px;
    text-align: center;
}

.scoring-grid td[b-in9vpfei29]  .form-control::placeholder {
    color: var(--fg-faint);
    opacity: 1;
}

.scoring-grid td[b-in9vpfei29]  .form-control:focus {
    outline: 2px solid var(--rally-red);
    outline-offset: -2px;
    background: var(--rally-red-glow);
    box-shadow: none;
}

/* Read-only display values (no input, just text). */
.cell-ro[b-in9vpfei29] {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 28px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: inherit;
}

/* §6.3 / §6.6 / §11.4.4 cell classification indicator. The literal DNS / DNF /
   ELT text, rendered in the SAME monospace font and size as a time value so it
   reads as a first-class cell value. Orange (bronze) text; the orange cell
   background comes from .cell-classification-box on the td. */
/* Combined check-in-time + label box. Single 28px-high row: the time (when
   present) reads in the normal cell colour for legibility; the DNS/DNF/ELT
   label sits beside it in bronze. */
.cell-classification[b-in9vpfei29] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 28px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    pointer-events: none;
}

.cell-classification .cls-time[b-in9vpfei29] {
    color: var(--fg);
}

.cell-classification .cls-label[b-in9vpfei29] {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--bronze);
    text-transform: uppercase;
}

/* Orange background for the DNS / DNF / ELT indicator cell — distinct from the
   yellow "no time recorded" empty-TC state. Uses a stronger bronze tint than
   the faint --bronze-glow token so the box clearly reads as orange. */
.scoring-grid tbody td.cell-classification-box[b-in9vpfei29] {
    background: rgba(184, 92, 56, 0.30) !important;
    color: var(--bronze);
}

/* §11.4.2 early-check-in column annotation. Yellow secondary line under the
   TC code so operators can see at a glance which TCs have relaxed timing. */
.hdr-early-checkin[b-in9vpfei29] {
    margin-top: 1px;
    font-size: 0.65rem;
    font-weight: normal;
    line-height: 1;
    color: var(--amber);
    letter-spacing: 0.2px;
}

/* ── Comment indicator (Excel-style corner triangle) ────────────────────── */

.note-indicator[b-in9vpfei29] {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--amber) transparent transparent;
    pointer-events: none;
    z-index: 2;
}

/* ── Modal overlays (popover style) ─────────────────────────────────────── */

.pa-comment-overlay[b-in9vpfei29] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pa-comment-box[b-in9vpfei29] {
    background: var(--bg-surface);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    min-width: 22rem;
    max-width: 30rem;
    box-shadow: var(--shadow-2);
}
/* /Components/Pages/EventEntries.razor.rz.scp.css */
/* =========================================================================
   Public entry list — /events/{slug}/entries
   Mockup reference: docs/rallytrack-mockups.html section #entries (lines
   ~2190–2283). Toolbar with class filter chips, dark table with the
   manufacturer-logo column next to vehicle make/model.
   ========================================================================= */

.rt-entries-head[b-nokmd26h9h] {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
}

.rt-entries-head h1[b-nokmd26h9h] {
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.rt-entries-back[b-nokmd26h9h] {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.rt-entries-back:hover[b-nokmd26h9h] {
    color: var(--fg);
    background: var(--bg-elevated);
    text-decoration: none;
}

.rt-entries-panel[b-nokmd26h9h] {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.rt-entries-toolbar[b-nokmd26h9h] {
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elevated);
}

.rt-entries-filter-label[b-nokmd26h9h] {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
}

.rt-entries-count[b-nokmd26h9h] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
}

/* Toolbar buttons reuse the rt-toolbar-btn rules from rallytrack.css; here
   we just need to override the default cursor + display behaviour for
   anchor-based variants. */
.rt-toolbar-btn[b-nokmd26h9h] {
    padding: 4px 10px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    background: var(--bg-base);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.rt-toolbar-btn:hover[b-nokmd26h9h] {
    color: var(--fg);
    background: var(--bg-elevated-2);
    text-decoration: none;
}

.rt-toolbar-btn.active[b-nokmd26h9h] {
    background: var(--rally-red);
    border-color: var(--rally-red);
    color: white;
}

.rt-toolbar-btn.active:hover[b-nokmd26h9h] {
    background: var(--rally-red-dim);
    border-color: var(--rally-red-dim);
    color: white;
}

.rt-entries-empty[b-nokmd26h9h] {
    padding: var(--s-5);
    color: var(--fg-muted);
    margin: 0;
}

.rt-entries-table[b-nokmd26h9h] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 13px;
}

.rt-entries-table thead th[b-nokmd26h9h] {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line);
}

.rt-entries-table thead th.col-car[b-nokmd26h9h]       { width: 60px; }
.rt-entries-table thead th.col-carclass[b-nokmd26h9h]  { width: 90px; }
.rt-entries-table thead th.col-classes[b-nokmd26h9h]   { min-width: 200px; }

.rt-entries-table tbody td[b-nokmd26h9h] {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--line);
    vertical-align: middle;
}

.rt-entries-table tbody td.col-car[b-nokmd26h9h] {
    font-weight: 600;
}

.rt-entries-table tbody td.col-car a[b-nokmd26h9h] {
    color: var(--fg);
    text-decoration: none;
}

.rt-entries-table tbody td.col-car a:hover[b-nokmd26h9h] {
    color: var(--rally-red);
    text-decoration: none;
}

.rt-entries-driver[b-nokmd26h9h],
.rt-entries-nav[b-nokmd26h9h] {
    color: var(--fg);
}

/* Icon + name as separate flex items so wrapped text stays in its own
   column instead of running under the manufacturer icon (a hanging
   indent, in effect) while still fitting on one line whenever the
   column has room. */
.rt-entries-vehicle-cell[b-nokmd26h9h] {
    display: flex;
    align-items: flex-start;
}

.rt-entries-vehicle[b-nokmd26h9h] {
    color: var(--fg);
}

.rt-entries-carclass[b-nokmd26h9h] {
    font-family: var(--font-mono);
    color: var(--fg-muted);
    font-size: 12px;
}

/* Competition-class chips render as separated pills so multiple
   memberships are visually distinct rather than blending into one
   uppercase string. */
.rt-entries-class-list[b-nokmd26h9h] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.rt-entries-class[b-nokmd26h9h] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    color: var(--cyan);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rt-entries-class-empty[b-nokmd26h9h] {
    background: transparent;
    border: none;
    color: var(--fg-faint);
    padding: 0;
}

.rt-entries-entrant[b-nokmd26h9h] {
    color: var(--fg-muted);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* =========================================================================
   Public landing page — §10.2 v2.13.4 two-column layout.
   Calendar sidebar (left, ~360px) + hero card (right, flex). Mobile collapses
   to single column with hero on top.
   Visual reference: docs/rallytrack-mockups.html #landing section.
   Hero card uses the .event-card / .event-banner primitives from
   wwwroot/css/rallytrack.css.
   ========================================================================= */

.rt-landing[b-0r44dtm9lc] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--s-5);
    align-items: stretch;
}

/* Mobile per §10.2: hero first, calendar below. */
@media (max-width: 720px) {
    .rt-landing[b-0r44dtm9lc] {
        grid-template-columns: 1fr;
    }
    .rt-landing-hero[b-0r44dtm9lc] { order: 1; }
    .rt-landing-cal[b-0r44dtm9lc]  { order: 2; }
}

/* ── Calendar sidebar ───────────────────────────────────────────────────── */

.rt-landing-cal[b-0r44dtm9lc] {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    /* Grows with its content — no inner scroll. A long year's list pushes the
       page down rather than scrolling in a fixed box (§10.2 item 2). */
}

.rt-landing-cal-head[b-0r44dtm9lc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.rt-cal-year[b-0r44dtm9lc] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
}

.rt-cal-nav[b-0r44dtm9lc] {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 18px;
    line-height: 1;
    border-radius: var(--r-sm);
}

.rt-cal-nav:hover:not([disabled])[b-0r44dtm9lc] {
    color: var(--fg);
    background: var(--bg-elevated);
}

.rt-cal-nav[disabled][b-0r44dtm9lc] {
    color: var(--fg-dim);
    cursor: not-allowed;
}

.rt-cal-list[b-0r44dtm9lc] {
    display: flex;
    flex-direction: column;
}

.rt-cal-empty[b-0r44dtm9lc] {
    color: var(--fg-muted);
    font-size: 13px;
    text-align: center;
    padding: var(--s-4) 0;
    margin: 0;
}

/* Section labels grouping the calendar into Upcoming / Live / Past. */
.rt-cal-section-head[b-0r44dtm9lc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    padding: var(--s-3) 0 var(--s-2);
}

.rt-cal-section-head:first-child[b-0r44dtm9lc] {
    padding-top: 0;
}

/* No border-top here — the previous section's last row already carries a
   bottom border (.rt-cal-row), so adding one here doubled up as two lines
   with a gap when there was nothing between them (e.g. Upcoming → Past with
   no Live section). The row's own border is separator enough; this heading
   only needs a little breathing room above it. */
.rt-cal-section-head:not(:first-child)[b-0r44dtm9lc] {
    margin-top: var(--s-2);
}

.rt-cal-section-head-live[b-0r44dtm9lc] {
    color: var(--rally-red);
}

/* One event row in the calendar. Grid: date | body | status. */
.rt-cal-row[b-0r44dtm9lc] {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--fg);
    /* Default upcoming row stays at full opacity. */
}

.rt-cal-row:hover[b-0r44dtm9lc] {
    text-decoration: none;
    color: var(--fg);
    background: var(--bg-elevated);
}

.rt-cal-row:last-child[b-0r44dtm9lc] {
    border-bottom: none;
}

/* §10.2: past events render at ~70% opacity. Decorative dimming only — the
   row remains clickable. */
.rt-cal-row.is-past[b-0r44dtm9lc] {
    opacity: 0.7;
}

/* Live event row gets a subtle red wash to make it the loudest line in the
   calendar. */
.rt-cal-row.is-live[b-0r44dtm9lc] {
    background: rgba(225, 35, 44, 0.06);
    border-radius: var(--r-sm);
    margin: 2px 0;
    padding-left: var(--s-2);
    padding-right: var(--s-2);
}

.rt-cal-row.is-live .rt-cal-date[b-0r44dtm9lc],
.rt-cal-row.is-live .rt-cal-name[b-0r44dtm9lc] {
    color: var(--fg);
    font-weight: 700;
}

/* Upcoming rows get a quiet cyan accent so they read as distinct from both
   the red-washed Live row and the dimmed Past rows, without competing with
   either (§10.2 item 2). */
.rt-cal-row.is-upcoming[b-0r44dtm9lc] {
    border-left: 2px solid var(--cyan);
    padding-left: calc(var(--s-2) - 2px);
}

.rt-cal-date[b-0r44dtm9lc] {
    color: var(--fg-muted);
    font-size: 12px;
}

.rt-cal-body[b-0r44dtm9lc] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rt-cal-name[b-0r44dtm9lc] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--fg);
}

.rt-cal-loc[b-0r44dtm9lc] {
    color: var(--fg-dim);
    font-size: 12px;
    font-family: var(--font-mono);
}

.rt-cal-status[b-0r44dtm9lc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
}

/* "Live now" label inherits the rally-red colour from the live-dot context. */
.rt-cal-row.is-live .rt-cal-status[b-0r44dtm9lc] {
    color: var(--rally-red);
    font-weight: 600;
}

/* "Live in N min" dot — non-pulsing red, signals imminence without the
   visual noise of a pulse. */
.rt-cal-dot[b-0r44dtm9lc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.rt-cal-dot-soon[b-0r44dtm9lc] {
    background: var(--rally-red);
}

/* Status badges per §10.2. Same shape; colour family differs. */
.rt-cal-badge[b-0r44dtm9lc] {
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-family: var(--font-mono);
}

.rt-cal-badge-final[b-0r44dtm9lc] {
    background: rgba(43, 182, 115, 0.15);
    color: var(--green);
}

.rt-cal-badge-prov[b-0r44dtm9lc] {
    background: rgba(244, 162, 26, 0.16);
    color: var(--amber);
}

/* ── Hero card ──────────────────────────────────────────────────────────── */

.rt-landing-hero[b-0r44dtm9lc] {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    min-height: 480px;
}

/* Cards size to their own content. They must NOT be flex:1 here: .event-card
   sets overflow:hidden, which makes a flex item's automatic min-height resolve
   to 0 instead of auto, so a flex-basis:0 card shrinks below its content and
   silently clips whatever runs past the bottom — which from v2.15.18 was the
   actions row, leaving the stacked heroes with unreachable buttons. */
.rt-landing-hero[b-0r44dtm9lc]  .event-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.rt-landing-hero[b-0r44dtm9lc]  .event-banner {
    flex: 1;
}

/* CTAs row at the bottom of the hero card. flex-wrap keeps the long
   "View provisional results" CTA from forcing the row wider than the hero
   card on narrow viewports (which clipped the button off the screen edge). */
.rt-hero-actions[b-0r44dtm9lc] {
    padding: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    background: var(--bg-elevated);
}

/* Narrow screens: stack the CTAs full-width so neither button clips and the
   tap targets are comfortable. */
@media (max-width: 520px) {
    .rt-hero-actions[b-0r44dtm9lc] {
        flex-direction: column;
        align-items: stretch;
    }

    .rt-hero-actions[b-0r44dtm9lc]  .button {
        justify-content: center;
    }
}

.rt-hero-actions[b-0r44dtm9lc]  .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--r-md);
    text-decoration: none;
    cursor: pointer;
}

.rt-hero-actions[b-0r44dtm9lc]  .button:hover {
    background: var(--bg-elevated-2);
    color: var(--fg);
    text-decoration: none;
}

.rt-hero-actions[b-0r44dtm9lc]  .button-primary {
    background: var(--rally-red);
    border-color: var(--rally-red);
    color: white;
}

.rt-hero-actions[b-0r44dtm9lc]  .button-primary:hover {
    background: var(--rally-red-dim);
    border-color: var(--rally-red-dim);
    color: white;
}

.rt-hero-cta-live[b-0r44dtm9lc] {
    /* Live CTA in particular benefits from the pulsing-dot prefix so the
       visual language matches the chrome countdown + map-tab dot. */
}

/* Empty-state hero — quiet welcome when nothing live or recent exists. */
.rt-hero-empty[b-0r44dtm9lc] {
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--fg-muted);
}

.rt-hero-empty h2[b-0r44dtm9lc] {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0 0 var(--s-3);
    color: var(--fg);
}

.rt-hero-empty p[b-0r44dtm9lc] {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* ── Hero standings table (Live variant only) ───────────────────────────── */
/* Plain rows, not the Recent variant's gold/silver/bronze podium boxes — a
   Live event is still running, so a medal-coloured top three would read as a
   final placement it isn't. */

.rt-hero-standings[b-0r44dtm9lc] {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--s-5);
    font-size: 13px;
}

.rt-hero-standings th[b-0r44dtm9lc] {
    text-align: left;
    padding: 0 var(--s-3) 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    border-bottom: 1px solid var(--line);
}

.rt-hero-standings td[b-0r44dtm9lc] {
    padding: 7px var(--s-3);
    border-bottom: 1px solid var(--line);
    color: var(--fg);
}

.rt-hero-standings tbody tr:last-child td[b-0r44dtm9lc] {
    border-bottom: none;
}

.rt-hero-standings th:first-child[b-0r44dtm9lc],
.rt-hero-standings td:first-child[b-0r44dtm9lc] {
    padding-left: 0;
    width: 32px;
}

.rt-hero-standings th:last-child[b-0r44dtm9lc],
.rt-hero-standings td:last-child[b-0r44dtm9lc] {
    padding-right: 0;
    text-align: right;
    color: var(--fg-muted);
}

/* ── Hero podium (Recent variant only) ──────────────────────────────────── */

.rt-hero-podium[b-0r44dtm9lc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    margin-top: var(--s-5);
}

.rt-hero-podium-box[b-0r44dtm9lc] {
    padding: var(--s-3);
    border-radius: var(--r-sm);
    border-left: 3px solid transparent;
}

.rt-hero-podium-pos-1[b-0r44dtm9lc] {
    background: rgba(244, 162, 26, 0.10);
    border-left-color: var(--amber);
}

.rt-hero-podium-pos-2[b-0r44dtm9lc] {
    background: rgba(184, 193, 206, 0.08);
    border-left-color: #b8c1ce;
}

/* v2.13.4: bronze hex changed from #c08552 → #b85c38 (warm copper-red,
   clearly distinct from amber-gold of pos 1). See PR 4 for the global
   token consolidation. */
.rt-hero-podium-pos-3[b-0r44dtm9lc] {
    background: rgba(184, 92, 56, 0.10);
    border-left-color: var(--bronze);
}

.rt-hero-podium-head[b-0r44dtm9lc] {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: 4px;
}

.rt-hero-podium-num[b-0r44dtm9lc] {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
}

.rt-hero-podium-pos-1 .rt-hero-podium-num[b-0r44dtm9lc] { color: var(--amber); }
.rt-hero-podium-pos-2 .rt-hero-podium-num[b-0r44dtm9lc] { color: #b8c1ce; }
.rt-hero-podium-pos-3 .rt-hero-podium-num[b-0r44dtm9lc] { color: var(--bronze); }

.rt-hero-podium-car[b-0r44dtm9lc] {
    font-weight: 600;
    color: var(--fg-muted);
    font-size: 12px;
}

.rt-hero-podium-crew[b-0r44dtm9lc] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--fg);
}

.rt-hero-podium-time[b-0r44dtm9lc] {
    color: var(--fg-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* ── Hero status badges (Recent variant) ────────────────────────────────── */

.rt-status-final[b-0r44dtm9lc] {
    background: rgba(43, 182, 115, 0.20) !important;
    color: var(--green) !important;
}

.rt-status-pending[b-0r44dtm9lc] {
    background: rgba(244, 162, 26, 0.20) !important;
    color: var(--amber) !important;
}