/* ------------------------------------------------------------------
   unstable-painful-shoulder.css — ajustements de style propres à la maquette
   « épaule douloureuse et instable ». La charte générale (coquille UI,
   scène 3D, panneau, responsive) vient de /core/css/ui.css.
------------------------------------------------------------------ */

/* jauge à crans (état de la capsule) : 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) — même rendu que dans les
   maquettes coiffe, arthrose et coude */
.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); }

/* libellés sous les crans, cliquables (comme les grades de l'arthrose) */
.tick-labels { display: flex; justify-content: space-between; margin-top: 2px; }
.tick-labels span {
  width: 64px; margin: 0 -23px; padding: 3px 0; text-align: center; cursor: pointer;
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-3);
  user-select: none; -webkit-user-select: none;
}
.tick-labels span:first-child { text-align: left; margin-left: 0; }
.tick-labels span:last-child { text-align: right; margin-right: 0; }
.tick-labels span.is-active { color: var(--accent); font-weight: 600; }

/* titre de sous-groupe dans le volet des lésions */
.field-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 500; }

/* bilan anatomique : libellés longs (« lésion postéro-inférieure ») — 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; }
}

/* la petite glène cliquable (sélecteur des lésions du labrum) : os clair,
   bourrelet sarcelle par secteur ; un secteur lésé se teinte de rouge et son
   bourrelet vire au gris-rouge, comme sur la maquette */
.clock { display: flex; justify-content: center; margin: 4px 0 2px; }
.clock svg { width: 200px; height: auto; overflow: visible; font-family: "IBM Plex Sans", sans-serif; }
.clock .bone { fill: #e9dcc3; stroke: #c9b896; stroke-width: 1; }
.clock .sector { fill: #ecdfc6; stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.clock .ring { fill: none; stroke: #2f8f8a; stroke-width: 5; stroke-linecap: butt; cursor: pointer; transition: stroke .15s; }
.clock .zone:hover .sector, .clock .zone:focus-visible .sector { fill: #dfd0b1; }
.clock .zone:focus-visible { outline: none; }
.clock .zone:focus-visible .sector { stroke: var(--accent); stroke-width: 2; }
.clock .zone.is-torn .sector { fill: #f2c9c2; }
.clock .zone.is-torn .ring { stroke: #b8534a; }
.clock .zone.is-torn:hover .sector { fill: #ecb9b0; }
.clock .compass { fill: var(--ink-3); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.clock .coracoid { fill: #d9c9a8; stroke: #c9b896; stroke-width: 1; pointer-events: none; }
.clock .center { fill: #dccbaa; pointer-events: none; }

/* cote de la translation, posée sur la tête pendant le test : toujours
   affichée (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; }

/* mesure sous les boutons de translation : les directions instables en gras rouge */
#trans-meter strong { color: var(--ink); font-weight: 600; }
#trans-meter strong.bad { color: #b3261b; }