/* Bitwise — a Logical Art bit.
 *
 * Shell first. No earned accent: a switching arrangement is not a piece of
 * hardware with a colour, so this takes the neutral via --machine.
 *
 * The three bit rows share one eight-column grid, so a column really is a
 * column: A, B and the result line up vertically and the selected one is
 * highlighted down the whole stack.
 */
* { 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; }

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



/* ---- Operator selector --------------------------------------------------- */
.bw { margin-top: var(--la-space-5); }

.bw-ops,
.bw-shift {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.bw-ops { margin-bottom: var(--la-space-3); }

.bw-op {
  font: inherit;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  background: var(--la-raised);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  padding: 0.35em 0.85em;
  cursor: pointer;
  transition: border-color var(--la-transition), color var(--la-transition),
              background var(--la-transition);
}

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

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

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

.bw-shiftbtn { padding: 0.3em 0.7em; font-size: var(--la-text-xs); }

/* ---- The three rows ------------------------------------------------------ */
.bw-machine {
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius);
  background: var(--la-sunken);
  padding: var(--la-space-3);
}

.bw-line {
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  margin-bottom: 0.35rem;
}

.bw-line:last-child { margin-bottom: 0; }

/* The UA stylesheet's [hidden] { display: none } loses to an author
   display: flex, so a row set hidden in script stayed visible. Any element
   given a display value has to restate the hidden case itself. */
.bw-line[hidden] { display: none; }

.bw-rowlabel {
  flex: 0 0 3.6rem;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  text-align: right;
}

.bw-row {
  list-style: none;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.3rem;
  min-width: 0;
}

/* The result sits under a rule, the way a sum does. */
.bw-result { border-top: 1px solid var(--la-hairline); padding-top: 0.5rem; margin-top: 0.5rem; }

.bw-bit {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-base);
  line-height: 1;
  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);
}

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

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

/* The result row is read-only: it is an output, not a control. */
.bw-bit.is-result {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.bw-bit.is-result.is-on {
  border-style: solid;
}

/* The selected column, marked down the whole stack. */
.bw-bit.is-column {
  outline: 2px solid color-mix(in srgb, var(--machine) 60%, transparent);
  outline-offset: 2px;
}

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

.bw-expr {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-lg);
  color: var(--la-ink);
}

/* ---- Circuit and truth table --------------------------------------------- */
.bw-inspect {
  margin-top: var(--la-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-4);
  align-items: center;
}

.bw-circuitwrap {
  flex: 1 1 18rem;
  min-width: 0;
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius);
  background: var(--la-sunken);
  padding: var(--la-space-2);
}

.bw-circuit { display: block; width: 100%; height: auto; }

.bw-wire {
  stroke: var(--la-hairline-strong);
  stroke-width: 2;
  fill: none;
}

.bw-wire.is-live { stroke: var(--machine); stroke-width: 2.5; }

.bw-contact circle { fill: var(--la-ink-faint); }
.bw-contact.is-closed circle { fill: var(--machine); }

.bw-arm {
  stroke: var(--la-ink-faint);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.bw-contact.is-closed .bw-arm { stroke: var(--machine); }

.bw-contact-label {
  font-family: var(--la-font-mono);
  font-size: 11px;
  fill: var(--la-ink-faint);
}

.bw-lamp {
  fill: none;
  stroke: var(--la-hairline-strong);
  stroke-width: 2;
}

.bw-lamp.is-on {
  fill: color-mix(in srgb, var(--machine) 35%, transparent);
  stroke: var(--machine);
}

/* The shift bus. Not gates: routing. Every line is a wire from an input
   position to an output position, and a line with no source is tied to the
   ground rail, which is what puts the zero there. */
.bw-bus {
  stroke: var(--la-hairline-strong);
  stroke-width: 1.6;
  fill: none;
}

.bw-bus.is-current { stroke: var(--machine); stroke-width: 2.6; }

.bw-bus.is-ground { stroke-dasharray: 3 3; }

/* A bit shifted past the end of the word terminates and is gone. */
.bw-bus.is-lost {
  stroke: #8c1d16;
  stroke-dasharray: 2 3;
}

.bw-groundtick {
  stroke: var(--la-ink-faint);
  stroke-width: 2;
}

.bw-nogate {
  font-family: var(--la-font-mono);
  font-size: 15px;
  fill: var(--la-ink-faint);
  letter-spacing: 2px;
}

.bw-table {
  list-style: none;
  flex: 0 0 auto;
  display: grid;
  gap: 0.2rem;
}

.bw-table.is-empty { display: none; }

.bw-trow {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-faint);
  border: 1px solid transparent;
  border-radius: var(--la-radius-sm);
  padding: 0.15em 0.55em;
}

/* The row the selected column is actually using. */
.bw-trow.is-live {
  color: var(--machine);
  border-color: color-mix(in srgb, var(--machine) 45%, transparent);
  background: color-mix(in srgb, var(--machine) 10%, transparent);
}

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

/* ---- Presets and readout -------------------------------------------------- */
.bw-presets-wrap { margin-top: var(--la-space-4); }

.bw-presetlabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  margin-bottom: var(--la-space-1);
}

.bw-presets { display: flex; flex-wrap: wrap; gap: var(--la-space-2); }

.bw-preset {
  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.4em 0.85em;
  cursor: pointer;
  transition: border-color var(--la-transition), color var(--la-transition);
}

.bw-preset:hover { border-color: var(--machine); color: var(--machine); }
.bw-preset:focus-visible { outline: 2px solid var(--machine); outline-offset: 3px; }

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

.bw-readout {
  margin-top: var(--la-space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--la-space-3);
}

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

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

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

/* ---- Prose --------------------------------------------------------------- */
.bw-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;
}

.bw-why p { margin-top: var(--la-space-2); color: var(--la-ink-dim); }
.bw-why strong { color: var(--la-ink); }
.bw-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; }
  .bw-machine { padding: var(--la-space-2); }
  .bw-rowlabel { flex-basis: 2.6rem; font-size: 0.6rem; }
  .bw-row { gap: 0.2rem; }
  .bw-bit { font-size: var(--la-text-sm); }
  .bw-inspect { gap: var(--la-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .bw-bit, .bw-op, .bw-preset, .bw-wire { transition: none; }
}