/* ════════════════════════════════════════════════════════════════════
   SAND THEME — Blocks (TH.8, 2026-05-21)
   ════════════════════════════════════════════════════════════════════
   Continuation of src/styles/sand-theme.css.  Split out so the parent
   file stays below the 16k-token ERROR ceiling.  All rules below are
   the SD.11 "color(srgb) audit fix" remediation plus the follow-up
   Block AD–AQ surgical polish.

   Cascade: this file MUST load AFTER sand-theme.css so its overrides
   keep their original priority.  See shell/runtime-scripts.* +
   shell/head.html for the ordered <link> chain.

   Every rule here is scoped to html[data-theme="sand"] — the
   theme-isolation guard (scripts/check-theme-isolation.js) still
   demands that.  Splitting CSS across files doesn't change the
   isolation contract: Neon + Classic remain mathematically
   untouchable.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SD.11 — Dark-surface remediation (color(srgb) audit fix)
   ════════════════════════════════════════════════════════════════════
   The SD.2.d / SD.5.b lints used to allow color(srgb …) values
   unconditionally as "modern CSS form".  After tightening to a
   visually-dark heuristic (max channel < 64 = flag), 320 previously-
   hidden violations surfaced — all real dark surfaces leaking from
   the Neon base layer.  Each block below maps one of them.
   ════════════════════════════════════════════════════════════════════ */

/* ── Block AD: tracker cursor-row cells (SD.16 revised) ──────────────
   Original neon uses dark cyan for cursor row — extremely visible.
   My SD.11 cream-deep override was too subtle on cream rows → user
   couldn't see where the cursor sat.  Use a clear amber wash for the
   whole cursor row + saturated orange for the actual cursor cell.
   Saturated colours match the trackerlike feel ("cursor flashes
   across the deck"); soft sand row alone wasn't enough.            */
html[data-theme="sand"] .tracker-row.cursor-row input.tracker-cell-field,
html[data-theme="sand"] .tracker-channel-cell.cursor input.tracker-cell-field {
  background: rgba(245, 152, 24, 0.22);    /* sand-accent-amber wash */
  color: var(--sand-ink-bright);
  border-color: rgba(255, 100, 24, 0.55);  /* sand-accent-orange tint */
}

html[data-theme="sand"] .tracker-row.cursor-row .tracker-cell-field.cursor-field,
html[data-theme="sand"] .tracker-channel-cell.cursor .tracker-cell-field.cursor-field {
  background: var(--sand-accent-orange);
  color: var(--sand-cream);
  border-color: var(--sand-accent-red);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  font-weight: 700;
}

/* ── Block AE: tracker order ticker (playback position bar) ─────────
   #trackerOrderTicker shows the live "00:P00" pattern position.
   Source paints it with a dark cobalt bg (rgba(12, 16, 24, 0.97)).
   Sand vocab: tan panel-deep with ink text.                           */
html[data-theme="sand"] #trackerOrderTicker {
  background: var(--sand-panel-deep);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
}

html[data-theme="sand"] .tracker-order-ticker__seg {
  color: var(--sand-ink-muted);
}

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

/* ── Block AF: synth-bay-slot-dice (per-slot dice button) — cream
   SD.13 revised: cream gradient to match 9zero9 vocab.              */
html[data-theme="sand"] .synth-bay-slot-dice {
  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-dice:hover:not(:disabled),
html[data-theme="sand"] .synth-bay-slot-dice:focus-visible {
  background: linear-gradient(180deg,
    var(--sand-button-face-cream-hot) 0%,
    var(--sand-cream) 100%);
}

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

/* ── Block AG: studio-mixer EQ section (dark olive → cream)
   SD.13 revised: user wants the mixer to feel like a 9zero9 cream
   panel, not an industrial dark well.  Use cream-deep + panel-edge
   border for the inset EQ box.  Same pattern matches 9zero9
   .nz9-drum-fx-global which is cream not dark.                    */
html[data-theme="sand"] .studio-mixer-eq-section {
  background: var(--sand-cream-deep);
  border-color: var(--sand-panel-edge);
}

/* ── Block AG.1: studio-mixer-filter-row neon-lime border → tan ── */
html[data-theme="sand"] .studio-mixer-filter-row {
  border-top-color: rgba(138, 122, 82, 0.45);   /* sand-panel-edge */
}

/* ── Block AG.2: studio-mixer-title gradient (cream-to-dark → cream) ─
   Source uses linear-gradient(cream → dark) which in sand resolves
   to a strange cream→ink transition.  Use a flat cream-deep so the
   title row reads as a clear label band.                          */
html[data-theme="sand"] .studio-mixer-title {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
  color: var(--sand-ink-primary);
  border-color: var(--sand-panel-edge);
}

/* ── Block AG.3: studio-mixer knob-face — soften dark center ─────
   The knob center stays dark for the dial spindle look, but use
   sand button-face-off + ink-bright instead of srgb-derived mid-greys. */
html[data-theme="sand"] .studio-mixer-knob-face {
  background:
    radial-gradient(circle at 50% 54%,
      color-mix(in srgb, var(--knob-color) 22%, var(--sand-button-face-off) 78%) 0 40%,
      var(--sand-button-face-off) 41% 60%,
      var(--sand-ink-bright) 61% 100%);
  border-color: var(--sand-panel-edge);
}

/* ── Block AH: fx-arming-panel-arm green-dark bg → sand olive ───── */
html[data-theme="sand"] .fx-arming-panel-arm,
html[data-theme="sand"] button.ghost-button.fx-arming-panel-arm {
  background: var(--sand-accent-olive);
}

/* ── Block AI: help-icon (dark with low alpha) ─────────────────── */
html[data-theme="sand"] .help-icon {
  background: rgba(90, 72, 40, 0.45);   /* sand-ink-muted w/ 45% alpha */
  color: var(--sand-cream);
}

/* ── Block AJ: tracker active-channel cells (dark navy mix → cream) ─
   tracker-core-base.css:983 uses
     color-mix(in srgb, #11131a 90%, var(--cyan) 10%)
   which resolves to dark navy in Sand.  Active-channel = the column
   the cursor is currently editing.  Use warm cream + orange border.   */
html[data-theme="sand"] .tracker-channel-cell.active-channel:not(.cursor):not(.selected) input,
html[data-theme="sand"] .tracker-channel-cell.active-channel:not(.cursor):not(.selected) select {
  background-color: var(--sand-cream);
  border-color: rgba(255, 100, 24, 0.35);   /* sand-accent-orange tint */
}

/* ── Block AK: tracker channel-head active-channel (deck head row) ─
   .tracker-channel-head.active-channel uses cyan border + dark bg.  */
html[data-theme="sand"] .tracker-channel-head.active-channel {
  background-color: var(--sand-panel);
  border-color: var(--sand-accent-orange);
}

html[data-theme="sand"] .tracker-channel-head.active-channel .tracker-channel-name {
  color: var(--sand-accent-orange);
}

/* ── Block AL: piano-roll + arrangement panel containers — cream
   SD.15 revised: user wants the whole Ableton-style surface to
   match 9zero9 vocab.  Container goes cream; the canvas itself
   reads its own colours from CSS vars (see SD.15 fix in
   src/ui/{arrangement,piano-roll}-panel.js).                       */
html[data-theme="sand"] #pianoRollHost,
html[data-theme="sand"] #arrangementHost {
  background: linear-gradient(180deg,
    var(--sand-cream) 0%,
    var(--sand-cream-deep) 100%);
}

/* ── Block AL.1 (SD.15): arrangement-canvas theme tokens ────────────
   JS reads these via getComputedStyle on <html>.  Replaces the dark
   navy session-view look with a 9zero9 cream-tan tape deck.         */
html[data-theme="sand"] {
  --arrangement-canvas-bg:           #c9ba8e;                       /* sand-panel */
  --arrangement-canvas-gutter:       #b5a478;                       /* sand-panel-deep */
  --arrangement-canvas-header:       #d4c095;                       /* sand-cream-deep */
  --arrangement-canvas-grid-bar:     rgba(138, 122, 82, 0.65);      /* sand-panel-edge */
  --arrangement-canvas-grid-beat:    rgba(138, 122, 82, 0.30);
  --arrangement-canvas-grid-label:   #2a1a08;                       /* sand-ink-primary */
  --arrangement-canvas-lane-even:    rgba(237, 224, 188, 0.65);     /* sand-cream */
  --arrangement-canvas-lane-odd:     rgba(212, 192, 149, 0.65);     /* sand-cream-deep */
  --arrangement-canvas-lane-divider: rgba(138, 122, 82, 0.45);
  --arrangement-canvas-track-label:  #2a1a08;
  --arrangement-canvas-loop-fill:    rgba(255, 168, 40, 0.18);      /* sand-led-perc */
  --arrangement-canvas-loop-stroke:  rgba(255, 168, 40, 0.65);
  --arrangement-canvas-loop-marker:  #f59818;                       /* sand-accent-amber */
  --arrangement-canvas-clip-label:   rgba(42, 26, 8, 0.85);         /* sand-ink-primary */
  --arrangement-canvas-playhead:     #d91c22;                       /* sand-accent-red */
  --arrangement-canvas-selection:    #ff6418;                       /* sand-accent-orange */
}

/* ── Block AL.2 (SD.15): piano-roll-canvas theme tokens ───────────── */
html[data-theme="sand"] {
  --piano-roll-row-black:       rgba(138, 122, 82, 0.45);           /* sand-panel-edge */
  --piano-roll-row-white:       rgba(212, 192, 149, 0.45);          /* sand-cream-deep */
  --piano-roll-grid-bar:        rgba(138, 122, 82, 0.55);
  --piano-roll-grid-beat:       rgba(138, 122, 82, 0.25);
  --piano-roll-grid-sub:        rgba(138, 122, 82, 0.12);
  --piano-roll-c-row-marker:    rgba(255, 100, 24, 0.30);           /* sand-accent-orange */
  --piano-roll-kb-gutter:       #b5a478;                            /* sand-panel-deep */
  --piano-roll-kb-black-key:    #5a4828;                            /* sand-ink-muted */
  --piano-roll-kb-white-key:    #ede0bc;                            /* sand-cream */
  --piano-roll-kb-label:        #2a1a08;                            /* sand-ink-primary */
  --piano-roll-note-fill:       245, 152, 24;                       /* sand-accent-amber RGB */
  --piano-roll-note-sel-fill:   217, 28, 34;                        /* sand-accent-red RGB */
  --piano-roll-note-stroke:     #f59818;
  --piano-roll-note-sel-stroke: #d91c22;
  --piano-roll-vel-lane-bg:     rgba(181, 164, 120, 0.85);          /* sand-panel-deep */
  --piano-roll-vel-label:       rgba(42, 26, 8, 0.75);
}

/* ── Block AM: synth-lane play hover (coral-pink → sand-red) ───── */
html[data-theme="sand"] .synth-lane-play[data-playing="1"]:hover {
  background: var(--sand-accent-red);
  background-color: var(--sand-accent-red);
}

/* ── Block AN: synth-lane quantize/steps/resolution select hover ─
   Source hover border is icy cyan rgba(180,220,240,0.7).             */
html[data-theme="sand"] .synth-lane-quantize select:hover,
html[data-theme="sand"] .synth-lane-steps-select select:hover,
html[data-theme="sand"] .synth-lane-resolution-select select:hover {
  border-color: var(--sand-accent-orange);
}

/* ── Block AO: mode-tab.active inset bezel shadow ───────────────
   My own SD.4 override uses rgba(255, 248, 224, 0.55) which is
   off-palette (near-white).  Use charter cream-with-alpha.         */
html[data-theme="sand"] .mode-tab.active {
  box-shadow:
    inset 1px 1px 0 rgba(237, 224, 188, 0.55),
    inset -1px -1px 0 rgba(60, 30, 8, 0.30),
    0 0 0 1px var(--sand-panel-edge);
}

/* ── Block AP: .module border consolidate (Theme Editor finding) ───
   synth-controls.css:.module borders use
     color-mix(in srgb, var(--accent) 32%, var(--line))
   In Sand that resolves to rgb(193, 178, 140) — close to but not
   in palette.  Hard-set borders to sand-panel-edge for visual
   consistency across all .module / .article panels.                */
html[data-theme="sand"] .module,
html[data-theme="sand"] article.module,
html[data-theme="sand"] article.module.module-wide,
html[data-theme="sand"] .module:hover {
  border-color: var(--sand-panel-edge);
}

/* ── Block AQ: arrangement + piano-roll panel borders cyan→sand ──
   arrangement.css:10 + piano-roll.css:11 both declare
     border: 1px solid rgba(100, 200, 220, 0.25)
   Hardcoded neon-cyan.  Replace with sand-panel-edge.              */
html[data-theme="sand"] #arrangementHost,
html[data-theme="sand"] #pianoRollHost,
html[data-theme="sand"] .arrangement-panel,
html[data-theme="sand"] .piano-roll-panel {
  border-color: var(--sand-panel-edge);
}