/* ════════════════════════════════════════════════════════════════════
   SAND THEME — Roland TR-909 cream/tan hardware tribute (SD.1, 2026-05-20)
   ════════════════════════════════════════════════════════════════════
   Third Neon-Tracker theme alongside Neon (default synthwave) and
   Classic (ProTracker pastel-blue).  Palette: cream/tan body + warm
   orange + warm red + amber accents — the look that
   tracker-core-tracking-nz9.css used to own privately as the 9zero9
   identity.

   Architecture:
     - All overrides scoped to `html[data-theme="sand"]`.
     - Token block at top mirrors classic-theme.css structure so the
       same surface-coverage tests work identically.
     - Page background OUTSIDE the tracker stays slightly DARKER than
       the cream panel — gives the impression of cream hardware sitting
       on a workbench (matches the 9zero9 deck's drop-shadow logic).

   9zero9 charter:  Once SD.1 lands and the deck inherits Sand globals
   cleanly, the @9zero9-locked block in tracker-core-tracking-nz9.css
   can be removed (planned SD.3 slice).  Until then, both work: 9zero9
   inside Sand looks the same whether the lock is there or not.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SD.2.b — Sand Visual Language Tokens (--sand-*)
   ════════════════════════════════════════════════════════════════════
   Single source of truth for the 9zero9 design vocabulary inside the
   Sand theme.  Defined here and consumed by every Sand-scoped rule
   below.  Charter: docs/SAND-VISUAL-LANGUAGE.md.  Guard:
   scripts/check-theme-isolation.js.

   Adding values without updating the charter doc is a contract
   violation — the charter is the spec, this token block is the
   implementation.
   ════════════════════════════════════════════════════════════════════ */
html[data-theme="sand"] {
  /* ── Corner radii ─────────────────────────────────────── */
  --sand-radius-deck:    10px;
  --sand-radius-panel:    8px;
  --sand-radius-card:     6px;
  --sand-radius-control:  4px;
  --sand-radius-pad:      2px;
  --sand-radius-pill:     50%;

  /* ── Bezels + shadows (warm-white highlight, warm-brown shadow) ─ */
  --sand-bezel-deck:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 28px rgba(0, 0, 0, 0.60);
  --sand-bezel-raised:
    inset 1px 1px 0 rgba(255, 248, 224, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.40),
    1px 1px 0 rgba(60, 30, 8, 0.25);
  --sand-bezel-pressed:
    inset 1px 1px 0 rgba(60, 30, 8, 0.40),
    inset -1px -1px 0 rgba(255, 248, 224, 0.40);
  --sand-bezel-focus-ring:
    0 0 0 2px color-mix(in srgb, #ff6418 65%, transparent);

  /* ── Button faces (charcoal + cream variants) ────────── */
  --sand-button-face-off:        #323030;
  --sand-button-face-hot:        #4a4040;
  --sand-button-face-shade:      #181414;
  --sand-button-face-cream:      #d4c095;
  --sand-button-face-cream-hot:  #e2d0a8;

  /* ── Surface palette ─────────────────────────────────── */
  --sand-panel:         #c9ba8e;
  --sand-panel-deep:    #b5a478;
  --sand-panel-edge:    #8a7a52;
  --sand-cream:         #ede0bc;
  --sand-cream-deep:    #d4c095;
  --sand-cream-shadow:  #a48e68;

  /* ── Text + ink ──────────────────────────────────────── */
  --sand-ink-primary:  #2a1a08;
  --sand-ink-muted:    #5a4828;
  --sand-ink-bright:   #100804;
  --sand-ink-inverse:  #ede0bc;

  /* ── Accents (TR-909 face colourways) ─────────────────── */
  --sand-accent-orange:   #ff6418;
  --sand-accent-red:      #d91c22;
  --sand-accent-amber:    #f59818;
  --sand-accent-cobalt:   #1e3a68;
  --sand-accent-olive:    #4a7030;
  --sand-accent-magenta:  #ff50c8;

  /* ── Per-slot LED colours (Drum surface) ─────────────── */
  --sand-led-kick:   #ff8030;
  --sand-led-snare:  #ff3d55;
  --sand-led-hat:    #edc020;
  --sand-led-clap:   #ff50c8;
  --sand-led-tom:    #28d8cc;
  --sand-led-perc:   #ffa828;

  /* ── Typography ──────────────────────────────────────── */
  --sand-font-mono:    "VT323", "Topaz", "Courier New", monospace;
  --sand-font-display: "NeonTrackerClassic", "Topaz", ui-monospace, monospace;

  /* ── Lines ───────────────────────────────────────────── */
  --sand-line:         #8a7a52;
  --sand-line-strong:  #5a4828;

  /* ── Bay-component radius overrides (SD.2.e) ──────────
     :root defines --bay-radius-sm: 3px and --bay-radius-md: 4px.
     Charter allows only 2px / 4px / 6px / 8px / 10px / 50%.
     Override sm → 2px (pad); md already matches control (4px). */
  --bay-radius-sm:  var(--sand-radius-pad);      /* 2px */
  --bay-radius-md:  var(--sand-radius-control);  /* 4px */

  /* ── Bay live-colour overrides (SD.2.e) ───────────────
     :root defines bright-neon #ffd166 / #06d6a0.
     Replace with charter amber / olive. */
  --bay-color-live:        var(--sand-accent-amber);  /* #f59818 */
  --bay-color-live-active: var(--sand-accent-olive);  /* #4a7030 */

  /* ── Bay base-panel override (P2.d.4, 2026-05-21) ─────
     :root defines --bay-bg-panel: #0b1620 (neon-deep) as the dark
     anchor for color-mix() bg gradients across the synth-bay /
     synth-rack slabs.  Without a Sand override every mix collapsed
     to a black-hole in cream Sand.  Use the sand-cream-deep anchor
     so the accent-tinted mix lands on warm tan instead. */
  --bay-bg-panel:          var(--sand-cream-deep);      /* #d4c095 */
}

html[data-theme="sand"] {
  color-scheme: light;

  /* ---- Page / shell background = warm dark tan ------------- */
  /* SD.6: gradient stops aligned to charter palette
     (was #2e1e08/#3a2810 — neighbouring tans not in palette).  */
  --bg:              #5a4828;     /* --sand-ink-muted */
  --page-background:
    radial-gradient(circle at 18% 10%, rgba(255, 100, 24, 0.10), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(217, 28, 34, 0.08), transparent 24rem),
    linear-gradient(180deg, #2a1a08 0%, #5a4828 50%, #2a1a08 100%);

  /* ---- Tracker panel surfaces = TR-909 cream/tan ---------- */
  --panel:           #c9ba8e;   /* main cream-tan deck face */
  --panel-2:         #d4c095;   /* mid cream for sub-panels */
  --tracker-cell:    #ede0bc;   /* lightest cream — "screen" surface */
  --tracker-cell-2:  #d4c095;   /* button face */

  /* ---- Frame lines + text colours on cream ---------------- */
  --line:            #8a7a52;   /* tan-darker border line */
  --text:            #2a1a08;   /* dark warm brown body text */
  --muted:           #5a4828;   /* muted dark brown */
  --black-key:       #2a1a08;

  /* ---- Accents — TR-909 face colourways -------------------- */
  --cyan:            #1e3a68;   /* deep cobalt (the one cool accent) */
  --lime:            #4a7030;   /* olive-green — sparingly */
  --pink:            #d91c22;   /* TR-909 red */
  --amber:           #ff6418;   /* TR-909 orange */

  --tracker-font: "NeonTrackerClassic", "Topaz", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tracker-panel-shadow:
    inset 1px 1px 0 rgba(255, 248, 224, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.45),
    1px 2px 0 rgba(60, 30, 8, 0.30);
}

/* ── Token block in --neon-* namespace (mirror Classic structure) ── */
html[data-theme="sand"] {
  --neon-color-bg-base:        #b3a370;   /* warm cream-tan */
  --neon-color-bg-surface:     #c9ba8e;
  --neon-color-bg-raised:      #ede0bc;
  --neon-color-bg-sunken:      #8a7a52;
  --neon-color-text-primary:   #2a1a08;
  --neon-color-text-muted:     #5a4828;
  --neon-color-text-bright:    #100804;
  --neon-color-accent:         #ff6418;   /* orange = primary accent in Sand */
  --neon-color-accent-hover:   #ff7c30;
  --neon-color-border:         #8a7a52;
  --neon-color-border-strong:  #2a1a08;
  --neon-color-danger:         #d91c22;
  --neon-color-success:        #4a7030;
  --neon-color-warning:        #f59818;
  --neon-color-button-bg:        #d4c095;
  --neon-color-button-bg-hover:  #e2d0a8;
  --neon-color-button-bg-active: #b8a070;
  --neon-color-button-text:      #2a1a08;
  --neon-color-button-border:    #8a7a52;
  --neon-gradient-panel:         none;
  --neon-gradient-button-raised: none;
  --neon-shadow-button-raised:
    inset 1px 1px 0 rgba(255, 248, 224, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.40),
    1px 1px 0 rgba(60, 30, 8, 0.25);
  --neon-shadow-button-pressed:
    inset 1px 1px 0 rgba(60, 30, 8, 0.40),
    inset -1px -1px 0 rgba(255, 248, 224, 0.40);
  --neon-shadow-panel:
    1px 1px 0 rgba(60, 30, 8, 0.25);
  --neon-shadow-panel-glow:
    inset 1px 1px 0 rgba(255, 248, 224, 0.45),
    inset -1px -1px 0 rgba(60, 30, 8, 0.30),
    1px 1px 0 rgba(60, 30, 8, 0.25);
}

/* ── Body + form-controls use the cream font on warm dark page ── */
html[data-theme="sand"] body {
  font-family: var(--tracker-font);
}

/* ── Panel + module backgrounds: uniform cream-tan ───────── */
html[data-theme="sand"] .topbar,
html[data-theme="sand"] .visual-panel,
html[data-theme="sand"] .module,
html[data-theme="sand"] .sequencer,
html[data-theme="sand"] .tracker,
html[data-theme="sand"] .drums,
html[data-theme="sand"] .keyboard,
html[data-theme="sand"] .performance-surface {
  border-color: var(--line);
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--tracker-panel-shadow);
}

/* ── Hide synth-control-strip (TH.11 carryover) ───────────── */
html[data-theme="sand"] .transport.synth-control-strip {
  display: none !important;
}

/* ── Buttons + selects get the cream-tan bezel look ───────── */
html[data-theme="sand"] .primary-button,
html[data-theme="sand"] .ghost-button,
html[data-theme="sand"] .icon-button,
html[data-theme="sand"] .mode-tab,
html[data-theme="sand"] .tempo,
html[data-theme="sand"] .preset-rack,
html[data-theme="sand"] .dice-rack,
html[data-theme="sand"] .audition-rack,
html[data-theme="sand"] .theme-rack,
html[data-theme="sand"] .tracker-channel-toggle,
html[data-theme="sand"] .tracker-order-item,
html[data-theme="sand"] .tracker-step-value {
  border-radius: 0;
  color: var(--text);
  background: var(--tracker-cell-2);
  border-color: var(--line);
  box-shadow:
    inset 1px 1px 0 rgba(255, 248, 224, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.40);
}

html[data-theme="sand"] .primary-button {
  color: #fff8f0;
  background: var(--amber);  /* TR-909 orange Play button */
}

html[data-theme="sand"] .mode-tab.active {
  background: color-mix(in srgb, var(--panel-2) 60%, var(--amber) 40%);
  color: var(--text);
  box-shadow:
    inset 1px 1px 0 rgba(60, 30, 8, 0.35),
    inset -1px -1px 0 rgba(255, 248, 224, 0.55);
}

html[data-theme="sand"] select,
html[data-theme="sand"] input[type="text"],
html[data-theme="sand"] input[type="number"] {
  background: var(--tracker-cell);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--sand-radius-control);  /* SD.2.e: 4px = charter control */
}

/* ── Synth-mode module overrides — uniform cream surface ─── */
html[data-theme="sand"][data-work-mode="synth"] .synth-rack,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack--sources,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack--shaping,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack--motion,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack--output,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack--lane {
  background-color: var(--tracker-cell);
  background-image: none;
}

html[data-theme="sand"] .module,
html[data-theme="sand"][data-work-mode="synth"] .synth-rack > .module {
  background-color: var(--tracker-cell) !important;
  background-image: none !important;
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);  /* orange top-stripe = "section" cue */
  box-shadow:
    inset 1px 1px 0 rgba(255, 248, 224, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.35);
}

html[data-theme="sand"][data-work-mode="synth"] .synth-rack,
html[data-theme="sand"][data-work-mode="synth"] .module {
  --bg-panel: var(--tracker-cell);
  --accent: var(--tracker-cell);  /* collapse accent-mix to no-tint */
}

/* ── Module titles + value accents — warm semantic colours ── */
html[data-theme="sand"] .module-title span,
html[data-theme="sand"] .module-title strong,
html[data-theme="sand"][data-work-mode="synth"] .module-title span,
html[data-theme="sand"][data-work-mode="synth"] .module-title strong {
  color: var(--text);
}

html[data-theme="sand"] strong#oscAValue,
html[data-theme="sand"] strong#detuneValue,
html[data-theme="sand"] strong#sourceValue,
html[data-theme="sand"] strong#digitalValue {
  color: var(--cyan);    /* cool cobalt for oscillator */
}

html[data-theme="sand"] strong#filterValue,
html[data-theme="sand"] strong#filterEnvValue {
  color: var(--lime);    /* olive for filter */
}

html[data-theme="sand"] strong#envValue,
html[data-theme="sand"] strong#lfoValue,
html[data-theme="sand"] strong#arpValue {
  color: var(--amber);   /* TR-909 orange for modulation */
}

html[data-theme="sand"] strong#delayValue {
  color: var(--text);
}

/* ── Tracker viewport: cream "screen" inside cream-tan deck ─ */
html[data-theme="sand"] .tracker-grid-viewport,
html[data-theme="sand"] .tracker-viewport-scroll {
  background: var(--tracker-cell);
}

html[data-theme="sand"] .tracker-pattern-row {
  color: var(--text);
}

/* ── Keyboard: white keys = cream, black keys = dark brown ── */
html[data-theme="sand"] .key {
  background: var(--tracker-cell);
  color: var(--text);
  border: 1px solid var(--line);
}

html[data-theme="sand"] .key.black {
  background: var(--text);
  color: var(--tracker-cell);
}

html[data-theme="sand"] .key > .key-note-label,
html[data-theme="sand"] .key > .key-pc-hint {
  color: var(--text);
}

html[data-theme="sand"] .key.black > .key-note-label,
html[data-theme="sand"] .key.black > .key-pc-hint {
  color: color-mix(in srgb, var(--tracker-cell) 70%, white);
}

/* ── Performance-mode (Piano-Roll + Arrangement) ──────────── */
html[data-theme="sand"] .piano-roll-header,
html[data-theme="sand"] .arrangement-header {
  background: var(--tracker-cell);
  border: 1px solid var(--line);
  color: var(--text);
}

html[data-theme="sand"] .piano-roll-header > .piano-roll-title,
html[data-theme="sand"] .arrangement-header > .arrangement-title {
  color: var(--text);
}

html[data-theme="sand"] .piano-roll-capture-btn,
html[data-theme="sand"] .arrangement-btn--capture {
  background: var(--tracker-cell-2);
  color: var(--pink);     /* TR-909 red for "arm to record" */
  border: 1px solid var(--pink);
  border-radius: var(--sand-radius-control);  /* SD.2.e */
}

html[data-theme="sand"] .arrangement-btn--play {
  background: var(--tracker-cell-2);
  color: var(--amber);    /* TR-909 orange Play */
  border: 1px solid var(--amber);
  border-radius: var(--sand-radius-control);  /* SD.2.e */
}

html[data-theme="sand"] .arrangement-btn--stop,
html[data-theme="sand"] .arrangement-btn--loop {
  background: var(--tracker-cell-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--sand-radius-control);  /* SD.2.e */
}

/* ── BPM display ─────────────────────────────────────────── */
html[data-theme="sand"] .tempo-controls input {
  background: var(--tracker-cell);
  color: var(--text);
  border: 1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════════════
   SD.2.e — Sand Identity: Charter radius + background compliance
   ════════════════════════════════════════════════════════════════════
   Each block below fixes a class of violations found by the SD.2.d
   identity lint (tests/audit/sand-identity-lint.spec.js).
   All rules are scoped to html[data-theme="sand"].
   ════════════════════════════════════════════════════════════════════ */

/* ── Radius: version badge ────────────────────────────────
   .neon-logo-version: 5px → 4px (--sand-radius-control)    */
html[data-theme="sand"] .neon-logo-version {
  border-radius: var(--sand-radius-control);
}

/* ── Radius: mode tabs (specificity override) ─────────────
   tracker-cockpit-nav.css uses 3-class selector → 1px.
   We need at least (0,0,3,1) to win.                       */
html[data-theme="sand"] .tracker-cockpit-nav .mode-tab {
  border-radius: var(--sand-radius-pad);   /* 2px */
}

/* ── Radius: studio-mixer knob tick ───────────────────────
   Base rule uses 999px pill trick → must be 50% (charter). */
html[data-theme="sand"] .studio-mixer-knob-tick {
  border-radius: var(--sand-radius-pill);  /* 50% */
}

/* ── Radius: clip launcher cells ──────────────────────────
   performance-surface.css hardcodes 3px.                   */
html[data-theme="sand"] .clip-cell--clip {
  border-radius: var(--sand-radius-control);  /* 4px */
}

/* ── Radius: 9zero9 drums-deck locked rules ───────────────
   [data-tracker-drums-deck] overrides set 3px on matrix
   cells, mute, solo.  Sand charter: pads = 2px.            */
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-matrix-cell,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-matrix-mute,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-matrix-solo {
  border-radius: var(--sand-radius-pad);   /* 2px */
}

/* ── Radius: keyboard pitch-wheel track ───────────────────
   tracker-panels-strip-meta.css: 5px → 4px.               */
html[data-theme="sand"] .keyboard-pitch-wheel-track {
  border-radius: var(--sand-radius-control);
  border-color: var(--sand-panel-edge);
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-panel-deep) 100%);
  box-shadow: var(--sand-bezel-pressed);
}

html[data-theme="sand"] .keyboard-pitch-wheel-thumb {
  border-radius: var(--sand-radius-control);
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  border-color: var(--sand-panel-edge);
  box-shadow: var(--sand-bezel-raised);
}

/* ── Background: studio-mixer knob colours ───────────────
   Per-track --knob-color drives .studio-mixer-knob-tick bg.
   Replace neon-spectrum values with sand-palette ones.     */
html[data-theme="sand"] .studio-mixer-track-pan    { --knob-color: var(--sand-cream);         }
html[data-theme="sand"] .studio-mixer-track-input  { --knob-color: var(--sand-led-tom);        }
html[data-theme="sand"] .studio-mixer-track-output { --knob-color: var(--sand-accent-amber);   }
html[data-theme="sand"] .studio-mixer-track-send   { --knob-color: var(--sand-cream-deep);     }

/* ── Background: tracker gutter row-number cells ─────────
   .tracker-pattern-gutter-row > span (and tracker-row)
   hard-codes background: #11131a.  Replace with sand tan.  */
html[data-theme="sand"] .tracker-row > span,
html[data-theme="sand"] .tracker-pattern-gutter-row > span {
  background: var(--sand-panel-deep);
  border-color: var(--sand-panel-edge);
  color: var(--sand-ink-muted);
  text-shadow: none;
}

html[data-theme="sand"] .tracker-row.bar-row > span,
html[data-theme="sand"] .tracker-pattern-gutter-row.bar-row > span {
  background: var(--sand-panel-edge);
  color: var(--sand-accent-orange);
  border-color: var(--sand-panel-edge);
  border-top-color: rgba(255, 100, 24, 0.55);
  text-shadow: none;
}

html[data-theme="sand"] .tracker-row.beat-row:not(.bar-row) > span,
html[data-theme="sand"] .tracker-pattern-gutter-row.beat-row:not(.bar-row) > span {
  background: var(--sand-panel-deep);
  color: var(--sand-accent-olive);
  border-top-color: rgba(74, 112, 48, 0.45);
  text-shadow: none;
}

/* ── Background: tracker even-row + bar/beat cell colours ─
   Override neon dark alternating row tints.                */
html[data-theme="sand"] .tracker-row:nth-child(even) input,
html[data-theme="sand"] .tracker-row:nth-child(even) select,
html[data-theme="sand"] .tracker-row:nth-child(even) > span,
html[data-theme="sand"] .tracker-channel-cell.tracker-pattern-row--even input,
html[data-theme="sand"] .tracker-channel-cell.tracker-pattern-row--even select {
  background-color: var(--sand-cream-deep);
}

html[data-theme="sand"] .tracker-row.bar-row input,
html[data-theme="sand"] .tracker-row.bar-row select,
html[data-theme="sand"] .tracker-channel-cell.bar-row input,
html[data-theme="sand"] .tracker-channel-cell.bar-row select {
  background-color: var(--sand-panel-edge);
  border-top-color: rgba(255, 100, 24, 0.45);
}

html[data-theme="sand"] .tracker-row.beat-row:not(.bar-row) input,
html[data-theme="sand"] .tracker-row.beat-row:not(.bar-row) select,
html[data-theme="sand"] .tracker-channel-cell.beat-row:not(.bar-row) input,
html[data-theme="sand"] .tracker-channel-cell.beat-row:not(.bar-row) select {
  background-color: var(--sand-panel-deep);
  border-top-color: rgba(74, 112, 48, 0.38);
}

/* ── Background: synth-bay selected dot ───────────────────
   .synth-bay-slot.is-selected .synth-bay-dot--selected uses
   color-mix(accent 95%, white) which resolves to neon yellow.
   Replace with charter orange.                             */
html[data-theme="sand"] .synth-bay-slot.is-selected .synth-bay-dot--selected {
  background: var(--sand-accent-orange);
  box-shadow: 0 0 4px rgba(255, 100, 24, 0.60);
}

/* ── Background: keyboard octave-value badge ─────────────
   .keyboard-tools strong: hard-coded #11131a → sand cream. */
html[data-theme="sand"] .keyboard-tools strong {
  background: var(--sand-cream-deep);
  color: var(--sand-accent-orange);
  border-color: var(--sand-panel-edge);
}

/* ── Background: keyboard audition note select ────────────
   .keyboard-tools-cluster--audition .keyboard-audition-select
   has 2-class specificity → overrides our generic select rule.
   Need 3-class + element to win.                           */
html[data-theme="sand"] .keyboard-tools-cluster--audition .keyboard-audition-select {
  background: var(--sand-cream);
  color: var(--sand-ink-primary);
  border-color: var(--sand-line);
  border-radius: var(--sand-radius-control);
}

/* ── Background: piano keyboard body (.key-row) ──────────
   div#keyboard has class key-row; hard-coded #080a09.
   Use charcoal button face so ivory keys stand out.       */
html[data-theme="sand"] .key-row {
  background: var(--sand-button-face-off);
  border-color: var(--sand-ink-primary);
}

/* ── Background: piano-roll + arrangement canvas wraps ───
   Hard-coded #0a1015 (neon dark) → sand cream surface.   */
html[data-theme="sand"] .piano-roll-canvas-wrap,
html[data-theme="sand"] .arrangement-canvas-wrap {
  background: var(--sand-cream-deep);
  border-color: var(--sand-panel-edge);
}

/* ════════════════════════════════════════════════════════════════════
   SD.2.e — Second pass: remaining 140 violations (2026-05-20)
   ════════════════════════════════════════════════════════════════════ */

/* ── Background: tracker cell fields (base) ──────────────
   Browser default for <input> without type attr is white.
   .tracker-cell-effect inputs show rgb(255,255,255).
   Set sand base; per-row even/bar/beat rules override on
   top (they have higher specificity via :nth-child etc.).  */
html[data-theme="sand"] .tracker-cell-field {
  background: var(--tracker-cell);   /* #ede0bc — charter cream */
}

/* ── Radius: synth lane step buttons ─────────────────────
   synth-lane.css:405 hard-codes 3px (ignores --bay-radius-sm).
   Override to charter pad radius.                          */
html[data-theme="sand"] .synth-lane-step {
  border-radius: var(--sand-radius-pad);   /* 2px */
}

/* ── Background: studio-mixer knob tick (by knob type) ───
   --knob-color is declared directly on the knob-type
   element (.studio-mixer-knob-pan etc.), so a parent
   inheritance approach can't override it.  Match the
   same specificity level (class) but scoped to sand.       */
html[data-theme="sand"] .studio-mixer-knob-control {
  --knob-color: var(--sand-cream);         /* base default */
}
html[data-theme="sand"] .studio-mixer-knob-pan,
html[data-theme="sand"] .studio-mixer-knob-fx {
  --knob-color: var(--sand-accent-amber);  /* warm orange */
}
html[data-theme="sand"] .studio-mixer-knob-hp,
html[data-theme="sand"] .studio-mixer-knob-lp {
  --knob-color: var(--sand-led-hat);       /* warm gold */
}
html[data-theme="sand"] .studio-mixer-knob-low,
html[data-theme="sand"] .studio-mixer-knob-mid,
html[data-theme="sand"] .studio-mixer-knob-high {
  --knob-color: var(--sand-accent-olive);  /* earthy green */
}

/* ── Radius: 9zero9 drum-slot tabs + action buttons ──────
   [data-tracker-drums-deck] .drum-slot-tab/action-btn: 3px.
   Charter pad: 2px.                                        */
html[data-theme="sand"] [data-tracker-drums-deck] .drum-slot-tab,
html[data-theme="sand"] [data-tracker-drums-deck] .drum-slot-action-btn {
  border-radius: var(--sand-radius-pad);   /* 2px */
}

/* ── Radius: 9zero9 drum pads ─────────────────────────────
   [data-tracker-drums-deck] .drum-pad: 5px → 4px (control). */
html[data-theme="sand"] [data-tracker-drums-deck] .drum-pad {
  border-radius: var(--sand-radius-control);   /* 4px */
}

/* ── Radius: 9zero9 drum FX global panel ─────────────────
   nz9.css line 2335 sets 5px (beats the earlier 6px rule).
   Override to 6px charter card radius.                     */
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-drum-fx-global {
  border-radius: var(--sand-radius-card);   /* 6px */
}

/* ── Radius: 9zero9 deck select + number-input controls ──
   Multiple compound selectors in nz9.css hard-code 3px.
   Each sand rule uses higher specificity (+1 element for
   html) to beat the nz9 locked rules.                      */
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-matrix-toolbar select,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-pad-record-toolbar select,
html[data-theme="sand"] [data-tracker-drums-deck] .drums-kit-actions .field select,
html[data-theme="sand"] [data-tracker-drums-deck] .drums-kit-actions select,
html[data-theme="sand"] [data-tracker-drums-deck] .drum-slot-field select,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-drum-fx-preset-field select,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-drum-fx-global-char select,
html[data-theme="sand"] [data-tracker-drums-deck] .nz9-last-step-input {
  border-radius: var(--sand-radius-control);   /* 4px */
}

html[data-theme="sand"] [data-tracker-drums-deck] .nz9-write-tracker-inputs input[type="number"] {
  border-radius: var(--sand-radius-control);   /* 4px */
}

/* ════════════════════════════════════════════════════════════════════
   SD.4 — Black-hole polish pass (2026-05-20)
   ════════════════════════════════════════════════════════════════════
   Run-time audit (preview_eval) identified opaque dark backgrounds
   and dark-stop gradients leaking from Neon's base layer into Sand.
   Each override below replaces a specific neon-dark value with a
   sand-palette equivalent that preserves the visual hierarchy.

   Audit excerpt that drove this block:
     tracker-song-strip  → rgba(17,19,26,0.92)      area 106k px²
     tracker-head        → rgba(18,20,28,0.98)      area  99k px²
     topbar-mode-deck    → linear-gradient(.., rgba(12,14,20,0.92))
     tracker-tool-group  → 6× pastel neon gradients (blue/orange/red/
                           green) — mapped to charter accent variants
     synth-lane-play     → rgba(0,50,80,0.7)
     synth-lane-export   → rgba(20,60,100,0.85)
     synth-lane-toggle   → rgba(15,25,40,0.7)
     studio-mixer-fader  → linear-gradient with neon-lime stop
   ════════════════════════════════════════════════════════════════════ */

/* ── Block A: Tracker dark strips → cream panel surfaces ──────── */
html[data-theme="sand"] .tracker-song-strip {
  background: var(--sand-panel-deep);
  border-color: var(--sand-panel-edge);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .tracker-head {
  background: var(--sand-panel);
  border-color: var(--sand-panel-edge);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .tracker-pattern-rows-control {
  background: rgba(212, 192, 149, 0.55);  /* sand-cream-deep w/ alpha */
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
}

/* ── Block B: Topbar mode-deck — neon dark gradient → sand tan ── */
html[data-theme="sand"] .topbar-mode-deck.tracker-deck--cockpit-nav {
  background: linear-gradient(180deg,
    var(--sand-panel) 0%,
    var(--sand-panel-deep) 100%);
  border-color: var(--sand-panel-edge);
}

/* ── Block C: Tracker workflow tool-groups (pastel neon → sand) ──
   transport/step/edit/pattern/order/view group headers carry per-
   group accent gradients.  Switch each to a charter accent so the
   colour vocabulary stays inside the Sand palette while keeping the
   group-identity reading.                                          */
html[data-theme="sand"] .tracker-tool-group.tracker-tool-transport {
  background: linear-gradient(180deg,
    rgba(30, 58, 104, 0.18) 0%,
    rgba(30, 58, 104, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(30, 58, 104, 0.45);
}

html[data-theme="sand"] .tracker-tool-group.tracker-tool-step {
  background: linear-gradient(180deg,
    rgba(255, 100, 24, 0.18) 0%,
    rgba(255, 100, 24, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(255, 100, 24, 0.45);
}

html[data-theme="sand"] .tracker-tool-group.tracker-tool-edit {
  background: linear-gradient(180deg,
    rgba(217, 28, 34, 0.18) 0%,
    rgba(217, 28, 34, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(217, 28, 34, 0.45);
}

html[data-theme="sand"] .tracker-tool-group.tracker-tool-pattern {
  background: linear-gradient(180deg,
    rgba(74, 112, 48, 0.18) 0%,
    rgba(74, 112, 48, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(74, 112, 48, 0.45);
}

html[data-theme="sand"] .tracker-tool-group.tracker-tool-order {
  background: linear-gradient(180deg,
    rgba(245, 152, 24, 0.18) 0%,
    rgba(245, 152, 24, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(245, 152, 24, 0.45);
}

html[data-theme="sand"] .tracker-tool-group.tracker-tool-view {
  background: linear-gradient(180deg,
    rgba(30, 58, 104, 0.18) 0%,
    rgba(30, 58, 104, 0.06) 35%,
    rgba(0, 0, 0, 0) 100%);
  border-color: rgba(30, 58, 104, 0.45);
}

/* ── Block D: Synth-Lane transport buttons (cobalt-dark → charcoal)
   Used in Synth + Modulation + Effects modes.  Original uses neon
   cobalt-dark backgrounds; switch to sand charcoal button face.   */
/* SD.13 — revised to cream gradient to match 9zero9 vocab */
html[data-theme="sand"] .synth-lane-play,
html[data-theme="sand"] .synth-lane-export-btn,
html[data-theme="sand"] .synth-lane-toggle {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="sand"] .synth-lane-play:hover,
html[data-theme="sand"] .synth-lane-export-btn:hover,
html[data-theme="sand"] .synth-lane-toggle:hover {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

html[data-theme="sand"] .synth-lane-toggle.is-on,
html[data-theme="sand"] .synth-lane-toggle.is-armed,
html[data-theme="sand"] .synth-lane-rec.is-armed {
  background: var(--sand-accent-red);
  color: var(--sand-cream);
  border-color: var(--sand-accent-red);
}

html[data-theme="sand"] .synth-lane-metro.is-on {
  background: var(--sand-accent-amber);
  color: var(--sand-ink-primary);
  border-color: var(--sand-accent-amber);
}

/* ── Block E: Studio Mixer fader runway — drop neon-lime stops ── */
html[data-theme="sand"] .studio-mixer-fader-deck {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 46%,
    rgba(164, 142, 104, 0.45) 47%,
    rgba(164, 142, 104, 0.45) 53%,
    rgba(0, 0, 0, 0) 54%);
}

/* ── Block F: Synth-Bay slots + subactions (dark cobalt → charcoal)
   The Synth Instruments Bay shows a grid of patch slots
   (I01..I08 + DRUM..) on dark cobalt-blue surfaces — the SYNTHF
   "black-bars" block.  Map them all to sand charcoal so they read
   as buttons-on-cream-deck (909 hardware vocabulary).             */
/* SD.13 — REVERSED: synth-bay buttons MUST be cream, not charcoal.
   The 9zero9 reference deck (drum-slot-tab, drum-pad, matrix-mute
   etc.) ALL use cream gradient face + dark ink text.  My SD.4
   charcoal interpretation was backwards.  Match 9zero9 vocab:
   cream face + dark ink, with orange accent for active state.    */
html[data-theme="sand"] .synth-bay-slot {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="sand"] .synth-bay-slot:hover {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

html[data-theme="sand"] .synth-bay-slot.is-drum-disabled,
html[data-theme="sand"] .synth-bay-slot:disabled {
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-cream-shadow) 100%);
  color: var(--sand-ink-muted);
  opacity: 0.65;
}

html[data-theme="sand"] .synth-bay-slot.is-selected {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sand-accent-orange) 78%, var(--sand-cream) 22%) 0%,
    color-mix(in srgb, var(--sand-accent-red) 60%, var(--sand-ink-bright) 40%) 100%);
  border-color: color-mix(in srgb, var(--sand-accent-red) 65%, var(--sand-ink-bright) 35%);
  color: var(--sand-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

html[data-theme="sand"] .synth-bay-slot--live.is-selected {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sand-accent-amber) 78%, var(--sand-cream) 22%) 0%,
    color-mix(in srgb, var(--sand-accent-orange) 60%, var(--sand-ink-bright) 40%) 100%);
  border-color: color-mix(in srgb, var(--sand-accent-orange) 65%, var(--sand-ink-bright) 35%);
  color: var(--sand-cream);
}

html[data-theme="sand"] .synth-bay-subaction {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="sand"] .synth-bay-subaction:hover {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

html[data-theme="sand"] .synth-bay-subaction.is-drum-disabled,
html[data-theme="sand"] .synth-bay-subaction:disabled {
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-cream-shadow) 100%);
  color: var(--sand-ink-muted);
  opacity: 0.65;
}

/* ── Block G: Synth-Bay DICE section + history ───────────────────
   Card surface remains cream-deep.  Action buttons are cream too.  */
html[data-theme="sand"] .synth-bay-dice-section {
  background: var(--sand-cream-deep);
  border-color: var(--sand-panel-edge);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .synth-bay-undo,
html[data-theme="sand"] .synth-bay-redo {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="sand"] .synth-bay-undo:hover,
html[data-theme="sand"] .synth-bay-undo:hover:not(:disabled),
html[data-theme="sand"] .synth-bay-redo:hover,
html[data-theme="sand"] .synth-bay-redo:hover:not(:disabled) {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

html[data-theme="sand"] .synth-bay-undo.is-disabled,
html[data-theme="sand"] .synth-bay-redo.is-disabled,
html[data-theme="sand"] .synth-bay-undo:disabled,
html[data-theme="sand"] .synth-bay-redo:disabled {
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-cream-shadow) 100%);
  color: var(--sand-ink-muted);
  opacity: 0.6;
}

html[data-theme="sand"] .synth-bay-dice-history-btn {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="sand"] .synth-bay-dice-history-btn:hover,
html[data-theme="sand"] .synth-bay-dice-history-btn:hover:not(:disabled) {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

html[data-theme="sand"] .synth-bay-dice-history-btn:disabled {
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-cream-shadow) 100%);
  color: var(--sand-ink-muted);
  opacity: 0.6;
}

/* ── Block H: Synth-Lane step cells (cobalt-dark → sand charcoal) ─
   Each step is a tall, narrow cell.  Base bg was neon cobalt-dark
   rgba(20,28,44,0.6) with icy cyan-white text + cool cyan border.
   Re-skin as charcoal cells with cream text and amber accent for
   active/playhead.                                               */
html[data-theme="sand"] .synth-lane-step {
  background: rgba(50, 48, 48, 0.85);            /* sand button face */
  border-color: rgba(138, 122, 82, 0.55);        /* sand panel edge */
  color: var(--sand-cream);
}

html[data-theme="sand"] .synth-lane-step:hover {
  background: rgba(74, 64, 64, 0.92);
}

html[data-theme="sand"] .synth-lane-step[data-on="1"] {
  background: var(--sand-accent-orange);
  border-color: var(--sand-accent-amber);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .synth-lane-step[data-playhead="1"] {
  border-color: var(--sand-accent-amber);
  box-shadow:
    inset 0 0 0 1px var(--sand-accent-amber),
    0 0 6px rgba(245, 152, 24, 0.55);
}

/* SL-TIE — held-note continuation cells match the Sand on-fill (orange). */
html[data-theme="sand"] .synth-lane-step[data-tie="1"],
html[data-theme="sand"] .synth-lane-step[data-tie="1"]::before {
  background: var(--sand-accent-orange);
}
html[data-theme="sand"] .synth-lane-step[data-tie="1"] {
  border-color: var(--sand-accent-amber);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .synth-lane-step[data-active-step="0"] {
  opacity: 0.55;
}

html[data-theme="sand"] .synth-lane-step-note,
html[data-theme="sand"] .synth-lane-step-num {
  color: inherit;
  text-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   SD.6 — Property-allowlist fixes (2026-05-20)
   ════════════════════════════════════════════════════════════════════
   Each rule below addresses one specific finding from
   benchmarks/sand/deep-lint-YYYY-MM-DD.md.  These are values that
   slipped past SD.2.d's radius+bg gate by hiding in foreground colors,
   border colors, gradient stops or box-shadow stops.
   ════════════════════════════════════════════════════════════════════ */

/* ── Block I: body + html fallback color (was rgb(0,0,0) from UA) ── */
html[data-theme="sand"],
html[data-theme="sand"] body {
  color: var(--sand-ink-primary);
}

/* tracker-core-base.css uses #071011 (near-black) for cursor-field
   active text.  Map to charter ink-bright.                          */
html[data-theme="sand"] .tracker-channel-cell.cursor .tracker-cell-field.cursor-field,
html[data-theme="sand"] .tracker-channel-cell.selected.cursor .tracker-cell-field.cursor-field {
  color: var(--sand-ink-bright);
}

/* tracker-order-item active-state span: classic uses #050706 on bright
   yellow; sand picks ink-bright on amber.                            */
html[data-theme="sand"] .tracker-order-item.active span,
html[data-theme="sand"] .tracker-pattern-bank-item.active span {
  color: var(--sand-ink-bright);
}

/* ── Block J: powerBtn (near-white #fff8f0 → cream) ─────────────── */
html[data-theme="sand"] #powerBtn {
  color: var(--sand-cream);
}

/* ── Block K: tracker cursor-guide cyan border → orange ────────── */
html[data-theme="sand"] #trackerCursorGuide {
  border-color: var(--sand-accent-orange);
}

/* ── Block L: tracker-cell-field grays + effect amber ───────────── */
html[data-theme="sand"] input.tracker-cell-field {
  border-color: var(--sand-panel-edge);
}

html[data-theme="sand"] .tracker-cell-effect-param {
  color: var(--sand-led-hat);   /* warm gold #edc020, closest to original #ffbd6a */
}

/* ── Block M: studio-mixer knob face — replace dark-grey gradient ── */
html[data-theme="sand"] .studio-mixer-knob-face {
  background:
    radial-gradient(circle at 50% 54%,
      color-mix(in srgb, var(--knob-color) 16%, var(--sand-button-face-off) 84%) 0 42%,
      var(--sand-button-face-off) 43% 60%,
      var(--sand-button-face-shade) 61% 100%);
  border-color: color-mix(in srgb, var(--knob-color) 64%, var(--sand-button-face-shade) 36%);
}

/* ── Block N: studio-mixer fader cap — drop coral+off-white ────── */
html[data-theme="sand"] .studio-mixer-fader-cap {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  border-color: var(--sand-panel-edge);
}

html[data-theme="sand"] .studio-mixer-fader-cap.is-armed,
html[data-theme="sand"] .studio-mixer-fader-cap[data-active="true"] {
  background: linear-gradient(180deg,
    var(--sand-accent-red) 0%,
    color-mix(in srgb, var(--sand-accent-red) 60%, var(--sand-ink-primary)) 100%);
  border-color: var(--sand-accent-red);
}

/* ── Block O: signal-flow ports — warm-brown gradient → ink charter ── */
html[data-theme="sand"] .signal-flow-port,
html[data-theme="sand"] .signal-flow-port-in,
html[data-theme="sand"] .signal-flow-port-out {
  background: radial-gradient(circle,
    var(--sand-ink-muted) 0%,
    var(--sand-ink-primary) 100%);
  border-color: var(--sand-panel-edge);
}

/* ── Block P: fx-arming-panel buttons (pink-white / near-black)
   Source uses .ghost-button.fx-arming-panel-* (b=2,c=0).  Bump
   specificity with explicit button tag to win cleanly.            */
html[data-theme="sand"] button.fx-arming-panel-disarm,
html[data-theme="sand"] button.ghost-button.fx-arming-panel-disarm {
  color: var(--sand-cream);
}

html[data-theme="sand"] button.fx-arming-panel-arm,
html[data-theme="sand"] button.ghost-button.fx-arming-panel-arm {
  color: var(--sand-ink-bright);
}

/* ── Block Q: performance XY cursor — black shadow → orange halo ── */
html[data-theme="sand"] #performanceXyCursor {
  box-shadow:
    0 0 8px var(--sand-accent-orange),
    0 0 2px var(--sand-accent-amber);
}

/* ════════════════════════════════════════════════════════════════════
   SD.7 — State-rule coverage (2026-05-20)
   ════════════════════════════════════════════════════════════════════
   Source CSS files (synth-controls / app-shell / arrangement etc.)
   declare :hover / :active / :focus / .is-* rules with hard-coded
   non-sand colors.  The state-rule lint (SD.7 spec) found 32 such
   violations.  Each override below masks one of those rules with a
   sand-charter equivalent so hovered / armed / pressed UI no longer
   flashes neon under Sand.
   ════════════════════════════════════════════════════════════════════ */

/* ── Block R: app-shell active-state fg (near-black → ink-bright) ── */
html[data-theme="sand"] .mode-tab.active,
html[data-theme="sand"] .ghost-button.active,
html[data-theme="sand"] .icon-button.active,
html[data-theme="sand"] .instrument-mixer-panel .ghost-button.active,
html[data-theme="sand"] .audition-button:active,
html[data-theme="sand"] .audition-button:focus-visible,
html[data-theme="sand"] .hold-note-button.active,
html[data-theme="sand"] .hold-note-button:active,
html[data-theme="sand"] .hold-note-button:focus-visible,
html[data-theme="sand"] .hold-note-button.active:active,
html[data-theme="sand"] .hold-note-button.active:focus-visible {
  color: var(--sand-ink-bright);
}

/* ── Block S: synth-bay hover/selected variants — cream (SD.13 revised)
   Inverted from charcoal to cream-gradient to match 9zero9 vocab.    */
html[data-theme="sand"] .synth-bay-slot--live:hover,
html[data-theme="sand"] .synth-bay-subaction--from-inst:hover,
html[data-theme="sand"] .synth-bay-slot-dice:hover:not(:disabled),
html[data-theme="sand"] .synth-bay-slot-wrap--live .synth-bay-slot-dice:hover,
html[data-theme="sand"] .synth-bay-dice-roll-btn:hover {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
  color: var(--sand-ink-primary);
}

html[data-theme="sand"] .synth-bay-slot.is-drum-disabled:hover,
html[data-theme="sand"] .synth-bay-subaction.is-drum-disabled:hover {
  background: linear-gradient(180deg,
    var(--sand-cream-deep) 0%,
    var(--sand-cream-shadow) 100%);
  color: var(--sand-ink-muted);
  opacity: 0.55;
}

/* ── Block T: arrangement + piano-roll capture btn hover icy/coral ── */
html[data-theme="sand"] .arrangement-btn:hover {
  color: var(--sand-cream);
  background: var(--sand-button-face-hot);
}

html[data-theme="sand"] .arrangement-btn--capture:hover,
html[data-theme="sand"] .piano-roll-capture-btn:hover {
  color: var(--sand-cream);
  background: var(--sand-accent-red);
}

/* ── Block U: range-knob pointer hover white → sand-cream ──────── */
html[data-theme="sand"] .range-knob:hover .range-knob-pointer::before,
html[data-theme="sand"] .range-knob:focus-visible .range-knob-pointer::before,
html[data-theme="sand"] .range-knob.is-dragging .range-knob-pointer::before {
  background: var(--sand-cream);
}

/* ── Block V: synth-lane help-btn hover (off-palette #ffc045 → amber) ── */
html[data-theme="sand"] .synth-lane-help-btn:hover,
html[data-theme="sand"] .synth-lane-help-btn[aria-expanded="true"] {
  background: var(--sand-accent-amber);
  color: var(--sand-ink-primary);
}

/* ── Block W: theme-editor inspect.active (coral #ff5a5a → sand-red) ── */
html[data-theme="sand"] .theme-editor-inspect.active {
  background: var(--sand-accent-red);
  color: var(--sand-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 12px color-mix(in srgb, var(--sand-accent-red) 55%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   SD.8 — Visible Sand polish (screenshot tour 2026-05-20)
   ════════════════════════════════════════════════════════════════════
   Items individually palette-conforming but visually off-vocabulary
   when seen in context.  Each fix maps the offending neon-vocab
   role to its 9zero9 hardware-vocab equivalent.
   ════════════════════════════════════════════════════════════════════ */

/* ── Block X: NEON-logo "tracker" gradient (pink/amber → orange/red) ─ */
html[data-theme="sand"] .neon-logo-sub {
  color: var(--sand-accent-orange);
  text-shadow:
    0 0 1px color-mix(in srgb, var(--sand-ink-primary) 40%, transparent),
    0 0 4px color-mix(in srgb, var(--sand-accent-orange) 36%, transparent),
    0 0 8px color-mix(in srgb, var(--sand-accent-orange) 30%, transparent),
    0 0 14px color-mix(in srgb, var(--sand-accent-red) 22%, transparent),
    0 0 6px color-mix(in srgb, var(--sand-accent-amber) 28%, transparent);
}

html[data-theme="sand"] .neon-logo-main {
  color: var(--sand-ink-primary);
  text-shadow:
    0 0 1px color-mix(in srgb, var(--sand-ink-primary) 60%, transparent),
    0 0 4px color-mix(in srgb, var(--sand-accent-orange) 12%, transparent);
}

/* ── Block Y: tracker pattern-bank.active — lime → sand olive/amber ── */
html[data-theme="sand"] .tracker-pattern-bank-item.active {
  border-color: rgba(74, 112, 48, 0.72);          /* sand-accent-olive */
  background: rgba(74, 112, 48, 0.14);
  box-shadow: inset 0 -2px 0 var(--sand-accent-olive);
}

html[data-theme="sand"] .tracker-pattern-bank-item.active strong {
  color: var(--sand-ink-bright);
}

html[data-theme="sand"] .tracker-pattern-bank-item.active span {
  color: var(--sand-cream);
  background: var(--sand-accent-olive);
}

html[data-theme="sand"] .tracker-pattern-bank-item.orphan span {
  color: var(--sand-accent-red);
}

/* ── Block Z: tracker order.active inner span (cobalt-dark → amber) ── */
html[data-theme="sand"] .tracker-order-item.active {
  border-color: rgba(245, 152, 24, 0.72);         /* sand-accent-amber */
  background: rgba(245, 152, 24, 0.14);
  box-shadow: inset 0 -2px 0 var(--sand-accent-amber);
}

html[data-theme="sand"] .tracker-order-item.active span {
  color: var(--sand-ink-bright);
  background: var(--sand-accent-amber);
}

html[data-theme="sand"] .tracker-order-item.active strong {
  color: var(--sand-ink-primary);
}

/* ── Block AA: tracker-order-list scrollbar color (cyan → sand-edge) ─
   tracker-panels-strip-meta.css:215 uses cyan-tinted thumb. */
html[data-theme="sand"] .tracker-order-list,
html[data-theme="sand"] .tracker-pattern-list {
  scrollbar-color: color-mix(in srgb, var(--sand-panel-edge) 70%, var(--sand-panel-deep) 30%) transparent;
}

/* ── Block AB: trackerModeValue (Compose label) cobalt → amber ─────
   Matches 9zero9 amber-on-tan vocabulary for active state labels.   */
html[data-theme="sand"] #trackerModeValue,
html[data-theme="sand"] .tracker-mode-value {
  color: var(--sand-accent-amber);
}

/* ── Block AC: arrangement canvas track colors (SD.10) ──────────────
   src/ui/arrangement-panel.js reads these via getComputedStyle on
   <html>.  Default values are neon-bright; map to Sand palette.   */
html[data-theme="sand"] {
  --arrangement-track-color-drums:  #d91c22;   /* sand-accent-red */
  --arrangement-track-color-lane-1: #1e3a68;   /* sand-accent-cobalt */
  --arrangement-track-color-lane-2: #28d8cc;   /* sand-led-tom (warm teal) */
  --arrangement-track-color-lane-3: #4a7030;   /* sand-accent-olive */
  --arrangement-track-color-lane-4: #edc020;   /* sand-led-hat (gold) */
}