/* The page frame, which every machine here declares for itself. Without it the
   column runs the full width of a desktop window against the 640px the rest
   hold, and the lede measures past WCAG 1.4.8's 80 characters. */
* { margin: 0; padding: 0; box-sizing: border-box; }

main.nibble {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

/* The measure belongs to the column, not to every block inside it. */
main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Without this the browser paints a dark canvas from color-scheme, so the page
   LOOKS right in a screenshot while having no background colour at all. */
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;
}

/* The Pipeline. One column per cycle, one row per instruction, and the gap
   inside a row is a stall rather than an absence: an instruction that has
   started and not finished is occupying the machine either way. */
.pl-step, .pl-wrap { margin: var(--la-space-3) 0; }
.pl-grid { margin: var(--la-space-3) 0; overflow-x: auto; }
.pl-grid:focus-visible { outline: 2px solid var(--la-focus, currentColor); outline-offset: 2px; }

.pl-row { display: flex; gap: 0.2rem; align-items: center; margin-bottom: 0.2rem; }

.pl-tag {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.72rem;
  color: var(--la-ink-faint);
  min-width: 2rem;
}

.pl-cell {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.7rem;
  width: 1.6rem;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--la-radius, 4px);
  color: var(--la-ink-faint);
}

.pl-cell[data-stage="fetch"], .pl-cell[data-stage="decode"],
.pl-cell[data-stage="execute"], .pl-cell[data-stage="write"] {
  color: var(--la-page);
  background: var(--pl-accent, #947898);
  border-color: var(--pl-accent, #947898);
}
.pl-cell[data-stage="decode"] { opacity: 0.85; }
.pl-cell[data-stage="execute"] { opacity: 0.7; }
.pl-cell[data-stage="write"] { opacity: 0.55; }

/* A stall is drawn, not left blank, because the instruction is still there. */
.pl-cell[data-stage="stall"] {
  border-style: dashed;
  border-color: var(--la-ink-dim);
  color: var(--la-ink-dim);
}

.pl-controls { display: flex; gap: var(--la-space-3); align-items: center; flex-wrap: wrap; }
.pl-read, .pl-said { color: var(--la-ink-dim); min-height: 2.6em; }
.pl-wrap [hidden] { display: none !important; }

/* The page's own button class. `la-btn` is used by the shared shell's markup
   but is defined by no stylesheet in this family, so a page that reaches for
   it renders browser-default buttons; la-machine-audit catches it. Each
   machine styles its own, which is what every other page here does. */
.pl-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: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.9rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.pl-btn:hover { border-color: var(--pl-accent, var(--la-instrument)); }
.pl-btn[aria-pressed="true"] { border-color: var(--pl-accent, var(--la-instrument)); color: var(--la-ink); }
.pl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* The verification table. Every machine here prints what it claimed and what
   it measured; these five shipped computing their claims and displaying none
   of them, because the engines had verify() and the pages had no table with
   data-la-verify for the shared component to fill. la-verify.js was loaded,
   found nothing to attach to, and did nothing, quietly. */
.pl-checks { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

.pl-checks th, .pl-checks td {
  text-align: left;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--la-hairline);
  vertical-align: top;
}

.pl-checks th[scope="row"] { font-weight: 400; color: var(--la-ink-dim); }

.pl-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}