/* ─────────────────────────────────────────────────────────────────
   Arrange — v5 · Vals
   The bath at Vals. Peter Zumthor's "Magic of the Real."
   The interface is not a plane with objects on it — it is MATTER,
   stratified and weighty. Components are carved INTO the surface
   or emerge FROM it. A single warm light catches edges. Things
   settle slowly, the way water finds its level.

   Theme mapping (kept on the standard data-theme=paper|ink switch
   so cross-version navigation continues to work):
     paper  →  OAK CHAMBER  · warm dark oiled wood, amber light · DEFAULT
     ink    →  CONCRETE     · sunlit board-formed concrete, cool

   Default is oak because the Therme at dusk is the canonical
   Zumthor mood — warm material, low warm light. Concrete is the
   alternate room, morning light. Both are the same building.
   ───────────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────────
   A. TOKENS
   ───────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* MATTER — oiled oak, the warm dark chamber.
       Three depths, like strata in a stacked-stone wall. */
    --plane:        #2a221a;       /* deep oiled wood — the wall */
    --plane-2:      #1f1812;       /* recess shadow — a step deeper */
    --plane-3:      #15110c;       /* deepest pocket — under-shelf */
    --plane-edge:   rgba(232, 220, 196, 0.10);

    /* INK — aged paper, brass, the lit surface */
    --ink:          #e8dcc4;
    --ink-2:        #b8ac96;
    --ink-3:        #7a7165;

    /* Compatibility aliases for cross-version primitive class names */
    --paper:        var(--plane);
    --paper-2:      var(--plane-2);
    --paper-3:      var(--plane-3);

    --rule:         rgba(232, 220, 196, 0.16);
    --rule-soft:    rgba(232, 220, 196, 0.06);

    /* ACCENT — the bulb in the chamber.
       A single warm tungsten light. 2700K, dimmed. */
    --accent:       #d4a04a;
    --accent-ink:   #1a140d;
    --accent-wash:  rgba(212, 160, 74, 0.12);
    --accent-glow:  rgba(212, 160, 74, 0.30);
    --accent-line:  rgba(212, 160, 74, 0.45);

    /* STATUS — mineral pigments, not pure CMYK.
       Deep moss, ochre, oxblood. Things found in the earth. */
    --status-positive:      #5e7a4a;
    --status-positive-wash: rgba(94, 122, 74, 0.14);
    --status-warning:       #a87a32;
    --status-warning-wash:  rgba(168, 122, 50, 0.14);
    --status-negative:      #8a3a2c;
    --status-negative-wash: rgba(138, 58, 44, 0.14);
    --status-info:          var(--accent);
    --status-info-wash:     var(--accent-wash);

    /* TYPE — display is serif (engraved-feeling); body is sans;
       mono for product nomenclature. Serif gives inscriptions weight. */
    --font-display: "Tiempos Headline", "Source Serif Pro", "Charter",
                    "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-sans:    "Inter", "Helvetica Neue", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", "IBM Plex Mono",
                    ui-monospace, Menlo, monospace;

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

    /* Scale — slightly larger display sizes than v3 for the cathedral moment.
       The "levels of intimacy" range: 11px label → 64px display. */
    --t-xs:  11px;
    --t-sm:  13px;
    --t-md:  15px;
    --t-lg:  18px;
    --t-xl:  28px;
    --t-2xl: 44px;
    --t-3xl: 64px;

    --lh-tight: 1.08;
    --lh-base:  1.55;

    --tracking-eyebrow: 0.12em;
    --tracking-display: -0.018em;   /* serif at scale — pull in slightly */
    --tracking-label:   0.02em;

    /* Space (4px scale, generous) */
    --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: 112px;

    /* Radius — mineral, softened by age */
    --r-sm:  4px;
    --r-md:  10px;
    --r-lg:  16px;
    --r-pill: 999px;

    /* Motion — contemplative. Things settle. */
    --m-quick:  200ms;
    --m-base:   360ms;
    --m-deep:   520ms;
    --ease:      cubic-bezier(0.3, 0.0, 0.2, 1);
    --ease-deep: cubic-bezier(0.4, 0.0, 0.2, 1);

    /* SHADOW — long, soft, warm-tinted. The bulb's halo, not a hard sun. */
    --shadow-low:   0 2px 4px rgba(20, 12, 6, 0.20);
    --shadow-mid:   0 12px 32px rgba(20, 12, 6, 0.30),
                    0 4px 8px rgba(20, 12, 6, 0.20);
    --shadow-deep:  0 24px 64px rgba(20, 12, 6, 0.50),
                    0 8px 16px rgba(20, 12, 6, 0.30);
    --shadow-warm:  0 8px 24px rgba(212, 160, 74, 0.08);

    /* INSET — carved into the matter. Top shadow + bottom highlight. */
    --inset-cut:    inset 0 2px 6px rgba(0, 0, 0, 0.40),
                    inset 0 -1px 0 rgba(255, 230, 180, 0.06);
    --inset-deep:   inset 0 4px 10px rgba(0, 0, 0, 0.55),
                    inset 0 -1px 0 rgba(255, 230, 180, 0.06);

    /* PROUD — emerging from the matter (highlight on top, shadow on bottom).
       The opposite of inset — the slab catches light along its top edge. */
    --proud:        0 1px 0 rgba(255, 230, 180, 0.06) inset,
                    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
                    var(--shadow-low);
    --proud-mid:    0 1px 0 rgba(255, 230, 180, 0.08) inset,
                    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
                    var(--shadow-mid);
    --proud-deep:   0 1px 0 rgba(255, 230, 180, 0.10) inset,
                    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
                    var(--shadow-deep);

    /* TEXT INSCRIPTION — top highlight + bottom inscription shadow */
    --text-inscribe:
      0 1px 0 rgba(255, 230, 180, 0.05),
      0 -1px 0 rgba(0, 0, 0, 0.45);

    /* Control metrics — slightly taller than v3, hand-feel weight */
    --control-h-sm: 30px;
    --control-h-md: 40px;
    --control-h-lg: 52px;
  }

  /* CONCRETE — sunlit board-formed concrete, the cool alternate. */
  [data-theme="ink"] {
    --plane:        #d8d4cb;
    --plane-2:      #c8c4ba;
    --plane-3:      #b8b3a8;
    --plane-edge:   rgba(28, 26, 22, 0.10);

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

    --ink:          #1c1a16;
    --ink-2:        #4a463d;
    --ink-3:        #7a7464;

    --rule:         rgba(28, 26, 22, 0.18);
    --rule-soft:    rgba(28, 26, 22, 0.08);

    /* Iron-oxide accent — the rust stain on a concrete board mark */
    --accent:       #8a4a1a;
    --accent-ink:   #f5f1e7;
    --accent-wash:  rgba(138, 74, 26, 0.10);
    --accent-glow:  rgba(138, 74, 26, 0.20);
    --accent-line:  rgba(138, 74, 26, 0.45);

    /* Status — same mineral family, slightly deepened for light background */
    --status-positive:      #4a6238;
    --status-positive-wash: rgba(74, 98, 56, 0.10);
    --status-warning:       #8a6320;
    --status-warning-wash:  rgba(138, 99, 32, 0.12);
    --status-negative:      #6e2a1f;
    --status-negative-wash: rgba(110, 42, 31, 0.10);

    /* Shadows — daylight, less golden, still long and soft */
    --shadow-low:   0 1px 3px rgba(28, 26, 22, 0.14);
    --shadow-mid:   0 10px 28px rgba(28, 26, 22, 0.16),
                    0 3px 6px rgba(28, 26, 22, 0.10);
    --shadow-deep:  0 22px 56px rgba(28, 26, 22, 0.22),
                    0 6px 14px rgba(28, 26, 22, 0.12);
    --shadow-warm:  0 6px 20px rgba(138, 74, 26, 0.06);

    --inset-cut:    inset 0 2px 5px rgba(28, 26, 22, 0.18),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.40);
    --inset-deep:   inset 0 4px 9px rgba(28, 26, 22, 0.24),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.40);

    --proud:        0 1px 0 rgba(255, 255, 255, 0.50) inset,
                    0 -1px 0 rgba(28, 26, 22, 0.10) inset,
                    var(--shadow-low);
    --proud-mid:    0 1px 0 rgba(255, 255, 255, 0.55) inset,
                    0 -1px 0 rgba(28, 26, 22, 0.10) inset,
                    var(--shadow-mid);
    --proud-deep:   0 1px 0 rgba(255, 255, 255, 0.55) inset,
                    0 -1px 0 rgba(28, 26, 22, 0.10) inset,
                    var(--shadow-deep);

    --text-inscribe:
      0 1px 0 rgba(255, 255, 255, 0.40),
      0 -1px 0 rgba(28, 26, 22, 0.18);
  }
}

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

  /* MATTER itself — the bulb's wash from upper-left, faint stratification
     suggesting stacked Vals slate (or oak grain). Subtle. Visible on
     attention, invisible at first glance. */
  body {
    margin: 0;
    color: var(--ink);
    background:
      radial-gradient(ellipse 1200px 800px at 22% -8%,
        color-mix(in srgb, var(--plane) 78%, var(--accent) 14%) 0%,
        var(--plane) 55%),
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 18px,
        rgba(0, 0, 0, 0.04) 18px,
        rgba(0, 0, 0, 0.04) 19px
      );
    background-attachment: fixed, fixed;
    min-height: 100vh;
  }

  [data-theme="ink"] body {
    background:
      radial-gradient(ellipse 1200px 800px at 28% -10%,
        color-mix(in srgb, var(--plane) 70%, #ffffff 22%) 0%,
        var(--plane) 60%),
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 22px,
        rgba(28, 26, 22, 0.025) 22px,
        rgba(28, 26, 22, 0.025) 23px
      );
    background-attachment: fixed, fixed;
  }

  /* HEADINGS — inscribed into the surface, not drawn on it.
     Serif by default for the engraved feel; the inset shadow does the work. */
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
    color: var(--ink);
    letter-spacing: var(--tracking-display);
    text-shadow: var(--text-inscribe);
  }
  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-family: var(--font-sans); font-weight: var(--w-medium); text-shadow: none; }
  h5, h6 { font-family: var(--font-sans); font-weight: var(--w-medium); text-shadow: none; }

  p { margin: 0; }

  a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px 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: 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. PRIMITIVES — carved from matter, or proud above it. Never floating.
   ───────────────────────────────────────────────────────────────── */
@layer primitives {

  .eyebrow {
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-3);
  }

  .inscription {
    font-family: var(--font-display);
    font-weight: var(--w-regular);
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
    text-shadow: var(--text-inscribe);
  }

  /* — Button — a SLAB cut from the plane.
     Default: proud (catches a hairline highlight on the top edge,
     casts a soft warm shadow below). Hover: the light catches more.
     Active: it settles deeper into the matter. */
  .btn {
    --_bg: color-mix(in srgb, var(--plane) 88%, var(--ink) 4%);
    --_fg: var(--ink);
    --_shadow: var(--proud);
    --_shadow-hover: var(--proud-mid);

    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: 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: 0;
    border-radius: var(--r-md);
    box-shadow: var(--_shadow);
    cursor: pointer;
    user-select: none;
    transform: translateY(0);
    transition:
      box-shadow      var(--m-base) var(--ease),
      transform       var(--m-base) var(--ease),
      background-color var(--m-base) var(--ease),
      color           var(--m-base) var(--ease);
  }
  .btn:hover {
    box-shadow: var(--_shadow-hover);
    transform: translateY(-1px);
  }
  .btn:active {
    box-shadow: var(--inset-cut);
    transform: translateY(0);
    transition-duration: var(--m-quick);
  }
  .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .btn[disabled],
  .btn[aria-disabled="true"] {
    opacity: 0.40;
    box-shadow: var(--shadow-low);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
  }

  /* Primary — brass-inlay. The bulb itself, set into the wall. */
  .btn--primary {
    --_bg: var(--accent);
    --_fg: var(--accent-ink);
    --_shadow:
      0 1px 0 rgba(255, 230, 180, 0.30) inset,
      0 -1px 0 rgba(80, 50, 10, 0.40) inset,
      var(--shadow-mid),
      var(--shadow-warm);
    --_shadow-hover:
      0 1px 0 rgba(255, 230, 180, 0.40) inset,
      0 -1px 0 rgba(80, 50, 10, 0.40) inset,
      var(--shadow-deep),
      0 12px 32px var(--accent-glow);
  }
  .btn--primary:active {
    box-shadow:
      inset 0 2px 6px rgba(80, 50, 10, 0.50),
      inset 0 -1px 0 rgba(255, 230, 180, 0.20);
  }

  /* Ghost — inscribed on the plane, no surface. */
  .btn--ghost {
    --_bg: transparent;
    --_shadow: none;
    --_shadow-hover: none;
    color: var(--ink-2);
  }
  .btn--ghost:hover {
    background: var(--plane-2);
    color: var(--ink);
    transform: none;
    box-shadow: var(--inset-cut);
  }
  .btn--ghost:active { box-shadow: var(--inset-deep); }

  /* Accent — outline, brass-tinged */
  .btn--accent {
    --_bg: var(--accent-wash);
    --_fg: var(--accent);
    --_shadow: var(--proud);
    --_shadow-hover: var(--proud-mid);
  }

  /* Danger — oxblood */
  .btn--danger {
    --_fg: var(--status-negative);
  }
  .btn--danger:hover {
    --_fg: var(--accent-ink);
    background: var(--status-negative);
  }

  .btn--sm { height: var(--control-h-sm); padding: 0 var(--s-3); font-size: var(--t-xs); border-radius: var(--r-sm); }
  .btn--lg { height: var(--control-h-lg); padding: 0 var(--s-6); 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 — a CUT deep into the material.
     Heavy inset; the type sits in the recess at a slightly lower contrast. */
  .input,
  .select,
  .textarea {
    display: block;
    width: 100%;
    height: var(--control-h-md);
    padding: 0 var(--s-4);
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    color: var(--ink);
    background: var(--plane-2);
    border: 0;
    border-radius: var(--r-md);
    box-shadow: var(--inset-cut);
    transition:
      box-shadow      var(--m-base) var(--ease),
      background-color var(--m-base) var(--ease);
  }
  .input::placeholder,
  .textarea::placeholder { color: var(--ink-3); }

  .input:hover,
  .select:hover,
  .textarea:hover {
    box-shadow: var(--inset-cut), 0 0 0 1px var(--rule);
  }

  .input:focus,
  .select:focus,
  .textarea:focus {
    outline: none;
    background: var(--plane-3);
    box-shadow:
      var(--inset-deep),
      0 0 0 3px var(--accent-wash),
      0 0 0 1px var(--accent);
  }

  .textarea {
    height: auto;
    padding: var(--s-3) var(--s-4);
    line-height: var(--lh-base);
    resize: vertical;
    min-height: 96px;
  }

  .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% - 18px) center,
      calc(100% - 13px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s-7);
  }

  /* Checkbox / radio — small bowls cut into the surface,
     the check is a brass dot dropped in. */
  .checkbox, .radio {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    background: var(--plane-2);
    border-radius: var(--r-sm);
    box-shadow: var(--inset-cut);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: background-color var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease);
  }
  .radio { border-radius: var(--r-pill); }
  .checkbox:hover, .radio:hover {
    box-shadow: var(--inset-cut), 0 0 0 1px var(--rule);
  }
  .checkbox:checked, .radio:checked {
    background: var(--accent);
    box-shadow:
      inset 0 1px 0 rgba(255, 230, 180, 0.35),
      inset 0 -1px 0 rgba(80, 50, 10, 0.45),
      0 0 0 1px var(--accent),
      var(--shadow-warm);
  }
  .checkbox:checked::after {
    content: "";
    width: 10px;
    height: 5px;
    border-left: 1.6px solid var(--accent-ink);
    border-bottom: 1.6px solid var(--accent-ink);
    transform: rotate(-45deg) translate(1px, -1px);
  }
  .radio:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--accent-ink);
  }

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

  /* — Card — a SLAB of material. Thickness suggested by the proud shadow:
     top edge catches the light, bottom edge casts. */
  .card {
    position: relative;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--plane) 96%, var(--ink) 2%) 0%,
        var(--plane) 100%);
    border-radius: var(--r-md);
    box-shadow: var(--proud-mid);
    padding: var(--s-5);
  }
  .card--panel  {
    background: var(--plane-2);
    box-shadow: var(--inset-cut);
  }
  .card--lifted   { box-shadow: var(--proud-deep); }
  .card--floating { box-shadow: var(--proud-deep), var(--shadow-warm); }
  .card--flush    { padding: 0; }
  .card__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--rule-soft);
  }
  .card__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--w-regular);
    letter-spacing: var(--tracking-display);
    text-shadow: var(--text-inscribe);
  }
  .card__meta  { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-3); }

  /* — Table — engraved REGISTER. Rules are subtle bevels: a faint top highlight
     and a bottom shadow. No card wrapping; the matter itself shows through. */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    color: var(--ink);
  }
  .table th {
    text-align: left;
    font-family: var(--font-sans);
    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) var(--s-4);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
  }
  .table td {
    padding: var(--s-4);
    box-shadow:
      0 1px 0 rgba(255, 230, 180, 0.04) inset,
      0 -1px 0 rgba(0, 0, 0, 0.20) inset;
    vertical-align: top;
  }
  [data-theme="ink"] .table td {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.30) inset,
      0 -1px 0 rgba(28, 26, 22, 0.10) inset;
  }
  .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 { transition: background-color var(--m-base) var(--ease); }
  .table tbody tr:hover td { background: var(--plane-2); }
  .table tbody tr[aria-selected="true"] td { background: var(--accent-wash); }

  /* — Tag — a BRASS or STONE chip. Small, beveled, with weight. */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    height: 24px;
    padding: 0 var(--s-3);
    font-family: var(--font-sans);
    font-size: var(--t-xs);
    font-weight: var(--w-medium);
    line-height: 1;
    letter-spacing: var(--tracking-label);
    color: var(--ink-2);
    background: var(--plane-2);
    border-radius: var(--r-sm);
    box-shadow: var(--proud);
    white-space: nowrap;
  }
  .tag--accent   {
    color: var(--accent);
    background: var(--accent-wash);
    box-shadow:
      0 1px 0 rgba(255, 230, 180, 0.10) inset,
      0 -1px 0 rgba(80, 50, 10, 0.30) inset,
      var(--shadow-low);
  }
  .tag--positive { color: var(--status-positive); background: var(--status-positive-wash); }
  .tag--warning  { color: var(--status-warning);  background: var(--status-warning-wash); }
  .tag--negative { color: var(--status-negative); background: var(--status-negative-wash); }

  /* — Dot — a single LED set into the stone */
  .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--ink-3);
    flex-shrink: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 230, 180, 0.15),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 0, 0, 0.25);
  }
  .dot--positive { background: var(--status-positive); }
  .dot--warning  { background: var(--status-warning); }
  .dot--negative { background: var(--status-negative); }
  .dot--info     { background: var(--accent); }
  .dot--lit {
    box-shadow:
      inset 0 1px 0 rgba(255, 230, 180, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20),
      0 0 0 2px color-mix(in srgb, currentColor 22%, transparent),
      0 0 8px color-mix(in srgb, currentColor 40%, transparent);
  }

  /* — Tabs — a CARVED channel; the active tab emerges from it. */
  .tabs {
    display: inline-flex;
    padding: 4px;
    background: var(--plane-2);
    border-radius: var(--r-md);
    box-shadow: var(--inset-cut);
    gap: 2px;
  }
  .tabs__tab {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    font-family: var(--font-sans);
    font-size: var(--t-sm);
    font-weight: var(--w-medium);
    color: var(--ink-3);
    padding: 0 var(--s-4);
    height: 32px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition:
      background-color var(--m-base) var(--ease),
      color            var(--m-base) var(--ease),
      box-shadow       var(--m-base) var(--ease);
  }
  .tabs__tab:hover { color: var(--ink-2); }
  .tabs__tab[aria-selected="true"] {
    background: var(--plane);
    color: var(--ink);
    box-shadow: var(--proud);
  }

  /* — Kbd — a brass CAP, top-light catches the upper edge. */
  .kbd {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    padding: 2px 7px;
    color: var(--ink-2);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--plane) 90%, var(--ink) 4%) 0%,
        var(--plane-2) 100%);
    border-radius: var(--r-sm);
    box-shadow:
      0 1px 0 rgba(255, 230, 180, 0.10) inset,
      0 -2px 0 rgba(0, 0, 0, 0.30) inset,
      var(--shadow-low);
  }
  [data-theme="ink"] .kbd {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.55) inset,
      0 -2px 0 rgba(28, 26, 22, 0.16) inset,
      var(--shadow-low);
  }

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

  /* — Material band — a stratum change in the wall, used for section dividers */
  .material-band {
    position: relative;
    height: 24px;
    background:
      linear-gradient(180deg,
        var(--plane-3) 0%,
        var(--plane-2) 45%,
        var(--plane-2) 55%,
        var(--plane-3) 100%);
    box-shadow:
      inset 0 1px 0 rgba(0, 0, 0, 0.40),
      inset 0 -1px 0 rgba(255, 230, 180, 0.05);
    border-radius: var(--r-sm);
  }
  [data-theme="ink"] .material-band {
    box-shadow:
      inset 0 1px 0 rgba(28, 26, 22, 0.16),
      inset 0 -1px 0 rgba(255, 255, 255, 0.40);
  }

  /* — Bulb — small ornamental light spot. Use sparingly. */
  .bulb {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--r-pill);
    background:
      radial-gradient(circle at 35% 30%,
        #fff5d8 0%,
        var(--accent) 55%,
        #6a4a18 100%);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.35),
      0 0 12px var(--accent-glow),
      0 0 28px color-mix(in srgb, var(--accent) 25%, transparent);
  }
}

/* ─────────────────────────────────────────────────────────────────
   D. COMPONENTS — composed objects, in this material register
   ───────────────────────────────────────────────────────────────── */
@layer components {
  .page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--s-6) 0 var(--s-5);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-6);
  }
  .page-head__title {
    font-family: var(--font-display);
    font-size: var(--t-3xl);
    letter-spacing: var(--tracking-display);
    text-shadow: var(--text-inscribe);
  }
  .page-head__meta {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  /* — Shell — an OPEN STONE CHAMBER.
     Rail is a side aisle (deeper recess); main is the bath itself. */
  .shell {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 480px;
    background: var(--plane);
    border-radius: var(--r-lg);
    box-shadow: var(--proud-deep);
    overflow: hidden;
  }
  .shell__rail {
    background: var(--plane-2);
    box-shadow: inset -1px 0 0 var(--rule-soft);
    overflow-y: auto;
  }
  .shell__main {
    background: var(--plane);
    overflow-y: auto;
    padding: var(--s-6);
  }

  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-5);
    color: var(--ink-3);
  }
  .empty__title {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: var(--w-regular);
    color: var(--ink-2);
    letter-spacing: var(--tracking-display);
    text-shadow: var(--text-inscribe);
  }
}

/* ─────────────────────────────────────────────────────────────────
   E. UTILITIES
   ───────────────────────────────────────────────────────────────── */
@layer utilities {
  .stack       { display: flex; flex-direction: column; gap: var(--s-3); }
  .stack--lg   { gap: var(--s-6); }
  .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); }
  .serif   { font-family: var(--font-display); }
  .tabular { font-variant-numeric: tabular-nums; }
  .nowrap  { white-space: nowrap; }
  .grow    { flex: 1 1 0; min-width: 0; }

  /* Surface helpers */
  .obj-proud    { box-shadow: var(--proud); background: var(--plane); border-radius: var(--r-md); }
  .obj-lifted   { box-shadow: var(--proud-mid); background: var(--plane); border-radius: var(--r-md); }
  .obj-deep     { box-shadow: var(--proud-deep); background: var(--plane); border-radius: var(--r-md); }
  .obj-cut      { box-shadow: var(--inset-cut); background: var(--plane-2); border-radius: var(--r-md); }
  .obj-deeper   { box-shadow: var(--inset-deep); background: var(--plane-3); border-radius: var(--r-md); }
}