/* Z-Characters — a Logical Art nibble.
 *
 * The subject is a bit pattern, so the page is mostly a monospace grid and the
 * only thing that earns colour is cost. 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. */
.zc-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.zc-sr[hidden], [hidden] { display: none; }



.zc { margin-top: var(--la-space-5); }

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

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

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

.zc-input {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.7rem;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-base);
  color: var(--la-ink);
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
}

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

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

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

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

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

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

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

.zc-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. */
.zc-steplabel {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  line-height: var(--la-leading-body);
}

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

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

/* --- the characters, priced --------------------------------------------- */

.zc-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
}

.zc-char {
  min-width: 1.35rem;
  padding: 0.3rem 0.15rem;
  text-align: center;
  font-size: var(--la-text-sm);
  border-radius: 2px;
  border: 1px solid transparent;
  /* Cost is carried in a border rather than a fill, so a long sentence stays
     readable as a sentence rather than becoming a bar chart. */
  border-bottom-width: 2px;
}

.zc-char.is-cost1 { border-bottom-color: var(--la-hairline-strong); }
.zc-char.is-cost2 {
  border-bottom-color: var(--machine, var(--la-instrument));
  color: var(--la-ink);
}
.zc-char.is-cost4 {
  border-bottom-color: var(--machine, var(--la-instrument));
  border-bottom-style: double;
  border-bottom-width: 4px;
}

/* --- the packed words ---------------------------------------------------- */

.zc-words {
  display: grid;
  /* min() on the floor, or a track that will not shrink pushes the page
     sideways on a phone. auto-fill will not go below a track's own minimum. */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--la-space-3);
  margin-top: var(--la-space-3);
}

.zc-word {
  min-width: 0;
  /* Sixteen bit cells have a floor: below about 190px they stop being
     readable, and shrinking them further would be worse than scrolling. If a
     screen is narrower than that, this scrolls rather than pushing the page. */
  overflow-x: auto;
  padding: 0.5rem 0.45rem;
  background: var(--la-page);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
}

.zc-word.is-last { border-color: var(--machine, var(--la-instrument)); }

.zc-bits {
  display: flex;
  gap: 1px;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

.zc-bit {
  /* Narrow enough that a whole sixteen-bit word fits a 15rem track, so two sit
     side by side inside the measure rather than one per row. */
  width: 0.85em;
  padding: 0.15rem 0;
  text-align: center;
  color: var(--la-ink-faint);
  background: color-mix(in srgb, var(--la-sunken) 70%, transparent);
}

.zc-bit.is-on { color: var(--la-ink); background: var(--la-sunken); }

/* The three five-bit fields, separated so the packing is visible rather than
   asserted. The end bit is the one that is not part of any of them. */
.zc-bit.is-slot1 { margin-left: 0.3rem; }
.zc-bit.is-slot2 { margin-left: 0.3rem; }

.zc-bit.is-end {
  margin-right: 0.4rem;
  color: var(--machine, var(--la-instrument));
  border-bottom: 2px solid var(--machine, var(--la-instrument));
}

/* The "and N more" note is a whole row of its own, not a column. */
.zc-more { grid-column: 1 / -1; }

.zc-wordlabel {
  margin-top: 0.35rem;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

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

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

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

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

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

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

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

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

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

@media (min-width: 46rem) {
  .zc-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. */
  .zc-step.is-wide { grid-column: 1 / -1; }
}