/* The channel strip · Fill The Room · The Cultivation Foundation
   Control colours follow the board, not the brand: they are how a real desk
   tells you what a knob does before you read its label. */
:root{
  --k-level:#b1283c; --k-pan:#1d1d1f; --k-aux:#8d9096;
  --k-fx:#e4b63a;    --k-eq:#3f86c4;  --k-gain:#b1283c;
  --k-body:#cfd2d6;  --k-skirt:#2a2b2e; --k-tick:#8a8d93;
  /* The digital desk is a lit screen in a dark room and has to read as one,
     so it carries its own instrument palette rather than the page's. Declared
     here, in one place, and used as variables everywhere below. */
  --d-case:#0f1113;  --d-screen:#15181c; --d-plot:#0d1013;
  --d-line:#2a3037;  --d-grid:#1d2126;   --d-edge:#39404a;
  --d-btn:#1b1f24;   --d-text:#dfe3e7;   --d-bright:#ffffff;
  --d-label:#8d97a3; --d-dim:#6f7984;    --d-btntext:#aeb6c0;
  --d-ink:#17191c;   --d-ok:#6fbf73;     --d-warn:#d9707e;
  --d-seltext:#d8e8f6;
}
/* ⛔ The desk breaks out of the reading column. Nathan, 6 Oct: "these are the
   types of visuals I want to see... this close up and in depth so they can
   actually see what we have going on." A 780px measure is right for prose and
   wrong for a mixing desk, and it is fatal for two desks side by side. */
.deskwrap{width:min(1240px,calc(100vw - 2rem));position:relative;left:50%;
  transform:translateX(-50%)}

.dk__bar{display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:center;
  margin:0 0 .3rem;padding:.26rem .55rem;background:var(--bg-soft);
  border:1px solid var(--rule);border-radius:8px}
.dk__bar b{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.dk__seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;background:var(--bg-card)}
.dk__seg button{appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.74rem;padding:.25rem .7rem;color:var(--ink-soft)}
.dk__seg button.on{background:var(--bronze);color:var(--bg);font-weight:600}
.dk__hint{font-size:.72rem;color:var(--muted);flex:1 1 14rem;margin:0;
  line-height:1.3}

/* ⛔ align-items:stretch, not flex-start. A stereo strip has two fewer knobs
   than a mono one, so left alone the board comes out ragged and the MUTE row
   steps up and down across it. On a real desk every control lines up, and a
   free program is exactly the thing that cannot afford to look free. */
#desk{padding:.2rem .1rem .3rem}
#desk.dk--analog{display:flex;gap:.5rem;overflow-x:auto;align-items:stretch}
#desk.dk--digital{display:block}
#desk.dk--compare{display:block}
.dk__scroll{display:flex;gap:.5rem;overflow-x:auto;align-items:stretch;
  padding-bottom:.4rem}
.strip{flex:0 0 auto;width:var(--strip-w,122px);background:var(--bg-card);
  border:1px solid var(--rule);border-radius:8px;padding:.3rem .22rem .35rem;
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  box-shadow:var(--shadow)}
/* ⛔ Two knobs to a row. A real strip is a metre of aluminium and you look
   down it; a screen is not, and a 1,100px strip means you can never see a
   channel and its level at the same time. The control set is unchanged —
   only how many fit across. ⛔ ONLY knobs go in this grid: a grid with mixed
   element and bare-text children invents extra cells, which is the bug that
   put one word per line on the curriculum. */
.dk__knobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 .05rem;width:100%;justify-items:center}
.dk__lvl{width:100%;display:flex;flex-direction:column;align-items:center;
  border-top:1px solid var(--rule);margin-top:auto;padding-top:.12rem}
.strip.on{border-color:var(--bronze);box-shadow:0 0 0 2px var(--bronze-glow)}
.strip.ring{animation:dkring .5s linear infinite alternate}
@keyframes dkring{to{border-color:var(--k-level)}}
.strip .slab{font-size:.6rem;font-weight:700;letter-spacing:.02em;
  text-align:center;line-height:1.1;min-height:2.2em;color:var(--ink)}
.strip .chno{font-size:.52rem;letter-spacing:.08em;color:var(--muted);line-height:1}

/* the input pair — XLR over a 1/4" jack, the way it sits on the board */
.dk__in{display:flex;gap:.22rem;align-items:center;justify-content:center;
  width:100%;margin:.04rem 0 .02rem}
.dk__jack{width:13px;height:13px;border-radius:50%;background:var(--k-skirt);
  border:1px solid var(--k-tick);position:relative}
.dk__jack.xlr::after{content:"";position:absolute;inset:2px;border-radius:50%;
  background:radial-gradient(circle at 50% 32%,var(--k-tick) 0 1.6px,transparent 1.7px),
             radial-gradient(circle at 30% 68%,var(--k-tick) 0 1.6px,transparent 1.7px),
             radial-gradient(circle at 70% 68%,var(--k-tick) 0 1.6px,transparent 1.7px)}
.dk__jack.ts::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--k-tick)}
.dk__jlab{font-size:.46rem;letter-spacing:.04em;color:var(--muted);line-height:1}

/* ⛔ THE KNOBS ARE SIZED TO THE BOARD, NOT TO THE SCREEN. Nathan, 6 Oct:
   "the knobs on the actual mixer aren't even this big... I should be able to
   see the session, the desk, and the actual mixing board all on one screen."
   A real strip is dense — that density IS the instrument, because you take in
   the whole desk at a glance. A 44px knob was flattering and made the board
   taller than the window, which is the opposite of how a desk works. */
.knob{width:var(--knob-w,34px);text-align:center;touch-action:none;
  cursor:ns-resize;user-select:none}
.knob svg{display:block;margin:0 auto;width:var(--knob-px,30px);height:auto}
.knob .kl{font-size:.5rem;letter-spacing:.06em;color:var(--muted);
  display:block;margin-top:-3px;line-height:1.15}
.knob .kv{font-size:.52rem;color:var(--ink-soft);line-height:1.15;
  font-variant-numeric:tabular-nums}
.knob:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;
  border-radius:8px}

.fader{height:84px;width:34px;display:flex;align-items:center;
  justify-content:center;touch-action:none}
.fader input{-webkit-appearance:none;appearance:none;width:78px;height:20px;
  transform:rotate(-90deg);background:transparent;cursor:ns-resize}
.fader input::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:var(--k-skirt)}
.fader input::-moz-range-track{height:6px;border-radius:3px;
  background:var(--k-skirt)}
.fader input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:30px;
  margin-top:-12px;border-radius:3px;background:var(--k-body);
  border:1px solid var(--k-skirt);
  box-shadow:inset 0 0 0 2px var(--k-level)}
.fader input::-moz-range-thumb{width:15px;height:30px;border-radius:3px;
  background:var(--k-body);border:1px solid var(--k-skirt);
  box-shadow:inset 0 0 0 2px var(--k-level)}

/* ⛔ The meter is segmented, not a smooth bar. A smooth bar beside a real
   fader reads as a second fader, and a student will try to drag it. An LED
   ladder is unmistakably a readout. */
.mtr{width:10px;height:34px;background:var(--k-skirt);border-radius:3px;
  position:relative;overflow:hidden;border:1px solid var(--k-tick)}
.mtr i{position:absolute;left:1px;right:1px;bottom:1px;display:block;
  background:linear-gradient(to top,var(--bronze),var(--k-fx) 72%,var(--k-level))}
.mtr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to top,transparent 0 4px,
    var(--k-skirt) 4px 5.5px)}
.mtr u{position:absolute;left:1px;right:1px;height:2px;background:var(--bg);z-index:2}
.vd{font-size:.46rem;letter-spacing:.05em;padding:.03rem .2rem;border-radius:3px;
  background:var(--bg-soft);color:var(--muted)}
.vd.good{color:var(--bronze-deep)} .vd.clip{color:var(--k-level);font-weight:700}
.vd.hot{color:var(--k-fx)} .vd.low,.vd.lowish{color:var(--muted)}

.strip .btns{display:flex;gap:.16rem;margin-top:.1rem}
.strip .btns button{appearance:none;font:inherit;font-size:.46rem;
  letter-spacing:.03em;padding:.1rem .25rem;border-radius:3px;cursor:pointer;
  border:1px solid var(--rule);background:var(--bg-soft);color:var(--ink-soft)}
.strip .btns button.on{background:var(--k-level);color:var(--bg);
  border-color:var(--k-level)}
.strip select.mic{font:inherit;font-size:.5rem;width:100%;padding:.04rem;
  border:1px solid var(--rule);border-radius:4px;background:var(--bg);
  color:var(--ink)}

.dk__master{flex:0 0 auto;width:96px;background:var(--bg-soft);
  border:1px solid var(--bronze);border-radius:8px;padding:.3rem .25rem .35rem;
  display:flex;flex-direction:column;align-items:center;gap:.08rem}
.dk__master .slab{font-size:.56rem;font-weight:700;letter-spacing:.05em;
  color:var(--bronze-deep)}
.dk__phantom{display:flex;align-items:center;gap:.22rem;font-size:.46rem;
  letter-spacing:.05em;color:var(--muted);cursor:pointer}
.dk__led{width:9px;height:9px;border-radius:50%;background:var(--k-skirt);
  border:1px solid var(--k-tick)}
.dk__led.on{background:var(--k-level);box-shadow:0 0 5px var(--k-level)}
/* ------------------------------------------------------------------ digital
   ⛔ The whole point of showing a digital desk beside an analog one is that
   the SIGNAL IS THE SAME and the SURFACE IS NOT. An analog board gives every
   channel its own knobs and you read the whole show at a glance. A digital
   board gives you ONE set of controls and a SELECT button, so nothing is
   where you left it until you go and look. That is the lesson; the screen is
   just how it gets told. */
.dg{background:var(--d-case);border:1px solid var(--k-skirt);border-radius:10px;
  padding:.45rem;color:var(--d-text);display:flex;flex-direction:column;gap:.32rem;
  min-width:0}
.dg__layers{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.dg__layers button{appearance:none;font:inherit;font-size:.64rem;
  letter-spacing:.07em;padding:.3rem .55rem;border-radius:5px;cursor:pointer;
  border:1px solid var(--d-edge);background:var(--d-btn);color:var(--d-btntext)}
.dg__layers button.on{background:var(--k-fx);border-color:var(--k-fx);color:var(--d-ink);
  font-weight:700}
.dg__scene{margin-left:auto;font-size:.6rem;letter-spacing:.08em;color:var(--d-dim)}

.dg__screen{background:var(--d-screen);border:1px solid var(--d-line);border-radius:7px;
  padding:.4rem;display:grid;gap:.3rem;
  grid-template-columns:minmax(0,1fr)}
.dg__scrhead{grid-column:1/-1;display:flex;align-items:baseline;gap:.5rem;
  border-bottom:1px solid var(--d-line);padding-bottom:.35rem}
.dg__scrhead b{font-size:.92rem;color:var(--d-bright);letter-spacing:.02em}
.dg__scrhead span{font-size:.62rem;letter-spacing:.1em;color:var(--d-dim)}
.dg__scrhead em{margin-left:auto;font-style:normal;font-size:.6rem;
  letter-spacing:.08em;color:var(--k-fx)}
.dg__panel{min-width:0}
.dg__ptitle{font-size:.58rem;letter-spacing:.12em;color:var(--d-dim);
  margin:0 0 .25rem}
/* ⛔ explicit height. preserveAspectRatio="none" + width:100% means the
   height follows the page width — a 420x120 box came out 340px tall and
   pushed the board off the screen. The curve does not need to be tall. */
.dg__eq{width:100%;height:74px;display:block;background:var(--d-plot);
  border-radius:5px}
.dg__bands{display:flex;gap:.2rem;margin-top:.3rem}
.dg__band{flex:1;text-align:center;font-size:.55rem;color:var(--d-label);
  background:var(--d-btn);border-radius:4px;padding:.2rem .1rem;cursor:ns-resize;
  touch-action:none;border:1px solid transparent}
.dg__band:focus-visible{outline:2px solid var(--k-fx);outline-offset:2px}
.dg__band b{display:block;color:var(--k-eq);font-size:.66rem;
  font-variant-numeric:tabular-nums}
.dg__sends{display:flex;flex-direction:column;gap:.18rem}
.dg__send{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2rem;
  align-items:center;gap:.3rem;font-size:.56rem;color:var(--d-label)}
.dg__sbar{height:7px;background:var(--d-btn);border-radius:4px;overflow:hidden}
.dg__sbar i{display:block;height:100%;background:var(--k-aux)}
.dg__sbar.fx i{background:var(--k-fx)}
.dg__dyn{display:flex;gap:.3rem;margin-top:.35rem}
.dg__chip{flex:1;font-size:.54rem;letter-spacing:.06em;text-align:center;
  padding:.22rem;border-radius:4px;background:var(--d-btn);color:var(--d-dim);
  border:1px solid var(--d-line)}
.dg__chip.on{color:var(--d-ink);background:var(--d-ok);border-color:var(--d-ok);
  font-weight:700}

/* ---- the touchscreen pages: navigation is the lesson -------------------- */
.dg__pages{grid-column:1/-1;display:flex;gap:.2rem;flex-wrap:wrap;
  border-bottom:1px solid var(--d-line);padding-bottom:.3rem;margin-bottom:.1rem}
.dg__pages button{appearance:none;font:inherit;font-size:.6rem;letter-spacing:.09em;
  padding:.26rem .7rem;border-radius:5px 5px 0 0;cursor:pointer;
  border:1px solid var(--d-edge);border-bottom:0;background:var(--d-btn);
  color:var(--d-btntext)}
.dg__pages button.on{background:var(--k-eq);border-color:var(--k-eq);
  color:var(--d-bright);font-weight:700}
.dg__body{grid-column:1/-1;min-width:0}
.dg__grid2{display:grid;gap:.5rem;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.dg__one{min-width:0}
.dg__axis{display:flex;justify-content:space-between;font-size:.5rem;
  color:var(--d-dim);margin-top:.12rem}
.dg__tip{font-size:.62rem;line-height:1.45;color:var(--d-label);margin:.4rem 0 0}
.dg__tip b{color:var(--k-fx)}
.dg__bands--col{flex-direction:column}
.dg__bands--col .dg__band{text-align:left;display:flex;justify-content:space-between;
  padding:.22rem .4rem}
.dg__bands--col .dg__band b{display:inline}

/* PATCH — the socket and the channel, which is where the rear panel comes in */
.dg__patch{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  background:var(--d-plot);border-radius:6px;padding:.5rem}
.dg__sock{display:flex;flex-direction:column;align-items:center;gap:.14rem;
  min-width:5rem;padding:.35rem .5rem;border:1px solid var(--d-edge);
  border-radius:5px;background:var(--d-btn)}
.dg__sock.on{border-color:var(--k-eq);background:var(--d-screen)}
.dg__sock b{font-size:.62rem;color:var(--d-bright);letter-spacing:.05em}
.dg__sock em{font-style:normal;font-size:.52rem;color:var(--d-dim);text-align:center}
.dg__arrow{color:var(--d-dim);font-size:1.1rem}

/* SEL / CUE / ON — the three buttons every digital desk puts under a fader */
.dg__chb{flex:1 0 auto;min-width:58px;display:flex;flex-direction:column;
  gap:.08rem;align-items:stretch;padding:.12rem;border-radius:5px;
  border:1px solid transparent}
.dg__chb.on{border-color:var(--k-eq);background:var(--d-screen)}
.dg__chb button{appearance:none;font:inherit;font-size:.5rem;letter-spacing:.07em;
  padding:.16rem 0;border-radius:3px;cursor:pointer;border:1px solid var(--d-edge);
  background:var(--d-btn);color:var(--d-btntext)}
.dg__selb.on{background:var(--k-eq);border-color:var(--k-eq);color:var(--d-bright)}
.dg__cue.on{background:var(--k-fx);border-color:var(--k-fx);color:var(--d-ink)}
.dg__on.on{background:var(--d-ok);border-color:var(--d-ok);color:var(--d-ink)}
.dg__chname{font-size:.48rem;color:var(--d-label);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg__chno{font-size:.46rem;color:var(--d-dim);text-align:center}
.dg__layers button.ghost{opacity:.35;cursor:default}
.dg__chip.bad{background:var(--k-level);border-color:var(--k-level);
  color:var(--d-bright);font-weight:700}

/* ⛔ the digital bank's faders are shorter than the analog board's: the screen
   above them is doing the detailed work, so these are for riding levels, not
   for reading a scale. It buys back the height the screen needs. */
.dg__bank .fader{height:62px;width:30px}
.dg__bank .fader input{width:56px}
.dg__ch{font-size:.5rem}
.dg__sel{gap:.18rem;padding-bottom:0}
.dg__chname{font-size:.45rem}
.dg__layers{gap:.22rem}
.dg__layers button{font-size:.58rem;padding:.22rem .5rem}
@media (max-width:760px){ .dg__grid2{grid-template-columns:minmax(0,1fr)} }

.dg__sel{display:flex;gap:.25rem;overflow-x:auto;padding-bottom:.1rem}
.dg__sel button{flex:1 0 auto;min-width:54px;appearance:none;font:inherit;
  font-size:.58rem;letter-spacing:.04em;padding:.3rem .2rem;border-radius:5px;
  cursor:pointer;border:1px solid var(--d-edge);background:var(--d-btn);color:var(--d-btntext);
  line-height:1.25}
.dg__sel button small{display:block;font-size:.52rem;color:var(--d-dim)}
.dg__sel button.on{background:var(--k-eq);border-color:var(--k-eq);color:var(--d-bright)}
.dg__sel button.on small{color:var(--d-seltext)}
.dg__sel button.muted{border-color:var(--k-level);color:var(--d-warn)}

.dg__bank{display:flex;gap:.3rem;overflow-x:auto;padding-top:.15rem}
.dg__ch{flex:1 0 auto;min-width:54px;text-align:center;font-size:.55rem;
  color:var(--d-label)}
.dg__ch .fader input::-webkit-slider-runnable-track{background:var(--d-line)}
.dg__ch .fader input::-moz-range-track{background:var(--d-line)}
/* ⛔⛔ THE BANK USES THE ANALOG METER. Not one like it — the same .mtr, the
   same markup, the same scale, the same held peak. The first attempt here
   invented a .dg__m: full channel width, 30px tall, its own gradient off
   --d-ok/--d-warn. It read as a wide horizontal bar sitting pink at rest,
   which is not what a meter looks like on any desk in the world, and it put a
   SECOND meter design in front of a student who has to learn to read one.
   Nathan's own rule, applied to myself: stop reinventing what already works. */
.dg__ch{position:relative}
.dg__ch.on{background:rgba(255,255,255,.05);border-radius:4px}
.dg__ch .mtr{margin:0 auto .22rem}
.dg__note{font-size:.64rem;line-height:1.35;color:var(--ink-soft);
  background:var(--bg-soft);border-left:3px solid var(--bronze);
  border-radius:0 7px 7px 0;padding:.3rem .55rem;margin:.1rem 0 0}
.dg__note b{color:var(--bronze-deep)}

/* side by side */
.dk__compare{display:grid;gap:.9rem;align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){ .dk__compare{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dk__half{min-width:0}
.dk__half>h4{margin:0 0 .4rem;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.dk__half .dk__scroll{overflow-x:auto}

/* ⛔ At the narrowest the knobs go one-up instead of two, so a strip never
   gets so tight the markings stop being readable. */
.strip.tight .dk__knobs{grid-template-columns:minmax(0,1fr)}
.strip.tight .knob{width:44px}

@media (max-width:640px){ .knob{width:46px}
  .dg__screen{grid-template-columns:minmax(0,1fr)} }