/* ── Design tokens ────────────────────────────────────────────────────────── */
/* CSS variables (:root) act like a master supply rail in electronics — all "wires"
   pull their color/size/spacing values from this central definition. Changing one
   token updates everywhere it's referenced. Like a decoupling capacitor's C value
   — change it once, impact cascades through the whole circuit. */
:root {
  --bg:           #f4f7fb;        /* Page background — soft blue, minimal contrast fatigue */
  --card:         #ffffff;        /* Card/surface fill — white, maximum contrast vs text */
  --text:         #14213d;        /* Primary text color — dark navy, WCAG AA contrast */
  --muted:        #5d6b82;        /* Secondary/helper text — medium gray, de-emphasized */
  --border:       #dce4f0;        /* Divider and stroke color — subtle, light blue-gray */
  --primary:      #0f62fe;        /* Action/interactive blue — CTA buttons, links, focus states */
  --primary-dark: #0043ce;        /* Darker blue for hover/pressed states — increases contrast */
  --primary-light:#e8f0ff;        /* Light blue tint for highlights/selected backgrounds */
  --danger:       #b42318;        /* Error/destructive action color — red */
  --success:      #047857;        /* Positive/confirmation color — green */
  --warning:      #b45309;        /* Caution/alert color — orange */
  --shadow:       0 18px 45px rgba(20,33,61,0.08);  /* Elevation drop shadow — creates depth */
  --radius:       20px;           /* Border-radius token — consistent roundness across cards */
}

/* Global box model: border-box means padding/borders are included in width calculations
   (vs content-box where they're added). Like a PCB footprint: does your 10mm component
   include or exclude silkscreen margin? border-box = include, always. */
* { box-sizing: border-box; }

body {
  margin: 0;
  /* Radial gradient: soft blue glow from top-left that transitions to main bg.
     Creates visual depth without complexity. Like a shader falloff in 3D graphics. */
  background: radial-gradient(circle at top left, #e7f0ff 0, var(--bg) 36rem);
  color: var(--text);
  /* Font stack: tries Inter first (system font), falls back to system UI fonts.
     Like error handling: try primary, cascade to fallbacks if unavailable. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Inherit font properties into form elements — they don't inherit by default in HTML.
   Without this, buttons/inputs appear in browser default (Times New Roman) instead of Inter. */
button, input, select { font: inherit; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
/* Main container for the page. 'Shell' wraps all content like a protective IC housing. */
.shell {
  /* Responsive width: min(1200px, calc(100% - 32px)) is like a voltage clamp circuit:
     "Be max 1200px, but if viewport < 1232px, leave 16px margin on each side."
     Width = min(hard limit, viewport - gutters). Prevents full-width text ugliness. */
  width: min(1200px, calc(100% - 32px));
  /* Center horizontally: left and right margins both auto. Flexbox would also work. */
  margin: 0 auto;
  /* Padding = breathing room. 48px top = hero section space. 80px bottom = scrolling space. */
  padding: 48px 0 80px;
  /* Flexbox column: vertically stack children. Like a bus arbiter: controls child spacing/order. */
  display: flex;
  flex-direction: column;
  /* Gap creates space between flex children. Cleaner than margin hacks. 20px = visual rhythm. */
  gap: 20px;
}

/* Navigation bar at top of pages (breadcrumbs or page links). */
.page-nav {
  /* Flexbox row layout with wrapping. Like a bus that can route signals across multiple lanes. */
  display: flex;
  /* Wrap to next line if needed — responsive without media queries. */
  flex-wrap: wrap;
  /* Vertically center items (helpful if nav has mixed heights). */
  align-items: center;
  /* gap: 6px 4px = "6px vertical, 4px horizontal". Different gutters for row/column wrap. */
  gap: 6px 4px;
  font-size: 0.95rem;
  padding: 6px 0;  /* Thin padding: y-axis only. x-axis = 0 (child links add their own). */
  border-bottom: 1px solid rgba(0,0,0,0.08);  /* Subtle divider. Not --border, but similar. */
  margin-bottom: 8px;
}

/* Navigation links (individual breadcrumbs/page tabs). */
.page-nav a {
  color: var(--primary);      /* Blue, like a hyperlink. */
  text-decoration: none;      /* Remove underline for cleaner look. */
  font-weight: 600;           /* Semi-bold, readable but not headline weight. */
  padding: 6px 12px;          /* Small padding: creates touch target, visual separation. */
  border-radius: 999px;       /* Full rounding = pill shape. Like a rounded component on PCB. */
  line-height: 1;             /* Minimal vertical space. Capsule stays compact. */
  /* Transition animates background on hover. 120ms = feels snappy, not sluggish. */
  transition: background-color 120ms ease;
}

/* Hover state: subtle background tint. Like LED getting brighter on a circuit. */
.page-nav a:hover {
  background: rgba(0,0,0,0.05);   /* Very faint gray overlay (5% black). */
  text-decoration: none;           /* Still no underline. Consistency. */
}

/* aria-current="page" = accessibility attribute marking the active nav item.
   Semantic HTML: tells screen readers "you are here." Visual = filled pill with white text. */
.page-nav a[aria-current="page"] {
  background: var(--primary);  /* Filled background = selected state. High contrast. */
  color: #fff;                 /* White text on blue background (required for WCAG AA). */
  cursor: default;             /* Can't click the current page. Pointer -> default. */
}

/* No hover change for active nav item — already highlighted. */
.page-nav a[aria-current="page"]:hover {
  background: var(--primary);  /* Same color, no transition. No false feedback. */
}

/* Spacer in flexbox that grows to fill remaining space.
   Like a diode in reverse bias: flex: 1 claims all available space.
   Pushes anything after it to the right edge. Common pattern for nav bars. */
.page-nav .nav-spacer {
  flex: 1;  /* Grab all remaining width. Left sibling stays left, right sibling pushed right. */
}

/* Beta badge/label — denotes experimental feature. Small, right-aligned visual indicator. */
.beta-badge {
  display: inline-block;        /* Treat text as a box element (not text, not full block). */
  margin-left: auto;            /* Push to right edge via margin. Flexbox-aware alternative to float. */
  padding: 3px 10px;            /* Tiny padding: compact label. */
  background: #fffbeb;          /* Warm yellow background (warning-adjacent hue). */
  color: #92400e;               /* Dark brown text on yellow: readable contrast. */
  border: 1px solid #f59e0b;    /* Border matches color family = cohesive "warning" aesthetic. */
  border-radius: 999px;         /* Rounded pill = badge shape. */
  font-size: 0.75rem;           /* Small = secondary information, doesn't compete with main nav. */
  font-weight: 700;             /* Bold: readable at small size. */
  letter-spacing: 0.04em;       /* Slight letter-spacing: cleaner typography. */
  white-space: nowrap;          /* Force single line. "BETA" never wraps. */
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* Hero section: large, prominent heading area. Introduces page purpose. */
.hero {
  max-width: 780px;   /* Constrain width for readability. Narrow columns prevent eye strain. */
  margin-bottom: 8px; /* Minimal space below hero before next content block. */
}

/* Home page variant of hero (h1 gets special spacing). */
.home-hero {
  margin-bottom: 0;   /* No gap after: content flows directly below. */
}

.home-hero h1 {
  margin-bottom: 14px;  /* Space between heading and subtitle/description. */
}

/* Main heading inside hero. Uses fluid typography. */
.hero h1 {
  margin: 0 0 14px;
  /* clamp(min, ideal, max) = "font-size between 1.4rem and 2rem, prefer 2.8% of viewport."
     Like a proportional control circuit: scales with viewport but has hard limits.
     Prevents text too small on mobile (1.4rem min) or too large on desktop (2rem max). */
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.05;                /* Tight leading. Headline-style, not body-copy spacing. */
  letter-spacing: -0.04em;          /* Negative letter-spacing: tighter, more premium look. */
  hyphens: none;                    /* Never hyphenate words across lines. Keeps impact intact. */
  overflow-wrap: normal;            /* Don't break long words. Keep them whole (use white-space instead). */
  white-space: nowrap;              /* Force single line on desktop. */
}

/* Mobile: change heading to wrap, use different clamp range. */
@media (max-width: 600px) {
  .hero h1 {
    /* Smaller clamp range (1.1rem - 1.5rem) and higher vw multiplier (5vw vs 2.8vw)
       for tighter mobile viewport. Scaling is more aggressive relative to tiny screens. */
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    white-space: normal;  /* Allow wrapping: mobile screens narrow, text must flow. */
  }
}

/* Hero subtitle/description text. Secondary information below headline. */
.hero p {
  color: var(--muted);    /* Gray text: subordinate to headline. */
  font-size: 1.06rem;     /* Slightly larger than body: easy to scan. */
  line-height: 1.65;      /* Generous leading: comfortable reading rhythm. */
  margin: 0;              /* No default margins. Spacing controlled by parent. */
}

/* Eyebrow label: tiny text above headline. "Section label" or "Category tag".
   Like a label on an IC: identifies the purpose before the main content. */
.eyebrow {
  color: var(--primary);        /* Blue: same as interactive elements, signals importance. */
  font-size: 0.78rem;           /* Tiny: definitely secondary. */
  font-weight: 800;             /* Bold: readable despite small size. */
  letter-spacing: 0.12em;       /* Wide letter-spacing: ultra-readable + premium feel. */
  text-transform: uppercase;    /* All caps: stands out, unambiguous. "STEP 1", not "Step 1". */
  margin: 0 0 10px;             /* Bottom margin creates gap before headline. */
}

/* ── Status bar ───────────────────────────────────────────────────────────── */
/* Status display card. Shows system/form state at a glance. */
.status-card {
  /* Flexbox row, centered vertically, space-between distributes children left/right. */
  display: flex;
  align-items: center;           /* Vertically centered (useful if content has varying heights). */
  justify-content: space-between; /* Left and right extremes: max horizontal spread. */
  gap: 18px;                      /* Fallback gap if no space-between (unlikely here). */
  /* Semi-transparent white: overlays, shows slight blur/color of content below.
     Like a frosted glass IC cover: see through but diffused. */
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);  /* Subtle border: defines card edge. */
  border-radius: 16px;              /* Rounded corners: softer, modern look. */
  box-shadow: var(--shadow);        /* Elevation: lifts card above page surface. */
  padding: 16px 20px;               /* Breathing room inside card. 20px horizontal = left/right margin. */
}

/* Remove default paragraph margins inside status-card. */
.status-card p { margin: 0; }

/* Label for status display. Small, uppercase, bold. Like text on an LED indicator. */
.label {
  color: var(--primary);            /* Blue: consistent with UI accent color. */
  font-size: 0.72rem;               /* Very small: supporting role. */
  font-weight: 800;                 /* Bold: readable despite tiny size. */
  letter-spacing: 0.12em;           /* Spaced out letters: cleaner than default. */
  text-transform: uppercase;        /* ALL CAPS: unmistakable. */
  margin: 0 0 3px;                  /* Tiny bottom margin before value. Optical spacing. */
}

/* Status text defaults to muted (gray) — neutral, informational. */
.status       { color: var(--muted);   font-size: 0.9rem; }
/* Status.ok = green. Success/confirmation signal. Like green LED on circuit. */
.status.ok    { color: var(--success); }
/* Status.error = red. Problem/alert signal. Like red LED. */
.status.error { color: var(--danger);  }

/* ── Cards ────────────────────────────────────────────────────────────────── */
/* Generic card container. Reusable layout for content blocks.
   Like a modular IC package: same dimensions, swappable content. */
.card {
  background: rgba(255,255,255,0.94);  /* Near-white with slight transparency. */
  border: 1px solid var(--border);     /* Subtle divider from background. */
  border-radius: var(--radius);        /* 20px roundedness: consistent across all cards. */
  box-shadow: var(--shadow);           /* Elevation shadow: separates card from page. */
  padding: 28px 28px 24px;             /* Generous internal padding. 24px bottom (slightly less). */
}

/* ── Step cards ───────────────────────────────────────────────────────────── */
/* Container for a multi-step form/wizard section. Stacks elements vertically with spacing. */
/* ── Focused-mode summary banner (replaces steps 1-3 when fully prefilled) ── */
.focused-summary {
  background: var(--primary-light, #eef3fb);
  border: 1px solid #c7d8f0;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.focused-rows { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.focused-row  { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.focused-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.focused-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}
.focused-change-btn {
  background: none;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.focused-change-btn:hover { background: var(--primary-light); }

.step-card {
  display: flex;
  flex-direction: column;  /* Stack children vertically. */
  gap: 20px;              /* Even spacing between child elements. */
}

/* Header row inside step: badge + title. Flexbox keeps them aligned horizontally. */
.step-header {
  display: flex;
  align-items: center;    /* Vertically centered: badge and title heights don't matter. */
  gap: 14px;              /* Space between badge and title. */
  flex-wrap: wrap;        /* If too cramped, title wraps below badge (responsive). */
}

/* Step number badge: circular pill with number. Like a breadcrumb or chip counter. */
.step-badge {
  /* inline-flex = acts like inline but can have flex properties (rare use case). */
  display: inline-flex;
  align-items: center;        /* Center content vertically. */
  justify-content: center;    /* Center content horizontally. */
  width: 32px;
  height: 32px;
  border-radius: 50%;         /* Make circle (32x32 + 50% radius = perfect circle). */
  background: var(--primary); /* Blue background: matches action color. */
  color: #fff;                /* White text: high contrast on blue. */
  font-weight: 800;           /* Bold number: readable in small circle. */
  font-size: 0.88rem;         /* Fits in 32px without crowding. */
  flex-shrink: 0;             /* Never shrink: keeps badge square/circular even if space tight. */
}

/* H2 heading inside step-header. */
.step-header h2 {
  margin: 0;                 /* Remove default h2 margins. */
  font-size: 1.25rem;        /* Large but not headline-huge. */
  letter-spacing: -0.02em;   /* Tight: modern, premium. */
}

/* Optional subtitle next to step title. Muted color = secondary info. */
.step-subtitle {
  color: var(--muted);     /* Gray: de-emphasized. */
  font-size: 0.92rem;      /* Slightly smaller than h2. */
  font-weight: 600;        /* Semi-bold: readable but not as heavy as h2. */
  margin-left: 4px;        /* Tiny left margin: separates from title. */
}

.clear-chip-btn {
  margin-left: auto;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.clear-chip-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* ── Form controls ────────────────────────────────────────────────────────── */
/* Form row: label + input layout. Grid with 3 columns: label, input, extra space. */
.form-row {
  /* CSS Grid: like a breadboard layout. Columns are like signal rails, rows are like bus slots. */
  display: grid;
  /* 3 columns: 180px (label), 200px (input), 1fr (remaining space).
     Fixed widths for labels/inputs, flexible remainder. Like power budget allocation. */
  grid-template-columns: 180px 200px 1fr;
  gap: 18px;           /* Gutter between grid cells. */
  align-items: start;  /* Align children to top of their row (not centered). */
}

/* Label styling. Grid display = stacks content vertically inside each label. */
label {
  /* Label wraps <input> or is paired with one. Grid inside = stack label text + input. */
  display: grid;
  gap: 7px;              /* Space between label text and input field. */
  color: var(--muted);   /* Gray: secondary text. */
  font-size: 0.88rem;    /* Readable but not prominent. */
  font-weight: 700;      /* Bold: distinguishes from placeholder/value text. */
}

/* Input and select styling. Same treatment = consistent form appearance. */
input, select {
  width: 100%;           /* Fill container width (Grid or parent). */
  border: 1px solid var(--border);  /* Subtle outline: defines field edge. */
  border-radius: 12px;   /* Rounded: modern, not sharp rectangles. */
  color: var(--text);    /* Text color: main content. */
  background: #fff;      /* White background: high contrast for text. */
  padding: 11px 13px;    /* Breathing room: x=left/right, y=top/bottom. */
  outline: none;         /* Disable browser default outline (we use box-shadow instead). */
  /* Smooth transition on focus: user sees border/shadow change, not jarring snap. */
  transition: border-color 0.15s, box-shadow 0.15s;
}

.clearable-wrap input {
  padding-right: 40px;
}

.clear-inline-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 900;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.clear-inline-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

/* Focus state: when field is active/selected by user. */
input:focus, select:focus {
  border-color: var(--primary);           /* Border turns blue: "this field is active". */
  /* Box-shadow creates colored halo around field. Like a focus indicator ring on a PCB trace.
     0 0 0 3px = 3px spread, no offset/blur. rgba(15,98,254,0.13) = light blue glow. */
  box-shadow: 0 0 0 3px rgba(15,98,254,0.13);
}

.university-list-block {
  display: grid;
  gap: 10px;
}

.list-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.university-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.university-item {
  display: grid;
  gap: 3px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.university-item:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,98,254,0.10);
}

.university-item.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.university-item-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.university-item-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Program chips ────────────────────────────────────────────────────────── */
/* Grid of program/degree option cards. Each is a selectable chip. */
.program-grid {
  /* CSS Grid with auto-fill: "fit as many 190px items as possible across width."
     Like a parts bin organizer: shelves are 190px wide, rows auto-add as needed. */
  display: grid;
  /* repeat(auto-fill, minmax(190px, 1fr)):
     - auto-fill: create as many columns as fit
     - minmax(190px, 1fr): each column is 190px minimum, grows equally if extra space
     Like voltage dividers: each resistor is 190 ohms minimum, but spreads load equally. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;  /* Tight spacing between chips. */
}

/* Individual program/degree option chip. Clickable, selectable. */
.program-chip {
  /* grid display = can align content inside (useful for multi-line text in a small box). */
  display: grid;
  align-content: start;  /* Align content to top of chip (not centered vertically). */
  gap: 6px;              /* Space between child elements (title, meta, badge). */
  background: #fff;      /* White background: card-like appearance. */
  border: 1.5px solid var(--border);  /* Thicker border than inputs (1.5px vs 1px): more prominent. */
  border-radius: 10px;   /* Slight rounding: not pill-shaped, slightly softer than sharp corner. */
  padding: 8px 11px;     /* Compact padding: chips are small. */
  cursor: pointer;       /* Change cursor to hand: "this is clickable". */
  text-align: left;      /* Left-align text (not centered). */
  /* Smooth transitions on interactive state changes. */
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

/* Hover state: highlight chip when mouse over. */
.program-chip:hover {
  border-color: var(--primary);           /* Border turns blue. */
  box-shadow: 0 0 0 3px rgba(15,98,254,0.10);  /* Subtle blue halo. */
}

/* Selected state: chip that user has clicked. */
.program-chip.selected {
  border-color: var(--primary);     /* Blue border: "this is active". */
  background: var(--primary-light); /* Light blue background: filled state. */
}

.chip-title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.3;
}

.chip-meta {
  font-size: 0.70rem;
  color: var(--muted);
  font-weight: 600;
}

.chip-badge,
.ac-degree-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fff7ed;
  color: var(--warning);
  border: 1px solid #fed7aa;
}

/* ── Loading spinner ──────────────────────────────────────────────────────── */
/* Loading indicator: spinner + text message. */
.loading-row {
  display: flex;
  align-items: center;  /* Vertically center spinner and text. */
  gap: 10px;            /* Space between spinner and text. */
  color: var(--muted);  /* Gray text: neutral, not alarming. */
  font-size: 0.9rem;    /* Small: secondary information. */
}

/* CSS spinner: animated circular border. Like a rotating buffer indicator. */
.spinner {
  display: inline-block;  /* Treat as inline element. */
  width: 16px;
  height: 16px;
  /* Border creates ring. Only top border is colored; others are light gray.
     Colored segment rotates, creating "waiting" illusion. */
  border: 2.5px solid var(--border);      /* Border all around = light gray ring. */
  border-top-color: var(--primary);       /* Top segment = blue. Visible as rotating indicator. */
  border-radius: 50%;                     /* Make circle. 16x16 + 50% = perfect circle. */
  /* animation: apply spinning keyframe. 0.7s = rotation duration. linear = constant speed. */
  animation: spin 0.7s linear infinite;
}

/* Keyframe animation: define what "spin" does. */
@keyframes spin {
  /* from/to = start and end state. Omitted 'from' defaults to element's initial state. */
  to { transform: rotate(360deg); }  /* Rotate one full circle. Repeats infinitely. */
}

/* ── Outcomes stats ───────────────────────────────────────────────────────── */
.outcomes-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-card {
  background: #f9fbff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
}

.stat-card.highlight {
  background: var(--primary-light);
  border-color: var(--primary);
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.stat-card strong { font-size: 1.3rem; display: block; }


/* ── Salary distribution chart ────────────────────────────────────────────── */
/* Horizontal bar chart showing salary distribution. Each column = salary range bucket. */

/* Chart title/label. Small, uppercase. */
.chart-title {
  margin: 0 0 14px;           /* Bottom margin: space before chart. */
  font-size: 0.84rem;         /* Small: secondary. */
  font-weight: 700;           /* Bold: readable. */
  color: var(--muted);        /* Gray: not emphasis. */
  letter-spacing: 0.04em;     /* Spaced letters: cleaner. */
  text-transform: uppercase;  /* All caps: distinct label. */
}

#salary-chart-wrap {
  margin-bottom: 18px;  /* Gap after entire chart section. */
}

/* Container holding all salary columns. Uses flex with flex-end alignment.
   Like a histogram: columns sit on baseline, heights vary. */
.salary-chart {
  display: flex;
  align-items: flex-end;  /* Align columns to bottom (taller = extends upward). */
  gap: 6px;               /* Tight spacing between columns. */
  height: 140px;          /* Fixed height for chart area. Like a scope trace window. */
  padding: 0 4px 10px;    /* Bottom padding = space for labels. Top/sides = margin. */
  border-bottom: 1px solid var(--border);  /* Baseline/x-axis line. */
}

/* Individual column in salary chart. */
.chart-col {
  /* Flex column: stacks count on top of bar. */
  display: flex;
  flex-direction: column;     /* Stack vertically: bar at bottom, count on top. */
  align-items: center;        /* Center bar and count horizontally. */
  justify-content: flex-end;  /* Push content to bottom (bar sits on baseline). */
  flex: 1;                    /* Equal width: share parent width equally. */
  gap: 5px;                   /* Space between bar and count label. */
  height: 100%;              /* Full height of chart (varies with bar height). */
}

/* The bar itself (rectangle in histogram). */
.chart-bar {
  width: 100%;              /* Fill column width. */
  background: var(--primary);  /* Blue bar. */
  border-radius: 6px 6px 0 0; /* Rounded top corners only (bottom sits on axis). */
  opacity: 0.85;            /* Slight transparency: layered look. */
  min-height: 4px;          /* Minimum height: even if 0 data, still visible line. */
  /* Animate bar height on data update (smooth transition vs instant jump). */
  transition: height 0.3s ease;
}

.chart-bar.entry { background: #7c3aed; }
.chart-bar.median { background: var(--primary); }

.chart-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  min-height: 1em;
}

.chart-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  padding-top: 6px;
  white-space: nowrap;
}

/* ── Table shared ─────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

/* Career detail table: 8 columns — let the browser size them naturally
   and scroll horizontally rather than cramming into fixed widths. */
table.detail-table {
  table-layout: auto;
  min-width: 860px;
}
table.detail-table th,
table.detail-table td {
  white-space: nowrap;
}
/* University and Degree Path columns need room to breathe */
table.detail-table th:nth-child(1),
table.detail-table td:nth-child(1) { min-width: 180px; white-space: normal; }
table.detail-table th:nth-child(2),
table.detail-table td:nth-child(2) { min-width: 160px; white-space: normal; }

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th, td {
  border-bottom: 1px solid var(--border);
  padding: 11px 12px;
  text-align: right;
  white-space: normal;
  vertical-align: top;
}

th:first-child, td:first-child { text-align: left; }
th:nth-child(1), td:nth-child(1) { width: 23%; }
th:nth-child(2), td:nth-child(2) { width: 15%; }
th:nth-child(3), td:nth-child(3) { width: 12%; }
th:nth-child(4), td:nth-child(4) { width: 12%; }
th:nth-child(5), td:nth-child(5) { width: 24%; }
th:nth-child(6), td:nth-child(6) { width: 14%; min-width: 100px; }

#imprecise-occ-table th:nth-child(1),
#imprecise-occ-table td:nth-child(1) { width: 24%; }
#imprecise-occ-table th:nth-child(2),
#imprecise-occ-table td:nth-child(2) { width: 34%; }
#imprecise-occ-table th:nth-child(3),
#imprecise-occ-table td:nth-child(3) { width: 42%; }

td.notes-cell {
  white-space: normal;
  text-align: left;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Salary note icon + popup ── */
td.note-icon-cell {
  text-align: center;
  width: 28px;
  padding: 0 4px;
}

.note-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.note-icon-btn:hover { color: var(--primary); }

.note-popup {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #374151;
  line-height: 1.5;
  z-index: 200;
  white-space: normal;
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fafbfd;
}

.active-row td { background: var(--primary-light); }
.row-neg td    { color: var(--danger); font-weight: 800; }
.row-neg       { color: var(--danger); font-weight: 800; }
.row-pos td    { color: var(--success); }

.drill-btn {
  width: 100%;
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.drill-btn:hover { background: var(--primary-light); }

.mono { font-family: ui-monospace, monospace; font-size: 0.84rem; }

.projection-table {
  table-layout: fixed;
}

#projection-table th,
#projection-table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}

#projection-table th.year-col,
#projection-table td.year-col {
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: left;
  white-space: nowrap;
}

#projection-table th.phase-col,
#projection-table td.phase-col {
  width: 96px;
  min-width: 96px;
  white-space: nowrap;
  text-align: left;
}

#projection-table th.scenario-head {
  width: auto;
  min-width: 0;
  text-align: center;
  line-height: 1.35;
}

#projection-table td.scenario-value {
  min-width: 0;
}

/* ── Step 4 sub-grid ──────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sub-card {
  background: #f9fbff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.sub-card h3 {
  margin: 0;
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}

.expense-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ── Actions ──────────────────────────────────────────────────────────────── */
.actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}

#submit-button {
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

#submit-button:hover    { background: var(--primary-dark); }
#submit-button:disabled { opacity: 0.55; cursor: not-allowed; }

#form-message {
  color: var(--danger);
  font-weight: 700;
  margin: 0;
  font-size: 0.9rem;
}

/* ── Projection results ───────────────────────────────────────────────────── */
#results { display: flex; flex-direction: column; gap: 20px; }

.results-assumptions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.results-assumptions-header h2 {
  margin: 0;
}

.results-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

#assumptions-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 15px;
  background: #f9fbff;
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric strong { display: block; font-size: 1.2rem; margin-top: 5px; }

.metric-wide {
  min-width: 0;
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.metric-lines {
  margin-top: 10px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: normal;
}

.metric-lines div {
  white-space: normal;
}

.secondary-button {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
}

.secondary-button:hover {
  background: var(--primary-light);
}

.scenario-metric {
  background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
}

/* ── Incremental ROI summary color coding (subtle) ────────────────────────── */
.scenario-metric.roi-excellent {
  border-left: 4px solid #34d399;
  background: linear-gradient(180deg, #f0fdf6 0%, #e8fef2 100%);
}
.scenario-metric.roi-good {
  border-left: 4px solid #6ee7b7;
  background: linear-gradient(180deg, #f4fdf8 0%, #ecfbf2 100%);
}
.scenario-metric.roi-moderate {
  border-left: 4px solid #fbbf24;
  background: linear-gradient(180deg, #fffdf0 0%, #fffae5 100%);
}
.scenario-metric.roi-late {
  border-left: 4px solid #f97316;
  background: linear-gradient(180deg, #fffaf5 0%, #fff4e8 100%);
}
.scenario-metric.roi-negative {
  border-left: 4px solid #f87171;
  background: linear-gradient(180deg, #fff5f5 0%, #fee8e8 100%);
}

.scenario-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.scenario-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  background: #f9fbff;
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
}

.scenario-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.line-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.line-chart-wrap {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fbfcff;
  padding: 10px;
}

.line-chart {
  width: 100%;
  height: auto;
  display: block;
}

.line-grid {
  stroke: #dce4f0;
  stroke-width: 1;
}

.line-axis {
  stroke: #aab8ce;
  stroke-width: 1.2;
}

.line-zero {
  stroke: #b42318;
  stroke-width: 1;
  stroke-dasharray: 5 5;
  opacity: 0.45;
}

.line-axis-label {
  fill: var(--muted);
  font-size: 11px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.line-axis-label.negative {
  fill: var(--danger);
  font-weight: 800;
}

.line-axis-label.positive {
  fill: var(--success);
  font-weight: 700;
}

.line-axis-label.zero {
  fill: var(--muted);
  font-weight: 700;
}

/* ── University autocomplete ─────────────────────────────────────────────── */
.autocomplete-wrap { position: relative; }

.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(20,33,61,0.13);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}

.ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
}

.ac-item:hover { background: var(--primary-light); color: var(--primary); }

.ac-empty {
  padding: 10px 16px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Degree cross-search row ──────────────────────────────────────────────── */
.degree-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}

.search-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 26px;   /* align with the input (label offset) */
}

.toggle-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toggle-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.toggle-opt input[type="radio"] { width: auto; cursor: pointer; }

/* Two-line autocomplete items (university + degree) */
.ac-item-degree { flex-direction: column; gap: 2px; align-items: flex-start; justify-content: flex-start; }
.ac-degree-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.ac-univ-name   { font-size: 0.78rem; color: var(--muted); }

/* City autocomplete items with rent badge */
.ac-rent-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .degree-search-row { grid-template-columns: 1fr; }
  .search-toggle      { padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  #assumptions-summary { grid-template-columns: 1fr; }
}

/* ── HUD hint ─────────────────────────────────────────────────────────────── */
.hud-hint {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 0.85rem;
}

/* ── Per-component student budget panel ─────────────────────────────────── */
#student-budget-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.component-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 4px;
  font-size: 0.85rem;
}
.component-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.component-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  font-weight: 500;
}
.component-label span:first-child { color: var(--text, #1e293b); }
.component-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
}
.component-prefix, .component-suffix {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  white-space: nowrap;
}
.component-input-wrap input[type="number"] {
  border: none;
  outline: none;
  background: transparent;
  width: 70px;
  font-size: 0.9rem;
  padding: 0;
}
.component-total-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin: 4px 0 0;
  font-size: 0.85rem;
}
.hud-hint-full {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}
@media (max-width: 480px) {
  .component-grid { grid-template-columns: 1fr; }
}

.school-earnings-block {
  display: grid;
  gap: 10px;
}

.methodology-link-row {
  display: flex;
  justify-content: flex-end;
}

.summary-definitions {
  margin-top: 18px;
}

.definitions-card {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.definitions-card h3 {
  margin: 0;
  font-size: 0.98rem;
}

.definition-item {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.definition-item strong {
  color: var(--text);
}

.methodology-link {
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}

.methodology-link:hover {
  text-decoration: underline;
}

.page-links-card,
.filter-card {
  padding: 22px 24px;
}

/* ── Institution type filter bar ──────────────────────────────────────────── */
.inst-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
}
.filter-row-separator {
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.inst-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inst-filter-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 36px;
}
.inst-filter-btn {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.inst-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.inst-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.inst-filter-reset {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 8px;
  text-decoration: underline;
}
.inst-filter-reset:hover { opacity: 0.7; }
.city-filter-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.88rem;
  color: var(--text);
  background: #fff;
  outline: none;
  width: 220px;
  transition: border-color 0.15s;
}
.city-filter-input:focus { border-color: var(--primary); }
.detail-degree-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin: 4px 0 0;
}
.calc-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.calc-link:hover { text-decoration: underline; }
.row-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.row-link:hover { text-decoration: underline; }

.page-links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.page-links-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-story-card {
  display: grid;
  gap: 14px;
}

.brand-story-card h2,
.site-footer h2 {
  margin: 0;
}

.page-link-card,
.selection-card,
.selection-link-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f9fbff;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(20, 33, 61, 0.05);
}

.selection-link-card {
  cursor: pointer;
  border-color: rgba(15, 98, 254, 0.25);
}

.selection-link-card em {
  color: var(--primary) !important;
  font-weight: 600;
}

.page-link-card strong,
.selection-card strong,
.selection-link-card strong {
  font-size: 1rem;
}

.page-link-card span,
.selection-card span,
.selection-card em,
.selection-link-card span,
.selection-link-card em,
.table-subline {
  color: var(--muted);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.45;
}

.page-link-card:hover,
.selection-card:hover,
.selection-link-card:hover {
  border-color: var(--primary);
  box-shadow: 0 14px 28px rgba(15, 98, 254, 0.10);
}

.selection-link-card-disabled {
  cursor: default;
  border-color: var(--border);
  background: #f6f8fc;
}

.selection-link-card-disabled em {
  color: var(--muted) !important;
  font-weight: 500;
}

.selection-link-card-disabled:hover {
  border-color: var(--border);
  box-shadow: 0 8px 18px rgba(20, 33, 61, 0.05);
}

/* ─── Step 2½ Prior Education panel ─────────────────────────────────────── */
.step-badge--half {
  font-size: 0.72rem !important;
  padding: 0.2rem 0.45rem !important;
  background: var(--muted) !important;
  letter-spacing: 0;
}

.prior-ed-mode-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.prior-ed-mode-row .toggle-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.93rem;
  cursor: pointer;
}

.prior-ed-mode-row .toggle-opt input[type="radio"] {
  margin-top: 0.18rem;
  flex-shrink: 0;
}

/* ─── Stacked-degree tab bar ─────────────────────────────────────────────── */
.stack-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stack-tab {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.stack-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.stack-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* ─── Combined-stack summary card ────────────────────────────────────────── */
.stack-degree-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.93rem;
}

.stack-degree-row:last-child { border-bottom: none; }

.stack-degree-tier {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: #e8eef8;
  color: var(--primary);
}

.site-footer {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.site-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 4px;
}

.footer-links a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-disclaimer {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.55;
  padding-top: 4px;
}

.footer-disclaimer:first-of-type {
  border-top: 1px solid var(--border, #e0e0e0);
  margin-top: 6px;
  padding-top: 10px;
}

.calculator-disclaimer-panel {
  background: var(--warning-bg, #fffbeb);
  border-left: 3px solid var(--warning, #d97706);
  font-size: 0.88rem;
  color: var(--text, #333);
  line-height: 1.6;
}

.filter-grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.selection-list {
  display: grid;
  gap: 14px;
}

.selection-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f9fbff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.selection-check:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,98,254,0.08);
}

/* Highlight checked rows — `:has` is widely supported in modern browsers */
.selection-check:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
}

.selection-check-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.selection-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.selected-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.selected-chip {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 8px 14px;
}

.compare-sticky-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(960px, calc(100% - 24px));
  z-index: 40;
}

.compare-sticky-bar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(20,33,61,0.16);
  backdrop-filter: blur(10px);
}

.compare-sticky-bar__text {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.compare-sticky-bar__button {
  flex-shrink: 0;
}

.scorecard-table td strong {
  display: block;
}

.scorecard-table {
  table-layout: fixed;
}

.scorecard-table th,
.scorecard-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.scorecard-table th:nth-child(1),
.scorecard-table td:nth-child(1) {
  width: 28%;
  text-align: left;
}

.scorecard-table th:nth-child(2),
.scorecard-table td:nth-child(2) {
  width: 10%;
}

.scorecard-table th:nth-child(3),
.scorecard-table td:nth-child(3) {
  width: 14%;
}

.scorecard-table th:nth-child(4),
.scorecard-table td:nth-child(4) {
  width: 14%;
}

.scorecard-table th:nth-child(5),
.scorecard-table td:nth-child(5) {
  width: 12%;
}

.scorecard-table th:nth-child(6),
.scorecard-table td:nth-child(6) {
  width: 12%;
}

.scorecard-table th:nth-child(7),
.scorecard-table td:nth-child(7) {
  width: 10%;
}

/* ── Detail tables (career-degrees, career-detail) — 8 columns ───────────── *
 * Override the fixed-layout scorecard-table rules for pages that have an     *
 * 8th CTA column. auto layout lets each column shrink to its content so the  *
 * CTA link never bleeds off the edge.                                        */
.detail-table {
  table-layout: auto;
  min-width: 760px;    /* prevents crushing on narrow viewports; table-wrap scrolls */
}

/* Degree-path / CIP-title cells: fixed cap so one long title can't dominate */
.detail-table .cell-cip {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CTA column: shrink-wrap to link text, never wrap */
.detail-table th:last-child,
.detail-table td:last-child {
  width: 1%;
  white-space: nowrap;
  padding-left: 1.25rem;
  text-align: right;
}

/* ── Score column & sort indicator ───────────────────────────────────────── */
.sortable-th {
  cursor: help;          /* signals there's a tooltip */
  white-space: nowrap;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 3px;
}

/* Clickable sort column headers */
.sortable-col {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color 0.12s;
}
.sortable-col:hover {
  color: var(--primary);
}
.sortable-col.sort-active {
  color: var(--primary);
  font-weight: 700;
}

/* Score cells: bold, primary-coloured, monospaced for alignment */
.score-cell {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

/* Directory result count note */
.dir-count {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.methodology-prose {
  display: grid;
  gap: 16px;
  line-height: 1.65;
  color: var(--text);
}

.methodology-prose p,
.methodology-prose ul {
  margin: 0;
}

.methodology-prose code {
  background: #eef4ff;
  border-radius: 6px;
  padding: 1px 5px;
}

.hint-label {
  color: var(--success);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Location block (Step 4 living expenses) ─────────────────────────────── */
.location-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f0f6ff;
  border: 1px solid #c7deff;
  border-radius: 12px;
  padding: 12px 14px;
}

.location-row-label {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
}

.muted-inline {
  color: var(--muted);
  font-size: 0.82rem;
}

.postgrad-rent-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
}

/* ── Misc helpers ─────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.error-msg { color: var(--danger); font-weight: 700; margin: 0; }

.muted-msg { color: var(--muted); font-size: 0.9rem; margin: 0; }

.notice-msg {
  color: var(--warning);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

button {
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 18px;
}

button:hover    { background: var(--primary-dark); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Media queries act like voltage-detect switches: "if viewport width < threshold,
   apply different CSS." Like a power supply that changes behavior based on load. */

/* Tablet/narrow desktop (width <= 900px). */
@media (max-width: 900px) {
  /* Form row: 3 columns → 1 column. Stack label/input vertically. */
  .form-row        { grid-template-columns: 1fr; }
  /* Stats: 4 columns → 2 columns. 2x2 grid instead of 1x4. */
  .outcomes-stats  { grid-template-columns: repeat(2, 1fr); }
  .form-grid       { grid-template-columns: 1fr; }
  .summary-grid    { grid-template-columns: repeat(2, 1fr); }
  .line-chart-grid { grid-template-columns: 1fr; }
  /* Tables: enable horizontal scroll. Viewport too narrow for full table. */
  .table-wrap      { overflow-x: auto; }
  table            { min-width: 760px; table-layout: auto; }
  #projection-table { min-width: 700px; table-layout: fixed; }
  .page-links-grid,
  .filter-grid-two { grid-template-columns: 1fr; }
  /* Sticky compare bar: change from row layout to column (stacks buttons vertically). */
  .compare-sticky-bar__content { align-items: stretch; flex-direction: column; }
  .compare-sticky-bar__button { width: 100%; }
}

/* Mobile (width <= 560px). Very narrow. Single-column everywhere. */
@media (max-width: 560px) {
  .outcomes-stats { grid-template-columns: 1fr; }  /* 4 cols → 1 col. */
  .summary-grid   { grid-template-columns: 1fr; }
  /* Program chips: 3+ columns → 2 columns. Fit two chips per row. */
  .program-grid   { grid-template-columns: repeat(2, 1fr); }
  /* Status card: row (flex) → column (stacks vertically). */
  .status-card    { flex-direction: column; align-items: stretch; }
  .page-links-grid { grid-template-columns: 1fr; }
}

/* ── Compare Results page ─────────────────────────────────────────────────── */

/* Winner badges grid */
.cr-winners-card { display: grid; gap: 18px; }

.cr-winners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.cr-winner-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9fbff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
}

.cr-winner-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.cr-winner-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cr-winner-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.cr-winner-name {
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two-column chart row */
.cr-chart-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cr-chart-card {
  display: grid;
  gap: 4px;
}

/* Chart canvas containers */
.cr-chart-wrap {
  position: relative;
  height: 280px;
  margin-top: 8px;
}

.cr-chart-wrap-wide {
  height: 340px;
}

.cr-chart-note {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
  line-height: 1.45;
}

.cr-section-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Methodology strip */
.cr-methodology-card {
  background: #f0f6ff;
  border-color: #c7deff;
}

.cr-methodology-text {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

/* Disclaimer strip */
.cr-disclaimer-card {
  background: #fafbfd;
  border-color: var(--border);
}

/* ── Prominent disclaimer banner (appears on all data pages) ── */
.disclaimer-banner {
  border-left: 5px solid #b45309;
  background: #fffbeb;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 16px;
}

.disclaimer-banner-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #92400e;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.disclaimer-banner p {
  margin: 0;
  font-size: 0.875rem;
  color: #78350f;
  line-height: 1.55;
}

.disclaimer-banner a {
  color: #92400e;
  font-weight: 600;
  text-decoration: underline;
}

.cr-disclaimer-text {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0;
}

/* Color dot used in table rows */
.cr-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Override fixed table layout for compare results — auto width is better */
.cr-compare-table {
  table-layout: auto !important;
}

.cr-compare-table th,
.cr-compare-table td {
  width: auto !important;
  white-space: nowrap;
}

.cr-compare-table th:first-child,
.cr-compare-table td:first-child {
  white-space: normal;
  min-width: 160px;
}

/* ── Top ROI Universities table ───────────────────────────────────────────── */

/* Rank badge — small numbered pill in the first column */
.cr-rank-badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 99px;
  margin-right: 4px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Highlighted row — university is in the user's current comparison selection */
.cr-top-uni-highlighted {
  background: rgba(15, 98, 254, 0.06);
}

.cr-top-uni-highlighted td:first-child + td {
  border-left: 3px solid var(--primary);
  padding-left: 10px;
}

/* Small "Currently comparing" tag inside highlighted rows */
.cr-highlighted-tag {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(15, 98, 254, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* The top-uni table doesn't wrap the university name */
.cr-top-uni-table td:nth-child(2) {
  min-width: 180px;
  white-space: normal;
}

/* Responsive: stack charts on mobile */
@media (max-width: 760px) {
  .cr-chart-row     { grid-template-columns: 1fr; }
  .cr-chart-wrap    { height: 240px; }
  .cr-chart-wrap-wide { height: 280px; }
  .cr-winners-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .cr-winners-grid  { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Career Match — Discover Your Path  (career-match.html)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Two-column picker layout ─────────────────────────────────────────────── */
.picker-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 680px) {
  .picker-columns { grid-template-columns: 1fr; }
}

.picker-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.picker-panel-hdr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface, #f9fbff);
}

.picker-panel-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  margin-top: 1px;
}

.picker-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.picker-panel-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 1px;
}

.picker-panel-right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.picker-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  background: #e8f0ff;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.picker-clear-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.picker-clear-btn:hover { color: var(--danger); }

/* ── Tag row list ─────────────────────────────────────────────────────────── */
.tag-row-list {
  display: flex;
  flex-direction: column;
}

/* ── Group wrapper + collapsible ──────────────────────────────────────────── */
.tag-group-wrap {
  border-bottom: 1px solid var(--border);
}

.tag-group-wrap:last-child { border-bottom: none; }

/* Header / divider button */
.tag-row-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  background: #f0f4fb;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
  line-height: 1.2;
}

.tag-row-divider:hover { background: #e5ecf8; }

.tag-group-hdr-label {
  flex: 1;
}

.tag-group-chevron {
  font-size: 1rem;
  color: var(--muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Collapsed state */
.tag-group-wrap.collapsed .tag-group-chevron {
  transform: rotate(-90deg);
}

.tag-group-body {
  display: flex;
  flex-direction: column;
}

.tag-group-wrap.collapsed .tag-group-body {
  display: none;
}

/* ── Individual tag rows ──────────────────────────────────────────────────── */
.tag-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px 14px 9px 13px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s, border-left-color 0.1s, color 0.1s;
  user-select: none;
}

.tag-group-body .tag-row:last-child { border-bottom: none; }

.tag-row:hover {
  background: #f2f6ff;
  border-left-color: rgba(15,98,254,0.25);
}

.tag-row.selected {
  background: #eef4ff;
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.tag-row-label {
  flex: 1;
}

.tag-row-check {
  margin-left: 8px;
  font-size: 0.82rem;
  color: var(--primary);
  font-weight: 900;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}

.tag-row.selected .tag-row-check {
  opacity: 1;
}

/* Legacy compat — keep .tag-chip in case detail page uses it */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  line-height: 1;
  user-select: none;
}

.tag-chip.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* ── Find My Path button ──────────────────────────────────────────────────── */
.match-action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.find-path-btn {
  background: var(--primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.find-path-btn:hover    { background: var(--primary-dark); }
.find-path-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sel-summary {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Match results ────────────────────────────────────────────────────────── */
.match-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.results-summary-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.results-summary-bar h2 { margin: 0; font-size: 1.15rem; }

.result-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f0f7ff;
  border: 1px solid #c7deff;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

/* ── Cluster accordion ────────────────────────────────────────────────────── */
.cluster-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cluster-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(20,33,61,0.05);
  overflow: hidden;
}

.cluster-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}

.cluster-header:hover { background: #f9fbff; }

.cluster-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s;
}

.cluster-card.open .cluster-toggle { transform: rotate(90deg); }

.cluster-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  flex: 1;
}

.cluster-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  border: 1px solid #c7deff;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.cluster-n-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.cluster-body {
  border-top: 1px solid var(--border);
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cluster-body.hidden { display: none; }

/* ── Occupation row inside cluster ───────────────────────────────────────── */
.occ-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafbfd;
  transition: border-color 0.12s, box-shadow 0.12s;
  text-decoration: none;
  color: inherit;
}

.occ-row:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,98,254,0.10);
  background: var(--primary-light);
}

.occ-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
}

.occ-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 130px;
  flex-shrink: 0;
}

.occ-score-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--primary);
  opacity: 0.85;
  min-width: 4px;
  transition: width 0.3s;
}

.occ-score-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

.occ-wage {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--success);
  white-space: nowrap;
  text-align: right;
}

.occ-wage.none {
  color: var(--muted);
  font-weight: 600;
}

/* ── RIASEC radar chart (SVG) ─────────────────────────────────────────────── */
.riasec-section {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

.riasec-radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.riasec-radar-wrap svg {
  width: 100%;
  max-width: 240px;
}

.riasec-axis-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.riasec-axis-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.riasec-axis-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.riasec-axis-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.riasec-axis-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.riasec-axis-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  opacity: 0.9;
}

.riasec-axis-score {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  min-width: 32px;
  text-align: right;
}

/* ── Occupation detail skill bars ─────────────────────────────────────────── */
.skill-bar-list {
  display: grid;
  gap: 10px;
}

.skill-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.skill-bar-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.skill-bar-track {
  height: 8px;
  background: #eef2f8;
  border-radius: 99px;
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  opacity: 0.85;
}

.skill-bar-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--muted);
  text-align: right;
}

/* ── Cluster tag list (occupation detail) ─────────────────────────────────── */
.cluster-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #f5f7fb;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}

/* ── Related degrees list ─────────────────────────────────────────────────── */
.degree-path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.degree-path-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f5f7fb;
  border-left: 3px solid var(--primary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.degree-path-item a:hover {
  text-decoration: underline;
}

/* ── Mobile adjustments ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .riasec-section {
    grid-template-columns: 1fr;
  }
  .occ-row {
    grid-template-columns: 1fr;
  }
  .occ-score-bar-wrap { width: 100%; }
  .skill-bar-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── Save to profile button ───────────────────────────────────────────────── */
.sam-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  font-size: 13px;
  font-family: system-ui, sans-serif;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  position: fixed;
  bottom: 68px;
  right: 24px;
  z-index: 899;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}
.sam-save-btn:hover { background: #f1f5f9; border-color: #94a3b8; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.sam-save-btn--saved {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}
.sam-save-btn--saved:hover { background: #dbeafe; }
.sam-save-btn--ghost { color: #9ca3af; border-color: #e5e7eb; }
@media print { .sam-save-btn { display: none !important; } }

/* ── Living expense include/exclude toggle ────────────────────────────────── */
.living-include-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.living-include-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  background: #f9fafb;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.living-include-toggle label:first-child { border-right: 1px solid #e5e7eb; }
.living-include-toggle input[type="radio"] { display: none; }
.living-include-toggle input[type="radio"]:checked + span {
  /* handled via JS class toggle on the label */
}
.living-include-toggle label.living-active {
  background: #eff6ff;
  color: #1d4ed8;
}

/* ── My Reports page ──────────────────────────────────────────────────────── */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.reports-category { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px 24px; }
.reports-category h2 { font-size: 1rem; font-weight: 700; color: #111827; margin: 0 0 4px; text-transform: capitalize; }
.reports-category .cat-count { font-size: 12px; color: #6b7280; margin-bottom: 16px; }
.report-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #f3f4f6; }
.report-card:first-of-type { border-top: none; }
.report-card-title { font-size: 13px; color: #1d4ed8; text-decoration: none; font-weight: 500; flex: 1; line-height: 1.4; }
.report-card-title:hover { text-decoration: underline; }
.report-card-meta { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.report-card-del { background: none; border: none; color: #d1d5db; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.report-card-del:hover { color: #ef4444; }
.reports-empty { font-size: 13px; color: #9ca3af; font-style: italic; padding: 8px 0; }

/* ── Save as PDF button ───────────────────────────────────────────────────── */
.sam-pdf-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #111827;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  z-index: 900;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.sam-pdf-btn:hover { background: #1f2937; transform: translateY(-1px); }
.sam-pdf-btn:active { transform: translateY(0); }

/* .sam-watermark blocks are injected dynamically by watermark.js at print time */
/* (position:absolute spread across document height — works in Safari print)    */

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
  /* Hide interactive chrome */
  .page-nav,
  .sam-pdf-btn,
  .beta-badge,
  .filter-bar,
  .filter-controls,
  .hero-cta,
  .back-link,
  button.btn-primary,
  button.btn-secondary,
  .tab-bar,
  .share-row {
    display: none !important;
  }

  /* Print attribution header on first page */
  body::before {
    content: 'samantar.us  \2014  Education & Career Research';
    display: block;
    font-family: system-ui, sans-serif;
    font-size: 9pt;
    color: #6b7280;
    text-align: center;
    padding: 6pt 0 4pt;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14pt;
    letter-spacing: 0.04em;
  }

  /* Watermark blocks injected by watermark.js — no CSS rules needed here */
}

/* ── Jobs detail block (career-detail.html + degree-detail.html) ───────── */
/* Three-column responsive grid: by metro, by experience, top employers.  */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.jobs-col h3 {
  font-size: 1rem;
  margin: 0 0 .5rem;
  color: var(--text);
}
.jobs-breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .9rem;
}
.jobs-breakdown-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
}
.jobs-breakdown-list li:last-child { border-bottom: none; }
.jobs-breakdown-list .label {
  color: var(--text);
  word-break: break-word;
}
.jobs-breakdown-list .count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.jobs-breakdown-list a.label {
  color: var(--primary-dark);
  text-decoration: none;
}
.jobs-breakdown-list a.label:hover { text-decoration: underline; }
.jobs-breakdown-list .more {
  font-style: italic;
  color: var(--muted);
}
.jobs-feeder-row {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.jobs-feeder-row h3 {
  font-size: 1rem;
  margin: 0 0 .5rem;
  color: var(--text);
}

/* ── Calculator collapsible sections (v0.5.14) ────────────────────────────
   Each results card and the Step 3 career-list section can be collapsed
   to reduce scroll after the user has drilled into a specific career.
   The card wrapper carries .collapsible-card; clicking its
   .collapsible-header toggles the .collapsed class which hides the
   .collapsible-body. The Step 3 toggle button collapses the entire
   careers list at once via the same mechanism. */
.collapsible-card .collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.collapsible-card .collapsible-header::after {
  content: "▲";
  font-size: .75rem;
  color: var(--muted, #6b7280);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.collapsible-card.collapsed .collapsible-header::after {
  transform: rotate(180deg);
}
.collapsible-card.collapsed .collapsible-body {
  display: none;
}
.collapse-toggle-btn {
  background: transparent;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  padding: .25rem .65rem;
  font-size: .85rem;
  cursor: pointer;
  color: var(--muted, #6b7280);
  margin-left: auto;
}
.collapse-toggle-btn:hover {
  background: var(--surface-hover, #f3f4f6);
}
.drill-btn.drill-disabled {
  background: transparent !important;
  border: 1px dashed var(--border, #d1d5db) !important;
  color: var(--muted, #6b7280) !important;
}

/* ── Ladder-precursor methodology banner (v0.6.0) ──────────────────────────
   Surfaced above ROI Summary when the user drilled into a ladder
   destination (e.g., Marketing Manager) and the backend substituted the
   precursor's wage (Marketing Specialist) for the simulation. The banner
   makes the substitution transparent so the user understands why year-1
   earnings are well below the ladder destination's median. */
.ladder-banner {
  border-left: 4px solid var(--primary, #2563eb);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.02));
}
.ladder-banner h2 {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.ladder-banner p {
  line-height: 1.5;
}