/* Bit, Nibble, Byte — a Logical Art bit.
 *
 * Shell first, then this. The page has no earned accent of its own: a unit of
 * information is not a piece of hardware, so there is nothing to sample and it
 * takes the neutral, which arrives as --machine from la-machines.css.
 *
 * The whole layout rests on one grid of eight columns. The bits, their place
 * values, and both groupings share it, so a group drawn across four columns is
 * literally four bits wide and the ragged octal group is ragged because the
 * arithmetic made it so.
 */
* { 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.bit {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

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

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



/* ---- The machine --------------------------------------------------------- */
.bnb { margin-top: var(--la-space-5); }

.bnb-machine {
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius);
  background: var(--la-sunken);
  padding: var(--la-space-4) var(--la-space-3);
}

/* One grid, eight columns, shared by every row so the groupings line up with
   the bits they group. */
/* The grid tracks come from the word size, declared as data on the stage
   rather than as an inline style, because style-src 'self' refuses those. */
.bnb-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3rem;
}

[data-width="6"] .bnb-row { grid-template-columns: repeat(6, 1fr); }
[data-width="8"] .bnb-row { grid-template-columns: repeat(8, 1fr); }
[data-width="12"] .bnb-row { grid-template-columns: repeat(12, 1fr); }
[data-width="18"] .bnb-row { grid-template-columns: repeat(18, 1fr); }

/* Wider words mean narrower cells, so the digits shrink with them. */
[data-width="12"] .bnb-bit { font-size: var(--la-text-base); }
[data-width="18"] .bnb-bit { font-size: var(--la-text-sm); }
[data-width="12"] .bnb-places,
[data-width="18"] .bnb-places { font-size: 0.46rem; }

/* ---- Word size selector -------------------------------------------------- */
.bnb-widthbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--la-space-2) var(--la-space-3);
  margin-bottom: var(--la-space-3);
}

.bnb-widthlabel,
.bnb-machinelabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

.bnb-widths {
  list-style: none;
  display: flex;
  gap: 0.3rem;
}

.bnb-width {
  font: inherit;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  background: var(--la-raised);
  border: 1px solid var(--la-hairline);
  border-radius: 999px;
  padding: 0.3em 0.75em;
  cursor: pointer;
  transition: border-color var(--la-transition), color var(--la-transition),
              background var(--la-transition);
}

.bnb-width:hover { color: var(--la-ink); border-color: var(--la-hairline-strong); }

.bnb-width.is-on {
  color: var(--la-page);
  background: var(--machine);
  border-color: var(--machine);
  font-weight: 700;
}

.bnb-width:focus-visible {
  outline: 2px solid var(--machine);
  outline-offset: 3px;
}

.bnb-places {
  font-family: var(--la-font-mono);
  font-size: 0.62rem;
  color: var(--la-ink-faint);
  text-align: center;
  margin-bottom: 0.25rem;
}

.bnb-bits { margin-bottom: var(--la-space-3); }

.bnb-bit {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-lg);
  color: var(--la-ink-faint);
  background: var(--la-raised);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  cursor: pointer;
  transition: background var(--la-transition), color var(--la-transition),
              border-color var(--la-transition);
}

.bnb-bit:hover { border-color: var(--machine); }

.bnb-bit.is-on {
  color: var(--la-page);
  background: var(--machine);
  border-color: var(--machine);
  font-weight: 700;
}

.bnb-bit:focus-visible {
  outline: 2px solid var(--machine);
  outline-offset: 3px;
}

/* A grouping bar. Its column span IS the number of bits it covers, so nothing
   here is drawn by eye. */
.bnb-groups { margin-bottom: var(--la-space-3); }

.bnb-group {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  text-align: center;
  padding: 0.25em 0;
  border-radius: var(--la-radius-sm);
  border: 1px solid var(--la-hairline);
  color: var(--la-ink-dim);
  transition: border-color var(--la-transition), color var(--la-transition);
}

.bnb-group[data-span="4"] { grid-column: span 4; }
.bnb-group[data-span="3"] { grid-column: span 3; }
.bnb-group[data-span="2"] { grid-column: span 2; }
.bnb-group[data-span="1"] { grid-column: span 1; }

.is-hex {
  border-color: color-mix(in srgb, var(--machine) 45%, transparent);
  color: var(--machine);
}

.is-hex.is-hot {
  background: color-mix(in srgb, var(--machine) 14%, transparent);
  border-color: var(--machine);
}

/* The short group at the end of the octal row. Marked, because it is the
   argument: three does not divide eight. */
.bnb-group.is-ragged {
  border-style: dashed;
  color: #ff6b5e;
  border-color: color-mix(in srgb, #ff6b5e 55%, transparent);
}

.bnb-grouplabel {
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

.bnb-grouplabel strong { color: var(--la-ink); }

/* ---- Readout ------------------------------------------------------------- */
.bnb-readout {
  margin-top: var(--la-space-4);
  display: grid;
  /* Five readouts. At 8rem minimum only four fit the column and ASCII
     orphaned onto a row of its own; 6rem lets all five sit together at
     desktop and wrap evenly below that. */
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--la-space-3);
}

.bnb-readout div {
  border-top: 1px solid var(--la-hairline);
  padding-top: var(--la-space-2);
}

/* Binary takes the full row. It is the longest readout at eight bits and it
   more than doubles at eighteen, so sharing a track with the others made it
   wrap mid-number. */
.bnb-readout div:first-child { grid-column: 1 / -1; }

.bnb-readout div:first-child dd { white-space: nowrap; overflow-x: auto; }

.bnb-readout dt {
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  font-family: var(--la-font-mono);
}

.bnb-readout dd {
  margin-top: 0.2rem;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-lg);
  color: var(--la-ink);
}

.bnb-note {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--machine);
  border-left: 2px solid color-mix(in srgb, var(--machine) 45%, transparent);
  padding-left: var(--la-space-2);
  min-height: 2.6em;
}

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

.bnb-button {
  font: inherit;
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-raised);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  padding: 0.45em 0.9em;
  cursor: pointer;
  transition: border-color var(--la-transition), color var(--la-transition);
}

.bnb-button:hover { border-color: var(--machine); color: var(--machine); }

.bnb-button:focus-visible {
  outline: 2px solid var(--machine);
  outline-offset: 3px;
}

/* ---- Prose --------------------------------------------------------------- */
.bnb-why { margin-top: var(--la-space-6); }

main.bit section h2 {
  font-family: var(--la-font-display);
  font-size: var(--la-text-xl);
  line-height: var(--la-leading-tight);
  letter-spacing: -0.01em;
}

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

/* The one question a visitor is guaranteed to ask about this page's place in
   the timeline, so it gets a heading of its own rather than a buried aside. */
.bnb-sub {
  margin-top: var(--la-space-4);
  font-family: var(--la-font-display);
  font-size: var(--la-text-lg);
  line-height: var(--la-leading-tight);
  color: var(--la-ink);
}

.bnb-why strong { color: var(--la-ink); }
.bnb-why em { font-style: italic; }

main.bit .la-faq,
main.bit section { margin-top: var(--la-space-6); }
main.bit .la-faq details { margin-top: var(--la-space-3); }
main.bit footer { margin-top: var(--la-space-6); }

@media (max-width: 34rem) {
  main.bit { padding-top: 2rem; }
  .bnb-machine { padding: var(--la-space-3) var(--la-space-2); }
  .bnb-row { gap: 0.2rem; }
  .bnb-bit { font-size: var(--la-text-base); }
  .bnb-places { font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bnb-bit, .bnb-group, .bnb-button { transition: none; }
}

.bnb-readout dd.is-invalid { color: #ff6b5e; }
.bnb-readout dd.is-negative { color: #ffb454; }