/* EDULIBRARY — ARCHETYPE 4 · RECORD.  CORRECTIONS.md Part B, B1–B8.
 * ~6,200 routes: college records, course records, answer shelves.
 *
 * ⚠️ THE RECORD IS TWO TEMPLATES, NOT ONE, AND ONLY ONE WAS EVER STYLED.
 * `colleges/[slug].astro` branches: a published record renders the `cpx__*`
 * profile, a candidate renders `CandidateCollegePage` with its own
 * `candidate-*` vocabulary. Every earlier styling pass sampled a published
 * record, so the candidate template shipped with 25 of its 31 classes matching
 * no rule at all — on roughly 1,349 of 2,879 college pages. Part B is explicit
 * that this is "the default case, not the edge case", so both are styled here
 * and the four densities map onto them:
 *
 *   1 Empty    · candidate, no detail snapshot   ~half of all records
 *   2 Minimal  · candidate with a thin snapshot
 *   3 Typical  · published record                the mobile default
 *   4 Maximal  · published record, full campus   the desktop default
 *
 * The composition never changes between them. Thin records lose ROWS, never
 * STRUCTURE — every section is present in all four. Nothing is estimated to
 * fill a gap.
 *
 * B8, what must not creep in: no evidence banner beyond B3's notice, no
 * per-fact evidence glyph, no evidence-state sort control, no shadows, no
 * second coral surface, no icon set, no card radius on the emblem.
 */

/* ══ B1 · FRAME ══════════════════════════════════════════════════════════ */

.col-shell { display: grid; gap: 20px; }
/* Main column: 20px between sections, content packed to the top so a thin
   record does not stretch its sections to fill the rail's height. */
.pfeed > div:first-child { gap: 20px; align-content: start; }
.candidate-college__main { display: grid; gap: 20px; align-content: start; }

/* ══ B2 · IDENTITY BLOCK ═════════════════════════════════════════════════ */

.cpx__body,
.candidate-college__identity { display: flex; gap: var(--s4); align-items: flex-start; }

/* ⚠️ 72px, and `--r-control` (2px) — NOT the card radius, NOT a circle.
   B8 names the emblem radius specifically. It was 64px at 10px. */
.cpx__mark,
.candidate-college__identity > span[aria-hidden] {
  flex: 0 0 72px; width: 72px; height: 72px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--field-navy);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  font: 700 21px/1 var(--font); letter-spacing: .02em;
}
.cpx__mark--logo img { max-width: 78%; max-height: 78%; object-fit: contain; }

.candidate-college__identity > div { display: grid; gap: var(--s1); min-width: 0; }
.cpx__name,
.candidate-college__identity h1 {
  font: 700 34px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink);
  text-wrap: balance;
}
/* One line, always present. "district not recorded" is spelled out by the
   template rather than rendered as a blank or a dash. */
.cpx__id,
.candidate-college__identity p { font: 400 16px/1.5 var(--font); color: var(--slate); }
.cpx__aka { font: 400 15px/1.5 var(--font); color: var(--slate); }

.cpx__acts,
.candidate-college__actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.candidate-college__actions button,
.candidate-college__actions > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: 0 var(--s5);
  background: var(--surface); color: var(--action-blue);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  font: 700 16px/1 var(--font); text-decoration: none; cursor: pointer;
}
.candidate-college__actions button:hover,
.candidate-college__actions > a:hover { background: var(--surface-alt); }
.candidate-college__actions [data-profile-save-status] { font: 400 13px/1.4 var(--font); color: var(--slate); }

.candidate-college__hero { display: grid; gap: var(--s4); }
.candidate-college__cover { margin: 0; }

/* ══ B3 · UNCHECKED-DRAFT NOTICE (Empty and Minimal only) ════════════════
   The one coral surface on the page. This is what stops a thousand near-empty
   records reading as broken — it says the page is a stub on purpose.

   ⚠️ SCOPE NOTE. The owner's 2026-09-11 direction removed the long banner that
   narrated our reading process ("Nobody has read its own published sources
   yet…"), and B8 still forbids an evidence banner. What is kept here is the
   short CONDITION line the template already carries — what this record is —
   without the process narration. The detail stays one press away in the
   disclosure rather than set as a paragraph above the institution's name. */
.candidate-college__state {
  background: var(--coral-surface); color: var(--coral-ink);
  border: 1px solid var(--coral-border);
  border-left: 4px solid var(--coral-route);
  border-radius: var(--r-card);
  padding: 14px var(--s4);
  display: grid; gap: var(--s2);
}
.candidate-college__state > p {
  display: flex; gap: var(--s3); align-items: baseline;
  font: 400 16px/1.5 var(--font); color: var(--coral-ink); max-width: 80ch;
}
.candidate-college__state > p::before {
  content: '\25B2'; flex: 0 0 auto; font: 700 16px/1.5 var(--font);
}
.candidate-college__state strong { font-weight: 700; }
.candidate-college__state > details > summary {
  min-height: var(--target); display: flex; align-items: center;
  font: 700 15px/1 var(--font); color: var(--coral-ink);
  cursor: pointer; list-style: none;
}
.candidate-college__state > details > summary::-webkit-details-marker { display: none; }
.candidate-college__state > details > summary::after { content: ' \2192'; }
.candidate-college__state > details > p {
  font: 400 15px/1.55 var(--font); color: var(--coral-ink); max-width: 80ch; padding-top: var(--s2);
}

/* ══ B4 · "WHAT IS RECORDED" FACTS GRID ══════════════════════════════════ */

/* Section heading: 21/700 over a 1px rule, 14px above and 10px below. */
.candidate-college__heading,
.col-block > h2, .post__head {
  padding: 14px 0 10px; border-bottom: 1px solid var(--rule);
}
.candidate-college__heading { display: grid; gap: var(--s1); }
.candidate-college__heading h2,
.candidate-section-title {
  font: 700 21px/1.22 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.candidate-college__heading p { font: 400 15px/1.5 var(--font); color: var(--slate); max-width: 72ch; }

.candidate-facts,
.cpx__figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s5); }
.candidate-facts > div,
.cpx__figure {
  display: grid; gap: var(--s1);
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
}
.candidate-facts dt, .cpx__figl {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.candidate-facts dd, .cpx__fign {
  margin: 0; font: 700 16px/1.35 var(--font); color: var(--ink);
}

/* ⚠️ THE TINT BLEEDS TO THE CELL EDGE.
   An unknown or contested value gets the coral ground with negative inline
   margin, so the tint reaches the cell's edges instead of floating inside it
   as a pill. `data-absent` is set by the template where a value is genuinely
   not recorded — it is never inferred from the string. */
.candidate-facts dd[data-absent],
.cpx__fign[data-absent],
.el-fact--flagged .el-fact__value {
  background: var(--coral-surface); color: var(--coral-ink);
  padding-inline: var(--s2); margin-inline: calc(var(--s2) * -1);
  font-weight: 400;
}

.candidate-contact { display: grid; gap: var(--s2); padding-top: var(--s3); }
.candidate-subhead {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.candidate-contact ul, .candidate-guides ul { display: grid; gap: var(--s2); }
.candidate-contact li, .candidate-guides li { font: 400 15px/1.55 var(--font); max-width: 72ch; }

.candidate-guides { display: grid; gap: var(--s3); }
.candidate-guides__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); padding-top: var(--s3); }
.candidate-guides__grid > div { display: grid; gap: var(--s2); align-content: start; }

.candidate-notices { display: grid; gap: var(--s3); }
.candidate-notices li { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--rule-soft); }
.candidate-notices__name { font: 700 15px/1.35 var(--font); color: var(--ink); }
.candidate-notices li span:not(.candidate-notices__name) { font: 400 13px/1.45 var(--font); color: var(--slate); }

/* ══ B5 · PROGRAMMES AND RECORDED INTAKE ═════════════════════════════════
   A constituent campus admits into two pools with different fees. Both cells
   are printed; neither is merged, averaged or hidden. An unpublished fee is an
   explicit "Not published", never a blank. */

.candidate-programmes { display: grid; }
.candidate-programmes > li {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px 150px;
  gap: var(--s4); align-items: center;
  min-height: var(--target-row); padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.candidate-programmes > li > div { display: grid; gap: 2px; min-width: 0; }
.candidate-programmes__name { font: 700 16px/1.35 var(--font); color: var(--ink); }
.candidate-programmes > li > div > span:not(.candidate-programmes__name) {
  font: 400 13px/1.4 var(--font); color: var(--slate);
}
.candidate-programmes > li > div > a {
  font: 700 14px/1 var(--font); text-decoration: none;
  min-height: var(--target); display: inline-flex; align-items: center;
}
/* The four intake cells sit in the row's three numeric columns plus the name
   column's trailing space; the <dl> lays them out inline. */
.candidate-programmes > li > dl {
  grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s4); margin: 0;
}
.candidate-programmes > li > dl > div { display: grid; gap: 2px; }
.candidate-programmes > li > dl dt {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.candidate-programmes > li > dl dd { margin: 0; font: 700 15px/1.35 var(--font); color: var(--ink); }
.candidate-programmes > li > dl dd[data-absent] { font-weight: 400; color: var(--slate); }

.candidate-college__empty {
  display: grid; gap: var(--s2); padding: var(--s5);
  background: var(--surface-alt); border-radius: var(--r-card);
}
.candidate-college__empty p:not(.candidate-subhead) { font: 400 15px/1.55 var(--font); color: var(--slate); max-width: 72ch; }

.candidate-documents { display: grid; gap: var(--s3); }
.candidate-documents ul { display: grid; }
.candidate-documents li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: var(--target-row); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
}
.candidate-documents li > div { display: grid; gap: 2px; min-width: 0; }
.candidate-documents__name { font: 700 15px/1.35 var(--font); color: var(--ink); }
.candidate-documents li span:not(.candidate-documents__name) { font: 400 13px/1.4 var(--font); color: var(--slate); }
.candidate-documents li a {
  font: 700 14px/1 var(--font); text-decoration: none;
  min-height: var(--target); display: inline-flex; align-items: center; flex: 0 0 auto;
}

.candidate-college__next { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.candidate-college__next > summary {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--target); cursor: pointer; list-style: none;
  font: 700 16px/1 var(--font); color: var(--action-blue);
}
.candidate-college__next > summary::-webkit-details-marker { display: none; }
.candidate-college__next > summary::after { content: '\25BE'; }
.candidate-college__next > div { display: grid; gap: var(--s2); padding-top: var(--s3); }
.candidate-college__next p, .candidate-college__next li { font: 400 14px/1.5 var(--font); color: var(--slate); }
.candidate-college__next ul { display: grid; gap: var(--s1); }

/* ── The record-map cover, used when no photograph exists ────────────────── */
.record-cover {
  position: relative; display: grid; gap: var(--s3);
  aspect-ratio: 16 / 9; max-height: 300px; padding: var(--s5);
  background: var(--field-navy-deep); color: var(--on-navy);
  border-radius: var(--r-card); align-content: center;
}
.record-cover__identity { display: flex; align-items: center; gap: var(--s3); }
.record-cover__mark {
  flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22);
  border-radius: var(--r-control); font: 700 17px/1 var(--font); color: var(--orientation-sky);
}
.record-cover__identity > div { display: grid; gap: 2px; min-width: 0; }
.record-cover__ref { font: 400 14px/1.4 var(--font); color: var(--on-navy-dim); }
.record-cover__programmes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.record-cover__programmes > * {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s3);
  background: rgb(255 255 255 / .1); border-radius: var(--r-chip);
  font: 400 13px/1 var(--font); color: var(--on-navy);
}
/* States plainly that it is not a photograph of this campus (D-16). */
.record-cover__banner {
  font: 400 13px/1.4 var(--font); color: var(--on-navy-faint);
}

/* ══ B6 · RAIL ═══════════════════════════════════════════════════════════ */

.prail__card, .prail__cta {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s4); display: grid; gap: var(--s2); align-content: start;
}
.prail__head, .prail__ctalabel {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin: 0;
}
/* Source entries: title as a link, then `document type · read <date>`. */
.col-sources__item { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); min-height: var(--target-row); }
.col-sources__title { font: 700 15px/1.4 var(--font); color: var(--action-blue); font-style: normal; }
.col-sources__meta { font: 400 13px/1.4 var(--font); color: var(--slate); }

/* "Not yet read" — the quiet form of provenance. It states the gap without
   narrating the process, and is present even when short. */
.prail__unread { display: grid; gap: var(--s1); }
.prail__unread li { font: 400 15px/1.5 var(--font); color: var(--slate); }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  /* The rail leaves the side and becomes content in flow, after the main column. */
  .pfeed { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .candidate-facts, .cpx__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .candidate-guides__grid { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ Never a squeezed table — one block per programme, label/value rows.
     Same rule as Compare. */
  .candidate-programmes > li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .candidate-programmes > li > dl { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); }
  .cpx__name, .candidate-college__identity h1 { font-size: 26px; }
  .cpx__mark, .candidate-college__identity > span[aria-hidden] { flex-basis: 56px; width: 56px; height: 56px; font-size: 17px; }
  .record-cover { padding: var(--s4); }
}

@media (max-width: 480px) {
  .candidate-facts, .cpx__figures { grid-template-columns: minmax(0, 1fr); }
  .candidate-college__identity { flex-wrap: wrap; }
  .candidate-documents li { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* Containers whose children carry the layout. */
.candidate-college { display: block; }
.candidate-college__body { display: grid; gap: var(--s4); }

/* A programme with no built course page states that, rather than linking
   somewhere that 404s. See the note in CandidateCollegePage.astro. */
.candidate-programmes__nolink { font: 400 14px/1.4 var(--font); color: var(--slate); }