/* app-chrome.css — the app's own controls, plates and lane cards.
   Tokens only. Loaded by base.html after tailwind.css.

   THE CONTROLS LAYER
   Every control rule below is written as `main :where(...)`: the `main`
   gives it exactly the weight of the preflight it has to beat, and the
   :where() keeps the rest at zero. So a page that styled its own control
   with a class keeps it, and a page that left the browser's default -
   the white textarea, the "Choose File / No file chosen" strip, the
   stock checkbox - gets the system's instead. Ninety pages change at
   once; none of the ones that were already right change at all. */

main :where(input:not([type]), input[type="text"], input[type="email"],
            input[type="url"], input[type="number"], input[type="search"],
            input[type="tel"], input[type="password"], input[type="date"],
            input[type="time"], input[type="datetime-local"], textarea, select) {
  font-family: var(--sb-text);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--sb-ink);
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  padding: 10px 12px;
  max-width: 100%;
  color-scheme: dark;
}
main :where(textarea) { min-height: 96px; resize: vertical; }
main :where(input, textarea)::placeholder { color: var(--sb-ink-3); opacity: 1; }
main :where(input, textarea, select):hover { border-color: var(--sb-gold-deep); }

main :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--sb-gold);
  width: 16px;
  height: 16px;
  color-scheme: dark;
  flex: none;
}

main :where(input[type="file"]) {
  font-family: var(--sb-text);
  font-size: 13px;
  color: var(--sb-ink-2);
  max-width: 100%;
}
main :where(input[type="file"])::file-selector-button {
  font-family: var(--sb-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-ink);
  background: var(--sb-surface-3);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  padding: 8px 12px;
  margin-right: 12px;
  cursor: pointer;
}
main :where(input[type="file"])::file-selector-button:hover {
  border-color: var(--sb-gold);
  color: var(--sb-gold-bright);
}

/* THE PLATE
   A photograph under the page's name - the treatment the public pages
   and the door already wear, sized for a desk: one band, the picture
   veiled toward the ground so the name reads, nothing else on it. */
.sb-plate {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  min-height: 176px;
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-panel);
  background: var(--sb-surface-1);
}
.sb-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75;
}
.sb-plate-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(11 10 8 / .9) 0%, rgb(11 10 8 / .45) 48%, rgb(11 10 8 / .1) 100%),
    linear-gradient(0deg, rgb(11 10 8 / .85) 0%, rgb(11 10 8 / 0) 60%);
}
.sb-plate-inner {
  position: relative;
  padding: 30px 28px 22px;
  max-width: 760px;
  flex: 1 1 420px;
}
.sb-plate-eyebrow {
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sb-gold);
}
.sb-plate-title {
  margin-top: 6px;
  font-family: var(--sb-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--sb-ink);
  text-wrap: balance;
}
.sb-plate-support {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sb-ink-2);
}
.sb-plate-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 28px 22px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .sb-plate { min-height: 140px; }
  .sb-plate-inner { padding: 20px 16px 16px; }
  .sb-plate-title { font-size: 26px; }
  .sb-plate-actions { padding: 0 16px 16px; }
}

/* LANE CARDS (Audio Studio)
   One card per lane: name, lamp, one line. The form is behind Start,
   so the page reads as six products, not six forms. */
.asx { display: grid; gap: 20px; max-width: 1100px; margin: 0 auto; }
.asx-lanes {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.asx-lane { display: flex; flex-direction: column; padding: 18px 18px 16px; }
.asx-lane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asx-lane-title {
  font-family: var(--sb-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--sb-ink);
}
.asx-lane-note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--sb-ink-2); }
.asx-lane-flag { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--sb-ink-3); }
.asx-lane-flag code { font-family: var(--sb-mono); font-size: 12px; color: var(--sb-ink-2); }
.asx-lane-flag strong { color: var(--sb-ink); font-weight: 600; }
.asx-spacer { flex: 1; }

details.asx-open { margin-top: 14px; }
details.asx-open > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
}
details.asx-open > summary::-webkit-details-marker { display: none; }
details.asx-open .asx-when-open { display: none; }
details.asx-open[open] .asx-when-open { display: inline; }
details.asx-open[open] .asx-when-closed { display: none; }

.asx-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sb-line);
}
.asx-field { display: grid; gap: 6px; }
.asx-field > span {
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}
.asx-choices { display: grid; gap: 8px; }
.asx-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
.asx-choice input { margin-top: 2px; }
.asx-hint { font-size: 13px; line-height: 1.45; color: var(--sb-ink-3); }

.asx-foot { padding: 16px 18px; }
.asx-foot p { font-size: 13.5px; line-height: 1.55; color: var(--sb-ink-3); max-width: 70ch; }
.asx-foot p + p { margin-top: 8px; }
.asx-work { padding: 18px; }
.asx-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.asx-work-sub { font-size: 12px; color: var(--sb-ink-3); }

/* DRAWN ICONS AND THE LIT DISC
   The sprite (templates/partials/sb_icons.html) is included once by
   base.html; an instance is <svg class="sb-i"><use href="#sb-i-name"/></svg>.
   The instance carries the stroke rules, so a symbol only states geometry.
   The disc is the same lit object the Remix Lab draws under every lane
   and step: a ring of gold line, a radial gold glow, a soft shadow — the
   light is radial gradients and box-shadow, never filter blur. Colour is
   the token's own triplet (232 185 80 is --sb-gold-bright) so the glow
   can carry an alpha without a second gold. */
.sb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sb-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-disc {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--sb-gold-line);
  background:
    radial-gradient(circle at 50% 42%, rgb(232 185 80 / .32), rgb(232 185 80 / .09) 48%, rgb(232 185 80 / 0) 72%),
    var(--sb-surface-3);
  box-shadow: var(--sb-e1), 0 10px 24px -14px rgb(232 185 80 / .5);
  color: var(--sb-gold);
}
.sb-disc .sb-i { width: 22px; height: 22px; stroke-width: 1.6; }
.sb-disc--sm { width: 32px; height: 32px; }
.sb-disc--sm .sb-i { width: 16px; height: 16px; stroke-width: 1.5; }
.sb-disc--lg { width: 56px; height: 56px; }
.sb-disc--lg .sb-i { width: 28px; height: 28px; stroke-width: 1.75; }
/* A disc on a thing that is off: the same object, the lamp down. */
.sb-disc--off {
  border-color: var(--sb-line-strong);
  background: var(--sb-surface-2);
  box-shadow: var(--sb-e1);
  color: var(--sb-ink-3);
}

/* THE AUDIO STUDIO BODY — photograph and light, the Remix Lab way.
   The plate stays exactly as every internal page opens; the richness is
   below it. Each lane is a backlit tile with its symbol on a lit disc;
   the tile turns gold when its form is open. The two panels under the
   lanes carry real rows or an honest empty state, never a sample. */
.asx-lane {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 18px 18px 16px;
  transition: border-color var(--sb-fast), background-color var(--sb-fast), box-shadow var(--sb-slow);
}
.asx-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, rgb(232 185 80 / .16), rgb(232 185 80 / 0) 62%);
  opacity: .42;
  pointer-events: none;
  transition: opacity var(--sb-slow);
}
.asx-lane:hover { border-color: var(--sb-gold-deep); }
.asx-lane:hover::before { opacity: .75; }
.asx-lane--off::before { opacity: .18; }
.asx-lane--off:hover::before { opacity: .3; }
.asx-lane--off .asx-lane-ico { opacity: .7; }
/* the lane whose form is open is the lit one */
.asx-lane:has(details[open]) {
  border-color: var(--sb-gold);
  background: linear-gradient(180deg, var(--sb-gold-wash), rgb(232 185 80 / 0) 70%), var(--sb-surface-1);
  box-shadow: var(--sb-e2), 0 0 0 1px var(--sb-gold-line), 0 0 28px -10px rgb(232 185 80 / .45);
}
.asx-lane:has(details[open])::before { opacity: 1; }
.asx-lane:has(details[open]) .asx-lane-ico {
  border-color: var(--sb-gold);
  color: var(--sb-gold-bright);
  box-shadow: 0 0 0 1px var(--sb-gold-line), 0 0 22px rgb(232 185 80 / .45);
}
/* the head: the disc at the left, the name and its lamp stacked beside it,
   so a long name never fights the badge for the same line */
.asx-lane-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico title" "ico badge";
  align-items: center;
  column-gap: 14px;
  row-gap: 5px;
}
.asx-lane-ico { grid-area: ico; align-self: center; transition: border-color var(--sb-fast), color var(--sb-fast), box-shadow var(--sb-slow), opacity var(--sb-fast); }
.asx-lane-ico .sb-i { width: 24px; height: 24px; }
.asx-lane-title { grid-area: title; min-width: 0; align-self: end; }
.asx-lane-head .sb-badge { grid-area: badge; justify-self: start; align-self: start; }
.asx-lane-note { margin-top: 14px; }

/* the two panels under the lanes */
.asx-side {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
.asx-panel { padding: 18px 18px 16px; }
.asx-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.asx-panel-head .sb-label { display: block; }
.asx-panel-head .asx-work-sub { margin-left: auto; white-space: nowrap; }
.asx-panel-head + p { max-width: 70ch; }

.asx-rows { list-style: none; margin: 0; padding: 0; }
.asx-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ico main status" "ico main time";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--sb-line);
}
.asx-row:first-child { border-top: 0; padding-top: 0; }
.asx-row-ico { grid-area: ico; }
.asx-row-main { grid-area: main; min-width: 0; display: grid; gap: 2px; }
.asx-row-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sb-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.asx-row-title:hover { color: var(--sb-gold-bright); text-decoration: underline; }
.asx-row-title:focus-visible { outline: none; box-shadow: var(--sb-focus); border-radius: var(--sb-r-control); }
.asx-row-sub { font-size: 12.5px; line-height: 1.4; color: var(--sb-ink-3); }
.asx-row .sb-badge { grid-area: status; justify-self: end; }
.asx-row-time {
  grid-area: time;
  justify-self: end;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink-3);
  white-space: nowrap;
}
.asx-more { margin-top: 10px; font-size: 12.5px; color: var(--sb-ink-3); }

.asx-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 4px;
}
.asx-empty p { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--sb-ink-3); }
.asx-empty strong { color: var(--sb-ink); font-weight: 600; }

/* what runs here: one row per component, the state as a lamp */
.asx-runs { list-style: none; margin: 0; padding: 0; }
.asx-run {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--sb-line);
}
.asx-run:first-child { border-top: 0; padding-top: 0; }
.asx-run-ico { margin-top: 1px; }
.asx-run-text { min-width: 0; }
.asx-run-head { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--sb-ink); }
.asx-run-detail { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--sb-ink-3); max-width: 52ch; }
.asx-run-lamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-family: var(--sb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  white-space: nowrap;
}
.asx-run-lamp::before {
  content: "";
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  flex: none;
}
.asx-run[data-on="true"] .asx-run-lamp { color: var(--sb-good); }
.asx-run[data-on="true"] .asx-run-lamp::before { background: currentColor; box-shadow: 0 0 8px rgb(121 180 115 / .6); }

.asx-foot-head { margin-bottom: 10px; }

@media (max-width: 899px) {
  .asx-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .asx-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico main" "ico status" "ico time"; }
  .asx-row .sb-badge, .asx-row-time { justify-self: start; }
  .asx-run { grid-template-columns: auto minmax(0, 1fr); }
  .asx-run-lamp { grid-column: 2; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .asx-lane, .asx-lane::before, .asx-lane-ico { transition: none; }
}

/* ==========================================================================
   INSTRUMENTS - the shared control set.
   ==========================================================================

   An audit of this codebase found 39 hardware-style components across eight
   stylesheets, and NOT ONE of them in shared chrome. The same thing was drawn
   over and over: five progress-bar dialects (.rk-seg, .rk-lvl, .hmeter,
   .sbrc-track, plus inline width percentages), four lamp dialects (.lamp,
   .lx-chip, .sr-state, .sbeq-lamp), three segmented controls (.rk-segsw,
   .lx-seg, .sbrl-seg) and three faders.

   These are those components, promoted once. Nothing here is new: every one
   is lifted from a working implementation, with the source named so the
   original can be retired against it rather than left to drift.

   THE RULE THAT GOVERNS ALL OF THEM. An instrument shows a value. If the
   value is not real - not measured, not stored, not changing - it does not
   get an instrument. A meter fed by a constant and a switch that switches
   nothing are the fabrication this product refuses everywhere else, and
   putting them in shared chrome would only make the lie reusable. Where
   there is no value, say so in words.
   -------------------------------------------------------------------------- */

/* --- segment meter --------------------------------------------------------
 * From rack.css .rk-seg. An inset well, a fill sized by --sb-meter-fill, and
 * a mask that cuts the fill into LEDs so it reads as a ladder rather than a
 * progress bar - discrete, like a meter on a desk. */

.sb-meter {
  display: block;
  position: relative;
  height: 10px;
  border-radius: var(--sb-r-pill);
  background: var(--sb-surface-3);
  border: 1px solid var(--sb-line);
  overflow: hidden;
}

.sb-meter-fill {
  display: block;   /* a span: inline, its width is ignored and the fill vanishes */
  height: 100%;
  width: var(--sb-meter-fill, 0%);
  background: var(--sb-gold);
  transition: width var(--sb-slow) var(--sb-ease);
}

.sb-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right, transparent 0 5px, var(--sb-ground) 5px 8px);
  pointer-events: none;
}

.sb-meter--good .sb-meter-fill { background: var(--sb-good); }
.sb-meter--warn .sb-meter-fill { background: var(--sb-warn); }
.sb-meter--crit .sb-meter-fill { background: var(--sb-crit); }
.sb-meter--sm { height: 6px; }

/* A meter with nothing behind it is not drawn empty - an empty ladder reads
 * as zero, and "not measured" is not zero. */
.sb-meter--none { border-style: dashed; }
.sb-meter--none .sb-meter-fill { display: none; }

.sb-meter-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: var(--sb-s3);
}

.sb-meter-val {
  font-family: var(--sb-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--sb-ink-2);
  text-align: right;
}

/* --- LCD readout ----------------------------------------------------------
 * From rack.css .rk-lcd. A recessed window for ONE number that matters, with
 * an engraved caption under it. */

.sb-lcd {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sb-s2) var(--sb-s4);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  background: var(--sb-surface-3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .5);
}

.sb-lcd-v {
  font-family: var(--sb-mono);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--sb-gold);
  text-shadow: 0 0 10px rgb(201 162 74 / .35);
}

.sb-lcd-cap {
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}

.sb-lcd--none .sb-lcd-v { color: var(--sb-ink-3); text-shadow: none; }

/* --- lamp -----------------------------------------------------------------
 * Consolidates .lamp / .lx-chip / .sr-state / .sbeq-lamp. A word with a dot,
 * because a dot alone makes colour the only carrier of meaning. */

.sb-lamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sb-s2);
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
}

.sb-lamp::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.sb-lamp--on { color: var(--sb-good); }
.sb-lamp--on::before { box-shadow: 0 0 8px currentColor; }
.sb-lamp--warn { color: var(--sb-warn); }
.sb-lamp--crit { color: var(--sb-crit); }
.sb-lamp--info { color: var(--sb-info); }

/* --- switch ---------------------------------------------------------------
 * From rack.css .sw plus the OFF/ON legend of .rk-cab-pwr. Skins a button
 * with aria-pressed, or a label wrapping a checkbox. */

.sb-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: var(--sb-s2) var(--sb-s3);
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  background: var(--sb-surface-3);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  cursor: pointer;
  transition: color var(--sb-fast) var(--sb-ease),
              border-color var(--sb-fast) var(--sb-ease);
}

.sb-switch[aria-pressed="true"],
.sb-switch:has(> input:checked) {
  color: var(--sb-gold);
  border-color: var(--sb-gold);
  background: var(--sb-gold-wash);
}

.sb-switch:focus-visible,
.sb-switch:has(> input:focus-visible) {
  outline: none;
  box-shadow: var(--sb-focus);
}

.sb-switch > input { position: absolute; opacity: 0; pointer-events: none; }

/* A switch nobody is allowed to throw must LOOK unavailable, not merely
 * ignore the click. */
.sb-switch[disabled] { opacity: 0.45; cursor: not-allowed; }

/* --- segmented control ----------------------------------------------------
 * Consolidates .rk-segsw / .lx-seg / .sbrl-seg. Real radios stay in the DOM
 * so keyboard and screen readers work; the labels are the visible caps. */

.sb-seg {
  display: inline-flex;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  overflow: hidden;
}

.sb-seg > label,
.sb-seg > button {
  padding: var(--sb-s2) var(--sb-s4);
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  background: var(--sb-surface-3);
  border: 0;
  border-right: 1px solid var(--sb-line);
  cursor: pointer;
}

.sb-seg > :last-child { border-right: 0; }
.sb-seg > input { position: absolute; opacity: 0; pointer-events: none; }

.sb-seg > input:checked + label,
.sb-seg > button[aria-pressed="true"] {
  color: var(--sb-gold);
  background: var(--sb-gold-wash);
}

.sb-seg > input:focus-visible + label,
.sb-seg > button:focus-visible { outline: none; box-shadow: var(--sb-focus); }

/* --- fader ----------------------------------------------------------------
 * From rack.css .fader. A native range, restyled - so keys, touch and
 * assistive tech keep working. */

.sb-fader {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: var(--sb-r-pill);
  background: var(--sb-surface-3);
  border: 1px solid var(--sb-line);
}

.sb-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 18px;
  border-radius: var(--sb-r-control);
  background: var(--sb-surface-1);
  border: 1px solid var(--sb-line-strong);
  box-shadow: inset 0 0 0 1px var(--sb-gold);
  cursor: pointer;
}

.sb-fader::-moz-range-thumb {
  width: 10px;
  height: 18px;
  border-radius: var(--sb-r-control);
  background: var(--sb-surface-1);
  border: 1px solid var(--sb-gold);
  cursor: pointer;
}

.sb-fader:focus-visible { outline: none; box-shadow: var(--sb-focus); }
.sb-fader[disabled] { opacity: 0.45; }

/* Legend, fader, readout - the three-column grid from light-studio.css .lx-mix
 * so a stack of faders lines up down the page. */
.sb-fader-row {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 3.6em;
  align-items: center;
  gap: var(--sb-s3);
}

/* --- lifecycle rail -------------------------------------------------------
 * From studio-room.css .sr-rail. Only for a stage that is STORED. A rail
 * showing a stage nobody set is exactly the invention this file forbids.
 *
 * Called .sb-stages, NOT .sb-rail: tailwind.css already compiles a .sb-rail
 * for the vertical desk navigation, and this sheet loads after it, so the
 * name would have silently taken the desk nav's border-right off. */

.sb-stages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sb-s2);
  padding: var(--sb-s3);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-control);
  background: var(--sb-surface-2);
}

.sb-stages-i {
  padding: var(--sb-s1) var(--sb-s3);
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-pill);
}

.sb-stages-i--done { color: var(--sb-good); border-color: var(--sb-good-line); }
.sb-stages-i--now {
  color: var(--sb-gold);
  border-color: var(--sb-gold);
  background: var(--sb-gold-wash);
}

@media (pointer: coarse) {
  .sb-switch, .sb-seg > label, .sb-seg > button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-meter-fill, .sb-switch { transition: none; }
}

/* --- meters on paper ----------------------------------------------------------
 * Signal and the passport sheets are ivory. Under .sb-on-paper the well, the
 * LED gaps and the readout take the paper tokens; a fill keeps its state
 * colour, and the plain fill is the paper gold. Folded in from Signal's
 * sg-bar / sg-meter, which were this meter drawn a third time. */

.sb-on-paper .sb-meter {
  background: var(--sb-paper-line-soft);
  border-color: var(--sb-paper-line);
}

.sb-on-paper .sb-meter::after {
  background: repeating-linear-gradient(
    to right, transparent 0 5px, var(--sb-paper) 5px 8px);
}

.sb-on-paper .sb-meter-fill { background: var(--sb-paper-gold); }
.sb-on-paper .sb-meter--good .sb-meter-fill { background: var(--sb-good); }
.sb-on-paper .sb-meter--warn .sb-meter-fill { background: var(--sb-warn); }
.sb-on-paper .sb-meter--crit .sb-meter-fill { background: var(--sb-crit); }
.sb-on-paper .sb-meter-val { color: var(--sb-paper-ink-2); }

/* --- lamps on paper -----------------------------------------------------------
 * The dark lamp's inks are too light for ivory. Under .sb-on-paper the word
 * takes the paper ink and the state tones are the ones stage-control.css
 * already proved at 4.5:1 on paper. Folded in from the passport sheet's
 * .sc-flag and .sc-diff-tag, which were this lamp drawn twice more. */

.sb-on-paper .sb-lamp { color: var(--sb-paper-ink-2); }
.sb-on-paper .sb-lamp--on { color: var(--sb-paper-gold); }
.sb-on-paper .sb-lamp--good { color: rgb(80 119 76); }   /* 4.56:1 on paper */
.sb-on-paper .sb-lamp--warn { color: rgb(162 92 44); }   /* 4.54:1 on paper */
.sb-on-paper .sb-lamp--crit { color: rgb(184 75 61); }   /* 4.53:1 on paper */
.sb-on-paper .sb-lamp--info { color: var(--sb-paper-ink); }

/* --- fold tabs ------------------------------------------------------------
 * The sidebar audit folded fifteen entries into tabbed pages. This is the
 * strip that keeps the other cuts one tap away: links styled as the
 * segmented control, so a fold reads as one instrument with settings. */
.sb-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-s2);
  margin: 0 auto var(--sb-s4);
  max-width: 1100px;
}
.sb-subnav-a {
  padding: var(--sb-s2) var(--sb-s4);
  font-family: var(--sb-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-ink-3);
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-r-control);
  text-decoration: none;
}
.sb-subnav-a:hover { color: var(--sb-ink); border-color: var(--sb-gold); }
.sb-subnav-a.is-on { color: var(--sb-gold); background: var(--sb-gold-wash); border-color: var(--sb-gold); }
.sb-subnav-a:focus-visible { outline: none; box-shadow: var(--sb-focus); }
@media (pointer: coarse) { .sb-subnav-a { min-height: 44px; display: inline-flex; align-items: center; } }

/* --- module windows on the Command Center board ------------------------
   The note clamps to two lines (the full note rides on hover); a preview
   window is dashed and carries its one lamp at the head's far edge. */
.sb-mod-head .sb-mod-state { margin-left: auto; flex: none; }
.sb-mod-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-mod-disc { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--sb-ink-3); }
.sb-mod--preview { border-style: dashed; }