/* ─────────────────────────────────────────────────────────────────
   Arrange — v10 · Apparat
   German: apparatus, instrument. v9's vocabulary cleaned and expanded.

   What v10 changes from v9:
     - Knob tickmarks no longer overlap the rotating cap.
     - Rocker indicator dot floats cleanly above its cell, not into it.
     - Pips are physical pucks-in-cuts (rocker grammar at small scale).
     - Toggle off-state shows hairline detent dots in the empty slot.

   What v10 adds:
     - .step       — minus / number / plus, recessed mono readout.
     - .lever      — pivoting handle, up/center/down positions.
     - .tumbler    — vertical 3-number wheel, current value bold-centered.
     - .gauge-strip — discrete segmented bar (the dial replacement).
     - .holdpad    — press-and-hold confirmation pad with progress ring.

   Each mechanism is its own mechanical idea, not a button variant.
   ───────────────────────────────────────────────────────────────── */

@layer tokens, base, primitives, components, utilities;

/* ─────────────────────────────────────────────────────────────────
   A. TOKENS
   ───────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Field — clean white, less warm than v3/v4, less pillowy than v8 */
    --field:        #fbfaf6;
    --field-2:      #f3f1ec;
    --field-3:      #ebe9e2;
    --field-edge:   rgba(20, 18, 14, 0.08);

    /* Compatibility aliases — keep all prior version token names */
    --surface:        var(--field);
    --surface-2:      var(--field-2);
    --surface-3:      var(--field-3);
    --surface-edge:   var(--field-edge);
    --plane:          var(--field);
    --plane-2:        var(--field-2);
    --plane-3:        var(--field-3);
    --plane-edge:     var(--field-edge);
    --paper:          var(--field);
    --paper-2:        var(--field-2);
    --paper-3:        var(--field-3);

    /* Ink — neutral graphite */
    --ink:            #1c1b18;
    --ink-2:          #4a4842;
    --ink-3:          #8a877f;

    /* Hairline rules — the v6 inheritance */
    --rule:           rgba(20, 18, 14, 0.16);
    --rule-soft:      rgba(20, 18, 14, 0.08);
    --rule-strong:    rgba(20, 18, 14, 0.26);
    --hair:           1px;

    /* Cut tokens — a cut is the SAME COLOR as the surrounding field.
       Depth is communicated by inset shadows ONLY. The cut interior is
       the field's own material, just shadowed. State (filled/empty)
       changes the background to the enamel color, never to "dark."     */
    --cut-fill:       var(--field);     /* empty cut = field color, period */
    --cut-rim:        rgba(0, 0, 0, 0.22);
    --cut-rim-strong: rgba(0, 0, 0, 0.32);
    --cut-rim-light:  rgba(255, 255, 255, 0.55);

    /* Enamel palette — real pigment, not RGB-primary. Desaturated so
       a colored mark on a paper field reads as oxide/ochre/jade/plum
       rather than fire-engine red or electric blue. Saturation lives
       just above "neutral" — visible at a glance, never aggressive.   */
    --enamel-vermilion: #9c4338;
    --enamel-cobalt:    #3a4f72;
    --enamel-emerald:   #3b6850;
    --enamel-gold:      #957532;
    --enamel-amethyst:  #5e4670;
    --enamel-burnt:     #92602e;

    --enamel-vermilion-soft: rgba(156, 67, 56, 0.10);
    --enamel-cobalt-soft:    rgba(58, 79, 114, 0.10);
    --enamel-emerald-soft:   rgba(59, 104, 80, 0.10);
    --enamel-gold-soft:      rgba(149, 117, 50, 0.12);
    --enamel-amethyst-soft:  rgba(94, 70, 112, 0.10);
    --enamel-burnt-soft:     rgba(146, 96, 46, 0.12);

    --enamel-vermilion-line: rgba(156, 67, 56, 0.55);
    --enamel-cobalt-line:    rgba(58, 79, 114, 0.55);
    --enamel-emerald-line:   rgba(59, 104, 80, 0.50);
    --enamel-gold-line:      rgba(149, 117, 50, 0.55);
    --enamel-amethyst-line:  rgba(94, 70, 112, 0.55);
    --enamel-burnt-line:     rgba(146, 96, 46, 0.55);

    /* Legacy orange aliases remain, but the default action color is cobalt. */
    --orange:         var(--enamel-burnt);
    --orange-soft:    var(--enamel-burnt-soft);
    --orange-line:    var(--enamel-burnt-line);
    --orange-strong:  #9f5217;

    --accent:         var(--enamel-cobalt);
    --accent-ink:     #ffffff;
    --accent-wash:    var(--enamel-cobalt-soft);
    --accent-line:    var(--enamel-cobalt-line);
    --accent-strong:  #162f73;

    --status-positive:      var(--enamel-emerald);
    --status-positive-wash: var(--enamel-emerald-soft);
    --status-warning:       var(--enamel-gold);
    --status-warning-wash:  var(--enamel-gold-soft);
    --status-negative:      var(--enamel-vermilion);
    --status-negative-wash: var(--enamel-vermilion-soft);
    --status-info:          var(--enamel-cobalt);
    --status-info-wash:     var(--enamel-cobalt-soft);

    /* Type */
    --font-sans:    "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --w-regular: 400;
    --w-medium:  500;
    --w-bold:    600;

    --t-xs:  11px;
    --t-sm:  13px;
    --t-md:  15px;
    --t-lg:  18px;
    --t-xl:  26px;
    --t-2xl: 40px;
    --t-3xl: 56px;

    --lh-tight: 1.12;
    --lh-base:  1.5;

    --tracking-eyebrow:    0.10em;
    --tracking-display:    -0.018em;
    --tracking-display-xl: -0.024em;
    --tracking-label:      0.02em;

    /* Space (4px scale) */
    --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 96px;

    /* Radius — pillowy where it makes sense, sharper for cuts */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:  14px;
    --r-xl:  20px;
    --r-pill: 999px;

    /* Motion */
    --m-instant: 100ms;
    --m-quick:   160ms;
    --m-base:    260ms;
    --m-slow:    380ms;
    --ease:      cubic-bezier(0.2, 0, 0, 1);
    --ease-soft: cubic-bezier(0.32, 1.18, 0.42, 1);
    --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-roll:  cubic-bezier(0.4, 0.0, 0.2, 1);  /* for the rolling ball */

    /* ════════════════════════════════════════════════════════════
       CUTS — depressions made into the field.
       Reads as material-removed, not as surface-darkened.
       Sharper top-edge dark line + soft bottom highlight read as a CUT.
       ════════════════════════════════════════════════════════════ */
    --cut-shallow:
      inset 0 1px 2px rgba(20, 18, 14, 0.10),
      inset 0 1px 0 rgba(20, 18, 14, 0.10),
      inset 0 -1px 0 rgba(255, 255, 255, 0.70);
    --cut-mid:
      inset 0 2px 4px rgba(20, 18, 14, 0.14),
      inset 0 1px 0 rgba(20, 18, 14, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.80);
    --cut-deep:
      inset 0 3px 7px rgba(20, 18, 14, 0.18),
      inset 0 1px 0 rgba(20, 18, 14, 0.18),
      inset 0 -1px 0 rgba(255, 255, 255, 0.85);
    --cut-deepest:
      inset 0 5px 12px rgba(20, 18, 14, 0.22),
      inset 0 1px 0 rgba(20, 18, 14, 0.22),
      inset 0 -1px 0 rgba(255, 255, 255, 0.85);

    /* Compatibility — pocket names alias to cut */
    --pocket-shallow: var(--cut-shallow);
    --pocket-mid:     var(--cut-mid);
    --pocket-deep:    var(--cut-deep);
    --rout-shallow:   var(--cut-shallow);
    --rout-mid:       var(--cut-mid);
    --rout-deep:      var(--cut-deep);
    --rout-deepest:   var(--cut-deepest);
    --inset-cut:      var(--cut-mid);
    --inset-deep:     var(--cut-deep);

    /* ════════════════════════════════════════════════════════════
       PUCKS — pieces that sit IN cuts. Mostly the rolling balls,
       knob caps, and rocker buttons. Subtle elevation (the field's
       light catches their top edge).
       ════════════════════════════════════════════════════════════ */
    /* Flat-but-dimensional pucks. The dimensionality comes from the
       relationship between the puck and its void (or its containing
       cut), not from rendering tricks. Single hairline edge ring +
       one 1px sharp drop = enough to read as a discrete object.       */
    --puck-flush:
      0 0 0 1px rgba(20, 18, 14, 0.10);
    --puck-resting:
      0 0 0 1px rgba(20, 18, 14, 0.12),
      0 1px 0 rgba(20, 18, 14, 0.08);
    --puck-extruded:
      0 0 0 1px rgba(20, 18, 14, 0.14),
      0 1.5px 0 rgba(20, 18, 14, 0.10);

    /* Field-card ambient — the field rests slightly above the page */
    --field-ambient:
      0 1px 2px rgba(20, 18, 14, 0.04),
      0 6px 18px rgba(20, 18, 14, 0.05);

    /* Legacy compatibility */
    --e0: 0 0 0 0 transparent;
    --e1: var(--puck-resting);
    --e2: var(--puck-extruded);
    --e3: var(--field-ambient);

    /* Control metrics */
    --control-h-sm: 28px;
    --control-h-md: 36px;
    --control-h-lg: 46px;
  }

  [data-theme="ink"] {
    --field:    #1c1c19;
    --field-2:  #232320;
    --field-3:  #2b2b27;
    --field-edge: rgba(255, 248, 235, 0.08);

    --ink:        #ebe8e0;
    --ink-2:      #b0aca3;
    --ink-3:      #7a766e;

    --rule:        rgba(255, 248, 235, 0.16);
    --rule-soft:   rgba(255, 248, 235, 0.06);
    --rule-strong: rgba(255, 248, 235, 0.26);

    /* Cut tokens — ink mode. Same principle: cut interior is field
       color, depth is inset shadow only. The rim is darker in ink
       mode because there's more contrast room with the dark field.    */
    --cut-fill:       var(--field);
    --cut-rim:        rgba(0, 0, 0, 0.45);
    --cut-rim-strong: rgba(0, 0, 0, 0.65);
    --cut-rim-light:  rgba(255, 250, 240, 0.06);

    --enamel-vermilion: #b87466;
    --enamel-cobalt:    #7e94b8;
    --enamel-emerald:   #7a9a82;
    --enamel-gold:      #b5946a;
    --enamel-amethyst:  #9a86b0;
    --enamel-burnt:     #b8896f;

    --enamel-vermilion-soft: rgba(184, 116, 102, 0.16);
    --enamel-cobalt-soft:    rgba(126, 148, 184, 0.16);
    --enamel-emerald-soft:   rgba(122, 154, 130, 0.16);
    --enamel-gold-soft:      rgba(181, 148, 106, 0.18);
    --enamel-amethyst-soft:  rgba(154, 134, 176, 0.16);
    --enamel-burnt-soft:     rgba(184, 137, 111, 0.16);

    --enamel-vermilion-line: rgba(184, 116, 102, 0.52);
    --enamel-cobalt-line:    rgba(126, 148, 184, 0.52);
    --enamel-emerald-line:   rgba(122, 154, 130, 0.52);
    --enamel-gold-line:      rgba(181, 148, 106, 0.55);
    --enamel-amethyst-line:  rgba(154, 134, 176, 0.52);
    --enamel-burnt-line:     rgba(184, 137, 111, 0.50);

    --orange:       var(--enamel-burnt);
    --orange-soft:  var(--enamel-burnt-soft);
    --orange-line:  var(--enamel-burnt-line);
    --orange-strong: #d4773d;

    --accent:       var(--enamel-cobalt);
    --accent-ink:   #1c1c19;
    --accent-wash:  var(--enamel-cobalt-soft);
    --accent-line:  var(--enamel-cobalt-line);
    --accent-strong: #8fa6ff;

    --status-positive:      var(--enamel-emerald);
    --status-positive-wash: var(--enamel-emerald-soft);
    --status-warning:       var(--enamel-gold);
    --status-warning-wash:  var(--enamel-gold-soft);
    --status-negative:      var(--enamel-vermilion);
    --status-negative-wash: var(--enamel-vermilion-soft);
    --status-info:          var(--enamel-cobalt);
    --status-info-wash:     var(--enamel-cobalt-soft);

    /* Cuts on dark — top edge is pure black */
    --cut-shallow:
      inset 0 1px 2px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(0, 0, 0, 0.45),
      inset 0 -1px 0 rgba(255, 255, 255, 0.07);
    --cut-mid:
      inset 0 2px 4px rgba(0, 0, 0, 0.60),
      inset 0 1px 0 rgba(0, 0, 0, 0.50),
      inset 0 -1px 0 rgba(255, 255, 255, 0.09);
    --cut-deep:
      inset 0 3px 7px rgba(0, 0, 0, 0.65),
      inset 0 1px 0 rgba(0, 0, 0, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10);
    --cut-deepest:
      inset 0 5px 12px rgba(0, 0, 0, 0.70),
      inset 0 1px 0 rgba(0, 0, 0, 0.60),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10);

    --puck-flush:
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 1px 0 rgba(0, 0, 0, 0.20);
    --puck-resting:
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.50),
      0 2px 6px rgba(0, 0, 0, 0.30);
    --puck-extruded:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 2px 4px rgba(0, 0, 0, 0.55),
      0 6px 14px rgba(0, 0, 0, 0.45);

    --field-ambient:
      0 1px 2px rgba(0, 0, 0, 0.30),
      0 6px 18px rgba(0, 0, 0, 0.35);
  }
}

/* ─────────────────────────────────────────────────────────────────
   B. BASE
   ───────────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-family: var(--font-sans);
    font-size: var(--t-md);
    line-height: var(--lh-base);
    color: var(--ink);
    background: var(--field-2);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
  }

  body {
    margin: 0;
    background: var(--field-2);
    color: var(--ink);
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--w-bold);
    line-height: var(--lh-tight);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
  }
  h1 { font-size: var(--t-3xl); letter-spacing: var(--tracking-display-xl); }
  h2 { font-size: var(--t-2xl); }
  h3 { font-size: var(--t-xl); }
  h4 { font-size: var(--t-lg); font-weight: var(--w-medium); }

  p { margin: 0; }

  a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-line);
    transition: color var(--m-quick) var(--ease);
  }
  a:hover { color: var(--ink); border-bottom-color: var(--ink); }

  ::selection { background: var(--accent-wash); color: var(--ink); }

  hr { border: 0; height: 1px; background: var(--rule); margin: var(--s-5) 0; }

  code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

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

/* ─────────────────────────────────────────────────────────────────
   C. THE KUGEL — the rolling ball in the cut slot
   The defining v9 mechanism.

     Off: ball at the left end of a cut slot. No fill.
     On:  ball rolls to the right end. Orange fill grows behind it
          as it rolls — the trail it leaves.

   ─────────────────────────────────────────────────────────────── */
@layer primitives {

  .toggle, .kugel {
    --_w: 56px;
    --_h: 30px;
    --_pad: 3px;
    --_ball: calc(var(--_h) - 2 * var(--_pad));
    --_travel: calc(var(--_w) - var(--_ball) - 2 * var(--_pad));

    position: relative;
    width: var(--_w);
    height: var(--_h);
    border: 0;
    padding: 0;
    /* Hairline detent dots in the right portion of the slot (visible in
       off state, swallowed by the orange fill when on). Background uses
       three radial-gradient stops at 50/65/80% of the slot width. */
    background:
      radial-gradient(circle at 50% 50%, var(--rule-strong) 0 1.5px, transparent 1.7px),
      radial-gradient(circle at 65% 50%, var(--rule-strong) 0 1.5px, transparent 1.7px),
      radial-gradient(circle at 80% 50%, var(--rule-strong) 0 1.5px, transparent 1.7px),
      var(--field);
    background-repeat: no-repeat;
    border-radius: var(--r-pill);
    box-shadow:
      var(--cut-mid),
      0 0 0 1px var(--rule);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
  }

  /* The fill — enamel trail that grows from the left as ball rolls right */
  .toggle::before, .kugel::before {
    content: "";
    position: absolute;
    top: var(--_pad);
    bottom: var(--_pad);
    left: var(--_pad);
    width: var(--_ball);
    border-radius: var(--r-pill);
    background: var(--_color, var(--accent));
    opacity: 0;
    transition:
      width var(--m-base) var(--ease-roll),
      opacity var(--m-quick) var(--ease);
  }

  /* The ball — white puck that slides */
  .toggle::after, .kugel::after {
    content: "";
    position: absolute;
    top: var(--_pad);
    left: var(--_pad);
    width: var(--_ball);
    height: var(--_ball);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-resting);
    transition: transform var(--m-base) var(--ease-roll);
  }

  /* Hide the legacy __knob and __inlay children if present (compat with v3-v8) */
  .toggle .toggle__knob, .toggle .toggle__inlay,
  .kugel .toggle__knob, .kugel .toggle__inlay {
    display: none;
  }

  /* ON state — ball rolls; fill follows from the left */
  .toggle.is-on::before, .kugel.is-on::before {
    width: calc(100% - 2 * var(--_pad));
    opacity: 1;
  }
  .toggle.is-on::after, .kugel.is-on::after {
    transform: translateX(var(--_travel));
  }

  /* Sizes */
  .toggle--lg, .kugel--lg { --_w: 68px; --_h: 36px; }
  .toggle--sm, .kugel--sm { --_w: 44px; --_h: 24px; }
  .toggle--cobalt, .kugel--cobalt { --_color: var(--enamel-cobalt); }
  .toggle--vermilion, .kugel--vermilion { --_color: var(--enamel-vermilion); }
  .toggle--emerald, .kugel--emerald { --_color: var(--enamel-emerald); }
  .toggle--gold, .kugel--gold { --_color: var(--enamel-gold); }
  .toggle--amethyst, .kugel--amethyst { --_color: var(--enamel-amethyst); }
  .toggle--burnt, .kugel--burnt { --_color: var(--enamel-burnt); }

  /* ── KUGEL · WELL VARIANT ─ ball in a deep cylindrical slot ──────
     Same mechanism as .kugel (ball rolls, trail follows) but the slot
     is a REAL DEEP CUT and the ball is a 3D SPHERE (radial-gradient
     shading earns its place here because the ball is genuinely a
     volumetric object, not a flat puck). Off → white ball at the left
     of an empty dark slot. On → enamel-dipped ball at the right of a
     slot fully filled with paint.                                       */
  .kugel--well {
    /* The "well behind the surface" model:
         The well (cavity behind the surface) is TALLER than the slot
         opening. The ball lives in this well, just barely bigger than
         the slot opening — so the top and bottom edges of the ball
         are HIDDEN behind the surface (clipped by the slot opening).
         You see most of the ball through the slot, but the very top
         and bottom hairlines are concealed by the surface lip.

         Implementation: --_pad: 0 (no horizontal padding, the slot
         opening is the whole inner area horizontally), --_ball: slot
         height + 4px (ball extends 2px above and 2px below the slot
         opening), overflow: hidden (the slot opening's pill outline
         clips the ball's top/bottom hairlines).                         */
    --_pad: 0px;
    --_ball: calc(var(--_h) + 4px);
    --_roll-dur: 420ms;
    overflow: hidden;
    /* Subtle cylindrical curvature inside the well: a soft vertical
       gradient layered over the field-3 base. Just enough variation to
       suggest a curved wall — top in slight shadow (surface lip), middle
       lightest (light hits the back of the cylinder), bottom slightly
       darker (cylindrical back curve), with a hairline catchlight at
       the very bottom rim.                                              */
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.14) 0%,
        rgba(0, 0, 0, 0.03) 30%,
        rgba(0, 0, 0, 0) 55%,
        rgba(0, 0, 0, 0.03) 85%,
        rgba(0, 0, 0, 0.07) 100%
      ),
      var(--field-3);
    box-shadow:
      /* Soft cylindrical top shadow — surface lip overhanging */
      inset 0 3px 5px rgba(0, 0, 0, 0.28),
      inset 0 1.5px 2.5px -0.5px rgba(0, 0, 0, 0.35),
      /* Hairline at the very top — the surface's machined edge */
      inset 0 1px 0 rgba(0, 0, 0, 0.22),
      /* Perimeter ring */
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.22),
      /* Bottom catchlight — back lip of cylinder catches faint light */
      inset 0 -1px 0 rgba(255, 255, 255, 0.18),
      /* Plate elevation */
      0 0 0 1px var(--rule),
      0 1.5px 3px rgba(0, 0, 0, 0.06);
  }
  /* Ball positioned vertically so it extends 2px above and 2px below
     the slot opening. Horizontal positioning inherited from base.
     With overflow: hidden on the slot, the top/bottom 2px get clipped
     by the slot's pill outline — the surface lip covers them. */
  .kugel--well::after {
    top: -2px;
  }
  /* Trail: same LEFT-anchored mechanism as the standard kugel — width
     grows from --_ball (hidden behind ball at the left) to full slot
     when ON. As the ball rolls right, the trail extends behind it; the
     ball is the trailing edge of the paint. As the ball rolls back left,
     the trail retracts in sync, looking pushed by the ball.
     opacity:1 always — color never fades, only its width changes.       */
  .kugel--well::before {
    opacity: 1;
    background: var(--_color, var(--accent));
    box-shadow:
      inset 0 3.5px 4px rgba(0, 0, 0, 0.45),
      inset 0 2px 2.5px -0.5px rgba(0, 0, 0, 0.55),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.18);
    transition: width var(--_roll-dur) var(--ease-roll);
  }
  /* Ball appearance:
       OFF → fully white sphere (var(--field) base + sphere shading).
       ON  → top half enamel, bottom half white. The half-and-half is
              the ball's painted state after rolling through the slot.

     --_dip animates 0% (off) → 50% (on). At 50%, the linear-gradient
     stop is at the midline, producing the crisp half-and-half. The
     slot roll and the paint-dip animation are synced via --_roll-dur,
     so as the ball rolls right, the paint line travels from the top
     of the ball down to the equator.                                   */
  .kugel--well::after {
    background:
      /* sphere shading: bottom-right shadow + top-left highlight on
         the half-and-half base */
      radial-gradient(
        circle at 70% 78%,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0) 42%
      ),
      radial-gradient(
        circle at 30% 24%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0) 38%
      ),
      /* Paint dip line is VERTICAL; it moves HORIZONTALLY across the
         ball as --_dip animates, matching the ball's horizontal roll
         direction. Paint grows from the LEFT (where the slot's trail
         is anchored — the ball's trailing edge sits in the painted
         trail) toward the right. At --_dip = 50% (ON state): left half
         color, right half white — the ball's trailing edge is in the
         paint, leading edge is past it.                              */
      linear-gradient(
        to right,
        var(--_color, var(--accent)) 0%,
        var(--_color, var(--accent)) var(--_dip, 0%),
        var(--field) var(--_dip, 0%),
        var(--field) 100%
      );
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.22),
      0 1.5px 2px rgba(0, 0, 0, 0.30),
      0 0.5px 0 rgba(0, 0, 0, 0.18);
    /* Dip animates faster than the roll — the color resolves to its
       final state at ~55% of the roll time. You still see the crisp
       paint-line travel across the ball at the midpoint, but the
       remaining ~45% of the motion is the ball in its clean final
       state. Without this, on ON→OFF the color visibly recedes from
       right to left throughout the entire motion and feels like it's
       lagging under the ball.                                          */
    transition:
      transform var(--_roll-dur) var(--ease-roll),
      --_dip calc(var(--_roll-dur) * 0.55) var(--ease-roll);
  }
  /* ON state: ball is FULLY colored at rest. The half-and-half paint
     line is only seen DURING the roll — at the midpoint of the
     transition --_dip = 50% (crisp vertical line at ball center). By
     the time the roll completes, --_dip has reached 100% and the
     ball is solid color. So:
       at rest OFF → fully white, --_dip 0%
       mid-roll    → half-and-half visible, --_dip ~50%
       at rest ON  → fully color, --_dip 100%                          */
  .kugel--well.is-on::after,
  .toggle.kugel--well.is-on::after {
    --_dip: 100%;
  }
}

/* @property declares --_dip as an animatable percentage. Without this,
   CSS transitions on the variable would be unsupported and the dip
   would snap instantly. With @property, the linear-gradient stop
   position smoothly tweens, producing the paint-line traveling down
   the sphere as the ball rolls.                                        */
@property --_dip {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

/* ─────────────────────────────────────────────────────────────────
   D. BUTTONS — cuts in the field
   The button is a depression in the field with a hairline outline.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  .btn {
    --_bg: var(--field);
    --_fg: var(--ink);
    --_outline: var(--rule);
    --_shadow: var(--cut-shallow);
    --_shadow-active: var(--cut-mid);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control-h-md);
    padding: 0 var(--s-4);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    line-height: 1;
    color: var(--_fg);
    background: var(--_bg);
    border: 1px solid var(--_outline);
    border-radius: var(--r-md);
    box-shadow: var(--_shadow);
    cursor: pointer;
    user-select: none;
    transition:
      box-shadow var(--m-quick) var(--ease-soft),
      background-color var(--m-quick) var(--ease),
      color var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease);
  }
  .btn:hover { background: var(--field-2); }
  .btn:active {
    box-shadow: var(--_shadow-active);
    transition: all var(--m-instant) var(--ease-press);
  }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Primary — enamel-filled, still cut into the field */
  .btn--primary {
    --_bg: var(--accent);
    --_fg: var(--accent-ink);
    --_outline: var(--accent-strong);
  }
  .btn--primary:hover { background: var(--accent-strong); }

  .btn--ghost {
    --_outline: transparent;
    --_shadow: none;
  }
  .btn--ghost:hover { background: var(--field-2); }

  .btn--danger {
    --_fg: var(--status-negative);
  }
  .btn--danger:hover { background: var(--status-negative); color: #ffffff; --_outline: var(--enamel-vermilion-line); }

  .btn--ink {
    --_bg: var(--ink);
    --_fg: var(--field);
    --_outline: var(--ink);
  }

  .btn--sm { height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--t-xs); }
  .btn--lg { height: var(--control-h-lg); padding: 0 var(--s-5); font-size: var(--t-md); }
  .btn--icon { width: var(--control-h-md); padding: 0; }
  .btn--icon.btn--sm { width: var(--control-h-sm); }
  .btn--icon.btn--lg { width: var(--control-h-lg); }

  .btn--pill { border-radius: var(--r-pill); }

  /* btn-deep alias for v4/v7 compat */
  .btn-deep { all: unset; }
  .btn-deep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control-h-md);
    padding: 0 var(--s-4);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    line-height: 1;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-shallow);
    cursor: pointer;
    transition: all var(--m-quick) var(--ease-soft);
  }
  .btn-deep:hover { background: var(--field-2); }
  .btn-deep:active { box-shadow: var(--cut-deep); }
  .btn-deep--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-strong); }
  .btn-deep--primary:hover { background: var(--accent-strong); }
  .btn-deep--ink { background: var(--ink); color: var(--field); border-color: var(--ink); }
}

/* ─────────────────────────────────────────────────────────────────
   E. INPUTS — cuts in the field
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .input, .select, .textarea {
    display: block;
    width: 100%;
    height: var(--control-h-md);
    padding: 0 var(--s-3);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-mid);
    transition: box-shadow var(--m-quick) var(--ease), border-color var(--m-quick) var(--ease);
  }
  .input::placeholder, .textarea::placeholder { color: var(--ink-3); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--rule-strong); }
  .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--cut-mid), 0 0 0 3px var(--accent-wash);
  }
  .textarea {
    height: auto;
    padding: var(--s-2) var(--s-3);
    line-height: var(--lh-base);
    resize: vertical;
  }
  .select {
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
      linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s-6);
  }

  .checkbox, .radio {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--cut-mid);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: background-color var(--m-quick) var(--ease), border-color var(--m-quick) var(--ease);
  }
  .radio { border-radius: var(--r-pill); }
  .checkbox:checked, .radio:checked {
    background: var(--accent);
    border-color: var(--accent-strong);
  }
  .checkbox:checked::after {
    content: "";
    width: 9px; height: 5px;
    border-left: 1.5px solid #ffffff;
    border-bottom: 1.5px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .radio:checked::after {
    content: "";
    width: 7px; height: 7px;
    border-radius: var(--r-pill);
    background: #ffffff;
  }

  .field { display: flex; flex-direction: column; gap: var(--s-2); }
  .field__label {
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
  .field__hint { font-size: var(--t-xs); color: var(--ink-3); }
}

/* ─────────────────────────────────────────────────────────────────
   F. KNOB — kept from v8 (user liked it). Refined with v6 hairline ring.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .knob-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    position: relative;
  }
  .knob-group__active-dot {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: var(--r-pill);
    background: var(--_marker, var(--accent));
    opacity: 0;
    transition: opacity var(--m-quick) var(--ease);
  }
  .knob-group.is-active .knob-group__active-dot { opacity: 1; }

  .knob {
    --_d: 64px;
    --_pocket-pad: 6px;
    --_marker: var(--accent);

    position: relative;
    width: var(--_d);
    height: var(--_d);
    padding: var(--_pocket-pad);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-mid), 0 0 0 1px var(--rule);
    cursor: pointer;
    border: 0;
    color: inherit;
  }
  /* Cap — visually symmetric, so it does NOT rotate. The marker rotates
     around the fixed cap; the cap shadow stays anchored to the field. */
  .knob::after {
    content: "";
    position: absolute;
    inset: var(--_pocket-pad);
    border-radius: var(--r-pill);
    background: var(--field-2);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.10),
      0 1px 0 rgba(20, 18, 14, 0.10),
      3px 5px 12px -8px rgba(20, 18, 14, 0.18),
      10px 12px 26px -16px rgba(20, 18, 14, 0.22),
      -3px -3px 10px -8px rgba(255, 255, 255, 0.80);
    transform: none;
  }
  /* Marker — rotates around the KNOB CENTER, not its own center.
     transform-origin Y = distance from marker top to knob center. */
  .knob::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--_pocket-pad) + 6px);
    transform-origin: 50% calc(var(--_d) / 2 - var(--_pocket-pad) - 6px);
    transform: translateX(-50%) rotate(var(--_rot, 0deg));
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--_marker);
    transition: transform var(--m-base) var(--ease-soft);
  }
  .knob__ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    color: var(--ink-2);
  }
  .knob__ticks line {
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
  }
  .knob__ticks line.tick--major { stroke-width: 1.5; opacity: 0.55; }
  .knob__ticks line.tick--minor { opacity: 0.28; }

  .knob-group__labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
  .knob-group__value { color: var(--ink); font-weight: var(--w-bold); text-transform: none; letter-spacing: 0; }
}

/* ─────────────────────────────────────────────────────────────────
   G. ROCKER — kept from v8 (user liked it). Refined with v6 hairline.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  /* Rocker mechanism (v10 model):
       Resting cells are raised pucks (UP, above the pill surface).
       The ACTIVE cell is the one currently pressed DOWN into a pocket,
       gaining a colored ring around its rim and a centered enamel dot
       on its face. This reads as "the button that's currently engaged."
       No floating indicator above the pill — the dot lives ON the button. */
  .rocker {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 10px 14px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-mid);
    position: relative;
    isolation: isolate;
  }
  /* Each cell sits in its own ALIGNED well — a circular cut in the
     pill the same shape as the puck. The well is rendered via
     a sibling ::after on the cell; the puck (the cell itself) sits
     above it. When the cell is active, the puck drops into the well. */
  .rocker__cell {
    --_color: var(--accent);
    --_line: var(--accent-line);
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--field);
    width: 38px;
    height: 38px;
    border-radius: var(--r-pill);
    box-shadow: var(--puck-resting);
    cursor: pointer;
    position: relative;
    transition:
      box-shadow var(--m-quick) var(--ease-soft),
      transform  var(--m-quick) var(--ease-soft),
      border-color var(--m-quick) var(--ease),
      background-color var(--m-quick) var(--ease);
  }
  /* The ALIGNED well behind the cell — same shape, slightly larger.
     Visible as a faint cut in the pill, showing the puck's home. */
  .rocker__cell::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-shallow);
    z-index: -1;
    pointer-events: none;
  }
  /* No hover-lift on the cell — the cursor isn't a force.
     Press/active is where motion lives. */
  .rocker__cell:hover { border-color: var(--rule-strong); }
  /* Active: the puck DROPS into its well. The well becomes a deeper
     cut around it; the puck face carries a colored ring + center dot. */
  .rocker__cell.is-active {
    box-shadow:
      var(--cut-shallow),
      inset 0 0 0 2px var(--_line);
    border-color: var(--_line);
    background: var(--field);
    transform: translateY(2px);
  }
  .rocker__cell.is-active::after {
    box-shadow: var(--cut-mid);
    inset: -4px;
  }
  /* Active cell: hover doesn't move it further — it's already at rest in its well. */
  .rocker__cell.is-active:hover {
    border-color: var(--_line);
  }
  /* The enamel dot in the CENTER of the active button face. */
  .rocker__cell.is-active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--_color);
    box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.4);
  }
  .rocker__cell--cobalt { --_color: var(--enamel-cobalt); --_line: var(--enamel-cobalt-line); }
  .rocker__cell--emerald { --_color: var(--enamel-emerald); --_line: var(--enamel-emerald-line); }
  .rocker__cell--gold { --_color: var(--enamel-gold); --_line: var(--enamel-gold-line); }
  .rocker__cell--vermilion { --_color: var(--enamel-vermilion); --_line: var(--enamel-vermilion-line); }
  .rocker__cell--amethyst { --_color: var(--enamel-amethyst); --_line: var(--enamel-amethyst-line); }
}

/* ─────────────────────────────────────────────────────────────────
   H. SEGMENTED + SLOT BUTTONS — refined with linework
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .segmented-deep {
    position: relative;
    display: inline-flex;
    padding: 4px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-mid);
    gap: 2px;
  }
  .segmented-deep__seg {
    --_color: var(--accent);
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    padding: 0 var(--s-4);
    height: 30px;
    min-width: 64px;
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    position: relative;
    transition:
      background-color var(--m-quick) var(--ease),
      color var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease-soft);
  }
  .segmented-deep__seg:hover { color: var(--ink-2); }
  .segmented-deep__seg.is-active {
    background: var(--field);
    color: var(--ink);
    box-shadow: var(--puck-resting);
    border: 1px solid var(--rule);
  }
  .segmented-deep__seg.is-active::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--_color);
  }
  .segmented-deep__seg:nth-child(2) { --_color: var(--enamel-gold); }
  .segmented-deep__seg:nth-child(3) { --_color: var(--enamel-amethyst); }
  .segmented-deep__seg:nth-child(4) { --_color: var(--enamel-emerald); }

  /* Slot button — off=cut, on=cut+enamel dot above */
  .slot-btn {
    --_color: var(--accent);
    --_line: var(--accent-line);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control-h-md);
    padding: 0 var(--s-5);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    line-height: 1;
    color: var(--ink-3);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-shallow);
    cursor: pointer;
    transition: all var(--m-quick) var(--ease-soft);
  }
  .slot-btn:hover { color: var(--ink-2); border-color: var(--rule-strong); }
  .slot-btn.is-on {
    color: var(--ink);
    border-color: var(--_line);
    box-shadow: var(--cut-shallow), inset 0 0 0 1.5px var(--_line);
  }
  .slot-btn.is-on::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--_color);
  }
  .slot-btn--cobalt { --_color: var(--enamel-cobalt); --_line: var(--enamel-cobalt-line); }
  .slot-btn--emerald { --_color: var(--enamel-emerald); --_line: var(--enamel-emerald-line); }
  .slot-btn--gold { --_color: var(--enamel-gold); --_line: var(--enamel-gold-line); }
  .slot-btn--vermilion { --_color: var(--enamel-vermilion); --_line: var(--enamel-vermilion-line); }
  .slot-btn--amethyst { --_color: var(--enamel-amethyst); --_line: var(--enamel-amethyst-line); }
  .slot-btn--burnt { --_color: var(--enamel-burnt); --_line: var(--enamel-burnt-line); }
}

/* ─────────────────────────────────────────────────────────────────
   I. FADER — slot with rolling ball, like the toggle but longer
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .fader {
    --_color: var(--accent);
    --_h: 28px;
    --_track-h: 12px;
    --_thumb-d: 20px;

    position: relative;
    display: block;
    width: 100%;
    height: var(--_h);
    user-select: none;
    cursor: pointer;
  }
  .fader__track {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    height: var(--_track-h);
    border-radius: var(--r-pill);
    background: var(--field);
    border: 1px solid var(--rule);
    box-shadow: var(--cut-mid);
  }
  .fader__fill {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(var(--_track-h) - 4px);
    border-radius: var(--r-pill);
    background: var(--_color);
    width: 50%;
    transition: width var(--m-quick) var(--ease);
  }
  .fader__thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--_thumb-d);
    height: var(--_thumb-d);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-extruded);
    transform: translate(-50%, -50%);
    transition: box-shadow var(--m-quick) var(--ease);
  }
  /* Fader thumb: no halo grow on hover. The cursor change is enough. */
  .fader--cobalt { --_color: var(--enamel-cobalt); }
  .fader--emerald { --_color: var(--enamel-emerald); }
  .fader--gold { --_color: var(--enamel-gold); }
  .fader--vermilion { --_color: var(--enamel-vermilion); }
  .fader--amethyst { --_color: var(--enamel-amethyst); }
  .fader__value {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    background: var(--ink);
    color: var(--field);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    border-radius: var(--r-pill);
    box-shadow: var(--puck-extruded);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--m-quick) var(--ease);
    white-space: nowrap;
  }
  .fader:hover .fader__value, .fader.is-active .fader__value { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────
   J. PIPS — physical pucks-in-cuts (v10 refinement)
   Each pip is a tiny pocket cut into a small recessed plate; lit
   pips have a colored puck sitting flush inside the pocket. Unlit
   pips remain empty cuts. The rocker grammar at small scale.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .pips {
    --_color: var(--accent);
    display: inline-grid;
    grid-template-columns: repeat(3, 10px);
    grid-template-rows: repeat(2, 10px);
    gap: 4px;
    padding: 6px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--cut-shallow);
    vertical-align: middle;
  }
  /* The pocket — every pip is a small recessed circular cut. */
  .pips__dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow:
      inset 0 1px 1.5px rgba(20, 18, 14, 0.18),
      inset 0 0 0 1px var(--rule-soft);
  }
  /* The puck — appears inside the pocket when lit. */
  .pips__dot::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: var(--r-pill);
    background: transparent;
    transition:
      background var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease);
  }
  .pips__dot.is-lit::after {
    background: var(--_color);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 0.5px 0 rgba(255, 255, 255, 0.35);
  }

  /* Domino layouts via data-attribute */
  .pips[data-count="1"] .pips__dot:nth-child(3)::after,
  .pips[data-count="2"] .pips__dot:nth-child(1)::after,
  .pips[data-count="2"] .pips__dot:nth-child(6)::after,
  .pips[data-count="3"] .pips__dot:nth-child(1)::after,
  .pips[data-count="3"] .pips__dot:nth-child(3)::after,
  .pips[data-count="3"] .pips__dot:nth-child(6)::after,
  .pips[data-count="4"] .pips__dot:nth-child(1)::after,
  .pips[data-count="4"] .pips__dot:nth-child(3)::after,
  .pips[data-count="4"] .pips__dot:nth-child(4)::after,
  .pips[data-count="4"] .pips__dot:nth-child(6)::after,
  .pips[data-count="5"] .pips__dot::after,
  .pips[data-count="6"] .pips__dot::after {
    background: var(--_color);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 0.5px 0 rgba(255, 255, 255, 0.35);
  }
  /* 5 leaves the middle two unlit */
  .pips[data-count="5"] .pips__dot:nth-child(2)::after,
  .pips[data-count="5"] .pips__dot:nth-child(5)::after {
    background: transparent;
    box-shadow: none;
  }
  .pips--cobalt { --_color: var(--enamel-cobalt); }
  .pips--emerald { --_color: var(--enamel-emerald); }
  .pips--gold { --_color: var(--enamel-gold); }
  .pips--vermilion { --_color: var(--enamel-vermilion); }
  .pips--amethyst { --_color: var(--enamel-amethyst); }
  .pips--burnt { --_color: var(--enamel-burnt); }
}

/* ─────────────────────────────────────────────────────────────────
   K. TICKMARK ROW — small graphical scale (from v6)
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .tickmark-row {
    display: flex;
    align-items: end;
    gap: 0;
    height: 8px;
    width: 100%;
  }
  .tickmark-row__tick {
    flex: 1;
    background: var(--ink-3);
    width: 1px;
    opacity: 0.5;
  }
  .tickmark-row__tick--tall   { height: 8px; opacity: 0.7; }
  .tickmark-row__tick--mid    { height: 5px; }
  .tickmark-row__tick--short  { height: 3px; }
}

/* ─────────────────────────────────────────────────────────────────
   L. CARDS, TABLES, TAGS, MISC
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .eyebrow {
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
  }

  /* Card — a hairline-outlined region of the field */
  .card {
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: var(--s-5);
  }
  .card--flush  { padding: 0; }
  .card--panel  { background: var(--field-2); border-color: var(--rule-soft); }
  .card--lifted { box-shadow: var(--puck-extruded); }
  .card--floating { box-shadow: var(--field-ambient); }
  .card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
  }
  .card__title { font-size: var(--t-md); font-weight: var(--w-bold); }
  .card__meta  { font-size: var(--t-sm); color: var(--ink-3); }

  /* Table — print inside the field */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    color: var(--ink);
  }
  .table th {
    text-align: left;
    font-weight: var(--w-medium);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
    padding: var(--s-3);
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
  }
  .table td {
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
  }
  .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .table td.mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-2); }
  .table tbody tr:hover td { background: var(--field-2); }
  .table tbody tr[aria-selected="true"] td {
    background: var(--field);
    box-shadow: inset 0 1px 0 var(--cut-rim-strong), inset 0 -1px 0 var(--cut-rim);
  }

  /* Tag — small chip, hairline outline */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    height: 22px;
    padding: 0 var(--s-3);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    line-height: 1;
    letter-spacing: var(--tracking-label);
    color: var(--ink-2);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .tag--accent   { color: var(--accent);          border-color: var(--rule); background: var(--field); }
  .tag--positive { color: var(--status-positive); border-color: var(--rule); background: var(--field); }
  .tag--warning  { color: var(--status-warning);  border-color: var(--rule); background: var(--field); }
  .tag--negative { color: var(--status-negative); border-color: var(--rule); background: var(--field); }

  /* Dot — small status circle */
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
    flex-shrink: 0;
  }
  .dot--positive { background: var(--status-positive); }
  .dot--warning  { background: var(--status-warning); }
  .dot--negative { background: var(--status-negative); }
  .dot--info     { background: var(--status-info); }

  /* Tabs — segmented in cut strip */
  .tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-mid);
    gap: 2px;
  }
  .tabs__tab {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    padding: 0 var(--s-4);
    height: 28px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color var(--m-quick) var(--ease), color var(--m-quick) var(--ease), box-shadow var(--m-quick) var(--ease);
  }
  .tabs__tab:hover { color: var(--ink-2); }
  .tabs__tab[aria-selected="true"] {
    background: var(--field);
    color: var(--ink);
    box-shadow: var(--puck-resting);
  }

  /* Kbd */
  .kbd {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    padding: 2px 7px;
    color: var(--ink-2);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--cut-shallow);
  }

  /* LED dot (alias from prior versions) */
  .led {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
    box-shadow: var(--cut-shallow);
    transition: background-color var(--m-quick) var(--ease);
    flex-shrink: 0;
  }
  .led.is-on { background: var(--accent); }
}

/* ─────────────────────────────────────────────────────────────────
   L2. NEW v10 MECHANISMS — each its own mechanical idea
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* ── STEP — minus / number / plus.
        A recessed mono readout flanked by two raised puck buttons.
        Used for quantity selection (room qty, equipment count). ── */
  .step {
    display: inline-flex;
    align-items: stretch;
    gap: 6px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    padding: 4px;
    box-shadow: var(--cut-shallow);
    vertical-align: middle;
  }
  .step__btn {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--field);
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    box-shadow: var(--puck-resting);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--t-md);
    font-weight: var(--w-medium);
    color: var(--ink);
    line-height: 1;
    padding: 0;
    transition:
      box-shadow var(--m-quick) var(--ease-soft),
      transform  var(--m-quick) var(--ease-soft),
      background var(--m-quick) var(--ease);
  }
  /* Step buttons: no hover-lift. Press depresses them on :active. */
  .step__btn:hover { background: var(--field-2); }
  .step__btn:active {
    transform: translateY(1px);
    box-shadow: var(--cut-shallow);
    background: var(--field-2);
  }
  .step__btn[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
  .step__value {
    min-width: 48px;
    padding: 0 var(--s-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--t-md);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--field);
    box-shadow: var(--cut-mid);
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
  }

  /* ── LEVER — pivoting handle, three positions: down / center / up.
        A vertical recessed slot with a horizontal pivot bar that
        rotates ±18° from center. The bar carries a small enamel dot
        at its TOP indicating the lever's direction of travel. ── */
  .lever {
    --_pos: 0deg;
    --_color: var(--accent);
    position: relative;
    width: 36px;
    height: 96px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-mid);
    padding: 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
  }
  /* the pivot pin at center */
  .lever::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.4);
    z-index: 3;
  }
  /* the handle — rendered as a vertical bar via ::before */
  .lever::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 8px;
    height: calc(100% - 16px);
    margin-left: -4px;
    border-radius: var(--r-sm);
    background:
      linear-gradient(180deg,
        var(--field) 0%,
        color-mix(in srgb, var(--field) 85%, var(--ink) 15%) 100%);
    box-shadow: var(--puck-resting);
    transform-origin: 50% 50%;
    transform: rotate(var(--_pos));
    transition: transform var(--m-base) var(--ease-soft);
    z-index: 2;
  }
  /* The dot sits AT the handle's tip, slightly inset INTO the handle.
     The handle is 8px wide and starts at top:8px, so the cap is 6px
     wide (1px of handle visible on each side) and starts at top:10px
     (2px inset from the handle's top edge). Reads as an embedded
     enamel marker in the end of the rod, not a separate disc above. */
  .lever .lever__cap {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: var(--r-pill);
    background: var(--_color);
    /* Pivot: cap center is at y=13 within the 96px cell, cell pivot
       is at y=48 → offset 35px below cap center.                     */
    transform-origin: 50% calc(50% + 35px);
    transform: rotate(var(--_pos));
    transition: transform var(--m-base) var(--ease-soft);
    z-index: 4;
    /* Subtle ring + 1px shadow on top edge so the cap looks set INTO
       the handle, not glued on top.                                  */
    box-shadow:
      inset 0 0.5px 0 rgba(0, 0, 0, 0.20),
      0 0.5px 0 rgba(255, 255, 255, 0.18);
  }
  .lever.is-up      { --_pos: -18deg; }
  .lever.is-center  { --_pos:   0deg; }
  .lever.is-down    { --_pos:  18deg; }
  .lever--cobalt    { --_color: var(--enamel-cobalt); }
  .lever--emerald   { --_color: var(--enamel-emerald); }
  .lever--gold      { --_color: var(--enamel-gold); }
  .lever--vermilion { --_color: var(--enamel-vermilion); }

  /* ── TUMBLER — vertical 3-number wheel.
        A recessed cell with three values stacked; middle one is the
        current value (bold). Spin to change via wheel/keyboard/click. ── */
  .tumbler {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 56px;
    height: 84px;
    padding: 8px 0;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow: var(--cut-mid);
    overflow: hidden;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    cursor: ns-resize;
    user-select: none;
  }
  /* center band — highlights the active row */
  .tumbler::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 22px;
    margin-top: -11px;
    background: var(--field-2);
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    pointer-events: none;
    z-index: 0;
  }
  .tumbler__num {
    position: relative;
    z-index: 1;
    height: 22px;
    line-height: 22px;
    display: block;
    color: var(--ink-3);
    font-size: var(--t-sm);
    transition: color var(--m-quick) var(--ease);
  }
  .tumbler__num--curr {
    color: var(--ink);
    font-weight: var(--w-bold);
    font-size: var(--t-md);
  }

  /* ── GAUGE-STRIP — filled wells inside a strip cut.
        A read-only "N of M" visual: one outer cut (the strip — the
        chassis that contains the readout) holds N small filled-cut
        wells. Empty wells share the strip's field-colored cut interior
        but have their own inset shadow so they read as discrete
        depressions; lit wells fill with enamel — same fill-grammar as
        .check, just smaller. The well shape is more legible at small
        sizes than a tiny puck because the inset shadow is contained
        inside the well's perimeter.                                    */
  .gauge-strip {
    --_color: var(--accent);
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-sm);
    vertical-align: middle;
    /* Outer cut chassis: same depth grammar as .void / .check. */
    background: var(--cut-fill);
    box-shadow:
      inset 0 1.5px 2px -0.5px var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  /* Each segment is a small filled-cut well — same family as .check. */
  .gauge-strip__seg {
    width: 14px;
    height: 16px;
    border-radius: 2px;
    background: var(--cut-fill);
    box-shadow:
      inset 0 1px 1.5px -0.25px var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim);
    transition: background var(--m-quick) var(--ease);
  }
  /* Lit well: filled with enamel. Same fill grammar as .check.is-checked
     — the cut goes from field-colored (empty) to enamel-colored (full)
     while keeping the depression shadow. */
  .gauge-strip__seg.is-lit {
    background: var(--_color);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.20),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
  }
  .gauge-strip--cobalt    { --_color: var(--enamel-cobalt); }
  .gauge-strip--emerald   { --_color: var(--enamel-emerald); }
  .gauge-strip--gold      { --_color: var(--enamel-gold); }
  .gauge-strip--vermilion { --_color: var(--enamel-vermilion); }

  /* ── CHANNEL — routed enamel readout (v6.1 inheritance).
        A thin hairline-outlined recessed channel filled with enamel
        from the left edge to --_value (0..1). Pure linework: no
        thumb, no interaction, no segments. The most disciplined
        "X% of Y" indicator in the system — what gauge-strip does
        discretely, channel does continuously. Three weights so it
        can sit inline at small scale or anchor a dense inspector
        section at large scale.

        Pair with .tickmark-row above or below to add a scale ruler. ── */
  .channel {
    --_color: var(--accent);
    --_value: 0.5;
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-shallow);
    overflow: hidden;
    box-sizing: border-box;
  }
  .channel::before {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(var(--_value) * 100%);
    background: var(--_color);
    transition: width var(--m-base) var(--ease);
  }
  /* Optional tick marks inside the channel — discrete detent stops
     that the eye can read against the enamel fill. Render via
     repeating-linear-gradient on a ::after layer. */
  .channel--ticked::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(25% - 0.5px),
      rgba(20, 18, 14, 0.30) calc(25% - 0.5px),
      rgba(20, 18, 14, 0.30) calc(25% + 0.5px),
      transparent calc(25% + 0.5px),
      transparent 25%
    );
    mix-blend-mode: multiply;
  }
  /* Weights — three scales for different contexts.
     hair  = micro readout (inline next to a label)
     thin  = default (inspector rows, table cells)
     wide  = anchor element (panel header, hero summary) */
  .channel--hair { height: 3px; }
  .channel--thin { height: 6px; }
  .channel--wide { height: 10px; }
  .channel--cobalt    { --_color: var(--enamel-cobalt); }
  .channel--emerald   { --_color: var(--enamel-emerald); }
  .channel--gold      { --_color: var(--enamel-gold); }
  .channel--vermilion { --_color: var(--enamel-vermilion); }
  .channel--amethyst  { --_color: var(--enamel-amethyst); }
  .channel--burnt     { --_color: var(--enamel-burnt); }
  /* Squared variant — for places where the pill curve reads wrong
     (e.g. inline with code-style table cells). Hairline corners only. */
  .channel--squared { border-radius: 2px; }
  .channel--squared::before { border-radius: 0; }
  /* Dense override — channels stay thin in compact contexts. */
  .dense .channel { height: 4px; }
  .dense .channel--hair { height: 2px; }
  .dense .channel--wide { height: 7px; }

  /* ── HOLDPAD — press-and-hold confirmation pad.
        A square recessed cell. Pressing fills a ring around it
        clockwise; full ring = confirmation. ── */
  .holdpad {
    --_color: var(--enamel-vermilion);
    --_progress: 0;
    position: relative;
    width: 64px;
    height: 64px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-mid);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    padding: 0;
    user-select: none;
  }
  /* the progress ring via conic-gradient (clipped to ring shape) */
  .holdpad::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--r-md) + 3px);
    background: conic-gradient(
      from -90deg,
      var(--_color) 0 calc(var(--_progress) * 360deg),
      transparent  calc(var(--_progress) * 360deg) 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
            mask-composite: exclude;
    padding: 2px;
    transition: background 80ms linear;
    pointer-events: none;
  }
  .holdpad.is-pressing { background: var(--field-2); }
  .holdpad.is-armed {
    color: var(--_color);
    border-color: var(--_color);
  }
  .holdpad--vermilion { --_color: var(--enamel-vermilion); }
  .holdpad--gold      { --_color: var(--enamel-gold); }
  .holdpad--cobalt    { --_color: var(--enamel-cobalt); }
}

/* ────────────────────────────────────────────────────────────────────
   HOLDCUT — a cut in the surface that you press-and-hold to confirm.
   Not a button; a true CUT (same depth grammar as .void). Text sits on
   the cut interior. As held, the cut fills with enamel from the bottom
   up. Release early → drains. Full → confirms. Same data-holdfill
   handler drives --_progress.
   ──────────────────────────────────────────────────────────────────── */
@layer primitives {
  .holdcut {
    --_color:    var(--enamel-cobalt);
    --_progress: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 38px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    /* Cut empty: same color as the surrounding field. Cut filled: enamel
       rises from the bottom up. Depth is inset shadows only — never a
       dark fill. The cut reads as a recess into the paper/ink surface
       that progressively fills with paint as the user holds.            */
    background:
      linear-gradient(
        to top,
        var(--_color) 0%,
        var(--_color) calc(var(--_progress) * 100%),
        var(--cut-fill) calc(var(--_progress) * 100%),
        var(--cut-fill) 100%
      );

    box-shadow:
      inset 0 1.5px 2px -0.5px var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);

    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    /* Default: dark label on the empty (field-colored) cut. */
    color: var(--ink-2);

    transition: background 80ms linear, color var(--m-quick) var(--ease);
  }
  /* When the enamel fill has risen past the label center, switch label
     to near-white so it stays readable on the enamel paint. JS toggles
     .is-flooded at --_progress > 0.5. */
  .holdcut.is-flooded { color: #f5f2eb; }
  .holdcut--vermilion { --_color: var(--enamel-vermilion); }
  .holdcut--gold      { --_color: var(--enamel-gold); }
  .holdcut--cobalt    { --_color: var(--enamel-cobalt); }
  .holdcut--emerald   { --_color: var(--enamel-emerald); }
  .holdcut--amethyst  { --_color: var(--enamel-amethyst); }
  .holdcut--burnt     { --_color: var(--enamel-burnt); }

  .holdcut--pill  { border-radius: var(--r-pill); }
  .holdcut--round {
    border-radius: 50%;
    width: 56px;
    height: 56px;
    min-width: 0;
    padding: 0;
  }
  .holdcut--sm { height: 30px; min-width: 56px; font-size: 10px; }
  .holdcut--lg { height: 48px; min-width: 100px; font-size: var(--t-sm); padding: 0 var(--s-5); }
}

/* ─────────────────────────────────────────────────────────────────
   L3. MORE v10 MECHANISMS — drag, momentary, indicator, named rotary,
       drop target, drag-grip. Each has a distinct motion logic.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* ── SLIDE-CONFIRM — drag the handle from left to right to commit.
        Track fills with color behind the handle as it travels.
        Release before the end and it springs back. Reaching the end
        locks in (handle stays, fill stays). Used for destructive
        confirmations — "Slide to delete", "Slide to publish". ── */
  .slide-confirm {
    --_color: var(--enamel-vermilion);
    --_progress: 0;
    --_w: 240px;
    --_h: 40px;
    --_pad: 4px;
    --_handle: calc(var(--_h) - 2 * var(--_pad));
    --_travel: calc(var(--_w) - var(--_handle) - 2 * var(--_pad));

    position: relative;
    width: var(--_w);
    height: var(--_h);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-mid);
    cursor: grab;
    user-select: none;
    touch-action: none;
    overflow: hidden;
  }
  /* Fill behind handle as it travels */
  .slide-confirm__fill {
    position: absolute;
    top: var(--_pad);
    bottom: var(--_pad);
    left: var(--_pad);
    border-radius: var(--r-pill);
    background: var(--_color);
    width: calc(var(--_handle) + var(--_travel) * var(--_progress));
    transition: width var(--m-quick) var(--ease-roll);
    pointer-events: none;
  }
  /* Label sitting in the middle of the track (visible until covered by fill) */
  .slide-confirm__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    pointer-events: none;
    z-index: 1;
    padding-left: var(--_handle);
    transition: opacity var(--m-quick) var(--ease);
  }
  .slide-confirm.is-armed .slide-confirm__label { opacity: 0; }
  /* The handle puck */
  .slide-confirm__handle {
    position: absolute;
    top: var(--_pad);
    left: var(--_pad);
    width: var(--_handle);
    height: var(--_handle);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-resting);
    transform: translateX(calc(var(--_travel) * var(--_progress)));
    transition: transform var(--m-quick) var(--ease-roll);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Two chevron marks on the handle showing direction */
  .slide-confirm__handle::before,
  .slide-confirm__handle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--ink-3);
    border-right: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
  }
  .slide-confirm__handle::after { margin-left: -3px; }
  .slide-confirm.is-dragging { cursor: grabbing; }
  .slide-confirm.is-dragging .slide-confirm__fill,
  .slide-confirm.is-dragging .slide-confirm__handle { transition: none; }
  .slide-confirm.is-armed { border-color: var(--_color); }
  .slide-confirm.is-armed .slide-confirm__handle::before,
  .slide-confirm.is-armed .slide-confirm__handle::after {
    border-top-color: var(--_color);
    border-right-color: var(--_color);
  }
  .slide-confirm--vermilion { --_color: var(--enamel-vermilion); }
  .slide-confirm--cobalt    { --_color: var(--enamel-cobalt); }
  .slide-confirm--gold      { --_color: var(--enamel-gold); }
  .slide-confirm--emerald   { --_color: var(--enamel-emerald); }

  /* ── PUNCH — momentary press button with a visible aligned home well.
        A puck sitting raised on the field; the field shows the cut
        the puck "comes from" just outside the puck's edge, so you
        can read "this button has a home." On press the puck depresses
        INTO that cut and the cut becomes the dominant visual; on
        release the puck springs back to raised. ── */
  .punch {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--field);
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
    box-shadow: var(--puck-extruded);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: var(--tracking-label);
    padding: 0;
    position: relative;
    isolation: isolate;
    transition:
      box-shadow var(--m-quick) var(--ease-soft),
      transform  var(--m-quick) var(--ease-soft),
      background var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease);
  }
  /* The aligned home well — same shape as the puck, slightly larger.
     Visible at rest as a faint cut around the raised puck. */
  .punch::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: calc(var(--r-md) + 4px);
    background: var(--field);
    box-shadow: var(--cut-shallow);
    z-index: -1;
    pointer-events: none;
    transition: box-shadow var(--m-quick) var(--ease);
  }
  /* Punch: no hover-lift; press depresses on :active, releases with spring. */
  .punch:hover { background: var(--field-2); }
  .punch--primary:hover { background: var(--accent-strong); }
  .punch:active {
    box-shadow: var(--cut-deep);
    background: var(--field-2);
    transform: translateY(3px) scale(0.97);
    transition:
      box-shadow var(--m-instant) var(--ease-press),
      transform  var(--m-instant) var(--ease-press);
  }
  /* On press, the well deepens — the cut around the now-depressed puck
     becomes more prominent. */
  .punch:active::before {
    box-shadow: var(--cut-deep);
    transition: box-shadow var(--m-instant) var(--ease-press);
  }
  .punch--pill::before { border-radius: calc(var(--r-pill)); }
  .punch--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-strong); }
  .punch--primary:active { background: var(--accent-strong); }
  .punch--vermilion { background: var(--enamel-vermilion); color: #fff; border-color: var(--enamel-vermilion); }
  .punch--gold      { background: var(--enamel-gold); color: var(--ink); border-color: var(--enamel-gold); }
  .punch--pill { border-radius: var(--r-pill); }
  .punch--lg { width: 80px; height: 80px; font-size: var(--t-md); }
  .punch--sm { width: 48px; height: 48px; font-size: var(--t-xs); }

  /* ── LAMP — passive status indicator.
        The smallest cut+puck pair in the system. A tiny colored puck
        nests in a tiny cut. Read-only. Used for status displays where
        you only need "lit / unlit" or a color. ── */
  .lamp {
    --_color: var(--enamel-emerald);
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow:
      inset 0 1px 2px rgba(20, 18, 14, 0.18),
      inset 0 0 0 1px var(--rule-soft);
    vertical-align: middle;
    flex-shrink: 0;
  }
  /* The puck inside */
  .lamp::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: var(--r-pill);
    background: transparent;
    box-shadow: none;
    transition:
      background var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease);
  }
  .lamp.is-on::after,
  .lamp.is-lit::after {
    background: var(--_color);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 0.5px 0 rgba(255, 255, 255, 0.35);
  }
  .lamp--lg { width: 18px; height: 18px; }
  .lamp--lg::after { inset: 3px; }
  .lamp--sm { width: 10px; height: 10px; }
  .lamp--sm::after { inset: 1.5px; }
  .lamp--cobalt    { --_color: var(--enamel-cobalt); }
  .lamp--emerald   { --_color: var(--enamel-emerald); }
  .lamp--gold      { --_color: var(--enamel-gold); }
  .lamp--vermilion { --_color: var(--enamel-vermilion); }
  .lamp--amethyst  { --_color: var(--enamel-amethyst); }
  /* Subtle pulse for attention (used sparingly, respects reduced-motion) */
  @keyframes lamp-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  .lamp.is-pulsing::after {
    animation: lamp-pulse 1.4s var(--ease) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .lamp.is-pulsing::after { animation: none; }
  }

  /* ── WHEEL — larger rotary with named positions visible around it.
        A bigger knob with position labels at the four cardinals (N/E/S/W).
        The cap rotates with a notch pointing to the active position.
        The active label bolds. Used for mode selection: Program/Edit/
        Compare/Report, or care setting. ── */
  .wheel-group {
    --_d: 112px;
    --_label-r: 84px;    /* radius from center where labels sit */
    position: relative;
    display: inline-block;
    width: calc(var(--_label-r) * 2 + 32px);
    height: calc(var(--_label-r) * 2 + 32px);
    padding: 0;
    vertical-align: middle;
  }
  .wheel-group__label {
    position: absolute;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    white-space: nowrap;
    transition: color var(--m-quick) var(--ease), font-weight var(--m-quick) var(--ease);
  }
  .wheel-group__label.is-active { color: var(--ink); font-weight: var(--w-bold); }
  .wheel-group__label--n { top: 0; left: 50%; transform: translateX(-50%); }
  .wheel-group__label--e { right: 0; top: 50%; transform: translateY(-50%); }
  .wheel-group__label--s { bottom: 0; left: 50%; transform: translateX(-50%); }
  .wheel-group__label--w { left: 0; top: 50%; transform: translateY(-50%); }

  /* The wheel cap itself — bigger version of .knob */
  .wheel {
    --_pocket-pad: 8px;
    --_marker: var(--accent);
    --_rot: 0deg;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: var(--_d);
    height: var(--_d);
    padding: var(--_pocket-pad);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-deep), 0 0 0 1px var(--rule);
    cursor: pointer;
    border: 0;
  }
  /* Cap — visually symmetric, so it does NOT rotate. The marker rotates
     around the fixed cap; the cap shadow stays anchored to the field. */
  .wheel::after {
    content: "";
    position: absolute;
    inset: var(--_pocket-pad);
    border-radius: var(--r-pill);
    background: var(--field-2);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.10),
      0 1px 0 rgba(20, 18, 14, 0.10),
      3px 5px 12px -8px rgba(20, 18, 14, 0.18),
      10px 12px 26px -16px rgba(20, 18, 14, 0.22),
      -3px -3px 10px -8px rgba(255, 255, 255, 0.80);
    transform: none;
  }
  /* Marker — rotates around the WHEEL CENTER, not its own center.
     The marker top is at (pocket-pad + 8)px from container top; the
     wheel center is at (--_d / 2). The transform-origin Y is the
     distance from the marker's top to the wheel center. */
  .wheel::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--_pocket-pad) + 8px);
    width: 6px;
    height: 14px;
    margin-left: -3px;
    border-radius: 3px;
    background: var(--_marker);
    transform-origin: 50% calc(var(--_d) / 2 - var(--_pocket-pad) - 8px);
    transform: rotate(var(--_rot, 0deg));
    transition: transform var(--m-base) var(--ease-soft);
  }
  .wheel-group__value {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: var(--t-md);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .wheel--cobalt    { --_marker: var(--enamel-cobalt); }
  .wheel--emerald   { --_marker: var(--enamel-emerald); }
  .wheel--gold      { --_marker: var(--enamel-gold); }
  .wheel--vermilion { --_marker: var(--enamel-vermilion); }
  .wheel--amethyst  { --_marker: var(--enamel-amethyst); }

  /* ── DROPZONE — a target cut waiting to receive something.
        Larger rectangular cut. Empty state: dashed hairline border,
        muted center label. Hover (dragenter): solid border + accent
        wash + accent-toned label. Filled state: solid border, no label. ── */
  .dropzone {
    --_color: var(--accent);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 240px;
    min-height: 80px;
    padding: var(--s-4) var(--s-5);
    background: var(--field);
    border: 1.5px dashed var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-shallow);
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    text-align: center;
    transition:
      border var(--m-quick) var(--ease),
      background var(--m-quick) var(--ease),
      color var(--m-quick) var(--ease);
  }
  .dropzone__hint {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: inherit;
  }
  .dropzone__sub {
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--w-regular);
  }
  .dropzone:hover,
  .dropzone.is-over {
    border: 1.5px solid var(--_color);
    background: color-mix(in srgb, var(--field) 92%, var(--_color) 8%);
    color: var(--_color);
  }
  .dropzone.is-filled {
    border: 1.5px solid var(--rule);
    background: var(--field);
    color: var(--ink);
  }
  .dropzone--cobalt    { --_color: var(--enamel-cobalt); }
  .dropzone--emerald   { --_color: var(--enamel-emerald); }
  .dropzone--gold      { --_color: var(--enamel-gold); }

  /* ── GRIP — drag handle.
        A small recessed strip with three pairs of hairline dots,
        signalling "grab here." Used on draggable list rows and
        resize handles. ── */
  .grip {
    --_color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--cut-shallow);
    cursor: grab;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .grip__dots {
    display: grid;
    grid-template-columns: repeat(2, 2px);
    grid-template-rows: repeat(3, 2px);
    gap: 3px;
  }
  .grip__dots span {
    width: 2px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--_color);
  }
  .grip:active { cursor: grabbing; }
  .grip--horizontal {
    width: 28px;
    height: 14px;
  }
  .grip--horizontal .grip__dots {
    grid-template-columns: repeat(3, 2px);
    grid-template-rows: repeat(2, 2px);
  }

  /* ── UTILITY BADGE — a compact chip showing a discipline + value.
        Designed for equipment rows: each piece of equipment has a
        row of util badges showing its electrical / plumbing / HVAC
        requirements. The discipline letter sits inside an enamel
        cell (puck-in-cut at small scale); the value is mono text. ── */
  .util-badge {
    --_color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 2px 8px 2px 2px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-shallow);
    vertical-align: middle;
    white-space: nowrap;
  }
  .util-badge__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 16px;
    border-radius: 8px;
    background: var(--_color);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
    letter-spacing: 0;
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 0.5px 0 rgba(255, 255, 255, 0.35);
  }
  .util-badge__value {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .util-badge--electrical { --_color: var(--enamel-gold); }
  .util-badge--plumbing   { --_color: var(--enamel-cobalt); }
  .util-badge--hvac       { --_color: var(--enamel-emerald); }
  .util-badge--data       { --_color: var(--enamel-amethyst); }
  .util-badge--medical    { --_color: var(--enamel-vermilion); }
  .util-badge--gas        { --_color: var(--enamel-burnt); }
  /* Compact variant — no value, just the discipline cell as an indicator */
  .util-badge--compact {
    padding: 2px;
    gap: 0;
  }
  .util-badge--compact .util-badge__value { display: none; }
  /* Missing/unmet variant — outline only, no fill */
  .util-badge.is-unmet .util-badge__code {
    background: transparent;
    color: var(--_color);
    border: 1px dashed var(--_color);
    box-shadow: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   L4. THREE MORE DISTINCT MOTIONS — twist, pull, aperture
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* ── TWIST-LOCK — rotate 90° to engage. Two stateful positions
        (unlocked = vertical indicator, locked = horizontal indicator
        in enamel color). Different from .knob because the cap doesn't
        free-cycle — it snaps between two discrete locked states.
        Used for "lock room from editing" or "freeze layout". ── */
  .twist-lock {
    --_color: var(--enamel-vermilion);
    --_rot: 0deg;
    width: 64px;
    height: 64px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-mid);
    position: relative;
    padding: 0;
    border: 1px solid var(--rule);
    cursor: pointer;
  }
  /* The cap — a flat unmarked disc. Stays STATIONARY: only the
     indicator bar (::before) rotates to communicate the lock state.
     The cap's shadows are directional (light from upper-left, shadow
     to bottom-right), so they MUST stay fixed — rotating the cap
     would rotate its shadows too, making the light source appear to
     move with the lock. Since the cap has no markings, fixing it
     loses nothing — the indicator alone shows the state change.       */
  .twist-lock::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: var(--r-pill);
    background: var(--field-2);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.12),
      0 1px 0 rgba(20, 18, 14, 0.14),
      3px 5px 12px -8px rgba(20, 18, 14, 0.22),
      9px 10px 22px -15px rgba(20, 18, 14, 0.24),
      -3px -3px 10px -8px rgba(255, 255, 255, 0.78);
  }
  /* The indicator bar — vertical when unlocked, horizontal when locked.
     Sits on top of the cap and rotates with it. */
  .twist-lock::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 32px;
    margin-left: -2px;
    margin-top: -16px;
    border-radius: 2px;
    background: var(--ink-3);
    transform-origin: 50% 50%;
    transform: rotate(var(--_rot));
    transition:
      transform 320ms cubic-bezier(0.34, 1.18, 0.42, 1),
      background var(--m-base) var(--ease);
  }
  .twist-lock.is-locked {
    --_rot: 90deg;
  }
  .twist-lock.is-locked::before {
    background: var(--_color);
  }
  /* Optional small lamp dot above to signal locked state */
  .twist-lock-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    position: relative;
  }
  .twist-lock-group__label {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
  .twist-lock--cobalt    { --_color: var(--enamel-cobalt); }
  .twist-lock--gold      { --_color: var(--enamel-gold); }
  .twist-lock--emerald   { --_color: var(--enamel-emerald); }
  .twist-lock--vermilion { --_color: var(--enamel-vermilion); }

  /* ── PLUNGER — pulls UP out of the field (the opposite motion
        of every other button). At rest the cap is depressed flush
        with a routed well; when armed, the cap RISES out of the
        well and a rod becomes visible connecting it down. Reverse
        of punch — punch goes IN momentarily, plunger comes OUT
        statefully. Used for emergency stop / abort / suspend. ── */
  .plunger {
    --_color: var(--enamel-vermilion);
    width: 64px;
    height: 96px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--cut-mid);
    position: relative;
    padding: 0;
    cursor: pointer;
  }
  /* The rod — visible only when armed, connecting cap to base */
  .plunger::after {
    content: "";
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 0;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 50%, var(--field)) 0%,
      var(--ink-3) 100%);
    border-radius: 2px 2px 0 0;
    transition: height var(--m-base) var(--ease-soft);
    z-index: 1;
  }
  /* The cap — depressed at rest, pulled UP when armed */
  .plunger::before {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 28px;
    border-radius: var(--r-md);
    background: var(--field-2);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.12),
      0 0.75px 0 rgba(0, 0, 0, 0.34),
      0 1.5px 3px -2.25px rgba(0, 0, 0, 0.28);
    transition:
      bottom var(--m-base) var(--ease-soft),
      box-shadow var(--m-base) var(--ease-soft),
      background var(--m-base) var(--ease);
    z-index: 2;
  }
  .plunger.is-armed::before {
    bottom: 52px;
    background: var(--_color);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 1px 0 rgba(20, 18, 14, 0.24),
      3px 5px 12px -8px rgba(20, 18, 14, 0.30),
      10px 12px 24px -15px rgba(20, 18, 14, 0.34),
      -3px -3px 10px -8px rgba(255, 255, 255, 0.38);
  }
  .plunger.is-armed::after {
    height: 32px;
  }
  .plunger--cobalt    { --_color: var(--enamel-cobalt); }
  .plunger--gold      { --_color: var(--enamel-gold); }
  .plunger--vermilion { --_color: var(--enamel-vermilion); }
  .plunger--amethyst  { --_color: var(--enamel-amethyst); }

  /* ── IRIS — radial aperture. A circular housing with a center
        opening that closes/opens. Value controlled (0 = closed,
        1 = wide open). The motion is radial, unlike every other
        mechanism. Useful for filter intensity, range narrowing,
        or detail-level selection. ── */
  .iris {
    --_color: var(--enamel-cobalt);
    --_value: 0.5;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-mid);
    border: 1px solid var(--rule);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
  }
  /* The inner pocket — a deep cut where the pupil lives. */
  .iris::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: var(--r-pill);
    background:
      radial-gradient(circle at 50% 40%,
        color-mix(in srgb, var(--ink) 78%, var(--field) 22%) 0%,
        var(--ink) 70%);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.35);
  }
  /* The pupil — colored aperture, scales with --_value */
  .iris::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: var(--r-pill);
    background: var(--_color);
    transform: scale(calc(0.18 + var(--_value) * 0.78));
    transition: transform var(--m-base) var(--ease-soft);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      inset 0 1px 2px rgba(255, 255, 255, 0.18);
  }
  .iris--cobalt    { --_color: var(--enamel-cobalt); }
  .iris--gold      { --_color: var(--enamel-gold); }
  .iris--emerald   { --_color: var(--enamel-emerald); }
  .iris--vermilion { --_color: var(--enamel-vermilion); }
  .iris--burnt     { --_color: var(--enamel-burnt); }
}

/* ─────────────────────────────────────────────────────────────────
   L5. CONTAINMENT GRAMMAR — a different mechanic at each level so
       nested containment never reads as stacked shadows.
         level 1 — .card / cut
         level 2 — .stratum (tone shift, no shadow/border)
         level 3 — .crest (corner L-mark + label)
         level 4 — .margin-rule (left hairline + eyebrow)
         level 5 — .eyebrow (pure typography)
       Rule: no mechanic adjacent to itself.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* Stratum — level 2. A tonal shift; no border, no shadow. */
  .stratum {
    background: var(--field-2);
    border-radius: var(--r-sm);
    padding: var(--s-4) var(--s-5);
  }
  .stratum--deep { background: var(--field-3); }

  /* Crest — level 3. A small L-mark in the upper-left corner of a
     region, with an optional label tucked into the corner. */
  .crest {
    position: relative;
    padding: var(--s-4) var(--s-3) var(--s-3) var(--s-4);
  }
  .crest::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 14px;
    height: 14px;
    border-top: 1.5px solid var(--ink-2);
    border-left: 1.5px solid var(--ink-2);
    pointer-events: none;
  }
  .crest__label {
    display: inline-block;
    position: absolute;
    top: -3px;
    left: 22px;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-2);
    background: var(--field);
    padding: 0 6px;
    line-height: 1;
  }
  .stratum .crest__label { background: var(--field-2); }
  .stratum--deep .crest__label { background: var(--field-3); }

  /* Margin-rule — level 4. A hairline on the left edge + eyebrow label. */
  .margin-rule {
    padding-left: var(--s-4);
    border-left: 1px solid var(--rule);
  }
  .margin-rule__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
    margin-bottom: var(--s-2);
  }

  /* Level 5 — pure typography. The existing .eyebrow already plays
     this role; no new class needed. The rule is just: don't put a
     box around an eyebrow. */
}

/* ─────────────────────────────────────────────────────────────────
   L6. SYSTEM-LEVEL PRIMITIVES — v10's grammar at the workspace scale.

   These three primitives extend the cut/puck logic from controls to
   the entire app. They answer "how does v10 work above the level of
   a single button?":
     - .slide-panel        : modeless slide-in surface (replaces modals)
     - .trail-strip        : visible undo / history as a horizontal strip
     - .instrument-cluster : a row of live state indicators at the top
                             of the workspace, always visible
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* ── SLIDE-PANEL — a modeless surface that slides in from an edge.
        Replaces every modal dialog in the current app. The user can
        still see the workspace behind it; dismissing returns focus
        without losing context. A puck floating above the field, not
        a curtain blocking it. ── */
  .slide-panel {
    --_w: 360px;
    --_edge: right;   /* informational; actual position via .slide-panel--right etc. */
    position: relative;   /* swap to fixed in real app */
    width: var(--_w);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--field-ambient);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 480px;
  }
  .slide-panel__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--rule-soft);
    flex-shrink: 0;
  }
  .slide-panel__grip {
    /* A drag-grip at the top edge — drag to move the panel. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    box-shadow: var(--cut-shallow);
    cursor: grab;
  }
  .slide-panel__grip-dots {
    display: grid;
    grid-template-columns: repeat(3, 2px);
    grid-template-rows: repeat(2, 2px);
    gap: 2px;
  }
  .slide-panel__grip-dots span {
    width: 2px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
  }
  .slide-panel__title {
    flex: 1;
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
  }
  .slide-panel__close {
    appearance: none;
    border: 0;
    background: transparent;
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
  }
  .slide-panel__close:hover { background: var(--field-2); color: var(--ink); }
  .slide-panel__body {
    padding: var(--s-4);
    overflow-y: auto;
    flex: 1;
  }
  .slide-panel__foot {
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--rule-soft);
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    flex-shrink: 0;
  }

  /* ── TRAIL-STRIP — visible undo / history.
        A horizontal sequence of small pucks at the foot of the
        workspace. Each puck = a recent change. Click to inspect,
        scrub left/right to scan time. The active puck (current
        state) is highlighted by ring + center dot — same grammar
        as the rocker. Time becomes a first-class v10 surface. ── */
  .trail-strip {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--cut-shallow);
  }
  .trail-strip__step {
    --_color: var(--ink-3);
    --_line: var(--rule-strong);
    appearance: none;
    border: 1px solid var(--rule-soft);
    background: var(--field);
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    box-shadow: var(--puck-flush);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition:
      box-shadow var(--m-quick) var(--ease-soft),
      border-color var(--m-quick) var(--ease);
  }
  .trail-strip__step:hover { border-color: var(--_line); }
  /* Past states — small dots, dim */
  .trail-strip__step.is-past {
    border-color: var(--rule);
  }
  .trail-strip__step.is-past::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
  }
  /* Current state — pressed in with a colored center dot */
  .trail-strip__step.is-current {
    box-shadow: var(--cut-shallow);
    background: var(--field);
    border-color: var(--_line);
  }
  .trail-strip__step.is-current::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: var(--r-pill);
    background: var(--_color);
  }
  /* Future / undone states — outline only, no center */
  .trail-strip__step.is-future {
    background: var(--field);
    border-style: dashed;
  }
  /* Event category lives in the center mark and rim, never a washed step face. */
  .trail-strip__step--add    { --_color: var(--enamel-emerald); --_line: var(--enamel-emerald-line); }
  .trail-strip__step--edit   { --_color: var(--enamel-cobalt);  --_line: var(--enamel-cobalt-line); }
  .trail-strip__step--remove { --_color: var(--enamel-vermilion); --_line: var(--enamel-vermilion-line); }
  .trail-strip__step--sync   { --_color: var(--enamel-gold);    --_line: var(--enamel-gold-line); }
  /* Separator — a hairline tick between commit clusters */
  .trail-strip__tick {
    width: 1px;
    height: 12px;
    background: var(--rule);
    margin: 0 2px;
    flex-shrink: 0;
  }
  /* Eyebrow label at the start of the strip (e.g. "TODAY" / "YESTERDAY") */
  .trail-strip__label {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    padding: 0 var(--s-2);
    flex-shrink: 0;
  }

  /* ── INSTRUMENT-CLUSTER — a row of live state indicators at the
        top of the workspace. Always visible, never demanding focus.
        Hairline-bordered cells, each carrying one piece of state.
        Replaces "I have to open the inspector to see X" with "X is
        visible at all times." The dashboard of a Logic Pro or DAW
        applied to architectural programming. ── */
  .instrument-cluster {
    display: flex;
    align-items: stretch;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .instrument-cluster__cell {
    flex: 1;
    padding: var(--s-2) var(--s-3);
    border-right: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .instrument-cluster__cell:last-child { border-right: 0; }
  .instrument-cluster__label {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: var(--w-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    line-height: 1;
  }
  .instrument-cluster__value {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .instrument-cluster__value-mute {
    color: var(--ink-3);
    font-size: var(--t-xs);
  }

  /* ── FIELD INSTRUMENTS — second-order workspace primitives.
        These refine the model from "workspace as field" into
        continuous provenance, comparison, tool deployment, scope,
        live sync, and sequence. ── */
  .scope-chain {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .scope-chain__item {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .scope-chain__item.is-active {
    color: var(--ink);
    font-weight: var(--w-bold);
  }
  .scope-chain__rule {
    width: 12px;
    height: 1px;
    background: var(--rule-strong);
    flex-shrink: 0;
  }

  .tool-puck-dock {
    display: flex;
    gap: var(--s-2);
    align-items: center;
  }
  .tool-puck {
    --_color: var(--enamel-cobalt);
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
    cursor: grab;
    position: relative;
  }
  .tool-puck::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 42%, transparent);
    pointer-events: none;
  }
  .tool-puck.is-deployed {
    box-shadow: var(--cut-shallow);
    background: var(--field);
    border-color: var(--rule-strong);
  }
  .tool-puck.is-deployed::after { border-color: var(--_color); }
  .tool-puck--mep { --_color: var(--enamel-emerald); }
  .tool-puck--report { --_color: var(--enamel-gold); }
  .tool-puck--compare { --_color: var(--enamel-amethyst); }

  .memo-value {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-1);
    padding-bottom: 8px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    cursor: help;
  }
  .memo-value__unit {
    color: var(--ink-3);
    font-size: var(--t-xs);
  }
  .memo-value__strip {
    position: absolute;
    left: 0;
    top: calc(100% - 4px);
    display: flex;
    gap: var(--s-2);
    white-space: nowrap;
    padding: 2px 0 0;
    border-top: 1px solid var(--rule-strong);
    color: var(--ink-3);
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-2px);
    transition:
      opacity var(--m-quick) var(--ease),
      transform var(--m-quick) var(--ease);
    pointer-events: none;
  }
  .memo-value:hover .memo-value__strip,
  .memo-value:focus-within .memo-value__strip {
    opacity: 1;
    transform: translateY(0);
  }

  .split-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    min-height: 220px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--field);
  }
  .split-workspace__pane {
    padding: var(--s-3);
    min-width: 0;
  }
  .split-workspace__rule {
    position: relative;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule-soft);
    background: var(--field-2);
    cursor: col-resize;
  }
  .split-workspace__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: var(--r-pill);
    background: var(--field);
    border: 1px solid var(--rule);
    box-shadow: var(--puck-resting);
  }
  .split-workspace__grip::before {
    content: "";
    position: absolute;
    inset: 9px 7px;
    border-left: 1px solid var(--rule-strong);
    border-right: 1px solid var(--rule-strong);
  }

  .live-link-channel {
    --_color: var(--enamel-cobalt);
    --_line: var(--enamel-cobalt-line);
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field-2);
  }
  .live-link-channel__label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .live-link-channel__line {
    height: 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--_line);
    background:
      linear-gradient(90deg, var(--_color) calc(var(--_value, 0.72) * 100%), transparent 0),
      var(--field);
    box-shadow: var(--cut-shallow);
  }
  .live-link-channel--emerald {
    --_color: var(--enamel-emerald);
    --_line: var(--enamel-emerald-line);
  }
  .live-link-channel--gold {
    --_color: var(--enamel-gold);
    --_line: var(--enamel-gold-line);
  }

  .programming-tape {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(86px, 1fr);
    gap: var(--s-2);
    padding: var(--s-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--cut-shallow);
    overflow-x: auto;
  }
  .programming-tape__frame {
    min-height: 50px;
    padding: var(--s-2);
    border-radius: var(--r-sm);
    border: 1px solid var(--rule-soft);
    background: var(--field-2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s-1);
  }
  .programming-tape__frame.is-current {
    border-color: var(--rule-strong);
    background: var(--field-2);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .programming-tape__no {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
  }
  .programming-tape__name {
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    color: var(--ink);
  }

  /* ── FUNCTION TRANSLATION — keeps the design-lab expansive while
        proving no application capability gets discarded. ── */
  .translation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--s-2);
  }
  .translation-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: start;
    min-height: 124px;
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
  }
  .translation-card__from {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .translation-card__to {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
  }
  .translation-card__surface {
    font-size: var(--t-sm);
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .translation-card__why {
    font-size: var(--t-xs);
    color: var(--ink-3);
    line-height: 1.45;
  }

  .showcase-fold {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--field);
    overflow: hidden;
  }
  .showcase-fold > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    background: var(--field-2);
    border-bottom: 1px solid transparent;
  }
  .showcase-fold > summary::-webkit-details-marker { display: none; }
  .showcase-fold[open] > summary { border-bottom-color: var(--rule-soft); }
  .showcase-fold__letter {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-3);
    letter-spacing: var(--tracking-eyebrow);
  }
  .showcase-fold__title {
    font-size: var(--t-lg);
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
  }
  .showcase-fold__note {
    margin-left: auto;
    font-size: var(--t-xs);
    color: var(--ink-3);
  }
  .showcase-fold__body {
    padding: var(--s-4);
  }
  .showcase-fold__chev {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
    box-shadow: var(--cut-shallow);
    position: relative;
    flex-shrink: 0;
  }
  .showcase-fold__chev::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 5px;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--ink-3);
    border-bottom: 1px solid var(--ink-3);
    transform: rotate(45deg);
  }
  .showcase-fold[open] .showcase-fold__chev::before {
    top: 7px;
    transform: rotate(225deg);
  }

  .maturity-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .maturity-bin {
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-md);
    background: var(--field-2);
  }
  .maturity-bin__label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
    font-size: var(--t-xs);
    font-weight: var(--w-bold);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
  .maturity-bin__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .thread-map {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-3);
    align-items: stretch;
  }
  .thread-map__field {
    min-height: 300px;
    padding: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background:
      linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
      var(--field);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
  }
  .thread-map__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 148px;
    height: 148px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--field);
    box-shadow: var(--puck-raised);
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s-3);
  }
  .thread-map__core-code {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-lg);
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.04em;
  }
  .thread-map__core-sub {
    display: block;
    margin-top: var(--s-1);
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
  }
  .thread-node {
    --_x: 0;
    --_y: 0;
    --_line: var(--rule);
    position: absolute;
    left: var(--_x);
    top: var(--_y);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 108px;
    padding: 7px 9px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--cut-shallow);
    font-size: 10px;
    font-weight: var(--w-bold);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .thread-node::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--_line);
    box-shadow:
      0 0 0 2px var(--field),
      inset 0 0.5px 0 rgba(255,255,255,0.30);
    flex-shrink: 0;
  }
  .thread-node--program { --_line: var(--enamel-cobalt); }
  .thread-node--criteria { --_line: var(--enamel-emerald); }
  .thread-node--equipment { --_line: var(--enamel-gold); }
  .thread-node--mep { --_line: var(--enamel-amethyst); }
  .thread-node--revit { --_line: var(--enamel-emerald); }
  .thread-node--layout { --_line: var(--ink-2); }
  .thread-node--move { --_line: var(--enamel-vermilion); }
  .thread-node--memory { --_line: var(--enamel-cobalt); }
  .thread-node--report { --_line: var(--enamel-gold); }
  .thread-map__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .thread-rule {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
  }
  .thread-rule__label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .thread-rule__text {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--ink-3);
    line-height: 1.45;
  }

  .slice-board {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: var(--s-3);
    align-items: stretch;
  }
  .slice-board__rail,
  .slice-board__main {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--field);
    overflow: hidden;
  }
  .slice-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field-2);
  }
  .slice-board__body {
    padding: var(--s-3);
  }
  .slice-step {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .slice-step:last-child { border-bottom: 0; }
  .slice-step__no {
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    box-shadow: var(--cut-shallow);
  }
  .slice-step__label {
    font-size: var(--t-xs);
    color: var(--ink);
    font-weight: var(--w-medium);
  }
  .slice-step__surface {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .slice-step.is-current .slice-step__no {
    color: var(--ink);
    border-color: var(--rule-strong);
    background: var(--field);
    box-shadow:
      var(--cut-shallow),
      inset 0 0 0 3px var(--field),
      inset 0 0 0 5px var(--enamel-gold);
  }
  .slice-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
  }
  .slice-proof__cell {
    min-height: 86px;
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field-2);
  }
  .slice-proof__value {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-lg);
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
  }
  .slice-proof__note {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.35;
  }

  .v10-console {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--field);
    box-shadow: var(--puck-resting);
    overflow: hidden;
  }
  .v10-console__chrome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
    background: var(--field-2);
  }
  .v10-console__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .v10-console__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .v10-console__name {
    font-size: var(--t-lg);
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
  }
  .v10-console__body {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 250px;
    min-height: 500px;
  }
  .v10-console__rail,
  .v10-console__inspector {
    padding: var(--s-3);
    background: var(--field-2);
    min-width: 0;
  }
  .v10-console__rail { border-right: 1px solid var(--rule-soft); }
  .v10-console__inspector { border-left: 1px solid var(--rule-soft); }
  .v10-console__field {
    padding: var(--s-3);
    min-width: 0;
    background: var(--field);
  }
  .thread-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .thread-rail__item {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    gap: var(--s-2);
    align-items: center;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
    color: var(--ink);
    text-align: left;
    cursor: default;
  }
  .thread-rail__item::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_color, var(--ink-3)) 14%, transparent);
  }
  .thread-rail__item.is-active {
    border-color: var(--rule-strong);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .thread-rail__label {
    font-size: 11px;
    font-weight: var(--w-bold);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .thread-rail__state {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
  }
  .room-proof {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--field) 92%, transparent);
    overflow: hidden;
  }
  .room-proof__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .room-proof__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule-soft);
  }
  .room-proof__metric {
    padding: var(--s-3);
    border-right: 1px solid var(--rule-soft);
    min-width: 0;
  }
  .room-proof__metric:last-child { border-right: 0; }
  .room-proof__label {
    display: block;
    margin-bottom: var(--s-1);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .room-proof__value {
    display: block;
    font-size: var(--t-md);
    font-weight: var(--w-bold);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .decision-loop {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s-2);
    align-items: stretch;
    padding: var(--s-3);
  }
  .decision-loop__card {
    min-height: 126px;
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field-2);
  }
  .decision-loop__arrow {
    width: 24px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 16px;
  }
  .source-braid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .source-braid__row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: 7px 8px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
  }
  .source-braid__source,
  .source-braid__state {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .source-braid__value {
    font-size: 11px;
    color: var(--ink);
    font-weight: var(--w-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .consequence-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .consequence {
    --_line: var(--rule);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: 8px 9px;
    border: 1px solid var(--_line);
    border-radius: var(--r-sm);
    background: var(--field);
  }
  .consequence__label {
    font-size: 11px;
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .consequence__note {
    grid-column: 1 / -1;
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.35;
  }
  .consequence__value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-2);
  }
  .consequence--ok { --_line: var(--enamel-emerald-line); }
  .consequence--warn { --_line: var(--enamel-gold-line); }
  .consequence--info { --_line: var(--enamel-cobalt-line); }
  .mechanism-ledger {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2);
    padding-top: var(--s-3);
  }
  .mechanism-ledger__item {
    padding: var(--s-3);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
  }
  .mechanism-ledger__name {
    display: block;
    margin-bottom: var(--s-1);
    font-size: var(--t-xs);
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .mechanism-ledger__use {
    display: block;
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.35;
  }

  .room-instrument {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: var(--field);
    overflow: hidden;
  }
  .room-instrument__top {
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field-2);
  }
  .room-instrument__body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 220px;
    min-height: 430px;
  }
  .room-instrument__rail,
  .room-instrument__inspector {
    padding: var(--s-3);
    background: var(--field-2);
  }
  .room-instrument__rail { border-right: 1px solid var(--rule-soft); }
  .room-instrument__inspector { border-left: 1px solid var(--rule-soft); }
  .room-instrument__canvas {
    padding: var(--s-3);
    background:
      linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
      var(--field);
    background-size: 24px 24px;
    min-width: 0;
  }
  .room-row {
    width: 100%;
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: 7px 8px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
    color: var(--ink);
    text-align: left;
    cursor: default;
  }
  .room-row + .room-row { margin-top: 5px; }
  .room-row.is-active {
    border-color: var(--rule-strong);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .room-row__code,
  .room-row__area {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
  }
  .room-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: var(--w-medium);
  }
  .canvas-room {
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--field) 92%, transparent);
    box-shadow: var(--puck-resting);
    overflow: hidden;
  }
  .canvas-room__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    justify-content: space-between;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .canvas-room__plan {
    position: relative;
    min-height: 300px;
    margin: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background:
      linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
      var(--field-2);
    background-size: 22px 22px;
  }
  .plan-block {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--field);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
    letter-spacing: 0.05em;
    box-shadow: var(--cut-shallow);
  }
  .plan-block--room {
    inset: 8%;
    color: var(--ink-3);
    background: transparent;
  }
  .plan-block--equipment {
    border-color: var(--rule-strong);
    background: var(--field);
    color: var(--enamel-cobalt);
  }
  .plan-block--issue {
    border-color: var(--rule-strong);
    background: var(--field);
    color: var(--enamel-gold);
  }
  .lens-ribbon {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    overflow-x: auto;
    padding: 0 var(--s-3) var(--s-3);
  }
  .lens-ribbon__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-pill);
    background: var(--field);
    font-size: 10px;
    color: var(--ink-3);
  }

}

/* ═══════════════════════════════════════════════════════════════════
   L7  NEW MECHANISMS — void cuts, perimeter rings, surface labels,
       dial-window (Config B: rotating cap / fixed aperture)
   ═══════════════════════════════════════════════════════════════════ */
@layer primitives {

  /* ═════════════════════════════════════════════════════════════════
     ZONE — a tonally distinct region on the surface at the same depth
     as the field. Sits at the same hierarchy level as CUT and PUCK,
     but doesn't do what either does:

       CUT  → depth change, exposes a sub-layer with text/color/dots
       PUCK → raised operable element (puck/knob/wheel/dial)
       ZONE → same-level surface region that DEFINES where operable
              elements live. A subtle tonal shift and hairline border
              say "pucks/slides/knobs operate inside this area." Used
              for slider tracks, control groups, plate areas, etc.

     Indicator dots can sit either inside a zone (showing zone state)
     or outside on the bare field (showing field-wide state).
     ═════════════════════════════════════════════════════════════════ */
  .zone {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--s-2);
    border-radius: var(--r-md);
    /* Slightly different tone than the field — not deep enough to read
       as a cut, just enough to delineate a region.                    */
    background: var(--field-2);
    box-shadow:
      inset 0 0 0 0.5px var(--rule-soft),
      inset 0 0.5px 0 rgba(255, 255, 255, 0.25),
      inset 0 -0.5px 0 rgba(0, 0, 0, 0.05);
  }
  .zone--pill   { border-radius: var(--r-pill); }
  .zone--round  { border-radius: 50%; padding: var(--s-3); }
  /* When the zone is the dominant tone (e.g., a slider track), use
     field-3 for a touch more contrast. */
  .zone--strong { background: var(--field-3); }
  /* Tighter padding for slim tracks */
  .zone--snug   { padding: 4px; }
  .zone--tight  { padding: 2px; }

  /* ═════════════════════════════════════════════════════════════════
     SLIDER — discrete-position value selector with two visual variants.
     Shared mechanism (N positions, current value, click to set), two
     personalities:

       .slider--kugel  → ball in a long slot; trail fills behind ball;
                         detent dots and their rail turn enamel as the
                         ball passes over them.

       .slider--well   → deep slot cut into the field; a field-colored
                         pill thumb slides through it, carrying two
                         small circular impressions.

       .slider--puck   → bare surface slot; razor-thin black cut with
                         enlarged black void holes at the detents.
     ═════════════════════════════════════════════════════════════════ */
  .slider {
    --_value: 0;
    --_max:   7;
    --_color: var(--enamel-cobalt);
    --_w:      248px;
    --_h:      30px;
    --_pad:    3px;
    --_ball:   calc(var(--_h) - 2 * var(--_pad));
    --_thumb-w: var(--_ball);
    --_travel: calc(var(--_w) - var(--_thumb-w) - 2 * var(--_pad));
    position: relative;
    display: inline-flex;
    align-items: center;
    width: var(--_w);
    height: var(--_h);
    border-radius: var(--r-pill);
    cursor: pointer;
    overflow: hidden;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .slider--cobalt    { --_color: var(--enamel-cobalt); }
  .slider--gold      { --_color: var(--enamel-gold); }
  .slider--emerald   { --_color: var(--enamel-emerald); }
  .slider--vermilion { --_color: var(--enamel-vermilion); }
  .slider--amethyst  { --_color: var(--enamel-amethyst); }
  .slider--burnt     { --_color: var(--enamel-burnt); }

  .slider__fill,
  .slider__rail,
  .slider__dots,
  .slider__thumb {
    pointer-events: none;
  }

  .slider__fill {
    position: absolute;
    top: var(--_pad);
    bottom: var(--_pad);
    left: var(--_pad);
    width: calc(var(--_thumb-w) + (var(--_value) / var(--_max)) * var(--_travel));
    border-radius: var(--r-pill);
    background: var(--_color);
    transition: width var(--m-base) var(--ease-roll);
  }

  .slider__rail {
    position: absolute;
    left: calc(var(--_pad) + var(--_thumb-w) / 2);
    right: calc(var(--_pad) + var(--_thumb-w) / 2);
    top: 50%;
    height: 2px;
    border-radius: var(--r-pill);
    background:
      linear-gradient(
        90deg,
        var(--_color) 0 calc((var(--_value) / var(--_max)) * 100%),
        var(--rule-strong) calc((var(--_value) / var(--_max)) * 100%) 100%
      );
    transform: translateY(-50%);
    transition: background var(--m-base) var(--ease-roll);
  }

  .slider__dots {
    position: absolute;
    inset: 0;
  }

  .slider__dot {
    --_x: calc(var(--_pad) + var(--_thumb-w) / 2 + (var(--_i) / var(--_max)) * var(--_travel));
    position: absolute;
    left: var(--_x);
    top: 50%;
    width: 8px;
    height: 8px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--rule-strong);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--field) 74%, transparent);
    transform: translate(-50%, -50%);
    transition:
      background var(--m-base) var(--ease-roll),
      box-shadow var(--m-base) var(--ease-roll);
  }

  .slider__dot.is-active {
    background: var(--_color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--_color) 38%, var(--field));
  }

  .slider__thumb {
    position: absolute;
    top: var(--_pad);
    left: calc(var(--_pad) + (var(--_value) / var(--_max)) * var(--_travel));
    width: var(--_thumb-w);
    height: var(--_ball);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-resting);
    transition: left var(--m-base) var(--ease-roll);
  }

  /* Variant A — kugel-style slider. Same physics as .kugel: ball
     rides in a hairline-outlined slot; trail grows from the left.    */
  .slider--kugel {
    background: var(--field);
    box-shadow: var(--cut-mid), 0 0 0 1px var(--rule);
  }

  .slider--kugel .slider__fill { z-index: 1; }
  .slider--kugel .slider__rail,
  .slider--kugel .slider__dots { z-index: 2; }
  .slider--kugel .slider__thumb { z-index: 3; }

  /* Variant B — well-style slider. A deep slot cut into the surface.
     The whole pill thumb slides through the cut; its paired circles
     make the handle read as a physical slider plate.                   */
  .slider--well {
    --_h: 34px;
    --_pad: 4px;
    --_ball: calc(var(--_h) - 2 * var(--_pad));
    --_thumb-w: 40px;
    background: var(--field-3);
    box-shadow:
      inset 0 4px 6px rgba(0, 0, 0, 0.40),
      inset 0 2px 3px -0.5px rgba(0, 0, 0, 0.55),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.60),
      inset 0 -1.5px 0 rgba(255, 255, 255, 0.20),
      0 0 0 1px var(--rule),
      0 1.5px 3px rgba(0, 0, 0, 0.06);
  }

  .slider--well .slider__fill {
    z-index: 1;
    background: var(--_color);
    box-shadow:
      inset 0 3.5px 4px rgba(0, 0, 0, 0.45),
      inset 0 2px 2.5px -0.5px rgba(0, 0, 0, 0.55),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
      inset 0 -0.5px 0 rgba(255, 255, 255, 0.18);
  }

  .slider--well .slider__rail,
  .slider--well .slider__dots {
    z-index: 2;
  }

  .slider--well .slider__thumb {
    z-index: 3;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.22),
      0 1.5px 2px rgba(0, 0, 0, 0.32),
      0 0.5px 0 rgba(0, 0, 0, 0.20);
  }

  .slider--well .slider__thumb::before,
  .slider--well .slider__thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--field-3);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.24),
      inset 0 0 0 0.5px var(--rule);
    transform: translateY(-50%);
  }

  .slider--well .slider__thumb::before { left: 10px; }
  .slider--well .slider__thumb::after  { right: 10px; }

  .slider--well .slider__dot {
    width: 9px;
    height: 9px;
    background: color-mix(in srgb, var(--field-3) 72%, #000);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.10);
  }

  .slider--well .slider__dot.is-active {
    background: var(--_color);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(0, 0, 0, 0.18);
  }

  /* Variant C — surface slot slider. No raised body. The only visible
     form is a razor-thin deep cut in the field, with enlarged void
     holes at the detents and a small sliding field puck.               */
  .slider--puck {
    --_h: 28px;
    --_pad: 5px;
    --_ball: calc(var(--_h) - 2 * var(--_pad));
    --_thumb-w: 30px;
    --_void: #010101;
    --_void-rim: rgba(0, 0, 0, 0.94);
    --_void-light: rgba(255, 255, 255, 0.16);
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .slider--puck::before {
    content: "";
    position: absolute;
    left: calc(var(--_pad) + var(--_thumb-w) / 2);
    right: calc(var(--_pad) + var(--_thumb-w) / 2);
    top: 50%;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--_void);
    box-shadow:
      inset 0 0.7px 0.9px var(--_void-rim),
      inset 0 -0.35px 0 var(--_void-light),
      0 0 0 0.35px rgba(20, 18, 14, 0.26);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .slider--puck .slider__fill {
    z-index: 1;
    top: calc(50% - 1px);
    bottom: auto;
    height: 2px;
    left: calc(var(--_pad) + var(--_thumb-w) / 2);
    width: calc((var(--_value) / var(--_max)) * var(--_travel));
    min-width: 0;
    border-radius: var(--r-pill);
    box-shadow:
      inset 0 0.7px 0.9px rgba(0, 0, 0, 0.32),
      inset 0 -0.35px 0 rgba(255, 255, 255, 0.10);
  }

  .slider--puck .slider__rail,
  .slider--puck .slider__dots {
    z-index: 2;
  }

  .slider--puck .slider__rail {
    height: 0;
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--_color) 88%, #000) 0 calc((var(--_value) / var(--_max)) * 100%),
        var(--_void) calc((var(--_value) / var(--_max)) * 100%) 100%
      );
  }

  .slider--puck .slider__dot {
    width: 9px;
    height: 9px;
    background: var(--_void);
    box-shadow:
      inset 0 1px 1.2px var(--_void-rim),
      inset 0 -0.45px 0 var(--_void-light),
      0 0 0 0.35px rgba(20, 18, 14, 0.22);
  }

  .slider--puck .slider__dot.is-active {
    background: var(--_color);
    box-shadow:
      inset 0 0.75px 1px rgba(0, 0, 0, 0.24),
      0 0 0 0.5px rgba(0, 0, 0, 0.18);
  }

  .slider--puck .slider__thumb {
    z-index: 3;
    background: var(--field);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.18),
      0 1px 0 rgba(0, 0, 0, 0.42),
      4px 5px 10px -9px rgba(20, 18, 14, 0.20);
  }

  .slider--puck .slider__thumb::before,
  .slider--puck .slider__thumb::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--_void);
    box-shadow:
      inset 0 1px 1.1px var(--_void-rim),
      inset 0 -0.4px 0 var(--_void-light),
      0 0 0 0.35px rgba(20, 18, 14, 0.20);
    transform: translateY(-50%);
  }

  .slider--puck .slider__thumb::before { left: 6px; }
  .slider--puck .slider__thumb::after  { right: 6px; }

  .slider:focus-visible {
    outline: none;
    box-shadow:
      var(--cut-mid),
      0 0 0 2px var(--enamel-cobalt-soft);
  }
  .slider--puck:focus-visible {
    box-shadow: 0 0 0 2px var(--enamel-cobalt-soft);
  }

  /* ═════════════════════════════════════════════════════════════════
     CUT SUB-LAYER HIERARCHY (depth INSIDE a cut, from top down):

       1. TEXT LAYER   — just under the surface. Carries readable
                         content (numbers, names, status dots). Receives
                         dim light from above; stays legible. Background
                         tone = var(--field-3) or similar; text = --ink.

       2. COLOR LAYER  — very deep. Carries enamel fill/state. Mostly
                         in shadow when empty; fills with enamel when
                         state turns on (.check checked, .holdcut held,
                         .dial-cut--accent active).

     The dial-cut's revealed substrate is the TEXT LAYER (readable).
     A checkbox or holdcut shows the COLOR LAYER (dark→enamel on fill).
     A dial-cut can opt into COLOR LAYER via .dial-cut--accent.
     ═════════════════════════════════════════════════════════════════ */

  /* ── CUT / VOID ────────────────────────────────────────────────────
     A precision slit milled into the surface. The cut's interior is the
     SAME material as the surface (theme-aware via --cut-fill = field);
     depth comes ONLY from sharp non-blurred inset shadows, which is
     what gives the cut its "precision machined" read rather than a
     soft photographic-style recess.

     Three shadow layers, all crisp (no blur):
       1. Top-inner 1px hard line — the cut's upper edge, in shadow.
          This is the single most important precision cue: a perfectly
          sharp dark line at the very top of the cut.
       2. Inner perimeter 0.5px hairline — defines the cut's boundary
          with absolute clarity.
       3. Bottom-inner 0.5px catchlight — the back lip catches a sliver
          of light, completing the "real cut" read.

     Padding is integer pixels only (no fractional padding). Halo around
     the puck = 1px by default, just enough to read as "the puck sits
     in a cut" without inflating the cut into a frame.                  */
  .void {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    border-radius: var(--r-sm);
    background: var(--cut-fill);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .void--pill  {
    border-radius: var(--r-pill);
    padding: 1px 2px;
  }
  .void--round {
    border-radius: 50%;
    padding: 1px;
  }
  .void--tight { padding: 0.5px; }
  .void--snug  { padding: 0.75px; }
  .void--round.void--tight,
  .void--round.void--snug {
    padding: 0.75px;
  }

  /* When a Type-A puck sits inside a void, it picks up the same flat
     puck styling that lives outside a void — same hairline edge, same
     1px sharp drop, no decorative bevel. The cut around the puck does
     all the depth work; the puck itself stays a flat tile.            */
  .void > .puck-a {
    background: var(--field-2);
    box-shadow: var(--puck-resting);
    transition:
      transform var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease),
      background var(--m-quick) var(--ease);
  }
  .void > .puck-a:hover { background: var(--field-2); }
  .void > .puck-a:active,
  .void > .puck-a.is-pressed {
    transform: translateY(1px);
    background: var(--field-3);
    box-shadow: var(--puck-flush);
  }

  /* ── FILLED CUT ─ a cut that carries an enamel color in its interior.
     This is the entire checkbox/toggle/status grammar in one rule.
     Clicked → cut fills. Clicked again → cut empties to black again.   */
  .void.is-filled {
    --_fill: var(--enamel-cobalt);
    background: var(--_fill);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.25),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.35);
  }
  .void.is-filled--cobalt    { --_fill: var(--enamel-cobalt); }
  .void.is-filled--emerald   { --_fill: var(--enamel-emerald); }
  .void.is-filled--gold      { --_fill: var(--enamel-gold); }
  .void.is-filled--vermilion { --_fill: var(--enamel-vermilion); }
  .void.is-filled--amethyst  { --_fill: var(--enamel-amethyst); }
  .void.is-filled--burnt     { --_fill: var(--enamel-burnt); }
  .void.is-filled--ink       { --_fill: var(--ink); }

  /* ── HOLD-FILL ─ press-and-hold confirmation via void interior ─
     A .void becomes a confirmation pad by adding .is-confirming + a
     fill color. As the puck is held, an enamel overlay fills the cut
     from the bottom up (driven by --_progress, 0..1). Release early →
     fill drains. Reaches 1.0 → action confirms. Same physical grammar
     as a checkbox cut, but with temporal filling instead of binary.    */
  .void.is-confirming { overflow: hidden; }
  .void.is-confirming::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      to top,
      var(--_fill, var(--enamel-cobalt)) 0%,
      var(--_fill, var(--enamel-cobalt)) calc(var(--_progress, 0) * 100%),
      transparent                        calc(var(--_progress, 0) * 100%),
      transparent                        100%
    );
    pointer-events: none;
    z-index: 0;
  }
  /* Puck sits above the rising enamel fill */
  .void.is-confirming > .puck-a {
    position: relative;
    z-index: 1;
  }

  /* Punch specimens use the standard .void > .puck-a styling from above.
     No special overrides — the consistent grammar IS the punch. */
  .punch-demo .knob-ratchet { --_gap: 5px; }

  /* ── CHECKBOX CUT ─ the simplest grammar element: a small square cut
     that fills with enamel when checked. No puck, no border, no label
     on the surface. Just a cut and its state.                         */
  .check {
    --_color: var(--enamel-cobalt);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 2px;
    padding: 0;
    /* Unchecked: field-colored cut. Depth from inset shadow only. */
    background: var(--cut-fill);
    box-shadow:
      inset 0 1.5px 2px -0.5px var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--m-quick) var(--ease);
  }
  .check:focus-visible {
    box-shadow:
      inset 0 1.5px 2px -0.5px var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      0 0 0 2px var(--enamel-cobalt-soft);
  }
  /* Checked: cut fills with enamel. Same depth shadows kept so the
     cut still reads as a recess that NOW contains paint.            */
  .check.is-checked {
    background: var(--_color);
    box-shadow:
      inset 0 1px 1.5px rgba(0, 0, 0, 0.18),
      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  }
  .check--cobalt    { --_color: var(--enamel-cobalt); }
  .check--emerald   { --_color: var(--enamel-emerald); }
  .check--gold      { --_color: var(--enamel-gold); }
  .check--vermilion { --_color: var(--enamel-vermilion); }
  .check--amethyst  { --_color: var(--enamel-amethyst); }
  .check--ink       { --_color: var(--ink); }
  .check--lg { width: 18px; height: 18px; border-radius: 3px; }
  .check--sm { width: 10px; height: 10px; border-radius: 1.5px; }

  /* ── TYPE-A PUCK (button) — flat tile, sits above its void ──────
     Flat fill, hairline edge, single sharp drop. The puck is a plate,
     not a pillow. On press the drop disappears (puck has dropped into
     the void); no transform — the visual change is in the shadow.   */
  .puck-a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field-2);
    box-shadow: var(--puck-resting);
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--m-quick) var(--ease);
  }
  .puck-a:active,
  .puck-a.is-pressed {
    box-shadow: var(--puck-flush);
    background: var(--field-3);
  }
  .puck-a:focus-visible {
    box-shadow:
      var(--puck-resting),
      0 0 0 2px var(--enamel-cobalt-soft),
      0 0 0 2.5px var(--enamel-cobalt-line);
  }
  .puck-a--pill  { border-radius: var(--r-pill); }
  .puck-a--round { border-radius: 50%; }

  /* ── TYPE-B PUCK (indicator/persistent) — no void, state via ring ─
     Flat tile, no hover. Same visual weight as Type-A at rest, but
     the absence of a void means it reads as persistent, not pressable. */
  .puck-b {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field-2);
    box-shadow: var(--puck-resting);
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .puck-b--pill  { border-radius: var(--r-pill); }
  .puck-b--round { border-radius: 50%; }

  /* ── PERIMETER RING — continuous (conic-gradient) ──────────────────
     CSS-only arc loader ring around a Type-B puck. Set --_value (0–1)
     to control how far the arc sweeps clockwise from 12 o'clock.
     Usage: add .perim-ring to the puck-b; set style="--_value:0.72"   */
  .perim-ring {
    --_value:  0;
    --_color:  var(--enamel-cobalt);
    --_thick:  2.5px;
    --_gap:    3px;
  }
  .perim-ring::after {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--_thick) + var(--_gap)));
    border-radius: inherit;
    background: conic-gradient(
      from -90deg,
      var(--_color) 0turn,
      var(--_color) calc(var(--_value) * 1turn),
      transparent  calc(var(--_value) * 1turn),
      transparent  1turn
    );
    /* punch a hole to make it a ring */
    mask: radial-gradient(
      farthest-side,
      transparent calc(100% - var(--_thick)),
      #000        calc(100% - var(--_thick))
    );
    pointer-events: none;
    transition: background var(--m-base) var(--ease);
  }
  /* Color variants */
  .perim-ring--cobalt    { --_color: var(--enamel-cobalt); }
  .perim-ring--emerald   { --_color: var(--enamel-emerald); }
  .perim-ring--gold      { --_color: var(--enamel-gold); }
  .perim-ring--vermilion { --_color: var(--enamel-vermilion); }
  .perim-ring--amethyst  { --_color: var(--enamel-amethyst); }
  .perim-ring--burnt     { --_color: var(--enamel-burnt); }

  /* ── KNOB RATCHET ─ thin enamel arc around a step-knob ───────────
     A hairline enamel ratchet around the knob's perimeter. No trench,
     no recessed channel — just an enamel arc on the surface itself,
     filling CW from 12 o'clock as you ratchet up, emptying as you
     ratchet down. Reads like a routed rule on the field, not a moat.
     Wraps modulo N.

     Structure:
       <div class="knob-ratchet knob-ratchet--cobalt" style="--_value: 0;">
         <button class="knob" data-knob data-knob-step …></button>
       </div>                                                          */
  .knob-ratchet {
    --_value:  0;
    --_color:  var(--enamel-cobalt);
    --_thick:  2px;
    --_gap:    4px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  /* Faint unfilled track — a hairline that traces the full ring so the
     ratchet has visible "rout" even at 0% fill. Sits on the surface,
     not recessed.                                                      */
  .knob-ratchet::before {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--_thick) + var(--_gap)));
    border-radius: 50%;
    background: rgba(20, 18, 14, 0.18);
    mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thick)),
        #000        calc(100% - var(--_thick))
      );
    -webkit-mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thick)),
        #000        calc(100% - var(--_thick))
      );
    pointer-events: none;
  }
  /* Enamel fill — sweeps from 12 o'clock CW based on --_value (0..1).
     Sits on top of the unfilled track.                                */
  .knob-ratchet::after {
    content: "";
    position: absolute;
    inset: calc(-1 * (var(--_thick) + var(--_gap)));
    border-radius: 50%;
    background: conic-gradient(
      from -90deg,
      var(--_color) 0turn,
      var(--_color) calc(var(--_value) * 1turn),
      transparent  calc(var(--_value) * 1turn),
      transparent  1turn
    );
    mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thick)),
        #000        calc(100% - var(--_thick))
      );
    -webkit-mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thick)),
        #000        calc(100% - var(--_thick))
      );
    pointer-events: none;
    transition: background var(--m-base) var(--ease);
  }
  .knob-ratchet--cobalt    { --_color: var(--enamel-cobalt); }
  .knob-ratchet--emerald   { --_color: var(--enamel-emerald); }
  .knob-ratchet--gold      { --_color: var(--enamel-gold); }
  .knob-ratchet--vermilion { --_color: var(--enamel-vermilion); }
  .knob-ratchet--amethyst  { --_color: var(--enamel-amethyst); }
  .knob-ratchet--burnt     { --_color: var(--enamel-burnt); }

  /* ── PERIMETER TICKS — discrete arc (SVG-backed) ───────────────────
     Discrete tick-mark ring. Uses an inline SVG <circle> with
     stroke-dasharray to draw N evenly-spaced gaps. Set --_steps (total
     ticks) and --_lit (active count) via CSS custom properties or JS.
     The SVG circle is injected by JS into .perim-ticks::after is
     complex — instead we use a background approach with SVG data URI,
     but for flexibility, the component is an <svg> sibling pattern.

     Pattern: wrap puck-b + svg.perim-ticks-svg together in .puck-b-wrap.
     The SVG has class="perim-ticks-svg" and is positioned absolutely.    */
  .puck-b-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .perim-ticks-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  /* Tick segments drawn as individual SVG lines — colored by JS class */
  .perim-ticks-svg .tick-arc--lit   { stroke: var(--enamel-cobalt); }
  .perim-ticks-svg .tick-arc--unlit { stroke: var(--rule); }
  .perim-ticks-svg .tick-arc--gold    { stroke: var(--enamel-gold); }
  .perim-ticks-svg .tick-arc--emerald { stroke: var(--enamel-emerald); }
  .perim-ticks-svg .tick-arc--vermilion { stroke: var(--enamel-vermilion); }
  .perim-ticks-svg .tick-arc--amethyst  { stroke: var(--enamel-amethyst); }

  /* ── SURFACE LABEL — transient text near a control ─────────────────
     Appears when a knob/rocker changes position; fades after ~2s.
     Position via JS by toggling .is-visible; CSS handles the fade.
     Usage: place .surface-label as a sibling of the control; JS sets
     textContent and toggles .is-visible.                               */
  .surface-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-label);
    color: var(--ink-2);
    background: var(--field-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--m-quick) var(--ease);
    z-index: 10;
  }
  .surface-label.is-visible { opacity: 1; }
  /* Variant: appears below control */
  .surface-label--below {
    bottom: auto;
    top: calc(100% + 6px);
  }

  /* ── DIAL-CUT ── rotating dial with cut in its face, numbers below ──
     The grammatically correct dial:

       Layer 1 (bottom): SUBSTRATE — a static disc carrying numbers
                         at angular positions. The substrate doesn't
                         rotate; it sits behind the dial.

       Layer 2 (top):    FACE — a dark dial that rotates. The face has
                         a single CUT (an aperture) through it at one
                         angular position. The rest of the face is opaque
                         and carries rotationally symmetric tick marks.

     As the user turns the dial, the cut sweeps over the substrate,
     revealing whichever number is at the cut's current angular
     position. Because the face's tick marks are rotationally symmetric
     (N evenly-spaced ticks for N values per turn), the face looks
     identical before and after each silent reset. This lets us drive
     unbounded numeric ranges with the slot-machine reset trick — the
     substrate redraws around the new current value behind the dial.

     Structure:
       <div class="dial-cut">
         <div class="dial-cut__body">
           <svg class="dial-cut__substrate">…fixed number ring…</svg>
           <svg class="dial-cut__face" style="--_angle:0deg">
              …face circle with cut via fill-rule:evenodd, tick marks…
           </svg>
           <div class="dial-cut__indicator"></div>
         </div>
         <div class="dial-cut__label">NSF</div>
       </div>                                                            */
  .dial-cut {
    --_size: 88px;
    --_dial-inner-r: 0.62;
    --_dial-font: 7.5;
    --_dial-pad-x: 4;
    --_dial-cut-max: 0.50;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
  }
  .dial-cut--lg { --_size: 128px; --_dial-font: 10; --_dial-pad-x: 5; }
  .dial-cut--sm { --_size: 64px; --_dial-font: 7; --_dial-pad-x: 3; }
  .dial-cut--compact {
    --_size: 58px;
    --_dial-inner-r: 0.56;
    --_dial-font: 7;
    --_dial-pad-x: 3;
    --_dial-cut-max: 0.54;
  }
  .dial-cut--cluster {
    --_size: 46px;
    --_dial-inner-r: 0.52;
    --_dial-font: 6.5;
    --_dial-pad-x: 3;
    --_dial-cut-max: 0.64;
    gap: 0;
  }
  .dial-cut--micro {
    --_size: 40px;
    --_dial-inner-r: 0.56;
    --_dial-font: 6;
    --_dial-pad-x: 3;
    --_dial-cut-max: 0.58;
    gap: 0;
  }
  .dial-cut--room {
    --_size: 82px;
    --_dial-inner-r: 0.56;
    --_dial-font: 8.5;
    --_dial-pad-x: 4;
    --_dial-cut-max: 0.50;
  }

  /* The dial body is a PUCK on the surface. The substrate and face
     are sub-layers INSIDE the puck — not in a cut below the surface.
     Body shadow = same hairline + 1px drop as other Type-B pucks.    */
  .dial-cut__body {
    position: relative;
    width: var(--_size);
    height: var(--_size);
    border-radius: 50%;
    background: var(--field-2);
    box-shadow:
      0 0 0 0.5px rgba(20, 18, 14, 0.10),
      0 1px 0 rgba(20, 18, 14, 0.10),
      3px 5px 12px -8px rgba(20, 18, 14, 0.18),
      10px 12px 26px -16px rgba(20, 18, 14, 0.22),
      -3px -3px 10px -8px rgba(255, 255, 255, 0.80);
    cursor: pointer;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* SUBSTRATE — the TEXT LAYER of the dial. Sits just under the face,
     near-surface depth, with a slightly darker tone than the puck body
     so it reads as recessed (but stays readable). The COLOR LAYER (if
     used) would sit deeper, exposed only when state activates via
     .dial-cut--accent. Default keeps the substrate field-toned so the
     numerals are clearly legible through the cut window.              */
  .dial-cut {
    --_color: var(--enamel-cobalt);
  }
  .dial-cut[data-dial-color="cobalt"]    { --_color: var(--enamel-cobalt); }
  .dial-cut[data-dial-color="emerald"]   { --_color: var(--enamel-emerald); }
  .dial-cut[data-dial-color="gold"]      { --_color: var(--enamel-gold); }
  .dial-cut[data-dial-color="vermilion"] { --_color: var(--enamel-vermilion); }
  .dial-cut[data-dial-color="amethyst"]  { --_color: var(--enamel-amethyst); }
  .dial-cut[data-dial-color="burnt"]     { --_color: var(--enamel-burnt); }
  .dial-cut[data-dial-color="ink"]       { --_color: var(--ink); }

  .dial-cut__substrate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 50%;
    /* Text layer = field-3, just slightly darker than the puck body.
       Readable. The dial's color identity comes from a small enamel
       indicator dot positioned ABOVE the current value (drawn by the
       face SVG via the indicator notch), not from drowning the whole
       substrate in pigment.                                            */
    background: var(--field-3);
  }
  /* ACCENT MODE — opt-in: when the dial's color IS the state (active
     selection, warning, etc.), bring the deep color layer up to the
     substrate. Substrate fills with enamel; text flips to light.      */
  .dial-cut--accent .dial-cut__substrate { background: var(--_color); }

  /* FACE — the rotating top sub-layer of the puck. SVG path uses
     var(--field-2) fill so it matches the body — the dial reads
     as one solid puck with a single pill-shaped window.              */
  .dial-cut__face {
    --_angle: 0deg;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(var(--_angle));
    transition: transform var(--m-base) var(--ease);
  }

  .dial-cut__label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: var(--tracking-label);
    color: var(--ink-3);
    text-transform: uppercase;
  }

  /* Substrate text: dark-on-light by default (text layer is near-surface,
     readable, just slightly recessed). Accent mode flips to light-on-
     enamel since the substrate fills with pigment.                    */
  .dial-cut text { font-family: var(--font-mono); fill: var(--ink); }
  .dial-cut text.is-current  { font-weight: var(--w-bold); fill: var(--ink); }
  .dial-cut text.is-neighbor { fill: var(--ink-2); opacity: 0.55; }
  .dial-cut text.is-far      { fill: var(--ink-3); opacity: 0.40; }
  .dial-cut--cluster text.is-neighbor,
  .dial-cut--cluster text.is-far,
  .dial-cut--compact text.is-neighbor,
  .dial-cut--compact text.is-far,
  .dial-cut--micro text.is-neighbor,
  .dial-cut--micro text.is-far,
  .dial-cut--room text.is-neighbor,
  .dial-cut--room text.is-far { opacity: 0; }

  .dial-cut--accent text             { fill: #f5f2eb; }
  .dial-cut--accent text.is-current  { font-weight: var(--w-bold); fill: #f5f2eb; }
  .dial-cut--accent text.is-neighbor { fill: rgba(245, 242, 235, 0.45); opacity: 1; }
  .dial-cut--accent text.is-far      { fill: rgba(245, 242, 235, 0.15); opacity: 1; }

  /* ── SURFACE INDICATOR DOT — on field surface (not cut) ─────────────
     A small enamel dot embedded in the surface. Carries no label.
     state is shown by fill color. Off state: just the rule ring.        */
  .surf-dot {
    --_color: var(--enamel-cobalt);
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--field);
    box-shadow: inset 0 0 0 1px var(--rule);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--m-quick) var(--ease);
  }
  .surf-dot:focus-visible {
    box-shadow:
      inset 0 0 0 1px var(--rule),
      0 0 0 1.5px var(--enamel-cobalt-soft);
  }
  .surf-dot.is-lit { background: var(--_color); box-shadow: none; }
  .surf-dot--cobalt    { --_color: var(--enamel-cobalt); }
  .surf-dot--emerald   { --_color: var(--enamel-emerald); }
  .surf-dot--gold      { --_color: var(--enamel-gold); }
  .surf-dot--vermilion { --_color: var(--enamel-vermilion); }
  .surf-dot--amethyst  { --_color: var(--enamel-amethyst); }
  .surf-dot--burnt     { --_color: var(--enamel-burnt); }

}

/* ─────────────────────────────────────────────────────────────────
   APP SHELL — white Arrange surface + modeless applet windows
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .app-shell {
    display: grid;
    grid-template-rows: auto minmax(460px, 1fr) auto;
    min-height: 660px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--cut-shallow);
  }
  .app-shell__menubar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
    padding: 7px var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .app-shell__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .app-shell__brand-mark {
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    position: relative;
  }
  .app-shell__brand-mark::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid var(--enamel-cobalt);
  }
  .app-shell__scope,
  .app-shell__menus {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
  }
  .app-shell__scope .scope-chain {
    min-width: 0;
    overflow: hidden;
  }
  .app-shell__scope .scope-chain__item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-shell__menus {
    justify-content: flex-end;
    gap: 5px;
    overflow-x: auto;
  }
  .app-shell__menu-btn {
    appearance: none;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--w-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 8px;
    white-space: nowrap;
    cursor: pointer;
  }
  .app-shell__menu-btn.is-open,
  .app-shell__menu-btn.is-active {
    color: var(--ink);
    box-shadow: var(--cut-shallow);
  }
  .app-shell__field {
    position: relative;
    min-height: 548px;
    background: var(--field);
    overflow: hidden;
  }
  .app-shell__main {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    background: var(--field);
  }
  .app-shell__nav {
    min-width: 0;
    padding: var(--s-3) var(--s-2);
    border-right: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .app-shell__canvas {
    position: relative;
    min-width: 0;
    padding: 18px 22px;
    background: var(--field);
  }
  .app-shell__room-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
  }
  .app-shell__room-title {
    margin: 0;
    color: var(--ink);
    font-size: 22px;
    font-weight: var(--w-bold);
    letter-spacing: var(--tracking-display);
    line-height: 1.15;
  }
  .app-shell__room-sub {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.35;
  }
  .app-shell__room-panel {
    min-width: 0;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background: var(--field);
    overflow: hidden;
  }
  .app-shell__room-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    padding: 8px var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    font-size: 11px;
    color: var(--ink-2);
  }
  .app-shell__room-row:last-child { border-bottom: 0; }
  .app-shell__room-row strong {
    color: var(--ink);
    font-weight: var(--w-medium);
  }
  .app-shell__tray {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  .app-shell__mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 8px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .app-workplane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 174px;
    gap: var(--s-3);
    margin-top: var(--s-4);
    min-height: 286px;
  }
  .app-workplane__plan {
    position: relative;
    min-height: 286px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background:
      linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
      var(--field);
    background-size: 32px 32px;
    overflow: hidden;
  }
  .app-workplane__room {
    position: absolute;
    left: 52px;
    top: 46px;
    width: min(430px, 62%);
    height: 172px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .app-workplane__room::before,
  .app-workplane__room::after {
    content: "";
    position: absolute;
    background: var(--rule);
  }
  .app-workplane__room::before {
    left: 28%;
    top: 0;
    bottom: 0;
    width: 1px;
  }
  .app-workplane__room::after {
    left: 0;
    right: 0;
    top: 58%;
    height: 1px;
  }
  .app-workplane__label {
    position: absolute;
    left: 12px;
    top: 10px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .app-workplane__axis {
    position: absolute;
    background: var(--rule-strong);
  }
  .app-workplane__axis--x {
    left: 28px;
    right: 28px;
    top: 238px;
    height: 1px;
  }
  .app-workplane__axis--y {
    left: 28px;
    top: 32px;
    bottom: 36px;
    width: 1px;
  }
  .app-workplane__puck {
    --_color: var(--enamel-cobalt);
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 62%, var(--rule));
    background: var(--field);
    box-shadow: var(--puck-resting);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .app-workplane__puck::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 28%, transparent);
    pointer-events: none;
  }
  .app-workplane__puck--bed { --_color: var(--enamel-cobalt); left: 124px; top: 84px; }
  .app-workplane__puck--def { --_color: var(--enamel-vermilion); left: 318px; top: 128px; }
  .app-workplane__puck--staff { --_color: var(--enamel-amethyst); left: 228px; top: 64px; }
  .app-workplane__puck--sink { --_color: var(--enamel-emerald); left: 405px; top: 72px; }
  .app-workplane__callout {
    position: absolute;
    right: 16px;
    bottom: 15px;
    display: grid;
    gap: 6px;
    width: 156px;
    padding: 8px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .app-workplane__callout-title {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .app-workplane__telemetry {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
  }
  .app-workplane__readout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: 8px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .app-workplane__readout span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .app-workplane__readout strong {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .app-launcher {
    display: grid;
    gap: 6px;
    margin-top: var(--s-3);
  }
  .app-launcher__group {
    display: grid;
    gap: 4px;
    padding: 7px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .app-launcher__title {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .app-launcher__group + .app-launcher__group {
    margin-top: 2px;
  }
  .app-launcher__btn {
    --_color: var(--enamel-cobalt);
    appearance: none;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 6px;
    cursor: pointer;
    text-align: left;
  }
  .app-launcher__btn span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: var(--w-medium);
  }
  .app-launcher__glyph {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 62%, var(--rule));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .app-launcher__btn.is-open {
    box-shadow: var(--cut-shallow);
    border-color: var(--rule-strong);
  }
  .app-launcher__btn.is-active {
    outline: 1px solid var(--rule-strong);
    outline-offset: -1px;
  }

  .app-taskbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    padding: 6px var(--s-2);
    border-top: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .app-taskbar__start {
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-bold);
    cursor: pointer;
  }
  .app-taskbar__items {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .app-taskbar__item {
    --_color: var(--enamel-cobalt);
    appearance: none;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink-2);
    display: inline-grid;
    grid-template-columns: 16px minmax(44px, auto);
    align-items: center;
    gap: 6px;
    min-width: 84px;
    height: 28px;
    padding: 0 8px 0 6px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .app-taskbar__item.is-open,
  .app-taskbar__item.is-active {
    color: var(--ink);
    box-shadow: var(--cut-shallow);
  }
  .app-taskbar__item.is-active {
    outline: 1px solid var(--rule-strong);
    outline-offset: -1px;
  }
  .app-taskbar__item.is-minimized { opacity: 0.68; }
  .app-taskbar__item.is-minimized .app-taskbar__glyph { opacity: 0.54; }
  .app-taskbar__glyph {
    width: 16px;
    height: 16px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 60%, var(--rule));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: var(--w-bold);
  }
  .app-taskbar__tray {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding-left: var(--s-2);
    border-left: 1px solid var(--rule-soft);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .applet-window {
    --_color: var(--enamel-cobalt);
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    min-height: 170px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    box-shadow:
      0 14px 32px rgba(27, 25, 20, 0.12),
      var(--cut-shallow);
    overflow: hidden;
    z-index: 4;
  }
  .applet-window.is-focused {
    border-color: var(--rule-strong);
    box-shadow:
      0 18px 42px rgba(27, 25, 20, 0.16),
      0 0 0 1px var(--rule-strong),
      var(--cut-shallow);
    z-index: 8;
  }
  .applet-window.is-closed,
  .applet-window.is-minimized,
  .applet-window[hidden] {
    display: none;
  }
  .applet-window__chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 7px;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .applet-window__chrome::after {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    background:
      linear-gradient(90deg, var(--_color) 0 38px, var(--rule-soft) 38px 100%);
    opacity: 0.9;
  }
  .applet-window__badge {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in srgb, var(--_color) 66%, var(--rule));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: var(--w-bold);
    color: var(--ink);
  }
  .applet-window__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .applet-window__controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .applet-window__control {
    appearance: none;
    border: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    line-height: 1;
  }
  .applet-window__body {
    display: grid;
    gap: var(--s-3);
    min-height: 0;
    padding: var(--s-3);
    overflow: auto;
    background: var(--field);
  }
  .applet-window__body--coord {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .applet-window__tabs {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
  }
  .applet-window__tab {
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow: var(--puck-resting);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 7px;
  }
  .applet-window__tab.is-active {
    color: var(--ink);
    box-shadow: var(--cut-shallow);
  }
  .applet-window__split {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--s-3);
  }
  .applet-window__list {
    display: grid;
    gap: 5px;
  }
  .applet-window__line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 10px;
    color: var(--ink-2);
  }
  .applet-window__line:last-child { border-bottom: 0; }
  .applet-window__line strong {
    color: var(--ink);
    font-weight: var(--w-medium);
  }
  .applet-window__rail {
    display: grid;
    gap: 6px;
    padding: 8px;
    border-radius: var(--r-sm);
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .applet-window__rail-title {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .applet-window__diagram {
    min-height: 86px;
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    background:
      linear-gradient(var(--rule-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px),
      var(--field);
    background-size: 28px 28px;
    position: relative;
  }
  .applet-window__diagram-node {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-resting);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: var(--w-bold);
  }
  .applet-window__diagram-rule {
    position: absolute;
    height: 1px;
    background: var(--rule-strong);
    transform-origin: left center;
  }
  .applet-window__footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding-top: 2px;
  }

  @media (max-width: 900px) {
    .app-shell {
      grid-template-rows: auto minmax(640px, auto) auto;
    }
    .app-shell__menubar {
      grid-template-columns: 1fr;
      align-items: start;
    }
    .app-shell__main {
      position: relative;
      grid-template-columns: 1fr;
    }
    .app-shell__nav {
      border-right: 0;
      border-bottom: 1px solid var(--rule-soft);
    }
    .app-workplane,
    .applet-window__split {
      grid-template-columns: 1fr;
    }
    .app-shell__field {
      overflow: auto;
    }
    .applet-window {
      position: relative;
      left: auto !important;
      top: auto !important;
      width: auto !important;
      height: auto !important;
      margin: var(--s-3);
    }
    .app-taskbar {
      grid-template-columns: auto minmax(0, 1fr);
    }
    .app-taskbar__tray {
      grid-column: 1 / -1;
      border-left: 0;
      border-top: 1px solid var(--rule-soft);
      padding: 5px 0 0;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────
   EQUIP-ROW — compact equipment line in a lens panel table
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .equip-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
    align-items: stretch;
    background: var(--field);
  }
  .equip-workbench__spine {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .equip-workbench__node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 7px var(--s-3);
    border-right: 1px solid var(--rule-soft);
  }
  .equip-workbench__node:last-child { border-right: 0; }
  .equip-workbench__node::after {
    content: "";
    position: absolute;
    left: calc(14px + var(--s-3));
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--rule);
  }
  .equip-workbench__node:last-child::after { display: none; }
  .equip-workbench__node-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .equip-workbench__node-title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .equip-workbench__node-state {
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .equip-table {
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--field);
  }
  .equip-workbench > .equip-table {
    border-radius: 0;
    border-right: 1px solid var(--rule-soft);
  }
  .equip-table__head {
    display: grid;
    grid-template-columns: 14px minmax(150px, 1fr) minmax(38px, auto) auto auto;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-2) var(--s-3);
    background: var(--field-2);
    border-bottom: 1px solid var(--rule-soft);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .equip-table__head span:nth-child(n+3) { text-align: center; }
  .equip-table__bench {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--rule-soft);
    background: var(--field);
  }
  .equip-table__readout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    min-width: 0;
    padding: 7px var(--s-3);
    border-right: 1px solid var(--rule-soft);
  }
  .equip-table__readout:last-child { border-right: 0; }
  .equip-table__readout-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .equip-table__readout-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: var(--w-bold);
    color: var(--ink);
    white-space: nowrap;
  }
  .equip-table--workbench .equip-table__head,
  .equip-table--workbench .equip-row {
    grid-template-columns: 14px minmax(150px, 1.15fr) minmax(128px, 0.85fr) minmax(150px, 1fr) auto;
  }
  .equip-row {
    display: grid;
    grid-template-columns: 14px minmax(150px, 1fr) minmax(38px, auto) auto auto;
    align-items: center;
    gap: var(--s-3);
    padding: 5px var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--t-sm);
    transition: background var(--m-quick) var(--ease);
  }
  .equip-row > * { min-width: 0; }
  .equip-row:hover { background: var(--field-2); }
  .equip-row.is-selected {
    background: var(--field);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 -1px 0 var(--cut-rim),
      inset 0 0 0 1px var(--rule-soft);
  }
  .equip-row:last-child { border-bottom: none; }
  .equip-row__name {
    font-weight: var(--w-medium);
    color: var(--ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .equip-row__sub {
    font-size: var(--t-xs);
    color: var(--ink-3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .equip-row__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: var(--t-xs);
    color: var(--ink-3);
    min-width: 24px;
  }
  .equip-row__flag--warn { color: var(--enamel-gold); }
  .equip-row__flag--neg  { color: var(--enamel-vermilion); }
  .equip-row__utility {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .equip-row__utility-pair {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
  }
  .equip-row__load {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .equip-row__load-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .equip-row__delta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .equip-row__delta--warn { color: var(--enamel-gold); }
  .equip-row__delta--neg { color: var(--enamel-vermilion); }
  .equip-row__delta--ok { color: var(--enamel-emerald); }
  .equip-row__qty {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-2);
  }
  /* Small puck-a inline button — same flat tile grammar as .puck-a,
     just sized for table-row qty controls. No extra border (the
     puck-resting shadow already carries the hairline edge ring).      */
  .equip-row__qty-btn {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--field-2);
    box-shadow: var(--puck-resting);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: var(--w-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease),
      background var(--m-quick) var(--ease);
  }
  .equip-row__qty-btn:active,
  .equip-row__qty-btn.is-pressed {
    transform: translateY(1px);
    background: var(--field-3);
    box-shadow: var(--puck-flush);
  }
  .equip-row__qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .equip-row__qty-val {
    min-width: 14px;
    text-align: center;
  }
  .equip-impact {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--field);
  }
  .equip-impact__head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
  }
  .equip-impact__code {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.03em;
    line-height: 1;
  }
  .equip-impact__name {
    margin-top: 2px;
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.25;
  }
  .equip-impact__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-3);
  }
  .equip-impact__stage {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--field);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .equip-impact__stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }
  .equip-impact__stage-title {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .equip-impact__stage-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-bold);
    color: var(--ink);
    white-space: nowrap;
  }
  .equip-impact__mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .equip-impact__mini-grid--tri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .equip-impact__mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .equip-impact__chain {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 5px;
  }
  .equip-impact__link {
    height: 1px;
    background: var(--rule);
  }
  .equip-impact__note {
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.35;
  }

  /* ── LENS PANE — switchable content panels in the Console ─────── */
  .lens-pane { display: none; }
  .lens-pane.is-active { display: flex; flex-direction: column; }

  /* ── INSP PANE — right-side inspector in the Console ─────────── */
  .insp-pane { display: none; }
  .insp-pane.is-active { display: flex; flex-direction: column; }

  /* ── CONSEQUENCE STACK — MEP alert items ──────────────────────── */
  .consequence-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    font-size: var(--t-sm);
  }
  .consequence-item:last-child { border-bottom: none; }
  .consequence-item__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
  }
  .consequence-item__dot--warn { background: var(--enamel-gold); }
  .consequence-item__dot--neg  { background: var(--enamel-vermilion); }
  .consequence-item__dot--pos  { background: var(--enamel-emerald); }
  .consequence-item__dot--info { background: var(--enamel-cobalt); }
  .consequence-item__body { color: var(--ink-2); line-height: 1.4; }
  .consequence-item__label { color: var(--ink); font-weight: var(--w-medium); }

  /* ════════════════════════════════════════════════════════════
     CONSOLE INSTRUMENT GRAMMAR
     A small set of named compositions that turn the Room Workflow
     Console from a text document into a physical instrument panel.
     Each class is a composition of existing primitives (puck, cut,
     gauge, dial, perim-ring) given a name so HTML stays legible.
     ════════════════════════════════════════════════════════════ */

  /* — Nameplate · etched room identity, like a riveted brass plate. */
  .nameplate {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--field);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .nameplate__code {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .nameplate__divide {
    width: 1px;
    align-self: stretch;
    background: var(--cut-rim);
  }
  .nameplate__name {
    font-size: 11px;
    font-weight: var(--w-medium);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.15;
    max-width: 26ch;
  }

  /* — Vitals trio · three LED pucks, at-a-glance room health. */
  .vitals-trio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--cut-fill);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim);
  }
  .vitals-trio__cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .vitals-trio__cell + .vitals-trio__cell {
    padding-left: 8px;
    border-left: 1px solid var(--cut-rim);
  }
  .vitals-trio__led {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow:
      0 0 0 1.5px color-mix(in srgb, var(--_color, var(--ink-3)) 16%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.30);
  }

  /* — Channel strip · replaces text thread-rail with an LED + meter.
       State belongs to the LED and meter wells, not to a colored rail
       stripe or tinted container face. */
  .channel-strip {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 8px 9px 8px 12px;
    background: var(--field);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-sm);
    color: var(--ink);
    text-align: left;
    cursor: default;
    transition:
      border-color var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease);
  }
  .channel-strip__led {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--_color, var(--ink-3)) 10%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.35);
    opacity: 0.55;
    transition: opacity var(--m-quick) var(--ease), box-shadow var(--m-quick) var(--ease);
  }
  .channel-strip__stack {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  .channel-strip__label {
    font-size: 11px;
    font-weight: var(--w-bold);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
  }
  .channel-strip__state {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    line-height: 1;
  }
  .channel-strip__meter {
    display: inline-flex; gap: 2px;
    padding: 2px;
    background: var(--cut-fill);
    border-radius: 2px;
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim);
  }
  .channel-strip__meter span {
    width: 4px; height: 10px;
    background: var(--cut-rim);
    border-radius: 1px;
  }
  .channel-strip__meter span.is-lit { background: var(--_color, var(--ink-3)); }
  .channel-strip.is-active {
    background: var(--field);
    border-color: var(--rule-strong);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .channel-strip.is-active .channel-strip__led {
    opacity: 1;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--_color, var(--ink-3)) 22%, transparent),
      0 0 6px color-mix(in srgb, var(--_color, var(--ink-3)) 40%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.45);
  }

  /* — Timeline ribbon · vertical event spine with pucks on a rule. */
  .timeline-ribbon {
    position: relative;
    display: flex; flex-direction: column;
    gap: 6px;
    padding: 4px 0 4px 14px;
  }
  .timeline-ribbon::before {
    content: "";
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 1px;
    background: var(--rule);
  }
  .timeline-ribbon__event {
    position: relative;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 6px;
    align-items: center;
    padding: 2px 0 2px 0;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: default;
    margin-left: -14px;
  }
  .timeline-ribbon__puck {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow:
      0 0 0 2px var(--field),
      0 0 0 3px color-mix(in srgb, var(--_color, var(--ink-3)) 30%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.30);
    justify-self: center;
  }
  .timeline-ribbon__event.is-future .timeline-ribbon__puck {
    background: var(--field);
    box-shadow:
      0 0 0 2px var(--field),
      inset 0 0 0 1px var(--rule);
  }
  .timeline-ribbon__event.is-current .timeline-ribbon__puck {
    width: 10px; height: 10px;
    box-shadow:
      0 0 0 2px var(--field),
      0 0 0 4px color-mix(in srgb, var(--_color, var(--ink-3)) 45%, transparent),
      0 0 6px color-mix(in srgb, var(--_color, var(--ink-3)) 55%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.40);
  }
  .timeline-ribbon__text {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .timeline-ribbon__event.is-current .timeline-ribbon__text {
    color: var(--ink);
    font-weight: var(--w-medium);
  }
  .timeline-ribbon__event.is-future .timeline-ribbon__text { color: var(--ink-3); }

  /* — Provenance chain · horizontal pucks for source flow. */
  .provenance-chain {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 0;
    padding: var(--s-3);
    background: var(--cut-fill);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .provenance-chain__node {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 0;
  }
  .provenance-chain__puck {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow:
      0 1px 1.5px rgba(0,0,0,0.12),
      inset 0 0.5px 0 rgba(255,255,255,0.35),
      inset 0 -0.5px 0 rgba(0,0,0,0.10);
    display: grid; place-items: center;
    color: var(--field);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
  }
  .provenance-chain__label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .provenance-chain__value {
    font-size: 10px;
    color: var(--ink-2);
    text-align: center;
    line-height: 1.2;
    max-width: 14ch;
  }
  .provenance-chain__link {
    position: relative;
    height: 1px;
    margin: 0 6px;
    background: var(--cut-rim);
    align-self: center;
    transform: translateY(-10px);
  }
  .provenance-chain__link::after {
    content: "";
    position: absolute;
    right: -1px; top: -2px;
    width: 0; height: 0;
    border-left: 4px solid var(--cut-rim);
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
  }

  /* — Plaque · telemetry block with eyebrow + value + sub-instrument + note.
       State belongs to the instrument marks inside the plaque, not to
       decorative panel trim. */
  .plaque {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 10px;
    background: var(--field);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 0 0 0.5px var(--rule-soft);
  }
  .plaque__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2);
  }
  .plaque__label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .plaque__value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .plaque__instrument {
    display: flex; align-items: center;
    margin: 2px 0 2px 0;
  }
  .plaque__note {
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1.4;
  }

  /* — Drift-bar · current vs reference, target in center. Reusable mini. */
  .drift-bar {
    position: relative;
    height: 10px;
    background: var(--cut-fill);
    border-radius: var(--r-pill);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
    overflow: hidden;
    flex: 1;
  }
  .drift-bar__center {
    position: absolute;
    top: 2px; bottom: 2px;
    left: 50%;
    width: 1px;
    background: var(--cut-rim);
    transform: translateX(-0.5px);
  }
  .drift-bar__fill {
    position: absolute;
    top: 1px; bottom: 1px;
    background: var(--_color, var(--enamel-cobalt));
    box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.18);
  }
  .drift-bar__fill--pos { left: 50%; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
  .drift-bar__fill--neg { right: 50%; border-radius: var(--r-pill) 0 0 var(--r-pill); }
  .drift-bar__fill--on  { left: 50%; transform: translateX(-1px); width: 2px; box-shadow: 0 0 4px var(--_color, var(--enamel-emerald)); border-radius: 1px; }
  .drift-bar--emerald   { --_color: var(--enamel-emerald); }
  .drift-bar--gold      { --_color: var(--enamel-gold); }
  .drift-bar--vermilion { --_color: var(--enamel-vermilion); }
  .drift-bar--cobalt    { --_color: var(--enamel-cobalt); }

  /* — Power-meter · 5-segment gauge for equipment power demand. */
  .power-meter {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--cut-fill);
    border-radius: 2px;
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim);
  }
  .power-meter__seg {
    width: 4px; height: 8px;
    background: var(--cut-rim);
    border-radius: 1px;
  }
  .power-meter__seg.is-lit { background: var(--_color, var(--enamel-cobalt)); }
  .power-meter--gold      { --_color: var(--enamel-gold); }
  .power-meter--vermilion { --_color: var(--enamel-vermilion); }
  .power-meter--emerald   { --_color: var(--enamel-emerald); }
  .power-meter--cobalt    { --_color: var(--enamel-cobalt); }

  /* — Status puck · standalone enamel pill for equipment & MEP rows. */
  .status-puck {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--_color, var(--ink-3));
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--_color, var(--ink-3)) 12%, transparent),
      inset 0 0.5px 0 rgba(255,255,255,0.35),
      inset 0 -0.5px 0 rgba(0,0,0,0.10);
    flex-shrink: 0;
  }
  .status-puck--emerald   { --_color: var(--enamel-emerald); }
  .status-puck--gold      { --_color: var(--enamel-gold); }
  .status-puck--vermilion { --_color: var(--enamel-vermilion); }
  .status-puck--cobalt    { --_color: var(--enamel-cobalt); }
  .status-puck--amethyst  { --_color: var(--enamel-amethyst); }
  .status-puck--neutral   { --_color: var(--ink-3); opacity: 0.5; }

  /* — Dial shell · a perimeter-ring readout sized for console cells.
     The shell is only the measuring ring; the dial remains the puck. */
  .dial-shell {
    width: var(--_shell-size, 60px);
    height: var(--_shell-size, 60px);
    display: inline-grid;
    place-items: center;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
  }
  .dial-shell--cluster {
    --_shell-size: 58px;
    --_thick: 2px;
    --_gap: 4px;
  }
  .dial-shell--room {
    --_shell-size: 104px;
    --_thick: 3px;
    --_gap: 6px;
  }

  /* — Dossier · Program lens layout (hero dial + plaques + chain). */
  .dossier {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--s-4);
    align-items: stretch;
  }
  .dossier__hero {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--cut-fill);
    border-radius: var(--r-sm);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .dossier__hero-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.10em;
  }
  .dossier__hero-caption {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .dossier__facets {
    display: flex; flex-direction: column; gap: var(--s-2);
  }

  /* — Diagnostic plaque · MEP consequence with sub-instrument. */
  .diagnostic {
    display: grid;
    grid-template-columns: 14px 1fr 90px;
    gap: var(--s-3);
    align-items: center;
    padding: 8px 10px;
    background: var(--field);
    border-bottom: 1px solid var(--rule-soft);
  }
  .diagnostic:last-child { border-bottom: 0; }
  .diagnostic__body {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
  }
  .diagnostic__title {
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink);
    line-height: 1.2;
  }
  .diagnostic__sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.02em;
  }
  .diagnostic__sub strong { color: var(--ink-2); font-weight: var(--w-medium); }
  .diagnostic__meter {
    display: flex; flex-direction: column; gap: 3px; align-items: stretch;
  }
  .diagnostic__metric {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* Dense overrides for the new instruments. */
  .dense .nameplate { padding: 4px 8px; gap: 8px; }
  .dense .nameplate__code { font-size: 14px; }
  .dense .nameplate__name { font-size: 10px; }
  .dense .channel-strip { padding: 6px 8px 6px 10px; gap: 7px; grid-template-columns: 12px 1fr auto; }
  .dense .channel-strip__led { width: 8px; height: 8px; }
  .dense .channel-strip__label { font-size: 10px; }
  .dense .channel-strip__state { font-size: 8px; }
  .dense .channel-strip__meter span { width: 3px; height: 8px; }
  .dense .timeline-ribbon { padding: 3px 0 3px 12px; gap: 4px; }
  .dense .timeline-ribbon__text { font-size: 9px; }
  .dense .plaque { padding: 6px 8px; }
  .dense .plaque__value { font-size: 12px; }
  .dense .plaque__note { font-size: 9px; }
  .dense .diagnostic { padding: 6px 8px; gap: var(--s-2); }
  .dense .diagnostic__title { font-size: var(--t-xs); }
  .dense .diagnostic__sub { font-size: 9px; }
  .dense .provenance-chain { padding: var(--s-2); }
  .dense .provenance-chain__puck { width: 18px; height: 18px; font-size: 9px; }
  .dense .vitals-trio { padding: 4px 6px; gap: 6px; }

  /* ════════════════════════════════════════════════════════════
     EDGE-TO-EDGE DESK GRAMMAR
     The recursion that replaces the v10 Console chrome:
       PAPER → APPLET-CUT → (PUCKS | INNER-CUT) → (PUCKS | INNER-CUT)
     Paper is raw white. Applets are cuts. Inner cuts go deeper and
     may carry an enamel wash for color grouping. The deepest cut
     hosts the actual pucks and elements. No borders, no chrome —
     depth + tone do all the work.
     ════════════════════════════════════════════════════════════ */

  /* Paper · edge-to-edge raw field. The desk surface. */
  .paper {
    background: var(--field);
    padding: var(--s-6);
    border-radius: 0;
    border: 0;
    width: 100%;
    min-height: 480px;
  }
  .paper--tight { padding: var(--s-4); }
  .paper--airy  { padding: var(--s-7); }

  /* Applet · a cut into the paper. Inset shadow + slight tonal step. */
  .applet {
    position: relative;
    background: var(--field-2);
    border-radius: var(--r-md);
    padding: var(--s-3);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
    min-width: 0;
  }
  .applet__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule-soft);
  }
  .applet__head--bare { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s-2); }
  .applet__title {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--w-bold);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .applet__title-glyph {
    display: inline-grid; place-items: center;
    width: 14px; height: 14px;
    border-radius: 3px;
    background: var(--_color, var(--ink-3));
    color: var(--field);
    font-size: 7px;
    font-weight: var(--w-bold);
    letter-spacing: 0;
  }
  .applet__meta {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .applet__body { display: flex; flex-direction: column; gap: var(--s-3); }

  /* Inner cut · a cut INSIDE an applet. Goes deeper than the applet. */
  .inner-cut {
    background: var(--field-3);
    border-radius: var(--r-sm);
    padding: var(--s-3);
    box-shadow:
      inset 0 1px 0 var(--cut-rim-strong),
      inset 0 0 0 0.5px var(--cut-rim),
      inset 0 -0.5px 0 var(--cut-rim-light);
  }
  .inner-cut__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
  }
  .inner-cut__label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .inner-cut__count {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-2);
    letter-spacing: 0.04em;
  }
  .inner-cut__body { display: flex; flex-direction: column; gap: var(--s-2); }

  /* Enamel-tinted inner cuts · subtle wash for category color. */
  .inner-cut--cobalt    { background: color-mix(in srgb, var(--enamel-cobalt) 6%, var(--field-3)); }
  .inner-cut--gold      { background: color-mix(in srgb, var(--enamel-gold) 7%, var(--field-3)); }
  .inner-cut--emerald   { background: color-mix(in srgb, var(--enamel-emerald) 6%, var(--field-3)); }
  .inner-cut--vermilion { background: color-mix(in srgb, var(--enamel-vermilion) 6%, var(--field-3)); }
  .inner-cut--amethyst  { background: color-mix(in srgb, var(--enamel-amethyst) 6%, var(--field-3)); }
  .inner-cut--burnt     { background: color-mix(in srgb, var(--enamel-burnt) 6%, var(--field-3)); }

  /* Tinted inner cut label inherits its enamel for legibility. */
  .inner-cut--cobalt > .inner-cut__head > .inner-cut__label    { color: color-mix(in srgb, var(--enamel-cobalt) 75%, var(--ink-2)); }
  .inner-cut--gold > .inner-cut__head > .inner-cut__label      { color: color-mix(in srgb, var(--enamel-gold) 75%, var(--ink-2)); }
  .inner-cut--emerald > .inner-cut__head > .inner-cut__label   { color: color-mix(in srgb, var(--enamel-emerald) 75%, var(--ink-2)); }
  .inner-cut--vermilion > .inner-cut__head > .inner-cut__label { color: color-mix(in srgb, var(--enamel-vermilion) 75%, var(--ink-2)); }
  .inner-cut--amethyst > .inner-cut__head > .inner-cut__label  { color: color-mix(in srgb, var(--enamel-amethyst) 75%, var(--ink-2)); }

  /* A puck-row · the most common terminal grouping: a horizontal line of pucks/elements
     with a tiny label on the left. Lives inside an inner-cut. No own background. */
  .puck-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--s-3);
    align-items: center;
    min-height: 18px;
  }
  .puck-row__label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .puck-row__value {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .puck-row__value-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: var(--w-bold);
    color: var(--ink);
    letter-spacing: 0.02em;
  }

  /* Dense overrides for the new grammar. */
  .dense .paper { padding: var(--s-4); min-height: 360px; }
  .dense .applet { padding: var(--s-3); }
  .dense .applet__head { margin-bottom: var(--s-2); padding-bottom: var(--s-1); }
  .dense .applet__title { font-size: 9px; }
  .dense .inner-cut { padding: var(--s-2); }
  .dense .inner-cut__label { font-size: 8px; }
  .dense .puck-row { grid-template-columns: 72px 1fr; gap: var(--s-2); }
  .dense .puck-row__label { font-size: 8px; }
  .dense .puck-row__value { font-size: 10px; }
  .dense .puck-row__value-mono { font-size: 11px; }
}

@layer components {
  .page-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: var(--s-5) 0 var(--s-4);
    border-bottom: 1px solid var(--ink);
    margin-bottom: var(--s-5);
  }
  .page-head__title { font-size: var(--t-3xl); letter-spacing: var(--tracking-display-xl); }
  .page-head__meta { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

  .shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 480px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .shell__rail {
    border-right: 1px solid var(--rule-soft);
    background: var(--field-2);
    overflow-y: auto;
  }
  .shell__main {
    background: var(--field);
    overflow-y: auto;
    padding: var(--s-5);
  }

  .empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--s-2);
    padding: var(--s-7) var(--s-5);
    color: var(--ink-3);
  }
  .empty__title { font-size: var(--t-md); font-weight: var(--w-bold); color: var(--ink-2); }
}

/* ─────────────────────────────────────────────────────────────────
   N. UTILITIES
   ───────────────────────────────────────────────────────────────── */
@layer utilities {
  .stack       { display: flex; flex-direction: column; gap: var(--s-3); }
  .stack--lg   { gap: var(--s-5); }
  .row         { display: flex; align-items: center; gap: var(--s-3); }
  .row--baseline { align-items: baseline; }
  .row--between  { justify-content: space-between; }

  .muted   { color: var(--ink-3); }
  .mono    { font-family: var(--font-mono); }
  .tabular { font-variant-numeric: tabular-nums; }
  .nowrap  { white-space: nowrap; }
  .grow    { flex: 1 1 0; min-width: 0; }

  .obj-resting  { box-shadow: var(--puck-resting); }
  .obj-extruded { box-shadow: var(--puck-extruded); }
  .obj-cut      { box-shadow: var(--cut-mid); background: var(--field); }
  .obj-cut-deep { box-shadow: var(--cut-deep); background: var(--field); }

  /* ════════════════════════════════════════════════════════════
     DENSE — a scope that compresses metrics for working surfaces.
     Wrap a panel/sidebar/table in .dense and every primitive inside
     scales down by ~40% without losing the grammar. Cuts stay cuts.
     Pucks stay pucks. The system holds, the chrome shrinks.
     For showcase contexts use the default scale. For Arrange's actual
     app — sidebars, programming tables, inspector rails — use .dense.
     ════════════════════════════════════════════════════════════ */
  .dense {
    /* control heights */
    --control-h-sm: 20px;
    --control-h-md: 26px;
    --control-h-lg: 32px;
    /* spacing — tightened. The 4px scale halves where it can. */
    --s-1: 2px;
    --s-2: 6px;
    --s-3: 8px;
    --s-4: 12px;
    --s-5: 16px;
    --s-6: 22px;
    --s-7: 32px;
    --s-8: 44px;
    /* type — only the smaller end shifts; display sizes stay reserved */
    --t-xs: 10px;
    --t-sm: 12px;
    --t-md: 13px;
    --t-lg: 15px;
    /* radii — smaller cuts demand smaller corners */
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 10px;
    /* eyebrow tracking tightens because the type shrinks */
    --tracking-eyebrow: 0.08em;
  }

  /* Tightenings the token override alone can't reach: per-primitive
     micro-adjustments so the grammar stays legible at small scale. */
  .dense .step__btn { width: 20px; height: 20px; font-size: var(--t-xs); }
  .dense .step__value { min-width: 32px; padding: 0 var(--s-2); font-size: var(--t-sm); }
  .dense .step { padding: 2px; gap: 3px; }
  .dense .toggle, .dense .kugel { --_w: 40px; --_h: 22px; --_pad: 2px; }
  .dense .toggle--lg, .dense .kugel--lg { --_w: 48px; --_h: 26px; }
  .dense .toggle--sm, .dense .kugel--sm { --_w: 32px; --_h: 18px; }
  .dense .knob { --_d: 44px; --_pocket-pad: 4px; }
  .dense .knob::before { top: calc(var(--_pocket-pad) + 4px); width: 4px; height: 4px; }
  .dense .rocker { padding: 4px 6px; gap: var(--s-2); }
  .dense .rocker__cell { width: 22px; height: 22px; }
  .dense .rocker__cell.is-active::before { width: 5px; height: 5px; }
  .dense .pips { padding: 3px; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(2, 7px); gap: 3px; }
  .dense .pips__dot { width: 7px; height: 7px; }
  .dense .lamp { width: 10px; height: 10px; }
  .dense .lamp::after { inset: 1.5px; }
  .dense .lamp--lg { width: 14px; height: 14px; }
  .dense .lamp--sm { width: 8px; height: 8px; }
  .dense .util-badge { height: 18px; padding: 1px 6px 1px 1px; gap: 4px; }
  .dense .util-badge__code { width: 14px; height: 14px; font-size: 9px; }
  .dense .util-badge__value { font-size: 10px; }
  .dense .tag { height: 18px; padding: 0 var(--s-2); font-size: 10px; }
  .dense .punch { width: 44px; height: 28px; font-size: var(--t-xs); border-radius: var(--r-sm); }
  .dense .input, .dense .select, .dense .textarea { height: var(--control-h-md); padding: 0 var(--s-2); font-size: var(--t-sm); }
  .dense .field__label { font-size: 10px; letter-spacing: var(--tracking-eyebrow); }
  .dense .eyebrow { font-size: 10px; letter-spacing: var(--tracking-eyebrow); }
  .dense .table th, .dense .table td { padding: var(--s-1) var(--s-2); font-size: var(--t-sm); }
  .dense .card { padding: var(--s-4); }
  .dense .stratum { padding: var(--s-3); }
  .dense .crest { padding: var(--s-3) var(--s-2) var(--s-2) var(--s-3); }
  .dense .crest__label { font-size: 9px; letter-spacing: 0.08em; padding: 0 4px; }

  /* Density modifiers that ALSO drop the puck-resting shadow stack so
     dense lists don't read as elevated cards. */
  .dense--flat .room-card,
  .dense--flat [class*="card"] { box-shadow: none; }
}