/* Double Buffer — a Logical Art nibble.
 *
 * The page is a display drawn as its scanlines, so the stylesheet is mostly
 * one element repeated twenty-four times. Colour carries exactly one fact:
 * which picture a scanline came from. Two tones inside one frame IS the tear,
 * so the two must be distinguishable without relying on hue, and the seam
 * carries a rule of its own on top.
 *
 * The machine takes the studio neutral. la-accent-pick.py reports no colour
 * left that clears both floors against the accents already published.
 */

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

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

.db-steplabel { margin: var(--la-space-5) 0 var(--la-space-2); font-weight: 600; color: var(--la-ink); }
.db-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;
}
.db-hint { margin: 0 0 var(--la-space-3); color: var(--la-ink-dim); }

.db-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--la-space-2); margin: var(--la-space-3) 0; }
.db-field { width: 100%; }
.db-field label { display: block; margin-bottom: 0.35rem; color: var(--la-ink-dim); font-size: var(--la-text-sm); }
.db-range { width: 100%; max-width: 24rem; accent-color: var(--la-instrument); }

/* The display. Twenty-four scanlines, each its own element, because the tear
   is a property of the lines and not of a picture drawn over them. */
.db-screen {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--la-space-3) 0;
  padding: 6px;
  border: 1px solid var(--la-hairline-strong);
  border-radius: var(--la-radius-sm, 4px);
  background: var(--la-sunken);
  max-width: 30rem;
}
.db-line { height: 0.6rem; border-radius: 1px; }
/* Two pictures, two tones AND two weights, so a monochrome print still shows
   where one ends and the other begins. */
.db-line[data-frame="1"] { background: var(--la-ink-dim); opacity: 0.55; }
.db-line[data-frame="2"] { background: var(--la-instrument); }
/* The seam gets a rule of its own: the whole subject is that this line is
   where two frames meet, and a tone change alone is easy to miss. */
.db-line[data-seam="yes"] { box-shadow: 0 -2px 0 0 var(--la-ink); }

.db-said { margin: var(--la-space-3) 0 0; color: var(--la-ink-dim); font-size: var(--la-text-sm); }

.db-table, .db-checks { width: 100%; border-collapse: collapse; font-size: var(--la-text-sm); }
.db-table th, .db-table td, .db-checks th, .db-checks td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--la-hairline);
  vertical-align: top;
}
.db-table thead th, .db-checks thead th {
  font-size: var(--la-text-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--la-ink-dim); font-weight: 600;
}
.db-table td { font-family: var(--la-font-mono); font-size: 0.8rem; color: var(--la-ink-dim); }
.db-checks td { color: var(--la-ink-dim); }
.db-checks td:last-child { font-family: var(--la-font-mono); font-size: 0.8rem; }
.db-checks tr[data-mark="bad"] td { color: var(--la-warn, #e0b341); }