/* ─────────────────────────────────────────────────────────────────
   Arrange — v6.1 · Skala
   The dial face, refined. v6's hairline + enamel + pip language,
   with two corrections:
     1. Lighter, simpler surface (clean off-white, not warm gray).
     2. The "watch face" replaced by a clean radial progress dial —
        no hour-marker chapter ring, no clock hand, no center pin.
        Reads as instrument, not as wristwatch.

   Conceptual lineage:
     v3 (tisch)    — objects at rest on a plane
     v4 (schalter) — mechanisms operated on the plane
     v6 (skala)    — the precision instrument: hairlines + enamel cells
     v6.1          — same vocabulary, cleaner surface + cleaner dial

   v6 inherits v4's mechanism vocabulary by class name:
     .toggle  .knob  .btn-deep  .segmented-deep  .slot-btn  .fader  .led
   The vocabulary is the same; the aesthetic register is sleeker —
   less mass, less depression, fewer shadows. Linework does the work
   that shadow did in v4.
   ───────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────
   A. TOKENS — the instrument's measurements
   ───────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* ─ Surface · Clean light theme ───────────────────────────
       v6.1 removes the warm brushed-metal cast. The light surface is
       a simple off-white field with only small tonal steps. */
    --plane:        #f7f6f2;
    --plane-2:      #efeee9;
    --plane-3:      #e5e3dc;
    --plane-edge:   rgba(22, 22, 20, 0.08);

    /* Compatibility aliases — v3/v4/v5 inherited */
    --paper:        var(--plane);
    --paper-2:      var(--plane-2);
    --paper-3:      var(--plane-3);

    /* ─ Ink · near-black, the engraved mark ─ */
    --ink:          #171715;
    --ink-2:        #474741;
    --ink-3:        #7a7971;

    /* ─ Rules · a single hairline weight ─
       Every cell, table row, divider, control outline uses --rule.
       Critical hierarchy may step up to --rule-strong (2px). */
    --rule:         rgba(22, 22, 20, 0.34);
    --rule-soft:    rgba(22, 22, 20, 0.12);
    --rule-strong:  rgba(22, 22, 20, 0.82);

    /* ─ Enamel palette · the chromatic vocabulary ─
       Six saturated jewel-tones. Each is reserved for ONE role.
       Color is never decorative — it labels a function.
       Held in small filled cells inside hairline metal lines. */
    --enamel-vermilion: #c2271c;   /* destructive · stop · blocked */
    --enamel-cobalt:    #1e3a8a;   /* primary action · linked · brand */
    --enamel-emerald:   #1a5e3a;   /* confirmed · approved · go */
    --enamel-gold:      #b8851c;   /* warning · in review · pending */
    --enamel-amethyst:  #5a2080;   /* connected · referenced (sparing) */
    --enamel-burnt:     #b8651c;   /* inherited v3 burnt sienna · secondary accent */

    /* ─ Brand accent · cobalt becomes the primary action color in v6.
       Burnt sienna remains as a secondary brand-accent. ─ */
    --accent:       var(--enamel-cobalt);
    --accent-ink:   #f7f6f2;
    --accent-wash:  rgba(30, 58, 138, 0.10);
    --accent-line:  rgba(30, 58, 138, 0.55);

    /* ─ Status aliases (v3/v4 compatibility) ─ */
    --status-positive:      var(--enamel-emerald);
    --status-positive-wash: rgba(26, 94, 58, 0.10);
    --status-warning:       var(--enamel-gold);
    --status-warning-wash:  rgba(184, 133, 28, 0.12);
    --status-negative:      var(--enamel-vermilion);
    --status-negative-wash: rgba(194, 39, 28, 0.10);
    --status-info:          var(--enamel-cobalt);
    --status-info-wash:     var(--accent-wash);

    /* ─ LED aliases (v4 compatibility) ─ map LEDs to enamels.
       In v6, LEDs are no longer halo-glowing dots — they are small
       enamel-filled circles inside a hairline ring. */
    --led-red:        var(--enamel-vermilion);
    --led-red-wash:   var(--status-negative-wash);
    --led-green:      var(--enamel-emerald);
    --led-green-wash: var(--status-positive-wash);
    --led-amber:      var(--enamel-gold);
    --led-amber-wash: var(--status-warning-wash);
    --led-accent:     var(--enamel-cobalt);
    --led-accent-wash: var(--accent-wash);

    /* ─ Type · instrument-precise ─ */
    --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.012em;
    --tracking-label:   0.02em;
    --tracking-mark:    0.14em; /* instrument-face labelling */

    /* ─ 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 · precision, not paper ─ */
    --r-sm:   2px;
    --r-md:   4px;
    --r-lg:   4px;
    --r-pill: 999px;

    /* ─ Motion · instant, precise. No spring overshoot. ─ */
    --m-instant: 60ms;
    --m-quick:   100ms;
    --m-base:    160ms;
    --m-slow:    220ms;

    --ease:       cubic-bezier(0.2, 0, 0, 1);
    --ease-lift:  cubic-bezier(0.2, 0.7, 0.3, 1);
    /* v4 spring tokens kept as aliases so inherited primitives still
       parse — but they no longer overshoot. v6 dials don't bounce. */
    --spring-out:  var(--ease);
    --spring-soft: var(--ease);
    --press-in:    cubic-bezier(0.4, 0.0, 0.2, 1);

    /* ─ Elevation · nearly nothing. v6 is FLAT. ─
       Reserved for elements that genuinely float. */
    --e0: 0 0 0 0 transparent;
    --e1: 0 1px 0 rgba(22, 22, 20, 0.03);
    --e2: 0 4px 12px rgba(22, 22, 20, 0.06);
    --e3: 0 8px 24px rgba(22, 22, 20, 0.10);
    --inset-cut: inset 0 0 0 1px var(--rule);
    --inset-deep: inset 0 1px 2px rgba(22, 22, 20, 0.10),
                  inset 0 0 0 1px var(--rule);

    /* ─ Control metrics ─ */
    --control-h-sm: 26px;
    --control-h-md: 32px;
    --control-h-lg: 40px;

    /* ─ Mechanism metrics — sleeker than v4 ─ */
    --knob-d:       60px;
    --toggle-w:     48px;
    --toggle-h:     22px;
    --fader-track:  2px;     /* recessed line, not a deep groove */
    --fader-thumb:  18px;

    /* ─ Hairline width · the system's single line weight ─ */
    --hair: 1px;

    --brush-stripe: transparent;
  }

  [data-theme="ink"] {
    /* ─ Surface · Enamel (dark theme) ─
       Matte black enamel — deeper than v4's workshop-at-night. The
       case is jewelled-black; hairlines are warm-white; enamel cells
       glow with the same six saturated colors. */
    --plane:    #0e0d0b;
    --plane-2:  #151310;
    --plane-3:  #1c1a16;
    --plane-edge: rgba(232, 226, 212, 0.10);

    --paper:    var(--plane);
    --paper-2:  var(--plane-2);
    --paper-3:  var(--plane-3);

    --ink:      #e8e2d4;
    --ink-2:    #aaa496;
    --ink-3:    #7a7468;

    --rule:        rgba(232, 226, 212, 0.30);
    --rule-soft:   rgba(232, 226, 212, 0.12);
    --rule-strong: rgba(232, 226, 212, 0.80);

    /* Enamels stay close to source — they're already saturated.
       A small lift on each lets them sing against matte black. */
    --enamel-vermilion: #e34a3e;
    --enamel-cobalt:    #4a6fd1;
    --enamel-emerald:   #3d9962;
    --enamel-gold:      #e2b049;
    --enamel-amethyst:  #9a52d6;
    --enamel-burnt:     #e08555;

    --accent:       var(--enamel-cobalt);
    --accent-ink:   #0e0d0b;
    --accent-wash:  rgba(74, 111, 209, 0.14);
    --accent-line:  rgba(74, 111, 209, 0.55);

    --status-positive:      var(--enamel-emerald);
    --status-positive-wash: rgba(61, 153, 98, 0.14);
    --status-warning:       var(--enamel-gold);
    --status-warning-wash:  rgba(226, 176, 73, 0.16);
    --status-negative:      var(--enamel-vermilion);
    --status-negative-wash: rgba(227, 74, 62, 0.14);

    --led-red:        var(--enamel-vermilion);
    --led-red-wash:   var(--status-negative-wash);
    --led-green:      var(--enamel-emerald);
    --led-green-wash: var(--status-positive-wash);
    --led-amber:      var(--enamel-gold);
    --led-amber-wash: var(--status-warning-wash);
    --led-accent:     var(--enamel-cobalt);
    --led-accent-wash: var(--accent-wash);

    --e1: 0 1px 0 rgba(0, 0, 0, 0.40);
    --e2: 0 4px 14px rgba(0, 0, 0, 0.55);
    --e3: 0 10px 28px rgba(0, 0, 0, 0.70);
    --inset-cut: inset 0 0 0 1px var(--rule);
    --inset-deep: inset 0 1px 2px rgba(0, 0, 0, 0.60),
                  inset 0 0 0 1px var(--rule);

    --brush-stripe: rgba(232, 226, 212, 0.03);
  }
}

/* ─────────────────────────────────────────────────────────────────
   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(--plane);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03", "tnum" 0;
  }

  body {
    margin: 0;
    color: var(--ink);
    min-height: 100vh;
    background-color: var(--plane);
    background-image: none;
  }

  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); }
  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: var(--hair) solid var(--accent-line);
    transition: color var(--m-quick) var(--ease),
                border-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: var(--hair); 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;
      transition-delay: 0.001ms !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────────
   C. PRIMITIVES — inherited names, sleeker register
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  /* ─ Eyebrow · instrument-face labelling ─ */
  .eyebrow {
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
  }
  .eyebrow--mark {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-mark);
  }

  /* ─ Cell · the base unit of v6's grid logic.
       A hairline-outlined rectangle. The atomic container. */
  .cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    background: transparent;
    padding: 0;
    box-sizing: border-box;
  }
  .cell--block { display: flex; }
  .cell--pad   { padding: var(--s-2) var(--s-3); }
  .cell--pad-lg { padding: var(--s-3) var(--s-4); }
  .cell--strong { border-color: var(--rule-strong); }

  /* ─ Enamel · a saturated jewel-tone fill set inside a cell.
       Used inline as status markers, color labels, table strips,
       segmented-active fills, slot-btn fills, fader fills. ─ */
  .enamel {
    --_color: var(--enamel-cobalt);
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--_color);
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 var(--hair) rgba(0,0,0,0.18);
    flex-shrink: 0;
    vertical-align: middle;
  }
  .enamel--round { border-radius: var(--r-pill); }
  .enamel--sm    { width: 10px; height: 10px; }
  .enamel--lg    { width: 18px; height: 18px; }
  .enamel--wide  { width: 28px; height: 14px; }
  .enamel--strip { width: 4px; height: 22px; border-radius: 0; }

  .enamel--vermilion { --_color: var(--enamel-vermilion); }
  .enamel--cobalt    { --_color: var(--enamel-cobalt); }
  .enamel--emerald   { --_color: var(--enamel-emerald); }
  .enamel--gold      { --_color: var(--enamel-gold); }
  .enamel--amethyst  { --_color: var(--enamel-amethyst); }
  .enamel--burnt     { --_color: var(--enamel-burnt); }

  /* ─ Channel · a routed groove cut into the plane and filled with
       enamel. This is the linear sibling of .pips: still data, still
       semantic color, but read as a milled slot rather than a dot. ─ */
  .channel {
    --_color: var(--enamel-cobalt);
    --_value: 62%;
    --_h: 8px;
    --_fill: color-mix(in srgb, var(--_color) 78%, var(--plane));
    position: relative;
    display: block;
    width: 100%;
    height: var(--_h);
    min-width: 96px;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--plane-2) 72%, transparent);
    box-shadow:
      inset 0 1px 1px rgba(26, 24, 20, 0.08),
      inset 0 -1px 0 rgba(255,255,255,0.10);
    overflow: hidden;
  }
  [data-theme="ink"] .channel {
    background: color-mix(in srgb, var(--plane-3) 80%, transparent);
    box-shadow:
      inset 0 1px 1px rgba(0,0,0,0.45),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  }
  .channel::before {
    content: "";
    position: absolute;
    inset: 1px auto 1px 1px;
    width: calc(var(--_value) - 2px);
    min-width: 0;
    border-radius: var(--r-pill);
    background: var(--_fill);
    box-shadow: inset 0 0 0 var(--hair) rgba(0,0,0,0.14);
    transition: width var(--m-base) var(--ease), background-color var(--m-quick) var(--ease);
  }
  .channel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        transparent 0 calc(25% - 0.5px), var(--rule-soft) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px) calc(50% - 0.5px),
        var(--rule-soft) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px) calc(75% - 0.5px),
        var(--rule-soft) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
    pointer-events: none;
    opacity: 0.75;
  }
  .channel--hair { --_h: 4px; --_fill: color-mix(in srgb, var(--_color) 96%, white 4%); }
  .channel--thin { --_h: 6px; --_fill: color-mix(in srgb, var(--_color) 88%, var(--plane)); }
  .channel--wide { --_h: 12px; --_fill: color-mix(in srgb, var(--_color) 62%, var(--plane)); }
  .channel--vertical {
    width: var(--_h);
    height: 100%;
    min-width: 0;
    min-height: 80px;
  }
  .channel--vertical::before {
    inset: auto 1px 1px 1px;
    width: auto;
    height: calc(var(--_value) - 2px);
  }
  .channel--vertical::after {
    background:
      linear-gradient(0deg,
        transparent 0 calc(25% - 0.5px), var(--rule-soft) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px) calc(50% - 0.5px),
        var(--rule-soft) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px) calc(75% - 0.5px),
        var(--rule-soft) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
  }
  .channel--vermilion { --_color: var(--enamel-vermilion); }
  .channel--cobalt    { --_color: var(--enamel-cobalt); }
  .channel--emerald   { --_color: var(--enamel-emerald); }
  .channel--gold      { --_color: var(--enamel-gold); }
  .channel--amethyst  { --_color: var(--enamel-amethyst); }
  .channel--burnt     { --_color: var(--enamel-burnt); }

  /* ─ Tickmark row · hairline ticks at intervals, like a ruler
       or watch bezel. Heights vary per major / minor mark. ─ */
  .tickmark-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 10px;
    width: 100%;
  }
  .tickmark-row__tick {
    flex: 1 1 0;
    height: 4px;
    border-left: var(--hair) solid var(--rule);
  }
  .tickmark-row__tick:last-child { border-right: var(--hair) solid var(--rule); }
  .tickmark-row__tick--major  { height: 8px;  border-left-color: var(--rule-strong); }
  .tickmark-row__tick--active { height: 10px; border-left-color: var(--accent); }

  /* ─ Pips · domino-die dot display.
       A 3×2 grid of six dot wells. Lit dots are filled with enamel
       color; unlit dots are hairline ring outlines. Arrangement is
       set by .pips[data-lit="N"] using the classic die patterns. ─ */
  .pips {
    --_color: var(--enamel-cobalt);
    --_dot: 6px;
    display: inline-grid;
    grid-template-columns: repeat(3, var(--_dot));
    grid-template-rows: repeat(2, var(--_dot));
    gap: 4px;
    padding: 5px;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    background: transparent;
    vertical-align: middle;
    line-height: 0;
  }
  .pips__dot {
    width: var(--_dot);
    height: var(--_dot);
    border-radius: var(--r-pill);
    background: transparent;
    box-shadow: inset 0 0 0 var(--hair) var(--rule);
    transition: background-color var(--m-quick) var(--ease),
                box-shadow var(--m-quick) var(--ease);
  }
  .pips__dot.is-lit {
    background: var(--_color);
    box-shadow: inset 0 0 0 var(--hair) rgba(0,0,0,0.18);
  }

  .pips--lg    { --_dot: 8px;  gap: 5px; padding: 6px; }
  .pips--sm    { --_dot: 5px;  gap: 3px; padding: 4px; }

  .pips--vermilion { --_color: var(--enamel-vermilion); }
  .pips--cobalt    { --_color: var(--enamel-cobalt); }
  .pips--emerald   { --_color: var(--enamel-emerald); }
  .pips--gold      { --_color: var(--enamel-gold); }
  .pips--amethyst  { --_color: var(--enamel-amethyst); }
  .pips--burnt     { --_color: var(--enamel-burnt); }

  /* ─ Button · the key. Slim, hairline-outlined, no gradient. ─ */
  .btn {
    --_bg: transparent;
    --_fg: var(--ink);
    --_border: var(--rule);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control-h-md);
    padding: 0 var(--s-4);
    font: inherit;
    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: var(--hair) solid var(--_border);
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease),
      color var(--m-quick) var(--ease);
  }
  .btn:hover  { --_border: var(--rule-strong); }
  .btn:active { background: var(--plane-2); }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.40; cursor: not-allowed; pointer-events: none;
  }

  .btn--primary {
    --_bg: var(--ink);
    --_fg: var(--plane);
    --_border: var(--ink);
  }
  .btn--primary:hover { --_border: var(--ink); background: color-mix(in srgb, var(--ink) 92%, transparent); }

  .btn--accent {
    --_bg: var(--accent);
    --_fg: var(--accent-ink);
    --_border: var(--accent);
  }
  .btn--accent:hover { --_border: var(--accent); background: color-mix(in srgb, var(--accent) 90%, #000 10%); }

  .btn--ghost {
    --_bg: transparent;
    --_border: transparent;
  }
  .btn--ghost:hover { --_border: var(--rule); background: transparent; }

  .btn--danger {
    --_fg: var(--enamel-vermilion);
    --_border: var(--rule);
  }
  .btn--danger:hover {
    --_bg: var(--enamel-vermilion);
    --_fg: var(--plane);
    --_border: var(--enamel-vermilion);
  }

  .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); }

  /* ─ Input · hairline outline only. No inset cut. ─ */
  .input, .select, .textarea {
    display: block;
    width: 100%;
    height: var(--control-h-md);
    padding: 0 var(--s-3);
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    color: var(--ink);
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    transition: border-color var(--m-quick) var(--ease),
                box-shadow 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: inset 0 0 0 var(--hair) var(--accent);
  }

  .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: 16px; height: 16px; margin: 0;
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    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:hover, .radio:hover { border-color: var(--rule-strong); }
  .checkbox:checked, .radio:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .checkbox:checked::after {
    content: "";
    width: 8px; height: 4px;
    border-left: 1.5px solid var(--accent-ink);
    border-bottom: 1.5px solid var(--accent-ink);
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .radio:checked::after {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--r-pill);
    background: var(--accent-ink);
  }

  .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); }

  /* ─ Card · hairline-outlined panel. Almost no shadow. ─ */
  .card {
    background: var(--plane);
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--e0);
    padding: var(--s-5);
  }
  .card--panel    { background: var(--plane-2); }
  .card--lifted   { box-shadow: var(--e1); }
  .card--floating { box-shadow: var(--e2); }
  .card--flush    { padding: 0; }
  .card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: var(--hair) solid var(--rule);
  }
  .card__title { font-size: var(--t-md); font-weight: var(--w-bold); letter-spacing: var(--tracking-display); }
  .card__meta  { font-size: var(--t-sm); color: var(--ink-3); font-family: var(--font-mono); }

  /* ─ Table · hairlines everywhere. 2px under header. ─ */
  .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: 2px solid var(--rule-strong);
    white-space: nowrap;
  }
  .table td {
    padding: var(--s-3);
    border-bottom: var(--hair) solid var(--rule-soft);
    vertical-align: middle;
  }
  .table td.num, .table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
  }
  .table td.mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-2); }
  .table tbody tr:hover td { background: color-mix(in srgb, var(--plane-2) 50%, transparent); }

  /* Active row carries a left enamel-inlay strip. */
  .table tbody tr[aria-selected="true"] td {
    background: var(--accent-wash);
  }
  .table tbody tr[aria-selected="true"] td:first-child {
    position: relative;
  }
  .table tbody tr[aria-selected="true"] td:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
  }

  /* ─ Tag · hairline-outlined pill with optional enamel cell inside ─ */
  .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: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .tag--accent   { color: var(--enamel-cobalt);    border-color: var(--accent-line); }
  .tag--positive { color: var(--enamel-emerald);   border-color: color-mix(in srgb, var(--enamel-emerald) 50%, transparent); }
  .tag--warning  { color: var(--enamel-gold);      border-color: color-mix(in srgb, var(--enamel-gold) 50%, transparent); }
  .tag--negative { color: var(--enamel-vermilion); border-color: color-mix(in srgb, var(--enamel-vermilion) 50%, transparent); }

  /* ─ Dot · matte status indicator (inherited from v3/v4) ─
       v6 keeps it as a solid filled circle, no halo. */
  .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
    flex-shrink: 0;
  }
  .dot--positive { background: var(--enamel-emerald); }
  .dot--warning  { background: var(--enamel-gold); }
  .dot--negative { background: var(--enamel-vermilion); }
  .dot--info     { background: var(--enamel-cobalt); }

  /* ─ Tabs · row of hairline cells. Active cell has enamel strip. ─ */
  .tabs {
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    gap: 0;
  }
  .tabs__tab {
    position: relative;
    appearance: none; border: 0; background: transparent;
    font: inherit; font-size: var(--t-sm); font-weight: var(--w-medium);
    color: var(--ink-2);
    padding: 0 var(--s-3); height: 26px;
    cursor: pointer;
    transition:
      background-color var(--m-quick) var(--ease),
      color var(--m-quick) var(--ease);
  }
  .tabs__tab + .tabs__tab { border-left: var(--hair) solid var(--rule); }
  .tabs__tab:hover { color: var(--ink); }
  .tabs__tab[aria-selected="true"] {
    color: var(--ink);
    background: color-mix(in srgb, var(--plane-2) 60%, transparent);
  }
  .tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: var(--s-2); right: var(--s-2); bottom: 0;
    height: 2px;
    background: var(--accent);
  }

  /* ─ Kbd · a physical key, hairline-outlined ─ */
  .kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px;
    font-family: var(--font-mono); font-size: var(--t-xs);
    padding: 1px 6px; color: var(--ink-2);
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
  }

  .divider { height: var(--hair); background: var(--rule); margin: var(--s-4) 0; }
  .divider--strong { height: 2px; background: var(--rule-strong); }
}

/* ─────────────────────────────────────────────────────────────────
   D. MECHANISMS — v4's vocabulary, refined sleeker
   ───────────────────────────────────────────────────────────────── */
@layer mechanisms {

  /* ─ LED · small enamel dot inside a hairline ring.
       Off: just the ring. On: ring fills with enamel. No halo. ─ */
  .led {
    --_color: var(--ink-3);
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--r-pill);
    background: transparent;
    border: var(--hair) solid var(--rule);
    box-sizing: border-box;
    transition:
      background-color var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease);
    flex-shrink: 0;
    vertical-align: middle;
  }
  .led--lg { width: 12px; height: 12px; }
  .led--sm { width: 8px;  height: 8px;  }

  .led--red    { --_color: var(--enamel-vermilion); }
  .led--green  { --_color: var(--enamel-emerald); }
  .led--amber  { --_color: var(--enamel-gold); }
  .led--accent { --_color: var(--enamel-cobalt); }
  .led--violet { --_color: var(--enamel-amethyst); }

  .led.is-on {
    background: var(--_color);
    border-color: var(--_color);
  }

  /* ─ Toggle · thinner track, smaller knob, enamel inlay on lit end.
       Off: knob left, a ghost dot shows where the knob WAS. The end
       cell is empty (a hairline cell).
       On:  knob right, a small enamel-filled cell at the off end
       indicates the previous position; the lit cell at the on end
       is filled with enamel. No halo. ─ */
  .toggle {
    --_track-w: var(--toggle-w);
    --_track-h: var(--toggle-h);
    --_knob:    calc(var(--toggle-h) - 6px);
    --_color:   var(--accent);

    appearance: none;
    position: relative;
    display: inline-block;
    width: var(--_track-w);
    height: var(--_track-h);
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background-color var(--m-base) var(--ease),
                border-color var(--m-quick) var(--ease);
    vertical-align: middle;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  /* Inlay cell · small enamel disc that lights at the on end */
  .toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--_track-h) / 2 - 3px);
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: transparent;
    border: var(--hair) solid var(--rule);
    box-sizing: border-box;
    transform: translateY(-50%);
    transition: background-color var(--m-quick) var(--ease),
                border-color var(--m-quick) var(--ease),
                opacity var(--m-base) var(--ease);
  }
  /* Knob · small puck */
  .toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--_knob);
    height: var(--_knob);
    background: var(--ink);
    border-radius: var(--r-pill);
    transition: transform var(--m-base) var(--ease),
                background-color var(--m-quick) var(--ease);
  }
  .toggle:hover { border-color: var(--rule-strong); }
  .toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .toggle.is-on {
    border-color: var(--_color);
    background: var(--accent-wash);
  }
  .toggle.is-on::after {
    transform: translateX(calc(var(--_track-w) - var(--_knob) - 6px));
    background: var(--_color);
  }
  .toggle.is-on::before {
    background: var(--_color);
    border-color: var(--_color);
  }

  .toggle--red    { --_color: var(--enamel-vermilion); }
  .toggle--green  { --_color: var(--enamel-emerald); }
  .toggle--amber  { --_color: var(--enamel-gold); }
  .toggle--accent { --_color: var(--enamel-cobalt); }
  .toggle--violet { --_color: var(--enamel-amethyst); }

  .toggle.is-on.toggle--red,
  .toggle.is-on.toggle--green,
  .toggle.is-on.toggle--amber,
  .toggle.is-on.toggle--violet {
    background: color-mix(in srgb, var(--_color) 10%, transparent);
  }

  .toggle--lg {
    --_track-w: 60px;
    --_track-h: 28px;
    --_knob: 20px;
  }

  /* ─ Knob · milled metal puck with hairline tickmarks around the
       perimeter. A thin notch (hairline triangle) shows position;
       a small enamel-filled center dot sits at the hub.
       Very Leica-aperture-ring. ─ */
  .knob {
    appearance: none;
    position: relative;
    width: var(--knob-d);
    height: var(--knob-d);
    border-radius: var(--r-pill);
    background: var(--plane-2);
    border: var(--hair) solid var(--rule);
    cursor: pointer;
    transition: transform var(--m-base) var(--ease),
                border-color var(--m-quick) var(--ease);
    transform: rotate(var(--_rotate, -135deg));
    box-sizing: border-box;
    /* Tickmarks around the perimeter — 12 ticks every 30°.
       Drawn as a conic gradient that paints a 1px stripe at each
       30° interval, masked to a thin ring near the edge. */
  }
  .knob::before,
  .knob::after { content: ""; position: absolute; }
  /* Tick-ring · 12 hairline ticks via repeating conic gradient,
     clipped to a thin annulus near the perimeter. */
  .knob {
    background:
      /* Tickmarks (12 ticks every 30°). Width controlled by the
         stripe fraction; opacity controlled by alpha. */
      repeating-conic-gradient(
        var(--rule) 0deg 0.7deg,
        transparent 0.7deg 30deg
      ) padding-box,
      var(--plane-2);
    /* Mask the tick layer to a thin ring near the edge. */
    -webkit-mask:
      radial-gradient(circle, transparent 0 calc(50% - 8px),
                              black     calc(50% - 8px) calc(50% - 1px),
                              transparent calc(50% - 1px) 100%),
      linear-gradient(black, black);
    -webkit-mask-composite: source-over;
            mask:
      radial-gradient(circle, transparent 0 calc(50% - 8px),
                              black     calc(50% - 8px) calc(50% - 1px),
                              transparent calc(50% - 1px) 100%),
      linear-gradient(black, black);
            mask-composite: add;
  }
  /* Because masking the whole element would hide the body, we paint
     the body in an inner pseudo. (Browsers without mask still get a
     visible knob from the background-color fallback.) */
  .knob::before {
    /* Notch · hairline triangle at 12 o'clock, points outward. */
    top: 4px;
    left: 50%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid var(--ink);
    z-index: 2;
  }
  .knob::after {
    /* Center hub · enamel dot inside hairline ring */
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    transform: translate(-50%, -50%);
    background: var(--accent);
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-pill);
    box-sizing: border-box;
    z-index: 2;
  }
  .knob:hover  { border-color: var(--rule-strong); }
  .knob:active { transition: transform var(--m-instant) var(--press-in); }
  .knob:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Knob-group · label set arranged around the knob */
  .knob-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
  }
  .knob-group__labels {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-3);
    letter-spacing: var(--tracking-mark);
    text-align: center;
  }
  .knob-group__labels > .is-active {
    color: var(--accent);
    font-weight: var(--w-medium);
  }

  /* ─ Btn-deep · calculator key. Less depression than v4 (1-2px),
       no spring overshoot. Hairline outline, optional enamel face. ─ */
  .btn-deep {
    --_bg: var(--plane);
    --_fg: var(--ink);
    --_border: var(--rule);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: var(--control-h-lg);
    min-width: 84px;
    padding: 0 var(--s-5);
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    color: var(--_fg);
    background: var(--_bg);
    border: var(--hair) solid var(--_border);
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
    transform: translateY(0);
    transition:
      transform var(--m-quick) var(--ease),
      box-shadow var(--m-quick) var(--ease),
      background-color var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease);
  }
  .btn-deep:hover { --_border: var(--rule-strong); }
  .btn-deep:active {
    transform: translateY(1px);
    box-shadow: var(--inset-deep);
    transition:
      transform var(--m-instant) var(--press-in),
      box-shadow var(--m-instant) var(--press-in);
  }
  .btn-deep:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .btn-deep[disabled] { opacity: 0.40; cursor: not-allowed; pointer-events: none; }

  .btn-deep--primary {
    --_bg: var(--ink); --_fg: var(--plane); --_border: var(--ink);
  }
  .btn-deep--primary:hover { --_border: var(--ink); }

  .btn-deep--accent {
    --_bg: var(--accent); --_fg: var(--accent-ink); --_border: var(--accent);
  }
  .btn-deep--accent:hover { --_border: var(--accent); }

  .btn-deep--danger {
    --_bg: var(--enamel-vermilion); --_fg: var(--plane); --_border: var(--enamel-vermilion);
  }

  /* ─ Segmented-deep · row of hairline cells. Active cell gets an
       enamel-inlay rectangle inside. No depression — just inlay. ─ */
  .segmented-deep {
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    overflow: hidden;
  }
  .segmented-deep__seg {
    --_color: var(--accent);
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    height: 30px;
    padding: 0 var(--s-4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition:
      color var(--m-quick) var(--ease),
      background-color var(--m-quick) var(--ease);
  }
  .segmented-deep__seg + .segmented-deep__seg {
    border-left: var(--hair) solid var(--rule);
  }
  .segmented-deep__seg:hover { color: var(--ink); background: color-mix(in srgb, var(--plane-2) 50%, transparent); }
  .segmented-deep__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }

  /* Each segment carries an inlay cell — empty until active. */
  .segmented-deep__seg::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: var(--r-sm);
    background: transparent;
    border: var(--hair) solid var(--rule);
    box-sizing: border-box;
    transition: background-color var(--m-quick) var(--ease),
                border-color var(--m-quick) var(--ease);
  }

  .segmented-deep__seg.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--_color) 8%, transparent);
  }
  .segmented-deep__seg.is-active::before {
    background: var(--_color);
    border-color: var(--_color);
  }

  .segmented-deep--red    .segmented-deep__seg { --_color: var(--enamel-vermilion); }
  .segmented-deep--green  .segmented-deep__seg { --_color: var(--enamel-emerald); }
  .segmented-deep--amber  .segmented-deep__seg { --_color: var(--enamel-gold); }
  .segmented-deep--accent .segmented-deep__seg { --_color: var(--enamel-cobalt); }
  .segmented-deep--violet .segmented-deep__seg { --_color: var(--enamel-amethyst); }

  /* ─ Slot-btn · two-state key. Off = hairline rectangle (empty).
       On = enamel inlay fills the cell. No depression. ─ */
  .slot-btn {
    --_color: var(--accent);
    position: relative;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-width: 92px;
    height: var(--control-h-md);
    padding: 0 var(--s-4);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    letter-spacing: var(--tracking-label);
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-sm);
    cursor: pointer;
    user-select: none;
    transition:
      color var(--m-quick) var(--ease),
      background-color var(--m-quick) var(--ease),
      border-color var(--m-quick) var(--ease);
  }
  .slot-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
  .slot-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Inlay cell to the left of the label */
  .slot-btn::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: var(--r-sm);
    background: transparent;
    border: var(--hair) solid var(--rule);
    box-sizing: border-box;
    transition: background-color var(--m-quick) var(--ease),
                border-color var(--m-quick) var(--ease);
  }

  .slot-btn.is-on {
    color: var(--accent-ink);
    background: var(--_color);
    border-color: var(--_color);
  }
  .slot-btn.is-on::before {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
  }

  .slot-btn--red    { --_color: var(--enamel-vermilion); }
  .slot-btn--green  { --_color: var(--enamel-emerald); }
  .slot-btn--amber  { --_color: var(--enamel-gold); }
  .slot-btn--accent { --_color: var(--enamel-cobalt); }
  .slot-btn--violet { --_color: var(--enamel-amethyst); }

  /* ─ Fader · thin recessed line (1-2px), not a deep groove.
       Thumb is a small precise puck with a hairline mark.
       Track fills with enamel as the fader moves. ─ */
  .fader {
    --_color: var(--accent);
    --_value: 50%;
    position: relative;
    display: inline-block;
    width: 100%;
    min-width: 200px;
    height: 28px;
    padding: 0 calc(var(--fader-thumb) / 2);
    cursor: pointer;
    user-select: none;
  }
  /* Track · hairline rule (no groove) */
  .fader__track {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: var(--fader-track);
    background: var(--rule);
    border-radius: var(--r-pill);
    transform: translateY(-50%);
  }
  /* Fill · enamel-colored portion left of the thumb */
  .fader__fill {
    position: absolute;
    top: 50%; left: 0;
    width: var(--_value);
    height: var(--fader-track);
    background: var(--_color);
    border-radius: var(--r-pill);
    transform: translateY(-50%);
    transition: width var(--m-base) var(--ease),
                background-color var(--m-quick) var(--ease);
  }
  /* Thumb · small puck with a hairline center mark */
  .fader__thumb {
    position: absolute;
    top: 50%;
    left: var(--_value);
    width: var(--fader-thumb);
    height: var(--fader-thumb);
    background: var(--plane);
    border: var(--hair) solid var(--rule-strong);
    border-radius: var(--r-pill);
    transform: translate(-50%, -50%);
    transition: left var(--m-base) var(--ease),
                border-color var(--m-quick) var(--ease),
                transform var(--m-quick) var(--ease);
    box-sizing: border-box;
  }
  /* Thumb center mark · a hairline vertical line indicating position */
  .fader__thumb::after {
    content: "";
    position: absolute;
    top: 3px; bottom: 3px; left: 50%;
    width: var(--hair);
    background: var(--ink);
    transform: translateX(-50%);
  }
  .fader:hover .fader__thumb { border-color: var(--ink); }
  .fader:active .fader__thumb { transform: translate(-50%, -50%) scale(0.94); }
  .fader:focus-visible { outline: none; }
  .fader:focus-visible .fader__thumb {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-wash);
  }

  /* Value label · floats above the thumb in mono */
  .fader__value {
    position: absolute;
    left: var(--_value);
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-2);
    letter-spacing: var(--tracking-mark);
    background: transparent;
    padding: 0 var(--s-1);
    transition: left var(--m-base) var(--ease);
    pointer-events: none;
    white-space: nowrap;
  }

  .fader--red    { --_color: var(--enamel-vermilion); }
  .fader--green  { --_color: var(--enamel-emerald); }
  .fader--amber  { --_color: var(--enamel-gold); }
  .fader--accent { --_color: var(--enamel-cobalt); }
  .fader--violet { --_color: var(--enamel-amethyst); }

  /* ─ Gauge (formerly "Dial") · the watch face is replaced.
       A horizontal hairline-bordered cell with a large mono numeric
       readout and a thin enamel-fill channel below. No circle, no
       hour markers, no clock hand. Reads as an instrument readout,
       not as a wristwatch.

       Markup kept stable from prior v6 versions so the dial works
       wherever it was already used:
         .dial > .dial__arc + .dial__arc--secondary + .dial__face
                  ( > .dial__value + .dial__label )
       The secondary arc element collapses to nothing.  ─ */
  .dial {
    --_color: var(--accent);
    --_value: 0.62;   /* 0..1 progress */
    position: relative;
    width: 180px;
    height: auto;
    padding: var(--s-3) var(--s-4);
    background: var(--plane);
    border: var(--hair) solid var(--rule-strong);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    isolation: isolate;
  }
  [data-theme="ink"] .dial { background: var(--plane); }

  /* Numeric readout sits on top of the channel — value first via order */
  .dial__face {
    order: 1;
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin: 0;
    background: transparent;
    border: 0;
    inset: auto;
    padding: 0;
  }
  .dial__value {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: var(--tracking-mark);
    line-height: 1;
  }
  .dial__label {
    margin: 0;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
    align-self: flex-end;
  }

  /* The progress channel — a thin enamel-fill line under the readout. */
  .dial__arc {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: 6px;
    background: var(--plane-3);
    border: var(--hair) solid var(--rule);
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
    transition: none;
    pointer-events: none;
  }
  .dial__arc::before {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(var(--_value) * 100%);
    background: var(--_color);
    transition: width var(--m-slow) var(--ease);
  }
  /* The secondary arc collapses — no longer needed in linear form. */
  .dial__arc--secondary { display: none; }

  /* Sizes — width-based for the linear gauge */
  .dial--sm { width: 132px; padding: var(--s-2) var(--s-3); }
  .dial--sm .dial__value { font-size: 24px; }
  .dial--lg { width: 240px; padding: var(--s-4) var(--s-5); }
  .dial--lg .dial__value { font-size: 48px; }

  .dial--vermilion { --_color: var(--enamel-vermilion); }
  .dial--cobalt    { --_color: var(--enamel-cobalt); }
  .dial--emerald   { --_color: var(--enamel-emerald); }
  .dial--gold      { --_color: var(--enamel-gold); }
  .dial--amethyst  { --_color: var(--enamel-amethyst); }
  .dial--burnt     { --_color: var(--enamel-burnt); }
}

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

  .shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 480px;
    background: var(--plane);
    border: var(--hair) solid var(--rule);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .shell__rail {
    border-right: var(--hair) solid var(--rule);
    background: var(--plane-2);
    overflow-y: auto;
  }
  .shell__main {
    background: var(--plane);
    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); }
}

/* ─────────────────────────────────────────────────────────────────
   F. 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; }
  .row--wrap     { flex-wrap: wrap; }

  .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; }
  .mark    { letter-spacing: var(--tracking-mark); }

  .obj-resting  { box-shadow: var(--e0); }
  .obj-lifted   { box-shadow: var(--e1); }
  .obj-floating { box-shadow: var(--e2); }
  .obj-cut      { border: var(--hair) solid var(--rule); }
  .obj-cut-deep { box-shadow: var(--inset-deep); }
}