/* ─────────────────────────────────────────────────────────────────
   Arrange — v9 · Kugel
   German: ball, sphere. The toggle's ball rolls in a cut slot;
   enamel color fills the slot behind it as it rolls.

   The synthesis that landed:
     - v4's physical but muted mechanism feel
     - v6's hairline linework (cut channels, tickmarks, domino pips)
     - v8's knob and rocker (kept; user explicitly liked these)
     - NEW from screenshots: buttons depressed INTO the field;
       toggles as slots-with-rolling-balls that fill behind the ball

   The field is flatter and cooler than v8 (less pillowy).
   Everything that's interactive is CUT INTO the field, not on it.
   ───────────────────────────────────────────────────────────────── */

@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;

    /* Enamel palette — inherited from v6.1, carried through v9's slots. */
    --enamel-vermilion: #c2271c;
    --enamel-cobalt:    #1e3a8a;
    --enamel-emerald:   #1a5e3a;
    --enamel-gold:      #b8851c;
    --enamel-amethyst:  #5a2080;
    --enamel-burnt:     #b8651c;

    --enamel-vermilion-soft: rgba(194, 39, 28, 0.10);
    --enamel-cobalt-soft:    rgba(30, 58, 138, 0.10);
    --enamel-emerald-soft:   rgba(26, 94, 58, 0.10);
    --enamel-gold-soft:      rgba(184, 133, 28, 0.12);
    --enamel-amethyst-soft:  rgba(90, 32, 128, 0.10);
    --enamel-burnt-soft:     rgba(184, 101, 28, 0.12);

    --enamel-vermilion-line: rgba(194, 39, 28, 0.55);
    --enamel-cobalt-line:    rgba(30, 58, 138, 0.55);
    --enamel-emerald-line:   rgba(26, 94, 58, 0.50);
    --enamel-gold-line:      rgba(184, 133, 28, 0.55);
    --enamel-amethyst-line:  rgba(90, 32, 128, 0.55);
    --enamel-burnt-line:     rgba(184, 101, 28, 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).
       ════════════════════════════════════════════════════════════ */
    --puck-flush:
      0 0 0 1px rgba(20, 18, 14, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.6);
    --puck-resting:
      0 0 0 1px rgba(20, 18, 14, 0.06),
      0 1px 2px rgba(20, 18, 14, 0.10),
      0 2px 6px rgba(20, 18, 14, 0.06);
    --puck-extruded:
      0 0 0 1px rgba(20, 18, 14, 0.08),
      0 2px 4px rgba(20, 18, 14, 0.12),
      0 6px 14px 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);

    --enamel-vermilion: #f05a4a;
    --enamel-cobalt:    #6f8fff;
    --enamel-emerald:   #4aa86d;
    --enamel-gold:      #d6a84c;
    --enamel-amethyst:  #a56ad9;
    --enamel-burnt:     #e88550;

    --enamel-vermilion-soft: rgba(240, 90, 74, 0.16);
    --enamel-cobalt-soft:    rgba(111, 143, 255, 0.16);
    --enamel-emerald-soft:   rgba(74, 168, 109, 0.16);
    --enamel-gold-soft:      rgba(214, 168, 76, 0.18);
    --enamel-amethyst-soft:  rgba(165, 106, 217, 0.16);
    --enamel-burnt-soft:     rgba(232, 133, 80, 0.16);

    --enamel-vermilion-line: rgba(240, 90, 74, 0.52);
    --enamel-cobalt-line:    rgba(111, 143, 255, 0.52);
    --enamel-emerald-line:   rgba(74, 168, 109, 0.52);
    --enamel-gold-line:      rgba(214, 168, 76, 0.55);
    --enamel-amethyst-line:  rgba(165, 106, 217, 0.52);
    --enamel-burnt-line:     rgba(232, 133, 80, 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;
    background: var(--field);
    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); }
}

/* ─────────────────────────────────────────────────────────────────
   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;
  }
  .knob::after {
    content: "";
    position: absolute;
    inset: var(--_pocket-pad);
    border-radius: var(--r-pill);
    background: var(--field);
    box-shadow: var(--puck-resting);
    transform-origin: 50% 50%;
    transform: rotate(var(--_rot, 0deg));
    transition: transform var(--m-base) var(--ease-soft);
  }
  .knob::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(var(--_pocket-pad) + 6px);
    transform-origin: 50% calc(var(--_d) / 2 - 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 {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 8px 12px;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--cut-mid);
    position: relative;
  }
  .rocker__cell {
    --_color: var(--accent);
    --_wash: var(--accent-wash);
    --_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(--cut-shallow);
    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);
  }
  .rocker__cell:hover { border-color: var(--rule-strong); }
  .rocker__cell.is-active {
    box-shadow: var(--puck-extruded);
    transform: translateY(-1px);
    border-color: var(--_line);
  }
  /* The enamel dot ABOVE the active cell */
  .rocker__cell.is-active::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--_color);
  }
  .rocker__cell--cobalt { --_color: var(--enamel-cobalt); --_line: var(--enamel-cobalt-line); --_wash: var(--enamel-cobalt-soft); }
  .rocker__cell--emerald { --_color: var(--enamel-emerald); --_line: var(--enamel-emerald-line); --_wash: var(--enamel-emerald-soft); }
  .rocker__cell--gold { --_color: var(--enamel-gold); --_line: var(--enamel-gold-line); --_wash: var(--enamel-gold-soft); }
  .rocker__cell--vermilion { --_color: var(--enamel-vermilion); --_line: var(--enamel-vermilion-line); --_wash: var(--enamel-vermilion-soft); }
  .rocker__cell--amethyst { --_color: var(--enamel-amethyst); --_line: var(--enamel-amethyst-line); --_wash: var(--enamel-amethyst-soft); }
}

/* ─────────────────────────────────────────────────────────────────
   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);
    --_wash: var(--accent-wash);
    --_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 1px var(--_wash);
  }
  .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); --_wash: var(--enamel-cobalt-soft); }
  .slot-btn--emerald { --_color: var(--enamel-emerald); --_line: var(--enamel-emerald-line); --_wash: var(--enamel-emerald-soft); }
  .slot-btn--gold { --_color: var(--enamel-gold); --_line: var(--enamel-gold-line); --_wash: var(--enamel-gold-soft); }
  .slot-btn--vermilion { --_color: var(--enamel-vermilion); --_line: var(--enamel-vermilion-line); --_wash: var(--enamel-vermilion-soft); }
  .slot-btn--amethyst { --_color: var(--enamel-amethyst); --_line: var(--enamel-amethyst-line); --_wash: var(--enamel-amethyst-soft); }
  .slot-btn--burnt { --_color: var(--enamel-burnt); --_line: var(--enamel-burnt-line); --_wash: var(--enamel-burnt-soft); }
}

/* ─────────────────────────────────────────────────────────────────
   I. FADER — slot with rolling ball, like the toggle but longer
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .fader {
    --_color: var(--accent);
    --_wash: var(--accent-wash);
    --_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:hover .fader__thumb { box-shadow: var(--puck-extruded), 0 0 0 5px var(--_wash); }
  .fader--cobalt { --_color: var(--enamel-cobalt); --_wash: var(--enamel-cobalt-soft); }
  .fader--emerald { --_color: var(--enamel-emerald); --_wash: var(--enamel-emerald-soft); }
  .fader--gold { --_color: var(--enamel-gold); --_wash: var(--enamel-gold-soft); }
  .fader--vermilion { --_color: var(--enamel-vermilion); --_wash: var(--enamel-vermilion-soft); }
  .fader--amethyst { --_color: var(--enamel-amethyst); --_wash: var(--enamel-amethyst-soft); }
  .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 — domino dots (from v6)
   1-6 dots in a 3×2 grid pattern, lit ones in enamel color.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {
  .pips {
    --_color: var(--accent);
    display: inline-grid;
    grid-template-columns: repeat(3, 8px);
    grid-template-rows: repeat(2, 8px);
    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;
  }
  .pips__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--rule);
    transition: background-color var(--m-quick) var(--ease), border-color var(--m-quick) var(--ease);
  }
  .pips__dot.is-lit {
    background: var(--_color);
    border-color: var(--_color);
  }

  /* Domino layouts via data-attribute (cleaner than per-class) */
  .pips[data-count="1"] .pips__dot:nth-child(3),
  .pips[data-count="2"] .pips__dot:nth-child(1),
  .pips[data-count="2"] .pips__dot:nth-child(6),
  .pips[data-count="3"] .pips__dot:nth-child(1),
  .pips[data-count="3"] .pips__dot:nth-child(3),
  .pips[data-count="3"] .pips__dot:nth-child(6),
  .pips[data-count="4"] .pips__dot:nth-child(1),
  .pips[data-count="4"] .pips__dot:nth-child(3),
  .pips[data-count="4"] .pips__dot:nth-child(4),
  .pips[data-count="4"] .pips__dot:nth-child(6),
  .pips[data-count="5"] .pips__dot,
  .pips[data-count="6"] .pips__dot {
    background: var(--_color);
    border-color: var(--_color);
  }
  /* 5 leaves the middle two unlit, special-case the centers */
  .pips[data-count="5"] .pips__dot:nth-child(2),
  .pips[data-count="5"] .pips__dot:nth-child(5) {
    background: transparent;
    border-color: var(--rule);
  }
  .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(--accent-wash); }

  /* 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(--accent-line); background: var(--accent-wash); }
  .tag--positive { color: var(--status-positive); border-color: var(--status-positive); background: var(--status-positive-wash); }
  .tag--warning  { color: var(--status-warning);  border-color: var(--status-warning); background: var(--status-warning-wash); }
  .tag--negative { color: var(--status-negative); border-color: var(--enamel-vermilion-line); background: var(--status-negative-wash); }

  /* 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); }
}

/* ─────────────────────────────────────────────────────────────────
   M. COMPONENTS
   ───────────────────────────────────────────────────────────────── */
@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); }
}