/* Baudot — a Logical Art bit.
 *
 * The subject is a fixed-width code, so every row is the same width: five
 * holes, always five, and what changes down the list is how many of them are
 * punched. That sameness is the argument and it has to be visible, which is
 * why the tape is drawn as five fixed positions rather than as a bar whose
 * length means something. Morse's page is a ranking of lengths; this one is a
 * ranking of weights at one length.
 *
 * One thing earns colour and it is a measurement rather than a category: a
 * letter punching more holes than its frequency deserves. The accent is not
 * sampled off paper tape on purpose — Morse and Punch Cards already hold the
 * brass-and-buff end of the palette and a third would be indistinguishable
 * from both at pill size.
 */
* { 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; }

/* 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. */
.ba-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ba-sr[hidden] { display: none; }


/* ---- the text you are weighing ------------------------------------------ */
.ba-knob { display: grid; gap: var(--la-space-1); }
.ba-knob[hidden] { display: none; }

.ba-knob label {
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

.ba-input {
  width: 100%;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  line-height: 1.5;
  color: var(--la-ink);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  padding: var(--la-space-2);
  resize: vertical;
}
.ba-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ba-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-2);
}
.ba-buttons[hidden] { display: none; }

.ba-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);
  /* 2.5.8 is the AA target-size rule and it is 24 by 24. */
  min-height: 2.75rem;
  padding: 0 var(--la-space-3);
  cursor: pointer;
}
.ba-button:hover { border-color: var(--accent); }
.ba-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

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

.ba-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

.ba-shiftline, .ba-missingline, .ba-seatsline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}
.ba-missingline:empty { display: none; }

.ba-subhead {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
}

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

/* ---- twenty-six rows, all the same width -------------------------------- */
.ba-table {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: 1px;
}

.ba-row {
  display: grid;
  grid-template-columns: 1.75rem auto 1fr 3.25rem;
  align-items: center;
  gap: var(--la-space-3);
  padding: var(--la-space-1) var(--la-space-2);
  border-radius: var(--la-radius-sm);
}
.ba-row:nth-child(odd) { background: var(--la-page); }

.ba-letter {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}

/* The letter is the control: pressing it plays the character. It is a real
   button so it lands in the tab order and announces itself, and the row is
   left as a row rather than becoming a wall of boxes. */
.ba-rowbtn {
  font: inherit;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--la-radius-sm);
  /* 2.5.8 asks 24 by 24 at AA and this clears it in both directions. */
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  cursor: pointer;
}
.ba-rowbtn:hover { border-color: var(--accent); color: var(--accent); }
.ba-rowbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The tape. Five positions, always five, punched or not. */
.ba-bits {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.ba-hole {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--la-hairline);
}
.ba-hole[data-punched="yes"] {
  background: var(--accent);
  border-color: var(--accent);
}
.ba-hole[data-punched="no"] { background: transparent; }

.ba-count {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  font-variant-numeric: tabular-nums;
}

.ba-cost {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ba-row[data-over="yes"] .ba-cost { color: var(--accent); }

.ba-blame {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  gap: var(--la-space-2);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

/* ---- where this text sits between best and worst ------------------------ */
.ba-scale {
  position: relative;
  height: 6px;
  margin-top: var(--la-space-4);
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: 3px;
}

.ba-needle {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 12px;
  background: var(--accent);
  border-radius: 1px;
}

/* CSP forbids an inline style attribute, so the position is a data value with
   a rule per step. Twenty-one steps of five is the resolution the readout
   rounds to, so nothing is lost. */
.ba-scale[data-at="0"] .ba-needle { left: calc(0% - 1.5px); }
.ba-scale[data-at="5"] .ba-needle { left: calc(5% - 1.5px); }
.ba-scale[data-at="10"] .ba-needle { left: calc(10% - 1.5px); }
.ba-scale[data-at="15"] .ba-needle { left: calc(15% - 1.5px); }
.ba-scale[data-at="20"] .ba-needle { left: calc(20% - 1.5px); }
.ba-scale[data-at="25"] .ba-needle { left: calc(25% - 1.5px); }
.ba-scale[data-at="30"] .ba-needle { left: calc(30% - 1.5px); }
.ba-scale[data-at="35"] .ba-needle { left: calc(35% - 1.5px); }
.ba-scale[data-at="40"] .ba-needle { left: calc(40% - 1.5px); }
.ba-scale[data-at="45"] .ba-needle { left: calc(45% - 1.5px); }
.ba-scale[data-at="50"] .ba-needle { left: calc(50% - 1.5px); }
.ba-scale[data-at="55"] .ba-needle { left: calc(55% - 1.5px); }
.ba-scale[data-at="60"] .ba-needle { left: calc(60% - 1.5px); }
.ba-scale[data-at="65"] .ba-needle { left: calc(65% - 1.5px); }
.ba-scale[data-at="70"] .ba-needle { left: calc(70% - 1.5px); }
.ba-scale[data-at="75"] .ba-needle { left: calc(75% - 1.5px); }
.ba-scale[data-at="80"] .ba-needle { left: calc(80% - 1.5px); }
.ba-scale[data-at="85"] .ba-needle { left: calc(85% - 1.5px); }
.ba-scale[data-at="90"] .ba-needle { left: calc(90% - 1.5px); }
.ba-scale[data-at="95"] .ba-needle { left: calc(95% - 1.5px); }
.ba-scale[data-at="100"] .ba-needle { left: calc(100% - 1.5px); }

.ba-scalelabel {
  margin-top: var(--la-space-1);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

/* ---- what the page checked on itself ------------------------------------ */
.ba-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);
}

.ba[data-broken="yes"] .ba-proof { color: var(--accent); }

.ba-note {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
}

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

@media (max-width: 30rem) {
  .ba-row {
    grid-template-columns: 1.5rem auto 1fr 2.75rem;
    gap: var(--la-space-2);
  }
  .ba-hole { width: 8px; height: 8px; }
}

/* The swap that is the finding: one letter holding a cheap code it has not
   earned, and one earning a cheap code it does not hold. Marked as a pair so
   the comparison the prose describes is visible in the table too. Border
   rather than fill, because the fill already means "punched". */
.ba-row[data-seat="taken"],
.ba-row[data-seat="owed"] {
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.ba-row[data-seat="owed"] { box-shadow: inset 2px 0 0 0 var(--la-ink-dim); }

/* The link to a graded text. Visible, and selectable, because the point is to
   hand it to somebody: the -said line above is screen-reader only. Wraps
   anywhere so a long URL cannot push the page sideways on a phone. */
.ba-shareline {
  margin-top: var(--la-space-2);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  overflow-wrap: anywhere;
  min-height: 1.5em;
}