:root {
  --tolex:      #151210;
  --tolex-deep: #0b0908;
  --panel:      #241f1b;
  --panel-hi:   #2e2822;
  --panel-press:#1c1815;
  --edge:       #3b322a;
  --edge-hi:    #5c4f42;
  --cream:      #e7ddc9;
  --muted:      #9a8e83;      /* 4.8:1 or better on every surface it sits on */
  --lamp:       #ff9b2f;
  --lamp-dim:   #6b4418;
  --lamp-glow:  rgba(255,155,47,.40);
  --fault:      #d0453c;
}

* { box-sizing: border-box; }

/* The hidden attribute is only a UA-level `display: none`, so any class rule
   that sets display overrides it. Several do. Settle it once here. */
[hidden] { display: none !important; }

/* A solid colour under the gradient. Phone browsers tint their own address
   bar and toolbar from the page's background colour, and a gradient doesn't
   count -- it's an image -- so without this they fell back to white. It's
   also what shows when a page is overscrolled. */
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #0b0908;
  color-scheme: dark;            /* dark native controls and browser UI */
}

body {
  --edge: clamp(10px, 2.5vw, 32px);
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  background-color: #0b0908;
  /* Launched from the home screen, the page runs edge to edge under the
     status bar and home indicator. The insets keep controls clear of both;
     in a normal browser tab they're zero and nothing changes. */
  padding:
    max(var(--edge), env(safe-area-inset-top))
    max(var(--edge), env(safe-area-inset-right))
    max(var(--edge), env(safe-area-inset-bottom))
    max(var(--edge), env(safe-area-inset-left));
  display: flex;
  align-items: stretch;      /* cabinet fills the window */
  justify-content: center;
  /* background-image, not the `background` shorthand: the shorthand would
     reset the background-color set above back to transparent */
  background-image: radial-gradient(120% 80% at 50% -10%, #241e19 0%, var(--tolex) 55%, var(--tolex-deep) 100%);
  color: var(--cream);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-stretch: condensed;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- cabinet */

.cab {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid #000;
  background: var(--tolex);
  padding: 10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6),
              0 2px 0 rgba(255,255,255,.04) inset,
              0 -20px 40px rgba(0,0,0,.5) inset;
}

.cab__inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 1px solid #2a2420;
  border-radius: 8px;
  overflow: hidden;
}

.panel {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(180deg, #322b25 0%, #221d19 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

.wordmark {
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}

.readout {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .05em;
}

.readout b { color: var(--lamp); font-weight: 600; }

.pilot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--lamp-dim);
  border: 1px solid #000;
  transition: background .2s ease, box-shadow .2s ease;
}
.pilot.is-live  { background: var(--lamp);  box-shadow: 0 0 9px var(--lamp-glow); }
.pilot.is-fault { background: var(--fault); box-shadow: 0 0 9px rgba(208,69,60,.4); }

/* ---------------------------------------------------------------- alert */

.alert {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 20px;
  background: linear-gradient(180deg, #33201d 0%, #261817 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  color: #e8a49e;
  font-size: .8rem;
  line-height: 1.4;
}

.alert__lamp {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fault);
  box-shadow: 0 0 9px rgba(208,69,60,.45);
  animation: pulse 1.1s ease-in-out infinite;
}

/* ---------------------------------------------------------------- tabs */

.tabs {
  flex: none;
  display: flex;
  background: linear-gradient(180deg, #1d1915 0%, #141110 100%);
  border-bottom: 1px solid #000;
}

.tab {
  flex: 1;
  position: relative;
  padding: 13px 8px;
  border: 0;
  border-right: 1px solid #0a0807;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, color .14s ease;
}
.tab:last-child { border-right: 0; }

@media (hover: hover) and (pointer: fine) {
  .tab:hover { background: #221d19; color: var(--cream); }
}
.tab:active { background: var(--panel-press); }
.tab:focus-visible { outline: 2px solid var(--lamp); outline-offset: -3px; }

.tab.is-current {
  color: #fff8ec;
  background: linear-gradient(180deg, #2b231a 0%, #1a1511 100%);
}
.tab.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--lamp);
  box-shadow: 0 0 10px var(--lamp-glow);
}

/* ---------------------------------------------------------------- panes */

.grille {
  flex: 1;
  min-height: 0;                 /* lets the pane scroll instead of the page */
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 3.5vw, 22px);
  background-color: #191512;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.30)        0 1px, transparent 1px 4px);
}

.pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pane[hidden] { display: none; }

/* Narrow: the wrapper isn't a box, its children behave as if they were
   direct children of the grille. Wide: it becomes the middle column. */
.mid { display: contents; }
.midtabs { display: none; }

/* The tabs name the section on narrow screens, so the heading is only needed
   in the wide layout where the tabs are gone. */
.pane__title { display: none; }

.pane__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;              /* scrollbar appears only when it's needed */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-hi) transparent;
}

.pane__body::-webkit-scrollbar { width: 9px; }
.pane__body::-webkit-scrollbar-track { background: transparent; }
.pane__body::-webkit-scrollbar-thumb {
  background: #3a322b;
  border-radius: 99px;
  border: 2px solid #191512;
}
.pane__body::-webkit-scrollbar-thumb:hover { background: var(--edge-hi); }

.groups { display: flex; flex-direction: column; }

.empty { margin: 8px 2px; color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- presets */

.banks {
  flex: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bank {
  padding: 7px 13px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  min-height: 28px;
}
@media (hover: hover) and (pointer: fine) {
  .bank:hover { background: var(--panel-hi); color: var(--cream); border-color: var(--edge-hi); }
}
.bank:active { background: var(--panel-press); }
.bank:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.bank.is-current { border-color: #7a5426; color: #fff8ec; background: #33261a; }

/* Presets stretch to fill the leftover height, but only once there are
   enough rows for that to look deliberate. With one or two presets the rows
   are sized to the content instead -- otherwise a single preset becomes a
   button the height of the screen. */
.presets {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(74px, 1fr);
  gap: 12px;
  align-content: stretch;
}

.presets.is-sparse {
  align-content: start;
  grid-auto-rows: minmax(74px, 104px);
}

.preset {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  max-height: 152px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 4px rgba(0,0,0,.4);
  transition: background .14s ease, border-color .14s ease,
              box-shadow .14s ease, transform .08s ease, color .14s ease;
}

.lamp {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--lamp-dim);
  border: 1px solid #000;
  box-shadow: 0 1px 1px rgba(255,255,255,.12) inset;
  transition: background .16s ease, box-shadow .16s ease;
}

.preset__name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
  letter-spacing: .07em;
}
.preset__tag {
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--lamp);
  opacity: 0;
  transition: opacity .16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .preset:hover {
    background: linear-gradient(180deg, #3a322b 0%, #2b251f 100%);
    border-color: var(--edge-hi);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 14px rgba(0,0,0,.5);
    transform: translateY(-1px);
  }
  .preset:hover .lamp { background: #8a5a20; box-shadow: 0 0 6px rgba(255,155,47,.25); }
}

.preset:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-color: var(--edge-hi); }

.preset:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--panel-press) 0%, #17130f 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.55) inset;
}

.preset.is-active {
  border-color: #7a5426;
  background: linear-gradient(180deg, #3a2c1c 0%, #261d14 100%);
  color: #fff8ec;
  box-shadow: 0 1px 0 rgba(255,200,140,.12) inset,
              0 0 0 1px rgba(255,155,47,.18),
              0 8px 20px rgba(0,0,0,.5);
}
.preset.is-active::before {
  content: "";
  position: absolute;
  left: -1px; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--lamp);
  box-shadow: 0 0 10px var(--lamp-glow);
}
.preset.is-active .lamp {
  background: var(--lamp);
  box-shadow: 0 0 10px var(--lamp-glow), 0 0 20px rgba(255,155,47,.18),
              0 1px 1px rgba(255,255,255,.5) inset;
}
.preset.is-active .preset__tag { opacity: 1; }

.preset.is-pending { cursor: progress; }
.preset.is-pending .lamp { animation: blink .55s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- groups */

.group {
  flex: none;
  border: 1px solid #2c251f;
  border-radius: 8px;
  background: rgba(36,31,27,.72);
  margin-bottom: 14px;
  overflow: hidden;
}
.group:last-child { margin-bottom: 0; }

.group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: linear-gradient(180deg, #2a231d 0%, #201b17 100%);
  border-bottom: 1px solid #191411;
}

.group__toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -4px 0 -4px -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .group__toggle:hover { background: rgba(255,255,255,.035); }
  .group__toggle:hover .chev { border-color: var(--cream); }
}
.group__toggle:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }

/* a small caret that turns to point down when the group is open */
.chev {
  flex: none;
  width: 7px; height: 7px;
  margin-top: 6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .16s ease, border-color .14s ease;
}
.group.is-folded .chev { transform: rotate(-45deg); }

.group__text { min-width: 0; }

.group__title {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.group__blurb {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.35;
  color: var(--muted);
}

.switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .switch:hover { background: var(--panel-hi); border-color: var(--edge-hi); color: var(--cream); }
}
.switch:active { background: var(--panel-press); }
.switch:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.switch.is-on { border-color: #7a5426; color: #fff8ec; background: #33261a; }
.switch.is-on .lamp { background: var(--lamp); box-shadow: 0 0 8px var(--lamp-glow); }
.switch .lamp { width: 9px; height: 9px; }

.group__body { padding: 6px 15px 14px; transition: opacity .18s ease;   display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .24s ease, padding .24s ease, opacity .2s ease;
}
.group.is-bypassed .group__body { opacity: .42; }
.group.is-folded .group__body {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Folding animates to the content's real height: the body is a one-row grid
   going from 1fr to 0fr, and this inner wrapper clips while it shrinks. The
   inner part is made inert while folded (app.js), so nothing hidden stays
   reachable by keyboard. Browsers without grid-row transitions just snap. */
.group__inner { min-height: 0; overflow: hidden; }
.group.is-folded .group__head { border-bottom-color: transparent; }

/* only an on/off switch under this prefix: no caret, nothing to fold */
.group.is-switch-only .group__head { border-bottom-color: transparent; }
.group.is-switch-only .chev { visibility: hidden; }
.group__toggle:disabled { cursor: default; }
.group__toggle:disabled:hover { background: transparent; }

/* ------------------------------------------------- row layout (effects) */

.knob { padding: 10px 0 4px; border-bottom: 1px solid #221d19; }
.knob:last-child { border-bottom: 0; }

.knob__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px;
}

.knob__label { font-size: .82rem; letter-spacing: .04em; }

.knob__value {
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--muted);
  transition: color .14s ease;
}
.knob__value.is-remote { color: var(--lamp); }

/* ------------------------------------------------- switches and choices */

/* One row under the faders, packed to the left: a captioned dropdown, then
   self-labelled switches. Everything sits on a shared bottom edge. */
.discrete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding-top: 14px;
}
.knob + .discrete, .rack + .discrete {
  border-top: 1px solid #221d19;
  margin-top: 8px;
}

.choice-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-right: 6px;
}

.choice-field__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.choice {
  min-width: 170px;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #171310;
  color: var(--cream);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .choice:hover { border-color: var(--edge-hi); }
}
.choice:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }

/* a switch that names itself, same shape as the bypass switches */
.switch.is-named {
  padding: 8px 14px 8px 11px;
  font-size: .72rem;
  letter-spacing: .1em;
}
.switch.is-named .lamp { width: 9px; height: 9px; }
.switch__name { white-space: nowrap; }

.has-desc { text-decoration: underline dotted rgba(231,221,201,.35); text-underline-offset: 3px; }
.switch.is-named.has-desc { text-decoration: none; }
.switch.is-named.has-desc .switch__name {
  text-decoration: underline dotted rgba(231,221,201,.35);
  text-underline-offset: 3px;
}

.knob__label[title], .band__label[title], .choice-field__label[title] { cursor: help; }

/* ------------------------------------------------- rack layout (EQ faders) */

.rack {
  display: flex;
  align-items: flex-start;       /* values, faders and labels each on one line */
  gap: 4px;
  padding: 14px 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-hi) transparent;
}
.rack::-webkit-scrollbar { height: 8px; }
.rack::-webkit-scrollbar-track { background: transparent; }
.rack::-webkit-scrollbar-thumb { background: #3a322b; border-radius: 99px; }

.band {
  flex: none;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.band__value {
  min-height: 1.3em;
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--muted);
  transition: color .14s ease;
}
.band__value.is-remote { color: var(--lamp); }

/* Room for two lines on every label, used or not, so a long name can't make
   its column taller than its neighbours and knock the row out of line. */
.band__label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 2.5em;
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--cream);
  text-align: center;
  line-height: 1.25;
  overflow-wrap: break-word;
}

/* The fader is a normal horizontal range rotated a quarter turn, which keeps
   the thumb and track styling identical across browsers. */
.band__fader {
  position: relative;
  width: 40px;
  height: 168px;
}

.band__fader::before {
  content: "";                      /* centre detent line for cut/boost bands */
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  height: 1px;
  background: rgba(231,221,201,.14);
  display: none;
}
.band__fader.is-bipolar::before { display: block; }

.band__fader input[type="range"] {
  position: absolute;
  top: 50%; left: 50%;
  width: 168px;                     /* becomes the travel once rotated */
  height: 40px;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}

/* ---------------------------------------------------------------- range */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]:focus { outline: none; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #100d0b 0%, #1d1815 100%);
  border: 1px solid #0a0807;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #100d0b 0%, #1d1815 100%);
  border: 1px solid #0a0807;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  border: 1px solid #0a0807;
  background: radial-gradient(circle at 34% 28%, #efe4cf 0%, #b3a48b 45%, #5d5244 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  transition: box-shadow .14s ease, transform .1s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid #0a0807;
  background: radial-gradient(circle at 34% 28%, #efe4cf 0%, #b3a48b 45%, #5d5244 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
}

/* faders get a slotted cap rather than a knob */
.band__fader input[type="range"]::-webkit-slider-thumb {
  width: 16px; height: 30px;
  margin-top: -13px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.55) 54%, transparent 54%),
    linear-gradient(180deg, #d9cdb5 0%, #9d8f78 52%, #4f4538 100%);
}
.band__fader input[type="range"]::-moz-range-thumb {
  width: 16px; height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d9cdb5 0%, #9d8f78 52%, #4f4538 100%);
}

@media (hover: hover) and (pointer: fine) {
  input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 5px rgba(255,155,47,.13), 0 2px 5px rgba(0,0,0,.6);
  }
  input[type="range"]:hover::-moz-range-thumb {
    box-shadow: 0 0 0 5px rgba(255,155,47,.13), 0 2px 5px rgba(0,0,0,.6);
  }
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow: 0 0 0 7px rgba(255,155,47,.2), 0 2px 5px rgba(0,0,0,.6);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--lamp), 0 2px 5px rgba(0,0,0,.6);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--lamp), 0 2px 5px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- chassis */

.chassis {
  flex: none;
  padding: 11px 20px;
  background: linear-gradient(180deg, #100d0b 0%, #080706 100%);
  border-top: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .68rem;
  letter-spacing: .14em;
  color: #857a70;
}

/* ---------------------------------------------------------------- offline */

/* Locked while guitarix can't be reached. `inert` is set in app.js and does
   the actual disabling; this only makes it visible. */
[inert] {
  opacity: .38;
  filter: grayscale(.7);
  transition: opacity .2s ease, filter .2s ease;
}
[inert] * { cursor: not-allowed; }

/* ---------------------------------------------------------------- small */

@media (max-width: 520px) {
  .presets { grid-template-columns: 1fr; }
  .panel   { padding: 13px 15px; }
  .group__head { flex-wrap: wrap; }
  .band { width: 46px; }
  .band__fader { height: 148px; }
  .band__fader input[type="range"] { width: 148px; }
}

/* short windows: let the presets scroll rather than squash */
@media (max-height: 560px) {
  .presets { grid-auto-rows: minmax(64px, auto); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .preset:hover, .preset:active { transform: none; }
}

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 14px;
}

.toolbar .banks { margin-bottom: 0; flex: 1 1 100%; min-width: 0; }
.toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar__actions .act { flex: 1 1 0; }

.act {
  padding: 8px 14px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  color: var(--cream);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .08s ease;
}
@media (hover: hover) and (pointer: fine) {
  .act:hover:not(:disabled) { background: #3a322b; border-color: var(--edge-hi); color: #fff; }
}
.act:active:not(:disabled) { transform: translateY(1px); background: var(--panel-press); }
.act:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.act:disabled { opacity: .35; cursor: not-allowed; }
.act.is-on { border-color: #7a5426; background: #33261a; color: #fff8ec; }
.act.is-primary { border-color: #7a5426; background: #3a2c1c; color: #fff8ec; }
.act.is-danger  { border-color: #6b2f2a; color: #e8a49e; }
@media (hover: hover) and (pointer: fine) {
  .act.is-danger:hover:not(:disabled) {
    background: #331c19; border-color: var(--fault); color: #ffb3ad;
  }
}

/* organise mode: tiles keep their layout; a tap picks one, the bar acts */
.organise {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px dashed #4a3f35;
  border-radius: 8px;
  background: rgba(255,155,47,.03);
}

.organise__hint {
  margin: 0;
  font-size: .76rem;
  color: var(--muted);
  overflow-wrap: break-word;
}
.organise__hint.is-picked { color: #fff8ec; font-weight: 700; }

.organise__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.organise__row .act { padding: 8px 6px; }
.organise__row .act[hidden] + .act,
.organise__row .act:only-child { grid-column: 1 / -1; }

.presets.is-organising .preset { border-style: dashed; cursor: pointer; }
.presets.is-organising .preset.is-active { border-style: solid; }

.preset.is-picked {
  border: 1px solid var(--lamp) !important;
  box-shadow: 0 0 0 1px var(--lamp), 0 0 18px rgba(255,155,47,.18);
}

.mini {
  padding: 5px 9px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .mini:hover { background: var(--panel-hi); color: var(--cream); border-color: var(--edge-hi); }
  .mini.is-danger:hover { border-color: var(--fault); color: #ffb3ad; background: #2c1816; }
}
.mini:active { background: var(--panel-press); }
.mini:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

/* ---------------------------------------------------------------- record */

.tab__dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--fault);
  vertical-align: middle;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.transport {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #251f1a;
}

.rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  color: var(--cream);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, transform .08s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rec-btn:hover { border-color: var(--edge-hi); background: #3a322b; }
}
.rec-btn:active { transform: translateY(1px); }
.rec-btn:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

.rec-btn__dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #5e2b28;
  border: 1px solid #000;
  transition: background .16s ease, box-shadow .16s ease;
}
.rec-btn.is-live { border-color: #8a3630; background: linear-gradient(180deg, #3a1f1d 0%, #261615 100%); }
.rec-btn.is-live .rec-btn__dot {
  background: var(--fault);
  box-shadow: 0 0 10px rgba(208,69,60,.5);
  animation: pulse 1.1s ease-in-out infinite;
}

.rec-clock {
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  letter-spacing: .06em;
  color: var(--cream);
}

.rec-note { font-size: .76rem; color: var(--muted); }
.rec-note.is-error { color: #e8867e; }

/* ---------------------------------------------------------------- takes */

.takes { flex: 1; }

.takes__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

.takes__table th {
  text-align: left;
  padding: 10px 10px 8px 0;
  border-bottom: 1px solid #2c251f;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.takes__table td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid #211c18;
  vertical-align: middle;
  color: var(--cream);
  white-space: nowrap;
}

.takes__name {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 9rem;
}

.takes__table tbody tr { transition: background .14s ease; }
@media (hover: hover) and (pointer: fine) {
  .takes__table tbody tr:hover:not(.takes__player) { background: rgba(255,255,255,.028); }
}

.takes__table tr.is-live td { color: #e8867e; }

.takes__actions {
  text-align: right;
  padding-right: 0;
}
.takes__actions > * { margin-left: 6px; }

/* In the stacked layouts the actions get a row to themselves, so give each
   one an equal share of it rather than letting them bunch up on the left. */
/* A row may hold 4 or 5 buttons -- Re-render only shows up on takes with a
   dry twin -- so the columns track however many are actually there. */
.takes__actions.is-spread {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
  text-align: center;
}
.takes__actions.is-spread > * { margin: 0; }
.takes__actions.is-spread .mini {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
}

.takes__player td { padding: 4px 0 14px; border-bottom: 1px solid #211c18; }
.takes__player audio { width: 100%; }

@media (max-width: 560px) {
  .takes__table thead { display: none; }
  .takes__table tr { display: block; padding: 10px 0; border-bottom: 1px solid #211c18; }
  .takes__table td { display: inline-block; border: 0; padding: 2px 12px 2px 0; color: var(--muted); }
  .takes__table td.takes__name { display: block; font-weight: 700; color: var(--cream); padding-bottom: 3px; }
  .takes__actions { display: block; text-align: left; padding-top: 8px; }
  .takes__actions.is-spread { display: grid; padding-top: 8px; }
  .takes__player td { display: block; padding: 0 0 12px; }
}

/* ---------------------------------------------------------------- dialog */

.ask {
  width: min(400px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #221d19;
  color: var(--cream);
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.ask::backdrop { background: rgba(0,0,0,.6); }
.ask form { padding: 20px; }

.ask__title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.ask__field { display: block; margin-bottom: 14px; }
.ask__field > span {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ask__field input,
.ask__field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #171310;
  color: var(--cream);
  font: inherit;
  font-size: .95rem;
  transition: border-color .14s ease, background .14s ease;
}
.ask__field input:focus,
.ask__field select:focus {
  outline: 2px solid var(--lamp);
  outline-offset: 1px;
  border-color: var(--edge-hi);
}

.ask__note {
  margin: -4px 0 14px;
  font-size: .76rem;
  color: var(--muted);
}

.ask__buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
  pointer-events: none;
  padding: 0 12px;
  max-width: 100%;
}

.toast {
  padding: 11px 16px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #2a231d;
  color: var(--cream);
  font-size: .82rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  transition: opacity .35s ease, transform .35s ease;
  animation: toast-in .22s ease-out;
}
.toast.is-ok    { border-color: #7a5426; }
.toast.is-error { border-color: #7a3630; background: #2c1c19; }
.toast.is-going { opacity: 0; transform: translateY(6px); }

/* ================================================================
   WIDE LAYOUT — 1000px and up

   The narrow layout above is a stompbox: one thing at a time, big
   targets, thumb-reachable. This one is the amp head on a bench.
   There's room to show all four sections at once, so the tabs go
   away and the cabinet spreads into three columns: presets down
   the left where you can punch them while looking at something
   else, EQ and effects in the middle, takes down the right.
   Everything above is untouched below 1000px.
   ================================================================ */

@media (min-width: 1000px) {

  body {
    padding: clamp(14px, 1.6vw, 28px);
  }

  .cab {
    max-width: 1680px;
  }

  /* ---- head panel ---- */

  .panel {
    padding: 14px 24px;
    align-items: center;
  }

  .wordmark { font-size: 1.5rem; }
  .readout  { font-size: .86rem; }

  .tabs { display: none; }

  /* ---- three columns ---- */

  .grille {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(310px, 370px);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "presets mid rec";
    gap: 14px;
    padding: 14px;
  }

  [data-pane="presets"] { grid-area: presets; }
  [data-pane="rec"]     { grid-area: rec; }

  /* the middle column: one panel, two tabs, one scroller */
  .mid {
    grid-area: mid;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #2c251f;
    border-radius: 8px;
    background: rgba(17,14,12,.55);
    overflow: hidden;
  }

  .midtabs {
    flex: none;
    display: flex;
    background: linear-gradient(180deg, #2a231d 0%, #1e1a16 100%);
    border-bottom: 1px solid #14100e;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  }

  .midtab {
    position: relative;
    padding: 11px 22px;
    border: 0;
    border-right: 1px solid #14100e;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
  }
  .midtab:focus-visible { outline: 2px solid var(--lamp); outline-offset: -3px; }
  .midtab.is-current { color: #fff8ec; background: rgba(255,155,47,.06); }
  .midtab.is-current::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--lamp);
    box-shadow: 0 0 10px var(--lamp-glow);
  }

  /* the panes inside it are just content now; the strip is their chrome */
  .mid .pane {
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 1;
  }
  .mid .pane__title { display: none; }

  /* each section becomes its own chassis panel */
  .pane {
    min-height: 0;
    border: 1px solid #2c251f;
    border-radius: 8px;
    background: rgba(17,14,12,.55);
    overflow: hidden;
  }

  .pane__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 15px;
    background: linear-gradient(180deg, #2a231d 0%, #1e1a16 100%);
    border-bottom: 1px solid #14100e;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .pane__lamp {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fault);
    box-shadow: 0 0 8px rgba(208,69,60,.5);
    animation: pulse 1.1s ease-in-out infinite;
  }

  .pane__body { padding: 14px; }

  /* ---- presets column ---- */

  /* The column is short on height, not width: one row of actions instead
     of two, and tighter bank chips, leave more of it for the presets. */
  .is-wide .toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .is-wide .toolbar .banks { flex: none; gap: 6px; }
  .is-wide .toolbar__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .is-wide .toolbar__actions .act { padding: 9px 4px; font-size: .66rem; letter-spacing: .1em; }
  .is-wide .bank { padding: 5px 11px; font-size: .68rem; letter-spacing: .1em; }

  .is-wide .presets { grid-template-columns: 1fr; gap: 8px; }
  .is-wide .preset {
    min-height: 58px;
    max-height: 84px;
    font-size: .88rem;
    padding: 10px 14px;
  }
  .is-wide .presets.is-sparse { grid-auto-rows: minmax(58px, 72px); }

  /* ---- middle column ---- */

  .group { margin-bottom: 12px; }
  .band  { width: 48px; }
  .band__fader { height: 150px; }
  .band__fader input[type="range"] { width: 150px; }

  /* effects read better two abreast when the column is wide enough */
  #groups-fx {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 12px;
    align-content: start;
    /* Each card is as tall as its own content. The default, stretch, made a
       folded card grow to match an open one in the same row -- which looked
       like opening one effect opened all three. */
    align-items: start;
  }
  #groups-fx .group { margin-bottom: 0; }

  /* ---- takes column ---- */

  .transport { gap: 10px; padding-bottom: 13px; }
  .rec-btn { padding: 11px 18px; font-size: .76rem; }
  .rec-clock { font-size: 1.25rem; }
  .rec-note { flex: 1 1 100%; }

  /* the column is narrow, so stack each take the way the phone does */
  .is-wide .takes__table thead { display: none; }
  .is-wide .takes__table tr {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid #211c18;
  }
  .is-wide .takes__table td {
    display: inline-block;
    border: 0;
    padding: 1px 10px 1px 0;
    font-size: .76rem;
    color: var(--muted);
  }
  .is-wide .takes__table td.takes__name {
    display: block;
    padding-bottom: 3px;
    font-weight: 700;
    font-size: .86rem;
    color: var(--cream);
  }
  .is-wide .takes__actions { display: block; text-align: left; padding-top: 7px; }
  .is-wide .takes__actions.is-spread { display: grid; padding-top: 7px; }
  .is-wide .takes__player td { display: block; padding: 0 0 10px; }
}

/* Shorter 16:9 windows: claw back vertical space from the EQ so the
   effects underneath aren't squeezed into a sliver. */
@media (min-width: 1000px) and (max-height: 800px) {
  .band__fader { height: 122px; }
  .band__fader input[type="range"] { width: 122px; }
  .is-wide .preset { min-height: 52px; max-height: 68px; }
}

/* Very wide screens: a fourth column of air either side is worse than
   letting the middle breathe, so give the racks more room instead. */
@media (min-width: 1500px) {
  .grille { grid-template-columns: 300px minmax(0, 1fr) 400px; gap: 16px; }
  .band { width: 54px; }
}

/* ================================================================
   IMPORT, AUDITION AND FEEDBACK
   ================================================================ */

/* ---------------------------------------------------------------- buttons */

.act.is-quiet {
  background: transparent;
  border-color: var(--edge);
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .act.is-quiet:hover:not(:disabled) { color: var(--cream); background: var(--panel); }
}
a.act { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
label.act { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* in flight: the server hasn't answered yet */
.act.is-busy, .rec-btn.is-busy {
  position: relative;
  cursor: progress;
  color: transparent !important;          /* the label steps aside for the dots */
}
.act.is-busy::after, .rec-btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px; height: 6px;
  background:
    radial-gradient(circle, var(--cream) 45%, transparent 50%) 0 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--cream) 45%, transparent 50%) 50% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--cream) 45%, transparent 50%) 100% 50% / 6px 6px no-repeat;
  animation: busy-dots 1s ease-in-out infinite;
}
@keyframes busy-dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* done: a brief lamp-coloured ring. failed: a red one, and a shake */
.is-done   { animation: ring-ok .9s ease-out; }
.is-failed { animation: ring-bad .9s ease-out, shake .36s ease-in-out; }
@keyframes ring-ok  { 0% { box-shadow: 0 0 0 0 rgba(255,155,47,.55); } 100% { box-shadow: 0 0 0 10px rgba(255,155,47,0); } }
@keyframes ring-bad { 0% { box-shadow: 0 0 0 0 rgba(208,69,60,.6); }  100% { box-shadow: 0 0 0 10px rgba(208,69,60,0); } }
@keyframes shake {
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
}

/* unsaved edits: Save is the way out, so it's lit */
#btn-save.is-armed {
  border-color: #7a5426;
  background: linear-gradient(180deg, #45331f 0%, #33261a 100%);
  color: #fff8ec;
}
#btn-save.is-armed::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--lamp);
  box-shadow: 0 0 7px var(--lamp-glow);
}

/* ---------------------------------------------------------------- header */

.readout__tag {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid #7a5426;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lamp);
  vertical-align: 1px;
}
.readout.is-changed { animation: fade-in .35s ease-out; }

/* ---------------------------------------------------------------- presets */

/* lit from somewhere else -- another phone, the GTK window */
.preset.is-arriving { animation: arrive .9s ease-out; }
@keyframes arrive {
  0%   { box-shadow: 0 0 0 0 rgba(255,155,47,.7), 0 8px 20px rgba(0,0,0,.5); }
  100% { box-shadow: 0 0 0 14px rgba(255,155,47,0), 0 8px 20px rgba(0,0,0,.5); }
}

/* the bank holding the preset you're playing */
.bank.is-playing::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--lamp);
  box-shadow: 0 0 6px var(--lamp-glow);
}

/* ---------------------------------------------------------------- takes */

.takes__table tr.is-leaving { opacity: .3; transition: opacity .3s ease; pointer-events: none; }
.takes__table tbody tr.is-new { animation: arrive-row 1.4s ease-out; }
@keyframes arrive-row { 0% { background: rgba(255,155,47,.16); } 100% { background: transparent; } }

/* ---------------------------------------------------------------- toasts */

.toast.is-again { animation: toast-again .3s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-again { 50% { transform: scale(1.04); } }

/* ---------------------------------------------------------------- entrances */

/* Anything that appears by losing `hidden` or `display: none` restarts its
   animation when it shows, so these play every time without any script. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in  { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

.pane:not([hidden])          { animation: fade-in .16s ease-out; }
.organise:not([hidden])      { animation: drop-in .18s ease-out; }
.alert:not([hidden])         { animation: drop-in .22s ease-out; }
.audition:not([hidden])      { animation: drop-in .22s ease-out; }
dialog[open]                 { animation: pop-in .18s ease-out; }
dialog[open]::backdrop       { animation: fade-in .18s ease-out; }

/* ---------------------------------------------------------------- audition */

.audition {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 11px 20px;
  background: linear-gradient(180deg, #3a2a17 0%, #2a1f12 100%);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,200,140,.06) inset;
}
.audition__lamp {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 9px var(--lamp-glow);
  animation: pulse 1.4s ease-in-out infinite;
}
.audition__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: .8rem;
  line-height: 1.4;
  color: #f1dcc0;
}
.audition__text b { color: #fff8ec; }
.audition__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.audition__actions .act { padding: 7px 12px; }

/* ---------------------------------------------------------------- importer */

.importer {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86vh, 860px);
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: #1d1916;
  color: var(--cream);
  box-shadow: 0 30px 80px rgba(0,0,0,.75);
  overflow: hidden;
}
.importer[open] { display: flex; flex-direction: column; }
.importer::backdrop { background: rgba(0,0,0,.62); }

.importer__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, #2a231d 0%, #201b17 100%);
  border-bottom: 1px solid #14100e;
}
.importer__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.importer__close {
  width: 32px; height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .importer__close:hover { background: var(--panel); color: var(--cream); border-color: var(--edge); }
}
.importer__close:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }

.importer__offline {
  margin: 0;
  padding: 9px 18px;
  background: #2c1c19;
  color: #e8a49e;
  font-size: .78rem;
}

.importer__step {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-hi) transparent;
}
.importer__step:not([hidden]) { animation: fade-in .16s ease-out; }

.importer__lead { font-size: .84rem; color: var(--cream); }

.importer__text {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #120f0d;
  color: var(--cream);
  font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
  transition: border-color .14s ease, background .14s ease;
}
.importer__text:focus { outline: 2px solid var(--lamp); outline-offset: 1px; border-color: var(--edge-hi); }

.importer__error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #7a3630;
  border-radius: 6px;
  background: #2c1c19;
  color: #f0b3ad;
  font-size: .8rem;
  line-height: 1.4;
}
.importer__error.is-changed { animation: shake .36s ease-in-out; }

.importer__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.importer__spacer { flex: 1; }

.importer__help {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px;
  border: 1px dashed #4a3f35;
  border-radius: 8px;
  background: rgba(255,155,47,.03);
}
.importer__help p { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted); }

.importer__options { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 18px; }
.importer__bank { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; }
.importer__bank > span {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.importer__bank input {
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: #120f0d;
  color: var(--cream);
  font: inherit;
  font-size: .86rem;
  transition: border-color .14s ease, background .14s ease;
}
.importer__bank input:focus { outline: 2px solid var(--lamp); outline-offset: 1px; }

.importer__check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.importer__check input { width: 16px; height: 16px; accent-color: var(--lamp); cursor: pointer; }

.importer__note { margin: 0; font-size: .78rem; color: var(--muted); }
.importer__note.is-bad { color: #f0b3ad; }
.importer__hint { margin: -4px 0 0; font-size: .72rem; line-height: 1.4; color: #908479; }

.importer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- one preset in the file ---- */

.imp-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid #2c251f;
  border-radius: 8px;
  background: rgba(36,31,27,.7);
  transition: opacity .2s ease, border-color .2s ease;
}
.imp-card.is-empty { opacity: .6; }
.imp-card.is-saved { border-color: #5c4424; }

.imp-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-card__name { font-weight: 700; font-size: .92rem; letter-spacing: .04em; }
.imp-card__notes { margin: 0; font-size: .8rem; font-style: italic; color: #cbbda7; }
.imp-card__meta { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }

.imp-card__issues {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .74rem;
  line-height: 1.45;
}
.imp-card__issues li { padding-left: 14px; position: relative; }
.imp-card__issues li::before {
  content: "";
  position: absolute;
  left: 2px; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.imp-card__issues li.is-bad  { color: #f0b3ad; }
.imp-card__issues li.is-bad::before  { background: var(--fault); }
.imp-card__issues li.is-warn { color: #efc792; }
.imp-card__issues li.is-warn::before { background: var(--lamp); }
.imp-card__issues code, .imp-card__meta code {
  padding: 0 4px;
  border-radius: 3px;
  background: #120f0d;
  font: .72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--cream);
}

.imp-card__actions { display: flex; gap: 8px; margin-top: 2px; }
.imp-card__actions .act { padding: 7px 14px; }

.imp-badge {
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.imp-badge.is-ok   { border-color: #7a5426; color: var(--lamp); }
.imp-badge.is-warn { border-color: #6b4a2a; color: #efc792; }

/* ---------------------------------------------------------------- toolbar */

/* four actions now: two rows of two in the narrow desktop column */
@media (min-width: 1000px) {
  .is-wide .toolbar__actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .audition { padding: 10px 14px; }
  .audition__actions { width: 100%; }
  .audition__actions .act { flex: 1 1 0; }
  .importer__step { padding: 14px; }
}

/* changed from another device or the GTK window: the same brief ring the
   numbers get, so a switch flipping on its own doesn't go unnoticed */
.switch.is-remote, .choice.is-remote { animation: ring-ok .9s ease-out; }

/* busy wins over the unsaved dot */
#btn-save.is-busy::before { display: none; }

/* ================================================================
   RECORD TAB: header, reamp, backing
   ================================================================ */

/* ---------------------------------------------------------------- header */

.rec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #251f1a;
}
.rec-head__main { display: flex; flex-direction: column; gap: 2px; }
.rec-head__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rec-head__attempt {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff8ec;
  font-variant-numeric: tabular-nums;
}
.rec-head__stats { margin: 0; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-head__stats.is-low { color: #efc792; }

/* ---------------------------------------------------------------- dry toggle */

.dry-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.dry-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--lamp); cursor: pointer; }
.dry-toggle:has(input:checked) { border-color: #7a5426; color: #fff8ec; background: #33261a; }
.dry-toggle:has(input:disabled) { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .dry-toggle:hover { border-color: var(--edge-hi); color: var(--cream); }
}

/* ---------------------------------------------------------------- take rows */

.takes__name-text { display: block; }
.takes__badges { display: inline-flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.takes__badge {
  padding: 1px 7px;
  border: 1px solid #4a3f35;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.takes__badge.is-action { cursor: pointer; border-color: #7a5426; color: var(--lamp); transition: background .14s ease;   padding: 6px 10px;
}
@media (hover: hover) and (pointer: fine) {
  .takes__badge.is-action:hover { background: #33261a; }
}

.takes__more td { padding: 0 0 12px; border-bottom: 1px solid #211c18; }
.takes__morebox { display: flex; gap: 6px; flex-wrap: wrap; animation: drop-in .16s ease-out; }
.is-wide .takes__table tr.takes__more { padding-top: 0; }

/* ---------------------------------------------------------------- reamp bar */

.reampbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 13px;
  border: 1px solid #7a5426;
  border-radius: 8px;
  background: linear-gradient(180deg, #3a2a17 0%, #2a1f12 100%);
}
.reampbar:not([hidden]) { animation: drop-in .22s ease-out; }
.reampbar__row { display: flex; align-items: center; gap: 10px; }
.reampbar__lamp {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 9px var(--lamp-glow);
  animation: pulse 1.4s ease-in-out infinite;
}
.reampbar__text { flex: 1; margin: 0; font-size: .8rem; line-height: 1.4; color: #f1dcc0; }
.reampbar__text b { color: #fff8ec; }
.reampbar__clock { font-size: .8rem; color: var(--cream); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reampbar__track {
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.45);
  overflow: hidden;
}
.reampbar__track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lamp);
  box-shadow: 0 0 8px var(--lamp-glow);
  transition: width 1s linear;          /* position arrives once a second; glide between */
}
.reampbar__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.reampbar__actions .act { padding: 8px 12px; }
.reampbar__actions .act.is-on { border-color: #7a5426; background: #33261a; color: #fff8ec; }

/* the amp switch is the one control you reach for mid-phrase: make it big */
.switch.is-big { padding: 9px 18px 9px 14px; font-size: .8rem; letter-spacing: .14em; }
.switch.is-big .lamp { width: 11px; height: 11px; }

/* ---------------------------------------------------------------- backing */

.backing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #251f1a;
}
.backing__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.backing__title {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.backing__head .act { padding: 7px 12px; }

.backing__now {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid #7a5426;
  border-radius: 8px;
  background: #2a1f12;
}
.backing__now:not([hidden]) { animation: drop-in .2s ease-out; }
.backing__now .lamp.is-lit { background: var(--lamp); box-shadow: 0 0 8px var(--lamp-glow); animation: pulse 1.4s ease-in-out infinite; }
.backing__name { flex: 1 1 120px; font-weight: 700; font-size: .84rem; overflow-wrap: anywhere; }
.backing__clock { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.backing__volume { flex: 1 1 110px; min-width: 90px; height: 22px; }
.backing__now .act { padding: 6px 10px; }
.backing__now .act.is-on { border-color: #7a5426; background: #33261a; color: #fff8ec; }

.backing__include { padding-bottom: 0; }

.backing__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.backing__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #211c18;
  transition: background .14s ease;
}
.backing__item.is-playing .backing__item-name { color: var(--lamp); }
.backing__item-name { flex: 1; min-width: 0; font-size: .84rem; overflow-wrap: anywhere; }
.backing__item-len { font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.backing__list .empty { padding: 4px 0; }

   

/* ---------------------------------------------------------------- listen */

.panel__side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.listen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .listen:hover { background: var(--panel-hi); border-color: var(--edge-hi); color: var(--cream); }
}
.listen:active { background: var(--panel-press); }
.listen:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

.listen__lamp {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lamp-dim);
  border: 1px solid #000;
  transition: background .2s ease, box-shadow .2s ease;
}
/* waiting for the first sound: the lamp breathes */
.listen.is-connecting { color: var(--cream); border-color: var(--edge-hi); }
.listen.is-connecting .listen__lamp { background: var(--lamp); animation: pulse 1s ease-in-out infinite; }
/* sound is arriving: lit */
.listen.is-on { color: #fff8ec; border-color: #7a5426; background: #33261a; }
.listen.is-on .listen__lamp { background: var(--lamp); box-shadow: 0 0 9px var(--lamp-glow); }

@media (max-width: 520px) {
  .panel__side { width: 100%; justify-content: space-between; }
}

/* ================================================================
   LIVE MODE
   Big targets, read at a glance from a mic stand. Covers the page.
   ================================================================ */

.live {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2vh, 18px);
  padding:
    max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background-color: #0b0908;
  background-image: radial-gradient(120% 80% at 50% -10%, #241e19 0%, var(--tolex) 55%, var(--tolex-deep) 100%);
  overflow-y: auto;
}
.live:not([hidden]) { animation: fade-in .18s ease-out; }
body.is-live-mode { overflow: hidden; }

.live__top { display: flex; align-items: center; gap: 12px; }
.live__bank {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.live__state { flex: 1; font-size: .78rem; color: #e8867e; }
.live__top .act { padding: 8px 14px; }

/* ---- the preset: the one thing to read from across the room ---- */

.live__preset { display: flex; align-items: stretch; gap: 10px; }
.live__now {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid #7a5426;
  border-radius: 10px;
  background: linear-gradient(180deg, #3a2c1c 0%, #261d14 100%);
  box-shadow: 0 0 0 1px rgba(255,155,47,.12), 0 10px 24px rgba(0,0,0,.45);
}
.live__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lamp);
}
.live__name {
  font-size: clamp(1.6rem, 7vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .03em;
  color: #fff8ec;
  overflow-wrap: break-word;
}
.live__step {
  flex: none;
  width: clamp(56px, 14vw, 88px);
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  color: var(--cream);
  font: inherit;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.live__step:active { transform: scale(.96); background: var(--panel-press); }
.live__step:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .live__step:hover { border-color: var(--edge-hi); background: #3a322b; }
}

/* ---- the bank's presets as tiles ---- */

/* A scrolling box clips whatever is drawn outside it -- including the active
   tile's glow ring -- so the grid keeps a few pixels of room inside its own
   edge, and a matching negative margin keeps the layout where it was. */
.live__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 18vw, 220px), 1fr));
  grid-auto-rows: minmax(clamp(58px, 11vh, 118px), auto);
  gap: clamp(8px, 1.2vw, 12px);
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  margin: -6px;
}
.live__tile {
  font-size: clamp(.86rem, 1.5vw, 1.1rem) !important;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
  color: var(--cream);
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
  overflow-wrap: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.live__tile:active { transform: scale(.97); background: var(--panel-press); }
.live__tile:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.live__tile.is-active {
  border-color: var(--lamp);
  background: linear-gradient(180deg, #3a2c1c 0%, #261d14 100%);
  color: #fff8ec;
  box-shadow: 0 0 0 1px var(--lamp), 0 0 16px rgba(255,155,47,.18);
}
@media (hover: hover) and (pointer: fine) {
  .live__tile:hover:not(.is-active) { border-color: var(--edge-hi); background: #3a322b; }
}

/* ---- pads ---- */

.live__pads {
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .live__pads { grid-template-columns: repeat(2, 1fr); }
}

.pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  min-height: clamp(96px, 16vh, 140px);
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(180deg, #2e2822 0%, #1f1a16 100%);
  color: var(--cream);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px rgba(0,0,0,.4);
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .15s ease;
}
.pad:active:not(:disabled) { transform: scale(.97); }
.pad:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
.pad:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .pad:hover:not(:disabled) { border-color: var(--edge-hi); }
}

.pad__lamp {
  position: absolute;
  top: 14px; left: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--lamp-dim);
  border: 1px solid #000;
  transition: background .15s ease, box-shadow .15s ease;
}
.pad__label {
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pad__sub {
  font-size: .76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* on: amber lamp and edge */
.pad.is-on { border-color: #7a5426; background: linear-gradient(180deg, #3a2c1c 0%, #261d14 100%); }
.pad.is-on .pad__lamp { background: var(--lamp); box-shadow: 0 0 12px var(--lamp-glow); }
.pad.is-on .pad__sub { color: #efc792; }
.pad.is-connecting .pad__lamp { background: var(--lamp); animation: pulse 1s ease-in-out infinite; }

/* recording: red, and the lamp pulses so it can't be missed */
.pad.is-rec.is-live { border-color: #8a3630; background: linear-gradient(180deg, #3a1f1d 0%, #261615 100%); }
.pad.is-rec.is-live .pad__lamp {
  background: var(--fault);
  box-shadow: 0 0 14px rgba(208,69,60,.6);
  animation: pulse 1.1s ease-in-out infinite;
}
.pad.is-rec.is-live .pad__sub { color: #f0b3ad; font-size: .95rem; }

/* ---- foot ---- */

.live__foot { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.live__pick { max-width: 100%; }
.live__keys { margin: 0; font-size: .72rem; color: #908479; }
@media (hover: none) { .live__keys { display: none; } }   /* no keyboard, no pedal hints */

/* entry button in the header */
.live-enter .listen__lamp { background: var(--lamp-dim); }

/* ---------------------------------------------------------------- demo */

.demo-bar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
  padding: 10px 20px;
  background: repeating-linear-gradient(135deg, #2a2016 0 14px, #251c13 14px 28px);
  border-bottom: 1px solid #000;
  font-size: .8rem;
  color: #efc792;
}
.demo-bar:not([hidden]) { animation: drop-in .22s ease-out; }
.demo-bar__tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lamp);
  color: #1a120a;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.demo-bar__text { flex: 1 1 220px; }
.demo-bar .act { padding: 6px 12px; }

.chassis__right { display: inline-flex; align-items: center; gap: 14px; }
.chassis__demo {
  padding: 3px 10px;
  border: 1px solid #3b322a;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
@media (hover: hover) and (pointer: fine) {
  .chassis__demo:hover { color: var(--cream); border-color: var(--edge-hi); }
}
.chassis__demo:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

/* ================================================================
   INTERACTION STATES AND TOUCH TARGETS
   Deliberately last: hover, press and ON-state feedback that has to win
   over the component defaults above, and roomier targets for fingers.
   tests/ui_audit.py measures all of it -- rerun it after changes here.
   ================================================================ */

/* A switch that's ON used to show no hover or press at all: .switch.is-on and
   .switch:hover have equal specificity, and is-on comes later, so it won.
   These put the feedback on top of the lit state instead. */
@media (hover: hover) and (pointer: fine) {
  .switch.is-on:hover { background: #45331f; border-color: #9a6a30; }
  .midtab:hover { background: rgba(255,255,255,.035); color: var(--cream); }
  .midtab.is-current:hover { background: rgba(255,155,47,.1); color: #fff8ec; }
  .importer__check:hover { color: var(--cream); }
  .importer__text:hover, .importer__bank input:hover,
  .ask__field input:hover, .ask__field select:hover { border-color: var(--edge-hi); }
  input[type="checkbox"]:hover { filter: brightness(1.2); }
}
.switch.is-on:active { background: #2a2016; }
.midtab:active { background: var(--panel-press); }
.group__toggle:active { background: rgba(255,255,255,.06); }
.importer__close:active { background: var(--panel-press); }
.dry-toggle:active { background: var(--panel-press); }
.takes__badge.is-action:active { background: #2a2016; }
input[type="checkbox"]:active { transform: scale(.9); }
.choice:active, .ask__field select:active { background: #100d0b; }

input[type="checkbox"] { transition: filter .12s ease, transform .08s ease; }

/* ---- tap targets: 24 px at the very least (WCAG 2.2), roomier for fingers ---- */
@media (pointer: coarse) {
  .mini { min-height: 34px; }
  .bank { min-height: 34px; }
  .takes__badge.is-action { padding: 8px 12px; }
}