/* ============================================================
   BARAEM GRADEFLOW — COHORTS

   The page's job is to make ONE distinction unmistakable before any number is
   read: a cohort follows the same pupils, the 3-Year page does not. That note
   is set in the accent colour so it reads as a statement rather than a caption,
   and the quieter note under it says what is true of THIS school's data.
   ============================================================ */

.co-page { padding-block-end: var(--s-8); }
.co-body { padding-block-start: var(--s-4); }

.co-open {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; font-size: var(--t-13); font-weight: 650;
  color: var(--text); text-align: start; cursor: pointer;
}
.co-open:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px; }
.co-open:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

/* ------------------------------------------------------------ detail */
.co-detail-head {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  margin-block-end: var(--s-5);
}
.co-detail-head h2 {
  margin: 0; font-size: var(--t-19); font-weight: 650; color: var(--text);
}
.co-back {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: var(--t-12); font-weight: 600;
  padding: 4px var(--s-3); cursor: pointer;
}
.co-back:hover { background: var(--surface-2); color: var(--text); }
.co-meta { display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-12); color: var(--text-mute); }
.co-meta span { white-space: nowrap; }

.co-detail { display: flex; flex-direction: column; gap: var(--s-5); }

/* ------------------------------------------------------------ the notes */
.co-note {
  margin: 0 0 var(--s-3);
  font-size: var(--t-12); line-height: var(--lh-body);
  color: var(--text-mute);
}
.co-note-key {
  padding: var(--s-3) var(--s-4);
  background: var(--accent-soft);
  border-inline-start: 2px solid var(--accent-600);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-weight: 600;
}
.co-note-quiet { color: var(--text-faint); font-size: var(--t-11); margin-block-start: var(--s-3); margin-block-end: 0; }

/* ------------------------------------------------------------ chart */
.co-chart {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) 0;
}
.co-chart svg { width: 100%; height: auto; display: block; }

/* a year where fewer pupils have marks than the cohort holds */
.co-warn { color: var(--warn-700); font-weight: 650; }

/* ------------------------------------------------------------ add pupils */
.co-add { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-block-end: var(--s-3); }
.co-add .an-inp { flex: 1 1 220px; min-width: 0; }
.co-add select { flex: 0 1 180px; }
.co-results { display: flex; flex-direction: column; gap: var(--s-1); }
.co-pick {
  display: flex; align-items: center; gap: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--t-13);
  padding: var(--s-2) var(--s-3);
  cursor: pointer; text-align: start;
}
.co-pick:hover { background: var(--surface-2); border-color: var(--accent-600); }
.co-pick:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 1px; }
.co-pick .muted { margin-inline-start: auto; }

@media (max-width: 640px) {
  .co-detail-head { gap: var(--s-2); }
  .co-detail-head h2 { font-size: var(--t-16); width: 100%; }
  .co-add .an-inp, .co-add select { flex: 1 1 100%; }
}
@media print {
  .co-back, .sa-act, .no-print { display: none !important; }
}