/* ------------------------------------------------------------------
   lateral-epicondylalgia.css — ajustements de style propres à la maquette
   « épicondylalgie latérale et nerf interosseux postérieur ». La charte générale (coquille UI, scène
   3D, panneau, responsive) vient de /core/css/ui.css.
------------------------------------------------------------------ */

/* jauge à crans (stade du tendon, sévérité de la compression) : un petit tiret sous chaque
   cran, aligné sur la position du curseur (le centre du curseur de 18 px
   parcourt la piste de 9 px à largeur - 9 px) */
.ticks {
  display: flex; justify-content: space-between;
  padding: 0 8px; margin-top: -3px;
  pointer-events: none;
}
.ticks i { display: block; width: 2px; height: 6px; border-radius: 1px; background: var(--border-2); }
/* le nom de chaque cran au-dessus de la jauge, centré sur lui (le premier et le dernier
   alignés sur les bords) ; le cran choisi en couleur — même rendu qu'au LCA */
.tick-labels { position: relative; height: 16px; margin: 6px 0 -2px; pointer-events: none; }
.tick-labels span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: nowrap;
}
.tick-labels span:first-child { transform: translateX(-9px); }
.tick-labels span:last-child { transform: translateX(calc(-100% + 9px)); }
.tick-labels span.is-active { color: var(--accent); font-weight: 600; }
p.field-label { margin-bottom: 2px; }

/* listes déroulantes : même rendu que dans les maquettes de l'épaule —
   hauteur tactile (44 px), chevron maison */
.field-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 500; }
.select { position: relative; margin-top: 2px; }
.select select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 44px; padding: 10px 38px 10px 12px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  cursor: pointer;
}
.select select:hover { border-color: var(--tone, var(--accent)); }
.select::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
}

/* « Tourner l'avant-bras » : la pastille du bouton passe de play à pause pendant le mouvement */
#btn-pron-play { margin-top: 10px; }
#btn-pron-play .ico-pause { display: none; }
#btn-pron-play.is-playing .ico-play { display: none; }
#btn-pron-play.is-playing .ico-pause { display: block; }


/* mesures sous la glissière de compression : aplatissement et renflement du
   nerf — lus sur la maquette, pas estimés */
#comp-meter strong { color: var(--ink); font-weight: 600; }

/* le temps de la cicatrisation (débridement), sous le titre de la fiche : une
   frise de cinq temps, le temps atteint allumé, ceux d'avant marqués */
#card-clock {
  display: flex; gap: 4px; margin: -2px 0 12px; padding: 0; list-style: none;
}
#card-clock[hidden] { display: none; }
#card-clock li {
  flex: 1 1 0; position: relative; padding-top: 10px; text-align: center;
  font-size: 12.5px; line-height: 1.2; color: var(--ink-2); white-space: nowrap;
}
#card-clock li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
#card-clock li.is-past::before { background: color-mix(in srgb, var(--accent) 55%, transparent); }
#card-clock li.is-on::before { background: var(--accent); }
#card-clock li.is-on { color: var(--ink); font-weight: 600; }