/* ============================================================================
   Booster · sistema visual
   Tema escuro único. Todos os valores vêm do handoff de design (§1–§4).
   Regra de ouro: número é sempre mono, nome é sempre condensada.
   ========================================================================== */

:root {
  /* Acento único, funcional. Trocado pela categoria (ciano = 1:10 EP). */
  --acc: oklch(0.80 0.14 205);

  /* Superfícies */
  --bg: oklch(0.145 0.012 250);
  --card: oklch(0.185 0.014 250);
  --head: oklch(0.165 0.013 250);
  --well: oklch(0.145 0.012 250);
  --hover: oklch(0.215 0.015 250);
  --thead: oklch(0.21 0.015 250);

  /* Bordas */
  --line-strong: oklch(0.30 0.016 250);
  --line: oklch(0.26 0.015 250);
  --line-soft: oklch(0.22 0.014 250);
  --line-dash: oklch(0.42 0.016 250);

  /* Texto */
  --txt: oklch(0.97 0.004 250);
  --txt-2: oklch(0.70 0.012 250);
  /* A escala cinza inteira passou a cumprir os 4,5:1 do handoff (§7) contra
     --card. Os dois degraus de baixo estavam em 3,39:1 (o '---') e 1,59:1 (o
     '·'): o '·' diz que o piloto não estava no campeonato e era praticamente
     invisível. A escala ficou mais curta embaixo — é o preço de a informação
     mais apagada da página continuar sendo informação. */
  --txt-3: oklch(0.66 0.012 250);
  --txt-4: oklch(0.62 0.012 250);
  --txt-dim: oklch(0.60 0.012 250);
  --ink: oklch(0.15 0.01 250);

  /* Únicas cores semânticas fora do acento */
  --up: oklch(0.80 0.21 147);
  --down: oklch(0.66 0.24 25);
  --new: oklch(0.87 0.18 92);
  /* Descarte: vermelho claro, legível sobre o fundo escuro sem gritar.
     O selo que o acompanha é cinza — descarte é ausência, não destaque. */
  --desc: oklch(0.72 0.15 22);
  --desc-tag-bg: oklch(0.36 0.014 250);
  --desc-tag-fg: oklch(0.86 0.008 250);

  /* Zebra da matriz: a linha par recebe um degrau, não uma cor. */
  --zebra: oklch(0.205 0.014 250);

  /* Tamanhos dos rótulos em versalete. O passo entre eles é o sistema:
     mexer aqui mexe no site inteiro. */
  --lbl: 12px;
  --lbl-sm: 11px;
  --lbl-xs: 10px;

  --cond: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* O handoff (§3) pedia 1440 px. Foi aberto para 1860 px no desenvolvimento:
     a matriz de uma temporada de 11 etapas com equipamento ligado precisa de
     1570 px (a soma das colunas, em standings.tsx) — dentro de 1440 ela rolava
     horizontalmente até num monitor 4K, com 560 px de sobra parados de cada
     lado. Em 1860 a temporada mais longa cabe inteira numa tela de 1920.
     Os textos não esticam junto: a medida deles é em ch (--page-lead 66ch,
     .hero-sub 46ch), não na largura da página. */
  --wrap: 1860px;
  --gutter: 32px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--txt); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
}

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Texto só para leitor de tela — a cor nunca é a única informação. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 8px; top: -48px;
  z-index: 60;
  background: var(--acc);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: top 0.15s;
}
.skip:focus { top: 8px; }

@keyframes bpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- utilidades */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.lbl {
  font-family: var(--mono);
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.lbl--acc { color: var(--acc); }
.lbl--sm { font-size: var(--lbl-sm); letter-spacing: 0.14em; }
.lbl--xs { font-size: var(--lbl-xs); letter-spacing: 0.12em; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cond { font-family: var(--cond); text-transform: uppercase; }

.diamond {
  width: 7px; height: 7px;
  flex: none;
  background: var(--acc);
  transform: rotate(45deg);
}

/* A temporada acima do título da página. Em Pilotos, Calendário e Etapa é
   ela o assunto — o nome da página é o recorte —, então 11px a deixava com
   cara de nota de rodapé. A 15px o entrelinhamento de 0.18em ficaria esparso
   demais; 0.11em mantém o ar de telemetria sem espalhar a palavra. */
.page-kicker {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 10px;
}

h1.page-title {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--cond);
  font-size: clamp(40px, 7vw, 62px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Na classificação o nome da temporada É a manchete — é a primeira coisa que
   alguém precisa saber ao abrir a tabela. */
h1.page-title--season {
  font-size: clamp(46px, 8.4vw, 82px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.page-lead {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--txt-2);
  max-width: 66ch;
  text-wrap: pretty;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------- header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--head);
  border-bottom: 1px solid var(--line-strong);
}

.hdr-bar {
  display: flex;
  align-items: stretch;
  gap: 40px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.brand img,
.brand .brand-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--acc);
  flex: none;
}
.brand .brand-mark {
  display: grid;
  place-items: center;
  background: var(--well);
  font-family: var(--cond);
  font-weight: 800;
  font-size: 18px;
  color: var(--acc);
}
.brand-name {
  font-family: var(--cond);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.nav { display: flex; align-items: stretch; gap: 4px; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2);
  min-height: 44px;
}
.nav-item:hover { color: oklch(0.90 0.008 250); }
.nav-item[aria-current] { color: var(--txt); }
.nav-item[aria-current]::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  background: var(--acc);
}

.hdr-spacer { flex: 1; }

.season { position: relative; display: flex; align-items: center; flex: none; }
.season-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid oklch(0.32 0.016 250);
  border-radius: 4px;
  padding: 7px 12px;
  min-height: 38px;
}
.season-btn:hover { border-color: var(--acc); }
.season-btn .caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--txt-2);
  border-bottom: 1.5px solid var(--txt-2);
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.15s;
}
.season-btn[aria-expanded='true'] .caret { transform: rotate(-135deg); margin-top: 2px; }
.season-cur {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.season-menu {
  position: absolute;
  top: 58px; right: 0;
  width: 280px;
  background: oklch(0.19 0.014 250);
  border: 1px solid oklch(0.34 0.016 250);
  border-radius: 5px;
  box-shadow: 0 18px 40px oklch(0.10 0.01 250 / 0.6);
  overflow: hidden;
  z-index: 40;
}
.season-menu-hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.58 0.012 250);
}
.season-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid oklch(0.24 0.014 250);
  color: inherit;
}
.season-item:last-child { border-bottom: none; }
.season-item:hover { background: oklch(0.23 0.015 250); color: inherit; }
.season-item-name {
  display: block;
  font-family: var(--cond);
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.season-item-meta {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-top: 2px;
}
.season-item[aria-current] .season-item-name { color: var(--acc); }

/* faixa de contexto */
.ctx {
  border-top: 1px solid var(--line-soft);
  background: var(--card);
}
.ctx-in {
  padding-block: 10px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.cat-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  background: var(--acc);
  border-radius: 3px;
  padding: 5px 12px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cat-badge .diamond { background: var(--ink); }

.ctx-next { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ctx-etapa { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ctx-etapa-n {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vrule { width: 1px; height: 14px; background: oklch(0.34 0.016 250); }
.ctx-local { font-size: 13px; color: var(--txt-2); }

/* contagem regressiva inline */
.cd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-size: var(--lbl);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-right: 4px;
}
.cd-v { font-size: 18px; }
.cd-u { font-size: var(--lbl); color: oklch(0.66 0.012 250); }
.cd-v[data-cd='s'] { color: var(--acc); }

.ctx-closed { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* --------------------------------------------------------------------- main */

main { padding-block: 28px 80px; }
.stack { display: grid; gap: 20px; }

/* -------------------------------------------------------------------- cards */

.card {
  position: relative; /* prende os .sr absolutos dentro do cartão */
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}
.card-hd {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-hd .lbl { color: var(--txt-2); }
.card-hd-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card-hd-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.card-ft {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-link {
  font-family: var(--mono);
  font-size: var(--lbl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
  white-space: nowrap;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--acc);
  border-radius: 3px;
  padding: 9px 16px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  min-height: 40px;
}
.btn-ghost:hover { background: var(--acc); color: var(--ink); }

.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--lbl);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: 18px;
}
.back-link:hover { color: var(--acc); }

/* grupo de alternância (telemetria/pódio · matriz/linhas) */
.toggle-group {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
}
.toggle {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--lbl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
  min-height: 38px;
}
.toggle:hover { color: var(--txt); }
.toggle[aria-pressed='true'] { background: oklch(0.28 0.016 250); color: oklch(0.98 0.004 250); }

.setup-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: var(--lbl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-2);
  min-height: 38px;
}
.setup-btn:hover { border-color: var(--acc); }
.setup-btn .diamond { opacity: 0.18; }
html[data-setup='on'] .setup-btn .diamond { opacity: 1; }

/* ----------------------------------------------- chip do número vs. posição */

/* Número do piloto: quadradinho no acento, dígito mono preto. Nunca confundir
   com a posição, que é numeral condensado grande sem caixa. */
.num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 3px;
  min-width: 24px; height: 20px; padding: 0 5px;
  font-size: 12px;
}
.num--matrix { min-width: 23px; height: 19px; padding: 0 4px; font-size: 11px; }
.num--card { min-width: 27px; height: 23px; padding: 0 6px; font-size: 13px; border-radius: 3px; }
.num--leader { min-width: 38px; height: 34px; padding: 0 8px; font-size: 21px; border-radius: 4px; }
.num--podium { min-width: 52px; height: 46px; padding: 0 10px; font-size: 30px; border-radius: 5px; }

.num-block {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 8px 12px 7px;
  background: var(--acc);
  color: var(--ink);
  border-radius: 5px;
}
.num-block b {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.num-block span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.75;
}

.pos {
  font-family: var(--cond);
  font-weight: 800;
  color: oklch(0.62 0.012 250);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pos--matrix { font-size: 24px; color: oklch(0.64 0.012 250); }
.pos--sm { font-size: 20px; }
.pos--lg { font-size: 52px; line-height: 0.85; color: var(--txt-3); }

.driver-name {
  min-width: 0;
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  /* Nomes de piloto nunca truncam: encolhem ou quebram. */
  overflow-wrap: anywhere;
}

/* filete de equipe — identidade, nunca estado */
.equipe { display: flex; align-items: center; gap: 7px; min-width: 0; }
.filete {
  flex: none;
  width: 3px; height: 13px;
  background: var(--cor, var(--txt-4));
  border-radius: 1px;
}
.filete--lg { width: 4px; height: 15px; }
.equipe-nome { font-size: 13px; color: oklch(0.68 0.012 250); }

/* --------------------------------------------- barrinhas de progresso (skew) */

.slats { display: flex; gap: 5px; flex-wrap: wrap; padding-inline-end: 3px; }
.slat {
  display: block;
  box-sizing: border-box;
  width: var(--sw, 16px);
  height: var(--sh, 15px);
  transform: skewX(-16deg);
  flex: none;
}
.slat--on { background: var(--acc); }
.slat--now {
  border: 1px solid var(--acc);
  background: color-mix(in oklch, var(--acc) 30%, transparent);
}
.slat--off { border: 1px solid var(--line-dash); }
.slat--miss { background: oklch(0.30 0.014 250); }

.slats--strip { --sw: 18px; --sh: 13px; }
.slats--tiny { --sw: 12px; --sh: 11px; gap: 4px; }
.slats--cal { --sw: 34px; --sh: 14px; gap: 6px; }
.slats--driver { --sw: 22px; --sh: 14px; }

/* ------------------------------------------------ marcador de movimentação */

/* Slot de largura fixa: os totais continuam alinhados com ou sem marcador. */
.mov {
  flex: none;
  width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  gap: 2px;
}
.mov--sm { width: 28px; font-size: 13px; }
.mov--lg { width: 32px; font-size: 15px; }
.mov--up { color: var(--up); }
.mov--down { color: var(--down); }
.mov--new { color: var(--new); }

/* ------------------------------------------------------------ estatísticas */

/* Ícone à esquerda, número e rótulo à direita. O ícone é a leitura rápida
   ("isto é pódio"); o rótulo confirma. Nenhum dos dois pode ser miúdo. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 10px;
}
.stat {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--well);
  border: 1px solid oklch(0.28 0.016 250);
  border-radius: 4px;
  padding: 12px 14px;
}
.stat-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
}
.stat-body { min-width: 0; display: block; }
.stat-v {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-l {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat--lg { border-radius: 5px; padding: 16px 18px; gap: 15px; }
.stat--lg .stat-v { font-size: 32px; }
.stat--lg .stat-l { font-size: var(--lbl-sm); letter-spacing: 0.14em; margin-top: 7px; }

/* blocos grandes (contagem regressiva e campeão na home) */
.blocks { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.block {
  min-width: 92px;
  background: var(--well);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 12px 16px;
}
/* Com ícone o bloco é horizontal; sem ícone (contagem regressiva) continua
   sendo só número sobre rótulo. */
.block--ico {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-width: 128px;
}
.block-ico { flex: none; display: flex; color: var(--acc); }
.block-body { min-width: 0; display: block; }
.block-v {
  display: block;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.block-l {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin-top: 7px;
}

/* --------------------------------------------------------- selos e notação */

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 2px 5px;
  white-space: nowrap;
}
.tag--acc { background: var(--acc); color: var(--ink); font-weight: 600; }
.tag--x2 { font-size: 9px; letter-spacing: 0.06em; padding: 1px 4px; }
/* O acento é reservado a estado e categoria. Descartado não é destaque: é
   pontuação que saiu da conta — cinza, e o número ao lado é que fica vermelho. */
.tag--desc {
  background: var(--desc-tag-bg);
  color: var(--desc-tag-fg);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 1px 5px;
}
.desc-pts { color: var(--desc); }
.desc-val {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--desc);
}
.tag--status {
  color: var(--txt-2);
  border: 1px solid oklch(0.32 0.016 250);
  font-size: var(--lbl-sm);
  letter-spacing: 0.14em;
  padding: 5px 10px;
}
.tag--sched { color: var(--txt-3); border: 1px dashed var(--line-strong); }
.tag--next {
  background: var(--acc);
  color: var(--ink);
  font-weight: 600;
  padding: 6px 11px;
  font-size: var(--lbl-sm);
  letter-spacing: 0.14em;
}
.tag--season {
  color: var(--ink);
  background: var(--txt-3);
  font-size: var(--lbl-sm);
  letter-spacing: 0.14em;
  padding: 3px 8px;
}

/* chip de equipamento */
.equip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.equip-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  border: 1px solid oklch(0.28 0.016 250);
  border-radius: 3px;
  padding: 5px 8px;
  background: var(--well);
}
.equip-chip .tipo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.equip-chip .marca {
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.equip-chip .modelo { font-family: var(--mono); font-size: var(--lbl-xs); color: var(--acc); }

/* ---------------------------------------------------------------- campeão */

/* Taça como marca d'água. Dois degradês fazem o trabalho: o vertical apaga a
   metade de baixo (é por onde o texto passa) e o horizontal solta a peça da
   borda. Fica gráfico, não ilustrativo — e some por completo na impressão. */
/* A taça se dimensiona pela ALTURA do bloco, não por uma largura fixa: é o
   que garante que ela apareça inteira em vez de ser recortada pelo cartão. */
.taca-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 6%;
  line-height: 0;
  color: var(--acc);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 32%, oklch(0 0 0 / 0.12) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 32%, oklch(0 0 0 / 0.12) 76%, transparent 100%);
}
.taca-bg svg { height: min(84%, 280px); width: auto; }

/* No cartão a taça fica ATRÁS de "CAMPEÃO" e do nome, encostada à esquerda —
   é a composição que o texto pede: a taça é o pano de fundo do nome, não um
   enfeite de canto. */
.taca-bg--card {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 6px;
  opacity: 0.13;
}
.taca-bg--card svg { height: min(150px, 100%); }

/* O conteúdo do cartão sobe acima da taça. */
.campeao-corpo { position: relative; padding: 24px 20px 20px; overflow: hidden; }
.campeao-id { position: relative; z-index: 1; padding-left: 58px; }
.campeao-corpo .stats-grid { position: relative; z-index: 1; }

.hero--campeao .hero-grid,
.strip--campeao .strip-in { position: relative; z-index: 1; }

.selo-campeao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--acc);
}
.ctx-campeao { display: inline-flex; align-items: center; gap: 8px; color: var(--acc); }
.ctx-campeao .ctx-etapa-n { color: var(--txt); }

/* --------------------------------------------------------------- home hero */

.hero { position: relative; overflow: hidden; }
.hero-hatch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 46px, oklch(0.22 0.014 250) 46px 50px);
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  top: -40px; right: -30px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--acc) 18%, transparent);
  filter: blur(60px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 36px 40px;
}
.hero-flag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc);
  animation: bpulse 2s ease-in-out infinite;
  flex: none;
}
.hero-flag .lbl { color: var(--acc); letter-spacing: 0.2em; }
.hero-title {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(44px, 7.4vw, 76px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero-sub {
  margin: 14px 0 0;
  font-size: 15px;
  color: oklch(0.74 0.012 250);
  max-width: 46ch;
  text-wrap: pretty;
}
.hero-facts { display: grid; gap: 10px; }
.fact { border-left: 3px solid oklch(0.34 0.016 250); padding-left: 14px; }
.fact-l {
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.fact-v {
  font-family: var(--cond);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.fact .slats { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hero-dot { animation: none; }
}

/* líder / pódio */
.leader-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
}
.leader-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.leader-id .driver-name { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.05; }

.podium-photo { position: relative; aspect-ratio: 4 / 3; }
.podium-cap {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  padding: 24px 28px;
  background: linear-gradient(to top, var(--bg) 10%, transparent);
}
.podium-id { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.podium-id .driver-name { font-size: clamp(38px, 6vw, 62px); font-weight: 800; line-height: 0.82; }
.podium-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); }
.podium-stats > div {
  min-width: 0;
  overflow: hidden;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.podium-stats .stat-v { font-size: 22px; margin-top: 9px; }

.strip {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--acc);
  border-radius: 6px;
  background: var(--card);
  padding: 24px 26px;
}
.strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--acc) 8%, transparent);
  pointer-events: none;
}
.strip-in {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.strip-title {
  font-family: var(--cond);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 0.92;
  text-transform: uppercase;
}
.strip-sub { font-size: 13px; color: var(--txt-2); margin-top: 8px; }
.strip-cd { display: flex; gap: 18px; font-family: var(--mono); }
.strip-cd > div { text-align: right; }
.strip-cd .v { font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.strip-cd .u {
  font-size: var(--lbl-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.66 0.012 250);
  margin-top: 5px;
}

/* top 5 / lista de classificação resumida */
.rank-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(96px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
}
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: var(--hover); color: inherit; }
.rank-id { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.rank-id .driver-name { font-size: 22px; line-height: 1.3; }
.rank-meta {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  color: oklch(0.66 0.012 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-gap {
  font-family: var(--mono);
  font-size: var(--lbl);
  color: oklch(0.66 0.012 250);
  letter-spacing: 0.08em;
}
.rank-total { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.rank-total .v {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rank-row--compact { grid-template-columns: 36px minmax(0, 1fr) auto 96px; padding: 11px 20px; }
.rank-row--compact .driver-name {
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-row--compact .rank-total .v { font-size: 18px; }
.rank-chassi { font-family: var(--mono); font-size: var(--lbl-sm); color: oklch(0.66 0.012 250); }

/* --------------------------------------------------------- matriz piloto×etapa */

.matrix-scroll { position: relative; overflow-x: auto; }
.matrix { min-width: var(--min-plain, 1020px); }
html[data-setup='on'] .matrix { min-width: var(--min-setup, 1240px); }

.matrix-hd,
.matrix-row {
  display: grid;
  grid-template-columns: var(--cols-plain);
}
html[data-setup='on'] .matrix-hd,
html[data-setup='on'] .matrix-row {
  grid-template-columns: var(--cols-setup);
}

/* Colunas fixas no scroll horizontal.
   A matriz é larga por natureza — 11 etapas + equipamento não cabem em tela
   nenhuma. Sem isto, rolar para ver a última etapa faz sumir justamente as
   duas colunas que dão sentido ao número: quem é o piloto e quanto ele tem.
   O recuo lateral vive DENTRO das células (não no padding da linha), senão a
   coluna fixa gruda deslocada e deixa conteúdo passar por baixo. */
.matrix-hd > :nth-child(1),
.matrix-row > :nth-child(1),
.matrix-hd > :nth-child(2),
.matrix-row > :nth-child(2) {
  position: sticky;
  z-index: 2;
}
.matrix-hd > :nth-child(1),
.matrix-row > :nth-child(1) { left: 0; padding-left: 20px; }
.matrix-hd > :nth-child(2),
.matrix-row > :nth-child(2) { left: var(--col-pos, 66px); }

.matrix-hd > :last-child,
.matrix-row > :last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  padding-right: 20px;
}

/* O fundo precisa ser opaco: é o que impede o conteúdo de aparecer por baixo
   da coluna fixa. Acompanha a zebra e o hover. */
.matrix-hd > :nth-child(1),
.matrix-hd > :nth-child(2),
.matrix-hd > :last-child { background: var(--thead); }
.matrix-row > :nth-child(1),
.matrix-row > :nth-child(2),
.matrix-row > :last-child { background: var(--card); }
.matrix-row:nth-child(even) > :nth-child(1),
.matrix-row:nth-child(even) > :nth-child(2),
.matrix-row:nth-child(even) > :last-child { background: var(--zebra); }
.matrix-row:hover > :nth-child(1),
.matrix-row:hover > :nth-child(2),
.matrix-row:hover > :last-child { background: var(--hover); }
.matrix-pista > :nth-child(1),
.matrix-pista > :nth-child(2),
.matrix-pista > :last-child,
.matrix-pista:hover > :nth-child(1),
.matrix-pista:hover > :nth-child(2),
.matrix-pista:hover > :last-child { background: var(--head); }

/* Um fio marca onde o conteúdo passa por baixo. */
.matrix-hd > :nth-child(2),
.matrix-row > :nth-child(2) { box-shadow: 1px 0 0 var(--line-soft); }
.matrix-hd > :last-child,
.matrix-row > :last-child { box-shadow: -1px 0 0 var(--line-soft); }

/* A célula fixa tem que ocupar a linha inteira — se ela encolhe até a altura
   do texto, o fundo não cobre e o conteúdo aparece por baixo nas bordas. */
.matrix-row > :nth-child(1),
.matrix-row > :nth-child(2),
.matrix-row > :last-child {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.matrix-row > :last-child { justify-content: flex-end; }
.matrix-hd > :nth-child(1),
.matrix-hd > :nth-child(2),
.matrix-hd > :last-child {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}
.matrix-hd > :last-child { justify-content: flex-end; }

.matrix-hd {
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-strong);
  background: var(--thead);
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.66 0.012 250);
}
.matrix-hd .etapa-col { text-align: center; min-width: 0; }
.matrix-hd .etapa-col a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: oklch(0.92 0.008 250);
}
.matrix-hd .etapa-col a:hover { color: var(--acc); }
/* O rótulo da etapa identifica a coluna inteira: é a informação principal
   deste cabeçalho, e vem maior e em negrito por isso.
   Condensada, não mono — a mesma do 'E01 E 02' do calendário. O zero da IBM
   Plex Mono tem um ponto dentro e a 14 px 'E01' era lido como 'EQ1'; e o peso
   700 nem está carregado em mono, então o navegador engordava na marra e
   fechava mais ainda o contorno. Condensada ocupa menos largura, então dá para
   subir de 14 px para 17 px sem tirar espaço da coluna. */
.matrix-hd .e-n {
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.matrix-hd .e-data {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--txt-3);
  margin-top: 4px;
}
/* Melhor tempo, ou a pole quando não há tempo lançado: o ícone substitui a
   palavra — sobra largura para o nome do piloto. O nome quebra em vez de
   truncar (nome de piloto nunca trunca) e nunca empurra a largura da coluna. */
.matrix-hd .e-tempo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  min-width: 0;
  min-height: 14px;
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--acc);
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.matrix-hd .e-tempo svg { flex: none; }
.matrix-hd .col-pts { text-align: right; color: oklch(0.90 0.008 250); }

/* Marcas da etapa: chuva e tomada de tempo. Cinza-claro para não competir com
   o acento — o que elas dizem é factual, não é estado. */
.e-marcas { display: inline-flex; align-items: center; gap: 3px; }
.e-marca { display: inline-flex; color: oklch(0.72 0.012 250); }
.e-marca--tq { color: var(--acc); }

.matrix-row {
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 58px;
}
.matrix-row:last-child { border-bottom: none; }
/* Zebra: em tabela larga, o olho perde a linha na volta do scroll horizontal.
   O degrau é de fundo, nunca de cor — cor de linha continua sendo proibida. */
.matrix-row:nth-child(even) { background: var(--zebra); }
.matrix-row:hover { background: var(--hover); }

/* Rodapé: onde cada etapa correu. */
.matrix-pista {
  align-items: start;
  min-height: 0;
  padding-block: 12px 14px;
  background: var(--head);
  border-top: 1px solid var(--line-strong);
  border-bottom: none;
}
.matrix-pista:hover { background: var(--head); }
/* A célula fixa é flex por causa do fundo opaco; aqui o conteúdo volta a
   empilhar, senão o rótulo e o nome da pista colam um no outro. */
.matrix-pista-lbl {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
}
.matrix-pista-nome {
  display: block;
  font-family: var(--cond);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--txt-2);
  line-height: 1.1;
  margin-top: 3px;
}
.pista-cell { display: flex; justify-content: center; min-width: 0; }
.matrix-row .driver-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
}
.matrix-row .driver-link:hover .driver-name { color: var(--acc); }
.matrix-row .driver-id { min-width: 0; display: block; }
.matrix-row .driver-name {
  display: block;
  font-size: 21px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vitórias e poles do ano, embaixo do nome. Pequeno de propósito: é contexto
   para a pontuação, não é a pontuação — e some por completo em quem tem zero. */
.driver-marks {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--txt-2);
}
.driver-mark { display: inline-flex; align-items: center; gap: 3px; }
.driver-mark svg { flex: none; color: var(--acc); }
.matrix-row .equipe-nome {
  font-size: 12px;
  color: oklch(0.68 0.012 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O botão "equipamento" governa as colunas da matriz e os chips da vista em
   linhas — as duas visualizações respondem ao mesmo controle. */
.setup-cell { display: none; min-width: 0; padding-right: 10px; }
html[data-setup='on'] .setup-cell { display: block; }

.row-equip { grid-area: equip; display: none; min-width: 0; }
html[data-setup='on'] .row-equip { display: block; }
.setup-cell .marca {
  display: block;
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: oklch(0.88 0.008 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setup-cell .modelo {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  line-height: 1.3;
  color: oklch(0.70 0.012 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell {
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.cell .v { display: block; font-size: 16px; }
.cell .bonus {
  font-size: 10px;
  color: var(--acc);
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
}
.cell .penal { color: var(--down); font-size: 10px; }
.cell .p {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--txt-2);
  margin-top: 3px;
}
.cell--desc { color: var(--desc); }
.cell--desc .tag { margin-top: 3px; }
.cell--dnr { font-size: 14px; color: var(--txt-4); }
/* Descartado é descartado, tenha número ou não: o `---` recebe o mesmo
   vermelho da pontuação descartada. */
.cell--dnr-desc { color: var(--desc); }
.cell--future { font-size: 14px; color: var(--txt-dim); }

.matrix-total { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.matrix-total .v {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- traçado */

/* Desenho + nome. O desenho é reconhecimento imediato ("é o longo"); o nome
   é o que resolve quando os dois traçados são parecidos — e é o que o leitor
   de tela recebe. */
.tracado {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tracado-img {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-3);
}
.tracado-img img {
  width: 56px;
  height: auto;
  /* O desenho vem cinza-claro; aqui ele é rebaixado ao nível do resto do
     rodapé, sem virar mancha branca no meio da tabela. */
  opacity: 0.8;
}
.tracado-txt { min-width: 0; display: block; }
.tracado-pista,
.tracado-nome {
  display: block;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tracado-pista { font-size: var(--lbl-sm); color: var(--txt-2); }
.tracado-nome { font-size: var(--lbl-xs); color: var(--txt-3); margin-top: 3px; }
/* A seta do sentido: sempre colada ao nome, nunca sozinha. */
.tracado-seta { font-size: 12px; color: var(--acc); letter-spacing: 0; }

/* Na coluna estreita a pista vai em cima, o desenho no meio e o traçado
   embaixo — nessa ordem porque é a ordem em que se lê a coluna. */
.tracado--sm {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.tracado--sm .tracado-img img { width: 52px; opacity: 0.78; }
.tracado--sm .tracado-pista {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--txt-2);
  max-width: 100%;
}
.tracado--sm .tracado-nome { font-size: 10px; letter-spacing: 0.04em; margin-top: 0; }

/* No calendário ele entra embaixo do local, na horizontal — ali a pista já é
   a manchete da linha, então só o desenho e o traçado. */
.cal-row .tracado--sm {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}
.cal-row .tracado--sm .tracado-pista { display: none; }

.etapa-tracado { min-width: 150px; }
.etapa-tracado .tracado-img img { width: 84px; opacity: 0.75; }

.legend {
  display: flex;
  gap: 26px;
  padding: 14px 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.64 0.012 250);
  border-top: 1px solid var(--line-soft);
}
.legend-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-item svg { flex: none; }

/* ------------------------------------------------- classificação em linhas */

.rows { display: grid; gap: 10px; }
/* Duas faixas: identidade + equipamento + totais em cima, as células da
   temporada ocupando a largura inteira embaixo. Tirar o equipamento de baixo do
   nome foi o que devolveu a altura que as células usam para crescer. */
.row-card {
  border: 1px solid oklch(0.28 0.016 250);
  border-radius: 6px;
  background: var(--card);
  display: grid;
  grid-template-columns: 92px minmax(200px, 340px) minmax(0, 1fr) auto;
  grid-template-areas:
    'pos id equip right'
    'cells cells cells cells';
  column-gap: 22px;
  row-gap: 14px;
  align-items: center;
  padding: 16px 22px;
}
.row-card:hover { border-color: var(--acc); }
.row-pos { grid-area: pos; display: flex; align-items: baseline; gap: 10px; }
.row-pos .lbl { font-size: 10px; color: var(--txt-4); }
.row-id { grid-area: id; min-width: 0; }
.row-card .driver-name { font-size: 30px; font-weight: 800; line-height: 1.15; }
.row-card .driver-link { color: inherit; display: inline-flex; align-items: center; gap: 10px; }
.row-card .driver-link:hover .driver-name { color: var(--acc); }

.row-cells { grid-area: cells; display: flex; gap: 7px; flex-wrap: wrap; }
/* A largura sai da divisão da linha pelo número de corridas, presa entre um
   piso e um teto. É o que faz a temporada de doze preencher a linha exata, a de
   seis parar em 220 px em vez de virar um painel vazio, e — quando a conta cai
   abaixo do piso e as células quebram em duas filas — todas continuarem do
   mesmo tamanho. Deixar o flex crescer esticava só a última fila. */
.row-cell {
  flex: 0 0 auto;
  width: clamp(116px, calc((100% - (var(--n-cel, 12) - 1) * 7px) / var(--n-cel, 12)), 220px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 4px;
  padding: 9px 12px;
  font-family: var(--mono);
  background: var(--well);
  border: 1px solid oklch(0.28 0.016 250);
  color: inherit;
}
.row-cell:hover { border-color: var(--acc); color: inherit; }
/* O rótulo da etapa identifica a célula. Aqui cabe a palavra inteira — na
   telinha de 116 px 'ETAPAS 06 E 07' dá 85 px em condensada —, e "etapa" é a
   palavra do campeonato. O 'E01' só sobrevive no cabeçalho da matriz, onde a
   coluna tem 72 px e a palavra não entra.
   Condensada, não mono: o zero da IBM Plex Mono tem um ponto dentro e a 11 px
   'E01' era lido como 'EQ1'. */
.row-cell .e {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.80 0.012 250);
}
.row-cell-v { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.row-cell-v .v {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* `---` e `·` são marcas, não números: entram menores e apagados. */
.row-cell-v .v--none { font-size: 16px; color: var(--txt-4); }
.row-cell-v .v--desc { color: var(--desc); }
.row-cell .p { font-size: 11px; color: oklch(0.66 0.012 250); }
/* Pole, melhor tempo e volta mais rápida dentro da célula da etapa. Uma por
   linha: a célula tem 116 px de piso e as três não caberiam lado a lado. Cinza
   como as outras marcas factuais — só o melhor tempo puxa o acento, porque é
   ele que manda nesta tela. */
.cel-marcas { display: flex; flex-direction: column; gap: 3px; margin-top: 1px; }
.cel-marca {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: oklch(0.70 0.012 250);
  overflow-wrap: anywhere;
}
.cel-marca svg { flex: none; }
.cel-marca--acc { color: var(--acc); }
.row-cell--future .v--none { color: var(--txt-dim); }

.row-right { grid-area: right; display: flex; align-items: center; gap: 22px; }
.row-stats { display: flex; gap: 16px; }
.row-stat { text-align: center; min-width: 46px; }
.row-stat .v {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.row-stat .l {
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin-top: 5px;
}
.row-total {
  text-align: right;
  border-left: 1px solid oklch(0.28 0.016 250);
  padding-left: 22px;
  min-width: 108px;
}
.row-total-v { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.row-total-v .v {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.row-total-note {
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-top: 5px;
}

/* --------------------------------------------------------------- calendário */

.cal { display: grid; gap: 10px; }
.cal-row {
  border: 1px solid oklch(0.28 0.016 250);
  border-radius: 6px;
  background: var(--card);
  display: grid;
  grid-template-columns: 108px 96px minmax(0, 1fr) 190px 150px;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  color: inherit;
}
.cal-row:hover { border-color: oklch(0.40 0.016 250); color: inherit; }
/* Com a página em 1860 px, uma coluna `1fr` sozinha engolia toda a folga e
   abria um vão de quase mil pixels entre o nome da pista e o vencedor — que
   são justamente as duas informações que a linha existe para parear. Dividindo
   a folga entre as duas, o vão volta ao tamanho que tinha no protótipo em
   1440 px. Abaixo disso nada muda: a linha estreita continua como no handoff. */
@media (min-width: 1400px) {
  /* 230 px, não 190: a coluna deixou de ter só o vencedor e a pole — agora
     carrega também o melhor tempo e a volta mais rápida, com tempo e nome na
     mesma linha. */
  .cal-row { grid-template-columns: 108px 96px minmax(0, 1fr) minmax(230px, 1fr) 150px; }
}
/* '06 E 07' não cabe em 34 px de condensada; a etapa dupla é justamente a que
   mais precisa ser lida. Encolhe em vez de vazar. */
.cal-n {
  font-family: var(--cond);
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--txt-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* A palavra embaixo do número, no mesmo tratamento do mês embaixo do dia na
   coluna ao lado — é o par que faz as duas colunas se lerem juntas. */
.cal-etapa-lbl {
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-top: 4px;
}
.cal-dia { font-family: var(--mono); font-size: 20px; font-weight: 600; line-height: 1; }
.cal-mes {
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-top: 4px;
}
/* As marcas do dia em linhas próprias, abaixo do vencedor: ao lado da palavra
   "vencedor" a pole era lida como se fosse o vencedor.
   São três agora (pole, melhor tempo, volta mais rápida), e o tratamento de
   antes — caixa alta com 0.1em de entreletra — não cabia em 190 px com o tempo
   junto. A entreletra encolheu e só o NOME continua em caixa alta; o tempo é
   número, e número não vai em versal. */
.cal-marca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px 5px;
  margin-top: 5px;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.04em;
  color: oklch(0.70 0.012 250);
}
.cal-marca svg { flex: none; align-self: center; }
.cal-marca--acc { color: var(--acc); }
.cal-marca-nome { text-transform: uppercase; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.cal-marca-v { color: inherit; opacity: 0.82; }
.cal-nome {
  font-family: var(--cond);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.cal-local { font-size: 13px; color: oklch(0.68 0.012 250); margin-top: 3px; }
.cal-winner { font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.cal-cd { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--acc); }
.cal-status { text-align: right; }

/* Quem detém a marca na etapa vem com o ícone e sem o apagado; os outros
   mostram o próprio tempo em cinza. */
.res-row .res-marca {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--acc);
}
.res-row .res-marca svg { flex: none; }

/* ------------------------------------------------------------------- fotos */

/* Placeholder hachurado enquanto a foto não existe no R2. O onerror do <img>
   devolve o bloco ao estado de placeholder. */
.photo {
  position: relative;
  border: 1px solid oklch(0.28 0.016 250);
  border-radius: 4px;
  background: repeating-linear-gradient(
    135deg,
    oklch(0.225 0.014 250) 0 12px,
    oklch(0.19 0.014 250) 12px 24px
  );
  display: grid;
  place-items: center;
  overflow: hidden;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 3 / 2; }
.photo-ph {
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  color: oklch(0.64 0.012 250);
  text-align: center;
  line-height: 1.6;
  padding: 10px;
}
.photo-ph-l { display: block; }
.photo-ph-l + .photo-ph-l { opacity: 0.7; }
.photo.is-loaded .photo-ph { display: none; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.gallery figure { margin: 0; }
.gallery figcaption {
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.08em;
  color: var(--txt-2);
  margin-top: 6px;
}

/* --------------------------------------------------------- grade de pilotos */

.drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

/* Título de grupo na grade de Pilotos: rótulo em versalete com um filete que
   corre até a margem — separa sem virar mais um cartão. */
.drivers-sec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0 14px;
  font-family: var(--mono);
  font-size: var(--lbl);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.drivers-sec .n { color: var(--txt-3); font-variant-numeric: tabular-nums; }
.drivers-sec::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Quem não corre a temporada: card menor, sem os campos dela. */
.drivers-grid--fora { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.driver-card--fora .driver-card-body { padding: 12px 13px 13px; }
.driver-card--fora .driver-card-id .driver-name { font-size: 19px; }
.driver-card--fora .photo--portrait { aspect-ratio: 1 / 1; }
.driver-card-ultima { display: block; margin-top: 9px; color: var(--txt-3); }
/* Sem temporada não há perfil: o card não é link e não finge que é. */
.driver-card--inerte:hover { border-color: var(--line-strong); }

.driver-card {
  display: block;
  color: inherit;
  transition: border-color 0.12s;
}
.driver-card:hover { border-color: var(--acc); color: inherit; }
.driver-card .team-bar { display: block; height: 4px; background: var(--cor, var(--txt-4)); }

.driver-card-photo { position: relative; display: block; }
.driver-card-photo .photo { border: none; border-radius: 0; }
.driver-card-pos {
  position: absolute;
  left: 10px; top: 10px;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 2px 8px;
  line-height: 1;
}
.driver-card-pos .pos { color: var(--txt); }

.driver-card-body {
  display: block;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}
.driver-card-id { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.driver-card-id .driver-name { font-size: 24px; line-height: 1.1; }
.driver-card:hover .driver-name { color: var(--acc); }

.driver-card-chassi {
  display: block;
  font-family: var(--mono);
  font-size: var(--lbl-sm);
  letter-spacing: 0.06em;
  color: var(--txt-3);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.driver-card-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
}
.driver-card-total .v {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.driver-card-total .mov { align-self: center; }

.driver-card-stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.driver-card-stats b {
  font-weight: 600;
  font-size: 15px;
  color: var(--txt);
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

.driver-card-slats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ perfil piloto */

/* Voltar e troca de piloto na mesma linha, no topo da página. A lista é o
   atalho mais usado daqui; enterrada no meio do conteúdo ela só era vista
   depois de rolar. */
.driver-topo {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.driver-topo .back-link { margin-bottom: 0; flex: none; }
.driver-topo .pills { min-width: 0; }

.driver-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.driver-aside { overflow: hidden; }
.driver-aside .team-bar { height: 4px; background: var(--cor, var(--txt-4)); }
.driver-aside .photo { border: none; border-radius: 0; }
.driver-aside-ft { padding: 16px 18px; border-top: 1px solid var(--line); }
.driver-pos-line { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.driver-pos-line .big {
  font-family: var(--cond);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--acc);
}
.driver-pos-line .pts { font-family: var(--mono); font-size: 15px; color: var(--txt-2); }

.driver-hd { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.driver-hd h1 {
  margin: 0;
  min-width: 0;
  font-family: var(--cond);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.driver-sub { display: flex; align-items: center; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.driver-sub span:last-child { font-size: 14px; color: var(--txt-2); }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--txt-2);
  min-height: 36px;
}
.pill:hover { border-color: var(--acc); color: oklch(0.94 0.008 250); }
.pill[aria-current] { background: var(--acc); border-color: var(--acc); color: var(--ink); }

.kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.kv-row:last-child { border-bottom: none; }
.kv-row .v { display: flex; align-items: baseline; gap: 5px; }
.kv-row .marca { font-family: var(--cond); font-size: 20px; font-weight: 600; text-transform: uppercase; }
.kv-row .modelo { font-family: var(--mono); font-size: var(--lbl); color: var(--acc); }

/* Cartão de equipamento do perfil: foto do carro, chassi em destaque, e o
   resto do equipamento na lista de sempre. A foto encosta nas bordas do
   cartão — moldura dentro de moldura fecharia a imagem. */
/* Foto à esquerda, ficha à direita.
   A foto do carro é quase sempre RETRATO: numa faixa deitada no topo do
   cartão o recorte mostrava o fundo da imagem e escondia o carro. Em coluna
   ela acompanha a altura da ficha e o carro aparece inteiro. */
.equip-corpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.equip-corpo--com-foto {
  grid-template-columns: clamp(150px, 38%, 320px) minmax(0, 1fr);
}
.equip-lista { min-width: 0; }

.equip-carro {
  border-right: 1px solid var(--line);
  /* Piso de altura: com dois itens de equipamento só, a linha ficaria baixa
     demais e a foto viraria uma tarja. Baixo de propósito — passar disso
     deixa a coluna da ficha com um vão embaixo. */
  min-height: clamp(180px, 19vw, 260px);
}
.equip-carro .photo {
  border: none;
  border-radius: 0;
  aspect-ratio: auto;
  height: 100%;
  /* Fundo liso: com `contain` a hachura do placeholder apareceria nas sobras. */
  background: var(--well);
}
/* `contain`, não `cover`: a foto do carro vem em qualquer proporção — em pé,
   deitada, quadrada — e recortar para preencher a coluna cortava justamente a
   traseira do carro. Aqui ela aparece inteira, e a sobra é fundo do cartão. */
.equip-carro .photo img {
  object-fit: contain;
  padding: 10px;
}

.equip-chassi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.equip-chassi .lbl { color: var(--txt-2); }
.equip-chassi-marca {
  font-family: var(--cond);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.equip-chassi-modelo {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.3;
  color: var(--acc);
  overflow-wrap: anywhere;
}

/* No celular a coluna da ficha ficaria com ~200 px e toda linha quebraria:
   abaixo disso a foto sobe para cima da ficha. */
@media (max-width: 560px) {
  .equip-corpo--com-foto { grid-template-columns: minmax(0, 1fr); }
  .equip-carro {
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-height: 0;
    height: 300px;
  }
}

.bars { padding: 6px 18px 14px; }
.bar-row {
  display: grid;
  /* 100 px e não 84: a coluna passou a dizer 'ETAPAS 06 E 07' por extenso, que
     em condensada dá 85 px. A barra ao lado é elástica e absorve. */
  grid-template-columns: 100px minmax(0, 1fr) 104px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.bar-etapa {
  font-family: var(--cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt-2);
  white-space: nowrap;
}
.bar-etapa:hover { color: var(--acc); }
.bar-row:last-child { border-bottom: none; }
.bar-track { height: 8px; background: var(--well); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--acc); }
.bar-val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ----------------------------------------------------------------- etapa */

.etapa-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.etapa-meta { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
.etapa-meta > div { min-width: 96px; }
.etapa-meta .v {
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  margin-top: 2px;
}
.etapa-obs {
  font-size: 13px;
  color: var(--txt-2);
  border-left: 3px solid var(--line-dash);
  padding-left: 10px;
  max-width: 52ch;
  text-wrap: pretty;
}

.res-row {
  display: grid;
  grid-template-columns: var(--cols-res, 54px minmax(130px, 1fr) minmax(110px, 0.7fr) 92px 110px);
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 620px;
}
/* Com o equipamento ligado a linha ganha uma coluna e as duas primeiras cedem
   espaço para ela — mesma mecânica de --cols-plain/--cols-setup na matriz. */
html[data-setup='on'] .res-row { grid-template-columns: var(--cols-res-setup, var(--cols-res)); }
html[data-setup='on'] .res-row { min-width: 980px; }
/* A célula é `display: block` por herança do .setup-cell; os chips já se viram
   com o flex-wrap de .equip-chips quando a coluna aperta. */
.res-equip .equip-chips { gap: 5px; }
.res-equip .equip-chip { padding: 3px 7px; }
.res-equip .equip-chip .marca { font-size: 14px; }
.res-hd {
  min-height: 0;
  padding-block: 10px;
  background: var(--thead);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: var(--lbl-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.66 0.012 250);
}
/* Mesma zebra da matriz. O cabeçalho é o primeiro filho, então as pares aqui
   são as ímpares da tabela — o que importa é alternar. */
.res-row:nth-child(even) { background: var(--zebra); }
.res-hd:hover { background: var(--thead); }
.res-row:last-child { border-bottom: none; }
.res-row:hover { background: var(--hover); }
.res-row .p {
  font-family: var(--cond);
  font-size: 24px;
  font-weight: 800;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.res-row .p--none { color: var(--txt-4); font-size: 18px; }
.res-row .n {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.res-row .n--muted { color: var(--txt-3); font-size: 14px; }
.res-row .n--desc { color: var(--desc); }

.cmp-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 70px 44px;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cmp-row:last-child { border-bottom: none; }
/* Primeira etapa da temporada: não existe "antes" — o cartão saía com o
   cabeçalho e o corpo vazio. */
.cmp-vazio { padding: 16px 20px; color: var(--txt-3); font-size: 14px; }
.cmp-row .nome {
  font-family: var(--cond);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmp-row .v { font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- rodapé */

.ft {
  border-top: 1px solid var(--line-soft);
  background: var(--head);
  padding-block: 28px;
  margin-top: 40px;
}
.ft-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.ft .lbl { color: var(--txt-4); }

/* ------------------------------------------------------------------- erro */

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 40px;
  text-align: center;
  color: var(--txt-3);
}
.empty p { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }

/* Temporada que ainda não começou: o calendário é o assunto, não a tabela. */
.pre-temporada {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  padding: 40px;
}
.pre-temporada .hero-hatch { opacity: 0.6; }
.pre-temporada-in { position: relative; max-width: 62ch; }
.pre-temporada h2 {
  margin: 0;
  font-family: var(--cond);
  font-size: clamp(34px, 5.5vw, 54px);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.pre-temporada p { margin: 14px 0 0; font-size: 15px; color: oklch(0.74 0.012 250); text-wrap: pretty; }
.pre-temporada .acoes { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.empty h2 {
  font-family: var(--cond);
  font-size: 34px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--txt);
}
.empty code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--acc);
}

/* =========================================================== alternâncias */

/* Painéis das duas visualizações. Sem JS, o painel "a" é o visível. */
[data-panel] { display: none; }
html[data-home='a'] [data-panel='home-a'],
html[data-home='b'] [data-panel='home-b'],
html[data-class='a'] [data-panel='class-a'],
html[data-class='b'] [data-panel='class-b'] { display: block; }
html:not([data-home]) [data-panel='home-a'],
html:not([data-class]) [data-panel='class-a'] { display: block; }

/* ============================================================= responsivo */

@media (max-width: 1180px) {
  .hdr-bar { gap: 20px; }
  .nav-item { padding: 0 12px; font-size: 17px; }
  .two-col { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .cal-row { grid-template-columns: 92px 80px minmax(0, 1fr) 170px 130px; gap: 14px; }
  .driver-layout { grid-template-columns: 200px minmax(0, 1fr); }
  /* A taça é decoração: em tela estreita ela some antes de brigar com o texto. */
  .taca-bg { opacity: 0.09; right: -2%; }
  /* Não cabem mais quatro colunas: o equipamento desce para uma faixa própria,
     acima das células, e o resto da anatomia fica igual. */
  .row-card {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-areas:
      'pos id right'
      'equip equip equip'
      'cells cells cells';
  }
}

/* O cabeçalho passa a empilhar antes do resto do layout: brand + temporada
   numa linha, navegação na seguinte. */
@media (max-width: 1080px) {
  .hdr-bar { height: auto; flex-wrap: wrap; gap: 12px; padding-block: 10px; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: 0; }
  .nav-item { padding: 8px 12px; font-size: 16px; }
  .hdr-spacer { display: none; }
  .season { margin-left: auto; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .row-card {
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-areas:
      'pos id'
      'equip equip'
      'right right'
      'cells cells';
  }
  /* O numeral da posição encosta no topo, ao lado do nome. */
  .row-pos { align-self: start; flex-direction: column; gap: 0; }
  .pos--lg { font-size: 34px; }
  .row-right { flex-wrap: wrap; gap: 14px; }
  .row-total { border-left: none; padding-left: 0; text-align: left; }
  .row-total-v { justify-content: flex-start; }
  .cal-row { grid-template-columns: 84px 68px minmax(0, 1fr); }
  .cal-row > div:nth-child(4) { grid-column: 2 / -1; }
  .cal-status { grid-column: 1 / -1; text-align: left; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .driver-layout { grid-template-columns: minmax(0, 1fr); }
  .driver-aside { max-width: 300px; }
  .etapa-meta { gap: 18px; }
}

/* Abaixo de 720 px a matriz dá lugar automaticamente aos cards de linha,
   independente da preferência salva (handoff §7). */
@media (max-width: 720px) {
  html[data-class='a'] [data-panel='class-a'],
  html:not([data-class]) [data-panel='class-a'] { display: none; }
  html[data-class='a'] [data-panel='class-b'],
  html:not([data-class]) [data-panel='class-b'] { display: block; }
  .class-toggle { display: none; }
  .leader-grid { grid-template-columns: minmax(0, 1fr); }
  .leader-grid .photo { max-width: 200px; }
  .blocks { gap: 8px; }
  .block { min-width: 72px; padding: 10px 12px; }
  .block--ico { min-width: 108px; gap: 10px; padding: 12px 13px; }
  .block--ico .block-ico svg { width: 24px; height: 24px; }
  .block-v { font-size: 26px; }
  .taca-bg { display: none; }
  .strip-cd { gap: 12px; }
  .strip-cd .v { font-size: 22px; }
  .rank-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 12px 14px; }
  .rank-gap { display: none; }
  .rank-row--compact { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .rank-chassi { display: none; }
  .legend { gap: 14px; }
  .card-hd { padding: 12px 14px; }
  .matrix-hd > :nth-child(1), .matrix-row > :nth-child(1) { padding-left: 14px; }
  .matrix-hd > :last-child, .matrix-row > :last-child { padding-right: 14px; }
  .row-card { padding: 14px 16px; gap: 14px; }
}

@media (max-width: 480px) {
  .nav-item { padding: 8px 9px; font-size: 15px; letter-spacing: 0.04em; }
  .block { min-width: 64px; padding: 9px 10px; }
  /* Abaixo disso o ícone não cabe junto do número: o rótulo é que precisa
     sobreviver, então o ícone sai e o bloco volta a ser vertical. */
  .block--ico { min-width: 88px; display: block; }
  .block--ico .block-ico { display: none; }
  .block-v { font-size: 22px; }
  .block-l { font-size: var(--lbl-xs); letter-spacing: 0.12em; }
  .blocks { gap: 6px; margin-top: 20px; }
  .brand-name { font-size: 22px; }
  .etapa-meta > div { min-width: 0; }
  h1.page-title { font-size: clamp(30px, 9vw, 46px); }
  .etapa-meta .v { font-size: 18px; }
}

@media print {
  .hdr, .ft, .toggle-group, .setup-btn, .pills, .skip, .taca-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .matrix-row:nth-child(even), .res-row:nth-child(even) { background: none; }
}