/* QC — the lab's pages.
 *
 * Everything structural is borrowed: the party pages' `.pwrap` set draws the
 * mastheads, the section headings, the register tables and the empty lines, and
 * the finance report set draws /qc/verdicts. What is left, and all that is in
 * here, is TONE — the four states a lab verdict can be in — plus the handful of
 * layout rules the borrowed components do not cover.
 *
 * Scoped under .pwrap and .rep like the sets they extend, so nothing here can
 * reach a page outside this section.
 *
 * ── The four tones ────────────────────────────────────────────────────────
 *
 * Five verdicts, four tones (Qc::Status): settled well, settled badly, still
 * owed, and everything that is neither news nor pending. They are the paper
 * palette's own green, rust and gold — the same three the rest of the app
 * spends, so an accepted sample and a paid invoice are the same colour of
 * good news. */

/* Two shapes wear a tone, and the class sits in a different place on each: on
 * the party pages' `.meter` it is the TRACK and the fill is the child, and in
 * the report set's `.rep-bars` it is the FILL itself. Both are spelled out
 * rather than loosened to one selector, so neither can start colouring
 * something it was not meant to. */
.pwrap .meter.qc-ok   span { background: var(--green); }
.pwrap .meter.qc-bad  span { background: var(--rust); }
.pwrap .meter.qc-wait span { background: var(--gold); }
.pwrap .meter.qc-flat span { background: var(--ink-4); }

.rep .rep-bar-track span.qc-ok   { background: var(--green); }
.rep .rep-bar-track span.qc-bad  { background: var(--rust); }
.rep .rep-bar-track span.qc-wait { background: var(--gold); }
.rep .rep-bar-track span.qc-flat { background: var(--ink-4); }

/* ── the day picker ── */
.pwrap .qc-picker {
  display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 0.9rem;
}
.pwrap .qc-picker input[type="date"] { width: 170px; }
.pwrap .qc-picker label { display: block; margin-bottom: 0.1rem; }

/* ── the splits ──
 * Four of them on the day board, two up on a wide screen and stacked on a
 * narrow one. `auto-fit` rather than a media query: the breakpoint is where the
 * columns stop being readable, which is a width in ch and not a device. */
.pwrap .qc-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 0.4rem 2.2rem; margin-bottom: 0.6rem;
}
.pwrap .qc-split { min-width: 0; }

/* name · figure · meter · note, on one line. The meter takes the slack, so the
 * bars of one split all start and end in the same place however long the
 * longest name is. */
.pwrap .qc-row {
  display: grid; grid-template-columns: minmax(7rem, 12rem) auto minmax(3rem, 1fr) auto;
  gap: 0.7rem; align-items: center; padding: 0.32rem 0;
  border-bottom: 1px solid var(--edge);
}
.pwrap .qc-row:last-child { border-bottom: 0; }
.pwrap .qc-row-name {
  font-size: 0.82rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pwrap .qc-row .amt { font-size: 0.82rem; text-align: right; }
.pwrap .qc-row .meter { margin-top: 0; }
.pwrap .qc-row-note {
  font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-4);
  white-space: nowrap; text-align: right;
}

/* ── verdict chips ──
 * A verdict and its count, small enough that a day's whole mix fits in a table
 * cell. The tone is the TEXT here rather than a fill: a row of solid blocks in
 * a table reads as a warning, and most of these rows are ordinary. */
.pwrap .qc-chip, .rep .qc-chip {
  display: inline-block; font-family: var(--party-mono); font-size: 0.66rem;
  padding: 0.1rem 0.45rem; margin: 0.1rem 0.25rem 0.1rem 0;
  border: 1px solid var(--edge-2); border-radius: 999px; color: var(--ink-3);
  white-space: nowrap;
}
.pwrap .qc-chip b, .rep .qc-chip b { font-weight: 600; color: var(--ink); }
.pwrap .qc-chip.qc-ok,   .rep .qc-chip.qc-ok   { border-color: var(--green); color: var(--green-ink); }
.pwrap .qc-chip.qc-bad,  .rep .qc-chip.qc-bad  { border-color: var(--rust);  color: var(--rust-ink); }
.pwrap .qc-chip.qc-wait, .rep .qc-chip.qc-wait { border-color: var(--gold);  color: var(--gold-ink); }

/* The day being read is marked in the recent list, the same way the register
 * marks the row you came from. */
.pwrap #qc-recent-days tr.on td { background: var(--well); }
.pwrap #qc-recent-days tr.on td:first-child { box-shadow: inset 3px 0 0 var(--ink); }

/* ── sample keys ──
 * `GFPLTOUL-10082026114259am6a796bebc1c9c` is 37 characters of the plant's own
 * identifier. Mono, because it is read character by character when it is read
 * at all, and it wraps rather than pushing the table sideways. */
.pwrap .qc-key {
  font-family: var(--party-mono); font-size: 0.72rem;
  word-break: break-all; line-height: 1.3;
}

/* The line under a filter bar that says what is being looked at. */
.pwrap .qc-scope {
  font-family: var(--party-mono); font-size: 0.72rem; color: var(--ink-3);
  margin: 0 0 0.6rem;
}

/* ── the two determinations disagreeing ──
 * A hairline in the margin, not a filled row: on a busy day a panel of solid
 * warning rows stops meaning anything. The `≠` chip on the second reading is
 * what actually says it; this only helps the eye find the line again. */
.pwrap tr.qc-disagree td:first-child { box-shadow: inset 3px 0 0 var(--rust); }