/*
 * EduLibrary public-system layer.
 * The owner-supplied Courses 2.0 composition now governs every public family:
 * civic navy fields, pale-sky rules, coral state accents, Manrope utility copy
 * and Instrument Serif editorial headings. Route content remains route-owned.
 */
:root {
  --edu-system-navy: #0b2f4a;
  --edu-system-navy-deep: #071f33;
  --edu-system-blue: #0b78ad;
  --edu-system-sky: #dff2fb;
  --edu-system-rule: #b8d9e9;
  --edu-system-paper: #f8fbfd;
  --edu-system-surface: #fff;
  --edu-system-panel: #eaf6fc;
  /* Darkened from the artwork coral so 11–12px status labels clear AA on
     white and cool-paper surfaces; the brighter coral remains artwork-only. */
  --edu-system-coral: #bd4938;
  --edu-system-ink: #102f46;
  --edu-system-heading: var(--edu-system-navy);
  --edu-system-muted: #557186;
  --edu-system-focus: #0b78ad;
  --edu-system-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
}

body.edu { color: var(--edu-system-ink); background: var(--edu-system-paper); }
body.edu ::selection { color: #fff; background: var(--edu-system-blue); }
body.edu :focus-visible { outline: 3px solid var(--edu-system-focus); outline-offset: 3px; }

html[data-theme="dark"] {
  --edu-system-paper: #071a28;
  --edu-system-surface: #0d2736;
  --edu-system-panel: #102f40;
  --edu-system-rule: #315a70;
  --edu-system-ink: #e8f3f8;
  --edu-system-heading: #f3f8fb;
  --edu-system-muted: #a8c0cd;
  --edu-system-focus: #8ed7ff;
}

.record-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(390px, 44vw, 590px);
  overflow: hidden;
  border-top: 3px solid #8ed7ff;
  background:
    radial-gradient(circle at 72% 20%, rgb(20 121 173 / 34%), transparent 34%),
    linear-gradient(112deg, var(--edu-system-navy-deep), var(--edu-system-navy) 58%, #165d82);
  color: #fff;
}
.record-hero--compact { min-height: clamp(300px, 31vw, 410px); }
.record-hero__media { position: absolute; z-index: -2; inset: 0 0 0 48%; margin: 0; }
.record-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.03); }
.record-hero__wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #08263e 0%, rgb(8 38 62 / 96%) 38%, rgb(8 38 62 / 70%) 62%, rgb(8 38 62 / 22%) 100%); }
.record-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(26px, 5vw, 76px); min-height: inherit; padding: clamp(34px, 6vw, 82px); }
.record-hero__copy { max-width: 760px; }
.record-hero h1 { max-width: 13ch; margin: 0; color: #fff; font-family: var(--edu-system-display); font-size: clamp(48px, 6.2vw, 88px); font-weight: 400; letter-spacing: -.035em; line-height: .94; text-wrap: balance; }
.record-hero--compact h1 { max-width: 17ch; font-size: clamp(42px, 5.1vw, 70px); }
.record-hero__lede { max-width: 64ch; margin: 24px 0 0; color: #dcecf5; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; }
.record-hero__stats { display: flex; flex-wrap: wrap; gap: 0; margin: clamp(26px, 4vw, 44px) 0 0; }
.record-hero__stats div { min-width: 145px; padding: 4px 24px 4px 0; margin-right: 24px; border-right: 1px solid rgb(255 255 255 / 28%); }
.record-hero__stats div:last-child { border-right: 0; }
.record-hero__stats dt { color: #fff; font-size: clamp(24px, 3vw, 40px); font-weight: 760; line-height: 1; }
.record-hero__stats dd { margin: 7px 0 0; color: #bed8e7; font-size: 12px; font-weight: 700; letter-spacing: .075em; line-height: 1.3; text-transform: uppercase; }
.record-hero__action { display: flex; align-items: flex-end; justify-content: flex-end; }
.record-hero__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px; }
.record-hero__action a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid rgb(255 255 255 / 62%); color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.record-hero__action a:hover { background: rgb(255 255 255 / 12%); border-color: #fff; transform: translateY(-2px); }
.record-hero__action .record-hero__primary { color: #102f46; border-color: #fff; background: #fff; }
.record-hero__action .record-hero__primary:hover { color: #fff; background: var(--edu-system-coral); border-color: var(--edu-system-coral); }

.record-workspace { padding-block: clamp(32px, 5vw, 72px); }
.directory-method--lead { margin: 22px 0; border-color: var(--edu-system-rule); background: var(--edu-system-sky); }
html[data-theme="dark"] .directory-method--lead { background: var(--edu-system-panel); }

/* Shared editorial typography. Data labels, filters and controls remain Manrope. */
:is(.page-directory, .page-compare, .page-search, .page-answer, .page-college, .page-course-profile) :is(.col-block, .pfeed, .search-page, .cled-shell, .course-section) h2,
:is(.page-directory, .page-compare, .page-search, .page-answer, .page-college, .page-course-profile) :is(.col-block, .pfeed, .search-page, .cled-shell, .course-section) h3,
.page-college .cpx__name,
.page-course-profile .course-hero h1,
.page-answer .answer-section-head h1 {
  font-family: var(--edu-system-display);
  font-weight: 400;
  letter-spacing: -.025em;
}

/* Older answer-category and answer-detail heroes join the same visual world. */
.page-answer .answer-section-head,
.page-answer .col-hero--type {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px);
  border: 0;
  border-top: 3px solid #8ed7ff;
  border-radius: 0;
  background: linear-gradient(120deg, var(--edu-system-navy-deep), #105478);
  color: #fff;
  box-shadow: none;
}
.page-answer .answer-section-head::after,
.page-answer .col-hero--type::after { content: ''; position: absolute; inset: auto -12% -70% 48%; width: 56%; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; box-shadow: 0 0 0 42px rgb(255 255 255 / 4%), 0 0 0 92px rgb(255 255 255 / 3%); pointer-events: none; }
.page-answer .answer-section-head h1,
.page-answer .col-hero--type h1 { position: relative; z-index: 1; max-width: 15ch; margin: 0; color: #fff; font-size: clamp(46px, 5.6vw, 78px); line-height: .98; text-wrap: balance; }
.page-answer .answer-section-head p,
.page-answer .col-hero--type :is(.col-hero__aka, .col-lede) { position: relative; z-index: 1; max-width: 68ch; color: #d9eaf4; }
.page-answer .answer-section-head a,
.page-answer .col-hero--type a { position: relative; z-index: 1; }

/* Record cards and panels use rules and tonal fields, not floating dashboard tiles. */
.page-answer :is(.post, .prail__card, .pf-panel),
.page-college :is(.col-block, .prail__card),
.page-compare :is(.col-block, .cled-shell),
.page-search :is(.search-coverage, .search-start a) { border-color: var(--edu-system-rule); border-radius: 0; box-shadow: none; }
.page-answer :is(.post, .pf-panel), .page-college .col-block { border-top: 2px solid var(--edu-system-blue); }
.page-answer .prail__card, .page-college .prail__card { background: #eef7fb; }

.page-directory .cdir-filter { border-radius: 0; border-color: var(--edu-system-rule); box-shadow: none; }
.page-directory .ccard { border-radius: 0; border-color: var(--edu-system-rule); box-shadow: none; }
.page-directory .ccard:hover { border-color: var(--edu-system-blue); transform: translateY(-2px); }
.page-search .search-start { border-top: 2px solid var(--edu-system-blue); }
.page-search .search-start a:hover { background: var(--edu-system-sky); }
.search-workspace__intro { max-width: 62ch; margin: 0 0 22px; color: var(--edu-system-muted); font-size: 16px; line-height: 1.65; }
.page-compare .record-workspace--compare { max-width: 1180px; margin-inline: auto; }

@media (max-width: 900px) {
  .record-hero__media { left: 34%; opacity: .72; }
  .record-hero__wash { background: linear-gradient(90deg, #08263e 0%, rgb(8 38 62 / 93%) 55%, rgb(8 38 62 / 48%) 100%); }
  .record-hero__inner { grid-template-columns: 1fr; align-items: end; padding: 38px clamp(20px, 6vw, 48px); }
  .record-hero__action, .record-hero__links { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .record-hero { min-height: 520px; }
  .record-hero--compact { min-height: 430px; }
  .record-hero__media { inset: 0; opacity: .45; }
  .record-hero__wash { background: linear-gradient(180deg, rgb(7 31 51 / 54%), rgb(7 31 51 / 98%) 58%); }
  .record-hero__inner { align-content: end; gap: 24px; padding: 34px 20px; }
  .record-hero h1, .record-hero--compact h1 { max-width: 15ch; font-size: clamp(42px, 13vw, 60px); }
  .record-hero__lede { margin-top: 16px; font-size: 16px; }
  .record-hero__stats { margin-top: 24px; row-gap: 18px; }
  .record-hero__stats div { min-width: 42%; padding-right: 14px; margin-right: 14px; }
  .record-hero__stats div:nth-child(2n) { border-right: 0; }
  .record-hero__action a { width: 100%; }
  .record-hero__links { width: 100%; }
  .page-answer .answer-section-head, .page-answer .col-hero--type { padding: 38px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .record-hero__action a, .page-directory .ccard { transition: none; }
  .record-hero__action a:hover, .page-directory .ccard:hover { transform: none; }
}

@media print {
  .record-hero { min-height: 0; color: #000; border: 2px solid #000; background: #fff; }
  .record-hero__media, .record-hero__wash, .record-hero__action { display: none; }
  .record-hero__inner { display: block; padding: 24px; }
  .record-hero h1, .record-hero__lede, .record-hero__stats :is(dt, dd) { color: #000; }
}