/* CRC — a Logical Art nibble.
 *
 * One thing earns colour and it is the measured thing: whether the check
 * caught the corruption. Not the bits the burst flipped, which the reader put
 * there and already knows about. A flipped bit is marked structurally instead,
 * so when a burst is plainly visible and the check still says nothing you can
 * see both facts at once, which is the honest half of the machine.
 */
* { 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;
}

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

main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* Read but not seen. [hidden] is restated because any selector carrying a
   display value outranks the user-agent rule for the attribute, which has
   shipped broken in this family three times. */
.cr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cr-sr[hidden] { display: none; }

/* .cr, not .hm. This block was written against Hamming's root class, which
   never matches on this page, so three things were broken at once and none of
   them was visible as an error: the machine had no card, --cr-drop was
   undefined so the sliders rendered in the browser's default blue instead of
   this machine's green, and the button hover and focus colours were dropped
   with it. The green never appeared anywhere on the page it belongs to.

   Same defect as the .hm[data-dropped="yes"] .cr-verdictline rule removed on
   2026-08-13: a stylesheet started by copying a sibling's, with the rename
   applied to the property names and not to the selectors. */

/* ---- the four stages ----------------------------------------------------- */
.cr-steplabel {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
}
.cr-steplabel:first-of-type { margin-top: var(--la-space-2); }

.cr-stepno {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  border: 1px solid var(--la-hairline);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.cr-hint, .cr-note {
  margin-top: var(--la-space-1);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

/* ---- the knobs ----------------------------------------------------------- */
.cr-knob {
  display: grid;
  gap: var(--la-space-1);
  margin-top: var(--la-space-3);
}
.cr-knob[hidden] { display: none; }

.cr-knob label {
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

.cr-knob input[type="range"] {
  width: 100%;
  /* 2.5.8 asks 24 by 24 at AA; a range needs a comfortable grab area. */
  min-height: 2.75rem;
  accent-color: var(--accent);
}
.cr-knob input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- the numbers --------------------------------------------------------- */
.cr-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2) var(--la-space-4);
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
}

.cr-reg {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  font-variant-numeric: tabular-nums;
}

.cr-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

/* ---- controls ------------------------------------------------------------ */
.cr-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}
.cr-buttons[hidden] { display: none; }

.cr-button {
  font: inherit;
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  min-height: 2.75rem;
  padding: 0 var(--la-space-3);
  cursor: pointer;
}
.cr-button:hover { border-color: var(--accent); color: var(--accent); }
.cr-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cr-proof {
  margin-top: var(--la-space-4);
  padding-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.cr-why { margin-top: var(--la-space-5); }
.cr-why h2 {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-lg);
  font-weight: 600;
}
.cr-why p { margin-top: var(--la-space-2); }

/* ---- the word, and the burst laid over it -------------------------------- */
.cr-word {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--la-space-3);
}

.cr-bit {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: var(--la-space-1) 0;
  min-width: 1.6rem;
  border-radius: var(--la-radius-sm);
  border: 1px solid transparent;
}

.cr-bitval {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

.cr-bitlabel {
  font-family: var(--la-font-mono);
  font-size: 0.6rem;
  color: var(--la-ink-faint);
}

/* Check bits are structurally different from message bits, without colour. */
.cr-bit[data-kind="check"] { background: var(--la-page); }

/* A bit the burst flipped: an outline the reader put there. */
.cr-bit[data-flipped="yes"] {
  border-color: var(--la-ink);
  border-style: dashed;
}

/* The verdict is the one measured thing, so it is the only colour. */
.cr[data-state="caught"] .cr-verdictline { color: var(--la-ink); }
.cr[data-state="missed"] .cr-verdictline { color: var(--accent); }
.cr[data-state="missed"] .cr-bit[data-flipped="yes"] { border-color: var(--accent); }

.cr-key {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.cr-value {
  font-family: var(--la-font-mono);
  color: var(--la-ink);
}

.cr-knob { display: grid; gap: var(--la-space-1); margin-top: var(--la-space-3); }
.cr-knob[hidden] { display: none; }
.cr-knob label { font-size: var(--la-text-sm); color: var(--la-ink-dim); }
.cr-knob input[type="range"] {
  width: 100%;
  min-height: 2.75rem;
  accent-color: var(--accent);
}
.cr-knob input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cr-subhead {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
}

.cr-table {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: 2px;
}

.cr-row {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  padding: 2px var(--la-space-2);
  border-left: 2px solid var(--la-hairline);
}
/* Inside the theorem's range: nothing escapes, and the row says so quietly. */
.cr-row[data-safe="yes"] { border-left-color: var(--la-ink-dim); color: var(--la-ink); }
.cr-row[data-safe="no"] { border-left-color: var(--accent); }