/* ══ THE COHORT — how the class is doing ════════════════════════════════════
   js/11f-coach-cohort.js, markup in index.html (#coach-cohort, and #cc-flagged
   / #cc-feedback inside #coach-corpus).

   Numbered 27 so it lands after 24-coach-corpus.css, which it is a sibling of.
   25 and 26 are taken (end-variants, fantasy) and 26 belongs to work another
   engineer is holding, so this does not go near it.

   THE SAME PAPER AS ITS NEIGHBOURS. 20-coach-roster.css and 24-coach-corpus.css
   set this screen as a broadsheet — ruled rows, agate mono labels, tabular
   figures, no cards — and the argument there is that coach and admin are one
   product. A ranked board is exactly the element most likely to arrive as a
   leaderboard-shaped card with medals and a gradient, so: it is a ruled list
   with a rank column, and it is set in the same ink as the roster above it.

   WEIGHT ORDER. The roster leads with triage at display scale; the corpus leads
   with one display figure. This section leads with NEITHER, deliberately — a
   cohort board has no single headline number, and inventing one ("class average
   62%") would be the kind of figure that looks like news and answers nothing.
   The controls are the loudest thing here, because choosing the metric IS the
   question being asked.
   ═══════════════════════════════════════════════════════════════════════════ */

.bs .coh {
  --coh-measure: 800px;
  margin-bottom: 44px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bs-rule);
}

.bs .coh-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  max-width: var(--coh-measure);
  padding-bottom: 7px;
  border-bottom: 2px solid var(--bs-ink);
}
/* NOT a .page-title. scripts/measure_chrome.py enforces exactly one visible
   .page-title per screen and "The roster" is it — same reason .cc-title is not
   one either. This is a section heading a step below. */
.bs .coh-title {
  margin: 0;
  /* `var(--bs-mono)`, not `var(--bs-lockup, var(--bs-mono))`. `--bs-lockup` is
     a WIDTH — 830px, defined on `.bs .bs-doc` in 09-bs-question.css — so this
     asked for a length as a font-family. It happens to be right today only
     because this screen renders outside `.bs-doc` and takes the fallback:
     measured 2026-09-09, outside it resolves to IBM Plex Mono, and INSIDE it
     `font-family: 830px` is invalid at computed-value time and silently
     inherits Archivo. Same font as before, no landmine. */
  font-family: var(--bs-mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bs-ink);
}
.bs .coh-dateline {
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Controls ─────────────────────────────────────────────────────────────
   Tabs, not a <select>. Three metrics and three windows are few enough that
   the choices should be visible without a click — a coach comparing "answers"
   against "accuracy" is doing so repeatedly, and a dropdown makes that two
   interactions each way. */
.bs .coh-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 18px 0 4px;
  max-width: var(--coh-measure);
}
.bs .coh-tab {
  appearance: none;
  background: transparent;
  border: 1px solid var(--bs-rule);
  padding: 5px 11px 4px;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bs-ink-2);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bs .coh-tab:hover:not(:disabled) { border-color: var(--bs-ink); color: var(--bs-ink); }
.bs .coh-tab:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 2px; }
/* The selected metric is INK ON PAPER REVERSED, matching .cc-more's hover
   treatment — the one emphatic move this palette makes. */
.bs .coh-tab[aria-current="true"] {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  color: var(--bs-sheet);
}
.bs .coh-tab:disabled {
  opacity: .38;
  cursor: default;
}
.bs .coh-tab-sep {
  width: 1px;
  align-self: stretch;
  margin: 0 7px;
  background: var(--bs-rule);
}

/* ── The board ──────────────────────────────────────────────────────────── */
.bs .coh-board {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: var(--coh-measure);
  border-top: 1px solid var(--bs-rule);
  counter-reset: none;
}
.bs .coh-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(72px, auto);
  align-items: center;
  gap: 4px 16px;
  padding: 9px 2px 8px;
  border-bottom: 1px solid var(--bs-rule);
}
.bs .coh-rank {
  font-family: var(--bs-mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink-3);
  text-align: right;
}
.bs .coh-who { min-width: 0; }
.bs .coh-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs .coh-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--bs-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .coh-fig {
  text-align: right;
  font-family: var(--bs-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}
/* A ZERO IS THE NEWS. On an activity board the student who has done nothing is
   the one the teacher is looking for, so the row is marked rather than left to
   read as one more grey figure at the bottom of a list. The red pen, used here
   and in the broken-item rows below, and nowhere else on this panel. */
.bs .coh-row[data-state="idle"] .coh-fig { color: var(--bs-pen); }
.bs .coh-row[data-state="idle"] .coh-name { color: var(--bs-ink-2); }

/* ── The heatmap ────────────────────────────────────────────────────────── */
.bs .coh-heat {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  max-width: var(--coh-measure);
  border-top: 1px solid var(--bs-rule);
}
.bs .coh-heat-row {
  display: grid;
  grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) minmax(44px, auto);
  align-items: center;
  gap: 4px 18px;
  padding: 10px 2px 9px;
  border-bottom: 1px solid var(--bs-rule);
}
.bs .coh-heat-name {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-ink);
}
.bs .coh-heat-scope {
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--bs-ink-3);
  font-variant-numeric: tabular-nums;
}
/* A rule that fills, not a rounded pill — 24-coach-corpus.css makes this point
   about .cc-meter and it holds for the same reason: this page is ruled paper. */
.bs .coh-meter {
  position: relative;
  display: block;
  height: 9px;
  background: var(--bs-stock-2);
  border: 1px solid var(--bs-rule);
  overflow: hidden;
}
.bs .coh-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bs-ink);
}
.bs .coh-heat-fig {
  text-align: right;
  font-family: var(--bs-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}

.bs .coh-kicker {
  margin: 28px 0 0;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .coh-nodes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-width: var(--coh-measure);
}
.bs .coh-node {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 2px 5px;
  border-bottom: 1px dotted var(--bs-rule);
  font-size: 12.5px;
  color: var(--bs-ink-2);
}
.bs .coh-node-fig {
  font-family: var(--bs-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink-3);
  white-space: nowrap;
}

/* ── The two corpus-QC lists ────────────────────────────────────────────────
   These render INSIDE #coach-corpus, so they inherit that section's measure and
   sit under its reports panel. Styled here rather than there because the JS
   that builds them lives in this module's file, and a class whose rules are in
   one stylesheet and whose markup is in another module is how the two drift. */
.bs .coh-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-width: var(--coh-measure, 800px);
  border-top: 1px solid var(--bs-rule);
}
.bs .coh-item {
  display: block;
  padding: 9px 2px 8px;
  border-bottom: 1px solid var(--bs-rule);
  cursor: pointer;
  transition: background 110ms ease;
}
.bs .coh-item:hover { background: var(--bs-stock); }
.bs .coh-item:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: -2px; }
.bs .coh-item-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bs .coh-item-id {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ink);
}
.bs .coh-item-fam {
  font-family: var(--bs-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
}
.bs .coh-item-fig {
  margin-left: auto;
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-ink-2);
  font-variant-numeric: tabular-nums;
}
.bs .coh-item[data-state="broken"] .coh-item-fig { color: var(--bs-pen); }
.bs .coh-item-stem {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bs-ink-2);
}
.bs .coh-note {
  margin-top: 9px;
  font-family: var(--bs-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Waiting, empty and failed are three different states ──────────────────
   An empty panel must never be able to read as good news, so a failure is
   ruled in the red pen and says what failed. Same rule as .cc-fail. */
.bs .coh-wait,
.bs .coh-empty,
.bs .coh-fail {
  margin: 14px 0 0;
  max-width: var(--coh-measure, 800px);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bs-ink-3);
}
.bs .coh-fail {
  border-left: 2px solid var(--bs-pen);
  padding-left: 13px;
  color: var(--bs-ink-2);
}

@media (max-width: 560px) {
  .bs .coh-row { grid-template-columns: 26px minmax(0, 1fr) minmax(58px, auto); gap: 3px 10px; }
  .bs .coh-heat-row { grid-template-columns: minmax(0, 1fr) minmax(40px, auto); }
  /* The meter is the first thing to go at 320px: the domain name and its figure
     are the fact, and the bar is the comparison aid. */
  .bs .coh-heat-row .coh-meter { display: none; }
}