/* Fringes.
 *
 * The accent comes from la-machines.css, generated from the roster. Nothing
 * here declares --machine or --accent: a custom property set on the element
 * that reads it overrides the inherited value.
 *
 * Measures in rem, never ch: ch resolves against the element's own font-size.
 *
 * The subpixel stripes are driven by data-lit rather than an inline style,
 * because this site ships style-src 'self' with no unsafe-inline and a style
 * attribute is silently refused rather than errored.
 */

/* The page frame. Floating Point shipped without these and ran the full width
   of the browser, which no gate saw and an operator did. */
* { margin: 0; padding: 0; box-sizing: border-box; }

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

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

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

/* ---- stage labels ----------------------------------------------------- */

.fr-steplabel {
  display: flex;
  align-items: baseline;
  gap: var(--la-space-2);
  margin-top: var(--la-space-6);
  margin-bottom: var(--la-space-2);
  font-weight: 600;
  color: var(--la-ink);
}

.fr-steplabel:first-of-type { margin-top: var(--la-space-3); }

.fr-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

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

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

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

.fr-knob { margin-top: var(--la-space-4); }

.fr-knob label {
  display: block;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

.fr-value { color: var(--accent); }

/* Not a <label>: it names a group of buttons, and a label's `for` must point at
   a form control. The HTML validity gate caught it pointing at nothing. */
.fr-grouplabel {
  display: block;
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

.fr-bitrow {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.fr-bit {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink-dim);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  /* 2.5.8 asks for 24 CSS pixels. */
  min-width: 2.25rem;
  min-height: 2.25rem;
  cursor: pointer;
}

.fr-bit[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.fr-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-3);
}

.fr-btn {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  padding: 0.4em 0.9em;
  cursor: pointer;
  min-height: 2.25rem;
  min-width: 2.25rem;
}

.fr-btn:hover { border-color: var(--accent); color: var(--accent); }

.fr-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.fr-btn:focus-visible,
.fr-bit:focus-visible,
.fr-range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.fr-range {
  width: 100%;
  max-width: 26rem;
  accent-color: var(--accent);
  min-height: 1.5rem;
}

/* ---- stage 1: the dots ------------------------------------------------ */

.fr-dots {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: var(--la-space-4);
  padding: var(--la-space-3) 0;
  border-top: 1px solid var(--la-hairline-strong);
  border-bottom: 1px solid var(--la-hairline-strong);
}

.fr-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 3rem;
  min-width: 2.6rem;
}

.fr-dot-cell {
  display: block;
  width: 100%;
  height: 3rem;
  border-radius: 3px;
  border: 1px solid var(--la-hairline);
}

/* The four hues, plus black and white. Named here rather than computed,
   because turning a phase into a specific triple needs a model of a particular
   television and the page says so instead of pretending. */
.fr-dot[data-colour="black"] .fr-dot-cell { background: #050607; }
.fr-dot[data-colour="white"] .fr-dot-cell { background: #e8ecef; }
.fr-dot[data-colour="violet"] .fr-dot-cell { background: #a05cf0; }
.fr-dot[data-colour="green"] .fr-dot-cell { background: #45c85a; }
.fr-dot[data-colour="blue"] .fr-dot-cell { background: #3f7ef0; }
.fr-dot[data-colour="orange"] .fr-dot-cell { background: #e07a2a; }

.fr-dot-phase {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-faint);
}

/* ---- stage 2: the patterns -------------------------------------------- */

.fr-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--la-space-2);
  margin-top: var(--la-space-4);
  padding: var(--la-space-3) 0;
  border-top: 1px solid var(--la-hairline-strong);
  border-bottom: 1px solid var(--la-hairline-strong);
}

.fr-pat {
  display: inline-flex;
  gap: 1px;
  padding: 0.25rem;
  border: 1px solid var(--la-hairline);
  border-radius: 3px;
}

.fr-pdot {
  display: block;
  width: 0.5rem;
  height: 1.4rem;
  background: #0d0f11;
}

.fr-pdot[data-on="yes"] { background: var(--accent); }

/* ---- stage 3: the panel ------------------------------------------------ */

.fr-lcd {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--la-space-4);
  padding: var(--la-space-3);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius, 6px);
  background: #05070a;
}

.fr-px {
  display: flex;
  flex: 1 1 0;
  gap: 1px;
  min-width: 0;
}

.fr-stripe {
  display: block;
  flex: 1 1 0;
  height: 5rem;
  border-radius: 1px;
  background: #0e1114;
}

/* Coverage in fifths, because a stripe is either off, part-lit or lit and a
   continuous value would need an inline style the policy refuses. The engine
   rounds coverage to one of these; the readout carries the exact figure. */
.fr-stripe[data-stripe="0"][data-lit="1"] { background: #3a1418; }
.fr-stripe[data-stripe="0"][data-lit="2"] { background: #6b2028; }
.fr-stripe[data-stripe="0"][data-lit="3"] { background: #9c2c38; }
.fr-stripe[data-stripe="0"][data-lit="4"] { background: #d43848; }

.fr-stripe[data-stripe="1"][data-lit="1"] { background: #123a18; }
.fr-stripe[data-stripe="1"][data-lit="2"] { background: #1d6b28; }
.fr-stripe[data-stripe="1"][data-lit="3"] { background: #299c38; }
.fr-stripe[data-stripe="1"][data-lit="4"] { background: #35d448; }

.fr-stripe[data-stripe="2"][data-lit="1"] { background: #16203f; }
.fr-stripe[data-stripe="2"][data-lit="2"] { background: #223470; }
.fr-stripe[data-stripe="2"][data-lit="3"] { background: #2f48a1; }
.fr-stripe[data-stripe="2"][data-lit="4"] { background: #3d5ed4; }

/* ---- the readouts ------------------------------------------------------ */

.fr-readout {
  margin-top: var(--la-space-4);
  border-top: 1px solid var(--la-hairline);
}

.fr-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--la-space-3);
  padding: var(--la-space-2) 0;
  border-bottom: 1px solid var(--la-hairline);
}

.fr-row dt {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.fr-row dd {
  font-size: var(--la-text-sm);
  color: var(--la-ink);
  overflow-wrap: anywhere;
}

.fr-strong dd { color: var(--accent); font-weight: 600; }

.fr-num { font-family: var(--la-font-mono); }

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

.fr-why h2 {
  margin-top: var(--la-space-5);
  margin-bottom: var(--la-space-2);
}

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

.fr-why q { color: var(--la-ink); }

@media (max-width: 34rem) {
  .fr-row { grid-template-columns: 1fr; }
  .fr-row dt { color: var(--la-ink-faint); }
  .fr-dot-cell { height: 2.2rem; }
  .fr-stripe { height: 3.5rem; }
}