/* Innate — control-room design system. One stylesheet, every page.
   Instrument-panel restraint: hairlines, typography, and a single signal
   amber doing all the work. No gradients-as-decoration, no drop shadows. */

:root {
  --bg: #0a0a0c;
  --panel: #111114;
  --hairline: rgb(255 255 255 / 8%);
  --hairline-strong: rgb(255 255 255 / 16%);
  --text: #e7e7ea;
  --muted: #8a8a93;
  --accent: #e8a33d;            /* signal amber — live/active states only */
  --accent-dim: rgb(232 163 61 / 40%);
  --accent-faint: rgb(232 163 61 / 12%);
  --ok: #56c28c;                /* connected dot */
  --danger: #d96a5a;
  --blue: #401ffb;              /* Innate brand blue — logo backdrop */
  --glass: rgb(0 0 0 / 40%);
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must win over any element that also sets `display`
   (grid/flex/block author rules otherwise override the UA [hidden] rule). */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  grid-template-columns: 64px 1fr;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--font-mono);
}

.microlabel {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

::selection {
  background: var(--accent-dim);
}

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---- icon rail ---------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 0 12px;
  border-right: 1px solid var(--hairline);
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
  /* Overlay-expand on hover: the body grid reserves 64px; the rail widens on top
     of the content (no reflow) and fades in text labels. */
  position: relative;
  z-index: 40;
  width: 64px;
  overflow: hidden;
  transition: width 160ms ease;
}
.rail:hover {
  width: 200px;
  box-shadow: 2px 0 18px rgb(0 0 0 / 45%);
}

.rail-mark {
  display: grid;
  place-items: center;
  width: 64px;             /* full rail width */
  height: 52px;
  margin: -14px 0 18px;    /* negate rail's top padding so the block reaches the top edge */
  background: var(--blue);
  color: #fff;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rail-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin: 0 8px;           /* 48px content + 2×8 = the 64px collapsed rail, icon stays centered */
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;   /* it's an <a> — no link underline under the label */
  transition: color 120ms ease;
}

.rail-link:hover {
  color: var(--text);
}

.rail-link.active {
  color: var(--text);
}

.rail-ico {
  flex: none;
  width: 48px;             /* centers the icon within the 64px collapsed rail */
  display: grid;
  place-items: center;
}

.rail-label {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.rail:hover .rail-label {
  opacity: 1;
}

.rail-link.active::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 10px;
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--accent);
}

/* connection badge pinned at rail bottom */

.badge {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 9px;
  cursor: default;
}

.badge:not(:disabled) {
  cursor: pointer;
}

.badge:not(:disabled):hover .badge-label {
  color: var(--text);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a5a63;
}

.badge[data-state="connecting"] .badge-dot,
.badge[data-state="reconnecting"] .badge-dot {
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

.badge[data-state="connected"] .badge-dot {
  background: var(--ok);
}

.badge-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 110px;
  overflow: hidden;
  letter-spacing: 0.06em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---- stage -------------------------------------------------------------- */

.stage {
  position: relative;
  overflow: hidden;
}

.connect-layer,
.cockpit {
  position: absolute;
  inset: 0;
}

.connect-layer {
  display: grid;
  place-items: center;
}

/* ---- connect card ------------------------------------------------------- */

.connect-card {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.connect-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  padding: 6px 1px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 150ms ease;
}

.connect-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.connect-input::placeholder {
  color: rgb(255 255 255 / 22%);
}

.connect-button {
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 9px 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: border-color 150ms ease, color 150ms ease;
}

.connect-button:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.connect-button:disabled {
  color: var(--muted);
  cursor: progress;
}

.connect-error {
  margin: 0;
  font-size: 12px;
  color: var(--danger);
}

.connect-hint {
  letter-spacing: 0.1em;
}

/* ---- video stage -------------------------------------------------------- */

.video-stage {
  position: absolute;
  inset: 0;
  background: #000;
}

.video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop the operator's view */
}

.video-stage.degraded video {
  filter: saturate(0.55) brightness(0.75);
}

/* Cold-start warmup: hide the frozen first frame so the "loading video stream"
   overlay shows over black, not a stale frame that looks live. */
.video-stage.buffering video {
  visibility: hidden;
}

.video-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
}

.video-status-text {
  letter-spacing: 0.22em;
}

.video-status.waiting .video-status-text {
  animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

.video-retry {
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.video-retry:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* ---- glass overlays ------------------------------------------------------ */

.overlay {
  position: absolute;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  user-select: none;
  -webkit-user-select: none;
}

.overlay-top-left {
  top: 14px;
  left: 14px;
}

.overlay-right {
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 7px;
}

.overlay-bottom-left {
  left: 14px;
  bottom: 14px;
  padding: 10px 12px;
}

.overlay-joystick {
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  border-radius: 50%;
  padding: 9px;
}

.overlay-tts {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(440px, 56vw);
  border-radius: 999px;
}

/* ---- profiling panel (Teleop) ------------------------------------------- */

/* Discrete toggle: a small glass pulse button, top-right corner. */
.profiling-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.profiling-toggle:hover {
  color: var(--text);
  border-color: var(--hairline-strong);
}

.profiling-toggle.active {
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* Panel sits just below the toggle; denser glass since it's over the feed. */
.profiling {
  position: absolute;
  top: 54px;
  right: 14px;
  width: 232px;
  padding: 11px 14px;
  background: rgb(0 0 0 / 66%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  user-select: none;
  -webkit-user-select: none;
}

.profiling-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profiling-hint {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 1.5;
}

.profiling-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 11px 10px;
}

.profiling-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profiling-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.profiling-value {
  font-size: 14px;
  color: var(--text);
}

.profiling-unit {
  font-size: 10px;
  color: var(--muted);
}

/* The jitter buffer delay is the headline metric — span the row and accent it. */
.profiling-item.headline {
  grid-column: 1 / -1;
}

.profiling-item.headline .profiling-value {
  font-size: 20px;
  color: var(--accent);
}

/* ---- record HUD (Collect page) ------------------------------------------ */

.overlay-record {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 14px;
}

.record-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 320px;
}

.record-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.record-skill {
  flex: 1;
  min-width: 0;
  /* Transparent so the overlay's own glass blur shows through — the dark-grey
     fill read as a heavy block against the rest of the HUD. The open dropdown
     popup is OS-rendered dark via the page's color-scheme: dark. */
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  transition: border-color 150ms ease;
}

.record-skill:hover:not(:disabled) {
  border-color: var(--accent-dim);
}

.record-skill:focus {
  outline: none;
  border-color: var(--accent);
}

.record-skill:disabled {
  color: var(--muted);
  border-color: var(--hairline);
  cursor: default;
}

/* Keep the closed control's selected label legible on the glass while the
   popup list stays dark (Firefox needs the explicit option background). */
.record-skill option {
  background: var(--panel);
  color: var(--text);
}

.record-count {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.record-link {
  font-size: 11px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease;
}

.record-link:hover {
  color: var(--accent);
}

.record-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.record-btn {
  flex: 1;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.record-btn:disabled {
  color: var(--text);
  border-color: var(--hairline);
  cursor: default;
}

/* Record: danger-tinted outline; muted when the arm/dataset gate is unmet. */
.record-start:not(:disabled) {
  border-color: rgb(217 106 90 / 50%);
  color: var(--danger);
}

.record-start:not(:disabled):hover {
  background: rgb(217 106 90 / 14%);
}

/* Stop: reads as live — danger fill + the running timer. */
.record-stop {
  border-color: rgb(217 106 90 / 50%);
  background: rgb(217 106 90 / 14%);
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.record-save:not(:disabled) {
  border-color: rgb(86 194 140 / 50%);
  color: var(--ok);
}

.record-save:not(:disabled):hover {
  background: rgb(86 194 140 / 14%);
}

.record-discard:not(:disabled):hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.record-hint {
  margin: 0;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* Green confirmation flash after a recorded movement is saved. */
.record-hint.ok {
  color: var(--ok);
}

/* Orphaned-recording recovery banner — an episode left open on the robot
   (e.g. one that survived a dropped connection). Danger-tinted to draw the eye. */
.record-orphan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid rgb(217 106 90 / 50%);
  border-radius: 10px;
  background: rgb(217 106 90 / 14%);
}

.record-orphan-msg {
  flex: 1;
  color: var(--danger);
  letter-spacing: 0.04em;
}

.record-orphan-discard:not(:disabled) {
  border-color: rgb(217 106 90 / 50%);
  color: var(--danger);
}

.record-orphan-discard:not(:disabled):hover {
  background: rgb(217 106 90 / 14%);
}

.record-orphan-dismiss {
  padding: 4px 8px;
}

/* recorded-movement wizard (replaces the picker while a draft is recording) */
.record-wizard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 320px;
}

.record-wizard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.record-wizard-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-wizard-cancel {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 150ms ease;
}

.record-wizard-cancel:hover:not(:disabled) {
  color: var(--danger);
}

/* new-skill type chooser (mobile: AddSkillScreen cards) */
.collect-choice {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  transition: border-color 150ms ease, background 150ms ease;
}

.collect-choice:hover:not(:disabled) {
  border-color: var(--accent-dim);
  background: var(--accent-faint);
}

.collect-choice:disabled {
  opacity: 0.5;
  cursor: default;
}

.collect-choice-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.collect-choice-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* multiline guidelines field + the chooser's back link, reusing modal styling */
.modal-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

.modal-back {
  align-self: flex-start;
  font-size: 11px;
  color: var(--muted);
  transition: color 150ms ease;
}

.modal-back:hover {
  color: var(--text);
}

/* ---- telemetry strip ----------------------------------------------------- */

.telemetry {
  display: flex;
  gap: 22px;
  padding: 9px 16px;
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.telemetry-value {
  font-size: 12px;
  color: var(--text);
}

.telemetry-item.live .telemetry-value {
  color: var(--accent);
}

.telemetry-item.warn .telemetry-value {
  color: var(--danger);
}

/* ---- joystick ------------------------------------------------------------ */

.joystick {
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.joy-rim {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1;
  transition: stroke 150ms ease;
}

.joystick.engaged .joy-rim {
  stroke: rgb(255 255 255 / 26%);
}

.joystick.at-edge .joy-rim {
  stroke: var(--accent-dim);
}

.joy-tick {
  stroke: var(--hairline-strong);
  stroke-width: 1;
}

.joy-trace {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 150ms ease;
}

.joystick.engaged .joy-trace,
.joystick.mirroring .joy-trace {
  opacity: 0.35;
}

.joy-knob-group {
  transition: transform 130ms ease-out;
}

.joystick.engaged .joy-knob-group {
  transition: none;
}

.joy-knob {
  fill: #b9b9c1;
  transition: fill 150ms ease;
}

.joystick.engaged .joy-knob {
  fill: var(--accent);
}

/* keyboard drive mirrored on the stick: hollow accent dot */
.joystick.mirroring .joy-knob {
  fill: var(--accent-faint);
  stroke: var(--accent);
  stroke-width: 1;
}

/* ---- WASD chips ----------------------------------------------------------- */

.wasd {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wasd-row {
  display: flex;
  gap: 4px;
}

.wasd-row:first-child {
  padding-left: 30px; /* center W above S */
}

.wasd-chip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  transition: color 100ms ease, border-color 100ms ease, background 100ms ease;
}

.wasd-chip.held {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-faint);
}

.wasd-hint {
  margin-top: 7px;
  font-size: 9px;
}

/* ---- head tilt ------------------------------------------------------------ */

.head-tilt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ht-label {
  font-size: 9px;
  color: var(--muted);
}

.ht-track {
  position: relative;
  width: 26px;
  height: 190px;
  touch-action: none;
  cursor: ns-resize;
}

.ht-rail {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--hairline-strong);
}

.ht-zero {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: var(--hairline-strong);
}

.ht-actual {
  position: absolute;
  left: 50%;
  width: 15px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: var(--accent-dim);
  transition: top 300ms ease;
}

.ht-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #b9b9c1;
  transition: background 150ms ease;
}

.head-tilt.engaged .ht-thumb {
  background: var(--accent);
}

.ht-readout {
  font-size: 10px;
  color: var(--muted);
  min-height: 14px;
}

.head-tilt.engaged .ht-readout {
  color: var(--accent);
}

/* ---- audio toggle ---------------------------------------------------------- */

.icon-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 9px;
  color: var(--muted);
  transition: color 150ms ease, border-color 150ms ease;
}

.icon-toggle:hover {
  color: var(--text);
}

.icon-toggle.active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-faint);
}

.audio-toggle:not(.active) .wave {
  opacity: 0.2;
}

/* ---- TTS bar ---------------------------------------------------------------- */

.tts-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 18px;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 200ms ease;
}

.tts-bar.sent {
  border-color: var(--accent-dim);
}

.tts-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 7px 0;
  font: inherit;
  color: var(--text);
}

.tts-input:focus {
  outline: none;
}

.tts-input::placeholder {
  color: rgb(255 255 255 / 25%);
}

.tts-hint {
  font-size: 11px;
  color: var(--muted);
}

.tts-bar.sent .tts-hint {
  color: var(--accent);
}

/* ---- leader arm panel -------------------------------------------------------- */

.overlay-arm {
  right: 14px;
  bottom: 14px;
  /* This panel sits over the live camera feed, so the default 40% glass left
     the labels washed out. Denser backdrop + more blur for legibility. */
  background: rgb(0 0 0 / 66%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.arm-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  width: 168px;
}

/* Brighter section labels (LEADER ARM / ROBOT ARM) than the global muted —
   they were the hardest to read over the feed. */
.arm-panel .microlabel {
  color: rgb(255 255 255 / 62%);
}

.arm-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgb(255 255 255 / 58%);
}

.arm-status {
  margin: 0;
  font-size: 12px;
  color: var(--text);
}

.arm-status.warn {
  color: var(--danger);
  font-size: 11px;
}

.arm-joints {
  display: flex;
  gap: 14px;
  height: 30px;
  padding: 0 2px;
}

.arm-joint {
  position: relative;
  width: 1px;
  background: var(--hairline-strong);
}

.arm-joint-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #b9b9c1;
}

.arm-panel:has(.arm-engage.active) .arm-joint-dot {
  background: var(--accent);
}

.arm-button {
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 7px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.arm-button:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.arm-button:disabled {
  color: var(--muted);
  cursor: progress;
}

.arm-engage.active {
  border-color: var(--accent-dim);
  background: var(--accent-faint);
  color: var(--accent);
}

.arm-note {
  font-size: 9px;
}

.arm-note.warn {
  color: var(--danger);
}

.arm-divider {
  height: 1px;
  background: var(--hairline);
  margin: 2px 0;
}

.arm-services {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arm-actions {
  display: flex;
  gap: 8px;
}

.arm-actions .arm-button {
  flex: 1;
  padding: 6px 2px;
}

/* Torque toggle: small cap over a green ON / red OFF state, like the app. */
.arm-torque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.arm-torque-cap {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.arm-torque-state {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.arm-torque.on {
  border-color: rgb(86 194 140 / 50%);
}

.arm-torque.on .arm-torque-state {
  color: var(--ok);
}

.arm-torque.off {
  border-color: rgb(217 106 90 / 50%);
}

.arm-torque.off .arm-torque-state {
  color: var(--danger);
}

/* Keep the semantic colour on hover instead of the generic amber. */
.arm-torque.on:hover:not(:disabled) {
  border-color: var(--ok);
  color: inherit;
}

.arm-torque.off:hover:not(:disabled) {
  border-color: var(--danger);
  color: inherit;
}

/* ---- placeholder pages ------------------------------------------------------ */

.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.placeholder-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.placeholder-blurb {
  margin: 0;
  max-width: 360px;
  color: var(--muted);
}

.placeholder .microlabel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* ---- debugging page ------------------------------------------------------- */

.debug {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.debug-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px; /* log | log-sources panel */
  grid-template-rows: minmax(0, 1fr); /* bound the row so inner lists can scroll */
}

/* shared page header (Logs / Datasets / Training) */
.page-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}

.page-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.debug-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.debug-side {
  border-left: 1px solid var(--hairline);
  overflow-y: auto;
  min-height: 0;
}

/* "LOGS" headline above the toolbar */
.logs-title {
  padding: 14px 16px 0;
}

/* toolbar */
.debug-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}

/* breadcrumb pill: "Source: launch › node   N errors" */
.logs-crumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  max-width: 46%;
}

.logs-errbadge {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  color: var(--danger);
  background: rgb(217 106 90 / 14%);
}

.debug-bar-spacer {
  flex: 1;
}

.debug-seg {
  display: flex;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  overflow: hidden;
}

.debug-seg-btn {
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.debug-seg-btn.active {
  background: var(--accent-faint);
  color: var(--accent);
}

.debug-select {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 5px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--text);
}

.debug-select:disabled {
  opacity: 0.4;
}

.debug-pickers {
  display: inline-flex;
  gap: 8px;
}

.debug-search {
  flex: 0 1 220px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 5px 2px;
  font-size: 12px;
  color: var(--text);
}

.debug-search:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.debug-count {
  white-space: nowrap;
}

.debug-btn {
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.debug-btn:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

.debug-btn.active {
  color: var(--ok);
  border-color: rgb(86 194 140 / 50%);
}

/* log list */
/* columns shared by the header and each log row */
.debug-cols,
.debug-row {
  display: grid;
  grid-template-columns: 104px 60px 172px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 2px 16px;
}

.debug-cols {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.debug-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.55;
}

.debug-row:hover {
  background: rgb(255 255 255 / 4%);
}

.col-time {
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
}

/* level badge */
.col-level {
  justify-self: start;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.lvl-debug { color: var(--muted); background: rgb(255 255 255 / 6%); }
.lvl-info { color: var(--ok); background: rgb(86 194 140 / 12%); }
.lvl-warn { color: var(--accent); background: rgb(232 163 61 / 14%); }
.lvl-error { color: var(--danger); background: rgb(217 106 90 / 14%); }

.col-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-msg {
  min-width: 0;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.debug-row.sev-warn .col-msg {
  color: var(--accent);
}

.debug-row.sev-error .col-msg {
  color: var(--danger);
}

.debug-row.sev-debug .col-msg {
  color: var(--muted);
}

/* current-scope breadcrumb text inside .logs-crumb */
.debug-scope {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- log sources panel (launch / process / node-logger) ------------------ */

.sources-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
}

.sources-modes {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 3px;
}

.sources-mode {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 4px;
  border-radius: 6px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.sources-mode svg {
  flex: none;
  opacity: 0.8;
}

.sources-mode.active {
  background: var(--accent-faint);
  color: var(--accent);
}

.sources-filter {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 6px 2px;
  font-size: 13px;
  color: var(--text);
}

.sources-filter:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.sources-filter::placeholder {
  color: rgb(255 255 255 / 25%);
}

.sources-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0 8px;
}

.src-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 0;
  color: var(--text);
  cursor: pointer;
}

.src-row:hover {
  background: rgb(255 255 255 / 5%);
}

.src-row.selected {
  background: var(--accent-faint);
}

.src-row.selected .src-name {
  color: var(--accent);
}

.src-caret {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color 120ms ease;
}

.src-caret svg {
  transition: transform 120ms ease;
}

.src-caret.open svg {
  transform: rotate(90deg);
}

.src-row:hover .src-caret {
  color: var(--text);
}

.src-caret.leaf {
  visibility: hidden;
}

/* type icon, tinted by worst severity in the subtree */
.src-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.src-icon.sev-ok {
  color: #7d8aa0;
}

.src-icon.sev-warn {
  color: var(--accent);
}

.src-icon.sev-error {
  color: var(--danger);
}

.src-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-sub {
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted);
}

.src-count {
  flex: none;
  margin-right: 12px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.src-count.c-warn {
  color: var(--accent);
}

.src-count.c-error {
  color: var(--danger);
}

/* worded top-level badge ("11 errors" / "3 warnings") */
.src-count.badge {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
}

.src-count.badge.c-error {
  background: rgb(217 106 90 / 14%);
}

.src-count.badge.c-warn {
  background: rgb(232 163 61 / 14%);
}

/* ---- datasets page -------------------------------------------------------- */

.datasets {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.datasets-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  padding: 0px 16px 16px;
}

/* Skills sidebar and the main episode area are each a rounded panel. */
.datasets-page-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.datasets-side {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  overflow-y: auto;
  min-height: 0;
}

.datasets-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden; /* clip the episode list/player to the rounded corners */
}

.datasets-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
}

/* skill roster */
.skillpanel-head {
  padding: 18px 16px 12px;
}

.skillpanel-count {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.skill-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  color: var(--text);
}

.skill-row:hover {
  background: rgb(255 255 255 / 3%);
}

/* selected skill — same highlight as the training page's selected run */
.skill-row.active {
  background: var(--accent-faint);
  box-shadow: inset 2px 0 0 var(--accent);
}

.skill-row.active .skill-name {
  color: var(--accent);
}

.skill-name {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-count {
  flex: none;
  font-size: 10px;
  color: var(--muted);
}

/* episode detail */
.episodes {
  /* shared grid template so the column header and rows line up */
  --ep-grid: minmax(0, 1.6fr) 1fr 0.7fr 0.95fr 56px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.episodes-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
}

.episodes-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.episodes-sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.episodes-ready {
  color: var(--ok);
}

.episodes-preparing {
  color: var(--accent);
}

.episodes-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.episodes-search {
  width: 180px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  color: var(--text);
}

.episodes-search:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.episodes-tool {
  height: 32px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

.episodes-tool:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}

/* "+ Collect" is an <a> jumping to the Collect page — match the tool height
   and tint it as the primary action on the episode list. */
.episodes-collect {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--accent);
  border-color: var(--accent-dim);
}

.episodes-collect:hover {
  color: var(--accent);
  background: var(--accent-faint);
}

.episodes-colhead {
  display: grid;
  grid-template-columns: var(--ep-grid);
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.episodes-colhead .col {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.episodes-rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}

.episode-row {
  display: grid;
  grid-template-columns: var(--ep-grid);
  align-items: center;
  gap: 16px;
  padding: 9px 20px;
}

.episode-row:hover {
  background: rgb(255 255 255 / 3%);
}

.episode-row.clickable {
  cursor: pointer;
}

/* hovered episode — same highlight as the training page's selected run */
.episode-row.clickable:hover {
  background: var(--accent-faint);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ep-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ep-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5a5a63;
}

.episode-ready .ep-dot {
  background: var(--ok);
}

.episode-preparing .ep-dot {
  background: var(--accent);
}

.ep-thumb {
  flex: none;
  width: 84px;
  height: 48px;
  border-radius: 7px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--hairline);
}

.ep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ep-id {
  font-size: 14px;
  color: var(--text);
}

.ep-recorded {
  font-size: 13px;
  color: var(--muted);
}

.ep-duration {
  font-size: 13px;
  color: var(--muted);
}

/* label dropdown (shared by the list column and the player header) */
.ep-label {
  display: flex;
  align-items: center;
}

.ep-label-select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a8a93' stroke-width='1.4'/></svg>")
    no-repeat right 9px center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 5px 26px 5px 11px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ep-label-select:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.ep-label-select.is-success {
  color: var(--ok);
}

.ep-label-select.is-fail {
  color: var(--danger);
}

.ep-label-select option {
  color: var(--text);
  background: var(--panel);
}

/* row actions (prepare / delete) */
.ep-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.ep-action-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--muted);
  opacity: 0.75;
}

.ep-action-btn:hover {
  opacity: 1;
  background: rgb(255 255 255 / 6%);
}

.ep-action-btn.ep-delete:hover {
  color: var(--danger);
}

.episodes-foot {
  flex: none;
  margin: 0;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

.episode-prepare {
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 11px;
  color: var(--text);
}

.episode-prepare:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.episode-prepare:disabled {
  color: var(--muted);
  cursor: progress;
}

/* episode player (MP4 replay) */
.datasets-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.episode-player {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 16px;
  padding: 16px 20px 18px;
  overflow-y: auto;
}

/* breadcrumb header */
.player-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.player-headinfo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* skill title — same look as the episode-list title; clickable to go back */
.player-title {
  text-align: left;
  color: var(--text);
}

.player-title:hover {
  color: var(--accent);
}

.player-subrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-nav {
  display: flex;
  gap: 4px;
}

.player-navbtn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  font-size: 15px;
  line-height: 1;
  color: var(--text);
}

.player-navbtn:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.player-navbtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.player-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-delete {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12px;
  color: var(--muted);
}

.player-delete:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

.player-delete:disabled {
  opacity: 0.5;
  cursor: progress;
}


/* video pair */
.video-pair {
  display: flex;
  gap: 12px;
  /* Size to the videos' own height (each cell follows its frame's aspect),
     rather than absorbing leftover vertical space and clamping the videos to
     whatever fits the screen. The player scrolls if the frames are tall. */
  align-items: flex-start;
}

.video-cell {
  position: relative;
  flex: 1; /* equal half-widths */
  min-width: 0;
  background: #000;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}

.video-cell video {
  display: block;
  width: 100%;
  height: auto; /* height follows the frame's aspect — scales with width, never clamped */
}

.video-cell-label {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  text-shadow: 0 1px 3px rgb(0 0 0 / 70%);
}

.video-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5a5a63;
}

.video-dot.live {
  background: var(--ok);
}

/* transport pill */
.episode-transport {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.transport-btn {
  flex: none;
  height: 30px;
  min-width: 34px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: color 120ms ease, background 120ms ease;
}

.transport-btn:hover {
  color: var(--text);
  background: rgb(255 255 255 / 5%);
}

.transport-play {
  width: 40px;
  height: 40px;
  margin: 0 2px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
}

.transport-play:hover {
  background: var(--accent-faint);
  color: var(--accent);
}

.transport-speed {
  color: var(--text);
}

.transport-time {
  flex: none;
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--muted);
}

/* scrubber — custom track: amber fill up to --pct, hairline beyond */
.transport-scrub {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 100%;
  height: 16px;
  background: transparent;
  cursor: pointer;
}

.transport-scrub::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) var(--pct, 0%),
    var(--hairline-strong) var(--pct, 0%)
  );
}

.transport-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  transition: box-shadow 120ms ease;
}

.transport-scrub:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px var(--accent-faint);
}

.transport-scrub::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--hairline-strong);
}

.transport-scrub::-moz-range-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.transport-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
}

/* telemetry panel (datasets episode player — distinct from the Teleop
   .telemetry strip; same name previously collided and stacked the Teleop bar) */
.player-telemetry {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.telemetry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.telemetry-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.telemetry-plot {
  position: relative;
  /* Fixed, compact height so the joint graph doesn't hog vertical space — the
     video pair (flex: 1) takes the rest and the frames can show in full. */
  height: 190px;
  flex: none;
}

.telemetry-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.telemetry-playhead {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.8;
}

.telemetry-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
  pointer-events: none;
}

/* hover guide + value tooltip */
.telemetry-hoverline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline-strong);
  pointer-events: none;
}

.telemetry-tip {
  position: absolute;
  top: 6px;
  z-index: 2;
  min-width: 92px;
  padding: 7px 9px;
  background: rgb(8 8 10 / 92%);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  transform: translateX(10px);
  pointer-events: none;
}

.telemetry-tip.flip {
  transform: translateX(calc(-100% - 10px));
}

.tip-time {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hairline);
  font-size: 10px;
  color: var(--muted);
}

.tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.tip-label {
  color: var(--muted);
  min-width: 18px;
}

.tip-val {
  margin-left: auto;
  color: var(--text);
}

/* ---- training page -------------------------------------------------------- */

.training {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex; /* dashboard | run detail pane */
}

.training-dash,
.training-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.training-dash {
  flex: 1;
  min-width: 0;
}

.training-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
}

.training-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.training-sub {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.training-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.training-train-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  font-size: 12px;
  color: var(--accent);
}

.training-train-btn:hover {
  background: var(--accent-faint);
}

.training-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 24px;
}

.training-hero-host {
  padding: 0 16px;
}

/* "Running now" hero card */
.run-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px 20px;
  margin: 10px 0 6px;
}

.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ok);
}

.hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}

.hero-title:hover {
  color: var(--accent);
}

.hero-badge {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #5a8dee;
  background: rgb(90 141 238 / 14%);
  border-radius: 999px;
  padding: 2px 8px;
}

.hero-meta {
  font-size: 12px;
  color: var(--muted);
}

.hero-step {
  font-size: 13px;
  margin-top: 2px;
}

.hero-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* run detail pane (right column) */
.training-detail {
  flex: none;
  width: 384px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid var(--hairline);
  background: var(--panel);
}

/* Collapse the pane entirely when nothing is selected. */
.training-detail:has(.run-detail.is-empty) {
  display: none;
}

.run-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.rd-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 8px 0;
}

.rd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.rd-title {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}

.rd-close {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}

.rd-close:hover {
  color: var(--text);
}

.rd-statusrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.rd-section {
  margin: 8px 0 -4px;
}

.rd-progress-line {
  font-size: 12px;
  color: var(--muted);
}

.rd-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
  border-bottom: 1px solid var(--hairline);
}

.rd-k {
  color: var(--muted);
}

.rd-v {
  text-align: right;
  word-break: break-word;
}

.rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* skill group */
.skill-group {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 12px;
  padding-bottom: 6px;
  overflow: hidden; /* clip row hover/selected highlight to the rounded corners */
}

.skill-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 20px 8px;
}

.skill-group-name {
  font-size: 14px;
  font-weight: 500;
}

.skill-group-meta {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
}

.skill-group-train {
  flex: none;
  font-size: 12px;
  color: var(--accent);
}

.skill-group-train:hover {
  color: var(--text);
}

.skill-group-empty {
  padding: 4px 20px 6px;
  font-size: 12px;
  color: var(--muted);
}

/* dataset sync row */
.skill-group-dataset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 20px 10px;
}

.skill-group-dataset .tbar {
  flex: 1;
  max-width: 520px;
}

/* run outcome chip */
.run-outcome {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
}

.oc-checking {
  color: var(--muted);
  background: rgb(255 255 255 / 6%);
}

.oc-ok {
  color: var(--ok);
  background: rgb(86 194 140 / 12%);
}

.oc-fail {
  color: var(--danger);
  background: rgb(217 106 90 / 14%);
}

/* logs modal */
.modal.modal-lg {
  width: 860px;
  height: 80%;
  max-height: 100%;
}

.logs-head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logs-filesel {
  max-width: 360px;
}

.logs-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok);
  animation: logs-live-pulse 1.6s ease-in-out infinite;
}

@keyframes logs-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.logs-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.log-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.log-line.is-stderr {
  color: var(--muted);
}

.log-line.is-err {
  color: var(--danger);
}

/* run row */
.run-row {
  display: grid;
  /* Fixed-width actions track (not `auto`): each row is its own grid, so an
     `auto` track would size to that row's buttons and the fr columns would
     reflow — making the meta line shift left on rows that have buttons.
     Reserving a constant width keeps the left/meta columns aligned across rows. */
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) 240px;
  /* Baseline-align so the label, instance/meta line, and buttons sit on one
     line even when the middle column is taller (progress bar / error below). */
  align-items: baseline;
  gap: 16px;
  padding: 10px 20px;
  cursor: pointer;
}

.run-row:hover {
  background: rgb(255 255 255 / 3%);
}

.run-row.is-selected {
  background: var(--accent-faint);
  box-shadow: inset 2px 0 0 var(--accent);
}

.run-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.run-id {
  font-size: 13px;
  color: var(--muted);
}

.run-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a5a63;
}

.run-dot.s-1 { background: var(--accent); }
.run-dot.s-2,
.run-dot.s-4 { background: #5bc0de; }
.run-dot.s-5 { background: #5a8dee; }
.run-dot.s-6,
.run-dot.s-7 { background: var(--ok); }
.run-dot.s-3 { background: var(--danger); }
.run-dot.s-8 { background: #5a5a63; }

.run-btn.run-cancel:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

.run-label {
  font-size: 13px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.run-daemon {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.run-meta {
  font-size: 11px;
  color: var(--muted);
}

.run-error {
  font-size: 11px;
  color: var(--danger);
}

.run-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.run-btn {
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text);
}

.run-btn:hover:not(:disabled) {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.run-btn:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: default;
}

/* transfer / running progress bar */
.tbar {
  position: relative;
  height: 16px;
  border-radius: 5px;
  background: rgb(255 255 255 / 6%);
  overflow: hidden;
}

.tbar-fill {
  height: 100%;
  background: var(--accent-dim);
  transition: width 200ms ease;
}

.tbar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 10px;
  color: var(--text);
}

.tbar-indeterminate .tbar-fill {
  width: 35%;
  animation: tbar-slide 1.4s ease-in-out infinite;
}

@keyframes tbar-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* configure modal */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 55%);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 5;
}

.modal {
  width: 420px;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
}

.modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.modal-close {
  font-size: 14px;
  color: var(--muted);
}

.modal-close:hover:not(:disabled) {
  color: var(--text);
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-field-label {
  font-size: 12px;
  color: var(--muted);
}

.modal-hint {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
}

.modal-select,
.modal-input {
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.modal-select:focus,
.modal-input:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.modal-epline {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.modal-hyper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid var(--hairline);
}

.modal-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.modal-check input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.modal-warn {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
  min-height: 1em;
}

.modal-status {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
}

.modal-start {
  margin-top: 4px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 11px 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.modal-start:hover:not(:disabled) {
  background: var(--accent-faint);
}

.modal-start:disabled {
  color: var(--muted);
  border-color: var(--hairline-strong);
  cursor: default;
}

/* training empty state (no local runs) */
.training-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.training-empty p {
  margin: 0;
  max-width: 320px;
  color: var(--muted);
}

.training-empty-btn {
  border: 1px solid var(--accent-dim);
  border-radius: 9px;
  padding: 11px 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.training-empty-btn:hover {
  background: var(--accent-faint);
}

/* ---- motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- profiling page ----------------------------------------------------- */
/* Record-and-graph view for ACT inference timing. Inherits .page-head /
   .page-title from the shared header. Note: the class is .profiling-page, not
   .profiling — the latter is the teleop overlay panel (absolute, 232px, pinned
   top-right), and sharing it would leak that positioning onto this full page. */

.profiling-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.prof-sub {
  align-self: center;
}

.prof-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.prof-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.prof-live[data-state="live"] .prof-live-dot {
  background: var(--ok);
}
.prof-live[data-state="rec"] .prof-live-dot {
  background: var(--danger);
  animation: prof-pulse 1.2s ease-in-out infinite;
}
@keyframes prof-pulse {
  50% { opacity: 0.25; }
}

.prof-btn {
  padding: 7px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  font-size: 12px;
}
.prof-btn:hover {
  border-color: var(--accent-dim);
}
.prof-btn-rec.active {
  border-color: var(--danger);
  color: var(--danger);
}

.prof-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prof-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.prof-stat {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
}
.prof-stat.warn {
  border-color: var(--danger);
}
.prof-stat-label {
  margin-bottom: 6px;
}
.prof-stat-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
}
.prof-stat.warn .prof-stat-value {
  color: var(--danger);
}
.prof-stat-foot {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.prof-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.prof-chart-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px 16px;
  background: var(--panel);
  min-width: 0;
}
.prof-chart-card:first-child {
  grid-column: 1 / -1;
}
.prof-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.prof-chart-title {
  font-size: 13px;
  font-weight: 600;
}
.prof-chart-body {
  min-height: 120px;
}

.prof-svg {
  width: 100%;
  height: 200px;
  display: block;
  border-bottom: 1px solid var(--hairline);
}
.prof-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.prof-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.prof-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.prof-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.prof-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 70px;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.prof-bar-name {
  font-size: 12px;
  color: var(--text);
}
.prof-bar-track {
  height: 14px;
  border-radius: 4px;
  background: var(--hairline);
  overflow: hidden;
}
.prof-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.2s ease;
}
.prof-bar-val {
  text-align: right;
  font-size: 12px;
  color: var(--muted);
}

.prof-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: var(--muted);
}
.prof-hint {
  text-align: center;
}

@media (max-width: 720px) {
  .prof-charts {
    grid-template-columns: 1fr;
  }
}