/* EDULIBRARY ARCHETYPES — the seven compositions, assembled from the kit.
 *
 * Load after edulibrary-kit.css. Nothing here introduces a colour, size or
 * radius that the kit has not already named.
 *
 * Canvas 2 settles the masthead fork: there is ONE masthead, the standard
 * variant with the navy utility strip. The "home variant" that swapped the
 * strip for a search surface is rejected — the homepage puts its search band
 * BELOW the standard masthead.
 */

/* ══ SHELL ═══════════════════════════════════════════════════════════════ */

.el-utility {
  background: var(--field-navy);
  border-bottom: 1px solid rgb(255 255 255 / .1);
}
.el-utility__inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s5); min-height: 38px;
}
.el-utility a, .el-utility button {
  font: 400 13px/1 var(--font); color: var(--on-navy-dim);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.el-utility a:hover, .el-utility button:hover { color: #fff; text-decoration: underline; }

.el-masthead { background: var(--field-navy); }
.el-masthead__inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 72px;
}
.el-brand {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: #fff; flex: 0 0 auto;
}
.el-brand__emblem {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--orientation-sky); border-radius: var(--r-control);
  font: 700 13px/1 var(--font); color: var(--orientation-sky);
}
.el-brand__word { font: 700 21px/1 var(--font); letter-spacing: -.01em; }

.el-nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.el-nav a {
  display: inline-flex; align-items: center;
  min-height: var(--target); padding: 0 18px;
  font: 700 16px/1 var(--font); color: #fff; text-decoration: none;
  border-bottom: 4px solid transparent;
  transition: border-color var(--t-action), background-color var(--t-action);
}
.el-nav a:hover { background: rgb(255 255 255 / .08); color: #fff; }
/* The only "you are here" marker in the nav. Breadcrumbs carry depth. */
.el-nav a[aria-current="page"] { border-bottom-color: var(--orientation-sky); }

.el-mast-search {
  display: flex; align-items: center; gap: var(--s2);
  width: 300px; min-height: var(--target); padding: 0 var(--s3);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .3); border-radius: var(--r-control);
  color: var(--on-navy-dim); font: 400 16px/1 var(--font); text-decoration: none;
}
.el-mast-search:hover { background: rgb(255 255 255 / .18); color: var(--on-navy-dim); }
.el-mast-search__glyph {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid var(--orientation-sky); border-radius: var(--r-chip);
}
.el-saved {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: var(--target); padding: 0 var(--s3);
  border: 1px solid rgb(255 255 255 / .3); border-radius: var(--r-control);
  color: #fff; font: 700 14px/1 var(--font); text-decoration: none;
}
.el-saved:hover { background: rgb(255 255 255 / .12); color: #fff; }

/* Mobile bar — 60px, emblem, wordmark, one 44px Menu control. */
.el-mast-mobile { display: none; }
/* ⚠️ The emblem and wordmark are direct children of the <summary> here, not of
   an .el-brand wrapper, so they inherit nothing — the wordmark rendered navy
   on navy and the brand was invisible on every phone. */
.el-mast-mobile__bar {
  display: flex; align-items: center; gap: var(--s3); min-height: 60px;
  color: #fff; list-style: none; cursor: pointer;
}
.el-mast-mobile__bar::-webkit-details-marker { display: none; }
.el-mast-mobile .el-brand__word { font-size: 18px; color: #fff; }
.el-mast-mobile__menu {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s4);
  background: none; border: 1px solid rgb(255 255 255 / .3); border-radius: var(--r-control);
  color: #fff; font: 700 16px/1 var(--font); cursor: pointer; list-style: none;
}
.el-mast-mobile__menu::-webkit-details-marker { display: none; }
.el-mast-mobile__panel { padding-bottom: var(--s3); }
.el-mast-mobile__panel a {
  display: flex; align-items: center;
  min-height: var(--target-row); padding: 0 var(--s1);
  border-bottom: 1px solid rgb(255 255 255 / .12);
  color: #fff; font: 700 16px/1 var(--font); text-decoration: none;
}
.el-mast-mobile__panel a[aria-current="page"] { color: var(--orientation-sky); }

/* The 3px band under the masthead is the system's one constant. */
.el-mast-band { height: 3px; background: var(--orientation-sky); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.el-footer { background: var(--field-navy); color: var(--on-navy); margin-top: var(--s8); }
.el-footer__cols {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s7); padding: 44px 0 40px;
}
.el-footer__brandline { font: 400 14px/1.5 var(--font); color: var(--on-navy-faint); max-width: 34ch; }
.el-footer h2 {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase;
  color: var(--orientation-sky); margin-bottom: var(--s3);
}
.el-footer li { margin-bottom: var(--s2); }
.el-footer a { color: var(--on-navy-dim); font: 400 14px/1.5 var(--font); text-decoration: none; }
.el-footer a:hover { color: #fff; text-decoration: underline; }
.el-footer__legal {
  border-top: 1px solid rgb(255 255 255 / .14);
  padding: var(--s5) 0;
  font: 400 13px/1.5 var(--font); color: var(--on-navy-faint);
}

/* ══ ARCHETYPE 2 · HOME ══════════════════════════════════════════════════ */

/* ⚠️ CORRECTION A1 — ONE DEFINITION PER COMPONENT.
   `.el-hero`, `.el-hero__inner`, `.el-hero__headline`, `.el-hero__search`,
   `.el-hero__seg`, `.el-hero__seg--wide`, `.el-hero__submit`, `.el-hero__chips`,
   `.el-uni-card*` and `.el-col-card*` were all defined here and matched by
   NOTHING — the page renders `.portal-hero`, `.portal-search`, `.portal-field`,
   `.portal-search__go`, `.portal-hero__routes`, `.uni-card` and `.col-card`.
   Two complete definitions of one component is exactly how the typing headline
   got styled and then orphaned. Deleted, keeping only the two that are used.

   `.el-hero__typed` and `.el-caret` ARE rendered — by the homepage `<h1>` — so
   they stay, and they are the only survivors of this block. */

.el-hero__typed { color: var(--orientation-sky); }
/* Correction A5: at 40px a full-em caret overshoots the cap height and sits
   low against the bold glyphs. .86em, 4px clear, nudged up 8%. */
.el-caret {
  display: inline-block; width: 3px; height: .86em; margin-left: 4px;
  background: var(--orientation-sky); vertical-align: -.08em;
  animation: el-blink 1s steps(1, end) infinite;
}
@keyframes el-blink { 50% { opacity: 0; } }
/* ⚠️ Measured off the mock: fact pills are 13/700 in `field-navy-deep`, not
   13/400 in slate. Bold dark on a tinted chip reads as a recorded value; light
   grey read as an afterthought, and there are three of these on every card. */
.el-pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s3);
  background: var(--surface-alt); border-radius: var(--r-chip);
  font: 700 13px/1 var(--font); color: var(--field-navy-deep);
}
/* A placeholder figure is dashed and coral-inked so it can never be read as a
   recorded value at a glance. Remove with SHOW_PLACEHOLDER_FEES. */
.el-pill--placeholder {
  background: var(--coral-surface); color: var(--coral-ink);
  border: 1px dashed var(--coral-border);
}

.el-band {
  background: var(--field-navy); color: var(--on-navy);
  border-radius: var(--r-card); padding: var(--s6);
  display: grid; gap: var(--s4);
}
.el-band h2 { font: 700 26px/1.2 var(--font); color: #fff; }
.el-band p { color: var(--on-navy-dim); max-width: 62ch; }
.el-band__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.el-answers__head {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--field-navy-deep); color: var(--on-navy);
  border-radius: var(--r-card) var(--r-card) 0 0; padding: var(--s4) var(--s5);
}
.el-answers__mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--r-chip);
  border: 2px solid var(--orientation-sky); color: var(--orientation-sky);
  font: 700 20px/1 var(--font);
}
.el-answers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s5); }
.el-answer-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3);
  align-items: center; padding: var(--s3);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
  transition: background-color var(--t-action);
}
.el-answer-card:hover { background: var(--surface-alt); }
.el-answer-card__num {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--field-navy-deep); color: var(--orientation-sky);
  border-radius: var(--r-control); font: 700 14px/1 var(--font);
}
.el-answer-card__cat { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--action-blue); }
.el-answer-card__title { font: 700 17px/1.3 var(--font); color: var(--ink); }
.el-answer-card__go {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--action-blue); color: #fff; border-radius: var(--r-control);
  font-size: 15px;
}

/* ══ ARCHETYPE 4 · RECORD ════════════════════════════════════════════════ */

.el-record__identity { display: flex; align-items: flex-start; gap: var(--s4); }
.el-record__name { font: 700 34px/1.15 var(--font); letter-spacing: -.02em; }
.el-record__where { font: 400 16px/1.5 var(--font); color: var(--slate); }
.el-record__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ══ ARCHETYPE 3 · DIRECTORY ═════════════════════════════════════════════ */

.el-dir__head { display: grid; gap: var(--s3); }
.el-dir__search { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.el-dir__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s6); }
.el-facet { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-soft); }
.el-facet__label { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.el-facet__opt {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--target); font: 400 14px/1.3 var(--font); color: var(--ink);
  text-decoration: none;
}
.el-facet__opt:hover { color: var(--action-blue); }
.el-facet__count { margin-left: auto; color: var(--slate); font-size: 13px; }
.el-dir__applied { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.el-dir__count { font: 700 16px/1 var(--font); }
.el-dir__result { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft); }
.el-dir__result-main { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s1); }
.el-dir__result-actions { flex: 0 0 auto; display: grid; gap: var(--s2); align-content: start; }

/* Filters become a modal below 760. Above it, the dialog is just a container. */
.el-filter-modal { border: 0; padding: 0; background: none; }

/* ══ ARCHETYPE 5 · ARTICLE ═══════════════════════════════════════════════ */

.el-article { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s7); }
.el-article__body { max-width: 66ch; display: grid; gap: var(--s5); }
.el-article__body h2 { font: 700 26px/1.2 var(--font); margin-top: var(--s5); }
.el-article__body h3 { font: 700 21px/1.25 var(--font); }
.el-article__body p { font: 400 17px/1.65 var(--font); }
.el-toc { position: sticky; top: var(--s5); align-self: start; display: grid; gap: var(--s2); }
.el-toc a { display: flex; align-items: center; min-height: var(--target); font: 400 14px/1.35 var(--font); text-decoration: none; }
.el-applies {
  background: var(--pale-sky); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s4) var(--s5); display: grid; gap: var(--s2);
}
.el-figures { display: flex; flex-wrap: wrap; gap: var(--s5); }
.el-figure { display: grid; gap: var(--s1); }
.el-figure__n { font: 700 26px/1 var(--font); color: var(--ink); }
.el-unwritten {
  border: 1px dashed var(--rule); border-radius: var(--r-card);
  padding: var(--s6); display: grid; gap: var(--s3); background: var(--surface);
}

/* ══ ARCHETYPE 6 · COMPARE ═══════════════════════════════════════════════ */

.el-compare__tray { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.el-compare__table { width: 100%; border-collapse: collapse; }
.el-compare__table th, .el-compare__table td {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-soft);
  text-align: left; vertical-align: top; font: 400 15px/1.45 var(--font);
}
/* Row labels and institution names stay readable while the table scrolls. */
.el-compare__table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.el-compare__table tbody th {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  font: 700 14px/1.35 var(--font); color: var(--slate);
}
.el-compare__cards { display: none; }

/* ══ ARCHETYPE 7 · UTILITY ═══════════════════════════════════════════════ */

.el-utilpage { max-width: 860px; margin-inline: auto; display: grid; gap: var(--s5); padding-block: var(--s8); }
.el-utilpage__code { font: 700 40px/1 var(--font); color: var(--slate); }
.el-utilpage__routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

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

@media (max-width: 1180px) {
  .el-article { grid-template-columns: minmax(0, 1fr); }
  /* The TOC becomes a disclosure ABOVE the text, never a stub beneath it. */
  .el-toc { position: static; }
}

@media (max-width: 1000px) {
  .el-utility { display: none; }
  .el-masthead__inner { display: none; }
  .el-mast-mobile { display: block; }
  .el-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}

@media (max-width: 760px) {
  .el-dir__layout { grid-template-columns: minmax(0, 1fr); }
  /* Correction A1: the `.el-hero__*` responsive rules went with their block —
     the homepage renders `.portal-hero` and those matched nothing. */
  .el-answers__grid { grid-template-columns: minmax(0, 1fr); }
  .el-utilpage__routes { grid-template-columns: minmax(0, 1fr); }
  .el-dir__result { flex-direction: column; }

  /* Never a squeezed table. One card per college, attribute rows inside. */
  .el-compare__table { display: none; }
  .el-compare__cards { display: grid; gap: var(--s4); }
  .el-compare__card { border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); }
  .el-compare__card > h3 { padding: var(--s4); border-bottom: 1px solid var(--rule); font: 700 18px/1.25 var(--font); }
  .el-compare__card dl { margin: 0; padding: 0 var(--s4) var(--s4); }
  .el-compare__card dt { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); padding-top: var(--s3); }
  .el-compare__card dd { margin: var(--s1) 0 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-soft); font: 400 15px/1.45 var(--font); }

  /* A real modal below 760, a plain container above it. */
  .el-filter-modal {
    position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; background: var(--paper); padding: var(--s4); overflow-y: auto;
  }
  .el-filter-modal::backdrop { background: rgb(11 47 74 / .6); }
}

@media (max-width: 480px) {
  .el-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .el-record__identity { flex-direction: column; }
  .el-record__name { font-size: 26px; }
}