/* 00-base.css — Variables, fonts, reset, global rules
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

:root {
    --red: #da0000;
    --red-dark: #a80000;
    --navy: #000f58;
    --navy-mid: #0a1545;
    --navy-dark: #060913;
    --green: #0a8a3e;
    --yellow: #b8860b;
    /* Header/Nav dark */
    --hdr-bg: #080c1a;
    --hdr-border: #1c2444;
    --hdr-text: #c8ccd8;
    --hdr-text-muted: #6a7194;
    /* Content light */
    --content-bg: #ffffff;
    --content-surface: #f5f6f8;
    --content-border: #e2e4ea;
    --content-text: #1a1d26;
    --content-text-muted: #5c6070;
    --content-text-dim: #8e92a0;
    /* Shared */
    --font-head: 'Aldrich', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --font-loc: 'OC Highway', 'Aldrich', sans-serif;
    --max-w: 1100px;
    /* Nav heights — used by sticky elements to sit below the nav */
    --hdr-h: 54px;     /* header bar */
    --nav-h: 0px;      /* desktop main-nav (set at breakpoint) */
    --sub-nav-h: 34px; /* sub-nav row (Stats, Drivers, Tracks…) */
    --sticky-top: calc(var(--hdr-h) + var(--sub-nav-h)); /* total sticky offset */
    --tab-bar-h: 56px; /* mobile bottom tab bar */
    --dp-tab-h: 42px;  /* driver profile tab row (dp-tab-btn padding:12 + font:12 + border) */
    --tp-tabs-h: 42px; /* track profile tab row — same dimensions as --dp-tab-h */
    --tp-mini-h: 44px; /* track profile mini header — height when shown */
    --dp-filter-sticky-top: calc(var(--sticky-top) + var(--dp-tab-h));
}

/* Initial fallback values for --tp-strip-h. These are used only
   before the JS measurement runs (page load, before initTrackMiniHeader
   gets a chance to measure). Once JS runs, document.documentElement
   gets an inline --tp-strip-h that is the actual rendered strip height
   — which auto-updates via transitionend / resize / scroll listeners. */
:root {
    --tp-strip-h: var(--dp-tab-h);
}

/* OC Highway — variable font used for location strings. The wide
   stretched variant (font-stretch: 200%) gives location strings the
   wayfinder/highway-sign feel that matches the racing context.
   Single TTF holds the full weight axis (100-900). */
@font-face {
    font-family: 'OC Highway';
    src: url('../fonts/OCHighwayVAR2VF.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background: var(--navy-dark);
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.5;
    color: var(--content-text);
    background-color: var(--navy-dark);
    background-image: url('../images/bg-texture-grunge.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ===== GLOBAL LUCIDE ICON ALIGNMENT =====
   IMPORTANT: lucide.createIcons() REPLACES `<i data-lucide="x">` with
   `<svg class="lucide lucide-x">…</svg>` — the original `<i>` element is
   gone after init. So we target both: the `<i>` (for the brief moment
   before init runs) AND `svg.lucide` (post-init, the real rendered
   element). This rule normalizes:
     - vertical alignment with adjacent text (baseline → middle)
     - default size (24x24 from Lucide's source SVG → 1em)
   Component rules that explicitly set width/height on the parent or
   on the svg via a class still win because they're more specific. */
i[data-lucide],
svg.lucide {
    display: inline-block;
    vertical-align: -0.125em;  /* nudge up slightly for optical centering */
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}
/* When the parent uses flex (most icon-with-text patterns we have),
   the inline-block above is overridden via the parent's flex layout —
   but the size + alignment values still apply. */
i[data-lucide]:where(:not([style*="width"]):not([class*="size"])),
svg.lucide:where(:not([style*="width"]):not([class*="size"])) {
    /* Only restrict size when no explicit width has been set inline
       or via a sizing class. Most icons inherit 1em from above. */
    flex-shrink: 0;
}/* 01-layout.css — Site chrome — header, nav, footer, layout, sections, common components
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* ===== STICKY HEADER ===== */
.site-top {
    position: sticky; top: 0; z-index: 9999;
    /* isolation: isolate creates a new stacking context for the entire
       sticky header block. Without this, content elements that establish
       their own stacking context (via position+z-index, transform,
       will-change, opacity<1, filter, etc.) can paint over the header
       when scrolled — even if their z-index is lower than 9999 — because
       stacking contexts only compare against siblings, not ancestors.
       isolation: isolate guarantees all header children are composited
       as a single layer that always wins against page content. */
    isolation: isolate;
}

.site-header {
    background: var(--navy-dark); height: 54px;
    border-bottom: 1px solid var(--hdr-border);
}
.header__inner {
    display: flex; align-items: center;
    max-width: var(--max-w); margin: 0 auto; height: 54px; padding: 0 16px;
}
.header__logo { flex-shrink: 0; margin-right: auto; }
.header__logo-img { height: 34px; width: auto; }
.header__actions { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 0; }
.header__actions a { color: rgba(255,255,255,.6); }
.header__actions a:hover { color: #fff; }
.header__actions--text {
    display: none;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    padding: 0 4px;
    margin-right: 10px;
}
.header__action-link {
    font-family: var(--font-head);
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); padding: 8px 10px;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,.08);
}
.header__action-link:last-child { border-right: none; }
.header__action-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.header__action-link--admin { color: #da0000 !important; font-weight: 800; }
.header__action-link--admin:hover { color: #ff3333 !important; }
.header__action-link--pts { color: #d4a017 !important; font-weight: 800; }
.header__action-link--pts:hover { color: #f0c040 !important; }
.header__action-link--profile { color: #d4a017 !important; font-weight: 800; }
.header__action-link--profile:hover { color: #f0c040 !important; }
.header__login-btn {
    font-family: var(--font-head);
    font-size: 11px; font-weight: 800; color: #fff; padding: 8px 18px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
    letter-spacing: .04em; text-transform: uppercase;
}
.header__login-btn:hover { background: rgba(255,255,255,.15); }
.header__pro-btn {
    font-family: var(--font-head);
    font-size: 11px; font-weight: 800; color: #fff; padding: 8px 18px;
    background: #da0000; margin-left: 6px; letter-spacing: .04em; text-transform: uppercase;
}
.header__pro-btn:hover { background: #ff2222; }

/* ── Mobile header: shrink buttons so logo has room ── */
@media (max-width: 480px) {
    .header__logo-img { height: 26px; width: auto; }
    .header__login-btn { font-size: 10px; padding: 7px 10px; letter-spacing: .02em; }
    .header__pro-btn  { font-size: 10px; padding: 7px 10px; letter-spacing: .02em; margin-left: 4px; }
    .header__menu-btn { padding: 10px 4px; }
}
.header__user-btn {
    display: flex; align-items: center; padding: 2px; margin-left: 4px;
    border: 2px solid #d4a017; transition: border-color .15s;
}
.header__user-btn:hover { border-color: #f0c040; }
.header__avatar {
    width: 30px; height: 30px; background: var(--red); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 13px;
    overflow: hidden;
}
.header__menu-btn {
    display: flex; flex-direction: column; gap: 5px; padding: 10px 8px;
}
.header__menu-btn span {
    display: block; height: 2px; width: 20px; background: #fff; transition: .2s;
}
.header__menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.header__menu-btn.active span:nth-child(2) { opacity: 0; }
.header__menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== MAIN NAV ===== */
.main-nav {
    display: none; background: var(--navy-mid);
    border-bottom: 3px solid var(--red); height: 42px;
    overflow: visible; position: relative;
}
.main-nav__inner {
    display: flex; align-items: center; justify-content: center;
    max-width: var(--max-w); margin: 0 auto; height: 100%;
    padding: 0 8px; white-space: nowrap;
}
.main-nav__link {
    padding: 0 16px; height: 42px; display: flex; align-items: center;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: rgba(255,255,255,.5); border-bottom: 3px solid transparent; margin-bottom: -3px; transition: .15s;
    /* Reset button defaults so the Explore button renders identical to
       the anchor links. Without these resets, the button picks up
       agent-style line-height / font-family / padding / border which
       makes it visually shorter than its <a> siblings.
       Browsers also center button text via flex defaults differently
       than anchors, so we force flex-flow / line-height to match. */
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-head);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
}
/* Explore button gets a chevron sibling — keep them on the same
   baseline by setting an explicit gap and treating the chevron as a
   non-flexing inline element. */
.main-nav__link svg {
    flex-shrink: 0;
    margin-left: 4px;
    opacity: .6;
    transition: transform .15s;
    /* Center the chevron vertically within the 42px height — without
       this it sometimes renders one or two pixels low because of the
       SVG's intrinsic baseline rules. */
    align-self: center;
}
.main-nav__link:hover, .main-nav__link.active {
    color: #fff; border-bottom-color: var(--red);
}

/* ===== SUB-NAV (secondary row: Stats, Drivers, Tracks, etc.) ===== */
.sub-nav {
    display: none;
    background: #111828;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2540' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    background-size: 32px 32px;
    border-bottom: 1px solid #1c2444;
    height: var(--sub-nav-h, 34px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
@media (min-width: 768px) { .sub-nav { display: block; } }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav__inner {
    display: flex; align-items: center; justify-content: center;
    max-width: var(--max-w); margin: 0 auto; height: 100%;
    padding: 0 8px; gap: 0;
    min-width: max-content;
}
.sub-nav__link {
    padding: 0 14px; height: 34px; display: flex; align-items: center;
    font-family: var(--font-head);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.5); transition: color .15s;
    white-space: nowrap;
}
.sub-nav__link:hover { color: #fff; }
.sub-nav__link.active { color: #fff; }
.sub-nav__pro {
    font-size: 8px; background: var(--red); color: #fff;
    padding: 1px 4px; font-weight: 800; vertical-align: top; margin-left: 3px;
}

/* ===== MOBILE NAV ===== */
.mobile-nav {
    position: fixed; top: calc(var(--hdr-h) + var(--sub-nav-h)); left: 0; right: 0; bottom: 0;
    background: var(--navy-dark); z-index: 9998; overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__link {
    display: block; padding: 16px 20px; color: rgba(255,255,255,.6);
    font-family: var(--font-head);
    font-size: 17px; font-weight: 600; text-transform: uppercase;
    border-bottom: 1px solid var(--hdr-border);
}
.mobile-nav__link:hover, .mobile-nav__link.active {
    color: #fff; background: rgba(255,255,255,.04); border-left: 4px solid var(--red);
}

/* ===== TAB BAR (mobile bottom nav) ===== */
.tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    min-height: var(--tab-bar-h); background: var(--navy-dark); border-top: 1px solid var(--hdr-border);
    display: flex; align-items: center; justify-content: space-around;
    /* Add safe-area padding inside the bar so the row of icons stays above
       the home indicator on notched devices. The bar itself must sit flush
       to bottom:0 (not above the safe area) otherwise iOS Chrome/Safari
       leaves a visible gap when the URL bar hides on scroll. */
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
}
/* Extend the bar's visual bottom beneath the safe area so when iOS shrinks
   the visual viewport (URL bar hides), there's no gap of page-bg showing
   below the nav. The ::after element paints navy all the way to the edge
   of the physical screen. */
.tab-bar::after {
    content: '';
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: env(safe-area-inset-bottom);
    background: var(--navy-dark);
    z-index: 9998;
    pointer-events: none;
}
.tab-bar__item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; color: rgba(255,255,255,.35); font-family: var(--font-head); font-size: 10px; font-weight: 700;
    min-width: 56px; letter-spacing: .02em;
}
.tab-bar__item svg { width: 20px; height: 20px; }
.tab-bar__item.active { color: var(--red); }

/* ===== LAYOUT ===== */
.main-content {
    min-height: 60vh; max-width: var(--max-w); margin: 0 auto;
    padding: 0 0 calc(var(--tab-bar-h) + env(safe-area-inset-bottom) + 8px); background: var(--content-bg);
}

/* ===== SECTIONS ===== */
.section { padding: 16px 0; }
.section__header {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 12px; padding: 0 16px;
}
.section__title {
    font-family: var(--font-head); font-size: 16px;
    text-transform: uppercase; color: var(--content-text);
}
.section__more {
    font-size: 12px; color: var(--red); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    /* Flex inline so the chevron icon sits beside the text with a
       small gap. transition on transform shifts the chevron right
       a couple of pixels on hover for a subtle "go" affordance. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
/* Target both pre-replace (<i data-lucide>) and post-replace
   (svg.lucide) — Lucide swaps the <i> for an <svg> at runtime. */
.section__more i[data-lucide],
.section__more svg.lucide {
    width: 12px;
    height: 12px;
    transition: transform .15s ease;
}
.section__more:hover i[data-lucide],
.section__more:hover svg.lucide {
    transform: translateX(2px);
}


/* ===== CARDS ===== */
.card {
    background: var(--content-bg); border: 1px solid var(--content-border); margin: 0 16px 4px;
}
.card:hover { background: var(--content-surface); }
.card__body { padding: 12px 16px; }
.card--hot { border-left: 3px solid var(--red); }

/* ===== RESULT CARD ===== */
.res { display: block; color: var(--content-text); }
.res__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.res__event { font-weight: 700; font-size: 14px; color: var(--content-text); }
.res__sub { font-size: 12px; color: var(--content-text-muted); margin-top: 1px; }
.res__winner {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; background: var(--content-surface);
    border-left: 3px solid var(--red); margin-top: 6px;
}
.res__w-num { font-weight: 800; font-size: 22px; color: var(--red); line-height: 1; min-width: 36px; }
.res__w-label { font-size: 10px; color: var(--content-text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.res__w-name { font-weight: 700; font-size: 14px; color: var(--content-text); }
.res__w-purse { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--green); }

/* ===== EVENT CARD ===== */
.ev { display: block; color: var(--content-text); }
.ev__date { font-size: 12px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .04em; }
.ev__name { font-family: 'Aldrich', sans-serif; font-weight: 700; font-size: 15px; color: var(--content-text); margin: 2px 0; text-transform: uppercase; }
.ev__track { font-size: 13px; color: var(--content-text-muted); }
.ev__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--content-text-dim); }
.ev__towin { font-weight: 700; font-size: 13px; color: var(--green); }
.ev__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }

/* ===== LEADERBOARD ===== */
.lb { list-style: none; }
.lb__item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--content-border); }
.lb__item:hover { background: var(--content-surface); }
.lb__rank { font-weight: 800; font-size: 18px; color: var(--content-text-dim); min-width: 24px; text-align: center; }
.lb__item:first-child .lb__rank { color: var(--red); }
.lb__info { flex: 1; min-width: 0; }
.lb__name { font-weight: 700; font-size: 14px; color: var(--content-text); }
.lb__name span { color: var(--content-text-dim); font-size: 12px; font-weight: 400; }
.lb__sub { font-size: 12px; color: var(--content-text-muted); }
.lb__val { font-weight: 800; font-size: 20px; color: var(--red); }

/* ===== BOX SCORE ===== */
.boxscore { width: 100%; border-collapse: collapse; font-size: 13px; }
.boxscore th { text-align: left; padding: 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--content-text-muted); border-bottom: 2px solid var(--red); white-space: nowrap; }
.boxscore td { padding: 8px 6px; border-bottom: 1px solid var(--content-border); }
.boxscore tr:hover { background: var(--content-surface); }
.boxscore__pos { font-weight: 800; text-align: center; min-width: 28px; }
.boxscore__number { font-weight: 800; color: var(--red); text-align: center; }
.boxscore__driver { font-weight: 600; color: var(--content-text); }
.boxscore__driver:hover { color: var(--red); }
.boxscore__hometown { color: var(--content-text-muted); font-size: 12px; }
.boxscore__earnings { font-weight: 700; color: var(--green); }
.pos-up { color: var(--green); font-weight: 700; }
.pos-down { color: var(--red); font-weight: 700; }
.pos-even { color: var(--content-text-dim); }

/* ===== BADGES ===== */
.badge { display: inline-flex; padding: 2px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--content-surface); color: var(--content-text-muted); border: 1px solid var(--content-border); }
.badge--pro { background: var(--red); color: #fff; border: none; font-size: 9px; }
.badge--sm { font-size: 8px; padding: 1px 5px; }
.badge--live { background: var(--red); color: #fff; animation: pulse 2s infinite; }
.badge--lm { background: var(--content-surface); color: var(--content-text-muted); border: 1px solid var(--content-border); }
.badge--super-lm { border-left: 3px solid var(--red); }
.badge--604-crate-lm { border-left: 3px solid #2563eb; }
.badge--602-crate-lm { border-left: 3px solid #7c3aed; }
.badge--limited-lm { border-left: 3px solid var(--green); }
.badge--restricted-lm { border-left: 3px solid var(--yellow); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ===== BUTTONS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 22px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; transition: .15s; cursor: pointer; border: none; }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--content-text-muted); border: 1px solid var(--content-border); }
.btn--ghost:hover { border-color: var(--content-text); color: var(--content-text); }
.btn--pro { background: var(--red); color: #fff; }
.btn--pro:hover { background: var(--red-dark); color: #fff; }
.btn--sm { padding: 6px 12px; font-size: 12px; }
.btn--block { width: 100%; }

/* ===== FILTERS ===== */
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; background: var(--content-surface); border-bottom: 1px solid var(--content-border); overflow-x: auto; }
.filter-select { padding: 8px 28px 8px 10px; background: #fff; color: var(--content-text); border: 1px solid var(--content-border); font-size: 12px; font-weight: 600; text-transform: uppercase; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235c6070' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.filter-select:focus { outline: none; border-color: var(--red); }
.filter-input { padding: 8px 10px; background: #fff; color: var(--content-text); border: 1px solid var(--content-border); font-size: 13px; }
.filter-input:focus { outline: none; border-color: var(--red); }

/* ===== FORMS ===== */
.form-group { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--content-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.form-input { width: 100%; padding: 12px; background: #fff; color: var(--content-text); border: 1px solid var(--content-border); font-size: 15px; }
.form-input:focus { outline: none; border-color: var(--red); }

/* ===== ARTICLE ===== */
.article { padding: 20px 16px; max-width: 720px; margin: 0 auto; }
.article__title { font-family: var(--font-head); font-size: 22px; text-transform: uppercase; color: var(--content-text); line-height: 1.2; margin-bottom: 8px; }
.article__meta { font-size: 13px; color: var(--content-text-muted); margin-bottom: 16px; }
.article__body { font-size: 16px; line-height: 1.7; color: var(--content-text); }
.article__body p { margin-bottom: 16px; }
.article__body h2 { font-family: var(--font-head); font-size: 18px; text-transform: uppercase; margin: 24px 0 12px; border-left: 3px solid var(--red); padding-left: 12px; }

/* ===== PRO CTA ===== */
.pro-cta { background: var(--navy-dark); border: 2px solid var(--red); padding: 28px 20px; text-align: center; margin: 16px; position: relative; overflow: hidden; }
.pro-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(218,0,0,.12), transparent 60%); pointer-events: none; }
.pro-cta__title { font-family: var(--font-head); font-size: 24px; text-transform: uppercase; color: #fff; margin-bottom: 6px; position: relative; }
.pro-cta__text { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 16px; position: relative; }

/* ===== PAGE HEADER ===== */
.page-header { padding: 20px 16px; border-bottom: 2px solid var(--red); background: var(--navy-dark); color: #fff; }
.page-header__title { font-family: var(--font-head); font-size: 22px; text-transform: uppercase; color: #fff; }
.page-header__subtitle { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 2px; }

/* ===== DRIVER ===== */
.driver-hero { display: flex; align-items: center; gap: 16px; padding: 20px 16px; }
.driver-hero__photo { width: 80px; height: 80px; object-fit: cover; border: 2px solid var(--red); }
.driver-hero__name { font-weight: 800; font-size: 24px; color: var(--content-text); line-height: 1.1; }
.driver-hero__number { font-weight: 800; font-size: 42px; color: var(--content-border); margin-left: auto; }
.driver-hero__hometown { font-size: 14px; color: var(--content-text-muted); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--content-border); }
.stat-grid__item { background: var(--content-bg); padding: 14px; text-align: center; }
.stat-grid__value { font-weight: 800; font-size: 20px; color: var(--content-text); }
.stat-grid__label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--content-text-muted); font-weight: 700; margin-top: 2px; }
.stat-grid--6 { grid-template-columns: repeat(6, 1fr); }



/* ===== STREAM ===== */
.stream-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; background: var(--content-bg); border: 1px solid var(--content-border); border-left: 3px solid var(--navy); margin-bottom: 2px; }
.stream-card:hover { border-left-color: var(--red); background: var(--content-surface); }
.stream-card__time { font-weight: 700; font-size: 13px; color: var(--red); text-align: center; min-width: 60px; }
.stream-card__event { font-weight: 700; font-size: 14px; color: var(--content-text); }
.stream-card__track { font-size: 12px; color: var(--content-text-muted); }
.stream-card__price { font-weight: 700; font-size: 13px; color: var(--green); }

/* ===== EMPTY ===== */
.empty-state { text-align: center; padding: 40px 24px; color: var(--content-text-muted); }
.empty-state__title { font-family: var(--font-head); font-size: 14px; text-transform: uppercase; color: var(--content-text-dim); margin-bottom: 4px; }

/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px; }
.pagination__link { padding: 8px 12px; font-size: 14px; font-weight: 600; color: var(--content-text-muted); background: var(--content-bg); border: 1px solid var(--content-border); }
.pagination__link:hover { border-color: var(--red); color: var(--red); }
.pagination__link--active { background: var(--red); color: #fff; border-color: var(--red); }

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
.site-footer {
    background: var(--navy-dark);
    border-top: 4px solid var(--red);
    padding: 40px 0 32px;
    color: rgba(255,255,255,.45);
    text-align: center;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(218,0,0,.07) 0%, transparent 100%);
    pointer-events: none;
}
.footer__inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 16px;
    position: relative;
}
.footer__brand { margin-bottom: 20px; }
.footer__brand-logo { height: 32px; width: auto; margin: 0 auto 10px; opacity: .9; }
.footer__brand-tagline {
    font-family: var(--font-head);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}
.footer__social {
    display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap;
}
.footer__social a {
    font-family: var(--font-head);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.12);
    padding: 5px 12px;
    transition: color .15s, border-color .15s, background .15s;
}
.footer__social a:hover { color: #fff; border-color: var(--red); background: rgba(218,0,0,.12); }
.footer__links {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 4px 6px; margin-bottom: 28px;
}
.footer__links a {
    font-family: var(--font-head);
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    padding: 4px 8px;
    transition: color .15s;
}
.footer__links a:hover { color: var(--red); }
.footer__sep { color: rgba(255,255,255,.15); font-size: 12px; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px;
}
.footer__bottom p {
    font-size: 11px; color: rgba(255,255,255,.2); line-height: 1.7;
    letter-spacing: .02em;
}
.footer__bottom a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .15s; }
.footer__bottom a:hover { color: var(--red); }
@media (max-width: 600px) {
    .footer__links { gap: 2px 4px; }
    .footer__links a { font-size: 10px; }
}

/* ===== UTILITY ===== */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }
.spinner { width: 24px; height: 24px; border: 3px solid var(--content-border); border-top-color: var(--red); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-center { text-align: center; }
.text-muted { color: var(--content-text-muted); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }


/* ===== DESKTOP ===== */
@media (min-width: 768px) {
    :root {
        --nav-h: 42px;
        --sticky-top: calc(var(--hdr-h) + var(--nav-h) + var(--sub-nav-h));
    }
    .main-nav { display: block; }
    .tab-bar { display: none; }
    .header__menu-btn { display: none; }
    .header__actions--text { display: flex; gap: 0; } /* show text links on desktop */
    .main-content { padding-bottom: 0; }
    .site-footer { padding-bottom: 32px; }
    .news-grid { grid-template-columns: 1fr 1fr; }
    .news-card { grid-template-columns: 140px 1fr; }
    .news-card__img { width: 140px; height: 90px; }
    .news-featured__img { height: 320px; }
    .news-featured__title { font-size: 24px; }
    .page-header__title { font-size: 28px; }
    .stat-grid--6 { grid-template-columns: repeat(6, 1fr); }
    .pro-hero-home__grid { grid-template-columns: 1fr 1fr !important; }
}

@media (min-width: 1024px) {
    .news-grid { grid-template-columns: 1fr 1fr 1fr; }
    .main-content { box-shadow: 0 0 40px rgba(0,0,0,.08); }
}/* 02-news.css — News pages (cards, hero, tabs)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* ===== NEWS ===== */
.news-featured {
    display: block; color: var(--content-text); background: var(--content-bg);
    border: 1px solid var(--content-border); margin: 16px; overflow: hidden;
}
.news-featured:hover { border-color: #ccc; }
.news-featured__img {
    width: 100%; height: 220px; object-fit: cover;
    background: var(--content-surface); display: block;
}
.news-featured__body { padding: 16px; }
.news-featured__cat {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--red);
}
.news-featured__title {
    font-weight: 800; font-size: 20px; color: var(--content-text);
    margin: 4px 0 6px; line-height: 1.3;
}
.news-featured__excerpt { font-size: 14px; color: var(--content-text-muted); line-height: 1.5; }
.news-featured__time { font-size: 12px; color: var(--content-text-dim); margin-top: 8px; }

.news-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
.news-card {
    display: grid; grid-template-columns: 100px 1fr; gap: 12px;
    background: var(--content-bg); border: 1px solid var(--content-border);
    border-top: none; padding: 12px; color: var(--content-text);
}
.news-card:first-child { border-top: 1px solid var(--content-border); }
.news-card:hover { background: var(--content-surface); }
.news-card__img {
    width: 100px; height: 68px; object-fit: cover;
    background: var(--content-surface); display: block; flex-shrink: 0;
}
.news-card__body { min-width: 0; }
.news-card__cat {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--red);
}
.news-card__title {
    font-weight: 700; font-size: 14px; color: var(--content-text);
    margin: 2px 0; line-height: 1.3;
}
.news-card__time { font-size: 11px; color: var(--content-text-dim); margin-top: 4px; }
/* ── News category bar (replaces old dropdown + tab row) ────────── */
.news-cat-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--navy-dark);
    border-bottom: 2px solid var(--content-border);
    padding: 0 8px;
    gap: 0;
}
.news-cat-bar::-webkit-scrollbar { display: none; }
.news-cat-bar__link {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.45);
    padding: 10px 12px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s;
}
.news-cat-bar__link:hover { color: #fff; }
.news-cat-bar__link--active { color: #fff; border-bottom-color: var(--red); }
.news-cat-bar__pro {
    font-size: 8px;
    background: var(--red);
    color: #fff;
    padding: 1px 4px;
    font-weight: 800;
    vertical-align: top;
    margin-left: 2px;
}

/* locked tile */
.home-news-tile--locked { opacity: .85; }
/* 03-pro.css — Pro upsell hero + responsive
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* ===== PRO HERO (home) ===== */
.pro-hero-home {
    background: linear-gradient(135deg, #0a0e1a 0%, #1a0000 40%, #2a0000 70%, #0a0e1a 100%);
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;  /* keep within main-content bounds to prevent horizontal overflow on mobile */
}
.pro-hero-home::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #da0000; }
.pro-hero-home::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #da0000; }
.pro-hero-home__grid { display: grid; grid-template-columns: 1fr; position: relative; }
.pro-hero-home__pitch { padding: 16px 20px 8px; text-align: center; }
.pro-hero-home__pricing { padding: 12px 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pro-hero-home__box { background: rgba(255,255,255,.03); border: 2px solid #333; padding: 14px 20px; text-align: center; width: 100%; max-width: 300px; }
.pro-hero-home__box--yr { border-color: #da0000; background: rgba(218,0,0,.05); position: relative; }
.pro-hero-home__best { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #da0000; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 4px 14px; white-space: nowrap; }
.pro-hero-home__price { font-weight: 900; font-size: 32px; color: #fff; line-height: 1; margin: 6px 0; }
.pro-hero-home__price span { font-size: 16px; }
.pro-hero-home__btn { display: block; margin-top: 10px; padding: 10px 24px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; text-decoration: none; }
.pro-hero-home__btn--mo { background: rgba(255,255,255,.08); border: 2px solid #444; }
.pro-hero-home__btn--yr { background: #da0000; }
.pro-hero-home__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; text-align: left; margin-top: 12px; }
.pro-hero-home__check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #ccc; }
.pro-hero-home__check svg { flex-shrink: 0; }
.pro-hero-home__footer {
    text-align: center;
    padding: 12px 20px 20px;
    position: relative;
}

/* New helper classes — these replace the inline styles previously
   embedded in home.php so styling lives in one file. */
.pro-hero-home__badge {
    display: inline-flex;
    padding: 4px 16px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 16px;
}
.pro-hero-home__brand {
    font-family: 'Aldrich', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    margin-bottom: 8px;
    -webkit-text-stroke: 0.02em currentColor;
}
.pro-hero-home__tagline {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 12px;
    max-width: 400px;
}
@media (max-width: 767px) {
    /* Center the tagline on mobile (where pitch column is centered). */
    .pro-hero-home__tagline { margin-left: auto; margin-right: auto; }
}
.pro-hero-home__plan-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #555;
}
.pro-hero-home__per { font-size: 13px; color: #555; }
.pro-hero-home__savings {
    font-size: 13px;
    color: var(--green);
    font-weight: 800;
    margin-top: 4px;
}
.pro-hero-home__login { font-size: 13px; color: #555; }
.pro-hero-home__login a {
    color: var(--red);
    font-weight: 800;
    text-decoration: none;
}
.pro-hero-home__login a:hover { text-decoration: underline; }
.pro-hero-home__sep { color: #444; margin: 0 6px; }
.pro-hero-home__terms {
    font-size: 11px;
    color: #444;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (min-width: 768px) {
    .pro-hero-home__grid { grid-template-columns: 1fr 1fr; }
    .pro-hero-home__pitch { padding: 48px 32px; text-align: left; }
    .pro-hero-home__pricing { flex-direction: row; padding: 48px 32px; justify-content: center; align-items: center; }
    .pro-hero-home__box { max-width: 220px; }
    .pro-hero-home__price { font-size: 48px; }
}

/* ===== PRO UPSELL RESPONSIVE ===== */
.pro-upsell__boxes { display:flex; flex-direction:column; align-items:center; gap:14px; }
.pro-upsell__box { width:100%; max-width:300px; }
@media (min-width: 768px) {
    .pro-upsell__boxes { flex-direction:row; justify-content:center; }
    .pro-upsell__box { width:auto; min-width:200px; max-width:none; }
}/* 04-trackstats-shared.css — TS shared components (driver-row, ts-leader, ts-flag, etc.)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   TRACKSTATS COMPONENTS
   Styling for ts-* classes used by driver/track/race/rankings pages.
   Color palette + spacing conventions inherited from the rest of the
   stylesheet: navy chrome, red accents, light content cards.
   ===================================================================== */

/* ----- Hero (driver profile background photo) ----- */
.ts-hero {
    position: relative;
    min-height: 280px;
    background-color: var(--navy-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.ts-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,12,26,.25) 0%, rgba(8,12,26,.85) 100%);
    pointer-events: none;
}
.ts-hero__overlay {
    position: relative;
    z-index: 1;
    padding: 48px 16px 24px;
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 280px;
}
.ts-hero__name {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.ts-hero__meta {
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255,255,255,.85);
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.ts-deceased { color: rgba(255,255,255,.7); font-style: italic; }

@media (min-width: 768px) {
    .ts-hero { min-height: 360px; }
    .ts-hero__overlay { min-height: 360px; padding: 64px 16px 32px; }
    .ts-hero__name { font-size: 40px; }
}

/* ----- Photo credit overlay (used on hero + photo galleries) ----- */
.ts-photo-credit {
    position: absolute;
    top: 10px; right: 14px;
    z-index: 2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.7);
    pointer-events: none;
    text-transform: uppercase;
}

/* ----- Country flag inline icon ----- */
.ts-flag {
    display: inline-block;
    width: auto;
    height: 0.85em;
    flex-shrink: 0;
    align-self: center;
    vertical-align: 0;
    margin: 0;
}

/* ----- Track logo box (2:1 white panel) ----- */
.ts-track-logo {
    background: #fff;
    width: 4.5rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--content-border);
}
.ts-track-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ----- "Late Models" scope reminder pill ----- */
.ts-scope-label {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--red);
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.25);
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ----- Driver "form" cards (last 30 / 90 / 365 days) ----- */
.ts-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--content-border);
    margin-top: 1px;
}
.ts-form-card {
    background: var(--content-bg);
    padding: 12px 14px;
}
.ts-form-card__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.ts-form-card__row {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 13px; color: var(--content-text);
}
.ts-form-card__row strong { color: var(--red); font-weight: 800; }
@media (min-width: 768px) {
    .ts-form-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Driver rankings pills (current ratings overview) ----- */
.ts-rankings {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 16px;
}
.ts-ranking-pill {
    display: flex; align-items: center; gap: 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--red);
    padding: 8px 12px;
    flex: 1 1 220px;
    min-width: 0;
}
.ts-ranking-pill__pos {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--red);
    line-height: 1;
}
.ts-ranking-pill__label {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 700;
    color: var(--content-text);
    line-height: 1.2;
}
.ts-ranking-pill__label small {
    display: block;
    font-size: 11px; font-weight: 400;
    color: var(--content-text-muted);
    margin-top: 1px;
}
.ts-ranking-pill__rating {
    font-weight: 800;
    font-size: 14px;
    color: var(--content-text);
    text-align: right;
}

/* ----- Rankings page: top leaders summary cards ----- */
.ts-leaders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 16px;
}
.ts-leader-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-top: 3px solid var(--red);
    padding: 12px 14px;
}
.ts-leader-card--featured {
    border-top-color: var(--red);
    background: linear-gradient(180deg, rgba(218,0,0,.04) 0%, var(--content-bg) 60%);
}
.ts-leader-card__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 4px;
}
.ts-leader-card__name {
    display: block;
    font-family: var(--font-head);
    font-size: 16px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.ts-leader-card__name:hover { color: var(--red); }
.ts-leader-card__sub {
    font-size: 12px;
    color: var(--content-text-muted);
    margin-top: 2px;
}
.ts-leader-card__rating {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--content-text);
    padding-top: 6px;
    border-top: 1px solid var(--content-border);
}
@media (min-width: 600px) {
    .ts-leaders-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .ts-leaders-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Championships block (driver profile) ----- */
.ts-champs h3 {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--red);
}
.ts-champs h3:first-child { margin-top: 0; }
.ts-champs ul {
    list-style: none;
    margin: 0; padding: 0;
}
.ts-champs li {
    padding: 6px 0;
    border-bottom: 1px solid var(--content-border);
    font-size: 13px;
    color: var(--content-text);
}
.ts-champs li:last-child { border-bottom: none; }
.ts-champs li strong { color: var(--red); font-weight: 800; margin-right: 4px; }
.ts-champs a { color: var(--content-text); border-bottom: 1px dotted var(--content-border); }
.ts-champs a:hover { color: var(--red); border-bottom-color: var(--red); }

/* ----- Boxscore "earnings" cell color (lives alongside .boxscore) ----- */
.boxscore__earnings { font-weight: 700; color: var(--green); white-space: nowrap; }

/* ----- Section sub-label (used in rankings page header) ----- */
.section__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
/* =====================================================================
   SERIES CHIP — emitted by seriesChip() helper. Used wherever a series
   appears alongside race data: schedule rows, watch listings, home page
   class lines, home Box Score tiles. The chip pairs an optional small
   logo with the series name so visual identification works at a glance.

   Two variants:
     .series-chip--inline  Text-style red link, optional logo, no border.
                           Flows naturally on a class-line alongside other
                           inline elements.
     .series-chip--pill    Bordered pill (combined with .home-tile__chip
                           on the call site for the existing pill chrome).
   ===================================================================== */
.series-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    text-decoration: none;
    /* Slight nudge so the logo's optical baseline aligns with surrounding
       text. Lucide-style icons sit on the text baseline; raster logos
       tend to sit a touch higher, so a small negative margin pulls them
       down to match. */
}
.series-chip--inline {
    color: var(--red);
    font-weight: 700;
}
.series-chip--inline:hover { color: var(--red-dark); }
.series-chip__logo {
    /* Sized in em so the logo scales with surrounding text. Inside a
       13–14px chip, this lands the logo at 16–18px tall — small enough
       to read as an accent rather than competing with the name. */
    height: 1.4em;
    width: auto;
    max-width: 32px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}
.series-chip__name {
    /* Lets the logo do the visual work; the name is the disambiguator
       when two series share similar branding. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Pill variant — when used inside .home-tile__chip the existing pill
   border + background rules apply; we just make sure the inner gap and
   logo sizing match. */
.series-chip--pill {
    /* Slightly tighter gap inside the pill so the logo + name read as
       one tight unit rather than two separate elements. */
    gap: 4px;
}
.series-chip--pill .series-chip__logo {
    /* Inside the colored pill, smaller logo to fit the chip's vertical
       constraint (chip is roughly 16px tall total). */
    height: 1.2em;
    max-width: 24px;
}

/* Stack variant — used in the dedicated Series column on watch and
   schedule pages. Logo-priority: when a logo exists, render JUST the
   logo at ~32px tall. When no logo, render small red text. */
.series-chip--stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    text-decoration: none;
    transition: opacity .12s;
}
.series-chip--stack:hover { opacity: .75; }
.series-chip--stack.series-chip--has-logo .series-chip__logo {
    /* Match the Watch column provider logo sizing for visual parity —
       both columns are conceptually "an identifier you click on". */
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 3px 6px;
}
.series-chip--stack.series-chip--name-only {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--red);
    text-align: center;
    line-height: 1.25;
    /* Wrap long names — column is only 110px wide. */
    word-break: break-word;
    hyphens: auto;
}/* 05-search.css — Global search modal
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   GLOBAL SEARCH (modal overlay + header trigger)
   ===================================================================== */

/* ---- Desktop trigger button (sits in header__actions) ----
   Looks like a search input but is actually a button that opens the modal. */
.header__search-trigger {
    display: none;
    align-items: center;
    gap: 8px;
    width: 280px;
    margin: 0 auto;
    padding: 6px 10px;
    background: var(--hdr-bg);
    color: var(--hdr-text-muted);
    border: 1px solid var(--hdr-border);
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.header__search-trigger:hover {
    border-color: var(--red);
    color: var(--hdr-text);
}
.header__search-trigger svg { flex-shrink: 0; }
.header__search-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header__search-trigger-kbd {
    flex-shrink: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    color: var(--hdr-text-muted);
    background: var(--navy-dark);
    border: 1px solid var(--hdr-border);
    padding: 1px 5px;
    border-radius: 3px;
}
@media (min-width: 768px) {
    .header__search-trigger { display: inline-flex; }
}

/* ---- Mobile trigger (lives in the off-canvas mobile nav) ---- */
.mobile-search {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hdr-border);
}
.mobile-search__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: var(--hdr-bg);
    color: var(--hdr-text-muted);
    border: 1px solid var(--hdr-border);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.mobile-search__trigger svg { flex-shrink: 0; }

/* ---- Search modal overlay ---- */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 16px;
}
.search-modal[hidden] { display: none; }
.search-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 26, .85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.search-modal__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 96px);
    overflow: hidden;
}
.search-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-surface);
}
.search-modal__head svg {
    color: var(--content-text-muted);
    flex-shrink: 0;
}
.search-modal__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--content-text);
    font-size: 16px;
    font-family: inherit;
    padding: 4px 0;
    min-width: 0;
}
.search-modal__input::placeholder { color: var(--content-text-dim); }
.search-modal__kbd {
    flex-shrink: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--content-text-muted);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.search-modal__results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Result groups + individual results ----

   Each result type (driver / track / series / event) shares a common
   row layout: icon | name + subtitle. The kind modifier classes on
   .search-modal__result control accent color (the icon's tint) and
   the icon shape itself is rendered inline via JS. Names are styled
   in Aldrich uppercase to match the rest of the site's "label" feel;
   subtitles use OC Highway for location/abbreviation strings. */
.search-modal__group + .search-modal__group {
    border-top: 1px solid var(--content-border);
}
.search-modal__group-label {
    padding: 8px 18px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--red);
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
}
.search-modal__result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--content-text);
    border-bottom: 1px solid var(--content-border);
    text-decoration: none;
    /* Subtle 2px accent strip on the left when active/hovered, in the
       kind's accent color. Built via box-shadow inset so it renders
       in front of the row background without expanding the box. */
    transition: background .12s ease, box-shadow .12s ease;
}
.search-modal__group:last-child .search-modal__result:last-child {
    border-bottom: none;
}
.search-modal__result:hover,
.search-modal__result--active {
    background: var(--content-surface);
    box-shadow: inset 3px 0 0 var(--red);
}

/* Per-kind icon accents. Different colors so the user can pick out
   "tracks" from "drivers" at a glance even before reading the labels. */
.search-modal__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--content-border);
    border-radius: 3px;
    background: var(--content-bg);
}
.search-modal__icon--driver { color: var(--red); }
.search-modal__icon--track  { color: var(--navy-light, #4a6fb8); }
.search-modal__icon--series { color: var(--yellow, #b8860b); }
.search-modal__icon--event  { color: var(--green, #0a8a3e); }

.search-modal__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Driver / track / series / event names — bold uppercase Aldrich.
   Aldrich is single-weight; pseudo-bolden via -webkit-text-stroke
   to give the labels visible weight that matches the bolded tabs. */
.search-modal__name {
    font-family: var(--font-head);
    font-size: 13px;
    -webkit-text-stroke: 0.02em currentColor;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Subtitle — flag + location text in OC Highway, matching the
   driver-row hometown convention used everywhere else on the site. */
.search-modal__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.search-modal__sub-text {
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-modal__flag {
    width: auto;
    height: 0.85em;
    flex-shrink: 0;
}
.search-modal__empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--content-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Lock body scroll when the modal is open. The .search-open class is added
   by the JS open() / removed by close(). */
body.search-open { overflow: hidden; }/* 06-photo-lightbox.css — Photo gallery + lightbox
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   PHOTO GALLERY (driver / track / race)
   ===================================================================== */
.ts-photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 16px;
}
@media (min-width: 600px) { .ts-photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ts-photo-grid { grid-template-columns: repeat(4, 1fr); } }

.ts-photo-tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    background: var(--content-surface);
    overflow: hidden;
}
.ts-photo-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.ts-photo-tile:hover img { transform: scale(1.04); }
.ts-photo-tile__credit {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 8px 8px 6px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    pointer-events: none;
}
.ts-photo-tile__primary {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: .06em;
}


/* =====================================================================
   LIGHTBOX (in-page image viewer)
   Used by the driver Photos tab; reusable by any other gallery that
   wants to drive it via window.DLM_Lightbox.open(items, index).
   ===================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10100;       /* above search modal */
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    cursor: pointer;
}
.lightbox__stage {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lightbox__img {
    max-width: 95vw;
    max-height: 85vh;
    object-fit: contain;
    background: #000;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .8);
}
.lightbox__caption {
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    text-align: center;
    max-width: 95vw;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.lightbox__close:hover { background: var(--red); border-color: var(--red); }
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 64px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
@media (max-width: 600px) {
    .lightbox__nav { width: 40px; height: 56px; }
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
    .lightbox__close { top: 8px; right: 8px; }
}
body.lightbox-open { overflow: hidden; }


/* =====================================================================
   DRIVER PHOTOS TAB
   ===================================================================== */
.dp-photos {
    /* Container is the dp-card body — no extra padding so the grid lines
       up with other tab content margins. */
}
.dp-photos__placeholder {
    padding: 48px 16px;
    text-align: center;
    color: var(--content-text-muted);
    font-size: 13px;
}
/* Photos Tab — Featured vs All sections */
.dp-photos__section { margin-bottom: 20px; }
.dp-photos__section:last-of-type { margin-bottom: 0; }
.dp-photos__section[hidden] { display: none; }
.dp-photos__section-head {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text);
    padding: 10px 16px;
    border-bottom: 2px solid var(--red);
    margin-bottom: 8px;
    background: var(--content-surface);
}
.dp-photos__more {
    padding: 16px;
    text-align: center;
}
.dp-photos__more-btn {
    min-width: 200px;
}

/* Override default ts-photo-tile cursor to make it obvious tiles open
   the lightbox now (rather than going to a new tab). */
.dp-photos .ts-photo-tile { cursor: zoom-in; }/* 07-driver-profile.css — Driver profile (dp-* + all dp additions)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   DRIVER PROFILE PAGE (dp-*)
   Tabbed layout, hero with car-number badge, frequent rivals/tracks cards.
   Conventions: light cards on the navy backdrop, red accents, dp- prefix
   namespaces everything to this page.
   ===================================================================== */

/* ---------- HERO ---------- */
.dp-hero {
    position: relative;
    min-height: 240px;
    background-color: var(--navy-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}
.dp-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,12,26,.25) 0%, rgba(8,12,26,.92) 100%);
    pointer-events: none;
}
.dp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 32px 16px 24px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-height: 240px;
}
.dp-hero__badge {
    flex-shrink: 0;
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(218,0,0,.18);
    border: 2px solid rgba(218,0,0,.55);
    color: #fff;
    font-family: var(--font-head);
    font-size: 28px;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.dp-hero__badge .whitespace-nowrap { white-space: nowrap; }
.dp-hero__info { flex: 1; min-width: 0; }
.dp-hero__remembering {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.6);
    font-weight: 700;
    margin-bottom: 4px;
}
.dp-hero__name {
    font-family: var(--font-head);
    font-size: 28px;
    line-height: 1.05;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0,0,0,.7);
    margin: 0;
}
.dp-hero__meta {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dp-hero__dot { color: rgba(255,255,255,.4); margin: 0 2px; }

@media (min-width: 768px) {
    .dp-hero { min-height: 320px; }
    .dp-hero__inner { min-height: 320px; padding: 48px 16px 32px; gap: 28px; }
    .dp-hero__badge { width: 120px; height: 120px; font-size: 48px; }
    .dp-hero__name { font-size: 44px; }
    .dp-hero__meta { font-size: 15px; }
}

/* ---------- TABS ---------- */
.dp-tabs {
    background: var(--navy-dark);
    border-bottom: 2px solid var(--red);
    position: sticky;
    top: var(--sticky-top);
    z-index: 100;
}

/* Mobile: dropdown trigger visible, tab list hidden until opened */
.dp-tabs__mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--navy-mid);
    border: none;
    border-left: 3px solid var(--red);
    color: #fff;
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
.dp-tabs__mobile-trigger svg {
    color: rgba(255,255,255,.5);
    transition: transform .2s;
}
.dp-tabs__mobile-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
/* Subtle hint text */
.dp-tabs__mobile-trigger::after {
    content: 'Switch tab';
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    margin-left: auto;
    margin-right: 8px;
}
.dp-tabs__inner {
    display: none;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.1);
}
.dp-tabs__inner.dp-tabs__inner--open {
    display: flex;
}
.dp-tab-btn {
    flex-shrink: 0;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hdr-text-muted);
    background: transparent;
    border: none;
    border-bottom: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    text-align: left;
}
.dp-tab-btn:hover { color: #fff; }
.dp-tab-btn--active {
    color: #fff;
    border-left-color: var(--red);
}

/* Desktop: hide trigger, show horizontal tab row */
@media (min-width: 768px) {
    .dp-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dp-tabs::-webkit-scrollbar { display: none; }
    .dp-tabs__mobile-trigger { display: none; }
    .dp-tabs__inner {
        display: flex !important;
        flex-direction: row;
        max-width: var(--max-w);
        margin: 0 auto;
        padding: 0 8px;
        border-top: none;
    }
    .dp-tab-btn {
        border-left: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        text-align: center;
    }
    .dp-tab-btn--active {
        border-left-color: transparent;
        border-bottom-color: var(--red);
    }
}

/* ---------- PANELS ---------- */
.dp-panel { padding: 16px 0 32px; }

/* ---------- CARDS ---------- */
.dp-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin: 0 16px 16px;
}
.dp-card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-surface);
}
/* Stacked variant: title on top, sub/description below (used for Closest Tracks) */
.dp-card__head--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.dp-card__head--stack .dp-card__sub { cursor: default; }
.dp-card__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    margin: 0;
}
.dp-card__more, .dp-card__sub {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.dp-card__note {
    font-size: 11px;
    font-style: italic;
    color: var(--content-text-dim);
    margin-top: 2px;
}
.dp-card__more:hover { color: var(--red); }
.dp-card__body { padding: 12px 16px; }
/* Flush variant for when the inner content provides its own padding (Race Log) */
.dp-card__flush { padding: 0; }

/* ---------- 2-COLUMN OVERVIEW LAYOUT ---------- */
.dp-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 900px) {
    .dp-overview-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0 8px;
        max-width: var(--max-w);
        margin: 0 auto;
    }
    .dp-overview-grid .dp-card { margin-left: 8px; margin-right: 8px; }
}
.dp-col { display: flex; flex-direction: column; }

/* ---------- RECENT ACTIVITY LIST ---------- */
.dp-activity { list-style: none; margin: 0; padding: 0; }
.dp-activity__item { border-bottom: 1px solid var(--content-border); }
.dp-activity__item:last-child { border-bottom: none; }
.dp-activity__link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    color: var(--content-text);
}
.dp-activity__link:hover { background: var(--content-surface); }
.dp-activity__body { flex: 1; min-width: 0; }
.dp-activity__track {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-activity__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
    line-height: 1;
}

/* ---------- FREQUENT RIVALS / TRACKS CARDS ---------- */
.dp-rivals, .dp-tracks { display: flex; flex-direction: column; }
.dp-rival, .dp-track {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
}
.dp-rival:last-child, .dp-track:last-child { border-bottom: none; }
.dp-rival:hover, .dp-track:hover { background: var(--content-surface); }
.dp-rival__rank, .dp-track__rank {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--red);
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.25);
}
.dp-rival__body, .dp-track__body { flex: 1; min-width: 0; }
.dp-rival__name, .dp-track__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
/* Driver names truncate; track names wrap to a second line on narrow screens */
.dp-rival__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-rival__sub, .dp-track__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 1px; line-height: 1;}
.dp-rival__row, .dp-track__row {
    margin-top: 6px;
    display: flex; gap: 12px;
    font-size: 11px;
    color: var(--content-text-muted);
}
.dp-rival__row strong, .dp-track__row strong {
    display: block;
    font-size: 14px;
    color: var(--content-text);
    line-height: 1;
}
.dp-rival__row small, .dp-track__row small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-dim);
}
.dp-rival__rate, .dp-track__rate {
    flex-shrink: 0;
    text-align: right;
    padding-left: 12px;
    white-space: nowrap;
}
.dp-rival__rate strong, .dp-track__rate strong {
    display: block;
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1;
    color: var(--content-text);
    white-space: nowrap;
}
.dp-rival__rate small, .dp-track__rate small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
}
.dp-rival__rate--win strong { color: var(--green); }
.dp-rival__rate--loss strong { color: var(--red); }

@media (max-width: 420px) {
    .dp-rival, .dp-track { gap: 8px; padding: 10px 12px; }
    .dp-rival__rate strong, .dp-track__rate strong { font-size: 17px; }
    .dp-rival__rate, .dp-track__rate { padding-left: 8px; }
    .dp-rival__rank, .dp-track__rank { width: 32px; height: 32px; font-size: 12px; }
}

/* H2H record badge on the rival card (replaces the old rate column) */
.dp-rival__record {
    flex-shrink: 0;
    flex-grow: 0;
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
}
.dp-rival__record strong {
    display: block;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}
.dp-rival__record small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- HEAD-TO-HEAD CARDS ---------- */
.dp-h2h {
    display: flex;
    flex-direction: column;
}
.dp-h2h__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
}
.dp-h2h__card:last-child { border-bottom: none; }
.dp-h2h__card:hover { background: var(--content-surface); }
.dp-h2h__card.dp-h2h-hidden { display: none; }
.dp-h2h__rank {
    flex-shrink: 0;
    width: 44px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--red);
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.25);
    padding: 0 2px;
    letter-spacing: -0.02em;
}
/* 3-digit ranks (100+) use smaller font to fit comfortably */
.dp-h2h__rank--big { font-size: 10px; }
.dp-h2h__body { flex: 1; min-width: 0; }
.dp-h2h__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-h2h__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px; line-height: 1;}
.dp-h2h__sub .ts-flag { height: 0.95em; }
.dp-h2h__stats {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    padding-right: 4px;
}
.dp-h2h__rate,
.dp-h2h__record {
    text-align: center;
    width: 90px;
    flex-shrink: 0;
    flex-grow: 0;
}
.dp-h2h__rate strong,
.dp-h2h__record strong {
    display: block;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
}
.dp-h2h__rate small,
.dp-h2h__record small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Mobile: hide Win Rate column entirely, keep Record column with its
   fixed width centered in its container. Card stays in a single row —
   rank | name/flag | record — so nothing wraps or truncates. */
@media (max-width: 720px) {
    .dp-h2h__stats { gap: 0; padding-right: 0; }
    .dp-h2h__rate { display: none; }
    .dp-h2h__record {
        text-align: center;
        width: 96px;
    }
    .dp-h2h__record strong { white-space: nowrap; }
    .dp-h2h__record small  { white-space: nowrap; }
}
@media (max-width: 400px) {
    .dp-h2h__card { padding: 10px 12px; gap: 8px; }
    .dp-h2h__rank { width: 36px; }
}

/* ---------- STUD/DUD TRACK HIGHLIGHTS ---------- */
.dp-card--stud { border-top: 3px solid var(--green); }
.dp-card--dud { border-top: 3px solid var(--red); }
.dp-stud-list { list-style: none; margin: 0; padding: 0; }
.dp-stud-list li { border-bottom: 1px solid var(--content-border); }
.dp-stud-list li:last-child { border-bottom: none; }
.dp-stud-list li a {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 16px;
    color: var(--content-text);
}
.dp-stud-list li a:hover { background: var(--content-surface); }
.dp-stud-list__name {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-stud-list__stat {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--content-text-muted);
}
.dp-stud-list__stat strong { color: var(--content-text); }

/* Track percentile list (used in Stud/Dud cards on Track Analysis tab) */
.dp-tpl { display: flex; flex-direction: column; }
.dp-tpl__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
}
.dp-tpl__item:last-child { border-bottom: none; }
.dp-tpl__item:hover { background: var(--content-surface); }
.dp-tpl__body { flex: 1; min-width: 0; }
.dp-tpl__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-tpl__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
    min-width: 0; line-height: 1;}
.dp-tpl__loc {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-tpl__loc .ts-flag { height: 0.95em; }
.dp-tpl__size {
    color: var(--content-text-dim);
    margin-top: 1px;
}
.dp-tpl__pct { text-align: center; flex-shrink: 0; flex-grow: 0; width: 90px; }
.dp-tpl__pct strong {
    display: block;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1;
}
.dp-tpl__pct small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- TRACK ANALYSIS LAYOUT (All Tracks + Closest Tracks) ---------- */
.dp-tracks-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
}
@media (min-width: 900px) {
    .dp-tracks-layout {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        max-width: var(--max-w);
        margin: 0 auto;
        align-items: start;
    }
    .dp-tracks-layout > .dp-card { margin-left: 8px; margin-right: 8px; }
}

/* Sort dropdown on the right of the card head */
.dp-card__head--sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.dp-trk-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.dp-trk-sort__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    font-weight: 700;
}
.dp-trk-sort__select {
    padding: 5px 8px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    font-family: inherit;
    font-size: 12px;
    color: var(--content-text);
    cursor: pointer;
}
.dp-trk-sort__select:focus {
    outline: none;
    border-color: var(--red);
}

/* All Tracks card grid */
.dp-trk-grid {
    display: flex;
    flex-direction: column;
}
.dp-trk-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
}
.dp-trk-card:last-child { border-bottom: none; }
.dp-trk-card:hover { background: var(--content-surface); }
.dp-trk-card__body { flex: 1; min-width: 0; }
.dp-trk-card__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-trk-card__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
    min-width: 0; line-height: 1;}
.dp-trk-card__loc {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-trk-card__loc .ts-flag {
    height: 0.95em; width: auto; flex-shrink: 0;
}
.dp-trk-card__size {
    color: var(--content-text-dim);
    margin-top: 1px;
}
.dp-activity__loc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dp-trk-card__stats {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.dp-trk-card__stat {
    text-align: center;
    width: 52px;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.dp-trk-card__stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1;
    color: var(--content-text);
}
.dp-trk-card__stat small {
    display: block;
    font-size: 9px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}
.dp-trk-card.dp-trk-hidden { display: none; }

/* Slim variant used in Frequent Tracks (Overview right col) — 3 stat cols */
.dp-trk-grid--slim .dp-trk-card__stat {
    width: 52px;
}

/* Mobile: trim padding so the card grid is flush with the Stud/Dud cards above */
@media (max-width: 600px) {
    .dp-trk-card {
        padding: 10px 12px;
        gap: 6px;
    }
    .dp-trk-card__stat {
        width: 46px;
    }
    .dp-trk-card__stat strong {
        font-size: 13px;
    }
}

/* Pagination for All Tracks */
.dp-trk-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--content-border);
    gap: 12px;
}
.dp-trk-pager[hidden] { display: none; }
.dp-trk-pagebtn {
    padding: 6px 12px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--content-text);
    cursor: pointer;
}
.dp-trk-pagebtn:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.dp-trk-pagebtn:disabled { opacity: .3; cursor: not-allowed; }
.dp-trk-pageinfo {
    font-size: 11px;
    color: var(--content-text-muted);
}

/* ---------- CLOSEST TRACKS SIDEBAR ---------- */
.dp-closest-filter {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-surface);
}
.dp-closest-filter__btn {
    flex: 1;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid var(--content-border);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
}
.dp-closest-filter__btn:hover { color: var(--content-text); }
.dp-closest-filter__btn[data-active="true"] {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

.dp-closest { display: flex; flex-direction: column; }
.dp-closest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
}
.dp-closest__item:last-child { border-bottom: none; }
.dp-closest__item:hover { background: var(--content-surface); }
.dp-closest__item--inactive { opacity: .55; }
.dp-closest__item.dp-closest-hidden { display: none; }
.dp-closest__body { flex: 1; min-width: 0; }
.dp-closest__name {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-closest__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
    min-width: 0; line-height: 1;}
.dp-closest__loc {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dp-closest__loc .ts-flag { height: 0.85em; }
.dp-closest__size {
    color: var(--content-text-dim);
    margin-top: 1px;
}
.dp-closest__dist {
    text-align: center;
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 76px;
}
.dp-closest__dist strong {
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1;
    color: var(--content-text);
}
.dp-closest__dist small {
    font-size: 9px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
}
.dp-closest__badge {
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(140, 140, 160, .15);
    color: var(--content-text-muted);
    border: 1px solid var(--content-border);
}
.dp-closest__badge--active {
    background: rgba(10, 138, 62, .12);
    color: var(--green);
    border-color: rgba(10, 138, 62, .3);
}
.dp-closest__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--content-text-muted);
    font-size: 12px;
}

/* ---------- RACE LOG CALENDAR LAYOUT ---------- */
/* .dp-activity--log reuses the Recent Activity pattern; differences are
   just the chevron on the right + full list (no truncation to 5 items). */
.dp-activity__chevron {
    flex-shrink: 0;
    color: var(--content-text-dim);
    display: flex;
    align-items: center;
    margin-left: 4px;
}
.dp-activity__chevron i { width: 18px; height: 18px; }

/* ---------- RACE LOG FILTERS ---------- */
.dp-log-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-surface);
    align-items: center;
}
.dp-log-filter {
    padding: 6px 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    font-family: inherit;
    font-size: 12px;
    color: var(--content-text);
    cursor: pointer;
}
.dp-log-filter:focus {
    outline: none;
    border-color: var(--red);
}
.dp-log-filter-clear {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--content-text-muted);
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    margin-left: auto;
}
.dp-log-filter-clear:hover { color: var(--red); }


/* =====================================================================
   DRIVER PROFILE v2 ADDITIONS
   - HOF banner above hero
   - Hero zoom-on-hover (background image scale)
   - Recent Seasons card layout
   - Aliases / nicknames sub-text in hero
   ===================================================================== */

/* ---- Hall of Fame banner ---- */
.dp-hof-banner {
    background: linear-gradient(90deg, #b8860b 0%, #d4af37 50%, #b8860b 100%);
    color: #1a1d26;
    padding: 8px 16px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 2px solid #8b6508;
}
.dp-hof-banner__icon {
    font-size: 18px;
    line-height: 1;
}
.dp-hof-banner__text {
    font-weight: 800;
    font-size: 14px;
}
.dp-hof-banner__sub {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(26,29,38,.7);
    text-transform: none;
}
@media (max-width: 600px) {
    .dp-hof-banner { flex-wrap: wrap; gap: 4px 10px; padding: 6px 12px; }
    .dp-hof-banner__sub { width: 100%; }
}

/* HOF hero: subtle gold tint on top border */
.dp-hero--hof {
    border-top: 3px solid #d4af37;
}

/* Hero zoom removed — animating background-size isn't GPU-accelerated and
   produces jittery scaling on most browsers. If we want this back later
   we'll do it via a wrapper element with `transform: scale()`. */

/* ---- Nicknames + aliases under driver name ---- */
.dp-hero__nicks {
    margin-top: 4px;
    font-size: 13px;
    font-style: italic;
    color: rgba(255,255,255,.75);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dp-hero__aliases {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.55);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dp-hero__aliases span {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    margin-right: 4px;
}

/* ---- Recent Seasons cards ---- */
.dp-seasons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--content-border);
}
.dp-season {
    background: var(--content-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.dp-season__year {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--red);
    line-height: 1;
    flex-shrink: 0;
    min-width: 60px;
}
.dp-season__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    flex: 1;
}
.dp-season__row span {
    font-size: 11px;
    color: var(--content-text-muted);
    text-align: center;
}
.dp-season__row strong {
    display: block;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1;
    color: var(--content-text);
    margin-bottom: 2px;
}
.dp-season__row small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-dim);
    font-weight: 700;
}

/* Stat-grid item: support gradient text in __value */
.stat-grid__value[style*="background-clip"] {
    -webkit-text-fill-color: transparent;
}


/* =====================================================================
   DRIVER PROFILE v3 ADDITIONS
   ===================================================================== */

/* ---- Car-number badge: auto-shrink for longer numbers ----
   The badge is a fixed box; `data-len` on the parent tells us how many
   characters are inside, and we scale the inner text accordingly so a
   3- or 4-character number ("17M", "229") still fits without truncation
   or wrapping. The `.whitespace-nowrap` span from formatCarNumber is
   already inside `.dp-hero__badge-num`. */
.dp-hero__badge-num {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1;
    font-family: var(--font-head);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
    /* Default size — applies for 1-2 char numbers */
    font-size: 28px;
    /* Allow internal sub-letters to flex */
    max-width: 100%;
}
.dp-hero__badge-num .whitespace-nowrap {
    white-space: nowrap;
    display: inline-block;
}
/* Scale steps based on character count */
.dp-hero__badge[data-len="3"] .dp-hero__badge-num { font-size: 22px; }
.dp-hero__badge[data-len="4"] .dp-hero__badge-num { font-size: 18px; }
.dp-hero__badge[data-len="5"] .dp-hero__badge-num { font-size: 15px; }

@media (min-width: 768px) {
    .dp-hero__badge-num { font-size: 48px; }
    .dp-hero__badge[data-len="3"] .dp-hero__badge-num { font-size: 38px; }
    .dp-hero__badge[data-len="4"] .dp-hero__badge-num { font-size: 30px; }
    .dp-hero__badge[data-len="5"] .dp-hero__badge-num { font-size: 24px; }
}

/* Override the previous .dp-hero__badge font-size rule which targeted the
   wrapper itself — now the inner span owns sizing and the wrapper just
   provides the box. */
.dp-hero__badge { font-size: inherit; }

/* ---- Hero life-dates line + relationships line ---- */
.dp-hero__life {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.dp-hero__rels {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.75);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.dp-hero__rel { display: inline; }
.dp-hero__rels a {
    color: #fff;
    border-bottom: 1px dotted rgba(255,255,255,.4);
}
.dp-hero__rels a:hover { border-bottom-color: #fff; }
/* Follow button sits as the trailing element inside the info column.
   The 14px margin-top gives it air from whatever variable content is
   above (relationships, aliases, life-dates, hometown — any combination). */
.dp-hero__info > .follow-btn {
    margin-top: 14px;
}
.dp-hero__rel-type {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .08em;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    margin-right: 4px;
}

/* ---- Recent Seasons: equal-width stat cells ---- */
.dp-season__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex: 1;
}
/* When percentile column is missing (no API data), grid still works with
   3 columns naturally because the 4th cell just isn't rendered. */
.dp-season__row span {
    text-align: center;
    min-width: 0;
}


/* =====================================================================
   ROUND 7 ADDITIONS
   ===================================================================== */

/* ---- Flag size: match the surrounding text instead of fixed 16px ----
   In contexts where text is small (sub-lines), a 16px flag dwarfs the text.
   Switching to em sizing means the flag automatically scales with the
   parent's font-size. The `.ts-flag` base rule still applies for callers
   that want the legacy 16px size; the `--inline` modifier opts into em. */
.dp-hero__meta .ts-flag,
.dp-activity__sub .ts-flag,
.dp-rival__sub .ts-flag,
.dp-track__sub .ts-flag {
    height: 0.95em;
}

/* ---- Recent Form cards (new dp-form-* layout) ----
   Replaces the older ts-form-grid which displayed everything on one line.
   Now each window (30/90/365) is a small card with three centered stat
   blocks, matching the visual weight of Recent Seasons. */
.dp-form-grid {
    display: grid;
    /* Auto-size columns to however many cards exist (1, 2, or 3) so a
       single 365-day card fills the full container instead of clinging
       to one third of it. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 1px;
    background: var(--content-border);
}
.dp-form-card {
    background: var(--content-bg);
    padding: 12px 8px;
    text-align: center;
}
.dp-form-card__label {
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--red);
    margin-bottom: 8px;
}
.dp-form-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.dp-form-card__stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: 18px;
    line-height: 1;
    color: var(--content-text);
    margin-bottom: 2px;
}
.dp-form-card__stat small {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-dim);
    font-weight: 700;
}

/* ---- Headline strip with 4 cells (was 6) ---- */
.stat-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--content-border);
    margin: 0 16px 16px;
}
@media (min-width: 600px) {
    .stat-grid--4 { gap: 1px; }
}


/* =====================================================================
   ROUND 8 ADDITIONS
   ===================================================================== */

/* ---- Recent Activity calendar cell (date on left, finish on right) ---- */
.dp-activity__date {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    padding: 4px 2px;
    text-align: center;
    line-height: 1;
}
.dp-activity__date-dow {
    font-family: var(--font-head);
    font-size: 9px;
    color: var(--content-text-dim);
    letter-spacing: .08em;
    margin-bottom: 2px;
}
.dp-activity__date-month {
    font-family: var(--font-head);
    font-size: 9px;
    color: var(--red);
    letter-spacing: .08em;
    margin-bottom: 2px;
}
.dp-activity__date-day {
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--content-text);
    line-height: 1;
    margin-bottom: 2px;
}
.dp-activity__date-year {
    font-size: 9px;
    color: var(--content-text-dim);
    font-weight: 600;
}

/* Finish badge moves to the right side; widen + heighten so DNS/3-digit fit */
.dp-activity__pos {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1;
    background: var(--content-surface);
    color: var(--content-text-muted);
    border: 1px solid var(--content-border);
    margin-left: auto;
    /* Auto-shrink for longer content (DNS, 3-digit finishes) without
       changing the box dimensions. */
    overflow: hidden;
}
.dp-activity__pos--win {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.dp-activity__pos--top5 {
    background: rgba(218,0,0,.12);
    color: var(--red);
    border-color: rgba(218,0,0,.3);
}
.dp-activity__pos--bad {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--content-text-muted);
}

/* Earnings now sits inline at the end of the class line, separated by a
   subtle pipe (emitted as an explicit span so code can vary the separator). */
.dp-activity__earn {
    font-size: 11px;
    font-weight: 700;
    color: var(--green);
}
.dp-activity__sep {
    margin: 0 6px;
    color: var(--content-text-dim);
    font-weight: 400;
}

/* Series name line under the class/earnings line. Alphabetized server-side
   and separated by middots (API formats as "Lucas Oil · World of Outlaws"). */
.dp-activity__series {
    margin-top: 2px;
    font-size: 10px;
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

/* ---------- RANKING HISTORY ---------- */
.dp-rhist { display: flex; flex-direction: column; }
.dp-rhist__year {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
}
.dp-rhist__year:last-child { border-bottom: none; }
.dp-rhist__year-label {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--red);
    line-height: 1;
    padding-top: 4px;
    width: 56px;
}
.dp-rhist__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.dp-rhist__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--red);
    min-width: 0;
}
.dp-rhist__pos {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--red);
    line-height: 1;
    flex-shrink: 0;
}
.dp-rhist__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.dp-rhist__label {
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.15;
    letter-spacing: .02em;
    white-space: nowrap;
}
.dp-rhist__of {
    font-size: 9px;
    color: var(--content-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ---------- CHAMPIONSHIPS ---------- */
.dp-champ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px;
    background: var(--content-border);
}
.dp-champ-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--content-bg);
    color: var(--content-text);
    min-height: 64px;
}
.dp-champ-item--link:hover { background: var(--content-surface); }
.dp-champ-item__year {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--yellow);
    line-height: 1;
    width: 52px;
}
.dp-champ-item__label {
    flex: 1;
    min-width: 0;
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
}
.dp-champ-item__class {
    display: block;
    margin-top: 3px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    color: var(--content-text-muted);
}

/* Hall of Fame featured card - gold gradient accent */
.dp-champ-card--hof {
    border-top: 3px solid var(--yellow);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08) 0%, transparent 60%);
}
.dp-champ-card--hof .dp-card__title { color: var(--yellow); }
.dp-champ-item--hof .dp-champ-item__year {
    width: auto;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
}


/* ================================================================
   FILTER BAR — H2H, Track Analysis, Stats, Race Log
   Sits at the top of each filterable tab panel, sticky beneath the
   page's tab bar. Navy/red DLM aesthetic: uppercase heading font for
   labels, red accents for active state, chunky popover dropdowns.
   ================================================================ */
.dp-filterbar {
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
    margin-bottom: 16px;
    padding: 10px 14px;
    position: sticky;
    top: var(--dp-filter-sticky-top);
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.dp-filterbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
    justify-content: center;
}

/* ── Filter block (shared) ────────────────────────────────── */
.dp-filter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative;
}
.dp-filter__label {
    font-family: var(--font-head);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
    line-height: 1;
    padding-left: 2px;
}

/* ── Trigger (closed state of multi/size dropdowns) ───────── */
.dp-filter__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 132px;
    padding: 7px 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.dp-filter__trigger:hover { border-color: var(--content-text-muted); }
.dp-filter.is-active .dp-filter__trigger {
    border-color: var(--red);
    background: rgba(218,0,0,.05);
    color: var(--content-text);
}
.dp-filter.is-active .dp-filter__triggerlabel { color: var(--red); font-weight: 700; }
.dp-filter__trigger[aria-expanded="true"] {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(218,0,0,.15);
}
.dp-filter__triggerlabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    text-align: left;
    flex: 1;
}
.dp-filter__caret {
    color: var(--content-text-dim);
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform .15s;
}
.dp-filter__trigger[aria-expanded="true"] .dp-filter__caret {
    transform: rotate(180deg);
    color: var(--red);
}

/* ── Popover ──────────────────────────────────────────────── */
.dp-filter__popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 30;
    min-width: 200px;
    max-width: 320px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-top: 3px solid var(--red);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
}
.dp-filter__popover[hidden] { display: none; }
.dp-filter__options {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px 0;
}
.dp-filter__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
    transition: background .08s;
}
.dp-filter__opt:hover { background: var(--content-surface); }
.dp-filter__opt input[type="checkbox"],
.dp-filter__opt input[type="radio"] {
    accent-color: var(--red);
    margin: 0;
    flex-shrink: 0;
}
.dp-filter__opt span { color: var(--content-text); }
.dp-filter__empty {
    padding: 14px;
    text-align: center;
    color: var(--content-text-dim);
    font-size: 12px;
    font-style: italic;
}

/* ── Popover action footer (Clear / Apply) ────────────────── */
.dp-filter__actions {
    display: flex;
    gap: 1px;
    background: var(--content-border);
    border-top: 1px solid var(--content-border);
}
.dp-filter__action {
    flex: 1;
    padding: 9px 12px;
    background: var(--content-surface);
    border: none;
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.dp-filter__action--clear { color: var(--content-text-muted); }
.dp-filter__action--clear:hover { background: var(--content-bg); color: var(--content-text); }
.dp-filter__action--apply {
    background: var(--red);
    color: #fff;
}
.dp-filter__action--apply:hover { background: #a00; }

/* Apply/Clear buttons (results page variant) */
.dp-filter__apply, .dp-filter__clear {
    flex: 1;
    padding: 9px 12px;
    background: var(--content-surface);
    border: none;
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.dp-filter__apply { background: var(--red); color: #fff; }
.dp-filter__apply:hover { background: #a00; }
.dp-filter__clear { color: var(--content-text-muted); }
.dp-filter__clear:hover { color: var(--content-text); }
.dp-filter__clear-all {
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    align-self: center;
    padding: 6px 0;
}
.dp-filter__clear-all:hover { color: var(--red); }

/* Inline error message inside a popover (e.g. size filter requires both
   operator and value before Apply). Sits between options list and action
   footer. */
.dp-filter__error {
    padding: 8px 12px;
    background: rgba(218,0,0,.08);
    color: var(--red);
    font-size: 11px;
    font-weight: 600;
    border-top: 1px solid var(--content-border);
    line-height: 1.35;
}
.dp-filter__error[hidden] { display: none; }

/* ── Size filter: operator row inside popover ─────────────── */
.dp-filter__size-ops {
    display: flex;
    gap: 1px;
    padding: 8px;
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
}
.dp-filter__size-op {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--content-text-muted);
    cursor: pointer;
    user-select: none;
    transition: all .1s;
}
.dp-filter__size-op:hover { border-color: var(--content-text-muted); color: var(--content-text); }
.dp-filter__size-op input { display: none; }
.dp-filter__size-op.is-active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

/* ── Timeframe (always-visible inline control) ────────────── */
.dp-filter--timeframe { gap: 5px; }
.dp-filter__tfgroup {
    display: flex;
    gap: 0;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    padding: 2px;
}
.dp-filter__tfbtn {
    padding: 5px 11px;
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-muted);
    cursor: pointer;
    user-select: none;
    transition: all .1s;
    line-height: 1.4;
}
.dp-filter__tfbtn input { display: none; }
.dp-filter__tfbtn:hover { color: var(--content-text); }
.dp-filter__tfbtn.is-active {
    background: var(--red);
    color: #fff;
    font-weight: 700;
}
.dp-filter__tfdetail {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}
/* Collapse the detail row entirely when mode = all or last365.
   Parent element carries data-tf-mode so CSS can react. */
.dp-filter--timeframe[data-tf-mode="all"]     .dp-filter__tfdetail,
.dp-filter--timeframe[data-tf-mode="last365"] .dp-filter__tfdetail { display: none; }
.dp-filter__select {
    padding: 6px 8px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    min-width: 78px;
    cursor: pointer;
}
.dp-filter__num {
    width: 70px;
    padding: 6px 6px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.dp-filter__select:focus,
.dp-filter__num:focus { outline: none; border-color: var(--red); }
.dp-filter__dash {
    color: var(--content-text-dim);
    font-size: 14px;
    font-weight: 700;
}
.dp-filter__date {
    padding: 6px 8px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 128px;
    color-scheme: dark;
}
.dp-filter__date:focus { outline: none; border-color: var(--red); }

/* Toggle pill (Wins-only on Race Log) */
.dp-filter__togglebtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s;
    user-select: none;
    line-height: 1;
}
.dp-filter__togglebtn-icon {
    font-size: 14px;
    line-height: 1;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .12s, opacity .12s;
}
.dp-filter__togglebtn:hover { border-color: var(--content-text-muted); color: var(--content-text); }
.dp-filter__togglebtn.is-active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.dp-filter__togglebtn.is-active .dp-filter__togglebtn-icon {
    filter: none;
    opacity: 1;
}

/* ── Clear Filters (bar-level) + spinner ──────────────────── */
.dp-filterbar__clear {
    margin-left: auto;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--content-border);
    color: var(--content-text-muted);
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    cursor: pointer;
    transition: all .12s;
    align-self: flex-end;
}
.dp-filterbar__clear:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(218,0,0,.04);
}
.dp-filterbar__spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--red);
    align-self: flex-end;
    padding: 8px 0;
}
.dp-filterbar__spinner[hidden] { display: none; }
.dp-filterbar__spinner-dot {
    width: 8px; height: 8px;
    border: 2px solid var(--red);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dp-filter-spin .7s linear infinite;
}
@keyframes dp-filter-spin { to { transform: rotate(360deg); } }

/* ── Mobile: stack + scroll if overflow ───────────────────── */
@media (max-width: 700px) {
    .dp-filterbar { padding: 10px 12px; }
    .dp-filterbar__inner { gap: 8px 10px; }
    .dp-filter__trigger { min-width: 108px; font-size: 11px; padding: 6px 8px; }
    .dp-filter__popover { min-width: 180px; max-width: min(280px, calc(100vw - 24px)); }
    .dp-filter__tfbtn { padding: 5px 8px; font-size: 9.5px; }
    .dp-filterbar__clear { margin-left: 0; }
    .dp-filter__triggerlabel { max-width: 120px; }
}
@media (max-width: 400px) {
    .dp-filterbar__inner { gap: 6px 8px; }
    .dp-filter__trigger { min-width: 0; font-size: 10px; }
    .dp-filter__label { font-size: 8px; }
}

/* Loading state on panel content during AJAX refresh */
.dp-panel__content[data-loading="true"] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity .12s;
}

/* ---- Hero fallback when there's no photo ----
   Shows the DLM wordmark at low opacity centered on the dark navy backdrop,
   so the hero block still has visual weight without being a flat color. */
.dp-hero--nophoto {
    background-color: var(--navy-dark);
    background-image: url('/assets/images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 80%;
}
.dp-hero--nophoto::before {
    /* Dim the logo via an overlay rather than CSS opacity on the bg image
       (CSS doesn't expose bg-image opacity directly). */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8,12,26,.7);
    pointer-events: none;
    z-index: 0;
}
.dp-hero--nophoto .dp-hero__inner { position: relative; z-index: 1; }

/* ---- Recent Activity car#/class line ---- */
.dp-activity__class {
    margin-top: 2px;
    font-size: 11px;
    color: var(--content-text-muted);
    line-height: 1.2;
}
.dp-activity__class .whitespace-nowrap {
    /* tsCarNumber's pre-rendered span — keep car# on one line */
    white-space: nowrap;
    font-weight: 700;
    color: var(--content-text);
}

/* ---- Current Rankings ----
   Pills stack vertically inside the card, flush together with hairline
   dividers between them — the 1px gap on the flex column reveals the card
   border color underneath, acting as the divider. */
.dp-rankings {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--content-border);
}

.dp-ranking-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--content-bg);
    border-left: 3px solid var(--red);
    padding: 10px 12px;
    min-width: 0;
    color: var(--content-text);
    transition: background .12s;
}
.dp-ranking-pill:hover {
    background: var(--content-surface);
    color: var(--content-text);
}
.dp-ranking-pill:hover .dp-ranking-pill__chev {
    color: var(--red);
    transform: translateX(2px);
}
.dp-ranking-pill__chev {
    flex-shrink: 0;
    color: var(--content-text-dim);
    display: flex;
    align-items: center;
    transition: color .12s, transform .12s;
}
.dp-ranking-pill__pos {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--red);
    line-height: 1;
    flex-shrink: 0;
    width: 72px;
    text-align: center;
}
.dp-ranking-pill__count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--content-text-muted);
    white-space: nowrap;
    min-width: 72px;
}
.dp-ranking-pill__label {
    flex: 1;
    min-width: 0;
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
    text-align: right;
}/* 08-driver-directory.css — Driver directory (dd-*)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   DRIVER DIRECTORY (dd-*)
   Browse + filter page at /drivers. Card-grid layout with car-number
   badge on each row.
   ===================================================================== */

/* ---- Hero strip ---- */
.dd-hero {
    background: linear-gradient(135deg, #0a0e1a 0%, #0a1545 40%, #0a0e1a 100%);
    border-bottom: 3px solid var(--red);
    padding: 24px 0;
    position: relative;
    overflow: hidden;
}
.dd-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(218,0,0,.06), transparent 60%);
    pointer-events: none;
}
.dd-hero__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
}
.dd-hero__title {
    font-family: var(--font-head);
    font-size: 22px;
    color: #fff;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
}
.dd-hero__sub {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    margin: 0;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dd-hero__clear {
    color: var(--red);
    font-weight: 700;
}
@media (min-width: 768px) {
    .dd-hero { padding: 32px 0; }
}

/* ---- A–Z letter strip ---- */
.dd-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: var(--max-w);
    margin: 16px auto 0;
    padding: 0 16px;
    justify-content: center;
}
@media (min-width: 768px) {
    .dd-letters { justify-content: flex-start; }
}
.dd-letter {
    flex-shrink: 0;
    min-width: 32px;
    padding: 6px 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 12px;
    text-align: center;
    transition: background .12s, color .12s, border-color .12s;
}
.dd-letter:hover {
    border-color: var(--red);
    color: var(--red);
}
.dd-letter--active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ---- Filter bar ---- */
.dd-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    max-width: var(--max-w);
    margin: 16px auto;
    padding: 0 16px;
}
.dd-filters__field {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    padding: 8px 10px;
    color: var(--content-text);
    font-size: 13px;
    font-family: inherit;
    min-height: 36px;
    box-sizing: border-box;
}
.dd-filters__field--search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 200px;
}
.dd-filters__field--search svg { color: var(--content-text-muted); flex-shrink: 0; }
.dd-filters__field--search input {
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.dd-filters__select {
    cursor: pointer;
    /* Browser default arrow */
}
.dd-filters__pills {
    display: flex;
    gap: 0;
    border: 1px solid var(--content-border);
    background: var(--content-bg);
}
.dd-pill {
    padding: 8px 14px;
    color: var(--content-text-muted);
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-right: 1px solid var(--content-border);
}
.dd-pill:last-child { border-right: none; }
.dd-pill:hover { color: var(--content-text); background: var(--content-surface); }
.dd-pill--active {
    background: var(--red);
    color: #fff;
}
.dd-filters__submit {
    padding: 8px 16px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 36px;
}
.dd-filters__submit:hover { background: #b80000; }

/* ---- Driver card grid ---- */
.dd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--content-border);
    max-width: var(--max-w);
    margin: 0 auto 24px;
    border-top: 1px solid var(--content-border);
    border-bottom: 1px solid var(--content-border);
}
@media (min-width: 700px) {
    .dd-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
    .dd-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.dd-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    color: var(--content-text);
    transition: background .12s;
}
.dd-card:hover { background: var(--content-surface); }
.dd-card__badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(218, 0, 0, .12);
    border: 2px solid rgba(218, 0, 0, .35);
    color: var(--red);
}
.dd-card__badge--empty {
    background: var(--content-surface);
    border: 2px dashed var(--content-border);
}
.dd-card__badge-num {
    font-family: var(--font-head);
    line-height: 1;
    font-size: 22px;
    color: var(--red);
}
/* Auto-shrink for longer car numbers */
.dd-card__badge[data-len="3"] .dd-card__badge-num { font-size: 18px; }
.dd-card__badge[data-len="4"] .dd-card__badge-num { font-size: 14px; }
.dd-card__badge[data-len="5"] .dd-card__badge-num { font-size: 12px; }

.dd-card__body { flex: 1; min-width: 0; }
.dd-card__name {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--content-text);
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dd-card__sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px; line-height: 1;}
.dd-card__sub .ts-flag {
    width: auto;
    height: 0.95em;
}
.dd-card__stats {
    margin-top: 4px;
    font-size: 11px;
    color: var(--content-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dd-card__stat strong { color: var(--content-text); font-weight: 700; }
.dd-card__stat-sep { color: var(--content-border); }

/* ---- Pagination ---- */
.dd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: var(--max-w);
    margin: 0 auto 32px;
    padding: 0 16px;
}
.dd-page-btn {
    padding: 8px 16px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
}
.dd-page-btn:hover {
    border-color: var(--red);
    color: var(--red);
}
.dd-page-btn--disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.dd-page-info {
    font-size: 12px;
    color: var(--content-text-muted);
}/* 09-stats.css — Stats + leaderboards page
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   STATS & LEADERBOARDS (merged stats + rankings page)
   ===================================================================== */

/* ── Tier filter form ───────────────────────────────────────── */
.sl-tier-form {
    padding: 0 16px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.sl-tier-select {
    padding: 8px 12px;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    min-width: 200px;
}
.sl-tier-select:focus { outline: none; border-color: var(--red); }

/* ── Hero leader cards (top-of-page stat category winners) ── */
.sl-heroes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1px;
    background: var(--content-border);
    margin: 0 0 24px;
}
.sl-hero {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background: var(--content-bg);
    color: var(--content-text);
    transition: background .12s;
}
.sl-hero:hover { background: var(--content-surface); }
.sl-hero--active {
    background: var(--content-surface);
    border-left: 3px solid var(--red);
    padding-left: 13px;
}
.sl-hero__icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}
.sl-hero__body { min-width: 0; }
.sl-hero__label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
    margin-bottom: 2px;
}
.sl-hero__driver {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-hero__value {
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--red);
    line-height: 1;
    margin-top: 4px;
}

/* ── Table section ──────────────────────────────────────────── */
.sl-table-wrap {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin-bottom: 24px;
}
.sl-table-head {
    padding: 14px 16px;
    border-bottom: 2px solid var(--red);
}
.sl-table-title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text);
    margin: 0;
}

.sl-scroll { overflow-x: auto; }
.sl-table { table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px;
}
.sl-th {
    padding: 10px 8px;
    background: var(--content-surface);
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-dim);
    border-bottom: 1px solid var(--content-border);
    position: sticky;
    top: 0;
    z-index: 5;
}
.sl-th--sort a {
    color: inherit;
    transition: color .1s;
}
.sl-th--sort a:hover { color: var(--red); }
.sl-th--active {
    color: var(--red);
    border-bottom-color: var(--red);
}
.sl-th--active a { color: var(--red); -webkit-text-stroke: 0.02em currentColor; }
.sl-th--active { border-bottom: 2px solid var(--red); }
.sl-th--expand { display: none; }
.sl-td--expand { display: none; }
.sl-expand-btn { display: none; }
.sl-detail-row { display: none !important; }
.sl-th--pos { text-align: center; width: 48px; }
.sl-th--car { text-align: center; width: 56px; }
.sl-th--driver { text-align: left; width: 220px; }
.sl-th--sort { text-align: center; }

.sl-td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--content-border);
    vertical-align: middle;
}
.sl-td--pos { text-align: center; }
.sl-td--car {
    text-align: center;
    font-family: var(--font-head);
    font-size: 12px;
}
.sl-td--num { text-align: center; font-variant-numeric: tabular-nums; }
.sl-td--wins { font-weight: 800; }
.sl-td--sorted {
    background: rgba(218,0,0,.04);
    color: var(--content-text);
}
.sl-td--driver { padding: 8px; }
.sl-pos-num {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--content-text-muted);
    -webkit-text-stroke: 0.02em currentColor;
}
.sl-car {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--content-text);
    min-width: 36px;
    height: 28px;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0.02em currentColor;
    padding: 0 6px;
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.2);
    border-radius: 3px;
}
.sl-zero { color: var(--content-text-dim); opacity: .4; }
.sl-best-finish--gold { color: var(--yellow); -webkit-text-stroke: 0.02em currentColor; }
.sl-pctl { font-family: var(--font-head); }
.sl-pctl--good { color: var(--green); }
.sl-pctl--poor { color: var(--red); }
.sl-pos-delta { font-size: 10px; font-family: var(--font-head); line-height: 1; margin-top: 2px; -webkit-text-stroke: 0.015em currentColor; }
.sl-pos-delta--up { color: #10b981; }
.sl-pos-delta--down { color: #ef4444; }
.sl-pos-delta--same { color: #555; }
.sl-pos-delta--nr { color: #555; font-size: 8px; }
.sl-row { transition: background .1s, border-color .1s; border-left: 3px solid transparent; }
.sl-row:hover { background: var(--content-surface); border-left-color: var(--red); }

/* Driver cell */
.sl-driver { color: var(--content-text); }
.sl-driver:hover .sl-driver__name { color: var(--red); }
.sl-driver__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.2;
    transition: color .1s;
    -webkit-text-stroke: 0.02em currentColor;
}
.sl-driver__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.sl-driver__sub .ts-flag { height: .9em; }
.sl-driver__loc { font-family: var(--font-loc); font-stretch: 200%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

.sl-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin: 8px 16px 12px;
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-muted);
    background: none;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s;
}
.sl-info-toggle:hover { background: var(--content-surface); }
.sl-info-toggle--open { background: var(--content-surface); }
.sl-info-toggle__icon { width: 14px; height: 14px; color: var(--red); }
.sl-info-panel {
    padding: 12px 16px;
    margin: 0 16px 12px;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--content-text-muted);
    line-height: 1.5;
}
.sl-info-panel p { margin: 4px 0; }
.sl-info-panel strong { color: var(--content-text); -webkit-text-stroke: 0.015em currentColor; font-family: var(--font-head); text-transform: uppercase; font-size: 10px; }

/* Locked toggle */
.sl-toggle--locked { opacity: .6; cursor: default; pointer-events: none; }
.sl-toggle__lock-icon { width: 10px; height: 10px; color: var(--content-text-dim); margin-left: 4px; }

.sl-disclaimers { padding: 10px 16px; }

.sl-view-toggle { display: inline-flex; border: 1px solid var(--content-border); border-radius: 6px; overflow: hidden; }
.sl-view-toggle__btn { padding: 6px 14px; font-family: var(--font-head); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--content-text-muted); text-decoration: none; transition: background .12s, color .12s; }
.sl-view-toggle__btn--active { background: var(--red); color: #fff; }
.sl-view-toggle__btn:hover:not(.sl-view-toggle__btn--active) { background: var(--content-surface); }
.sl-back-icon { width: 14px; height: 14px; align-self: center; }
.sl-table-back { display: inline-flex; align-items: center; gap: 4px; }
.sl-back-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Pager ───────────────────────────────────────────────────── */
.sl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--content-border);
    font-family: var(--font-body);
}
.sl-pager__btn {
    padding: 7px 14px;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sl-pager__btn i { width: 14px; height: 14px; }
.sl-pager__btn:hover { border-color: var(--red); color: var(--red); }
.sl-pager__info {
    font-size: 12px;
    color: var(--content-text-muted);
}
.sl-pager__btn--disabled {
    padding: 7px 14px;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    color: var(--content-text-dim);
    font-family: var(--font-body);
    font-size: 13px;
    opacity: .35;
    cursor: default;
}
.sl-pager__input {
    width: 52px;
    padding: 5px 4px;
    text-align: center;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    color: var(--content-text);
    font-family: var(--font-body);
    font-size: 13px;
    border-radius: 3px;
    -moz-appearance: textfield;
}
.sl-pager__input::-webkit-inner-spin-button,
.sl-pager__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sl-pager__input:focus {
    outline: none;
    border-color: var(--red);
}
.sl-pager__num {
    padding: 5px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--content-text-muted);
    text-decoration: none;
    border-radius: 3px;
    transition: color .15s;
}
.sl-pager__num:hover {
    color: var(--red);
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .sl-heroes { grid-template-columns: repeat(2, 1fr); }
    .sl-hero { padding: 12px; gap: 8px; }
    .sl-hero__icon { font-size: 18px; }
    .sl-hero__driver { font-size: 11px; }
    .sl-hero__value { font-size: 15px; }
    .sl-th, .sl-td { padding: 8px 6px; font-size: 11px; }
}
@media (max-width: 480px) {
    .sl-heroes { grid-template-columns: repeat(2, 1fr); }
    .sl-hero__body { max-width: 120px; }
    .sl-pager { flex-wrap: wrap; gap: 6px; }
}/* 10-race-detail.css — Race detail page (rd-*)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   RACE DETAIL PAGE
   ===================================================================== */

/* ── Header ──────────────────────────────────────────────────── */
.rd-header {
    background: var(--navy-dark);
    padding: 24px 16px 20px;
    border-bottom: 2px solid var(--red);
}
.rd-header__inner { max-width: 1200px; margin: 0 auto; }
.rd-header__breadcrumb {
    font-size: 11px;
    color: var(--content-text-dim);
    margin-bottom: 8px;
}
.rd-header__breadcrumb a { color: var(--content-text-muted); }
.rd-header__breadcrumb a:hover { color: var(--red); }
.rd-header__sep { margin: 0 6px; color: var(--content-text-dim); }
.rd-header__title {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 8px;
}
.rd-header__racenum {
    font-size: 16px;
    color: var(--content-text-muted);
    margin-left: 6px;
}
.rd-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--content-text-muted);
}
.rd-header__date { font-weight: 700; color: #fff; }
.rd-header__dow { color: var(--content-text-dim); margin-right: 4px; }
.rd-header__track { display: flex; align-items: center; gap: 4px; color: #fff; }
.rd-header__track a { color: #fff; }
.rd-header__track a:hover { color: var(--red); }
.rd-header__track .ts-flag { height: 0.95em; }
.rd-header__series {
    margin-top: 6px;
    font-size: 11px;
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rd-header__tier {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-muted);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}

/* ── Prev / Next navigation ──────────────────────────────────── */
.rd-nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
}
.rd-nav__link {
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    transition: color .12s;
}
.rd-nav__link:hover { color: var(--red); }
.rd-nav__link--disabled { opacity: .3; pointer-events: none; }
.rd-nav--series {
    border-top: none;
    padding-top: 0;
    margin-top: -4px;
}
@media (max-width: 700px) {
    .rd-nav--series { border-top: 1px solid var(--content-border); padding-top: 8px; margin-top: 0; }
}

/* ── Stat tiles ──────────────────────────────────────────────── */
.rd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--content-border);
    margin-bottom: 24px;
}
.rd-stat {
    background: var(--content-bg);
    padding: 16px;
    text-align: center;
}
.rd-stat__val {
    font-family: var(--font-head);
    font-size: 28px;
    color: var(--content-text);
    line-height: 1;
}
.rd-stat__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
    margin-top: 6px;
}

/* ── Results section ─────────────────────────────────────────── */
.rd-results {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin-bottom: 24px;
}
.rd-results__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 2px solid var(--red);
}
.rd-results__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text);
    margin: 0;
}
.rd-results__count {
    font-size: 12px;
    color: var(--content-text-muted);
}

.rd-scroll { overflow-x: auto; }
.rd-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    font-size: 13px;
}
.rd-th {
    padding: 10px 8px;
    background: var(--content-surface);
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-dim);
    border-bottom: 1px solid var(--content-border);
}
.rd-th--fin   { text-align: center; width: 48px; }
.rd-th--start { text-align: center; width: 40px; }
.rd-th--change { text-align: center; width: 44px; }
.rd-th--car   { text-align: center; width: 56px; }
.rd-th--driver { text-align: left; min-width: 180px; }
.rd-th--status { text-align: center; width: 64px; }
.rd-th--earn  { text-align: right; width: 90px; }

.rd-td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--content-border);
    vertical-align: middle;
}
.rd-td--fin   { text-align: center; }
.rd-td--start { text-align: center; color: var(--content-text-muted); font-variant-numeric: tabular-nums; }
.rd-td--change { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.rd-change--up   { color: var(--green); }
.rd-change--down { color: var(--red); }
.rd-change--flat { color: var(--content-text-dim); }
.rd-td--car {
    text-align: center;
    font-family: var(--font-head);
    font-size: 13px;
}
.rd-car {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--content-text);
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.2);
    border-radius: 3px;
}
/* Car number letter/symbol shrink */
.car-num-wrap { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; }
.car-num-sm { font-size: 0.75em; line-height: 1; vertical-align: baseline; -webkit-text-stroke: 0.03em currentColor; }
.rd-td--status { text-align: center; font-size: 11px; color: var(--content-text-muted); text-transform: uppercase; }
.rd-td--earn   { text-align: right; color: var(--green); font-weight: 700; font-size: 14px; }

/* Finish badge */
.rd-fin {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--content-text);
    font-weight: 700;
}

/* Bold all Aldrich on race detail */
.rd-class-header__title,
.rd-stat__val,
.rd-header__title,
.rd-results__title,
.rd-hardcharger__label { font-weight: 700; }

.rd-fin--dnx {
    font-size: 9px;
    color: var(--content-text-dim);
    letter-spacing: .04em;
}

/* Row highlights */
.rd-row--gold   { background: rgba(218, 165, 32, .14); }
.rd-row--gold:hover { background: rgba(218, 165, 32, .20); }
.rd-row--silver { background: rgba(192, 192, 192, .12); }
.rd-row--silver:hover { background: rgba(192, 192, 192, .18); }
.rd-row--bronze { background: rgba(205, 127, 50, .12); }
.rd-row--bronze:hover { background: rgba(205, 127, 50, .18); }
.rd-row--win { background: rgba(234,179,8,.04); }
.rd-row--win:hover { background: rgba(234,179,8,.08); }
.rd-row--dq { opacity: .6; }
.rd-row--dns { }
.rd-row:hover { background: var(--content-surface); }

/* Larger table variant */
.rd-table--lg { font-size: 14px; }
.rd-table--lg .rd-th { font-size: 11px; padding: 5px 10px; }
.rd-table--lg .rd-td { padding: 2px 10px; }
.rd-table--lg .rd-driver__name { font-size: 14px; }
.rd-driver__name { color: #0f1f77; font-weight: 700; }
.rd-driver:hover .rd-driver__name { color: var(--red); }
.rd-table--lg .rd-fin { font-size: 14px; width: 34px; height: 30px; }
.rd-table--lg .rd-td--car { font-size: 14px; }
.rd-table--lg .rd-td--rating { font-size: 14px; }
.rd-table--lg .rd-td--change { font-size: 14px; }

/* Hometown column — visible on desktop, hidden on mobile (shown inline on mobile via .rd-driver__sub--mobile) */
.rd-th--hometown, .rd-td--hometown { text-align: left; font-size: 13px; color: var(--content-text-muted); white-space: nowrap; }
.rd-td--hometown .ts-flag { height: .85em; }
.rd-driver__sub--mobile { display: none; }

/* Rating column */
.rd-th--rating { text-align: center; width: 70px; }
.rd-td--rating { text-align: center; font-size: 13px; }

@media (max-width: 700px) {
    .rd-th--hometown, .rd-td--hometown { display: none !important; }
    .rd-driver__sub.rd-driver__sub--mobile { display: flex !important; }
    .rd-table--lg { font-size: 13px; }
    .rd-table--lg .rd-th { font-size: 10px; padding: 4px 4px; }
    .rd-table--lg .rd-td { padding: 2px 4px; }
    .rd-table--lg .rd-driver__name { font-size: 13px; }
    .rd-table--lg .rd-fin { font-size: 13px; width: 30px; height: 26px; }
    .rd-table--lg .rd-td--car { font-size: 12px; }
    .rd-car { font-size: 12px; min-width: 26px; height: 20px; padding: 0 4px; }
    .rd-table--lg .rd-td--rating { font-size: 12px; }
    .rd-table--lg .rd-td--earn { font-size: 13px; }
    .rd-table--lg .rd-td--change { font-size: 13px; }
}

/* DQ finish badge */
.rd-fin--dq {
    font-size: 9px;
    color: var(--red);
    letter-spacing: .04em;
    font-weight: 700;
}

/* ── Hard Charger callout ────────────────────────────────────── */
.rd-hardcharger {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(218,0,0,.06) 0%, var(--content-bg) 60%);
    border: 1px solid var(--content-border);
    border-left: 3px solid var(--red);
    padding: 14px 16px;
    margin-bottom: 24px;
}
.rd-hardcharger__icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.rd-hardcharger__body { flex: 1; min-width: 0; }
.rd-hardcharger__label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
    margin-bottom: 2px;
}
.rd-hardcharger__name {
    font-family: var(--font-head);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--content-text);
}
.rd-hardcharger__name:hover { color: var(--red); }
.rd-hardcharger__gain {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--green);
    text-align: right;
}
.rd-hardcharger__detail {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
}

/* ── DNS section styling ─────────────────────────────────────── */
.rd-results--dns .rd-results__head { border-bottom-color: var(--content-text-dim); padding: 6px 16px; }
.rd-results--dns .rd-results__title { color: var(--content-text-muted); }

/* Driver cell */
.rd-driver { color: var(--content-text); display: flex; flex-direction: column; gap: 1px; }
.rd-driver:hover .rd-driver__name { color: var(--red); }
.rd-driver__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    transition: color .1s;
}
.rd-driver__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
/* Winners tab variant: location string in OC Highway with flag + map-pin
   icon, matching the visual treatment used in Closest/Related Tracks
   sidebars and the track header location. */
.rd-driver__sub--loc {
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.03em;
    flex-wrap: wrap;
}
.rd-driver__sub--loc .ts-flag {
    height: 1em;
    width: auto;
    vertical-align: 0;
    margin-right: 0;
}
.rd-driver__sub--loc i { width: 12px; height: 12px; flex-shrink: 0; }
.rd-driver__sub .ts-flag { height: .9em; }
.rd-driver__sub.rd-driver__sub--mobile { display: none; }

/* ── Class jump links ────────────────────────────────────────── */
.rd-class-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
    margin-bottom: 20px;
}
.rd-class-jump__btn {
    padding: 6px 14px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    transition: all .12s;
}
.rd-class-jump__btn:hover { border-color: var(--red); color: var(--red); }

/* ── Class section ───────────────────────────────────────────── */
.rd-class-section { margin-bottom: 28px; }
.rd-class-header {
    background: var(--navy-dark);
    padding: 14px 16px;
    border-left: 3px solid var(--red);
    margin-bottom: 0;
}
.rd-class-header__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.rd-class-header__title {
    font-family: var(--font-head);
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.rd-class-header__carcount {
    font-family: var(--font-head);
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}
.rd-class-header__meta {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rd-class-header__tier {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-dim);
    padding: 2px 6px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
}
.rd-class-header__sep { color: var(--content-text-dim); }
.rd-class-header__series {
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Sibling races ───────────────────────────────────────────── */
.rd-siblings {
    margin-bottom: 24px;
}
.rd-siblings__head {
    padding: 14px 16px;
    border-bottom: 2px solid var(--red);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-bottom-width: 0;
}
.rd-siblings__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text);
    margin: 0;
}
.rd-siblings__grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--content-border);
    border: 1px solid var(--content-border);
    border-top: 0;
}
.rd-sibling {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    color: var(--content-text);
    transition: background .12s;
}
.rd-sibling:hover { background: var(--content-surface); }
.rd-sibling__class {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.rd-sibling__num { color: var(--content-text-muted); font-size: 11px; margin-left: 4px; }
.rd-sibling__meta {
    flex: 1;
    font-size: 12px;
    color: var(--content-text-muted);
    min-width: 0;
}
.rd-sibling__arrow { color: var(--red); font-weight: 700; flex-shrink: 0; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rd-header { padding: 16px 12px; }
    .rd-header__title { font-size: 20px; }
    .rd-stats { grid-template-columns: repeat(2, 1fr); }
    .rd-stat__val { font-size: 22px; }
    .rd-nav { flex-direction: column; gap: 6px; text-align: center; }
    .rd-th, .rd-td { padding: 8px 6px; font-size: 11px; }
    /* +/- column visible on mobile */
}/* 11-track-profile.css — Track profile (tp-*)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   TRACK PROFILE PAGE
   ===================================================================== */

/* ── Header ──────────────────────────────────────────────────── */
.tp-header {
    background: var(--navy-dark);
    padding: 24px 16px 20px;
    border-bottom: 2px solid var(--red);
}
.tp-header__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; }
.tp-header__top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tp-logo {
    flex-shrink: 0;
    width: 100px; height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.tp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp-header__info { flex: 1; min-width: 0; }
.tp-header__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.tp-header__name {
    font-family: var(--font-head);
    font-size: 26px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}
.tp-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid;
}
.tp-badge--active  { color: var(--green); border-color: var(--green); background: rgba(0,210,106,.08); }
.tp-badge--inactive { color: var(--red); border-color: var(--red); background: rgba(218,0,0,.08); }
.tp-header__meta {
    font-size: 13px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 1.3;
}
.tp-header__meta .ts-flag {
    height: 0.95em;
    width: auto;
    vertical-align: 0;
    margin-right: 0;
}
.tp-header__meta i[data-lucide] {
    vertical-align: 0;
}
/* Lucide icons inside the header meta line. Sized in em so they scale
   with the surrounding text rather than fighting it. */
.tp-header__meta-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
}
.tp-header__meta-sep {
    margin: 0 4px;
    opacity: 0.3;
}
/* Track size in the header — same OC Highway treatment as locations
   for visual consistency across the page. */
.tp-header__size {
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tp-header__sep { margin: 0 4px; color: var(--content-text-dim); }
.tp-header__years {
    font-size: 12px;
    color: var(--content-text-muted);
    margin-top: 4px;
}
.tp-header__aliases {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.tp-header__aliases-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
}
.tp-alias {
    padding: 2px 8px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 11px;
    color: var(--content-text-muted);
}
/* Right-aligned action slot for the follow button. Sits as a third
   flex cell in tp-header__top, vertically aligned to the H1 row.
   On narrow viewports it wraps below the info column with margin-top
   so the button still has breathing room. */
.tp-header__action {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
}
@media (max-width: 640px) {
    .tp-header__action {
        margin-left: 0;
        margin-top: 12px;
        align-self: flex-start;
    }
}

/* ── Stat tiles ──────────────────────────────────────────────── */
.tp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: var(--content-border);
    margin-bottom: 0;
}
.tp-stat {
    background: var(--content-bg);
    padding: 16px;
    text-align: center;
}
.tp-stat__val {
    font-family: var(--font-head);
    font-size: 26px;
    color: var(--content-text);
    line-height: 1;
}
.tp-stat__val--yellow { color: var(--yellow); }
.tp-stat__val--sm { font-size: 14px; }
.tp-stat__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
    margin-top: 6px;
}

/* ── Sticky strip wrapping mini header + tabs ────────────────────
   Single sticky container that holds the mini track-identity bar
   plus the tab navigation. Wrapping them in one element guarantees:
     - Zero gap between mini and tabs (they share one flow box)
     - Zero gap during the activate transition
     - One sticky offset to reason about (just --sticky-top)

   When the main .tp-header scrolls out of view, JS adds:
     - .tp-mini--shown on #tpMini  → mini slides down via max-height
     - body.tp-mini-active         → bumps the table-header sticky top
                                     to clear the now-taller strip

   Visual stack at desktop when fully scrolled:
     0px         site header (54)
     54px        main nav (42)
     96px        sticky-strip top
                   ├─ mini    (0px hidden, 44px shown)
                   └─ tabs    (42px)
     +44+42      table thead pinned via its own calc
*/
.tp-sticky-strip {
    position: sticky;
    top: var(--sticky-top);
    /* Above filter bar (50) and table header (10), below the site
       nav (9999). 100 matches the original .tp-tabs z-index. */
    z-index: 100;
}

/* ── Mini header (collapsed by default, expands when active) ──────
   Lives INSIDE .tp-sticky-strip. NOT independently sticky — its
   parent strip handles the sticky behavior. The mini just collapses
   from height 0 to --tp-mini-h via max-height transition. */
.tp-mini {
    background: var(--navy-mid);
    /* Border-bottom ONLY when shown — otherwise it adds 1px to the
       strip's collapsed height and creates a small gap above the
       sticky table header. */
    border-bottom: 0 solid var(--hdr-border);
    /* Collapsed by default — height: 0 means it takes no space until
       activated. transition lets it slide down when JS toggles
       .tp-mini--shown. */
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}
.tp-mini--shown {
    max-height: var(--tp-mini-h, 44px);
    border-bottom-width: 1px;
}
.tp-mini__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    min-width: 0;
}
.tp-mini__logo {
    flex-shrink: 0;
    width: 32px;
    height: 22px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-mini__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tp-mini__name {
    font-family: var(--font-head);
    font-size: 14px;
    /* Aldrich is a single-weight display font, so font-weight: 700
       doesn't actually render heavier than 400. We use a thin
       text-stroke to simulate a bolder appearance — works around the
       font's lack of weight axis without swapping fonts. */
    -webkit-text-stroke: 0.025em currentColor;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}
.tp-mini__loc {
    /* OC Highway — same wayfinder/highway-sign font used elsewhere
       for location strings. Wide stretch (200%) gives the spread-out
       look the location data has across DLM. */
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tp-mini__loc .ts-flag {
    height: 0.95em;
    width: auto;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .tp-mini__inner { padding: 6px 12px; gap: 8px; }
    .tp-mini__loc { display: none; }
}

/* ── Tab bar ─────────────────────────────────────────────────────
   NOT independently sticky — wrapped inside .tp-sticky-strip which
   handles the sticky positioning for both the mini header and tabs.
   This guarantees the two pin together with zero gap. */
.tp-tabs {
    background: var(--navy-dark);
    border-bottom: 2px solid var(--red);
    overflow: hidden;
}

/* Mobile: dropdown trigger visible, tab list hidden until opened */
.tp-tabs__mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--navy-mid);
    border: none;
    border-left: 3px solid var(--red);
    color: #fff;
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}
.tp-tabs__mobile-trigger svg {
    color: rgba(255,255,255,.5);
    transition: transform .2s;
}
.tp-tabs__mobile-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.tp-tabs__mobile-trigger::after {
    content: 'Switch tab';
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    margin-left: auto;
    margin-right: 8px;
}
.tp-tabs__inner {
    display: none;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.1);
}
.tp-tabs__inner.tp-tabs__inner--open {
    display: flex;
}

/* Desktop: hide trigger, show horizontal tab row */
@media (min-width: 768px) {
    .tp-tabs__mobile-trigger { display: none; }
    .tp-tabs__inner {
        display: flex !important;
        flex-direction: row;
        gap: 0;
        min-width: 0;
    }
}
.tp-tab-btn {
    padding: 12px 16px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hdr-text-muted);
    background: transparent;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    text-align: left;
    white-space: nowrap;
}
.tp-tab-btn:hover { color: #fff; }
.tp-tab-btn--active {
    color: #fff;
    border-left-color: var(--red);
}

/* Desktop: horizontal row with bottom border instead of left */
@media (min-width: 768px) {
    .tp-tab-btn {
        border-left: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        text-align: center;
        padding: 12px 18px;
        font-size: 11px;
    }
    .tp-tab-btn--active {
        border-left-color: transparent;
        border-bottom-color: var(--red);
    }
}

/* ── Panels ──────────────────────────────────────────────────── */
.tp-panel { margin-top: 20px; }
.tp-panel[hidden] { display: none; }

/* ── Card (reusable in track context) ────────────────────────── */
.tp-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin-bottom: 20px;
}
.tp-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 2px solid var(--red);
}
.tp-card__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text);
    margin: 0;
}
.tp-card__sub {
    font-size: 12px;
    color: var(--content-text-muted);
}
.tp-card__more {
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--red);
    background: none;
    border: none;
    cursor: pointer;
}
.tp-card__more:hover { text-decoration: underline; }

.tp-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--content-text-muted);
    font-size: 13px;
}

/* ── Overview grid (2-column on desktop) ─────────────────────── */
.tp-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .tp-overview-grid { grid-template-columns: 1fr; }
}

/* ── Top Drivers list ────────────────────────────────────────── */
.tp-drivers { display: flex; flex-direction: column; }
.tp-driver-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
    transition: background .1s;
}
.tp-driver-row:last-child { border-bottom: none; }
.tp-driver-row:hover { background: var(--content-surface); }
.tp-driver-row__rank {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--red);
    width: 32px;
    text-align: center;
}
.tp-driver-row__body { flex: 1; min-width: 0; }
.tp-driver-row__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.2;
}
.tp-driver-row__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px; line-height: 1;}
.tp-driver-row__sub .ts-flag { height: .9em; }
.tp-driver-row__stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.tp-driver-row__stat {
    text-align: center;
    width: 56px;
}
.tp-driver-row__stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1;
}
.tp-driver-row__stat small {
    display: block;
    font-size: 9px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    margin-top: 2px;
}

/* ── Winner display (used in race rows) ───────────────────────── */
.tp-winner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    line-height: 1.4;
}
.tp-winner__label {
    /* Body font (Source Sans 3) explicitly — distinct from the Aldrich
       used elsewhere on the page. The label is informational (it just
       names the slot), not part of the headline data. */
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--content-text-dim);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.tp-winner__car {
    /* Red-box car number convention — same visual as .rd-car on the
       race detail page so the site reads consistently. .car-num-wrap +
       .car-num-sm spans inside come from tsCarNumber(); we just give
       this wrapper the box treatment. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--content-text);
    min-width: 28px;
    height: 20px;
    padding: 0 5px;
    background: rgba(218, 0, 0, 0.08);
    border: 1px solid rgba(218, 0, 0, 0.2);
    border-radius: 3px;
}
.tp-winner__name {
    color: var(--content-text);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tp-winner__earn {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--green);
    font-weight: 700;
    letter-spacing: .03em;
}

/* ── Compact rank column for win leaders ─────────────────────── */
.tp-th--rank { text-align: center; width: 36px; padding-left: 4px; padding-right: 4px; }
.tp-td--rank { text-align: center; width: 36px; padding-left: 4px; padding-right: 4px; }

/* ── Stats tab list ──────────────────────────────────────────── */
.tp-stat-list { display: flex; flex-direction: column; }
.tp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
}
.tp-stat-row:last-child { border-bottom: none; }
.tp-stat-row__label {
    font-size: 13px;
    color: var(--content-text-muted);
}
.tp-stat-row__val {
    font-family: var(--font-head);
    font-size: 15px;
    color: var(--content-text);
}
.tp-stat-row__val--yellow { color: var(--yellow); }

/* ── Header location: keep flag+location+size together on wrap ── */
.tp-header__loc {
    white-space: nowrap;
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.04em;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tp-header__top { flex-direction: column; align-items: center; text-align: center; }
    .tp-header__name { font-size: 20px; }
    .tp-header__meta { justify-content: center; gap: 4px; font-size: 12px; }
    .tp-header__name-row { justify-content: center; }
    .tp-header__loc { white-space: normal; }
    .tp-header { padding: 16px 12px; }
    .tp-stats { grid-template-columns: repeat(3, 1fr); }
    .tp-stat { padding: 12px 8px; }
    .tp-stat__val { font-size: 20px; }
    .tp-tab-btn { padding: 10px 14px; font-size: 10px; }
    .tp-driver-row__stats { gap: 10px; }
    .tp-driver-row__stat { width: 44px; }
    .tp-driver-row__stat strong { font-size: 13px; }
}/* 12-results.css — Results directory
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   RESULTS DIRECTORY
   ===================================================================== */

/* ── Results filter bar (page-level, not inside a panel) ─────── */
.dp-filterbar--results {
    position: sticky;
    top: var(--sticky-top);
    z-index: 50;
    margin: 0 0 20px;
    padding: 12px 14px;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
@media (max-width: 600px) {
    .dp-filterbar--results { padding: 10px 12px; }
}
/* NOTE: A block of orphan CSS rule bodies (no selectors) lived here in
   the source — likely from a bad merge that dropped the leading selector
   lines. They produced no styles in the minified output anyway, so they
   were removed during a CSS hygiene pass. If a search-bar component looks
   off, the styles it expected may have lived in this gap. */

/* ── Results list ────────────────────────────────────────────── */

/* ── Results Hero Banner ───────────────────────────── */
.rs-hero {
    background: linear-gradient(135deg, #060913 0%, #0a1545 50%, #060913 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--red);
}
.rs-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 30%, rgba(218,0,0,.07), transparent 50%),
                radial-gradient(ellipse at 75% 70%, rgba(218,0,0,.04), transparent 40%);
    pointer-events: none;
}
.rs-hero__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 24px;
}
.rs-hero__title-row { margin-bottom: 20px; }
.rs-hero__title {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.5px rgba(255,255,255,.3);
    margin: 0;
    line-height: 1.1;
}
.rs-hero__sub {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin: 4px 0 0;
}
.rs-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}
.rs-hero__card {
    display: block;
    padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    border-left: 3px solid var(--red);
    color: #fff;
    transition: all .15s;
}
.rs-hero__card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(218,0,0,.3);
    border-left-color: var(--red);
    transform: translateY(-1px);
}
.rs-hero__card-date {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--red);
    -webkit-text-stroke: 0.015em currentColor;
    margin-bottom: 4px;
}
.rs-hero__card-track {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
    line-height: 1.2;
    margin-bottom: 2px;
}
.rs-hero__card-class { font-size: 10px; color: rgba(255,255,255,.35); margin-bottom: 2px; }
.rs-hero__card-loc { font-family: var(--font-loc); font-stretch: 200%; font-size: 10px; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.rs-hero__card-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.rs-hero__card-car {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--red);
    -webkit-text-stroke: 0.02em currentColor;
    flex-shrink: 0;
}
.rs-hero__card-driver { flex: 1; min-width: 0; }
.rs-hero__card-wlabel {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    display: block;
}
.rs-hero__card-wname {
    font-family: var(--font-head);
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    -webkit-text-stroke: 0.02em currentColor;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rs-hero__card-earn {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--green);
    -webkit-text-stroke: 0.02em currentColor;
    flex-shrink: 0;
}

/* ── Filter bar ── */
.rs-filter-bar {
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 16px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.rs-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    margin-bottom: 24px;
}
.rs-card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s;
}
.rs-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.rs-card__top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-left: 3px solid var(--red);
    color: var(--content-text);
    transition: background .1s;
}

/* Alternating left border: red / navy */
.rs-card--red .rs-card__top  { border-left-color: var(--red); }
.rs-card--navy .rs-card__top { border-left-color: var(--navy); }

/* Calendar date cell */
.rs-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 52px;
    padding: 8px 4px;
    background: #e2e4ea;
    border-radius: 6px;
    text-align: center;
    line-height: 1;
}
.rs-card__dow { font-size: 8px; color: var(--content-text-dim); text-transform: uppercase; letter-spacing: .06em; }
.rs-card__month { font-size: 9px; color: var(--red); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; -webkit-text-stroke: 0.015em currentColor; }
.rs-card__day { font-family: var(--font-head); font-size: 20px; color: var(--content-text); margin-top: 1px; }
.rs-card__year { font-size: 9px; color: var(--content-text-dim); margin-top: 1px; }

/* Track logo on results cards. Only renders when the API ships
   `track_logo_url`. White surface matches the convention used by track
   profiles + schedule (logos are sourced as PNGs designed for white
   backgrounds, so they need a white surface to read correctly on the
   navy site chrome). */
.rs-card__logo {
    flex-shrink: 0;
    width: 56px;
    height: 40px;
    background: #fff;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}
.rs-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rs-card__body { flex: 1; min-width: 0; }
.rs-card__track-name {
    font-family: var(--font-head);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
    display: block;
    -webkit-text-stroke: 0.02em currentColor;
}
.rs-card__sub {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.rs-card__sub .ts-flag { height: .85em; }
.rs-card__classes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.rs-card__class-pill {
    font-size: 9px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(218,0,0,.06);
    color: var(--content-text-muted);
    -webkit-text-stroke: 0.015em currentColor;
}
.rs-card__series {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.rs-card__series-name {
    font-size: 10px;
    font-family: var(--font-head);
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.015em currentColor;
}

/* ── Winners row (subtle gray, not white) ────────────────────── */
.rs-card__winners {
    padding: 10px 16px;
    background: var(--navy-dark);
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rs-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #fff;
}
.rs-winner__label {
    font-size: 9px;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.rs-winner__class { color: rgba(255,255,255,.25); }
.rs-winner__car {
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--red);
    -webkit-text-stroke: 0.02em currentColor;
}
.rs-winner__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
}
.rs-winner__earn {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--green);
    -webkit-text-stroke: 0.02em currentColor;
    margin-left: auto;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    
/* ── Results Hero Banner ───────────────────────────── */
.rs-hero {
    background: linear-gradient(135deg, #060913 0%, #0a1545 50%, #060913 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--red);
}
.rs-hero__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 30%, rgba(218,0,0,.07), transparent 50%),
                radial-gradient(ellipse at 75% 70%, rgba(218,0,0,.04), transparent 40%);
    pointer-events: none;
}
.rs-hero__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 24px;
}
.rs-hero__title-row { margin-bottom: 20px; }
.rs-hero__title {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.5px rgba(255,255,255,.3);
    margin: 0;
    line-height: 1.1;
}
.rs-hero__sub {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin: 4px 0 0;
}
.rs-hero__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}
.rs-hero__card {
    display: block;
    padding: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    border-left: 3px solid var(--red);
    color: #fff;
    transition: all .15s;
}
.rs-hero__card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(218,0,0,.3);
    border-left-color: var(--red);
    transform: translateY(-1px);
}
.rs-hero__card-date {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--red);
    -webkit-text-stroke: 0.015em currentColor;
    margin-bottom: 4px;
}
.rs-hero__card-track {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
    line-height: 1.2;
    margin-bottom: 2px;
}
.rs-hero__card-class { font-size: 10px; color: rgba(255,255,255,.35); margin-bottom: 2px; }
.rs-hero__card-loc { font-family: var(--font-loc); font-stretch: 200%; font-size: 10px; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.rs-hero__card-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.rs-hero__card-car {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--red);
    -webkit-text-stroke: 0.02em currentColor;
    flex-shrink: 0;
}
.rs-hero__card-driver { flex: 1; min-width: 0; }
.rs-hero__card-wlabel {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    display: block;
}
.rs-hero__card-wname {
    font-family: var(--font-head);
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    -webkit-text-stroke: 0.02em currentColor;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rs-hero__card-earn {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--green);
    -webkit-text-stroke: 0.02em currentColor;
    flex-shrink: 0;
}

/* ── Filter bar ── */
.rs-filter-bar {
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 16px 16px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.rs-list { gap: 1px; margin-bottom: 12px; }
    .rs-card__top { gap: 10px; padding: 10px 12px; }
    .rs-card__date { width: 46px; padding: 5px 3px; }
    .rs-card__day { font-size: 20px; }
    .rs-card__month { font-size: 9px; }
    .rs-card__track-name { font-size: 13px; }
    .rs-card__sub { font-size: 10px; margin-top: 2px; }
    .rs-card__classes { font-size: 10px; margin-top: 2px; }
    .rs-card__series { font-size: 10px; margin-top: 2px; }
    .rs-card__logo { display: none; }
    .rs-card__winners { padding: 8px 12px 8px 16px; gap: 5px; }
    .rs-winner { font-size: 12px; gap: 5px; }
    .rs-winner__car { font-size: 12px; }
    .rs-winner__name { font-size: 13px; }
    .rs-winner__earn { font-size: 12px; }
    .rs-winner__label { font-size: 9px; }
}/* 13-track-directory.css — Track directory + schedule + watch (sch-*, watch-*)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   TRACK DIRECTORY
   ===================================================================== */

/* ── Letter bar ──────────────────────────────────────────────── */
.td-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 12px 0;
    justify-content: center;
}
.td-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 5px 6px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    transition: all .1s;
}
.td-letter:hover { color: var(--content-text); border-color: var(--content-text-dim); }
.td-letter--active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

/* ── Search filter variant ───────────────────────────────────── */
.dp-filter--search { min-width: 180px; }
.dp-filter__search-row {
    display: flex;
    gap: 0;
}
.dp-filter__search-input {
    flex: 1;
    padding: 7px 10px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-right: none;
    color: var(--content-text);
    font-size: 12px;
    min-width: 0;
}
.dp-filter__search-input:focus { outline: none; border-color: var(--red); }
.dp-filter__search-input::placeholder { color: var(--content-text-dim); }
.dp-filter__search-btn {
    padding: 7px 14px;
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    flex-shrink: 0;
}
.dp-filter__search-btn:hover { opacity: .9; }

/* ── Track card grid ─────────────────────────────────────────── */
.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2px;
    background: var(--content-border);
    border: 1px solid var(--content-border);
    margin-bottom: 24px;
}
.td-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: var(--content-bg);
    border-left: 3px solid var(--navy-mid);
    transition: background .1s;
}
.td-card:hover { background: var(--content-surface); border-left-color: var(--red); }

.td-card__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.td-card__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    margin: 0;
}
.td-card__badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    white-space: nowrap;
}
.td-card__badge--active {
    color: var(--green);
    background: rgba(34,197,94,.08);
    border: 1px solid rgba(34,197,94,.25);
}
.td-card__badge--inactive {
    color: var(--red);
    background: rgba(218,0,0,.08);
    border: 1px solid rgba(218,0,0,.25);
}

.td-card__loc {
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px; line-height: 1;}
.td-card__loc .ts-flag { height: .85em; }

.td-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.td-card__size {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--content-text);
}
.td-card__exact {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--content-text-dim);
    font-weight: 400;
}
.td-card__meta {
    font-size: 10px;
    color: var(--content-text-dim);
    text-align: right;
    white-space: nowrap;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .td-letters { gap: 2px; }
    .td-letter { min-width: 24px; padding: 4px 3px; font-size: 10px; }
    .td-grid { grid-template-columns: 1fr; }
    .td-card { padding: 12px; }
    .td-card__name { font-size: 13px; }
    .dp-filter--search { min-width: 0; flex: 1; }
}

/* ── Stats Hero Banner ─────────────────────────────── */
.sl-hero-banner {
    background: linear-gradient(135deg, #060913 0%, #0a1545 50%, #060913 100%);
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--red);
}
.sl-hero-banner__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(218,0,0,.08), transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(218,0,0,.04), transparent 40%);
    pointer-events: none;
}
.sl-hero-banner__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 20px 24px;
}
.sl-hero-banner__title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}
.sl-hero-banner__title {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.5px rgba(255,255,255,.3);
    margin: 0;
    line-height: 1.1;
}
.sl-hero-banner__sub {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    margin: 4px 0 0;
}
.sl-hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.sl-hero-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    color: #fff;
    transition: all .15s;
}
.sl-hero-tile:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(218,0,0,.3);
    transform: translateY(-1px);
}
.sl-hero-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(218,0,0,.12);
    border-radius: 8px;
    flex-shrink: 0;
}
.sl-hero-tile__body { flex: 1; min-width: 0; }
.sl-hero-tile__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    display: block;
}
.sl-hero-tile__name {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.sl-hero-tile__value {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--red);
    flex-shrink: 0;
    -webkit-text-stroke: 0.02em currentColor;
    line-height: 1;
}

/* ── Stats landing (leader cards, no table) ──────────────────── */
.sl-landing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
}
.sl-landing__card {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .15s;
}
.sl-landing__card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.sl-landing__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--navy-dark);
    border-left: 3px solid var(--red);
    color: var(--content-text);
    transition: background .12s;
}
.sl-landing__head:hover { background: var(--navy-mid); }
.sl-landing__icon { display: inline-flex; flex-shrink: 0; }
.sl-landing__label {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
}
.sl-landing__link {
    margin-left: auto;
    font-size: 10px;
    color: var(--red);
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    -webkit-text-stroke: 0.015em currentColor;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.sl-landing__link-icon { width: 12px; height: 12px; }
.sl-landing__leader--gold { background: rgba(255,215,0,.08); }
.sl-landing__leader--silver { background: rgba(192,192,192,.08); }
.sl-landing__leader--bronze { background: rgba(205,127,50,.08); }
.sl-landing__leader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--content-text);
    transition: background .1s;
}
.sl-landing__leader:hover { background: var(--content-surface); }
.sl-landing__pos {
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--content-text-muted);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-text-stroke: 0.02em currentColor;
}
.sl-landing__pos--top1 { background: rgba(255,215,0,.15); color: #b8860b; border: 1px solid rgba(255,215,0,.3); }
.sl-landing__pos--top2 { background: rgba(192,192,192,.12); color: #888; border: 1px solid rgba(192,192,192,.3); }
.sl-landing__pos--top3 { background: rgba(205,127,50,.1); color: #8b6914; border: 1px solid rgba(205,127,50,.25); }
.sl-landing__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    -webkit-text-stroke: 0.02em currentColor;
}
.sl-landing__val {
    font-family: var(--font-head);
    font-size: 18px;
    flex-shrink: 0;
    -webkit-text-stroke: 0.02em currentColor;
    color: var(--navy);
}
.sl-table-back {
    font-size: 11px;
    color: var(--content-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.015em currentColor;
    text-decoration: none;
    line-height: 1;
}
.sl-table-back:hover { color: var(--red); }
.sl-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--content-surface);
    border-bottom: 2px solid var(--red);
}
@media (max-width: 600px) {
    .sl-landing { grid-template-columns: 1fr; padding: 10px; gap: 8px; }
}

/* ── Stats: tier button bar ──────────────────────────── */
.sl-tier-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
}
.sl-tier-btn {
    padding: 6px 14px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--content-text-muted);
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 4px;
    white-space: nowrap;
    transition: all .15s;
    -webkit-text-stroke: 0.015em currentColor;
}
.sl-tier-btn:hover { color: #fff; border-color: var(--red); }
.sl-tier-btn:hover { background: var(--content-bg); border-color: var(--red); color: var(--red); }
.sl-tier-btn--active {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

/* ── Stats: timeframe bar ────────────────────────────── */
.sl-tf-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
}
.sl-tf-btn {
    padding: 4px 12px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    background: transparent;
    border: 1px solid var(--content-border);
    border-radius: 3px;
    transition: all .15s;
}
.sl-tf-btn:hover { color: var(--red); border-color: var(--red); }
.sl-tf-chevron { width: 10px; height: 10px; margin-left: 2px; vertical-align: -1px; }

/* Year dropdown */
.sl-tf-dropdown { position: relative; }
.sl-tf-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 20;
    min-width: 120px;
    max-height: 240px;
    overflow-y: auto;
}
.sl-tf-dropdown__item {
    display: block;
    padding: 6px 14px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--content-text-muted);
    text-decoration: none;
    transition: background .1s;
}
.sl-tf-dropdown__item:hover { background: var(--content-surface); color: var(--content-text); }
.sl-tf-dropdown__item--active { color: var(--red); }

/* Custom date panel */
.sl-tf-custom { position: relative; }
.sl-tf-custom__panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 20;
    padding: 10px;
}
.sl-tf-custom__form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sl-tf-custom__input {
    font-family: var(--font-body);
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    color: var(--content-text);
    background: var(--content-bg);
}
.sl-tf-custom__input:focus { outline: none; border-color: var(--red); }
.sl-tf-custom__sep { font-size: 11px; color: var(--content-text-dim); }
.sl-tf-custom__go {
    padding: 5px 12px;
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.sl-tf-custom__go:hover { opacity: .9; }

.sl-tf-btn--active {
    color: #fff;
    background: var(--navy-mid);
    border-color: var(--red);
}

/* ── Stats: hero grid (2×4) ──────────────────────────── */
.sl-hero-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}
@media (max-width: 768px) { .sl-hero-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .sl-hero-grid { grid-template-columns: 1fr; } }
.sl-hero-tile {
    display: block;
    padding: 16px;
    background: rgba(255,255,255,.03);
    border-top: 3px solid #222;
    transition: all .15s;
    color: #fff;
}
.sl-hero-tile:hover { background: rgba(255,255,255,.06); }
.sl-hero-tile--active { border-top-color: var(--red); }
.sl-hero-tile__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.sl-hero-tile__icon { display: inline-flex; flex-shrink: 0; }
.sl-hero-tile__label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--red);
}
.sl-hero-tile__name {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-hero-tile__value {
    font-size: 22px;
    font-weight: 900;
    color: #d4a017;
    line-height: 1;
}

/* ── Stats: landing 2-col ────────────────────────────── */
.sl-landing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--content-border);
    border: 1px solid var(--content-border);
    margin-bottom: 24px;
}
@media (max-width: 700px) { .sl-landing { grid-template-columns: 1fr; } }

/* ── Stats: loading spinner ──────────────────────────── */
.sl-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}
.sl-spinner__dot {
    width: 32px;
    height: 32px;
    border: 3px solid var(--content-border);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: slSpin .8s linear infinite;
}
@keyframes slSpin { to { transform: rotate(360deg); } }
.sl-spinner__text {
    font-size: 13px;
    color: var(--content-text-muted);
    font-weight: 600;
}

/* ── Stats: controls bar (timeframe + toggles) ─────── */
.sl-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
}
.sl-toggles {
    display: flex;
    gap: 12px;
    align-items: center;
}
.sl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--content-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .15s;
}
.sl-toggle:hover { color: #fff; }
.sl-toggle__dot {
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: var(--content-border);
    position: relative;
    transition: background .15s;
}
.sl-toggle__dot::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--content-text-muted);
    transition: transform .15s, background .15s;
}
.sl-toggle--on .sl-toggle__dot { background: var(--red); }
.sl-toggle--on .sl-toggle__dot::after { transform: translateX(12px); background: #fff; }

/* ── Stats: rating column (main font) ────────────── */
.sl-td--rating {
    font-family: var(--font-head);
    font-size: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0.02em currentColor;
    color: var(--navy);
}
.sl-th--rating a { font-weight: 800; }

@media (max-width: 600px) {

    /* Hero banner mobile */
    .sl-hero-banner__inner { padding: 20px 12px 16px; }
    .sl-hero-banner__title { font-size: 20px; }
    .sl-hero-banner__title-row { margin-bottom: 14px; }
    .sl-hero-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .sl-hero-tile { padding: 10px; gap: 8px; }
    .sl-hero-tile__icon { width: 30px; height: 30px; }
    .sl-hero-tile__name { font-size: 10px; }
    .sl-hero-tile__value { font-size: 16px; }
    .sl-hero-tile__label { font-size: 8px; }

    /* ── Page header ── */
    .sl-table-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
    .sl-table-wrap { border: none; border-radius: 0; margin-bottom: 16px; }
    .sl-table-title { font-size: 16px; }
    .sl-table-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }

    /* ── Tier buttons: horizontal scroll ── */
    .sl-tier-bar { overflow-x: auto; flex-wrap: nowrap; gap: 4px; padding: 10px 12px; -ms-overflow-style: none; scrollbar-width: none; }
    .sl-tier-bar::-webkit-scrollbar { display: none; }
    .sl-tier-btn { padding: 5px 10px; font-size: 10px; }

    /* ── Controls bar ── */
    .sl-controls { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px; }
    .sl-tf-bar { overflow-x: auto; flex-wrap: nowrap; gap: 4px; -ms-overflow-style: none; scrollbar-width: none; }
    .sl-tf-bar::-webkit-scrollbar { display: none; }
    .sl-tf-btn { padding: 4px 10px; font-size: 9px; }
    .sl-toggles { justify-content: space-between; gap: 8px; }
    .sl-view-toggle__btn { padding: 5px 12px; font-size: 9px; }

    /* ── Disclaimers ── */
    .ts-disclaimers { margin: 8px 12px 0; }
    .sl-info-toggle { margin: 6px 12px 8px; }
    .sl-info-panel { margin: 0 12px 8px; }

    /* ── Landing cards: single column, tighter ── */
    .sl-landing { grid-template-columns: 1fr; padding: 10px; gap: 8px; }
    .sl-landing__head { padding: 10px 12px; }
    .sl-landing__label { font-size: 12px; }
    .sl-landing__leader { padding: 8px 12px; gap: 8px; }
    .sl-landing__name { font-size: 12px; }
    .sl-landing__val { font-size: 15px; }
    .sl-landing__pos { font-size: 12px; width: 24px; }
    .sl-landing__loc { font-size: 9px; }

    /* ── Table: mobile card rows with expandable detail ── */
    .sl-scroll { overflow-x: visible; }
    .sl-table { table-layout: auto; }
    .sl-table thead {
        display: flex;
        position: sticky;
        top: var(--hdr-h, 54px);
        z-index: 10;
        background: var(--navy-dark);
        border-bottom: 2px solid var(--red);
        width: 100%;
    }
    .sl-table thead tr {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
    }
    .sl-table thead .sl-th {
        display: none !important;
        font-size: 9px;
        color: rgba(255,255,255,.6);
        padding: 0;
        border: none;
        background: none;
    }
    .sl-table thead .sl-th--expand { display: block !important; width: 14px; visibility: hidden; }
    .sl-table thead .sl-th--pos { display: block !important; width: 24px; text-align: center; }
    .sl-table thead .sl-th--car { display: block !important; width: var(--sl-car-w, 34px); text-align: center; }
    .sl-table thead .sl-th--driver { display: block !important; flex: 1; text-align: left; width: auto; }
    .sl-table thead .sl-th--rating-col { display: block !important; flex-shrink: 0; text-align: right; }
    .sl-table thead .sl-th--rating-col a { color: rgba(255,255,255,.6); }
    .sl-table tbody { display: flex; flex-direction: column; }

    .sl-row {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--content-border);
    }

    /* Show expand chevron on mobile */
    .sl-td--expand {
        display: flex;
        align-items: center;
        border: none;
        padding: 0;
        width: 14px;
        flex-shrink: 0;
    }
    .sl-expand-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--content-text-dim);
        transition: transform .15s;
    }
    .sl-expand-icon { width: 12px; height: 12px; }
    .sl-expand-btn--open { transform: rotate(90deg); }
    .sl-expand-btn--open .sl-expand-icon { color: var(--red); }

    /* Position */
    .sl-td--pos {
        text-align: center;
        min-width: 24px;
        flex-shrink: 0;
        border: none;
        padding: 0;
    }
    .sl-pos-num { font-size: 13px; }
    .sl-pos-delta { font-size: 9px; }

    /* Car */
    .sl-td--car { border: none; padding: 0; flex-shrink: 0; width: var(--sl-car-w, 34px); }
    .sl-car { font-size: 13px; min-width: var(--sl-car-w, 34px); height: 26px; }

    /* Driver */
    .sl-td--driver { flex: 1; min-width: 0; border: none; padding: 0; }
    .sl-driver__name { font-size: 13px; }
    .sl-driver__sub { font-size: 10px; }
    .sl-driver__loc { max-width: none; }

    /* Remove sorted background on mobile */
    .sl-td--sorted { background: none; }

    /* Rating: always visible on mobile, right-aligned */
    .sl-td--rating {
        flex-shrink: 0;
        font-family: var(--font-head);
        font-size: 16px;
        -webkit-text-stroke: 0.02em currentColor;
        border: none;
        padding: 0;
        text-align: right;
    }

    /* Hide all other numeric columns on mobile */
    .sl-td--num { display: none; }

    /* Detail row: expandable stats grid */
    .sl-detail-row { display: none !important; }
    .sl-detail-row:not([hidden]) {
        display: flex !important;
        width: 100%;
    }
    .sl-detail-cell {
        padding: 8px 0 10px;
        border-bottom: 1px solid var(--content-border);
        background: var(--content-surface);
        width: 100%;
    }
    .sl-detail-grid {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 8px;
    }
    .sl-detail-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }
    .sl-detail-label {
        font-family: var(--font-head);
        font-size: 7px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--content-text-dim);
        margin-bottom: 2px;
    }
    .sl-detail-val {
        font-family: var(--font-head);
        font-size: 13px;
        color: var(--navy);
        -webkit-text-stroke: 0.02em currentColor;
        line-height: 1;
    }

    /* Pager */
    .sl-pager { flex-wrap: wrap; gap: 6px; padding: 12px; }
    .sl-pager__btn { padding: 6px 10px; font-size: 11px; }
    .sl-pager__input { width: 44px; font-size: 12px; }
}

/* ── Schedule & Watch ────────────────────────────────── */
.sch-list { margin-bottom: 24px; }
.sch-date { margin-bottom: 2px; }
.sch-date__header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: var(--navy-dark);
    border-left: 3px solid var(--red);
}
.sch-date__dow {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--red);
}
.sch-date__full {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
}
.sch-date__count {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-left: auto;
}

.sch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
    transition: background .1s;
}
.sch-card:hover { background: var(--content-surface); }
.sch-card--cancelled { opacity: 0.5; }
.sch-card--featured { border-left: 3px solid var(--red); }
.sch-card__main { flex: 1; min-width: 0; }
.sch-card__track {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    margin-bottom: 2px;
}
.sch-card__size {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--content-text-muted);
    margin-left: 6px;
    text-transform: none;
}
.sch-card__location {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-bottom: 4px;
}
.sch-card__event {
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 4px;
}
.sch-card__classes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sch-card__class {
    font-size: 10px;
    color: var(--content-text-muted);
    background: var(--content-surface);
    padding: 1px 6px;
    border-radius: 2px;
}
.sch-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.sch-card__purse {
    font-family: var(--font-head);
    font-size: 16px;
    color: #d4a017;
    font-weight: 700;
}
.sch-card__stream {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--content-text-muted);
}
.sch-card__stream svg { flex-shrink: 0; }
.sch-card__badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 2px;
}
.sch-card__badge--cancelled { background: rgba(218,0,0,.15); color: var(--red); }
.sch-card__badge--postponed { background: rgba(255,165,0,.15); color: #ffa500; }
.sch-card__badge--featured { background: rgba(218,0,0,.15); color: var(--red); }

/* Watch page cards */
.watch-card {
    display: flex;
    align-items: stretch;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    transition: background .1s;
}
.watch-card:hover { background: var(--content-surface); }
.watch-card__main {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    color: var(--content-text);
}
.watch-card__track {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    margin-bottom: 2px;
    text-decoration: none;
    display: block;
}
.watch-card__track:hover { color: var(--red); }
.watch-card__location {
    font-size: 11px;
    color: var(--content-text-muted);
    margin-bottom: 3px;
}
.watch-card__event {
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 3px;
}
.watch-card__classes { display: flex; flex-wrap: wrap; gap: 4px; }
.watch-card__class {
    font-size: 10px;
    color: var(--content-text-muted);
    background: var(--content-surface);
    padding: 1px 6px;
    border-radius: 2px;
}
.watch-card__stream {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    min-width: 120px;
    background: var(--content-surface);
    border-left: 1px solid var(--content-border);
    text-align: center;
    gap: 4px;
}
.watch-card__provider {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--content-text);
}
.watch-card__time {
    font-size: 11px;
    color: var(--content-text-muted);
}
.watch-card__price {
    font-size: 12px;
    color: #d4a017;
    font-weight: 700;
}
.watch-card__link {
    font-size: 10px;
    color: var(--red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.watch-card__link:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .sch-card { flex-direction: column; align-items: stretch; }
    .sch-card__meta { flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 8px; }
    .watch-card { flex-direction: column; }
    .watch-card__stream {
        flex-direction: row;
        justify-content: space-between;
        border-left: none;
        border-top: 1px solid var(--content-border);
        min-width: auto;
    }
}

/* ── Hot Drivers grid ────────────── */
.hot-drivers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    overflow: hidden;
}
.hot-drivers-grid > a {
    overflow: hidden;
    min-width: 0;
}
@media (max-width: 600px) {
    .hot-drivers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Series Directory ────────────────────────────────── */
.ser-list { border-top: 1px solid var(--content-border); }
.ser-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
    transition: background .1s;
}
.ser-item:hover { background: var(--content-surface); }
.ser-item__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ser-item__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
}
.ser-item__abbr {
    font-size: 11px;
    color: var(--content-text-muted);
    background: var(--content-surface);
    padding: 1px 6px;
    border-radius: 2px;
}
.ser-item__meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ser-item__races { font-size: 11px; color: var(--content-text-muted); }
.ser-item__badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 2px;
}
.ser-item__badge--active { background: rgba(0,210,106,.1); color: #d4a017; }
.ser-item__badge--inactive { background: var(--content-surface); color: var(--content-text-dim); }

/* ── Series Profile ─────────────────────────────────── */
.ser-section { padding: 16px; border-bottom: 1px solid var(--content-border); }
.ser-section__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    margin: 0 0 12px 0;
}
.ser-section__more {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--red);
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.ser-section__more:hover { text-decoration: underline; }
.ser-child {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 4px 4px 0;
    font-size: 12px;
    color: var(--content-text);
    background: var(--content-surface);
    border-radius: 4px;
    border: 1px solid var(--content-border);
}
.ser-child:hover { border-color: var(--red); color: var(--red); }
.ser-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ser-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--content-border);
}
.ser-table td { padding: 8px; border-bottom: 1px solid var(--content-border); color: var(--content-text); }
.ser-table__pos { font-family: var(--font-head); font-size: 14px; color: var(--content-text-muted); width: 32px; }
.ser-table__val { font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.ser-table__link { color: var(--red); font-weight: 700; }
.ser-table__link:hover { text-decoration: underline; }
.ser-table__sub { font-size: 11px; color: var(--content-text-muted); }
.ser-race {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--content-border);
    color: var(--content-text);
    font-size: 13px;
}
.ser-race:hover { color: var(--red); }
.ser-race__date { font-size: 11px; color: var(--content-text-muted); min-width: 80px; }
.ser-race__track { font-family: var(--font-head); font-size: 13px; text-transform: uppercase; flex: 1; }
.ser-race__class { font-size: 11px; color: var(--content-text-muted); }
.ser-race__winner { font-size: 11px; color: #d4a017; font-weight: 700; }

@media (max-width: 600px) {
    .ser-race { flex-wrap: wrap; gap: 4px; }
    .ser-race__date { min-width: auto; }
}

/* ── Map z-index — keep map below filter dropdowns ──
   Filter dropdowns already sit at z-index:110 via .dp-filter__popover.
   The map needs to stay below them; nothing else needed here. The
   previous global `.dp-filterbar { position: relative }` rule has
   been removed because it was stripping sticky from every filter
   bar across the site. */
#trackMap { position: relative; z-index: 1; }
.dp-filter__popover { z-index: 110; }

/* ── Vertical center alignment for all hometown/location text with flags ── */
.tp-driver-row__sub,
.tp-header__meta,
.td-card__loc,
.rd-driver__sub,
.dp-activity__sub {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Stats leader row location + info ── */
.sl-landing__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sl-landing__loc { display: flex; align-items: center; gap: 4px; line-height: 1; font-size: 10px; color: var(--content-text-muted); }
.sl-landing__loc .ts-flag { height: 0.9em; }
.sl-landing__loc-text { font-family: var(--font-loc); font-stretch: 200%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Series directory cards ── */
.ser-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--content-border);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
    color: var(--content-text);
    text-decoration: none;
}
.ser-card:hover { border-color: var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ser-card__header {
    height: 70px;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 14px;
    border-bottom: 1px solid var(--content-border);
}
.ser-card__logo {
    max-height: 48px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}
.ser-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 3px;
}
.ser-card__badge--active { background: rgba(10,138,62,.15); color: var(--green); }
.ser-card__badge--inactive { background: rgba(218,0,0,.1); color: #da0000; }
.ser-card__body {
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
    border-top: 2px solid var(--red);
    flex: 1;
}
.ser-card__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    -webkit-text-stroke: 0.02em currentColor;
    letter-spacing: .04em;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #fff;
}
.ser-card__abbr {
    display: inline-block;
    font-size: 10px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.5);
    padding: 1px 6px;
    border-radius: 2px;
    margin-bottom: 6px;
}
.ser-card__meta {
    font-size: 11px;
    color: rgba(255,255,255,.45);
}
/* ── Follow Button ─────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────
   Follow Button
   ─────────────────────────────────────────────────────────────────────────
   Used on the four profile pages: driver, track, series, event. All four
   have dark headers (navy panel or photo hero with dark gradient overlay),
   so the default treatment is an outline-on-dark button. The active state
   (when the user is currently following) flips to a filled red pill so
   the "I'm following this" state reads as a positive signal.
   ────────────────────────────────────────────────────────────────────── */
.follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Outline style: transparent so background photo / navy panel shows through.
       White border + text reads cleanly on every dark header in the app. */
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.follow-btn:hover {
    background: rgba(218, 0, 0, 0.15);
    border-color: var(--red);
    color: #fff;
}
.follow-btn:hover .follow-btn__icon {
    stroke: var(--red);
}
.follow-btn--active {
    /* Filled red — the user is following. Higher contrast than the default
       since this state should read as a positive confirmation. */
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.follow-btn--active .follow-btn__icon {
    fill: #fff;
    stroke: #fff;
}
.follow-btn--active:hover {
    /* Slight darken so it's clear the click target is still live */
    background: var(--red-dark);
    border-color: var(--red-dark);
}
.follow-btn--sm {
    padding: 5px 12px;
    font-size: 11px;
}
.follow-btn--sm .follow-btn__icon {
    width: 12px !important;
    height: 12px !important;
}

/* ── Race Rating Widget ────────────────────────────── */
/* ── Rating Widget: Grandstand Grade + Stream Score ──────────── */
.rt-widget {
    border-bottom: 1px solid var(--content-border);
}
.rt-widget__header {
    padding: 12px 16px 8px;
}
.rt-widget__title {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.02em currentColor;
}
.rt-widget__explainer {
    display: block;
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 2px;
}
.rt-widget__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--content-border);
}

/* Each rating block (Grandstand or Stream) */
.rt-block {
    background: var(--content-bg);
    padding: 12px 16px;
}
.rt-block--gs { border-left: 3px solid var(--red); }
.rt-block--st { border-left: 3px solid var(--navy); }
.rt-block__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.rt-block__info { flex: 1; }
.rt-block__name {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rt-block--gs .rt-block__name { color: var(--red); }
.rt-block--st .rt-block__name { color: var(--navy); }
.rt-block__desc {
    display: block;
    font-size: 11px;
    color: var(--content-text-muted);
    margin-top: 1px;
}
.rt-block__agg { text-align: right; flex-shrink: 0; }
.rt-block__score {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--content-text-dim);
    line-height: 1;
}
.rt-block__score--active { color: var(--content-text); }
.rt-block__count {
    display: block;
    font-size: 10px;
    color: var(--content-text-muted);
    margin-top: 2px;
}

/* Tier badges */
.rt-tier {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 4px;
}
.rt-tier--banger { background: rgba(218,0,0,.12); color: var(--red); }
.rt-tier--heater { background: rgba(218,165,0,.12); color: #c8960a; }

.rt-critic {
    font-size: 10px;
    color: var(--content-text-muted);
    margin-top: 4px;
}
.rt-critic__label { font-weight: 700; }
.rt-critic__count { opacity: .6; }

/* Action area inside each block */
.rt-block__action { margin-top: 10px; }
.rt-block__action:empty { display: none; }
.rt-block__prompt {
    font-size: 12px;
    color: var(--content-text);
    margin-bottom: 8px;
}
.rt-block__yours {
    font-size: 12px;
    color: var(--content-text-muted);
    margin-bottom: 8px;
}
.rt-block__row {
    margin-top: 6px;
}

/* 1-10 score buttons */
.rt-btns {
    display: flex;
    gap: 3px;
}
.rt-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--content-border);
    background: var(--content-surface);
    color: var(--content-text-muted);
    font-family: var(--font-head);
    font-size: 13px;
    cursor: pointer;
    transition: all .12s;
    padding: 0;
    border-radius: 3px;
}
.rt-btn:hover {
    border-color: var(--red);
    color: var(--red);
    background: rgba(218,0,0,.06);
}
.rt-btn--active {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}
.rt-btn--active:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: #fff;
}

/* Delete/remove link */
.rt-delete {
    background: none;
    border: none;
    color: var(--content-text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s;
}
.rt-delete:hover { text-decoration-color: var(--red); color: var(--red); }

/* Photo upload for Grandstand */
.rt-photo { margin-bottom: 8px; }
.rt-photo__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    padding: 8px 14px;
    border: 1px dashed var(--content-border);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.rt-photo__label:hover { border-color: var(--red); color: var(--red); }
.rt-photo__name {
    font-size: 11px;
    color: var(--green);
    margin-top: 4px;
}

/* Gating message */
.rt-gate {
    font-size: 12px;
    color: var(--content-text-muted);
    padding: 4px 0;
}
.rt-gate__link {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
}
.rt-gate__link:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 600px) {
    .rt-btns { gap: 2px; }
    .rt-btn { width: 28px; height: 28px; font-size: 11px; }
    .rt-block__score { font-size: 18px; }
}

/* ── Score Pills (compact, travel to cards/rows) ────────────── */
/* Container: sits inline among card metadata. Empty until hydrated. */
.rt-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0; /* collapses when empty */
}
.rt-pills:empty { display: none; }
.rt-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-head);
    font-size: 10px;
    letter-spacing: .02em;
    padding: 1px 6px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.4;
}
.rt-pill--gs {
    background: rgba(218,0,0,.08);
    color: var(--red);
}
.rt-pill--st {
    background: rgba(0,15,88,.08);
    color: var(--navy);
}
.rt-pill--banger {
    background: rgba(218,0,0,.15);
    color: var(--red);
    font-weight: 700;
}
.rt-pill--heater {
    background: rgba(218,165,0,.12);
    color: #c8960a;
}
.rt-pill__icon {
    font-size: 8px;
    opacity: .7;
}

/* ── Weather Chips (schedule rows, home upcoming) ───────────── */
.wx-chip {
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--content-text-muted);
    white-space: nowrap;
    cursor: default;
}
.wx-chip__precip {
    color: #4a90d9;
    font-weight: 700;
}

/* Race detail header weather */
.rd-header__weather {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--content-text-muted);
}
.rd-header__wx-icon { font-size: 16px; }
.rd-header__wx-text { font-family: var(--font-head); }
.rd-header__wx-wind {
    font-size: 11px;
    color: var(--content-text-dim);
    margin-left: 4px;
}

/* ── Race Preview Page (upcoming/scheduled) ─────────────────── */
.rp-content { padding: 0 0 24px; }
.rp-section {
    padding: 16px;
}

/* Section bar — top border divider with icon + title */
.rp-section__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-top: 2px solid var(--red);
    padding-top: 12px;
    color: var(--content-text);
}
.rp-section__bar i { flex-shrink: 0; }
.rp-section__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.02em currentColor;
    margin: 0;
}

/* Per-section disclaimer */
.rp-disclaimer {
    font-size: 11px;
    color: var(--content-text-dim);
    line-height: 1.5;
}

/* Info grid (series, purse, watch, weather cards) */
.rp-info-grid {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.rp-info-card {
    flex: 1;
    min-width: 140px;
    background: var(--content-surface);
    padding: 12px 14px;
}
.rp-info-card__label {
    font-family: var(--font-head);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-muted);
    margin-bottom: 6px;
}
.rp-info-card__value {
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.1;
}
.rp-info-card__value--money { color: var(--green); }
.rp-info-card__logos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rp-info-card__logo {
    max-height: 36px;
    max-width: 100px;
    width: auto;
    object-fit: contain;
}
.rp-info-card__prov-name {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--content-text);
    text-transform: uppercase;
}

/* Class header */
.rp-class-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.rp-class-header__title {
    font-family: var(--font-head);
    font-size: 15px;
    text-transform: uppercase;
    -webkit-text-stroke: 0.02em currentColor;
    letter-spacing: .04em;
    margin: 0;
}
.rp-class-header__num {
    font-size: 11px;
    color: var(--content-text-muted);
}
.rp-class-header__tw {
    font-family: var(--font-head);
    font-size: 13px;
    color: var(--green);
    font-weight: 700;
}

/* Entry list */
.rp-entries__head {
    margin-bottom: 8px;
}
.rp-entries__title {
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
/* Streaming providers */
.rp-providers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rp-provider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--content-surface);
}
.rp-provider__logo-wrap {
    flex: 0 0 auto;
    background: #fff;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rp-provider__logo {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
}
.rp-provider__info { flex: 1; min-width: 0; }
.rp-provider__name {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-text-stroke: 0.02em currentColor;
    color: var(--content-text);
}
.rp-provider__pricing {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.rp-provider__price {
    font-family: var(--font-head);
    font-size: 14px;
    color: var(--content-text);
}
.rp-provider__unit {
    font-size: 10px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 2px;
}

/* Entry list — single column */
.rp-entries__grid,
.rp-entries__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--content-border);
}
.rp-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    background: var(--content-bg);
    color: var(--content-text);
    text-decoration: none;
    transition: background .1s;
}
.rp-entry:hover { background: var(--content-surface); }
.rp-entry__car {
    flex: 0 0 44px;
}
.rp-entry__name {
    flex: 1 1 200px;
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--content-text);
    transition: color .1s;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rp-entry:hover .rp-entry__name { color: var(--red); }
.rp-entry__loc {
    flex: 0 1 auto;
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.rp-entry__loc .ts-flag { height: 1em; }

/* Championship single-column list */
.dp-champ-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--content-border);
}
.dp-champ-list .dp-champ-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    color: var(--content-text);
}
.dp-champ-list .dp-champ-item--link { text-decoration: none; }
.dp-champ-list .dp-champ-item--link:hover { background: var(--content-surface); }

/* Car number badge — prevent letters from being too small */
.dp-hero__badge-num .car-num-sm {
    font-size: 0.82em;
}

/* Rival + track card name weight boost */
.dp-rival__name, .dp-track__name, .dp-trk-card__name {
    -webkit-text-stroke: 0.02em currentColor;
}

/* Rankings pill tier label weight */
.dp-ranking-pill__label { -webkit-text-stroke: 0.015em currentColor; }

/* H2H driver names weight */
.dp-h2h__name { -webkit-text-stroke: 0.02em currentColor; }

/* Track Analysis — all track names consistent */
.dp-tpl__name { -webkit-text-stroke: 0.02em currentColor; }
.dp-closest__name { -webkit-text-stroke: 0.02em currentColor; }

/* Championship series names weight */
.dp-champ-item__label { -webkit-text-stroke: 0.015em currentColor; }

/* Activity track name — match Frequent Tracks visual weight (text-stroke, not font-weight) */
.dp-activity__track { font-weight: 400 !important; -webkit-text-stroke: 0.02em currentColor; }

/* Car number badge — letters match visual weight of digits */
.dp-hero__badge-num .car-num-sm {
    font-size: 0.85em;
    font-weight: 900;
}

/* Tabs — fix vertical scroll, maintain sticky */
.dp-tabs { overflow: visible !important; }
.dp-tabs__inner { overflow-x: auto; overflow-y: hidden; }

/* On mobile, sub-nav is hidden so sticky-top overestimates by --sub-nav-h */
@media (max-width: 767px) {
    .dp-tabs {
        position: sticky;
        top: var(--hdr-h, 54px);
        z-index: 100;
        overflow: visible !important;
    }
    /* Dropdown list opens over content below */
    .dp-tabs__inner.dp-tabs__inner--open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-dark);
        border-bottom: 2px solid var(--red);
        box-shadow: 0 8px 24px rgba(0,0,0,.4);
        z-index: 101;
        max-height: 60vh;
        overflow-y: auto;
    }
    /* Hide the sliding underline on mobile — use left border instead */
    .dp-tab-btn::after { display: none; }
}

/* Upcoming schedule card — mobile ordering */
@media (max-width: 899px) {
    /* Flatten the two-column layout so individual cards can be reordered */
    .dp-overview-grid {
        display: flex;
        flex-direction: column;
    }
    .dp-overview-grid .dp-col {
        display: contents;
    }
    /* Order: Rankings (1), Upcoming (2), Activity (3), Seasons (4), everything else (10) */
    .dp-overview-grid .dp-card { order: 10; }
    .dp-overview-grid .dp-card--rankings { order: 1; }
    .dp-overview-grid .dp-card--upcoming { order: 2; }
    .dp-overview-grid .dp-card--activity { order: 3; }
    .dp-overview-grid .dp-card--seasons  { order: 4; }
}

/* Photos — unified display (hide section headers, merge grids seamlessly) */
[data-unified="true"] .dp-photos__section-head { display: none; }
[data-unified="true"] .dp-photos__section { margin-bottom: 0; padding: 0; }
[data-unified="true"] .dp-photos__section + .dp-photos__section { margin-top: 0; }

/* Track Analysis layout — 60/40 on desktop */
.dp-tracks-layout--5050 {}
@media (min-width: 900px) {
    .dp-tracks-layout--5050 {
        grid-template-columns: 3fr 2fr;
    }
}

/* ================================================================
   DRIVER PROFILE — WOW FACTOR DESIGN PASS
   ================================================================ */

/* ── Hero enhancements ─────────────────────────────────────────── */
/* Dual-layer gradient: navy-to-transparent top + deep fade bottom */
.dp-hero::after {
    background: linear-gradient(
        180deg,
        rgba(8,12,26,.15) 0%,
        rgba(8,12,26,.35) 40%,
        rgba(8,12,26,.85) 75%,
        rgba(8,12,26,.96) 100%
    ) !important;
}
/* Subtle red accent glow at bottom of hero */
.dp-hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    z-index: 2;
    opacity: .6;
}

/* Car number badge — red glow pulse */
.dp-hero__badge {
    box-shadow: 0 0 20px rgba(218,0,0,.3), 0 0 40px rgba(218,0,0,.1) !important;
    border-color: rgba(218,0,0,.7) !important;
    transition: box-shadow .3s ease, transform .3s ease;
}
.dp-hero__badge:hover {
    box-shadow: 0 0 30px rgba(218,0,0,.5), 0 0 60px rgba(218,0,0,.2) !important;
    transform: scale(1.04);
}

/* Driver name — subtle letter spacing for presence */
.dp-hero__name {
    letter-spacing: .02em !important;
    -webkit-text-stroke: 0.5px rgba(255,255,255,.3);
}

/* ── Stats cards — wins gets gold accent ──────────────────────── */
.tp-overview-stats__card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.tp-overview-stats__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* ── Tab bar — active indicator slide ────────────────────────── */
.dp-tab-btn {
    position: relative;
    transition: color .15s ease;
}
.dp-tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 2px;
    background: var(--red);
    transition: left .2s ease, right .2s ease;
}
.dp-tab-btn--active::after {
    left: 0;
    right: 0;
}

/* ── Cards — subtle hover lift ───────────────────────────────── */
.dp-card {
    transition: box-shadow .15s ease;
}
.dp-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Card titles — red left accent bar (skip stud/dud which have their own color borders) */
.dp-card__head {
    border-left: 3px solid var(--red);
    transition: border-color .15s ease;
}
.dp-card--stud .dp-card__head,
.dp-card--dud .dp-card__head {
    border-left: none;
}

/* ── Ranking pills — hover animation ────────────────────────── */
.dp-ranking-pill {
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease !important;
}
.dp-ranking-pill:hover {
    transform: translateX(3px);
    box-shadow: -3px 0 0 var(--red);
}

/* ── Activity items — hover slide ────────────────────────────── */
.dp-activity__item {
    transition: background .1s ease;
}
.dp-activity__item:hover {
    background: rgba(218,0,0,.02);
}
.dp-activity__link {
    transition: padding-left .12s ease;
}
.dp-activity__item:hover .dp-activity__link {
    padding-left: 4px;
}

/* ── Rival cards — hover accent ──────────────────────────────── */
.dp-rival {
    transition: background .12s ease, border-color .12s ease, transform .12s ease !important;
}
.dp-rival:hover {
    border-left-color: var(--red) !important;
    transform: translateX(2px);
}

/* ── Track cards — hover lift ────────────────────────────────── */
.dp-trk-card {
    transition: background .12s ease, border-color .12s ease, transform .12s ease !important;
}
.dp-trk-card:hover {
    border-left-color: var(--red) !important;
    transform: translateX(2px);
}

/* ── Championship items — hover accent ───────────────────────── */
.dp-champ-list .dp-champ-item {
    transition: background .12s ease, padding-left .12s ease;
}
.dp-champ-list .dp-champ-item:hover {
    background: rgba(234,179,8,.04);
    padding-left: 20px;
}

/* ── Photo tiles — hover zoom ────────────────────────────────── */
.ts-photo-tile img {
    transition: transform .25s ease;
}
.ts-photo-tile:hover img {
    transform: scale(1.03);
}

/* ── Seasons cards — hover ───────────────────────────────────── */
.dp-season {
    transition: background .12s ease;
}
.dp-season:hover {
    background: var(--content-surface);
}

/* ── Track Analysis stud/dud items — hover slide ─────────────── */
.dp-tpl__item {
    transition: background .12s ease, transform .12s ease;
}
.dp-tpl__item:hover {
    background: rgba(218,0,0,.02);
    transform: translateX(2px);
}

/* ── Closest tracks — hover ──────────────────────────────────── */
.dp-closest__item {
    transition: background .12s ease, transform .12s ease;
}
.dp-closest__item:hover {
    background: rgba(218,0,0,.02);
    transform: translateX(2px);
}

/* ── H2H cards — hover ───────────────────────────────────────── */
.dp-h2h__card {
    transition: background .12s ease, transform .12s ease;
}
.dp-h2h__card:hover {
    background: rgba(218,0,0,.02);
    transform: translateX(2px);
}

/* ── Win highlight — gold flash on the wins stat ─────────────── */
.tp-overview-stats__val--yellow {
    text-shadow: 0 0 8px rgba(234,179,8,.2);
}
/* Wins card — gold top border accent (targets cards with yellow-highlighted values) */
.tp-overview-stats__card:has(.tp-overview-stats__val--yellow) {
    border-top: 2px solid var(--yellow);
}

/* ── Ranking position — large red number with presence ───────── */
.dp-ranking-pill__pos {
    background: linear-gradient(135deg, rgba(218,0,0,.08), rgba(218,0,0,.02));
    border-radius: 4px;
    padding: 4px 0;
}

/* ── Activity date block — red top accent, keep readable ──────── */
.dp-activity__date {
    border-top: 2px solid var(--red) !important;
    border-left: none;
    border-right: none;
}

/* ── Win results — gold left accent ──────────────────────────── */
.dp-activity__pos--win {
    text-shadow: 0 0 6px rgba(234,179,8,.3);
}

/* ── Section cards — top red line on first card in each column ── */
.dp-col > .dp-card:first-child {
    border-top: 2px solid var(--red);
}

/* ── Frequent tracks/rivals — numbered rank circle ───────────── */
.dp-rival__rank {
    background: var(--navy-dark) !important;
    color: #fff !important;
    border: 1px solid rgba(218,0,0,.3);
}

/* ── Track logo containers — subtle shadow ───────────────────── */
.dp-trk-card .tp-logo,
.dp-tpl__item .tp-logo,
.dp-closest__item .tp-logo {
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    border-radius: 3px;
}

/* ── HOF banner — gold shimmer effect ────────────────────────── */
.dp-hof-banner {
    background-size: 200% 100% !important;
    animation: dpHofShimmer 6s ease-in-out infinite;
}
@keyframes dpHofShimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* ── PRO badge on tabs — subtle pulse ────────────────────────── */
.dp-tab-btn span[style*="background:var(--red)"] {
    animation: dpProPulse 3s ease-in-out infinite;
}
@keyframes dpProPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

/* ── Recent Seasons — year number accent ─────────────────────── */
.dp-season__year {
    color: var(--red) !important;
    position: relative;
}
.dp-season__year::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--red);
    opacity: .4;
}

/* ── Card "View all" buttons — red dot indicator ─────────────── */
.dp-card__more {
    position: relative;
}
/* Red dot removed — cleaner without it */

/* ── Championship trophy icon — subtle glow on hover ─────────── */
.dp-champ-list .dp-champ-item:hover [data-lucide="trophy"],
.dp-champ-list .dp-champ-item:hover [data-lucide="award"] {
    filter: drop-shadow(0 0 4px rgba(234,179,8,.5));
}

/* ── Follow button area — breathing room ─────────────────────── */
.dp-hero [data-follow] {
    margin-top: 10px;
}

/* ── Smooth page-level transitions ───────────────────────────── */
.dp-panel {
    animation: dpFadeIn .2s ease;
}
@keyframes dpFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   DRIVER PROFILE — MOBILE POLISH
   ================================================================ */
@media (max-width: 768px) {
    /* Hero — compact on small screens */
    .dp-hero__badge {
        width: 60px !important;
        height: 60px !important;
    }
    .dp-hero__name {
        font-size: 22px !important;
    }
    .dp-hero__inner {
        gap: 12px !important;
        padding: 24px 12px 20px !important;
    }

    /* Stats cards — 2x2 grid on small screens */
    .tp-overview-stats[style*="repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Ranking pills — tighter */
    .dp-ranking-pill__pos {
        width: 56px;
        font-size: 18px;
    }

    /* Activity — tighter spacing */
    .dp-activity__link {
        gap: 8px;
    }

    /* Cards — reduce side margin */
    .dp-card {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* Track cards — stack stats below body */
    .dp-trk-card {
        flex-wrap: wrap;
    }
    .dp-trk-card__stats {
        width: 100%;
        border-top: 1px solid var(--content-border);
        padding-top: 8px;
        margin-top: 8px;
    }

    /* Championship items — tighter padding */
    .dp-champ-list .dp-champ-item {
        padding: 10px 12px;
        gap: 8px;
    }
    .dp-champ-item__year {
        font-size: 16px;
        width: 44px;
    }

    /* Recent Seasons — compact */
    .dp-season__row {
        gap: 8px;
    }

    /* Section top borders — extend to edges */
    .dp-col > .dp-card:first-child {
        border-top-width: 2px;
    }

    /* Card head red bar — thinner on mobile */
    .dp-card__head {
        border-left-width: 2px;
    }

    /* Hero badge glow — subtler on mobile (saves battery) */
    .dp-hero__badge {
        box-shadow: 0 0 12px rgba(218,0,0,.2) !important;
    }

    /* Tab content — no animation on mobile (smoother perf) */
    .dp-panel {
        animation: none;
    }
}

@media (max-width: 480px) {
    /* Hero — name even tighter */
    .dp-hero__name {
        font-size: 20px !important;
    }
    .dp-hero__badge {
        width: 52px !important;
        height: 52px !important;
    }
    .dp-hero__meta {
        font-size: 12px !important;
    }

    /* Stats cards — still 2x2 but smaller padding */
    .tp-overview-stats__card {
        padding: 10px 8px !important;
    }
    .tp-overview-stats__val {
        font-size: 20px !important;
    }

    /* Activity date block — narrower */
    .dp-activity__date {
        width: 48px;
    }
    .dp-activity__date-day {
        font-size: 16px;
    }

    /* Rival record — stack vertically */
    .dp-rival__record {
        text-align: right;
    }
}

/* Disclaimers */
.rp-disclaimers {
    padding: 16px;
    font-size: 11px;
    color: var(--content-text-dim);
    line-height: 1.6;
}
.rp-disclaimers p { margin: 4px 0; }
.rp-disclaimers i { opacity: .5; }

/* Mobile */
@media (max-width: 600px) {
    .rp-info-grid { flex-direction: column; }
    .rp-event__name { font-size: 15px; }
}

/* ── Race Photo Gallery ────────────────────────────── */
.rd-photos { padding: 12px 0; }
.rd-photos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 4px;
}
.rd-photos__thumb {
    aspect-ratio: 3/2;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.rd-photos__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}
.rd-photos__thumb:hover img { transform: scale(1.05); }
.rd-photos__credit {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    font-size: 8px;
    color: rgba(255,255,255,.7);
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    padding: 12px 6px 3px;
    pointer-events: none;
}

/* ── Add to Calendar ───────────────────────────────── */
.cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid var(--content-border);
    background: var(--content-surface);
    color: var(--content-text-muted);
    text-decoration: none;
    transition: all .15s;
}
.cal-btn:hover { border-color: var(--red); color: var(--red); }
/* ── Pages where .dp-filterbar should NOT be sticky ──
   Scoped via body[data-page="..."] so the override doesn't strip
   sticky from filter bars on every other page. The pages listed
   here use the dp-filterbar styling but want the bar to scroll
   naturally with the page (no pin-to-top behavior).

   - schedule:  large rows + lots of vertical content; sticky bar
                eats viewport height that's better used for results
   - watch / streams / watch-guide: same reasoning — the tile grid
                is the focus; user scrolls through cards rather
                than re-applying filters mid-scroll
   The previous unscoped `.dp-filterbar { position: static }` was
   breaking sticky on every page using the dp-filterbar pattern. */
body[data-page="schedule"] .dp-filterbar,
body[data-page="watch"] .dp-filterbar,
body[data-page="streams"] .dp-filterbar,
body[data-page="watch-guide"] .dp-filterbar { position: static; }

/* ── Schedule: timeframe detail collapse ── */
.dp-filter--timeframe[data-tf-mode="upcoming"] .dp-filter__tfdetail,
.dp-filter--timeframe[data-tf-mode="past"] .dp-filter__tfdetail { display: none; }

/* ── Schedule page layout ─────────────────────────── */
.sch-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 2px solid var(--content-border);
    border-top: 1px solid var(--content-border);
}
.sch-header__col {
    font-family: var(--font-head);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--content-text-dim);
}
.sch-header__date { width: 60px; flex-shrink: 0; text-align: center; }
.sch-header__race { flex: 1; min-width: 0; }
.sch-header__series { width: 110px; flex-shrink: 0; text-align: center; }
.sch-header__watch { width: 130px; flex-shrink: 0; text-align: center; }
.sch-header__towin { width: 110px; flex-shrink: 0; text-align: center; }

.sch-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--content-border);
    transition: background .1s;
}
.sch-row:hover { background: var(--content-surface); }
.sch-row a:hover { color: var(--red); }

/* Clickable row variant — used on the home page Upcoming list where
   we want the whole row to navigate to the race detail. We don't use
   <a> as the row wrapper because the row contains nested anchors
   (series, event, provider links), and HTML disallows nested
   anchors — the browser auto-closes the outer one, which destroys
   the flex layout. Instead we keep <div class="sch-row"> and make it
   feel clickable via cursor + JS click handler that reads data-href. */
.sch-row--clickable {
    cursor: pointer;
}
.sch-row--clickable:hover .sch-row__track {
    color: var(--red);
}
.sch-row--clickable:active {
    background: var(--content-surface);
}

/* Wrapper around the home Upcoming list — keeps the rounded edges
   matching the rest of the home page tiles (the schedule page uses
   .sch-list which has a top border to attach to its filter bar; the
   home page has no filter bar above so this rule pads the top). */
.sch-list {
    border-top: 1px solid var(--content-border);
    margin: 0 16px;
}
.section .sch-list { margin: 0 16px; }
.sch-list .sch-row:last-child { border-bottom: none; }

.sch-row__date { width: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.sch-row__body { flex: 1; min-width: 0; }

/* Series column (desktop). Logo-priority — when a series has a logo
   on file, only the logo renders (~32px tall). When no logo, the
   abbreviated/full name renders as small red text. Multiple series
   stack vertically so the user can scan them at a glance.

   Hidden on mobile — series moves into the row body next to the
   class line, where it flows with class info naturally. */
.sch-row__series {
    width: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sch-row__series:empty { display: none; }

.sch-row__watch { width: 130px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
/* Multi-source layout: when 2+ providers stream the race day, the
   watch column gets a "Multiple sources" header tag and visible
   dividers between each provider block. */
.sch-row__watch--multi {
    width: 150px;
    gap: 8px;
}
.sch-row__watch--multi .sch-row__prov + .sch-row__prov {
    border-top: 1px solid var(--content-border);
    padding-top: 8px;
    margin-top: 0;
}
.sch-row__watch-multi-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--red);
    padding: 2px 8px;
    border: 1px solid rgba(218, 0, 0, 0.3);
    border-radius: 999px;
    background: rgba(218, 0, 0, 0.05);
    white-space: nowrap;
}
.sch-row__watch-multi-tag svg { width: 10px; height: 10px; }
.sch-row__towin { width: 110px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.sch-row__track {
    font-family: var(--font-head);
    font-size: 15px;
    text-transform: uppercase;
    color: var(--content-text);
    text-decoration: none;
    display: block;
    line-height: 1.2;
    -webkit-text-stroke: 0.02em currentColor;
}

/* Meta row beneath the track name: map-pin + flag + location, then
   ruler + track size. Uses OC Highway for location/size to match the
   convention established on track-profile pages. Icons are 14px,
   muted, and align via font-size em so they sit nicely on the text
   baseline.

   The container reuses .rs-card__sub (results-card sub-line) for
   font-size + color baseline, then layers .sch-row__meta on top for
   flex+gap behavior. Keeping rs-card__sub means existing pages that
   only use rs-card__sub continue to render correctly. */
.sch-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1;
}
.sch-row__meta .ts-flag {
    height: 0.95em;
}
.sch-row__meta-icon {
    width: 12px;
    height: 12px;
    color: var(--content-text-muted);
    flex-shrink: 0;
}
.sch-row__meta-icon i,
.sch-row__meta-icon[data-lucide],
i.sch-row__meta-icon[data-lucide] svg {
    width: 12px;
    height: 12px;
}
.sch-row__meta-sep {
    margin: 0 4px;
    opacity: 0.3;
}
.sch-row__loc {
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.sch-row__size {
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.sch-row__class-line {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1.8;
    -webkit-text-stroke: 0.02em currentColor;
}
/* Sub-blocks within a class-line: primary (class · to-win), series,
   events. Desktop joins them inline with implicit separators; mobile
   breaks each onto its own line for readability. */
.sch-row__cl-name,
.sch-row__cl-tw,
.sch-row__cl-series {
    display: inline;
}
.sch-row__cl-events {
    display: block;
}
.sch-row__cl-tw {
    color: var(--green);
    -webkit-text-stroke: 0.02em currentColor;
    margin-left: 6px;
}
.sch-row__cl-tw-label {
    color: var(--content-text-dim);
    -webkit-text-stroke: 0;
    font-size: 0.85em;
}
.sch-row__cl-name + .sch-row__cl-tw::before { content: none; }
.sch-row__cl-series { margin-left: 6px; }
.sch-row__cl-series::before,
.sch-row__cl-events::before {
    content: none;
}
.sch-row__ev-type {
    font-size: 11px;
    color: var(--content-text-muted);
    -webkit-text-stroke: 0;
}

.sch-row__tw-amount {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--green);
    line-height: 1;
    -webkit-text-stroke: 0.02em currentColor;
}
.sch-row__tw-label {
    font-size: 8px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 2px;
}

.sch-row__prov { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sch-row__prov-logo {
    max-height: 56px;
    max-width: 130px;
    width: auto;
    border-radius: 4px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid var(--content-border);
}
.sch-row__prov-name {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--red);
    text-transform: uppercase;
    -webkit-text-stroke: 0.02em currentColor;
}
.sch-row__ev-link {
    font-family: var(--font-head);
    color: var(--red);
    text-decoration: none;
    -webkit-text-stroke: 0.02em currentColor;
}
.sch-row__ev-link:hover { text-decoration: underline; }
.sch-row__prov-prices {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sch-row__prov-price {
    font-family: var(--font-head);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
}
.sch-row__price-amount {
    color: var(--green);
    font-weight: 700;
}
.sch-row__price-label {
    color: var(--content-text-muted);
    font-weight: 400;
    font-size: 10px;
}

/* Pricing column (watch page only — schedule uses sch-row__towin for
   To Win purse). PPV is the lead price (one value, race-day-level).
   Subscription tiers stack below it. When multi-source, each provider
   gets a small label so the user can match price to logo.

   Color split: dollar amounts green (matches the to-win color
   convention), unit descriptors muted gray. Same pattern reused for
   PPV and subscription lines. */
.sch-row__pricing {
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    line-height: 1.25;
}
.sch-row__price-amt {
    font-family: var(--font-head);
    color: var(--green);
    -webkit-text-stroke: 0.02em currentColor;
}
.sch-row__price-unit {
    color: var(--content-text-muted);
    font-weight: 600;
    font-size: 0.78em;
    margin-left: 2px;
    letter-spacing: .02em;
}
.sch-row__price-ppv {
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.sch-row__price-ppv .sch-row__price-amt { font-size: 15px; }
.sch-row__price-ppv .sch-row__price-unit {
    /* PPV's unit is uppercase + slightly tighter for emphasis. */
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 9px;
    color: var(--content-text-dim);
}
.sch-row__price-subs {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
    /* When PPV is also shown, separate the subscription block visually
       so the price hierarchy reads PPV-first. */
    border-top: 1px dashed var(--content-border);
    padding-top: 4px;
    margin-top: 2px;
    width: 100%;
}
.sch-row__pricing > .sch-row__price-subs:first-child {
    /* No PPV present: drop the divider since there's nothing above. */
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.sch-row__price-prov-label {
    font-family: var(--font-head);
    font-size: 9px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    -webkit-text-stroke: 0.015em currentColor;
    letter-spacing: .04em;
    margin-top: 2px;
    line-height: 1.2;
}
.sch-row__price-prov-label:first-child { margin-top: 0; }
.sch-row__price-line {
    white-space: nowrap;
    line-height: 1.3;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}
.sch-row__price-line .sch-row__price-amt { font-size: 15px; }
.sch-row__price-line .sch-row__price-unit { font-size: 11px; }
.sch-row__price-empty {
    color: var(--content-text-dim);
    font-size: 14px;
}

.sch-row__watch-label {
    display: none;
    font-family: var(--font-head);
    font-size: 10px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    -webkit-text-stroke: 0.015em currentColor;
    letter-spacing: .06em;
    font-weight: 700;
    white-space: nowrap;
}
.sch-row__cal-mobile { display: none; }
.sch-row__cal-desktop { /* shown by default */ }
.sch-row__cal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    color: var(--content-text-muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.sch-row__cal-btn:hover { color: var(--red); background: rgba(218,0,0,.08); }
.sch-row__cal-icon { width: 14px; height: 14px; }

.sch-row__tier-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sch-row__tier-pill {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(218,0,0,.1);
    color: var(--red);
}
.sch-row__classes { margin-top: 4px; }
.sch-row__cl-racenum { color: var(--content-text-muted); -webkit-text-stroke: 0; font-size: 11px; }
.sch-card__badge { margin-top: 4px; display: inline-block; }
.sp-loc__icon--action { cursor: pointer; }
.sp-loc__icon--action:hover { color: var(--red); }
.page-header__icon { width: 22px; height: 22px; color: var(--red); vertical-align: middle; margin-right: 8px; }

/* ── Schedule mobile ──────────────────────────────── */
@media (max-width: 600px) {
    .sch-header  { display: none; }
    .sch-list    { margin: 0; border-top: none; }

    .sch-row {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "date body   series"
            "foot foot   foot";
        border-bottom: 2px solid var(--content-border);
        background: var(--content-bg);
        overflow: hidden;
        gap: 8px 10px;
        padding: 0;
        align-items: start;
    }

    /* Calendar: gray card, matching watch page */
    .sch-row__date {
        grid-area: date;
        background: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 4px;
        align-self: start;
    }
    .sch-row__date .rs-card__date {
        background: #e2e4ea !important;
        border: none !important;
        margin: 0;
        text-align: center;
        padding: 6px 4px;
        min-width: 48px;
        width: auto;
        transform: none;
        border-radius: 6px;
    }
    .sch-row__date .rs-card__dow  { display: block; font-size: 9px;  text-transform: uppercase; color: var(--content-text-dim) !important; line-height: 1.3; }
    .sch-row__date .rs-card__month{ display: block; font-size: 10px; text-transform: uppercase; color: var(--red) !important; line-height: 1.2; }
    .sch-row__date .rs-card__day  { display: block; font-size: 24px; color: var(--content-text) !important; font-family: var(--font-head); line-height: 1; margin-top: 0; }
    .sch-row__date .rs-card__year { display: block; font-size: 9px;  color: var(--content-text-dim) !important; line-height: 1.3; margin-top: 1px; }

    /* ── Content area ── */
    .sch-row__body {
        grid-area: body;
        padding: 12px 10px 10px;
        background: none;
        min-width: 0;
    }
    .sch-row__track {
        display: block;
        font-family: var(--font-head);
        font-size: 13px;
        text-transform: uppercase;
        color: var(--content-text);
        line-height: 1.2;
        margin-bottom: 3px;
        text-decoration: none;
        -webkit-text-stroke: 0.02em currentColor;
    }
    .sch-row__track:hover { color: var(--red); }

    /* Location line inherits sp-race-row__loc light styling */
    .sch-row__cal-desktop { display: none; }
    .sch-row__cal-mobile  { display: none; }
    .sch-row__tier-pill   { font-size: 8px; padding: 2px 7px; }
    .sch-row__class-line  { font-size: 11px; line-height: 1.65; color: var(--content-text); margin-top: 3px; display: block; }
    .sch-row__cl-name,
    .sch-row__cl-tw       { display: inline; }
    .sch-row__cl-series,
    .sch-row__cl-events   { display: block; }
    .sch-row__cl-tw { margin-left: 6px; }
    .sch-row__cl-series { margin-left: 0; }
    .sch-row__cl-name + .sch-row__cl-tw::before,
    .sch-row__cl-series::before,
    .sch-row__cl-events::before { content: none; }

    /* ── Series: top-right, stacked ── */
    .sch-row__series {
        grid-area: series;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        align-self: start;
        gap: 4px;
        padding: 12px 10px 0 0;
    }
    .sch-row__series .watch-row__series-logo {
        display: block;
        background: #fff;
        border: 1px solid var(--content-border);
        border-radius: 4px;
        padding: 3px 6px;
    }
    .sch-row__series .watch-row__series-img { max-height: 36px; }

    /* ── Footer: watch + purse ── */
    .sch-row__watch,
    .sch-row__towin {
        grid-area: foot;
    }

    .sch-row__towin {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 8px 12px;
        margin: 0 10px 10px;
        background: var(--navy-dark);
        border-top: none;
        border-radius: 6px;
        gap: 6px;
        width: auto;
        box-sizing: border-box;
    }
    .sch-row__tw-amount { font-size: 15px; color: var(--green); line-height: 1; -webkit-text-stroke: 0.02em currentColor; }
    .sch-row__tw-label  { font-size: 8px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .1em; margin-left: 1px; }

    .sch-row__watch {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 8px 10px;
        background: transparent;
        border-top: none;
    }
    .sch-row__watch-label { display: none; }
    .sch-row__prov        { flex-direction: row; align-items: center; }
    .sch-row__prov-logo   { max-height: 22px; max-width: 70px; padding: 2px 4px; background: #fff; border: 1px solid var(--content-border); border-radius: 3px; }
    .sch-row__prov-name   { font-size: 10px; color: var(--red); text-transform: uppercase; -webkit-text-stroke: 0.015em currentColor; }
    .sch-row__watch--multi .sch-row__prov + .sch-row__prov { border-top: none; padding-top: 0; margin-left: 6px; }
}

/* ── Watch page — desktop: hide mobile-only combined streaming ── */
.watch-row__stream-combined { display: none; }

/* ── Watch page mobile ── */
@media (max-width: 600px) {
    .watch-row {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "date  body    series"
            "stream stream stream";
        gap: 8px 10px;
        padding: 14px 12px;
        align-items: start;
        border-bottom: 2px solid var(--content-border);
        background: var(--content-bg);
    }

    /* Hide desktop-only watch + pricing columns on mobile */
    .watch-row .sch-row__watch { display: none !important; }
    .watch-row .sch-row__towin { display: none !important; }

    /* Show mobile combined streaming */
    .watch-row .watch-row__stream-combined {
        grid-area: stream;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Each provider row: logo left, prices right */
    .watch-row__stream-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        background: var(--navy-dark);
        border-radius: 6px;
    }
    .watch-row__stream-prov { flex-shrink: 0; }
    .watch-row__stream-prov .sch-row__prov-logo {
        max-height: 36px;
        max-width: 120px;
        padding: 4px 8px;
        background: #fff;
        border: 1px solid rgba(255,255,255,.15);
        border-radius: 4px;
    }
    .watch-row__stream-prov .sch-row__prov-name { color: rgba(255,255,255,.7); }
    .watch-row__stream-prices {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 12px;
        flex: 1;
        justify-content: flex-end;
    }
    .watch-row__stream-price {
        font-family: var(--font-head);
        font-size: 18px;
        color: var(--green);
        -webkit-text-stroke: 0.02em currentColor;
        white-space: nowrap;
    }
    .watch-row__stream-price-unit {
        font-size: 10px;
        color: rgba(255,255,255,.5);
        -webkit-text-stroke: 0;
    }
    .watch-row__stream-no-price { font-family: var(--font-head); font-size: 11px; color: rgba(255,255,255,.35); text-align: right; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; }

    /* Calendar */
    .watch-row .sch-row__date {
        grid-area: date;
        width: auto;
        position: static;
        background: none;
        padding: 0;
        align-self: start;
    }
    .watch-row .sch-row__date .rs-card__date {
        transform: none;
        margin: 0;
        min-width: 52px;
        background: #e2e4ea !important;
        border: none !important;
        border-radius: 6px;
        padding: 6px 4px;
    }
    .watch-row .sch-row__date .rs-card__dow { color: var(--content-text-dim) !important; }
    .watch-row .sch-row__date .rs-card__month { color: var(--red) !important; }
    .watch-row .sch-row__date .rs-card__day { color: var(--content-text) !important; }
    .watch-row .sch-row__date .rs-card__year { color: var(--content-text-dim) !important; }

    /* Race body */
    .watch-row .sch-row__body {
        grid-area: body;
        min-width: 0;
        background: none;
        padding: 0;
    }
    .watch-row .sch-row__track { font-size: 13px; color: var(--content-text); }
    .watch-row .sch-row__class-line { font-size: 12px; line-height: 1.4; color: var(--content-text); }
    .watch-row .sp-race-row__loc { color: var(--content-text-muted); }
    .watch-row .sch-row__cl-name { display: block; }
    .watch-row .sch-row__cl-tw { display: block; color: var(--green); margin-left: 0; }
    .watch-row .sch-row__cl-name + .sch-row__cl-tw::before { content: none; }
    .watch-row .sch-row__cl-series { display: block; margin-left: 0; }
    .watch-row .sch-row__cl-events { display: block; }
    .watch-row .sch-row__cl-series::before,
    .watch-row .sch-row__cl-events::before { content: none; }

    /* Series: top-right, STACKED vertically */
    .watch-row .sch-row__series {
        grid-area: series;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        align-self: start;
        gap: 4px;
        padding: 0;
    }
    .watch-row__series-logo {
        display: block;
        background: #fff;
        border: 1px solid var(--content-border);
        border-radius: 4px;
        padding: 3px 6px;
        text-align: center;
    }
    .watch-row__series-img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; display: block; }
    .watch-row__series-name { font-family: var(--font-head); font-size: 10px; color: var(--red); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
    .watch-row--today .watch-row__series-logo { border-color: rgba(255,255,255,.15); }
    .watch-row .sch-row__series .series-chip--stack {
        flex-shrink: 0;
        width: auto;
        background: #fff;
        border: 1px solid var(--content-border);
        border-radius: 4px;
        padding: 3px 6px;
    }
    .watch-row .sch-row__series .series-chip--stack .series-chip__logo { max-height: 40px; }

    /* Icons */
    .watch-row .sp-loc__icon { color: var(--navy); }
    .watch-row--today .sp-loc__icon { color: var(--content-text-muted); }

    /* Featured row (today) */
    .watch-row--today {
        background: var(--navy-dark);
        border-left-color: var(--red);
        border-bottom-color: rgba(255,255,255,.1);
    }
    .watch-row--today .sch-row__track { color: #fff; }
    .watch-row--today .sch-row__class-line { color: rgba(255,255,255,.75); }
    .watch-row--today .sch-row__cl-tw { color: var(--green); }
    .watch-row--today .sch-row__cl-tw-label { color: rgba(255,255,255,.35); }
    .watch-row--today .sp-race-row__loc { color: rgba(255,255,255,.4); }
    .watch-row--today .sch-row__ev-link { color: rgba(255,255,255,.7); }
    .watch-row--today .sch-row__ev-type { color: rgba(255,255,255,.35); }
    .watch-row--today .sch-row__series .series-chip--stack { border-color: rgba(255,255,255,.15); }
    .watch-row--today .rs-card__dow,
    .watch-row--today .rs-card__month { color: rgba(255,255,255,.5); }
    .watch-row--today .rs-card__day { color: #fff; }
    .watch-row--today .rs-card__year { color: rgba(255,255,255,.35); }
    .watch-row--today .watch-row__stream-row { background: rgba(255,255,255,.08); }
}

/* ── Today's races — blue featured box ─────────────────────────
   Races happening today get a navy-blue background tint with a
   left accent border so they visually pop from the rest of the
   upcoming list. Override CSS variables so inline styles using
   var(--content-text-muted) etc read light on dark bg. */
.watch-row--today {
    background: #f0ece4;
    border-left: 4px solid #da0000;
    border-bottom: 1px solid #d4cfc6;
}
.watch-row--today:hover {
    background: #e8e3da;
}

/* ── Nav dropdowns ── */
.main-nav__dropdown { position: relative; }
.main-nav__dropdown > .main-nav__link,
.main-nav__dropdown > button.main-nav__link { display: flex; align-items: center; }
.main-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 170px;
    background: var(--navy-dark);
    border: 1px solid var(--hdr-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    z-index: 200;
    padding: 4px 0;
}
.main-nav__dropdown.is-open .main-nav__dropdown-menu { display: block; }
.main-nav__dropdown.is-open svg { transform: rotate(180deg); }
.main-nav__dropdown-item {
    display: block;
    padding: 9px 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.6);
    transition: .15s;
}
.main-nav__dropdown-item:hover { color: #fff; background: rgba(255,255,255,.05); }

/* ── Mobile nav section labels + sub-items ── */
.mobile-nav__label {
    display: block;
    padding: 6px 20px 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;
}
.mobile-nav__link--sub { padding-left: 34px; }/* 14-shared-profile.css — Series + Event shared profile header + late additions (filter bar, etc.)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* =====================================================================
   SHARED PROFILE HEADER (Series, Events)
   ===================================================================== */
.pf-header {
    background: linear-gradient(135deg, var(--navy-dark) 0%, #0d1a3a 50%, var(--navy-dark) 100%);
    padding: 32px 16px;
    border-bottom: 3px solid var(--red);
}
.pf-header__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.pf-header__back {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}
.pf-header__back:hover { color: #fff; }
.pf-header__title {
    font-family: var(--font-head);
    font-size: 28px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}
.pf-header__subtitle {
    font-size: 14px;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
}
.pf-header__parent {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin-top: 4px;
}
.pf-header__parent a { color: var(--red); font-weight: 700; }
.pf-header__parent a:hover { text-decoration: underline; }
.pf-header__loc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-top: 6px;
}
.pf-header__loc a { color: rgba(255,255,255,.8); font-weight: 700; }
.pf-header__loc a:hover { color: var(--red); }
.pf-header__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
}
.pf-header__stat { text-align: center; }
.pf-header__stat-val {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.pf-header__stat-val--green { color: var(--green); }
.pf-header__stat-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
    margin-top: 4px;
}
.pf-header__stat-sm {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.pf-header__stat-label-sm {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.35);
    margin-bottom: 2px;
}
@media (max-width: 700px) {
    .pf-header { padding: 24px 16px; }
    .pf-header__title { font-size: 22px; }
    .pf-header__stat-val { font-size: 18px; }
    .pf-header__stats { gap: 14px; }
}

/* ── Series tab bar (dp-tabs__btn) ──────────────────────────── */
.dp-tabs__btn {
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s;
}
.dp-tabs__btn:hover { color: var(--content-text); }
.dp-tabs__btn--active {
    color: var(--red);
    border-bottom-color: var(--red);
}

/* ── Tab panel active state ─────────────────────────────────── */
.tp-panel--active { display: block; }

/* ── Series profile tab (hidden by default) ─────────────────── */
.ser-tab { padding: 16px; }

/* ── Driver column for event tables ─────────────────────────── */
.rd-td--driver { padding: 6px 8px; }

/* ── Follow button spacing inside event header ──────────────── */
.pf-header__inner > .follow-btn {
    margin-top: 16px;
}
.rd-td--driver a { text-decoration: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Track redesign — Schedule tab + 50/50 overview
   ──────────────────────────────────────────────────────────────────────── */

/* 50/50 overview grid modifier. The base .tp-overview-grid stays at 2fr/1fr
   (used elsewhere if anything still references it); the redesigned track
   page opts in via this modifier. Stacks at 768px. */
.tp-overview-grid--5050 {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
    .tp-overview-grid--5050 {
        grid-template-columns: 1fr;
    }
    /* On mobile we want a single ordered stream of cards rather than
       LEFT-then-RIGHT. display: contents lets the column wrappers act
       as if they weren't there so all pcards become direct children of
       the grid, then we use `order` to sequence them.

       Mobile order (per design):
         1. Recent Races
         2. Upcoming Races
         3. Most Active Drivers
         4. Closest Tracks
         5. Related Tracks
       Default flow source order (the desktop visual order) is:
         Recent → Most Active → Upcoming → Closest → Related
       so `order` only needs to swap Most Active and Upcoming. */
    .tp-overview-col { display: contents; }
    .tp-pcard--recent      { order: 1; }
    .tp-pcard--upcoming    { order: 2; }
    .tp-pcard--most-active { order: 3; }
    .tp-pcard--closest     { order: 4; }
    .tp-pcard--related     { order: 5; }
}

/* Schedule pill toggle. Pair of buttons that sit flush against each other
   so they read as a single segmented control. Lives directly above the
   tier filter on the Schedule tab. */
.tp-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-muted);
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.tp-pill:first-of-type { border-right: none; }
.tp-pill:hover { color: var(--red); }
.tp-pill--active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.tp-pill--active:hover { color: #fff; }

/* Class chip — used in Schedule tab + Recent/Upcoming Races to label each
   class that ran (or will run) on a given race-day. Inline pills with the
   class name, optionally with extra trailing context (winner name in
   completed view, purse in upcoming view). */
.tp-class-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--content-text);
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* ── Profile card (matches series-page convention) ────────────────
   Cards on the track overview: Recent Races, Upcoming Races, Most
   Active Drivers, Closest Tracks, Related Tracks. Bordered container
   with a surface header bar and uppercase Aldrich title. The pattern
   was already in use ad-hoc on series-profile.php; consolidating here
   so track + series stay visually coherent. */
.tp-pcard {
    border: 1px solid var(--content-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--content-bg);
    margin-bottom: 16px;
}
.tp-pcard__head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.tp-pcard__title {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
    color: var(--content-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tp-pcard__more {
    font-size: 10px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.tp-pcard__more:hover { text-decoration: underline; }
.tp-pcard__more i { width: 12px; height: 12px; }

/* Bolden the stacked-calendar date display. The user wants this on
   the track overview rows specifically — applies to .dp-activity rows
   nested inside a .tp-pcard so it doesn't affect other places that
   use .dp-activity (like driver-profile activity log). */
.tp-pcard .dp-activity__date-dow,
.tp-pcard .dp-activity__date-month,
.tp-pcard .dp-activity__date-day,
.tp-pcard .dp-activity__date-year {
    font-weight: 700;
}

/* ── Track tile (Closest / Related Tracks rows) ───────────────────
   Uses the same outer .tp-pcard chrome but rows look like the closest-
   tracks rows in series-profile: simple flex with name + sub-info on
   left, distance/shared count on right. */
.tp-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--content-border);
    text-decoration: none;
    color: var(--content-text);
    transition: background .12s;
}
.tp-tile:last-child { border-bottom: none; }
.tp-tile:hover { background: var(--content-surface); }
.tp-tile--inactive { opacity: 0.55; }
.tp-tile__body { flex: 1; min-width: 0; }
.tp-tile__name {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--content-text);
    text-transform: uppercase;
}
.tp-tile__sub {
    font-size: 11px;
    font-family: var(--font-loc);
    font-stretch: 200%;
    letter-spacing: 0.03em;
    color: var(--content-text-dim);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    line-height: 1.2;
}
.tp-tile__sub .ts-flag {
    height: 1em;
}
/* Inline icon used in tp-tile__sub (map-pin, ruler) sized to match
   the location text. Lucide creates SVGs at the dimensions specified
   in CSS so explicit sizing on the icon keeps it visually balanced
   with the OC Highway font's glyph height. */
.tp-tile__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--content-text-dim);
}
.tp-tile__icon i,
.tp-tile__sub i { width: 12px; height: 12px; }
.tp-tile__sub-sep {
    color: var(--content-border);
    font-weight: 400;
    margin: 0 1px;
}
.tp-tile__stat {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-head);
}
.tp-tile__stat strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--content-text);
    display: block;
    line-height: 1;
}
.tp-tile__stat small {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-dim);
}
.tp-tile__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 2px;
    vertical-align: 1px;
}
.tp-tile__badge--active {
    color: #d4a017;
    background: rgba(0,210,106,.1);
    border: 1px solid rgba(0,210,106,.3);
}
.tp-tile__badge--inactive {
    color: var(--content-text-dim);
    background: var(--content-surface);
    border: 1px solid var(--content-border);
}

/* Series/event association rows — small text strip below race-day
   activity item showing what series/event the night was part of.
   Series names render in brand red; event names render in navy. Both
   in Aldrich uppercase. The label words ("Series:" / "Event:") are
   not rendered — the color and font itself act as the label.
   One name per line; no separators. Series listed first, then events. */
.tp-pcard .dp-activity__assoc {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tp-pcard .dp-activity__assoc-name {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
}
.tp-pcard .dp-activity__assoc-name--series {
    color: var(--red);
}
.tp-pcard .dp-activity__assoc-name--event {
    color: var(--navy);
}

/* Prelim/Final tag — small pill appended to event names so users can
   identify which night of a multi-night event they're seeing. Matches
   the admin convention: yellow/amber for prelims (build-up nights),
   green for finals (the main event). */
.tp-pcard .dp-activity__assoc-tag {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: 2px;
    vertical-align: 1px;
    line-height: 1.3;
}
.tp-pcard .dp-activity__assoc-tag--prelim {
    color: var(--yellow);
    background: rgba(184, 134, 11, 0.12);
    border: 1px solid rgba(184, 134, 11, 0.35);
}
.tp-pcard .dp-activity__assoc-tag--final {
    color: var(--green);
    background: rgba(10, 138, 62, 0.12);
    border: 1px solid rgba(10, 138, 62, 0.35);
}

/* Per-class winner row — used in multi-class race-days when we want
   to list the winner of EACH class (not just summarize as "3 classes").
   Stacked under the race-day "N classes" label.

   Each row:  [Class chip] #Car DriverName [— $Earnings]

   Driver name + earnings styling is intentionally identical to the
   single-class .tp-winner pattern so the two contexts read the same. */
.tp-pcard .tp-class-winner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}
.tp-pcard .tp-class-winner-row__class {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--content-text-muted);
    font-size: 10px;
    background: var(--content-surface);
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid var(--content-border);
    line-height: 1.2;
}
.tp-pcard .tp-class-winner-row__car {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--content-text);
    font-weight: 700;
    font-family: var(--font-head);
    font-size: 11px;
    min-width: 26px;
    height: 18px;
    padding: 0 4px;
    background: rgba(218, 0, 0, 0.08);
    border: 1px solid rgba(218, 0, 0, 0.2);
    border-radius: 3px;
}
.tp-pcard .tp-class-winner-row__driver {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--content-text);
}
.tp-pcard .tp-class-winner-row__earn {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .03em;
}

/* Per-class to-win row — same idea for upcoming races. */
.tp-pcard .tp-class-towin-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 3px;
    line-height: 1.4;
}
.tp-pcard .tp-class-towin-row__class {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--content-text-muted);
    font-size: 10px;
    background: var(--content-surface);
    padding: 1px 6px;
    border-radius: 2px;
    border: 1px solid var(--content-border);
}
.tp-pcard .tp-class-towin-row__amount {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--green);
    font-size: 13px;
}
.tp-pcard .tp-class-towin-row__label {
    font-size: 10px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    font-family: var(--font-head);
}

/* "To win" prominence — single-class upcoming races. Aldrich green,
   slightly bigger than body text so it reads as the headline number. */
.tp-pcard .tp-towin {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 3px;
}
.tp-pcard .tp-towin__label {
    font-size: 10px;
    color: var(--content-text-dim);
    margin-left: 4px;
    letter-spacing: .06em;
}

/* Closest / Related Tracks row — small inline track logo.
   White track-logo crops happen at content build; rendered against
   the white card surface they don't need an extra panel/border. */
.tp-tile__logo {
    flex-shrink: 0;
    width: 44px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-tile__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Stat cards block at top of overview — match series-page convention.
   Small bordered surface boxes in a 3-up grid. The track basics row
   ("Races / Drivers / Winners") was using a different inline-styled
   block; this brings it in line. */
.tp-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.tp-overview-stats__card {
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.tp-overview-stats__val {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--content-text);
    line-height: 1;
}
.tp-overview-stats__val--yellow { color: var(--yellow); }
.tp-overview-stats__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text-dim);
    margin-top: 4px;
}

/* Disclaimer rows in tp-pcard__head — small italic notes explaining
   things like what "Active" / "Compatibility" mean. Multiple disclaimers
   stack with tight spacing. Sits below the title row in the surface
   header bar. */
.tp-pcard__disclaimer {
    font-size: 10px;
    color: var(--content-text-dim);
    font-style: italic;
    line-height: 1.3;
    flex-basis: 100%;
}
.tp-pcard__disclaimer + .tp-pcard__disclaimer {
    margin-top: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Track Stats tab — driver leaderboard with Standard/Advanced modes
   ────────────────────────────────────────────────────────────────── */

/* ── Disclaimers (yellow Points + blue Earnings) ─────────────────── */
.ts-disclaimers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 16px 0;
}
.ts-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
}
.ts-disclaimer__icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.ts-disclaimer__icon i { width: 14px; height: 14px; }

/* Yellow — points calculation methodology */
.ts-disclaimer--points {
    color: var(--yellow);
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.25);
}
/* Blue — earnings backfill status. Uses navy since DLM doesn't have a
   dedicated info-blue token; navy with low alpha reads as informational
   without competing with the brand red. */
.ts-disclaimer--earnings {
    color: var(--navy);
    background: rgba(0, 15, 88, 0.06);
    border: 1px solid rgba(0, 15, 88, 0.18);
}

/* ── Empty state ─────────────────────────────────────────────────── */
.ts-empty {
    text-align: center;
    color: var(--content-text-dim);
    font-size: 12px;
    padding: 32px 16px;
    font-style: italic;
}
/* Specialized: when Qualified Only is the cause of zero rows.
   Drops the italic styling and adds a clear title + actionable subtext
   so the user can see both the cause (threshold not met) and the
   remedy (turn off the toggle) at a glance. */
.ts-empty--qualified {
    padding: 36px 24px;
    font-style: normal;
}
.ts-empty__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text);
    margin-bottom: 6px;
}
.ts-empty__sub {
    font-size: 12px;
    color: var(--content-text-muted);
    line-height: 1.5;
    max-width: 460px;
    margin: 0 auto;
}
.ts-empty__sub strong {
    color: var(--red);
    font-weight: 700;
}
.ts-empty-cell {
    color: var(--content-text-dim);
    font-style: italic;
}

/* ── Table chrome ────────────────────────────────────────────────── */
/* ── Table chrome ────────────────────────────────────────────────── */
.ts-tablewrap {
    /* IMPORTANT: do NOT set overflow-x: auto at desktop width.
       overflow-x:auto creates a scroll container, which becomes the
       "nearest scrolling ancestor" for sticky elements inside — so
       position:sticky on <thead> sticks within the wrapper's tiny
       scroll region rather than the page viewport, and the header
       falls into the middle of the table as the page scrolls past it.
       At desktop width the table fits, so we don't need a scroll
       wrapper. The header sticks to the page as intended.

       At narrow viewports (≤720px wide, where min-width: 720px on the
       table creates real overflow), we DO need horizontal scroll —
       but accept that sticky thead won't pin in that case. Fine
       trade-off: phones don't benefit from sticky headers as much
       (the screen is short, the user is closer to the top anyway). */
    margin: 12px 16px 0;
    border: 1px solid var(--content-border);
    border-radius: 6px;
}
@media (max-width: 720px) {
    .ts-tablewrap {
        /* DON'T set overflow-x: auto here — same sticky-trap reason as
           desktop. The table has min-width: 720px so on narrower
           viewports it overflows the wrapper. We let it overflow the
           page instead, which triggers page-level horizontal scroll
           (body has no overflow-x:hidden anywhere). The user can swipe
           horizontally to see hidden columns AND the sticky thead
           keeps working. Side effect: the whole row scrolls together
           with the body — that's fine, it matches normal page
           behavior on mobile when content is wider than the screen. */
        overflow: visible;
    }
}
.ts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    /* Fixed layout so stat columns each take an equal share of the
       remaining width after Pos/Car#/Driver. Without this, columns
       size to their header text (e.g. "Earnings" wider than "W") which
       leaves the table looking ragged.

       Pos / Car# / Driver get fixed widths via .ts-th--pos etc;
       remaining columns auto-distribute. We force a min-width on the
       wrapper so columns don't squeeze too tight on narrow viewports —
       that's what triggers the horizontal scroll in .ts-tablewrap. */
    table-layout: fixed;
    min-width: 720px;
}
/* Sticky table headers — stay visible while the leaderboard scrolls.
   The top offset must clear the site header + tabs + filter bar.
   --ts-filter-h is set by JS (initTrackStatsFilters) after each render
   so the stick point tracks the filter-bar's actual height (which
   changes when timeframe=custom shows date inputs, etc.).

   Implementation notes:
   - position:sticky lives on the <th> cells, not the <thead> or <tr>.
     border-collapse:collapse tables don't apply position to <thead>
     or <tr> reliably — only cells. So every <th> sticks individually.
   - z-index above the row hover background, below the filter bar (50).
   - background MUST be opaque so tbody rows passing under are hidden;
     a transparent header lets rows bleed through visually.
   - box-shadow under the row creates a subtle separator so the user
     sees the header is floating above the body. */
.ts-table thead .ts-th {
    position: sticky;
    /* Pins below the sticky strip (nav + tabs + optional mini).
       --tp-strip-h is set in :root and overridden by body.tp-mini-active
       so the table header tracks the strip height automatically — when
       mini becomes active, --tp-strip-h grows by --tp-mini-h and the
       header pin point shifts down to match. */
    top: calc(var(--sticky-top) + var(--tp-strip-h));
    z-index: 10;
    background: var(--content-surface);
    /* Border-collapse hides per-cell borders when sticky shifts the
       cell out of its row context — use box-shadow for the bottom
       separator so it survives the sticky transform. */
    box-shadow: 0 1px 0 var(--content-border);
}
.ts-table thead {
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
}
.ts-table thead .ts-th {
    padding: 8px 10px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--content-text-muted);
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.ts-table thead .ts-th:hover { color: var(--red); }
.ts-table thead .ts-th--active { color: var(--content-text); }
.ts-table thead .ts-th--active .ts-th__arrow {
    color: var(--red);
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    vertical-align: middle;
}
.ts-table thead .ts-th--active .ts-th__arrow svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}
.ts-table thead .ts-th--pos { width: 48px; }
.ts-table thead .ts-th--car { width: 64px; }
.ts-table thead .ts-th--driver { text-align: left; width: 220px; }

.ts-table tbody tr {
    border-bottom: 1px solid var(--content-border);
    transition: background .12s;
}
.ts-table tbody tr:last-child { border-bottom: none; }
.ts-table tbody tr:hover { background: var(--content-surface); }

.ts-td {
    padding: 6px 10px;
    text-align: center;
    vertical-align: middle;
    color: var(--content-text);
}

/* Position cell — plain numeric. No medal coloring. */
.ts-pos {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--content-text);
}

/* Car number cell — red-tinted pill matching race-results convention.
   Same visual treatment as .rd-car so a driver's car number reads
   the same on the race detail and the track stats leaderboard.
   tsCarNumber() emits .car-num-wrap inside, which handles the
   half-height letters/$ for numbers like "1T" or "$5". */
.ts-td--car { padding: 4px 8px; }
.ts-car {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    background: rgba(218, 0, 0, 0.08);
    border: 1px solid rgba(218, 0, 0, 0.2);
    border-radius: 3px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    color: var(--content-text);
    line-height: 1.2;
}

/* Driver cell — name on top, hometown stacked below in OC Highway. */
.ts-td--driver { text-align: left; padding: 6px 10px; }
.ts-driver {
    display: block;
    text-decoration: none;
    color: var(--content-text);
}
.ts-driver:hover .ts-driver__name { color: var(--red); }
.ts-driver__name {
    display: block;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.3;
}
.ts-driver__loc {
    /* OC Highway location string + country flag, stacked below the
       driver name. Flex with align-items:center vertically aligns the
       flag with the text — but OC Highway's stretched glyphs sit
       slightly low optically, so the flag uses a smaller height
       (0.85em) and centers via the flex container rather than
       baseline alignment. */
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 10px;
    color: var(--content-text-dim);
    letter-spacing: .03em;
}
.ts-driver__loc .ts-flag {
    height: 0.85em;
}

/* Stat cells — body font (NOT Aldrich) so the row reads as data, not
   another headline. tabular-nums keeps columns visually aligned even
   though character widths differ. The header row keeps Aldrich via
   .ts-th. Modifier classes layer in highlights:
     --win   yellow + bold (wins > 0, best finish = 1)
     --earn  green + Aldrich (money fields)
     --bold  bold but body font (Points column)
*/
.ts-cell {
    font-variant-numeric: tabular-nums;
    color: var(--content-text);
    font-size: 12px;
}
.ts-cell--bold { font-weight: 700; }
.ts-cell--win  { color: var(--yellow); font-weight: 700; }
.ts-cell--earn {
    color: var(--green);
    font-weight: 700;
    font-family: var(--font-head);
}

/* Percentile cell — Aldrich + colored. Red for below 50% (below
   average), green for 50%+ (top half of finishers). Visual cue so
   users see at a glance who's in the upper half of the field. */
.ts-pct {
    font-family: var(--font-head);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.ts-pct--low  { color: var(--red); }
.ts-pct--high { color: var(--green); }

/* Pager spacing inside the Stats tab — matches existing sl-pager rule. */
.ts-pager { margin: 16px 16px 0; }

/* ── Track filter bar — Stats tab specific extensions ───────────── */
/* The stats filter bar uses a two-row layout (vs the single-row
   .dp-filterbar__inner used elsewhere) because the timeframe row gets
   wide when "Year" or "Custom" is active. Splitting timeframe into
   its own row gives the year/date inputs room without forcing the
   tier + qualified + mode controls to wrap awkwardly. */
.dp-filterbar--ts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Slightly tighter padding than the stock dp-filterbar — the
       two-row layout uses vertical space, so trimming horizontal
       padding gives the inner content more breathing room. */
    padding: 10px 14px;
    /* The Stats tab's filter bar is NOT sticky — only the table
       header pins as the user scrolls. The base .dp-filterbar rule
       sets position:sticky for other tabs (driver page, etc.); we
       override here so the filter bar scrolls naturally with the
       page on the Stats tab. */
    position: static;
}
.dp-filterbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}
/* The controls row holds tier (left) + right cluster. Right cluster
   uses margin-left:auto in .dp-filter--right (existing rule) to anchor
   to the right edge when there's room. */
.dp-filterbar__row--controls { gap: 10px 14px; }

/* Right-side container holding Qualified Only + Standard/Advanced */
.dp-filter--right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Qualified Only toggle — relabeled "Qualified" with the threshold
   shown as a small parenthetical on the second line so the label
   stays compact on narrow viewports. */
.dp-filter__qual {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--content-text-muted);
    cursor: pointer;
    user-select: none;
}
.dp-filter__qual--locked {
    cursor: not-allowed;
    opacity: 0.5;
}
.dp-filter__qual-min {
    color: var(--content-text-dim);
    font-size: 10px;
    margin-left: 4px;
    font-weight: 400;
}

/* Mobile: stack the right cluster controls vertically and let them
   span full width below the tier row. Avoids a too-tight horizontal
   squeeze on phone-sized viewports. */
@media (max-width: 700px) {
    .dp-filterbar--ts { padding: 10px 12px; }
    .dp-filter--right {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }
    .dp-filter__qual-min { display: none; }
}

/* ── Toggle switch — used for Qualified Only and reusable elsewhere ───
   Pattern: hide the native checkbox, render a styled track with a thumb
   that slides via :checked + sibling selectors. Track uses surface
   border when off, brand red when on. */
.dp-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dp-switch__input {
    /* visually hidden but still in the tab order + receiving clicks
       through the surrounding label */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.dp-switch__track {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    background: var(--content-border);
    border-radius: 999px;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.dp-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.dp-switch__input:checked + .dp-switch__track {
    background: var(--red);
}
.dp-switch__input:checked + .dp-switch__track .dp-switch__thumb {
    transform: translateX(12px);
}
.dp-switch__input:disabled + .dp-switch__track {
    opacity: 0.6;
}
.dp-switch__input:focus-visible + .dp-switch__track {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}
.dp-switch__label {
    font-size: 11px;
    color: var(--content-text-muted);
}

/* Standard/Advanced segmented control */
.dp-filter__mode {
    display: inline-flex;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    overflow: hidden;
}
.dp-filter__modebtn {
    padding: 5px 12px;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: transparent;
    color: var(--content-text-muted);
    border: none;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.dp-filter__modebtn:hover { color: var(--content-text); }
.dp-filter__modebtn.is-active {
    background: var(--red);
    color: #fff;
}

/* Tier filter row inside the filter bar */
.dp-filter--tier-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dp-filter__tierbtns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Single-tier label variant */
.dp-filter--tier-static {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dp-filter__static-val {
    font-family: var(--font-head);
    font-size: 12px;
    color: var(--content-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Mobile rules for the stats filter bar live earlier in this section
   under the .dp-filterbar--ts block (justify-content, qual-min hide,
   etc.). No additional mobile overrides needed here. *//* 15-home.css — Home page (hero, tiles, leaders, upcoming)
   Auto-extracted from style.css. Edit this file directly;
   the build script concatenates parts/*.css → style.css
   for production deploy. */

/* ============================================================== */
/* ============== HOME PAGE — section components ================ */
/* ============================================================== */

/* ── News hero (featured story, top of home) ──────────────────────
   Tall image with gradient overlay + body text overlaid at the bottom.
   Replaces the previous .news-featured layout (image + body stacked
   below) which felt cramped at the top of the page. */
.section--news-hero { padding-top: 12px; }

/* "All News" footer button — sits below the news grid as the third
   row of the news block. Reads like a "see more" affordance. The
   chevron icon sits right of the text and shifts on hover. */
.home-news-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 16px 20px;
    padding: 14px;
    border: 1px solid var(--content-border);
    border-top: none;  /* shares top edge with the news grid below */
    background: var(--content-bg);
    color: var(--red);
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.home-news-more:hover {
    background: var(--red);
    color: #fff;
}
.home-news-more svg.lucide,
.home-news-more i[data-lucide] {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}
.home-news-more:hover svg.lucide,
.home-news-more:hover i[data-lucide] {
    transform: translateX(3px);
}
.home-news-hero {
    position: relative;
    display: block;
    margin: 0 16px 0;
    overflow: hidden;
    border: 1px solid var(--content-border);
    color: #fff;
    text-decoration: none;
    transition: border-color .15s;
}
.home-news-hero:hover { border-color: var(--red); }
.home-news-hero__img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center 30%;
    background: var(--content-surface);
}
.home-news-hero__img--placeholder {
    background: linear-gradient(135deg, #0a0e1a 0%, #0a1545 50%, #0a0e1a 100%);
}
.home-news-hero__overlay {
    display: none;
}
.home-news-hero__body {
    position: static;
    padding: 14px 16px;
    background: #0a0e1a;
    border-top: 2px solid var(--red);
}
.home-news-hero__cat {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--red);
    margin-bottom: 6px;
    border: 1px solid rgba(218,0,0,.4);
    padding: 2px 7px;
}
.home-news-hero__title {
    font-family: var(--font-head);
    font-size: 20px;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 8px;
    -webkit-text-stroke: 0.02em currentColor;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-hero__excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,.7);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-hero__time {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: .06em;
}
@media (min-width: 768px) {
    .home-news-hero { min-height: 420px; }
    .home-news-hero__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .home-news-hero__overlay {
        display: block;
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 50%, transparent 100%);
        pointer-events: none;
    }
    .home-news-hero__body {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        padding: 24px;
        background: none;
        border-top: none;
    }
    .home-news-hero__title { font-size: 34px; }
    .home-news-hero__excerpt { font-size: 14px; color: rgba(255,255,255,.85); }
}

/* ── News list below the hero ──────────────────────────────────── */
.home-news-grid {
    display: flex;
    flex-direction: column;
    margin: 0 16px 4px;
    border: 1px solid var(--content-border);
    border-top: none;
}
@media (min-width: 768px) {
    .home-news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-top: none;
    }
}
@media (min-width: 1000px) {
    .home-news-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.home-news-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--content-text);
    text-decoration: none;
    border-bottom: 1px solid var(--content-border);
    background: var(--content-bg);
    padding: 10px 12px;
    transition: background .12s;
}
.home-news-tile:last-child { border-bottom: none; }
.home-news-tile:hover { background: var(--content-surface); }

/* Desktop: flip to vertical card */
@media (min-width: 768px) {
    .home-news-tile {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-bottom: none;
        border-right: 1px solid var(--content-border);
    }
    .home-news-tile:last-child { border-right: none; }
}

.home-news-tile__img {
    width: 80px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center 30%;
    background: var(--content-surface);
    display: block;
}
@media (min-width: 768px) {
    .home-news-tile__img {
        width: 100%;
        height: 140px;
        flex-shrink: unset;
    }
}
.home-news-tile__img--placeholder {
    background: linear-gradient(135deg, #1a1f33 0%, #0a1545 50%, #1a1f33 100%);
}
.home-news-tile__body { flex: 1; min-width: 0; }
@media (min-width: 768px) {
    .home-news-tile__body { padding: 12px 14px 14px; }
}
.home-news-tile__cat {
    display: block;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--red);
    margin-bottom: 3px;
}
    margin-bottom: 4px;
}
.home-news-tile__title {
    font-family: var(--font-head);
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--content-text);
    -webkit-text-stroke: 0.02em currentColor;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}
.home-news-tile__time {
    font-size: 10px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Section title accent (for "ON THIS DAY <date>") ──────────── */
.section__title-accent {
    color: var(--red);
    font-size: 0.78em;
    margin-left: 8px;
    letter-spacing: .04em;
}

/* ── Tile grid (Box Scores + On This Day) ─────────────────────── */
.home-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1px;
    background: var(--content-border);
    border: 1px solid var(--content-border);
    margin: 0 16px;
}
.home-tile {
    background: var(--content-bg);
    padding: 14px 16px;
    color: var(--content-text);
    text-decoration: none;
    transition: background .12s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.home-tile:hover { background: var(--content-surface); }
.home-tile__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.home-tile__track {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    color: var(--content-text);
    line-height: 1.2;
    -webkit-text-stroke: 0.015em currentColor;
}
.home-tile__date {
    font-size: 10px;
    color: var(--content-text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.home-tile__year {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--red);
    line-height: 1;
}
.home-tile__tier {
    font-size: 10px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.home-tile__loc {
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .03em;
}
.home-tile__pin {
    width: 10px;
    height: 10px;
    opacity: .5;
    flex-shrink: 0;
}
.home-tile__sep { color: var(--content-text-dim); margin: 0 2px; }
/* Winner row sits below loc + chips. Trophy + name are wrapped in a
   golden pill (.home-tile__winner-pill) so the winner reads like a
   badge. Earnings ($x,xxx) sits OUTSIDE the pill, right-aligned via
   margin-left:auto, in green. */
.home-tile__winner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    min-width: 0;
}
.home-tile__winner-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    background: var(--yellow);
    border-radius: 999px;
    color: #fff;
    line-height: 1;
    min-width: 0;
    /* Slight inner shadow gives the pill some dimensionality so it
       doesn't read as a flat color block. */
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.home-tile__trophy {
    width: 12px;
    height: 12px;
    /* Trophy stroke uses currentColor (white inside the pill). */
    color: #fff;
    flex-shrink: 0;
}
.home-tile__winner-name {
    font-family: var(--font-head);
    font-size: 11px;
    /* Aldrich is single-weight — we previously added text-stroke to
       fake bold, but on the dense gold pill background that read as
       "puffy" / overweight. Drop the stroke; the white-on-gold
       contrast already gives the text plenty of presence. */
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.home-tile__winner-name--otd { font-size: 10px; }
.home-tile__earn {
    font-size: 11px;
    color: var(--green);
    font-weight: 700;
    flex-shrink: 0;
    margin-left: auto;
}
.home-tile__class {
    font-size: 10px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* Series / Event chips on Box Score tiles — two small badges that
   render below the location row, signaling the sanctioning body and
   any major event the race was part of. */
.home-tile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.home-tile__chip {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.home-tile__chip--series {
    background: rgba(218, 0, 0, 0.08);
    color: var(--red);
    border: 1px solid rgba(218, 0, 0, 0.25);
}
.home-tile__chip--event {
    background: rgba(10, 138, 62, 0.08);
    color: var(--green);
    border: 1px solid rgba(10, 138, 62, 0.25);
}

/* ── Upcoming list (one row per event) ───────────────────────── */
.home-upcoming {
    margin: 0 16px;
    border: 1px solid var(--content-border);
    background: var(--content-bg);
}
.home-upcoming__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--content-border);
    text-decoration: none;
    color: var(--content-text);
    transition: background .12s;
}
.home-upcoming__row:last-child { border-bottom: none; }
.home-upcoming__row:hover { background: var(--content-surface); }
.home-upcoming__date {
    text-align: center;
    min-width: 48px;
    flex-shrink: 0;
}
.home-upcoming__dow {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--red);
    letter-spacing: .06em;
}
.home-upcoming__day {
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1;
    color: var(--content-text);
    margin: 1px 0;
}
.home-upcoming__mon {
    font-size: 10px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.home-upcoming__body {
    flex: 1;
    min-width: 0;
}
.home-upcoming__track {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    -webkit-text-stroke: 0.015em currentColor;
    line-height: 1.2;
    margin-bottom: 2px;
}
.home-upcoming__loc {
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 11px;
    color: var(--content-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .03em;
}
.home-upcoming__pin { width: 10px; height: 10px; opacity: .5; flex-shrink: 0; }
/* Series + event chips on the upcoming row — same pattern as
   .home-tile__chips but flow inline so they sit naturally under the
   location text. */
.home-upcoming__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.home-upcoming__chip {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 2px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.home-upcoming__chip--series {
    background: rgba(218, 0, 0, 0.08);
    color: var(--red);
    border: 1px solid rgba(218, 0, 0, 0.25);
}
.home-upcoming__chip--event {
    background: rgba(10, 138, 62, 0.08);
    color: var(--green);
    border: 1px solid rgba(10, 138, 62, 0.25);
}

/* Right-side meta cluster — providers (logos) sit to the LEFT of
   the to-win amount on a single horizontal row, matching the
   schedule page's layout. The provider logos cap the column on the
   left, the to-win pill sits on the right. */
.home-upcoming__meta {
    display: flex;
    flex-direction: row-reverse;  /* to-win on the right, providers left */
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.home-upcoming__towin {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
    flex-shrink: 0;
}
.home-upcoming__towin-amt {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .02em;
    -webkit-text-stroke: 0.02em currentColor;
}
.home-upcoming__towin-lbl {
    font-size: 9px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}
/* Providers cluster — laid out as a row so logos sit beside the
   to-win pill. Multi-source days produce 2+ logos, which wrap to a
   second line if needed. */
.home-upcoming__providers {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 140px;
}
.home-upcoming__provider-logo {
    height: 22px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    /* Subtle pill background so the logo reads as part of the meta
       cluster rather than floating against the row background. */
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 3px;
    padding: 2px 5px;
}
.home-upcoming__provider-name {
    font-size: 10px;
    color: var(--content-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    background: var(--content-surface);
    border: 1px solid var(--content-border);
    border-radius: 3px;
    padding: 2px 6px;
}

/* Mobile: meta cluster wraps below body so to-win + providers don't
   compress into a tiny right-side column. Keep them on one row even
   on mobile — they read as a single "scheduling" line. */
@media (max-width: 600px) {
    .home-upcoming__row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .home-upcoming__meta {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 4px;
        padding-left: 62px;  /* clear the date column on the left */
    }
    .home-upcoming__providers { justify-content: flex-start; }
}

/* ── Streaming CTA ──────────────────────────────────────────── */
.home-stream-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 16px;
    padding: 18px 18px;
    border: 1px solid var(--content-border);
    background: var(--content-bg);
    color: var(--content-text);
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.home-stream-cta:hover {
    background: var(--content-surface);
    border-color: var(--red);
}
.home-stream-cta__icon {
    width: 28px; height: 28px;
    color: var(--red);
    opacity: .8;
    flex-shrink: 0;
}
.home-stream-cta__body { flex: 1; min-width: 0; }
.home-stream-cta__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--content-text);
    -webkit-text-stroke: 0.015em currentColor;
    line-height: 1.2;
    margin-bottom: 2px;
}
.home-stream-cta__sub {
    font-size: 11px;
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* Inline-flex + gap puts the chevron icon as a sibling on the same
       baseline as the text, instead of relying on baseline alignment
       which leaves the icon a few px low. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.home-stream-cta__sub i[data-lucide],
.home-stream-cta__sub svg.lucide {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.home-stream-cta:hover .home-stream-cta__sub i[data-lucide],
.home-stream-cta:hover .home-stream-cta__sub svg.lucide {
    transform: translateX(2px);
}

/* ── Top Ranked Drivers cards ───────────────────────────────── */
.home-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1px;
    background: var(--content-border);
    border: 1px solid var(--content-border);
    margin: 0 16px;
}
/* Lock to 2 columns at the small-tablet range so the cards don't go
   single-file too aggressively. */
@media (min-width: 480px) {
    .home-leaders { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
    .home-leaders { grid-template-columns: repeat(3, 1fr); }
}
/* Desktop: exactly 4 columns. With 8 cards from the API this fills
   two clean rows of four. */
@media (min-width: 1000px) {
    .home-leaders { grid-template-columns: repeat(4, 1fr); }
}
.home-leader {
    position: relative;
    display: block;
    padding: 16px 16px 16px 19px;
    background: linear-gradient(135deg, #0a0e1a 0%, #0a1545 50%, #0a0e1a 100%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: background .15s;
}
.home-leader:hover {
    background: linear-gradient(135deg, #11172e 0%, #0e1d5e 50%, #11172e 100%);
}
/* 3px red accent strip on the left edge of every card (was previously
   only the top-3 drivers; user asked for all to be red). */
.home-leader__accent {
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: var(--red);
}
.home-leader__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
/* All position numbers now red (was rgba(255,255,255,.08) for #2-6
   and red only for #1). User wants all six in red so the card
   reads as a unified "top driver" block at a glance. */
.home-leader__pos {
    font-family: var(--font-head);
    font-size: 28px;
    color: var(--red);
    line-height: 1;
    /* Stroke gives a slight bolder feel since Aldrich has no weight axis. */
    -webkit-text-stroke: 0.02em currentColor;
}
.home-leader__rating { text-align: right; }
.home-leader__rating-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.4);
}
.home-leader__rating-val {
    font-family: var(--font-head);
    font-size: 20px;
    color: var(--red);
    line-height: 1;
}
.home-leader__name {
    font-family: var(--font-head);
    font-size: 15px;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
    color: #fff;
    -webkit-text-stroke: 0.02em currentColor;
}
.home-leader__loc {
    font-family: var(--font-loc);
    font-stretch: 200%;
    font-size: 11px;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: .04em;
    min-width: 0;
}
.home-leader__loc .ts-flag {
    height: 0.85em;
    width: auto;
    flex-shrink: 0;
}
.home-leader__loc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* ── Compact PRO banner ─────────────────────────────────────────── */
.pro-banner-home {
    background: linear-gradient(135deg, #1a0000 0%, #2a0000 50%, #1a0000 100%);
    border-top: 2px solid var(--red);
    border-bottom: 2px solid var(--red);
    margin: 0 0 4px;
}
.pro-banner-home__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 10px 16px;
    flex-wrap: wrap;
}
.pro-banner-home__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.pro-banner-home__badge {
    flex-shrink: 0;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: var(--red);
    color: #fff;
    padding: 4px 10px;
    white-space: nowrap;
}
.pro-banner-home__text {
    font-family: var(--font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pro-banner-home__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.pro-banner-home__price {
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.pro-banner-home__price small {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    font-weight: 400;
}
.pro-banner-home__btn {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--red);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.pro-banner-home__btn:hover { background: #ff2222; }

/* ── Section headers — bold + accent bar ───────────────────────── */
.section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0;
    background: var(--navy-dark);
    border-left: 4px solid var(--red);
    margin: 0 16px 0;
}
.section__title {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    padding: 10px 14px;
    margin: 0;
}
.section__more {
    font-size: 10px;
    color: var(--red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.section__more:hover { color: #fff; }
/* =========================================================================
   AUTH & SETTINGS PAGES
   =========================================================================
   Used by: pages/login.php, pages/register.php, pages/settings.php
   Replaces inline styles + phantom CSS vars (--color-danger, --color-pro,
   --color-success, --color-primary, --color-text-dim) which were never
   defined. All colors here come from the real design tokens in
   00-base.css.
   ------------------------------------------------------------------------- */

/* ── Auth page wrapper (login + register) ─────────────────────────── */
.auth-page {
    max-width: 400px;
    margin: 0 auto;
    padding: 32px 16px;
}

.auth-page__title {
    font-family: var(--font-head);
    font-size: 22px;
    text-transform: uppercase;
    color: var(--content-text);
    text-align: center;
    margin-bottom: 24px;
}

.auth-page__link {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--content-text-muted);
}

.auth-page__link a {
    color: var(--red);
    font-weight: 700;
    text-decoration: none;
}

.auth-page__link a:hover {
    text-decoration: underline;
}

.auth-page__link--pro {
    margin-top: 8px;
}

.auth-page__link--pro a {
    color: var(--red);
    font-weight: 800;
}

.auth-form {
    margin: 0;
}

/* ── Alert messages ────────────────────────────────────────────────── */
.auth-alert {
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.4;
}

.auth-alert--error {
    border-color: var(--red);
    background: rgba(218, 0, 0, 0.05);
    color: var(--red);
}

.auth-alert--success {
    border-color: var(--green);
    background: rgba(10, 138, 62, 0.05);
    color: var(--green);
}

.auth-alert--pro {
    border-color: var(--red);
    background: rgba(218, 0, 0, 0.05);
    text-align: center;
    margin-top: 16px;
}

.auth-alert--pro p {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--content-text-muted);
}

/* ── Settings page: toggles ───────────────────────────────────────── */
.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin-bottom: 4px;
}

.settings-toggle:hover {
    background: var(--content-surface);
}

.settings-toggle__label {
    font-size: 14px;
    color: var(--content-text);
    cursor: pointer;
    flex: 1;
}

.settings-toggle__check {
    width: 20px;
    height: 20px;
    accent-color: var(--red);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Settings page: follow rows ───────────────────────────────────── */
.settings-follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    margin-bottom: 4px;
}

.settings-follow:hover {
    background: var(--content-surface);
}

.settings-follow__info {
    flex: 1;
    min-width: 0;
}

.settings-follow__type {
    font-size: 11px;
    color: var(--content-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.settings-follow__name {
    font-weight: 600;
    font-size: 14px;
    color: var(--content-text);
    margin-top: 2px;
}

.settings-follow__form {
    margin: 0;
    flex-shrink: 0;
}

.settings-follow__unfollow {
    color: var(--red);
}

.settings-follow__unfollow:hover {
    background: rgba(218, 0, 0, 0.08);
    border-color: var(--red);
    color: var(--red);
}

/* ── Page header icon (settings page) ─────────────────────────────── */
.page-header__icon {
    width: 24px;
    height: 24px;
    color: var(--red);
    vertical-align: middle;
    margin-right: 8px;
}

/* ── Settings forms (account, password, danger zone) ──────────────── */
.settings-form {
    margin: 0 0 16px;
}

.settings-form__hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--content-text-dim);
    line-height: 1.4;
}

.settings-form__hint--block {
    margin-top: 12px;
    font-size: 12px;
    color: var(--content-text-muted);
}

.settings-form__optional {
    color: var(--content-text-dim);
    font-weight: 400;
    text-transform: none;
    font-size: 11px;
}

.settings-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--content-text);
    user-select: none;
}

.settings-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--red);
    cursor: pointer;
    flex-shrink: 0;
}

.settings-account-meta {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--content-border);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--content-text-muted);
}

/* Email-verification banner (lives at the top of the Account section) */
.settings-verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-verify-banner__form {
    margin: 0;
    flex-shrink: 0;
}

/* Inline "Verified" pill on field labels */
.settings-badge {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid;
}

.settings-badge--ok {
    color: var(--green);
    background: rgba(10, 138, 62, 0.08);
    border-color: rgba(10, 138, 62, 0.3);
}

/* Danger zone — same red treatment as auth-alert--error but as a card */
.settings-danger {
    border: 1px solid var(--red);
    background: rgba(218, 0, 0, 0.03);
    padding: 16px;
}

.settings-danger__title {
    font-family: var(--font-head);
    font-size: 14px;
    text-transform: uppercase;
    color: var(--red);
    margin: 0 0 8px;
}

.settings-danger__text {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--content-text-muted);
    line-height: 1.5;
}

/* Danger button — opt-in style, not in 01-layout's btn cascade */
.btn--danger {
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
}

.btn--danger:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: #fff;
}

/* =========================================================================
   POLICY PAGES — Privacy & Terms
   ========================================================================= */

.policy-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.policy-page__hero {
    border-left: 4px solid var(--red);
    padding-left: 20px;
    margin-bottom: 40px;
}

.policy-page__title {
    font-family: var(--font-head);
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--content-text);
    margin: 0 0 6px 0;
    line-height: 1;
}

.policy-page__meta {
    font-size: 12px;
    color: var(--content-text-dim);
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.policy-section {
    margin-bottom: 12px;
    border: 1px solid var(--content-border);
    overflow: hidden;
}

.policy-section__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--content-surface);
    border-bottom: 1px solid var(--content-border);
}

.policy-section__num {
    font-family: var(--font-head);
    font-size: 11px;
    color: var(--red);
    font-weight: 700;
    letter-spacing: .06em;
    flex-shrink: 0;
    min-width: 24px;
}

.policy-section__title {
    font-family: var(--font-head);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--content-text);
    margin: 0;
}

.policy-section__body {
    padding: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--content-text);
    background: var(--content-bg);
}

.policy-section__body p { margin: 0 0 12px 0; }
.policy-section__body p:last-child { margin-bottom: 0; }

.policy-section__body strong { color: var(--content-text); font-weight: 700; }

.policy-section__body a { color: var(--red); text-decoration: none; }
.policy-section__body a:hover { text-decoration: underline; }

.policy-section__body code {
    font-size: 13px;
    background: var(--content-surface);
    padding: 1px 6px;
    border: 1px solid var(--content-border);
    font-family: monospace;
}

.policy-list {
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}

.policy-list li {
    padding: 6px 0 6px 20px;
    position: relative;
    border-bottom: 1px solid var(--content-border);
    font-size: 14px;
}

.policy-list li:last-child { border-bottom: none; }

.policy-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 700;
}

.policy-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.policy-nav__link {
    font-family: var(--font-head);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,.5);
    background: var(--navy-dark);
    border: 1px solid var(--hdr-border);
    padding: 6px 14px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}

.policy-nav__link:hover,
.policy-nav__link--active {
    color: #fff;
    border-color: var(--red);
}

@media (max-width: 600px) {
    .policy-page { padding: 24px 16px 40px; }
    .policy-page__title { font-size: 26px; }
    .policy-section__body { padding: 16px; }
}/* ================================================================
   SERIES PROFILE — sp-* classes
   ================================================================ */
.sp-header-top { display: flex; align-items: center; gap: 16px; }
.sp-logo { width: 80px; height: 50px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.sp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-header-info { flex: 1; min-width: 0; }
.sp-badges { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.sp-badge { padding: 3px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.sp-badge--active { background: rgba(0,210,106,.15); color: var(--green); border: 1px solid rgba(0,210,106,.3); }
.sp-badge--inactive { background: rgba(218,0,0,.15); color: var(--red); border: 1px solid rgba(218,0,0,.3); }
.sp-badge--region { color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
.sp-badge--abbr { color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); font-family: var(--font-head); }
.sp-name { font-family: var(--font-head); font-size: 26px; text-transform: uppercase; letter-spacing: .04em; -webkit-text-stroke: 0.5px rgba(255,255,255,.3); color: #fff; margin: 0; line-height: 1.2; }
.sp-parent { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.sp-parent a { color: rgba(255,255,255,.7); text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); }
.sp-parent a:hover { color: #fff; }
.sp-children { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.sp-children__label { font-size: 11px; color: rgba(255,255,255,.3); }
.sp-children__link { padding: 2px 10px; font-size: 11px; font-family: var(--font-head); color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-decoration: none; transition: all .12s; }
.sp-children__link:hover { color: #fff; border-color: var(--red); }
.sp-defending { margin-top: 16px; padding: 12px 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); display: inline-block; align-self: flex-end; }
.sp-defending__label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.sp-defending__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sp-defending__year { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--red); }
.sp-defending__name { font-family: var(--font-head); color: #fff; text-transform: uppercase; text-decoration: none; -webkit-text-stroke: 0.02em currentColor; }
.sp-defending__name:hover { color: var(--red); }
.sp-defending__class { font-size: 10px; color: rgba(255,255,255,.35); }

/* Tabs — navy dark, no scroll (series has ≤4 tabs, always fits) */
.sp-tabs { background: var(--navy-dark); border-bottom: 2px solid var(--red); overflow: hidden; }
.sp-tabs__inner { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sp-tabs__btn { flex-shrink: 0; padding: 12px 18px; font-family: var(--font-head); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--content-text-muted); text-decoration: none; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: color .12s, border-color .12s; white-space: nowrap; }
.sp-tabs__btn:hover { color: #fff; }
.sp-tabs__btn--active { color: #fff; border-bottom-color: var(--red); }

/* Tabs — series override: no scroll, max-width centered */
.sp-tabs--fixed { overflow: hidden; }
.sp-tabs--fixed .tp-tabs__inner { min-width: 0; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Content wrapper */
.sp-content { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }

/* Stats grid: 3-col desktop (align-items:start so cards don't stretch), 2-col mobile */
.sp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    align-items: start;
}
@media (max-width: 768px) {
    .sp-stats-grid { grid-template-columns: 1fr; }
}

/* Split layout for Recent + Upcoming */
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.sp-split--single { grid-template-columns: 1fr; }
@media (max-width: 768px) { .sp-split { grid-template-columns: 1fr; } }

/* Race rows */
.sp-race-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--content-border); transition: background .1s; }
.sp-race-row:hover { background: rgba(218,0,0,.02); }
.sp-race-row__body { flex: 1; min-width: 0; }
.sp-race-row__track { font-family: var(--font-head); font-size: 12px; color: var(--content-text); text-transform: uppercase; text-decoration: none; -webkit-text-stroke: 0.02em currentColor; display: block; }
.sp-race-row__track:hover { color: var(--red); }
.sp-race-row__loc { font-family: var(--font-loc); font-stretch: 200%; font-size: 10px; color: var(--content-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; line-height: 1; }
.sp-loc__group { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; line-height: 1; }
.sp-loc__icon { width: 10px; height: 10px; color: var(--navy); flex-shrink: 0; align-self: center; }
.sp-loc__text { white-space: nowrap; }
.sp-loc__sep { color: var(--content-text-dim); opacity: .4; margin: 0 1px; }
.sp-race-row__event { font-family: var(--font-head); font-size: 11px; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: 0.015em currentColor; margin-top: 2px; }
.sp-race-row__evtype { font-weight: 400; color: var(--content-text-muted); -webkit-text-stroke: 0; font-size: 10px; }
.sp-race-row__winner { text-align: right; flex-shrink: 0; }
.sp-race-row__driver { font-family: var(--font-head); font-size: 11px; color: var(--navy); text-transform: uppercase; text-decoration: none; -webkit-text-stroke: 0.02em currentColor; }
.sp-race-row__driver:hover { text-decoration: underline; }
.sp-race-row__earn { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--green); }
.sp-race-row__tw { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--green); flex-shrink: 0; }
.sp-race-row__na { color: var(--content-text-dim); }
.sp-race-row__chevron { width: 14px; height: 14px; color: var(--content-text-dim); flex-shrink: 0; align-self: center; }

/* Leaderboards grid */
.sp-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.sp-board__min { font-size: 10px; color: var(--content-text-dim); margin-left: auto; }
.sp-board__row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--content-border); transition: background .1s; }
.sp-board__row:hover { background: rgba(218,0,0,.02); }
.sp-board__pos { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-head); font-size: 11px; font-weight: 700; flex-shrink: 0; color: var(--content-text); background: rgba(218,0,0,.06); }
.sp-board__info { flex: 1; min-width: 0; }
.sp-board__name { font-family: var(--font-head); font-size: 13px; color: var(--navy); text-transform: uppercase; text-decoration: none; -webkit-text-stroke: 0.02em currentColor; }
.sp-board__name:hover { text-decoration: underline; }
/* Truncate only inside leaderboard info blocks where width is constrained */
.sp-board__info .sp-board__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-board__loc { font-size: 10px; color: var(--content-text-muted); display: flex; align-items: center; gap: 3px; line-height: 1; }
.sp-board__val { font-family: var(--font-head); font-size: 16px; font-weight: 700; flex-shrink: 0; -webkit-text-stroke: 0.02em currentColor; }
.sp-tier-heading { font-family: var(--font-head); font-size: 18px; text-transform: uppercase; margin: 24px 0 12px; -webkit-text-stroke: 0.02em currentColor; }

/* Champion rows */
.sp-champ-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--content-border); transition: background .12s; }
.sp-champ-row:hover { background: rgba(234,179,8,.04); }
.sp-champ-row__year { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--red); width: 52px; text-align: center; flex-shrink: 0; }
.sp-champ-row__info { flex: 1; min-width: 0; }
.sp-champ-row__driver { display: flex; align-items: center; gap: 4px; }
.sp-champ-row__meta { font-size: 11px; color: var(--content-text-muted); margin-top: 1px; display: flex; align-items: center; gap: 4px; line-height: 1; }

/* View toggle (Completed/Upcoming) */
.sp-view-toggle { display: flex; margin-bottom: 16px; }
.sp-view-toggle__btn { padding: 8px 16px; font-family: var(--font-head); font-size: 11px; text-transform: uppercase; text-decoration: none; color: var(--content-text-muted); transition: all .12s; }
.sp-view-toggle__btn--active { background: var(--red); color: #fff; font-weight: 700; }

/* Pagination */
.sp-pager { display: flex; justify-content: center; gap: 4px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.sp-pager__btn { padding: 6px 12px; border: 1px solid var(--content-border); font-size: 12px; color: var(--content-text-muted); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: all .12s; }
.sp-pager__btn:hover { border-color: var(--red); color: var(--red); }
.sp-pager__num { padding: 6px 12px; border: 1px solid var(--content-border); font-size: 12px; color: var(--content-text-muted); text-decoration: none; transition: all .12s; }
.sp-pager__num:hover { border-color: var(--red); color: var(--red); }
.sp-pager__num--active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.sp-pager__dots { padding: 6px; color: var(--content-text-dim); }

/* Empty state */
.sp-empty { text-align: center; color: var(--content-text-dim); padding: 40px 0; }

/* Mobile */
@media (max-width: 768px) {
    .sp-header-top { flex-direction: column; align-items: flex-start; gap: 10px; }
    .sp-logo { width: 60px; height: 36px; }
    .sp-name { font-size: 20px; }
    .sp-boards { grid-template-columns: 1fr; }
    .sp-tabs__btn { padding: 10px 14px; font-size: 11px; }
}