/* ------------------------------------------------------------------
   scaphoid-fracture.css — ajustements de style propres à la maquette
   « fracture du scaphoïde ». La charte générale (coquille UI, scène 3D,
   panneau, responsive) vient de /core/css/ui.css ; le schéma de siège et
   les pictogrammes reprennent ceux de la fracture de la clavicule, la jauge
   à crans ceux du canal carpien.
------------------------------------------------------------------ */

.field-label { display: block; margin: 12px 0 6px; font-size: 13px; font-weight: 500; }
p.field-label { margin-bottom: 4px; }

/* le scaphoïde vu de face (siège) : os clair par zone ; la zone choisie se teinte, le trait est une ligne rouge */
.site { display: flex; justify-content: center; margin: 0 0 4px; }
.site svg { width: 100%; max-width: 250px; height: auto; overflow: visible; font-family: "IBM Plex Sans", sans-serif; }
.site .bone { fill: #ecdfc6; stroke: #c9b896; stroke-width: 0.8; transition: fill .15s; }
.site .zone { cursor: pointer; }
.site .zone:hover .bone, .site .zone:focus-visible .bone { fill: #dfd0b1; }
.site .zone:focus-visible { outline: none; }
.site .zone:focus-visible .bone { stroke: var(--accent); stroke-width: 1.6; }
.site .zone.is-on .bone { fill: color-mix(in srgb, var(--accent) 26%, #ecdfc6); stroke: var(--accent); }
.site .zone-label { fill: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; pointer-events: none; paint-order: stroke; stroke: #f6efe2; stroke-width: 2.5px; stroke-linejoin: round; }
.site .zone.is-on .zone-label { fill: var(--accent); }
.site .mark { fill: none; stroke: #c0392b; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.site .compass { fill: var(--ink-3); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.site .waist-split { stroke: #c9b896; stroke-width: 0.8; stroke-dasharray: 2 2; pointer-events: none; }

/* le trait : trois pictogrammes */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.type {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 5px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font: 500 11.5px/1.15 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; text-align: center;
  transition: border-color .15s, background .15s;
}
.type svg { width: 100%; max-width: 64px; height: auto; }
.type svg .b { fill: #ecdfc6; stroke: #c9b896; stroke-width: 1; }
.type svg .w { fill: #f2c9c2; stroke: none; }
.type svg .f { fill: none; stroke: #c0392b; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.type:hover { border-color: var(--accent); background: var(--surface-3); }
.type:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.type.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }

/* jauge à crans : un tiret sous chaque cran, le nom au-dessus, le cran choisi en couleur */
.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); }
.tick-labels { position: relative; height: 16px; margin: 4px 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; }

/* la classification, lue en direct */
.classif {
  margin: 10px 0 4px; padding: 6px 9px; border-radius: 8px;
  background: var(--surface-3); color: var(--ink-2);
  font: 500 12.5px/1.35 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
}
.classif strong { color: var(--ink); font-weight: 600; }

/* traitements : la voie d'abord (segment à deux boutons, comme le nombre de vis de la tête radiale) ; la voie habituelle pour le siège porte un point */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2px 0 10px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.seg button {
  appearance: none; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--ink-2);
  padding: 7px 6px; cursor: pointer; font: 500 12.5px/1.1 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  transition: background .15s, color .15s;
}
.seg button:first-child { border-left: 0; }
.seg button:hover { background: var(--surface-3); color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.seg button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--ink); font-weight: 600; }
.seg button.is-auto::after { content: " •"; color: var(--accent); }
.ctl-btn.play.wide + .ctl-btn.play.wide { margin-top: 8px; }