/* ══════════════════════════════════════════════════════════════════════════
   ht-radial.css — the left hand's radial condition menu
   ─────────────────────────────────────────────────────────────────────────
   Built by js/hand-tracking/ht-radial-menu.js. Purely presentational: the
   geometry (R_DEAD / R_MID / R_OUT, sector angles) lives in that file
   because it is the hit model, not styling — duplicating those numbers
   here would let the drawing and the hit-testing drift apart silently.
   ══════════════════════════════════════════════════════════════════════ */

.ht-radial-root {
  position: fixed;
  z-index: 9998;              /* under the hand cursors, over everything else */
  pointer-events: none;       /* never steals a real mouse click */
  opacity: 0;
  transform: scale(0.88);
  transform-origin: center;
  transition: opacity 130ms ease-out, transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.ht-radial-root[data-open="true"] {
  opacity: 1;
  transform: scale(1);
}

/* The slight overshoot on open is the one piece of motion here that is
   not information: it tells the user the menu is anchored to where their
   hand was, which is what makes "it appeared under me" legible. */
@media (prefers-reduced-motion: reduce) {
  .ht-radial-root { transition: opacity 100ms linear; transform: none; }
  .ht-radial-root[data-open="true"] { transform: none; }
}

.ht-radial-svg { display: block; overflow: visible; }

/* ── Sectors ─────────────────────────────────────────────────────────────── */

.ht-radial-sector {
  fill: rgba(18, 24, 38, 0.82);
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 1;
  transition: fill 90ms linear;
}

/* Level 1, the category currently pointed at. */
.ht-radial-sector.is-active {
  fill: rgba(154, 230, 180, 0.26);
  stroke: rgba(154, 230, 180, 0.75);
}

/* Level 2, every band of the row being pointed at — shows which row you
   are on even before you have chosen a side. */
.ht-radial-band.is-row {
  fill: rgba(154, 230, 180, 0.16);
  stroke: rgba(154, 230, 180, 0.45);
}

/* The single band that will actually be applied on release. It has to be
   unmistakable against .is-row, because the difference between them is
   the difference between OD and OS. */
.ht-radial-band.is-armed {
  fill: rgba(197, 154, 255, 0.42);
  stroke: rgba(197, 154, 255, 1);
  stroke-width: 2;
}

/* ── Hub ─────────────────────────────────────────────────────────────────── */

.ht-radial-hub {
  fill: rgba(12, 16, 26, 0.94);
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.5;
}

/* The hub carries the full name of whatever is armed. The ring labels are
   necessarily abbreviated to fit their sectors, so this is where the user
   actually reads what they are about to select. */
.ht-radial-title {
  fill: #eef1f7;
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.1px;
}

.ht-radial-sub {
  fill: rgba(197, 154, 255, 0.95);
  font: 600 11px/1.2 Inter, system-ui, sans-serif;
}

.ht-radial-hint {
  fill: rgba(232, 234, 240, 0.45);
  font: 500 9px/1.2 Inter, system-ui, sans-serif;
}

/* ── Ring labels ─────────────────────────────────────────────────────────── */

.ht-radial-label {
  fill: rgba(232, 234, 240, 0.86);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  pointer-events: none;
}

/* Condition names, ringed outside the wheel. Dim by default so the shape
   of the menu stays readable at a glance, and lifted for the row under
   the hand — that contrast is what lets the eye find the current
   selection without reading all twelve. */
.ht-radial-name {
  fill: rgba(232, 234, 240, 0.55);
  font: 600 10px/1 Inter, system-ui, sans-serif;
  paint-order: stroke;
  stroke: rgba(10, 14, 22, 0.85);
  stroke-width: 3px;          /* halo, so names stay legible over the page */
  stroke-linejoin: round;
  transition: fill 90ms linear;
}

.ht-radial-name.is-row {
  fill: #ffffff;
  font-weight: 700;
}

.ht-radial-side {
  fill: rgba(232, 234, 240, 0.72);
  font: 700 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.3px;
}

/* ── Needle ──────────────────────────────────────────────────────────────── */

/* A line from the hub to the hand. With a menu driven by DIRECTION rather
   than position, the angle is the whole input — drawing it makes the thing
   the user is actually controlling visible, instead of leaving them to
   infer it from which sector lit up. */
.ht-radial-needle {
  stroke: rgba(197, 154, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
}

/* In the dead zone nothing is armed, so the needle would be claiming a
   direction that has no effect. */
.ht-radial-root[data-level="0"] .ht-radial-needle { opacity: 0; }