/* ══ THE DAILY THREE ══════════════════════════════════════════════════════════
   ARCHITECTURE-2026-08-07 §8. The Cognition Lab's lede: three instruments, one
   per domain, redrawn every morning, each row carrying the student's RECORD on
   it rather than the rule that picked it.

   THE ROTATION-DECLARED TREATMENT STOOD HERE — three columns divided by
   hairline rules, a department slug and a pool count on each ("MEMORY · 1 OF
   8"), and the next three mornings listed underneath. §8 retired the framing,
   so its eighty lines went with it rather than being left to rot behind a
   query parameter nobody would type again.

   The rows below are what shipped. They set as an INDEX, not as cards: a
   numeral, a name, and the record ranged right, on one hairline-ruled line
   each — the same construction the departments list and the front-page index
   use, so the lede and the body of the page read as one document.
   ═══════════════════════════════════════════════════════════════════════════ */

.bs .wu { display: block; gap: 0; }

/* ── the rule line, shared ──
   Both candidates open by stating their own contract. A mono slug, then the
   sentence — the same device the departments use for their heads. */
.bs .wu-rule {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0 0 18px; padding: 0 0 12px;
  border-bottom: 1px solid var(--bs-rule);
}
.bs .wu-rule-k {
  font-family: var(--bs-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bs-blue); white-space: nowrap;
}
.bs .wu-rule-t {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--bs-ui); font-size: 13px; line-height: 1.5; color: var(--bs-ink-3);
}

/* ══ THE LEDGER ROWS ══════════════════════════════════════════════════════ */

.bs .wu-b-rows { list-style: none; margin: 0; padding: 0; }
.bs .wu-b-li { min-width: 0; }
.bs .wu-b-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 104px;
  column-gap: 16px; row-gap: 2px; align-items: baseline;
  width: 100%; padding: 13px 4px; text-align: left;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px dotted var(--bs-rule);
  font: inherit; color: var(--bs-ink); cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
/* The same slide the departments list and the front-page index use — one
   affordance for "this row is a destination", across the whole paper. */
.bs .wu-b-row:hover { background: var(--bs-sheet); transform: translateX(8px); }
.bs .wu-b-row:active { transform: translateX(4px); }
.bs .wu-b-row:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }

.bs .wu-b-n {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  font-family: var(--bs-ed); font-variation-settings: 'WONK' 1;
  font-weight: 900; font-size: 21px; letter-spacing: -.02em; line-height: 1.1;
  color: var(--bs-blue);
}
.bs .wu-b-name {
  grid-column: 2; grid-row: 1; min-width: 0;
  font-family: var(--bs-ed); font-variation-settings: 'WONK' 1;
  font-weight: 900; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.08;
  letter-spacing: -.025em; overflow-wrap: break-word;
}
.bs .wu-b-dept {
  grid-column: 3; grid-row: 1; justify-self: end; text-align: right;
  font-family: var(--bs-mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bs-blue);
}
.bs .wu-b-runs {
  grid-column: 2; grid-row: 2; min-width: 0; margin-top: 3px;
  font-family: var(--bs-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bs-ink-2); overflow-wrap: break-word;
}
.bs .wu-b-row.is-done .wu-b-runs::before { content: '✓ '; color: var(--bs-ok); }
.bs .wu-b-row.is-new .wu-b-runs { color: var(--bs-blue); }
/* The move is the payoff of holding the trio still, so it is the one figure on
   the row that is allowed a colour, and only ever to say which way it went. */
.bs .wu-b-move {
  grid-column: 2; grid-row: 3; min-width: 0; margin-top: 2px;
  font-family: var(--bs-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--bs-ink-3); font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.bs .wu-b-move.is-up { color: var(--bs-ok); }
.bs .wu-b-move.is-down { color: var(--bs-miss); }
.bs .wu-b-move.is-flat { color: var(--bs-ink-2); }
.bs .wu-b-line {
  grid-column: 3; grid-row: 2 / span 2; align-self: center; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 0;
}
.bs .wu-b-line .drill-spark { flex-shrink: 0; }
.bs .wu-b-line .drill-spark polyline { stroke: var(--bs-ink); stroke-width: 1.5; }
/* A line drawn from the standing record is NOT this week's line, and an
   unlabelled sparkline beside a week's figures would be read as one. */
.bs .wu-b-line.is-standing .drill-spark polyline { stroke: var(--bs-ink-3); }
.bs .wu-b-line-lbl {
  font-family: var(--bs-mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bs-ink-3); white-space: nowrap;
}

.bs .wu-b-foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px;
  margin: 16px 0 0; padding-top: 11px; border-top: 1px solid var(--bs-ink);
}
.bs .wu-b-foot-k {
  font-family: var(--bs-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bs-ink-3); white-space: nowrap;
}
.bs .wu-b-foot-t {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--bs-ui); font-size: 12.5px; line-height: 1.45; color: var(--bs-ink-2);
}

/* ── narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* The sparkline is the first thing to go: the run count, the move and the
     name each carry more per pixel than 96px of polyline. */
  .bs .wu-b-row { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; }
  .bs .wu-b-line { display: none; }
  .bs .wu-b-dept {
    grid-column: 2; grid-row: 2; justify-self: start; text-align: left; margin-top: 3px;
  }
  .bs .wu-b-runs { grid-row: 3; }
  .bs .wu-b-move { grid-row: 4; }
  .bs .wu-b-n { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .bs .wu-b-row:hover, .bs .wu-b-row:active { transform: none; }
}