/* ============================================================
   MML-U Brand Kit · brand.css
   MissionML University · synthetic catalog (Stage 1 / Tier 0)

   Calibrated derivative of MissionML's parent token system
   (build/tokens/design-tokens.md). Two-layer dot-delimited
   taxonomy preserved (primitives -> semantic). Tokens emit
   as CSS custom properties using `--mmlu-*` namespace where
   we adapt; inherited primitives keep parent dot names where
   semantically identical to make the lineage legible.

   See ./README.md for inherited / adapted / dropped rationale.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400&display=swap");

:root {
  /* ---------- Color · primitives (inherited from parent) ---------- */
  /* Green family — OKLCH 155° hue axis, sRGB-clamped */
  --green-50:  #F1F9F4;
  --green-100: #DCEFE2;
  --green-200: #BEE2CB;
  --green-300: #96D0AA;
  --green-400: #6BB985;
  --green-500: #3E9E65;
  --green-600: #16804B;  /* parent brand anchor */
  --green-700: #0E6A3D;  /* MML-U brand anchor (adapted, see README) */
  --green-800: #0B5330;
  --green-900: #0C3B22;

  /* Sage neutrals — Radix Sage 12-step (light) */
  --sage-1:  #fbfdfc;
  --sage-2:  #f7f9f8;
  --sage-3:  #eef1f0;
  --sage-4:  #e6e9e8;
  --sage-5:  #dfe2e0;
  --sage-6:  #d7dad9;
  --sage-7:  #cbcfcd;
  --sage-8:  #b8bcba;
  --sage-9:  #868e8b;
  --sage-10: #7c8481;
  --sage-11: #5f6563;
  --sage-12: #1a211e;

  /* ---------- Color · semantic (adapted for academic catalog) ---------- */
  --mmlu-color-brand:           var(--green-700);
  --mmlu-color-brand-hover:     var(--green-800);
  --mmlu-color-brand-tint:      var(--green-50);
  --mmlu-color-brand-rule:      var(--green-600);

  --mmlu-color-text:            var(--sage-12);
  --mmlu-color-text-muted:      var(--sage-11);
  --mmlu-color-text-faint:      var(--sage-9);
  --mmlu-color-text-inverse:    var(--sage-1);

  --mmlu-color-surface-base:    var(--sage-1);   /* main page bg */
  --mmlu-color-surface-rail:    var(--sage-2);   /* sidebar bg (one-step alternation) */
  --mmlu-color-surface-row:     var(--sage-2);   /* zebra-row in tables */

  --mmlu-color-border-subtle:   var(--sage-6);
  --mmlu-color-border:          var(--sage-7);
  --mmlu-color-border-strong:   var(--sage-8);

  --mmlu-color-link:            var(--green-700);
  --mmlu-color-link-hover:      var(--green-800);
  --mmlu-color-link-visited:    var(--green-800);

  --mmlu-color-focus-ring:      var(--green-700);
  --mmlu-color-active-bg:       var(--green-50);

  /* ---------- Typography · primitives (inherited) ---------- */
  --mmlu-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mmlu-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mmlu-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* Size scale — academic-register adjustment: program-page H1
     drops to 32 (parent: 40) to match catalog density; everything
     else inherited */
  --mmlu-size-h1:        32px;
  --mmlu-size-h2:        24px;
  --mmlu-size-h3:        18px;
  --mmlu-size-h4:        16px;
  --mmlu-size-body-lg:   17px;
  --mmlu-size-body:      16px;
  --mmlu-size-body-sm:   14px;
  --mmlu-size-caption:   13px;
  --mmlu-size-micro:     12px;

  --mmlu-weight-regular: 400;
  --mmlu-weight-medium:  500;
  --mmlu-weight-bold:    700;

  --mmlu-lh-display: 1.15;
  --mmlu-lh-h1: 1.2;
  --mmlu-lh-h2: 1.25;
  --mmlu-lh-h3: 1.35;
  --mmlu-lh-body: 1.55;
  --mmlu-lh-body-sm: 1.5;
  --mmlu-lh-tight: 1.2;

  --mmlu-ls-h1:    -0.015em;
  --mmlu-ls-h2:    -0.01em;
  --mmlu-ls-body:   0;
  --mmlu-ls-mono:   0.02em;
  --mmlu-ls-label:  0.06em;

  /* ---------- Spacing · 8pt + 4pt micro (inherited) ---------- */
  --mmlu-scale-0:  0;
  --mmlu-scale-1:  4px;
  --mmlu-scale-2:  8px;
  --mmlu-scale-3:  12px;
  --mmlu-scale-4:  16px;
  --mmlu-scale-5:  24px;
  --mmlu-scale-6:  32px;
  --mmlu-scale-7:  48px;
  --mmlu-scale-8:  64px;
  --mmlu-scale-9:  96px;

  /* Section padding: a single fluid token (inherited shape, smaller
     ceiling — catalog pages don't need 96px section breathing) */
  --mmlu-space-section-y: clamp(32px, 3vw + 16px, 56px);

  /* ---------- Radius · academic register ---------- */
  /* Parent has radius.pill 9999 for CTAs — DROPPED for MML-U. */
  --mmlu-radius-0:   0;
  --mmlu-radius-sm:  4px;
  --mmlu-radius-md:  8px;

  /* ---------- Shadow · flat (inherited) ---------- */
  --mmlu-shadow-none: none;

  /* ---------- Motion · restrained (inherited) ---------- */
  --mmlu-duration-fast: 150ms;
  --mmlu-duration-base: 250ms;
  --mmlu-ease-out:      cubic-bezier(0.2, 0, 0.2, 1);
  --mmlu-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --mmlu-content-max:   1200px;
  --mmlu-sidebar-width: 280px;
  --mmlu-header-strip:  4px;  /* brand accent strip at top of header */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mmlu-font-display);
  font-size: var(--mmlu-size-body);
  line-height: var(--mmlu-lh-body);
  color: var(--mmlu-color-text);
  background: var(--mmlu-color-surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  margin: 0;
  color: var(--mmlu-color-text);
}

h1 { font-size: var(--mmlu-size-h1); line-height: var(--mmlu-lh-h1); letter-spacing: var(--mmlu-ls-h1); }
h2 { font-size: var(--mmlu-size-h2); line-height: var(--mmlu-lh-h2); letter-spacing: var(--mmlu-ls-h2); }
h3 { font-size: var(--mmlu-size-h3); line-height: var(--mmlu-lh-h3); }
h4 { font-size: var(--mmlu-size-h4); line-height: var(--mmlu-lh-tight); }

p { margin: 0 0 var(--mmlu-scale-4) 0; }

a {
  color: var(--mmlu-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--mmlu-duration-fast) var(--mmlu-ease-out);
}
a:hover { color: var(--mmlu-color-link-hover); }
a:visited { color: var(--mmlu-color-link-visited); }
a:focus-visible {
  outline: 2px solid var(--mmlu-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--mmlu-radius-sm);
}

/* ---------- Skip-to-content (accessibility scaffolding) ---------- */
.mmlu-skip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -9999px;
}
.mmlu-skip-list a {
  position: absolute;
  left: -9999px;
}
.mmlu-skip-list a:focus {
  position: static;
  display: inline-block;
  padding: var(--mmlu-scale-2) var(--mmlu-scale-3);
  background: var(--mmlu-color-text);
  color: var(--mmlu-color-text-inverse);
  text-decoration: none;
}

/* ---------- Header ---------- */
.mmlu-header {
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
  background: var(--mmlu-color-surface-base);
}
.mmlu-header__strip {
  height: var(--mmlu-header-strip);
  background: var(--mmlu-color-brand);
}
.mmlu-header__inner {
  max-width: var(--mmlu-content-max);
  margin: 0 auto;
  padding: var(--mmlu-scale-4) var(--mmlu-scale-5);
  display: flex;
  align-items: center;
  gap: var(--mmlu-scale-4);
}
.mmlu-header__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--mmlu-scale-3);
  text-decoration: none;
  color: var(--mmlu-color-text);
}
.mmlu-header__wordmark img,
.mmlu-header__wordmark svg {
  height: 36px;
  width: auto;
  display: block;
}
.mmlu-header__wordmark .mmlu-wordmark__text {
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mmlu-header__wordmark .mmlu-wordmark__sub {
  display: block;
  font-family: var(--mmlu-font-ui);
  font-weight: var(--mmlu-weight-medium);
  font-size: var(--mmlu-size-caption);
  color: var(--mmlu-color-text-muted);
  letter-spacing: var(--mmlu-ls-label);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ---------- Breadcrumb ---------- */
.mmlu-breadcrumb {
  background: var(--mmlu-color-surface-rail);
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}
.mmlu-breadcrumb__inner {
  max-width: var(--mmlu-content-max);
  margin: 0 auto;
  padding: var(--mmlu-scale-3) var(--mmlu-scale-5);
  font-size: var(--mmlu-size-body-sm);
  color: var(--mmlu-color-text-muted);
  font-family: var(--mmlu-font-ui);
}
.mmlu-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmlu-scale-2);
  align-items: center;
}
.mmlu-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--mmlu-scale-2);
}
.mmlu-breadcrumb li + li::before {
  content: "›";
  color: var(--mmlu-color-text-faint);
  font-size: 15px;
}
.mmlu-breadcrumb a { color: var(--mmlu-color-link); text-decoration: none; }
.mmlu-breadcrumb a:hover { text-decoration: underline; }
.mmlu-breadcrumb [aria-current="page"] {
  color: var(--mmlu-color-text);
  font-weight: var(--mmlu-weight-medium);
}

/* ---------- Layout: sidebar + content ---------- */
.mmlu-layout {
  max-width: var(--mmlu-content-max);
  margin: 0 auto;
  padding: 0 var(--mmlu-scale-5);
  display: grid;
  grid-template-columns: var(--mmlu-sidebar-width) 1fr;
  gap: var(--mmlu-scale-7);
}

@media (max-width: 900px) {
  .mmlu-layout {
    grid-template-columns: 1fr;
    gap: var(--mmlu-scale-4);
  }
}

/* ---------- Sidebar ---------- */
.mmlu-sidebar {
  padding: var(--mmlu-scale-6) 0 var(--mmlu-scale-7) 0;
  border-right: 1px solid var(--mmlu-color-border-subtle);
  padding-right: var(--mmlu-scale-5);
  font-family: var(--mmlu-font-ui);
  font-size: var(--mmlu-size-body-sm);
}

@media (max-width: 900px) {
  .mmlu-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--mmlu-color-border-subtle);
    padding-right: 0;
    padding-bottom: var(--mmlu-scale-5);
  }
}

.mmlu-sidebar__edition {
  font-family: var(--mmlu-font-display);
  font-size: var(--mmlu-size-body-lg);
  font-weight: var(--mmlu-weight-bold);
  color: var(--mmlu-color-text);
  text-decoration: none;
  display: block;
  padding-bottom: var(--mmlu-scale-3);
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}

.mmlu-sidebar__search {
  margin-top: var(--mmlu-scale-4);
  display: flex;
  gap: var(--mmlu-scale-2);
}
.mmlu-sidebar__search input[type="search"] {
  flex: 1;
  padding: var(--mmlu-scale-2) var(--mmlu-scale-3);
  border: 1px solid var(--mmlu-color-border);
  border-radius: var(--mmlu-radius-sm);
  font: inherit;
  font-size: var(--mmlu-size-body-sm);
  background: var(--mmlu-color-surface-base);
  color: var(--mmlu-color-text);
}
.mmlu-sidebar__search input[type="search"]:focus-visible {
  outline: 2px solid var(--mmlu-color-focus-ring);
  outline-offset: 1px;
  border-color: var(--mmlu-color-brand);
}
.mmlu-sidebar__search button {
  padding: var(--mmlu-scale-2) var(--mmlu-scale-3);
  background: var(--mmlu-color-text);
  color: var(--mmlu-color-text-inverse);
  border: 1px solid var(--mmlu-color-text);
  border-radius: var(--mmlu-radius-sm);
  font: inherit;
  font-size: var(--mmlu-size-body-sm);
  cursor: pointer;
}
.mmlu-sidebar__search button:hover { background: var(--mmlu-color-text-muted); border-color: var(--mmlu-color-text-muted); }

.mmlu-nav {
  margin-top: var(--mmlu-scale-5);
}
.mmlu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mmlu-nav__l1 > li,
.mmlu-nav__l2 > li,
.mmlu-nav__l3 > li {
  margin: 0;
}
.mmlu-nav a,
.mmlu-nav__label {
  display: block;
  padding: 6px 0;
  color: var(--mmlu-color-text);
  text-decoration: none;
  line-height: 1.4;
}
.mmlu-nav a:hover { color: var(--mmlu-color-link-hover); text-decoration: underline; }

.mmlu-nav__l0 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--mmlu-scale-3);
  margin-bottom: var(--mmlu-scale-3);
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}
.mmlu-nav__l0 a { padding: 4px 0; font-weight: var(--mmlu-weight-medium); }

.mmlu-nav__l1 > li > a,
.mmlu-nav__l1 > li > .mmlu-nav__label {
  padding: 6px 0;
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}

/* Nested lists: pure indent — no decorative left rules. We use color
   + weight on the active trail instead of stacking vertical bars,
   which previously rendered as 3 parallel lines next to the active
   leaf. */
.mmlu-nav__l2 {
  margin-left: var(--mmlu-scale-4);
  margin-top: 2px;
  margin-bottom: var(--mmlu-scale-2);
}
.mmlu-nav__l3 {
  margin-left: var(--mmlu-scale-4);
  margin-top: 2px;
  margin-bottom: var(--mmlu-scale-2);
}

.mmlu-nav .is-active > a,
.mmlu-nav .is-active > .mmlu-nav__label {
  color: var(--mmlu-color-brand);
  font-weight: var(--mmlu-weight-bold);
}

/* Current page: single brand-colored pill. No negative margin, so it
   sits cleanly inside its parent list without colliding with anything. */
.mmlu-nav .is-current {
  display: block;
  color: var(--mmlu-color-brand);
  font-weight: var(--mmlu-weight-bold);
  background: var(--mmlu-color-active-bg);
  padding: 6px var(--mmlu-scale-2);
  border-left: 2px solid var(--mmlu-color-brand);
  border-radius: 0 var(--mmlu-radius-sm) var(--mmlu-radius-sm) 0;
}

.mmlu-sidebar__print {
  margin-top: var(--mmlu-scale-6);
  padding-top: var(--mmlu-scale-4);
  border-top: 1px solid var(--mmlu-color-border-subtle);
}
.mmlu-sidebar__print button {
  background: transparent;
  border: 1px solid var(--mmlu-color-border);
  color: var(--mmlu-color-text);
  padding: var(--mmlu-scale-2) var(--mmlu-scale-3);
  font: inherit;
  font-size: var(--mmlu-size-body-sm);
  border-radius: var(--mmlu-radius-sm);
  cursor: pointer;
}
.mmlu-sidebar__print button:hover { background: var(--mmlu-color-surface-rail); }

/* ---------- Content column ---------- */
.mmlu-content {
  padding: var(--mmlu-scale-6) 0 var(--mmlu-scale-7) 0;
  min-width: 0;
}

.mmlu-program-eyebrow {
  font-family: var(--mmlu-font-mono);
  font-size: var(--mmlu-size-caption);
  letter-spacing: var(--mmlu-ls-label);
  text-transform: uppercase;
  color: var(--mmlu-color-text-muted);
  margin-bottom: var(--mmlu-scale-2);
}
.mmlu-program-title {
  margin-bottom: var(--mmlu-scale-5);
}

/* ---------- Tabs ---------- */
.mmlu-tabs {
  border-bottom: 1px solid var(--mmlu-color-border);
  margin-bottom: var(--mmlu-scale-5);
}
.mmlu-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.mmlu-tabs__btn {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--mmlu-color-text-muted);
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-medium);
  font-size: var(--mmlu-size-body);
  padding: var(--mmlu-scale-3) var(--mmlu-scale-4);
  cursor: pointer;
  margin-bottom: -1px;
  text-decoration: none;
  display: inline-block;
}
.mmlu-tabs__btn:hover { color: var(--mmlu-color-text); }
.mmlu-tabs__btn[aria-selected="true"],
.mmlu-tabs__btn.is-active {
  color: var(--mmlu-color-brand);
  border-bottom-color: var(--mmlu-color-brand);
  font-weight: var(--mmlu-weight-bold);
}
.mmlu-tabs__btn:focus-visible {
  outline: 2px solid var(--mmlu-color-focus-ring);
  outline-offset: -2px;
}

.mmlu-tabpanel {
  display: none;
}
.mmlu-tabpanel.is-active {
  display: block;
}

/* No-JS fallback: every panel becomes a labelled block */
.no-js .mmlu-tabs { display: none; }
.no-js .mmlu-tabpanel {
  display: block;
  margin-bottom: var(--mmlu-scale-7);
  padding-top: var(--mmlu-scale-5);
  border-top: 1px solid var(--mmlu-color-border-subtle);
}
.no-js .mmlu-tabpanel::before {
  content: attr(data-label);
  display: block;
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  font-size: var(--mmlu-size-h2);
  margin-bottom: var(--mmlu-scale-4);
  color: var(--mmlu-color-text);
}

/* ---------- Body prose & lead ---------- */
.mmlu-lead {
  font-size: var(--mmlu-size-body-lg);
  color: var(--mmlu-color-text);
  margin-bottom: var(--mmlu-scale-5);
  max-width: 70ch;
}

/* ---------- Course list table ---------- */
.mmlu-course-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--mmlu-scale-6);
  font-size: var(--mmlu-size-body);
}
.mmlu-course-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  font-size: var(--mmlu-size-h3);
  color: var(--mmlu-color-text);
  padding: var(--mmlu-scale-5) 0 var(--mmlu-scale-3) 0;
  border-bottom: 2px solid var(--mmlu-color-brand);
  margin-bottom: 0;
}
.mmlu-course-table th,
.mmlu-course-table td {
  text-align: left;
  padding: var(--mmlu-scale-3) var(--mmlu-scale-3);
  vertical-align: top;
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}
.mmlu-course-table thead th {
  font-family: var(--mmlu-font-ui);
  font-weight: var(--mmlu-weight-medium);
  font-size: var(--mmlu-size-caption);
  letter-spacing: var(--mmlu-ls-label);
  text-transform: uppercase;
  color: var(--mmlu-color-text-muted);
  background: var(--mmlu-color-surface-rail);
  border-bottom: 1px solid var(--mmlu-color-border);
}
.mmlu-course-table .col-code   { width: 22%; }
.mmlu-course-table .col-title  { width: 58%; }
.mmlu-course-table .col-credits{ width: 20%; text-align: right; }
.mmlu-course-table td.col-credits,
.mmlu-course-table th.col-credits { text-align: right; font-variant-numeric: tabular-nums; }

.mmlu-course-table .mmlu-bubble-link {
  font-family: var(--mmlu-font-mono);
  font-size: var(--mmlu-size-body-sm);
  letter-spacing: var(--mmlu-ls-mono);
  color: var(--mmlu-color-link);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--mmlu-color-border);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.mmlu-course-table .mmlu-bubble-link:hover {
  color: var(--mmlu-color-link-hover);
  text-decoration-color: var(--mmlu-color-link-hover);
  text-decoration-style: solid;
}

.mmlu-course-table .row-or td {
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
  background: var(--mmlu-color-surface-rail);
}
.mmlu-course-table .row-or .or-prefix {
  font-family: var(--mmlu-font-ui);
  font-style: italic;
  color: var(--mmlu-color-text-muted);
  font-size: var(--mmlu-size-body-sm);
  margin-right: var(--mmlu-scale-2);
}
.mmlu-course-table .row-total td {
  font-weight: var(--mmlu-weight-bold);
  background: var(--mmlu-color-surface-rail);
  border-top: 2px solid var(--mmlu-color-text);
  border-bottom: 2px solid var(--mmlu-color-text);
}

.mmlu-course-table sup {
  font-family: var(--mmlu-font-ui);
  font-size: 11px;
  color: var(--mmlu-color-brand);
  font-weight: var(--mmlu-weight-medium);
  margin-left: 2px;
}

.mmlu-footnotes {
  margin-top: var(--mmlu-scale-5);
  padding-top: var(--mmlu-scale-4);
  border-top: 1px solid var(--mmlu-color-border-subtle);
  font-size: var(--mmlu-size-body-sm);
  color: var(--mmlu-color-text-muted);
}
.mmlu-footnotes ol {
  padding-left: var(--mmlu-scale-5);
  margin: 0;
}
.mmlu-footnotes li { margin-bottom: var(--mmlu-scale-2); }

/* ---------- Four-Year Plan grid ---------- */
.mmlu-plan-note {
  font-size: var(--mmlu-size-body);
  color: var(--mmlu-color-text-muted);
  margin-bottom: var(--mmlu-scale-5);
  max-width: 70ch;
}

.mmlu-plan {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mmlu-size-body-sm);
  font-family: var(--mmlu-font-ui);
  margin-bottom: var(--mmlu-scale-5);
}
.mmlu-plan th,
.mmlu-plan td {
  border: 1px solid var(--mmlu-color-border-subtle);
  padding: var(--mmlu-scale-3);
  vertical-align: top;
}
.mmlu-plan thead th {
  background: var(--mmlu-color-surface-rail);
  font-family: var(--mmlu-font-ui);
  font-weight: var(--mmlu-weight-medium);
  font-size: var(--mmlu-size-caption);
  letter-spacing: var(--mmlu-ls-label);
  text-transform: uppercase;
  color: var(--mmlu-color-text-muted);
}
.mmlu-plan .year-label {
  background: var(--mmlu-color-surface-rail);
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  font-size: var(--mmlu-size-body);
  color: var(--mmlu-color-text);
  text-transform: none;
  letter-spacing: 0;
  width: 14%;
  vertical-align: middle;
}
.mmlu-plan .term-cell {
  width: 35%;
}
.mmlu-plan .term-summary {
  width: 16%;
  background: var(--mmlu-color-surface-rail);
  font-family: var(--mmlu-font-mono);
  font-size: var(--mmlu-size-body-sm);
  color: var(--mmlu-color-text);
  text-align: right;
  vertical-align: middle;
}

.mmlu-plan ul.mmlu-plan-courses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mmlu-scale-2);
}
.mmlu-plan ul.mmlu-plan-courses li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--mmlu-scale-3);
  padding: 2px 0;
}
.mmlu-plan .mmlu-bubble-link { white-space: nowrap; }
.mmlu-plan .plan-credits {
  font-family: var(--mmlu-font-mono);
  font-size: var(--mmlu-size-body-sm);
  color: var(--mmlu-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.mmlu-plan .plan-elective {
  font-family: var(--mmlu-font-ui);
  color: var(--mmlu-color-text-muted);
  font-style: italic;
}

.mmlu-plan tfoot td {
  background: var(--mmlu-color-text);
  color: var(--mmlu-color-text-inverse);
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
}
.mmlu-plan tfoot td.term-total-label { text-align: right; }
.mmlu-plan tfoot td.term-total { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .mmlu-plan, .mmlu-plan thead, .mmlu-plan tbody, .mmlu-plan tr, .mmlu-plan th, .mmlu-plan td { display: block; width: 100% !important; }
  .mmlu-plan thead { display: none; }
  .mmlu-plan .year-label { background: var(--mmlu-color-brand); color: var(--mmlu-color-text-inverse); }
  .mmlu-plan .term-cell::before { content: attr(data-term) " · "; font-weight: bold; color: var(--mmlu-color-text-muted); display: block; margin-bottom: var(--mmlu-scale-2); font-family: var(--mmlu-font-ui); font-size: var(--mmlu-size-caption); letter-spacing: var(--mmlu-ls-label); text-transform: uppercase; }
}

/* ---------- Learning Outcomes list ---------- */
.mmlu-plos {
  counter-reset: plo;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mmlu-scale-4);
  max-width: 75ch;
}
.mmlu-plos li {
  counter-increment: plo;
  position: relative;
  padding-left: var(--mmlu-scale-7);
  padding-top: var(--mmlu-scale-3);
  padding-bottom: var(--mmlu-scale-3);
  border-bottom: 1px solid var(--mmlu-color-border-subtle);
}
.mmlu-plos li:last-child { border-bottom: 0; }
.mmlu-plos li::before {
  content: counter(plo);
  position: absolute;
  left: 0;
  top: var(--mmlu-scale-3);
  font-family: var(--mmlu-font-mono);
  font-size: var(--mmlu-size-body-lg);
  font-weight: var(--mmlu-weight-bold);
  color: var(--mmlu-color-brand);
  letter-spacing: var(--mmlu-ls-mono);
  width: var(--mmlu-scale-6);
  text-align: left;
}
.mmlu-plos__intro {
  margin-bottom: var(--mmlu-scale-5);
  max-width: 70ch;
}

/* ---------- Footer ---------- */
.mmlu-footer {
  margin-top: var(--mmlu-scale-7);
  border-top: 1px solid var(--mmlu-color-border-subtle);
  background: var(--mmlu-color-surface-rail);
}
.mmlu-footer__inner {
  max-width: var(--mmlu-content-max);
  margin: 0 auto;
  padding: var(--mmlu-scale-5) var(--mmlu-scale-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmlu-scale-4);
  align-items: center;
  justify-content: space-between;
  font-family: var(--mmlu-font-ui);
  font-size: var(--mmlu-size-body-sm);
  color: var(--mmlu-color-text-muted);
}
.mmlu-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--mmlu-scale-3);
  text-decoration: none;
  color: var(--mmlu-color-text);
}
.mmlu-footer__wordmark img,
.mmlu-footer__wordmark svg { height: 28px; width: auto; }
.mmlu-footer__wordmark span {
  font-family: var(--mmlu-font-display);
  font-weight: var(--mmlu-weight-bold);
  font-size: var(--mmlu-size-body);
  color: var(--mmlu-color-text);
  letter-spacing: -0.01em;
}
.mmlu-footer__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--mmlu-scale-3);
  align-items: center;
}
.mmlu-footer__meta li { list-style: none; }
.mmlu-footer__meta ul {
  margin: 0; padding: 0; list-style: none;
  display: inline-flex; flex-wrap: wrap; gap: var(--mmlu-scale-3); align-items: center;
}
.mmlu-footer__meta li + li::before {
  content: "·";
  margin-right: var(--mmlu-scale-3);
  color: var(--mmlu-color-text-faint);
}

/* ---------- Reduced-motion baseline (inherited) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}