/* The page frame. Three rules that every machine here declares for itself, and
   the ones that shipped without them ran the full width of a desktop window
   against the 640px the rest hold. These five were built without them too: the
   lede measured 1,264px and about 112 characters against the studio's own 600
   and 53, which is past WCAG 1.4.8's 80 as well. Caught by looking at the page
   and then measuring it against a sibling, which is what step six of the
   pipeline is for. */
* { margin: 0; padding: 0; box-sizing: border-box; }

main.bit {
  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.bit p, main.bit ul, main.bit ol, main.bit dl,
main.bit h1, main.bit h2 { max-width: none; }

/* Without this the browser paints a dark canvas from color-scheme, so the page
   LOOKS right in a screenshot while having no background colour at all, and a
   contrast checker measures against white and is correct to fail it. */
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;
}

/* Flip-Flop. Two gates that read each other, so the pair is drawn as a pair. */

.ff-wrap { display: grid; gap: var(--la-space-4); }

.ff-gates {
  display: flex;
  gap: var(--la-space-4);
  flex-wrap: wrap;
}

.ff-gate {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: var(--la-space-3) var(--la-space-4);
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm);
  min-width: 7.5rem;
}

.ff-gate-name {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.78rem;
  color: var(--la-ink-faint);
  letter-spacing: 0.08em;
}

.ff-out {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--la-ink-dim);
}

/* The lit output carries the accent. Set per value rather than by an inline
   style, because every site here ships style-src 'self' and an inline style
   is silently refused rather than erroring. */
.ff-out[data-bit="1"] { color: var(--ff-accent, #00f0b8); }

.ff-label {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.9rem;
  color: var(--la-ink-dim);
}

.ff-inputs {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  color: var(--la-ink-faint);
}

.ff-controls { display: flex; gap: var(--la-space-2); flex-wrap: wrap; }

.ff-trace {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.85rem;
  color: var(--la-ink-faint);
}

/* The last pass is the one that agreed with the one before it, which is what
   "settled" means, so it is the line worth reading. */
.ff-trace .ff-step:last-child { color: var(--la-ink); }

.ff-said { min-height: 2.6em; }

/* [hidden] restated because an author display value beats it, which has now
   shipped three times in this family. */
.ff-wrap [hidden] { display: none !important; }

/* The page's own button class. `la-btn` was used first and is defined by no
   stylesheet in this family, so those buttons would have rendered as browser
   defaults; la-machine-audit caught it before they shipped. Each machine
   styles its own, which is the convention every other page here follows. */
.ff-btn {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px);
  background: var(--la-raised);
  color: var(--la-ink);
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.9rem;
  cursor: pointer;
}

.ff-btn:hover { border-color: var(--ff-accent, var(--la-instrument)); }
.ff-btn[aria-pressed="true"] { border-color: var(--ff-accent, var(--la-instrument)); color: var(--la-ink); }
.ff-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Screen-reader only. Without this the table caption renders visibly, which is
   what la-machine-audit's dead-class finding was pointing at. Same shape as
   every other machine's -sr class. */
.ff-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The checks table. Shares the studio's table look; declared here because the
   page links no sheet that defines it. */
.ff-table, .ff-table-checks, .ff-checks {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.84rem;
}

.ff-table th, .ff-table td,
.ff-table-checks th, .ff-table-checks td,
.ff-checks th, .ff-checks td {
  text-align: left;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--la-hairline);
  vertical-align: top;
}