/* The page frame. Three rules that every machine here declares for itself, and
   the ones that shipped without them ran the full width of a desktop window
   against the 640px the rest hold. These five were built without them too: the
   lede measured 1,264px and about 112 characters against the studio's own 600
   and 53, which is past WCAG 1.4.8's 80 as well. Caught by looking at the page
   and then measuring it against a sibling, which is what step six of the
   pipeline is for. */
* { 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, and a
   contrast checker measures against white and is correct to fail it. */
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;
}

/* CORDIC. The direction of each rotation is the only thing marked, because the
   overshoot-and-correct is the mechanism. */
/* The list scrolls, not the lines in it.
   Each line is one long monospace run, so at 390px every one of them
   overflowed and became a scrollable region of its own. axe was right to call
   that out: a region you can scroll and cannot reach by keyboard is unusable
   without a mouse, and there were thirty-three of them on one page. Making
   each line focusable would have satisfied the rule and left the page with
   thirty-three tab stops, so the scroll moved up to the list, which is one
   stop and reads as one thing. */
.cd-list {
  list-style: none;
  margin: var(--la-space-3) 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  overflow-x: auto;
}
.cd-list:focus-visible { outline: 2px solid var(--la-focus, currentColor); outline-offset: 2px; }
.cd-step, .cd-atan {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.78rem;
  color: var(--la-ink-faint);
  white-space: pre;
}
.cd-step[data-dir="up"] { color: var(--cd-accent, #a0a8c8); }
.cd-step[data-dir="down"] { color: var(--la-ink-dim); }
.cd-step[data-dir="start"] { color: var(--la-ink); }
.cd-controls { display: flex; gap: var(--la-space-3); align-items: center; flex-wrap: wrap; }
.cd-result { font-family: ui-monospace, "DejaVu Sans Mono", monospace; color: var(--la-ink); }
.cd-said, .cd-gain { color: var(--la-ink-dim); min-height: 2.6em; }
.cd-wrap [hidden] { display: none !important; }

/* Screen-reader only. Without this the table caption renders visibly, which is
   what la-machine-audit's dead-class finding was pointing at. Same shape as
   every other machine's -sr class. */
.cd-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The checks table. Shares the studio's table look; declared here because the
   page links no sheet that defines it. */
.cd-table, .cd-table-checks, .cd-checks {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.84rem;
}

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

/* ---- Stage labels. The tier's mark, same shape as every other nibble. ---- */
.cd-steplabel {
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  margin-top: var(--la-space-4);
  margin-bottom: var(--la-space-2);
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--la-ink-faint);
}

.cd-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border: 1px solid var(--la-hairline-strong);
  border-radius: 50%;
  color: var(--la-ink-dim);
}