/* Hamming — a Logical Art nibble.
 *
 * The subject is a row of positions and one of them being named, so the page is
 * a row of positions and exactly one thing earns colour: the position the
 * checking number points at. Not the flipped bit, which the reader already
 * knows about, and not the checks. The address the arithmetic produced.
 *
 * A flipped bit is marked structurally instead, with an outline, so that when
 * the two coincide you can see them coincide, and when the code is lying to you
 * about a third position you can see that too.
 */
* { 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. */
.hm-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hm-sr[hidden] { display: none; }

/* ---- the four stages ----------------------------------------------------- */
.hm-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);
}
.hm-steplabel:first-of-type { margin-top: var(--la-space-2); }

.hm-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;
}

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

/* ---- the numbers --------------------------------------------------------- */
.hm-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);
}

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

.hm-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}
.hm[data-dropped="yes"] .hm-verdictline { color: var(--la-ink); }

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

.hm-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;
}
.hm-button:hover { border-color: var(--accent); color: var(--accent); }
.hm-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hm-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);
}

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

@media (max-width: 30rem) {
}

/* ---- the row of positions ------------------------------------------------ */
.hm-bits, .hm-message {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}

.hm-bit { display: grid; justify-items: center; gap: 2px; }

.hm-bitbtn, .hm-msgbtn {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-md);
  color: var(--la-ink);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  /* 2.5.8 asks 24 by 24 at AA and this clears it comfortably. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.hm-bitbtn:hover, .hm-msgbtn:hover { border-color: var(--accent); }
.hm-bitbtn:focus-visible, .hm-msgbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A check position is structurally different from a data position, and says so
   without colour, because colour here means one thing only. */
.hm-bit[data-kind="check"] .hm-bitbtn { border-style: dashed; }

/* Flipped by the reader: an outline they put there. */
.hm-bit[data-flipped="yes"] .hm-bitbtn {
  border-color: var(--la-ink);
  border-width: 2px;
}

/* Named by the checking number: the one measured thing on the page. */
.hm-bit[data-named="yes"] .hm-bitbtn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--la-page);
}

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

.hm-checks {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: var(--la-space-1);
}

.hm-check {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}
.hm-check[data-failed="yes"] { color: var(--accent); }

.hm-number {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-md);
  color: var(--la-ink);
}

/* Nothing to unflip yet. Shown rather than hidden, so the control stays where
   the reader learned it was. */
.hm-button:disabled { opacity: 0.45; cursor: not-allowed; }
.hm-button:disabled:hover { border-color: var(--la-hairline); color: var(--la-ink); }