/* ═══════════════════════════════════════════════════════════════
 * Altiora styles — Confident Editorial design language
 * Tokens are in tokens.css (loaded first).
 * ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
 * CONFIDENT EDITORIAL PROPAGATION (app-wide)
 * Repoint the base palette + type tokens to the --ce-* language so
 * every component in the app adopts it from one place. Only app.html
 * loads styles.css, so the marketing page (index.html) is unaffected.
 * ─────────────────────────────────────────────────────────────── */
:root {
  /* Palette → warm Confident Editorial */
  --color-bg:             var(--ce-bg);
  --color-surface:        var(--ce-surface);
  --color-border:         var(--ce-hairline-color);
  --color-text-primary:   var(--ce-ink);
  --color-text-secondary: #57524C;        /* warm muted ink, AA on warm bg */
  --color-text-tertiary:  #877F76;        /* warm faint ink */

  /* Type roles → Bricolage (display) / Hanken (body) / Space Mono (functional) */
  --font-display: var(--ce-font-display);
  --font-sans:    var(--ce-font-body);
  --font-mono:    var(--ce-font-mono);
  --font:         var(--ce-font-body);

  /* Sharp editorial corners for cards/containers (pills keep --radius-full) */
  --radius-sm: 2px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Match colours → cleaned Confident Editorial status colours (drives the
     summary bar, progress segments, and any match-coloured text app-wide). */
  --color-match-strong:   var(--ce-status-strong);
  --color-match-possible: var(--ce-status-possible);
  --color-match-reach:    var(--ce-status-reach);
  --color-match-grade:    var(--ce-status-grade);

  /* Candy category accents are retired from the app UI — fold every category
     colour into ink, and every category tint into transparent, so all the
     per-category rules (cat badges, planner cards, interest chips, active
     states) resolve to a single neutral ink/yellow language with no stray
     coral/lavender/sage/blue. (Deliberate category accents can return later
     via the dedicated --ce-cat-* tokens.) */
  --color-cat-medicine: var(--ce-ink);     --color-cat-medicine-bg: transparent;
  --color-cat-cs: var(--ce-ink);           --color-cat-cs-bg: transparent;
  --color-cat-engineering: var(--ce-ink);  --color-cat-engineering-bg: transparent;
  --color-cat-economics: var(--ce-ink);    --color-cat-economics-bg: transparent;
  --color-cat-law: var(--ce-ink);          --color-cat-law-bg: transparent;
  --color-cat-business: var(--ce-ink);     --color-cat-business-bg: transparent;
  --color-cat-sciences: var(--ce-ink);     --color-cat-sciences-bg: transparent;
  --color-cat-mathematics: var(--ce-ink);  --color-cat-mathematics-bg: transparent;
  --color-cat-psychology: var(--ce-ink);   --color-cat-psychology-bg: transparent;
  --color-cat-architecture: var(--ce-ink); --color-cat-architecture-bg: transparent;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html  { scroll-behavior: smooth; }
body  {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--ce-bg);   /* single warm off-white canvas for the whole app */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { color: var(--color-text-primary); line-height: 1.1; font-family: var(--font-display); }
h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; }
p  { color: var(--color-text-secondary); }
strong { color: var(--color-text-primary); }

a { color: var(--color-cat-cs); text-decoration: none; }
a:hover { opacity: .8; }

.hidden         { display: none !important; }
.text-secondary { color: var(--color-text-secondary); }
.mt-8           { margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════
 * Navigation
 * ═══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,244,239,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--pad);
}
.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  height: 54px;
  display: flex;
  align-items: center;
}
/* In-app back control — mirrors the browser Back button, shown only when
   there's an app entry to return to. CE mono, hairline, quiet. */
.nav__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--space-4);
  padding: 6px 12px;
  border: var(--ce-hairline, 1px solid var(--color-border));
  border-radius: var(--ce-radius-pill, 999px);
  background: transparent;
  color: var(--ce-ink, var(--color-text-primary));
  font-family: var(--ce-font-mono, inherit);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav__back:hover { background: var(--ce-accent, var(--color-cat-cs-bg)); border-color: var(--ce-ink, var(--color-text-primary)); }
.nav__back:focus-visible { outline: 2px solid var(--ce-ink, var(--color-text-primary)); outline-offset: 2px; }
.nav__back.hidden { display: none; }

/* The wordmark is the home control — a reset <button>, modest nav scale. */
.nav__brand   {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.2; gap: 1px;
  padding: 2px 0; border: none; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
  border-radius: 3px;
  text-decoration: none;   /* the wordmark is now a plain <a> */
}
/* One brand, one logo: identical to the landing page's wordmark. */
.nav__logo    {
  font-family: var(--ce-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-base);
}
/* Subtle "it's clickable" affordance — the lockup's butter bar stretches
 * into an underline beneath the wordmark on hover/focus (SVG content
 * ignores text-decoration; rect geometry is animatable CSS). */
.nav__logo svg rect { transition: width var(--t-base); }
.nav__brand:hover .nav__logo svg rect,
.nav__brand:focus-visible .nav__logo svg rect { width: 360px; }
.nav__brand:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 3px; }
.nav__brand:focus:not(:focus-visible) { outline: none; }
.nav__tagline {
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════════
 * Main layout
 * ═══════════════════════════════════════════════════════════════ */
main     { flex: 1; padding: var(--pad); }
.content { max-width: var(--max-w); margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
 * App-page hero (app.html only)
 * ═══════════════════════════════════════════════════════════════ */
.hero {
  padding: var(--space-12) 0 var(--space-10);
  text-align: center;
}
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-cat-cs);
  background: var(--color-cat-cs-bg);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.hero h1  { margin-bottom: var(--space-3); }
.hero p   {
  font-size: var(--text-base);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * Stage selection — full-screen entry (onboarding)
 * ═══════════════════════════════════════════════════════════════ */
.stage-select {
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
  animation: panelIn .2s ease both;
}
.stage-select__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.6px;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.stage-select__sub {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto var(--space-10);
  line-height: 1.65;
}
.stage-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
}
.stage-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.stage-card:hover {
  border-color: var(--color-text-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.stage-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.stage-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--color-text-primary);
  line-height: 1.25;
}
.stage-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
 * Stage bar — indicator + tool sub-nav (replaces the old tab bar)
 * ═══════════════════════════════════════════════════════════════ */
.stage-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.stage-bar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.stage-bar__spacer { flex: 1 1 auto; }
.stage-bar__indicator { position: relative; }
/* The right-hand side of the toolbar: the profile pill and the three
   collection pills. Each inner cluster is ONE flex item, so when space
   runs out a whole cluster drops to the next line together — a pill can
   never be orphaned away from its group. */
.stage-bar__me {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-left: auto;
}
.stage-bar__collections {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-3);
}
/* Inside a cluster the pills' own right-push is the cluster's job. */
.stage-bar__collections .shortlist-link { margin-left: 0; }
/* Phone: stack the toolbar as left-aligned cluster rows, and tighten the
   collection pills so all three fit side by side at 375px. */
@media (max-width: 560px) {
  .stage-bar__spacer { display: none; }
  .stage-bar__me { margin-left: 0; width: 100%; justify-content: flex-start; }
  .stage-bar__collections { gap: 4px; }
  .stage-bar__collections .shortlist-link {
    padding: 5px 8px;
    font-size: 11px;
  }
  /* Emoji icons are aria-hidden decoration; at phone width the names
     alone fit three-across without cramping. */
  .stage-bar__collections .shortlist-link__icon { display: none; }
  /* The fields pill's caret is redundant at phone width — the pill itself
     is obviously tappable. Cosmetic only; the menu behaviour is untouched. */
  .stage-bar__collections .stage-indicator__caret { display: none; }
}

/* ── Journey bar: the four stages, always visible, CE-voiced ────── */
.journey-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.journey-bar__slot { display: inline-flex; align-items: center; gap: var(--space-2); }
.journey-bar__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  background: transparent;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.journey-bar__step:hover { border-color: var(--ce-ink); color: var(--ce-ink); }
.journey-bar__step--current {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}
.journey-bar__step--done    { color: var(--ce-status-strong); border-color: rgba(30,122,64,.45); }
.journey-bar__step--skipped { color: var(--ce-ink-30); }
.journey-bar__step--todo    { color: var(--ce-ink-30); }
.journey-bar__sep { color: var(--ce-ink-30); font-family: var(--ce-font-mono); font-size: 11px; }
.journey-bar__num { display: none; }
.journey-bar__next {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ce-accent);
  color: var(--ce-ink);
  border: none;
  border-radius: var(--ce-radius-pill);
  padding: 4px 10px;
  cursor: pointer;
  animation: journey-next-pulse 2.4s ease-in-out infinite;
}
@keyframes journey-next-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .journey-bar__next { animation: none; } }

/* 375px: numbered steps, label only on the current one */
@media (max-width: 560px) {
  .journey-bar { gap: 6px; }
  .journey-bar__sep { display: none; }
  .journey-bar__step { padding: 4px 9px; }
  .journey-bar__num { display: inline; }
  .journey-bar__step:not(.journey-bar__step--current) .journey-bar__label { display: none; }
  .journey-bar__step--current .journey-bar__num { display: none; }
}

/* ── Profile popover: system + year in one place ────────────────── */
.profile-menu { min-width: 240px; }
/* The pill sits right-of-centre, so a left-anchored popover runs off a
   phone screen (pre-existing: 393px right edge on a 375px viewport).
   Anchor it to the pill's right edge on narrow screens instead. */
@media (max-width: 560px) {
  .stage-bar__indicator .profile-menu { left: auto; right: 0; }
}
.profile-menu__label {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  padding: var(--space-2) 12px 2px;
}
/* Says plainly what backup is: a file on the device, not a service. */
.profile-menu__note {
  margin: 2px 0 var(--space-2);
  padding: 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ce-ink-30);
  max-width: 34ch;
}

.stage-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.stage-indicator:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.stage-indicator__label strong { color: var(--color-text-primary); font-weight: 600; }
.stage-indicator__caret { font-size: 10px; opacity: .7; }

.stage-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 230px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
}
.stage-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.stage-menu__item:hover { background: var(--color-cat-cs-bg); color: var(--color-text-primary); }
.stage-menu__item--current {
  color: var(--color-text-primary);
  font-weight: 600;
}
.stage-menu__item--current::after { content: ' ✓'; color: var(--color-match-strong); }

/* Tool sub-nav: primary front and centre, secondary as lighter links */
.stage-tool-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.stage-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.stage-tool:hover { color: var(--color-text-primary); }
.stage-tool--primary { font-weight: 600; }
.stage-tool--active {
  background: var(--color-text-primary);
  color: var(--color-surface);
}
.stage-tool--active:hover { color: var(--color-surface); }

/* "My Shortlist (n)" link — pushed to the right of the stage bar */
.shortlist-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.shortlist-link:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.shortlist-link--active {
  background: var(--color-text-primary);
  color: var(--color-surface);
  border-color: var(--color-text-primary);
}
.shortlist-link__icon { font-size: 13px; }

/* "My fields (n)" — persistent kept-fields indicator + popover */
.fields-nav { position: relative; margin-left: auto; }
.fields-nav .shortlist-link { margin-left: 0; }
/* The fields-nav's auto margin pushes the pair right; the shortlist then sits
   directly beside it (drop its own auto so the space isn't split between them). */
.fields-nav + .shortlist-link { margin-left: 0; }
.fields-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  width: 264px;
  max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
}
.fields-menu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ce-ink-60);
  margin: 2px 4px var(--space-2);
}
.fields-menu__cap { color: var(--ce-ink-30); }
.fields-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fields-menu__item { display: flex; align-items: center; gap: var(--space-2); }
.fields-menu__name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.fields-menu__name:hover { background: var(--ce-accent-tint, var(--color-cat-cs-bg)); }
.fields-menu__remove {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ce-ink-60);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.fields-menu__remove:hover { background: var(--ce-coral-tint); color: var(--ce-status-reach); }
.fields-menu__empty {
  margin: 0;
  padding: 4px 4px 6px;
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ce-ink-60);
}

/* ═══════════════════════════════════════════════════════════════
 * Save / bookmark button on course cards
 * ═══════════════════════════════════════════════════════════════ */
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.save-btn:hover { border-color: var(--color-match-strong); color: var(--color-match-strong); }
.save-btn__icon { display: flex; align-items: center; }
.save-btn--saved {
  border-color: var(--color-match-strong);
  color: var(--color-match-strong);
  background: var(--color-match-strong-bg, var(--color-cat-cs-bg));
}

/* ═══════════════════════════════════════════════════════════════
 * Shortlist view — insights + saved cards
 * ═══════════════════════════════════════════════════════════════ */
.shortlist-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}
.export-csv-btn {
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.export-csv-btn:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.shortlist-insights {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-8);
}
.shortlist-insights__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.1px;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}
.shortlist-insights__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.shortlist-insights__list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.shortlist-insights__list strong { color: var(--color-text-primary); }
.shortlist-insight-label { color: var(--color-text-secondary); }
.shortlist-grade-rows {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0 0 0 var(--space-3);
}
.shortlist-grade-rows li { font-size: var(--text-sm); }
/* One-country observation — a soft aside, visually quieter than the facts. */
.shortlist-insights__list li.shortlist-country-note {
  color: var(--ce-ink-60);
  font-style: italic;
  padding-top: var(--space-1);
}
.shortlist-insight-tag {
  display: inline-block;
  padding: 2px 9px;
  margin: 2px 2px 0 0;
  border-radius: var(--radius-full);
  background: var(--color-cat-cs-bg);
  color: var(--color-cat-cs);
  font-size: var(--text-xs);
  font-weight: 600;
}

.course-card--saved { border-left-color: var(--color-match-strong); }
.remove-btn {
  flex-shrink: 0;
  padding: 5px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.remove-btn:hover { border-color: var(--color-match-reach); color: var(--color-match-reach); }
.shortlist-empty { margin-top: var(--space-10); }


/* ═══════════════════════════════════════════════════════════════
 * Workspace home (returning-user landing) — the design anchor.
 * Calm, generously spaced; whitespace and type do the work, colour
 * is used sparingly. All values come from the design tokens.
 * ═══════════════════════════════════════════════════════════════ */
.home {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-12);
}

/* Header */
.home__header { margin-bottom: var(--space-12); }
.home__welcome {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -.8px;
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
.home__stage {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
  max-width: 60ch;
}
.home__stage strong { color: var(--color-text-primary); font-weight: 600; }

/* ── Next step — the hero of the page ────────────────────────────
 * Focal through size + a soft accent tint, not a heavy border. The
 * CTA sits fully inside the generous padding. */
.home-next {
  background: var(--color-cat-cs-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  margin-bottom: var(--space-12);
}
.home-next__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-cat-cs);
  margin-bottom: var(--space-3);
}
.home-next__text {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -.4px;
  margin: 0 0 var(--space-6);
  max-width: 32ch;
}
.home-next__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Primary CTA: solid ink, moderate radius — inviting, not a heavy pill */
.home-next__btn {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-base), border-color var(--t-fast), background var(--t-fast);
}
.home-next__btn:hover { border-color: var(--color-text-tertiary); }
.home-next__btn--primary {
  background: var(--color-text-primary);
  color: var(--color-surface);
  border-color: var(--color-text-primary);
}
.home-next__btn--primary:hover { opacity: .9; }

/* ── Summary cards ───────────────────────────────────────────── */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.home-card {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.home-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.2px;
  margin: 0 0 var(--space-6);
  color: var(--color-text-primary);
}
.home-card__dl { margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.home-card__dl > div { display: flex; flex-direction: column; gap: var(--space-1); }
.home-card__dl dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.home-card__dl dd { margin: 0; font-size: var(--text-base); color: var(--color-text-primary); line-height: 1.5; }
.home-card p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-6); line-height: 1.7; }
.home-card p strong { color: var(--color-text-primary); }
.home-card__muted { color: var(--color-text-tertiary); font-style: italic; }
.home-card__link {
  border: none;
  background: none;
  padding: 0;
  color: var(--color-cat-cs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.home-card__link:hover { opacity: .75; }

/* ── Quick access — light, subtle controls ───────────────────── */
.home-quick__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.home-quick__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-quick__btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.home-quick__btn:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.home-quick__btn--primary { font-weight: 600; color: var(--color-text-primary); }

/* ═══════════════════════════════════════════════════════════════
 * Start with Strengths — field-of-study cards (exploring output)
 * Each card is tinted with its category accent (set inline via
 * --field-accent / --field-accent-bg from the colour tokens).
 * ═══════════════════════════════════════════════════════════════ */
.field-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.field-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--field-accent, var(--color-border));
  border-radius: var(--radius-lg);
}
.field-card__name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--field-accent, var(--color-text-primary));
  margin: 0 0 var(--space-3);
}
.field-card__what {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}
.field-card__line {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.field-card__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}
/* Late-year explorers: how many courses the student's existing subjects open
   in this field. A quiet, honest signal — accented when the fit is real, and
   deliberately muted (never alarming) when coverage is thin. */
.field-card__coverage {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--field-accent-bg, var(--color-bg));
}
.field-card__coverage--thin {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}
.field-card__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--field-accent, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--field-accent-bg, var(--color-surface));
  color: var(--field-accent, var(--color-text-primary));
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-base);
}
.field-card__btn:hover { opacity: .82; }

/* Field-exploration context banner (top of Check Combination) */
.explore-context {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-cat-cs-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.explore-context__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.explore-context__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.explore-context__text strong { color: var(--color-text-primary); }
.explore-context__clear {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.explore-context__clear:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.explore-context__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; }
.explore-context__about {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-cat-cs);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-cat-cs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-base);
}
.explore-context__about:hover { opacity: .8; }

/* Prominent "pick a system" prompt (no saved system, e.g. from Field Overview) */
.system-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-match-possible-bg);
  border: 1px solid var(--color-match-possible);
  border-radius: var(--radius-md);
}
.system-prompt__icon {
  font-size: var(--text-lg);
  color: var(--color-match-possible);
  flex-shrink: 0;
}
.system-prompt__text {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-match-possible);
  line-height: 1.5;
}
.system-prompt__text strong { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
 * Field Overview — "What [Field] needs" orientation screen.
 * The field's category accent is passed in via --fo-accent /
 * --fo-accent-bg (set inline from the colour tokens).
 * ═══════════════════════════════════════════════════════════════ */
.fo { max-width: var(--max-w); margin: 0 auto; padding: var(--space-8) 0 var(--space-12); }
.fo__header {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.fo__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-accent, var(--color-cat-cs));
  margin-bottom: var(--space-2);
}
.fo__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.8px;
  color: var(--fo-accent, var(--color-text-primary));
  margin: 0 0 var(--space-3);
}
.fo__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.fo-align {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-match-strong);
}

.fo-section { margin-bottom: var(--space-8); }
.fo-section__head {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.fo-subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.fo-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin-bottom: var(--space-3);
}
.fo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fo-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}
.fo-chip--accent {
  background: var(--fo-accent-bg, var(--color-cat-cs-bg));
  border-color: var(--fo-accent, var(--color-cat-cs));
  color: var(--fo-accent, var(--color-cat-cs));
  font-weight: 600;
}
.fo-muted { font-size: var(--text-sm); color: var(--ce-ink-60); font-style: italic; margin: var(--space-2) 0 0; }
.fo-muted--hint { margin-top: var(--space-4); }

.fo-combos { display: flex; flex-direction: column; gap: var(--space-3); }
.fo-combo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--ce-ink);
  font-family: inherit;
}
/* Clickable combination row → Check Combination with these subjects */
.fo-combo--action { cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.fo-combo--action:hover { border-color: var(--ce-ink, var(--color-text-primary)); background: var(--ce-accent-tint, var(--color-cat-cs-bg)); }
.fo-combo--action:focus-visible { outline: 2px solid var(--ce-ink, var(--color-text-primary)); outline-offset: 2px; }
.fo-combo__subjects { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fo-combo__count { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; }
.fo-combo__go { font-family: var(--ce-font-mono); font-weight: 700; color: var(--ce-ink-60); transition: transform var(--t-fast); }
.fo-combo--action:hover .fo-combo__go { transform: translateX(2px); color: var(--ce-ink); }

.fo-expect {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
  max-width: 64ch;
}
.fo-expect--muted { color: var(--ce-ink-60); font-size: var(--text-sm); }

.fo-fork {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.fo-fork__lead {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ce-ink-60);
  margin: 0;
}
.fo-fork__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.fo-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 264px;
}
.fo-choice__hint {
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ce-ink-60);
  /* Indent to the button's own horizontal padding so the sublabel sits
     directly under the button's label, not under its outer (pill) edge. */
  padding-left: var(--space-6);
}
.fo-btn {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), opacity var(--t-base);
}
.fo-btn:hover { border-color: var(--color-text-tertiary); }
.fo-btn--primary {
  background: var(--fo-accent, var(--color-text-primary));
  border-color: var(--fo-accent, var(--color-text-primary));
  color: var(--color-surface);
}
.fo-btn--primary:hover { opacity: .9; border-color: var(--fo-accent, var(--color-text-primary)); }
.fo-back {
  border: none;
  background: none;
  padding: var(--space-2);
  color: var(--ce-ink-60);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
}
.fo-back:hover { color: var(--color-text-primary); }


@media (max-width: 640px) {
  /* Stack stage cards on mobile */
  .stage-cards { grid-template-columns: 1fr; }
  .stage-bar { flex-direction: column; align-items: flex-start; }
  .stage-tool-nav { width: 100%; overflow-x: auto; }
  .shortlist-link { margin-left: 0; }
  .fields-nav { margin-left: 0; }
  .fields-menu { left: 0; right: auto; }   /* button is left-aligned on mobile */
  /* Workspace home — tighter but still generous on mobile */
  .home { padding: var(--space-6) 0 var(--space-10); }
  .home__welcome { font-size: 2rem; }
  .home__header { margin-bottom: var(--space-10); }
  .home-next { padding: var(--space-6); margin-bottom: var(--space-10); }
  .home-next__text { font-size: 1.5rem; }
  .home-cards { grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-10); }
  .home-card { padding: var(--space-5); }
  .field-cards { grid-template-columns: 1fr; }
  .fo-subjects { grid-template-columns: 1fr; }
  .fo__title { font-size: 2rem; }
  .fo-back { margin-left: 0; }
  .stage-select__heading { font-size: 1.75rem; }
}


/* ═══════════════════════════════════════════════════════════════
 * Panels
 * ═══════════════════════════════════════════════════════════════ */
.panel { animation: panelIn .15s ease both; }
.panel-intro {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 620px;
  line-height: 1.6;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-cat-cs);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin: var(--space-4) 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
 * Controls
 * ═══════════════════════════════════════════════════════════════ */
.panel-controls      { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }
.panel-controls--row { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); }

.control-group       { display: flex; flex-direction: column; gap: var(--space-1); }
.control-group--grow { flex: 1; min-width: 200px; }

.control-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 9px 30px 9px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--t-base);
}
.select-wrap select:focus  { outline: none; border-color: var(--color-text-secondary); }
.select-wrap select:hover  { border-color: var(--color-text-tertiary); }
.select-wrap::after {
  content: '';
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition: border-color var(--t-base);
}
.search-input::placeholder { color: var(--color-text-tertiary); }
.search-input:focus {
  outline: none;
  border-color: var(--color-text-secondary);
  background: var(--color-surface);
}
.search-input:hover:not(:focus) { border-color: var(--color-text-tertiary); }

/* ═══════════════════════════════════════════════════════════════
 * Subject picker
 * ═══════════════════════════════════════════════════════════════ */
.subject-picker-section {
  margin-bottom: var(--space-6);
  animation: panelIn .15s ease both;
}
.subject-picker-header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.count-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--color-match-grade-bg);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.clear-subjects-btn {
  margin-left: auto;
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.clear-subjects-btn:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.clear-subjects-btn.hidden { display: none; }
.subject-search-bar   { margin-bottom: var(--space-3); }
.subject-filter-input {
  width: 100%; max-width: 300px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  transition: border-color var(--t-base);
}
.subject-filter-input::placeholder { color: var(--color-text-tertiary); }
.subject-filter-input:focus {
  outline: none;
  border-color: var(--color-text-secondary);
}

.subject-picker {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  max-height: 244px; overflow-y: auto;
  padding: 2px 2px 12px;
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}
.subject-picker::-webkit-scrollbar { width: 3px; }
.subject-picker::-webkit-scrollbar-track { background: transparent; }
.subject-picker::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

/* Subject chip — white/black toggle per spec */
.subject-chip {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  user-select: none; white-space: nowrap;
}
.subject-chip input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.subject-chip:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.subject-chip.selected {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: #fff;
  font-weight: 600;
}

/* .chip--auto-added is set in JS for debugging but carries no extra styling —
   auto-implied chips look identical to manually selected ones. */

.auto-indicator {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 4px;
  transition: opacity var(--t-fast);
}

/* Locked chip: standard Maths is force-selected (and can't be unchecked)
   while Further Maths is active. */
.subject-chip--locked {
  cursor: default;
}
.subject-chip--locked:hover {
  border-color: var(--color-text-primary);
  color: #fff;
}

/* Informational banner: standard Maths auto-added alongside Further Maths */
.maths-warning-banner {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: #FEF9EC;
  border: 1px solid var(--color-match-possible);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.maths-warning-banner__msg {
  color: var(--color-match-possible);
  font-weight: 500;
}

/* IB: persistent "only one maths" help below the subject picker */
.ib-maths-help {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-cat-cs-bg, #F2F1EE);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.ib-maths-help--confirm {
  color: var(--color-match-strong);
  font-weight: 500;
}

.picker-hint {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.picker-hint-inline {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: 400;
}

/* Data load failure banner — replaces <main> content when scripts fail */
.data-error-banner {
  max-width: 520px;
  margin: var(--space-12, 48px) auto;
  padding: 24px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}
.data-error-banner__msg {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.data-error-banner__msg a {
  color: inherit;
  text-decoration: underline;
}
.data-error-banner__retry {
  padding: 8px 20px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.data-error-banner__retry:hover {
  background: var(--color-border);
  border-color: var(--color-text-tertiary);
}

.subject-count-warning {
  margin-bottom: var(--space-4);
  padding: 10px 14px;
  background: var(--color-match-possible-bg);
  border: 1px solid rgba(139,105,20,.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-match-possible);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
 * Category picker (interest filter)
 * ═══════════════════════════════════════════════════════════════ */
.category-picker-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.category-picker {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.category-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  line-height: 1;
}
.category-chip:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.category-chip__icon { font-size: 13px; }

/* Category chip active states — each category gets its own accent */
.category-chip[data-category="medicine"].active    { background: var(--color-cat-medicine-bg);    border-color: var(--color-cat-medicine);    color: var(--color-cat-medicine); }
.category-chip[data-category="cs"].active          { background: var(--color-cat-cs-bg);          border-color: var(--color-cat-cs);          color: var(--color-cat-cs); }
.category-chip[data-category="engineering"].active { background: var(--color-cat-engineering-bg); border-color: var(--color-cat-engineering); color: var(--color-cat-engineering); }
.category-chip[data-category="economics"].active   { background: var(--color-cat-economics-bg);   border-color: var(--color-cat-economics);   color: var(--color-cat-economics); }
.category-chip[data-category="law"].active         { background: var(--color-cat-law-bg);         border-color: var(--color-cat-law);         color: var(--color-cat-law); }
.category-chip[data-category="business"].active    { background: var(--color-cat-business-bg);    border-color: var(--color-cat-business);    color: var(--color-cat-business); }
.category-chip[data-category="sciences"].active    { background: var(--color-cat-sciences-bg);    border-color: var(--color-cat-sciences);    color: var(--color-cat-sciences); }
.category-chip[data-category="mathematics"].active { background: var(--color-cat-mathematics-bg); border-color: var(--color-cat-mathematics); color: var(--color-cat-mathematics); }
.category-chip[data-category="psychology"].active  { background: var(--color-cat-psychology-bg);  border-color: var(--color-cat-psychology);  color: var(--color-cat-psychology); }
.category-chip[data-category="architecture"].active{ background: var(--color-cat-architecture-bg);border-color: var(--color-cat-architecture);color: var(--color-cat-architecture); }

/* ═══════════════════════════════════════════════════════════════
 * Disclaimer — plain text only, no box
 * ═══════════════════════════════════════════════════════════════ */
.disclaimer-banner {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
  display: flex; align-items: baseline; gap: var(--space-1);
}
.disclaimer-banner__icon { display: none; }
.disclaimer-banner p {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════
 * Results summary — prose text
 * ═══════════════════════════════════════════════════════════════ */
.summary-bar {
  margin-bottom: var(--space-5);
  animation: panelIn .15s ease both;
}
.summary-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}
.summary-text strong { font-weight: 600; color: var(--color-text-primary); }
.summary-arrow { color: var(--color-text-tertiary); }
.summary-dot   { color: var(--color-text-tertiary); }

.summary-stat          { font-weight: 600; }
.summary-stat--green   { color: var(--color-match-strong); }
.summary-stat--amber   { color: var(--color-match-possible); }
.summary-stat--red     { color: var(--color-match-reach); }

/* Coverage honesty: the results are a census of OUR verified set, never of
   what exists. One plain mono line under the summary; no box, no border. */
.coverage-line {
  margin: var(--space-2) 0 0;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ce-ink-30);
  line-height: 1.5;
}
/* The zero-result field+country state: plain prose, not an alarm box. */
.coverage-empty {
  margin: var(--space-5) 0;
  font-size: var(--text-base);
  color: var(--ce-ink-60);
  line-height: 1.65;
  max-width: 58ch;
}
.summary-progress {
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  overflow: hidden;
  margin-top: var(--space-3);
}
.summary-seg {
  height: 100%;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.summary-seg--green { background: var(--color-match-strong); }
.summary-seg--amber { background: var(--color-match-possible); }
.summary-seg--grey  { background: var(--color-text-tertiary); }
.summary-seg--unconfirmed { background: var(--ce-ink-30); }
.summary-seg--red   { background: var(--color-match-reach); }

/* ═══════════════════════════════════════════════════════════════
 * Results section
 * ═══════════════════════════════════════════════════════════════ */
.results-section { animation: panelIn .15s ease both; }

.results-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.result-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Results prose summary line */
.results-new-summary {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.6;
}
.results-new-summary strong { font-weight: 600; color: var(--color-text-primary); }
.summary-link {
  text-decoration: none;
  font-weight: 600;
  transition: opacity var(--t-fast);
}
.summary-link:hover { opacity: .75; }
.summary-link--green { color: var(--color-match-strong); }
.summary-link--amber { color: var(--color-match-possible); }
.summary-link--grey  { color: var(--color-text-secondary); }
.summary-link--unconfirmed { color: var(--color-text-secondary); }
.summary-link--red   { color: var(--color-match-reach); }

/* ── Country filter bar ── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.filter-btn:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.filter-btn.active {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: #fff;
  font-weight: 600;
}

/* In-results search filter */
.results-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: var(--space-3) 0 var(--space-2);
}
.results-search__icon {
  position: absolute;
  left: 12px;
  font-size: var(--text-sm);
  opacity: 0.6;
  pointer-events: none;
}
.results-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px 9px 34px;
  font-size: var(--text-sm);
  color: var(--color-text-primary, inherit);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
}
.results-search__input:focus {
  outline: none;
  border-color: var(--color-accent, var(--color-text-secondary));
  box-shadow: 0 0 0 3px var(--color-accent-bg, rgba(0,0,0,0.05));
}
.results-search-empty {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  padding: var(--space-6) var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
 * Grouped results
 * ═══════════════════════════════════════════════════════════════ */
.results-groups-container { display: flex; flex-direction: column; gap: var(--space-8); }

.results-group { }

.results-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  border-bottom: 2px solid currentColor;
  position: sticky;
  top: 54px;
  z-index: 10;
  background: var(--color-bg);
}
.results-group__header--green { color: var(--color-match-strong); }
.results-group__header--amber { color: var(--color-match-possible); }
.results-group__header--red   { color: var(--color-match-reach); }
.results-group__header--grey  { color: var(--color-text-tertiary); }
.results-group__header--unconfirmed { color: var(--color-text-tertiary); }

.results-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
  gap: var(--space-3);
}

.results-group__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast);
}
.results-group__toggle:hover { color: var(--color-match-reach); }
.results-group__toggle svg { transition: transform var(--t-base); }
.results-group__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════════
 * Badges (shared)
 * ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--success { background: var(--color-match-strong-bg);   color: var(--color-match-strong); }
.badge--warning { background: var(--color-match-possible-bg); color: var(--color-match-possible); }
.badge--error   { background: var(--color-match-reach-bg);    color: var(--color-match-reach); }
.badge--grey    { background: var(--color-match-grade-bg);    color: var(--color-text-secondary); }
.badge--neutral {
  background: var(--color-match-grade-bg);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * Course cards — check mode
 * ═══════════════════════════════════════════════════════════════ */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-left-color: var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6) var(--space-4);
  animation: cardIn .25s ease both;
  animation-delay: var(--card-delay, 0s);
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: default;
}
.course-card:hover { background: var(--color-bg); border-color: var(--color-text-tertiary); }

.course-card--green { border-left-color: var(--color-match-strong); }
.course-card--amber { border-left-color: var(--color-match-possible); }
.course-card--red   { border-left-color: var(--color-match-reach); }
/* Grey = subject match but predicted grade below the typical offer. Shown in
   the main list (not collapsed) with a dashed warning border. */
.course-card--grey {
  border-style: dashed;
  border-color: var(--color-match-possible);
  border-left-color: var(--color-match-possible);
}
/* Unconfirmed = subjects fit but the grade requirement can't be compared.
   Neutral (not a warning colour) — an honest "we don't know", not "you fail". */
.course-card--unconfirmed {
  border-style: dashed;
  border-color: var(--color-border);
  border-left-color: var(--color-border);
}
.card-grade-gap {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-match-possible);
  line-height: 1.5;
}
.card-grade-unconfirmed {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Field-relevance reason — why a course isn't a strong match for these
   subjects (e.g. "Engineering expects calculus and physics"). */
.card-field-core {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* US holistic-admissions context: policy + indicative admitted range */
.card-us-admit {
  margin: var(--space-2) 0 0;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-subtle, rgba(0,0,0,0.02));
}
.card-us-admit__policy {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary, var(--color-text-tertiary));
}
.card-us-admit__range {
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: 1.45;
}

/* Status line — tiny icon + label, uppercase, match colour */
.card-status {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.card-status--green { color: var(--color-match-strong); }
.card-status--amber { color: var(--color-match-possible); }
.card-status--red   { color: var(--color-match-reach); }
.card-status--grey  { color: var(--color-match-possible); }
.card-status--unconfirmed { color: var(--color-text-secondary); }
.card-status--none  { color: var(--color-text-tertiary); text-transform: none; letter-spacing: 0; font-weight: 500; }

.card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-title-group {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 0;
}
.card-flag   { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.card-titles { min-width: 0; }
.card-name   {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  letter-spacing: -.1px;
}
.card-uni {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.card-uni svg { flex-shrink: 0; opacity: .6; }
.card-tier {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 2px;
}
.card-meta {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  align-items: center;
}
.card-meta-sep { color: var(--color-border); }

/* Grade string — monospace chip */
.card-grades {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-match-grade);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  letter-spacing: .01em;
}

/* Admission tests — use category accent colour via data-category */
.card-admission-tests {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: var(--space-2);
}
.admission-test-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-match-grade-bg);
  color: var(--color-text-secondary);
}

/* Per-category test tag colours */
.course-card[data-category="medicine"]    .admission-test-tag { background: var(--color-cat-medicine-bg);    color: var(--color-cat-medicine); }
.course-card[data-category="cs"]          .admission-test-tag { background: var(--color-cat-cs-bg);          color: var(--color-cat-cs); }
.course-card[data-category="engineering"] .admission-test-tag { background: var(--color-cat-engineering-bg); color: var(--color-cat-engineering); }
.course-card[data-category="economics"]   .admission-test-tag { background: var(--color-cat-economics-bg);   color: var(--color-cat-economics); }
.course-card[data-category="law"]         .admission-test-tag { background: var(--color-cat-law-bg);         color: var(--color-cat-law); }
.course-card[data-category="business"]    .admission-test-tag { background: var(--color-cat-business-bg);    color: var(--color-cat-business); }
.course-card[data-category="sciences"]    .admission-test-tag { background: var(--color-cat-sciences-bg);    color: var(--color-cat-sciences); }
.course-card[data-category="mathematics"] .admission-test-tag { background: var(--color-cat-mathematics-bg); color: var(--color-cat-mathematics); }
.course-card[data-category="psychology"]  .admission-test-tag { background: var(--color-cat-psychology-bg);  color: var(--color-cat-psychology); }
.course-card[data-category="architecture"].admission-test-tag { background: var(--color-cat-architecture-bg);color: var(--color-cat-architecture); }

/* AP holistic note tag — neutral grey, not a warning. Holds a full
   sentence, so it must wrap as a block instead of an overflowing pill. */
/* AP data-absence note — plain mono line, no pill */
.card-ap-note {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
}
/* Grade-panel note under the AP score select — same plain mono line */
.grade-input-note {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin: var(--space-2) 0 0;
}

/* Requirement-data not yet checked against a published source */
.card-unverified {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-text-tertiary);
  font-style: italic;
  opacity: 0.85;
}

/* IB HL requirement chips */
.card-ib-hl {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: var(--space-2);
}
.card-ib-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.card-ib-chip--note {
  background: var(--color-match-grade-bg);
  border-color: transparent;
  font-weight: 600;
}
/* IB HL warning — shown when required HL subjects may not be covered */
.card-ib-hl-warn {
  font-size: var(--text-xs);
  color: var(--color-match-possible);
  margin-top: var(--space-1);
  font-weight: 500;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .card-ib-hl {
    flex-direction: column;
    gap: 8px;
  }
  .card-ib-chip {
    display: inline-block;
    width: fit-content;
    font-size: 11px;
    padding: 2px 6px;
  }
  .card-ib-hl-warn {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Category badge on cards */
.card-cat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-match-grade-bg);
  color: var(--color-text-secondary);
}
.course-card[data-category="medicine"]    .card-cat-badge { background: var(--color-cat-medicine-bg);    color: var(--color-cat-medicine); }
.course-card[data-category="cs"]          .card-cat-badge { background: var(--color-cat-cs-bg);          color: var(--color-cat-cs); }
.course-card[data-category="engineering"] .card-cat-badge { background: var(--color-cat-engineering-bg); color: var(--color-cat-engineering); }
.course-card[data-category="economics"]   .card-cat-badge { background: var(--color-cat-economics-bg);   color: var(--color-cat-economics); }
.course-card[data-category="law"]         .card-cat-badge { background: var(--color-cat-law-bg);         color: var(--color-cat-law); }
.course-card[data-category="business"]    .card-cat-badge { background: var(--color-cat-business-bg);    color: var(--color-cat-business); }
.course-card[data-category="sciences"]    .card-cat-badge { background: var(--color-cat-sciences-bg);    color: var(--color-cat-sciences); }
.course-card[data-category="mathematics"] .card-cat-badge { background: var(--color-cat-mathematics-bg); color: var(--color-cat-mathematics); }
.course-card[data-category="psychology"]  .card-cat-badge { background: var(--color-cat-psychology-bg);  color: var(--color-cat-psychology); }
.course-card[data-category="architecture"].card-cat-badge { background: var(--color-cat-architecture-bg);color: var(--color-cat-architecture); }

/* Missing/tip lines */
.card-missing {
  margin-top: var(--space-2);
  font-size: var(--text-xs); line-height: 1.5;
  padding: 6px 10px;
  border-radius: var(--radius-full);
}
.card-missing--red {
  background: var(--color-match-reach-bg);
  color: var(--color-match-reach);
}
.missing-tag {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.missing-prefix { font-weight: 600; margin-right: 2px; }

.card-tip {
  display: flex; align-items: baseline; gap: 5px;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-match-possible);
  background: var(--color-match-possible-bg);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  line-height: 1.5;
}
.card-tip__icon { font-size: 11px; flex-shrink: 0; }
.card-tip strong { color: var(--color-match-possible); font-weight: 700; }

/* Expandable university info */
.card-uni-info {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}
.card-uni-info summary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--t-fast);
}
.card-uni-info summary:hover { color: var(--color-text-primary); }
.card-uni-info summary::-webkit-details-marker { display: none; }
.card-uni-info summary svg { transition: transform var(--t-base); flex-shrink: 0; }
.card-uni-info[open] summary svg { transform: rotate(180deg); }
.card-uni-info[open] summary { color: var(--color-text-primary); margin-bottom: var(--space-2); }

.card-uni-info__body {
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  margin-top: 2px;
}
.card-uni-tagline {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}
.card-uni-note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--space-2);
}
.card-uni-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--text-xs);
  color: var(--color-cat-cs);
  text-decoration: none;
  font-weight: 500;
}
.card-uni-link:hover { text-decoration: underline; }
.card-uni-info__notes {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * Reverse course finder cards
 * ═══════════════════════════════════════════════════════════════ */
.reverse-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6) var(--space-4);
  margin-bottom: var(--space-3);
  animation: cardIn .25s ease both;
  animation-delay: var(--card-delay, 0s);
  transition: border-color var(--t-fast);
}
.reverse-card:hover { border-color: var(--color-text-tertiary); }

.reverse-reqs {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.req-row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.req-row:last-child { border-bottom: none; }

.req-label {
  flex-shrink: 0; width: 68px;
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding-top: 4px;
}
.req-essential { color: var(--color-match-reach); }
.req-preferred { color: var(--color-match-possible); }
.req-useful    { color: var(--color-text-tertiary); }

.req-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.subject-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-primary);
}
.subject-tag:hover { background: var(--color-border); }

.reverse-notes {
  margin-top: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-border);
  line-height: 1.55;
}

.reverse-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-3);
  gap: var(--space-2);
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.copy-btn:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}
.copy-btn--done {
  border-color: var(--color-match-strong);
  color: var(--color-match-strong);
  background: var(--color-match-strong-bg);
  pointer-events: none;
}

/* Manual-copy fallback textarea (shown only when clipboard copy fails) */
.copy-fallback {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
}
.copy-fallback.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
 * Toast notification
 * ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: var(--space-8); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-text-primary);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
  white-space: nowrap;
  letter-spacing: .01em;
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
 * Empty / hint states
 * ═══════════════════════════════════════════════════════════════ */
.search-hint {
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  padding: var(--space-12) 0;
  text-align: center;
}
.empty-state {
  text-align: center; padding: var(--space-16) var(--space-6);
}
.empty-state__icon { font-size: 32px; margin-bottom: var(--space-4); }
.empty-state p     { font-size: var(--text-base); color: var(--color-text-secondary); }
.empty-state strong{ color: var(--color-text-primary); }

/* ═══════════════════════════════════════════════════════════════
 * Footer
 * ═══════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) var(--pad);
  text-align: center;
}
footer p {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
 * Subject Planner (Mode C)
 * ═══════════════════════════════════════════════════════════════ */
.plan-step { margin-bottom: var(--space-8); }

.plan-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.plan-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  user-select: none;
}
.plan-cat-card:hover {
  border-color: var(--color-text-tertiary);
}

/* Generic selected state — used by the multi-select strength cards,
   which carry no data-category. Category cards (data-category) override
   this with their own accent below. */
.plan-cat-card.active {
  border-width: 2px;
  border-color: var(--color-cat-cs);
  background: var(--color-cat-cs-bg);
}
.plan-cat-card.active .plan-cat-card__label { color: var(--color-cat-cs); }

/* Active state: category-specific colour */
.plan-cat-card[data-category="medicine"].active    { border-width: 2px; border-color: var(--color-cat-medicine);    background: var(--color-cat-medicine-bg); }
.plan-cat-card[data-category="cs"].active          { border-width: 2px; border-color: var(--color-cat-cs);          background: var(--color-cat-cs-bg); }
.plan-cat-card[data-category="engineering"].active { border-width: 2px; border-color: var(--color-cat-engineering); background: var(--color-cat-engineering-bg); }
.plan-cat-card[data-category="economics"].active   { border-width: 2px; border-color: var(--color-cat-economics);   background: var(--color-cat-economics-bg); }
.plan-cat-card[data-category="law"].active         { border-width: 2px; border-color: var(--color-cat-law);         background: var(--color-cat-law-bg); }
.plan-cat-card[data-category="business"].active    { border-width: 2px; border-color: var(--color-cat-business);    background: var(--color-cat-business-bg); }
.plan-cat-card[data-category="sciences"].active    { border-width: 2px; border-color: var(--color-cat-sciences);    background: var(--color-cat-sciences-bg); }
.plan-cat-card[data-category="mathematics"].active { border-width: 2px; border-color: var(--color-cat-mathematics); background: var(--color-cat-mathematics-bg); }
.plan-cat-card[data-category="psychology"].active  { border-width: 2px; border-color: var(--color-cat-psychology);  background: var(--color-cat-psychology-bg); }
.plan-cat-card[data-category="architecture"].active{ border-width: 2px; border-color: var(--color-cat-architecture);background: var(--color-cat-architecture-bg); }

.plan-cat-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--color-text-secondary);
}
.plan-cat-card[data-category="medicine"].active    .plan-cat-card__icon { color: var(--color-cat-medicine); }
.plan-cat-card[data-category="cs"].active          .plan-cat-card__icon { color: var(--color-cat-cs); }
.plan-cat-card[data-category="engineering"].active .plan-cat-card__icon { color: var(--color-cat-engineering); }
.plan-cat-card[data-category="economics"].active   .plan-cat-card__icon { color: var(--color-cat-economics); }
.plan-cat-card[data-category="law"].active         .plan-cat-card__icon { color: var(--color-cat-law); }
.plan-cat-card[data-category="business"].active    .plan-cat-card__icon { color: var(--color-cat-business); }
.plan-cat-card[data-category="sciences"].active    .plan-cat-card__icon { color: var(--color-cat-sciences); }
.plan-cat-card[data-category="mathematics"].active .plan-cat-card__icon { color: var(--color-cat-mathematics); }
.plan-cat-card[data-category="psychology"].active  .plan-cat-card__icon { color: var(--color-cat-psychology); }
.plan-cat-card[data-category="architecture"].active .plan-cat-card__icon { color: var(--color-cat-architecture); }

.plan-cat-card__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
  text-align: center;
}
.plan-cat-card[data-category="medicine"].active    .plan-cat-card__label { color: var(--color-cat-medicine); }
.plan-cat-card[data-category="cs"].active          .plan-cat-card__label { color: var(--color-cat-cs); }
.plan-cat-card[data-category="engineering"].active .plan-cat-card__label { color: var(--color-cat-engineering); }
.plan-cat-card[data-category="economics"].active   .plan-cat-card__label { color: var(--color-cat-economics); }
.plan-cat-card[data-category="law"].active         .plan-cat-card__label { color: var(--color-cat-law); }
.plan-cat-card[data-category="business"].active    .plan-cat-card__label { color: var(--color-cat-business); }
.plan-cat-card[data-category="sciences"].active    .plan-cat-card__label { color: var(--color-cat-sciences); }
.plan-cat-card[data-category="mathematics"].active .plan-cat-card__label { color: var(--color-cat-mathematics); }
.plan-cat-card[data-category="psychology"].active  .plan-cat-card__label { color: var(--color-cat-psychology); }
.plan-cat-card[data-category="architecture"].active .plan-cat-card__label { color: var(--color-cat-architecture); }

.plan-section-head {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -.1px;
  margin-bottom: var(--space-1);
}
.plan-section-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.plan-essentials-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.plan-subject-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  gap: 2px;
}
.plan-subject-chip__name  {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.plan-subject-chip__count {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.plan-subject-chip__hl {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-cat-cs);
  background: var(--color-cat-cs-bg);
  padding: 0 4px; border-radius: 3px;
  vertical-align: super;
  margin-left: 4px;
}

.plan-combo-list {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.plan-combo-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 11px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  flex-wrap: wrap;
}
.plan-combo-row:hover {
  border-color: var(--color-text-tertiary);
  background: var(--color-bg);
}
.plan-combo-row:focus-visible {
  outline: 2px solid var(--color-text-secondary);
  outline-offset: 2px;
}
.plan-combo-tag {
  padding: 3px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.plan-combo-row:hover .plan-combo-tag { background: var(--color-surface); }
.plan-combo-arrow  { color: var(--color-text-tertiary); font-size: var(--text-xs); flex-shrink: 0; }
.plan-combo-results {
  display: flex; gap: 5px; margin-left: auto; flex-shrink: 0;
}

.plan-footer-note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  line-height: 1.6;
}
.plan-switch-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-cat-cs);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-switch-link:hover { opacity: .75; }

/* ═══════════════════════════════════════════════════════════════
 * Grey toggle variant
 * ═══════════════════════════════════════════════════════════════ */
.results-group__toggle--grey:hover,
.results-group__toggle--grey[aria-expanded="true"] {
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * Grade input section
 * ═══════════════════════════════════════════════════════════════ */
.grade-input-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.grade-input-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.grade-input-tooltip {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  cursor: help;
  flex-shrink: 0;
}
.grade-input-tooltip:focus { outline: 2px solid var(--color-cat-cs); border-radius: 2px; }
.grade-input-body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.grade-option-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.grade-select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B9A97' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 240px;
}
.grade-select:focus {
  outline: none;
  border-color: var(--color-text-secondary);
}
/* ── Per-subject grades (letter systems): ONE container, no chrome-in-chrome.
   Each subject is a mono label + a borderless select that only shows a
   hairline underline; nothing is wrapped in its own pill. ─────────────── */
.grade-input-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex-wrap: wrap;
}
.grade-setall {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.grade-setall__label {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
}
/* The one select style used by both the set-all control and every pair:
   no box, a subtle chevron, and a hairline that only firms up on focus. */
.grade-inline-select {
  font-family: var(--ce-font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ce-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ce-hairline-color);
  border-radius: 0;
  padding: 2px 18px 2px 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231F1A17' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  min-width: 52px;
}
.grade-inline-select:hover  { border-bottom-color: var(--ce-ink-30); }
.grade-inline-select:focus  { outline: none; border-bottom-color: var(--ce-ink); }

/* One subject per row at every width: AP names run long and selections run
 * to eight-plus, so a wrapped flow turns ragged. Subject left, grade right —
 * the same shape the narrow viewport always used. */
.grade-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}
.grade-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.grade-pair__subject {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ce-ink-60);
  min-width: 0;
  overflow-wrap: anywhere;
}
.grade-rows__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
@media (max-width: 560px) {
  .grade-input-header__actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .grade-input-hint { display: none; }
}
.grade-number-input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
  width: 100px;
}
.grade-number-input:focus {
  outline: none;
  border-color: var(--color-text-secondary);
}
.grade-input-help {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  line-height: 1.5;
}
.grade-conversion-hint {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-text-tertiary);
  line-height: 1.5;
}
/* Names the subjects still blank while a partial profile keeps the app in
   subject-only mode. Calm, not an error — a hairline rule, no left border. */
.grade-incomplete {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--ce-hairline);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
}
.grade-incomplete.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════════
 * Empty state — Mode A suggestions
 * ═══════════════════════════════════════════════════════════════ */
.mode-btn__label--short { display: none; }

.check-empty-state__inner {
  text-align: center;
  padding: var(--space-10) var(--space-6) var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-5);
  animation: panelIn .2s ease both;
}
.check-empty-state__icon   { font-size: 32px; margin-bottom: var(--space-3); }
.check-empty-state__heading {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.check-empty-state__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
.check-empty-state__suggestions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
  margin: 0 auto;
}

/* AP guidance panel — reframes US AP away from a fixed-subject-count model */
.suggestion-btn {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
  min-height: 44px;
}
.suggestion-btn:hover {
  border-color: var(--color-cat-cs);
  background: var(--color-cat-cs-bg);
  color: var(--color-cat-cs);
}

/* ═══════════════════════════════════════════════════════════════
 * Responsive
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  :root { --pad: 16px; }

  h1 { font-size: 1.4rem; }

  /* Tab bar */
  .mode-toggle { gap: 0; }
  .mode-btn    { padding: 10px var(--space-3); flex: 1; justify-content: center; font-size: var(--text-sm); }

  .panel-controls--row  { flex-direction: column; }
  .control-group--grow  { width: 100%; }

  /* Subject filter: full width */
  .subject-filter-input { max-width: 100%; }

  /* Result cards: single column */
  .results-group__grid  { grid-template-columns: 1fr; }
  .results-toolbar      { flex-direction: column; }
  .results-group__header { top: 46px; font-size: var(--text-xs); }
  .results-group__toggle { min-height: 44px; }

  /* Card text minimum 14px */
  .card-name { font-size: var(--text-sm); }

  /* Country filter: horizontal scroll. max-width matters: the toolbar is a
   * column flex with align-items:flex-start, so without it the bar sizes to
   * its content (~545px) and pushes the whole page wide instead of scrolling
   * within itself. */
  .filter-bar {
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { min-height: 44px; flex-shrink: 0; }

  /* Summary bar */
  .results-new-summary { font-size: var(--text-sm); line-height: 1.8; }

  .card-header  { flex-wrap: wrap; gap: var(--space-2); }
  .nav__tagline { display: none; }
  .nav__back-label { display: none; }        /* keep just the ← arrow on small screens */
  .nav__back { padding: 8px 12px; min-height: 36px; }

  /* Grade input: full width */
  .grade-input-body   { flex-direction: column; align-items: stretch; }
  .grade-select       { min-width: 0; width: 100%; }
  .grade-number-input { width: 100%; }
  .grade-option-label { margin-bottom: 4px; }

  /* Plan grid */
  .plan-category-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .plan-combo-tag { font-size: 11px; padding: 3px 9px; }
  /* Admission test badges readable at small size */
  .card-admission-tests .admission-test-tag {
    font-size: 12px; padding: 2px 8px;
  }
}

/* At 375px: swap to short tab labels so all three fit on one line */
@media (max-width: 400px) {
  .mode-btn__label        { display: none; }
  .mode-btn__label--short { display: inline; }
  .mode-btn { font-size: 12px; gap: 3px; }
  .filter-btn { font-size: 11px; padding: 4px 9px; }
}


/* ═══════════════════════════════════════════════════════════════
 * Applying panel (shortlist + what's-next checklist)
 * ═══════════════════════════════════════════════════════════════ */
.applying { max-width: 760px; margin: 0 auto; }
.applying__header { margin-bottom: var(--space-5); }
.applying__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.applying__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.applying-section { margin-bottom: var(--space-8); }
.applying-section__head {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
/* ── Applying execution checklist — real, checkable, persistent ── */
.applying-section__count {
  margin-left: var(--space-3);
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.applying-tasks { display: flex; flex-direction: column; gap: var(--space-5); }
.applying-task-group { display: flex; flex-direction: column; gap: var(--space-2); }
.applying-task-group__label {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.applying-task {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--ce-hairline);
  cursor: pointer;
}
.applying-task-group .applying-task:last-child { border-bottom: none; }
.applying-task__box {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--ce-ink);
  cursor: pointer;
}
.applying-task__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.applying-task__label {
  font-size: var(--text-base);
  color: var(--ce-ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.applying-task__detail {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* Why this test is here: what it is, whose courses ask for it, and — only
   where the provider confirms the test is compulsory — what missing the
   registration deadline costs. No borders, no boxes; hierarchy by weight. */
.applying-task__what {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.applying-task__needs {
  margin-top: 2px;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--ce-ink-60);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.applying-task__consequence {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.applying-task__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}
.applying-task--done .applying-task__what,
.applying-task--done .applying-task__needs,
.applying-task--done .applying-task__consequence { color: var(--ce-ink-30); }
.applying-task__link {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ce-ink);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.applying-task--done .applying-task__label {
  color: var(--ce-ink-30);
  text-decoration: line-through;
}
.applying-task--done .applying-task__detail { color: var(--ce-ink-30); }
.applying-tasks__foot {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--ce-ink-30);
  line-height: 1.5;
}
/* Compact shortlist summary (full cards live on the Shortlist page) */
.applying-summary__counts {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
}
.applying-summary__counts strong { color: var(--ce-ink); }
.applying-summary__balance {
  margin: 0 0 var(--space-3);
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink);
  line-height: 1.6;
}
.applying-summary__balance--muted {
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
}

.applying-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.applying-checklist li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.applying-checklist li::before {
  content: '○';
  position: absolute;
  left: 0;
  color: var(--color-text-tertiary);
}
.applying-checklist strong { color: var(--color-text-primary); }
.applying-empty {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-6);
}
.applying-empty p { margin: 0 0 var(--space-4); color: var(--color-text-secondary); line-height: 1.6; }
/* One quiet closing line — replaces the old bordered "What's coming" callout
 * (which promised deferred features and carried a banned left border). */
.applying-footnote {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
}

/* Footer "Report an issue" link */
.footer-meta { margin-top: var(--space-2); }
.footer-meta a { font-size: var(--text-xs); color: var(--color-text-tertiary); text-decoration: underline; }
.footer-meta a:hover { color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════════
 * CONFIDENT EDITORIAL — design-language proof, anchored on the
 * Check Combination results area. SCOPED to #panel-check so every
 * other screen keeps the current look until we propagate. All values
 * come from the --ce-* tokens (tokens.css) for easy reuse later.
 * ═══════════════════════════════════════════════════════════════ */

/* The whole app now sits on the warm --ce-bg canvas (set on <body>), so the
 * results screen needs no separate fill — that previously produced a warm band
 * down the centred content column. Just set the ink colour here. */
#panel-check { color: var(--ce-ink); }

/* ── Country filter pills + result-summary badges ──────────────── */
.filter-btn {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  padding: 6px 14px;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  background: transparent;
  color: var(--ce-ink);
}
.filter-btn:hover {
  border-color: var(--ce-ink);
  color: var(--ce-ink);
  background: transparent;
}
.filter-btn.active {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
  font-weight: 700;
}

/* Result summary counts (✓ 43 · ◑ 46 · …) — calm mono pills, not loud */
.result-summary .badge {
  font-family: var(--ce-font-mono);
  font-weight: 700;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  background: transparent;
}
.result-summary .badge--success { color: var(--ce-status-strong); }
.result-summary .badge--warning { color: var(--ce-status-possible); }
.result-summary .badge--error   { color: var(--ce-status-reach); }
.result-summary .badge--grey    { color: var(--ce-status-grade); }
.result-summary .badge--neutral { color: var(--ce-ink-60); }

/* ── In-results search box ─────────────────────────────────────── */
.results-search__input {
  font-family: var(--ce-font-mono);
  font-size: 13px;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  background: var(--ce-surface);
  color: var(--ce-ink);
}
.results-search__input::placeholder {
  font-family: var(--ce-font-mono);
  color: var(--ce-ink-30);
}
.results-search__input:focus {
  outline: none;
  border-color: var(--ce-ink);
  box-shadow: none;
}
.results-search__icon { opacity: .45; }

/* ── Section headings: "Strong matches (N)" ────────────────────── */
/* Section heading — confident but a secondary label: smaller than the
 * course names so the eye lands on the content (names) first, the group
 * label second. */
.results-group__header {
  font-family: var(--ce-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  text-transform: none;
  padding: var(--space-3) 0 var(--space-3);
  border-bottom: var(--ce-hairline);
  color: var(--ce-ink);
  background: var(--ce-bg);
}
.results-group__header--green { color: var(--ce-status-strong); }
.results-group__header--amber { color: var(--ce-status-possible); }
.results-group__header--red   { color: var(--ce-status-reach); }
.results-group__header--grey  { color: var(--ce-status-grade); }
.results-group__header--unconfirmed { color: var(--ce-ink-60); }
/* the "(N)" count → mono, quiet, beside the big heading */
.results-group__header span {
  font-family: var(--ce-font-mono);
  font-size: 1rem;
  font-weight: 400;
  opacity: .65 !important;
}
/* Singular butter-yellow highlighter move — only on the primary "Strong
 * matches" count, so the page feels alive without spraying yellow around. */
.results-group__header--green span {
  background: var(--ce-accent);
  color: var(--ce-ink);
  opacity: 1 !important;
  padding: 1px 9px;
  border-radius: 2px;
}

/* ── The course card ───────────────────────────────────────────── */
/* Clean hairline rectangle, sharp corners, no coloured left edge. */
.course-card {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-6);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.course-card:hover {
  background: var(--ce-surface);
  border-color: var(--ce-ink-30);
}
/* normalise the dashed grey-status border to the same calm hairline */
.course-card--grey,
.course-card--unconfirmed {
  border-style: solid;
  border-color: var(--ce-hairline-color);
}

/* Match-status label (STRONG MATCH) — mono, calm colour */
.card-status {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.card-status--green { color: var(--ce-status-strong); }
.card-status--amber { color: var(--ce-status-possible); }
.card-status--red   { color: var(--ce-status-reach); }
.card-status--grey  { color: var(--ce-status-grade); }
.card-status--unconfirmed { color: var(--ce-ink-60); }
.card-status--none  { color: var(--ce-ink-60); font-weight: 400; }

/* Course name — Bricolage 800, the clear focal point of each card */
.card-name {
  font-family: var(--ce-font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.03em;
  color: var(--ce-ink);
}
/* University — second tier: clear presence below the big name, above the
 * quieter ranking/metadata. Body font, near-ink, slightly larger. */
.card-uni {
  font-family: var(--ce-font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  color: rgba(31, 26, 23, 0.82);
  margin-top: var(--space-2);
}
/* "World Top N" ranking — third tier, quiet */
.card-tier {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  color: var(--ce-ink-60);
  margin-top: 5px;
}

/* Status label (STRONG MATCH) sits at the top — give it room before the name */
.card-status { margin-bottom: var(--space-3); }

/* Metadata row — the mono functional layer; clear gap above it */
.card-meta {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin-top: var(--space-4);
}
.card-meta-sep { color: var(--ce-ink-30); }
.card-cat-badge {
  background: transparent;
  color: var(--ce-ink-60);
  padding: 0;
  font-weight: 700;
}

/* Grade chip — hairline pill, mono; separated from the metadata row */
.card-grades {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink);
  background: transparent;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  padding: 4px 12px;
  margin-top: var(--space-4);
}
/* Holistic / admitted-range box (US) — its own tier, clearly separated */
.card-us-admit { margin-top: var(--space-4); }

/* Admission-test tags — hairline pill, mono */
.admission-test-tag {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  color: var(--ce-ink-60);
  background: transparent;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  padding: 3px 10px;
}

/* Save button — pill, ink outline, butter-yellow on hover/active */
.save-btn {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid var(--ce-ink);
  border-radius: var(--ce-radius-pill);
  background: transparent;
  color: var(--ce-ink);
}
.save-btn:hover {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}
.save-btn--saved {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}

/* Body-font for the card's descriptive lines */
.card-grade-gap,
.card-field-core,
.card-us-admit__range,
.card-unverified,
.card-uni-note,
.card-uni-info__notes { font-family: var(--ce-font-body); }
.card-us-admit__policy { font-family: var(--ce-font-mono); }

/* Disclaimer + summary prose use the body font on this screen */
.disclaimer-banner,
.results-new-summary,
.summary-text { font-family: var(--ce-font-body); }

/* Mobile: keep the language but tighten the card type a touch */
@media (max-width: 480px) {
  .card-name { font-size: 1.6rem; }
  .results-group__header { font-size: 1.35rem; }
}

/* ═══════════════════════════════════════════════════════════════
 * CONFIDENT EDITORIAL — app-wide propagation of the locked language
 * to every screen/component. Visual only. Reuses --ce-* tokens.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Brand wordmark → Bricolage for character ──────────────────── */
.nav__logo { font-family: var(--ce-font-display); font-weight: 800; }

/* ── Display headings → Bricolage, confident weights ───────────── *
 * Several titles were set to the body sans in earlier passes; bring
 * them back to the display face now that it's the locked language. */
.home__welcome,
.fo__title,
.stage-select__heading { font-weight: 700; }
.home-next__text,
.home-card__title,
.field-card__name,
.fo-section__head,
.plan-section-head,
.applying__title,
.applying-section__head,
.shortlist-insights__title,
.stage-card__title,
.empty-state h2,
.empty-state h3 {
  font-family: var(--ce-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ── Functional layer → Space Mono (labels, eyebrows, metadata) ── */
.control-label,
.count-badge,
.category-chip,
.fo-eyebrow,
.fo-label,
.fo-chip,
.fo-combo__count,
.home-next__eyebrow,
.home-quick__label,
.home-card__dl dt,
.plan-subject-chip__count,
.plan-combo-tag,
.plan-subject-chip__hl,
.subject-chip,
.shortlist-insight-tag {
  font-family: var(--ce-font-mono);
}

/* ── Pills & chips → hairline mono pills, ink/yellow active ─────── */
.stage-indicator,
.shortlist-link,
.category-chip,
.fo-chip,
.subject-chip,
.count-badge {
  font-family: var(--ce-font-mono);
  border-radius: var(--radius-full);
}
/* Active filter/interest chip → ink fill (matches the reference toolbar) */
.category-chip.active {
  background: var(--ce-ink) !important;
  border-color: var(--ce-ink) !important;
  color: var(--ce-bg) !important;
}
.subject-chip.selected {
  background: var(--ce-ink);
  border-color: var(--ce-ink);
  color: var(--ce-bg);
}

/* ── Nav tool tabs → reference filter-pill treatment ───────────── */
.stage-tool {
  font-family: var(--ce-font-mono);
  border: var(--ce-hairline);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}
.stage-tool:hover { border-color: var(--ce-ink); color: var(--ce-ink); }
/* Active tool → butter-yellow fill, ink text — the reference active pill */
.stage-tool--active,
.stage-tool--active:hover {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}
.stage-indicator,
.shortlist-link { border: var(--ce-hairline); }
.shortlist-link--active {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}

/* ── Buttons → pill shape, ink-outline resting / yellow on hover ─ */
.home-next__btn,
.home-quick__btn,
.fo-btn,
.export-csv-btn,
.remove-btn,
.clear-subjects-btn,
.data-error-banner__retry,
.explore-context__clear,
.explore-context__about,
.field-card__btn {
  font-family: var(--ce-font-mono);
  border-radius: var(--radius-full);
  border: 1px solid var(--ce-ink);
  background: transparent;
  color: var(--ce-ink);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.home-next__btn:hover,
.home-quick__btn:hover,
.fo-btn:hover,
.export-csv-btn:hover,
.remove-btn:hover,
.clear-subjects-btn:hover,
.data-error-banner__retry:hover,
.explore-context__clear:hover,
.explore-context__about:hover,
.field-card__btn:hover {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
  opacity: 1;
}
/* Primary CTAs → butter-yellow fill at rest (the confident action) */
.home-next__btn--primary,
.fo-btn--primary {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
  color: var(--ce-ink);
}
.home-next__btn--primary:hover,
.fo-btn--primary:hover { background: var(--ce-accent); opacity: .9; }

/* ── Badges (counts everywhere) → mono hairline pills, status text ─ */
.badge {
  font-family: var(--ce-font-mono);
  border: var(--ce-hairline);
  border-radius: var(--radius-full);
  background: transparent;
}
.badge--success { color: var(--ce-status-strong); background: transparent; }
.badge--warning { color: var(--ce-status-possible); background: transparent; }
.badge--error   { color: var(--ce-status-reach); background: transparent; }
.badge--grey,
.badge--neutral { color: var(--ce-ink-60); background: transparent; }

/* ── Inputs / search boxes → hairline, mono ────────────────────── */
.search-input,
.subject-filter-input,
.courseSearchInput,
.select-wrap select {
  font-family: var(--ce-font-mono);
}
.search-input { border: var(--ce-hairline); }

/* ── Onboarding stage/system cards → flat hairline, selected state ─ */
.stage-card { background: var(--ce-surface); }
.stage-card:hover { border-color: var(--ce-ink); }
.stage-card__icon { background: var(--ce-bg); color: var(--ce-ink); }

/* ── Course Finder card → same hairline container as .course-card ─ */
.reverse-card {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-6);
}
.subject-tag {
  font-family: var(--ce-font-mono);
  border: var(--ce-hairline);
  border-radius: var(--radius-full);
}
.req-label { font-family: var(--ce-font-mono); }

/* ── Field Overview / Planner combination rows → reference styling ─ */
.fo-combo,
.plan-combo-row {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
}
.fo-combo__count { color: var(--ce-ink-60); }

/* ── Home next-step block → warm surface card, not a blue tint ───── */
.home-next {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
}
.home-next__eyebrow { color: var(--ce-ink-60); }

/* ── Cross-tier cards → flat hairline, sharp ───────────────────── */
.home-card,
.shortlist-insights,
.field-card,
.fo__header,
.card-us-admit,
.card-uni-info__body {
  border-radius: var(--ce-radius);
}

/* ── Disclaimer / hint prose → body font ───────────────────────── */
.panel-intro,
.search-hint,
.picker-hint,
.plan-section-sub,
.fo-desc,
.fo-expect { font-family: var(--ce-font-body); }

/* ═══════════════════════════════════════════════════════════════
 * THE GATE — multi-field planner, candidate-field pins, and
 * door-closing warnings. All in the Confident Editorial language:
 * mono functional layer, butter-yellow for the pinned/active states,
 * terracotta (status-reach) for computed closure warnings.
 * ═══════════════════════════════════════════════════════════════ */

/* Pin ("Keep this field") — mono pill, yellow when kept */
.pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid var(--ce-ink);
  border-radius: var(--ce-radius-pill);
  background: transparent;
  color: var(--ce-ink);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pin-btn:hover { background: var(--ce-accent); }
.pin-btn--on   { background: var(--ce-accent); }
.fo__header .pin-btn { margin-top: var(--space-4); }
.field-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.field-card__actions .field-card__btn { margin-top: 0; }

/* Corner keep-pin — icon + tiny label, two clear states.
   Not kept: outline bookmark on the page background.
   Kept:     butter-yellow (accent) pill with a filled ink bookmark. */
.field-card { position: relative; }
.field-card__name { padding-right: 84px; }   /* clear space for the corner pin */
.field-card__pin {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 11px;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid var(--ce-ink);
  border-radius: var(--ce-radius-pill);
  background: var(--ce-bg);
  color: var(--ce-ink);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.field-card__pin-icon {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}
.field-card__pin:hover { background: var(--ce-accent); }
.field-card__pin:focus-visible {
  outline: 2px solid var(--ce-ink);
  outline-offset: 2px;
}
.field-card__pin--on {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
}
.field-card__pin--on .field-card__pin-icon {
  fill: var(--ce-ink);
  stroke: var(--ce-ink);
}
@media (max-width: 640px) {
  .field-card__pin { min-height: 34px; padding: 7px 12px; }
}

/* Small mono field badge (critical pairs, AP sections, chips) */
.plan-field-badge {
  display: inline-block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 9px;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  color: var(--ce-ink-60);
  background: transparent;
}

/* "Covers all N of your fields" — the anchor-subject signal */
.plan-chip-covers {
  display: inline-block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin: 3px 0 2px;
}
.plan-chip-covers--all {
  background: var(--ce-accent);
  color: var(--ce-ink);
  padding: 2px 8px;
  border-radius: 2px;
}

/* Computed closure warning — calm terracotta, no scare styling */
.plan-chip-closure { color: var(--ce-status-reach); font-weight: 700; }

.plan-subject-chip--multi {
  align-items: flex-start;
  max-width: 100%;
  border-radius: var(--ce-radius);   /* long content → rectangle, not a pill */
}
/* The cross-field count is a full sentence — let it wrap on small screens
   (the base chip count is nowrap for short single-field counts). */
.plan-subject-chip--multi .plan-subject-chip__count { white-space: normal; line-height: 1.6; }

/* Multi-field combination rows: main line + expandable drop panel */
.plan-combo-row--multi { display: block; }
.plan-combo-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.plan-combo-fields {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink-60);
  /* Override .plan-combo-results { flex-shrink: 0 } so the counts wrap
     instead of overflowing on narrow screens. */
  flex-shrink: 1;
  min-width: 0;
  justify-content: flex-end;
}
.plan-combo-field { white-space: nowrap; }
.plan-combo-field--zero { color: var(--ce-status-reach); font-weight: 700; }
.plan-combo-fieldsep { color: var(--ce-ink-30); }
@media (max-width: 640px) {
  /* Counts drop to their own full-width line under the subject tags. */
  .plan-combo-fields { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* Subject tags inside multi rows are inspectable buttons */
button.plan-combo-tag--drop {
  cursor: pointer;
  font: inherit;
  transition: background var(--t-fast), border-color var(--t-fast);
}
button.plan-combo-tag--drop:hover,
button.plan-combo-tag--drop:focus-visible {
  background: var(--ce-accent);
  border-color: var(--ce-ink);
}

/* The "what if I drop this?" consequence panel */
.plan-combo-drop {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--ce-hairline);
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink);
  line-height: 1.7;
}
.plan-drop-lead { font-weight: 700; }
.plan-drop-closure { color: var(--ce-status-reach); }
.plan-combo-drop .plan-combo-fieldsep { margin: 0 7px; }

/* Honest low-overlap conflict note */
.plan-conflict {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: var(--ce-hairline);
  background: var(--ce-reach-tint);
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.65;
  max-width: 640px;
}

/* Per-field AP guidance blocks in multi mode */
.plan-ap-field { margin-top: var(--space-5); }
.plan-ap-field .plan-field-badge { margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════
 * MOVE 2 — shortlist verdicts (reach/match/safety) + test timing.
 * ═══════════════════════════════════════════════════════════════ */

/* Status + verdict share the card's top row */
.card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-status-row .card-status { margin-bottom: 0; }

/* Reach / Match / Safety — quiet mono pill in the status colours */
.shortlist-verdict {
  flex-shrink: 0;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
}
.shortlist-verdict--reach  { color: var(--ce-status-reach);    border-color: var(--ce-status-reach); }
.shortlist-verdict--match  { color: var(--ce-status-possible); border-color: var(--ce-status-possible); }
.shortlist-verdict--safety { color: var(--ce-status-strong);   border-color: var(--ce-status-strong); }

/* Axis qualifier ("Subjects:" / "Grades:") — shown only when the two
 * labels could read as a contradiction; muted so the status still leads. */
.card-axis { color: var(--ce-ink-60); }

/* ═══════════════════════════════════════════════════════════════
 * MOVE 3 — stage graduation card (the old home journey strip is
 * replaced by the persistent journey bar in the nav).
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
 * STAGE 1 DEPTH — the Field Overview as a genuine reading surface,
 * plus the reflective pin interstitial. Editorial page, not a wall
 * of text: Bricolage section heads, Hanken prose at a comfortable
 * measure, hairline structure.
 * ═══════════════════════════════════════════════════════════════ */

.fo-prose {
  font-family: var(--ce-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ce-ink);
  max-width: 66ch;
  margin: 0 0 var(--space-4);
}
.fo-branch {
  font-family: var(--ce-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ce-ink);
  max-width: 66ch;
  margin: 0 0 var(--space-3);
}
.fo-branch strong { font-family: var(--ce-font-display); font-weight: 700; letter-spacing: -.01em; }

/* Section heads — confident Bricolage 800 with the Teak highlighter move:
   a solid flat band swiped under the text. The band COLOUR rotates across
   the system palette from section to section (butter yellow → coral → sage
   → lavender), so adjacent headings differ and the page has candy-accent
   rhythm rather than a flat monochrome yellow. Same shape and weight on
   every heading; only --fo-accent varies, set by the rotating classes below.
   Defaults to butter yellow when no rotation class is present. */
.fo-section__head {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--ce-font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ce-ink);
  margin: 0 0 var(--space-4);
  padding: 1px 6px 2px;
  background-image: linear-gradient(to top,
    var(--fo-head-accent, var(--ce-accent)) 0,
    var(--fo-head-accent, var(--ce-accent)) 34%, transparent 34%);
  background-repeat: no-repeat;
}
.fo-section__head::before { content: none; }   /* retire the timid tick */

/* Rotating heading-accent palette — flat, on-system tokens only, no
   gradients, no new colours. Applied in source order so consecutive
   sections always land on different colours. A dedicated variable
   (--fo-head-accent, not the inherited category --fo-accent) keeps this
   scoped to the heading band and independent of the field's category colour. */
.fo-accent-yellow   { --fo-head-accent: var(--ce-accent);   }
.fo-accent-coral    { --fo-head-accent: var(--ce-coral);    }
.fo-accent-sage     { --fo-head-accent: var(--ce-sage);     }
.fo-accent-lavender { --fo-head-accent: var(--ce-lavender); }

/* Field title — Teak-scale, heavy Bricolage 800 with a butter-yellow
   highlighter swipe: the confident hero of the page. */
.fo__title {
  font-family: var(--ce-font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ce-ink);
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px 4px;
  margin: 0 0 var(--space-3);
  background-image: linear-gradient(to top,
    var(--ce-accent) 0, var(--ce-accent) 26%, transparent 26%);
  background-repeat: no-repeat;
}
/* Eyebrow — a touch more presence, butter-yellow marker before it. */
.fo__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ce-ink);
}
.fo__eyebrow::before {
  content: "";
  width: 22px;
  height: 4px;
  background: var(--ce-accent);
}

/* Misconceptions — three myth→correction PAIRS on the plain canvas (no bands,
   no borders on the lines). Each mono label sits on its OWN line above the
   text it introduces, so it reads as a tag, not the sentence's first words.
   Spacing groups each pair: tight myth→correction, generous pair→pair with a
   hairline between. Myth quiet (muted label + lighter ink); correction
   authoritative (system-green label + full-strength ink). */
.fo-myth {
  max-width: 66ch;
  margin: 0 0 var(--space-6);              /* generous space BETWEEN pairs */
  padding-top: var(--space-6);
  border-top: 1px solid var(--ce-hairline-color);   /* divider between pairs only */
}
.fo-myth:first-of-type { padding-top: 0; border-top: none; }
.fo-myth p {
  font-family: var(--ce-font-body);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.fo-myth p.fo-myth__myth {
  color: var(--ce-ink-60);                 /* quieter — the misconception */
  margin-bottom: 12px;                     /* tight WITHIN the pair: myth → correction */
}
.fo-myth p.fo-myth__reality {
  color: var(--ce-ink);                    /* full-strength — the authoritative answer */
}
.fo-myth__label {
  display: block;                          /* label on its OWN line, above its text */
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;                   /* spaced out so it reads clearly as a tag */
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--ce-ink-60);                 /* muted grey mono (the myth's label) */
}
.fo-myth__reality .fo-myth__label { color: var(--ce-status-strong); }  /* the system's confident status-green */

/* "Where it leads" — descriptive career context, NOT tappable. A clean,
   scannable list: each destination on its own line with a small static
   marker. No pills, no borders, no hover — obviously non-interactive.
   Two columns on wide screens for compactness, one on mobile. */
.fo-leads {
  max-width: 66ch;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-family: var(--ce-font-body);
  font-size: 1rem;
  color: var(--ce-ink);
  columns: 2;
  column-gap: var(--space-8);
}
.fo-lead {
  position: relative;
  break-inside: avoid;
  padding: 5px 0 5px 20px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.fo-lead::before {                 /* small butter-yellow square marker (a bullet, not a control) */
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--ce-accent);
}
@media (max-width: 640px) {
  .fo-leads { columns: 1; }
}

/* ── Anchor nav: sticky mini-contents for long profiles ─────────── */
/* Sits directly beneath the sticky site nav (54px tall), never under it. */
.fo-anchornav {
  position: sticky;
  top: 54px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  margin-bottom: var(--space-5);
  background: var(--ce-bg);
  border-bottom: var(--ce-hairline);
}
.fo-anchornav__link {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fo-anchornav__link:hover { color: var(--ce-ink); }
/* Jumped-to headings clear BOTH sticky bars (site nav + anchor nav). */
.fo-section[id] { scroll-margin-top: 112px; }
#foGateBreak { scroll-margin-top: 112px; }
@media (max-width: 560px) {
  .fo-anchornav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fo-anchornav::-webkit-scrollbar { display: none; }
}

/* ── "Building your [Field] story" — supercurricular roadmap ────── */
.fo-road__lead { color: var(--ce-ink-60); }
.fo-road {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 66ch;
}
.fo-road__head {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin: 0 0 var(--space-3);
}
.fo-road__list { list-style: none; margin: 0; padding: 0; }
.fo-road__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: var(--ce-hairline);
}
.fo-road__list .fo-road__item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fo-road__item--plain {
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.65;
}
.fo-road__title {
  font-family: var(--ce-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--ce-ink);
  line-height: 1.3;
}
.fo-road__by {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ce-ink-30);
}
.fo-road__note {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
}
.fo-road__link {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 2px;
  align-self: flex-start;
}
.fo-road__caveat {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--ce-ink-30);
  line-height: 1.5;
}
.fo-road__tiein {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
}
.fo-road__tiein-btn {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  background: var(--ce-accent);
  color: var(--ce-ink);
  border: none;
  border-radius: var(--ce-radius-pill);
  padding: 5px 14px;
  margin-left: var(--space-1);
  cursor: pointer;
}

/* Comparison cards — inviting, tappable. Soft lavender-tinted panels (NO
   left border), Bricolage title, a lift on hover so they read as cards. */
.fo-compares { display: flex; flex-direction: column; gap: var(--space-3); max-width: 66ch; }
.fo-compare {
  display: block;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--ce-lavender-tint);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  cursor: pointer;
  color: var(--ce-ink);
  font-family: var(--ce-font-body);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.fo-compare:hover {
  border-color: var(--ce-ink);
  transform: translateY(-2px);
}
.fo-compare__title {
  display: block;
  font-family: var(--ce-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--ce-ink);
  margin-bottom: 6px;
}
.fo-compare__body { display: block; font-size: var(--text-sm); line-height: 1.65; color: var(--ce-ink-60); margin-bottom: 8px; }
.fo-compare__go {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fo-profile-end { margin: var(--space-6) 0 0; }

/* The break between discovery and admissions */
.fo-gate-break {
  font-family: var(--ce-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ce-ink);
  margin: var(--space-12) 0 var(--space-6);
  padding-top: var(--space-6);
  border-top: 2px solid var(--ce-ink);
}

@media (max-width: 480px) {
  .fo-prose { font-size: 1rem; }
  .fo-gate-break { font-size: 1.35rem; }
}

/* Graduation card — reuses the next-step card shape; the butter-yellow
 * eyebrow block is the celebratory (but calm) differentiator. */
.home-grad { border-top: 3px solid var(--ce-accent); }
.home-grad__eyebrow {
  display: inline-block;
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--ce-accent);
  color: var(--ce-ink);
  padding: 2px 10px;
  border-radius: 2px;
  margin-bottom: var(--space-3);
}

/* Balance verdict at the top of the insights card */
.shortlist-balance {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--ce-hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shortlist-balance__counts {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ce-ink);
}
.shortlist-balance__advice {
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
}
.shortlist-reg-windows { font-family: var(--ce-font-mono); font-size: 12px; color: var(--ce-ink-60); }
.shortlist-legend {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  color: var(--ce-ink-60);
  letter-spacing: .01em;
}

/* Test timing on shortlist cards — one quiet mono line per test */
.card-test-timing {
  margin: 4px 0 0;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ce-ink-60);
}
.card-test-timing a { color: var(--ce-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Applying view: per-test registration checklist */
.applying-test-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.applying-test-list li {
  font-family: var(--ce-font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  padding: var(--space-3) var(--space-4);
  border: var(--ce-hairline);
  background: var(--ce-surface);
}
.applying-test-list li strong { font-family: var(--ce-font-mono); }
.applying-test-full { color: var(--ce-ink-60); }
.applying-test-link {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.applying-test-note {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
}

/* ── Neutralise leftover per-category colouring that out-specifies the
 *    global rules (cat badge must stay muted ink even on the reference). ── */
.card-cat-badge {
  color: var(--ce-ink-60) !important;
  background: transparent !important;
  font-weight: 700;
}
/* Planner selected card → clean ink ring (tokens already resolve to ink) */
.plan-cat-card.active { background: var(--ce-bg); }
.plan-cat-card.active .plan-cat-card__label,
.plan-cat-card.active .plan-cat-card__icon { color: var(--ce-ink); }
/* Field/strength card names → Bricolage; their descriptions stay body (Hanken) */
.plan-cat-card__label { font-family: var(--ce-font-display); font-weight: 700; letter-spacing: -.01em; }
.plan-cat-card .picker-hint-inline { font-family: var(--ce-font-body); }

/* ═══════════════════════════════════════════════════════════════
 * ACHIEVEMENTS & ACTIVITIES LOG — calm tracker on the Applying view.
 * CE language: hairline cards, Bricolage titles, mono group labels,
 * butter-yellow only on the primary add/save action. No left borders.
 * ═══════════════════════════════════════════════════════════════ */
.achv__count {
  font-family: var(--ce-font-mono);
  font-size: .95rem;
  font-weight: 400;
  color: var(--ce-ink-60);
}
/* The one philosophy note, sitting BELOW the entries and the add action —
   context for the curious, never a gate in front of the page. */
.achv__note {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--ce-hairline);
  max-width: 62ch;
}
.achv__empty {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-5);
}
.achv__empty p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.65;
}
/* The empty state is a counselor's opening question, so it carries the
   weight of a question rather than the greyed tone of a hint. */
.achv__empty-q {
  font-family: var(--ce-font-display);
  font-size: var(--text-lg) !important;
  color: var(--ce-ink) !important;
  line-height: 1.4 !important;
  max-width: 40ch;
}
/* One rotating invitation above the add action. An offer, not a task. */
.story__invite {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.5;
}
.story__invite.hidden { display: none; }

/* ─── UCAS statement drafting ─────────────────────────────────────
   Three plain editors under the story bank. Counters are Space Mono
   statements of fact; over/under states are text, never alarms. */
.stmt {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--ce-hairline);
}
.stmt--locked { padding-bottom: var(--space-2); }
.stmt__locked-line {
  margin: 0;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ce-ink-30);
}
.stmt__locked-link {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.stmt__head {
  font-family: var(--ce-font-display);
  font-size: var(--text-xl);
  color: var(--ce-ink);
  margin: 0 0 var(--space-2);
}
.stmt__format {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
  max-width: 62ch;
}
/* Shared total: a slim sticky mono line so the running count stays visible
   wherever the student is typing. Sits below the sticky app nav (top offset
   = nav height); plain text on canvas, hairline underline, no box. */
.stmt__total {
  position: sticky;
  top: 57px;
  z-index: 5;
  margin: 0 0 var(--space-4);
  padding: 6px 0;
  background: var(--ce-bg);
  border-bottom: var(--ce-hairline);
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ce-ink-60);
}
.stmt__total--over { color: var(--ce-ink); font-weight: 700; }
/* Section eyebrow: mono small-caps + a small butter swatch, the same
   eyebrow grammar as the landing sections. */
.stmt__eyebrow {
  margin: 0 0 6px;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
}
.stmt__swatch {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 8px;
  background: var(--ce-accent);
}
/* Zero entries: one consolidated line under the intro; the rails hide. */
.stmt__empty-line {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
  max-width: 58ch;
}
.stmt--no-entries .stmt__refs { display: none; }
.stmt--no-entries .stmt__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "editor" "meta";
}
.stmt__q {
  border-top: var(--ce-hairline);
  padding-top: var(--space-4);
  margin-bottom: var(--space-5);
}
/* The sticky total already draws a hairline; question 1 must not add a
   second one directly beneath it. */
[data-stmt-empty] + .stmt__q { border-top: none; padding-top: var(--space-2); }
.stmt__question {
  margin: 0 0 4px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ce-ink);
  line-height: 1.45;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
/* Functional-layer question number, scaffold-form grammar ("1 · …"),
   in the section's accent (butter's readable text token). */
.stmt__qnum {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--ce-status-possible);
  flex-shrink: 0;
}
.stmt__prompt {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.55;
  max-width: 58ch;
}
.stmt__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "editor refs" "meta refs";
  gap: var(--space-2) var(--space-4);
}
.stmt__ta {
  grid-area: editor;
  display: block;
  width: 100%;
  min-height: 9.5rem;           /* ~6 lines at 16px/1.6 */
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-3);
  font-family: var(--ce-font-body);
  font-size: 16px;              /* ≥16px so phone browsers don't zoom the field */
  line-height: 1.6;
  color: var(--ce-ink);
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  resize: none;                 /* auto-grow replaces the manual handle */
}
/* Focus: the hairline shifts to the butter accent. No glow, no shadow. */
.stmt__ta:focus { outline: none; border-color: var(--ce-accent); }
.stmt__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.stmt__count {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ce-ink-60);
}
.stmt__copy {
  padding: 0;
  background: none;
  border: none;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Dimmed and inert while the box is empty — same footprint, no shift. */
.stmt__copy:disabled {
  color: var(--ce-ink-30);
  cursor: default;
  pointer-events: none;
}
/* The rail is height-capped BY its textarea: height:0 + min-height:100%
   makes the grid row's height come from the editor column alone, and the
   rail scrolls inside that. */
.stmt__refs {
  grid-area: refs;
  min-width: 0;
  height: 0;
  min-height: 100%;
  overflow-y: auto;
}
.stmt__refs-label {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  margin-bottom: var(--space-2);
}
.stmt__refs .achv-card { margin-bottom: var(--space-2); }
.stmt__refs-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
}
.stmt__refs-add {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (max-width: 700px) {
  /* Phone order: textarea → rail → counter line. */
  .stmt__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "editor" "refs" "meta";
  }
  .stmt__refs { height: auto; min-height: 0; max-height: 45vh; }
}
.achv-group { margin-bottom: var(--space-5); }
.achv-group__label {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin: 0 0 var(--space-2);
}
.achv-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-2);
}
.achv-card__title {
  font-family: var(--ce-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--ce-ink);
  line-height: 1.25;
}
.achv-card__meta {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink-60);
  margin-top: 2px;
}
.achv-card__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.achv-card__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.achv-card__btn {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ce-ink-60);
  background: transparent;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  padding: 3px 12px;
  cursor: pointer;
}
.achv-card__btn:hover { color: var(--ce-ink); border-color: var(--ce-ink-30); }
.achv-card__btn--del[data-armed] { color: var(--ce-status-reach); border-color: var(--ce-status-reach); }
.achv__addbtn { margin-top: var(--space-2); }
.achv__form {
  margin-top: var(--space-4);
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.achv__form-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.achv__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 140px;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
}
.achv__label--grow { flex: 2; }
.achv__req { color: var(--ce-status-possible); margin-left: 2px; }
/* Per-type hint under the Type select — one muted line, no box. */
.achv__type-hint {
  display: block;
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--ce-ink-30);
  line-height: 1.5;
}
/* What counts — plain mono line under the type picker, no pill, no border */
.achv__widen-note {
  display: block;
  margin-top: 4px;
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
  line-height: 1.5;
}
/* 150-character description target — same tone at every length: a target,
   never an error state */
.achv__desc-count {
  display: block;
  margin-top: 3px;
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
}
.achv__desc-count-note {
  display: block;
  margin-top: 2px;
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  color: var(--ce-ink-30);
  line-height: 1.5;
}
.achv__input, .achv__select {
  font-family: var(--ce-font-body);
  font-size: var(--text-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ce-ink);
  background: var(--ce-bg);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-2) var(--space-3);
  width: 100%;
}
.achv__input::placeholder { color: var(--ce-ink-30); }
.achv__input:focus, .achv__select:focus { outline: none; border-color: var(--ce-ink); }
.achv__textarea { resize: vertical; }
.achv__error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-status-reach);
}
.achv__form-actions { display: flex; gap: var(--space-3); }

/* ─── Story bank: reflections, field tags, per-field views, counsel ─── */
.achv__opt { color: var(--ce-ink-30); font-weight: 400; text-transform: none; letter-spacing: 0; }

.story-view__header { margin-bottom: var(--space-5); }
.story-view__title {
  font-family: var(--ce-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  letter-spacing: -.02em;
  color: var(--ce-ink);
  margin: 0 0 var(--space-2);
}
.story-view__sub { font-size: var(--text-sm); color: var(--ce-ink-60); line-height: 1.6; margin: 0; max-width: 62ch; }

/* Per-field summary line + gap counsel */
.story__summary { margin: 0 0 var(--space-4); }
.story__summary-line {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ce-ink-60);
  margin: 0;
  overflow-wrap: anywhere;
}
.story-group { margin-bottom: var(--space-5); }
.story-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
}
.story-group__label {
  font-family: var(--ce-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ce-ink);
}
.story-group__count {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.story-group__inactive {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.story-group__src {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.story-group--inactive .story-group__label { color: var(--ce-ink-60); }
.story-group--inactive .achv-card { opacity: .72; }

.story-counsel {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--ce-radius);
  background: var(--ce-bg);
  color: var(--ce-ink-60);
}
.story-counsel--strong {
  background: var(--ce-sage-tint);
  color: var(--ce-ink);
}

/* Reflections inside a card — the substance of the story */
.story-card__reflections {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.story-card__reflection {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.story-card__rlabel {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  margin-bottom: 1px;
}

/* Collapsible story cards + the synthesis block */
.story-card { display: block; }
.story-card__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.story-card__summary::-webkit-details-marker { display: none; }
.story-card__caret {
  margin-left: auto;
  font-size: 11px;
  color: var(--ce-ink-30);
  transition: transform var(--t-fast);
}
.story-card[open] .story-card__caret { transform: rotate(180deg); }
/* Scaffold answers as labelled lines: micro mono label + body text. */
.story-card__scaffold { margin: 0 0 var(--space-2); }
.story-card__line { margin-bottom: var(--space-2); }
.story-card__line:last-child { margin-bottom: 0; }
.story-card__linelabel {
  font-family: var(--ce-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  margin-bottom: 1px;
}
.story-card__linetext {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
/* Read-only rail cards: explicit mono expand affordance; the label swaps
   with the details [open] state, pure CSS. */
.story-card__more {
  flex-shrink: 0;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ce-ink-60);
}
.story-card__more::after { content: 'More ˅'; }
.story-card[open] .story-card__more::after { content: 'Less ˄'; }
.story-card__body { margin-top: var(--space-2); }
.story-card__synthesis {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.story-card .achv-card__actions { margin-top: var(--space-2); justify-content: flex-end; }

/* Scaffolded 3-step micro-prompts */
.story-step__head { display: block; margin-bottom: var(--space-1); }
.story-step__num {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  margin-bottom: 1px;
}
.story-step__eg {
  display: block;
  margin-top: var(--space-1);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.5;
}

/* Reflection prompts in the form */
.story__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--ce-bg);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
}
.story__prompts-lead {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.5;
}
.achv__label--prompt { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); font-weight: 700; }

/* Field tag picker */
.story__tagpicker { display: flex; flex-direction: column; gap: var(--space-2); }
.story__tag-label {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
}
.story__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.story-tag {
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ce-ink-60);
  background: transparent;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius-pill);
  padding: 4px 14px;
  cursor: pointer;
}
.story-tag:hover { border-color: var(--ce-ink-30); color: var(--ce-ink); }
.story-tag--on {
  color: var(--ce-ink);
  background: var(--ce-accent-tint);
  border-color: var(--ce-ink);
}
.story-tag--inactive { font-style: italic; opacity: .7; }
.story__tag-hint { font-size: 12px; color: var(--ce-ink-30); line-height: 1.4; }

.home-story-slot { display: contents; }
@media (max-width: 480px) {
  .achv-card { flex-direction: column; }
  .achv-card__actions { align-self: flex-end; }
  .achv__form-row { flex-direction: column; }
  .achv__form-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
 * YEAR-AWARE JOURNEY — year select, stage proposal, framing tones.
 * ═══════════════════════════════════════════════════════════════ */
/* Year cards: compact single-line buttons in the stage-select layout */
.stage-cards--years { max-width: 520px; }
.stage-card--year { padding: var(--space-4) var(--space-5); }
.stage-card--year .stage-card__title { font-size: 1.15rem; }

/* Stage proposal — the reasoning is the hero */
.stage-proposal__reason {
  max-width: 560px;
  margin: var(--space-5) auto var(--space-6);
  font-family: var(--ce-font-body);
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ce-ink);
  text-align: center;
}
/* The in-copy door to Exploring fields — body text with an underline, in
   the reason's own style. A link in a sentence, not a banner or a pill. */
.stage-proposal__link {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Home late-joiner line: one plain mono sentence, no box, no border. */
.home-explore-nudge {
  margin: var(--space-4) 0 0;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ce-ink-60);
  line-height: 1.6;
}
.home-explore-nudge__link {
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.stage-proposal__reason strong {
  background: var(--ce-accent);
  padding: 0 6px 1px;
  border-radius: 2px;
  font-weight: 700;
}
.stage-proposal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Retro (informational) tone for door-closing copy — the decision is made,
 * so the same fact reads as reference, not as a warning. */
.plan-chip-closure--info,
.plan-drop-closure--info {
  color: var(--ce-ink-60);
  font-weight: 400;
}

/* Year-relevant test-timing note on the Applying checklist */
.applying-timeline-note {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
}
.applying-timeline-note strong { color: var(--ce-ink); }

@media (max-width: 480px) {
  .stage-proposal__actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
 * FREE-CHOICE SLOT — an incomplete subject combination shows a dashed
 * placeholder chip ("+ one more of your choice") so it never reads as a
 * complete application set. Distinct from a real subject chip: dashed,
 * muted, no hover-fill. Plus the general honest-framing note.
 * ═══════════════════════════════════════════════════════════════ */
.plan-combo-tag--free,
.fo-chip--free {
  border-style: dashed !important;
  border-color: var(--ce-ink-30) !important;
  background: transparent !important;
  color: var(--ce-ink-60) !important;
  font-style: italic;
  white-space: nowrap;
}
.plan-combo-row:hover .plan-combo-tag--free { background: transparent; }
.plan-combo-note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
  max-width: 68ch;
}

/* ═══════════════════════════════════════════════════════════════
 * ONBOARDING SUBJECT CAPTURE — the live Check picker, placed in a
 * full-screen onboarding step for late-year students. CE language:
 * the picker brings its own surface/hairlines; butter yellow stays
 * on the single primary action ("These are my subjects").
 * ═══════════════════════════════════════════════════════════════ */
.subject-onboard__slot {
  max-width: 760px;
  margin: var(--space-6) auto 0;
  text-align: left;
}
/* The picker section normally sits inside a panel — give it the same
 * breathing room the panel would when placed in the onboarding step. */
.subject-onboard__slot .subject-picker-section {
  background: var(--ce-surface);
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  padding: var(--space-5);
}
.subject-onboard__actions {
  margin-top: var(--space-6);
  align-items: center;
}
.subject-onboard__skip {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ce-font-mono);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--space-2) var(--space-3);
}
.subject-onboard__skip:hover { color: var(--ce-ink); }

/* ═══════════════════════════════════════════════════════════════
 * COURSE FINDER — have/missing comparison against the student's
 * saved subjects. One honest sentence; the full-match variant may
 * use the status green, the gap variant stays neutral ink.
 * ═══════════════════════════════════════════════════════════════ */
.reverse-compare {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
}
.reverse-compare--met {
  color: var(--ce-status-strong);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
 * COMPACT SUBJECT SUMMARY — collapsed picker view for students
 * whose subjects are pre-loaded. One quiet line; Edit re-opens the
 * full picker. CE language: mono label, ink list, hairline only.
 * ═══════════════════════════════════════════════════════════════ */
.subject-picker-section--collapsed > :not(.subject-summary) { display: none; }
.subject-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.subject-summary__label {
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  white-space: nowrap;
}
.subject-summary__list {
  font-family: var(--ce-font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ce-ink);
  line-height: 1.5;
}
.subject-summary__dot { color: var(--ce-ink-30); font-weight: 400; }
.subject-summary__edit {
  background: none;
  border: var(--ce-hairline);
  border-radius: var(--ce-radius);
  cursor: pointer;
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  color: var(--ce-ink);
  padding: 2px 10px;
}
.subject-summary__edit:hover { border-color: var(--ce-ink); }

/* Interest filter: note shown while the My Fields default drives the lens */
.category-default-note { color: var(--ce-ink); }

/* ═══════════════════════════════════════════════════════════════
 * CARD "MORE ABOUT THIS COURSE" — unified expandable detail state
 * (field guide + structural notes + US explainer + university info
 * + official page). Inherits the .card-uni-info expander styling;
 * only the new section styles live here. CE: hairlines, mono
 * labels, no left borders.
 * ═══════════════════════════════════════════════════════════════ */
.card-more__guide {
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.card-more__guide-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card-more__guide-link:hover { opacity: .75; }
.card-more__notes {
  font-family: var(--ce-font-body);
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}
.card-more__us {
  font-family: var(--ce-font-body);
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}
.card-more__uni {
  border-top: 1px solid var(--ce-hairline-color);
  padding-top: var(--space-3);
  margin: 0 0 var(--space-2);
}
.card-more__head {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin-bottom: var(--space-2);
}
.card-more__official { display: inline-flex; margin-top: var(--space-1); }

/* Compact per-card US test line — replaces the repeated holistic box.
 * Mono metadata layer, consistent with the card's other meta lines. */
.card-us-test {
  font-family: var(--ce-font-mono);
  font-size: var(--text-xs);
  letter-spacing: .01em;
  color: var(--ce-ink-60);
  line-height: 1.6;
  margin-top: var(--space-3);
}

/* Sentence-length grade requirement text (HK/SG/CA): a plain mono line,
 * not a text-stuffed pill. Short grade tokens keep the pill above. */
.card-grades--long {
  display: block;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ce-ink-60);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
 * APPLICATION-YEAR ORIENTATION — compact timing block on the empty
 * Applying view for yearsUntilApplication === 0. Same honest
 * typical-windows framing as the per-course checklist that replaces
 * it once courses are saved. CE: hairlines only, no left borders.
 * ═══════════════════════════════════════════════════════════════ */
.applying-orientation__lead,
.applying-orientation__foot {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.65;
  margin: 0 0 var(--space-3);
}
.applying-orientation__lead strong,
.applying-orientation__foot strong { color: var(--ce-ink); }
.applying-orientation__list {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
}
.applying-orientation__list li {
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.7;
}
.applying-orientation__list strong { color: var(--ce-ink); }

/* ═══════════════════════════════════════════════════════════════
 * COUNSELOR SUMMARY — printable one-page snapshot.
 * Monochrome-safe by construction: hierarchy comes from Bricolage vs
 * mono type and hairlines, never from fills or colour, so it survives
 * greyscale printing intact.
 * ═══════════════════════════════════════════════════════════════ */
.cs-doc { max-width: 74ch; }
.cs-doc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ce-ink);
  margin-bottom: var(--space-5);
}
.cs-doc__title {
  font-family: var(--ce-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -.02em;
  color: var(--ce-ink);
  margin: 0 0 var(--space-1);
}
.cs-doc__sub { margin: 0; font-size: var(--text-sm); color: var(--ce-ink-60); line-height: 1.5; }
.cs-print-btn {
  flex-shrink: 0;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--ce-accent);
  color: var(--ce-ink);
  border: 1px solid var(--ce-ink);
  border-radius: var(--ce-radius-pill);
  padding: 7px 16px;
  cursor: pointer;
}
/* One line, not a banner: the print page is a snapshot, the backup file is
   the working data. Hidden when printing — it is a screen action. */
.cs-backup-line {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ce-ink-60);
  max-width: 62ch;
}
.cs-backup-link {
  font: inherit;
  padding: 0;
  background: none;
  border: none;
  color: var(--ce-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media print { .cs-backup-line { display: none; } }

.cs-section { margin-bottom: var(--space-5); }
.cs-section__head {
  font-family: var(--ce-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-60);
  margin: 0 0 var(--space-2);
  padding-bottom: 3px;
  border-bottom: var(--ce-hairline);
}
.cs-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-2) var(--space-5); }
.cs-dl dt {
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
}
.cs-dl dd { margin: 0; font-size: var(--text-sm); color: var(--ce-ink); line-height: 1.5; }
.cs-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.cs-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 4px 0;
  border-bottom: var(--ce-hairline);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.cs-list li:last-child { border-bottom: none; }
.cs-list__main { color: var(--ce-ink); min-width: 0; overflow-wrap: anywhere; }
.cs-list__sub {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ce-ink-30);
}
.cs-list__side {
  /* Long registration-window text must wrap at narrow widths, never push
     the page wider (pre-existing 375px overflow). */
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink-60);
  text-align: right;
}
.cs-group { margin-bottom: var(--space-3); }
.cs-group__label {
  display: block;
  font-family: var(--ce-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ce-ink-30);
  margin-bottom: 2px;
}
.cs-lead, .cs-counsel {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ce-ink);
  line-height: 1.55;
}
.cs-counsel strong { display: block; font-family: var(--ce-font-mono); font-size: 12px; }
.cs-none { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-style: italic; color: var(--ce-ink-60); }
.cs-doc__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ce-ink);
}
.cs-doc__foot p {
  margin: 0 0 var(--space-1);
  font-size: 11px;
  color: var(--ce-ink-60);
  line-height: 1.5;
}

/* ─── Print: the summary IS the page; app chrome disappears ───── */
@media print {
  @page { margin: 14mm; }
  /* Everything except the summary panel is hidden outright. */
  /* Hide the PAGE footer only — scoped, because the summary's own honesty
     footer is also a <footer> and is the single most important line here. */
  .nav, .stage-bar, body > footer, .toast, .cs-print-btn { display: none !important; }
  #workspace > .panel:not(#panel-summary) { display: none !important; }
  body, .content, main { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-doc { max-width: none; color: #000; }
  .cs-doc__title { font-size: 20pt; }
  .cs-doc__sub { font-size: 9pt; }
  .cs-section { margin-bottom: 10pt; page-break-inside: avoid; }
  .cs-section__head { font-size: 8pt; color: #000; border-bottom: 0.5pt solid #000; }
  .cs-dl dt { font-size: 7pt; color: #444; }
  .cs-dl dd, .cs-list li, .cs-lead, .cs-counsel, .cs-none { font-size: 9pt; color: #000; }
  .cs-list li { border-bottom: 0.4pt solid #bbb; page-break-inside: avoid; }
  .cs-list__side, .cs-list__sub { color: #444; }
  .cs-group { page-break-inside: avoid; }
  .cs-doc__foot { border-top: 0.5pt solid #000; margin-top: 12pt; }
  .cs-doc__foot p { font-size: 7.5pt; color: #333; }
}

/* US holistic honesty: a US course is capped at MATCH — never a safety. */
.card-us-nosafety {
  margin: var(--space-1) 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.5;
}
.applying-summary__note {
  margin: 0 0 var(--space-3);
  font-size: 12px;
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.5;
}

/* ── Applying: the diagnostic leads the page ──────────────────── */
.applying-diag {
  padding: 0 0 var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: var(--ce-hairline);
}
.applying-diag__counts {
  margin: 0 0 var(--space-1);
  font-family: var(--ce-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ce-ink);
  line-height: 1.5;
}
.applying-diag__advice {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--ce-ink);
  line-height: 1.55;
  max-width: 64ch;
}
.applying-diag__load {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.55;
  max-width: 64ch;
}
.applying-diag__aside {
  margin: 0 0 var(--space-2);
  font-size: 12px;
  font-style: italic;
  color: var(--ce-ink-60);
  line-height: 1.5;
}
.applying-diag__meta {
  margin: var(--space-3) 0 0;
  font-family: var(--ce-font-mono);
  font-size: 12px;
  color: var(--ce-ink-60);
  line-height: 1.7;
}
.applying-diag__meta strong { color: var(--ce-ink); }
.applying-diag__link { margin-left: var(--space-2); }

/* ── Preview mode (student applies in a later year) ───────────── */
.applying-preview__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ce-ink-60);
  line-height: 1.6;
  max-width: 64ch;
}
.applying-task--preview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--ce-hairline);
  opacity: .55;
  cursor: default;
}
.applying-task-group .applying-task--preview:last-child { border-bottom: none; }
.applying-task__marker {
  flex-shrink: 0;
  width: 17px;
  margin-top: 2px;
  text-align: center;
  color: var(--ce-ink-30);
}