/* Out of Order. 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. */

/* No :root --accent here. logical-art.css sets --accent on body, once for the
   whole studio, from --machine with the studio instrument as its fallback. body
   beats :root, so a copy in this sheet would be dead code -- dead code that
   drifts: merge-collapse's said #7fb2d9 against the roster's #6090a0 and
   signature's said #a78bd0 against #f8c898, and both pages had been rendering
   the roster's colour all along. The accent belongs to machines.json and
   reaches the page through la-machines.css.

   Written without braces on purpose: _floor_blocks parses this template with a
   brace-matching regex that does not skip comments, so a comment containing a
   declaration reads as a rule nothing declares and gets appended to every
   sheet on every rebuild. Which is exactly what the first version of this
   comment did. */

/* 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;
}
/* No .oo-sr here on purpose. The shared shell declares [class$="-sr"] once,
   because forty-five machines each carrying their own copy is how five of them
   came to be missing it entirely -- see logical-art.css. */

/* No .oo-steplabel or .oo-stepno here on purpose. The shared shell declares
   [class$="-steplabel"] and [class$="-stepno"] once, because fifty-nine copies
   drifted into eight spellings each and the groups turned out to line up with
   the DAY each sheet was created rather than with any decision. Override in
   this sheet if a machine genuinely wants a different step number; same
   specificity, later in the cascade, so it wins. See logical-art.css. */

.oo-hint { margin: 0 0 var(--la-space-3); color: var(--la-ink-dim); }
.oo-btn {
  padding: 0.45rem 0.9rem; border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px); background: var(--la-raised);
  color: var(--la-ink); font-family: var(--la-font-mono); font-size: var(--la-text-sm);
  cursor: pointer;
}
.oo-btn:hover { border-color: var(--accent); }
.oo-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.oo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.oo-table { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.oo-table th, .oo-table td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline);
}
.oo-table thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.oo-table tbody th, .oo-table td {
  font-family: var(--la-font-mono); font-size: 0.8rem; color: var(--la-ink-dim); font-weight: 400;
}
/* The row that matters, marked by a rule and by a word in its own cell as well
   as by colour, so it survives forced colours and a monochrome print. */
.oo-table tr[data-mark="yes"] td { color: var(--accent); }
.oo-table tr[data-mark="yes"] th {
  border-left: 3px solid var(--accent); padding-left: 0.45rem; color: var(--accent);
}
.oo-btn:disabled { opacity: 0.45; cursor: default; }
.oo-btn:hover:not(:disabled) { border-color: var(--accent); }
.oo-table tr[data-mark="bad"] td { color: var(--accent); }
.oo-table tr[data-mark="bad"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; }
.oo-table tr[data-mark="here"] { background: var(--la-raised); }
/* The drawing, which every machine has and every machine has styled itself. */
.dia .dia-lede { fill: var(--la-ink); font-size: 16px; }

/* ---- this machine ------------------------------------------------------- */

.oo-wrap { display: flex; flex-direction: column; gap: var(--la-space-3); }
.oo-sub { font-size: var(--la-text-base); margin: 0 0 var(--la-space-2); }
.oo-table { font-family: var(--la-font-mono); }
.oo-table td { white-space: nowrap; }
/* What an instruction waits for is the column the page is about, so it is the
   one that may wrap rather than push the table sideways. */
.oo-haz { white-space: normal; color: var(--la-ink-dim); }

.oo-models { display: flex; flex-wrap: wrap; gap: var(--la-space-2); }
.oo-model {
  padding: 0.45rem 0.9rem; border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px); background: var(--la-raised);
  color: var(--la-ink); font-family: var(--la-font-mono);
  font-size: var(--la-text-sm); cursor: pointer; min-height: 24px;
}
.oo-model:hover { border-color: var(--accent); }
.oo-model[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.oo-model:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The row for the machine being shown. Marked by WEIGHT: this machine's accent
   is null, so var(--accent) is the studio instrument and dimmer than body ink,
   and colouring the current row would make it recede. */
.oo-current td { font-weight: 700; }

.oo-note { margin: 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.oo-said { margin: 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.oo-which { color: var(--la-ink-dim); font-family: var(--la-font-mono); font-weight: 400; }