/* Added by scaffold-machine.py: the floor every page on this studio needs.
   Invisible in a screenshot, which is why it is generated and not remembered. */
/* Majority. The accent marks the thing this machine is about and nothing else.

   Everything above the first machine-specific rule is the floor every page on
   this studio needs, and it is generated rather than remembered: four separate
   gates caught all four of these missing on all five machines built on
   2026-08-17, and every one of them is invisible in a screenshot. */

:root { --accent: var(--la-instrument); }
/* Leaving the background out is the invisible one: the browser paints a dark
   canvas from color-scheme, so the page looks right while having no background
   colour at all, and a contrast checker then measures against white and is
   correct to fail it. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--la-font-ui);
  background: var(--la-page);
  color: var(--la-ink);
  line-height: var(--la-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Majority. No --accent is declared here on purpose.
 *
 * la-accent-pick.py was run on 2026-08-21 against the 52 published accents and
 * returned zero candidates: nothing clears both the deltaE >= 12 distance floor
 * and the 5.0:1 contrast floor. The palette is full. Inventing a colour under
 * the floor would make two machines read as one on the timeline, so this page
 * takes var(--la-instrument) like the other machines in that position.
 *
 * --la-hairline and --la-raised are the shared names. The first version of
 * this sheet read --la-rule and --la-surface, which nothing declares, so every
 * border and every panel background in it was thrown away by the browser and
 * the page looked flat rather than broken. la-css-var-audit caught it.
 *
 * The colour that is here carries one distinction: a cluster that cannot promise anything.
 */

.mj-panel { margin: var(--la-space-3) 0; }

.mj-hint { color: var(--la-ink-dim); margin-bottom: var(--la-space-2); }

.mj-knob {
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  flex-wrap: wrap;
  margin: var(--la-space-2) 0;
}

.mj-knob label { color: var(--la-ink-dim); min-width: 11rem; }

.mj-knob input[type="range"] { flex: 1 1 12rem; accent-color: var(--la-instrument); }

.mj-knob input[type="text"] {
  flex: 1 1 12rem;
  font-family: var(--la-font-mono);
  background: var(--la-raised);
  color: var(--la-ink);
  border: 1px solid var(--la-hairline);
  border-radius: 0.25rem;
  padding: 0.4rem 0.6rem;
  min-height: 2.75rem;
}

.mj-val {
  font-family: var(--la-font-mono);
  color: var(--la-ink);
  min-width: 3rem;
  text-align: right;
}


.mj-readout { margin: var(--la-space-2) 0; }

.mj-row {
  display: flex;
  justify-content: space-between;
  gap: var(--la-space-2);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--la-hairline);
}

.mj-row dt { color: var(--la-ink-dim); }

.mj-num { font-family: var(--la-font-mono); color: var(--la-ink); }

.mj-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--la-space-2) 0;
  font-size: 0.9rem;
}

.mj-table th,
.mj-table td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--la-hairline);
}

.mj-table thead th { color: var(--la-ink-dim); font-weight: 500; }

.mj-table td { font-family: var(--la-font-mono); }

/* The one thing the colour marks: a yes the filter had no right to give. */
.mj-table tbody tr[data-mark="yes"] td,
.mj-table tbody tr[data-mark="yes"] th { color: var(--la-instrument); }

.mj-table tbody tr[data-mark="here"] td,
.mj-table tbody tr[data-mark="here"] th {
  background: var(--la-raised);
  color: var(--la-ink);
}

.mj-say {
  color: var(--la-ink-dim);
  margin: var(--la-space-2) 0;
  max-width: 42rem;
}

/* The cluster itself. */
.mj-cluster { display: flex; flex-wrap: wrap; gap: var(--la-space-1); margin: var(--la-space-2) 0; }

.mj-machine {
  font-family: var(--la-font-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.25rem;
  background: var(--la-raised);
  color: var(--la-ink);
  border: 1px solid var(--la-hairline);
}

.mj-machine[data-down="yes"] {
  color: var(--la-ink-dim);
  border-style: dashed;
  text-decoration: line-through;
}

.mj-num[data-mark="bad"] { color: var(--la-instrument); }