/* ===================================================================
   P3 SELF-HOSTED TYPEFACES  (CSP 'self' only — no Google Fonts CDN)
   -------------------------------------------------------------------
   • Geist (OFL, Vercel)        → UI / body  — clean modern grotesk, superb
                                   at small sizes & in dense tables.
   • Space Grotesk (OFL)        → display    — sporty geometric face for big
                                   headings, hero numbers, kickers.
   • JetBrains Mono (OFL)       → mono       — tabular figures for stats.
   Each is also aliased to the OLD family names (Inter / Outfit / Roboto Mono)
   so every hard-coded reference across the app auto-upgrades to the new look
   with zero markup changes. woff2 only; font-display:swap keeps text instant.
   =================================================================== */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/geist-800.woff2') format('woff2'); }

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/spacegrotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/spacegrotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }
/* 800/900 reuse 700 (the heaviest cut shipped) so font-black headings stay crisp */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jbmono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jbmono-700.woff2') format('woff2'); }

/* ---- Alias the OLD family names to the NEW faces (auto-upgrade everywhere) ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/geist-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/geist-800.woff2') format('woff2'); }

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/spacegrotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/spacegrotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/spacegrotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/spacegrotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/spacegrotesk-700.woff2') format('woff2'); }

@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jbmono-500.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/jbmono-700.woff2') format('woff2'); }

/* ===================================================================
   P3 CANONICAL BRAND PALETTE  (single source of truth)
   -------------------------------------------------------------------
   ONE accent everywhere: P3 navy (#0c447c, shared with hockey — see
   registry.SportPack.accent). Used for links, active nav, primary buttons,
   focus rings, kickers, chart chrome.
     accent  (light) navy-600 var(--accent-600) · hover navy-700 var(--accent-700)
     accent  (dark)  navy-400 var(--accent-400) · hover navy-300 var(--accent-300)
   Surfaces — light:  page slate-50 var(--slate-50) · card #FFFFFF · border slate-200 var(--slate-200)
              dark:   page #0B0F19         · card #111827  · border #1F2937
   Text — light: primary slate-900 var(--slate-900) · muted slate-400 var(--slate-400)
          dark:  primary #F9FAFB           · muted #6B7280
   SEMANTIC colours stay as-is (climb cats HC..4, success/green, danger/red,
   data-viz series) — never flatten those into the accent.
   =================================================================== */
/* ===================================================================
   P3 DESIGN TOKENS  — single source of truth for the whole portal
   -------------------------------------------------------------------
   Everything downstream (cards, buttons, tables, chrome) reads these.
   Mirror of the documented scale in design.py. Light values live in
   :root; dark overrides in .dark-mode (body) / html.dark (root).
   =================================================================== */
:root {
  /* ---- TYPE ------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;  /* sporty display */
  --font-body:    'Geist', 'Inter', system-ui, sans-serif;           /* clean UI grotesk */
  --font-mono:    'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Type scale (1.20 minor-third-ish, tuned for dense analytics UI) */
  --fs-2xs: 0.625rem;   /* 10px — micro labels, kickers */
  --fs-xs:  0.6875rem;  /* 11px */
  --fs-sm:  0.8125rem;  /* 13px — table body / dense text */
  --fs-base:0.9375rem;  /* 15px — body */
  --fs-md:  1.0625rem;  /* 17px */
  --fs-lg:  1.25rem;    /* 20px */
  --fs-xl:  1.5rem;     /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px — hero */
  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-normal:1.55;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.06em;
  --tracking-kicker:0.28em;

  /* ---- SPACING (4px base) --------------------------------------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* ---- RADII ----------------------------------------------------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;

  /* ---- ACCENT RAMP — P3 navy (the ONE brand accent, shared with hockey) -
     #0c447c anchors step 600 exactly (the requested brand hex); the rest of
     the ramp is generated around it at the same H/S (H210, ~S82%), lightness
     tapered from ~L97% (50) to ~L9% (950). Replaces the earlier indigo ramp
     — same roles, same step relationships, new hue. */
  --accent-50:  #F5F7FA;
  --accent-100: #E3EDF7;
  --accent-200: #C0D9F2;
  --accent-300: #8DBDEC;
  --accent-400: #4B99E7;
  --accent-500: #1773CF;
  --accent-600: #0C447C;   /* primary (light) — the requested brand hex */
  --accent-700: #093867;
  --accent-800: #062E55;
  --accent-900: #052442;
  --accent-950: #03172A;
  --accent-color: #0C447C;   /* P3 navy-600 — THE accent */
  --accent-hover: #093867;   /* navy-700 */
  --accent-soft:  rgba(12, 68, 124, 0.10);  /* tinted fills / hovers */
  --accent-ring:  rgba(12, 68, 124, 0.22);  /* focus ring */
  --accent-gradient: linear-gradient(135deg, #0C447C 0%, #1773CF 100%);

  /* ---- SEMANTIC -------------------------------------------------- */
  /* Emerald's ONLY roles: semantic success/positive-delta, the hero CTA
     gradient (--cta-*), and data series A (--data-a). It is NOT the brand
     accent (that's indigo) — never use it for links/nav/focus, and never as
     TEXT on light surfaces (fails contrast). Decision 2026-07-27. */
  --success: #10B981; --success-soft: rgba(16,185,129,0.12);
  --warning: #F59E0B; --warning-soft: rgba(245,158,11,0.12);
  --danger:  #EF4444; --danger-soft:  rgba(239,68,68,0.12);
  --info:    #38BDF8; --info-soft:    rgba(56,189,248,0.12);
  --gold:    #EAB308;

  /* ---- SLATE RAMP (fixed values, both themes) --------------------
     The neutral scale used by raw hexes all over this file. FIXED on
     purpose — theme-adaptive surfaces/text live in --bg-*/--text-*;
     these are for rules that deliberately pin a shade. */
  --success-strong: #34D399;   /* success TEXT on dark surfaces (emerald-400) */

  --slate-50:  #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0;
  --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B;
  --slate-900: #0F172A; --slate-950: #020617;

  /* ---- DATA ENCODING (charts / duel bars) ------------------------
     Deliberately separate from brand: recolouring a chart must never
     silently change a button (and vice versa). A = emerald, B = indigo
     — same hues the duel already uses, now with role names. */
  --data-a: #34D399;           /* series/rider A (emerald-400) */
  --data-b: #A5B4FC;           /* series/rider B (indigo-300) */

  /* ---- CTA (hero emerald→teal) ------------------------------------
     The one sanctioned emerald FILL outside semantics. Ink is dark by
     contrast requirement (#022C22 ≈ 6:1 on the gradient; audit P0.2).
     NOTE: keep this a LITERAL — a hex→var sweep once rewrote it into a
     self-reference (var(--cta-gradient)) and the hero CTA lost its fill. */
  --cta-gradient: linear-gradient(90deg, #10B981, #14B8A6);
  --text-on-cta: #022C22;

  /* ---- SURFACES & TEXT (light) ---------------------------------- */
  --bg-primary: #F6F7FB;       /* page — a hair warmer/deeper than pure slate-50 */
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EEF1F6;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --text-primary: #0F172A;
  --text-strong: #0F172A;   /* highest-emphasis text; consumers use var(--text-strong, #0f172a) */
  --text-secondary: #475569;
  --text-muted: #475569;   /* audit P4: #94A3B8 measured 2.45:1 on light — never again */
  --border-color: #E2E8F0;
  --border-strong: #CBD5E1;
  --hairline: rgba(15, 23, 42, 0.06);
  --bg-segment-active: #FFFFFF;
  --bg-metric: #F1F5F9;
  --nav-bg: rgba(255, 255, 255, 0.72);

  /* ---- ELEVATION (layered shadow system) ------------------------ */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06), 0 1px 1px -1px rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 10px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 12px 24px -6px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.08);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.18), 0 8px 16px -8px rgb(15 23 42 / 0.10);
  --shadow-accent: 0 8px 24px -6px rgba(79, 70, 229, 0.35);
  --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);

  /* ---- MOTION ---------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.12s;
  --dur: 0.2s;
  --dur-slow: 0.32s;
  --t-fast: all var(--dur-fast) var(--ease-out);
  --t-base: all var(--dur) var(--ease-out);
}

.dark-mode,
html.dark {
  /* ---- ACCENT RAMP (dark — navy lifts TWO steps, not one) --------
     Indigo only needed one step (500) to clear the dark ground; #0c447c is
     darker and more saturated, so 500 (#1773CF) still measures ~3.7:1
     against the app's near-black cards — under the 4.5:1 text threshold.
     400 (#4B99E7) clears it at ~6:1, matching what indigo-400 measured. */
  --accent-color: #4B99E7;   /* P3 navy-400 — THE accent (dark) */
  --accent-hover: #8DBDEC;   /* navy-300 */
  --accent-soft:  rgba(75, 153, 231, 0.16);
  --accent-ring:  rgba(141, 189, 236, 0.30);
  --accent-gradient: linear-gradient(135deg, #4B99E7 0%, #8DBDEC 100%);

  --success-soft: rgba(16,185,129,0.18);
  --warning-soft: rgba(245,158,11,0.18);
  --danger-soft:  rgba(239,68,68,0.18);
  --info-soft:    rgba(56,189,248,0.18);

  /* ---- SURFACES & TEXT (dark) ----------------------------------- */
  --bg-primary: #0B0F19;
  --bg-secondary: #111827;
  --bg-tertiary: #1F2937;
  --bg-card: #111827;          /* matches the site-wide dark card surface */
  --bg-elevated: #1A2336;      /* one step up for popovers / palettes */
  --text-primary: #F9FAFB;
  --text-strong: #F9FAFB;   /* dark: the #0f172a fallback was invisible on dark cards (P4) */
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;   /* audit P4: 7C899E = 4.14:1 on dark tertiary */
  --border-color: #1F2937;     /* matches the site-wide dark border */
  --border-strong: #334155;
  --hairline: rgba(255, 255, 255, 0.07);
  --bg-metric: #1E293B;
  --bg-segment-active: #283449;
  --nav-bg: rgba(11, 15, 25, 0.78);

  /* ---- ELEVATION (deeper, darker shadows in dark mode) ---------- */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35), 0 1px 1px -1px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 14px 28px -6px rgb(0 0 0 / 0.55), 0 6px 12px -4px rgb(0 0 0 / 0.40);
  --shadow-xl: 0 28px 56px -12px rgb(0 0 0 / 0.65), 0 10px 20px -8px rgb(0 0 0 / 0.45);
  --shadow-accent: 0 8px 28px -6px rgba(99, 102, 241, 0.45);
  --shadow-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
}

.dark-mode .bg-slate-50 {
  background-color: var(--bg-primary) !important;
}

/* Prevent horizontal scrollbar at the viewport level without breaking
   position:sticky on child elements (body overflow-x:hidden would do that). */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv01", "ss01", "kern";   /* Geist's nicer glyph variants */
  /* NOTE: do NOT set overflow-x here — that would break position:sticky */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

/* Mono / tabular figures everywhere they appear — crisp aligned stats */
.font-mono,
.tabular-nums,
code,
kbd,
pre {
  font-feature-settings: "tnum", "zero";
}

/* Sticky top navigation */
/* Drawer host — always in DOM, hidden unless in profile view */
#p3-drawer-host {
  display: none;
}

body.profile-view-active #p3-drawer-host {
  display: block;
  position: fixed;
  top: 90px;
  /* clearance for sticky nav (ticker ~26px + nav 64px) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  /* below sticky-nav z-index 50 */
  overflow-y: auto;
  background: var(--bg-primary, var(--slate-50));
}

body.profile-view-active.dark-mode #p3-drawer-host {
  background: var(--bg-primary, var(--slate-950));
}

.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 0 var(--hairline);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.dark-mode .sticky-nav,
html.dark .sticky-nav {
  background-color: var(--nav-bg);
}

.nav-link-item {
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);

  /* Responsive sizing */
  font-size: 11px;
  padding: 5px 8px;
}

@media (min-width: 1280px) {
  .nav-link-item {
    font-size: 12px;
    padding: 4px 8px;
  }
}

@media (min-width: 1440px) {
  .nav-link-item {
    font-size: 13px;
    padding: 5px 10px;
  }
}

.nav-link-item:hover {
  color: var(--text-primary);
  background-color: var(--accent-soft);
}

.nav-link-item.active {
  font-weight: 700;
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

/* Refined active underline — a centered, rounded indigo bar that animates in */
.nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2.5px;
  border-radius: var(--radius-full);
  background: var(--accent-gradient);
  box-shadow: 0 1px 6px -1px var(--accent-color);
  animation: navInk var(--dur) var(--ease-out);
}

/* ------------------------------------------------------------------------
   1024-1280px window: 9 top-level nav items + role badge + right cluster
   used to overflow the header row. Conservative fix — tighten, never clip,
   never drop: smaller item type/padding, decorative dropdown icons off,
   account username off (icon stays), long role badges ellipsized, slimmer
   container padding. <1024px (mobile menu) and >=1280px are untouched.
   NOTE: do NOT solve this with overflow-x:auto on the nav row — its hover
   dropdown panels are absolutely-positioned children and any overflow value
   other than `visible` on the row would clip them inside the 64px header.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-link-item {
    font-size: 10px;
    padding: 4px 5px;
    letter-spacing: -0.02em;
    gap: 3px; /* dropdown triggers are flex (label + chevron) */
  }
  .sticky-nav .max-w-screen-2xl {
    /* main header row only — the ticker uses max-w-7xl and is untouched */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .sticky-nav .h-16 {
    gap: 0.375rem;
  }
  .sticky-nav .nav-btn-icon,
  .sticky-nav .nav-username {
    display: none;
  }
  .sticky-nav .nav-role-badge {
    display: inline-block;
    vertical-align: middle;
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------------------
   < 1024px (phones / small tablets): the hamburger replaces the tab row, but
   the always-on right cluster (year + language + account + theme) was never
   shrunk below 1024px, and the hamburger button carried the full current-page
   label ("Optimiseur Fantasy", "Espace Presse"…). On a ~390px phone the logo +
   hamburger(+label) + four controls exceeded the viewport, and because
   html{overflow-x:hidden} clips (never scrolls), the right-edge controls
   (account / theme) were cut off — the reported "barre de navigation coupée".
   Fix: drop the long label from the hamburger and mirror the 1024-1280
   tightening (hide account username/icon + role badge, slimmer padding/gaps).
   Same rule as above: never overflow-x on the row — it would clip the
   absolutely-positioned dropdown panels inside the 64px header.
   ------------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .nav-mobile-label { display: none; }
  .sticky-nav .max-w-screen-2xl {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .sticky-nav .h-16 { gap: 0.375rem; }
  .sticky-nav .nav-btn-icon,
  .sticky-nav .nav-username,
  .sticky-nav .nav-signin-label,
  .sticky-nav .nav-role-badge {
    display: none;
  }
}

/* Very small phones (<=400px): also drop the year-picker's calendar icon so the
   right cluster (year / language / account / theme) fits without clipping. */
@media (max-width: 400px) {
  .sticky-nav .nav-year-icon { display: none; }
}

/* Brief indigo pulse on the DS "Planifier une étape réelle" picker when the
   RAVITO & PLACEMENT card's jump link scrolls the user up to it. */
.ds-picker-flash {
  animation: dsPickerFlash 1.6s var(--ease-out, ease-out);
}

@keyframes dsPickerFlash {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); }
  40%  { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@keyframes navInk {
  from { width: 0; opacity: 0; }
  to   { width: 60%; opacity: 1; }
}

/* Grid Cyclist Card */
.cyclist-card {
  width: 320px !important;
  height: 420px !important;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
}

.cyclist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-color);
}

/* Card layout segments */
.card-header-gradient {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
}

.card-body-zone {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Zone 1: Identity */
.rider-identity {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.rider-name-wrap {
  flex-grow: 1;
}

.rider-lastname {
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 16pt;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rider-firstname {
  font-size: 13px;
  color: var(--text-secondary);
}

.bib-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--accent-color);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

/* Zone 2: Physiology */
.rider-physiology {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.physio-box {
  background-color: var(--bg-metric);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  font-size: 10px;
  color: var(--text-secondary);
}

.physio-val {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

/* Zone 3: Form Guide */
.rider-form-guide {
  border-top: 1px dashed var(--border-color);
  border-bottom: 1px dashed var(--border-color);
  padding: 8px 0;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

/* Zone 4: Montreal Specifics (Base of card) */
.rider-montreal {
  font-size: 11px;
  color: var(--text-secondary);
}

.anecdote-text {
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Hover utilities: Copier & Audio (Visible only on hover) */
.hover-actions-overlay {
  position: absolute;
  top: 45px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

.cyclist-card:hover .hover-actions-overlay {
  opacity: 1;
  pointer-events: auto;
}

.action-circle-btn {
  width: 32px;
  height: 32px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--slate-900);
  border: 1px solid var(--slate-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s, transform 0.1s;
}

.action-circle-btn:hover {
  background-color: #FFFFFF;
  transform: scale(1.1);
  color: var(--accent-color);
}

/* Sticky Column / Table View CSS */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.press-table {
  width: 100%;
  border-collapse: collapse;
}

.press-table th {
  position: sticky;
  top: 0;
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
  z-index: 20;
  border-bottom: 2px solid var(--border-color);
}

.press-table tbody tr {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.15s ease;
}

.press-table tbody tr:nth-child(even) {
  background-color: var(--bg-primary);
}

.press-table tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

/* Full Page Profile Styles (Native in-flow page, no drawer overlays) */
.drawer-overlay {
  display: none !important;
}

.side-drawer {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 4rem);
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
}

.profile-page-view-container {
  width: 100%;
  min-height: 100%;
}

/* Premium smooth fade-in page swap transition */
.animate-fade-in {
  animation: fadeIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* F1 Profile Navigation Bar & Tabs */
.profile-navbar {
  position: relative;
  flex-shrink: 0;
  z-index: 30;
}

.profile-tab-link {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.profile-tab-link.active {
  color: #ffffff !important;
  border-color: var(--gold) !important;
}

.profile-tab-link:hover:not(.active) {
  color: #ffffff !important;
}

/* F1 Grand Profile Banner */
.profile-f1-banner {
  position: relative;
  min-height: 280px;
  flex-shrink: 0;
}

.profile-f1-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05), transparent 60%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .profile-f1-banner {
    min-height: auto;
    padding: 2rem 1rem !important;
    flex-direction: column-reverse !important;
    gap: 1.5rem;
  }
}

/* Drawer Internal Structure */
.drawer-header {
  position: relative;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  height: 180px;
  display: flex;
  align-items: flex-end;
  color: white;
}

.drawer-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.drawer-header-content {
  position: relative;
  z-index: 5;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  width: 100%;
}

.drawer-close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  /* Moved to left to avoid collision with rider portrait on right */
  right: auto;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.drawer-close-btn:hover {
  background-color: rgba(15, 23, 42, 0.9);
  transform: scale(1.05);
}

.drawer-tabs-bar {
  position: sticky;
  top: 0;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
}

.drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}

.drawer-footer {
  position: sticky;
  bottom: 0;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
  z-index: 10;
}

/* Compare side-by-side mode layout.
   Vertical stack ON PURPOSE: this wraps full-width SECTIONS (verdict, radar,
   H2H, and a nested responsive card grid). The old minmax(280px,1fr) auto-fit
   grid forced those sections side-by-side and pushed the rider cards off the
   right edge of the pane; the nested grid-cols-* classes handle the cards. */
.compare-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

/* Command Palette / Search Overlay */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.cmd-palette-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cmd-palette-box {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 600px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(-20px) scale(0.98);
  transition: transform var(--dur) var(--ease-spring);
}

.cmd-palette-overlay.open .cmd-palette-box {
  transform: translateY(0) scale(1);
}

.cmd-input {
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 16px 20px;
  font-size: 16px;
  color: var(--text-primary);
  outline: none;
  border-bottom: 1px solid var(--border-color);
}

.cmd-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.cmd-item {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
}

.cmd-item:hover,
.cmd-item.selected {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.cmd-shortcut-hint {
  font-size: 10px;
  padding: 2px 6px;
  background-color: var(--bg-metric);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

/* Custom switch / segmented control styling */
.segmented-control {
  background-color: var(--bg-tertiary);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  gap: 2px;
  border: 1px solid var(--border-color);
}

.segment-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
}

.segment-btn.active {
  background-color: var(--bg-segment-active);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Custom CSS Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* XCelateAI Dashboard Outer Shell Styles */
.dashboard-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-primary);
}

.sidebar-container {
  width: 250px;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
}

.sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border-left: 4px solid transparent;
}

.sidebar-menu-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.sidebar-menu-item.active {
  background-color: var(--bg-primary);
  color: var(--accent-color);
  font-weight: 600;
  border-left: 4px solid var(--accent-color);
}

.sidebar-menu-item i {
  width: 18px;
  text-align: center;
}

.dashboard-header {
  height: 64px;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.dashboard-footer {
  height: 48px;
  background-color: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 11px;
  color: var(--text-muted);
}

.widget-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.widget-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Spaced out grid container for cyclist cards to prevent cards from touching */
.cyclists-grid-container,
.teams-grid-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  grid-gap: 24px !important;
  gap: 24px !important;
  justify-content: center !important;
  justify-items: center !important;
  width: 100% !important;
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px !important;

  /* On-brand P3 surface behind the cards (replaces the old tiled photo).
     A subtle accent-tinted wash in light mode keeps the cards readable and
     matches the one P3 indigo palette. */
  background-color: var(--bg-secondary);
  background-image: linear-gradient(180deg, var(--accent-soft) 0%, transparent 240px) !important;
  background-repeat: no-repeat !important;
  border-radius: 16px;
  border: 1px solid var(--border-color);
}

.dark-mode .cyclists-grid-container,
.dark-mode .teams-grid-container {
  /* Standard dark P3 hero gradient (slate -> indigo), same family as
     render_page_hero, instead of the tiled background photo. */
  background-color: var(--slate-900);
  background-image: linear-gradient(160deg, var(--slate-950) 0%, var(--slate-900) 45%, var(--accent-950) 100%) !important;
  background-repeat: no-repeat !important;
}

/* Image Zoom Modal */
.image-zoom-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.image-zoom-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.image-zoom-content-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  max-height: 90%;
}

.image-zoom-close-btn {
  position: absolute;
  top: -48px;
  right: 0;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.1s;
}

.image-zoom-close-btn:hover {
  background: rgba(15, 23, 42, 0.9);
  transform: scale(1.05);
}

.zoomed-rider-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  padding: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-zoom-modal.open .zoomed-rider-img {
  transform: scale(1);
}

.image-zoom-modal:not(.open) .zoomed-rider-img {
  transform: scale(0.9);
}

.zoomed-rider-caption {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

/* Background scroll lock when side drawer is open */
body.drawer-open,
body.drawer-open .flex-grow.overflow-y-auto {
  overflow: hidden !important;
}

/* Explicit size restrictions for SVGs inside the side drawer to prevent blow-ups */
.side-drawer svg.w-5.h-5,
.side-drawer svg.w-5,
.side-drawer svg.h-5 {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
}

.side-drawer svg.w-3\.5.h-3\.5 {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0 !important;
}

/* Override R Shiny default opacity fade for recalculating elements inside the drawer */
.shiny-recalculating,
.shiny-recalculating * {
  opacity: 1 !important;
}

/* Beautiful custom shimmering skeleton loaders */
@keyframes shimmer-pulse {
  0% {
    background-color: rgba(226, 232, 240, 0.4);
  }

  50% {
    background-color: rgba(203, 213, 225, 0.7);
  }

  100% {
    background-color: rgba(226, 232, 240, 0.4);
  }
}

.shimmer-placeholder {
  display: block;
  width: 100%;
  min-height: 12px;
  background-color: rgba(226, 232, 240, 0.6) !important;
  /* Solid fallback */
  animation: shimmer-pulse 1.5s infinite ease-in-out;
  border-radius: 8px;
}

.dark-mode .shimmer-placeholder {
  background-color: rgba(30, 41, 59, 0.6) !important;
  /* Solid fallback for dark mode */
  animation: dark-shimmer-pulse 1.5s infinite ease-in-out;
}

@keyframes dark-shimmer-pulse {
  0% {
    background-color: rgba(30, 41, 59, 0.4);
  }

  50% {
    background-color: rgba(71, 85, 105, 0.6);
  }

  100% {
    background-color: rgba(30, 41, 59, 0.4);
  }
}

/* Custom premium top loading progress bar on recalculating elements inside the drawer */
.shiny-recalculating {
  position: relative;
  pointer-events: none;
}

.shiny-recalculating::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-500) 0%, var(--accent-400) 50%, var(--accent-500) 100%);
  background-size: 200% auto;
  z-index: 100;
  animation: shine-progress 1.5s linear infinite;
  border-radius: 4px 4px 0 0;
}

@keyframes shine-progress {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* ===================================================================   Complete Dark Theme Workspace Polish & High Specificity Overrides (Task 9)
   ========================================================================== */
.dark-mode,
.dark,
html.dark,
html.dark body,
.dark-mode body {
  background-color: #0B0F19 !important;
  color: #F9FAFB !important;
}

/* Force dark background for all light slate & white layouts in dark mode */
html.dark .bg-slate-50,
.dark-mode .bg-slate-50,
html.dark .bg-white,
.dark-mode .bg-white,
html.dark .bg-slate-100,
.dark-mode .bg-slate-100,
html.dark .bg-slate-200,
.dark-mode .bg-slate-200,
html.dark .bg-slate-50\/50,
.dark-mode .bg-slate-50\/50,
html.dark .bg-slate-50\/20,
.dark-mode .bg-slate-50\/20,
html.dark .bg-blue-50\/50,
.dark-mode .bg-blue-50\/50,
html.dark .bg-blue-50\/70,
.dark-mode .bg-blue-50\/70,
html.dark .bg-indigo-50\/20,
.dark-mode .bg-indigo-50\/20,
html.dark .bg-indigo-50\/10,
.dark-mode .bg-indigo-50\/10 {
  background-color: #0B0F19 !important;
}

/* Standalone Sidebar and Headers */
html.dark .sidebar-container,
.dark-mode .sidebar-container,
html.dark .dashboard-header,
.dark-mode .dashboard-header,
html.dark .dashboard-footer,
.dark-mode .dashboard-footer,
html.dark .drawer-footer,
.dark-mode .drawer-footer,
html.dark .drawer-tabs-bar,
.dark-mode .drawer-tabs-bar {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
}

/* Card components and widgets */
html.dark .widget-card,
.dark-mode .widget-card,
html.dark .bg-white.border-slate-200,
.dark-mode .bg-white.border-slate-200,
html.dark .bg-white.dark\:bg-slate-900,
.dark-mode .bg-white.dark\:bg-slate-900,
html.dark .bg-white.dark\:bg-slate-900.border,
.dark-mode .bg-white.dark\:bg-slate-900.border {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
}

/* Text color fixes for dark mode readability */
html.dark .text-slate-800,
.dark-mode .text-slate-800,
html.dark .text-slate-700,
.dark-mode .text-slate-700,
html.dark .text-slate-600,
.dark-mode .text-slate-600,
html.dark .text-slate-700,
.dark-mode .text-slate-700,
html.dark .text-slate-700,
.dark-mode .text-slate-700,
html.dark .text-slate-600,
.dark-mode .text-slate-600 {
  color: var(--slate-200) !important;
}

html.dark .text-slate-500,
.dark-mode .text-slate-500,
html.dark .text-slate-400,
.dark-mode .text-slate-400,
html.dark .text-slate-400,
.dark-mode .text-slate-400 {
  color: var(--slate-400) !important;
}

/* Specific home clock and weather widgets */
html.dark #clock-time,
.dark-mode #clock-time,
html.dark #clock-date,
.dark-mode #clock-date {
  color: #F9FAFB !important;
}

html.dark .widget-card i,
.dark-mode .widget-card i {
  color: var(--accent-400) !important;
}

/* Circular SVG values overlays in dark mode */
html.dark text,
.dark-mode text {
  fill: #F9FAFB !important;
}

/* Input boxes in command palette */
html.dark .cmd-palette-box,
.dark-mode .cmd-palette-box {
  background-color: #111827 !important;
  border-color: #1F2937 !important;
}

html.dark .cmd-input,
.dark-mode .cmd-input {
  color: #F9FAFB !important;
  border-bottom-color: #1F2937 !important;
}

/* ===================================================================   Floating Glassmorphic Overrides for Native Shiny Progress (Task 10)
   ========================================================================== */
#shiny-notification-panel {
  position: fixed !important;
  top: auto !important;
  bottom: 90px !important;
  right: 24px !important;
  width: 420px !important;
  max-width: calc(100vw - 48px) !important;
  z-index: 1000000 !important;
  /* Forces it into the absolute foreground of the side drawer */
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.shiny-notification {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  color: var(--slate-900) !important;
  width: 100% !important;
  pointer-events: auto !important;
  position: relative !important;
  animation: slide-in-notification 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: all 0.3s ease !important;
}

.dark-mode .shiny-notification,
.dark .shiny-notification {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  color: var(--slate-50) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

@keyframes slide-in-notification {
  from {
    transform: translateX(120%) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.shiny-notification-message {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 4px !important;
  color: var(--accent-600) !important;
  text-transform: uppercase !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.dark-mode .shiny-notification-message,
.dark .shiny-notification-message {
  color: var(--accent-400) !important;
}

.shiny-notification-detail {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--slate-600) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.dark-mode .shiny-notification-detail,
.dark .shiny-notification-detail {
  color: var(--slate-400) !important;
}

.shiny-progress-notification .progress {
  height: 8px !important;
  margin-top: 12px !important;
  background-color: var(--slate-100) !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.dark-mode .shiny-progress-notification .progress,
.dark .shiny-progress-notification .progress {
  background-color: var(--slate-800) !important;
}

.shiny-progress-notification .progress-bar {
  background: linear-gradient(90deg, var(--accent-600) 0%, var(--accent-400) 50%, var(--accent-600) 100%) !important;
  background-size: 200% auto !important;
  animation: progress-bar-stripes 1.5s linear infinite !important;
  border-radius: 9999px !important;
}

.shiny-notification-close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  color: var(--slate-400) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: color 0.2s !important;
}

.shiny-notification-close:hover {
  color: var(--danger) !important;
}

/* ===================================================================   PREMIUM SPORTY OVERHAUL & GLOWING AESTHETICS (Global Overhaul)
   ========================================================================== */

/* Glassmorphism styling for high-fidelity widgets and blocks */
.premium-glass-card {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dark-mode .premium-glass-card,
.dark .premium-glass-card {
  background: rgba(17, 24, 39, 0.75) !important;
  border: 1px solid rgba(55, 65, 81, 0.5) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

.premium-glass-card:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 15px rgba(99, 102, 241, 0.2) !important;
}

/* Premium sporty glowing border transition on cyclist cards */
.cyclist-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease !important;
}

.cyclist-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 20px rgba(99, 102, 241, 0.4) !important;
  border-color: var(--accent-color) !important;
}

.dark-mode .cyclist-card:hover,
.dark .cyclist-card:hover {
  box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(129, 140, 248, 0.35) !important;
}

/* Refined typography and card identity details */
.rider-lastname {
  background: linear-gradient(90deg, var(--text-primary) 0%, rgba(99, 102, 241, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .rider-lastname,
.dark .rider-lastname {
  background: linear-gradient(90deg, #FFFFFF 0%, var(--accent-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Slick press-table polish */
.press-table {
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  /* Spaced out rows */
}

.press-table tbody tr {
  border-radius: 8px !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-color) !important;
  background-color: var(--bg-secondary) !important;
}

.press-table tbody tr:hover {
  transform: scale(1.002);
  box-shadow: var(--shadow-md), 0 0 10px rgba(99, 102, 241, 0.15) !important;
  background-color: var(--bg-tertiary) !important;
}

.press-table th,
.press-table td {
  padding: 12px 16px !important;
}

/* Glowing active menu items on sidebar */
.sidebar-menu-item {
  position: relative;
  transition: all 0.25s ease !important;
}

.sidebar-menu-item:hover {
  padding-left: 28px !important;
  color: var(--accent-color) !important;
}

.sidebar-menu-item.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%) !important;
  color: var(--accent-color) !important;
  box-shadow: inset 4px 0 0 0 var(--accent-color) !important;
  border-left: none !important;
}

/* Beautiful dynamic article typography */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em !important;
}

.prose p {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 12px !important;
}

/* About Page Premium F1/Cycling Layout (Screenshot 3).
   Image: real road-cycling shot (the old local about-hero.jpg was an
   off-topic kitchen photo) + a much darker scrim so the white hero title
   stays readable whatever the image loads to. */
.about-page-root {
  background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.92)),
    url('https://images.unsplash.com/photo-1452573992436-6d508f200b30?q=80&w=1473&auto=format&fit=crop'),
    url('/images/about-hero.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.about-page-root .sticky-nav {
  margin: 1.5rem auto 1rem auto;
  max-width: 80rem;
  width: calc(100% - 3rem);
  border-radius: 8px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  position: sticky;
  top: 1rem;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dark-mode .about-page-root .sticky-nav {
  background-color: var(--bg-card);
}

.about-banner-watermark-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.about-watermark-container {
  max-width: 80rem;
  width: calc(100% - 3rem);
  margin: 0.5rem auto 0.75rem auto;
  display: flex;
  justify-content: flex-end;
  padding: 0 2rem;
  box-sizing: border-box;
}

.about-card-wrapper {
  max-width: 80rem;
  margin: 0 auto 3rem auto;
  position: relative;
  z-index: 10;
  padding: 0 2rem;
  width: 100%;
  box-sizing: border-box;
}

.about-split-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 8px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  min-height: 520px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.about-card-sidebar {
  width: 32%;
  border-right: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  display: flex;
  flex-direction: column;
}

.about-sidebar-btn {
  width: 100%;
  text-align: left;
  padding: 1.25rem 1.5rem;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.about-sidebar-btn:hover {
  background-color: var(--bg-tertiary);
}

.about-sidebar-btn.active {
  background-color: var(--bg-card) !important;
  box-shadow: inset 4px 0 0 0 var(--accent-color);
}

.about-sidebar-btn-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
}

.about-sidebar-btn-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.about-main-panel {
  width: 68%;
  padding: 3rem;
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-main-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
}

.about-main-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.about-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 0.75rem 0;
  width: 100%;
}

.about-keywords-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.5rem;
}

.about-keyword-badge {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-body-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: justify;
  margin: 0;
}

/* Transparent Navbar Overlays on Full-Width Header Pages (About & Races) */
.transparent-header-root .sticky-nav {
  background-color: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.transparent-header-root .sticky-nav .nav-link-item {
  color: rgba(255, 255, 255, 0.75) !important;
}

.transparent-header-root .sticky-nav .nav-link-item:hover,
.transparent-header-root .sticky-nav .nav-link-item.active {
  color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav .nav-link-item.active::after {
  background-color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav .text-slate-800 {
  color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav .bg-blue-100 {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #93C5FD !important;
  border-color: rgba(93, 156, 243, 0.3) !important;
}

.transparent-header-root .sticky-nav .bg-slate-50 {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.transparent-header-root .sticky-nav .bg-slate-50:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav .bg-slate-50 svg {
  color: rgba(255, 255, 255, 0.8) !important;
}

.transparent-header-root .sticky-nav .cmd-shortcut-hint {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.transparent-header-root .sticky-nav .bg-slate-100 {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav .bg-slate-100 select {
  color: #FFFFFF !important;
}

.transparent-header-root .sticky-nav #moon_icon,
.transparent-header-root .sticky-nav #sun_icon {
  color: #FFFFFF !important;
}

/* Races Page Hero Banner styles */
.races-hero-banner {
  margin-top: -64px !important;
  /* Pull behind sticky navbar */
  padding-top: 64px !important;
  /* Shift contents down to compensate margin */
}

/* Watermark in Races banner */
.races-banner-watermark-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===================================================================   ADMIN PANEL STYLING (Premium Glassmorphism & Cozy Editor Elements)
   ========================================================================== */
.admin-container {
  max-width: 56rem;
  margin: 0 auto;
}

.admin-header h1 {
  font-family: var(--font-display);
}

.admin-tabs-nav {
  margin-top: 1.5rem;
}

.admin-tab-btn {
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-tab-btn:hover {
  color: var(--text-primary);
}

.admin-tab-btn.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.dark-mode .admin-tab-btn.active,
.dark .admin-tab-btn.active {
  color: var(--accent-400);
  border-bottom-color: var(--accent-400);
}

/* Customize input controls to match site's premium look */
.admin-container .form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-container label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.admin-container input[type="text"],
.admin-container textarea,
.admin-container select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-container input[type="text"]:focus,
.admin-container textarea:focus,
.admin-container select:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .admin-container input[type="text"]:focus,
.dark-mode .admin-container textarea:focus,
.dark-mode .admin-container select:focus,
.dark .admin-container input[type="text"]:focus,
.dark .admin-container textarea:focus,
.dark .admin-container select:focus {
  border-color: var(--accent-400) !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

/* Records & Statistics Tab Custom Styling */

.records-hero-banner,
.stats-hero-banner {
  position: relative;
  width: 100%;
  min-height: 180px;
  background-color: var(--text-on-cta);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23059669' fill-opacity='0.08' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,122.7C672,128,768,192,864,197.3C960,203,1056,149,1152,144C1248,139,1344,181,1392,202.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%2310b981' fill-opacity='0.05' d='M0,96L60,117.3C120,139,240,181,360,181.3C480,181,600,139,720,117.3C840,96,960,96,1080,117.3C1200,139,1320,181,1380,202.7L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 4rem;
  overflow: hidden;
  box-shadow: inset 0 -10px 20px -10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.records-hero-content,
.stats-hero-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  padding: 1.5rem 2.5rem;
  max-width: 38rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--success);
  z-index: 10;
}

html.dark .records-hero-content,
.dark-mode .records-hero-content,
html.dark .stats-hero-content,
.dark-mode .stats-hero-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--success);
}

.records-hero-content h1,
.stats-hero-content h1 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 800;
  color: var(--text-on-cta);
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

html.dark .records-hero-content h1,
.dark-mode .records-hero-content h1,
html.dark .stats-hero-content h1,
.dark-mode .stats-hero-content h1 {
  color: var(--slate-50);
}

.records-hero-content p,
.stats-hero-content p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  /* text-sm */
  color: var(--slate-700);
  margin: 0;
  line-height: 1.5;
}

html.dark .records-hero-content p,
.dark-mode .records-hero-content p,
html.dark .stats-hero-content p,
.dark-mode .stats-hero-content p {
  color: var(--slate-400);
}

.records-value-text {
  color: #0f766e !important;
  font-family: var(--font-display) !important;
}

.db-monitor-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background-color: rgba(52, 211, 153, 0.15) !important;
  color: var(--success-strong) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.db-monitor-value {
  color: var(--success) !important;
  font-family: monospace !important;
  font-weight: bold;
}

.db-validation-pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--success) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

.admin-tab-btn:hover {
  color: var(--text-primary);
}

.admin-tab-btn.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.dark-mode .admin-tab-btn.active,
.dark .admin-tab-btn.active {
  color: var(--accent-400);
  border-bottom-color: var(--accent-400);
}

/* Customize input controls to match site's premium look */
.admin-container .form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-container label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.admin-container input[type="text"],
.admin-container textarea,
.admin-container select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  background-color: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-container input[type="text"]:focus,
.admin-container textarea:focus,
.admin-container select:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .admin-container input[type="text"]:focus,
.dark-mode .admin-container textarea:focus,
.dark-mode .admin-container select:focus,
.dark .admin-container input[type="text"]:focus,
.dark .admin-container textarea:focus,
.dark .admin-container select:focus {
  border-color: var(--accent-400) !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

/* Records & Statistics Tab Custom Styling */

.records-hero-banner,
.stats-hero-banner {
  position: relative;
  width: 100%;
  min-height: 180px;
  background-color: var(--text-on-cta);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23059669' fill-opacity='0.08' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,122.7C672,128,768,192,864,197.3C960,203,1056,149,1152,144C1248,139,1344,181,1392,202.7L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%2310b981' fill-opacity='0.05' d='M0,96L60,117.3C120,139,240,181,360,181.3C480,181,600,139,720,117.3C840,96,960,96,1080,117.3C1200,139,1320,181,1380,202.7L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 4rem;
  overflow: hidden;
  box-shadow: inset 0 -10px 20px -10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.records-hero-content,
.stats-hero-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  padding: 1.5rem 2.5rem;
  max-width: 38rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--success);
  z-index: 10;
}

html.dark .records-hero-content,
.dark-mode .records-hero-content,
html.dark .stats-hero-content,
.dark-mode .stats-hero-content {
  background: rgba(15, 23, 42, 0.95);
  border-color: var(--success);
}

.records-hero-content h1,
.stats-hero-content h1 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  /* text-3xl */
  font-weight: 800;
  color: var(--text-on-cta);
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

html.dark .records-hero-content h1,
.dark-mode .records-hero-content h1,
html.dark .stats-hero-content h1,
.dark-mode .stats-hero-content h1 {
  color: var(--slate-50);
}

.records-hero-content p,
.stats-hero-content p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  /* text-sm */
  color: var(--slate-700);
  margin: 0;
  line-height: 1.5;
}

html.dark .records-hero-content p,
.dark-mode .records-hero-content p,
html.dark .stats-hero-content p,
.dark-mode .stats-hero-content p {
  color: var(--slate-400);
}

.records-value-text {
  color: #0f766e !important;
  font-family: var(--font-display) !important;
}

html.dark .records-value-text,
.dark-mode .records-value-text {
  color: #2dd4bf !important;
}

.records-db-monitor-card {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0,150 C300,100 500,250 800,200 L800,600 L0,600 Z' fill='%23059669' fill-opacity='0.08'/%3E%3Cpath d='M0,300 C200,200 400,350 800,250 L800,600 L0,600 Z' fill='%2334d399' fill-opacity='0.05'/%3E%3Ccircle cx='700' cy='100' r='250' fill='%2310b981' fill-opacity='0.1' filter='blur(40px)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--text-on-cta) 0%, #064e3b 100%) !important;
  background-size: cover !important;
  border-color: #064e3b !important;
  color: white !important;
}


.db-monitor-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background-color: rgba(52, 211, 153, 0.15) !important;
  color: var(--success-strong) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.db-monitor-value {
  color: var(--success) !important;
  font-family: monospace !important;
  font-weight: bold;
}

.db-validation-pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--success) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

/* Global Select Options Styling to fix Windows white-on-white text bug */
select option {
  color: var(--slate-800) !important;
  background-color: #ffffff !important;
}

html.dark select option,
.dark-mode select option {
  color: var(--slate-50) !important;
  background-color: var(--slate-900) !important;
}

.secret-admin-trigger {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* ===================================================================   CYCLING DATA EXPLORER KPI & CHART BUILDER CUSTOM STYLES
   ========================================================================== */

/* Custom KPI Cards Grid (Compact & Sleek) */
.kpi-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

@media (max-width: 1200px) {
  .kpi-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .kpi-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kpi-card {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark .kpi-card,
.dark-mode .kpi-card {
  background: #111827;
  border-color: #1F2937;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.05);
}

.kpi-icon {
  font-size: 1.15rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.kpi-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}

html.dark .kpi-title,
.dark-mode .kpi-title {
  color: var(--slate-400);
}

.kpi-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--slate-800);
  margin: 0;
  margin-left: auto;
  /* Pushes value to the right side of the card */
}

html.dark .kpi-value,
.dark-mode .kpi-value {
  color: #F3F4F6;
}

/* Colors and Left Borders for KPI Cards */
.kpi-riders {
  border-left: 3px solid #0D9488 !important;
}

.kpi-riders .kpi-icon {
  background: rgba(13, 148, 136, 0.1);
  color: #0D9488;
}

.kpi-teams {
  border-left: 3px solid var(--accent-600) !important;
}

.kpi-teams .kpi-icon {
  background: rgba(79, 70, 229, 0.1);
  color: var(--accent-600);
}

.kpi-races {
  border-left: 3px solid var(--warning) !important;
}

.kpi-races .kpi-icon {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.kpi-stages {
  border-left: 3px solid var(--success) !important;
}

.kpi-stages .kpi-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.kpi-results {
  border-left: 3px solid #F43F5E !important;
}

.kpi-results .kpi-icon {
  background: rgba(244, 63, 94, 0.1);
  color: #F43F5E;
}

.kpi-rankings {
  border-left: 3px solid #8B5CF6 !important;
}

.kpi-rankings .kpi-icon {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

/* Highlighted Chart Control Container */
.chart-type-control {
  border: 2px solid #0D9488 !important;
  background-color: rgba(13, 148, 136, 0.03) !important;
  border-radius: 8px;
  padding: 0.35rem !important;
}

html.dark .chart-type-control,
.dark-mode .chart-type-control {
  border-color: #0d9488 !important;
  background-color: rgba(13, 148, 136, 0.08) !important;
}

/* Custom CSS Overrides for Visual Year Selector and Accordion Buttons */
.year-pills-container .shiny-options-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  padding: 0.25rem 0 !important;
}

.year-pills-container .checkbox {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

.year-pills-container .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 1rem !important;
  border-radius: 9999px !important;
  background-color: var(--slate-100) !important;
  border: 1px solid var(--slate-200) !important;
  color: var(--slate-600) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 0.25rem !important;
}

.year-pills-container .checkbox label:hover {
  background-color: var(--slate-200) !important;
  color: var(--slate-800) !important;
}

.year-pills-container .checkbox input[type="checkbox"] {
  display: none !important;
  /* Hide native checkbox box */
}

/* Active checked state */
.year-pills-container .checkbox label:has(input[type="checkbox"]:checked) {
  background-color: #0D9488 !important;
  /* Teal-600 */
  border-color: #0F766E !important;
  color: white !important;
  box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2), 0 2px 4px -2px rgba(13, 148, 136, 0.2) !important;
}

/* Dark mode overrides */
html.dark .year-pills-container .checkbox label,
.dark-mode .year-pills-container .checkbox label {
  background-color: var(--slate-800) !important;
  border-color: var(--slate-700) !important;
  color: var(--slate-400) !important;
}

html.dark .year-pills-container .checkbox label:hover,
.dark-mode .year-pills-container .checkbox label:hover {
  background-color: var(--slate-700) !important;
  color: var(--slate-50) !important;
}

html.dark .year-pills-container .checkbox label:has(input[type="checkbox"]:checked),
.dark-mode .year-pills-container .checkbox label:has(input[type="checkbox"]:checked) {
  background-color: #0D9488 !important;
  border-color: #0D9488 !important;
  color: white !important;
  box-shadow: 0 0 10px rgba(13, 148, 136, 0.4) !important;
}

/* Accordion Header layout corrections */
.accordion-button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}

.accordion-button .accordion-button-icon {
  margin-right: 0 !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accordion-button i,
.accordion-button svg {
  font-size: 0.95rem !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.accordion-button span {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

/* DB Errors monitor layout in records tab */
.db-errors-list::-webkit-scrollbar {
  width: 4px;
}

.db-errors-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.db-errors-list::-webkit-scrollbar-thumb {
  background: rgba(244, 63, 94, 0.3);
  border-radius: 4px;
}

.db-errors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 63, 94, 0.5);
}

/* Hide default details summary chevron/marker */
summary::-webkit-details-marker {
  display: none !important;
}

summary {
  list-style: none !important;
}

summary::marker {
  display: none !important;
}

/* Fix Plotly Modebar styling and vertical layout distortion */
.js-plotly-plot .plotly .modebar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0.75 !important;
}

.js-plotly-plot .plotly .modebar-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.js-plotly-plot .plotly .modebar-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.js-plotly-plot .plotly .modebar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  border: none !important;
  padding: 4px !important;
  width: auto !important;
  height: auto !important;
}

.js-plotly-plot .plotly .modebar-btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--slate-500) !important;
}

.js-plotly-plot .plotly .modebar-btn:hover svg {
  fill: #0D9488 !important;
}

/* Premium Selectize Styling */
.selectize-input {
  border: 1px solid var(--slate-200) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.75rem !important;
  background-color: var(--slate-50) !important;
  color: var(--slate-800) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.15s ease !important;
}

.selectize-input.focus,
.selectize-input.input-active {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.selectize-dropdown {
  border: 1px solid var(--slate-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
  background-color: #ffffff !important;
  z-index: 1000 !important;
}

.selectize-dropdown .active {
  background-color: var(--slate-100) !important;
  color: #0d9488 !important;
}

.selectize-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  font-size: 12.5px !important;
}

/* Dark mode overrides for Selectize */
html.dark .selectize-input,
.dark-mode .selectize-input {
  border-color: var(--slate-700) !important;
  background-color: var(--slate-900) !important;
  color: var(--slate-50) !important;
}

html.dark .selectize-input.focus,
.dark-mode .selectize-input.focus,
html.dark .selectize-input.input-active,
.dark-mode .selectize-input.input-active {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.22) !important;
}

html.dark .selectize-dropdown,
.dark-mode .selectize-dropdown {
  border-color: var(--slate-700) !important;
  background-color: var(--slate-900) !important;
  color: var(--slate-50) !important;
}

html.dark .selectize-dropdown .active,
.dark-mode .selectize-dropdown .active {
  background-color: var(--slate-800) !important;
  color: #2dd4bf !important;
}

/* Premium DataTables Redesign */
.dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
  color: var(--slate-600) !important;
}

html.dark .dataTables_wrapper,
.dark-mode .dataTables_wrapper {
  color: var(--slate-400) !important;
}

.dataTables_wrapper table.dataTable {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 1.25rem 0 !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html.dark .dataTables_wrapper table.dataTable,
.dark-mode .dataTables_wrapper table.dataTable {
  border-color: var(--slate-800) !important;
}

.dataTables_wrapper table.dataTable thead th {
  background-color: var(--slate-50) !important;
  color: var(--slate-600) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid var(--slate-200) !important;
}

html.dark .dataTables_wrapper table.dataTable thead th,
.dark-mode .dataTables_wrapper table.dataTable thead th {
  background-color: var(--slate-900) !important;
  color: var(--slate-400) !important;
  border-bottom-color: var(--slate-800) !important;
}

.dataTables_wrapper table.dataTable tbody td {
  padding: 0.75rem 1rem !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--slate-100) !important;
}

html.dark .dataTables_wrapper table.dataTable tbody td,
.dark-mode .dataTables_wrapper table.dataTable tbody td {
  border-bottom-color: var(--slate-800) !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: rgba(241, 245, 249, 0.5) !important;
}

html.dark .dataTables_wrapper table.dataTable tbody tr:hover,
.dark-mode .dataTables_wrapper table.dataTable tbody tr:hover {
  background-color: rgba(30, 41, 59, 0.3) !important;
}

/* DT Buttons (CSV / Excel export icons) */
.dt-buttons {
  margin-bottom: 1rem !important;
  display: flex !important;
  gap: 0.5rem !important;
}

.dt-button {
  background: var(--slate-100) !important;
  border: 1px solid var(--slate-200) !important;
  color: var(--slate-600) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 0.45rem 1rem !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.dt-button:hover {
  background: var(--slate-200) !important;
  color: #0d9488 !important;
  border-color: var(--slate-300) !important;
}

html.dark .dt-button,
.dark-mode .dt-button {
  background: var(--slate-800) !important;
  border-color: var(--slate-700) !important;
  color: var(--slate-400) !important;
}

html.dark .dt-button:hover,
.dark-mode .dt-button:hover {
  background: var(--slate-700) !important;
  color: #2dd4bf !important;
  border-color: var(--slate-600) !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.4rem 0.85rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--slate-200) !important;
  margin-left: 0.25rem !important;
  background: #ffffff !important;
  color: var(--slate-600) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--slate-100) !important;
  color: #0d9488 !important;
  border-color: var(--slate-300) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #0d9488 !important;
  color: white !important;
  border-color: #0f766e !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--slate-900) !important;
  border-color: var(--slate-700) !important;
  color: var(--slate-400) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--slate-800) !important;
  color: #2dd4bf !important;
  border-color: var(--slate-600) !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #0d9488 !important;
  color: white !important;
  border-color: #0d9488 !important;
}

/* Details summary side-accordion hover effects */
summary.flex.justify-between {
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  margin-top: 0.25rem !important;
  background-color: transparent !important;
  transition: all 0.15s ease !important;
}

summary.flex.justify-between:hover {
  background-color: rgba(241, 245, 249, 0.7) !important;
}


html.dark summary.flex.justify-between:hover,
.dark-mode summary.flex.justify-between:hover {
  background-color: rgba(30, 41, 59, 0.4) !important;
}

/* Shimmer / Skeleton Animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite linear !important;
}

.skeleton-text {
  height: 0.75rem;
  border-radius: 4px;
  opacity: 0.5;
}

.skeleton-title {
  height: 1.25rem;
  width: 60%;
  border-radius: 4px;
  opacity: 0.6;
}

.skeleton-circle {
  border-radius: 50%;
  opacity: 0.6;
}

/* ===================================================================   Premium Subscription Tier & Simulated Paywall Checkout Styles
   ========================================================================== */

/* Premium Gold Gradient and Badges */
.premium-gold-gradient {
  background: linear-gradient(135deg, #4EA8A0 0%, #488880 100%) !important;
}

.premium-badge-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  color: #FFFFFF;
  background: linear-gradient(135deg, #4EA8A0 0%, #488880 100%);
  box-shadow: 0 4px 12px rgba(78, 168, 160, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  line-height: 1;
  height: fit-content;
}

/* Premium In-Tab Paywall Container */
.premium-paywall-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 2rem;
  background: radial-gradient(circle at 50% 50%, rgba(78, 168, 160, 0.07) 0%, transparent 70%);
}

.premium-paywall-card {
  background: rgba(10, 20, 31, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(78, 168, 160, 0.25) !important;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(78, 168, 160, 0.15) !important;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  color: #FFFFFF !important;
}

.dark-mode .premium-paywall-card {
  background: rgba(10, 20, 31, 0.9) !important;
  border-color: rgba(78, 168, 160, 0.3) !important;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(78, 168, 160, 0.2) !important;
}

.premium-paywall-card:hover {
  transform: translateY(-4px);
  border-color: rgba(78, 168, 160, 0.45) !important;
  box-shadow: 0 25px 50px -12px rgba(78, 168, 160, 0.25) !important;
}

/* Lock Icon Animation */
.lock-icon-container {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(78, 168, 160, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  border: 2px solid rgba(78, 168, 160, 0.25);
  color: #4EA8A0;
  font-size: 28px;
  position: relative;
}

.premium-paywall-card:hover .lock-icon-container {
  animation: shake-lock 0.5s ease-in-out;
  color: #6dc4bc;
  background: rgba(78, 168, 160, 0.18);
  border-color: rgba(78, 168, 160, 0.45);
}

@keyframes shake-lock {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20%,
  60% {
    transform: rotate(-8deg);
  }

  40%,
  80% {
    transform: rotate(8deg);
  }
}

/* In-Drawer Closed Section */
.drawer-premium-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: rgba(10, 20, 31, 0.4) !important;
  border: 1px dashed rgba(78, 168, 160, 0.35) !important;
  border-radius: 16px;
  text-align: center;
  margin: 1rem 0;
  color: #FFFFFF !important;
}

.dark-mode .drawer-premium-locked {
  background: rgba(10, 20, 31, 0.5) !important;
  border-color: rgba(78, 168, 160, 0.35) !important;
}

/* Grid overlay background inspired by qsnxt.ca */
.qsnxt-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(72, 136, 128, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 136, 128, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}

/* Simulated Checkout Modal Styles */
.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px);
  z-index: 100001;
  /* Above drawer notifications */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.checkout-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  max-width: 450px;
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: slide-up-modal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-up-modal {
  from {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Spinner for payment simulator */
.payment-spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 3px solid #ffffff;
  width: 20px;
  height: 20px;
  animation: spin-payment 0.8s linear infinite;
}

@keyframes spin-payment {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Active dropdown helper to force visible state (Task 10) */
.active-dropdown {
  transform: scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ===================================================================   P3 OVERALL RATING (OVR) PLATES
   ========================================================================== */
.ovr-plate {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 5;
  min-width: 44px;
  padding: 4px 7px 3px 7px;
  border-radius: 8px;
  text-align: center;
  line-height: 1;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ovr-num {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.ovr-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  opacity: 0.85;
}

.ovr-plate.ovr-legend {
  border-color: rgba(251, 191, 36, 0.95);
  background: linear-gradient(160deg, #0C0A09, #44403C);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 18px rgba(251, 191, 36, 0.55);
}

.ovr-plate.ovr-legend .ovr-num {
  background: linear-gradient(180deg, #FEF9C3 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ovr-plate.ovr-legend .ovr-sub {
  color: #FCD34D;
}

.ovr-plate.ovr-icon {
  border-color: rgba(250, 204, 21, 0.75);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 14px rgba(250, 204, 21, 0.45);
}

.ovr-plate.ovr-icon .ovr-num {
  background: linear-gradient(180deg, #FDE68A 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ovr-plate.ovr-icon .ovr-sub {
  color: #FACC15;
}

.ovr-plate.ovr-gold {
  border-color: rgba(217, 119, 6, 0.6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 0 10px rgba(217, 119, 6, 0.3);
}

.ovr-plate.ovr-gold .ovr-num {
  color: #FBBF24;
}

.ovr-plate.ovr-gold .ovr-sub {
  color: #D97706;
}

.ovr-plate.ovr-silver {
  border-color: rgba(148, 163, 184, 0.55);
}

.ovr-plate.ovr-silver .ovr-num {
  color: var(--slate-200);
}

.ovr-plate.ovr-silver .ovr-sub {
  color: var(--slate-400);
}

.ovr-plate.ovr-bronze {
  border-color: rgba(180, 83, 9, 0.5);
}

.ovr-plate.ovr-bronze .ovr-num {
  color: #FDBA74;
}

.ovr-plate.ovr-bronze .ovr-sub {
  color: #B45309;
}

/* Inline OVR chip used in comparison rows */
.ovr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ovr-chip.ovr-legend {
  color: #FCD34D;
  border-color: rgba(251, 191, 36, 0.85);
  background: linear-gradient(160deg, #0C0A09, #44403C);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.45);
}

.ovr-chip.ovr-icon {
  color: #FACC15;
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.35);
}

.ovr-chip.ovr-gold {
  color: #FBBF24;
  border-color: rgba(217, 119, 6, 0.55);
}

.ovr-chip.ovr-silver {
  color: var(--slate-200);
  border-color: rgba(148, 163, 184, 0.5);
}

.ovr-chip.ovr-bronze {
  color: #FDBA74;
  border-color: rgba(180, 83, 9, 0.45);
}

/* ===================================================================   F1 LIVE-TIMING "BEST VALUE" HIGHLIGHT (purple = fastest sector)
   ========================================================================== */
.best-val {
  color: #A855F7 !important;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
  position: relative;
}

.best-val::after {
  content: "●";
  font-size: 7px;
  color: #A855F7;
  position: relative;
  top: -6px;
  margin-left: 3px;
  animation: best-val-pulse 1.6s ease-in-out infinite;
}

@keyframes best-val-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

/* ===================================================================   GLOSSARY TOOLTIPS (hover explanations for casual fans)
   ========================================================================== */
.tip-host {
  position: relative;
  cursor: help;
}

.tip-host::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.95);
  color: var(--slate-100);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 90;
}

.tip-host:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================================================================   YOU VS. THE PROS — amateur self-comparison panel
   ========================================================================== */
.yvp-panel {
  position: relative;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(99, 102, 241, 0.65), rgba(168, 85, 247, 0.55), rgba(99, 102, 241, 0.25));
  background-size: 200% 200%;
  animation: yvp-border-flow 6s ease infinite;
}

@keyframes yvp-border-flow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.yvp-inner {
  border-radius: 15px;
  background-color: var(--bg-card);
  padding: 20px 24px;
}

.yvp-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yvp-inputs input[type="number"] {
  width: 110px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.yvp-inputs input[type="number"]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.yvp-inputs .form-group {
  margin-bottom: 0;
}

.yvp-inputs label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.yvp-go-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--accent-600), #7C3AED);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.yvp-go-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

.yvp-stat-box {
  background-color: var(--bg-metric);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.yvp-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.yvp-stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.yvp-stat-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Peloton percentile bar */
.yvp-pace-bar {
  position: relative;
  height: 14px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--success) 0%, #FACC15 45%, #F97316 70%, var(--danger) 100%);
  margin: 26px 8px 30px 8px;
}

.yvp-pace-marker {
  position: absolute;
  top: -7px;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background-color: var(--text-primary);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}

.yvp-pace-marker.you {
  background-color: #A855F7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.8);
}

.yvp-pace-label {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.yvp-pace-label.below {
  top: auto;
  bottom: -22px;
}

/* ===================================================================   GHOST-PRO OVERLAY STAT BARS (My Rider Profile)
   Your bar (full color) over the pro's bar (low opacity ghost)
   ========================================================================== */
.gp-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gp-label {
  width: 170px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-align: right;
}

.gp-track {
  position: relative;
  flex-grow: 1;
  height: 26px;
  border-radius: 8px;
  background-color: var(--bg-metric);
  overflow: hidden;
}

.gp-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform-origin: left center;
  animation: gp-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gp-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.gp-bar-pro {
  background: linear-gradient(90deg, rgba(100, 116, 139, 0.22), rgba(100, 116, 139, 0.32));
  border: 1px dashed rgba(100, 116, 139, 0.35);
}

.gp-num-pro {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding-right: 8px;
  white-space: nowrap;
}

.gp-bar-you {
  background: linear-gradient(90deg, var(--accent-600), #7C3AED);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.45);
  z-index: 2;
  height: 16px;
  top: 5px;
  border-radius: 6px;
}

.gp-num-you {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  padding-right: 7px;
}

@media (max-width: 640px) {
  .gp-label {
    width: 110px;
    font-size: 9px;
  }
}

/* Select styling shared by rider-profile dropdowns */
.rp-select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.rp-select:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* ===================================================================   SHAREABLE AMATEUR CARD (collectible-card style)
   ========================================================================== */
.p3card {
  width: 250px;
  border-radius: 18px;
  padding: 18px 20px 14px 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--slate-900) 0%, var(--accent-950) 60%, var(--accent-900) 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.45);
  color: var(--slate-50);
  text-align: center;
}

.p3card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 12%, rgba(255, 255, 255, 0.10), transparent 55%);
  pointer-events: none;
}

.p3card-icon {
  border-color: rgba(250, 204, 21, 0.6);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.45), 0 0 22px rgba(250, 204, 21, 0.30);
}

.p3card-gold {
  border-color: rgba(217, 119, 6, 0.55);
  box-shadow: 0 18px 36px rgba(2, 6, 23, 0.45), 0 0 16px rgba(217, 119, 6, 0.25);
}

.p3card-silver {
  border-color: rgba(148, 163, 184, 0.55);
}

.p3card-bronze {
  border-color: rgba(180, 83, 9, 0.5);
}

.p3card-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.7);
  margin-bottom: 12px;
}

.p3card-main {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 8px;
}

.p3card-ovr-num {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #FDE68A 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.p3card-silver .p3card-ovr-num {
  background: linear-gradient(180deg, var(--slate-100), var(--slate-400));
  -webkit-background-clip: text;
  background-clip: text;
}

.p3card-bronze .p3card-ovr-num {
  background: linear-gradient(180deg, #FDBA74, #B45309);
  -webkit-background-clip: text;
  background-clip: text;
}

.p3card-ovr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(226, 232, 240, 0.75);
  margin-top: 2px;
}

.p3card-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-600), #7C3AED);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
}

.p3card-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 6px 0 2px 0;
}

.p3card-climb {
  font-size: 10px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.75);
  margin-bottom: 6px;
}

.p3card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
  padding-top: 10px;
  margin-top: 8px;
}

.p3card-stat-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.p3card-stat-lbl {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(148, 163, 184, 0.9);
  margin-top: 2px;
}

.p3card-footer {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--slate-400); /* was 0.6 alpha — AA fail on dark (audit P0.5) */
  margin-top: 12px;
  text-transform: uppercase;
}

/* ===================================================================   PRO P3 CARD — GRID OVERLAY (click OVR plate to flip)
   ========================================================================== */
.p3card-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: linear-gradient(160deg, var(--slate-900) 0%, var(--accent-950) 60%, var(--accent-900) 100%);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px 12px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--slate-50);
}

.p3card-grid-overlay--visible {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

/* Inline P3 card — always-visible variant used in the rider drawer.
   Reuses all .gco-* content classes; only the container differs from the
   absolute-positioned grid overlay above. */
.gco-inline {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  background: linear-gradient(160deg, var(--slate-900) 0%, var(--accent-950) 60%, var(--accent-900) 100%);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 18px 14px;
  color: var(--slate-50);
}

.gco-inline.gco-icon {
  border-color: rgba(250, 204, 21, 0.55);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45), 0 0 18px rgba(250, 204, 21, 0.22);
}

.gco-inline.gco-gold {
  border-color: rgba(217, 119, 6, 0.55);
}

.gco-inline.gco-silver {
  border-color: rgba(148, 163, 184, 0.55);
}

.gco-inline.gco-bronze {
  border-color: rgba(180, 83, 9, 0.50);
}

/* "na" tier — rating not computable (no real sub-ratings, no UCI rank).
   Muted on purpose: the card shows "—" + an insufficient-data line, and must
   never look like a bronze/silver award (audit P0.3). */
.gco-inline.gco-na {
  border-color: rgba(100, 116, 139, 0.4);
  filter: saturate(0.6);
}
.ovr-chip.ovr-na {
  background: rgba(100, 116, 139, 0.18);
  color: var(--slate-400);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Legend tier — retired all-time greats (Icon-tier style: near-black + warm gold).
   Applies to both the inline drawer card and the grid overlay card. */
.gco-inline.gco-legend,
.p3card-grid-overlay.gco-legend {
  background: linear-gradient(160deg, #0C0A09 0%, #292524 52%, #854D0E 135%);
  border: 1px solid rgba(251, 191, 36, 0.70);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.55), 0 0 28px rgba(251, 191, 36, 0.28);
}

.gco-legend .gco-ovr-num {
  background: linear-gradient(180deg, #FEF9C3, var(--warning));
  -webkit-background-clip: text;
  background-clip: text;
}

.gco-legend .gco-footer {
  color: rgba(252, 211, 77, 0.85);
}

.gco-legend-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 3px 11px;
  border-radius: 9999px;
  background: linear-gradient(120deg, #FDE68A, var(--warning));
  color: #451A03;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Same treatment for the grid card of a legend */
.p3-legend-card {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 10px 26px rgba(120, 53, 15, 0.18), 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
}

.p3-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 9999px;
  background: linear-gradient(120deg, #FDE68A, var(--warning));
  color: #451A03;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.p3card-overlay-close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  line-height: 1;
  padding: 0;
}

.p3card-overlay-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.gco-ovr-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #FDE68A 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gco-silver .gco-ovr-num {
  background: linear-gradient(180deg, var(--slate-100), var(--slate-400));
  -webkit-background-clip: text;
  background-clip: text;
}

.gco-bronze .gco-ovr-num {
  background: linear-gradient(180deg, #FDBA74, #B45309);
  -webkit-background-clip: text;
  background-clip: text;
}

.gco-ovr-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(226, 232, 240, 0.65);
  margin-top: 1px;
}

.gco-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--slate-50);
  margin: 7px 0 2px;
  text-align: center;
  line-height: 1.15;
}

.gco-sub {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.6);
  text-align: center;
  margin-bottom: 10px;
}

.gco-disc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
  width: 100%;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 10px;
}

.gco-disc-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.gco-disc-icon {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1;
}

.gco-disc-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.gco-disc-lbl {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--slate-400); /* was 0.75 alpha — AA fail on dark (audit P0.5) */
  text-transform: uppercase;
}

.gco-footer {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--slate-400); /* was 0.45 alpha — AA fail on dark (audit P0.5) */
  text-transform: uppercase;
  margin-top: 10px;
}

/* ===================================================================   VS CARD COMPARISON (Account page — You vs Pro side-by-side)
   ========================================================================== */
.p3card-vs-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.p3card-vs-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.p3card-vs-who {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-400); /* was 0.65 alpha — AA fail on dark (audit P0.5) */
}

.vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  align-self: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: rgba(148, 163, 184, 0.35);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  padding-bottom: 28px;
  /* offset for the who-label above cards */
}

/* Compact card variant for side-by-side comparison */
.p3card.p3card-sm {
  width: 188px;
  padding: 13px 13px 10px;
  border-radius: 14px;
}

.p3card.p3card-sm .p3card-ovr-num {
  font-size: 34px;
}

.p3card.p3card-sm .p3card-avatar {
  width: 54px;
  height: 54px;
  font-size: 19px;
}

.p3card.p3card-sm .p3card-name {
  font-size: 13px;
}

.p3card.p3card-sm .p3card-stat-val {
  font-size: 13px;
}

.p3card.p3card-sm .p3card-stat-lbl {
  font-size: 7px;
}

.p3card.p3card-sm .p3card-climb {
  font-size: 9px;
}

.p3card.p3card-sm .p3card-stats {
  gap: 4px;
  padding-top: 8px;
}

/* Pro avatar uses flag emoji — larger font inside avatar circle */
.p3card-avatar-flag {
  font-size: 32px !important;
}

.p3card.p3card-sm .p3card-avatar-flag {
  font-size: 26px !important;
}

/* Smaller download button for comparison context */
.yvp-go-btn.yvp-go-btn-sm {
  font-size: 10px !important;
  padding: 6px 14px !important;
}

/* ===================================================================   TRENDING / HOT BADGE on top-3 OVR riders
   ========================================================================== */
.trending-hot-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #FACC15;
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: trending-pulse 2.5s ease-in-out infinite;
}

@keyframes trending-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
  }

  50% {
    opacity: 0.85;
    box-shadow: 0 0 6px 2px rgba(250, 204, 21, 0.25);
  }
}

/* ===================================================================   RACE COUNTDOWN TICKER (below main nav bar)
   ========================================================================== */
.race-countdown-ticker {
  background: linear-gradient(90deg, var(--slate-900) 0%, var(--accent-950) 50%, var(--slate-900) 100%);
  border-bottom: 1px solid rgba(99, 102, 241, 0.25);
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

.rct-label {
  font-weight: 700;
  /* full-opacity slate-400: 0.7 alpha measured 4.15:1 on the dark ticker —
     fails WCAG AA for this 9.5px text (audit P0.5). Full opacity: 7.34:1. */
  color: var(--slate-400);
  text-transform: uppercase;
}

.rct-sep {
  /* decorative separator (aria-hidden in markup) — may stay dim */
  color: rgba(99, 102, 241, 0.6);
  font-weight: 700;
}

.rct-countdown {
  font-weight: 800;
  font-size: 11px;
  color: var(--accent-300);
  min-width: 20px;
  text-align: right;
}

/* ── Power Rankings Table ── */
.view-toggle-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vtbtn {
  padding: 5px 14px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 1px solid var(--slate-700);
  background: transparent;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 0.15s;
}

.vtbtn:hover {
  background: var(--slate-800);
  color: var(--slate-300);
}

.vtbtn.vtbtn-active {
  background: var(--accent-900);
  border-color: var(--accent-500);
  color: var(--accent-300);
}

.rktable {
  border-collapse: collapse;
  width: 100%;
}

.rk-thead-row th {
  padding: 8px 12px;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
  border-bottom: 1px solid var(--slate-800);
  text-align: left;
  white-space: nowrap;
}

.rktd {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #1e293b20;
}

.rkrow {
  cursor: pointer;
  transition: background 0.12s;
}

.rkrow:hover {
  background: rgba(99, 102, 241, 0.07);
}

.rktd-rank {
  font-size: 13px;
  text-align: center;
  width: 44px;
  color: var(--slate-500);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}

.rktd-name {
  min-width: 160px;
}

.rk-flag {
  margin-right: 6px;
  font-size: 14px;
}

.rk-last {
  font-size: 13px;
  font-weight: 900;
  color: var(--success-strong);
  letter-spacing: 0.02em;
}

/* Rider LAST NAME in the P3 accent — the name is the card's anchor and was
   drowning in the same slate as everything else. Emerald pops on both card
   backgrounds; the underline hairline ties it to the OVR chip accent. */
.p3-rider-lastname {
  color: #047857;
  letter-spacing: 0.035em;
  background-image: linear-gradient(90deg, rgba(16, 185, 129, 0.55), rgba(99, 102, 241, 0.35));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  padding-bottom: 1px;
}
html.dark .p3-rider-lastname {
  color: #6ee7b7;
}

.rk-first {
  font-size: 11px;
  color: var(--slate-500);
}

/* Rider "type"/specialty badge on the cyclist cards.
   Uses the P3 palette + theme variables so it matches the other card fields
   (.p3-tile stat band, .ovr-chip, .p3-tbl-badge) in both light & dark mode,
   instead of a hard-coded navy/blue chip that clashed with the card. */
.rk-spec-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent-color);
  border: 1px solid var(--accent-ring);
  white-space: nowrap;
}

.dark-mode .rk-spec-badge,
.dark .rk-spec-badge {
  background: rgba(129, 140, 248, 0.14);
  color: var(--accent-300);
  border-color: rgba(129, 140, 248, 0.32);
}

.rktd-team {
  white-space: nowrap;
}

.rk-team-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

.rktd-stat {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-400);
}

/* ── Race Top Contenders chips ── */
.contender-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--slate-700);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color 0.15s;
}

.contender-chip:hover {
  border-color: var(--warning);
}

.contender-rank {
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: var(--warning);
  min-width: 16px;
}

.contender-flag {
  font-size: 14px;
}

.contender-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--slate-200);
  letter-spacing: 0.02em;
}

.contender-ovr {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--slate-400);
  background: rgba(99, 102, 241, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

/* ── Athlete Spotlight Strip ── */
.sp-strip {
  margin-bottom: 0;
}

.sp-strip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--warning);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sp-cards-row {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sp-card {
  position: relative;
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 260px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--slate-800);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.sp-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-500);
}

.sp-team-bar {
  height: 4px;
  width: 100%;
}

.sp-inner {
  padding: 10px 12px 10px;
}

.sp-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1px;
}

.sp-flag {
  font-size: 14px;
}

.sp-last {
  font-size: 13px;
  font-weight: 900;
  color: var(--slate-200);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-first {
  font-size: 11px;
  color: var(--slate-500);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sp-ovr {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.sp-wkg {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--slate-400);
}

.sp-spec {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-400);
  background: rgba(30, 58, 138, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sp-rank-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: var(--slate-400);
  background: rgba(15, 23, 42, 0.7);
  border-radius: 4px;
  padding: 1px 5px;
}

.sp-rank-0 {
  color: var(--warning);
}

.sp-rank-1 {
  color: var(--slate-400);
}

.sp-rank-2 {
  color: #cd7f32;
}

/* ── Discipline Radar (Compare page) ── */
.radar-section {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--slate-800);
  border-radius: 16px;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.radar-header {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: var(--slate-400);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.radar-svg-wrap svg {
  overflow: visible;
  display: block;
  margin: 0 auto;
}

.radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ===================================================================   HOMEPAGE — cinematic landing (hm-* classes, used by mod_home.py)
   ========================================================================== */

/* Staggered hero entrance */
.hm-fade-up {
  opacity: 0;
  transform: translateY(18px);
  animation: hmFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hm-d1 {
  animation-delay: 0.05s;
}

.hm-d2 {
  animation-delay: 0.18s;
}

.hm-d3 {
  animation-delay: 0.32s;
}

.hm-d4 {
  animation-delay: 0.46s;
}

.hm-d5 {
  animation-delay: 0.62s;
}

@keyframes hmFadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Gradient display text */
.hm-text-gradient {
  background: linear-gradient(90deg, #34D399 0%, #2DD4BF 55%, var(--accent-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ambient orbs */
.hm-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}

.hm-orb-emerald {
  width: 480px;
  height: 480px;
  background: var(--success);
  top: -160px;
  right: -120px;
  animation: hmOrb 11s ease-in-out infinite;
}

.hm-orb-indigo {
  width: 420px;
  height: 420px;
  background: var(--accent-500);
  bottom: -180px;
  left: -100px;
  animation: hmOrb 13s ease-in-out infinite reverse;
}

@keyframes hmOrb {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-40px, 30px) scale(1.12);
  }
}

/* Speed lines streaking across the hero */
.hm-speedlines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hm-speedline {
  position: absolute;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.45), transparent);
  animation: hmSpeed 3s linear infinite;
}

@keyframes hmSpeed {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(110vw);
  }
}

/* Rotating audience word */
.hm-roller {
  display: inline-flex;
  height: 1.35em;
  overflow: hidden;
  vertical-align: bottom;
}

.hm-roller-inner {
  display: flex;
  flex-direction: column;
  animation: hmRoll 9s cubic-bezier(0.85, 0, 0.15, 1) infinite;
}

.hm-roller-inner span {
  display: block;
  height: 1.35em;
  line-height: 1.35em;
  white-space: nowrap;
}

@keyframes hmRoll {

  0%,
  19% {
    transform: translateY(0);
  }

  25%,
  44% {
    transform: translateY(-1.35em);
  }

  50%,
  69% {
    transform: translateY(-2.7em);
  }

  75%,
  94% {
    transform: translateY(-4.05em);
  }

  100% {
    transform: translateY(-5.4em);
  }
}

/* Hero CTAs */
.hm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  background: var(--cta-gradient);
  color: var(--text-on-cta);
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.30);
  transition: transform 0.18s, box-shadow 0.18s;
}

.hm-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(16, 185, 129, 0.42);
}

.hm-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform 0.18s, background 0.18s;
}

.hm-btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.10);
}

/* Hero stat cells */
.hm-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
}

/* P3 card deck (top 3, fanned, spreads on hover) */
.hm-deck {
  position: relative;
  width: 320px;
  height: 430px;
}

.hm-deck-slot {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 264px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-deck-slot .gco-inline {
  width: 264px;
  max-width: none;
  pointer-events: none;
}

.hm-deck-c1 {
  transform: translateX(-50%) rotate(-9deg) translateY(16px);
  z-index: 1;
}

.hm-deck-c2 {
  transform: translateX(-50%) rotate(8deg) translateY(8px);
  z-index: 2;
}

.hm-deck-c3 {
  z-index: 3;
  animation: hmFloat3 5.5s ease-in-out infinite;
}

@keyframes hmFloat3 {

  0%,
  100% {
    transform: translateX(-50%) rotate(-1deg) translateY(0);
  }

  50% {
    transform: translateX(-50%) rotate(-1deg) translateY(-12px);
  }
}

.hm-deck:hover .hm-deck-c1 {
  transform: translateX(-104%) rotate(-14deg) translateY(10px);
}

.hm-deck:hover .hm-deck-c2 {
  transform: translateX(4%) rotate(13deg) translateY(4px);
}

.hm-deck:hover .hm-deck-c3 {
  animation: none;
  transform: translateX(-50%) rotate(0deg) translateY(-14px) scale(1.04);
}

/* Live ratings ticker */
.hm-ticker {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.hm-ticker-label {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px 4px 18px;
  margin-right: 10px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--success-strong);
  text-transform: uppercase;
  background: var(--slate-950);
  border-right: 1px solid rgba(52, 211, 153, 0.25);
}

.hm-ticker-track {
  display: inline-flex;
  align-items: center;
  animation: hmTicker 36s linear infinite;
  will-change: transform;
}

.hm-ticker:hover .hm-ticker-track {
  animation-play-state: paused;
}

@keyframes hmTicker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Hero mountain divider (page background color rising into the hero) */
.hm-divider path {
  fill: var(--slate-50);
}

.dark .hm-divider path {
  fill: var(--slate-950);
}

/* Duel */
.hm-duel-avatar {
  width: 76px;
  height: 76px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  color: var(--slate-50);
  background: linear-gradient(160deg, var(--slate-800), var(--slate-900));
  border: 3px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.5);
}

.hm-duel-avatar-sm {
  width: 56px;
  height: 56px;
  font-size: 17px;
}

.hm-tier-ring-legend {
  border-color: rgba(251, 191, 36, 0.95);
  box-shadow: 0 0 26px rgba(251, 191, 36, 0.40);
}

.hm-tier-ring-icon {
  border-color: rgba(250, 204, 21, 0.85);
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.30);
}

.hm-tier-ring-gold {
  border-color: rgba(217, 119, 6, 0.85);
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.25);
}

.hm-tier-ring-silver {
  border-color: rgba(148, 163, 184, 0.85);
}

.hm-tier-ring-bronze {
  border-color: rgba(180, 83, 9, 0.8);
}

.hm-vs-badge {
  width: 58px;
  height: 58px;
  border-radius: 9999px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--warning), var(--danger));
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12), 0 10px 26px rgba(239, 68, 68, 0.35);
  animation: hmVsPulse 2.4s ease-in-out infinite;
}

@keyframes hmVsPulse {

  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12), 0 10px 26px rgba(239, 68, 68, 0.35);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0.05), 0 10px 30px rgba(239, 68, 68, 0.50);
  }
}

.hm-duel-track {
  flex: 1;
  height: 7px;
  max-width: 220px;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.hm-duel-track:first-child {
  display: flex;
  justify-content: flex-end;
}

.hm-duel-bar {
  height: 100%;
  border-radius: 9999px;
  animation: hmGrowX 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hm-duel-bar-a {
  background: linear-gradient(90deg, #059669, var(--data-a));
  margin-left: auto;
}

.hm-duel-bar-b {
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

@keyframes hmGrowX {
  from {
    width: 0;
  }
}

/* Season road timeline */
.hm-road-track {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-end;
  min-width: max-content;
  padding: 6px 8px 0;
}

.hm-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 6px;
  border-radius: 3px;
  background: var(--slate-800);
}

.dark .hm-road {
  background: var(--slate-800);
}

.hm-road-dash {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 2px;
  border-radius: 2px;
  opacity: 0.9;
  background-image: linear-gradient(90deg, #FBBF24 0 22px, transparent 22px 44px);
  background-size: 44px 100%;
  animation: hmRoadDash 1.1s linear infinite;
}

@keyframes hmRoadDash {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: -44px;
  }
}

.hm-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  min-width: 280px;
  flex: 1;
}

.hm-milestone-card {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.dark .hm-milestone-card {
  background: var(--slate-900);
  border-color: var(--slate-800);
}

.hm-milestone:hover .hm-milestone-card {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12);
  border-color: #6EE7B7;
}

.hm-milestone-dot {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: var(--success);
  border: 3px solid var(--slate-50);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  z-index: 1;
  transition: transform 0.2s;
}

.dark .hm-milestone-dot {
  border-color: var(--slate-950);
}

.hm-milestone:hover .hm-milestone-dot {
  transform: scale(1.3);
}

/* Virtual podium */
.hm-podium-bar {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform-origin: bottom;
  animation: hmGrowY 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  box-shadow: 0 -4px 18px rgba(2, 6, 23, 0.12) inset;
}

@keyframes hmGrowY {
  from {
    transform: scaleY(0);
  }
}

.hm-podium-rank {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(2, 6, 23, 0.4);
}

/* Explore tiles */
.hm-tile {
  padding: 20px;
  border-radius: 18px;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid var(--slate-200);
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.05);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.dark .hm-tile {
  background: var(--slate-900);
  border-color: var(--slate-800);
}

.hm-tile:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.12);
  border-color: var(--slate-400);
}

/* --- FX layer: TRUE 3D tilt + holographic front card ---------------------- */
.hm-deck {
  transform: translate(calc(var(--pxx, 0px) * 0.6), calc(var(--pxy, 0px) * 0.6));
}

.hm-deck-c3 .gco-inline {
  /* perspective() inside the transform guarantees real 3D depth (non-zero
     m34) regardless of ancestor transforms flattening the 3D context. */
  transform: perspective(950px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transition: transform 0.16s ease-out, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.hm-deck:hover .hm-deck-c3 .gco-inline {
  box-shadow: 0 28px 60px rgba(2, 6, 23, 0.65), 0 0 40px rgba(52, 211, 153, 0.18);
}

.hm-deck-c3 .gco-inline::after {
  /* prismatic holo foil + cursor glare (FUT-style) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* The original FUT look: cursor-tracked glare + prismatic foil that drifts
     with --glx/--gly. The "seam" the user saw was the bright glare core
     reaching the card edge — fixed by clamping --glx/--gly in JS to a safe
     inner band (initHomeFX), so the foil keeps drifting but no edge shows. */
  background:
    radial-gradient(farthest-corner circle at var(--glx, 50%) var(--gly, 35%),
      rgba(255, 255, 255, 0.55) 4%, rgba(255, 255, 255, 0.12) 18%, transparent 46%),
    repeating-linear-gradient(115deg,
      rgba(0, 231, 255, 0.20) 0%, rgba(255, 0, 231, 0.20) 6%, rgba(255, 222, 0, 0.20) 12%,
      rgba(0, 255, 143, 0.20) 18%, rgba(0, 231, 255, 0.20) 24%);
  background-size: 100% 100%, 280% 280%;
  background-position: center, var(--glx, 50%) var(--gly, 35%);
  mix-blend-mode: color-dodge;
  opacity: 0.4;
  animation: hmHoloPan 6s ease-in-out infinite alternate;
  transition: opacity 0.3s;
}

.hm-deck:hover .hm-deck-c3 .gco-inline::after {
  opacity: 0.95;
  animation: none;
}

@keyframes hmHoloPan {
  from {
    background-position: center, 38% 30%;
  }

  to {
    background-position: center, 62% 70%;
  }
}

.hm-deck-c3 .gco-inline::before {
  /* automatic light sweep when idle */
  content: "";
  position: absolute;
  top: -130%;
  bottom: -130%;
  width: 70px;
  left: -110px;
  background: linear-gradient(100deg, transparent,
      rgba(125, 211, 252, 0.16) 35%, rgba(255, 255, 255, 0.30) 50%,
      rgba(167, 139, 250, 0.16) 65%, transparent);
  transform: rotate(16deg);
  animation: hmHolo 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes hmHolo {

  0%,
  55% {
    left: -130px;
  }

  88%,
  100% {
    left: 135%;
  }
}

/* --- Scroll-choreographed reveals (only when JS is alive) ----------------- */
/* transform+opacity only: the old 10px animated blur over whole sections was
   GPU-expensive (visible frame drops while the À la une deck initialised) and
   read as "smeared" rather than elegant. A shorter fade+rise feels crisper. */
.hm-js .hm-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-js .hm-reveal-on {
  opacity: 1;
  transform: none;
}

/* THE choreography fix: growth animations are PAUSED while their section is
   off-screen and only play once the reveal fires — so the duel bars race out
   and the podium rises exactly when the user is watching. */
.hm-js .hm-reveal .hm-duel-bar,
.hm-js .hm-reveal .hm-podium-bar {
  animation-play-state: paused;
}

.hm-js .hm-reveal-on .hm-duel-bar,
.hm-js .hm-reveal-on .hm-podium-bar {
  animation-play-state: running;
}

/* Staggered cascade: tiles, race milestones and podium columns enter one by
   one once their parent section is revealed. */
.hm-js .hm-reveal .hm-tile,
.hm-js .hm-reveal .hm-milestone,
.hm-js .hm-reveal .hm-pod-col {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-js .hm-reveal-on .hm-tile,
.hm-js .hm-reveal-on .hm-milestone,
.hm-js .hm-reveal-on .hm-pod-col {
  opacity: 1;
  transform: none;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(1),
.hm-js .hm-reveal-on .hm-milestone:nth-child(2),
.hm-js .hm-reveal-on .hm-pod-col:nth-child(1) {
  transition-delay: 0.10s;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(2),
.hm-js .hm-reveal-on .hm-milestone:nth-child(3),
.hm-js .hm-reveal-on .hm-pod-col:nth-child(2) {
  transition-delay: 0.22s;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(3),
.hm-js .hm-reveal-on .hm-milestone:nth-child(4),
.hm-js .hm-reveal-on .hm-pod-col:nth-child(3) {
  transition-delay: 0.34s;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(4),
.hm-js .hm-reveal-on .hm-milestone:nth-child(5),
.hm-js .hm-reveal-on .hm-pod-col:nth-child(4) {
  transition-delay: 0.46s;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(5),
.hm-js .hm-reveal-on .hm-milestone:nth-child(6),
.hm-js .hm-reveal-on .hm-pod-col:nth-child(5) {
  transition-delay: 0.58s;
}

.hm-js .hm-reveal-on .hm-tile:nth-child(6),
.hm-js .hm-reveal-on .hm-milestone:nth-child(7) {
  transition-delay: 0.70s;
}

/* --- Cursor spotlight over dark panels ------------------------------------ */
.hm-spot {
  position: relative;
}

.hm-spot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  background: radial-gradient(540px circle at var(--mx, 50%) var(--my, 40%), rgba(99, 102, 241, 0.13), transparent 62%);
}

/* --- Breakaway simulation (broadcast monitor) ------------------------------ */
.hm-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 0.05 white scanlines + the grid overlay + the glow stacked into a hazy,
     "blurred" wash over the race sim — keep the CRT vibe, but faint. */
  opacity: 0.025;
  border-radius: inherit;
  z-index: 2;
  background: repeating-linear-gradient(0deg, #FFFFFF 0 1px, transparent 1px 3px);
}

.hm-sim-svg {
  width: 100%;
  height: auto;
  display: block;
}

.hm-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hm-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--danger);
  animation: hmBlink 1.1s steps(2, start) infinite;
}

@keyframes hmBlink {
  to {
    visibility: hidden;
  }
}

.hm-sim-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}

.hm-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 10px currentColor;
}

/* --- Grand Prix P3: live leaderboard, telemetry, race radio --------------- */
.hm-tele-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
}

.hm-tele-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--slate-50);
  line-height: 1;
}

.hm-tele-lbl {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--slate-400) /* P4: slate-500 = 3.96 on the dark sim panel */;
  text-transform: uppercase;
  margin-top: 4px;
}

.hm-board {
  position: relative;
}

.hm-board-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-radius: 10px;
  cursor: pointer;
  transition: top 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s;
}

.hm-board-row:hover {
  background: rgba(255, 255, 255, 0.07);
}

.hm-board-rank {
  width: 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--slate-500);
}

.hm-board-name {
  flex: 1;
  font-size: 11px;
  font-weight: 900;
  color: var(--slate-100);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hm-board-gap {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--slate-400);
}

.hm-comm {
  min-height: 96px;
}

.hm-comm-line {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-300);
  line-height: 1.45;
  animation: hmCommIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hm-comm-km {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  color: var(--success-strong);
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 8px;
}

@keyframes hmCommIn {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
}

.hm-race-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(3px);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  color: #FDE047;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: hmFlashIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hm-race-flash b {
  color: #FFFFFF;
}

/* SCOPED hidden override (same pattern as .cyclists-grid-view.hidden): this
   file loads AFTER tailwind.css, so `.hm-race-flash{display:flex}` was beating
   Tailwind's `.hidden{display:none}` at equal specificity — the winner-flash
   veil (dark + backdrop blur) sat PERMANENTLY over the live simulation. */
.hm-race-flash.hidden {
  display: none !important;
}

@keyframes hmFlashIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

.hm-confetti {
  position: absolute;
  top: -14px;
  width: 7px;
  height: 11px;
  z-index: 6;
  border-radius: 2px;
  pointer-events: none;
  animation: hmConf 2.1s ease-in forwards;
}

@keyframes hmConf {
  to {
    transform: translateY(560px) rotate(620deg);
    opacity: 0;
  }
}

/* Accessibility: kill all homepage motion on request */
@media (prefers-reduced-motion: reduce) {
  [class*="hm-"] {
    animation: none !important;
    transition: none !important;
  }

  .hm-fade-up {
    opacity: 1;
    transform: none;
  }

  .hm-js .hm-reveal {
    opacity: 1;
    transform: none;
  }
}



/* ===================================================================   P3 UNIFIED PAGE STYLE — shared page hero + decrowded grids
   Applies the homepage design language across every page. Additive only.
   ========================================================================== */

/* Page hero: keep the dark band readable above any page background */
/* Guaranteed dark hero gradient — a CSS safety net under the Tailwind
   `from-slate-950 via-slate-900 to-indigo-950` classes so the hero NEVER
   flashes white before the Tailwind CDN JIT generates those utilities. */
.hm-hero,
.p3-page-hero {
  background-color: #0B1120;
  background-image: linear-gradient(135deg, var(--slate-950) 0%, var(--slate-900) 45%, var(--accent-950) 100%);
}

.p3-page-hero {
  isolation: isolate;
}

.p3-page-hero .hm-orb {
  z-index: 0;
}

/* Breathing room: cyclists & teams grids — airier gaps, calmer cards */
.cyclists-grid-container,
.teams-grid-container {
  grid-gap: 32px !important;
  gap: 32px !important;
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;
}

.cyclist-card {
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.cyclist-card:hover {
  box-shadow: 0 14px 32px -14px rgba(15, 23, 42, 0.22) !important;
}

/* Card body: slightly more padding so content stops feeling packed */
.cyclist-card .card-body-zone {
  padding: 16px 20px;
}

/* Teams cards inherit the same rounding for consistency */
.teams-grid-container>div {
  border-radius: 16px !important;
}

/* Sticky filter bar sits flush under the hero divider */
.p3-page-hero+#floating_compare_bar+div,
.p3-page-hero~.sticky {
  box-shadow: 0 4px 14px -8px rgba(2, 6, 23, 0.25);
}

/* Section headers everywhere match the homepage pattern */
.p3-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ===================================================================   P3 ROUND 2 — bug fixes & global polish
   ========================================================================== */

/* Profile view: the layout (nav + its dropdowns) must paint ABOVE the fixed
   drawer host (z-48), otherwise the account menu opens underneath the page
   banner and can't be clicked. */
.p3-profile-layer {
  position: relative;
  z-index: 49;
}

/* Deck hover exit: ease back to the idle pose instead of snapping */
.hm-deck-resting .hm-deck-c3 .gco-inline {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
}

.hm-deck-resting .hm-deck-c3 .gco-inline::after {
  transition: opacity 0.6s ease;
}

/* La Route: the current race glows and pulses so the auto-scroll has a target */
.hm-milestone-current .hm-milestone-card {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 10px 30px -12px rgba(16, 185, 129, 0.45);
}

.hm-milestone-current .hm-milestone-dot {
  background: var(--success-strong) !important;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
  animation: p3CurrentPulse 2s ease-in-out infinite;
}

@keyframes p3CurrentPulse {

  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
  }

  50% {
    box-shadow: 0 0 0 9px rgba(52, 211, 153, 0.10);
  }
}

/* Big monitors: let the layout breathe past Tailwind's 80rem cap */
@media (min-width: 1700px) {
  .max-w-7xl {
    max-width: 100rem !important;
  }
}

@media (min-width: 2100px) {
  .max-w-7xl {
    max-width: 118rem !important;
  }
}

/* Footer never collapses over content */
.p3-site-footer {
  flex-shrink: 0;
}

/* ===================================================================   GRAPHS MODULE — P3-CARD-STYLE KPI CARDS
   ========================================================================== */
.graphs-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .graphs-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .graphs-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.graphs-kpi-card {
  position: relative;
  background: linear-gradient(160deg, var(--slate-900) 0%, var(--accent-950) 60%, var(--accent-900) 100%);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.40);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--slate-50);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.graphs-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 12%, rgba(255, 255, 255, 0.10), transparent 55%);
  pointer-events: none;
}

.graphs-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.50), 0 0 14px rgba(99, 102, 241, 0.15);
}

.graphs-kpi-icon {
  font-size: 2rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  line-height: 1;
}

.graphs-kpi-value {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #FDE68A 0%, var(--warning) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 4px 0 2px;
}

.graphs-kpi-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(226, 232, 240, 0.65);
  text-transform: uppercase;
  margin-top: 2px;
}

.graphs-kpi-footer {
  font-family: var(--font-mono, monospace);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(148, 163, 184, 0.4);
  text-transform: uppercase;
  margin-top: 8px;
}

/* ===================================================================   GRAPHS MODULE — COMPARE FILTER BUILDER
   ========================================================================== */
.cmp-group-card {
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

.cmp-group-header {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(99, 102, 241, 0.8);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmp-group-header .cmp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cmp-group-a .cmp-dot {
  background: var(--accent-600);
}

.cmp-group-b .cmp-dot {
  background: #F43F5E;
}

.cmp-hint {
  font-size: 10px;
  color: rgba(100, 116, 139, 0.7);
  font-style: italic;
  margin-top: 2px;
  margin-bottom: 0;
}

/* ===================================================================   GRAPHS MODULE — BUTTON CLICK FEEDBACK & LOADING OVERLAY
   ========================================================================== */

/* Generate button — active/pressed state */
.graphs-btn-generate {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.graphs-btn-generate:active,
.graphs-btn-generate.graphs-btn-clicked {
  transform: scale(0.95) !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.graphs-btn-generate.graphs-btn-clicked {
  background: linear-gradient(135deg, var(--accent-700), var(--accent-500)) !important;
  border-color: var(--accent-700) !important;
}

/* Reset button — active/pressed state */
.graphs-btn-reset {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.graphs-btn-reset:active,
.graphs-btn-reset.graphs-btn-clicked {
  transform: scale(0.95) !important;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3) !important;
}

.graphs-btn-reset.graphs-btn-clicked {
  background: rgba(100, 116, 139, 0.15) !important;
  border-color: var(--slate-400) !important;
  color: var(--slate-600) !important;
}

/* Ripple effect on buttons */
.graphs-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: graphsBtnRipple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes graphsBtnRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Check icon flash after button click */
.graphs-btn-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: graphsBtnCheckIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes graphsBtnCheckIn {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===================================================================   LOADING OVERLAY — Full-screen blocker with progress bar
   ========================================================================== */
.graphs-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.graphs-loading-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.graphs-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 60px;
  background: linear-gradient(160deg, var(--slate-900) 0%, var(--accent-950) 60%, var(--accent-900) 100%);
  border-radius: 24px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 32px 64px rgba(2, 6, 23, 0.6), 0 0 40px rgba(99, 102, 241, 0.12);
  min-width: 300px;
}

/* Spinner */
.graphs-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(99, 102, 241, 0.2);
  border-top: 4px solid var(--accent-400);
  border-radius: 50%;
  animation: graphsSpinnerRotate 0.8s linear infinite;
}

@keyframes graphsSpinnerRotate {
  to {
    transform: rotate(360deg);
  }
}

.graphs-loading-text {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.75);
  animation: graphsLoadPulse 1.8s ease-in-out infinite;
}

@keyframes graphsLoadPulse {

  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 1;
  }
}

/* Progress bar track */
.graphs-progress-bar-track {
  width: 100%;
  max-width: 240px;
  height: 6px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 9999px;
  overflow: hidden;
}

/* Progress bar fill */
.graphs-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-400), var(--accent-300));
  border-radius: 9999px;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

/* Percent text */
.graphs-progress-percent {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-300);
  letter-spacing: 0.05em;
}

/* ==============================================   GRAPH CUSTOMIZATION TOOLBAR & SOURCE FOOTER
   ===================================================== */

.p3-chart-wrapper {
  position: relative;
}

.p3-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--slate-50), var(--slate-100));
  border: 1px solid var(--slate-200);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  flex-wrap: wrap;
}

.p3-chart-toolbar .p3-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-right: 1px solid var(--slate-200);
}

.p3-chart-toolbar .p3-toolbar-group:last-child {
  border-right: none;
}

.p3-toolbar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
  white-space: nowrap;
}

.p3-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff;
  color: var(--slate-600);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 4px;
  white-space: nowrap;
}

.p3-toolbar-btn:hover {
  background: var(--slate-100);
  border-color: var(--slate-300);
  color: var(--slate-800);
}

.p3-toolbar-btn.active {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}

.p3-toolbar-btn.active:hover {
  background: var(--accent-600);
}

/* Color palette swatches */
.p3-palette-swatch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.p3-palette-swatch:hover {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.p3-palette-swatch.active {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.p3-palette-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Editable title input in toolbar */
.p3-title-input {
  flex: 1;
  min-width: 180px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff;
  color: var(--slate-800);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.p3-title-input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* Source footer */
.p3-chart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: 11px;
  color: var(--slate-400);
  font-family: 'Inter', system-ui, sans-serif;
}

.p3-chart-footer .p3-footer-source {
  font-size: 12px;
  color: var(--slate-400);
}

.p3-chart-footer .p3-footer-source em {
  font-style: italic;
}

.p3-chart-footer .p3-footer-link {
  color: var(--accent-500);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}

.p3-chart-footer .p3-footer-link:hover {
  color: var(--accent-600);
  text-decoration: underline;
}

/* Chart area between toolbar and footer */
.p3-chart-area {
  border-left: 1px solid var(--slate-200);
  border-right: 1px solid var(--slate-200);
  background: #fff;
  transition: max-width 0.3s ease;
}

/* ==============================================   SIZE BAR — Device presets + custom px
   ===================================================== */

.p3-size-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-top: none;
  flex-wrap: wrap;
}

.p3-size-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.p3-size-device-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background: #fff;
  color: var(--slate-400);
  cursor: pointer;
  transition: all 0.15s ease;
}

.p3-size-device-btn:hover {
  border-color: var(--slate-300);
  color: var(--slate-600);
  background: var(--slate-50);
}

.p3-size-device-btn.active {
  border-color: var(--accent-500);
  color: var(--accent-500);
  background: var(--accent-50);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.p3-size-input {
  width: 60px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--slate-200);
  border-radius: 5px;
  background: #fff;
  color: var(--slate-800);
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
  transition: border-color 0.15s;
}

.p3-size-input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Hide spin buttons on number inputs */
.p3-size-input::-webkit-inner-spin-button,
.p3-size-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.p3-size-input {
  -moz-appearance: textfield;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .p3-chart-toolbar {
    gap: 4px;
    padding: 6px 8px;
  }
  .p3-toolbar-label {
    display: none;
  }
  .p3-title-input {
    min-width: 120px;
  }
  .p3-size-bar {
    gap: 6px;
    padding: 4px 8px;
  }
}

/* ==============================================   AI CHATBOT PANEL
   ===================================================== */

.p3-chat-panel {
  margin-top: 16px;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.p3-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.p3-chat-header:hover {
  background: linear-gradient(135deg, var(--accent-700), var(--accent-600));
}

.p3-chat-header .p3-chat-toggle {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.8;
  transition: transform 0.3s;
}

.p3-chat-header .p3-chat-toggle.collapsed {
  transform: rotate(-90deg);
}

.p3-chat-body {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.p3-chat-body.collapsed {
  max-height: 0;
}

.p3-chat-history {
  flex: 1;
  min-height: 200px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--slate-50);
  scroll-behavior: smooth;
}

.p3-chat-history::-webkit-scrollbar {
  width: 5px;
}
.p3-chat-history::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 3px;
}

/* Message bubbles */
.p3-chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  word-wrap: break-word;
  animation: p3ChatFadeIn 0.25s ease;
}

@keyframes p3ChatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.p3-chat-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-400));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.p3-chat-msg-agent {
  align-self: flex-start;
  background: #fff;
  color: var(--slate-800);
  border: 1px solid var(--slate-200);
  border-bottom-left-radius: 4px;
}

.p3-chat-msg-error {
  align-self: flex-start;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-bottom-left-radius: 4px;
}

.p3-chat-msg-system {
  align-self: center;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 11px;
  padding: 5px 10px;
  text-align: center;
}

/* Input row */
.p3-chat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--slate-200);
  background: #fff;
}

.p3-chat-input-row input[type="text"] {
  flex: 1;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.15s;
  background: var(--slate-50);
}

.p3-chat-input-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
  background: #fff;
}

.p3-chat-send-btn {
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-400));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.p3-chat-send-btn:hover {
  background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
  transform: translateY(-1px);
}

.p3-chat-send-btn:active {
  transform: translateY(0);
}

.p3-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Typing indicator */
.p3-chat-typing {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 14px;
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.p3-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-400);
  animation: p3Dot 1.4s infinite ease-in-out both;
}

.p3-chat-typing span:nth-child(1) { animation-delay: 0s; }
.p3-chat-typing span:nth-child(2) { animation-delay: 0.16s; }
.p3-chat-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes p3Dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Welcome message */
.p3-chat-welcome {
  text-align: center;
  padding: 16px 12px;
  color: var(--slate-400);
  font-size: 12px;
  line-height: 1.6;
}

.p3-chat-welcome .p3-chat-welcome-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
}
/* =====================================================   P3RF UI polish — Opus redesign (pills, animations, hover)
   ============================================================ */
.stage-cls-pill{font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid rgb(226 232 240);background:#fff;color:rgb(71 85 105);cursor:pointer;transition:all .15s ease;white-space:nowrap;line-height:1.2;}
.stage-cls-pill:hover{background:rgb(241 245 249);}
.stage-cls-pill.active{background:rgb(79 70 229);color:#fff;border-color:rgb(79 70 229);box-shadow:0 2px 8px rgba(79, 70, 229,.28);}
.dark .stage-cls-pill{background:rgb(30 41 59);border-color:rgb(51 65 85);color:rgb(203 213 225);}
.dark .stage-cls-pill:hover{background:rgb(51 65 85);}
.dark .stage-cls-pill.active{background:rgb(79 70 229);color:#fff;border-color:rgb(79 70 229);}

@keyframes p3fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes p3fadeIn{from{opacity:0;}to{opacity:1;}}
.p3-animate-in{animation:p3fadeUp .55s cubic-bezier(.22,.61,.36,1) both;}
.p3-fade-in{animation:p3fadeIn .5s ease both;}
/* staggered entrance for grids of cards */
.p3-stagger > *{animation:p3fadeUp .5s cubic-bezier(.22,.61,.36,1) both;}
.p3-stagger > *:nth-child(1){animation-delay:.03s}.p3-stagger > *:nth-child(2){animation-delay:.06s}
.p3-stagger > *:nth-child(3){animation-delay:.09s}.p3-stagger > *:nth-child(4){animation-delay:.12s}
.p3-stagger > *:nth-child(5){animation-delay:.15s}.p3-stagger > *:nth-child(6){animation-delay:.18s}
.p3-stagger > *:nth-child(7){animation-delay:.21s}.p3-stagger > *:nth-child(8){animation-delay:.24s}
.p3-stagger > *:nth-child(9){animation-delay:.27s}.p3-stagger > *:nth-child(n+10){animation-delay:.30s}
/* lift on hover for cards */
.p3-lift{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease;}
.p3-lift:hover{transform:translateY(-4px);box-shadow:0 16px 34px -12px rgba(15,23,42,.28);}
@media (prefers-reduced-motion: reduce){.p3-animate-in,.p3-fade-in,.p3-stagger>*{animation:none!important;}.p3-lift:hover{transform:none;}}

/* ===================================================================== */
/* DENSITY & STATS PRIMITIVES  (mod_stats.py)                            */
/* Dense, "data-screams" components. Theme-aware via CSS vars.           */
/* ===================================================================== */

/* --- card wrapper --- */
.p3-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow-sm);}
.p3-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 13px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);}
.p3-card-head-l{display:flex;align-items:baseline;gap:7px;min-width:0;}
.p3-card-icon{color:var(--accent-color);font-size:11px;}
.p3-card-title{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-primary);white-space:nowrap;}
.p3-card-sub{font-size:10.5px;color:var(--text-muted);font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.p3-card-body{padding:12px 13px;}
.p3-card .muted,.p3-dist .muted,.p3-cmp-nums .muted,.p3-pbar .muted{color:var(--text-muted);}

/* --- stat band + tiles --- */
.p3-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:7px;}
.p3-tile{background:var(--bg-tertiary);border:1px solid var(--border-color);border-top:2.5px solid var(--accent-color);
  border-radius:9px;padding:8px 9px 7px;display:flex;flex-direction:column;gap:1px;min-width:0;}
.p3-tile-val{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.05;
  color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-tile-val.mono{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em;}
.p3-tile-lbl{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-tile-sub{font-size:10px;font-weight:600;color:var(--text-secondary);}

/* --- generic horizontal bar track --- */
.p3-bar-track{position:relative;width:100%;height:7px;background:var(--bg-tertiary);
  border-radius:999px;overflow:visible;}
.p3-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:999px;min-width:2px;
  transition:width .5s cubic-bezier(.22,.61,.36,1);}
.p3-bar-marker{position:absolute;top:50%;width:3px;height:13px;border-radius:2px;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--bg-card);}

/* --- percentile bar --- */
.p3-pbar{margin:7px 0;}
.p3-pbar-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px;}
.p3-pbar-label{font-size:11px;font-weight:600;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-pbar-right{display:flex;align-items:baseline;gap:7px;white-space:nowrap;}
.p3-pbar-val{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-secondary);}
.p3-pbar-pct{font-family:var(--font-display);font-size:14px;font-weight:800;}
.p3-pbar-peer{font-size:9.5px;color:var(--text-muted);margin-top:3px;font-weight:500;}

/* --- distribution strip (inline box-plot) --- */
.p3-dist{margin:6px 0;}
.p3-dist-head{display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;
  color:var(--text-secondary);margin-bottom:9px;}
.p3-dist-trackwrap{position:relative;padding-top:14px;}
.p3-dist-track{position:relative;height:9px;background:var(--bg-tertiary);border-radius:999px;}
.p3-dist-iqr{position:absolute;top:0;height:100%;background:color-mix(in srgb,var(--accent-color) 32%,transparent);
  border-radius:999px;}
.p3-dist-median{position:absolute;top:-2px;width:2px;height:13px;background:var(--text-secondary);transform:translateX(-50%);}
.p3-dist-marker{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--bg-card);z-index:2;}
.p3-dist-vallbl{position:absolute;top:0;transform:translateX(-50%);font-family:var(--font-mono);
  font-size:10px;font-weight:700;white-space:nowrap;}
.p3-dist-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;
  color:var(--text-muted);margin-top:5px;}

/* --- comparison rows --- */
.p3-cmp{display:flex;flex-direction:column;gap:9px;}
.p3-cmp-row{display:grid;grid-template-columns:84px 1fr;gap:8px;align-items:center;}
.p3-cmp-label{font-size:11px;font-weight:600;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-cmp-track{height:9px;}
.p3-cmp-medtick{position:absolute;top:-2px;width:2px;height:13px;background:var(--text-muted);transform:translateX(-50%);}
.p3-cmp-nums{grid-column:2;display:flex;gap:9px;font-family:var(--font-mono);font-size:10px;margin-top:1px;}
.p3-cmp-you{font-weight:700;color:var(--text-primary);}

/* --- sparkline + delta --- */
.p3-spark{display:inline-block;vertical-align:middle;}
.p3-delta{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:10.5px;
  font-weight:700;padding:1px 5px;border-radius:5px;line-height:1.4;}
.p3-delta-up{color:#059669;background:rgba(16,185,129,.12);}
.p3-delta-down{color:#e11d48;background:rgba(244,63,94,.12);}
.p3-delta-flat{color:var(--text-muted);background:var(--bg-tertiary);}
.dark-mode .p3-delta-up{color:var(--success-strong);}
.dark-mode .p3-delta-down{color:#fb7185;}

/* ===================================================================== */
/* BROWSE GRID — roomy, game-card-style. Fewer, larger cards + air so the */
/* riders grid never feels claustrophobic (was crammed at 212px/14px).    */
/* ===================================================================== */
.cyclist-card{width:100%!important;height:auto!important;min-height:0!important;}
.cyclists-grid-container,.teams-grid-container{
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
  grid-gap:28px!important;gap:28px!important;
  justify-items:stretch!important;justify-content:center!important;
  max-width:1500px!important;padding:30px!important;}
/* Cyclists grid gets a bit more room than teams: larger min card + wider gap. */
.cyclists-grid-container{
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;
  grid-gap:36px!important;gap:36px!important;}
@media (max-width:1100px){
  .cyclists-grid-container,.teams-grid-container{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:22px!important;}
}
@media (max-width:560px){
  .cyclists-grid-container,.teams-grid-container{
    grid-template-columns:1fr!important;gap:18px!important;padding:16px!important;}
}
/* The card grid sets display:grid !important, which beat Tailwind's .hidden and
   left it stacked under the rankings table. Make the view toggle's hidden win. */
.cyclists-grid-view.hidden,.cyclists-rankings-view.hidden{display:none!important;}

/* ===================================================================== */
/* PRO-STYLE DATA TABLES  (riders / races / teams browse views)          */
/* Dense but readable: full names, small photos, sticky header, hover.   */
/* ===================================================================== */
.p3-tbl-wrap{width:100%;overflow-x:auto;border:1px solid var(--border-color);border-radius:12px;
  background:var(--bg-card);box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch;}
.p3-tbl{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:13px;}
.p3-tbl thead th{position:sticky;top:0;background:var(--bg-tertiary);color:var(--text-muted);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:left;
  padding:9px 10px;border-bottom:2px solid var(--border-color);white-space:nowrap;z-index:2;}
.p3-tbl thead th.num,.p3-tbl td.num{text-align:right;font-family:var(--font-mono);}
.p3-tbl thead th.ctr,.p3-tbl td.ctr{text-align:center;}
.p3-tbl tbody td{padding:6px 10px;border-bottom:1px solid var(--border-color);vertical-align:middle;
  white-space:nowrap;color:var(--text-secondary);}
.p3-tbl tbody tr{cursor:pointer;transition:background .12s ease;}
.p3-tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg-tertiary) 45%,transparent);}
.p3-tbl tbody tr:hover{background:color-mix(in srgb,var(--accent-color) 12%,transparent);}
.p3-tbl .rank{font-family:var(--font-mono);font-weight:700;color:var(--text-muted);width:40px;text-align:right;}
.p3-tbl .name{font-weight:700;color:var(--text-primary);white-space:normal;min-width:150px;line-height:1.15;}
.p3-tbl .name .sub,.p3-tbl .sub{display:block;font-size:11px;color:var(--text-muted);font-weight:500;}
.p3-tbl-photo{width:34px;height:34px;border-radius:7px;object-fit:cover;display:block;
  background:var(--bg-tertiary);border:1px solid var(--border-color);}
.p3-tbl-photo-cell{width:42px;padding-right:0!important;}
.p3-tbl .flag{font-size:15px;line-height:1;}
.p3-tbl .strong{font-weight:800;color:var(--text-primary);font-family:var(--font-mono);}
.p3-tbl-badge{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:2px 6px;border-radius:5px;background:var(--bg-tertiary);
  color:var(--text-secondary);border:1px solid var(--border-color);white-space:nowrap;}
/* segmented filter pills row above a table */
.p3-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;}
.p3-filter-seg{display:inline-flex;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--bg-card);}
.p3-filter-seg button{border:0;background:transparent;color:var(--text-secondary);font-family:var(--font-display);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:6px 11px;cursor:pointer;transition:all .12s;}
.p3-filter-seg button.active{background:var(--accent-color);color:#fff;}
.p3-filter-seg button:not(.active):hover{background:var(--bg-tertiary);}

/* ===================================================================== */
/* TEAMS league table — roomy, game-card-style (Squad OVR + Power bar).  */
/* Generous row height + clear identity so it never feels claustrophobic. */
/* ===================================================================== */
.p3-seg{display:inline-flex;border:1px solid var(--border-color);border-radius:11px;overflow:hidden;
  background:var(--bg-card);box-shadow:var(--shadow-sm);}
.p3-seg-btn{border:0;background:transparent;color:var(--text-secondary);font-family:var(--font-display);
  font-size:12.5px;font-weight:800;letter-spacing:.02em;padding:9px 18px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:all .14s;}
.p3-seg-btn i{font-size:12px;opacity:.8;}
.p3-seg-btn.is-active{background:linear-gradient(135deg,var(--accent-500),var(--accent-500));color:#fff;}
.p3-seg-btn:not(.is-active):hover{background:var(--bg-tertiary);color:var(--text-primary);}

.p3-teamstbl-wrap{box-shadow:var(--shadow-sm);}
.p3-teamstbl{font-size:14px;table-layout:fixed;}
.p3-teamstbl thead th{padding:13px 16px;font-size:10.5px;letter-spacing:.06em;}
.p3-teamstbl tbody td{padding:15px 16px;border-bottom:1px solid var(--border-color);}
.p3-teamstbl tbody tr:nth-child(even){background:transparent;}
.p3-teamstbl tbody tr:hover{background:color-mix(in srgb,var(--accent-color) 9%,transparent);}
.p3-teamstbl .rank{width:46px;font-size:14px;}
.p3tt-c{text-align:center;}
.p3tt-team{display:flex;align-items:center;gap:13px;min-width:230px;}
.p3tt-accent{flex:0 0 auto;width:5px;height:38px;border-radius:999px;}
.p3tt-teamtxt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.p3tt-teamname{font-family:var(--font-display);font-weight:800;font-size:15.5px;color:var(--text-primary);
  line-height:1.12;letter-spacing:.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.p3tt-teamsub{font-size:11.5px;color:var(--text-muted);font-weight:600;}
/* Squad OVR chip — card tiers */
.p3tt-ovr{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:34px;padding:0 9px;
  border-radius:9px;font-family:var(--font-mono);font-weight:800;font-size:17px;line-height:1;
  border:1.5px solid transparent;}
.p3tt-ovr-elite{color:#fde68a;background:linear-gradient(160deg,#1c1917,#422006);border-color:rgba(251,191,36,.6);}
.p3tt-ovr-gold{color:#fbbf24;background:color-mix(in srgb,var(--warning) 14%,transparent);border-color:rgba(245,158,11,.45);}
.p3tt-ovr-silver{color:var(--slate-300);background:color-mix(in srgb,var(--slate-400) 14%,transparent);border-color:rgba(148,163,184,.4);}
.p3tt-ovr-bronze{color:#d6a06a;background:color-mix(in srgb,#b45309 13%,transparent);border-color:rgba(180,83,9,.4);}
.p3tt-ovr-na{color:var(--text-muted);background:var(--bg-tertiary);}
/* Power bar (current-season wins, normalized) */
.p3tt-power{width:200px;}
.p3tt-powerwrap{display:flex;align-items:center;gap:10px;}
.p3tt-powertrack{flex:1;height:8px;border-radius:999px;background:var(--bg-tertiary);overflow:hidden;min-width:90px;}
.p3tt-powerfill{height:100%;border-radius:999px;background:linear-gradient(90deg,#f43f5e,#fb923c,#fbbf24);
  transition:width .4s ease;}
.p3tt-powerval{font-family:var(--font-mono);font-weight:800;font-size:14px;color:var(--text-primary);width:30px;flex:0 0 30px;text-align:right;}
/* Fixed column width: without it the FORME column started at a different x
   in each division table (its position depended on the neighbouring numeric
   columns' content width), so bars looked misaligned across sections. */
.p3-teamstbl td.p3tt-power,.p3-teamstbl thead th.p3tt-power{width:230px;min-width:230px;}
@media (max-width:640px){
  .p3-teamstbl .p3tt-power,.p3-teamstbl thead th.p3tt-power{display:none;}
}

/* ===================================================================== */
/* RACES list — Live / À venir / Résultats section dividers + winner.    */
/* Clear separation so upcoming races don't blur into past ones.         */
/* ===================================================================== */
.p3-race-sectionrow td{padding:0!important;background:transparent!important;}
.p3-race-section{display:flex;align-items:center;gap:11px;padding:20px 14px 10px;
  border-top:1px solid var(--border-color);}
.p3-race-sectionrow:first-child .p3-race-section{border-top:0;padding-top:8px;}
.p3-race-section-bar{flex:0 0 auto;width:5px;height:22px;border-radius:999px;}
.p3-race-section i{font-size:14px;}
.p3-race-section-lbl{font-family:var(--font-display);font-weight:800;font-size:15px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-primary);}
.p3-race-section-n{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-muted);
  background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:999px;padding:1px 9px;}
.p3-race-winner{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--text-primary);}
.p3-race-winner i{color:var(--warning);font-size:12px;}
.p3-race-pending{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--text-muted);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:5px;padding:2px 7px;}
.p3-view-toggle{margin-left:auto;display:inline-flex;gap:4px;}

/* Races rows: roomier, calm hover with a left accent bar; the alternating
   zebra is dropped for this table (the section dividers already group it). */
.p3-tbl tr.p3-race-row td{padding:11px 10px;border-bottom:1px solid
  color-mix(in srgb,var(--border-color) 65%,transparent);}
.p3-tbl tbody tr.p3-race-row:nth-child(even){background:transparent;}
.p3-tbl tr.p3-race-row td:first-child{border-left:3px solid transparent;}
.p3-tbl tr.p3-race-row:hover{background:color-mix(in srgb,var(--accent-color) 7%,transparent);}
.p3-tbl tr.p3-race-row:hover td:first-child{border-left-color:var(--accent-color);}
/* the race currently running: soft emerald wash + accent bar */
.p3-tbl tr.p3-race-row--live{background:color-mix(in srgb,var(--success) 7%,transparent);}
.p3-tbl tr.p3-race-row--live td:first-child{border-left-color:var(--success);}
.p3-tbl tr.p3-race-row--live:hover{background:color-mix(in srgb,var(--success) 12%,transparent);}
.p3-race-row .hm-live-chip{margin-left:2px;}

/* colour-coded category chips: the calendar scans at a glance */
.p3-tbl-badge--gt{background:rgba(99,102,241,0.12);color:var(--accent-500);border-color:rgba(99,102,241,0.35);}
.p3-tbl-badge--monument{background:rgba(168,85,247,0.12);color:#a855f7;border-color:rgba(168,85,247,0.35);}
.p3-tbl-badge--worlds{background:rgba(244,63,94,0.10);color:#f43f5e;border-color:rgba(244,63,94,0.32);}
.p3-tbl-badge--stage{background:rgba(16,185,129,0.10);color:#059669;border-color:rgba(16,185,129,0.32);}
.p3-tbl-badge--nat{background:var(--bg-tertiary);color:var(--text-muted);border-color:var(--border-color);}
html.dark .p3-tbl-badge--gt{color:var(--accent-300);}
html.dark .p3-tbl-badge--monument{color:#d8b4fe;}
html.dark .p3-tbl-badge--worlds{color:#fda4af;}
html.dark .p3-tbl-badge--stage{color:#6ee7b7;}

/* ===================================================================== */
/* HOME CAROUSEL  (latest winners / hottest rider / young / team)        */
/* ===================================================================== */
.p3-carousel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px;}
.p3-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 14px;scrollbar-width:thin;}
.p3-carousel::-webkit-scrollbar{height:7px;}
.p3-carousel::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:99px;}
.p3-ccard{scroll-snap-align:start;flex:0 0 auto;width:236px;background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;}
.p3-ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-color);}
.p3-ccard-top{padding:7px 11px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;}
.p3-ccard-body{padding:11px 12px;display:flex;flex-direction:column;gap:5px;}
.p3-ccard-title{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--text-primary);line-height:1.1;}
.p3-ccard-sub{font-size:11.5px;color:var(--text-muted);font-weight:500;}
.p3-ccard-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-secondary);
  border-top:1px solid var(--border-color);padding-top:7px;margin-top:2px;}

/* ===================================================================== */
/* A LA UNE — carousel of P3 cards (riders & teams, men & women).      */
/* Each item = a colored superlative band on top of a gco-inline card.   */
/* ===================================================================== */
.p3-alc-nav{display:flex;gap:7px;align-items:center;}
.p3-alc-arrow{width:34px;height:34px;border-radius:10px;border:1px solid var(--border-color);
  background:var(--bg-card);color:var(--text-primary);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s,border-color .15s;}
.p3-alc-arrow:hover{background:var(--bg-tertiary);border-color:var(--accent-color);}
.p3-alc-arrow:active{transform:scale(.93);}
.p3-alc-track{padding-top:4px;align-items:stretch;}
.p3-alc-item{scroll-snap-align:start;flex:0 0 auto;width:248px;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .18s;border-radius:16px;}
.p3-alc-item:hover{transform:translateY(-5px);}
/* equal height: card fills the item, name always reserves two lines so 1- and */
/* 2-line names (e.g. "ISAAC DEL TORO ROMERO") don't make some cards taller.   */
.p3-alc-item .gco-inline{flex:1 1 auto;}
.p3-alc-item .gco-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;align-items:center;text-align:center;}
.p3-alc-item:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;}
.p3-alc-label{font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.07em;
  /* dark ink: white fails AA on every band color at 11px (emerald 2.54:1,
     amber 2.15:1, rose 3.67:1 — audit P0.2); var(--slate-900) passes on all of them
     with the 400-shade bands set in mod_home.py */
  text-transform:uppercase;color:var(--slate-900);padding:8px 12px;border-radius:13px 13px 0 0;
  display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 6px 14px rgba(2,6,23,0.18);position:relative;z-index:1;}
/* the P3 card fills the item width and joins the band seamlessly */
.p3-alc-item .gco-inline{max-width:none;width:100%;margin:0;border-radius:0 0 16px 16px;
  border-top-left-radius:0;border-top-right-radius:0;}
.gco-inline.gco-team .gco-name{font-size:15px;line-height:1.08;}

/* ===================================================================== */
/* A LA UNE — two side-by-side auto-rotating P3-card DECKS.              */
/* Men column (left) + women column (right). The deck reads like a tidy    */
/* pile of "file tabs": behind-cards peek ABOVE the front card so their    */
/* colored category bands act as teasers of what's coming. On advance the  */
/* front card is dealt off downward while the pile relaxes forward one     */
/* step — a single, calm, vertical motion.                                 */
/*                                                                         */
/* JS (initAlcRotators) assigns each card a depth via --p (0 = front,      */
/* 1..N = progressively behind; capped) and toggles .is-active /           */
/* .is-leaving / .is-buried / .no-anim. Motion rules that keep it smooth:  */
/*   - transform + opacity ONLY (no filter, no animated box-shadow)        */
/*   - NO lateral/rotation terms that flip sign as depths shift (the old   */
/*     --n fan made every back-card wobble left-right on every tick)       */
/*   - .is-leaving duration matches the JS timeout (420ms) so the deal-off */
/*     completes instead of being cut at 36% and yanked backwards          */
/* ===================================================================== */
.p3-alc-col{display:flex;flex-direction:column;}
/* the rotator hosts the stage + arrows + dots; relative so arrows can flank it */
.p3-alc-rotator{position:relative;display:flex;flex-direction:column;align-items:center;}
/* the stage is the deck window; cards are layered absolutely within it.
   Top padding (via the cards' top offset) leaves room for the peeking tabs. */
.p3-alc-stage{position:relative;width:248px;max-width:100%;min-height:392px;}
/* every card is a deck slot: centered, receding upward behind the front card
   by its depth (--p). Deeper cards scale down slightly, dim, and sink in the
   z-order. The front card (--p:0) sits crisp on top. */
.p3-alc-stage .p3-alc-card{position:absolute;top:44px;left:50%;width:248px;max-width:100%;
  display:flex;flex-direction:column;cursor:pointer;border-radius:16px;
  --p:0;
  transform-origin:center top;
  transform:translateX(-50%)
            translateY(calc(var(--p) * -14px))
            scale(calc(1 - var(--p) * 0.045));
  opacity:calc(1 - var(--p) * 0.18);
  z-index:calc(40 - var(--p));
  box-shadow:0 14px 30px rgba(2,6,23,0.30);
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease,visibility 0s;}
/* cards deeper than the visible stack are parked invisibly just behind it */
.p3-alc-stage .p3-alc-card.is-buried{opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .3s;}
/* the front card: crisp, clickable */
.p3-alc-stage .p3-alc-card.is-active{cursor:pointer;pointer-events:auto;}
.p3-alc-stage .p3-alc-card.is-active:hover{
  transform:translateX(-50%) translateY(-6px) scale(1.015);}
/* the card being dealt off: slides down and fades out COMPLETELY (duration
   matched by the JS timeout), then is snapped to the back under .no-anim */
.p3-alc-stage .p3-alc-card.is-leaving{z-index:60 !important;
  transform:translateX(-50%) translateY(36px) scale(1.02) !important;
  opacity:0 !important;
  transition:transform .42s cubic-bezier(.55,0,.8,.4),opacity .38s ease;}
/* transition suppressor for the invisible jump from "dealt off" to back-of-deck */
.p3-alc-stage .p3-alc-card.no-anim{transition:none !important;}
.p3-alc-card:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;z-index:60;}
/* the P3 card fills the card width and joins the colored band seamlessly */
.p3-alc-card .gco-inline{flex:1 1 auto;max-width:none;width:100%;margin:0;
  border-radius:0 0 16px 16px;border-top-left-radius:0;border-top-right-radius:0;}
.p3-alc-card .gco-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;align-items:center;text-align:center;}
/* arrows flank the stage, vertically centered; lifted above the deck */
.p3-alc-rotator .p3-alc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:70;}
.p3-alc-rotator .p3-alc-arrow:active{transform:translateY(-50%) scale(.93);}
.p3-alc-arrow-prev{left:-6px;}
.p3-alc-arrow-next{right:-6px;}
/* dot indicators below the stage */
.p3-alc-dots{display:flex;gap:7px;justify-content:center;margin-top:14px;position:relative;z-index:70;}
.p3-alc-dot{width:8px;height:8px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--border-color);transition:background .2s,transform .2s,width .2s;}
.p3-alc-dot:hover{transform:scale(1.25);}
.p3-alc-dot.is-active{width:20px;}
.p3-alc-dot-m.is-active{background:#0ea5e9;}
.p3-alc-dot-w.is-active{background:#f43f5e;}
@media (max-width:520px){
  .p3-alc-rotator .p3-alc-arrow{width:30px;height:30px;font-size:19px;}
  .p3-alc-arrow-prev{left:-4px;}
  .p3-alc-arrow-next{right:-4px;}
}
/* reduced motion: no fly-out — cards snap between poses */
@media (prefers-reduced-motion: reduce){
  .p3-alc-stage .p3-alc-card{transition:none;
    transform:translateX(-50%) translateY(calc(var(--p) * -10px)) scale(calc(1 - var(--p) * 0.04));}
  .p3-alc-stage .p3-alc-card.is-leaving{transition:none;
    transform:translateX(-50%) !important;opacity:1 !important;}
}

/* Context chips under "La course ne s'arrête jamais" (what's simulated + real last stage) */
.hm-sim-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
  font-family:var(--font-mono);padding:4px 10px;border-radius:999px;letter-spacing:.01em;}
.hm-sim-tag-sim{color:#6ee7b7;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.30);}
.hm-sim-tag-real{color:var(--slate-300);background:rgba(148,163,184,0.10);border:1px solid rgba(148,163,184,0.22);}

/* ===================================================================== */
/* MEDIA-KIT — collapsible (was always taking footer space)              */
/* ===================================================================== */
details.p3-mediakit{margin:0;}
details.p3-mediakit > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--text-secondary);background:var(--bg-tertiary);
  border:1px solid var(--border-color);border-radius:8px;padding:6px 11px;user-select:none;}
details.p3-mediakit > summary::-webkit-details-marker{display:none;}
details.p3-mediakit > summary:hover{color:var(--text-primary);border-color:var(--accent-color);}
details.p3-mediakit[open] > summary{margin-bottom:8px;color:var(--accent-color);}
details.p3-mediakit .p3-mediakit-body{animation:p3-fade-in .2s ease;}

/* month/section sub-header row inside a p3-tbl (races grouped by month) */
.p3-tbl-group{background:var(--bg-secondary);color:var(--text-secondary);font-family:var(--font-display);
  font-weight:800;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 10px 5px;border-top:2px solid var(--border-color);}
.p3-tbl tbody tr:first-child .p3-tbl-group{border-top:0;}
/* strength mini-bar cell (teams table) */
.p3-tbl-strength{display:inline-block;width:64px;height:7px;border-radius:999px;background:var(--bg-tertiary);overflow:hidden;vertical-align:middle;}
.p3-tbl-strength > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-500),var(--accent-500));}

/* ===================================================================== */
/* À LA UNE — big auto-rotating spotlight cards (CSS-only rotation)       */
/* ===================================================================== */
.p3-spot-stage{position:relative;min-height:148px;max-width:680px;margin:0 auto;}
.p3-spot-card{position:absolute;inset:0;opacity:0;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:p3spotcycle 27s infinite both;}
.p3-spot-stage:hover > .p3-spot-card{animation-play-state:paused;}
@keyframes p3spotcycle{
  0%{opacity:0;transform:translateY(14px) scale(.985);}
  2.5%{opacity:1;transform:none;}
  14%{opacity:1;transform:none;}
  17%{opacity:0;transform:translateY(-10px) scale(.985);}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .p3-spot-card{animation:none;position:relative;opacity:1;margin-bottom:10px;}
  .p3-spot-stage{min-height:0;}
}
.p3-spot-label{padding:8px 16px;font-family:var(--font-display);font-weight:800;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:7px;}
.p3-spot-body{display:flex;align-items:center;gap:16px;padding:14px 18px;flex:1;min-width:0;}
.p3-spot-photo{width:80px;height:80px;border-radius:14px;object-fit:cover;flex-shrink:0;
  background:var(--bg-tertiary);border:2px solid var(--border-color);}
.p3-spot-id{min-width:0;flex:1;}
.p3-spot-name{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--text-primary);
  line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-spot-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p3-spot-metric{margin-left:auto;text-align:right;flex-shrink:0;padding-left:10px;}
.p3-spot-metric .v{font-family:var(--font-mono);font-weight:800;font-size:25px;color:var(--text-primary);display:block;line-height:1;}
.p3-spot-metric .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);}

/* ===================================================================== */
/* LATEST REAL RESULTS — rotating banner inside the "race never stops"   */
/* panel (dark slate-950 background). CSS-only rotation, one card at a    */
/* time; built for exactly 5 items (5s slot × 5 = 25s loop).             */
/* ===================================================================== */
.p3-lr-wrap{margin:2px 0 2px;}
.p3-lr-eyebrow{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-weight:800;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate-400);margin-bottom:10px;}
.p3-lr-eyebrow i{color:#fbbf24;}
.p3-lr-stage{position:relative;min-height:84px;}
.p3-lr-item{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;gap:9px;
  animation:p3lrcycle 25s infinite both;}
.p3-lr-stage:hover > .p3-lr-item{animation-play-state:paused;}
@keyframes p3lrcycle{
  0%{opacity:0;transform:translateY(10px);}
  2%{opacity:1;transform:none;}
  18%{opacity:1;transform:none;}
  20.5%{opacity:0;transform:translateY(-8px);}
  100%{opacity:0;}
}
.p3-lr-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.p3-lr-head .r{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;}
.p3-lr-head .s{font-size:12px;font-weight:800;color:#fbbf24;text-transform:uppercase;letter-spacing:.07em;}
.p3-lr-head .d{font-size:11px;color:var(--slate-500);font-family:var(--font-mono);margin-left:auto;}
.p3-lr-podium{display:flex;flex-wrap:wrap;gap:7px 20px;}
.p3-lr-pos{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:14px;color:var(--slate-300);font-weight:600;transition:color .15s;}
.p3-lr-pos:hover{color:#fff;}
.p3-lr-pos:hover .n{text-decoration:underline;text-underline-offset:2px;}
.p3-lr-pos .m{font-size:15px;}
.p3-lr-pos.p1 .n{color:#fff;font-weight:800;}
@media (prefers-reduced-motion: reduce){
  .p3-lr-item{animation:none;position:relative;opacity:1;margin-bottom:12px;}
  .p3-lr-stage{min-height:0;}
}

/* ===================================================================
   ███  P3 PREMIUM COMPONENT LAYER  ███
   -------------------------------------------------------------------
   Built entirely on the design tokens above (light + dark). These
   classes restyle the markup the modules already emit (Tailwind card
   patterns auto-upgrade), and expose a named component kit:
     .p3-card · .p3-btn-* · .p3-badge · .p3-chip · .p3-input · .p3-table
     .p3-segment · .p3-divider · .p3-skeleton · tooltips · scrollbars
   Nothing here changes layout, ids, or behaviour — cosmetic only.
   =================================================================== */

/* ---- 1. CRISP, ON-BRAND FOCUS STATES (a11y) ----------------------- */
*:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* mouse clicks shouldn't paint the ring; keyboard nav should */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-soft); color: var(--accent-700); }
.dark-mode ::selection, html.dark ::selection { color: var(--accent-300); }

/* ---- 2. REFINED SCROLLBARS --------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }

/* ---- 3. AUTO-UPGRADE: the shared Tailwind card pattern ------------ */
/* Modules build cards as: bg-white dark:bg-slate-900 border ... rounded-xl.
   Lift them to the premium elevation + hover used site-wide. We scope to
   rounded cards that carry a border so we don't touch tiny pills/buttons. */
.bg-white.rounded-xl.border,
.bg-white.border.rounded-xl,
.dark\:bg-slate-900.rounded-xl,
.bg-white.dark\:bg-slate-900 {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

/* ---- 4. NAMED CARD KIT ------------------------------------------- */
.p3-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.p3-card-pad { padding: var(--sp-5); }
.p3-card-hover:hover,
.p3-card.p3-interactive:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}
.p3-card-glass {
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.p3-card-gradient-edge { position: relative; }
.p3-card-gradient-edge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, var(--accent-color), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.p3-card-gradient-edge:hover::before { opacity: 1; }

/* ---- 5. BUTTON SYSTEM -------------------------------------------- */
.p3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  padding: 0.6rem 1.05rem; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: var(--t-fast); text-decoration: none;
}
.p3-btn:active { transform: translateY(1px) scale(0.99); }
.p3-btn:disabled, .p3-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.p3-btn-sm { padding: 0.4rem 0.75rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.p3-btn-lg { padding: 0.8rem 1.5rem; font-size: var(--fs-base); border-radius: var(--radius-lg); }

.p3-btn-primary {
  background: var(--accent-gradient); color: #fff;
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.p3-btn-primary:hover { box-shadow: var(--shadow-accent); transform: translateY(-1px); }

.p3-btn-secondary {
  background: var(--bg-secondary); color: var(--text-primary);
  border-color: var(--border-color); box-shadow: var(--shadow-xs);
}
.p3-btn-secondary:hover { border-color: var(--accent-color); color: var(--accent-color); background: var(--accent-soft); }

.p3-btn-ghost { background: transparent; color: var(--text-secondary); }
.p3-btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.p3-btn-danger { background: var(--danger); color: #fff; }
.p3-btn-danger:hover { filter: brightness(1.07); box-shadow: 0 6px 18px -4px rgba(239,68,68,0.45); transform: translateY(-1px); }

/* White ink on emerald fills fails WCAG AA (2.54:1 on emerald-500, 3.77:1 on
   emerald-600). Dark ink is the only value that passes on BOTH shades
   (var(--slate-900): 7.04:1 on 500, 4.73:1 on 600) — so it is forced here for every
   utility-class combo instead of patching 28 call sites. Hovers that darkened
   to emerald-700 (where dark ink would fail at 3.25:1) were retargeted to
   emerald-500 in the Python. Emerald TEXT on dark surfaces is unaffected. */
.bg-emerald-500.text-white,
.bg-emerald-600.text-white {
  color: var(--slate-900) !important;
}

/* ---- 6. BADGES / CHIPS / PILLS ----------------------------------- */
.p3-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm); line-height: 1.4;
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.p3-badge-accent  { background: var(--accent-soft);  color: var(--accent-color); border-color: transparent; }
.p3-badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.p3-badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.p3-badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

.p3-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  padding: 0.32rem 0.7rem; border-radius: var(--radius-full);
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border-color); transition: var(--t-fast);
}
.p3-chip:hover { background: var(--accent-soft); color: var(--accent-color); border-color: var(--accent-color); }
.p3-chip.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

/* ---- 7. INPUTS / SELECTS / SEARCH -------------------------------- */
.p3-input, .p3-select {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--text-primary); background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 0.55rem 0.8rem; transition: var(--t-fast); outline: none;
}
.p3-input::placeholder { color: var(--text-muted); }
.p3-input:focus, .p3-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ---- 8. SEGMENTED CONTROL (restyle the existing one) ------------- */
.segmented-control { box-shadow: var(--shadow-inset); }
.segment-btn { font-weight: 600; }
.segment-btn.active { box-shadow: var(--shadow-sm); }

/* ---- 9. DIVIDERS ------------------------------------------------- */
.p3-divider { height: 1px; border: none; background: var(--border-color); margin: var(--sp-5) 0; }
.p3-divider-soft { background: var(--hairline); }
.p3-divider-label {
  display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted);
  font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.p3-divider-label::before, .p3-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

/* ---- 10. TOOLTIP (pure CSS, data-attr) --------------------------- */
[data-p3-tip] { position: relative; }
[data-p3-tip]::after {
  content: attr(data-p3-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--slate-900); color: #fff; font-size: var(--fs-2xs); font-weight: 600;
  padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 9999;
}
[data-p3-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.dark-mode [data-p3-tip]::after, html.dark [data-p3-tip]::after { background: #1A2336; border: 1px solid var(--border-color); }

/* ---- 11. SKELETON LOADERS ---------------------------------------- */
.p3-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--bg-tertiary) 30%, var(--bg-metric) 50%, var(--bg-tertiary) 70%);
  background-size: 200% 100%;
  animation: p3-shimmer 1.4s ease-in-out infinite;
}
@keyframes p3-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- 12. PREMIUM TABLE (auto-upgrades plain <table>) ------------- */
/* Applies broadly but conservatively to data tables. Modules that already
   ship their own table classes (press-table, xara-table, p3-*) are untouched
   where they set their own values. */
.p3-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.p3-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-tertiary); color: var(--text-secondary);
  font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; text-align: left; padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-strong);
}
.p3-table tbody td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--hairline); color: var(--text-primary); }
.p3-table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.p3-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-tertiary) 45%, transparent); }
.p3-table tbody tr:hover { background: var(--accent-soft); }
.p3-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- 13. KICKER / EYEBROW (the P3 brand micro-label) ------------- */
.p3-kicker {
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--tracking-kicker); color: var(--text-muted);
}

/* ---- 14. UTILITY: lift on hover, animate-in --------------------- */
.p3-lift { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.p3-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  .p3-skeleton { animation: none; }
  .p3-lift:hover, .p3-card-hover:hover, .p3-btn-primary:hover,
  .p3-btn-secondary:hover, .p3-btn-danger:hover { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- QSNXT brand wordmark link (heroes + footer) ----------------- */
.qsnxt-link { transition: opacity var(--dur-fast) var(--ease-out); cursor: pointer; }
.qsnxt-link:hover { opacity: 0.9; }
.qsnxt-link .qsnxt-wordmark {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur) var(--ease-out);
  padding-bottom: 1px;
}
.qsnxt-link:hover .qsnxt-wordmark { background-size: 100% 1.5px; }


/* --------------------------------------------------------------------------
   Graphs module — dark-mode counterparts. The builder widgets hardcode white
   backgrounds; without these the dark theme showed bright white toolbar,
   inputs and chat panel islands (one-palette light+dark mandate).
   -------------------------------------------------------------------------- */
html.dark .p3-toolbar-btn, .dark-mode .p3-toolbar-btn,
html.dark .p3-palette-swatch, .dark-mode .p3-palette-swatch,
html.dark .p3-title-input, .dark-mode .p3-title-input,
html.dark .p3-size-device-btn, .dark-mode .p3-size-device-btn,
html.dark .p3-size-input, .dark-mode .p3-size-input,
html.dark .p3-chat-input-row, .dark-mode .p3-chat-input-row,
html.dark .p3-chat-input-row input, .dark-mode .p3-chat-input-row input {
  background: var(--slate-900) !important;
  color: var(--slate-200) !important;
  border-color: var(--slate-700) !important;
}
html.dark .p3-chart-area, .dark-mode .p3-chart-area,
html.dark .p3-chat-panel, .dark-mode .p3-chat-panel {
  background: #0b1120 !important;
  border-color: var(--slate-700) !important;
}
html.dark .p3-chat-msg-agent, .dark-mode .p3-chat-msg-agent {
  background: var(--slate-800) !important;
  color: var(--slate-200) !important;
  border-color: var(--slate-700) !important;
}
html.dark .p3-chat-typing, .dark-mode .p3-chat-typing {
  background: var(--slate-800) !important;
  color: var(--slate-400) !important;
}


/* Minimal typography for .prose (AI-drafted articles): the typography plugin
   isn't installed, and preflight flattens h1-h6 to body size + strips list
   bullets — drafts rendered as one undifferentiated wall of text. */
.prose h1 { font-size: 1.5rem;  font-weight: 800; margin: 1.2em 0 0.5em; }
.prose h2 { font-size: 1.25rem; font-weight: 800; margin: 1.2em 0 0.5em; }
.prose h3 { font-size: 1.1rem;  font-weight: 700; margin: 1em 0 0.4em; }
.prose h4 { font-size: 1rem;    font-weight: 700; margin: 1em 0 0.4em; }
.prose ul { list-style: disc;    padding-left: 1.4em; margin: 0.6em 0; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin: 0.6em 0; }
.prose li { margin: 0.25em 0; }
.prose blockquote { border-left: 3px solid var(--slate-400); padding-left: 0.9em;
                    color: var(--slate-500); font-style: italic; margin: 0.8em 0; }

/* ----------------------------------------------------------------------------
   OVR "shine" ramp — the higher the rating, the more a gold/icon card glows.
   --gco-shine (grid P3-card overlay) and --ovr-shine (OVR chip) are 0..1, set
   inline from compute_overall_rating()['shine']. A floor-78 gold is calm; a
   90+ blazes. Appended last so it wins the cascade over the base tier rules. */
.p3card-grid-overlay.gco-gold,
.p3card-grid-overlay.gco-icon {
  border-color: rgba(250, 204, 21, calc(0.35 + var(--gco-shine, 0) * 0.45));
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45),
              0 0 calc(6px + var(--gco-shine, 0) * 30px)
                    rgba(250, 204, 21, calc(0.14 + var(--gco-shine, 0) * 0.5));
}
.ovr-chip.ovr-gold,
.ovr-chip.ovr-icon {
  box-shadow: 0 0 calc(1px + var(--ovr-shine, 0) * 13px)
                    rgba(250, 204, 21, calc(0.18 + var(--ovr-shine, 0) * 0.55));
}

/* CTA buttons that sit ON the brand gradient (Le peloton vous attend /
   Rejoignez le peloton). The global dark-mode override turns every .bg-white
   near-black, which left these buttons dark-on-dark with text-slate-900
   (invisible "Aller à mon profil" bug). On a colored gradient the button must
   stay white in BOTH themes. */
html.dark .p3-cta-onbrand,
.dark-mode .p3-cta-onbrand,
.p3-cta-onbrand {
  background-color: #F9FAFB !important;
  color: var(--slate-900) !important;
}

/* ===================================================================
   BOOT SPLASH + DISCONNECT OVERLAY (audit P0.4)
   Splash: instant static paint on #0B1120 until shiny:idle (JS removes it,
   hard 12s timeout so it can never block). Disconnect: branded box + reload
   CTA revealed on shiny:disconnected, above py-shiny's stock gray-out.
   =================================================================== */
#p3-splash {
  position: fixed; inset: 0; z-index: 100000;
  background: #0B1120;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.45s ease;
}
#p3-splash.p3-splash-done { opacity: 0; pointer-events: none; }
.p3-splash-inner { text-align: center; }
.p3-splash-mark {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 44px; letter-spacing: 0.28em;
  color: var(--slate-50);
}
.p3-splash-mark .p3-splash-3 { color: var(--accent-500); }
.p3-splash-bar {
  width: 148px; height: 3px; margin: 18px auto 0;
  background: rgba(148, 163, 184, 0.18); border-radius: 999px; overflow: hidden;
}
.p3-splash-bar-fill {
  width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  animation: p3SplashSlide 1.1s ease-in-out infinite;
}
@keyframes p3SplashSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(370px); }
}
@media (prefers-reduced-motion: reduce) {
  .p3-splash-bar-fill { animation: none; width: 100%; }
  #p3-splash { transition: none; }
}

.p3-disc-overlay {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(11, 17, 32, 0.88); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.p3-disc-overlay[hidden] { display: none; }
.p3-disc-box {
  max-width: 400px; text-align: center;
  background: var(--slate-900); border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px; padding: 36px 28px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6);
}
.p3-disc-icon { font-size: 34px; }
.p3-disc-title {
  margin-top: 14px; font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; font-size: 20px; color: var(--slate-50);
}
.p3-disc-sub { margin-top: 8px; font-size: 13px; color: var(--slate-400); }
.p3-disc-btn {
  margin-top: 22px; padding: 12px 26px; min-height: 44px;
  border: none; border-radius: 12px; cursor: pointer;
  background: var(--accent-500); color: #fff; font-weight: 700; font-size: 14px;
  transition: background 0.15s ease;
}
.p3-disc-btn:hover { background: var(--accent-600); }
.p3-disc-btn:focus-visible { outline: 2px solid var(--accent-300); outline-offset: 2px; }

/* ===================================================================
   BOOTSTRAP RECONCILIATION (audit P3)
   py-shiny ships the stock 'shiny' Bootstrap 5.3 preset: --bs-primary is
   #007bc2 and every stock component (the one .btn-primary, form focus
   rings, checks, the bundled bootstrap-datepicker) rendered default blue
   against an indigo site. custom.css loads AFTER bootstrap, so same-
   specificity overrides here win. Component vars must be overridden on
   the component (BS compiles literals into .btn-primary etc.).
   =================================================================== */
:root {
  --bs-primary: #0C447C;
  --bs-primary-rgb: 12, 68, 124;
  --bs-link-color: var(--accent-600);
  --bs-link-color-rgb: 12, 68, 124;
  --bs-link-hover-color: var(--accent-700);
  --bs-link-hover-color-rgb: 9, 56, 103;
  --bs-focus-ring-color: var(--accent-ring);
}
.dark-mode, html.dark {
  --bs-primary: #4B99E7;
  --bs-primary-rgb: 75, 153, 231;
  --bs-link-color: var(--accent-400);
  --bs-link-color-rgb: 75, 153, 231;
  --bs-link-hover-color: var(--accent-300);
  --bs-link-hover-color-rgb: 141, 189, 236;
}

.btn-primary {
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-bg: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--accent-ring);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--accent-ring);
}
.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}
.form-check-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem var(--accent-ring);
}

/* bootstrap-datepicker 1.9 (bundled with py-shiny's input_date): its active/
   today cells are compiled 2012-era blue gradients — retint to tokens. */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.active {
  background-image: none !important;
  background-color: var(--accent-color) !important;
  color: #fff !important;
  text-shadow: none !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled {
  background-image: none !important;
  background-color: var(--warning-soft) !important;
  color: inherit !important;
  text-shadow: none !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td span:hover {
  background: var(--accent-soft);
}
.dark-mode .datepicker-dropdown {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.dark-mode .datepicker table tr td.old,
.dark-mode .datepicker table tr td.new {
  color: var(--text-muted);
}
.dark-mode .datepicker table tr td.day:hover,
.dark-mode .datepicker table tr td span:hover {
  background: var(--accent-soft);
}

/* ===================================================================
   P4 — LIGHT-MODE CONTRAST (audit 2026-07-27, systematically measured:
   86 failing pairs across 5 pages; artifacts on gradient surfaces
   excluded). Root cause #1 was the light --text-muted token (fixed in
   the token block). The rest, scoped so DARK-PINNED surfaces (heroes,
   gco cards, footer, ticker — dark in both themes) keep light text.
   =================================================================== */
/* Muted tailwind text on light surfaces: slate-400 = 2.45–2.56:1. */
/* NOTE: the dark-pinned exception list must stay EXPLICIT classes — an
   attribute substring like [class*="bg-slate-9"] also matches every light
   card's "dark:bg-slate-900" variant and swallows the whole rule. */
body:not(.dark-mode) [class*="text-slate-400"]:not(:is(.p3-site-footer, .race-countdown-ticker, .gco-inline, .p3card, .p3-page-hero, .hm-hero, .hm-spot, .hm-scanlines, .p3card-grid-overlay) *) {
  color: var(--slate-600);
}

/* Emerald / amber as TEXT on light fails (3.4–3.8 / 1.85) — darken one
   ramp step in light; fills and dark-mode text untouched. */
body:not(.dark-mode) :is([class*="text-emerald-600"], [class*="text-emerald-500"]):not(:is(.p3-site-footer, .race-countdown-ticker, .gco-inline, .p3card, .p3-page-hero, .hm-hero, .hm-spot, .hm-scanlines, .p3card-grid-overlay) *) {
  color: #047857; /* emerald-700 — 5.49:1 on white */
}
body:not(.dark-mode) [class*="text-amber-500"]:not(:is(.p3-page-hero, .hm-hero, .hm-spot, .hm-scanlines, .gco-inline, .p3card) *) {
  color: #B45309; /* amber-700 */
}
body:not(.dark-mode) :is([class*="text-indigo-400"], [class*="text-indigo-300"]):not(:is(.p3-site-footer, .race-countdown-ticker, .gco-inline, .p3card, .p3-page-hero, .hm-hero, .hm-spot, .hm-scanlines, .p3card-grid-overlay) *) {
  color: var(--accent-600); /* 2.85 -> 7.3 on light */
}
body:not(.dark-mode) .text-sky-600 { color: #0369A1; }   /* 3.91 -> 5.9 */
body:not(.dark-mode) .text-rose-600 { color: #BE123C; }  /* 4.49 -> 5.9 */

/* Race-table category badges: 500-shade text on soft tints (3.2–3.8). */
body:not(.dark-mode) .p3-tbl-badge--gt { color: var(--accent-700); }
body:not(.dark-mode) .p3-tbl-badge--worlds { color: #BE123C; }
body:not(.dark-mode) .p3-tbl-badge--monument { color: #7E22CE; }
body:not(.dark-mode) .p3-tbl-badge--stage { color: #047857; }
body:not(.dark-mode) .p3-tbl-badge--nat { color: var(--slate-600); }

/* LIVE chip: red-300 on red-50 measured 1.62:1. */
body:not(.dark-mode) .hm-live-chip { color: #B91C1C; }

/* Nav role badge ('Gratuit'): slate-500 on slate-100 = 4.34. */
body:not(.dark-mode) .nav-role-badge { color: var(--slate-600); }

/* Footer is dark-pinned in BOTH themes: its slate-500 body text (4.24)
   and slate-600 legal line (2.66 on #020617) need LIGHTER text. */
.p3-site-footer :is([class*="text-slate-500"], [class*="text-slate-600"]) {
  color: var(--slate-400);
}

/* ===================================================================
   P7.5 / P7.6 / P7.8 — focus visibility, touch targets, reduced motion
   =================================================================== */
/* Keyboard focus must be VISIBLE on every interactive element (P7.5). */
:is(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 44px minimum touch targets (P7.6): carousel arrows were 34px; the lang
   menu items and the theme toggle were ~36px. Visual size stays similar —
   padding/hit-area grows. */
.p3-alc-arrow { min-width: 44px; min-height: 44px; }
[id^="nav-lang_"] { min-height: 44px; }
[id$="theme_toggle"] { min-width: 44px; min-height: 44px; }

/* Ranking marquee must respect prefers-reduced-motion (P7.8) — the sim's
   JS loop already exits early (see hmStartRace). */
@media (prefers-reduced-motion: reduce) {
  .hm-ticker-track { animation: none !important; }
}

/* ---- P4 dark-mode borderline fails (measured) --------------------- */
/* Active nav link: accent-500 at 13px = 3.67:1 on the tinted pill /
   4.29:1 on the page — one ramp step up passes (6.0:1). */
html.dark .nav-link-item.active, .dark-mode .nav-link-item.active,
html.dark .nav-link-item.active span, .dark-mode .nav-link-item.active span {
  color: var(--accent-400);
}
/* Rankings first-name + grid/table view toggles: slate-500 on dark cards. */
html.dark .rk-first, .dark-mode .rk-first,
html.dark .vtbtn, .dark-mode .vtbtn {
  color: var(--slate-400);
}
html.dark .vtbtn.vtbtn-active, .dark-mode .vtbtn.vtbtn-active {
  color: var(--text-primary); /* active pill bg is lighter — slate-400 = 4.46 */
}
/* 'Surperformance…' sub: emerald-500 at 70% alpha blends to 4.2:1 on dark. */
html.dark [class*="text-emerald-500/70"], .dark-mode [class*="text-emerald-500/70"] {
  color: var(--success-strong);
}


/* ===================================================================
   W/KG CONFIDENCE CHIPS (audit P5) — class-based, theme-aware, and every
   chip LINKS to /methodologie: the same wording reads as a disclaimer
   without a destination and as a rigour signal with one.
   =================================================================== */
.p3-conf-chip {
  display: inline-block; font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  border-radius: 6px; padding: 2px 6px; text-decoration: none;
  cursor: pointer;
}
.p3-conf-chip:hover { filter: brightness(1.12); text-decoration: underline; }
.p3-conf-high { background: rgba(16, 185, 129, 0.12); color: #047857; }
html.dark .p3-conf-high, .dark-mode .p3-conf-high { color: var(--success-strong); }
.p3-conf-medium { background: rgba(245, 158, 11, 0.12); color: #B45309; }
html.dark .p3-conf-medium, .dark-mode .p3-conf-medium { color: var(--warning); }
.p3-conf-low { background: rgba(100, 116, 139, 0.15); color: var(--text-secondary); }

/* ===================================================================
   P6 — HOMEPAGE HIERARCHY (audit; content unchanged, weight redistributed)
   Three tiers: the hero, two PRIMARY sections (LE DUEL, LA ROUTE — the
   click-through surfaces), everything else secondary. Plus one consistent
   vertical rhythm (96/64/48) instead of the mixed pb-6/pb-14/pb-16.
   =================================================================== */
/* rhythm: neutralize the per-section pb-* utilities, one margin rules all */
.hm-reveal.max-w-7xl {
  padding-bottom: 0 !important;
  margin-bottom: 96px;
}
@media (max-width: 1023px) { .hm-reveal.max-w-7xl { margin-bottom: 64px; } }
@media (max-width: 639px)  { .hm-reveal.max-w-7xl { margin-bottom: 48px; } }

/* primary section headings: larger, more air above */
.hm-h-primary { font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important; }
section:has(> * .hm-h-primary), section:has(.hm-h-primary) { padding-top: 12px; }

/* secondary headings: the default text-xl h2s quiet down a step */
.hm-reveal h2:not(.hm-h-primary):not(.gco-name) {
  font-size: 1rem;
  letter-spacing: 0.18em;
  opacity: 0.92;
}

/* hero rebalance: the four counters must not outweigh the two CTAs */
.hm-stat-cell { padding: 9px 8px; background: rgba(255, 255, 255, 0.03); }
.hm-stat-cell > span:first-child {
  font-size: 1.25rem !important;  /* was text-2xl/3xl — quiet stat, not display type */
}
.hm-btn-primary, .hm-btn-ghost {
  min-height: 48px;
  font-size: 13px;
  padding: 14px 30px;
}

/* Stage-results table inks (mod_races._stage_results_html). Classes, not
   inline styles: the same HTML renders on this always-dark surface AND in
   the portal's light mode — see portal.css for the light values. */
.p3-sr-name { color: #f1f5f9; }
.p3-sr-team { color: #94a3b8; }
.p3-sr-gap  { color: #cbd5e1; }
.p3-sr-p1 { color: #fbbf24; }
.p3-sr-p2 { color: #cbd5e1; }
.p3-sr-p3 { color: #d97706; }
.p3-sr-pn { color: #64748b; }
/* generic primary-ink class for shared HTML builders (dark surface here,
   theme-aware in portal.css) */
.p3-ink-hi { color: #f1f5f9; }

/* Premium paywall gate (mod_premium.premium_section / gated()) — teams,
   statistics, records, juniors and the rider drawer all wrap gated content
   in this markup. Its rules used to exist only as mod_premium.PREMIUM_CSS,
   a <style> block the old Shiny app_ui() injected; the Flask "carbon" path
   (page_carbon.html) never picked it up, so every gate rendered as
   unstyled, unblurred plain text stacked over the fake content instead of
   the blurred card + unlock overlay it was designed as. */
.premium-blur-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.premium-blur-content {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
  opacity: 0.75;
}
.premium-overlay-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 31, 0.78);
  backdrop-filter: blur(3px);
  z-index: 10;
  gap: 8px;
  padding: 24px;
  text-align: center;
  overflow: hidden;
}
.premium-overlay-badge .badge-icon {
  font-size: 2rem;
  line-height: 1;
  color: #4EA8A0;
  z-index: 20;
  margin-bottom: 4px;
  transition: transform 0.3s ease;
}
.premium-overlay-badge:hover .badge-icon {
  transform: scale(1.1) rotate(-5deg);
}
.premium-overlay-badge .badge-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 20;
}
.premium-overlay-badge .badge-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 240px;
  line-height: 1.5;
  z-index: 20;
  margin-bottom: 8px;
}
.premium-unlock-btn {
  background: linear-gradient(135deg, #4EA8A0, #488880);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(78, 168, 160, 0.4);
  transition: all 0.25s ease;
  z-index: 20;
}
.premium-unlock-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(78, 168, 160, 0.65);
  background: linear-gradient(135deg, #6dc4bc, #4EA8A0);
}