/* Universo — mobile-first styles. Palette: navy / teal / gold. */

:root {
  --navy-900: #0b1f3a;
  --navy-800: #12294d;
  --navy-700: #1b3a66;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-050: #e6f7f4;
  --gold-500: #e9b949;
  --gold-600: #d4a017;

  --ink: #10233f;
  --ink-soft: #45566e;
  /* Darkened from #7a879b (contrast 3.4 on the page bg — below WCAG AA's 4.5).
     #616e82 clears 4.5 on both the page and white backgrounds while staying
     visibly muted. Used for secondary/muted text and uppercase field labels. */
  --ink-faint: #616e82;
  --line: #e4e8ef;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --danger: #d64550;
  --success: #1f9d6b;

  /* ---- Extended semantic tokens (theming) -------------------------------
     Light values here preserve the current look exactly; the
     :root[data-theme="dark"] block below re-defines the same names for a
     layered dark UI. Components consume these tokens, never raw colours, so
     the whole app themes by swapping values in one place. */
  --surface-elevated: #ffffff; /* modals, popovers, raised cards */
  --surface-muted: #eef1f6; /* recessed wells, table zebra, skeletons */
  --input-bg: #ffffff;
  --border-muted: #eef1f6;
  --ring: rgba(20, 184, 166, 0.45); /* teal focus ring */
  --on-brand: #ffffff; /* text on navy/teal fills (both themes) */
  --on-gold: #10233f; /* text on GOLD fills — stays dark in both themes */
  --scrollbar: #cdd7e6;
  /* Status tints (badges, pills, callouts): background + readable foreground */
  --danger-bg: #fdecee;
  --danger-fg: #b3202b;
  --success-bg: #e4f5ea;
  --success-fg: #15803d;
  --warning-bg: #fbf1d9;
  --warning-fg: #916609;
  --info-bg: #eef2f7;
  --info-fg: #1b3a66;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm:
    0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 3px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 31, 58, 0.1);

  /* Motion tokens — one source so components don't each invent their own.
     Motion must explain a change, acknowledge an action, or guide attention;
     nothing over --dur-3, nothing ambient/continuous. */
  --dur-1: 120ms; /* micro-feedback (hover, press) */
  --dur-2: 200ms;
  --dur-3: 320ms; /* entrances */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rise: 12px; /* entrance travel distance */
  --stagger: 40ms; /* per-card cascade */

  /* Type scale. Steps were chosen to hug the sizes already in use, so adopting
     them moved no text by more than ~5%. Pick the nearest step for new work
     rather than inventing a value — the 36 ad-hoc sizes this replaced were how
     the drift started. */
  --text-3xs: 0.62rem;
  --text-2xs: 0.68rem;
  --text-xs: 0.74rem;
  --text-sm: 0.8rem;
  --text-md: 0.86rem;
  --text-base: 0.92rem;
  --text-lg: 1rem;
  --text-xl: 1.15rem;
  --text-2xl: 1.3rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.8rem;
  --text-5xl: 2rem;
  --text-6xl: 2.4rem;
  --text-7xl: 2.9rem;

  /* Spacing grid: 4px steps — 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64.
     Values under 4px are the one exception, for hairline optical nudges.
     Written as literals rather than tokens because most spacing here is
     shorthand (`padding: 12px 16px`), where three var() calls per line costs
     more readability than the indirection buys. The constraint is the grid, not
     the variable — pick a step, don't invent a value. */

  --tabbar-h: 62px;
  --maxw: 1080px;
  --font:
    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  /* Headings only. Georgia is the fallback rather than the body stack, so a
     swap before the webfont lands still reads as a serif and the hierarchy
     never collapses into one voice. */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ===========================================================================
   DARK THEME
   The resolved theme ('light' | 'dark') is stamped on <html data-theme> before
   first paint by an inline script in <head> (no flash). "System" is resolved
   there and kept live by app.js. Only SEMANTIC tokens flip here — the brand
   palette (navy / teal / gold) stays constant so buttons and links keep their
   identity across themes. This is a layered dark UI (background → surface →
   elevated) with depth from luminance, not a colour inversion.
   =========================================================================== */
:root[data-theme="dark"] {
  /* Warm-neutral GRAPHITE — charcoal, not blue. Surfaces step up by luminance
     (bg → surface → elevated), distinguishable without heavy borders. Never
     pure black; never an "AI blue" dashboard. */
  /* Crisp, near-neutral graphite with clearly STEPPED elevation (FB-style):
     base → card is a clear lift, card → elevated is a real jump, so menus,
     modals and hovers visibly pop. Cleaner (low warm bias) so it reads crisp,
     not dull. */
  --bg: #1c1b1a; /* app base */
  --surface: #292826; /* cards — clearly above the base */
  --surface-elevated: #3a3834; /* menus, modals, hover — a real step up */
  --surface-muted: #151413; /* recessed wells, inputs */
  --input-bg: #151413;

  --ink: #eeede9; /* primary — bright, crisp off-white */
  --ink-soft: #bebbb4; /* secondary — clearly readable */
  --ink-faint: #949089; /* tertiary — ≥4.5:1 on --bg */

  --line: rgba(255, 255, 255, 0.13); /* crisp, visible edges (not a grid) */
  --border-muted: rgba(255, 255, 255, 0.07);
  --ring: rgba(230, 184, 105, 0.65);
  --scrollbar: #4a453f;

  /* Accents MUTED for dark — recognisable, restrained, never neon. Gold leads
     (warm CTA); teal is the quieter interactive accent (links, save). */
  --teal-500: #33c2ab; /* teal fill — rich, saturated, not neon */
  --teal-600: #46cdb6; /* link/accent TEXT — clearly live, readable */
  --teal-050: rgba(51, 194, 171, 0.15);
  --gold-500: #f2be5b; /* CTA gold — the warm, human hero accent */
  --gold-600: #f6c96e;

  /* Brand navy surfaces (dark cards, banners, footer) become warm graphite in
     dark — this is what removes the blue everywhere. White text on them stays
     readable. Light mode keeps its navy. */
  --navy-900: #292826;
  --navy-800: #2f2e2b;
  --navy-700: #3a3834;
  --navy-050: rgba(255, 255, 255, 0.07);
  --danger: #ec6f79;
  --success: #4fc98a; /* meaningful green — vibrant enough to read as success */

  /* Elevation that reads on dark: a faint top highlight (lit from above) plus a
     real drop shadow, so cards feel raised and lit, not flat rectangles. */
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.34);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.55);

  /* Status tints: meaningful, readable foregrounds (not washed out). */
  --danger-bg: rgba(236, 111, 121, 0.16);
  --danger-fg: #f0a7ab;
  --success-bg: rgba(79, 201, 138, 0.16);
  --success-fg: #6fd6a1;
  --warning-bg: rgba(242, 190, 91, 0.15);
  --warning-fg: #efc673;
  --info-bg: rgba(255, 255, 255, 0.06);
  --info-fg: #b8b4ac;

  color-scheme: dark; /* native form controls, scrollbars follow */
}

/* Dark-only: neutralise DECORATIVE teal chips so green reads as MEANING, not
   decoration. Light mode keeps its teal chips; interactive teal (links,
   buttons) and semantic chips (--gold/--deadline/--rank) are untouched. */
:root[data-theme="dark"] .chip {
  background: var(--surface-muted);
  color: var(--ink-soft);
}

/* Dark header = graphite nav layer, not the navy of light mode (no blue bar
   over a warm-graphite app). Neutralise the faintly-blue nav link colour. */
:root[data-theme="dark"] .topbar {
  background: #242322;
  border-bottom: 1px solid var(--line);
}
/* Interactive cards/rows lighten on hover — the "highlighted", alive feel. */
:root[data-theme="dark"] .uni-card:hover {
  background: var(--surface-elevated);
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-theme="dark"] .topnav a {
  color: var(--ink-soft);
}
:root[data-theme="dark"] .topnav a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
/* Muted teal button fills are lightish on dark — dark text keeps them legible
   in the normal AND hover state (premium, not neon). */
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .uni-card__tier--verified,
:root[data-theme="dark"] .niche-btn.is-active,
:root[data-theme="dark"] .scope-row .niche-btn.is-active {
  color: #12211e; /* dark text on the vibrant teal fill — readable, not white-on-teal */
}
/* Match-score badges on dark: deep enough that the white number clears AA. */
:root[data-theme="dark"] .fit--strong .uni-card__fit-score {
  background: #23814f; /* white "100" now ~5:1 (was 3.4 on #2f9e63) */
}
:root[data-theme="dark"] .fit--good .uni-card__fit-score {
  background: #a77c13;
}
:root[data-theme="dark"] .fit--partial .uni-card__fit-score {
  background: #6a665e;
}
/* Photo-overlay badge → warm dark, not navy. */
:root[data-theme="dark"] .uni-card__badge {
  background: rgba(20, 19, 17, 0.72);
}
/* "Verify on official page" hint → warning tokens in dark (was a light cream
   box). Light mode keeps its exact cream styling above. */
:root[data-theme="dark"] .verify-flag {
  background: var(--warning-bg);
  border-color: var(--warning-fg);
  color: var(--warning-fg);
}
/* Decorative blob (for-universities hero) → warm, not blue. */
:root[data-theme="dark"] .lp-blob--3 {
  background: #5a534a;
}

/* Atmosphere — a faint fixed light source at the top so the app reads as a lit
   space, not a flat black slab. Sits behind content, shows in the breathing
   room around cards. Very subtle: no glow, no wash. */
:root[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    100% 46% at 50% 0%,
    rgba(255, 255, 255, 0.035),
    transparent 58%
  );
}
/* Cards feel alive: they rise and brighten on hover (merges with the base
   hover rule above). Interaction = the interface is responsive. */
:root[data-theme="dark"] .uni-card {
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
:root[data-theme="dark"] .uni-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px rgba(0, 0, 0, 0.5);
}
/* Mobile tab bar reacts to touch/hover. */
:root[data-theme="dark"] .tabbar__item:hover {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.04);
}
/* Header toggle a touch more present so it's easy to find. */
:root[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Brief colour transition only while toggling (app.js adds .theme-anim to
   <html> for ~240ms), so the switch feels smooth without ambient animation. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim,
  html.theme-anim * {
    transition:
      background-color 200ms var(--ease-out),
      border-color 200ms var(--ease-out),
      color 200ms var(--ease-out),
      fill 200ms var(--ease-out);
  }
}

* {
  box-sizing: border-box;
}

/* The native [hidden] attribute is only equal-specificity with any class that
   also sets `display` on the same element — author styles beat the UA
   stylesheet's [hidden] rule regardless of source order, so `display:flex`
   on a hidden nav/CTA pair silently wins and both states render stacked on
   top of each other. Force it to actually hide, everywhere. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0));
}

::selection {
  background: var(--teal-050);
  color: var(--ink);
}
/* Themed scrollbars (WebKit); Firefox uses color-scheme + the property below. */
html {
  scrollbar-color: var(--scrollbar) transparent;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-track {
  background: transparent;
}

a {
  color: var(--teal-600);
  text-decoration: none;
}
h1,
h2,
h3 {
  line-height: 1.25;
  color: var(--ink);
}
/* Serif is the page-and-section voice; h3 stays sans because it labels dense
   components (card names, checklist rows) where a serif reads as decoration
   rather than hierarchy. */
h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
img {
  max-width: 100%;
  display: block;
}

/* ---------- Top bar (brand strip on all sizes; nav links join in on desktop) ---------- */
.topbar {
  display: block;
  background: var(--navy-900);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand__mark {
  width: 26px;
  height: 26px;
  display: block;
  flex: 0 0 auto;
  color: #fff;
}
.brand__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand__name {
  color: #fff;
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  font-style: italic;
  transform: skewX(-3deg);
  display: inline-block;
}
.brand__tag {
  display: none;
  color: var(--gold-500);
  font-weight: 600;
  font-size: var(--text-3xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
.topnav {
  display: none;
  gap: 8px;
}
.topnav a {
  color: #cdd7e6;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 8px 16px;
  border-radius: 999px;
}
.topnav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.topnav a.is-active {
  color: var(--on-gold);
  background: var(--gold-500);
}

/* ---------- View container ---------- */
.view {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 16px 28px;
}

/* ---------- Bottom tabs (mobile) ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 50;
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  font-weight: 600;
}
/* Sized in px, not font-size: the icons are SVG now, and they take their colour
   from the item via currentColor — no grayscale filter needed to mute them. */
.tabbar__icon {
  width: 22px;
  height: 22px;
  line-height: 1;
}
.tabbar__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tabbar__item.is-active {
  color: var(--teal-600);
}

/* ---------- Hero / section headers ---------- */
.hero {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 16px;
}
.hero h1 {
  color: #fff;
  margin: 0 0 8px;
  font-size: var(--text-3xl);
}
.hero p {
  margin: 0;
  color: #c7d2e2;
  font-size: var(--text-base);
}
.hero .accent {
  color: var(--gold-500);
}
/* Scoped to outrank `.hero p` (0,1,1). Unscoped it lost the cascade and rendered
   at body size, so the eyebrow never actually read as an eyebrow. */
.hero .hero__tagline {
  color: var(--gold-500);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 2px 12px;
}
.section-head h2 {
  font-size: var(--text-xl);
  margin: 0;
}
.muted {
  color: var(--ink-faint);
  font-size: var(--text-base);
}

/* ---------- Niche quick-filter ---------- */
.niche-btn {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--teal-500);
  background: var(--teal-050);
  color: var(--teal-600);
  font-weight: 700;
  font-size: var(--text-md);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.niche-btn:hover {
  background: var(--teal-500);
  color: #fff;
}
.niche-btn.is-active {
  background: var(--teal-500);
  color: #fff;
}

/* One "What are you looking for?" panel — collapses the old stack of loose
   controls (scope + niche + search + filters) into a single scannable unit. */
.intent {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 14px;
  margin-bottom: 18px;
}
.intent__title {
  margin: 0 0 12px;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.intent .searchbar {
  margin-bottom: 12px;
}
.intent .filters {
  margin-bottom: 0;
}
/* Quiet options row (scope + niche preset) — demoted below the primary inputs
   so verified-only, the default, no longer competes for attention at the top. */
.intent__opts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.intent__opts-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-faint);
}
.intent__opts .scope-row {
  margin-bottom: 0;
}
.niche-btn--preset {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-bottom: 0;
  padding: 7px 14px;
  font-size: var(--text-sm);
}
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-basis: 100%;
}

/* Set-up-matching nudge — shown to a logged-in student with no profile yet, who
   otherwise gets no fit ranking and no reason to know it exists. */
.match-nudge {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--teal-050);
  border: 1px solid #bfe9e2;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.match-nudge__body {
  flex: 1;
  min-width: 220px;
}
.match-nudge__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--teal-600);
}
.match-nudge__sub {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.match-nudge .btn {
  white-space: nowrap;
}

/* ---------- Scholarships ---------- */
.sch-block {
  margin-bottom: 26px;
}
.sch-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sch-card.is-tracked {
  border-color: var(--teal-500);
}
.sch-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sch-card__scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sch-card__scope .icon {
  width: 13px;
  height: 13px;
  color: var(--gold-600);
}
.sch-card__tracked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--teal-600);
}
.sch-card__tracked .icon {
  width: 13px;
  height: 13px;
}
.sch-card__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.2;
}
.sch-card__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-md);
  flex: 1;
}
.sch-card__foot {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.sch-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .sch-track {
    grid-template-columns: 1fr;
  }
}

/* Curated scholarship card (richer than a pointer) */
.sch-card--curated {
  border-color: #cfe6df;
}
.sch-card__badge-v {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--teal-600);
  background: var(--teal-050);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
.sch-card__badge-v .icon {
  width: 12px;
  height: 12px;
}
.sch-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sch-fund-badge {
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
}
.sch-fund--full {
  background: var(--success-bg);
  color: var(--success-fg);
}
.sch-fund--partial {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.sch-intent {
  margin-bottom: 22px;
}
.sch-card__fund {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--gold-600);
}
.sch-card__fund .icon {
  width: 13px;
  height: 13px;
}
.sch-card__meta-line {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* Curated detail page */
.sch-hd {
  margin-bottom: 16px;
}
.sch-hd__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--teal-600);
  background: var(--teal-050);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.sch-hd__badge .icon {
  width: 13px;
  height: 13px;
}
.sch-hd h1 {
  margin: 0 0 4px;
}
.sch-hd__tag {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-lg);
}
.sch-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.sch-glance__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sch-glance__k {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sch-glance__v {
  font-weight: 600;
  color: var(--ink);
}
.sch-glance__item--flag {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--gold-600);
  font-weight: 600;
  font-size: var(--text-sm);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.sch-glance__item--flag .icon {
  width: 15px;
  height: 15px;
}

/* Eligibility indicator */
.elig-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.elig-list__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--text-md);
  color: var(--ink-soft);
}
.elig-list__item .icon {
  flex: 0 0 auto;
  margin-top: 1px;
  width: 16px;
  height: 16px;
}
.elig-list__item--ok .icon {
  color: var(--success);
}
.elig-list__item--warn .icon {
  color: var(--gold-600);
}

/* Funding breakdown */
.fund-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fund-row__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.fund-row__label {
  font-weight: 700;
}
.fund-row__text {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-md);
}
.fund-badge {
  font-size: var(--text-3xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.fund-badge--full {
  background: var(--success-bg);
  color: var(--success-fg);
}
.fund-badge--partial {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.fund-badge--none {
  background: var(--surface-muted);
  color: var(--ink-soft);
}

/* Definition list, ordered steps, bullet lists */
.sch-dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
}
.sch-dl dt {
  font-weight: 700;
  color: var(--ink);
}
.sch-dl dd {
  margin: 0;
  color: var(--ink-soft);
}
.sch-ul {
  margin: 0;
  padding-left: 1.15em;
  color: var(--ink-soft);
}
.sch-ul li {
  margin-bottom: 6px;
}
.sch-steps {
  margin: 0 0 14px;
  padding-left: 1.3em;
  color: var(--ink-soft);
}
.sch-steps li {
  margin-bottom: 8px;
}
.sch-important h3 {
  color: var(--gold-600);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sch-important h3 .icon {
  width: 16px;
  height: 16px;
}
.sch-status {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.sch-status--open {
  background: var(--success-bg);
  color: var(--success-fg);
}
.sch-status--soon {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
.sch-status--closed {
  background: var(--surface-muted);
  color: var(--ink-soft);
}
@media (max-width: 520px) {
  .sch-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .sch-dl dd {
    margin-bottom: 8px;
  }
}

/* Participating universities */
.sch-unis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.sch-uni {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-decoration: none;
  color: var(--ink);
}
.sch-uni:hover {
  border-color: var(--teal-500);
}
.sch-uni .muted {
  font-size: var(--text-xs);
}

/* Discover "via scholarship" context ribbon */
.via-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 2px 0 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--gold-050, #faf3e2);
  border: 1px solid #ecd9a3;
  font-size: var(--text-sm);
}
.via-context__txt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--gold-600);
}
.via-context__txt .icon {
  width: 14px;
  height: 14px;
}
.via-context a {
  color: var(--gold-600);
  font-weight: 700;
}

/* University-card funding chip + profile funding callout */
.uni-card__meta .chip--funding {
  background: var(--warning-bg);
  color: var(--gold-600);
}
.uni-card__meta .chip--funding .icon {
  opacity: 1;
  color: var(--gold-600);
}
.funding-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--warning-bg);
  border: 1px solid #ecd9a3;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  color: var(--ink);
}
.funding-callout .icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--gold-600);
  margin-top: 1px;
}
.funding-callout a {
  font-weight: 700;
}

/* Verified-vs-directory scope toggle (sits above the niche button).
   Styled as ONE segmented control, not two pills: it's a binary either/or, and
   as two separate full-width pills it read as two competing CTAs — worse, it
   looked identical to the niche button below, which does something unrelated. */
.more-filters {
  margin: 4px 0 8px;
}
.more-filters > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal-600);
  padding: 4px 2px;
  list-style: none;
}
.more-filters > summary::-webkit-details-marker {
  display: none;
}
.more-filters > summary::before {
  content: "▸";
  font-size: 0.85em;
}
.more-filters[open] > summary::before {
  content: "▾";
}
.more-filters__n {
  background: var(--teal-500);
  color: #fff;
  border-radius: 999px;
  padding: 0 7px;
  font-size: var(--text-xs);
  line-height: 1.6;
}
.more-filters > .filters {
  margin-top: 8px;
}
.app-tosl {
  background: none;
  border: 0;
  padding: 4px 0;
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  cursor: pointer;
}
.app-tosl:hover,
.app-tosl:focus-visible {
  color: var(--teal-600);
  text-decoration: underline;
}
.scope-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.scope-head__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
}
.scope-info {
  cursor: help;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  line-height: 1;
}
.scope-info:hover,
.scope-info:focus-visible {
  color: var(--teal-600);
}
.scope-row {
  display: flex;
  margin-bottom: 12px;
  border: 1.5px solid var(--teal-500);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.scope-row .niche-btn {
  flex: 1;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Must be scoped too: unscoped `.niche-btn.is-active` ties with
   `.scope-row .niche-btn` on specificity and loses on source order, which left
   the selected segment as white text on a transparent background. */
.scope-row .niche-btn.is-active {
  background: var(--teal-500);
  color: #fff;
}
/* Bug fix: the base `.niche-btn:hover` sets white text, but the scope segments
   have a transparent background — so hovering an UNSELECTED segment rendered
   white-on-white (the label vanished). Give the inactive hover a real tint. */
.scope-row .niche-btn:not(.is-active):hover {
  background: var(--teal-050);
  color: var(--teal-600);
}
.scope-row .niche-btn:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: -2px;
}
.scope-row .niche-btn + .niche-btn {
  border-left: 1.5px solid var(--teal-500);
}
@media (max-width: 560px) {
  /* Both labels carry a count and wrap badly side by side on a phone; stack the
     segments and square the container so it still reads as one control. */
  .scope-row {
    flex-direction: column;
    border-radius: var(--radius);
  }
  .scope-row .niche-btn + .niche-btn {
    border-left: 0;
    border-top: 1.5px solid var(--teal-500);
  }
}

/* ---------- Recommendations ---------- */
.grid--rec {
  margin-bottom: 24px;
}
.match-why {
  font-size: var(--text-xs);
  color: var(--teal-600);
  background: var(--teal-050);
  border-radius: 8px;
  padding: 8px 8px;
  margin: 2px 0 0;
}

/* ---------- Search + filters ---------- */
.searchbar {
  position: relative;
  margin-bottom: 12px;
}
.searchbar input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-lg);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%237a879b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 14px center;
}
.searchbar input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}

.filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.filters .full {
  grid-column: 1 / -1;
}
/* Sort is ordering, not filtering, and it's the 7th item in an even grid — so
   it left a hole at the end of the last row. Spanning two cells fills the row
   and gives the odd-one-out control a shape of its own. */
.filters .field--wide {
  grid-column: span 2;
}
.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 4px 2px;
}
.field select,
.field input {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-base);
  color: var(--ink);
}
.field select:focus,
.field input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 2px 16px;
}
.link-btn {
  background: none;
  border: none;
  color: var(--teal-600);
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  font-size: var(--text-base);
}

/* ---------- University cards ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.uni-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.uni-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.uni-card__cover {
  height: 96px;
  position: relative;
  display: flex;
  align-items: flex-end;
  /* City sits bottom-RIGHT: the logo tile is pulled up out of the body into the
     cover's bottom-left, and an opaque tile over the label hid half the city
     name. Only .uni-card__loc is in flow here — the badges are absolute. */
  justify-content: flex-end;
  padding: 12px 12px;
  color: #fff;
}
.uni-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(11, 31, 58, 0.72);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.uni-card__loc {
  font-size: var(--text-sm);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.uni-card__body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.uni-card__title {
  display: flex;
  gap: 11px;
  align-items: center;
}
.uni-card__logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--navy-050, #eef2f8);
  color: var(--ink);
  font-weight: 800;
  font-size: var(--text-base);
  border: 1px solid var(--line);
  margin-top: -32px;
  box-shadow: var(--shadow-sm);
  background-color: var(--surface);
}
.uni-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}
.uni-card__desc {
  color: var(--ink-soft);
  font-size: var(--text-md);
  margin: 0;
}
.uni-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.chip {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--teal-050);
  color: var(--teal-600);
}
.chip--gold {
  background: var(--warning-bg);
  color: var(--gold-600);
}
.chip--plain {
  background: var(--surface-muted);
  color: var(--ink-soft);
}
.chip--rank {
  background: var(--navy-900);
  color: #fff;
}
.chip--deadline {
  background: var(--warning-bg);
  color: var(--gold-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chip--deadline .icon {
  width: 13px;
  height: 13px;
}

/* Calm the meta chips on DISCOVER cards only — one neutral pill so the fit badge
   is the single bold accent. Scoped so the coloured variants still carry meaning
   elsewhere (Dream Plan "next", "scholarship needed", profile fields of study). */
.uni-card__meta .chip {
  background: var(--surface-muted);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.uni-card__meta .chip .icon {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.uni-card__meta .chip--gold {
  background: var(--surface-muted);
  color: var(--ink);
  font-weight: 700;
}
.uni-card__meta .chip--rank {
  background: var(--surface-muted);
  color: var(--ink-soft);
}
.uni-card__meta .chip--deadline {
  background: var(--surface-muted);
  color: var(--ink-soft);
}

/* Fit badge — the matcher's 0–100 score made visible. A FIT read, not
   admission odds; the label spells that out ("how well it fits you"). */
.uni-card__fit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Right-aligned so it clears the university logo, which is pulled up into the
     top-left of the body (margin-top:-32px) and would otherwise sit under it.
     min-width keeps every badge the same size across bands so, right-aligned,
     their edges line up card-to-card. */
  align-self: flex-end;
  min-width: 8.5rem;
  padding: 3px 14px 3px 3px;
  border-radius: 999px;
  background: var(--teal-050);
  box-shadow: var(--shadow-sm);
}
.uni-card__fit-score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-500);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.uni-card__fit-label {
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}
/* Colour-coded by band so the quality reads at a glance, before the number:
   green = strong, amber = good, slate = partial. */
.fit--strong {
  background: var(--success-bg);
}
.fit--strong .uni-card__fit-score {
  background: #16a34a;
}
.fit--strong .uni-card__fit-label {
  color: var(--success-fg);
}
.fit--good {
  background: var(--warning-bg);
}
.fit--good .uni-card__fit-score {
  background: #cf9a1c;
}
.fit--good .uni-card__fit-label {
  color: var(--warning-fg);
}
.fit--partial {
  background: var(--surface-muted);
}
.fit--partial .uni-card__fit-score {
  background: #8a97a8;
}
.fit--partial .uni-card__fit-label {
  color: var(--ink-soft);
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Fit-ranked banner above the results — ties the list order to the student's
   own answers. Shown only while the server actually ranked by match. */
.fit-rank-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 2px 0 14px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--teal-050);
  border: 1px solid #bfe9e2;
  font-size: var(--text-sm);
}
.fit-rank-note__txt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--teal-600);
}
.fit-rank-note__txt .icon {
  width: 14px;
  height: 14px;
}
.fit-rank-note .link-btn,
.fit-rank-note a {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.12s ease,
    transform 0.08s ease,
    border-color 0.12s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--teal-500);
  color: #fff;
}
.btn--primary:hover {
  background: var(--teal-600);
}
.btn--gold {
  background: var(--gold-500);
  color: var(--on-gold);
}
.btn--gold:hover {
  background: var(--gold-600);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  border-color: var(--teal-500);
  color: var(--teal-600);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: 8px 12px;
  font-size: var(--text-md);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn--saved {
  background: var(--gold-500);
  color: var(--on-gold);
}

/* ---------- Profile page ---------- */
.profile__cover {
  height: 168px;
  border-radius: var(--radius);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}
.profile__headline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile__logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--text-2xl);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.profile__title h1 {
  margin: 0;
  font-size: var(--text-2xl);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.profile__title .loc {
  color: #eaf0f8;
  font-weight: 600;
  font-size: var(--text-base);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.profile__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.profile__actions .btn {
  flex: 1;
}
/* Full-width is right on a phone (thumb reach) but not on a wide page, where
   flex:1 stretched Save and Apply Now to ~530px each. Cap the pair instead of
   unsetting flex, so the two stay equal and left-aligned under the header. */
@media (min-width: 720px) {
  .profile__actions {
    max-width: 440px;
  }
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.info-card h3 {
  margin: 0 0 12px;
  font-size: var(--text-lg);
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.info-item .k {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}
.info-item .v {
  font-size: var(--text-base);
  color: var(--ink);
  margin-top: 2px;
  /* Key facts is a two-column grid of figures — tuition, living cost, ranking,
     student counts — so the digits should line up between rows. */
  font-variant-numeric: tabular-nums;
}
.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scholarship-row {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.scholarship-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.scholarship-name {
  font-weight: 700;
  font-size: var(--text-base);
}
.scholarship-name a {
  color: var(--teal-600);
}
.scholarship-note {
  margin: 3px 0 0;
  font-size: var(--text-sm);
}

/* Entry requirements — one section: verified language leads, the university's
   broader free-text requirements follow as context. */
.entry-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.entry-text--sep {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lang-head {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
  margin-bottom: 6px;
}
.lang-head .lang-level {
  font-weight: 500;
  color: var(--ink-faint);
  font-size: var(--text-sm);
}
.lang-tests {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang-test {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.lang-test:first-child {
  border-top: none;
  padding-top: 2px;
}
.lang-test__name {
  color: var(--ink-soft);
  font-size: var(--text-md);
}
.lang-test__score {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lang-test__note {
  display: block;
  font-weight: 400;
  white-space: normal;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  margin-top: 1px;
}
.lang-alt {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.lang-alt__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.lang-alt ul {
  margin: 0;
  padding-left: 18px;
}
.lang-alt li {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin: 2px 0;
}
.lang-cond {
  margin: 12px 0 0;
  font-size: var(--text-sm);
}
.lang-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--success);
}
.lang-verified .icon {
  flex: none;
  color: var(--success);
}
.lang-source {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal-600);
}
.lang-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--ink);
}
.lang-flag .icon {
  flex: none;
  color: var(--gold-600);
}
.lang-progs {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.lang-progs li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.lang-progs a {
  color: var(--teal-600);
  font-weight: 600;
  font-size: var(--text-sm);
}

.verify-flag {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #f2e0a8;
  color: #7a5b00;
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font-size: var(--text-sm);
  margin-bottom: 12px;
}

/* ---------- Auth / account ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  max-width: 460px;
  margin: 0 auto;
}
.card h2 {
  margin: 0 0 4px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ink-soft);
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  background: var(--surface);
  color: var(--ink);
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}
/* Password show/hide toggle (login / register / reset). */
.pw-wrap {
  position: relative;
}
.pw-wrap input {
  padding-right: 68px;
}
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-width: 60px;
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--teal-500);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pw-toggle:hover {
  color: var(--ink);
}
.pw-toggle:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}
/* "Verify your email" banner (shown above the view while unverified). */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--card);
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  font-size: var(--text-sm);
}
.verify-banner .vb-msg {
  flex: 1 1 240px;
}
.verify-banner .vb-resend {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 36px;
  font-weight: 600;
}
.verify-banner .vb-resend:hover {
  background: var(--gold);
  color: #1a1400;
}
.verify-banner .vb-x {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  min-width: 36px;
  min-height: 36px;
}
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--text-md);
  color: var(--ink-soft);
}
.consent input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--teal-500);
}
.since-away {
  border-left: 3px solid var(--gold-500);
}
.since-away__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-600);
  margin-bottom: 8px;
}
.since-away__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.since-away__list a {
  color: var(--ink);
  text-decoration: none;
}
.since-away__list a:hover strong {
  text-decoration: underline;
}
.notif-prefs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.notif-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.notif-row input {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--teal-500);
}
.notif-row__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-md);
}
.notif-row__body .muted {
  font-size: var(--text-sm);
}
.form-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #f6c9ce;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  margin-bottom: 16px;
}
.form-success {
  background: var(--teal-050);
  color: var(--success);
  border: 1px solid #bfe8d5;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  margin-bottom: 16px;
}
.switch-auth {
  text-align: center;
  margin-top: 16px;
  font-size: var(--text-base);
  color: var(--ink-soft);
}
.switch-auth button {
  background: none;
  border: none;
  color: var(--teal-600);
  font-weight: 700;
  cursor: pointer;
  font-size: var(--text-base);
}

.tabs {
  display: flex;
  gap: 8px;
  background: var(--surface-muted);
  padding: 4px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.tabs button {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 999px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.tabs button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------- Account (logged in) ---------- */
.account-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
/* Now that the avatar holds its width, the address is what has to give: a flex
   item won't shrink below its content without min-width:0, and an email has no
   spaces to break at. */
.account-head > div:not(.avatar) {
  min-width: 0;
}
.account-head .muted {
  overflow-wrap: anywhere;
}
.avatar {
  width: 60px;
  height: 60px;
  /* Without this a long email beside it shrinks the avatar horizontally, and
     border-radius:50% turns the circle into an ellipse. Measured at 375px with
     a 31-character address: 31px wide against 60px tall. */
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-500), var(--navy-700));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--text-3xl);
}
.profile-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ---------- States ---------- */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-faint);
}
.empty__emoji {
  font-size: var(--text-6xl);
}
.empty h3 {
  margin: 8px 0 4px;
  color: var(--ink-soft);
}
.skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #e2e7ef 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--radius);
  height: 190px;
}
.skeleton--block {
  height: 96px;
}
.journey-skel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* ---- My Journey ---- */
/* Journey mixes full-width uni grids with card blocks; the base .card is
   460px-centered (for the account/auth column), so widen cards here to match
   the grid and keep the page aligned. */
.journey .card {
  max-width: none;
  margin: 0;
}
.progress {
  background: var(--surface-muted);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-600));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.journey-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.journey-progress__head h3 {
  margin: 0;
  font-size: var(--text-lg);
}
.journey-progress__pct {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}
.journey-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.journey-action {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px;
}
.journey-action__body {
  flex: 1;
  min-width: 0;
}
.journey-action__body strong {
  display: block;
}
.journey-action__body p {
  margin: 2px 0 0;
  font-size: var(--text-md);
}
.journey-action .btn {
  flex: 0 0 auto;
}
.journey-scholarships {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.journey-scholarships li {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.journey-scholarships li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.journey-scholarships p {
  margin: 4px 0 8px;
  font-size: var(--text-md);
}

/* Saved-list cell: card + editable application status underneath. */
.saved-cell {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Pipeline ribbon (shared by Shortlist + Dream Plan) */
.pipeline {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.pipeline__stage {
  flex: 1 1 0;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink-soft);
}
.pipeline__stage.is-active {
  border-color: var(--teal-500);
  background: var(--teal-050);
}
.pipeline__stage--muted {
  opacity: 0.7;
}
a.pipeline__stage:hover {
  border-color: var(--teal-500);
}
.pipeline__num {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.pipeline__label {
  font-size: var(--text-xs);
  white-space: nowrap;
}
.saved-cell__cta {
  width: 100%;
  margin-top: 8px;
}
.compare-bar {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
}
.compare-bar__actions {
  display: flex;
  gap: 8px;
}
.compare-hint {
  margin: 0 0 12px;
  font-size: var(--text-sm);
}
.saved-compare {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
}
.saved-compare input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal-500);
}

/* ---- Redesigned Shortlist ---- */
.sl-lede {
  margin: -6px 0 16px;
}
.sl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sl-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-tab {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sl-tab.is-active {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--ink);
}
.sl-tab__n {
  font-size: var(--text-2xs);
  opacity: 0.7;
}
.sl-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.sl-sort select {
  font: inherit;
  font-size: var(--text-sm);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.sl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sl-card__cmp {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  cursor: pointer;
}
.sl-card__cmp input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal-500);
}
.sl-card__name {
  margin: 0;
  font-size: var(--text-lg);
  padding-right: 72px;
}
.sl-card__name a {
  color: var(--ink);
  text-decoration: none;
}
.sl-card__name a:hover {
  text-decoration: underline;
}
.sl-card__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.sl-card__meta--muted {
  color: var(--ink-faint);
}
.sl-cat {
  display: flex;
  gap: 6px;
  margin: 6px 0 2px;
}
.sl-cat__btn {
  flex: 1;
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 7px 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
}
.sl-cat__btn:hover {
  border-color: var(--ink-faint);
}
.sl-cat__btn.is-active {
  color: #fff;
  border-color: transparent;
}
.sl-cat__btn--reach.is-active {
  background: var(--gold-600);
}
.sl-cat__btn--target.is-active {
  background: var(--teal-600);
}
.sl-cat__btn--safety.is-active {
  background: #2a6f97;
}
.sl-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.sl-card__actions > .btn {
  flex: 1;
}
.sl-more {
  position: relative;
  flex: 0 0 auto;
}
.sl-more__btn {
  list-style: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.sl-more__btn::-webkit-details-marker {
  display: none;
}
.sl-more[open] .sl-more__btn {
  border-color: var(--teal-500);
  color: var(--teal-600);
}
.sl-more__panel {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 6;
  width: 224px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sl-more__panel a {
  color: var(--teal-600);
  text-decoration: none;
  font-size: var(--text-sm);
}
.sl-note-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}
.sl-note {
  font: inherit;
  font-size: var(--text-sm);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.sl-remove {
  color: var(--danger);
  text-align: left;
  font-size: var(--text-sm);
}
.sl-allmoved {
  text-align: left;
}
.btn--ghost-light:focus-visible,
.sl-tab:focus-visible,
.sl-cat__btn:focus-visible,
.sl-more__btn:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}
.saved-cell__controls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.saved-priority {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
}
.saved-reason {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
@media (max-width: 420px) {
  .saved-cell__controls {
    flex-direction: column;
  }
}
.saved-cell__open {
  display: inline-block;
  margin-top: 6px;
  align-self: flex-start;
}
.app-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--text-md);
}
.app-status__label {
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
.app-status__select {
  flex: 1;
  min-width: 0;
  padding: 8px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: var(--text-md);
  color: var(--ink);
}
.app-status__select:disabled {
  opacity: 0.6;
}

/* ---- Dream Plan ---- */
.dream-statement {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
}
.dream-statement strong {
  color: var(--ink);
}
.dream-form {
  margin-top: 16px;
}

.next-best {
  border: 1px solid var(--teal-500);
  background: linear-gradient(180deg, var(--teal-050), var(--surface));
  margin-top: 16px;
}
.next-best__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--teal-600);
}
.next-best__title {
  margin: 8px 0 0;
  font-size: var(--text-xl);
}

.readiness {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.readiness__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-weight: 600;
}
.readiness__pct {
  font-variant-numeric: tabular-nums;
  color: var(--teal-600);
  font-weight: 800;
}
.readiness__detail {
  margin: 8px 0 0;
  font-size: var(--text-md);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.doc-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.doc-check:hover {
  border-color: var(--teal-500);
}
.doc-item.is-done .doc-check {
  background: var(--teal-500);
  border-color: var(--teal-500);
}
.doc-body {
  flex: 1;
  min-width: 0;
}
.doc-body strong {
  display: block;
}
.doc-item.is-done .doc-body strong {
  text-decoration: line-through;
  color: var(--ink-soft);
}
.doc-body p {
  margin: 2px 0 0;
  font-size: var(--text-md);
}

/* ---- Application command center (Dream Plan) ---- */
.ov-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  text-align: center;
}
.ov-stat__num {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.ov-stat__label {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.ov-deadlines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.ov-deadline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-md);
}
.ov-deadline strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-deadline__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
}
.ov-deadline--amber .ov-deadline__dot {
  background: var(--gold-600);
}
.ov-deadline--red .ov-deadline__dot,
.ov-deadline--overdue .ov-deadline__dot {
  background: var(--danger);
}

.app-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.app-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.app-card__head::-webkit-details-marker {
  display: none;
}
.app-card__head::after {
  content: "⌄";
  color: var(--ink-faint);
  font-size: var(--text-lg);
  line-height: 1;
  margin-left: auto;
  transition: transform 0.15s;
}
.app-card[open] .app-card__head::after {
  transform: rotate(180deg);
}
.app-card__title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.app-card__title strong {
  color: var(--ink);
}
.app-card__title .muted {
  font-size: var(--text-sm);
}
.app-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.app-card__docs {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.app-card__deadline {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--teal-050);
  color: var(--teal-600);
}
.app-card__deadline--amber {
  background: var(--warning-bg);
  color: var(--gold-600);
}
.app-card__deadline--red,
.app-card__deadline--overdue {
  background: var(--danger-bg);
  color: var(--danger);
}
.app-card__body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line);
}
.app-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.app-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.app-field:first-child {
  grid-column: 1 / -1;
}
.doc-item--app {
  align-items: center;
}
.doc-item--app .doc-body {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.doc-item--app .doc-body strong {
  display: inline;
}
.doc-level {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
}
.doc-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.doc-remove:hover {
  color: var(--danger);
  background: var(--danger-bg);
}
.app-portal {
  display: inline-block;
  margin: 0 0 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal-600);
}
.app-hint {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.app-hint__icon {
  flex: 0 0 auto;
  color: var(--teal-600);
  display: flex;
  padding-top: 1px;
}
.app-hint__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.app-hint__label {
  font-weight: 600;
  color: var(--ink);
}
.app-hint__body strong {
  color: var(--ink);
}

/* ---- Scholarships & funding ---- */
.funding-line {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--teal-050);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.funding-line strong {
  color: var(--ink);
}
.sch-group + .sch-group {
  margin-top: 6px;
}
.sch-group__title {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sch-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sch-item__head strong {
  min-width: 0;
}
.sch-status {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
}
.sch-covers {
  font-size: var(--text-sm);
  margin: 4px 0 0;
}
.sch-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.sch-deadline,
.doc-expiry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
}
.sch-deadline input,
.doc-expiry input {
  font-size: var(--text-xs);
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.doc-expiry {
  margin-top: 6px;
}

/* Overview folded-in readiness + clickable deadlines + cost */
.ov-readiness {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.ov-ready {
  flex: 1;
  min-width: 140px;
}
.ov-ready__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}
a.ov-deadline {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.ov-deadline:hover strong {
  text-decoration: underline;
}
.app-card__cost {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
}
.app-card__cost.is-over {
  background: var(--danger-bg);
  color: var(--danger);
}
.app-funding {
  font-size: var(--text-sm);
  margin: 0 0 12px;
}
.app-funding a {
  color: var(--teal-600);
}
.app-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.app-notes textarea {
  resize: vertical;
}
.doc-expiry-badge {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}
.doc-expiry-badge--soon {
  background: var(--warning-bg);
  color: var(--gold-600);
}
.doc-expiry-badge--expired {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Action plan */
.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-item__link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.action-item--high .action-item__link {
  border-left-color: var(--danger);
}
.action-item--med .action-item__link {
  border-left-color: var(--teal-500);
}
.action-item__link:hover {
  background: var(--bg);
}
.action-item__label {
  font-weight: 600;
}
.action-item__detail {
  font-size: var(--text-sm);
}

/* Agenda */
.agenda-month + .agenda-month {
  margin-top: 14px;
}
.agenda-month__title {
  margin: 0 0 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}
.agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agenda-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.agenda-item a:hover {
  background: var(--bg);
}
.agenda-item__date {
  flex: 0 0 auto;
  width: 56px;
  font-weight: 600;
  font-size: var(--text-sm);
}
.agenda-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}
.agenda-item__left {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.agenda-item__left.is-soon {
  color: var(--gold-600);
  font-weight: 600;
}
.agenda-item__left.is-overdue {
  color: var(--danger);
  font-weight: 600;
}

/* Costs & budget */
.cost-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cost-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cost-item__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.cost-item__name:hover {
  text-decoration: underline;
}
.cost-item__range {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.cost-item__gap {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}
.cost-item__gap.is-over {
  background: var(--danger-bg);
  color: var(--danger);
}
.cost-item__gap.is-ok {
  background: var(--teal-050);
  color: var(--teal-600);
}
.cmp--apps th[scope="row"] a {
  color: var(--teal-600);
  text-decoration: none;
}
.cmp-apps__sub {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: 1px;
}
.doc-listed {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--teal-600);
  background: var(--teal-050);
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- Phase 3: mobile + a11y for the new Dream Plan sections ---- */
@media (max-width: 560px) {
  /* Compare table → stacked cards (label/value rows), no horizontal scroll. */
  .cmp--apps thead {
    display: none;
  }
  .cmp--apps,
  .cmp--apps tbody,
  .cmp--apps tr,
  .cmp--apps th,
  .cmp--apps td {
    display: block;
  }
  .cmp--apps tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .cmp--apps th[scope="row"] {
    padding: 0 0 6px;
    border: 0;
  }
  .cmp--apps td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border: 0;
    font-size: var(--text-sm);
  }
  .cmp--apps td::before {
    content: attr(data-label);
    color: var(--ink-faint);
    font-weight: 600;
  }
  /* Comfortable touch targets on the dense application controls. */
  .doc-check {
    width: 30px;
    height: 30px;
  }
  .doc-level,
  .sch-status,
  .app-card__body .onb-input {
    min-height: 40px;
  }
  .agenda-item a {
    flex-wrap: wrap;
  }
}
.app-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.app-add .onb-input {
  flex: 1;
  min-width: 0;
}
.app-add .btn {
  flex: 0 0 auto;
}
@media (max-width: 520px) {
  .ov-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .app-fields {
    grid-template-columns: 1fr;
  }
}

/* Timeline (study-abroad roadmap) — vertical stepper with a connector line. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline__stage {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 20px 0;
}
.timeline__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline__stage.is-done:not(:last-child)::before {
  background: var(--teal-500);
}
.timeline__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  z-index: 1;
}
.timeline__stage.is-done .timeline__dot {
  background: var(--teal-500);
  border-color: var(--teal-500);
}
.timeline__stage.is-next .timeline__dot {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 4px var(--teal-050);
}
.timeline__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.timeline__label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.timeline__stage:not(.is-done):not(.is-next) .timeline__label {
  color: var(--ink-soft);
  font-weight: 500;
}
.timeline__hint {
  margin: 4px 0 0;
  font-size: var(--text-md);
}
.timeline__stage .btn {
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .journey-action {
    flex-direction: column;
    align-items: stretch;
  }
  .journey-action .btn {
    width: 100%;
  }
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0));
  background: var(--navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: var(--text-base);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 100;
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.err {
  background: var(--danger);
}

/* ---------- Desktop ---------- */
@media (min-width: 720px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .filters {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) {
  body {
    padding-bottom: 0;
  }
  .topbar__inner {
    height: 62px;
  }
  .brand__mark {
    width: 30px;
    height: 30px;
  }
  .brand__name {
    font-size: var(--text-2xl);
  }
  .brand__tag {
    display: block;
  }
  .topnav {
    display: flex;
  }
  .tabbar {
    display: none;
  }
  .view {
    padding: 24px 20px 40px;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero {
    padding: 32px 28px;
  }
  .hero h1 {
    font-size: var(--text-4xl);
  }
}

.topnav a.is-active {
  outline: none;
}

/* ---------- Logos (favicon-style, with initials fallback) ---------- */
.logo {
  position: relative;
  display: grid;
  place-items: center;
  background: #fff;
  /* The chip is always white (logos need a light ground), so the initials
     fallback must stay dark in BOTH themes — not var(--ink), which flips to
     near-white in dark and made initials invisible on the white chip. */
  color: #10233f;
  font-weight: 800;
  overflow: hidden;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}
.logo--card {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: var(--text-base);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.logo--profile {
  width: 60px;
  height: 60px;
  border-radius: 13px;
  font-size: var(--text-2xl);
  box-shadow: var(--shadow-md);
}

/* ---------- Load more / hints ---------- */
.loadmore-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0 4px;
}
.loadmore-wrap .btn {
  min-width: 220px;
}
.hint {
  font-size: var(--text-sm);
  margin: -2px 2px 12px;
}
.end-note {
  text-align: center;
  width: 100%;
  font-size: var(--text-md);
  padding: 8px 0;
}
.source-note {
  font-size: var(--text-sm);
  text-align: center;
  margin: 4px 2px 8px;
}

/* ---------- Profile cover photo ---------- */
.profile__cover--photo .profile__title h1,
.profile__cover--photo .profile__title .loc {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.photo-credit {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin: 4px 2px 12px;
  text-align: right;
}
.photo-credit a {
  color: var(--ink-faint);
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
#view:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}

/* ---------- Account extras ---------- */
.divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 20px 0 16px;
}
.btn--danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid #f2c4c9;
}
.btn--danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ---------- Server-rendered (pre-hydration) content ---------- */
.ssr {
  color: var(--ink-soft);
}
.ssr h1 {
  color: var(--ink);
  font-size: var(--text-3xl);
  margin: 12px 2px 4px;
}
.ssr .loc {
  color: var(--ink-faint);
  margin: 0 2px 12px;
  font-weight: 600;
}
.ssr dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 12px 2px;
}
.ssr dt {
  font-weight: 700;
  color: var(--ink-faint);
}
.ssr ul {
  margin: 8px 2px;
  padding-left: 20px;
}
.ssr a {
  font-weight: 600;
}

/* =====================================================================
   Landing page (public/landing.html) — shares every color/button/shadow
   variable with the app so the transition in feels like one product.
   ===================================================================== */

.lp-body {
  padding-bottom: 0;
}
.lp-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header nav (Login / Sign up in place of the app's Discover/Saved/Account) */
.lp-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-nav__link {
  color: #cdd7e6;
  font-weight: 600;
  font-size: var(--text-base);
  padding: 8px 12px;
}
.lp-nav__link:hover {
  color: #fff;
}

/* Hero */
.lp-hero {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: 48px 20px 40px;
  text-align: center;
}
.lp-hero .hero__tagline {
  color: var(--gold-500);
}
.lp-hero__title {
  color: #fff;
  margin: 8px 0 16px;
  font-size: var(--text-5xl);
  line-height: 1.15;
  font-weight: 800;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.lp-hero__title .accent {
  color: var(--gold-500);
}
.lp-hero__sub {
  color: #c7d2e2;
  font-size: var(--text-lg);
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.lp-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
}
.lp-cta {
  padding: 16px 24px;
  font-size: var(--text-lg);
}
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.lp-checklist {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  color: #e6ecf5;
  font-size: var(--text-md);
  font-weight: 600;
}
.lp-checklist--dark {
  align-items: flex-start;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Stats bar */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 32px 20px;
  text-align: center;
}
.lp-stat__n {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp-stat__l {
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-weight: 600;
  margin-top: 2px;
}

/* Generic section rhythm */
.lp-section {
  padding: 32px 20px;
}
.lp-h2 {
  font-size: var(--text-3xl);
  margin: 0 0 8px;
  color: var(--ink);
  text-align: center;
}
.lp-lede {
  color: var(--ink-soft);
  text-align: center;
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: var(--text-lg);
}

/* How it works */
.lp-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
}
.lp-step__num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-600);
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 12px;
}
.lp-step h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
}
.lp-step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Niche spotlight */
.lp-niche {
  background: linear-gradient(135deg, var(--teal-050), #fff);
  border: 1.5px solid var(--teal-500);
  border-radius: var(--radius);
  padding: 28px 24px;
}

/* Trust */
.lp-trust {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-trust__item {
  text-align: center;
}
.lp-trust__icon {
  font-size: var(--text-4xl);
  margin-bottom: 8px;
}
.lp-trust__item h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
}
.lp-trust__item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.5;
}

/* Final CTA band */
.lp-final-cta {
  background: var(--navy-900);
  padding: 48px 20px;
}

/* Footer */
.lp-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 28px 20px;
}
.lp-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}
.lp-footer .brand__mark {
  width: 22px;
  height: 22px;
}
.lp-footer__links {
  display: flex;
  gap: 20px;
}
.lp-footer__links a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--text-md);
}
.lp-footer__links a:hover {
  color: var(--teal-600);
}
.lp-footer__copy {
  color: var(--ink-faint);
  font-size: var(--text-sm);
  margin: 0;
}

@media (min-width: 720px) {
  .lp-steps {
    flex-direction: row;
  }
  .lp-step {
    flex: 1;
  }
  .lp-trust {
    flex-direction: row;
  }
  .lp-trust__item {
    flex: 1;
  }
}

@media (min-width: 640px) {
  .lp-hero__ctas {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
  .lp-cta {
    width: auto;
  }
}

@media (min-width: 900px) {
  .lp-hero {
    padding: 72px 20px 56px;
  }
  .lp-hero__title {
    font-size: var(--text-7xl);
  }
  .lp-hero__sub {
    font-size: var(--text-xl);
  }
  .lp-section {
    padding: 56px 20px;
  }
  .lp-h2 {
    font-size: var(--text-5xl);
  }
  .lp-niche {
    display: flex;
    align-items: center;
    padding: 40px;
  }
  .lp-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* =====================================================================
   Deploy-ready overhaul: designed empty states, branded auth card,
   signup nudge, card tier badge, landing hero mockup.
   ===================================================================== */

/* Designed empty/locked/error states (replaces emoji-in-whitespace) */
.empty-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 40px 24px;
  text-align: center;
  max-width: 460px;
  margin: 24px auto;
}
.empty-card__icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-600);
  display: grid;
  place-items: center;
}
.empty-card h3 {
  margin: 0 0 8px;
  font-size: var(--text-xl);
}
.empty-card .muted {
  margin: 0 auto;
  max-width: 320px;
}
.empty-card__actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Branded auth card */
.auth-card {
  max-width: 440px;
  margin: 8px auto 0;
}
.auth-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--ink);
}
.auth-card__brand .brand__mark {
  color: var(--ink);
  width: 30px;
  height: 30px;
}
.auth-card__name {
  font-weight: 800;
  font-size: var(--text-xl);
  font-style: italic;
  transform: skewX(-3deg);
  color: var(--ink);
}
.auth-card__tag {
  color: var(--gold-600);
  font-weight: 700;
  font-size: var(--text-3xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.auth-card__body {
  max-width: none;
}
.auth-gate-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--teal-050);
  border: 1px solid var(--teal-500);
  color: var(--teal-600);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 16px;
}
.auth-gate-note .icon {
  flex: 0 0 auto;
  margin-top: 2px;
}
/* Icons used inline with text (save buttons, rank chips, the location line)
   sit on the baseline. The empty-state icon() default is 44px and block-level,
   so it isn't affected by this. */
.btn .icon,
.chip .icon,
.profile__title .loc .icon,
.verify-flag .icon {
  vertical-align: -0.15em;
}
.auth-fineprint {
  text-align: center;
  margin: 12px 0 0;
  font-size: var(--text-sm);
}

/* Anonymous-visitor signup nudge on public profile pages */
.signup-nudge {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #dbe5f1;
  border-radius: var(--radius);
  padding: 16px 16px;
  margin-bottom: 12px;
  font-size: var(--text-md);
  flex-wrap: wrap;
}
.signup-nudge strong {
  color: #fff;
}
.signup-nudge .btn {
  flex: 0 0 auto;
}

/* Curated / verified tier badges on cards */
.uni-card__tier {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold-500);
  color: var(--on-gold);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
}
.uni-card__tier--verified {
  background: var(--teal-500);
  color: var(--on-brand);
}
.uni-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Landing hero: two-column with product mockup */
.lp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  text-align: center;
}
.lp-hero__copy .hero__tagline {
  justify-content: center;
  display: flex;
}
.lp-mock {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.lp-mock__window {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  width: min(360px, 100%);
  text-align: left;
  transform: rotate(-1.5deg);
}
/* The rotated mockup's corners poke past the hero edge — clip rather than
   letting them widen the page (mobile horizontal-scroll bug). */
.lp-hero {
  overflow: hidden;
}
.lp-body {
  overflow-x: hidden;
}
.lp-mock__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-muted);
  padding: 8px 12px;
}
.lp-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d3dae4;
}
.lp-mock__pill {
  margin-left: 8px;
  background: var(--teal-050);
  color: var(--teal-600);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mock__card {
  border-top: 1px solid var(--line);
}
.lp-mock__cover {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 12px;
}
.lp-mock__cover span {
  background: rgba(11, 31, 58, 0.72);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.lp-mock__body {
  padding: 12px 12px 12px;
}
.lp-mock__name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--ink);
}
.lp-mock__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.lp-mock__chips .chip {
  font-size: var(--text-2xs);
  padding: 2px 8px;
}
.lp-mock__match {
  margin-top: 8px;
  font-size: var(--text-2xs);
  color: var(--teal-600);
  background: var(--teal-050);
  border-radius: 7px;
  padding: 4px 8px;
}
.lp-trust__icon {
  color: var(--teal-600);
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

@media (min-width: 900px) {
  .lp-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    text-align: left;
  }
  .lp-hero__copy .hero__tagline {
    justify-content: flex-start;
  }
  .lp-hero__grid .lp-hero__sub {
    margin-left: 0;
  }
  .lp-hero__grid .lp-hero__ctas {
    justify-content: flex-start;
    margin-left: 0;
  }
  .lp-hero__grid .lp-checklist {
    align-items: flex-start;
  }
}

/* Card cover: subtle placeholder glyph when no real photo is cached yet,
   so the flat gradient reads as a deliberate design choice, not a bug. */
.uni-card__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}
.uni-card__cover {
  position: relative;
}

/* =====================================================================
   Landing page: motion & distinctive visual treatment.
   Respects prefers-reduced-motion throughout — see the block at the end.
   ===================================================================== */

/* Sticky header that gains depth once the page scrolls */
.lp-header {
  transition: box-shadow 0.25s ease;
}
.lp-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Animated soft gradient orbs behind the hero — gives depth instead of a
   flat navy rectangle, without any images or JS-driven canvas work. */
.lp-hero {
  position: relative;
  overflow: hidden;
}
.lp-hero__blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.lp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: blob-drift 18s ease-in-out infinite;
}
.lp-blob--1 {
  width: 340px;
  height: 340px;
  background: var(--teal-500);
  top: -80px;
  left: -60px;
  animation-delay: 0s;
}
.lp-blob--2 {
  width: 280px;
  height: 280px;
  background: var(--gold-500);
  bottom: -100px;
  right: -40px;
  animation-delay: -6s;
}
.lp-blob--3 {
  width: 220px;
  height: 220px;
  background: #3a6ea8;
  top: 40%;
  left: 60%;
  animation-delay: -12s;
}
@keyframes blob-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.08);
  }
  66% {
    transform: translate(-20px, 25px) scale(0.94);
  }
}
.lp-hero > .lp-wrap,
.lp-hero__wave {
  position: relative;
  z-index: 1;
}

/* Wave divider instead of a hard flat edge between hero and the next section */
.lp-hero__wave {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: -2px;
}

/* Floating product mockup — a gentle continuous drift so the hero doesn't
   feel like a static screenshot. */
.lp-mock__window {
  animation: mock-float 5s ease-in-out infinite;
}
@keyframes mock-float {
  0%,
  100% {
    transform: rotate(-1.5deg) translateY(0);
  }
  50% {
    transform: rotate(-1.5deg) translateY(-10px);
  }
}

/* Scroll-reveal: fade + rise as sections enter the viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.lp-steps [data-reveal]:nth-child(2) {
  transition-delay: 0.08s;
}
.lp-steps [data-reveal]:nth-child(3) {
  transition-delay: 0.16s;
}
.lp-trust [data-reveal]:nth-child(2) {
  transition-delay: 0.08s;
}
.lp-trust [data-reveal]:nth-child(3) {
  transition-delay: 0.16s;
}

.lp-cta {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.lp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .lp-blob,
  .lp-mock__window {
    animation: none !important;
  }
  [data-reveal] {
    transition: none !important;
  }
  .lp-cta:hover {
    transform: none;
  }
}

/* ---------- Landing: mission band ---------- */
.lp-mission {
  background: var(--navy-800);
  padding: 56px 20px;
  text-align: center;
}
.lp-mission__kicker {
  color: var(--gold-500);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.lp-mission__quote {
  color: #fff;
  font-size: var(--text-xl);
  line-height: 1.75;
  font-style: italic;
  max-width: 760px;
  margin: 0 auto;
}
.lp-mission__by {
  color: #c7d2e2;
  font-weight: 600;
  font-size: var(--text-md);
  margin: 20px 0 0;
}

/* ---------- Landing: university contact form ---------- */
.lp-uni-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 680px;
  margin-top: 20px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line, #e4e8ef);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(11, 31, 58, 0.05);
}
.lp-uni-form__wide {
  grid-column: 1 / -1;
}
.lp-uni-form textarea {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #d6dce6;
  border-radius: 10px;
  font: inherit;
  color: inherit;
  resize: vertical;
}
.lp-uni-form textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.lp-uni-form__err {
  color: #d64550;
  font-size: var(--text-md);
  margin: 8px 0 0;
}
.lp-uni-form__done {
  max-width: 680px;
  margin-top: 20px;
  background: var(--teal-050);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 16px;
  padding: 24px;
}
.lp-uni-form__done h3 {
  margin: 0 0 8px;
}
.lp-uni-form__done p {
  margin: 0;
  color: var(--ink);
}
@media (max-width: 560px) {
  .lp-uni-form {
    grid-template-columns: 1fr;
  }
}

/* Honeypot: off-screen, not display:none (some bots skip hidden inputs
   entirely; off-screen keeps it in the DOM for the ones that fill everything). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Public-discover additions ---------- */
/* Slim signup strip above the grid for logged-out visitors — a banner, not a hero. */
.signup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: var(--text-md);
}
.signup-banner strong {
  color: var(--gold-500);
}
.signup-banner .btn {
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .signup-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* "Claim this profile" pointer on unclaimed university pages */
.claim-cta {
  background: var(--teal-050);
  border: 1px dashed var(--teal-500);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--text-md);
  color: var(--ink);
}

/* ---------- Profile: "why this fits you" ---------- */
.fit-card {
  background: var(--teal-050);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: var(--radius);
  padding: 16px 16px;
  margin-bottom: 12px;
}
.fit-card h3 {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  color: var(--teal-600);
}
.fit-list {
  margin: 0;
  padding-left: 20px;
}
.fit-list li {
  margin: 2px 0;
  color: var(--ink);
  font-size: var(--text-base);
}

/* ---------- Matching: onboarding wizard + chip selects ---------- */
.onb {
  max-width: 560px;
  margin: 0 auto;
}
.onb-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.onb-progress span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.onb-progress span.on {
  background: var(--teal-500);
}
.onb-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.onb-input {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  color: var(--ink);
  background: var(--surface);
}
.onb-input:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-050);
}
.onb-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.onb-nav .btn {
  flex: 1;
}

.chip-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-select .pick {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}
.chip-select .pick:hover {
  border-color: var(--teal-500);
}
.chip-select .pick.is-on {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
}

.fit-sentence {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
}
.quick-facts {
  margin: 0 0 12px;
  font-size: var(--text-base);
}

/* ---------- For-universities: pricing + testimonials ---------- */
.lp-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lp-pricing__card {
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-pricing__card--pilot {
  background: var(--navy-900);
  border-color: var(--gold-500);
}
.lp-pricing__tag {
  color: var(--gold-500);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.lp-pricing__price {
  font-size: var(--text-5xl);
  font-weight: 800;
  margin: 0 0 4px;
  color: #fff;
}
.lp-pricing__price span {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #c7d2e2;
}
.lp-pricing .muted {
  color: #a9b6ca;
}
.lp-pricing__card .lp-checklist--dark li {
  color: #dbe4f0;
}
@media (max-width: 640px) {
  .lp-pricing {
    grid-template-columns: 1fr;
  }
}

.lp-testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.lp-testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.lp-testimonial--empty {
  border-style: dashed;
  text-align: center;
}
.lp-testimonial__quote {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--ink);
  margin: 0 0 8px;
}
.lp-testimonial__by {
  color: var(--ink-faint);
  font-size: var(--text-md);
  margin: 0;
}

/* ---------- Unverified profile: honest register-source notice ---------- */
/* Replaces the old "Check official site" pseudo-answer in the tuition row. */
.unverified-note {
  background: #fdf7e6;
  border: 1px solid rgba(233, 185, 73, 0.45);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink);
}
.unverified-note strong {
  display: block;
  margin-bottom: 2px;
}

/* ---------- For-universities: data-handling (GDPR) card ---------- */
.lp-datacard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.lp-datacard p {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.6;
}
.lp-datacard ul {
  margin: 0;
  padding-left: 20px;
}
.lp-datacard li {
  margin: 8px 0;
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.55;
}
.lp-datacard li strong {
  color: var(--ink);
}

/* ---------- Discover: numbered pagination ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0 8px;
}
.pager__btn {
  min-width: 40px;
  /* 12px, not the 8px the grid pass rounded 9px down to: these are the smallest
     tap targets in the app and snapping down took them from 36px to 34px tall.
     The next step up puts them back above where they started. */
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}
.pager__btn:hover:not(:disabled):not(.is-current) {
  border-color: var(--teal-500);
  color: var(--teal-600);
}
.pager__btn.is-current {
  background: var(--teal-500);
  border-color: var(--teal-500);
  color: #fff;
  cursor: default;
}
.pager__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager__gap {
  color: var(--ink-faint);
  padding: 0 2px;
}
@media (max-width: 480px) {
  .pager__btn {
    min-width: 36px;
    /* Vertical padding held at 12px on phones too — this is the narrowest
       breakpoint and the smallest control, so it's the last place to shave
       height off a tap target. Only the horizontal padding tightens. */
    padding: 12px 8px;
    font-size: var(--text-md);
  }
}

/* =====================================================================
   Motion — app surfaces
   Deliberately at the end of the file: the reduced-motion overrides below
   must come after the rules they switch off, and the existing block sits
   up in the landing-page section.

   Each of these earns its place by explaining something. Decorative
   movement is what makes an interface feel cheap, not premium.
   ===================================================================== */

/* Readiness and progress bars grow from zero on render. `.progress__bar`
   already carried a width transition, but it never fired: paint() replaces the
   node, and a freshly inserted element renders at its final width — CSS
   transitions don't run on first paint. Animating on mount is what actually
   shows the change after ticking a document. transform, not width, so it
   composites instead of triggering layout on every frame. */
@keyframes bar-grow {
  from {
    transform: scaleX(0);
  }
}
.progress__bar {
  transform-origin: left center;
  animation: bar-grow 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Saving is the action the whole product is built around, and the only
   confirmation was the label swapping. A brief pop on the icon says the tap
   registered — on the icon alone, so the button itself doesn't jump. */
@keyframes save-pop {
  50% {
    transform: scale(1.18);
  }
}
.btn--saved .icon {
  animation: save-pop 0.32s ease;
}

/* Skeletons already shimmer; content arriving with a hard swap after that is
   the jarring part. Result cards fade+rise in — staggered per card (delay set in
   loadResults) so a filter/page change visibly reshapes the list. Tokenized
   entrance; disabled under reduced-motion below. */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
}
.grid .uni-card {
  animation: fade-in-up var(--dur-3) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  /* The app's own animations were never covered — only the landing page's.
     The skeleton shimmer in particular ran for every user who asked for less
     motion, on every loading state in the product. */
  .skeleton,
  .progress__bar,
  .btn--saved .icon,
  .grid .uni-card {
    animation: none !important;
  }
  .btn:active,
  .uni-card:hover {
    transform: none;
  }
}

/* ---------- Compare ----------
   A comparison table is the one place in this app where content legitimately
   exceeds the viewport, so it scrolls inside its own container rather than
   letting the page scroll sideways. The attribute column is sticky: without it
   you scroll to the fourth university and no longer know which row you're on. */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cmp {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-md);
}
.cmp th,
.cmp td {
  padding: 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp thead th {
  font-size: var(--text-base);
  color: var(--ink);
  border-bottom: 2px solid var(--line);
}
.cmp tbody th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}
/* Sticky attribute column — the row label has to survive horizontal scrolling. */
.cmp th:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 148px;
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}
.cmp td {
  font-variant-numeric: tabular-nums;
}
/* A gap must never read as zero or free. */
.cmp__unknown {
  color: var(--ink-faint);
  font-style: italic;
}
.cmp__est {
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cmp__note {
  margin: 0 2px 12px;
}
.cmp__ok {
  color: var(--success);
  font-weight: 700;
}

/* ---------- "What fits you?" quick-match (anonymous) ----------
   The on-ramp to personalized matching without an account. Sits between the
   hero and the filters — the first thing a first-time visitor can act on. */
.quickmatch {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.quickmatch__eyebrow {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.quickmatch__lead {
  margin: 4px 0 12px;
  font-size: var(--text-md);
  color: var(--ink-soft);
}
.quickmatch__form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.quickmatch__form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-md);
  color: var(--ink);
}
.quickmatch__form .btn {
  white-space: nowrap;
}
/* Active state: a compact summary + the account-save CTA. */
.quickmatch--active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.quickmatch__body {
  min-width: 0;
}
.quickmatch__summary {
  margin: 2px 0 0;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quickmatch__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.quickmatch__eyebrow .icon,
.match-why .icon {
  vertical-align: -0.15em;
  color: var(--teal-600);
}
@media (max-width: 560px) {
  /* Stack the three inputs so each is full-width and tappable on a phone. */
  .quickmatch__form {
    grid-template-columns: 1fr;
  }
  .quickmatch--active {
    flex-direction: column;
    align-items: stretch;
  }
  .quickmatch__actions {
    justify-content: space-between;
  }
}

/* ---- Theme segmented control (Account → Appearance) --------------------- */
.theme-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.theme-seg__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.theme-seg__opt svg {
  flex: 0 0 auto;
}
.theme-seg__opt:hover {
  color: var(--ink);
}
.theme-seg__opt.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.theme-seg__opt:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ---- Header theme toggle (visible on every page, desktop + mobile) ------ */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}
/* Show the icon for the theme you'd switch TO: moon in light, sun in dark. */
.theme-toggle__sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle__moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle__sun {
  display: block;
}

/* ---- Mobile touch targets --------------------------------------------------
   On phones, tappable CONTROLS reach ~44px so they're comfortable to hit.
   Desktop density is unchanged; inline text links inside content are left
   alone (their line spacing already gives a usable target). */
@media (max-width: 560px) {
  .btn {
    min-height: 44px;
  }
  .theme-toggle {
    width: 44px;
    height: 44px;
  }
  .niche-btn,
  .pager__btn {
    min-height: 44px;
  }
  .doc-check {
    width: 40px;
    height: 40px;
  }
  /* Inline date inputs (document "valid until", scholarship deadline) were only
     ~24px tall — too small to tap. Give them a real field height on phones. */
  .doc-expiry input,
  .sch-deadline input {
    min-height: 40px;
    padding: 6px 10px;
    font-size: var(--text-sm);
  }
}