/* The Interrupt — a Logical Art nibble.
 *
 * The subject is a listing, a few registers and a stack. Two things earn
 * colour and both are positions rather than decoration: the instruction about
 * to run, and the return address on the stack, which is the only thing making
 * the return possible.
 *
 * The handler is set apart from the program it interrupts, because the whole
 * point is that they are two pieces of code that know nothing about each
 * other and share one accumulator anyway. 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); }

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

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

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

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

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

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

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

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

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

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

.in-step {
  /* A grid item defaults to min-width:auto, which means it refuses to shrink
     below its widest child. The packed words are wider than a 320px phone, so
     without this the step card stays wide and takes the whole document
     sideways with it. Caught in all three engines at the reflow floor. */
  min-width: 0;
  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. */
.in-steplabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  line-height: var(--la-leading-body);
}

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

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

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

.in-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);
}

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

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

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

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

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

.in-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);
}

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

@media (min-width: 46rem) {
  .in-stages { grid-template-columns: repeat(2, minmax(min(16rem, 100%), 1fr)); }
  /* 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 listing and the stack ------------------------------------------- */

.in-code {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
}

.in-ins {
  padding: 0.2rem 0.4rem;
  white-space: pre;
  color: var(--la-ink-dim);
  border-left: 2px solid transparent;
}

/* Already executed: still there, no longer interesting. */
.in-ins.is-done { color: var(--la-ink-faint); }

.in-ins.is-next {
  color: var(--la-ink);
  background: var(--la-sunken);
  border-left-color: var(--machine, var(--la-instrument));
}

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

/* Drawn top-first, because the top is the only part an instruction can name. */
.in-cell {
  min-width: 2.6rem;
  padding: 0.4rem 0.3rem;
  text-align: center;
  font-size: var(--la-text-base);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: 2px;
}

.in-cell.is-top {
  border-color: var(--machine, var(--la-instrument));
  color: var(--machine, var(--la-instrument));
}

.in-cell.is-empty {
  color: var(--la-ink-faint);
  border-style: dashed;
  background: transparent;
}

.in-why code {
  font-family: var(--la-font-mono);
  font-size: 0.94em;
  color: var(--la-ink);
}

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

/* --- registers, and the handler set apart -------------------------------- */

.in-regs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
}

.in-reg {
  padding: 0.3rem 0.5rem;
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: 2px;
}

/* The handler is not part of the program. Indenting it says so without a
   label, and the gap is where the vector jumps to. */
.in-ins.is-handler { padding-left: 1.6rem; }

/* A guard the reader has switched off is still shown, because the argument is
   about what happens when it is missing rather than about hiding it. */
.in-ins.is-skipped {
  color: var(--la-ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

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