/* Floating Point.
 *
 * The accent is declared on the machine root in 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,
 * which is how nine differently-labelled tier pills once rendered the same
 * grey.
 *
 * Every measure is in rem. `ch` resolves against the element's own font-size,
 * so a shared measure written in ch is a different width in every place it is
 * used.
 */

/* The page frame. Every machine's own stylesheet carries these three, and this
   one carried none of them, so the column ran the full width of the browser:
   1,584px against the 640px every other machine holds. Found by an operator
   looking at it, which is the check no gate replaces, and then confirmed by
   diffing the selectors this file has against the ones every other nibble
   shares. The body background below was missing for the same reason. */
* { margin: 0; padding: 0; box-sizing: border-box; }

main.nibble {
  max-width: var(--la-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
}

/* The measure belongs to the column, not to every block inside it. */
main.nibble p, main.nibble ul, main.nibble ol, main.nibble dl,
main.nibble h1, main.nibble h2 { max-width: none; }

/* The page itself. Every machine's own stylesheet sets this, and leaving it out
   is invisible: the browser paints a dark canvas from color-scheme, so the page
   LOOKS right in a screenshot while having no background colour at all. axe
   then computes contrast against white and reports 83 serious violations,
   correctly, because a specified background is what a contrast checker and an
   assistive tool can actually see. */
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;
}

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

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

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

.flp-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
}

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

/* Label and control, in pairs that cannot come apart. This was a wrapping flex
   row of four flat children, which is fine until the column is narrow enough
   to wrap between a label and the input it names: "Second number" ended a line
   and its box started the next one. It only became visible once the measure
   was applied, because at 1584px everything fit on one line. A grid of two
   columns puts each pair on its own row and has no state where a name is
   separated from the thing it names. */
.flp-knob {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr);
  align-items: center;
  gap: var(--la-space-2) var(--la-space-3);
  margin-top: var(--la-space-3);
}

.flp-knob label {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
}

.flp-input {
  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.45em 0.7em;
  min-width: 9rem;
  max-width: 100%;
}

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

.flp-range {
  accent-color: var(--accent);
  min-width: 12rem;
  max-width: 100%;
  flex: 1 1 12rem;
}

.flp-value {
  font-family: var(--la-font-mono);
  color: var(--accent);
}

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

.flp-btn {
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  color: var(--la-ink-dim);
  background: color-mix(in srgb, var(--la-ink) 6%, transparent);
  border: 1px solid var(--la-hairline);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
}

.flp-btn:hover { border-color: var(--accent); color: var(--la-ink); }

/* The readout. A definition list, because that is what it is: a label and the
   value it names. Grid rather than float so a long number wraps under its own
   label instead of under the next one. */
.flp-readout {
  margin: var(--la-space-3) 0 0;
  display: grid;
  gap: var(--la-space-2);
}

.flp-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--la-space-1) var(--la-space-3);
  align-items: baseline;
}

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

.flp-row dd {
  margin: 0;
  color: var(--la-ink-dim);
  overflow-wrap: anywhere;
}

/* The two rows the page is actually about. */
.flp-strong dd { color: var(--la-ink); }
.flp-strong dt { color: var(--la-ink-dim); }

.flp-num,
.flp-code {
  font-family: var(--la-font-mono);
  font-variant-numeric: tabular-nums;
}

.flp-code {
  font-size: 0.95em;
  color: var(--accent);
}

/* The verdicts carry their state in a data attribute rather than a class, so
   the JavaScript sets one thing and the stylesheet owns every colour. CSP
   forbids inline style, so a per-value rule is the only way to do this. */
[data-equal="no"] { color: var(--accent); }
[data-equal="yes"] { color: var(--la-ink); }
[data-collides="yes"] { color: var(--accent); }

/* The sixty-four bits, in three runs. */
.flp-bitrow {
  margin-top: var(--la-space-3);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-xs);
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.flp-seg { padding: 0.15em 0.25em; border-radius: 3px; }
.flp-seg[data-seg="sign"] {
  color: var(--la-ink);
  background: color-mix(in srgb, var(--la-ink) 14%, transparent);
}
.flp-seg[data-seg="exponent"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.flp-seg[data-seg="fraction"] { color: var(--la-ink-dim); }

.flp-why { margin-top: var(--la-space-5); }
.flp-why h2 {
  font-size: var(--la-text-lg);
  margin-top: var(--la-space-4);
  margin-bottom: var(--la-space-2);
}
.flp-why p {
  color: var(--la-ink-dim);
  margin-bottom: var(--la-space-2);
}

@media (max-width: 34rem) {
  /* One column: a ten-rem label beside a fifty-digit number leaves the number
     three characters wide on a phone. */
  .flp-row { grid-template-columns: 1fr; }
  .flp-row dt { color: var(--la-ink-faint); }
  /* Same reasoning for the controls: "Two to the power of 53" beside a slider
     leaves the slider too short to aim at. The label sits above its own
     control instead, which keeps the pair together either way. */
  .flp-knob { grid-template-columns: 1fr; }
}