/* Board 2 of the ambience room: the live mixer.

   Everything structural is site.css and forge.css — the specimen card, the
   roundel, the red seal, the chip buttons, the habitat heading. These rules
   only lay out what Board 1 has no equivalent of: a conditions panel of
   chips, a five-stop stepper beside each layer, and the transport that
   carries the one red LISTEN seal.

   One pillar-box red on the page (art/street/STYLE.md, treatment A): the
   seal. The chips and steppers take the ink line and the paper, and say
   "chosen" by inverting to the ink, not by a second accent colour. */

.mixer { margin-top: 46px; }
.mixer[hidden] { display: none; }

.mixer-head { margin-bottom: 0; }
.mixer-head h2 {
  font-size: 27px;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---------- the conditions panel ---------- */

.mix-conditions { display: block; margin-top: 18px; }
.mix-conditions .specimen-in { padding: 13px 15px 14px; }

.cond-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  flex-wrap: wrap;
}
.cond-line + .cond-line { border-top: 1px dotted rgba(107, 91, 69, 0.5); }
.cond-label {
  font-family: var(--book);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  flex: 0 0 108px;
}
.cond-label::after { content: " \2014"; }
.cond-line .chips { flex: 1 1 240px; }

/* ---------- the transport ---------- */

.mix-transport {
  margin-top: 14px;
  border: 1px solid var(--ink);
  background: var(--paper-lift);
}
.mix-transport-in {
  border: 2px solid var(--ink);
  margin: 3px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mix-seal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px 4px 4px;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
}
.mix-seal:hover { background: var(--paper-deep); }
.mix-seal:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.mix-seal .seal {
  width: 42px;
  height: 42px;
  font-size: 15px;
  flex: none;
}
.mix-seal-text { display: flex; flex-direction: column; text-align: left; }
.mix-seal-name {
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
}
.mix-seal-text small {
  font-family: var(--book);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 12.5px;
  margin-top: 2px;
}

.mix-dials { display: flex; gap: 12px; flex-wrap: wrap; }
.mix-dials .pick { display: inline-flex; align-items: center; gap: 6px; }
.mix-dials .lbl {
  font-family: var(--book);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13px;
}
.mix-dials select,
.mix-dials input {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 3px 5px;
}
.mix-dials input { width: 90px; }

.mix-status {
  flex: 1 1 220px;
  margin: 0;
  font-family: var(--book);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
  min-height: 1.2em;
}
.mix-status.warn { color: var(--red-deep); font-style: normal; }

.mix-count-line {
  margin: 14px 0 0;
  font-family: var(--book);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14px;
}
.mix-count-line b {
  font-family: var(--headline);
  font-weight: 700;
  font-style: normal;
  font-size: 17px;
  color: var(--red);
}

/* ---------- the layer rows ---------- */

.mix-group { margin-top: 24px; }
.mix-group .habitat-head h3 {
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 14px;
  margin: 0;
}
.mix-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 900px) {
  /* twenty-two rows is a long board on a desktop; two columns keep the
     conditions panel and the seal in reach while reading down it */
  .mix-list { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
}
.mix-group-note {
  margin: 6px 0 0;
  font-family: var(--book);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

.mix-row .specimen-in { padding: 11px 13px 12px; display: flex; flex-direction: column; }
.mix-row .specimen-head { padding-bottom: 6px; }
.mix-row .roundel { flex: none; }
.mix-name { font-size: 18px; }
.mix-name small { display: block; }

.mix-phrase {
  margin: 7px 0 0;
  font-family: var(--book);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
}
.mix-note {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mix-note[hidden] { display: none; }

.mix-controls {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stepper { display: inline-flex; border: 1px solid var(--ink); }
.step-btn {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: none;
  border-right: 1px solid var(--ink);
  padding: 5px 9px;
  cursor: pointer;
}
.step-btn:last-child { border-right: none; }
.step-btn:hover:not(:disabled) { background: var(--paper-deep); }
.step-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper-lift); }
.step-btn:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.step-btn:disabled { cursor: default; color: rgba(107, 91, 69, 0.55); }

.stepper-off { border-color: rgba(107, 91, 69, 0.45); opacity: 0.65; }
.stepper-off .step-btn { border-right-color: rgba(107, 91, 69, 0.45); }
.stepper-off .step-btn[aria-pressed="true"] { background: rgba(107, 91, 69, 0.3); color: var(--paper-lift); }

.mix-dist { display: inline-flex; align-items: center; gap: 7px; }
.mix-dist-label {
  font-family: var(--book);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

/* a layer that is on, silent now, not yet heard, or not renderable here */
.mix-row.mix-on .specimen-in { background: var(--paper-lift); border-color: var(--ink); }
.mix-row.mix-silent .mix-phrase { color: var(--ink-soft); }
.mix-row.mix-unlisted .specimen-in,
.mix-row.mix-dead .specimen-in {
  background: var(--paper);
  border-style: dotted;
}
.mix-row.mix-unlisted .mix-name,
.mix-row.mix-dead .mix-name { color: var(--ink-soft); }

/* ---------- narrow ---------- */

@media (max-width: 620px) {
  .cond-label { flex: 1 1 100%; }
  .mix-transport-in { gap: 11px; }
  .mix-status { flex: 1 1 100%; }
  .mix-controls { gap: 9px; }
  .step-btn { padding: 5px 7px; font-size: 11px; }
  .mix-dist { flex: 1 1 100%; }
}