/* 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;
}

/* Context Switch. The registers are the whole subject, so they are the only
   thing drawn, and a register that came back wrong is marked in the table
   rather than in the picture: the picture cannot show it, which is the point. */
.cs-step, .cs-wrap { margin: var(--la-space-3) 0; }

.cs-regs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.3rem;
  margin: var(--la-space-3) 0;
}

.cs-reg {
  display: flex;
  justify-content: space-between;
  gap: var(--la-space-2);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius, 4px);
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.72rem;
}

.cs-name { color: var(--la-ink-faint); }
.cs-val { color: var(--la-ink); }
.cs-reg[data-state="changed"] { border-color: var(--cs-accent, #8ca85c); }

.cs-controls { display: flex; gap: var(--la-space-3); align-items: center; flex-wrap: wrap; }
.cs-read, .cs-said { color: var(--la-ink-dim); min-height: 2.6em; }

/* A register that did not come back. Marked with a border as well as colour,
   because colour alone is not a signal everybody receives. */
#cs-table td[data-bad="true"] {
  color: var(--la-ink);
  border-left: 3px solid var(--cs-accent, #8ca85c);
  font-weight: 600;
}

.cs-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. */
.cs-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;
}

.cs-btn:hover { border-color: var(--cs-accent, var(--la-instrument)); }
.cs-btn[aria-pressed="true"] { border-color: var(--cs-accent, var(--la-instrument)); color: var(--la-ink); }
.cs-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. */
.cs-checks { width: 100%; border-collapse: collapse; font-size: 0.86rem; }

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

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

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