/* ------------------------------------------------------------------
   instability.css — ajustements de style propres à la maquette Latarjet.
   La charte générale (coquille UI, scène 3D, panneau, thème clair/sombre,
   responsive) vient de /core/css/ui.css.
------------------------------------------------------------------ */

/* jauge à crans (grades de l'encoche de Hill-Sachs) : un petit tiret sous chaque cran,
   aligné sur la position du curseur (même rendu que dans les maquettes coiffe et arthrose) */
.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); }

/* bilan anatomique : libellés longs (« Perte osseuse glénoïdienne ») — encart un peu plus
   large sur grand écran ; en dessous de 900 px, la largeur commune (200 px) s'applique */
@media (min-width: 901px) {
  #app.is-clean #lesion-recap { width: 300px; }
}

/* liste déroulante « Fixation du greffon », au-dessus du bouton « Opération de Latarjet » :
   même rendu que dans les maquettes coiffe et biceps distal — 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);
}
.select + .guide-slot { margin-top: 8px; }