/* Écran LIVE : le classement prend toute la place restante sous la barre haute (et à droite de la sidebar).
   Le tableau défile dans son cadre : l'en-tête et les colonnes de position / kart restent visibles. */
.shell-main.is-live { padding-bottom: var(--s3); }
.live-page {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: calc(100vh - var(--topbar-h) - var(--s4) - var(--s3));
  height: calc(100dvh - var(--topbar-h) - var(--s4) - var(--s3));
  min-height: 240px;
}
.live-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: 24px; }
.live-bar .live-title { font-weight: 650; }
.live-bar .msg { flex: 1 1 100%; margin: 0; }
.live-bar .live-why { flex: 1 1 100%; margin: 0; color: var(--warning-text); font-size: 12px; } /* raison écrite quand REAL POS / PRED POS n'est pas calculé */
.live-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.live-scroll > .card, .live-scroll > .live-empty { border: 0; margin: 0; }
.live-empty { padding: var(--s4); margin: 0; }
.live-help { flex: none; font-size: 12px; color: var(--text-2); }
.live-help summary { cursor: pointer; width: max-content; }
.live-help p { margin: var(--s2) 0 0; }

table.live { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; }
/* Lignes compactes (porteur, 26/09/2026 : afficher plus de lignes à l'écran) : 34 → 24 px, en-tête 36 → 28 px. */
table.live th, table.live td { padding: 0 10px; height: 24px; line-height: 1.2; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.live th { position: sticky; top: 0; z-index: 3; height: 28px; background: var(--surface-2); box-shadow: 0 1px 0 var(--line-strong); }
/* Une ligne sur deux très légèrement grisée : couleur pleine (les colonnes figées doivent rester opaques). */
table.live tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
table.live tbody tr:hover td { background: var(--hover); }
table.live td.c-rk, table.live th.c-rk { position: sticky; left: 0; z-index: 2; width: 64px; min-width: 64px; text-align: center; background: var(--surface); }
table.live td.c-real, table.live th.c-real { position: sticky; left: 64px; z-index: 2; width: 72px; min-width: 72px; text-align: center; background: var(--surface); }
table.live td.c-pred, table.live th.c-pred { position: sticky; left: 136px; z-index: 2; width: 72px; min-width: 72px; text-align: center; background: var(--surface); }
table.live td.c-no, table.live th.c-no { position: sticky; left: 64px; z-index: 2; width: 56px; min-width: 56px; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
table.live.has-real td.c-no, table.live.has-real th.c-no { left: 136px; }
table.live.has-pred td.c-no, table.live.has-pred th.c-no { left: 208px; }
table.live th.c-rk, table.live th.c-real, table.live th.c-pred, table.live th.c-no { z-index: 4; background: var(--surface-2); }
table.live td.c-dr { min-width: 210px; }
table.live td.c-rk strong { font-weight: 700; }
table.live td.c-real { color: var(--warning-text); }
table.live td.c-pred { color: var(--brand-text); }
.real-rank { display: inline-grid; place-items: center; min-width: 20px; min-height: 20px; font-weight: 750; cursor: help; }
.pred-rank { display: inline-grid; place-items: center; min-width: 20px; min-height: 20px; font-weight: 750; cursor: help; }
.real-rank.real-medal { width: 21px; height: 21px; box-sizing: border-box; border: 2px solid; border-radius: 50%; }
.real-rank.real-medal.medal-1 { border-color: #f5c542; background: color-mix(in srgb, #f5c542 18%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, #f5c542 22%, transparent), inset 0 0 7px color-mix(in srgb, #f5c542 24%, transparent); }
.real-rank.real-medal.medal-2 { border-color: #b8c2cc; background: color-mix(in srgb, #b8c2cc 18%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, #b8c2cc 22%, transparent), inset 0 0 7px color-mix(in srgb, #b8c2cc 24%, transparent); }
.real-rank.real-medal.medal-3 { border-color: #c9834b; background: color-mix(in srgb, #c9834b 18%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in srgb, #c9834b 22%, transparent), inset 0 0 7px color-mix(in srgb, #c9834b 24%, transparent); }

/* Notre kart : teinte bleue et repère à gauche, jamais la couleur seule (le kart reste lisible par son numéro). */
table.live tbody tr.ours td { background: var(--brand-tint); }
table.live tbody tr.ours td.c-rk, table.live tbody tr.ours td.c-real, table.live tbody tr.ours td.c-pred, table.live tbody tr.ours td.c-no { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); }
table.live tbody tr.ours td.c-rk { box-shadow: inset 3px 0 var(--brand); }
/* Texte de notre équipe en couleur d'accent sur toute la ligne (demande du porteur, 03/10/2026). Écrit avec :where() : la règle ne pèse
   RIEN en spécificité, donc toutes les couleurs qui portent un sens l'emportent toujours (LAST LAP meilleur tour perso en vert, BEST LAP
   meilleur tour de la course en violet, REAL POS, temps au stand, flèche d'INTERVAL). La ligne reste repérée par sa teinte et son filet. */
:where(table.live tbody tr.ours) td { color: var(--brand-text); }

/* Colonne TEAM / PILOTE : les deux noms partagent la même case (largeur du plus long, pas de saut de mise en page). */
.alt { display: inline-grid; }
.alt > span { grid-area: 1 / 1; }
.alt-driver { font-style: italic; }
body[data-alt="driver"] .alt-team { visibility: hidden; }
body:not([data-alt="driver"]) .alt-driver { visibility: hidden; }
[data-team-detail] { cursor: pointer; }

@media (max-width: 700px) {
  .live-page { height: calc(100dvh - var(--topbar-h) - var(--s4) - var(--s3)); }
  table.live { font-size: 12.5px; }
}

/* Évolution de l'écart avec le kart devant, à côté de RAW POS : flèche + couleur, jamais la couleur seule. */
.trend { display: inline-block; margin-left: var(--s1); font-size: 11px; line-height: 1; vertical-align: middle; }
.trend.is-closing { color: var(--success-text); }
.trend.is-steady { color: var(--text-2); }
.trend.is-losing { color: var(--critical-text); }
table.live td.c-rk, table.live th.c-rk { text-align: left; padding-left: 14px; }

/* LAST LAP : couleur de base jaune clair, distincte du reste du tableau (demande du porteur, 22/09/2026). */
table.live td.c-llp { color: var(--lastlap-text); }

/* Meilleurs tours : vert = meilleur tour personnel (le dernier tour du kart est aussi son meilleur, jusqu'au tour suivant) ;
   violet = meilleur tour de la course (reste tant qu'il n'est pas battu). Le sens est aussi dans l'infobulle.
   Ces deux règles sont déclarées APRÈS la couleur de base de LAST LAP : à spécificité égale, elles l'emportent toujours. */
table.live td.is-pb { color: var(--success-text); font-weight: 700; }
table.live td.is-best { color: var(--best); font-weight: 700; }

/* Effets d'une ligne (posés par live.js) : position gagnée (vert) ou perdue (rouge) = 2 s pleines puis 2 s d'estompage ;
   tour terminé sans meilleur tour personnel = 1 s gris-vert puis 0,5 s d'estompage. Voile posé sur la couleur de la cellule. */
@property --fx-a { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
table.live tbody tr.fx-up { --fx-color: color-mix(in srgb, var(--success) 38%, transparent); }
table.live tbody tr.fx-down { --fx-color: color-mix(in srgb, var(--critical) 38%, transparent); }
table.live tbody tr.fx-lap { --fx-color: color-mix(in srgb, color-mix(in srgb, var(--success) 40%, var(--text-2)) 32%, transparent); }
table.live tbody tr.fx-up td, table.live tbody tr.fx-down td, table.live tbody tr.fx-lap td {
  background-image: linear-gradient(color-mix(in srgb, var(--fx-color) var(--fx-a), transparent), color-mix(in srgb, var(--fx-color) var(--fx-a), transparent));
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-delay: var(--fx-delay, 0s);
}
table.live tbody tr.fx-up td, table.live tbody tr.fx-down td { animation-name: fx-hold-half; animation-duration: 2s; }
table.live tbody tr.fx-lap td { animation-name: fx-hold-two-thirds; animation-duration: 1.5s; }
@keyframes fx-hold-half { 0%, 50% { --fx-a: 100%; } 100% { --fx-a: 0%; } }
@keyframes fx-hold-two-thirds { 0%, 66.67% { --fx-a: 100%; } 100% { --fx-a: 0%; } }
@media (prefers-reduced-motion: reduce) {
  table.live tbody tr.fx-up td, table.live tbody tr.fx-down td, table.live tbody tr.fx-lap td { animation: none; background-image: none; }
}

/* ---------- Bascule Classement / Vue 3D ---------- */
.view-switch { flex: none; display: inline-flex; gap: var(--s1); align-self: flex-start; }
.view-switch button { min-height: 30px; padding: 0 var(--s3); font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.view-switch button.active, .view3d-cams button.active { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand-text); }
.live-page.is-3d .live-scroll, .live-page.is-3d .live-help { display: none; }
.view3d { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s3); }
.view3d[hidden] { display: none; }
.view3d-bar { flex: none; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.view3d-bar label { display: flex; align-items: center; gap: var(--s2); }
.view3d-bar select { width: auto; min-width: 210px; min-height: 30px; }
.view3d-cams { display: flex; gap: var(--s1); }
.view3d-cams button { min-height: 30px; padding: 0 var(--s3); font-size: 12px; }
.view3d-stats { margin-left: auto; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.view3d-canvas { position: relative; flex: 1 1 auto; min-height: 320px; background: #0f1216; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.view3d-canvas canvas { display: block; width: 100%; height: 100%; }
.view3d-svg-host { position: absolute; width: 0; height: 0; visibility: hidden; }
.view3d-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s4); color: var(--text-2); pointer-events: none; z-index: 1; }
.view3d-msg[hidden] { display: none; }
.view3d-note { flex: none; margin: 0; padding: var(--s2) var(--s3); font-size: 12px; color: var(--text-2); border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.view3d-note strong { color: var(--warning-text); }
@media (max-width: 760px) { .view3d-stats { margin-left: 0; width: 100%; } }

/* Temps au stand dans « En piste » (26/09/2026) : couleur propre ; en cours orange puis vert au minimum ; arrêt trop court rouge + ⚠. */
table.live td.pit-time { color: var(--brand-text); font-weight: 650; }
table.live td.pit-time.is-running { color: var(--warning-text); }
table.live td.pit-time.is-done { color: var(--success-text); }
table.live td.pit-time.is-short { color: var(--critical-text); font-weight: 700; background: color-mix(in srgb, var(--critical) 12%, transparent); }