/* Memory Ordering. 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 .mo-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 .mo-steplabel or .mo-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. */

.mo-hint { margin: 0 0 var(--la-space-3); color: var(--la-ink-dim); }
.mo-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;
}
.mo-btn:hover { border-color: var(--accent); }
.mo-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.mo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mo-table { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.mo-table th, .mo-table td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline);
}
.mo-table thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.mo-table tbody th, .mo-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. */
.mo-table tr[data-mark="yes"] td { color: var(--accent); }
.mo-table tr[data-mark="yes"] th {
  border-left: 3px solid var(--accent); padding-left: 0.45rem; color: var(--accent);
}
.mo-btn:disabled { opacity: 0.45; cursor: default; }
.mo-btn:hover:not(:disabled) { border-color: var(--accent); }
.mo-table tr[data-mark="bad"] td { color: var(--accent); }
.mo-table tr[data-mark="bad"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; }
.mo-table tr[data-mark="here"] { background: var(--la-raised); }
/* A bit has no step labels, so nothing separates one panel from the next and
   the last line of one runs into the first line of the other. */
.mo-step + .mo-step { margin-top: var(--la-space-6); }
/* The drawing, which every machine has and every machine has styled itself. */
.dia .dia-lede { fill: var(--la-ink); font-size: 16px; }

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

.mo-wrap { display: flex; flex-direction: column; gap: var(--la-space-3); }
.mo-sub { font-size: var(--la-text-base); margin: 0 0 var(--la-space-2); }

/* The program. Two threads side by side where there is room, stacked where
   there is not: the operations are the point and they must stay readable at
   320px, which is where the render matrix looks. */
.mo-program { display: flex; flex-wrap: wrap; gap: var(--la-space-3); }
.mo-thread {
  flex: 1 1 14rem; padding: var(--la-space-3);
  border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken);
}
.mo-thread-head {
  margin: 0 0 var(--la-space-2); font-family: var(--la-font-mono);
  font-size: var(--la-text-sm); color: var(--la-ink-dim); font-weight: 600;
}
.mo-ops { margin: 0; padding-left: 1.2rem; }
.mo-op { font-family: var(--la-font-mono); font-size: var(--la-text-sm); }

.mo-models { display: flex; flex-wrap: wrap; gap: var(--la-space-2); }
.mo-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;
  /* 24px is the WCAG 2.5.8 AA floor and these are the page's main controls. */
  min-height: 24px;
}
.mo-model:hover { border-color: var(--accent); }
.mo-model[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.mo-model:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mo-note { margin: 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }

/* The outcome table. The accent marks the outcome this machine is about and
   nothing else: the row that says both threads read zero. */
.mo-seen td { color: var(--la-ink); }
.mo-unseen td { color: var(--la-ink-faint); }
.mo-table tbody tr:first-child.mo-seen td { color: var(--accent); font-weight: 600; }

/* The trace is a table now: the step, and the state after it. */
.mo-trace { font-family: var(--la-font-mono); }
.mo-trace td { white-space: nowrap; }
.mo-state { color: var(--la-ink-dim); }
.mo-addr { color: var(--la-ink-faint); font-size: var(--la-text-sm); margin: 0; }
.mo-who { color: var(--la-ink-dim); }
/* A drain is the store buffer doing the thing the whole page is about, so it
   is the one step marked.

   Marked by WEIGHT, not colour. This machine's accent is null -- the picker
   was run and the palette is full -- so var(--accent) resolves to the studio
   instrument, which is dimmer than body ink: measured 189,189,189 against
   231,235,238. Colouring the most important line in the trace made it recede,
   which is the opposite of marking it, and reading the rule would never have
   shown that. */
.mo-drain { font-weight: 700; }

.mo-position { margin: 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.mo-controls { display: flex; flex-wrap: wrap; gap: var(--la-space-2); }
.mo-said { margin: 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }

/* The model's name, repeated where its output is. */
.mo-which { color: var(--la-ink-dim); font-family: var(--la-font-mono); font-weight: 400; }

/* Thread 1's rows sit on a faint ground, so the interleaving is visible at a
   glance rather than only by reading the first column. Thread 0 needs no rule
   and therefore carries no class. */
.mo-trace .mo-t1 > td { background: var(--la-sunken); }
.mo-init { font-family: var(--la-font-mono); color: var(--la-ink); }