/* =============================================================================
   Lab visual tokens
   Forge:  @import "../theme/tokens.css";   (from src/)
   Board:  <link rel="stylesheet" href="tokens.css">

   Canonical names are --lab-*. Forge already reads these (with hex fallbacks).
   Do not rename --lab-bg, --lab-ch1, --lab-copper, etc.

   Unprefixed aliases (--bg, --phos-a, …) match the written direction so
   either name works. Prefer --lab-* in product CSS.

   Feel: precision instrument on a bench. Flush milled plates, 1px hairlines,
   almost no drop shadows, tight density. Phosphor + copper are the only
   saturated notes. Not SaaS, not a toy kit, not cyberpunk, not graph paper.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Surfaces — charcoal chassis, flush milled-aluminum plates
     Separate planes with hairlines, not elevation.
     --------------------------------------------------------------------------- */
  --lab-bg: #0E1114;                 /* chassis / app ground */
  --lab-bg-raised: #161B20;          /* milled plate: chrome, rail, bezel */
  --lab-bg-inset: #050607;           /* wells: CRT, numeric pits */
  --lab-canvas: #12151A;             /* sandbox work surface (slightly warm) */
  --lab-bg-panel: #12161A;           /* chip tray / in-between plate */
  --lab-bg-hover: #1C232A;           /* raised, hovered — still flush */
  --lab-bg-active: #0C1014;          /* pressed / selected well */

  /* ---------------------------------------------------------------------------
     Lines
     --------------------------------------------------------------------------- */
  --lab-border: #2A3138;             /* default 1px hairline */
  --lab-border-strong: #3A444D;      /* selected plate, readout frame */
  --lab-hairline: 1px;
  --lab-select: #F2F4F6;             /* selected symbol: 1px white, no fill */
  --lab-edge-hi: rgba(230, 232, 235, 0.06); /* milled highlight (top of plate) */
  --lab-edge-lo: rgba(0, 0, 0, 0.45);       /* milled shade / well lip */

  /* ---------------------------------------------------------------------------
     Type color
     --------------------------------------------------------------------------- */
  --lab-text: #E6E8EB;               /* primary; also schematic symbol stroke */
  --lab-text-dim: #8B939C;           /* secondary, units, inactive chrome */
  --lab-text-mute: #737C86;          /* R12 video pass (Cook): was #5C656E (3.19:1 on --lab-bg) -> 4.47:1 */

  /* ---------------------------------------------------------------------------
     Phosphor — one family, not a rainbow
     CH1 is primary. Glow is bloom/persistence, not a second hue.
     Fault is saturated and rare — never a theme accent.
     --------------------------------------------------------------------------- */
  --lab-ch1: #7CFF6B;                /* Trace A / CH1 */
  --lab-ch1-glow: rgba(124, 255, 107, 0.35); /* R12 video pass (Cook): was #3DFF9A (bluer halo tinted the trace teal); same hue as --lab-ch1, weaker */
  --lab-ch2: #FFB347;                /* Trace B / CH2 */
  --lab-highlight: #7CFF6B;          /* net highlight in schematic (same value as --lab-ch1) */
  --lab-warn: var(--lab-ch2);         /* badge / check warning (GUI1) */
  --lab-error: var(--lab-fault);      /* badge / check failure (GUI1) */
  --lab-ok: var(--lab-ch1);           /* badge / check pass (GUI1) */
  --lab-ch3: #5CE1FF;                /* Trace C / CH3 / cursor */
  --lab-current-dot: var(--lab-ch3);  /* R8 (Analog): current-flow dots / reduced-motion arrows (distinct from green net highlight + copper wires) */
  --lab-fault: #FF3D2E;              /* clip / alert. Use sparingly. */
  --lab-ch1-dim: rgba(124, 255, 107, 0.22);
  --lab-ch1-tail: rgba(61, 255, 154, 0.18);
  --lab-ch2-dim: rgba(255, 179, 71, 0.22);
  --lab-ch2-tail: rgba(255, 179, 71, 0.16);
  --lab-ch3-dim: rgba(92, 225, 255, 0.22);

  /* ---------------------------------------------------------------------------
     Sandbox
     Wires and node pads: copper. Symbols stroke --lab-text, not copper.
     Grid is dim green-gray, not pastel, not full phosphor.
     --------------------------------------------------------------------------- */
  --lab-copper: #C4783A;
  --lab-copper-dim: rgba(196, 120, 58, 0.45);
  --lab-grid: rgba(126, 148, 132, 0.06); /* R12 video pass (Cook): was 0.10, calmer minor grid */
  --lab-grid-major: rgba(126, 148, 132, 0.14); /* R12 video pass (Cook): was 0.18 */
  --lab-wire-w: 1.5px;
  --lab-rail-w: 168px;
  --lab-row-h: 32px;                  /* parts rail row — do not inflate */
  --lab-snap: 8px;
  --lab-snap-major: 40px;

  /* ---------------------------------------------------------------------------
     Oscilloscope
     CRT is a recessed well of true black, not a chart card.
     --------------------------------------------------------------------------- */
  --lab-scope-well: var(--lab-bg-inset);
  --lab-scope-grid: rgba(126, 148, 132, 0.14);
  --lab-scope-axis: rgba(126, 148, 132, 0.28);
  --lab-trace-w: 1.35px;              /* core beam; bloom is extra strokes */
  /* R12 (Cook): scope canvas text sizes. Defaults = the values scope-panel.js hardcodes today (10/11/12 px);
     read by scope-panel.js only once Layout wires them in (see docs/overhaul/R12-gui-benchmark.md, fix pass). */
  --lab-scope-fs-sm: 10px;            /* trigger mark "T" */
  --lab-scope-fs: 11px;               /* CH labels, V/div, s/div readouts */
  --lab-scope-fs-lg: 12px;            /* centred "Waiting for trigger" box */
  /* R12 video pass (Cook): floating widget card chrome. Not consumed yet: Layout points app.css html.lab-float
     --wgt-r / --wgt-bd (L502) and .lab-wgt box-shadow (L530) at these. */
  --lab-wgt-radius: 14px;
  --lab-wgt-border: rgba(255, 255, 255, 0.08);
  --lab-wgt-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);

  /* ---------------------------------------------------------------------------
     Type — system stacks (--font-ui / --font-mono, R8). No web fonts: the app is offline.
     UI: 12 / 14 / 16. Chrome may drop to 11. Readouts: mono + tabular lining.
     --------------------------------------------------------------------------- */
  /* Overhaul R8 (Layout, Thesus): system font stacks only (offline, no web fonts). Everything uses these variables. */
  --font-ui: -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lab-font-sans: var(--font-ui);
  --lab-font-mono: var(--font-mono);

  --lab-fs-10: 10px;                  /* rail captions, CRT corner marks */
  --lab-fs-11: 11px;                  /* chrome labels, compact readouts */
  --lab-fs-12: 12px;                  /* body UI */
  --lab-fs-14: 14px;                  /* numeric pits */
  --lab-fs-16: 16px;                  /* rare: a primary measurement */

  --lab-weight-regular: 400;
  --lab-weight-medium: 500;
  --lab-weight-semi: 600;

  --lab-lh: 1.25;
  --lab-lh-tight: 1.1;
  --lab-tracking-caps: 0.08em;        /* LAB, TIME, TRIG, PARTS */

  /* ---------------------------------------------------------------------------
     Space — 4 / 8 / 12 / 16 / 24. Default chrome inset is 8, not 16.
     --------------------------------------------------------------------------- */
  --lab-space-4: 4px;
  --lab-space-8: 8px;
  --lab-space-12: 12px;
  --lab-space-16: 16px;
  --lab-space-24: 24px;

  --lab-header-h: 32px;               /* top bar, rail header, chip row */
  --lab-control-h: 24px;

  /* ---------------------------------------------------------------------------
     Radius — 2–4px max. Never 8. Never a pill.
     --------------------------------------------------------------------------- */
  --lab-radius-2: 2px;
  --lab-radius-4: 4px;

  /* ---------------------------------------------------------------------------
     Z — canvas under chrome. Keep it boring.
     --------------------------------------------------------------------------- */
  --lab-z-base: 0;
  --lab-z-canvas: 1;
  --lab-z-rail: 2;
  --lab-z-chrome: 10;
  --lab-z-overlay: 20;
  --lab-z-tooltip: 30;

  /* ---------------------------------------------------------------------------
     Motion — chrome 120ms ease, no bounce. Scope traces are 60fps, not CSS.
     --------------------------------------------------------------------------- */
  --lab-dur: 120ms;
  --lab-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ===========================================================================
     Brief aliases (unprefixed). Prefer --lab-* in product CSS.
     =========================================================================== */
  --bg: var(--lab-bg);
  --bg-raised: var(--lab-bg-raised);
  --bg-inset: var(--lab-bg-inset);
  --bg-panel: var(--lab-bg-panel);
  --bg-hover: var(--lab-bg-hover);
  --bg-active: var(--lab-bg-active);
  --border: var(--lab-border);
  --border-strong: var(--lab-border-strong);
  --edge-hi: var(--lab-edge-hi);
  --edge-lo: var(--lab-edge-lo);
  --text: var(--lab-text);
  --text-dim: var(--lab-text-dim);
  --text-mute: var(--lab-text-mute);
  --phos-a: var(--lab-ch1);
  --phos-a-glow: var(--lab-ch1-glow);
  --phos-b: var(--lab-ch2);
  --phos-c: var(--lab-ch3);
  --phos-fault: var(--lab-fault);
  --phos-grid: var(--lab-grid);
  --sandbox-canvas: var(--lab-canvas);
  --sandbox-grid: var(--lab-grid);
  --sandbox-grid-major: var(--lab-grid-major);
  --sandbox-copper: var(--lab-copper);
  --sandbox-select: var(--lab-select);
  --sandbox-rail-row: var(--lab-row-h);
  --sandbox-rail-w: var(--lab-rail-w);
  --scope-well: var(--lab-scope-well);
  --font-readout: var(--font-mono);
  --fs-12: var(--lab-fs-12);
  --fs-14: var(--lab-fs-14);
  --fs-16: var(--lab-fs-16);
  --fw-reg: var(--lab-weight-regular);
  --fw-med: var(--lab-weight-medium);
  --lh-ui: var(--lab-lh);
  --tracking-label: var(--lab-tracking-caps);
  --sp-1: var(--lab-space-4);
  --sp-2: var(--lab-space-8);
  --sp-3: var(--lab-space-12);
  --sp-4: var(--lab-space-16);
  --sp-5: var(--lab-space-24);
  --hairline: var(--lab-hairline);
  --chrome-h: var(--lab-header-h);
  --r-2: var(--lab-radius-2);
  --r-4: var(--lab-radius-4);
  --radius: var(--lab-radius-2);
  --radius-max: var(--lab-radius-4);
  --z-chrome: var(--lab-z-chrome);
  --z-rail: var(--lab-z-rail);
  --dur: var(--lab-dur);
  --ease: var(--lab-ease);

  /* size aliases already referenced by some look-boards */
  --lab-size-xs: var(--lab-fs-11);
  --lab-size-sm: var(--lab-fs-12);
  --lab-size-md: var(--lab-fs-14);
  --lab-size-lg: var(--lab-fs-16);
  --lab-line: var(--lab-lh);
  --lab-space-1: var(--lab-space-4);
  --lab-space-2: var(--lab-space-8);
  --lab-space-3: var(--lab-space-12);
  --lab-space-5: var(--lab-space-24);
  --lab-radius-sm: var(--lab-radius-2);
  --lab-radius: var(--lab-radius-4);
}

html { color-scheme: dark; }

.readout,
[data-readout] {
  font-family: var(--lab-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   LED body colours (ui/part-states.js stateGlyph). Part colours only — never
   chrome accents. Tuned to read on --lab-canvas / --lab-bg (dark only; the
   theme has no light scheme). Red is kept off --lab-fault so a lit red LED
   never reads as an alert.
   --------------------------------------------------------------------------- */
:root {
  --led-red: #FF6A5C;
  --led-green: #52E08A;
  --led-yellow: #FFD84D;
  --led-blue: #5B9BFF;
  --led-white: #F3F0E6;
}

/* Relay / contactor coil energized (ui/part-states.js). Aliases the phosphor
   accent so "energized" reads the same as a conducting contact. */
:root {
  --coil-on: var(--lab-ch1);
  --coil-on-dim: var(--lab-ch1-dim);
}

/* R12 (Cook, benchmark item 9): touch screens get a thicker beam and larger scope text.
   --lab-trace-w is already read live by scope-panel.js; the --lab-scope-fs* tokens need Layout's hookup. */
@media (pointer: coarse) {
  :root {
    --lab-trace-w: 2.5px; /* R12 video pass (Cook): was 2px */
    --lab-scope-fs-sm: 11px;
    --lab-scope-fs: 12px;
    --lab-scope-fs-lg: 13px;
  }
}

/* R12 layout switch (floating vs classic). Look owned by Cook; wiring by Layout.
   .lab-switch[aria-checked="true"] = floating on. */
:root {
  --lab-switch-w: 44px;
  --lab-switch-h: 26px;
  --lab-switch-thumb: 22px;
  --lab-switch-hit: 44px;                         /* min tap target */
  --lab-switch-track: var(--lab-bg-inset);        /* off: dark well */
  --lab-switch-track-border: var(--lab-border-strong);
  --lab-switch-track-on: var(--lab-ch3);          /* on: cursor cyan */
  --lab-switch-thumb-bg: var(--lab-text);         /* off thumb */
  --lab-switch-thumb-on: #FFFFFF;                 /* on thumb */
  --lab-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
  --lab-switch-ring: 0 0 0 2px var(--lab-bg), 0 0 0 4px var(--lab-ch3);
  --lab-switch-dur: 180ms;
  --lab-switch-ease: cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* R12 value slider (Properties card). Matches the layout switch. Look owned by Cook; wiring by Analog. */
:root {
  --lab-slider-hit: 44px;                          /* min tap row height */
  --lab-slider-track-h: 4px;
  --lab-slider-track: var(--lab-switch-track);     /* unfilled: dark well */
  --lab-slider-track-border: var(--lab-switch-track-border);
  --lab-slider-fill: var(--lab-switch-track-on);   /* filled: cursor cyan */
  --lab-slider-thumb: 28px;                        /* touch thumb (Analog: >=28) */
  --lab-slider-thumb-bg: var(--lab-switch-thumb-on);
  --lab-slider-thumb-shadow: var(--lab-switch-thumb-shadow);
  --lab-slider-ring: var(--lab-switch-ring);
  --lab-slider-dur: var(--lab-switch-dur);
}

/* Inspector value slider skin (Cook). Wins over Analog's :where() baseline. */
.insp-slider-row { min-height: var(--lab-slider-hit); display: flex; align-items: center; min-width: 0; max-width: 100%; box-sizing: border-box; padding-inline: 2px calc(var(--lab-slider-thumb) / 2); }
input.insp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; height: var(--lab-slider-hit); margin: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
input.insp-slider::-webkit-slider-runnable-track {
  height: var(--lab-slider-track-h); border-radius: 999px;
  border: 1px solid var(--lab-slider-track-border);
  background: linear-gradient(to right,
    var(--lab-slider-fill) 0 var(--fill, 0%),
    var(--lab-slider-track) var(--fill, 0%) 100%);
}
input.insp-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--lab-slider-thumb); height: var(--lab-slider-thumb);
  margin-top: calc((var(--lab-slider-track-h) - var(--lab-slider-thumb)) / 2 - 1px);
  border-radius: 50%; border: 0;
  background: var(--lab-slider-thumb-bg);
  box-shadow: var(--lab-slider-thumb-shadow);
  transition: transform var(--lab-slider-dur) var(--lab-switch-ease);
}
input.insp-slider:active::-webkit-slider-thumb { transform: scale(1.08); }
input.insp-slider:focus-visible { outline: none; }
input.insp-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--lab-slider-thumb-shadow), var(--lab-slider-ring); }
input.insp-slider::-moz-range-track {
  height: var(--lab-slider-track-h); border-radius: 999px;
  border: 1px solid var(--lab-slider-track-border); background: var(--lab-slider-track);
}
input.insp-slider::-moz-range-progress {
  height: var(--lab-slider-track-h); border-radius: 999px; background: var(--lab-slider-fill);
}
input.insp-slider::-moz-range-thumb {
  width: var(--lab-slider-thumb); height: var(--lab-slider-thumb);
  border-radius: 50%; border: 0;
  background: var(--lab-slider-thumb-bg); box-shadow: var(--lab-slider-thumb-shadow);
}
input.insp-slider:focus-visible::-moz-range-thumb { box-shadow: var(--lab-slider-thumb-shadow), var(--lab-slider-ring); }
input.insp-slider:disabled { opacity: 0.4; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  input.insp-slider::-webkit-slider-thumb { transition: none; }
}