/* Score Reel — a Logical Art nibble.
 *
 * The subject is a drum with digits on it, so the reels are set large and in
 * the mono face and everything else stays out of the way. The only thing that
 * earns colour is a reel the motor is currently driving, because that is an
 * event rather than a state. A character that cost one Z-character
 * is drawn in the studio neutral; one that cost a shift is marked; one that
 * fell out of the alphabets entirely is marked harder. Nothing else is
 * coloured, because nothing else is a fact.
 *
 * The machine takes the studio neutral. A story file has no colour, and
 * Infocom's packaging was designed by people rather than decided by the format.
 */
* { 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.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; }

/* 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. */
.sr { margin-top: var(--la-space-5); }

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

/* --- controls ------------------------------------------------------------ */

.sr-controls { margin-bottom: var(--la-space-5); }

.sr-label {
  display: block;
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

.sr-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--la-space-3);
}

.sr-button {
  /* 44px, well past the 24 WCAG 2.2 asks for. */
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  font-family: var(--la-font-ui);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  cursor: pointer;
}

.sr-button:hover { border-color: var(--machine, var(--la-instrument)); }

.sr-button:focus-visible {
  outline: 2px solid var(--machine, var(--la-instrument));
  outline-offset: 2px;
}

/* --- the four stages ----------------------------------------------------- */

.sr-stages {
  list-style: none;
  display: grid;
  gap: var(--la-space-3);
}

.sr-step {
  /* A grid item defaults to min-width:auto, which means it refuses to shrink
     below its widest child. Without this the card stays wide and takes the
     whole document sideways with it at the reflow floor. */
  min-width: 0;

  /* Reserved height, because these cards report sentences that change length
     and were resizing under the pointer on every click: card two grew 67px
     between "the motor is not being asked for anything" and a full pulse
     count, shoving everything below it down the page mid-click.

     Measured rather than guessed. The tallest state of any card is 218px at
     390 and 281 at 1280, and these reserve past both. A browser test asserts
     the heights do not move across states, so outgrowing this reserve fails
     loudly instead of quietly bringing the jitter back. */
  min-height: 14rem;
  padding: var(--la-space-3);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
}

/* The stage label is the roster's own sentence, word for word: the truth audit
   compares the two, and a nibble's stages are the evidence for its tier. */
.sr-steplabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  line-height: var(--la-leading-body);
}

.sr-stepno {
  display: inline-block;
  min-width: 1.4em;
  color: var(--machine, var(--la-instrument));
}

.sr-line {
  margin-top: 0.45rem;
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

/* --- verdict and proof --------------------------------------------------- */

.sr-verdictline {
  margin-top: var(--la-space-4);
  padding: var(--la-space-3);
  border-left: 2px solid var(--la-hairline-strong);
  color: var(--la-ink-dim);
  font-size: var(--la-text-sm);
}

.sr-proof {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

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

/* --- the prose ----------------------------------------------------------- */

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

.sr-why h2 {
  margin-top: var(--la-space-5);
  font-family: var(--la-font-display);
  font-size: var(--la-text-xl);
  line-height: var(--la-leading-tight);
}

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

@media (min-width: 46rem) {
  .sr-stages {
    grid-template-columns: repeat(2, minmax(min(16rem, 100%), 1fr));
    /* Equal rows, so two cards side by side match whatever either of them says. */
    grid-auto-rows: 1fr;
  }
  .sr-step { min-height: 18rem; }
  /* The packing stage takes the full width. Sixteen bit cells and three gaps
     do not fit in half a measure, and at two columns they ran straight out of
     the card. */
}

/* --- the reels ----------------------------------------------------------- */

.sr-reels {
  display: flex;
  gap: 0.3rem;
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
}

.sr-reel {
  min-width: 2.1rem;
  padding: 0.5rem 0.2rem;
  text-align: center;
  font-size: var(--la-text-xl);
  color: var(--la-ink);
  /* A score reel is a white digit on a dark drum behind a window. */
  background: #14100e;
  border: 1px solid var(--la-hairline-strong);
  border-radius: 2px;
}

.sr-reel.is-turning {
  border-color: var(--machine, var(--la-instrument));
  color: var(--machine, var(--la-instrument));
}

/* Not a reel. Painted on the glass, because nothing was worth less than ten. */
.sr-reel.is-painted {
  color: var(--la-ink-faint);
  background: transparent;
  border-style: dashed;
}

.sr-buttons + .sr-buttons { margin-top: var(--la-space-2); }

.sr-verdictline.is-lost {
  border-left-color: var(--machine, var(--la-instrument));
  color: var(--la-ink);
}