/* Graphiques de télémétrie, dans le panneau des résultats.

   Le panneau fait 380 px de large, 300 px sur un écran de 1180 px : toute cette
   feuille est écrite pour cette largeur-là. Un sélecteur de voies qui
   déborderait sur deux lignes volerait la hauteur du tracé, qui est la seule
   chose qu'on vient regarder ; il défile donc horizontalement, comme les
   onglets d'épreuve de la barre haute.

   Le tracé est en canvas, pour la raison habituelle : neuf mille points par
   voiture, redessinés au survol et au déplacement du curseur de rejeu, ne
   peuvent pas être autant d'éléments. Mais tout ce qui est cliquable — les
   voies, la légende — reste du DOM : un bouton dessiné dans un canvas n'a ni
   focus, ni nom accessible, ni état pressé.

   Deux canvas superposés, et c'est le choix de conception de cette feuille. Le
   tracé change quand les données, la voie ou la taille changent ; le curseur et
   le survol changent à chaque image du rejeu et à chaque mouvement de souris.
   Les séparer évite de retracer neuf mille points pour déplacer un trait
   vertical.

   Aucune couleur de voiture n'est écrite ici : la légende emprunte celle de sa
   série par --series-color, que charts.js renseigne depuis la palette de
   tokens.css. */

.charts {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
}

/* ================================================================== */
/* Sélecteur de voies                                                  */
/* ================================================================== */

.charts-bar {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 1px;         /* laisse voir le contour de focus du dernier bouton */
}
.charts-bar::-webkit-scrollbar { display: none; }

.charts-chip {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
}

/* ================================================================== */
/* Légende                                                             */
/* ================================================================== */

/* Cliquer sur une série l'isole, et recliquer rend les autres : sur quatre
   courbes qui se croisent, c'est le geste qui sert, et il se fait d'une main
   sans boîte de dialogue. */
.charts-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  min-width: 0;
}

.charts-series {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-1);
  font: var(--fs-xs) var(--font-ui);
  cursor: pointer;
}
.charts-series:hover { color: var(--ink-0); }
.charts-series[aria-pressed='true'] { color: var(--ink-0); font-weight: 600; }

/* Une série masquée reste lisible : on doit pouvoir la rappeler, donc la
   reconnaître. */
.charts-series[data-muted='true'] { opacity: 0.4; }

.charts-series-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charts-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--series-color, var(--accent));
}

/* ================================================================== */
/* Tracé                                                               */
/* ================================================================== */

/* La hauteur est imposée ici : le corps du panneau est une grille dont les
   lignes se calent sur leur contenu, et un canvas en position absolue n'a pas
   de contenu. Elle suit la fenêtre, sans jamais écraser le tracé ni le laisser
   pousser le tableau hors de l'écran. */
.charts-plot {
  position: relative;
  height: clamp(190px, 30vh, 340px);
  min-width: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  background: var(--bg-2);
  touch-action: none;          /* le glissement déplace le rejeu, il ne défile pas */
}

.charts-plot[data-seekable='true'] { cursor: crosshair; }

.charts-canvas,
.charts-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-num);
  font-size: var(--fs-xs);
}

/* Le relevé de survol : les valeurs de toutes les séries au même instant. Il
   passe du côté opposé au pointeur pour ne jamais masquer ce qu'on désigne. */
.charts-readout {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  display: none;
  min-width: 96px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-1);
  background: var(--bg-1);
  box-shadow: var(--shadow-2);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  line-height: 1.5;
  pointer-events: none;
}

.charts-readout[data-shown='true'] { display: block; }
.charts-readout[data-side='left'] { right: auto; left: var(--sp-1); }

.charts-readout-x {
  margin-bottom: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-2);
}

/* La ligne d'une série masquée est retirée par l'attribut `hidden` : la règle
   suivante est indispensable, parce que `display: flex` l'emporterait sinon sur
   le style par défaut du navigateur et la ligne resterait visible. */
.charts-readout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  white-space: nowrap;
  color: var(--ink-0);
}

.charts-readout-row[hidden] { display: none; }

.charts-readout-row > span:first-child {
  overflow: hidden;
  max-width: 11ch;
  text-overflow: ellipsis;
  color: var(--series-color, var(--ink-1));
}

/* ================================================================== */
/* Mentions                                                            */
/* ================================================================== */

.charts-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-2);
}

@media (max-width: 920px) {
  /* En tiroir plein écran, la place ne manque plus : le tracé en profite. */
  .charts-plot { height: clamp(220px, 38vh, 420px); }
}