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

/* liste déroulante « forme d'arthrose » : hauteur tactile (44 px), chevron maison */
.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);
}
.field-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 500; }

/* jauge à crans : un petit tiret sous chaque cran, aligné sur le centre 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); }

/* chiffres romains sous les crans, cliquables */
.tick-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.tick-labels span {
  width: 36px; margin: 0 -9px; padding: 3px 0; text-align: center; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; color: var(--ink-3);
  user-select: none; -webkit-user-select: none;
}
.tick-labels span.is-active { color: var(--accent); font-weight: 600; }
#grade-box, #hamada-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
#grade-box .slider, #hamada-box .slider { margin-top: 0; }

/* prothèse inversée : second bouton (« Voir l'effet sur le deltoïde ») sous celui de la pose */
#rsa-box .ctl-btn + .ctl-btn { margin-top: 8px; }

/* cotes de l'effet sur le deltoïde : toujours affichées (y compris sur la capture remise au patient) */
.lbl.cote { font-size: 12.5px; color: #0b5f6a; border-color: color-mix(in srgb, #0e7c8a 45%, transparent); }
.lbl.cote::before { background: #0e7c8a; }
.lbl.cote.tense { color: #b3261b; border-color: color-mix(in srgb, #d3281c 45%, transparent); }
.lbl.cote.tense::before { background: #d3281c; }
.lbl.cote.ghost { color: var(--ink-2); font-weight: 500; }
.lbl.cote.ghost::before { background: #8a9096; }