/* JPEG. The accent marks the thing this machine is about and nothing else.

   Everything above the first machine-specific rule is the floor every page on
   this studio needs, and it is generated rather than remembered: four separate
   gates caught all four of these missing on all five machines built on
   2026-08-17, and every one of them is invisible in a screenshot. */

:root { --accent: #00e8e0; }

/* Leaving the background out is the invisible one: the browser paints a dark
   canvas from color-scheme, so the page looks right while having no background
   colour at all, and a contrast checker then measures against white and is
   correct to fail it. */
* { 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;
}

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

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

.jp-steplabel { margin: var(--la-space-5) 0 var(--la-space-2); font-weight: 600; color: var(--la-ink); }
.jp-stepno {
  display: inline-block; min-width: 1.6rem; margin-right: 0.5rem;
  padding: 0.05rem 0.5rem; border: 1px solid var(--la-hairline-strong);
  border-radius: 999px; font-family: var(--la-font-mono);
  font-size: var(--la-text-xs); color: var(--la-ink-dim); text-align: center;
}
.jp-hint { margin: 0 0 var(--la-space-3); color: var(--la-ink-dim); }

.jp-knob { margin: var(--la-space-3) 0; }
.jp-knob label { display: block; margin-bottom: 0.35rem; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.jp-value { color: var(--accent); font-family: var(--la-font-mono); }
.jp-range { width: 100%; max-width: 24rem; accent-color: var(--accent); }
.jp-input {
  width: 100%; max-width: 30rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken); color: var(--la-ink);
  font-family: var(--la-font-mono); font-size: var(--la-text-sm);
}
.jp-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jp-presets { display: flex; flex-wrap: wrap; gap: var(--la-space-2); margin: var(--la-space-3) 0; }
.jp-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: var(--la-font-mono); font-size: var(--la-text-sm);
  cursor: pointer;
}
.jp-btn:hover { border-color: var(--accent); }
.jp-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.jp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.jp-table { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.jp-table th, .jp-table td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline);
}
.jp-table thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.jp-table tbody th, .jp-table td {
  font-family: var(--la-font-mono); font-size: 0.8rem; color: var(--la-ink-dim); font-weight: 400;
}
/* The row that matters, marked by a rule and by a word in its own cell as well
   as by colour, so it survives forced colours and a monochrome print. */
.jp-table tr[data-mark="yes"] td { color: var(--accent); }
.jp-table tr[data-mark="yes"] th {
  border-left: 3px solid var(--accent); padding-left: 0.45rem; color: var(--accent);
}

.jp-readout { margin: var(--la-space-4) 0 0; }
.jp-row {
  display: flex; justify-content: space-between; gap: var(--la-space-3);
  padding: 0.4rem 0; border-bottom: 1px solid var(--la-hairline);
}
.jp-row dt { color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.jp-num { font-family: var(--la-font-mono); color: var(--la-ink); margin: 0; word-break: break-all; }
.jp-row.jp-strong dd { color: var(--accent); }

.jp-verdict { margin: var(--la-space-3) 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.jp-verdict[data-mark="yes"] { border-left: 3px solid var(--accent); padding-left: 0.7rem; }

/* Four things every machine built since has needed, added here after the
   fifth one hand-wrote its own copy of rules the floor already emitted:
   a caption above a table, a warning line that styles itself only when it has
   something to say, a disabled control, and the pass/fail marks a load-time
   verification table uses. Written once so the next machine does not write
   them a sixth time slightly differently. */
.jp-caption { margin: var(--la-space-4) 0 var(--la-space-2); color: var(--la-ink-dim); font-size: var(--la-text-sm); }

.jp-warn { margin: var(--la-space-3) 0 0; color: var(--la-ink); font-size: var(--la-text-sm); }
.jp-warn:empty { display: none; }
.jp-warn:not(:empty) { border-left: 3px solid var(--accent); padding-left: 0.7rem; }

.jp-btn:disabled { opacity: 0.45; cursor: default; }
.jp-btn:hover:not(:disabled) { border-color: var(--accent); }

.jp-table tr[data-mark="bad"] td { color: var(--accent); }
.jp-table tr[data-mark="bad"] th { border-left: 3px solid var(--accent); padding-left: 0.45rem; }
.jp-table tr[data-mark="here"] { background: var(--la-raised); }

/* A bit has no step labels, so nothing separates one panel from the next and
   the last line of one runs into the first line of the other. */
.jp-step + .jp-step { margin-top: var(--la-space-6); }

/* The drawing, which every machine has and every machine has styled itself. */
.dia .dia-lede { fill: var(--la-ink); font-size: 16px; }

/* ---- what is specific to this machine ----------------------------------- */

/* Sixty-four numbers as a grid rather than a table, because a table of this
   is 64 cells a screen reader has to walk and the summary readouts carry
   what matters. */
.jp-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
  max-width: 28rem;
  margin: var(--la-space-2) 0 var(--la-space-4);
}

.jp-cell {
  padding: 0.35rem 0.1rem;
  border: 1px solid var(--la-hairline);
  font-family: var(--la-font-mono);
  font-size: 0.7rem;
  text-align: center;
  color: var(--la-ink-dim);
  overflow: hidden;
}

/* A coefficient rounded away, and one large enough to matter. Both carry the
   number itself, so colour is never the only signal. */
.jp-cell[data-zero="yes"] { color: var(--la-hairline-strong); }
.jp-cell[data-big="yes"] { color: var(--accent); border-color: var(--accent); }

/* The pixel grids are drawn as greys as well as numbers, so the block reads
   as an image. Ten steps, which is enough to see a gradient and few enough
   to write out. */
/* Every pair here is measured, not chosen: the first version used mid
   greys on mid greys and axe found 85 contrast violations on one page.
   Text is white or black, whichever clears more against its cell, and
   the worst pair on the scale is 5.3:1. */
.jp-cell[data-level="0"] { background: #000000; color: #ffffff; }  /* 21.0:1 */
.jp-cell[data-level="1"] { background: #1a1a1a; color: #ffffff; }  /* 17.4:1 */
.jp-cell[data-level="2"] { background: #333333; color: #ffffff; }  /* 12.6:1 */
.jp-cell[data-level="3"] { background: #4d4d4d; color: #ffffff; }  /* 8.5:1 */
.jp-cell[data-level="4"] { background: #666666; color: #ffffff; }  /* 5.7:1 */
.jp-cell[data-level="5"] { background: #808080; color: #000000; }  /* 5.3:1 */
.jp-cell[data-level="6"] { background: #999999; color: #000000; }  /* 7.4:1 */
.jp-cell[data-level="7"] { background: #b3b3b3; color: #000000; }  /* 10.0:1 */
.jp-cell[data-level="8"] { background: #cccccc; color: #000000; }  /* 13.1:1 */

.jp-select {
  width: 100%;
  max-width: 30rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken);
  color: var(--la-ink);
  font-family: var(--la-font-mono);
  font-size: var(--la-text-sm);
}
.jp-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The verification table keeps the shared table styling under its own name,
   because .jp-table is the quantiser grid on this machine. */
.jp-table-t { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.jp-table-t th, .jp-table-t td {
  text-align: left; padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--la-hairline);
}
.jp-table-t thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.jp-table-t tbody th, .jp-table-t td {
  font-family: var(--la-font-mono); font-size: 0.8rem;
  color: var(--la-ink-dim); font-weight: 400;
}
.jp-table-t tr[data-mark="bad"] td { color: var(--accent); }
.jp-table-t tr[data-mark="bad"] th {
  border-left: 3px solid var(--accent); padding-left: 0.45rem;
}

.dia .jp-block { fill: none; stroke: var(--la-hairline-strong); stroke-width: 1.5; }
.dia .jp-kept { fill: var(--accent); }
.dia .jp-label { fill: var(--la-ink-dim); font-size: 12px; }