/* =============================================================================
   ht-field.css — H-Test layers on and beside the eyes: field arrows and labels
   (ui/ht-guide-layer.js), the torsion marker (ui/ht-torsion-render.js), the
   fixation wand while the H-Test holds it (ui/ht-target-render.js) and the
   anatomy panel (ui/ht-anatomy-layer.js, ui/ht-anatomy-svg.js).
   ============================================================================= */

/* ── Field arrows + labels ──────────────────────────────────────────────── */
.ht-guide-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 101; overflow: visible; pointer-events: none; }
.ht-guide-arrow { stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.ht-guide-arrow.ht-tone-normal, .ht-head.ht-tone-normal { stroke: #3a6ea8; fill: #3a6ea8; }
.ht-guide-arrow.ht-tone-under,  .ht-head.ht-tone-under  { stroke: #c0392b; fill: #c0392b; }
.ht-guide-arrow.ht-tone-over,   .ht-head.ht-tone-over   { stroke: #d99a1e; fill: #d99a1e; }
.ht-head { stroke: none !important; }
.ht-guide-pill rect { fill: rgba(20, 24, 26, 0.86); stroke: #3a6ea8; stroke-width: 1.5; }
.ht-guide-pill.ht-tone-under rect { stroke: #e0574a; }
.ht-guide-pill.ht-tone-over rect { stroke: #f0b64a; }
.ht-guide-pill text { fill: #fff; font: 700 11.5px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 0.01em; }

/* ── Torsion marker: hidden unless the H-Test shows torsion ─────────────── */
.ht-torsion { display: none; }
body[data-ht-torsion="on"] .ht-torsion { display: inline; }
.ht-torsion-vessel { fill: none; stroke: #a8322c; stroke-width: 1.6; stroke-linecap: round; opacity: 0.9; }
.ht-torsion-dot { fill: #fff; stroke: #a8322c; stroke-width: 1.2; }

/* ── Fixation wand held by the H-Test ───────────────────────────────────── */
.fixation-target.is-ht { transition: none !important; }
.fixation-target.is-ht[data-ht-mode="npc"] { transform: translate(-50%, -50%) scale(1.15); }

/* ── Anatomy panel ──────────────────────────────────────────────────────── */
.ht-anatomy { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 14px; background: var(--surface); }
.ht-an-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ht-an-pair { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; }
.ht-an-svg { display: block; width: 100%; height: auto; max-width: 170px; margin: 0 auto; overflow: visible; }
.ht-an-yoke { height: 0; border-top: 2px dashed transparent; }
.ht-an-yoke.is-on { border-top-color: var(--accent); }
.ht-an-globe { fill: var(--surface-sunken); stroke: var(--border); stroke-width: 1.2; }
.ht-an-cornea { fill: none; stroke: var(--text-soft); stroke-width: 1; }
.ht-an-pupil { fill: var(--text); opacity: 0.75; }
.ht-an-axis { stroke: var(--text-soft); stroke-width: 0.6; stroke-dasharray: 2 2; opacity: 0.6; }
.ht-an-trochlea { fill: none; stroke: var(--text-soft); stroke-width: 1; }
.ht-an-side, .ht-an-eye { font: 600 7px/1 "IBM Plex Sans", system-ui, sans-serif; fill: var(--text-soft); }
.ht-an-side { text-anchor: middle; }
.ht-an-eye { font-size: 9px; font-weight: 700; }
.ht-an-name { font: 700 7px/1 "IBM Plex Sans", system-ui, sans-serif; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 2px; }
.ht-an-body { fill: #d4a39a; stroke: #8f5d54; stroke-width: 0.8; transition: fill 160ms ease, opacity 160ms ease; }
.ht-an-hatch { display: none; stroke: none; pointer-events: none; }
.ht-an-hatch-line { stroke: #3b1d19; stroke-width: 1.6; }
.ht-an-muscle.is-active .ht-an-body { fill: #3a6ea8; stroke: #234a74; }
.ht-an-muscle.is-antagonist { opacity: 0.35; }
.ht-an-muscle.is-weak .ht-an-body { fill: #c0392b; stroke: #7d2219; }
.ht-an-muscle.is-over .ht-an-body { fill: #d99a1e; stroke: #8c6212; }
.ht-an-muscle.is-restricted .ht-an-hatch { display: inline; }
.ht-an-muscle.is-restricted .ht-an-body { fill: #d98c80; }
.ht-an-muscle.is-active.is-weak .ht-an-body { stroke: #3a6ea8; stroke-width: 2; }
.ht-an-caption { margin: 0; font-size: 11.5px; line-height: 1.4; }
.ht-an-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 10px; color: var(--text-soft); }
.ht-an-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; background: #d4a39a; }
.ht-an-legend .is-active::before { background: #3a6ea8; }
.ht-an-legend .is-antagonist::before { opacity: 0.35; }
.ht-an-legend .is-weak::before { background: #c0392b; }
.ht-an-legend .is-over::before { background: #d99a1e; }
.ht-an-legend .is-restricted::before { background: repeating-linear-gradient(45deg, #3b1d19 0 1.5px, #d98c80 1.5px 4px); }
.htc[data-explain="off"] .ht-anatomy { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ht-an-body { transition: none; }
}