/* 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.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; }

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

/* The Adder. The carry is the subject, so the carry is what is coloured. */

.ad-bits { display: flex; gap: var(--la-space-2); flex-wrap: wrap; align-items: center; }

.ad-bit {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  min-width: 4.6rem;
}

/* Set by value rather than inline, because every site here ships
   style-src 'self' and an inline style is refused in silence. */
.ad-bit[data-bit="1"] { border-color: var(--ad-accent, #6cc428); color: var(--la-ink); }

.ad-out {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.15rem;
  color: var(--la-ink-dim);
}
.ad-out[data-carry="1"] { color: var(--ad-accent, #6cc428); }

.ad-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: var(--la-space-3) 0;
}

.ad-cell {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--la-hairline);
  border-radius: var(--la-radius-sm);
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.72rem;
  color: var(--la-ink-faint);
  min-width: 4.4rem;
}

/* A stage that received a carry is a stage that had to wait. That is the
   whole argument of the page, so it is the only thing marked. */
.ad-cell[data-carried="yes"] {
  border-color: var(--ad-accent, #6cc428);
  color: var(--la-ink-dim);
}

.ad-cell-line { display: block; }

.ad-inputs { display: flex; gap: var(--la-space-3); flex-wrap: wrap; align-items: end; }
.ad-inputs label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--la-ink-dim); }
.ad-inputs input {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  width: 7rem;
}

.ad-sum {
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 1.2rem;
  color: var(--la-ink);
}

.ad-said, .ad-worst-out { min-height: 2.6em; color: var(--la-ink-dim); }

.ad-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. */
.ad-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;
}

.ad-btn:hover { border-color: var(--ad-accent, var(--la-instrument)); }
.ad-btn[aria-pressed="true"] { border-color: var(--ad-accent, var(--la-instrument)); color: var(--la-ink); }
.ad-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. */
.ad-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. */
.ad-table, .ad-table-checks, .ad-checks {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.84rem;
}

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

/* ---- Stage labels. The tier's mark, same shape as every other nibble. ---- */
.ad-steplabel {
  display: flex;
  align-items: center;
  gap: var(--la-space-2);
  margin-top: var(--la-space-4);
  margin-bottom: var(--la-space-2);
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--la-ink-faint);
}

.ad-stepno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border: 1px solid var(--la-hairline-strong);
  border-radius: 50%;
  color: var(--la-ink-dim);
}