bambu-rs 0.1.0

/* Instrument / telemetry styling: a dense, hairline-ruled readout with tabular
   monospace numerics and a single amber signal accent — a machine panel, not a
   card grid. Mobile-first; widens gracefully. Dark by default, light fallback. */
:root {
  --bg: #0d0c0b; /* warm near-black so the amber accent + greys read as one family */
  /* panels sit one step above the page: a faintly warmer surface so each region
     (camera / controls / temps …) reads as a distinct plate, not a hairline box
     floating in the void. --panel-2 is the next step up, for floating UI. */
  --panel: #181611;
  --panel-2: #211e18;
  --fg: #e4e2dd;
  --dim: #9a958b; /* warm grey, ~6.4:1 on --bg — secondary text/units/targets */
  --label: #b5afa3; /* uppercase legends: brighter than --dim so groups have a head */
  --hair: #ffffff3b;
  --hair-2: #ffffff0a;
  --ring: #ffffff5c; /* 3.3:1 — meets the non-text contrast minimum for edges/borders */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45); /* barely-there lift on dark */
  --accent: #d8a657; /* amber readout */
  --accent-2: #e8c08a;
  --ok: #8fb573;
  --warn: #d8a657;
  --err: #ea6962;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Light palette: applied when the user picks light explicitly, or — in `auto`
   (no data-theme) — when the OS prefers light. data-theme="dark" keeps the
   :root dark defaults above. */
:root[data-theme="light"],
:root[data-theme="light"] body {
  --bg: #faf9f7;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --fg: #21242b;
  --dim: #5f636b;
  --label: #474b53;
  --hair: #00000033;
  --hair-2: #0000000a;
  --ring: #00000040;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --accent: #b4801f;
  --accent-2: #936614;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #faf9f7;
    --panel: #ffffff;
    --panel-2: #ffffff;
    --fg: #21242b;
    --dim: #5f636b;
    --label: #474b53;
    --hair: #00000033;
    --hair-2: #0000000a;
    --ring: #00000040;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    --accent: #b4801f;
    --accent-2: #936614;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  /* system-ui at 400 renders thin in this dense readout; nudge the base up */
  font-weight: 450;
  -webkit-text-size-adjust: 100%;
}

.term {
  max-width: 1680px;
  margin: 0 auto;
  padding: max(0.5rem, env(safe-area-inset-top)) clamp(0.75rem, 4vw, 1.75rem)
    max(1.25rem, env(safe-area-inset-bottom));
}

/* Monitoring-first layout: a vertical stack of rows. The hero row pairs the
   camera(s) with the vital readouts; the ops row pairs controls with the machine
   panel; files/health/footer span the full width. On a phone everything
   collapses to one column with the vitals first (you glance at state, not video,
   on a small screen). */
.dash {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dash__status,
.dash__hero {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dash__left,
.dash__control {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
@media (min-width: 900px) {
  /* status band: the big status leads, AMS readout beside it */
  .dash__status {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
  }
  .dash__status > * {
    flex: 1 1 240px;
    min-width: 0;
  }
  .dash__status > .span-all {
    flex: 2 1 340px; /* the prominent FAILED/RUNNING + progress readout */
  }
  /* camera+temps (left) | controls (right) side by side below the status band */
  .dash__hero {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
  }
  .dash__left {
    flex: 1.1 1 360px;
  }
  .dash__control {
    flex: 1 1 320px;
  }
}
/* sub-sections folded into the controls panel (machine, AMS) — each set off by a
   rule so the one panel still reads as distinct groups */
.cfold {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
}
@media (min-width: 2600px) {
  .term {
    max-width: 2040px;
  }
}
.panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
  box-shadow: var(--shadow);
}
.span-all {
  grid-column: 1 / -1;
}

/* labels: the small uppercase legend under/over every value */
.lbl {
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--label);
}
/* Two tiers of legend: structural group headings (a panel's own title and each
   folded sub-section — block-level div.lbl, or the .secline header) sit one step
   above the inline field micro-labels (PROGRESS / WIFI / units) that share .lbl,
   so the eye can find group boundaries before reading values. */
div.lbl,
.secline > .lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fg);
}
.dim {
  color: var(--dim);
}

/* header */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0 0.7rem;
  border-bottom: 1px solid var(--hair);
}
.hdr__brand {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hdr__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.theme {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.conn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}
.conn .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--dim);
}
.conn--live .dot {
  background: var(--ok);
  animation: pulse 2s infinite;
}
.conn--connecting .dot {
  background: var(--warn);
}
.conn--offline .dot {
  background: var(--err);
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 181, 115, 0.5);
  }
  70% {
    box-shadow: 0 0 0 0.35rem rgba(143, 181, 115, 0);
  }
}

.waiting {
  font-family: var(--mono);
  color: var(--dim);
  padding: 2rem 0;
}

/* sections separated by hairlines, not boxes */
.sec {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
}
.secline {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

/* job / state */
.job {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.state {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.state--running {
  color: var(--ok);
}
.state--pause {
  color: var(--warn);
}
.state--failed,
.state--offline {
  color: var(--err);
}
.state--finish {
  color: var(--accent);
}
.job__meta {
  margin-left: auto;
  text-align: right;
  min-width: 0;
}
.job__file {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--fg);
  word-break: break-all;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
  margin-top: 0.3rem;
}
.chip {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--dim);
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}
.chip.warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
/* Hardware/connectivity cluster pinned to the band's top-right: the nozzle spec
   sits beside the WiFi meter, both keeping their size so the filename shrinks. */
/* hardware/connectivity status row inside the maintenance panel: nozzle spec + WiFi */
.mstat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.jobspec {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  white-space: nowrap;
}

/* progress bar */
.bar {
  height: 0.55rem;
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 3px;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}
/* While running, the bar is green (matches the RUNNING state) — amber is kept
   for attention/heating, so a full amber bar doesn't read as a warning. */
.bar__fill--running {
  background: var(--ok);
}
.bar__fill--prep {
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px);
}

.readline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 0.8rem;
  align-items: baseline;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Primary telemetry (progress / layer / eta) reads large and co-equal with the
   state token — the most-glanced numbers. */
.val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}
.val--big {
  font-size: 1.9rem;
  font-weight: 650;
  color: var(--accent);
  line-height: 1;
}

/* temperature */
.temps {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* one tier per metric: value, then its own graph filling the middle, then its
   set/cool control. Wraps on narrow widths so the control drops to its own line
   rather than squeezing the graph to nothing. */
.temprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}
.temprow .tr {
  flex: 0 0 auto;
  min-width: 5.5rem;
}
.temprow .spark {
  /* basis 0 so the graph fills only the leftover after the readout and control,
     rather than claiming its content width and shoving the control to wrap. */
  flex: 1 1 0;
  min-width: 5rem;
  height: 40px;
  margin: 0;
}
/* Inline per-metric set/cool: a compact input + buttons trailing the readout. */
.tctl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.tctl__in {
  width: 4.2rem;
  flex: none;
}
.tr {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tr__v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 8vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
}
.tr__v--accent {
  color: var(--accent);
}
.tr__u {
  font-size: 0.8rem;
  color: var(--dim);
  margin-left: 0.15rem;
}
.tr__t {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}

/* sparkline (oscilloscope trace) */
.spark {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0.7rem 0 0.5rem;
}
.spark--empty {
  border-bottom: 1px dashed var(--hair);
}
.spark polyline {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.spark__nozzle {
  stroke: var(--accent);
}
.spark__bed {
  stroke: var(--dim);
}

/* fans */
.fans {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}
.fan {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.fan__v {
  font-variant-numeric: tabular-nums;
}
.fan--warn .fan__v {
  color: var(--err);
}
.fan__warn {
  margin-left: 0.3rem;
  font-size: 0.7rem;
  color: var(--err);
  white-space: nowrap;
}

/* AMS */
.swap {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--warn);
}
/* RFID reader state, pushed to the right edge of the AMS header. A ✓/✕ shape (not
   colour alone) keeps it readable (CUD). Kept neutral (--dim) on purpose: ✕ is not a
   fault — see amsRfidReads / AmsSection for why we no longer warn on it. */
.amslink {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  white-space: nowrap;
}
/* The AMS rack: a horizontal row of filament SPOOLS (colour is the hero),
   wrapping onto multiple rows on narrow/phone widths. */
.rack {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.7rem;
}
/* A thin hairline divider that sets the external spool slightly apart. */
.rack__sep {
  align-self: stretch;
  width: 1px;
  min-height: 52px;
  margin: 0 0.15rem;
  background: var(--hair);
}

.spool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  width: 64px;
  padding: 0.1rem 0;
}

/* The spool face: an outer ring filled with the filament colour and a hollow
   hub punched out with the panel background, edged by --ring (a stronger,
   ~25% contrast token, not the faint --hair) so even near-black / near-white
   filament stays visible on both themes. */
.spool__disc {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  --fil: var(--hair-2);
  background:
    radial-gradient(circle, var(--bg) 0 32%, transparent 32.5%),
    var(--fil);
  box-shadow:
    inset 0 0 0 1px var(--ring),
    0 0 0 1px var(--ring);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
/* The hub gets its own ring so the centre hole reads as a real hole. */
.spool__disc::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ring);
}

/* Empty slot: dashed grey ring, no fill, no hub punch. */
.spool--empty .spool__disc {
  background: none;
  box-shadow: none;
  border: 1px dashed var(--dim);
}
.spool--empty .spool__disc::before {
  content: none;
}
.spool--empty .spool__id {
  color: var(--dim);
}

/* Active (loaded): accent glow ring + a small loaded marker. Never colour-only:
   the ring widens and the id row carries an explicit marker dot. */
.spool--active .spool__disc {
  box-shadow:
    inset 0 0 0 1px var(--ring),
    0 0 0 2px var(--accent),
    0 0 8px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.spool__load {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--bg);
}
.spool--active .spool__id {
  color: var(--accent);
  font-weight: 650;
}

/* Swap target (being loaded): dashed accent ring. */
.spool--target .spool__disc {
  box-shadow:
    inset 0 0 0 1px var(--hair),
    0 0 0 1px var(--accent);
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.spool__id {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--fg);
  text-align: center;
  line-height: 1.15;
}
.spool__mat {
  color: var(--dim);
}
.spool__rem {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--dim);
}
.amsmeta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.74rem;
}
/* AMS humidity as a 5-segment dryness meter (filled humid→dry up to the level):
   a discrete readout gauge, not a track-and-thumb — the thumb read as an operable
   slider. End labels + inline word carry direction/verdict without colour (CUD). */
.hum {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--dim);
}
.hum__end {
  white-space: nowrap;
}
.hum__meter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hum__seg {
  width: 0.7rem;
  height: 6px;
  border-radius: 2px;
  background: var(--hair);
}
/* Filled segments take the tone colour; more filled = drier. */
.hum--ok .hum__seg.is-on {
  background: var(--ok);
}
.hum--warn .hum__seg.is-on {
  background: var(--warn);
}
.hum--err .hum__seg.is-on {
  background: var(--err);
}

/* WiFi signal meter: a row of 4 bars whose filled count + tone colour + the dBm
   text all carry strength (CUD — not colour alone). Sits in the Overview band's
   top-right corner; keeps its size so the filename shrinks instead. */
.wifi {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
}
.wifi__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  height: 0.85rem;
}
/* Stepped bars (short→tall) so the shape reads as signal strength even in mono. */
.wifi__bar {
  width: 3px;
  background: var(--hair);
  border-radius: 1px;
}
.wifi__bar:nth-child(1) {
  height: 30%;
}
.wifi__bar:nth-child(2) {
  height: 55%;
}
.wifi__bar:nth-child(3) {
  height: 78%;
}
.wifi__bar:nth-child(4) {
  height: 100%;
}
.wifi--ok .wifi__bar.is-on {
  background: var(--ok);
}
.wifi--warn .wifi__bar.is-on {
  background: var(--warn);
}
.wifi--err .wifi__bar.is-on {
  background: var(--err);
}
.wifi__v {
  font-variant-numeric: tabular-nums;
}

/* health / alerts */
.sec--health .lbl.alert {
  color: var(--err);
}
.arow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  border-left: 3px solid var(--dim);
  background: var(--hair-2);
  border-radius: 0 4px 4px 0;
}
.arow.sev-1,
.arow.sev-err {
  border-left-color: var(--err);
}
.arow.sev-2 {
  border-left-color: var(--warn);
}
.arow.sev-3 {
  border-left-color: var(--accent);
}
/* severity badge: a colour-independent level cue (text), tinted to match the
   border. The number distinguishes sev-2 from sev-3, which share an amber hue. */
.sev-tag {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--dim);
  white-space: nowrap;
}
.sev-1 .sev-tag,
.sev-tag--err {
  color: var(--err);
  border-color: var(--err);
}
.sev-2 .sev-tag {
  color: var(--warn);
  border-color: var(--warn);
}
.sev-3 .sev-tag {
  color: var(--accent);
  border-color: var(--accent);
}
.acode {
  font-family: var(--mono);
  font-weight: 600;
}
/* verified plain-language cause shown next to a device error code */
.emsg {
  font-size: 0.78rem;
  color: var(--fg);
}
.arow a {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.74rem;
  text-decoration: none;
}
.arow a:hover {
  text-decoration: underline;
}

/* footer chips */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
}
.fchip {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.fchip__v {
  font-family: var(--mono);
  font-size: 0.84rem;
}

.auth-err {
  color: var(--err);
  max-width: 32rem;
}

/* ── controls ────────────────────────────────────────────────────────────── */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
/* A button row set apart on its own tier by a hairline (e.g. the heavier
   calibrate/reboot routines below the everyday AMS/stepper actions). */
.btns--sep {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hair);
}
.btn {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--fg);
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) {
  border-color: var(--accent);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
/* Disabled: keep the full-opacity outline (so the control still reads as a
   button that's present) but mute the label and drop every hover/variant
   affordance — inert, not invisible. */
.btn:disabled {
  color: var(--dim);
  cursor: default;
}
.btn--sm {
  font-size: 0.74rem;
  padding: 0.3rem 0.5rem;
}
/* Primary job controls (pause / resume / stop) sit at the end of the telemetry
   line, beside the progress/eta readouts — right where your eye already is on a
   running print. Pushed to the far right, centred against the baseline-aligned
   readouts, and don't-shrink so they stay hittable as the row tightens. */
.jobctl {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}
.btn--job {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.7rem;
}
/* The glyph carries the meaning (pause/resume/stop), so size it up — the word
   lives in title/aria-label for hover + assistive tech. line-height:1 keeps the
   button from growing taller than the box. */
.jobctl__icon {
  font-size: 1.5rem;
  line-height: 1;
}
.btn--danger:not(:disabled) {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 45%, transparent);
}
.btn--danger:hover:not(:disabled) {
  border-color: var(--err);
}
/* Dialog primary actions are FILLED so the affirmative choice reads by weight/
   fill, not colour alone — cancel stays a quiet outline beside it, so which
   button executes is unmistakable (and CUD-safe). Ink is a fixed near-black:
   it clears AA on both the dark and light accent/err fills. */
.btn--primary,
.btn--danger-solid {
  color: #14110a;
  font-weight: 650;
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn--danger-solid {
  background: var(--err);
  border-color: var(--err);
}
.btn--danger-solid:hover:not(:disabled) {
  background: color-mix(in srgb, var(--err) 88%, #fff);
  border-color: color-mix(in srgb, var(--err) 88%, #fff);
}
/* Active state for the speed segmented control: accent border + text and a
   touch more weight — never color-only, so it reads without hue too. */
.btn.is-active {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 650;
}
/* Light toggle: a small status dot, dim when off/unknown, accent when on. */
.light-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* The indicator reads as a little lamp: a dim unlit bead when off, a warm bead
   that glows (casts light via the box-shadow) when on — so "the light is on" is
   unmistakable, not just an accent recolour. The warm hue is fixed, not themed:
   a bulb is yellow regardless of the dashboard palette. */
.light-toggle .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--dim);
  border: 1px solid var(--hair);
  flex: none;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}
.light-toggle.is-on {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 650;
}
.light-toggle.is-on .dot {
  background: #ffd76b;
  border-color: #ffcf52;
  box-shadow:
    0 0 6px 2px rgba(255, 206, 92, 0.7),
    0 0 2px 1px rgba(255, 230, 160, 0.9);
}
.pwrow {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.7rem;
}
.pw {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
}
.pw:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  /* Above .modal (z-index 50) so an action's confirmation toast stays visible even when
     a dialog is open. */
  z-index: 60;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 30rem);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: var(--panel-2, #1e2127);
  color: var(--fg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.toast--ok {
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
.toast--warn {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}
.toast--err {
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  color: var(--err);
}
/* CUD: the leading glyph (✓ / ⚠ / ✕) carries the kind by shape; colour reinforces */
.toast__icon {
  margin-right: 0.4rem;
  font-weight: 700;
}
.toast--ok .toast__icon {
  color: var(--ok);
}
.toast--warn .toast__icon {
  color: var(--warn);
}
.toast--err .toast__icon {
  color: var(--err);
}

/* ── confirm modal ───────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  /* A fixed overlay with no z-index paints in the same "stack-level 0" group as any
     position:relative content (e.g. the AMS spool discs). Painting then follows DOM
     tree order, so panels rendered AFTER the modal's subtree (the AMS panel) punch
     THROUGH the scrim. A positive z-index lifts the whole overlay into its own layer
     above all such page content. (Toast sits one above so confirmations stay visible.) */
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}
.modal__box {
  background: var(--panel-2);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 1.2rem;
  max-width: 24rem;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  /* Tall dialogs (the start dialog with the 3D viewer + form) must scroll within the
     viewport, not push their action buttons off-screen — esp. on a phone. */
  max-height: 90vh;
  overflow-y: auto;
}
.modal__msg {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

/* ── github link ─────────────────────────────────────────────────────────── */
.ghlink {
  display: inline-flex;
  align-items: center;
  color: var(--dim);
}
.ghlink:hover {
  color: var(--fg);
}

/* ── files ───────────────────────────────────────────────────────────────── */
.btn--busy {
  opacity: 0.6;
  cursor: default;
}
.files__msg {
  font-family: var(--mono);
  font-size: 0.76rem;
  margin: 0.2rem 0 0.4rem;
}
.filelist {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* Aligned columns so it reads like a real filer: [icon] [name…] [size] [action].
   Every row renders all four cells (empty where N/A) so names and sizes line up. */
.filerow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 4.6rem 3.6rem;
  align-items: center;
  gap: 0 0.6rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
}
.filerow--dir,
.filerow--file {
  cursor: pointer;
}
.filerow:hover {
  border-color: var(--hair);
  background: var(--hair-2);
}
.fname {
  font-family: var(--mono);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fname--up {
  letter-spacing: 0.1em;
}

/* ── start-print dialog ──────────────────────────────────────────────────── */
.startform {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.startrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.startnum {
  width: 5rem;
}
/* clean-timelapse capability, inspected from the file on open — a small tinted note
   so you know before arming whether the head will actually park for this print. */
.start__tlcap {
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--hair);
  margin-left: 1.6rem; /* align under the checkbox label, past the box */
}
.start__tlcap--ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 9%, transparent);
}
.start__tlcap--warn {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}
/* points at the feature's other half (the camera-panel capture), so the two
   "timelapse" controls read as one flow. */
.start__tlhint {
  margin: 0;
  margin-left: 1.6rem;
  font-size: 0.66rem;
  line-height: 1.35;
}

/* ── gcode console ───────────────────────────────────────────────────────── */
.gcoderow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.gcoderow .pw {
  flex: 1;
  min-width: 8rem;
}

/* On small phones the spool rack centres its wrapped rows so the spools sit
   evenly rather than left-stacking against the edge. */
@media (max-width: 430px) {
  .rack {
    justify-content: center;
    gap: 0.7rem 0.9rem;
  }
}

/* ── machine control (jog / temp / filament / maintenance) ───────────────── */
/* Each maintenance block is a hairline-separated sub-group under the panel. */
.msub {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hair);
}
.msub:first-of-type {
  margin-top: 0.7rem;
}
/* The machine fold no longer carries its own "machine" title — its first group
   (move) opens directly under the .cfold rule, so drop that group's redundant
   second hairline + spacing and let the fold rule do the separating. */
.cfold > .msub:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* The jog control reads as a printer bed (3×3 XY pad) with the gantry (Z
   column) beside it — an axes diagram you can press. */
.jog {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 0.55rem;
}
/* concentric XY jog dial (SVG): a wedge per direction, a ring per step. Width is
   bumped past the visual dial so the padded viewBox (-4..104) keeps the rings the
   same physical size while the axis labels get room outside them. */
.dial {
  display: block;
  width: min(18.5rem, 78vw);
  aspect-ratio: 1;
  touch-action: manipulation;
}
.dial--off {
  opacity: 0.4;
  pointer-events: none;
}
.dial__seg path {
  stroke: var(--panel);
  stroke-width: 0.7;
  cursor: pointer;
  transition: fill 0.1s;
}
/* Keyboard focus: the segments/home are SVG, not <button>, so paint our own ring
   (accent stroke) instead of the UA outline, which traces the wedge bbox oddly. */
.dial__seg path:focus-visible,
.dial__home:focus-visible {
  outline: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}
/* Resting fills: warm amber-tinted concentric bands, more saturated outward so the
   coarse 10 mm ring reads as the "big move" and the fine .1 mm as the inner trim. */
.dial__seg--r0 path {
  fill: color-mix(in srgb, var(--accent) 10%, transparent);
}
.dial__seg--r1 path {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
}
.dial__seg--r2 path {
  fill: color-mix(in srgb, var(--accent) 28%, transparent);
}
.dial__seg:hover path {
  fill: color-mix(in srgb, var(--accent) 58%, transparent);
}
.dial__seg:active path {
  fill: var(--accent);
}
.dial__num {
  fill: var(--label);
  font-size: 5px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.dial__axis {
  fill: var(--fg);
  font-size: 5.4px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
/* Centre home: the bed origin — accent-edged + accent glyph so it reads as the datum. */
.dial__home {
  fill: var(--panel-2);
  stroke: color-mix(in srgb, var(--accent) 50%, var(--hair));
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.1s;
}
.dial__home:hover {
  fill: color-mix(in srgb, var(--accent) 28%, var(--panel-2));
}
.dial__home-glyph {
  fill: var(--accent);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Z jog ladder: a vertical stack echoing the dial — Z+ rungs above the centre datum,
   Z- below, magnitude growing outward (coarse 10 mm at the ends, fine .1 mm nearest). */
.zstack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 3.4rem;
}
.zstack__datum {
  text-align: center;
  line-height: 1;
  padding: 0.05rem 0;
}
.zrung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.34rem 0.4rem;
  border: 1px solid var(--hair);
  border-radius: 7px;
  color: var(--fg);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition:
    background 0.1s,
    border-color 0.1s;
}
/* Same amber progression as the dial rings: bigger move = more prominent rung. */
.zrung--r0 {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.zrung--r1 {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.zrung--r2 {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
}
.zrung:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}
.zrung:active:not(:disabled) {
  background: var(--accent);
}
.zrung:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.zrung__dir {
  font-size: 0.85rem;
  color: var(--dim);
}
.zrung__mag {
  font-size: 0.78rem;
  font-weight: 600;
}
.zrung:hover:not(:disabled) .zrung__dir {
  color: var(--accent);
}

/* Segmented control: extrude length picker. */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.seg__opt {
  font-variant-numeric: tabular-nums;
}

/* Calibration picker modal: a short intro, a list of toggleable routines (each a name +
   one-line description), then a motion warning before the run button. */
.cal__intro {
  font-size: 0.78rem;
  margin: 0.2rem 0 0.7rem;
}
.cal__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cal__item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
}
.cal__item input {
  margin-top: 0.15rem;
}
.cal__item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.cal__item-name {
  font-size: 0.84rem;
}
.cal__item-desc {
  font-size: 0.72rem;
}
.cal__warn {
  margin: 0.85rem 0 0.2rem;
  font-size: 0.76rem;
  color: var(--warn);
}

/* ── cameras (built-in over TCP:6000 + external server-proxied IP cam) ────── */
.cam__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cam__manage {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: none;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
}
.cam__manage:hover {
  border-color: var(--ring);
}
/* tabs: browser-style — rounded tops sitting on a baseline, with the active tab
   raised and merging into the camera view below it. */
.cam__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 0.6rem;
  align-items: flex-end;
  border-bottom: 1px solid var(--ring);
}
.cam__tab {
  font-size: 0.84rem;
  color: var(--dim);
  background: var(--hair-2);
  border: 1px solid var(--ring);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 0.36rem 0.9rem;
  margin-bottom: -1px; /* overlap the strip baseline so the active tab can cut it */
  line-height: 1.2;
  cursor: pointer;
}
.cam__tab:hover {
  color: var(--fg);
}
.cam__tab--on,
.cam__tab--on:hover {
  color: var(--fg);
  font-weight: 600;
  background: var(--bg); /* match the view below so the tab "opens" into it */
  border-color: var(--ring);
  border-bottom: 1px solid var(--bg); /* punch through the baseline under the active tab */
}
/* the active view connects directly under the tab strip (no gap, square top), and
   shares the stronger border so the whole tab→view outline reads as one shape */
.cam__tabs + .cam__frame {
  margin-top: 0;
}
.cam__tabs + .cam__frame .cam__view {
  border-color: var(--ring);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cam__empty {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--dim);
}
.cam__frame {
  position: relative;
  margin-top: 0.55rem;
}
.cam__view {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
/* A configured-but-not-streaming source (e.g. the A1 built-in cam is off): hide
   the broken frame and show a quiet message instead. */
.cam__view--off {
  opacity: 0;
}
.cam__msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--dim);
  pointer-events: none;
}
/* live ↔ park view toggle, floated over the frame's top-right (park-capable cams) */
.cam__toggle {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 1;
  display: flex;
  border: 1px solid var(--hair);
  border-radius: 6px;
  overflow: hidden;
}
.cam__toggle-btn {
  font-size: 0.64rem;
  padding: 0.15rem 0.5rem;
  color: var(--dim);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border: none;
  cursor: pointer;
}
.cam__toggle-btn--on {
  color: var(--bg);
  background: var(--accent);
}
.cam__toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* park player: a video-player-style review of the captured per-layer park frames —
   a framed frame, a transport row (first/prev/play/next/latest), a scrubber, and a
   frame counter. Used live (tailing the tip) and after a run stops (review-only). */
.pp {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pp__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
/* empty strip: a framed box holding the centered "no frames yet" message */
.pp--empty {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
}
.pp__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.7rem;
  color: var(--fg);
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 5px;
  cursor: pointer;
}
.pp__btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.pp__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* play/pause: accent-filled so it reads as the primary transport action */
.pp__btn--play {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.pp__btn--play:hover:not(:disabled) {
  color: var(--bg);
  filter: brightness(1.06);
}
.pp__scrub {
  flex: 1;
  min-width: 3rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.pp__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the live-tail indicator: a recording-red dot, the livestream convention */
.pp__live {
  font-size: 0.62rem;
  color: var(--err);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pp__meta {
  font-family: var(--mono);
  font-size: 0.64rem;
}

/* manage form: add/remove external cameras at runtime */
.cam__row-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* per-camera park tuning editor (collapsible JSON) */
.cam__park {
  margin: 0 0 0.15rem 0.1rem;
}
.cam__park-sum {
  font-size: 0.66rem;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.cam__park-json {
  width: 100%;
  margin-top: 0.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--fg);
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  resize: vertical;
  box-sizing: border-box;
}
.cam__form {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cam__row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.cam__row--actions {
  justify-content: space-between;
  margin-top: 0.2rem;
}
.cam__in {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.25rem 0.4rem;
  color: var(--fg);
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.cam__in--label {
  flex: 0 0 5.5rem;
}
.cam__rm,
.cam__btn {
  font-size: 0.7rem;
  color: var(--dim);
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.cam__btn--save {
  color: var(--fg);
  border-color: var(--accent);
}
.cam__status {
  font-size: 0.68rem;
  color: var(--dim);
}
.cam__hint {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--dim);
}
.cam__hint code {
  font-size: 0.66rem;
  color: var(--fg);
}
.cam__hint--empty {
  padding: 0.1rem 0;
}
.cam__row--head {
  margin-top: 0.1rem;
}
.cam__col {
  flex: 1 1 auto;
  min-width: 0;
}
.cam__col--label {
  flex: 0 0 5.5rem;
}
.cam__col--rm {
  flex: 0 0 1.7rem;
}
/* timelapse capture controls under the camera view: a header (label + target selector),
   then one self-describing row per mode (name + what it captures + start/stop), so it's
   obvious what each does instead of a row of cryptic bulleted buttons. */
.cam__tl {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.7rem;
  font-size: 0.72rem;
}
.cam__tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
/* the this-cam / all-cams target toggle reuses the segmented control, sans top margin */
.seg--target {
  margin-top: 0;
}
/* secondary framing under the "recording" header (manual controls are not the primary
   path — recording arms at print start). */
.cam__tl-cap {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.35;
}
/* a "now recording" row: type label · live readout · stop */
.cam__rec-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--hair);
  border-radius: 7px;
  background: var(--hair-2);
}
.cam__rec-name {
  font-weight: 600;
  font-size: 0.74rem;
}
.cam__rec-row .cam__tl-rec {
  margin-left: auto; /* push the readout + stop to the right */
}
/* the unified record control: what-to-record segmented + optional interval + record */
.cam__rec {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.seg--rectype {
  margin-top: 0;
}
.seg--method {
  margin-top: 0;
}
.cam__rec-every {
  font-size: 0.72rem;
}
/* the record button — the recording-red convention: a red dot + red outline, so it
   reads as "record" at a glance (the design's accent is amber elsewhere). */
.cam__rec-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  font-weight: 600;
}
.cam__rec-go:hover:not(:disabled) {
  border-color: var(--err);
  background: color-mix(in srgb, var(--err) 12%, transparent);
}
/* idle: a hollow red RING — the "press to record" affordance. A FILLED dot reads as
   "recording now", so reserve that for the actual recording state below. */
.cam__rec-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  border: 2px solid var(--err);
  box-sizing: border-box;
  flex-shrink: 0;
}
/* while that type IS recording (button disabled), fill + pulse the dot. */
.cam__rec-go:disabled .cam__rec-dot {
  background: var(--err);
  animation: rec-pulse 1.3s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.cam__rec-hint {
  font-size: 0.66rem;
  line-height: 1.3;
}
.cam__tl-rec {
  color: var(--accent);
  font-weight: 600;
}
/* a failing capture (e.g. camera offline) reads red, not the calm accent, so
   "0 frames · N failed" doesn't masquerade as healthy recording. */
.cam__tl-rec--warn {
  color: var(--err);
}
/* active-camera type caption (multi-cam), so per-tab capture wording reads as
   "different cameras", not the UI rewording itself. */
.cam__camtype {
  font-size: 0.66rem;
  margin-top: 0.4rem;
}
.cam__tl-secs {
  width: 2.8rem;
  text-align: right;
}
.cam__tl-msg {
  font-size: 0.7rem;
}
/* manage dialog (floating) — wider than the default confirm box for URL inputs */
.modal__box--cam {
  max-width: 34rem;
}
.cam__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
/* recordings list (the captures modal) */
.cam__head-actions {
  display: flex;
  gap: 0.4rem;
}
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rec-run {
  border: 1px solid var(--hair);
  border-radius: 7px;
  padding: 0.5rem 0.6rem;
  background: var(--hair-2);
}
.rec-run__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.rec-run__label {
  font-weight: 600;
  font-size: 0.8rem;
  word-break: break-word;
}
.rec-cam {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.3rem 0;
}
/* The poster: a 16:9 thumbnail tile with a centered ▶ overlay; click to play inline. */
.rec-cam__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
  background: var(--hair-2);
  cursor: pointer;
}
.rec-cam__poster:hover {
  border-color: var(--accent);
}
.rec-cam__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The ▶ overlay: a translucent disc so it reads on any frame; brightens on hover. */
.rec-cam__playicon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: #fff;
  font-size: 1rem;
  padding-left: 0.15rem; /* optically center the triangle */
}
.rec-cam__poster:hover .rec-cam__playicon {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: var(--bg);
}
.rec-cam__info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Enlarged-player lightbox: a bigger overlay above the recordings modal (z-index 50) so
   the video plays large without leaving the dashboard. */
.rec-light {
  z-index: 55;
}
.rec-light__box {
  width: min(94vw, 1100px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rec-light__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--fg);
}
.rec-light__title {
  font-weight: 600;
  font-size: 0.85rem;
  word-break: break-word;
}
.rec-light__video {
  display: block;
  width: 100%;
  max-height: 80vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.rec-kind {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--hair);
  color: var(--dim);
  flex-shrink: 0;
}
.rec-kind--park,
.rec-kind--smooth {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.rec-kind--video {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.rec-cam__meta {
  font-size: 0.7rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-cam__open {
  margin-left: auto;
  flex-shrink: 0;
}
.cam__row--head .cam__col,
.cam__row--head .cam__col--label {
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── thumbnails (embedded plate preview) ─────────────────────────────────── */
.thumb {
  display: block;
  object-fit: contain;
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  image-rendering: auto;
}
.thumb--job {
  width: 56px;
  height: 56px;
  flex: none;
}
/* The plate preview paints over the file glyph, filling the icon tile. Its own opaque
   background hides the glyph underneath when a preview exists. */
.thumb--row {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}

/* ── file browser ────────────────────────────────────────────────────────── */
.files__head {
  align-items: center;
  flex-wrap: wrap;
}
.path {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim);
}
.files__spacer {
  flex: 1;
}
/* The leading icon tile — same 34px slot for every row, so names align. Files get a
   framed tile (matching the plate thumbnail); folders get a flat accent glyph. */
.ficon {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.ficon svg {
  display: block;
}
.ficon--file {
  background: var(--hair-2);
  border: 1px solid var(--hair);
  border-radius: 6px;
  color: var(--dim);
}
.ficon--folder {
  color: var(--accent-2);
}
.filerow--dir .fname {
  color: var(--accent-2);
}
.fsize {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--dim);
  text-align: right;
  white-space: nowrap;
}
/* The navigate-into chevron sits in the action column, right-aligned. */
.frow__chev {
  color: var(--dim);
  text-align: right;
  font-size: 1rem;
}
.filerow__print {
  justify-self: end;
}
.filelist__empty {
  padding: 0.4rem 0.45rem;
  font-size: 0.78rem;
}

/* start-print dialog */
.modal__box--start {
  max-width: min(92vw, 32rem);
  width: 100%;
}
.start__head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.thumb--start {
  width: 64px;
  height: 64px;
  flex: none;
}
.start__name {
  display: block;
  font-family: var(--mono);
  font-size: 0.9rem;
  word-break: break-all;
}
.start__help {
  font-size: 0.74rem;
  line-height: 1.4;
  margin: 0.5rem 0;
}
.btn--go:not(:disabled) {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.btn--go:hover:not(:disabled) {
  border-color: var(--ok);
}

/* ── 3D viewer (embeddable engine: file detail + pre-print dialog) ────────── */
.modelview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.viewer__modes {
  display: flex;
  gap: 0.3rem;
}
.viewer__canvas {
  width: 100%;
  height: min(52vh, 460px);
  border: 1px solid var(--hair);
  border-radius: 8px;
  overflow: hidden;
  /* White→grey studio backdrop (the WebGL clear is transparent over this). */
  background: linear-gradient(180deg, #fdfdfe 0%, #d6dade 100%);
}
.viewer__dims {
  font-family: var(--mono);
  font-size: 0.76rem;
  margin-top: 0.4rem;
}
/* Toolpath playback: play/pause + a scrubber + a percent readout. */
.viewer__play {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.viewer__scrub {
  flex: 1;
  accent-color: var(--accent);
}
.viewer__pct {
  min-width: 2.8em;
  text-align: right;
  font-size: 0.8rem;
  color: var(--dim);
}
.viewer__status {
  font-family: var(--mono);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* ── File detail screen (metadata + embedded viewer) ─────────────────────── */
.modal__box--detail {
  max-width: min(94vw, 980px);
  width: 100%;
}
.detail__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.detail__name {
  font-family: var(--mono);
  font-size: 0.8rem;
  word-break: break-all;
}
.detail__close {
  margin-left: auto;
}
.detail__body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.detail__info {
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.detail__body .modelview {
  flex: 1;
}
.thumb--detail {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
}
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  margin: 0;
  font-size: 0.8rem;
}
.kv dt {
  color: var(--dim);
}
.kv dd {
  margin: 0;
  font-family: var(--mono);
  word-break: break-all;
}
.kv__path {
  font-size: 0.72rem;
}
.detail__print {
  align-self: flex-start;
}
@media (max-width: 640px) {
  .detail__body {
    flex-direction: column;
  }
  .detail__info {
    flex: none;
    width: 100%;
  }
}