/* RAID Parity — a Logical Art nibble.
 *
 * The page is five rows of bytes, so the mono face does all the work and
 * colour marks exactly two things: which disk is gone, and which bytes were
 * rebuilt rather than read. Both are facts about provenance, which is the
 * subject, and neither may depend on hue alone.
 *
 * The machine takes the studio neutral. la-accent-pick.py reports no colour
 * left that clears both floors against the accents already published.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

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

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

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

.rd-steplabel { margin: var(--la-space-5) 0 var(--la-space-2); font-weight: 600; color: var(--la-ink); }
.rd-stepno {
  display: inline-block; min-width: 1.6rem; margin-right: 0.5rem;
  padding: 0.05rem 0.5rem; border: 1px solid var(--la-hairline-strong);
  border-radius: 999px; font-family: var(--la-font-mono);
  font-size: var(--la-text-xs); color: var(--la-ink-dim); text-align: center;
}
.rd-hint { margin: 0 0 var(--la-space-3); color: var(--la-ink-dim); }

.rd-controls { display: flex; flex-wrap: wrap; gap: var(--la-space-2); margin: var(--la-space-3) 0; }
.rd-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: var(--la-font-mono); font-size: var(--la-text-sm);
  cursor: pointer;
}
.rd-btn:hover { border-color: var(--la-instrument); }
.rd-btn[aria-pressed="true"] { border-color: var(--la-instrument); color: var(--la-instrument); }
.rd-btn:focus-visible { outline: 2px solid var(--la-instrument); outline-offset: 2px; }

/* The array: one row per disk, one cell per byte.
 *
 * Eight bytes plus a label does not fit in 320 pixels, and the render matrix
 * failed it at 320 and 390. The rule in this family is that wide content
 * scrolls inside its own container rather than pushing the page sideways, so
 * the array is that container. The label is narrower on small screens too,
 * because scrolling past it to reach the bytes would be a poor trade. */
.rd-array {
  margin: var(--la-space-3) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* A scrollable region has to be reachable by keyboard, or somebody navigating
   without a mouse cannot see the bytes that are off the edge. axe calls this
   scrollable-region-focusable and it caught this at mobile width. The focus
   ring is drawn for the same reason every other focusable thing here has one. */
.rd-array:focus-visible { outline: 2px solid var(--la-instrument); outline-offset: 3px; }
.rd-array > * { width: max-content; min-width: 100%; }
.rd-row {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0; font-family: var(--la-font-mono); font-size: var(--la-text-sm);
}
.rd-label { width: 5.5rem; flex: none; color: var(--la-ink-dim); font-size: var(--la-text-xs); }
@media (max-width: 30rem) {
  .rd-label { width: 3.6rem; }
  .rd-byte { min-width: 1.9rem; padding-left: 0.1rem; padding-right: 0.1rem; }
}
.rd-byte {
  min-width: 2.1rem; padding: 0.1rem 0.25rem; text-align: center;
  border: 1px solid transparent; border-radius: 2px; color: var(--la-ink-dim);
}
/* The parity row is a different KIND of row, not a prettier one. */
.rd-row[data-kind="parity"] .rd-label { color: var(--la-ink); }
.rd-row[data-kind="parity"] .rd-byte { color: var(--la-ink); border-color: var(--la-hairline); }
/* A lost disk: struck through as well as dimmed, so it survives forced
   colours and a monochrome print. */
.rd-row[data-lost="yes"] .rd-byte {
  color: var(--la-hairline-strong); text-decoration: line-through;
}
.rd-row[data-lost="yes"] .rd-label { color: var(--la-hairline-strong); }
/* A rebuilt byte: the accent AND a rule under it, because "this byte was
   computed rather than read" is the entire point of the page. */
.rd-byte[data-from="rebuilt"] {
  color: var(--la-instrument); border-bottom-color: var(--la-instrument);
  border-bottom-width: 2px; font-weight: 700;
}
.rd-byte[data-from="rebuilt"][data-ok="no"] { color: var(--la-warn, #e0b341); }

.rd-said { margin: var(--la-space-3) 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.rd-said[data-mark="refused"] { border-left: 3px solid var(--la-warn, #e0b341); padding-left: 0.7rem; }

.rd-checks { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.rd-checks th, .rd-checks td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline);
  vertical-align: top;
}
.rd-checks thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.rd-checks td { color: var(--la-ink-dim); }
.rd-checks td:last-child { font-family: var(--la-font-mono); font-size: 0.8rem; }
.rd-checks tr[data-mark="bad"] td { color: var(--la-warn, #e0b341); }