/* Fifteen Planes — a Logical Art nibble.
 *
 * The subject is structure that should not be there, so colour marks exactly
 * that and nothing else: the triples view and the list of planes take the
 * accent, and the pairs view beside them, which is the one that shows nothing,
 * is drawn in the neutral ink. Putting them side by side in the same colour
 * would have been the lie.
 *
 * No per-machine accent alias. The shell declares --accent once, which is the
 * fix for the three colour bugs of 2026-08-13.
 */
* { 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. */
.fp-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.fp-sr[hidden] { display: none; }

/* ---- the four stages ----------------------------------------------------- */
.fp-steplabel {
  margin-top: var(--la-space-5);
  font-size: var(--la-text-md);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
}
.fp-steplabel:first-of-type { margin-top: var(--la-space-2); }

.fp-stepno {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  border: 1px solid var(--la-hairline);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

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

/* ---- controls ------------------------------------------------------------ */
.fp-knob {
  display: grid;
  gap: var(--la-space-1);
  margin-top: var(--la-space-3);
}
.fp-knob[hidden] { display: none; }

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

.fp-value {
  font-family: var(--la-font-mono);
  color: var(--la-ink);
}

.fp-select {
  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 asks 24 by 24 at AA; this clears it comfortably. */
  min-height: 2.75rem;
  padding: 0 var(--la-space-2);
}
.fp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fp-knob input[type="range"] {
  width: 100%;
  min-height: 2.75rem;
  accent-color: var(--accent);
}
.fp-knob input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- stage 1: the numbers ------------------------------------------------ */
/* Wraps rather than scrolls. It scrolled first, and axe was right to fail it:
   a region with scrollable overflow that nothing can focus is unreachable by
   keyboard, and the fix is not a tabindex on a paragraph of text, it is to stop
   making it scroll. Eight monospace numbers wrap onto two lines on a phone and
   read exactly as well. */
.fp-numbers {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  word-spacing: 0.4em;
}

/* ---- stage 2: the histogram it passes ------------------------------------ */
.fp-hist {
  list-style: none;
  margin-top: var(--la-space-3);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  align-items: end;
  height: 6rem;
}

.fp-bin {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  gap: var(--la-space-1);
}

/* Neutral, deliberately. These bars are the machine PASSING, and the accent on
   this page means the structure nobody was looking for. */
.fp-binbar {
  align-self: end;
  width: 100%;
  background: var(--la-ink-dim);
  border-radius: 1px 1px 0 0;
}

.fp-binlabel {
  font-family: var(--la-font-mono);
  font-size: 0.6rem;
  color: var(--la-ink-faint);
  text-align: center;
}

/* CSP forbids an inline style attribute, so the heights are data values with a
   rule per step, rounded to five the way the other machines round. */
.fp-bin[data-h="0"] .fp-binbar { height: 0%; }
.fp-bin[data-h="5"] .fp-binbar { height: 5%; }
.fp-bin[data-h="10"] .fp-binbar { height: 10%; }
.fp-bin[data-h="15"] .fp-binbar { height: 15%; }
.fp-bin[data-h="20"] .fp-binbar { height: 20%; }
.fp-bin[data-h="25"] .fp-binbar { height: 25%; }
.fp-bin[data-h="30"] .fp-binbar { height: 30%; }
.fp-bin[data-h="35"] .fp-binbar { height: 35%; }
.fp-bin[data-h="40"] .fp-binbar { height: 40%; }
.fp-bin[data-h="45"] .fp-binbar { height: 45%; }
.fp-bin[data-h="50"] .fp-binbar { height: 50%; }
.fp-bin[data-h="55"] .fp-binbar { height: 55%; }
.fp-bin[data-h="60"] .fp-binbar { height: 60%; }
.fp-bin[data-h="65"] .fp-binbar { height: 65%; }
.fp-bin[data-h="70"] .fp-binbar { height: 70%; }
.fp-bin[data-h="75"] .fp-binbar { height: 75%; }
.fp-bin[data-h="80"] .fp-binbar { height: 80%; }
.fp-bin[data-h="85"] .fp-binbar { height: 85%; }
.fp-bin[data-h="90"] .fp-binbar { height: 90%; }
.fp-bin[data-h="95"] .fp-binbar { height: 95%; }
.fp-bin[data-h="100"] .fp-binbar { height: 100%; }

/* ---- stage 3: the two views ---------------------------------------------- */
.fp-views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--la-space-3);
  margin-top: var(--la-space-3);
}

.fp-view { display: grid; gap: var(--la-space-1); }

.fp-canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  display: block;
  background: var(--la-sunken);
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
}

.fp-view figcaption {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
  text-align: center;
}

/* ---- stage 4: the planes ------------------------------------------------- */
.fp-planes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-1);
  margin-top: var(--la-space-3);
}

/* The one thing on this page that earns colour: a plane that exists and should
   not. */
.fp-plane {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--la-radius-sm);
  padding: 0.15em 0.55em;
  font-variant-numeric: tabular-nums;
}

.fp-verdictline {
  margin-top: var(--la-space-3);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
}
.fp[data-lattice="yes"] .fp-verdictline { color: var(--accent); }

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

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

@media (max-width: 30rem) {
  .fp-views { grid-template-columns: 1fr; }
  .fp-hist { height: 5rem; }
}