/* UTF-8.
 *
 * The accent is declared on the machine root in la-machines.css, generated
 * from the roster. Nothing here declares --machine or --accent: a custom
 * property set on the element that reads it overrides the inherited value.
 *
 * Every measure is in rem. `ch` resolves against the element's own font-size,
 * so a shared measure written in ch is a different width in every place it is
 * used.
 */

/* The page frame. Floating Point shipped without these three and its column
   ran 1,584px against the 640px every other machine holds, which no gate saw
   and an operator did. They are the first thing in this file for that reason. */
* { 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; }

/* A specified background, not the one color-scheme paints. Without it the page
   LOOKS right and axe computes contrast against white. */
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;
}

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

.u8-steplabel {
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
  margin-top: var(--la-space-5);
  font-weight: 600;
  color: var(--la-ink);
}

.u8-steplabel:first-of-type { margin-top: var(--la-space-2); }

.u8-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

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

.u8-hint-tight { margin-top: var(--la-space-1); }

.u8-code {
  font-family: var(--la-font-mono);
  font-size: 0.95em;
  color: var(--accent);
}

/* Two columns so a label can never wrap away from the control it names. */
.u8-knob {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr);
  align-items: center;
  gap: var(--la-space-2) var(--la-space-3);
  margin-top: var(--la-space-3);
}

.u8-knob label {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.u8-input {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  padding: 0.45em 0.7em;
  min-width: 9rem;
  max-width: 100%;
}

.u8-input-wide { width: 100%; }

.u8-input:focus-visible,
.u8-range:focus-visible,
.u8-btn:focus-visible,
.u8-sbyte:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.u8-range { accent-color: var(--accent); width: 100%; }

.u8-value {
  font-family: var(--la-font-mono);
  color: var(--accent);
}

.u8-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}

.u8-btn {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  padding: 0.4em 0.8em;
  cursor: pointer;
  /* 2.5.8 is 24x24; this clears it with room rather than sitting on it. */
  min-height: 2.25rem;
  min-width: 2.25rem;
}

.u8-btn:hover { border-color: var(--accent); color: var(--accent); }

.u8-readout {
  margin-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
}

.u8-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--la-space-3);
  padding: var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
}

.u8-row dt {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.u8-row dd {
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  overflow-wrap: anywhere;
}

.u8-strong dd { color: var(--accent); font-weight: 600; }

.u8-num { font-family: var(--la-font-mono); }

/* ---- stage two: the bytes, drawn bit by bit ------------------------- */

.u8-bytes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-3);
  margin-top: var(--la-space-3);
}

.u8-byte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--la-space-2);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  background: color-mix(in srgb, var(--la-ink) 4%, transparent);
}

.u8-byte[data-role="lead"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.u8-byte-hex {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

.u8-byte-bits {
  display: flex;
  gap: 1px;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

.u8-bit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.35rem;
  border-radius: 2px;
}

/* The tag is structure and the payload is the number. Colour alone would be
   the only thing distinguishing them, so the tag also gets a border: the
   distinction survives greyscale and the common colour-vision deficiencies. */
.u8-bit-tag {
  color: var(--la-ink-faint);
  background: color-mix(in srgb, var(--la-ink) 8%, transparent);
  border: 1px solid var(--la-hairline);
}

.u8-bit-pay {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid transparent;
}

/* --la-ink-dim, not --la-ink-faint. Faint is documented at 5.02:1 against
   --la-page, but this label sits on a panel plus a 4% overlay, and axe measured
   the result at 4.41 against a 4.5 threshold. The background these sit on is
   lighter than the page, so the token that is fine on the page is not fine
   here. */
.u8-byte-role {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

/* ---- stage three: the stream ---------------------------------------- */

.u8-stream {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: var(--la-space-3);
}

.u8-sbyte {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline);
  border-radius: 3px;
  /* Every one of these is a tap target. 2.5.8 wants 24 CSS pixels. */
  min-width: 1.75rem;
  min-height: 1.75rem;
  cursor: pointer;
  padding: 0;
}

/* A continuation byte is the thing you cannot start on. It reads dimmer and
   carries a left rule, so the run of them before a boundary is visible as a
   shape and not only as a colour. */
/* Measured at 4.22 with --la-ink-faint on the button's own background. Dim
   still reads as quieter than the lead bytes above it, and the left rule
   carries the distinction anyway, so nothing is lost by clearing AA. */
.u8-sbyte[data-cont="yes"] {
  color: var(--la-ink-dim);
  border-left: 2px solid var(--la-hairline-strong);
}

.u8-sbyte[data-start="yes"] {
  border-color: var(--accent);
  color: var(--accent);
}

.u8-sbyte[data-skipped="yes"] {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.u8-sbyte[data-here="yes"] {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- stage four: the refusals --------------------------------------- */

.u8-refuse {
  margin-top: var(--la-space-3);
  border-top: 1px solid var(--la-hairline);
}

.u8-refuse-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--la-space-2) var(--la-space-3);
  padding: var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
}

.u8-refuse-bytes {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

.u8-refuse-row[data-refused="yes"] .u8-refuse-bytes { color: var(--accent); }

.u8-refuse-why {
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

.u8-refuse-note {
  grid-column: 2;
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

/* ---- the cost table -------------------------------------------------- */

.u8-cost { margin-top: var(--la-space-4); overflow-x: auto; }

.u8-cost-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
}

.u8-cost-table th,
.u8-cost-table td {
  text-align: left;
  padding: var(--la-space-2) var(--la-space-3) var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
}

.u8-cost-table th {
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  font-weight: 400;
}

/* The withdrawn rows are still true of 1992 and no longer true of the
   standard, so they are dimmed rather than removed. */
.u8-cost-table tr[data-standard="no"] td { color: var(--la-ink-faint); }

.u8-lost { color: var(--accent); }

.u8-why { margin-top: var(--la-space-6); }

.u8-why h2 {
  margin-top: var(--la-space-5);
  margin-bottom: var(--la-space-2);
}

.u8-why p { margin-top: var(--la-space-3); color: var(--la-ink-dim); }

.u8-why q { color: var(--la-ink); }

@media (max-width: 34rem) {
  .u8-row { grid-template-columns: 1fr; }
  .u8-row dt { color: var(--la-ink-faint); }
  .u8-knob { grid-template-columns: 1fr; }
  .u8-refuse-row { grid-template-columns: 1fr; }
  .u8-refuse-note { grid-column: 1; }
}