/* ==========================================================================
   Kairon — éthogramme Dyson
   Mobile-first, pensé pour 390 px de large. Toutes les dimensions sont en rem
   pour suivre le réglage de taille de texte du système : le layout grandit
   avec la typographie au lieu de casser.
   ========================================================================== */

/* ==========================================================================
   Fontes
   --------------------------------------------------------------------------
   Servies depuis /fonts : aucune requête vers un tiers, et la typographie
   tient hors ligne.

   Neue Machina (Inktrap Regular) porte tous les titres T1. Space Mono porte
   T2 (catégories, en-têtes de colonnes) et les données. Comma Base porte le
   corps, les boutons et les métas.
   ========================================================================== */

@font-face {
  font-family: 'Neue Machina';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NeueMachina/PPNeueMachina-InktrapRegular.otf') format('opentype');
}

@font-face {
  font-family: 'Comma Base';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CommaBase/Comma%20Base%20Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Comma Base';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/CommaBase/Comma%20Base%20Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Comma Base';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/CommaBase/Comma%20Base%20Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SpaceMono/SpaceMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SpaceMono/SpaceMono-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SpaceMono/SpaceMono-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SpaceMono/SpaceMono-BoldItalic.ttf') format('truetype');
}

:root {
  /* Fond dominant sombre : c'est l'identité, pas une préférence système. Un
     pendant clair contredirait la charte et demanderait des couleurs qu'elle
     ne définit pas. `dark` accorde aussi les contrôles natifs — champs de
     saisie, caret, ascenseurs, lecteur vidéo. */
  color-scheme: dark;

  /* ---- Charte Kairon ---------------------------------------------------- */
  --bg-dark:       #022227;  /* fond applicatif */
  --kairon-slate:  #11444f;  /* contraste : bordures, séparateurs, reliefs */
  --glacier-light: #cdebf5;  /* typographie et éléments clairs */
  --glacier-mid:   #b8e5f4;  /* géométrie des données : courbes, jauges, ondes */
  --kairon-gold:   #f5bb48;  /* accent : CTA et éléments interactifs clés */

  /* ---- Tons cliniques Dyson --------------------------------------------- */
  /* Trois régimes de lecture. Ces teintes sont les seules de l'application à
     sortir du bleu et de l'or, et elles ne paraissent qu'en trois endroits :
     la pastille de score, la jauge de douleur, les points de l'éthogramme.
     C'est cette rareté qui leur donne valeur de verdict. */
  --tone-good:  #21ad88;     /*  0 à  4 marqueurs */
  --tone-watch: #edaf34;     /*  5 à  7 marqueurs */
  --tone-alert: #df5745;     /*  8 à 24 marqueurs */

  /* #df5745 tient 4,4:1 sur le fond : au-delà du seuil de 3:1 d'un aplat ou
     d'un point, trop juste pour du texte. Les libellés prennent donc une
     variante éclaircie à 5,4:1 ; la teinte de charte, elle, reste exacte
     partout où elle se lit comme une surface. */
  --tone-alert-ink: #e7705f;

  --tone-good-soft:  rgba(33, 173, 136, 0.16);
  --tone-watch-soft: rgba(237, 175, 52, 0.16);
  --tone-alert-soft: rgba(223, 87, 69, 0.18);

  /* ---- Voix typographiques ---------------------------------------------- */
  --font-display: 'Neue Machina', sans-serif;
  --font-h1: var(--font-display);
  --font-sans: 'Comma Base', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* T1 — titres : H1, H2, cartes, noms, barre compacte. */
  --font-t1: var(--font-display);

  /* T2 — labels techniques, catégories, en-têtes de colonnes. */
  --font-t2: var(--font-mono);

  /* Corps — texte courant, formulaires, listes, descriptions. */
  --font-body: var(--font-sans);

  /* Données — scores /24, timecodes, quantités, signatures en italique. */
  --font-data: var(--font-mono);

  /* Corps — 2 pt au-dessus de la taille système, pour le texte courant. */
  --corps-plus: 2pt;

  /* ---- Fonds ------------------------------------------------------------ */
  --bg-scene: #032229;              /* Dark Teal de charte — pas un noir neutre */
  --bg: var(--bg-scene);
  --surface: #08343b;               /* la carte se détache d'un cran du fond */
  --surface-quiet: rgba(205, 235, 245, 0.06);  /* zones de saisie en creux */
  --surface-sunken: rgba(205, 235, 245, 0.1);  /* appui, jauges, pastilles neutres */
  --track: rgba(2, 34, 39, 0.55);              /* rails : plus sombre = en retrait */
  --material: rgba(3, 34, 41, 0.78);
  --material-edge: rgba(184, 229, 244, 0.16);

  /* Verre clair : film très léger pour laisser voir le teal à travers,
     flou minime (réfraction, pas givre). Le chrome sticky garde un flou lourd. */
  --glass-pigment: #0a3942;
  --glass-heavy-pigment: #032229;
  --glass: color-mix(in srgb, var(--glacier-light) 3%, transparent);
  --glass-hover: color-mix(in srgb, var(--glacier-light) 6%, transparent);
  --glass-chip: color-mix(in srgb, var(--glacier-light) 4%, transparent);
  --glass-heavy: color-mix(in srgb, var(--bg-scene) 42%, transparent);
  --glass-edge: color-mix(in srgb, var(--glacier-light) 32%, transparent);
  --glass-edge-hover: color-mix(in srgb, var(--glacier-light) 46%, transparent);
  --glass-edge-lit: color-mix(in srgb, var(--glacier-light) 58%, transparent);
  --glass-blur: 0.12rem;
  --glass-blur-heavy: 1.25rem;
  --glass-blur-chip: 0.12rem;
  --glass-saturate: 100%;
  /* Vitre claire : un filet spéculaire court, pas un voile laiteux. */
  --glass-sheen: linear-gradient(
    135deg,
    color-mix(in srgb, var(--glacier-light) 26%, transparent) 0%,
    color-mix(in srgb, var(--glacier-light) 8%, transparent) 12%,
    transparent 34%
  );
  --glass-sheen-hover: linear-gradient(
    135deg,
    color-mix(in srgb, var(--glacier-light) 34%, transparent) 0%,
    color-mix(in srgb, var(--glacier-light) 10%, transparent) 14%,
    transparent 36%
  );
  --timeline-gold: #f5bb48;
  --heading: var(--glacier-light);
  --stone: var(--glacier-mid);

  /* ---- Texte ------------------------------------------------------------ */
  /* Glacier : titres lumineux, métadonnées et dates en pastel, jamais de
     blanc pur. */
  --label: var(--heading);
  --label-2: var(--glacier-mid);
  --label-3: #a0d3e4;
  --separator: var(--glass-edge);

  /* ---- Action ----------------------------------------------------------- */
  --tint: var(--kairon-gold);
  --tint-ink: var(--bg-dark);   /* 9,6:1 : le texte des CTA est sombre */
  --tint-soft: rgba(245, 187, 72, 0.16);

  /* ---- Données ---------------------------------------------------------- */
  /* La géométrie des graphiques reste dans le bleu de charte : la couleur y
     est réservée aux points, qui portent le verdict clinique. */
  --chart-line: var(--glacier-mid);
  --chart-area: rgba(205, 235, 245, 0.08);

  /* Sur fond sombre l'ombre ne sépare presque plus : c'est la bordure slate
     qui définit les cartes, l'ombre ne fait que les décoller. */
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-chrome: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.35);
  --shadow-sheet: 0 -0.75rem 3rem rgba(0, 0, 0, 0.55);

  --radius-card: 1.25rem;
  --radius-control: 0.875rem;
  --gutter: 1.125rem;
  --touch-min: 3.5rem; /* 56 px — glove-friendly field target */
  --tabbar-h: env(safe-area-inset-bottom);

  /* Ressorts critiquement amortis par défaut : arrivée nette, pas de rebond
     là où aucun élan ne le justifie. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* miroir de --ease-out */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* Corps : Comma Base, 4 pt au-dessus de la taille système (2 pt + 2 pt). */
  font-family: var(--font-body);
  font-size: calc(100% + 2pt + var(--corps-plus));
  font-weight: 400;
  line-height: 1.5;
  background: var(--bg);
  color: var(--label);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Les contrôles natifs n'héritent pas toujours de la fonte du body. */
input, textarea, select, p, ul, ol, li, dl, dt, dd, label, figcaption {
  font-family: var(--font-body);
}

/* ==========================================================================
   Rôles typographiques
   --------------------------------------------------------------------------
   Déclarés une fois ici plutôt que répétés composant par composant : c'est ce
   qui fait qu'un même rôle sonne pareil d'un écran à l'autre. Les composants,
   plus bas, ne règlent plus que la taille, la graisse et la couleur.
   ========================================================================== */

/* Titres — Neue Machina : H1, H2, noms de chevaux, cartes, barre compacte.
   Capitale initiale, le reste en minuscules (casse du texte source). */
h1,
h2,
.large-title,
.t1,
.identity__name,
.topbar__title,
.horse-card__name,
.card__title,
.section-heading,
.group__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--heading);
}

.t1 {
  letter-spacing: 0;
}

/* T2 — Space Mono : titres de catégories, en-têtes de colonnes, légendes. */
.t2, .topbar__eyebrow, .field__label, .pill,
.tag, .badge, .flag, .lede__flag, .segmented__option, .dot-legend,
.meter__legend, .guide-stats__label, .stat-row__label, .quota__label,
.tile__label, .coverflow__heading, .coverflow__label, .coverflow__score-label,
.info-cell dt, .heatmap__corner, .heatmap__label, .heatmap__date,
.label-table__head, .label-table__category {
  font-family: var(--font-t2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Corps / UI — Comma Base : texte courant, métas, boutons, onglets. */
.assistant__hint, .tab__label,
.action, .link-button,
.monogram, .ai-overlay__status, .sort-chip, .horse-card__meta, .identity__meta,
.row__detail {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Données : tout ce qui se compte, se date ou se chronomètre. La chasse fixe
   aligne les chiffres d'une ligne à l'autre et empêche un compteur de changer
   de largeur en changeant de valeur — d'où aussi le tracking neutre. */
.score, .big-score, .score-chip, .trend, .card__timestamp, .chart__label,
.group__title-count, .section-tally__count, .mini-steps__time,
.video-preview__duration, .timeline__index, .timeline__time, .timeline__cue,
.guide-stats__value, .stat-row__value, .quota__value, .horse-card__date,
.coverflow__value, .coverflow .score-chip {
  font-family: var(--font-data);
  letter-spacing: 0;
}

/* Aucune latence de tap : ni délai de 300 ms, ni flash de sélection. */
button, [role="button"] {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon, .row__chevron, .flag__icon, .checklist__icon, .action__icon,
.tab__icon, .search__icon, .link-button__icon, .mic__icon, .marker__glyph,
.toast__icon, .group__title-icon, .video-preview__glyph {
  display: inline-grid;
  place-items: center;
  flex: none;
}

.icon svg { width: 1.375rem; height: 1.375rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.noscript {
  margin: 30vh var(--gutter);
  text-align: center;
  color: var(--label-2);
}

/* ==========================================================================
   Coque : pile d'écrans, voile, feuille modale, barre d'onglets
   ========================================================================== */

.stack {
  position: fixed;
  inset: 0;
  /* Le décor recule vers l'arrière-plan quand une tâche modale s'ouvre. */
  transform-origin: 50% 0;
  overflow: hidden;
  will-change: transform;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--bg);
  overflow: hidden;
}

/* Les onglets se croisent en fondu : aucun élan ne justifierait un glissement. */
.screen[data-mode="tab"] {
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out);
}

.screen[data-mode="tab"][data-active="false"] {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 200ms var(--ease-in), transform 240ms var(--ease-in);
}

/* Un écran poussé est piloté image par image par son ressort : toute
   transition CSS sur transform entrerait en concurrence avec lui. */
.screen[data-mode="push"] { transition: none; will-change: transform; }

.screen[data-active="false"] { visibility: hidden; pointer-events: none; }

.screen__scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  max-width: 32rem;
  margin-inline: auto;
  padding: 0 var(--gutter);
  padding-top: var(--topbar-inset, 4.5rem);
  padding-bottom: calc(var(--tabbar-h) + var(--footer-inset, 0px) + 1.25rem);
}

.screen[data-mode="sheet"] .screen__content {
  padding-bottom: calc(var(--footer-inset, 0px) + 1.25rem + env(safe-area-inset-bottom));
}

/* Assombrissement de l'écran resté dessous : la profondeur se lit sans scrim. */
.screen__dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* --- barre supérieure ----------------------------------------------------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding-top: env(safe-area-inset-top);
  background: var(--glass-heavy);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  border-bottom: 0.0625rem solid transparent;
  box-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0);
  transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out);
}

.topbar[data-scrolled="true"] {
  border-bottom-color: var(--glass-edge);
  box-shadow: var(--shadow-chrome);
}

.topbar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem;
  min-height: 3rem;
  padding: 0.25rem 0.5rem;
}

.topbar__identity {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-self: center;
  overflow: hidden;
}

.topbar__actions {
  display: flex;
  gap: 0.125rem;
  flex: none;
  justify-self: end;
  min-width: 0;
}

.topbar__row > :first-child {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}
.topbar__spacer { width: var(--touch-min); height: var(--touch-min); flex: none; }
.topbar__row > .topbar__spacer:last-child { justify-self: end; }

.topbar__eyebrow {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--label-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__title {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__accessory { padding: 0 var(--gutter) 0.625rem; }

/* ==========================================================================
   Logo
   --------------------------------------------------------------------------
   /kairon-logo.svg est vectoriel et ne contient que le mot-symbole, en 768 x 147.
   Il n'y a donc plus rien à rogner : la proportion intrinsèque suffit, et une
   seule largeur suffit à régler chaque emplacement. L'accroche est du texte,
   juste dessous.
   ========================================================================== */

.logo { display: block; flex: none; }

.logo__mark {
  display: block;
  width: 100%;
  /* Hauteur libre : la proportion vient du viewBox, jamais d'un étirement. */
  height: auto;
  -webkit-user-select: none;
  user-select: none;
}

/* 10 rem = 160 px — assez lisible, assez étroit pour rester centré
   entre le spacer gauche et la loupe, même sur un iPhone. */
.logo--compact {
  display: block;
  width: min(10rem, 100%);
  margin-inline: auto;
}

/* Lockup complet : mot-symbole et accroche empilés. Le bloc occupe toute la
   largeur disponible et c'est `--logo-mark-w` qui dimensionne le seul
   mot-symbole — sinon l'accroche héritait de sa largeur et se brisait en plein
   milieu (« Ridden / Horse »). */
.logo--full {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  width: 100%;
}

.logo--full .logo__mark { width: min(var(--logo-mark-w, 100%), 100%); }

/* Signature : Space Mono italique, jamais T1. */
.logo__tagline {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--kairon-gold);
  text-align: center;
  text-wrap: balance;
}

/* ==========================================================================
   Écran de lancement
   --------------------------------------------------------------------------
   Il ne rallonge rien : il remplit l'intervalle qui existe déjà entre le premier
   rendu du document et le montage du premier écran. Aucun minuteur, aucune
   animation d'entrée — dès que l'application est prête, il s'effface. Le fond
   est identique de part et d'autre, donc la bascule ne se lit pas comme un
   changement d'écran mais comme un contenu qui arrive.
   ========================================================================== */

.launch {
  position: fixed;
  inset: 0;
  z-index: 60;   /* au-dessus de tout, toasts compris */
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.75rem;
  padding: var(--gutter);
  background: var(--bg);
  transition: opacity 260ms var(--ease-out);
}

.launch__logo { --logo-mark-w: 21rem; }

/* Le message de repli est déjà centré par la grille : sa marge de pleine page
   n'a plus lieu d'être ici. */
.launch .noscript { margin: 0; }

/* Signature de bas d'écran, dans le registre discret d'un « à propos ». */
.about {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.25rem var(--gutter) 0;
}

.about .logo--full { --logo-mark-w: 15rem; }

.about__version {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--label-3);
  text-align: center;
}

body[data-ready="true"] .launch {
  opacity: 0;
  /* L'application est déjà interactive dessous : le voile ne doit plus rien
     intercepter pendant qu'il disparaît. */
  pointer-events: none;
}

.icon-button {
  display: grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tint);
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.icon-button svg { width: 1.375rem; height: 1.375rem; display: block; }

/* Retour visuel au pointerdown, jamais au relâchement. */
.icon-button[data-pressed="true"] {
  background: var(--surface-sunken);
  transform: scale(0.92);
}

/* --- barre d'action basse ------------------------------------------------- */

.screen__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--tabbar-h);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem var(--gutter) 0.875rem;
  background: var(--glass-heavy);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  border-top: 0.0625rem solid var(--glass-edge);
  box-shadow: var(--shadow-chrome);
}

.screen[data-mode="sheet"] .screen__footer {
  bottom: 0;
  padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
}

.screen__footer:has(.expand-action) {
  align-items: center;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--bg-scene) 72%, transparent) 42%,
    color-mix(in srgb, var(--bg-scene) 92%, transparent) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 0;
  box-shadow: none;
  pointer-events: none;
}

.screen__footer:has(.expand-action) > * {
  pointer-events: auto;
}

.footer-hint {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--label-2);
}

/* --- voile et feuille ---------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

.scrim[data-open="true"] { pointer-events: auto; }

.sheet-host {
  position: fixed;
  inset: auto 0 0 0;
  /* La feuille laisse voir le décor : la tâche est modale, pas un aller sans retour. */
  height: calc(100dvh - max(2.75rem, env(safe-area-inset-top)));
  z-index: 30;
  pointer-events: none;
}

.sheet-host[data-open="true"] { pointer-events: auto; }

.sheet-host .screen {
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--glass-heavy);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(180%);
  border: 0.0625rem solid var(--glass-edge);
  border-bottom: 0;
  box-shadow: var(--shadow-sheet);
  will-change: transform;
}

.sheet-host .topbar {
  padding-top: 0;
  background: transparent;
  border-bottom: 0.0625rem solid var(--glass-edge);
  /* Poignée et en-tête forment la zone de préhension du glisser-fermer. */
  touch-action: none;
}

.sheet__grabber {
  display: block;
  width: 2.25rem;
  height: 0.3125rem;
  margin: 0.4375rem auto 0;
  border-radius: 999px;
  background: var(--label-3);
}

/* --- barre d'onglets ----------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--material);
  backdrop-filter: blur(1.5rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(180%);
  /* Arête claire : la lumière accroche le haut du matériau. */
  border-top: 0.0625rem solid var(--material-edge);
  box-shadow: var(--shadow-chrome);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  /* 3.5rem = 56 px de haut, au-delà du minimum de 44 px. */
  min-height: 3.5rem;
  padding: 0.375rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--label-2);
  transition: color 160ms var(--ease-out);
}

.tab[aria-selected="true"] { color: var(--tint); }
.tab__icon { transition: transform 160ms var(--ease-out); }
.tab__icon svg { width: 1.5rem; height: 1.5rem; }
.tab[data-pressed="true"] .tab__icon { transform: scale(0.88); }

.tab__label {
  font-size: calc(0.625rem + var(--corps-plus));
  font-weight: 400;
}

/* ==========================================================================
   Typographie de contenu
   ========================================================================== */

.large-title {
  margin: 0.5rem 0 -0.375rem;
  font-size: clamp(1.75rem, 8vw, 2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}

.section-heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.lede {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: calc(0.875rem + var(--corps-plus));
  color: var(--label-2);
}

/* Le décompte en tête d'écran est un résumé, pas un verdict : il dit combien
   de chevaux passent le seuil, et c'est la phrase qui le dit. */
.lede__flag {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.4375rem;
  background: var(--surface-sunken);
  color: var(--label-2);
  font-size: 0.625rem;
  font-weight: 400;
}

.stack-block { display: flex; flex-direction: column; gap: 0.875rem; }

.fine-print {
  margin: 0;
  padding-inline: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--label-3);
}

/* Verre : le flou est sur ::before, l'ombre sur l'hôte — le couple
   backdrop-filter + box-shadow sur le même rectangle arrondi dessinait
   une bande interne. */
.card,
.herd-card,
.group__body,
.card-list {
  position: relative;
  background: transparent;
}

.card::before,
.herd-card::before,
.group__body::before,
.card-list::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  pointer-events: none;
}

.card::after,
.herd-card::after,
.group__body::after,
.card-list::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}

.card > *,
.herd-card > *,
.group__body > *,
.card-list > * {
  position: relative;
  z-index: 1;
}

.empty-state {
  margin: 0;
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: calc(0.9375rem + var(--corps-plus));
  color: var(--label-2);
  background-color: var(--glass);
  background-image: var(--glass-sheen);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
}

.empty-note {
  margin: 0.75rem 0 0;
  font-size: calc(0.875rem + var(--corps-plus));
  color: var(--label-2);
}

/* ==========================================================================
   Cartes
   ========================================================================== */

/* La bordure slate de la charte fait le travail que l'ombre ne peut plus faire
   sur un fond aussi sombre : elle dessine le bord de chaque surface. */
.card {
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 1.125rem;
  transition: box-shadow 300ms var(--ease-out);
}

.card--quiet {
  box-shadow: none;
}

.card--hero { padding-bottom: 1.25rem; }

@media (hover: hover) and (pointer: fine) {
  .card:hover::before,
  .herd-card:hover::before {
    background: var(--glass-hover);
    border-color: var(--glass-edge-hover);
    border-top-color: var(--glass-edge-lit);
    border-left-color: var(--glass-edge-lit);
  }
  .card:hover::after,
  .herd-card:hover::after {
    background: var(--glass-sheen-hover);
  }
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--heading);
}

.card__lede {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--label-2);
}

.card__timestamp {
  font-size: 0.8125rem;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}

.card__footnote {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--label-3);
}

/* ==========================================================================
   Étiquettes d'état
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.6875rem 0.3125rem 0.5625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
  /* Le libellé de bande — « Confort », « Vigilance », « Alerte » — nomme, il
     ne juge pas. La couleur clinique reste sur la pastille de score, la jauge
     et les points de l'éthogramme, juste à côté. */
  background: var(--surface-sunken);
  color: var(--label);
}

.badge[data-tone="info"] { background: var(--tint-soft); color: var(--tint); }

.badge__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--glacier-mid);
  flex: none;
}

.badge[data-tone="info"] .badge__dot { background: var(--tint); }

.pill {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--surface-sunken);
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--label-2);
  white-space: nowrap;
}

.pill--accent { background: var(--tint-soft); color: var(--tint); }

/* L'étiquette d'un marqueur nomme, elle ne juge pas : c'est la pastille de
   l'éthogramme, à côté, qui porte la couleur du verdict. */
.tag {
  display: inline-block;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.4375rem;
  background: var(--surface-sunken);
  color: var(--label-2);
  font-size: 0.625rem;
  font-weight: 400;
  white-space: nowrap;
}

/* L'état du questionnaire se lit à son glyphe — coché ou en attente — et à son
   libellé. Le teinter reviendrait à parler clinique à propos d'un formulaire. */
.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--label-2);
}

.flag__icon svg { width: 0.9375rem; height: 0.9375rem; stroke-width: 2.2; }

/* L'écart d'un bilan à l'autre porte son signe : + et − disent le sens sans
   qu'une couleur ait à le répéter. */
.trend {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 0.1875rem 0.4375rem;
  border-radius: 0.4375rem;
  background: var(--surface-sunken);
  color: var(--label-2);
}

.score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.0625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Premier des trois endroits où le clinique a droit à la couleur. */
.score-chip[data-tone="good"] { background: var(--tone-good-soft); color: var(--tone-good); }
.score-chip[data-tone="watch"] { background: var(--tone-watch-soft); color: var(--tone-watch); }
.score-chip[data-tone="alert"] { background: var(--tone-alert-soft); color: var(--tone-alert-ink); }

.score-chip__value { font-size: 1.125rem; font-weight: 700; }
.score-chip__total { font-size: 0.8125rem; font-weight: 400; opacity: 0.7; }

/* ==========================================================================
   Score et jauges
   ========================================================================== */

.score, .big-score {
  margin: 0.875rem 0 0;
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.score__value, .big-score__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score__value { font-size: clamp(2.5rem, 13vw, 3rem); }
.big-score__value { font-size: clamp(3.25rem, 18vw, 4.25rem); }

.score__total, .big-score__total {
  font-weight: 400;
  color: var(--label-3);
}

.score__total { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
.big-score__total { font-size: clamp(1.75rem, 9vw, 2.25rem); }

.score__caption {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--label-2);
}

.identity__score { margin-top: 1.125rem; }

.meter { margin-top: 1.125rem; }

.meter__track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

/* Bande de confort : 4 marqueurs sur 24. Le trait du seuil clinique reste à 8,
   si bien que l'espace nu entre les deux se lit comme la bande de vigilance —
   la jauge découpe exactement les trois régimes du code couleur. */
.meter__safe {
  position: absolute;
  inset: 0 auto 0 0;
  width: 16.667%;
  background: var(--tone-good-soft);
}

.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: 999px;
  /* Animé via transform, jamais via width : le compositeur suffit. */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Deuxième des trois endroits : la jauge de douleur. */
.meter__fill[data-tone="good"] { background: var(--tone-good); }
.meter__fill[data-tone="watch"] { background: var(--tone-watch); }
.meter__fill[data-tone="alert"] { background: var(--tone-alert); }

.meter__threshold {
  position: absolute;
  top: -0.125rem;
  bottom: -0.125rem;
  left: 33.333%;
  width: 0.125rem;
  border-radius: 999px;
  background: var(--label-3);
}

.meter__legend {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.625rem;
  color: var(--label-2);
}

.meter__threshold-label { color: var(--label-3); }

/* Le verdict est une phrase, et une phrase se lit : elle reste en bleu clair
   sur un creux neutre. La bande clinique est déjà nommée par la pastille juste
   au-dessus et chiffrée par la jauge juste avant — la répéter en aplat de
   couleur sur quatre lignes noierait l'un et l'autre. */
.verdict {
  margin: 1rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--glacier-light) 8%, transparent);
  border: 0.0625rem solid var(--glass-edge);
  color: var(--label);
  font-size: 0.875rem;
  line-height: 1.45;
}

.progress { margin-top: 0.875rem; }

.progress__track {
  position: relative;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

/* Avancement d'un questionnaire ou d'un quota : de la donnée, pas un verdict
   clinique — donc le bleu des données, quel que soit le taux. */
.progress__fill { background: var(--glacier-mid); }

/* ==========================================================================
   Monogrammes
   ========================================================================== */

/* Un seul traitement de marque pour tous les monogrammes. Ils étaient teintés
   selon l'état clinique, ce qui répétait exactement la pastille de score :
   même information deux fois, et une colonne d'aplats saturés qui écrasait la
   lecture. La couleur ne signifie plus qu'une chose — le verdict Dyson — et
   ce sont les initiales qui distinguent les chevaux. */
.monogram {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 30%;
  font-weight: 400;
  background-color: var(--glass-chip);
  background-image: var(--glass-sheen);
  backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  color: var(--heading);
}

.monogram[data-size="sm"] { width: 2rem; height: 2rem; font-size: 0.6875rem; }
.monogram[data-size="md"] { width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
.monogram[data-size="lg"] { width: 3.5rem; height: 3.5rem; font-size: 1.125rem; }

/* ==========================================================================
   Coverflow — profils de chevaux (immersif)
   ========================================================================== */

.screen[data-route="horses"] {
  background: var(--bg);
}

.screen[data-route="horses"] .screen__content {
  gap: 0;
  min-height: 100%;
  padding-inline: 0;
  padding-top: 0;
  padding-bottom: var(--tabbar-h);
  transition: padding-top 340ms var(--ease-out);
}

.screen[data-route="horses"] .topbar {
  background: color-mix(in srgb, #021119 72%, transparent);
  box-shadow: none;
  transition: transform 340ms var(--ease-out), opacity 280ms var(--ease-out);
}

.screen[data-route="horses"][data-chrome="hidden"] .topbar {
  transform: translateY(calc(-100% - 0.5rem));
  opacity: 0;
  pointer-events: none;
}

.coverflow {
  --coverflow-bg: #021119;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - var(--tabbar-h));
  margin: 0;
  padding: calc(env(safe-area-inset-top) + 2.75rem) 0 1.25rem;
  background: var(--coverflow-bg);
  color: var(--glacier-light);
  border: 0;
  transition: padding-top 340ms var(--ease-out);
}

.screen[data-route="horses"][data-chrome="hidden"] .coverflow {
  padding-top: env(safe-area-inset-top);
}

.coverflow__rack { min-height: 22rem; }

.coverflow__frame {
  cursor: grab;
  overflow: hidden;
  padding-block: 1.25rem;
  outline: none;
  touch-action: none;
}

.coverflow__frame:active { cursor: grabbing; }

.coverflow__stage {
  position: relative;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
}

.coverflow .horse-card {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: var(--cf-card);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  grid-template: none;
}

.coverflow__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1.35rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--coverflow-bg) 55%, #08343b);
  box-shadow: 0 1.5rem 2.75rem rgba(0, 0, 0, 0.5);
}

.coverflow .horse-card[data-active="true"] .coverflow__photo {
  box-shadow: 0 1.5rem 2.75rem rgba(0, 0, 0, 0.55),
              0 0 0 0.0625rem color-mix(in srgb, var(--kairon-gold) 40%, transparent);
}

.coverflow__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coverflow__seal {
  position: absolute;
  inset: 14%;
  background-color: var(--seal-tint, #f5bb48);
  -webkit-mask-image: url('/Sceau_gold.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-source-type: luminance;
  mask-image: url('/Sceau_gold.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-mode: luminance;
}

.coverflow__photo[data-tone="good"] { --seal-tint: var(--tone-good); }
.coverflow__photo[data-tone="watch"] { --seal-tint: #f5bb48; }
.coverflow__photo[data-tone="alert"] { --seal-tint: #c2410c; }
.coverflow__photo[data-tone="none"] { --seal-tint: var(--glacier-mid); }

.coverflow .horse-card__name {
  margin: 0;
  max-width: 100%;
  padding-inline: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--glacier-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coverflow .horse-card__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin: 0;
  max-width: 100%;
  padding-inline: 0.35rem;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: color-mix(in srgb, var(--glacier-light) 62%, transparent);
  white-space: nowrap;
  overflow: hidden;
}

.coverflow__owner {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coverflow__date,
.coverflow .score-chip,
.coverflow__sep {
  flex: none;
}

.coverflow__sep { opacity: 0.45; }

.coverflow__date,
.coverflow .score-chip {
  font-family: var(--font-data);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.coverflow .score-chip,
.coverflow .score-chip[data-tone] {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.coverflow .score-chip__value { font-size: 0.6875rem; font-weight: 700; }
.coverflow .score-chip__total { font-size: 0.6875rem; font-weight: 400; opacity: 0.7; }

.coverflow .horse-card__nodata { color: inherit; font-size: 0.6875rem; }

.coverflow__search-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 0.45rem);
  right: 0.7rem;
  z-index: 6;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, #021119 42%, transparent);
  color: color-mix(in srgb, var(--glacier-light) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.coverflow__search-toggle svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.coverflow__search-dock {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 0.4rem);
  left: 0.75rem;
  right: 0.75rem;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, #021119 82%, #08343b);
  border: 0.0625rem solid color-mix(in srgb, var(--glacier-light) 16%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.coverflow__search-dock[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.coverflow__search-dock .search__input {
  color: var(--glacier-light);
}

@media (prefers-reduced-motion: reduce) {
  .coverflow .horse-card { will-change: auto; }
  .screen[data-route="horses"] .topbar,
  .screen[data-route="horses"] .coverflow,
  .coverflow__search-dock { transition: none; }
}

/* ==========================================================================
   Liste de chevaux
   ========================================================================== */

.card-list {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Le nom, la race et l'état du questionnaire occupent chacun leur rangée, sur
   toute la largeur : rien n'est tronqué pour faire de la place à la pastille. */
.card-list .horse-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "mono name  score chevron"
    "mono meta  meta  chevron"
    "mono flag  date  chevron";
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  width: 100%;
  min-height: 5rem;
  padding: 0.875rem 0.75rem 0.875rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background-color 120ms var(--ease-out);
}

.card-list .horse-card[data-pressed="true"] { background: var(--surface-sunken); }

.card-list .horse-card > .monogram { grid-area: mono; align-self: center; }
.card-list .horse-card > .row__chevron { grid-area: chevron; align-self: center; }
.card-list .horse-card__score { grid-area: score; justify-self: end; }
.card-list .horse-card__date { grid-area: date; justify-self: end; }
.card-list .horse-card > .flag { grid-area: flag; }

.horse-card__name {
  grid-area: name;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horse-card__meta {
  grid-area: meta;
  min-width: 0;
  font-size: calc(0.875rem + var(--corps-plus));
  font-weight: 400;
  line-height: 1.35;
  color: var(--label-2);
}

.horse-card__date { font-size: 0.875rem; font-weight: 400; color: var(--label-3); white-space: nowrap; }
.horse-card__nodata { font-size: calc(0.875rem + var(--corps-plus)); font-weight: 400; color: var(--label-3); }

/* ==========================================================================
   Groupes de rangées
   ========================================================================== */

.group { display: flex; flex-direction: column; }

.group__title {
  margin: 0 0 0.5rem;
  padding-inline: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--heading);
}

.group__title--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.group__title-lead { display: inline-flex; align-items: center; gap: 0.4375rem; }
.group__title-icon svg { width: 1rem; height: 1rem; }

.group__title-count {
  font-variant-numeric: tabular-nums;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background: var(--surface-sunken);
  color: var(--label-2);
}

.group__body {
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.group__footnote {
  margin: 0.5rem 0.25rem 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--label-3);
}

/* Séparateurs légèrement rentrés, comme des filets entre rangées. */
.group__body > * + *,
.card-list > * + * { position: relative; }

.group__body > * + *::after,
.card-list > * + *::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  height: 0.0625rem;
  background: var(--separator);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  width: 100%;
  /* 3.25rem = 52 px : confortable au pouce sur toute la ligne. */
  min-height: var(--touch-min);
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  transition: background-color 120ms var(--ease-out);
}

.row[data-pressed="true"] { background: var(--surface-sunken); }

.row__icon {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  flex: none;
  border-radius: 0.6875rem;
  background: var(--surface-sunken);
  color: var(--label-2);
}

/* Une rangée de liste reste une rangée de liste : le score qu'elle porte est
   déjà chiffré et coloré par sa pastille, à droite. */
.row__icon svg { width: 1.1875rem; height: 1.1875rem; }

.row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }

.row__label {
  font-size: calc(1rem + var(--corps-plus));
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__detail {
  font-size: calc(0.875rem + var(--corps-plus));
  font-weight: 400;
  line-height: 1.35;
  color: var(--label-2);
}

.row__value { flex: none; font-size: 0.875rem; color: var(--label-2); }
.row__chevron { color: var(--label-3); }
.row__chevron svg { width: 1.375rem; height: 1.375rem; stroke-width: 2; }

/* ==========================================================================
   Courbe d'évolution
   ========================================================================== */

.chart { margin-top: 1rem; }
.chart__plot { position: relative; overflow: visible; }

.chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* preserveAspectRatio="none" étire la géométrie : les traits doivent garder
   leur épaisseur réelle. Les points sont en HTML pour rester des cercles. */
.chart__line, .chart__threshold { vector-effect: non-scaling-stroke; }

/* La courbe reste dans le bleu de charte : l'ambre est réservé à l'action, et
   les points portent déjà la couleur clinique. */
.chart__line { stroke: var(--chart-line); stroke-width: 1.25; fill: none; }

.chart__area {
  fill: var(--chart-area);
  stroke: none;
}

.chart__threshold {
  stroke: var(--label-3);
  stroke-width: 0.75;
  stroke-dasharray: 2.5 3.5;
}

.chart__mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: translate(-50%, calc(-100% + 0.3125rem));
  pointer-events: none;
}

.chart__dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.chart__dot[data-tone="good"],
.chart__mark[data-tone="good"] .chart__dot { background: var(--tone-good); }
.chart__dot[data-tone="watch"],
.chart__mark[data-tone="watch"] .chart__dot { background: var(--tone-watch); }
.chart__dot[data-tone="alert"],
.chart__mark[data-tone="alert"] .chart__dot { background: var(--tone-alert); }

.chart__value {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  text-shadow: 0 0 0.4rem var(--bg-scene), 0 0 0.2rem var(--bg-scene);
}

.chart__mark[data-tone="good"] .chart__value { color: var(--tone-good); }
.chart__mark[data-tone="watch"] .chart__value { color: var(--tone-watch); }
.chart__mark[data-tone="alert"] .chart__value { color: var(--tone-alert); }

.chart__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4375rem;
  padding-inline: 7.333%;
}

.chart__label {
  font-size: 0.6875rem;
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Contrôle segmenté
   ========================================================================== */

/* Rail creusé, curseur en relief : sur fond sombre l'inverse se lirait comme
   une option enfoncée en permanence. */
.segmented {
  position: relative;
  display: flex;
  padding: 0.125rem;
  border-radius: 0.625rem;
  background: var(--track);
  border: 0.0625rem solid var(--separator);
}

.segmented__indicator {
  position: absolute;
  top: 0.125rem;
  bottom: 0.125rem;
  left: 0.125rem;
  border-radius: 0.5rem;
  background: var(--kairon-slate);
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.35);
  will-change: transform;
}

.segmented__option {
  position: relative;
  z-index: 1;
  flex: 1;
  /* 2.25rem + les 4 px de rembourrage du rail : la cible reste large. */
  min-height: 2.25rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--label-2);
  transition: color 160ms var(--ease-out), transform 140ms var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.segmented__option[aria-selected="true"] { color: var(--label); }
.segmented__option[data-pressed="true"] { transform: scale(0.96); }

/* ==========================================================================
   Boutons d'action
   ========================================================================== */

.action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.8125rem 1.125rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--tint);
  /* Encre sombre sur l'or de charte : 9,6:1, là où du blanc tomberait à 2:1. */
  color: var(--tint-ink);
  /* Un cran sous l'ancien corps : en capitales, T2 occupe plus de largeur à
     taille égale, et le libellé de l'analyse en cours est long. */
  font-size: calc(0.875rem + var(--corps-plus));
  font-weight: 400;
  overflow: hidden;
  transition: transform 120ms var(--ease-out), background-color 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.action[data-pressed="true"] { transform: scale(0.97); }

/* Indisponible : un aplat neutre, pas de l'ambre fané. Un ambre à 42 % vire à
   l'olive et son encre sombre devient illisible — le bouton aurait l'air cassé
   plutôt qu'en attente. */
.action[aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--label-3);
}

/* En cours : le rail sombre laisse la barre de progression ambre porter le
   mouvement, et le libellé reste lisible pendant tout le balayage. */
.action[data-busy="true"] {
  background: var(--track);
  color: var(--label);
}

.action__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  text-align: center;
}

.action__icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.1; }
.action__icon .video-camera-icon {
  display: block;
  line-height: 0;
}
.action__icon .video-camera-icon svg {
  display: block;
  stroke-width: 1.5;
}
.action__icon .video-camera-icon__rec { fill: #ef4444; stroke: none; }

.action__progress {
  position: absolute;
  inset: 0;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.action--quiet {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  background: transparent;
  color: var(--tint);
  font-size: 0.8125rem;
  font-weight: 400;
}

.action--quiet[data-pressed="true"] { background: var(--surface-sunken); transform: scale(0.985); }
.action--quiet .action__icon svg { width: 1.0625rem; height: 1.0625rem; }

/* CTA flottant : carré au repos, s’étire à la largeur des cartes. */
.expand-action-slot {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: calc(32rem - 2 * var(--gutter));
}

.expand-action {
  --expand-ink: #0b1519;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  min-height: var(--touch-min);
  padding-inline: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--kairon-gold) 85%, transparent);
  color: var(--expand-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  backdrop-filter: blur(1.5rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    width 300ms var(--ease-out),
    padding-inline 300ms var(--ease-out),
    gap 300ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.expand-action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.08) 36%,
    transparent 58%
  );
  pointer-events: none;
}

.expand-action[data-pressed="true"] {
  transform: scale(0.97);
}

.expand-action[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.expand-action[data-busy="true"] {
  opacity: 1;
}

.expand-action__progress {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--kairon-gold) 100%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.expand-action__icon,
.expand-action__label {
  position: relative;
  z-index: 1;
}

.expand-action__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.expand-action__icon svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.expand-action__plus {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}

.expand-action__label {
  flex: none;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  text-align: center;
  transition:
    max-width 300ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.expand-action:is([data-expanded="true"], [data-pressed="true"], [data-busy="true"], :focus-visible) {
  width: 100%;
  gap: 0.5rem;
  padding-inline: 1.125rem;
}

.expand-action:is([data-expanded="true"], [data-pressed="true"], [data-busy="true"], :focus-visible) .expand-action__label {
  max-width: 24rem;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .expand-action:hover {
    width: 100%;
    gap: 0.5rem;
    padding-inline: 1.125rem;
  }

  .expand-action:hover .expand-action__label {
    max-width: 24rem;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expand-action,
  .expand-action__label {
    transition: opacity 160ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .expand-action {
    background: var(--kairon-gold);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .expand-action::after { display: none; }
}

.screen__footer:has(.expand-action) .footer-hint {
  width: 100%;
  max-width: calc(32rem - 2 * var(--gutter));
}

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Cible de 44 px de haut même pour un libellé court. */
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--tint);
  font-size: calc(0.8125rem + var(--corps-plus));
  font-weight: 400;
  transition: opacity 140ms var(--ease-out);
}

.link-button[data-pressed="true"] { opacity: 0.55; }
.link-button__icon svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.2; }

/* ==========================================================================
   Recherche
   ========================================================================== */

.search {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: var(--touch-min);
  padding: 0 0.625rem;
  border-radius: 0.625rem;
  background-color: var(--glass);
  background-image: var(--glass-sheen);
  backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  color: var(--label-2);
}

.search__icon svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.1; }

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem; /* < 1rem déclencherait un zoom au focus sur iOS */
  color: var(--label);
  padding: 0.4375rem 0;
}

.search__input::placeholder { color: var(--label-3); }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ==========================================================================
   Fiche cheval
   ========================================================================== */

.identity { display: flex; align-items: center; gap: 0.875rem; }
.identity__body { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }

.identity__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.identity__meta {
  margin: 0;
  font-size: calc(0.875rem + var(--corps-plus));
  font-weight: 400;
  line-height: 1.35;
  color: var(--label-2);
}

.identity__meta--quiet { color: var(--label-3); }

.section-tally {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.section-tally__item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: calc(0.8125rem + var(--corps-plus));
  color: var(--label-2);
}

.section-tally__count { font-variant-numeric: tabular-nums; color: var(--label-3); }

/* ==========================================================================
   Check-up : rappel de cadrage, dictée, vidéo
   ========================================================================== */

.mini-steps {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  counter-reset: step;
}

.mini-steps__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: calc(0.8125rem + var(--corps-plus));
  counter-increment: step;
}

.mini-steps__label { color: var(--label); }
.mini-steps__label::before { content: counter(step) ". "; color: var(--label-3); }
.mini-steps__time { flex: none; color: var(--label-2); font-variant-numeric: tabular-nums; }

.assistant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.125rem;
}

.assistant__control { display: flex; align-items: center; gap: 1rem; }

.mic {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint);
  color: var(--tint-ink);
  box-shadow: 0 0.5rem 1.25rem var(--tint-soft);
  transition: transform 140ms var(--ease-out), background-color 200ms var(--ease-out);
}

.mic__icon svg { width: 1.75rem; height: 1.75rem; stroke-width: 1.9; }
.mic[data-pressed="true"] { transform: scale(0.94); }

/* À l'écoute, le bouton s'inverse : l'or de l'action laisse place au bleu
   glacier, encre sombre. Le rouge clinique serait ici un contresens — rien
   n'est détecté, on enregistre — et l'inversion se voit de loin, seule dans
   une interface où aucune autre surface ne s'éclaire. */
.mic[data-listening="true"] {
  background: var(--glacier-mid);
  color: var(--bg-dark);
  box-shadow: 0 0.5rem 1.5rem rgba(184, 229, 244, 0.18);
}

/* Au repos, la forme d'onde s'effacerait mal en cinq traits inertes : elle ne
   se montre qu'à l'écoute. */
.waveform {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.75rem;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}

.waveform[data-active="true"] { opacity: 1; }

.waveform__bar {
  width: 0.25rem;
  height: 100%;
  border-radius: 999px;
  background: var(--label-3);
  transform: scaleY(0.22);
  transform-origin: center;
  will-change: transform;
}

/* Le niveau sonore est un signal, pas une action : il reste dans le bleu de
   charte, et l'orange du bouton d'enregistrement garde son exclusivité. */
.waveform[data-active="true"] .waveform__bar { background: var(--chart-line); }

.assistant__status {
  margin: 0;
  text-align: center;
  font-size: calc(0.8125rem + var(--corps-plus));
  line-height: 1.4;
  color: var(--label-2);
  min-height: 2.25rem;
}

.assistant__hint {
  margin: 0 0 0.4375rem;
  font-size: calc(0.625rem + var(--corps-plus));
  font-weight: 400;
  color: var(--label-3);
}

.transcript {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  font: inherit;
  font-size: calc(0.9375rem + var(--corps-plus));
  line-height: 1.5;
  color: var(--label);
  resize: vertical;
}

.transcript::placeholder { color: var(--label-3); }
.transcript:focus { outline: none; border-color: var(--tint); }

.flag-cloud { margin-top: 0.875rem; }
.flag-cloud__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

.tiles { display: flex; gap: 0.625rem; margin-top: 0.875rem; }

.tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
  min-height: 5rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  text-align: left;
  transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.tile[data-pressed="true"] { background: var(--surface-sunken); transform: scale(0.975); }
.tile__icon { color: var(--tint); margin-bottom: 0.125rem; }
.tile__icon svg { width: 1.5rem; height: 1.5rem; }
.tile__label { font-size: calc(0.75rem + var(--corps-plus)); font-weight: 400; }
.tile__detail { font-size: calc(0.6875rem + var(--corps-plus)); color: var(--label-2); }

.video-preview {
  margin-top: 0.875rem;
  padding: 0.75rem;
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  border: 0.0625rem solid var(--separator);
}

.video-preview__player {
  display: block;
  width: 100%;
  border-radius: 0.625rem;
  background: #000;
}

.video-preview__placeholder {
  display: grid;
  place-items: center;
  height: 7rem;
  border-radius: 0.625rem;
  background: var(--surface-sunken);
  color: var(--label-3);
}

.video-preview__glyph svg { width: 2rem; height: 2rem; }

.video-preview__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.video-preview__name {
  font-size: 0.8125rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-preview__duration { flex: none; font-size: 0.75rem; color: var(--label-2); font-variant-numeric: tabular-nums; }

.checklist {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--label-2);
}

/* Contrôle de cadrage, pas de diagnostic : le glyphe dit l'état — coche pour
   ce qui est acquis, horloge pour ce qui reste à reprendre — et le libellé
   dit quoi faire. */
.checklist__icon svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2.2; margin-top: 0.0625rem; }
.checklist__item[data-tone="good"] .checklist__icon { color: var(--label-2); }
.checklist__item[data-tone="watch"] .checklist__icon,
.checklist__item[data-tone="alert"] .checklist__icon { color: var(--label); }

/* ==========================================================================
   Rapport : matrice des marqueurs
   ========================================================================== */

.matrix-groups { display: flex; flex-direction: column; gap: 1.125rem; }

.marker {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem;
  padding: 0.8125rem 1rem;
}

.marker__state {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--label-3);
}

/* Point d'analyse de l'éthogramme : un marqueur relevé porte la couleur, un
   marqueur absent reste en creux. */
.marker__glyph svg { width: 1rem; height: 1rem; stroke-width: 2.2; }
.marker[data-state="on"] .marker__state { background: var(--tone-alert-soft); color: var(--tone-alert); }
.marker[data-state="off"] { opacity: 0.62; }

.marker__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }

.marker__label {
  font-size: calc(0.9375rem + var(--corps-plus));
  font-weight: 500;
  line-height: 1.3;
}

.marker__definition { font-size: calc(0.75rem + var(--corps-plus)); line-height: 1.4; color: var(--label-2); }
.marker .tag { flex: none; margin-top: 0.125rem; }

.dot-legend { display: flex; gap: 0.75rem; font-size: 0.625rem; color: var(--label-2); }
.dot-legend__item { display: inline-flex; align-items: center; gap: 0.3125rem; }

.dot-matrix {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dot-matrix__row { display: flex; align-items: center; gap: 0.625rem; }

.dot-matrix__label {
  flex: none;
  width: 5.25rem;
  font-size: 0.75rem;
  color: var(--label-2);
}

.dot-matrix__dots { display: flex; flex-wrap: wrap; gap: 0.3125rem; }

.dot {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-radius: 50%;
}

.dot[data-state="on"] { background: var(--tone-alert); }
.dot[data-state="off"] { background: var(--surface-sunken); }

.note-body {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--label);
}

/* ==========================================================================
   Guide de tournage
   ========================================================================== */

.guide-lede {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--label-2);
}

.guide-stats {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 0.0625rem solid var(--separator);
}

.guide-stats__item, .stat-row__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.guide-stats__value, .stat-row__value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.guide-stats__label, .stat-row__label {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--label-2);
}

.stat-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 0.0625rem solid var(--separator);
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.timeline__item {
  position: relative;
  display: flex;
  gap: 0.8125rem;
  padding: 0.9375rem 1rem;
}

.timeline__item + .timeline__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 0;
  height: 0.0625rem;
  background: var(--separator);
}

.timeline__marker {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  flex: none;
  margin-top: 0.0625rem;
  border-radius: 50%;
  background: var(--tint-soft);
  color: var(--tint);
}

.timeline__index { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.timeline__body { flex: 1; min-width: 0; }

.timeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.timeline__label { font-size: 0.9375rem; font-weight: 500; }
.timeline__time { flex: none; font-size: 0.75rem; color: var(--label-2); font-variant-numeric: tabular-nums; }

.timeline__detail {
  margin: 0.1875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--label-2);
}

.timeline__cue {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.6875rem;
  color: var(--label-3);
  font-variant-numeric: tabular-nums;
}

.timeline__bar {
  display: block;
  height: 0.1875rem;
  margin-top: 0.4375rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  overflow: hidden;
}

.timeline__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  /* Part de la séance : de la donnée, pas une action — donc pas d'ambre. */
  background: var(--chart-line);
  transform-origin: left center;
}

/* ==========================================================================
   Compte
   ========================================================================== */

.quota-list { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.125rem; }

.quota__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.quota__label { font-size: calc(0.75rem + var(--corps-plus)); font-weight: 400; }
.quota__value { font-size: 0.75rem; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Notification éphémère
   ========================================================================== */

.toast-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + 0.75rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 26rem;
  padding: 0.6875rem 0.9375rem;
  border-radius: 999px;
  background: var(--material);
  backdrop-filter: blur(1.5rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(180%);
  border: 0.0625rem solid var(--material-edge);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);
  font-size: 0.875rem;
  /* Sur matériau translucide : un peu plus de graisse et de tracking pour
     tenir la lisibilité au-dessus d'un fond changeant. */
  font-weight: 500;
  letter-spacing: 0.004em;
  /* La matière arrive : flou et échelle ensemble, pas un simple fondu. */
  opacity: 0;
  transform: translateY(0.75rem) scale(0.96);
  filter: blur(0.5rem);
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out), filter 260ms var(--ease-out);
}

.toast[data-shown="true"] { opacity: 1; transform: none; filter: blur(0); }
/* Une notification est un accusé de réception, jamais un résultat clinique :
   son glyphe prend l'or de l'interface, quel qu'en soit le motif. */
.toast__icon svg { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
.toast__icon { color: var(--tint); }

/* ==========================================================================
   Apparition en cascade
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(0.625rem) scale(0.985);
}

[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ==========================================================================
   Écrans plus larges : la colonne reste lisible, elle ne s'étale pas
   ========================================================================== */

@media (min-width: 34rem) {
  :root { --gutter: 1.5rem; }
  .tiles { gap: 0.875rem; }
}

/* ==========================================================================
   Préférences d'accessibilité
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Le retour ne disparaît pas, il change de registre : teinte plutôt que
     déplacement, fondu plutôt que glissement. */
  [data-reveal] { transform: none; }
  [data-reveal][data-revealed="true"] { transition: opacity 200ms ease; }

  .screen[data-mode="tab"],
  .screen[data-mode="tab"][data-active="false"] { transform: none; transition: opacity 160ms ease; }

  .action[data-pressed="true"],
  .icon-button[data-pressed="true"],
  .tile[data-pressed="true"],
  .mic[data-pressed="true"],
  .segmented__option[data-pressed="true"],
  .tab[data-pressed="true"] .tab__icon { transform: none; }

  .action[data-pressed="true"] { background: color-mix(in srgb, var(--tint) 78%, #000); }
  .icon-button[data-pressed="true"] { background: var(--surface-sunken); }

  .toast { transform: none; filter: none; }
  .toast[data-shown="true"] { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 200ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .tabbar, .screen__footer, .toast,
  .card, .herd-card, .group__body, .empty-state, .search, .sort-chip,
  .horse-avatar, .monogram, .card-list, .sheet-host .screen,
  .card::before, .herd-card::before, .group__body::before, .card-list::before {
    background: var(--glass-pigment);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card::after, .herd-card::after, .group__body::after, .card-list::after {
    background: none;
  }
  .topbar, .screen__footer, .sheet-host .screen {
    background: var(--glass-heavy-pigment);
  }
  .tabbar, .screen__footer { border-top-color: var(--glass-edge); }
  .scrim { background: rgba(0, 0, 0, 0.62); }
}

@media (prefers-contrast: more) {
  /* Sur fond sombre, un contraste renforcé pousse le texte vers le bleu clair
     de charte et éclaircit les filets — l'inverse exact de ce que demanderait
     un thème clair. */
  :root {
    --label-2: rgba(205, 235, 245, 0.92);
    --label-3: rgba(205, 235, 245, 0.78);
    --separator: #2f6f7e;
    /* Seule l'encre monte : l'aplat garde la teinte clinique exacte. */
    --tone-alert-ink: #f2907f;
  }
  .badge, .tag, .pill, .score-chip { outline: 0.0625rem solid currentColor; }
  .card--quiet { border: 0.0625rem solid var(--separator); }
  .marker[data-state="off"] { opacity: 1; }
  .topbar, .tabbar, .screen__footer,
  .card, .herd-card, .group__body, .sheet-host .screen, .card-list,
  .card::before, .herd-card::before, .group__body::before, .card-list::before {
    background: var(--glass-heavy-pigment);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

:focus-visible {
  outline: 0.1875rem solid var(--tint);
  outline-offset: 0.125rem;
  border-radius: 0.5rem;
}

/* ==========================================================================
   Overlay d'analyse IA
   --------------------------------------------------------------------------
   Portail plein écran, hors de .stack : le champ de grains d'or (21st.dev)
   orbite autour du sceau, l'anneau mesure l'avance, le halo pulse.
   ========================================================================== */

.ai-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--bg-dark);
  color: var(--heading);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out), visibility 240ms var(--ease-out);
}

.ai-overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ai-overlay__space {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: var(--bg-dark);
}

.ai-overlay__core {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 1;
  width: 13.75rem;
  height: 13.75rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ai-overlay__core > * {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
}

.ai-overlay__halo {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 187, 72, 0.32) 0%, rgba(245, 187, 72, 0.08) 42%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  animation: ai-pulse 2.2s ease-in-out infinite;
}

.ai-overlay__ring {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  fill: none;
  stroke: none;
}

.ai-overlay__track {
  stroke: var(--kairon-slate);
  stroke-width: 1.5;
  opacity: 0.45;
  fill: none;
}

.ai-overlay__bar {
  stroke: var(--kairon-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(245, 187, 72, 0.55));
  transition: stroke-dashoffset 120ms linear;
}

.ai-overlay[data-mode="spin"] .ai-overlay__ring {
  animation: ai-ring-spin 1.8s linear infinite;
}

.ai-overlay[data-mode="spin"] .ai-overlay__bar {
  transition: none;
}

.ai-overlay__seal {
  width: 58%;
  height: 58%;
  object-fit: contain;
  pointer-events: none;
  animation: ai-seal-pulse 2.4s ease-in-out infinite;
}

.ai-overlay__scan { display: none; }

.ai-overlay__status {
  position: absolute;
  left: 50%;
  top: calc(46% + 7.85rem);
  z-index: 1;
  margin: 0;
  max-width: 22rem;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--heading);
}

.ai-overlay__steps {
  position: absolute;
  left: 50%;
  top: calc(46% + 10.25rem);
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transform: translateX(-50%);
  text-align: center;
}

.ai-overlay__steps li {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--stone);
  opacity: 0.45;
  transition: color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.ai-overlay__steps li[data-done="true"] {
  opacity: 0.7;
}

.ai-overlay__steps li[data-active="true"] {
  color: var(--kairon-gold);
  opacity: 1;
}

@keyframes ai-ring-spin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

@keyframes ai-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ai-seal-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0.5rem rgba(245, 187, 72, 0.2)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 0 1rem rgba(245, 187, 72, 0.45)); }
}

@keyframes ai-scan {
  0% { top: 20%; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { top: 66%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-overlay { transition: none; }
  .ai-overlay[data-mode="spin"] .ai-overlay__ring { animation: none; }
  .ai-overlay__bar { transition: none; }
  .ai-overlay__halo,
  .ai-overlay__seal,
  .ai-overlay__scan { animation: none; }
}

/* ==========================================================================
   Accueil parallax — sandwich logo / cheval
   ========================================================================== */

.parallax-hero {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #021119;
  color: var(--glacier-light);
  -webkit-overflow-scrolling: touch;
}

.parallax-hero__runway {
  position: relative;
  height: 220vh;
}

.parallax-hero__scene {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.parallax-hero__logo,
.parallax-hero__horse {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  will-change: transform;
}

.parallax-hero__logo {
  z-index: 10;
  align-items: center;
  padding: 0 1.5rem 6vh;
}

.parallax-hero__logo img {
  width: min(82vw, 20rem);
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 0 1.75rem rgba(205, 235, 245, 0.16));
  mix-blend-mode: screen;
  pointer-events: none;
}

.parallax-hero__horse {
  z-index: 20;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.parallax-hero__horse img {
  display: block;
  height: 62dvh;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: screen;
}

.parallax-hero__hint {
  position: absolute;
  z-index: 21;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--glacier-light) 55%, transparent);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .parallax-hero__logo { padding-bottom: 22vh; }
  .parallax-hero__logo img { width: min(48vw, 28rem); }
  .parallax-hero__horse img { height: 58dvh; }
}

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

/* ==========================================================================
   Four-screen architecture — herd, profile grid, heatmap, labelling, player
   ========================================================================== */

.tabbar { display: none; }

.text-back {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  min-height: var(--touch-min);
  min-width: 0;
  max-width: 100%;
  padding: 0 0.375rem 0 0.125rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--tint);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.text-back svg { width: 1.25rem; height: 1.25rem; flex: none; }
.text-back span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-back[data-pressed="true"] { background: var(--surface-sunken); transform: scale(0.97); }

.sort-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.125rem;
  margin: -0.25rem 0 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.sort-chip {
  flex: none;
  min-height: 1.875rem;
  padding: 0.1875rem 0.75rem;
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  border-radius: 999px;
  background-color: var(--glass);
  background-image: var(--glass-sheen);
  backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  color: var(--label-2);
  font-size: calc(0.75rem + var(--corps-plus));
  white-space: nowrap;
}

.sort-chip[data-active="true"],
.sort-chip[aria-pressed="true"] {
  background-color: var(--tint-soft);
  background-image: none;
  border-color: var(--tint);
  color: var(--tint);
}

.sort-chip[data-pressed="true"] { transform: scale(0.97); }

.herd {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.herd-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  width: 100%;
  min-height: 0;
  padding: 0.55rem 0.9rem;
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

a.herd-card:active {
  transform: scale(0.985);
}

.herd-card[data-pressed="true"]::before {
  background: var(--glass-hover);
  border-color: var(--glass-edge-hover);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
}

.herd-card[data-pressed="true"]::after {
  background: var(--glass-sheen-hover);
}

.herd-card__body { min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.herd-card__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1875rem;
}
.herd-card .horse-card__name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.herd-card .horse-card__meta {
  display: block;
  overflow: visible;
}
.herd-card .score-chip { padding: 0.25rem 0.4375rem; }
.herd-card .score-chip__value { font-size: 0.9375rem; }
.herd-card .score-chip__total { font-size: 0.6875rem; }

.horse-avatar {
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 1.125rem;
  background-color: var(--glass-chip);
  background-image: var(--glass-sheen);
  backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-chip)) saturate(var(--glass-saturate));
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  box-shadow: none;
  color: var(--heading);
}

.horse-avatar .monogram {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.horse-avatar--md { width: 3.5rem; height: 3.5rem; }
.horse-avatar--lg { width: 4.25rem; height: 4.25rem; }
.horse-avatar--xl { width: 4.75rem; height: 4.75rem; }
.horse-avatar--upload { cursor: pointer; }
.horse-avatar__img { width: 100%; height: 100%; object-fit: cover; }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 0.75rem;
  margin: 0.875rem 0 0;
}

.info-cell { margin: 0; min-width: 0; }
.info-cell--wide { grid-column: 1 / -1; }
.info-cell dt {
  font-family: var(--font-t2);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--label-3);
  margin: 0 0 0.1875rem;
}
.info-cell dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--heading);
}

.info-cell__input {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 0.0625rem solid transparent;
  background: transparent;
  font: inherit;
  color: inherit;
  border-radius: 0;
}

.info-cell--metric dd { gap: 0.25rem; }
.info-cell--metric .info-cell__input {
  flex: none;
  width: auto;
  min-width: 0;
  field-sizing: content;
}

.info-cell__input:focus {
  outline: none;
  border-bottom-color: var(--glass-edge-lit);
}

.info-cell__input::placeholder { color: var(--label-3); }
.info-cell__suffix {
  flex: none;
  font-size: 0.8125rem;
  color: var(--label-3);
}

.info-cell--stack dd { display: block; }

.info-cell__area {
  display: block;
  width: 100%;
  min-height: 7.5rem;
  max-height: 18rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: inherit;
  resize: vertical;
  field-sizing: content;
}

.info-cell__area::placeholder { color: var(--label-3); }
.info-cell__area:focus {
  outline: none;
  border-color: var(--glass-edge-lit);
}

.gold-timeline {
  --timeline-node: 0.5rem;
  --timeline-gap: 1px;
  position: relative;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.gold-timeline__item { position: relative; overflow: visible; }

.gold-timeline__hit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  column-gap: 1rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0 1.75rem 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  overflow: visible;
}

.gold-timeline__hit[data-pressed="true"] { opacity: 0.72; }

.gold-timeline__date {
  align-self: center;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--label-2);
  white-space: nowrap;
}

.gold-timeline__axis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: stretch;
  width: var(--timeline-node);
}

.gold-timeline__item:not(:last-child) .gold-timeline__axis::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--timeline-node) / 2) + var(--timeline-gap));
  width: 1px;
  height: calc(100% - var(--timeline-node) - (var(--timeline-gap) * 2));
  transform: translateX(-50%);
  background: var(--timeline-gold);
  pointer-events: none;
}

.gold-timeline__node {
  flex: none;
  width: var(--timeline-node);
  height: var(--timeline-node);
  border-radius: 50%;
  background: var(--timeline-gold);
}

.gold-timeline__score {
  align-self: center;
  justify-self: start;
}
.gold-timeline__score .score-chip { padding: 0.3125rem 0.5625rem; }
.gold-timeline__score .score-chip__value { font-size: 1.0625rem; }
.gold-timeline__score .score-chip__total { font-size: 0.75rem; }

.gold-timeline__go {
  position: absolute;
  right: 0.125rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--label-3);
  pointer-events: none;
}

.heatmap-wrap {
  overflow-x: auto;
  margin-top: 0.875rem;
  -webkit-overflow-scrolling: touch;
}

.heatmap {
  border-collapse: separate;
  border-spacing: 0.25rem;
  min-width: 100%;
}

.heatmap__corner,
.heatmap__label,
.heatmap__date {
  font-family: var(--font-t2);
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--label-3);
  text-align: left;
}

.heatmap thead .heatmap__corner,
.heatmap thead .heatmap__date {
  font-weight: 700;
  color: var(--label);
}

.heatmap__date {
  font-family: var(--font-mono);
  text-align: center;
  white-space: nowrap;
}

.heatmap__label {
  padding-right: 0.5rem;
  max-width: 13rem;
  white-space: normal;
  line-height: 1.3;
}

.heatmap__cell {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline: auto;
  border-radius: 0.3125rem;
}

.heatmap__cell[data-state="off"] { background: var(--tone-good); }
.heatmap__cell[data-state="on"] { background: var(--tone-alert); }
.heatmap__cell[data-state="na"] { background: var(--surface-sunken); }

.yn {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.25rem 0;
  border-top: 0.0625rem solid var(--separator);
}

.yn:first-of-type { border-top: 0; }
.yn__copy { min-width: 0; }
.yn__label { margin: 0; font-size: calc(0.8125rem + var(--corps-plus)); font-weight: 500; line-height: 1.3; }
.yn__hint, .yn__impact {
  margin: 0.1875rem 0 0;
  font-size: calc(0.6875rem + var(--corps-plus));
  line-height: 1.35;
  color: var(--label-2);
}
.yn__impact { color: var(--tint); }

.yn__rail {
  display: flex;
  flex: none;
  padding: 0.125rem;
  border-radius: 999px;
  background: var(--surface-sunken);
}

.yn__option {
  min-width: 2.25rem;
  min-height: 1.625rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--label-2);
  font-size: 0.6875rem;
}

.yn__option[data-on="true"],
.yn__option[aria-pressed="true"] {
  background: var(--tint);
  color: var(--tint-ink);
}

.yn__option[data-pressed="true"] { transform: scale(0.96); }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.field:first-of-type { margin-top: 0.75rem; }

.field__label {
  font-size: calc(0.75rem + var(--corps-plus));
  color: var(--label-2);
}

.field__input {
  min-height: var(--touch-min);
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  font: inherit;
  font-size: calc(1rem + var(--corps-plus));
  color: var(--label);
}

.field__input:focus { outline: none; border-color: var(--tint); }

.player { position: relative; margin-top: 0.75rem; overflow: visible; }

.player__video,
.player__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  background: #000;
}

.player__placeholder {
  display: grid;
  place-items: center;
  color: var(--label-3);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1rem;
}

.clip-tabs {
  display: flex;
  gap: 0.375rem;
  margin: 0.75rem 0 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.clip-tab {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.0625rem;
  min-height: 2.25rem;
  padding: 0.3125rem 0.75rem;
  border: 0.0625rem solid var(--glass-edge);
  border-top-color: var(--glass-edge-lit);
  border-left-color: var(--glass-edge-lit);
  border-radius: 999px;
  background: var(--glass);
  color: var(--label-2);
  text-align: left;
}

.clip-tab[data-active="true"],
.clip-tab[aria-selected="true"] {
  background: var(--tint-soft);
  border-color: var(--tint);
  color: var(--tint);
}

.clip-tab[data-pressed="true"] { transform: scale(0.97); }
.clip-tab__name { font-size: 0.75rem; line-height: 1.2; }
.clip-tab__meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0;
  color: var(--label-3);
}
.clip-tab[data-active="true"] .clip-tab__meta { color: var(--tint); }

.scrubber {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.scrubber__stage {
  position: relative;
  min-height: 7.25rem;
  pointer-events: none;
}

.scrubber__track {
  position: relative;
  height: 2.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--glacier-light) 7%, transparent);
  border: 0.0625rem solid var(--glass-edge);
  touch-action: pan-y;
}

.scrubber__hit {
  position: absolute;
  bottom: 0.35rem;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 1.75rem;
  height: 2.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
}

.scrubber__tick {
  display: block;
  width: 0.2rem;
  border-radius: 999px;
  background: var(--tone-watch);
  will-change: height, opacity;
}

.scrubber__tick[data-tone="alert"] { background: var(--tone-alert); }
.scrubber__tick[data-current="true"] {
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--tone-alert) 32%, transparent);
}
.scrubber__tick[data-current="true"][data-tone="watch"] {
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--tone-watch) 32%, transparent);
}

.scrubber__card {
  position: absolute;
  bottom: 0;
  z-index: 6;
  width: min(16.25rem, calc(100% - 0.5rem));
  padding: 0.75rem 0.875rem;
  border-radius: 1rem;
  background: color-mix(in srgb, #0b1519 92%, transparent);
  backdrop-filter: blur(1.5rem) saturate(160%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(160%);
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  color: var(--heading);
  pointer-events: none;
  transform-origin: 50% 100%;
  box-shadow: 0 0.75rem 1.75rem rgba(2, 9, 12, 0.38);
}

.scrubber__card-time {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--label-2);
}

.scrubber__card-title {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--heading);
}

.scrubber__card-note {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--label-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.label-table__jump {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  width: 100%;
  margin: 0;
  padding: 0.125rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.label-table__jump:focus-visible {
  outline: 0.125rem solid var(--tint);
  outline-offset: 0.125rem;
}

.label-table__stamp {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--label-3);
}

.label-table { margin-top: 0; display: flex; flex-direction: column; }

.label-table__head,
.label-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 2.75rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.label-table__head {
  padding: 0 0 0.5rem;
  font-size: 0.6875rem;
  color: var(--label-3);
}

.label-table__category {
  margin: 0.875rem 0 0.25rem;
  padding: 0;
  font-family: var(--font-t2);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--heading);
}

.label-table__group:first-child .label-table__category { margin-top: 0.25rem; }

.label-table__row {
  min-height: var(--touch-min);
  padding: 0.375rem 0;
  border-top: 0.0625rem solid var(--separator);
}

.label-table__name { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.label-table__name .marker__label { font-size: calc(0.8125rem + var(--corps-plus)); line-height: 1.3; }

.detect-toggle {
  width: 2.25rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  color: var(--label-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
}

.label-table__row[data-state="on"] .detect-toggle {
  background: var(--tone-alert-soft);
  color: var(--tone-alert-ink);
}

.label-table__row[data-state="off"] .detect-toggle {
  background: var(--tone-good-soft);
  color: var(--tone-good);
}

.label-table__row[data-state="na"] { opacity: 0.45; }

.detect-toggle[data-pressed="true"] { transform: scale(0.96); }

.label-table__comment {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0 0.625rem;
  border: 0.0625rem solid var(--separator);
  border-radius: var(--radius-control);
  background: var(--surface-quiet);
  font: inherit;
  font-size: 0.875rem;
  color: var(--label);
}

.label-table__comment:focus { outline: none; border-color: var(--tint); }

.media-list {
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.media-list__item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  align-items: center;
  font-size: 0.8125rem;
}

.media-list__meta { font-family: var(--font-mono); color: var(--label-2); }

.arena-letters {
  margin: 0.75rem 0 0;
  letter-spacing: 0.08em;
}

.framing-list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--label-2);
  font-size: calc(0.875rem + var(--corps-plus));
}

.sheet-panel { background: transparent; }
.sheet-host {
  display: flex;
  flex-direction: column;
}
.sheet-host .screen {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.sheet-host .screen__scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.sheet-host .screen[data-mode="sheet"] .sheet-panel__content {
  padding-top: 4.25rem;
  padding-bottom: calc(7.25rem + env(safe-area-inset-bottom));
}

.landscape-hint {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: var(--gutter);
  background: rgba(2, 34, 39, 0.92);
  text-align: center;
}

.landscape-hint__title { margin: 0; font-size: 1.75rem; letter-spacing: 0; }
.landscape-hint__copy { margin: 0; color: var(--label-2); max-width: 22rem; }

.badge[data-tone="good"] .badge__dot { background: var(--tone-good); }
.badge[data-tone="watch"] .badge__dot { background: var(--tone-watch); }
.badge[data-tone="alert"] .badge__dot { background: var(--tone-alert); }

.score-chip[data-tone="none"] { background: var(--surface-sunken); color: var(--label-3); }

.tile { min-height: 6.25rem; }

@media (max-width: 40rem) {
  .topbar__title {
    font-size: 0.875rem;
    letter-spacing: 0;
  }

  .herd-card .horse-card__name {
    font-size: 1rem;
    letter-spacing: 0;
  }

  .herd-card .horse-card__meta {
    font-size: calc(0.75rem + var(--corps-plus));
  }

  .herd-card .horse-card__date {
    font-size: 0.75rem;
  }

  .sort-chip {
    padding: 0.1875rem 0.5rem;
    font-size: calc(0.6875rem + var(--corps-plus));
  }

  .identity__name {
    font-size: 1.25rem;
  }

  .info-cell dd {
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .herd-card, .sort-chip, .text-back, .yn__option, .detect-toggle, .action, .clip-tab {
    transition: none;
  }
  a.herd-card:active { transform: none; }
  .scrubber__tick { will-change: auto; }
}