/* ==========================================================================
   FIA SUPER LICENCE POINTS TRACKER — styles
   Institutional FIA navy + white, geometric uppercase display type,
   with an animated, flowing racing-themed background.
   ========================================================================== */

:root {
  --navy:        #00254e;
  --navy-dark:   #001a37;
  --navy-deep:   #000f22;
  --navy-mid:    #0a4fa0;
  --navy-line:   #0a3a6b;
  --azure:       #0090d0;
  --ink:         #0d1b2a;
  --body:        #33414f;
  --muted:       #6b7889;
  --line:        #e1e6ee;
  --line-strong: #c9d2df;
  --bg:          #ffffff;
  --bg-alt:      #f4f7fb;
  --bg-tint:     #eef3f9;
  --gold:        #c9a227;
  --gold-bright: #e2c15a;
  --gold-rule:   3px solid #c9a227;  /* the separator between the moving background and header / white body / footer */
  --go:          #1f8a53;
  --go-tint:     #e7f4ec;
  --red:         #c8102e;
  --shadow:      0 1px 2px rgba(10,30,60,.06), 0 10px 30px rgba(10,30,60,.08);
  --radius:      12px;
  --maxw:        1760px;   /* wide layout: content uses most of the screen, with a modest side buffer */
  --display: "Jost", "Futura PT", "Century Gothic", system-ui, sans-serif;
  --text: "Inter", "Myriad Pro", -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--text); color: var(--body);
  background: var(--navy-deep); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  display: flex; flex-direction: column;   /* lets the white body stretch so the footer sits at the bottom */
}
body > main, body > .page-body { flex: 1 0 auto; }
h1,h2,h3,h4 { font-family: var(--display); color: var(--ink); margin: 0; font-weight: 500; letter-spacing: .01em; }
a { color: var(--navy-mid); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }

/* ==========================================================================
   ANIMATED FLOW BACKGROUND (racing-themed, elegant, performant / CSS-only)
   ========================================================================== */
.bg-flow {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(1200px 900px at 70% -10%, #06305f 0%, rgba(6,48,95,0) 55%),
    radial-gradient(1000px 800px at 10% 110%, #04213f 0%, rgba(4,33,63,0) 55%),
    linear-gradient(160deg, #001a37 0%, #000f22 60%, #00152c 100%);
}
.bg-flow .orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  mix-blend-mode: screen; opacity: .55; will-change: transform;
}
.orb.o1 { width: 48vmax; height: 48vmax; left: -8vmax; top: -10vmax;
  background: radial-gradient(circle at 50% 50%, #0b63c4, rgba(11,99,196,0) 68%);
  animation: drift1 26s ease-in-out infinite; }
.orb.o2 { width: 40vmax; height: 40vmax; right: -6vmax; top: 6vmax;
  background: radial-gradient(circle at 50% 50%, #0bb7c6, rgba(11,183,198,0) 68%);
  animation: drift2 32s ease-in-out infinite; }
.orb.o3 { width: 52vmax; height: 52vmax; left: 25vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, #0a4fa0, rgba(10,79,160,0) 70%);
  animation: drift3 38s ease-in-out infinite; }
.orb.o4 { width: 26vmax; height: 26vmax; right: 12vmax; bottom: -6vmax;
  background: radial-gradient(circle at 50% 50%, rgba(201,162,39,.75), rgba(201,162,39,0) 70%);
  opacity: .28; animation: drift2 44s ease-in-out infinite reverse; }
.orb.o5 { width: 22vmax; height: 22vmax; left: 38vmax; top: -8vmax;
  background: radial-gradient(circle at 50% 50%, rgba(200,16,46,.6), rgba(200,16,46,0) 70%);
  opacity: .22; animation: drift1 50s ease-in-out infinite reverse; }

/* slow diagonal light "speed" streaks */
.bg-flow .streak {
  position: absolute; height: 1.5px; width: 140%; left: -20%;
  background: linear-gradient(90deg, transparent, rgba(120,190,255,.0) 10%, rgba(140,205,255,.55) 50%, rgba(120,190,255,0) 90%, transparent);
  filter: blur(1px); opacity: .0; transform: rotate(-18deg); transform-origin: center;
}
.streak.k1 { top: 32%; animation: sweep 11s linear infinite; }
.streak.k2 { top: 54%; animation: sweep 14s linear infinite 4s; }
.streak.k3 { top: 72%; animation: sweep 9s  linear infinite 7s; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.08); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vmax, 5vmax) scale(1.1); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vmax, -5vmax) scale(1.06); } }
@keyframes sweep {
  0%   { transform: translateX(-30%) rotate(-18deg); opacity: 0; }
  12%  { opacity: .9; }
  50%  { opacity: .5; }
  88%  { opacity: .0; }
  100% { transform: translateX(40%) rotate(-18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-flow .orb, .bg-flow .streak { animation: none !important; }
}

/* ==========================================================================
   HEADER + NAV (with logo + hamburger)
   ========================================================================== */
.util-bar { background: rgba(0,15,34,.55); color: #9fb0c6; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.05); }
.util-bar .container { display: flex; justify-content: space-between; align-items: center; height: 32px; }
.util-bar .accus-mini { display:flex; align-items:center; gap:7px; }
.util-bar .accus-mini img { height: 13px; width:auto; }

/* outer wrapper is the sticky element: the utility bar scrolls away, the main bar stays */
#site-header { position: sticky; top: -32px; z-index: 50; }
.site-header { background: rgba(0,26,55,.86); backdrop-filter: blur(10px); border-bottom: var(--gold-rule); box-shadow: 0 2px 20px rgba(0,8,20,.35); }
.site-header .container { display: flex; align-items: center; gap: 22px; height: 70px; }
.brand { display: flex; align-items: center; gap: 13px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand img.fia { height: 38px; width: auto; }
.brand .divider { width: 1px; height: 30px; background: rgba(255,255,255,.2); }
.brand-text .brand-title { font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.05; color: #fff; }
.brand-text .brand-sub { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8fb9ee; margin-top: 2px; }

.header-nav { margin-left: auto; display: flex; gap: 28px; align-items: center; }
.header-nav a { color: #d4e0f0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; }
.header-nav a:hover { color: #fff; border-color: var(--gold); text-decoration: none; }
.header-nav a.active { color: #fff; border-color: var(--gold); }

.nav-toggle { margin-left: auto; display: none; width: 44px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-6px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav { display: none; position: fixed; top: 102px; left: 0; right: 0; z-index: 60; background: #00142a; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px rgba(0,8,20,.5); padding: 10px 0 18px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .22s, opacity .22s; }
.mobile-nav.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav a { display: block; color: #e3ecf8; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--display); padding: 14px 28px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mobile-nav a:hover, .mobile-nav a.active { color: #fff; background: rgba(255,255,255,.05); text-decoration: none; }

/* ==========================================================================
   LANDING (launchpad — single screen, no scroll)
   ========================================================================== */
/* evenly balanced: equal space above and below, with spacing that grows with screen height */
.landing { display: flex; flex-direction: column; padding: clamp(28px, 5vh, 64px) 0 18px; }  /* fills the space under the header (body is a flex column) */
.landing .container { width: 100%; flex: 1; display: flex; align-items: center; }
/* small credit line pinned to the bottom of the landing page */
.landing-credit { display:flex; align-items:center; justify-content:center; gap: 10px; margin-top: 22px;
  color:#93a6bf; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.landing-credit .lc-fia { height: 24px; width: auto; }
.landing-credit .lc-jakib { height: 17px; width: auto; }
.landing-inner { max-width: 1320px; margin: 0 auto; text-align: center; color: #fff; }
.landing .eyebrow { display:inline-flex; align-items:center; gap:10px; font-size: 12px; letter-spacing:.2em; text-transform:uppercase; color:#a9bbd3; margin-bottom:22px; }
.landing .eyebrow::before, .landing .eyebrow::after { content:""; width:28px; height:1px; background: var(--gold); }
.landing h1 { color:#fff; font-size: clamp(36px, min(6vw, 8.6vh), 92px); line-height: 1.0; text-transform: uppercase; letter-spacing:.01em; }
.landing h1 .hl {
  color: var(--gold-bright);
  background: linear-gradient(90deg, #c9a227 0%, #f0d679 50%, #c9a227 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.launch-cards { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: clamp(36px, 7vh, 88px); }
.launch-card { display:block; text-align:left; background: rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: clamp(20px, 2.6vh, 30px) 24px; color:#fff; transition: transform .15s, background .15s, border-color .15s; }
.launch-card:hover { text-decoration:none; transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: var(--gold); }
.launch-card .lc-ico { width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.1); display:grid; place-items:center; margin-bottom: 14px; }
.launch-card .lc-ico svg { width: 22px; height: 22px; stroke:#8fc3ff; fill:none; stroke-width:1.7; }
.launch-card h3 { color:#fff; font-size: 19px; text-transform: uppercase; letter-spacing:.03em; }
.launch-card p { margin: 6px 0 0; color:#b9c6d8; font-size: 12.5px; line-height:1.5; }
.launch-card .lc-go { margin-top: 12px; font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color:#8fc3ff; }

.landing-stats { display:flex; justify-content:center; gap: clamp(40px, 5vw, 96px); margin-top: clamp(32px, 6.5vh, 80px); flex-wrap: wrap; }
.landing-stats .s .n { font-family: var(--display); font-size: 30px; color:#fff; font-weight:500; }
.landing-stats .s .n .u { font-size: 14px; color:#9fb3cd; margin-left:3px; }
.landing-stats .s .l { font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color:#9fb3cd; margin-top: 4px; }

/* ==========================================================================
   INTERIOR PAGES
   ========================================================================== */
.page-hero { color:#fff; padding: 46px 0 38px; }
.page-hero .eyebrow { font-size: 12px; letter-spacing:.16em; text-transform:uppercase; color:#a9bbd3; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.page-hero .eyebrow::before { content:""; width:24px; height:2px; background:var(--gold); }
.page-hero h1 { color:#fff; font-size: clamp(28px, 4vw, 46px); text-transform: uppercase; }
.page-hero p { max-width: 74ch; margin: 12px 0 0; color:#cdd9e8; font-size: 15.5px; }

.page-body { background: var(--bg-alt); min-height: 50vh; border-top: var(--gold-rule); }
.page-body .container { padding-top: 34px; padding-bottom: 60px; }

.block { margin-bottom: 40px; }
.block-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.block-head h2 { font-size: clamp(20px,2.4vw,27px); text-transform:uppercase; color:var(--ink); }
.block-head .sub { font-size: 12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid thead th { background: var(--navy); color:#fff; text-align:left; font-family: var(--text); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 14px; white-space: nowrap; }
table.grid tbody td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
table.grid tbody tr:nth-child(even) td { background: var(--bg-alt); }
table.grid tbody tr:hover td { background: var(--bg-tint); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

.pos-badge { display:inline-grid; place-items:center; width: 28px; height: 28px; border-radius: 7px; background: var(--navy); color:#fff; font-family: var(--display); font-weight: 600; font-size: 14px; }
.pos-1 .pos-badge { background: var(--gold); color: var(--navy-dark); }
.driver-cell { display:flex; align-items:center; gap: 11px; }
.driver-avatar { width: 34px; height: 34px; border-radius: 50%; flex:none; background: linear-gradient(135deg, var(--navy-mid), var(--navy)); color:#fff; display:grid; place-items:center; font-family: var(--display); font-weight:600; font-size:12.5px; }
.driver-name { font-weight: 600; color: var(--ink); }
.nat-flag { font-size: 10.5px; font-weight:700; letter-spacing:.06em; color: var(--navy-mid); border:1px solid var(--line-strong); border-radius:4px; padding:1px 5px; }
.team-tag { font-size: 13px; color: var(--body); }

.sl-pts { font-family: var(--display); font-weight:600; font-size: 19px; color: var(--navy-mid); }
.sl-pts.zero { color:#b6c0ce; font-size: 15px; }
.proj-pill { display:inline-flex; align-items:center; gap:6px; background: var(--go-tint); color: var(--go); font-weight:700; font-size: 13px; padding: 4px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.proj-pill.none { background:#eef2f8; color: var(--muted); font-weight:600; }

/* series selector */
.series-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom: 20px; }
.series-tab { border:1px solid var(--line-strong); background:#fff; color:var(--body); padding:9px 15px; border-radius:999px; font-size:12.5px; cursor:pointer; letter-spacing:.02em; display:inline-flex; align-items:center; gap:8px; transition: all .12s; }
.series-tab:hover { border-color:var(--navy-mid); color:var(--navy-mid); }
.series-tab.active { background: var(--navy); color:#fff; border-color: var(--navy); }
.series-tab .dot { width:8px; height:8px; border-radius:50%; background: var(--accent, var(--navy-mid)); }
.series-tab.active .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }

.series-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.series-head .sh-name { font-family:var(--display); font-weight:600; font-size:22px; color:var(--ink); text-transform:uppercase; }
.series-head .sh-meta { font-size:12px; color:var(--muted); }
.status-chip { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.status-chip.live { background:#e7f0fb; color:var(--navy-mid); }
.status-chip.final { background: var(--go-tint); color:var(--go); }
.status-chip.wait { background:#f3ede1; color:#8a6d16; }

.empty-state { background:#fff; border:1px dashed var(--line-strong); border-radius: var(--radius); padding: 30px; text-align:center; color: var(--muted); }
.empty-state b { color: var(--ink); display:block; font-family:var(--display); font-size:17px; margin-bottom:6px; }

/* grids page */
.grid-teams { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px; }
.team-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.team-card .tc-head { background: var(--navy); color:#fff; padding:11px 15px; font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.03em; display:flex; justify-content:space-between; align-items:center; }
.team-card .tc-driver { padding:11px 15px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.team-card .tc-driver:first-of-type { border-top:none; }
.team-card .tc-tag { font-size:11px; color:var(--gold); padding: 8px 15px 12px; }

/* F1 current grid — one full-width row per team, in team colours */
.f1-teams { display:flex; flex-direction:column; gap: 16px; }
.team-row {
  position:relative; overflow:hidden; isolation:isolate; border-radius: 16px; color:#fff;
  display:grid; grid-template-columns: 300px auto minmax(0, 1fr); align-items: stretch;
  min-height: 214px; border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(100deg, #08111f 0%, color-mix(in srgb, var(--c1) 34%, #08111f) 36%, color-mix(in srgb, var(--c1) 82%, #000) 100%);
  box-shadow: 0 12px 30px rgba(5,15,35,.18);
}
.team-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg, var(--c1), var(--c2)); z-index:2; }
.team-row::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 24px);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%); mask-image: linear-gradient(90deg, transparent 35%, #000 100%); }
.tr-mark { position:absolute; z-index:-1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88%; height: 135%;
  object-fit: contain; object-position: center; filter: brightness(0) invert(1); opacity: .10; pointer-events:none; }

.tr-brand { position:relative; padding: 22px 22px 22px 30px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap: 10px; border-right: 1px solid rgba(255,255,255,.08); background: rgba(4,10,22,.35); }
.tr-logo { width: 100%; height: 126px; display:flex; align-items:center; justify-content:center; margin-bottom: 2px; }
.tr-logo img { max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.tr-pu { font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.tr-pu b { color:#fff; font-weight:600; }
/* team note (e.g. Cadillac's reserve) as a corner badge, so every team row keeps the same height */
.tr-badge { position:absolute; top: 14px; right: 18px; z-index: 1; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--gold-bright); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.tr-site { align-self:center; display:inline-flex; align-items:center; gap:7px; margin-top: 2px; font-size: 11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 13px; background: rgba(255,255,255,.06); transition: background .15s, color .15s; }
.tr-site:hover { background:#fff; color: var(--navy); text-decoration:none; }
.tr-site svg { width: 12px; height: 12px; stroke: currentColor; fill:none; stroke-width: 2.2; }

.tr-drivers { position:relative; display:grid; grid-template-columns: repeat(2, 400px); }
.tr-driver { display:flex; align-items:stretch; gap: 18px; padding: 0 16px 0 0; min-width:0; }
.tr-driver + .tr-driver { border-left: 1px solid rgba(255,255,255,.07); }
.tr-shot { position:relative; width: 180px; align-self: stretch; flex:none; overflow:hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 45%, transparent), rgba(255,255,255,.03)); }
.tr-shot .fb { position:absolute; inset:0; display:grid; place-items:center; font-family: var(--display); font-weight:600; font-size: 42px; color: rgba(255,255,255,.88); letter-spacing:.02em; }
.tr-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center bottom; }
.tr-shot.has-img .fb { display:none; }
.tr-dinfo { padding: 22px 0 20px; min-width:0; display:flex; flex-direction:column; justify-content:flex-start; }
.tr-rank { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.24); display:flex; flex-direction:column; gap: 4px; }
/* race number: centred in the space between the surname and the standings divider */
.tr-num { margin: auto 0; font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; color: var(--num, var(--c2)); letter-spacing: .02em; }
.tr-num + .tr-rank { margin-top: 0; }
.tr-rank-lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.tr-rank-val { display:flex; flex-direction:column; align-items:flex-start; gap: 4px; }
.tr-rank-val b { font-family: var(--display); font-size: 26px; font-weight: 600; line-height: 1; color:#fff; }
.tr-rank-val b.p1 { color: var(--gold-bright); }
.tr-rank-val b.p2 { color: #d9dee6; }
.tr-rank-val b.p3 { color: #e6a872; }
.tr-rank-val span { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.tr-flag { display:flex; align-items:center; gap:8px; font-size: 11px; font-weight:600; letter-spacing:.12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.tr-flag img { width: 26px; height: 19.5px; border-radius:3px; object-fit:cover; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.tr-first { font-size: 15px; color: rgba(255,255,255,.82); margin-top: 10px; }
.tr-last { font-family: var(--display); font-weight:600; font-size: 26px; text-transform: uppercase; line-height:1.0; letter-spacing:.01em; white-space: nowrap; }

.tr-stage { position:relative; display:flex; align-items:center; justify-content:center; padding: 14px 26px; border-left: 1px solid rgba(255,255,255,.07); }
.tr-car-img { position:relative; width: 78%; max-width: 440px; height:auto; filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); }

.grid-meta { display:flex; flex-wrap:wrap; align-items:center; gap: 14px; margin-bottom: 18px; }

/* matrix */
.filters { display:flex; flex-direction:column; gap: 10px; margin-bottom: 18px; }
.filter-row { display:flex; flex-wrap:wrap; gap: 8px; align-items:center; }
.filters .fl-label { font-size: 11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); min-width: 64px; }
.chip { border:1px solid var(--line-strong); background:#fff; color: var(--body); padding: 7px 13px; border-radius:999px; font-size:12.5px; cursor:pointer; transition: all .12s; }
.chip:hover { border-color: var(--navy-mid); color: var(--navy-mid); }
.chip.active { background: var(--navy); color:#fff; border-color: var(--navy); }
.search { margin-left:auto; border:1px solid var(--line-strong); border-radius:8px; padding:9px 13px; font-size:13px; min-width:230px; color:var(--ink); font-family:var(--text); }
.search:focus { outline:2px solid var(--navy-mid); border-color:var(--navy-mid); }
.matrix-table { table-layout: fixed; min-width: 960px; }
.matrix-table col.c-champ { width: 27%; }
.matrix-table col.c-region { width: 11%; }
.matrix-table col.c-pos { width: 6.2%; }
.matrix-table thead th { font-size: 13px; padding: 16px 14px; }
.matrix-table thead th.pos { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: 0; text-align: center; }
.matrix-table thead th.ph1 { color: #e8c75c; box-shadow: inset 0 -4px 0 #c9a227; }
.matrix-table thead th.ph2 { color: #cfd6e0; box-shadow: inset 0 -4px 0 #a9b3c1; }
.matrix-table thead th.ph3 { color: #e6a872; box-shadow: inset 0 -4px 0 #c98a4f; }
.matrix-table td.champ { font-weight:600; color:var(--ink); font-size: 14.5px; }
.matrix-table td.pos { text-align:center; font-variant-numeric:tabular-nums; font-size: 15px; }
table.grid.matrix-table tbody tr td.pcol1 { background: rgba(201,162,39,.20); font-weight:700; color:var(--ink); }
table.grid.matrix-table tbody tr td.pcol2 { background: rgba(150,162,178,.22); font-weight:700; color:var(--ink); }
table.grid.matrix-table tbody tr td.pcol3 { background: rgba(205,127,50,.15); font-weight:700; color:var(--ink); }
.pval-0 { color:#c2cad6; }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:4px; }
.badge.accus { background: var(--navy); color:#fff; } .badge.hist { background:#f3ede1; color:#8a6d16; }

/* rules */
.rules-list { columns: 2; column-gap: 38px; margin:0; padding-left:18px; }
.rules-list li { margin-bottom: 12px; break-inside: avoid; color: var(--body); font-size: 13.5px; }
.rules-list li b { color: var(--ink); }
.callout { background: var(--navy); color:#fff; border-radius: var(--radius); padding: 30px 34px; margin-bottom: 36px; }
.callout .q { font-size:15px; font-style:italic; color:#eaf0f8; border-left:3px solid var(--gold); padding-left:16px; margin:0 0 14px; }
.callout h3 { color:#fff; text-transform:uppercase; margin-bottom:8px; }
.callout p { color:#cfdaea; max-width:74ch; margin:0; }

.disclaimer { background: rgba(255,248,230,.95); border:1px solid #f0e2b8; color:#7a5f10; font-size:12.5px; padding:10px 14px; border-radius:8px; margin-top:16px; }

/* footer */
.site-footer { background: rgba(0,15,34,.94); backdrop-filter: blur(6px); color:#9fb0c6; padding: 26px 0; border-top: var(--gold-rule); }
.site-footer .container { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; font-size:12.5px; }
.site-footer .ft-brand { display:flex; align-items:center; gap:10px; }
.site-footer .ft-brand img { height: 20px; width:auto; }
.site-footer a { color:#cdd6e3; }

/* ==========================================================================
   RANKINGS — faceted filter sidebar + results
   ========================================================================== */
.rk-layout { display:grid; grid-template-columns: 286px minmax(0,1fr); gap: 26px; align-items:start; }

.rk-filters { position: sticky; top: 88px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-height: calc(100vh - 108px); overflow:auto; }
.rkf-head { position: sticky; top: 0; z-index: 2; display:flex; justify-content:space-between; align-items:center; padding: 14px 16px; background: var(--navy); color:#fff; font-family: var(--display); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size: 14px; border-bottom: var(--gold-rule); }
.rkf-clear { background:none; border:none; color: var(--gold-bright); font: 600 11px var(--text); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:4px 0; }
.rkf-clear:hover { color:#fff; }
.rkf-close { display:none; background:none; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; margin-left:12px; }
.rkf-search { position:relative; padding: 12px 14px; border-bottom:1px solid var(--line); }
.rkf-search input { width:100%; border:1px solid var(--line-strong); border-radius:8px; padding:9px 12px 9px 34px; font: 13px var(--text); color: var(--ink); }
.rkf-search input:focus { outline:2px solid var(--navy-mid); border-color: var(--navy-mid); }
.rkf-search svg { position:absolute; left:26px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke: var(--muted); fill:none; stroke-width:2; }

.rkf-group { border-bottom:1px solid var(--line); }
.rkf-group:last-child { border-bottom:none; }
.rkf-group > summary { list-style:none; cursor:pointer; padding: 13px 16px; display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--navy); }
.rkf-group > summary::-webkit-details-marker { display:none; }
.rkf-group > summary .chev { margin-left:auto; color: var(--muted); transition: transform .15s; font-size:16px; }
.rkf-group[open] > summary .chev { transform: rotate(90deg); }
.rkf-group .rkf-sel { font-size: 10.5px; color: #8a6d16; background: #f6eed3; border-radius: 999px; padding: 1px 8px; letter-spacing:.02em; text-transform:none; font-weight:700; }
.rkf-opts { padding: 0 10px 12px; }
.rkf-sub { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); padding: 10px 6px 4px; font-weight:700; }
.rkf-opt { position:relative; display:flex; align-items:center; gap:10px; padding: 7px 6px; border-radius:7px; cursor:pointer; font-size:13px; color: var(--body); user-select:none; }
.rkf-opt:hover { background: var(--bg-tint); }
.rkf-opt input { position:absolute; opacity:0; pointer-events:none; }
.rkf-box { width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line-strong); background:#fff; display:grid; place-items:center; flex:none; transition: background .12s, border-color .12s; }
.rkf-opt input:checked + .rkf-box { background: var(--navy); border-color: var(--navy); }
.rkf-opt input:checked + .rkf-box::after { content:""; width:9px; height:5px; border-left:2px solid var(--gold-bright); border-bottom:2px solid var(--gold-bright); transform: translate(0,-1px) rotate(-45deg); }
.rkf-opt input:focus-visible + .rkf-box { outline:2px solid var(--navy-mid); outline-offset:2px; }
.rkf-dot { width:8px; height:8px; border-radius:50%; background: var(--c, var(--navy-mid)); flex:none; }
.rkf-label { flex:1; min-width:0; line-height:1.3; }
.rkf-hint { display:block; font-size:11px; color: var(--muted); }
.rkf-count { font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rkf-opt.empty { opacity:.42; }
.rkf-series { max-height: 360px; overflow:auto; }

.rk-toolbar { display:flex; align-items:center; gap:14px; margin-bottom: 12px; flex-wrap:wrap; }
.rk-summary { font-size:13px; color: var(--muted); }
.rk-summary b { color: var(--ink); }
.rk-filter-toggle { display:none; align-items:center; gap:8px; border:1px solid var(--navy); background: var(--navy); color:#fff; border-radius:9px; padding:9px 14px; font: 600 12px var(--text); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.rk-filter-toggle .n { background: var(--gold); color: var(--navy-dark); border-radius:999px; padding:0 7px; font-size:11px; }
.seg { margin-left:auto; display:inline-flex; background:#fff; border:1px solid var(--line-strong); border-radius:10px; padding:3px; box-shadow: var(--shadow); }
.seg button { border:none; background:transparent; padding:8px 14px; border-radius:7px; font: 600 11.5px var(--text); letter-spacing:.07em; text-transform:uppercase; color: var(--muted); cursor:pointer; }
.seg button.on { background: var(--navy); color:#fff; }
.rk-actions { display:flex; gap:14px; margin-bottom: 10px; }
.rk-link { background:none; border:none; padding:0; color: var(--navy-mid); font: 600 12px var(--text); cursor:pointer; letter-spacing:.03em; }
.rk-tokens { display:flex; flex-wrap:wrap; gap:7px; margin-bottom: 14px; }
.rk-tokens:empty { display:none; }
.rk-token { display:inline-flex; align-items:center; gap:7px; background: var(--navy); color:#fff; border-radius:999px; padding:4px 5px 4px 12px; font-size:12px; }
.rk-token button { width:18px; height:18px; border-radius:50%; border:none; background: rgba(255,255,255,.18); color:#fff; cursor:pointer; line-height:18px; font-size:13px; padding:0; }
.rk-token button:hover { background: var(--gold); color: var(--navy-dark); }

/* series accordion */
.rs-card { background:#fff; border:1px solid var(--line); border-left: 4px solid var(--c, var(--navy)); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow:hidden; }
.rs-head { width:100%; display:grid; grid-template-columns: minmax(0,1fr) 300px 132px 96px 18px; gap:18px; align-items:center; padding: 14px 18px; background:#fff; border:none; cursor:pointer; text-align:left; font: inherit; color: inherit; }
.rs-head:hover { background: var(--bg-tint); }
.rs-name { display:block; font-family: var(--display); font-weight:600; font-size:17px; color: var(--ink); text-transform:uppercase; letter-spacing:.02em; line-height:1.15; }
.rs-tags { display:block; font-size:11.5px; color: var(--muted); margin-top:3px; }
.rs-leader { font-size:13px; color: var(--ink); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-head .status-chip { justify-self: start; }
.rs-leader.is-champ .who { color: #a9820f; font-weight: 700; }
.rs-leader.is-champ .lbl { color: #b8901c; }
.rs-leader .lbl { display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }
.rs-p1 { text-align:right; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); white-space:nowrap; }
.rs-p1 b { display:block; font-family: var(--display); font-size: 21px; color: var(--navy-mid); line-height:1; letter-spacing:0; }
.rs-head .chev { color: var(--muted); transition: transform .15s; font-size:20px; text-align:center; }
.rs-card.open .rs-head .chev { transform: rotate(90deg); }
.rs-body { display:none; border-top: 1px solid var(--line); }
.rs-card.open .rs-body { display:block; }
.rs-note { padding: 10px 18px; font-size:12.5px; color: var(--muted); background: var(--bg-alt); border-bottom:1px solid var(--line); }
.rs-note a { color: var(--navy-mid); }
.rs-body table.grid thead th { background: var(--navy-dark); }
tr.no-points td { color: var(--muted); }
tr.points-cut td { border-top: 2px solid var(--gold) !important; }
.rs-empty { padding: 22px 18px; color: var(--muted); font-size:13px; }

/* Super Licence columns: Est. Current / Potential / Projected */
.rs-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding: 10px 18px; background: var(--bg-alt); border-bottom:1px solid var(--line); }
.rs-meta { font-size:12.5px; color: var(--muted); }
.rs-meta a { color: var(--navy-mid); }
.seg-sm { margin-left:0; box-shadow:none; align-items:center; }
.seg-sm button { padding: 6px 11px; font-size: 11px; }
.seg-lbl { font-size: 10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); padding: 0 8px 0 6px; }
table.grid thead th.sl-col { background: var(--navy-mid); border-bottom: 2px solid var(--gold); }
.rs-body table.grid thead th.sl-col { background: #0b3a73; }
td.sl-col { white-space: nowrap; }
.sl-line { display:inline-block; width: 26px; height: 3px; border-radius: 2px; background: #c3cbd7; vertical-align: middle; }
.sl-cur, .sl-proj { display:inline-block; min-width: 38px; padding: 3px 9px; border-radius: 999px; font-family: var(--display); font-weight:600; font-size: 15px; color: var(--navy); background: #e8eef7; font-variant-numeric: tabular-nums; cursor: help; }
.sl-cur.hit, .sl-proj.hit { background: var(--navy); color:#fff; box-shadow: inset 0 0 0 1.5px var(--gold); }
.sl-pair { display:inline-grid; grid-template-columns: 56px 52px; align-items:center; column-gap: 6px; }
.sl-slot { display:flex; justify-content:center; }
.sl-delta { font-size: 11.5px; font-weight:700; font-variant-numeric: tabular-nums; text-align:left; white-space:nowrap; }
.sl-delta.up { color: var(--go); }
.sl-delta.down { color: var(--red); }
.sl-legend { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 22px; background:#fff; border:1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.sl-legend b { display:block; color: var(--ink); font-size: 11px; letter-spacing:.08em; text-transform: uppercase; margin-bottom: 2px; }
.sl-legend-key { display:flex; align-items:center; gap: 8px; }

/* nationality with flag */
.nat { display:inline-flex; align-items:center; gap:7px; font-size: 11px; font-weight:700; letter-spacing:.06em; color: var(--navy-mid); white-space: nowrap; }
.nat .flag { width: 22px; height: 16.5px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.nat .flag-neutral { display:inline-block; background: repeating-linear-gradient(135deg, #d4dbe5 0 3px, #eef1f5 3px 6px); }

/* all-drivers view */
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color: var(--gold-bright); }
th.sortable .arr { margin-left:5px; opacity:.55; }
th.sortable.sorted .arr { opacity:1; color: var(--gold-bright); }
.sc-chip { display:inline-block; white-space:nowrap; font-size:11px; background: var(--bg-tint); color: var(--navy); border-radius:5px; padding:2px 7px; margin:2px 4px 2px 0; }
.sc-chip b { font-weight:700; }
.proj-pill.hit { background: var(--navy); color:#fff; }
.rk-more { display:block; margin: 16px auto 0; border:1px solid var(--line-strong); background:#fff; color: var(--navy); border-radius:9px; padding:10px 18px; font: 600 12px var(--text); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.rk-more:hover { border-color: var(--navy); }
.rk-scrim { display:none; }

/* ==========================================================================
   DRIVER PANEL — year-by-year Super Licence breakdown + the two windows
   ========================================================================== */
button.drv-open { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.drv-open .driver-avatar { display:grid; }
.drv-open:hover .driver-name, .drv-open:focus-visible .driver-name { color: var(--navy-mid); text-decoration: underline; text-underline-offset: 3px; }
.drv-open:focus-visible { outline: 2px solid var(--navy-mid); outline-offset: 3px; border-radius: 6px; }
.tr-driver.drv-open { cursor:pointer; transition: background .15s; }
.tr-driver.drv-open:hover { background: rgba(255,255,255,.06); }
.tr-driver.drv-open:hover .tr-last { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

#dp-wrap { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
#dp-wrap.open { pointer-events: auto; }
.dp-scrim { position:absolute; inset:0; background: rgba(0,10,25,.55); opacity:0; transition: opacity .25s; }
#dp-wrap.open .dp-scrim { opacity: 1; }
.dp { position:absolute; top:0; right:0; bottom:0; width: min(1020px, 96vw); background: var(--bg-alt); overflow-y:auto;
  box-shadow: -18px 0 50px rgba(0,10,25,.35); transform: translateX(102%); transition: transform .28s ease; border-left: var(--gold-rule); }
#dp-wrap.open .dp { transform: none; }

.dp-head { position: sticky; top: 0; z-index: 2; display:flex; align-items:center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(110deg, var(--navy-dark), var(--navy)); color:#fff; padding: 22px 64px 22px 28px; border-bottom: var(--gold-rule); }
.dp-id { display:flex; align-items:center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.dp-av { width: 54px; height: 54px; font-size: 18px; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.dp-name { font-family: var(--display); font-weight: 600; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.dp-meta { display:flex; flex-wrap:wrap; align-items:center; gap: 8px 10px; margin-top: 7px; }
.dp-meta .nat { color: #cfe0f5; }
.dp-chips { display:flex; flex-wrap:wrap; gap: 6px; }
.dp-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color:#e6eef9; }
.dp-chip.live { background: rgba(43,174,106,.22); color: #b9f0d2; }
.dp-kpis { display:flex; gap: 12px; }
.dp-kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px 16px; min-width: 168px; }
.dp-kpi span { display:block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #a9bbd3; font-weight: 600; }
.dp-kpi b { display:block; font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.05; color:#fff; }
.dp-kpi b.hit { color: var(--gold-bright); }
.dp-kpi.pot b { color: #7fe0ab; }
.dp-kpi.pot b.hit { color: #7fe0ab; text-shadow: 0 0 0 var(--gold); }
.dp-kpi small { display:block; font-size: 11px; color: #9fb0c6; margin-top: 2px; }
.dp-close { position:absolute; top: 14px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color:#fff; font-size: 22px; line-height: 1; cursor: pointer; }
.dp-close:hover { background: var(--gold); color: var(--navy-dark); }

.dp-body { padding: 22px 28px 34px; }
.dp-h { font-family: var(--display); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin: 6px 0 12px; }
.dp-years { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.dp-year { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.dp-yhead { display:flex; align-items:center; justify-content:space-between; gap: 8px; padding: 10px 12px; background: var(--navy); color:#fff; }
.dp-yhead b { font-family: var(--display); font-size: 18px; }
.dp-ytag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color:#dbe6f4; }
.dp-ytag.drop { background: rgba(200,16,46,.25); color: #ffc9d2; }
.dp-ytag.live { background: rgba(43,174,106,.3); color: #c6f3da; }
.dp-items { padding: 8px; display:flex; flex-direction:column; gap: 6px; flex: 1; }
.dp-item { display:grid; grid-template-columns: minmax(0,1fr) auto auto; align-items:center; gap: 2px 8px; padding: 7px 9px; border-radius: 8px; background: var(--bg-alt); font-size: 12.5px; }
.dp-series { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.dp-pos { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.dp-pts { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--navy-mid); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.dp-note { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); }
.dp-item.pot { background: var(--go-tint); box-shadow: inset 3px 0 0 var(--go); }
.dp-item.pot .dp-pts, .dp-item.pot .dp-note { color: var(--go); }
.dp-item.nc { opacity: .62; }
.dp-item.nc .dp-pts { color: var(--muted); }
.dp-item.zero { background: transparent; border: 1px dashed var(--line-strong); }
.dp-item.zero .dp-pts { color: #b6c0ce; }
.dp-empty { color: #b6c0ce; font-size: 12px; text-align:center; padding: 14px 4px; }
.dp-ytotal { border-top: 1px solid var(--line); padding: 8px 12px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); }
.dp-ytotal span { font-family: var(--text); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.dp-any { display:flex; flex-wrap:wrap; gap: 8px 22px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 12.5px; color: var(--body); margin-bottom: 22px; }

.dp-window { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 16px; margin-bottom: 12px; }
.dp-wtitle { display:flex; align-items:baseline; gap: 12px; margin-bottom: 10px; }
.dp-wtitle b { font-family: var(--display); font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.dp-wtitle span { font-size: 12px; color: var(--muted); }
.dp-wtitle em { margin-left: auto; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--navy); }
.dp-wtitle em.hit { color: var(--go); }
.dp-bar { position: relative; display:flex; height: 34px; background: #eef2f8; border-radius: 8px; }
.dp-seg { height: 100%; display:flex; align-items:center; justify-content:center; color:#fff; font-size: 12px; font-weight: 700; border-right: 2px solid #fff; overflow: hidden; }
.dp-seg:first-child { border-radius: 8px 0 0 8px; }
.dp-40 { position:absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--red); }
.dp-40 i { position:absolute; top: -16px; left: -9px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--red); }
.dp-seg.y2023, .dp-legend i.y2023 { background: #8191ab; }
.dp-seg.y2024, .dp-legend i.y2024 { background: #3f78d4; }
.dp-seg.y2025, .dp-legend i.y2025 { background: #0a4fa0; }
.dp-seg.y2026, .dp-legend i.y2026 { background: #c9a227; }
.dp-seg.pot, .dp-legend i.pot { background: repeating-linear-gradient(135deg, #1f8a53 0 8px, #2bae6a 8px 16px); }
.dp-seg.fp, .dp-legend i.fp { background: #15a5b5; }
.dp-seg.kart, .dp-legend i.kart { background: #6a5acd; }
.dp-ghosts { display:flex; flex-wrap:wrap; align-items:center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.dp-ghost { padding: 3px 9px; border-radius: 6px; background: #f6e6e9; color: #9b1c32; text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .85; }
.dp-legend { display:flex; flex-wrap:wrap; gap: 6px 16px; font-size: 11.5px; color: var(--muted); margin: 6px 0 16px; }
.dp-legend i { display:inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dp-math { background: var(--navy); color: #dbe6f4; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; line-height: 1.6; border-left: 4px solid var(--gold); }
.dp-math b { color:#fff; font-family: var(--display); font-size: 17px; }
.dp-foot { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

@media (max-width: 860px) {
  .dp-years { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dp-kpis { width: 100%; }
  .dp-kpi { flex: 1; min-width: 0; }
  .dp-head { padding: 18px 58px 18px 18px; }
  .dp-body { padding: 18px 16px 28px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
  /* team rows: car moves below the drivers */
  .team-row { grid-template-columns: 270px minmax(0,1fr); }
  .tr-drivers { grid-template-columns: 1fr 1fr; }
  .tr-shot { width: 120px; }
  .tr-stage { position:absolute; top:0; bottom:0; right:0; width: 42%; z-index:-1; border-left:none; padding:0; }
  .tr-car-img { display:none; }
}
@media (max-width: 760px) {
  .team-row { grid-template-columns: 1fr; }
  .tr-brand { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .tr-drivers { grid-template-columns: 1fr; }
  .tr-driver + .tr-driver { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
  .tr-shot { width: 112px; }
  .tr-last { font-size: 23px; }
  .tr-rank-val b { font-size: 23px; }   /* stays the same size as the surname */
  .tr-stage { width: 100%; }
  .tr-mark { width: 80%; height: 55%; top: 62%; }
}
@media (max-width: 980px) {
  .launch-cards { grid-template-columns: repeat(2,1fr); }
  /* rankings: filter panel becomes a slide-in drawer */
  .rk-layout { grid-template-columns: 1fr; }
  .rk-filters { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); max-height: none; border-radius: 0; z-index: 80; transform: translateX(-105%); transition: transform .25s; }
  .rk-filters.open { transform: none; }
  .rkf-close { display: inline-block; }
  .rk-filter-toggle { display: inline-flex; }
  .rk-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0,10,25,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .rk-scrim.open { opacity: 1; pointer-events: auto; }
  .rs-head { grid-template-columns: minmax(0,1fr) auto 18px; }
  .rs-head .rs-leader, .rs-head .status-chip { display: none; }
}
@media (max-width: 880px) {
  .header-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .util-bar { display: none; }
  #site-header { top: 0; }
  .mobile-nav { display: block; top: 67px; }
  .site-header .container { height: 64px; }
  .rules-list { columns: 1; }
}
@media (max-width: 560px) {
  .launch-cards { grid-template-columns: 1fr; }
  .landing-stats { gap: 26px; }
  .container { padding: 0 20px; }
  .brand .divider, .brand-text .brand-sub { display: none; }
  .brand-text .brand-title { font-size: 15px; }
  .brand img.fia { height: 32px; }
}