/* biaX — /demo/cohort
 * Scoped to .page--cohort. The page also carries .page--demo so it inherits the
 * demo palette (--d-muted / --d-dim) and the demo table rules; nothing here
 * redefines a token another page reads.
 *
 * Only three things are not already in demo.css: the sample banner, the 8-week
 * bar row, and the rule list row.
 */

.sample-flag {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--d-muted);
  margin-bottom: 0.9rem;
}

/* ── 8-week consistency ───────────────────────────────────────────────
 * A week the server could not measure gets NO bar element at all. A zero-height
 * bar reads as "nobody traded", and the actual meaning is "fewer than 5 students
 * were measured, so the figure is withheld". Those are different facts.
 */
.wk-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wk {
  display: flex;
  flex: 1 1 0;
  min-width: 2.75rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.wk__v {
  font-size: 0.6875rem;
  color: var(--d-muted);
}

.wk__v--none {
  color: var(--d-dim);
}

.wk__track {
  display: flex;
  width: 100%;
  height: 6rem;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-nested);
  border-radius: 3px;
}

.wk__bar {
  width: 100%;
  background: var(--accent);
  border-radius: 3px;
}

.wk__d {
  font-size: 0.625rem;
  color: var(--d-dim);
  white-space: nowrap;
}

/* ── most-broken rules ─────────────────────────────────────────────── */
.rulelist {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rulerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.rulerow__k {
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.rulerow__v {
  font-size: 0.78125rem;
  color: var(--d-dim);
  white-space: nowrap;
}

/* ── withheld-value list in the closing card ───────────────────────── */
.withheld {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.withheld li {
  font-size: 0.875rem;
  color: var(--d-muted);
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}

/* The roster's action column. A picture of a control, not a control — a real
 * <button> here would be a dead click target on a static page.
 */
.pseudobtn {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  color: var(--d-dim);
}

.cohort-page .demo-card table {
  margin-top: 0.25rem;
}

/* The console stacks its panels in one column at every width, so this page does
 * too. No .readout-grid here on purpose — a two-up layout would be a nicer
 * marketing page and a less accurate one.
 */