:root {
  /* ── Brand palette (aligned with MRC logo: black base + red accent + clean whites) ── */
  --red:       #e8001d;        /* brand red — constant across modes */
  --red-soft:  #ff3b52;        /* lighter red for accents */
  --red-deep:  #a50014;        /* deeper red for 3rd-tier */
  /* ── Medal colors for rank 1/2/3 (FIA podium tradition) ── */
  --gold:      #ffc93c;
  --silver:    #c9ced6;
  --bronze:    #d78a3d;
  /* Medal ink (high-contrast text on mode background) */
  --gold-ink:   var(--gold);
  --silver-ink: var(--silver);
  --bronze-ink: var(--bronze);
  --accent:    var(--red);
  /* ── Dark mode defaults (preserves existing look) ── */
  --dark:      #0c0e13;
  --card:      #12151c;
  --card-alt:  #0d0f14;
  --border:    rgba(255,255,255,0.07);
  --text:      #eef0f4;
  --text-muted-rank: rgba(255,255,255,.85);
  --muted:     #9aa3b2;
  --row-hover: rgba(255,255,255,.03);
  --gap-leader:   #ff4d6d;
  --gap-previous: #4a9eff;
  /* Gradient tints for rank rows */
  --tint-gold:   rgba(255,201,60,.14);
  --tint-silver: rgba(201,206,214,.08);
  --tint-bronze: rgba(215,138,61,.12);
  /* Stage-winner ★ES badge — dark defaults */
  --sw-bg:     rgba(255,201,60,.14);
  --sw-fg:     var(--gold);
  --sw-border: rgba(255,201,60,.5);
  --fd: 'Bebas Neue', sans-serif;
  --fc: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* ── Light mode — auto-adapts to OS/browser setting ── */
@media (prefers-color-scheme: light) {
  :root {
    --dark:      #f5f1ee;               /* page bg — warm cream, echoes MRC brand warmth */
    --card:      #ffffff;               /* row bg — pure white */
    --card-alt:  #faf8f6;               /* alt row — warm off-white */
    --border:    rgba(34,25,28,0.10);   /* MRC dark (#22191c) as border tint */
    --text:      #22191c;               /* MRC brand dark — warm brown-black */
    --text-muted-rank: #22191c;
    --muted:     #6b5c5f;               /* warm brownish gray secondary text */
    --row-hover: rgba(225,70,26,0.06);  /* subtle MRC red (#E1461A) on hover */
    /* Rank inks — MRC brand colours for podium */
    --gold-ink:   #E1461A;              /* rank 1: MRC brand orange-red */
    --silver-ink: #3d2e30;              /* rank 2: warm near-black */
    --bronze-ink: #7b4a1a;              /* rank 3: dark bronze */
    /* Gap indicators — brand colours */
    --gap-leader:   #E1461A;            /* gap to 1st: MRC brand red */
    --gap-previous: #599A34;            /* gap to prev: MRC brand green */
    /* Rank row tints — warm-toned */
    --tint-gold:   rgba(255,190,40,.28);
    --tint-silver: rgba(100,90,95,.15);
    --tint-bronze: rgba(215,138,61,.25);
    /* Stage-winner ★ES badge — MRC red */
    --sw-bg:     rgba(225,70,26,.11);
    --sw-fg:     #E1461A;
    --sw-border: rgba(225,70,26,.45);
  }
}

.cw {
  background: var(--dark);
  padding: 1.5rem 1rem 2rem;
  font-family: var(--fb);
  color: var(--text);
  animation: cw-enter .45s cubic-bezier(.22,1.1,.32,1) both;
}
@keyframes cw-enter {
  0%   { transform: translateY(8px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cw { animation: none; }
}

/* ── Title ── */
/* ── Rallye + stage banner ── */
.cw-banner { margin-bottom: 1.1rem; }
.cw-rallye-name {
  font-family: var(--fd); font-size: 1.6rem; font-weight: 400;
  letter-spacing: .06em; color: var(--text); line-height: 1.1; margin-bottom: .3rem;
}
.cw-stage-line {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.cw-stage-bar { width:4px; height:1.4rem; background:var(--red); border-radius:3px; flex-shrink:0; }
.cw-stage-name {
  font-family:var(--fc); font-size:.9rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.cw-progress {
  display: inline-flex; align-items: baseline; gap: .2rem;
  margin-left: .3rem; padding: 2px 10px; border-radius: 3px;
  background: var(--row-hover);
  border: 1px solid var(--border);
  font-family: var(--fc); font-size: .78rem; letter-spacing: .05em;
}
.cw-prog-n { color: var(--text); font-weight: 700; font-size: .9rem; }
.cw-prog-sep { color: var(--muted); opacity: .5; }
.cw-prog-d { color: var(--text); font-weight: 700; font-size: .9rem; }
.cw-prog-lbl { color: var(--muted); margin-left: .3rem; text-transform: uppercase; font-size: .68rem; }
.cw-stage-bar-wrap {
  height: 3px; width: 100%; background: var(--border);
  border-radius: 2px; margin-top: 6px; overflow: hidden;
}
.cw-stage-bar-fill {
  height: 100%; background: var(--red); border-radius: 2px;
  transition: width .6s ease;
}

/* ── Toolbar (refresh + export) ── */
.cw-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.tb-label {
  font-family: var(--fc);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tb-select {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 28px 7px 12px;
  font-family: var(--fc);
  font-size: .85rem;
  letter-spacing: .05em;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa3b2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.tb-select:focus { border-color: var(--red); }

.tb-countdown {
  /* Auto-refresh still ticks in the background; "updated Xs ago" shows freshness instead.
     Kept the element so refresh logic that toggles .on doesn't break, but it never displays. */
  display: none !important;
}

.tb-version {
  margin-left: auto;
  font-family: var(--fm);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--row-hover);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tb-sep { width:1px; height:24px; background:var(--border); }

.tb-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #1a1e28;
  color: #fff;
  border: 1px solid #2d3748;
  border-radius: 4px;
  padding: 7px 16px;
  font-family: var(--fc);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.tb-pdf-btn:hover { background:var(--red); border-color:var(--red); }
.tb-pdf-btn svg { flex-shrink:0; }

/* ════════════════════════════
   DESKTOP TABLE
════════════════════════════ */
.desktop-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

#tbl_chrono { width:100%; border-collapse:collapse; font-family:var(--fb); }

/* Per-column text alignment — header AND body share the same alignment so they stack visually.
   Widths are set via inline width attrs on the th elements above; browser uses auto-layout
   so column boundaries automatically match between thead and tbody. */
#tbl_chrono thead th:nth-child(1),  /* Rank */
#tbl_chrono tbody td:nth-child(1) { text-align: center; }
#tbl_chrono thead th:nth-child(2),  /* No */
#tbl_chrono tbody td:nth-child(2) { text-align: center; }
#tbl_chrono thead th:nth-child(5),  /* Groupe */
#tbl_chrono tbody td:nth-child(5),
#tbl_chrono thead th:nth-child(6),  /* Classe */
#tbl_chrono tbody td:nth-child(6) { text-align: center; }

#tbl_chrono thead th {
  padding: 14px 16px;
  font-family: var(--fc);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  border: none;
  background: var(--card-alt);
  border-bottom: 2px solid var(--red);
}
/* sub-label adapts to mode */
#tbl_chrono thead th .sub-label {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: none;
  margin-top: 3px;
}
#tbl_chrono thead th:first-child { /* alignment now handled by nth-child rules above */ }

/* Modern row treatment: minimal borders, generous spacing, subtle hover with red accent */
#tbl_chrono tbody tr {
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: background-color .18s, border-left-color .18s;
}
/* On hover, the left border becomes red (no pseudo-element on tr — those misrender as phantom cells in some browsers) */
#tbl_chrono tbody tr:hover {
  background: var(--row-hover);
  border-left-color: var(--red);
  filter: none;
}

#tbl_chrono tbody td {
  padding: 16px 16px;
  font-size: .92rem;
  vertical-align: middle;
  border: none;
  color: var(--text);
  line-height: 1.35;
}

.rank-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:5px;
  font-family:var(--fd); font-size:1.3rem; line-height:1;
  letter-spacing: .02em;
}
#tbl_chrono td.rank-cell { /* width + alignment now handled by colgroup + nth-child rules */ }
#tbl_chrono td.chrono-cell {
  font-family: var(--fm); font-size: 1rem; font-weight: 700;
  letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
#tbl_chrono td.gap-cell { white-space:nowrap; min-width:140px; }
#tbl_chrono td.gap-cell .gap-dash { font-family:var(--fd); font-size:1.3rem; color:var(--muted); opacity:.5; }
#tbl_chrono td.gap-cell .g1 { display:block; font-family: var(--fm); font-size:.78rem; font-weight:600; line-height:1.9; color: var(--gap-leader); font-variant-numeric: tabular-nums; }
#tbl_chrono td.gap-cell .g2 { display:block; font-family: var(--fm); font-size:.78rem; font-weight:600; line-height:1.9; color: var(--gap-previous); font-variant-numeric: tabular-nums; }
.gap-bar-wrap { margin-top: 3px; height: 3px; border-radius: 2px; background: var(--border); max-width: 100px; overflow: hidden; }
.gap-bar-fill { height: 100%; background: var(--gap-leader); border-radius: 2px; }

/* Row themes — driven by data-rank attribute so ties get identical styling */
#tbl_chrono tbody tr[data-rank="1"] {
  background: linear-gradient(90deg, var(--tint-gold), rgba(255,201,60,.02) 55%, var(--dark));
  border-left: 4px solid var(--gold);
}
#tbl_chrono tbody tr[data-rank="1"] td { color: var(--text); }
#tbl_chrono tbody tr[data-rank="1"] .rank-badge {
  background: var(--gold); color: #000;
  box-shadow: 0 0 10px rgba(255,201,60,.4);
}
#tbl_chrono tbody tr[data-rank="1"] td.chrono-cell { color: var(--gold-ink); font-weight: 800; }

#tbl_chrono tbody tr[data-rank="2"] {
  background: linear-gradient(90deg, var(--tint-silver), rgba(201,206,214,.02) 55%, var(--dark));
  border-left: 4px solid var(--silver);
}
#tbl_chrono tbody tr[data-rank="2"] td { color: var(--text); }
#tbl_chrono tbody tr[data-rank="2"] .rank-badge {
  background: var(--silver); color: #000;
  box-shadow: 0 0 8px rgba(201,206,214,.3);
}
#tbl_chrono tbody tr[data-rank="2"] td.chrono-cell { color: var(--silver-ink); font-weight: 800; }

#tbl_chrono tbody tr[data-rank="3"] {
  background: linear-gradient(90deg, var(--tint-bronze), rgba(215,138,61,.02) 55%, var(--dark));
  border-left: 4px solid var(--bronze);
}
#tbl_chrono tbody tr[data-rank="3"] td { color: var(--text); }
#tbl_chrono tbody tr[data-rank="3"] .rank-badge {
  background: var(--bronze); color: #000;
  box-shadow: 0 0 8px rgba(215,138,61,.35);
}
#tbl_chrono tbody tr[data-rank="3"] td.chrono-cell { color: var(--bronze-ink); font-weight: 800; }

#tbl_chrono tbody tr:nth-child(4),
#tbl_chrono tbody tr:nth-child(5),
#tbl_chrono tbody tr:nth-child(6),
#tbl_chrono tbody tr:nth-child(7),
#tbl_chrono tbody tr:nth-child(8) { background: var(--card-alt); border-left: 3px solid var(--border); }
#tbl_chrono tbody tr:nth-child(4) .rank-badge,
#tbl_chrono tbody tr:nth-child(5) .rank-badge,
#tbl_chrono tbody tr:nth-child(6) .rank-badge,
#tbl_chrono tbody tr:nth-child(7) .rank-badge,
#tbl_chrono tbody tr:nth-child(8) .rank-badge { background: var(--row-hover); color: var(--text); border: 1px solid var(--border); }
#tbl_chrono tbody tr:nth-child(n+9) { background: var(--dark); border-left: 3px solid transparent; }
#tbl_chrono tbody tr:nth-child(n+9) .rank-badge { background: transparent; color: var(--muted); border: 1px solid var(--border); font-size:.95rem; font-family:var(--fc); }

.delete-chrono {
  display:inline-block; background:rgba(232,0,29,.1); color:#ff4d6d;
  border:1px solid rgba(232,0,29,.25); padding:3px 10px; border-radius:3px;
  font-family:var(--fc); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; transition:background .15s;
}
.delete-chrono:hover { background:rgba(232,0,29,.28); }

/* ════════════════════════════
   MOBILE CARDS
════════════════════════════ */
.mobile-cards { display:none; }
.mc {
  display:grid; grid-template-columns:50px 1fr auto;
  align-items:stretch; border-radius:6px; margin-bottom:10px;
  overflow:hidden; border:1px solid var(--border); min-height:88px;
}
.mc-rank { display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:1.9rem; line-height:1; color:var(--text); padding:0 2px; }
.mc-body { padding:10px 12px; display:flex; flex-direction:column; justify-content:center; gap:3px; border-left:1px solid var(--border); border-right:1px solid var(--border); min-width:0; }
.mc-name    { font-family:var(--fc); font-size:1rem; font-weight:800; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-copilot { font-family:var(--fc); font-size:.82rem; font-weight:600; color:var(--text); opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-car     { font-family:var(--fc); font-size:.78rem; font-weight:500; color:var(--muted); margin-bottom:3px; }
.mc-meta    { display:flex; flex-wrap:wrap; gap:6px 10px; font-family:var(--fc); font-size:.78rem; }
.mc-meta-item { color:var(--muted); }
.mc-meta-item strong { color:var(--text); font-weight:700; }

/* Bigger pin button on mobile (touch-friendly) */
.mc-pin-btn { display: block; margin: 6px auto 0; padding: 6px; }
.mc-gap-1 { font-family: var(--fm); font-size:.8rem; font-weight:600; color: var(--gap-leader); line-height:1.8; font-variant-numeric: tabular-nums; }
.mc-gap-2 { font-family: var(--fm); font-size:.8rem; font-weight:600; color: var(--gap-previous); line-height:1.8; font-variant-numeric: tabular-nums; }
.mc-leader-badge { font-family:var(--fd); font-size:.95rem; letter-spacing:.1em; color:var(--gold-ink); margin-top:2px; }
.mc-chrono {
  display:flex; align-items:center; justify-content:center;
  padding:0 12px; font-family: var(--fm); font-size:1rem; font-weight:700;
  letter-spacing:0; white-space:nowrap; color:var(--text); min-width:100px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.mc[data-rank="1"] {
  background: linear-gradient(135deg, var(--tint-gold), rgba(255,201,60,.03) 60%, var(--card));
  border-left: 4px solid var(--gold);
}
.mc[data-rank="1"] .mc-rank,.mc[data-rank="1"] .mc-chrono { color: var(--gold-ink); }

.mc[data-rank="2"] {
  background: linear-gradient(135deg, var(--tint-silver), rgba(201,206,214,.02) 60%, var(--card));
  border-left: 4px solid var(--silver);
}
.mc[data-rank="2"] .mc-rank,.mc[data-rank="2"] .mc-chrono { color: var(--silver-ink); }

.mc[data-rank="3"] {
  background: linear-gradient(135deg, var(--tint-bronze), rgba(215,138,61,.02) 60%, var(--card));
  border-left: 4px solid var(--bronze);
}
.mc[data-rank="3"] .mc-rank,.mc[data-rank="3"] .mc-chrono { color: var(--bronze-ink); }
.mc[data-rank="4"], .mc[data-rank="5"], .mc[data-rank="6"],
.mc[data-rank="7"], .mc[data-rank="8"] { background: var(--card-alt); border-left: 4px solid var(--border); }
.mc[data-rank="9"]  { background: var(--dark); border-left: 4px solid var(--border); }

/* ── Export ── */
#exportButton { display:none; }

.bottom-pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 14px 40px;
  font-family: var(--fc);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 20px rgba(232,0,29,.35);
}
.bottom-pdf-btn:hover {
  background: #a80015;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232,0,29,.5);
}

/* ══ Stage winner badges — adapts to all theme triggers via --sw-* tokens ══ */
.stage-wins { display: inline-flex; gap: 5px; margin-left: 8px; flex-wrap: wrap; vertical-align: middle; }
.sw-badge {
  display: inline-block;
  background: var(--sw-bg);
  color: var(--sw-fg);
  border: 1px solid var(--sw-border);
  font-family: var(--fm);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.mc-stage-wins { display: flex; gap: 5px; flex-wrap: wrap; margin: 5px 0 2px; }

/* ══ Position-change arrows ══ */
.rank-change, .mc-rank-change {
  display: inline-block; margin-left: 4px;
  font-family: var(--fc); font-size: .65rem; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; opacity: 0;
  transition: opacity .3s;
}
.rank-change.up, .mc-rank-change.up     { color: #6bd68c; opacity: 1; }
.rank-change.down, .mc-rank-change.down { color: #ff6b6b; opacity: 1; }
.rank-change.same, .mc-rank-change.same { color: var(--muted); opacity: .6; }
.mc-rank-change { display: block; font-size: .58rem; margin: 2px 0 0; }

/* ══ Podium card (Cumul only, tie-aware) ══ */
.cw-podium {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 1rem;
}
.cw-podium-slot {
  padding: 12px 14px; border-radius: 5px;
  background: var(--card);
  border-left: 4px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 78px;
}
.cw-podium-slot.podium-first {
  background: linear-gradient(90deg, var(--tint-gold), rgba(255,201,60,.04) 60%, var(--card));
  border-left-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255,201,60,.15);
}
.cw-podium-slot.podium-second {
  background: linear-gradient(90deg, var(--tint-silver), rgba(201,206,214,.02) 60%, var(--card));
  border-left-color: var(--silver);
}
.cw-podium-slot.podium-third {
  background: linear-gradient(90deg, var(--tint-bronze), rgba(215,138,61,.03) 60%, var(--card));
  border-left-color: var(--bronze);
}
.cw-podium-pos {
  font-family: var(--fd); font-size: 1.35rem; line-height: 1;
  letter-spacing: .04em; margin-bottom: 4px;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.podium-first  .cw-podium-pos { color: var(--gold-ink); }
.podium-second .cw-podium-pos { color: var(--silver-ink); }
.podium-third  .cw-podium-pos { color: var(--bronze-ink); }
.podium-tie-tag {
  font-family: var(--fc); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(232,0,29,.7);
  padding: 2px 7px; border-radius: 2px;
}
.cw-podium-name {
  font-family: var(--fc); font-size: .82rem; font-weight: 700; color: var(--text);
  margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-podium-chrono {
  font-family: var(--fm); font-size: .85rem; font-weight: 700;
  letter-spacing: 0; color: var(--text); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.podium-first  .cw-podium-chrono { color: var(--gold-ink); }
.podium-second .cw-podium-chrono { color: var(--silver-ink); }
.podium-third  .cw-podium-chrono { color: var(--bronze-ink); }
@media (max-width: 600px) {
  .cw-podium {
    display: flex; overflow-x: auto; gap: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .cw-podium-slot { min-width: 160px; flex-shrink: 0; scroll-snap-align: start; min-height: 56px; padding: 10px 12px; }
  .cw-podium-name { font-size: .88rem; }
}

/* ══ DNF / Retired section ══ */
.cw-dnf {
  margin-top: 1.8rem; padding: 1.1rem 1.2rem; border-radius: 6px;
  background: rgba(232,0,29,.04); border: 1px solid rgba(232,0,29,.18);
}
.cw-dnf-title {
  font-family: var(--fc); font-size: .75rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
  margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem;
}
.cw-dnf-title-count {
  color: var(--muted); font-weight: 400; letter-spacing: .04em;
  text-transform: none; font-size: .72rem;
}
.cw-dnf-list {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
  gap: 8px 14px;
}
.cw-dnf-item {
  font-family: var(--fc); padding: 8px 10px;
  background: var(--card-alt); border-radius: 4px;
  border-left: 3px solid var(--red);
  display: flex; flex-direction: column; gap: 2px;
}
.cw-dnf-num {
  font-size: .8rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); line-height: 1;
  margin-bottom: 4px;
}
.cw-dnf-pilot {
  font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.25;
  letter-spacing: .01em;
}
.cw-dnf-copilot {
  font-size: .78rem; font-weight: 400; line-height: 1.25;
  color: var(--text); opacity: .55;
}
.cw-dnf-stage {
  margin-top: 5px; align-self: flex-start;
  font-size: .65rem; font-weight: 600; letter-spacing: .05em;
  color: var(--red); border: 1px solid rgba(232,0,29,.35);
  padding: 2px 7px; border-radius: 3px;
}

/* ══ Manual theme override (beats OS preference via data-theme on <html>) ══ */
html[data-theme="light"] {
  --dark: #f5f1ee; --card: #ffffff; --card-alt: #faf8f6;
  --border: rgba(34,25,28,0.10); --text: #22191c; --text-muted-rank: #22191c;
  --muted: #6b5c5f; --row-hover: rgba(225,70,26,0.06);
  --gold-ink: #E1461A; --silver-ink: #3d2e30; --bronze-ink: #7b4a1a;
  --gap-leader: #E1461A; --gap-previous: #599A34;
  --tint-gold: rgba(255,190,40,.28); --tint-silver: rgba(100,90,95,.15); --tint-bronze: rgba(215,138,61,.25);
  --sw-bg: rgba(225,70,26,.11); --sw-fg: #E1461A; --sw-border: rgba(225,70,26,.45);
}
html[data-theme="dark"] {
  --dark:      #0c0e13; --card: #12151c; --card-alt: #0d0f14;
  --border:    rgba(255,255,255,0.07); --text: #eef0f4; --text-muted-rank: rgba(255,255,255,.85);
  --muted:     #9aa3b2; --row-hover: rgba(255,255,255,.03);
  --gold-ink:  var(--gold); --silver-ink: var(--silver); --bronze-ink: var(--bronze);
  --gap-leader: #ff4d6d; --gap-previous: #4a9eff;
  --tint-gold: rgba(255,201,60,.14); --tint-silver: rgba(201,206,214,.08); --tint-bronze: rgba(215,138,61,.12);
  --sw-bg: rgba(255,201,60,.14); --sw-fg: var(--gold); --sw-border: rgba(255,201,60,.5);
}

/* ══ Theme toggle button ══ */
/* ══ Settings dropdown (theme + density) ══ */
.tb-settings-wrap { position: relative; display: inline-block; }
.tb-settings-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: var(--red);
  color: #fff;
  border: 1.5px solid var(--red);
  border-radius: 4px; cursor: pointer;
  font-family: var(--fc); font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  transition: all .2s;
  box-shadow: 0 2px 6px rgba(232,0,29,.25);
}
.tb-settings-btn svg { flex-shrink: 0; }
.tb-settings-btn:hover {
  background: #c0001a;
  border-color: #c0001a;
  box-shadow: 0 3px 10px rgba(232,0,29,.45);
}
.tb-settings-btn[aria-expanded="true"] {
  background: #a50014;
  border-color: #a50014;
}
.tb-settings-btn[aria-expanded="true"] svg { transform: rotate(45deg); transition: transform .25s; }
.tb-settings-btn svg { transition: transform .25s; }
.tb-settings-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px;
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; z-index: 50; display: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.tb-settings-wrap.open .tb-settings-panel { display: block; }
.tb-set-group { margin-bottom: 10px; }
.tb-set-group:last-child { margin-bottom: 0; }
.tb-set-label {
  font-family: var(--fc); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.tb-set-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.tb-set-opt {
  padding: 6px 8px; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
  font-family: var(--fc); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: all .15s;
}
.tb-set-opt:hover { border-color: var(--red); }
.tb-set-opt[aria-checked="true"] {
  background: var(--red); color: #fff; border-color: var(--red);
}

/* ══ "Updated Xs ago" indicator ══ */
.tb-updated {
  font-family: var(--fm); font-size: .7rem; color: var(--muted);
  letter-spacing: .02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ══ Toolbar live pulse dot ══ */
.tb-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); flex-shrink: 0; align-self: center;
  animation: tb-pulse 1.8s ease-in-out infinite;
}
.tb-live-dot.dim { opacity: .2; animation: none; }
@keyframes tb-pulse {
  0%,100% { transform: scale(1);   opacity: .9; }
  50%      { transform: scale(1.5); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) { .tb-live-dot { animation: none; } }

/* ══ LIVE pulse dot in rallye banner ══ */
.cw-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 7px; background: rgba(232,0,29,.12);
  border: 1px solid rgba(232,0,29,.45); border-radius: 3px;
  font-family: var(--fc); font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; color: var(--red);
  vertical-align: middle; margin-right: 10px;
}
.cw-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(232,0,29,.6);
  animation: mrc-pulse 1.8s ease-in-out infinite;
}
@keyframes mrc-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(232,0,29,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(232,0,29,0);  }
  100% { box-shadow: 0 0 0 0   rgba(232,0,29,0);  }
}
@media (prefers-reduced-motion: reduce) {
  .cw-live-dot { animation: none; }
}

/* ══ Pin-my-car button ══ */
.pin-btn, .mc-pin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: pointer; padding: 2px;
  margin-left: 4px; opacity: 0.45; border-radius: 3px;
  transition: opacity .15s, color .15s, border-color .15s;
}
.pin-btn:hover, .mc-pin-btn:hover { opacity: 1; color: var(--red); border-color: var(--border); }
tr.is-pinned .pin-btn, .mc.is-pinned .mc-pin-btn { opacity: 1; color: var(--red); }
tr.is-pinned, .mc.is-pinned {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  position: relative;
}
tr.is-pinned::after, .mc.is-pinned::after {
  content: "PINNED"; position: absolute; top: 0; right: 6px;
  font-family: var(--fc); font-size: .56rem; font-weight: 800;
  letter-spacing: .12em; color: var(--red);
  background: var(--card); padding: 1px 5px;
  border-radius: 0 0 3px 3px; pointer-events: none;
}
.mc-pin-btn { display: block; margin: 6px auto 0; padding: 6px; }

/* ══ Flash animations on refresh ══ */
@keyframes mrc-flash-chrono {
  0%   { background-color: rgba(255,201,60,.35); }
  100% { background-color: transparent; }
}
@keyframes mrc-flash-up {
  0%   { background-color: rgba(107,214,140,.30); }
  100% { background-color: transparent; }
}
@keyframes mrc-flash-down {
  0%   { background-color: rgba(255,107,107,.30); }
  100% { background-color: transparent; }
}
tr.flash-chrono, .mc.flash-chrono { animation: mrc-flash-chrono 1.8s ease-out; }
tr.flash-up,     .mc.flash-up     { animation: mrc-flash-up     1.8s ease-out; }
tr.flash-down,   .mc.flash-down   { animation: mrc-flash-down   1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  tr.flash-chrono, tr.flash-up, tr.flash-down,
  .mc.flash-chrono, .mc.flash-up, .mc.flash-down { animation: none; }
}

/* ══ Sticky table header ══ */
#tbl_chrono thead th {
  position: sticky; top: 0; z-index: 5;
}

/* ══ Density modes ══ */
html[data-density="tight"]       #tbl_chrono tbody td { padding: 7px 10px; font-size: .82rem; }
html[data-density="tight"]       .mc { min-height: 68px; }
html[data-density="tight"]       .mc-body { padding: 7px 10px; }

html[data-density="comfortable"] #tbl_chrono tbody td { padding: 18px 14px; font-size: 1rem; }
html[data-density="comfortable"] #tbl_chrono td.chrono-cell { font-size: 1.1rem; }
html[data-density="comfortable"] .mc { min-height: 108px; }
html[data-density="comfortable"] .mc-body { padding: 14px 14px; }
html[data-density="comfortable"] .mc-chrono { font-size: 1.15rem; }

.no-data-msg { font-family:var(--fc); font-size:1rem; letter-spacing:.1em; color:var(--red); text-transform:uppercase; padding:2rem 0; }

/* ══ Stage-open toast ══ */
.mrc-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--red); color: #fff; padding: 12px 22px; border-radius: 6px;
  font-family: var(--fc); font-size: .9rem; font-weight: 700; letter-spacing: .06em;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); z-index: 2147483646;
  opacity: 0; pointer-events: none; transition: all .35s ease;
  max-width: 90vw; text-align: center;
}
.mrc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.no-data-msg { font-family:var(--fc); font-size:1rem; letter-spacing:.1em; color:var(--red); text-transform:uppercase; padding:2rem 0; }

@media (max-width:700px) {
  .desktop-table-wrap { display:none; }
  .mobile-cards       { display:block; }
  .cw { padding: 1rem 0.5rem 1.5rem; }
  .cw-rallye-name { font-size: 1.2rem; }
  .cw-stage-name { font-size: 0.78rem; }
  .cw-toolbar { gap: 0.5rem; }
  .tb-sep { display: none; }
  .bottom-pdf-btn { padding: 12px 20px; font-size: 0.88rem; }
}
@media (max-width:480px) {
  .mc { grid-template-columns: 38px 1fr auto; min-height: 76px; }
  .mc-rank { font-size: 1.5rem; }
  .mc-chrono { min-width: 72px; font-size: 0.82rem; padding: 0 6px; }
  .mc-name { font-size: 0.88rem; }
  .mc-copilot, .mc-car { font-size: 0.74rem; }
  .tb-label { display: none; }
}
@media (min-width:701px) {
  .mobile-cards { display:none; }
}

/* ════════════════════════════
   PDF PRINT STYLES
════════════════════════════ */
#pdf-overlay {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.7);
  align-items:center; justify-content:center;
}
#pdf-overlay.show { display:flex; }
#pdf-frame {
  background:#fff;
  width:min(860px,95vw);
  max-height:90vh;
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
#pdf-frame-head {
  background:#111; color:#fff; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--fc); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  flex-shrink:0;
}
#pdf-frame-head button {
  background:rgba(255,255,255,.1); color:#fff; border:none;
  border-radius:3px; padding:6px 14px; cursor:pointer;
  font-family:var(--fc); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
}
#pdf-frame-head button:hover { background:var(--red); }
#pdf-preview {
  flex:1; overflow-y:auto; padding:32px 36px;
  font-family: 'Barlow', Arial, sans-serif;
  font-size:13px; color:#111; background:#fff;
}