/**
 * css/hand-tracking/ht-hand-control.css
 *
 * The always-visible hand-control group in the exam toolbar
 * (html-templates/exam/exam-toolbar.html, js/hand-tracking/ht-hand-control.js).
 *
 *   [ ✋• Hand control / status ] [ camera ] [ settings ]
 *
 * One pill, three segments. The state lives on the group's data-state:
 *   off       camera off — quiet, like any idle toolbar button
 *   starting  camera/model loading — breathing dot
 *   live      camera on, no hand in frame — solid accent
 *   hand      a hand is driving the eyes — accent fill + pulse ring
 *   error     start failed / camera lost — warn colour
 */

.ht-control {
  --htc-h: 32px;
  display: inline-flex;
  align-items: stretch;
  height: var(--htc-h);
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px hsl(var(--shadow-color, 220 20% 20%) / .05);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ht-control button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.ht-control button:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: -2px;
}
.ht-control button:disabled { cursor: default; opacity: .38; }

/* ── Main toggle ─────────────────────────────────────────────── */
.ht-control__main {
  gap: 8px;
  padding-inline: 10px 12px;
  white-space: nowrap;
}
.ht-control__main:hover { background: var(--surface-sunken); color: var(--text); }
.ht-control__main:active .ht-control__glyph { transform: scale(.92); }

.ht-control__glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 120ms ease;
}
.ht-control__glyph svg { width: 18px; height: 18px; }

/* Status dot, tucked into the hand's corner. */
.ht-control__dot {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 2px var(--surface);
  transition: background 180ms ease;
}

.ht-control__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
}
.ht-control__label { font-size: 12px; font-weight: 600; }
.ht-control__status {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: .01em;
}

/* Pinned eyes (phones) hide every toolbar action but the pin and the More
   menu (css/stage.css, css/exam/exam-workspace.css). Hand control used to
   live inside More, so it must survive pinning too. */
.exam-card.is-pinned .exam-toolbar__actions > .ht-control { display: inline-flex !important; }

/* ── Icon segments ───────────────────────────────────────────── */
.ht-control__icon {
  width: 34px;
  border-inline-start: 1px solid var(--border-soft, var(--border)) !important;
}
.ht-control__icon:not(:disabled):hover { background: var(--surface-sunken); color: var(--text); }
.ht-control__icon svg { width: 16px; height: 16px; }
.ht-control__icon[aria-pressed="true"],
.ht-control__icon[aria-expanded="true"] {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

/* ── States ──────────────────────────────────────────────────── */
.ht-control[data-state="starting"] .ht-control__dot {
  background: var(--accent);
  animation: htc-breathe 1.1s ease-in-out infinite;
}

.ht-control:is([data-state="live"], [data-state="hand"]) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.ht-control:is([data-state="live"], [data-state="hand"]) .ht-control__main { color: var(--accent-strong); }
.ht-control:is([data-state="live"], [data-state="hand"]) .ht-control__dot { background: var(--accent); }
.ht-control:is([data-state="live"], [data-state="hand"]) .ht-control__status { color: var(--accent-strong); }

.ht-control[data-state="hand"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ht-control[data-state="hand"] .ht-control__main { background: var(--accent-tint); }
.ht-control[data-state="hand"] .ht-control__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: htc-ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}

.ht-control[data-state="error"] { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.ht-control[data-state="error"] .ht-control__dot { background: var(--warn); }
.ht-control[data-state="error"] .ht-control__status { color: var(--warn-strong, var(--warn)); }

@keyframes htc-breathe { 50% { opacity: .3; } }
@keyframes htc-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ht-control__dot, .ht-control__dot::after { animation: none !important; }
}

/* ── Compact (phones): icon + dot only, status still announced ── */
@media (max-width: 640px) {
  .ht-control { --htc-h: 40px; }
  .ht-control__main { padding-inline: 11px; }
  .ht-control__text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ht-control__icon { width: 38px; }
}