:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #6a6964;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11,11,11,0.10);
  --series-blue: #2a78d6;
  --series-orange: #eb6834;
  --series-aqua: #1baf7a;
  --series-purple: #8347d9;
  --series-pink: #d6428f;
  --sankey-cat-1: #2a78d6;
  --sankey-cat-2: #eb6834;
  --sankey-cat-3: #1baf7a;
  --sankey-cat-4: #eda100;
  --sankey-cat-5: #e87ba4;
  --sankey-cat-6: #008300;
  --sankey-cat-7: #4a3aa7;
  --sankey-cat-8: #e34948;
  --sankey-cat-other: #aeada6;
  --good: #0ca30c;
  --critical: #d03b3b;
  --card-shadow: 0 1px 2px rgba(11,11,11,0.06), 0 4px 12px rgba(11,11,11,0.05);
  --header-bg: #0f2a4a;
  --header-text: #ffffff;
  --header-text-secondary: rgba(255,255,255,0.82);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --page-plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255,255,255,0.10);
  --series-blue: #3987e5;
  --series-orange: #d95926;
  --series-aqua: #199e70;
  --series-purple: #9c6ae8;
  --series-pink: #e565a8;
  --sankey-cat-1: #3987e5;
  --sankey-cat-2: #d95926;
  --sankey-cat-3: #199e70;
  --sankey-cat-4: #c98500;
  --sankey-cat-5: #d55181;
  --sankey-cat-6: #008300;
  --sankey-cat-7: #9085e9;
  --sankey-cat-8: #e66767;
  --sankey-cat-other: #5f5e59;
  --good: #0ca30c;
  --critical: #e66767;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.35);
  --header-bg: #081729;
  --header-text: #ffffff;
  --header-text-secondary: rgba(255,255,255,0.78);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Top bar: just the brand/logo, always visible, same dark band as before. */
.site-brand-bar {
  background: var(--header-bg);
  padding: 10px 0;
}

.site-brand-bar .wrap {
  display: flex;
}

.site-nav-brand {
  color: var(--header-text);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  animation: brand-entrance 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav-brand img {
  animation: brand-logo-spin 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes brand-entrance {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes brand-logo-spin {
  from {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-brand, .site-nav-brand img {
    animation: none;
  }
}

/* ---- First-visit intro (index.html only): cycles through who the site is for, then shrinks away
   into the real header underneath. Plays once ever per browser (see js/site-intro.js) and is
   removed from the DOM entirely once it finishes -- it's a one-time overlay, not part of the
   page's normal layout. ---- */
body.site-intro-open {
  overflow: hidden;
}

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--header-bg);
  transform-origin: top center;
}

.site-intro.closing {
  animation: site-intro-shrink 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes site-intro-shrink {
  0% { transform: scale(1); opacity: 1; }
  55% { transform: scale(0.97); opacity: 1; }
  100% { transform: scale(0.05) translateY(-45vh); opacity: 0; }
}

.site-intro-blob {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  background: var(--series-blue);
  transition: background 0.8s ease;
  animation: site-intro-drift 14s ease-in-out infinite;
}
.site-intro[data-accent="blue"] .site-intro-blob { background: var(--series-blue); }
.site-intro[data-accent="aqua"] .site-intro-blob { background: var(--series-aqua); }
.site-intro[data-accent="orange"] .site-intro-blob { background: var(--series-orange); }
.site-intro[data-accent="purple"] .site-intro-blob { background: var(--series-purple); }

.site-intro-blob-1 { top: -18vmax; left: -14vmax; animation-duration: 16s; }
.site-intro-blob-2 { bottom: -20vmax; right: -10vmax; animation-duration: 19s; animation-delay: -4s; opacity: 0.3; }
.site-intro-blob-3 { top: 30%; left: 60%; width: 30vmax; height: 30vmax; animation-duration: 12s; animation-delay: -8s; opacity: 0.25; }

@keyframes site-intro-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vmax, -3vmax) scale(1.08); }
}

.site-intro-skip {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.site-intro-skip:hover, .site-intro-skip:focus-visible {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

.site-intro-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  padding: 0 24px;
}

.site-intro-eyebrow {
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.site-intro-slides {
  position: relative;
  /* Tall enough for the longest slide's icon + 2-line heading + 3-line paragraph + the per-slide
     "go to this page" link -- the slides inside are position:absolute so this container never
     grows to fit them on its own, and too short a value here left the dots below overlapping the
     last line of longer slides. */
  min-height: 340px;
}

.site-intro-slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.site-intro-slide.active {
  display: flex;
  animation: site-intro-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-intro-icon {
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-block;
  animation: site-intro-icon-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-intro-slide h2 {
  color: #ffffff;
  font-size: 2rem;
  margin: 0 0 12px;
}

.site-intro-slide p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
}

.site-intro-link {
  display: inline-block;
  margin-top: 18px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.site-intro-link:hover, .site-intro-link:focus-visible {
  border-color: #ffffff;
}

@keyframes site-intro-pop {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  60% { opacity: 1; transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes site-intro-icon-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.site-intro-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.site-intro-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}
.site-intro-dot.active {
  background: #ffffff;
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .site-intro-icon { font-size: 2.8rem; }
  .site-intro-slide h2 { font-size: 1.5rem; }
  .site-intro-slide p { font-size: 0.95rem; }
  .site-intro-blob { width: 70vmax; height: 70vmax; }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-suspenders -- js/site-intro.js already skips the whole overlay under reduced
     motion, this just covers a case where the JS somehow didn't run in time. */
  .site-intro, .site-intro-blob, .site-intro-slide.active, .site-intro-icon {
    animation: none;
  }
}

/* Second bar: the actual site-wide "tabs" -- sits below the page title/hero (not squeezed into
   the same row as the brand), light background so it reads as a distinct strip between the dark
   hero and the page's own light content, centered like a tab row instead of pinned to one side. */
.site-tabs {
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.site-tabs-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  gap: 24px;
  flex-wrap: wrap;
}

.site-nav-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.site-nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gridline);
  box-shadow: 0 1px 2px rgba(11,11,11,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.site-nav-links a:hover {
  background: #eef4fc;
  color: var(--series-blue);
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(11,11,11,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}

.site-nav-links a:active {
  transform: translateY(0);
  box-shadow: 0 1px 1px rgba(11,11,11,0.15);
}

.site-nav-links a.active {
  background: var(--series-blue);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(42,120,214,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}

.site-nav-links a.active:hover {
  background: var(--series-blue);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(42,120,214,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

.site-header {
  background: var(--header-bg);
  padding: 48px 0 36px;
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(42,120,214,0.10), transparent 45%),
    radial-gradient(circle at 62% 70%, rgba(27,175,122,0.10), transparent 45%),
    radial-gradient(circle at 92% 30%, rgba(235,104,52,0.10), transparent 45%);
  z-index: 0;
  pointer-events: none;
}

.site-header > .wrap {
  position: relative;
  z-index: 1;
}

.site-header h1 {
  margin: 0 0 10px;
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--header-text);
}

.subtitle {
  margin: 0 0 16px;
  color: var(--header-text-secondary);
  font-size: 1.15rem;
  max-width: 640px;
}

.trust-line {
  margin: 0 0 28px;
  color: var(--header-text-secondary);
  font-size: 0.82rem;
  max-width: 680px;
  line-height: 1.5;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-flow {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--header-text-secondary);
  margin: 0 0 12px;
}

.hero-flow-arrow {
  color: var(--header-text-secondary);
  opacity: 0.6;
  font-size: 0.8rem;
  margin: 0 2px;
}

.hero-graphic {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 600px;
  max-width: 700px;
  min-width: 480px;
  height: 240px;
}

.hero-graphic-flow {
  position: relative;
  flex: 1 1 340px;
  min-width: 280px;
  height: 100%;
}

.hero-graphic-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-graphic-path {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 5;
}

.hero-graphic-path-major { stroke: var(--series-blue); }
.hero-graphic-path-career { stroke: var(--series-aqua); }

.hero-graphic-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 108px;
  padding: 14px 10px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.hero-graphic-card strong {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.hero-graphic-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.hero-graphic-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 2px;
}

.hero-graphic-card-major { left: 0; top: 30px; }
.hero-graphic-card-career { left: 38%; top: 100px; }
.hero-graphic-card-earnings { left: calc(100% - 108px); top: 20px; }

/* Simple linear 4-step flow (not the converging Major/Career/Earnings graphic) used on tool pages
   like real-earnings.html, whose header always stays dark (no landing-style light override) -- so
   these get their own light-on-dark colors rather than reusing .hero-graphic-*, which assumes the
   light landing-page header. */
.flow-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  text-align: center;
}

.flow-step strong {
  font-size: 0.78rem;
  color: var(--header-text);
}

.flow-step-sub {
  font-size: 0.64rem;
  color: var(--header-text-secondary);
}

.flow-step-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 2px;
}

.flow-step-arrow {
  color: var(--header-text-secondary);
  opacity: 0.6;
  font-size: 1rem;
}

@media (max-width: 900px) {
  .flow-steps { display: none; }
}

.trust-banner {
  background: rgba(42,120,214,0.08);
  border-bottom: 1px solid var(--gridline);
  padding: 10px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.trust-banner .wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trust-banner-icon {
  font-size: 1rem;
}

.trust-banner a {
  color: var(--series-blue);
  text-decoration: none;
  font-weight: 600;
}

.trust-banner a:hover {
  text-decoration: underline;
}

.hero-icon-cluster {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 260px;
}

.hero-icon-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  text-align: center;
}

.hero-icon-chip-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.hero-icon-chip-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--header-text-secondary);
}

.hero-icon-badge-simple {
  position: relative;
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
}

.hero-icon-badge-simple-main {
  font-size: 3rem;
  line-height: 1;
}

.hero-icon-badge-simple-corner {
  position: absolute;
  right: -10px;
  bottom: -10px;
  font-size: 1.8rem;
  line-height: 1;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--card-shadow);
}

@media (max-width: 900px) {
  .hero-icon-badge-simple { display: none; }
}

@media (max-width: 900px) {
  .hero-icon-cluster { display: none; }
}

.hero-graphic-stats {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  justify-content: center;
}

.hero-float-card {
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 10px 12px;
}

.hero-float-label {
  margin: 0 0 4px;
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero-float-value {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.hero-float-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
}

.hero-float-bar {
  flex: 1 1 auto;
  border-radius: 2px;
  opacity: 0.85;
}

.hero-float-line {
  width: 100%;
  height: 28px;
  display: block;
}

.hero-float-career-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 0.62rem;
}

.hero-float-career-row:last-child {
  margin-bottom: 0;
}

.hero-float-career-name {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-float-career-bar-wrap {
  background: var(--gridline);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}

.hero-float-career-bar {
  display: block;
  height: 100%;
  border-radius: 3px;
}

@media (max-width: 1100px) {
  .hero-graphic-stats { display: none; }
}

@media (max-width: 900px) {
  .hero-graphic { display: none; }
}

.hero-stats-band {
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
  padding: 18px 0;
}

.hero-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hero-stat-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.hero-search {
  position: relative;
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin: 0 0 18px;
}

.hero-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.92rem;
}

.hero-search-input:focus {
  outline: none;
  border-color: var(--series-blue);
  box-shadow: 0 0 0 3px rgba(42,120,214,0.18);
}

.hero-search-button {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 10px;
  border: none;
  background: var(--series-blue);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.hero-search-button:hover {
  background: var(--series-blue);
  filter: brightness(1.08);
}

.hero-search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 6px;
  max-height: 340px;
  overflow-y: auto;
  z-index: 20;
}

.hero-search-group {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 8px 8px 2px;
}

.hero-search-item {
  display: block;
  padding: 8px;
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-search-item:hover,
.hero-search-item.active {
  background: rgba(42,120,214,0.12);
  color: var(--series-blue);
}

.site-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.hero-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--header-text);
  font-variant-numeric: tabular-nums;
}

/* .hero-stats-band always sits on its own light background (currently just the landing page),
   regardless of that page's .site-header color -- unlike .hero-stat-value/.hero-stat-label's
   default (white, for the dark .site-header context real-earnings/find-institution/departments
   reuse the same stat markup in), so it needs dark text unconditionally, not gated on data-page. */
.hero-stats-band .hero-stat-value {
  color: var(--text-primary);
}

.hero-stats-band .hero-stat-label {
  color: var(--text-muted);
}

.hero-stat-label {
  font-size: 0.76rem;
  color: var(--header-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Landing page only (per explicit choice -- every other page keeps its dark header): white/light
   header background instead of the dark navy, so the header blends into the page's own content
   instead of matching the nav bars, and the nav (still dark) reads as the distinct element. */
body[data-page="landing"] .site-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
}

body[data-page="landing"] .site-header h1 {
  color: var(--text-primary);
}

body[data-page="landing"] .site-header .subtitle,
body[data-page="landing"] .site-header .trust-line {
  color: var(--text-secondary);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.footer-links a {
  font-size: 0.78rem;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
}

.footer-links a:hover {
  border-color: var(--series-blue);
  color: var(--series-blue);
}

/* Mobile nav menu -- pure CSS (checkbox hack), no JS, so it works identically on every page
   regardless of which scripts that page happens to load (some pages, like the landing page,
   don't load app.js at all). The checkbox+label sit between the brand and .site-nav-links in the
   markup so the sibling selector below can reveal the link list on check. */
.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  cursor: pointer;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 4px 6px;
}

@media (max-width: 700px) {
  .site-header h1 {
    font-size: 2rem;
  }
  .hero-stats-row {
    gap: 14px;
  }

  .nav-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Quiet text hint beside the icon so first-time visitors know there are more pages */
  .nav-toggle-label::after {
    content: "More pages";
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0.7;
  }
  .nav-toggle-checkbox:checked + .nav-toggle-label::after { content: "Close"; }
  .site-nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 8px;
    padding-top: 8px;
  }
  .nav-toggle-checkbox:checked ~ .site-nav-links {
    display: flex;
  }
  .site-tabs-inner {
    justify-content: flex-start;
  }
}

.upload-panel {
  margin: 32px 0 0;
  padding: 20px 24px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
}

.upload-panel label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}

.upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#institution-file {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.template-link {
  font-size: 0.88rem;
  color: var(--series-blue);
  text-decoration: none;
}

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

.text-button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.upload-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(208,59,59,0.10);
  border: 1px solid rgba(208,59,59,0.30);
  color: var(--critical);
  font-size: 0.88rem;
}

.csv-fallback {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gridline);
}

.csv-fallback summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.csv-fallback .upload-row {
  margin-top: 12px;
}

.csv-format {
  margin-top: 14px;
  padding: 14px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 10px;
}

.csv-format-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.csv-format-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.csv-format-table th, .csv-format-table td {
  padding: 6px 10px;
  text-align: left;
  border: 1px solid var(--gridline);
}

.csv-format-table th {
  background: var(--surface-1);
  font-weight: 700;
  color: var(--text-primary);
}

.csv-format-table td {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--text-secondary);
}

.required-tag {
  color: var(--critical);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-left: 4px;
}

.csv-format code {
  background: var(--gridline);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

.institution-programs {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gridline);
}

.institution-programs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.institution-programs-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.global-year-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.global-year-filter label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.global-year-filter select {
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--series-blue);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.select-all-label input {
  cursor: pointer;
}

.sankey-section {
  margin: 8px 0 40px;
  padding: 24px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
}

.sankey-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sankey-filters {
  flex: 0 0 480px;
  padding: 16px 20px 20px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 10px;
  position: sticky;
  top: 16px;
}

.sankey-view-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--gridline);
}

/* College / Department / Internal major / Viewing year / Programs shown sit side by side
   instead of stacked -- each still hidden independently by JS (only shown once relevant, e.g.
   Viewing year needs a multi-year upload), so the row reflows to however many are actually
   visible instead of always reserving a fixed number of columns. */
.crosswalk-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .crosswalk-filter-row {
    grid-template-columns: 1fr;
  }
}

.sankey-view-controls .global-year-filter select {
  width: 100%;
}

#sankey-program-select {
  width: 100%;
  padding: 4px;
  border-radius: 8px;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.82rem;
}

#sankey-program-select option {
  padding: 3px 6px;
  border-radius: 4px;
}

.sankey-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sankey-filters-header h3 {
  margin: 0;
  font-size: 0.92rem;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 14px;
}

.sankey-main {
  flex: 1;
  min-width: 0;
}

.sankey-detail-card-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gridline);
}

.sankey-detail-card-wrap .results-grid {
  margin-bottom: 0;
  max-width: 480px;
}

@media (max-width: 1100px) {
  .sankey-body {
    flex-direction: column;
  }
  .sankey-filters {
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }
  .filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* departments.html: filters sit above the diagram (not a side rail) so the Sankey itself gets
   the full page width -- this page's diagrams tend to be wider (more org-hierarchy tiers). */
body[data-page="departments"] .sankey-body {
  flex-direction: column;
  /* align-items: flex-start above means "top-align" in row mode, but once the axis flips to
     column here it means "left-align + shrink-to-fit width" instead -- stretch so the chart
     (and the filters row) actually fill the available width. */
  align-items: stretch;
}
body[data-page="departments"] .sankey-filters {
  flex: 1 1 auto;
  width: 100%;
  position: static;
}
body[data-page="departments"] .filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

/* Phone-width fixes: the padding stack (.wrap -> .sankey-section -> .sankey-filters) otherwise
   compounds to ~150px eaten from a 375px-wide screen, and .results-grid's 320px-minimum card
   columns force real page-level horizontal scroll below that same width. */
@media (max-width: 560px) {
  .wrap {
    padding: 0 16px;
  }
  .sankey-section {
    padding: 16px;
  }
  .sankey-filters {
    padding: 12px 14px 16px;
  }
  .results-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section-title-row {
    flex-wrap: wrap;
  }
  .program-yearly-awards-row {
    gap: 4px;
  }
  .program-yearly-awards-count {
    font-size: 0.72rem;
  }
}

/* Career Compass's filter panel -- same look as .sankey-filters (which it was originally copied
   from) but standalone, not a sticky sidebar: that page has no two-column diagram layout for
   .sankey-filters's `position: sticky` + fixed 480px sidebar width to make sense in, and sticky
   positioning here meant the panel pinned itself over the title on scroll-up instead of scrolling
   normally with the page. Centered with a max-width instead of running edge-to-edge. */
.compass-filters {
  max-width: 1000px;
  margin: 0 auto 24px;
  padding: 16px 20px 20px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 10px;
}

@media (max-width: 640px) {
  .compass-filters {
    padding: 12px 14px 16px;
  }
}

/* ---- Career Compass hero banner: illustrated gradient (this site has no licensed photography
   anywhere, so a photo hero would mean an unlicensed image -- a color-shifted gradient with
   floating blobs keeps the same "big banner + search" layout idea without that problem, and
   matches the blob treatment already used on index.html's first-visit intro). ---- */
.compass-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--header-bg) 0%, #1d3a63 45%, #204a4a 100%);
}

.compass-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
.compass-hero-blob-1 {
  width: 34vmax;
  height: 34vmax;
  top: -14vmax;
  right: -8vmax;
  background: var(--series-aqua);
}
.compass-hero-blob-2 {
  width: 26vmax;
  height: 26vmax;
  bottom: -14vmax;
  left: 10%;
  background: var(--series-blue);
  opacity: 0.3;
}

.compass-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 12px 0 8px;
}

.compass-hero-eyebrow {
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 10px;
}

.compass-hero-search {
  margin: 20px 0 16px;
  max-width: 560px;
}

/* ---- "Explore by interest" quick-pills: a faster, more visual shortcut into the same
   career-interest-type filter as the checkbox list further down -- clicking a pill toggles that
   interest in the exact same filter state, kept in sync both directions by js/career-compass.js. */
.compass-interest-section {
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
  padding: 18px 0;
}

.compass-section-label {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.compass-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--gridline);
  background: var(--page-plane);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.compass-pill:hover {
  border-color: var(--series-blue);
  transform: translateY(-1px);
}
.compass-pill.active {
  background: var(--series-blue);
  border-color: var(--series-blue);
  color: #ffffff;
}
.compass-pill-icon {
  font-size: 1rem;
}

/* ---- Results toolbar: count + sort ---- */
.compass-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.compass-sort-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.compass-sort-label select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---- Card save/compare controls ---- */
.compass-card-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.compass-save-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--baseline);
  padding: 0;
}
.compass-save-btn.saved {
  color: #eab308;
}

.compass-compare-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
}
.compass-compare-check input {
  margin: 0;
}

/* ---- Floating compare bar + comparison modal ---- */
.compass-compare-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 500;
  align-items: center;
  gap: 14px;
  background: var(--header-bg);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
/* Same [hidden]-vs-class-display precedence issue as .compass-compare-modal above. */
.compass-compare-bar:not([hidden]) {
  display: flex;
}
.compass-compare-bar .card-button {
  margin: 0;
}
.compass-compare-bar .text-button {
  color: rgba(255,255,255,0.75);
}

.compass-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(11,11,11,0.55);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* `display: flex` has to live here, not on the base rule above: a class selector's `display`
   beats the browser's default `[hidden] { display: none }` rule at equal specificity (author
   stylesheet wins the tie), which was making the modal render open by default on page load. */
.compass-compare-modal:not([hidden]) {
  display: flex;
}

.compass-compare-modal-inner {
  position: relative;
  background: var(--surface-1);
  border-radius: 14px;
  padding: 28px;
  max-width: 900px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--card-shadow);
}

.compass-compare-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.compass-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.compass-compare-table th, .compass-compare-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  font-size: 0.88rem;
  vertical-align: top;
}
.compass-compare-table th {
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.compass-compare-table td:first-child, .compass-compare-table th:first-child {
  font-weight: 700;
  color: var(--text-primary);
}

.filter-group {
  position: relative;
  min-width: 0;
}

.filter-group-maximize-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.filter-group:hover .filter-group-maximize-btn,
.filter-group-maximize-btn:focus {
  opacity: 1;
}

.filter-maximize-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,0.45);
  z-index: 200;
}

.filter-group--maximized {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  z-index: 201;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(11,11,11,0.35);
}

.filter-group--maximized .filter-group-maximize-btn {
  opacity: 1;
  top: 12px;
  right: 12px;
}

.filter-group--maximized .filter-checkbox-list {
  height: min(50vh, 400px);
  max-height: 60vh;
}

.filter-group--maximized .filter-group-label {
  font-size: 1rem;
  margin-bottom: 16px;
}

.filter-group--maximized .range-slider-single input[type="range"],
.filter-group--maximized .range-slider-dual {
  transform: scaleY(1.4);
  transform-origin: center;
}

.filter-group-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.filter-group-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.filter-group-label-row .filter-group-label {
  margin-bottom: 0;
}

.filter-group-label-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 140px;
  min-height: 80px;
  max-height: 340px;
  overflow-y: auto;
  resize: vertical;
}

.filter-toggle-row {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.filter-toggle-row input {
  margin-right: 4px;
}

.filter-toggle-count {
  margin: 4px 0 0;
  font-size: 0.72rem;
}

/* On-the-job training categories are still full sentences (unlike work experience, which now
   shows a short label with the full text on hover) -- start taller by default. */
#filter-on-job-training {
  height: 220px;
}

.filter-checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.filter-checkbox-list label input {
  margin-top: 2px;
  flex-shrink: 0;
}

.filter-checkbox-list label:has(input:checked) {
  color: var(--text-primary);
  font-weight: 700;
}

.filter-skill-chip-list {
  margin-top: 8px;
}

.filter-skill-chip-list .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.filter-skill-chip-remove {
  background: none;
  border: none;
  color: var(--series-blue);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

/* ---- slider filter controls ---- */

.range-slider-single {
  padding-top: 2px;
}

.range-slider-single input[type="range"] {
  width: 100%;
  accent-color: var(--series-blue);
}

.range-slider-dual {
  position: relative;
  height: 26px;
}

.range-slider-dual .range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--gridline);
  border-radius: 2px;
}

.range-slider-dual .range-track-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--series-blue);
  border-radius: 2px;
}

.range-slider-dual input[type="range"] {
  position: absolute;
  left: 0;
  top: 6px;
  width: 100%;
  height: 14px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-slider-dual input[type="range"]::-webkit-slider-runnable-track,
.range-slider-dual input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}

.range-slider-dual input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--series-blue);
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 2px rgba(11,11,11,0.3);
  cursor: pointer;
  margin-top: 0;
}

.range-slider-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--series-blue);
  border: 2px solid var(--surface-1);
  box-shadow: 0 1px 2px rgba(11,11,11,0.3);
  cursor: pointer;
}

.range-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 6px;
}

#sankey-chart {
  width: 100%;
  min-width: 0;
}

.sankey-header h2 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.sankey-header p {
  margin: 0 0 16px;
  font-size: 0.85rem;
  max-width: 720px;
}

.sankey-institution-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--page-plane);
  border: 1.5px solid var(--series-blue);
  color: var(--series-blue);
  font-size: 0.8rem;
  font-weight: 700;
  max-width: none;
}

.scorecard-earnings-panel {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--page-plane);
  border: 1px solid var(--border-color, #dfe3ea);
  overflow-x: auto;
}

.scorecard-earnings-panel .scorecard-heading {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.scorecard-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.scorecard-heading-row .scorecard-heading {
  margin: 0;
}

.scorecard-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.scorecard-col {
  min-width: 0;
  flex: 1 1 0;
}

@media (max-width: 1100px) {
  .scorecard-layout {
    flex-direction: column;
  }
}

.scorecard-earnings-panel .scorecard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.25;
}

.scorecard-earnings-panel .scorecard-table th,
.scorecard-earnings-panel .scorecard-table td {
  text-align: left;
  padding: 4px 8px 4px 0;
  vertical-align: top;
}

.scorecard-earnings-panel .scorecard-table tbody tr {
  border-bottom: 1px solid var(--gridline);
}

.scorecard-earnings-panel .scorecard-table td {
  white-space: normal;
  max-width: 150px;
}

.similar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  margin: 8px 0 32px;
}

.similar-table th, .similar-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gridline);
}

.similar-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
}

.similar-table td:first-child a {
  color: var(--series-blue);
  font-weight: 600;
  text-decoration: none;
}

.similar-table td:first-child a:hover {
  text-decoration: underline;
}

.scorecard-earnings-panel .scorecard-table td:first-child {
  max-width: 200px;
}

.scorecard-earnings-panel .scorecard-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-color, #6d7081);
  border-bottom: 1px solid var(--border-color, #dfe3ea);
  white-space: normal;
  max-width: 120px;
  padding-bottom: 6px;
}

.scorecard-earnings-panel .scorecard-table td:not(:first-child) {
  font-weight: 700;
}

.scorecard-earnings-panel .scorecard-subtext {
  display: inline-block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--muted-color, #6d7081);
}

.scorecard-earnings-panel .scorecard-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--muted-color, #6d7081);
}

#scorecard-family-sankey {
  margin-top: 8px;
  overflow-x: auto;
}

.sankey-view-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
}

#clear-sankey-selection {
  margin-left: auto;
}

.sankey-view-toggle button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.sankey-view-toggle button.active {
  background: var(--series-blue);
  border-color: var(--series-blue);
  color: #ffffff;
}

.sankey-tier-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
}

/* The unconditional display:flex above otherwise beats the browser's built-in [hidden] rule
   (author CSS always wins over the user-agent stylesheet, regardless of specificity), so
   els.sankeyTierToggles.hidden = true was silently doing nothing -- the row, and its "Levels
   shown" buttons, stayed visible and clickable even when there's no org hierarchy for them to
   affect (a plain institution search, not a College/Department/Internal-major CSV upload). */
.sankey-tier-toggles[hidden] {
  display: none;
}

.sankey-tier-toggles-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 2px;
}

.tier-toggle-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: line-through;
  opacity: 0.6;
}

.tier-toggle-btn.active {
  background: var(--page-plane);
  border-color: var(--series-orange);
  color: var(--text-primary);
  text-decoration: none;
  opacity: 1;
}

#sankey-chart svg {
  display: block;
}

.sankey-zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 5;
}

.sankey-zoom-controls button {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--card-shadow);
}

.sankey-zoom-controls button:hover {
  background: var(--page-plane);
}

.sankey-radial-label {
  font-size: 11px;
  fill: var(--text-secondary);
  pointer-events: none;
}

.sankey-radial-label.occupation-card-label {
  pointer-events: none;
}

.sankey-radial-label.occupation-card-title {
  font-size: 11px;
  font-weight: 700;
  fill: var(--text-primary);
}

.sankey-radial-label.occupation-card-stats {
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--text-secondary);
}

.sankey-occupation-card-rect {
  stroke: var(--surface-1);
  stroke-width: 1px;
  filter: drop-shadow(0 1px 2px rgba(11,11,11,0.25));
}

.sankey-node rect,
path.sankey-node {
  stroke: var(--surface-1);
  stroke-width: 1px;
}

.sankey-node text {
  fill: var(--text-primary);
  font-size: 11px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.occupation-line-card-title {
  font-weight: 700;
}

.occupation-card-bright-outlook-badge {
  font-size: 12px;
}

.sankey-soc6-label {
  fill: var(--text-muted);
  font-size: 9.5px;
  font-style: italic;
}

.occupation-line-card-stats {
  font-weight: 500;
  font-size: 10px;
  fill: var(--text-secondary);
}

.sankey-column-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--text-secondary);
  pointer-events: none;
}

/* Career-card education breakdown. Prefixed with ".sankey-node text" because the generic
   ".sankey-node text { font-size: 11px }" rule would otherwise override these sizes. */
.sankey-node text.occupation-card-edu-heading {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--text-muted);
}

.sankey-node text.occupation-card-edu-row-label {
  font-size: 8px;
  font-weight: 500;
  fill: var(--text-secondary);
}

.sankey-node text.occupation-card-edu-bar-label {
  font-size: 8px;
  font-weight: 600;
  fill: var(--text-secondary);
}

.sankey-node text.occupation-card-edu-row-label.is-top,
.sankey-node text.occupation-card-edu-bar-label.is-top {
  font-weight: 700;
  fill: var(--text-primary);
}

.sankey-node text.occupation-card-edu-bar-caption {
  font-size: 8px;
  font-weight: 500;
  fill: var(--text-secondary);
}

.occupation-card-edu-bar-track {
  fill: var(--gridline);
}

.occupation-card-edu-bar-fill {
  fill: var(--series-blue);
  fill-opacity: 0.5;
}

.occupation-card-edu-bar-fill.is-top {
  fill: var(--series-blue);
  fill-opacity: 1;
}

.sankey-card-connector {
  fill: none;
  stroke-width: 1.5px;
  stroke-opacity: 0.45;
}

.sankey-occupation-linear-card .sankey-occupation-linear-card-rect {
  fill: var(--surface-1);
  stroke: var(--gridline);
  stroke-width: 1px;
  filter: drop-shadow(0 1px 2px rgba(11,11,11,0.12));
}

.sankey-occupation-linear-card .sankey-occupation-linear-card-accent {
  stroke: none;
}

.sankey-link {
  fill: none;
  stroke-opacity: 0.35;
  transition: stroke-opacity 0.15s ease;
}

.sankey-link:hover {
  stroke-opacity: 0.65;
}

.sankey-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
  z-index: 50;
  max-width: 360px;
}

:root[data-theme="dark"] .sankey-tooltip {
  background: #ffffff;
  color: #0b0b0b;
}

.institution-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  background: var(--page-plane);
  border: 1.5px solid var(--series-blue);
  color: var(--text-primary);
  cursor: pointer;
}

.institution-chip:hover { background: rgba(42,120,214,0.10); }

.institution-chip.active {
  background: var(--series-blue);
  color: white;
}

.institution-chip .chip-count {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.institution-chip.active .chip-count { color: rgba(255,255,255,0.8); }

.search-panel {
  margin: 32px 0;
}

.search-panel label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.search-box {
  position: relative;
  max-width: 560px;
}

.search-box input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1.5px solid var(--baseline);
  border-radius: 10px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.search-box input[type="text"]:focus {
  outline: none;
  border-color: var(--series-blue);
  box-shadow: 0 0 0 3px rgba(42,120,214,0.18);
}

.search-box input[type="text"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 10px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: var(--card-shadow);
}

.suggestion-item {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--gridline);
}

.suggestion-item:last-child { border-bottom: none; }

.suggestion-item:hover,
.suggestion-item.active {
  background: var(--page-plane);
}

.suggestion-code {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 6px;
}

.hint {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 8px 0 0;
}

.program-header {
  margin: 8px 0 24px;
  padding: 20px 24px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

.eyebrow-section {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.program-header h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.muted { color: var(--text-secondary); margin: 0; }

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  border: 1.5px dashed var(--gridline);
  border-radius: 12px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.stem-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(27,175,122,0.14);
  color: var(--series-aqua);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stem-badge-inline {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(27,175,122,0.14);
  color: var(--series-aqua);
  font-size: 0.6rem;
  font-weight: 700;
  vertical-align: middle;
}

.browse-index-search {
  margin: 12px 0 0;
}

.browse-index-search input {
  width: 100%;
  max-width: 420px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.88rem;
}

.browse-index-search input:focus {
  outline: none;
  border-color: var(--series-blue);
  box-shadow: 0 0 0 3px rgba(42,120,214,0.18);
}

.letter-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.letter-filter-btn {
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.letter-filter-btn:hover {
  border-color: var(--series-blue);
  color: var(--series-blue);
}

.letter-filter-btn.active {
  background: var(--series-blue);
  border-color: var(--series-blue);
  color: #ffffff;
}

.browse-index {
  margin: 16px 0 48px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--gridline);
  border-radius: 10px;
}

.browse-index-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gridline);
}

.browse-index-group[hidden] {
  display: none;
}

.browse-index-group:last-child {
  border-bottom: none;
}

.browse-index-letter {
  flex: 0 0 auto;
  width: 24px;
  margin: 2px 0 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-muted);
  position: sticky;
  top: 0;
}

.browse-index-letter-wide {
  width: 150px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
}

.browse-index-links {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.browse-index a {
  font-size: 0.85rem;
  color: var(--series-blue);
  text-decoration: none;
  white-space: nowrap;
}

.browse-index a:hover {
  text-decoration: underline;
}

.trust-bar {
  margin: 0 0 48px;
  padding: 32px 0 8px;
  border-top: 1px solid var(--gridline);
}

.trust-bar h2 {
  text-align: center;
  margin: 0 0 24px;
}

.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  text-align: center;
}

.trust-bar-item h3 {
  margin: 10px 0 6px;
  font-size: 1rem;
}

.trust-bar-item p {
  margin: 0;
  font-size: 0.88rem;
}

.trust-bar-icon {
  font-size: 1.6rem;
  display: inline-block;
}

.mini-chart {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}

.mini-chart-title {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.mini-chart-row {
  display: grid;
  grid-template-columns: 108px 1fr 62px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.mini-chart-label {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-chart-bar-wrap {
  background: var(--gridline);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.mini-chart-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.mini-chart-bar-earn { background: var(--series-blue); }
.mini-chart-bar-growth { background: var(--series-aqua); }

.mini-chart-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary);
}

.mini-chart-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.mini-chart-fact-tag {
  flex: none;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(27, 175, 122, 0.14);
  color: var(--series-aqua);
}

.mini-chart-fact-tag-blue {
  background: rgba(42, 120, 214, 0.12);
  color: var(--series-blue);
}

.mini-chart-fact + .mini-chart-title {
  margin-top: 14px;
}

.keyword-example {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.keyword-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(27, 175, 122, 0.45);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(20, 30, 50, 0.08);
}

.mini-chart-panel {
  margin-top: 18px;
  padding: 14px 14px 12px;
  border: 1.5px solid var(--gridline);
  border-top-width: 4px;
  border-radius: 14px;
  background: var(--surface-1);
  box-shadow: 0 1px 6px rgba(20, 30, 50, 0.06);
}

.mini-chart-panel-blue { border-color: rgba(42, 120, 214, 0.35); border-top-color: var(--series-blue); }
.mini-chart-panel-green { border-color: rgba(27, 175, 122, 0.4); border-top-color: var(--series-aqua); }

/* Extra data points on the two "ways to check" cards */
.mini-chart-title-gap { margin-top: 16px; }

.stair {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 140px;
  margin: 6px 0 10px;
  padding: 0 4px;
  border-bottom: 1px solid var(--gridline);
}

.stair-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  text-align: center;
  position: relative;
}

.stair-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
}

.stair-bw {
  flex: 1;
  max-width: 62px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.stair-bar.stair-bar-scorecard {
  background: linear-gradient(180deg, var(--series-purple, #7a4fd6), rgba(122, 79, 214, 0.42));
}

.stair-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 6px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.stair-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
}

.stair-dot-census { background: var(--series-blue); }
.stair-dot-scorecard { background: var(--series-purple, #7a4fd6); }

.stair-value {
  font-size: 0.64rem;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stair-bar {
  display: block;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--series-blue), rgba(42, 120, 214, 0.45));
}

.stair-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.stair-delta {
  margin: 26px 0 4px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stair-delta-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(27, 175, 122, 0.14);
  color: var(--series-aqua);
}

.fact-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.fact-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--gridline);
  background: rgba(27, 175, 122, 0.07);
}

.fact-tile-wide { grid-column: 1 / -1; }

.fact-tile-icon { font-size: 1.15rem; }

.fact-tile-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--series-aqua);
}

.fact-tile-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fact-tile-sub {
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.mix-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--gridline);
  margin: 4px 0 10px;
}

.mix-seg {
  display: block;
  height: 100%;
  background: var(--series-aqua);
  border-right: 1px solid var(--surface-1);
}

.mix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.mix-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 3px;
  background: var(--series-aqua);
}

.mix-legend b {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* The nursing example panels read as examples: much smaller type than the card's own text */
.mini-chart-panel { padding: 8px 9px 7px; margin-top: 14px; }
.mini-chart-panel .mini-chart-title { font-size: 0.48rem; margin-bottom: 6px; }
.mini-chart-panel .mini-chart-title-gap { margin-top: 10px; }
.mini-chart-panel .mini-chart-fact { font-size: 0.53rem; margin-bottom: 4px; gap: 6px; }
.mini-chart-panel .mini-chart-fact-tag { font-size: 0.42rem; padding: 0 6px; }
.mini-chart-panel .keyword-example { font-size: 0.49rem; margin-bottom: 6px; gap: 6px; }
.mini-chart-panel .keyword-pill { font-size: 0.53rem; padding: 2px 8px; }
.mini-chart-panel .stair { height: 76px; margin: 4px 0 8px; gap: 8px; }
.mini-chart-panel .stair-value { font-size: 0.41rem; margin-bottom: 2px; }
.mini-chart-panel .stair-label { font-size: 0.44rem; bottom: -14px; }
.mini-chart-panel .stair-legend { font-size: 0.47rem; margin-bottom: 4px; }
.mini-chart-panel .stair-legend i { width: 7px; height: 7px; }
.mini-chart-panel .stair-delta { font-size: 0.49rem; margin: 15px 0 3px; }
.mini-chart-panel .stair-delta-chip { padding: 1px 7px; }
.mini-chart-panel .fact-tiles { gap: 7px; }
.mini-chart-panel .fact-tile { padding: 6px 8px; border-radius: 9px; }
.mini-chart-panel .fact-tile-icon { font-size: 0.68rem; }
.mini-chart-panel .fact-tile-label { font-size: 0.41rem; }
.mini-chart-panel .fact-tile-value { font-size: 0.56rem; }
.mini-chart-panel .fact-tile-sub { font-size: 0.42rem; line-height: 1.25; }
.mini-chart-panel .mix-bar { height: 8px; margin: 3px 0 7px; }
.mini-chart-panel .mix-legend { font-size: 0.45rem; gap: 3px 10px; }
.mini-chart-panel .mix-legend i { width: 7px; height: 7px; margin-right: 4px; }
.mini-chart-panel .mini-chart-source { font-size: 0.5rem; margin-top: 4px; }

.mini-chart-source { font-size: 0.58rem; }

.mini-chart-source {
  margin: 6px 0 0;
  font-size: 0.68rem;
  color: var(--text-muted);
}

@media (max-width: 420px) {
  .mini-chart-row {
    grid-template-columns: 90px 1fr 54px;
    font-size: 0.72rem;
  }
}

.card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}

.card-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
}

.cta-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.cta-card:hover, .cta-card:focus-visible {
  border-color: var(--series-blue);
  transform: translateY(-2px);
}

.cta-card .card-title {
  color: var(--series-blue);
}

.card-icon {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 8px;
}

.card-button {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--series-blue);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
}

.start-card {
  position: relative;
  padding-right: 56px;
}

.start-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.start-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
}

/* find-institution.html and real-earnings.html share the same markup/app.js (both panels are
   always populated under the hood), but each page only shows the one lens it's named for -- see
   the "data-page" attribute on <body>. */
body[data-page="find-institution"] #scorecard-earnings-panel {
  display: none !important;
}

body[data-page="real-earnings"] #sankey-section > .sankey-header > .section-title-row,
body[data-page="real-earnings"] #sankey-section > .sankey-header > p.muted,
body[data-page="real-earnings"] .sankey-body {
  display: none !important;
}

/* Most of #filter-grid's controls (Job Zone, RIASEC codes, Skill/Knowledge/Technology...) are a
   lot for a first-time visitor -- only Bright Outlook, median wage, and job growth show by
   default; everything else is tucked behind this toggle. */
.filter-advanced {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gridline);
}

.filter-advanced summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
}

.filter-advanced[open] summary {
  margin-bottom: 12px;
}

.card-zone {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--gridline);
  margin-bottom: 16px;
}

.stat { display: flex; flex-direction: column; }

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.growth-value.positive { color: var(--good); }
.growth-value.negative { color: var(--critical); }

.growth-detail {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.wage-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--gridline);
  margin-top: 8px;
  overflow: hidden;
}

.wage-bar-fill {
  height: 100%;
  background: var(--series-blue);
  border-radius: 3px;
}

.wage-compare {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.detail { display: flex; flex-direction: column; }

.detail-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.dictionary-main {
  padding: 32px 16px 60px;
}

.dictionary-search-box {
  position: sticky;
  top: 12px;
  z-index: 10;
  margin-bottom: 28px;
  max-width: 480px;
  box-shadow: var(--card-shadow);
  border-radius: 10px;
}

.dictionary-search-box input {
  background: var(--surface-1);
}

.dictionary-section {
  margin-bottom: 36px;
}

.dictionary-section h2 {
  font-size: 1.1rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--series-blue);
}

.dictionary-list {
  margin: 0;
}

.dictionary-entry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
}

.dictionary-entry:first-of-type {
  margin-top: 0;
}

.dictionary-term-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border-radius: 10px;
  background: rgba(var(--dictionary-icon-rgb, 42,120,214), 0.14);
}

.dictionary-entry-body {
  flex: 1 1 auto;
  min-width: 0;
}

.dictionary-list dt {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.dictionary-list dd {
  margin: 4px 0 0;
  max-width: 720px;
}

.dictionary-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.dictionary-detail {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--gridline);
  background: var(--page-plane);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-line;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gridline);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  position: relative;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

.info-icon:hover, .info-icon:focus {
  background: var(--series-blue);
  color: #ffffff;
  outline: none;
}

.info-icon:hover::after, .info-icon:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  text-transform: none; /* tooltip text is authored in Title Case -- don't inherit an uppercase parent (e.g. table th) */
  z-index: 60;
  pointer-events: none;
  box-shadow: var(--card-shadow);
}

.info-icon:hover::before, .info-icon:focus::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-primary);
  z-index: 60;
  pointer-events: none;
}

.detail-value, .education-value, .openings-value {
  font-size: 0.92rem;
  font-weight: 600;
}

.card-description {
  margin: 0 0 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.state-wage-section {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 14px;
}

.state-wage-controls {
  flex: 1;
  min-width: 0;
}

.state-wage-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.state-wage-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.state-wage-select {
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--series-blue);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.state-wage-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.state-wage-map {
  flex: 0 0 150px;
  width: 150px;
}

.state-wage-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.state-wage-map-state {
  stroke: var(--surface-1);
  stroke-width: 0.5;
}

.state-wage-map-state.selected {
  stroke: var(--series-blue);
  stroke-width: 2;
}

.state-wage-map-caption {
  margin: 4px 0 0;
  font-size: 0.68rem;
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 640px) {
  .state-wage-section {
    flex-direction: column;
    align-items: stretch;
  }
  .state-wage-map {
    width: 130px;
    margin: 0 auto;
  }
}

.program-card {
  display: flex;
  flex-direction: column;
}

.program-card .card-zone {
  margin-bottom: 12px;
}

.program-card-link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--series-blue);
  text-decoration: none;
}

.program-card-link:hover {
  text-decoration: underline;
}

.program-universities {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}

.program-universities-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-color, #6d7081);
  margin: 0;
}

.program-universities-count {
  text-transform: none;
  letter-spacing: normal;
}

.program-universities-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.program-universities-state-filter {
  font-size: 0.72rem;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-secondary);
}

.program-universities-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.program-university-row {
  display: grid;
  grid-template-columns: 1fr 56px auto;
  align-items: center;
  gap: 2px 10px;
  font-size: 0.82rem;
  padding: 4px 0;
  border-bottom: 1px solid var(--page-plane);
}

.program-university-name {
  grid-column: 1;
  font-weight: 600;
}

.program-university-place {
  grid-column: 1;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.program-university-sparkline {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.program-university-sparkline svg {
  width: 56px;
  height: 22px;
  display: block;
}

.program-university-sparkline .program-sparkline-line {
  stroke-width: 1.4;
}

.program-university-sparkline .program-sparkline-dot {
  r: 1.4;
}

.program-university-count {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-secondary);
  font-size: 0.75rem;
  white-space: nowrap;
  text-align: right;
}

.program-universities-more {
  margin-top: 8px;
}

.program-yearly-awards {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}

.program-yearly-awards-row {
  display: flex;
  gap: 10px;
}

.program-yearly-awards-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.program-yearly-awards-count {
  white-space: nowrap;
}

.program-yearly-awards-count {
  font-size: 0.85rem;
  font-weight: 700;
}

.program-yearly-awards-year {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.program-sparkline {
  margin: 6px 0 8px;
}

.program-sparkline-svg {
  width: 100%;
  height: 36px;
  display: block;
}

.program-sparkline-line {
  fill: none;
  stroke: var(--series-blue);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.program-sparkline-dot {
  fill: var(--series-blue);
  opacity: 0.6;
}

.program-sparkline-dot-last {
  opacity: 1;
}

.cost-trends-panel .scorecard-heading {
  margin-bottom: 12px;
}

.cost-trend-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cost-trend-block {
  min-width: 0;
}

.cost-trend-block-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.85rem;
}

.cost-trend-value {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cost-trend-year {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.cost-trend-change {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.cost-trend-sparkline {
  max-width: 260px;
}

.cost-trend-years-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gridline);
  overflow-x: auto;
}

.cost-trend-years-row {
  display: flex;
  gap: 8px;
  width: max-content;
  min-width: 100%;
}

.cost-trend-years-cell {
  flex: 0 0 auto;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
}

.cost-trend-years-value {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.cost-trend-years-label {
  font-size: 0.66rem;
  color: var(--text-secondary);
}

.cost-trend-flags {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost-trend-flag-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(235,104,52,0.14);
  color: var(--series-orange);
}

.cost-trend-flag-badge-good {
  background: rgba(27,175,122,0.14);
  color: var(--series-aqua);
}

.education-distribution-group {
  margin-top: 16px;
}

.education-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.education-bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.education-bar-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.education-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--gridline);
  overflow: hidden;
}

.education-bar-fill {
  height: 100%;
  background: var(--series-orange);
  border-radius: 4px;
}

.education-bar-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

.chip-group { margin-top: 12px; }

.chip-group-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  color: var(--text-primary);
}

.tech-group .chip {
  background: rgba(27,175,122,0.10);
  border-color: rgba(27,175,122,0.30);
}

.site-footer {
  border-top: 1px solid var(--gridline);
  padding: 32px 0 40px;
  font-size: 0.85rem;
}

.site-footer p { margin: 4px 0; }

.site-footer a {
  color: var(--series-blue);
  text-decoration: underline;
}

.site-footer p.muted {
  max-width: 860px;
  line-height: 1.6;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.site-footer p.muted:first-of-type {
  padding-top: 16px;
  border-top: 1px solid var(--gridline);
}

.site-footer p.muted + p.muted {
  margin-top: 10px;
}

.site-footer .disclaimer {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: 12px;
  font-size: 0.76rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .site-header { padding: 28px 0 24px; }
  .site-header h1 { font-size: 1.5rem; }
  .stat-row, .detail-row { grid-template-columns: 1fr; }
}

/* ---------- Peer comparison ---------- */

.peer-chip-remove {
  background: none;
  border: none;
  color: var(--series-orange);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

/* ---------- Rankings page ---------- */

/* #ranking-table-wrap sets overflow-x: auto so the table can scroll horizontally on narrow
   screens -- but per the CSS overflow spec, setting only overflow-x to a non-"visible" value
   forces the paired overflow-y to compute as "auto" too, not "visible". The shared .info-icon
   tooltip opens upward by default, which gets silently clipped by that forced vertical clipping
   for any row near the wrapper's top edge (its content never becomes invisible, it's cut off
   before any text renders). Every .info-icon inside this table opens downward instead, which
   stays within the wrapper's normal content flow (over the table's own rows) for the rows
   visitors actually look at first, rather than poking out above the wrapper.  */
.ranking-table .info-icon:hover::after, .ranking-table .info-icon:focus::after {
  bottom: auto;
  top: calc(100% + 8px);
}

.ranking-table .info-icon:hover::before, .ranking-table .info-icon:focus::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--text-primary);
}

/* Same overflow-clipping issue as #ranking-table-wrap above (overflow-x: auto forces overflow-y
   to compute as auto too), and .scorecard-earnings-panel has the same overflow-x: auto for its
   own horizontal-scroll-on-narrow-screens reason -- same downward-opening fix. */
.scorecard-table .info-icon:hover::after, .scorecard-table .info-icon:focus::after {
  bottom: auto;
  top: calc(100% + 8px);
}

.scorecard-table .info-icon:hover::before, .scorecard-table .info-icon:focus::before {
  bottom: auto;
  top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: var(--text-primary);
}

.ranking-mode-toggle {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}

.ranking-mode-btn {
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}

.ranking-mode-btn:hover {
  border-color: var(--series-blue);
  color: var(--series-blue);
}

.ranking-mode-btn.active {
  background: var(--series-blue);
  border-color: var(--series-blue);
  color: #ffffff;
}

.ranking-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 24px;
}

.ranking-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ranking-filter[hidden] {
  display: none;
}

.ranking-filter label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.ranking-filter select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 200px;
}

.ranking-note { margin: 0 0 16px; font-size: 0.85rem; }

#ranking-table-wrap {
  overflow-x: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ranking-table th, .ranking-table td {
  padding: 10px 12px;
  text-align: right;
  border: 1px solid var(--gridline);
  white-space: nowrap;
}

.ranking-table th:nth-child(1), .ranking-table td:nth-child(1) {
  text-align: left;
  white-space: normal;
  min-width: 220px;
}

.ranking-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
}

.ranking-th-subtext {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.75;
  margin-top: 2px;
}

.ranking-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.ranking-table th.sortable:hover {
  color: var(--text-primary);
}

.ranking-table th.sortable::after {
  content: "";
  display: inline-block;
  width: 0.6em;
}

.ranking-table th.sorted-asc::after { content: " \25B2"; }
.ranking-table th.sorted-desc::after { content: " \25BC"; }
.ranking-table th.sorted-secondary-asc::after { content: " \25B2" attr(data-sort-priority); opacity: 0.65; font-size: 0.85em; }
.ranking-table th.sorted-secondary-desc::after { content: " \25BC" attr(data-sort-priority); opacity: 0.65; font-size: 0.85em; }

.ranking-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rank-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gridline);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* Top-3 badges stand apart from the rest of the pack: bigger, bolder outline, subtle lift. */
.rank-badge-1, .rank-badge-2, .rank-badge-3 {
  padding: 2px 9px;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.rank-badge-1 { background: #f0c33c; color: #4a3300; border: 1.5px solid #c99a17; }
.rank-badge-2 { background: #c9ccd1; color: #33363b; border: 1.5px solid #9a9ea5; }
.rank-badge-3 { background: #d99a5b; color: #402106; border: 1.5px solid #a8672a; }

.ranking-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 0.85rem;
}

.ranking-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
  text-decoration: none;
}

/* ---------- Print report ---------- */

.print-only { display: none; }

.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.print-button {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--series-blue);
  background: var(--surface-1);
  color: var(--series-blue);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.print-button:hover {
  background: rgba(42,120,214,0.08);
}

@media print {
  :root {
    color-scheme: light;
    --surface-1: #ffffff;
    --page-plane: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #555555;
    --gridline: #cccccc;
    --baseline: #999999;
  }

  body { background: #ffffff; }

  .print-only { display: block; }

  .print-masthead {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000000;
  }

  .print-masthead h1 {
    margin: 0 0 6px;
    font-size: 1.4rem;
  }

  .print-masthead p { margin: 2px 0; }

  .no-print,
  .site-header,
  .upload-panel,
  .search-panel,
  .institution-programs-actions,
  #institution-suggestions,
  #suggestions,
  .sankey-tooltip,
  .info-icon,
  .program-universities-state-filter,
  .program-universities-more {
    display: none !important;
  }

  .card,
  .institution-chip {
    break-inside: avoid;
  }

  /* Don't let the scrollable institutions list clip to its on-screen height -- show every row
     the page actually rendered (up to the usual 12 unless "Show all" was clicked first). */
  .program-universities-list {
    max-height: none;
    overflow: visible;
  }

  #sankey-chart {
    overflow: visible;
  }

  #sankey-chart svg {
    width: 100% !important;
    height: auto !important;
  }

  .wage-bar-track { background: #dddddd; }
  .wage-bar-fill { background: #000000; }

  .site-footer {
    margin-top: 24px;
    border-top: 1px solid #000000;
  }

  a { color: inherit; text-decoration: underline; }
}

/* ---------- Institution profile page ---------- */

.ip-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ip-hero-info {
  flex: 0 0 320px;
  max-width: 360px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ip-hero-info-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.ip-hero-info-title {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--header-text);
}

.ip-hero-info-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--header-text-secondary);
  line-height: 1.5;
}

.ip-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.ip-search-row .search-box { flex: 1 1 320px; }

.ip-view-profile-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ip-institution-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ip-institution-identity {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.ip-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.ip-institution-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
}

.ip-institution-meta {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.ip-badge-row {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ip-institution-links {
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ip-institution-links p { margin: 0 0 6px; }

.ip-about-box {
  flex: 0 0 260px;
  max-width: 300px;
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  gap: 10px;
}

.ip-about-box strong { color: var(--text-primary); }

.ip-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  margin: 20px 0 0;
}

.ip-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.ip-tab:hover { color: var(--text-primary); }

.ip-tab.active {
  color: var(--ip-tab-color, var(--series-blue));
  border-bottom-color: var(--ip-tab-color, var(--series-blue));
}

.ip-section {
  margin-top: 20px;
  border-radius: 14px;
  padding: 18px 20px 20px;
  background: var(--ip-accent-bg, var(--page-plane));
  border: 1px solid var(--ip-accent-border, var(--border));
}

.ip-section[data-category="admissions"] { --ip-accent: var(--series-blue); --ip-accent-bg: rgba(42,120,214,0.06); --ip-accent-border: rgba(42,120,214,0.18); }
.ip-section[data-category="cost"] { --ip-accent: var(--series-aqua); --ip-accent-bg: rgba(27,175,122,0.07); --ip-accent-border: rgba(27,175,122,0.18); }
.ip-section[data-category="finaid"] { --ip-accent: var(--series-purple); --ip-accent-bg: rgba(131,71,217,0.06); --ip-accent-border: rgba(131,71,217,0.18); }
.ip-section[data-category="finance"] { --ip-accent: var(--series-orange); --ip-accent-bg: rgba(235,104,52,0.06); --ip-accent-border: rgba(235,104,52,0.18); }
.ip-section[data-category="hr"] { --ip-accent: var(--series-pink); --ip-accent-bg: rgba(214,66,143,0.06); --ip-accent-border: rgba(214,66,143,0.18); }

.ip-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.ip-section-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ip-accent, var(--series-blue));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.ip-section-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.ip-section-head p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ip-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ip-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.ip-stat-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.ip-stat-value {
  margin: 4px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ip-accent, var(--text-primary));
}

.ip-stat-sub {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ip-stat-extra {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.ip-chart-wrap {
  margin-top: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.ip-chart-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
}

.ip-chart-plot { position: relative; }
.ip-chart-svg { width: 100%; height: 90px; display: block; }
.ip-chart-line { fill: none; stroke: var(--ip-accent, var(--series-blue)); stroke-width: 2; }
.ip-chart-area { fill: var(--ip-accent, var(--series-blue)); opacity: 0.12; }
.ip-chart-dot { fill: var(--ip-accent, var(--series-blue)); }
.ip-chart-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
}

.ip-chart-years {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ip-chart-source {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ip-cta-band {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .ip-cta-band { grid-template-columns: 1fr; }
}

.ip-cta-box {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
}

.ip-cta-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--page-plane);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ip-cta-box h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.ip-cta-box p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Scroll-triggered reveal: cards/sections fade + rise into place as they enter the viewport.
   scroll-reveal.js adds .reveal-in once an element crosses the IntersectionObserver threshold. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero background decoration: grad-cap/dollar/briefcase icons drifting slowly upward behind the
   headline. Purely decorative (aria-hidden, pointer-events: none) and clipped by .site-header's
   own overflow: hidden, so icons never escape the hero band. */
.hero-drift-icons {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.site-header > .wrap {
  position: relative;
  z-index: 1;
}

.hero-drift-icon {
  position: absolute;
  bottom: -40px;
  opacity: 0;
  animation-name: hero-drift-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes hero-drift-float {
  0% { transform: translateY(0) translateX(0) rotate(-6deg); opacity: 0; }
  12% { opacity: 0.22; }
  50% { transform: translateY(-160px) translateX(14px) rotate(3deg); }
  88% { opacity: 0.22; }
  100% { transform: translateY(-320px) translateX(-10px) rotate(-4deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-drift-icons {
    display: none;
  }
}

:root[data-theme="dark"] {
  --sankey-cat-1: #3987e5;
  --sankey-cat-2: #d95926;
  --sankey-cat-3: #199e70;
  --sankey-cat-4: #c98500;
  --sankey-cat-5: #d55181;
  --sankey-cat-6: #008300;
  --sankey-cat-7: #9085e9;
  --sankey-cat-8: #e66767;
  --sankey-cat-other: #5f5e59;
}

/* ---- find-institution.html: one ordered "Filters" panel + independent scrollers ----
   The old "Browse structure" and "Filter careers" boxes are flattened into a single column
   (display: contents) so every filter can be placed with `order`. Their headers/Clear buttons stay
   in the DOM, hidden, so the existing JS keeps working; a combined "Clear all" replaces them.
   Requested order: Viewing year, Most common education, On-the-job training, Bright Outlook,
   Programs shown, then STEM only, median wage, job growth, and the Advanced filters. */
body[data-page="find-institution"] .sankey-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 16px;
  padding: 0 20px 20px;
}

/* Every filter takes a full row, except median wage + job growth which sit side by side. */
body[data-page="find-institution"] .sankey-filters > *,
body[data-page="find-institution"] .sankey-filters .filter-group,
body[data-page="find-institution"] .sankey-filters details.filter-advanced {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
}
body[data-page="find-institution"] .sankey-filters #global-year-filter-row,
body[data-page="find-institution"] .sankey-filters [data-slot="typical"],
body[data-page="find-institution"] .sankey-filters [data-slot="education"],
body[data-page="find-institution"] .sankey-filters [data-slot="training"],
body[data-page="find-institution"] .sankey-filters [data-slot="bright"],
body[data-page="find-institution"] .sankey-filters [data-slot="wage"],
body[data-page="find-institution"] .sankey-filters [data-slot="growth"],
body[data-page="find-institution"] .sankey-filters [data-slot="licensing"] {
  flex: 0 0 calc(50% - 8px);
}

/* Prominent filter names */
body[data-page="find-institution"] .sankey-filters .filter-group-label,
body[data-page="find-institution"] .sankey-filters .filter-toggle-row {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong, #14213d);
  letter-spacing: 0.01em;
}
body[data-page="find-institution"] .sankey-filters .filter-group-label {
  display: block;
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--gridline);
}

body[data-page="find-institution"] .sankey-filters .sankey-view-controls,
body[data-page="find-institution"] .sankey-filters .crosswalk-filter-row,
body[data-page="find-institution"] .sankey-filters #filter-grid {
  display: contents;
}

body[data-page="find-institution"] .sankey-view-controls > .sankey-filters-header,
body[data-page="find-institution"] .sankey-filters > .sankey-filters-header:not(.filters-unified-header) {
  display: none;
}

body[data-page="find-institution"] .filters-unified-header {
  order: -1;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 16px 0 10px;
  background: var(--page-plane);
  border-bottom: 1px solid var(--gridline);
}

/* College / Department / Internal Major Title (only shown once a school uploads its structure) stay on top */
body[data-page="find-institution"] #crosswalk-college-group,
body[data-page="find-institution"] #crosswalk-department-group,
body[data-page="find-institution"] #crosswalk-major-group { order: 0; }
body[data-page="find-institution"] #global-year-filter-row { order: 1; }
body[data-page="find-institution"] [data-slot="typical"] { order: 2; }
body[data-page="find-institution"] [data-slot="education"] { order: 3; }
body[data-page="find-institution"] [data-slot="training"] { order: 4; }
body[data-page="find-institution"] [data-slot="bright"] { order: 5; }
body[data-page="find-institution"] #sankey-program-select-group { order: 6; }
body[data-page="find-institution"] #crosswalk-stem-group { order: 7; }
body[data-page="find-institution"] [data-slot="wage"] { order: 8; }
body[data-page="find-institution"] [data-slot="growth"] { order: 9; }
body[data-page="find-institution"] [data-slot="licensing"] { order: 10; }
body[data-page="find-institution"] details.filter-advanced { order: 11; }

/* Wide screens: the filters panel and the Sankey are separate scroll areas, so scrolling one
   never moves the other. Narrow screens keep the normal stacked page flow. */
@media (min-width: 1101px) {
  body[data-page="find-institution"] .sankey-body {
    align-items: stretch;
    height: calc(100vh - 110px);
    min-height: 520px;
  }
  body[data-page="find-institution"] .sankey-filters {
    position: static;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* rtl puts this pane's scrollbar on its left edge; content is flipped back to ltr and rows
       are reversed so the layout reads normally */
    direction: rtl;
    flex-direction: row-reverse;
  }
  body[data-page="find-institution"] .sankey-filters * { direction: ltr; }
  body[data-page="find-institution"] .sankey-main {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
  }
}

@media print {
  body[data-page="find-institution"] .sankey-body { height: auto; }
  body[data-page="find-institution"] .sankey-filters,
  body[data-page="find-institution"] .sankey-main { overflow: visible; }
}

/* "Showing N of M matching careers" line under the Careers column header */
.sankey-column-headers text.sankey-column-count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--focal-text, var(--series-blue));
}

/* Advanced filters: two columns, like the main filters above */
body[data-page="find-institution"] .sankey-filters details.filter-advanced > .filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Typed-number boxes under the range sliders */
.range-values .range-number-box {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border: 1px solid var(--gridline);
  border-radius: 6px;
  background: var(--page-plane, #fff);
  font-size: 0.85rem;
}
.range-values .range-number-box input {
  width: 6.5em;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  -moz-appearance: textfield;
}
.range-values .range-number-box:focus-within { border-color: var(--series-blue, #3b6fd4); }
.range-values .range-number-unit { color: var(--text-secondary); }
.range-values .range-number-dash { color: var(--text-secondary); font-size: 0.8rem; }
.range-slider-single + .range-values,
.range-values:has(.range-number-dash) { align-items: center; }

/* Each filter is its own bordered card so neighbours never blur together */
body[data-page="find-institution"] .sankey-filters .filter-group {
  padding: 12px 14px 14px;
  border: 1px solid var(--gridline);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
body[data-page="find-institution"] .sankey-filters .filter-group:hover,
body[data-page="find-institution"] .sankey-filters .filter-group:focus-within {
  border-color: var(--series-blue, #3b6fd4);
  box-shadow: 0 2px 8px rgba(59, 111, 212, 0.12);
}
body[data-page="find-institution"] .sankey-filters .filter-group .filter-group-label {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}
body[data-page="find-institution"] .sankey-filters .filter-group .filter-checkbox-list {
  border-color: var(--gridline);
  border-radius: 8px;
  background: transparent;
}
body[data-page="find-institution"] .sankey-filters { gap: 12px; }
body[data-page="find-institution"] .sankey-filters details.filter-advanced {
  border: 1px solid var(--gridline);
  border-radius: 12px;
  padding: 12px 14px;
}
body[data-page="find-institution"] .sankey-filters details.filter-advanced > .filter-grid { gap: 12px; }
body[data-page="find-institution"] .sankey-filters details.filter-advanced summary { font-weight: 700; color: var(--text-strong, #14213d); }

/* number boxes: share the row evenly, never overflow the card, readable ink */
.range-values { gap: 6px; align-items: center; font-size: 0.85rem; color: var(--text-primary, #1c2333); }
.range-values .range-number-box { flex: 1 1 0; min-width: 0; }
.range-values .range-number-box input { width: 100%; flex: 1 1 auto; color: var(--text-primary, #1c2333); font-weight: 600; }
.range-values .range-number-dash { flex: 0 0 auto; }
.range-values .range-number-box input::-webkit-outer-spin-button,
.range-values .range-number-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-values .range-number-box { padding: 3px 5px; gap: 2px; }
.range-values { font-size: 0.8rem; }
body[data-page="find-institution"] .sankey-filters details.filter-advanced .filter-group { padding: 10px 10px 12px; }
body[data-page="find-institution"] .sankey-filters details.filter-advanced { padding: 12px 10px; }
.range-values .range-number-box input { font-size: 0.78rem; }

/* Raised-card look: layered shadows (tight contact + soft ambient) and a top highlight edge */
body[data-page="find-institution"] .sankey-filters .filter-group,
body[data-page="find-institution"] .sankey-filters details.filter-advanced {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-top-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 1px rgba(20, 33, 61, 0.08),
    0 3px 6px rgba(20, 33, 61, 0.08),
    0 10px 20px -6px rgba(20, 33, 61, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body[data-page="find-institution"] .sankey-filters .filter-group:hover,
body[data-page="find-institution"] .sankey-filters .filter-group:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 111, 212, 0.45);
  box-shadow:
    0 1px 1px rgba(20, 33, 61, 0.08),
    0 6px 10px rgba(20, 33, 61, 0.10),
    0 16px 28px -6px rgba(59, 111, 212, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
/* inner cards inside Advanced sit a level lower so the two layers read as nested */
body[data-page="find-institution"] .sankey-filters details.filter-advanced .filter-group {
  box-shadow: 0 1px 1px rgba(20, 33, 61, 0.08), 0 4px 8px -2px rgba(20, 33, 61, 0.14), inset 0 1px 0 #fff;
}
/* extra room so shadows aren't clipped by the scroll pane */
body[data-page="find-institution"] .sankey-filters { padding: 0 22px 28px; gap: 16px; }
:root[data-theme="dark"] body[data-page="find-institution"] .sankey-filters .filter-group,
:root[data-theme="dark"] body[data-page="find-institution"] .sankey-filters details.filter-advanced {
  background: linear-gradient(180deg, #1f2430 0%, #191d27 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 1px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
@media print { body[data-page="find-institution"] .sankey-filters .filter-group { box-shadow: none; } }


.sankey-filter-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--series-blue, #3b6fd4);
  background: var(--surface-1, #f3f5f9);
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Career Compass card: workers-by-education-level bars (mirrors the Sankey career cards) */
.edu-mix { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gridline); }
.edu-mix-heading { margin: 0 0 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.edu-mix-row { display: grid; grid-template-columns: 8.5em 1fr 2.6em; align-items: center; gap: 8px; font-size: 0.74rem; line-height: 1.5; color: var(--text-secondary); }
.edu-mix-track { display: block; height: 7px; border-radius: 4px; background: var(--gridline); overflow: hidden; }
.edu-mix-fill { display: block; height: 100%; border-radius: 4px; background: var(--series-blue); opacity: 0.5; }
.edu-mix-pct { text-align: right; font-weight: 600; }
.edu-mix-row.is-top { color: var(--text-primary); font-weight: 700; }
.edu-mix-row.is-top .edu-mix-fill { opacity: 1; }
.edu-mix-empty { margin: 12px 0 0; font-size: 0.74rem; color: var(--text-secondary); }
.edu-mix-row { grid-template-columns: 10.5em 1fr 2.6em; }
.edu-mix-label { white-space: nowrap; }

/* Career Compass: interest label(s) in the card's top-left corner, level with Compare / save */
.compass-interest-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 0 110px 8px 0; align-items: center; }
.compass-interest-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gridline); background: var(--surface-1); font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }

/* "STEM major" indicator: Sankey career cards (SVG pill) + Career Compass cards (tag) */
.sankey-node .occupation-card-stem-pill rect { fill: var(--series-blue); fill-opacity: 0.14; stroke: var(--series-blue); stroke-opacity: 0.5; stroke-width: 0.75px; }
.sankey-node .occupation-card-stem-pill text { font-size: 7px; font-weight: 700; letter-spacing: 0.02em; fill: var(--series-blue); }
.compass-stem-tag { background: rgba(59, 111, 212, 0.12); border-color: rgba(59, 111, 212, 0.45); color: var(--series-blue); }

.sankey-node .occupation-card-interest-pill rect { fill: var(--surface-1, #f3f5f9); stroke: var(--gridline); stroke-width: 0.75px; }
.sankey-node .occupation-card-interest-pill text { font-size: 7px; font-weight: 600; fill: var(--text-secondary); }

.sankey-node text.occupation-card-typical {
  font-size: 8px;
  font-weight: 700;
  fill: var(--text-primary);
}

/* Typical-entry bars: same tracks as the worker chart, filled in a distinct color */
.occupation-card-edu-bar-fill.is-typical, .edu-mix-fill.is-typical { fill: var(--series-orange, #d95926); background: var(--series-orange, #d95926); opacity: 1; fill-opacity: 1; }
.edu-mix + .edu-mix { margin-top: 10px; padding-top: 10px; }

/* Career pathway index pages (pathways/*.html) */
.pathway-table-wrap { overflow-x: auto; margin: 16px 0; }
.pathway-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pathway-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 2px solid var(--gridline); }
.pathway-table td { padding: 9px 10px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
.pathway-table td.pw-num { white-space: nowrap; font-weight: 600; }
.pathway-table td.pw-career a { font-weight: 600; }
.pathway-tag { display: inline-block; margin: 0 6px 4px 0; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--gridline); background: var(--surface-1); font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.pathway-tag-stem { background: rgba(59, 111, 212, 0.12); border-color: rgba(59, 111, 212, 0.45); color: var(--series-blue); }
.pathway-related h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.pathway-related ul, .pathway-hub-list { padding-left: 1.2rem; line-height: 1.9; }
@media (max-width: 700px) {
  .pathway-table thead { display: none; }
  .pathway-table, .pathway-table tbody, .pathway-table tr, .pathway-table td { display: block; width: 100%; }
  .pathway-table tr { padding: 10px 0; border-bottom: 1px solid var(--gridline); }
  .pathway-table td { border: 0; padding: 2px 0; }
  .pathway-table td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: 0.78rem; }
}

.compass-pathway-link { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--series-blue, #3b6fd4); background: var(--surface-1, #f3f5f9); border-radius: 0 8px 8px 0; font-size: 0.9rem; }

/* Circular Sankey: ring legend + the same career cards as the linear view */
.sankey-ring-legend { margin: 0 0 8px; font-size: 0.82rem; color: var(--text-secondary); }
.radial-cards-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gridline); }
.radial-cards-title { margin: 0; text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.radial-cards-count { margin: 2px 0 12px; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--series-blue, #3b6fd4); }
.radial-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, 226px); gap: 12px; justify-content: center; }
.radial-card-svg { display: block; overflow: visible; }

.sankey-node text.occupation-card-state-hint {
  font-size: 8px;
  font-weight: 600;
  fill: var(--series-blue, #3b6fd4);
}

/* "Careers . by [ranking]" + "Showing [n] of M" controls above the diagram */
.career-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 18px; margin: 0 0 10px; font-size: 0.8rem; color: var(--text-secondary); }
.career-controls-item { display: inline-flex; align-items: center; gap: 6px; }
.career-controls-label { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }
.career-controls select { font: inherit; font-weight: 600; padding: 3px 24px 3px 8px; border: 1px solid var(--gridline); border-radius: 8px; background: var(--page-plane, #fff); color: var(--text-primary); cursor: pointer; }
.career-controls select:focus-visible { outline: 2px solid var(--series-blue, #3b6fd4); outline-offset: 1px; }
/* On the linear diagram the controls sit right over the career column, where the header text used to be */
.career-controls-overlay { position: absolute; top: 0; right: 4px; width: 220px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; margin: 0; font-size: 0.72rem; text-align: center; z-index: 2; }
.career-controls-overlay { width: auto; min-width: 220px; }
.career-controls-overlay .career-controls-item { justify-content: center; white-space: nowrap; }
.career-controls-overlay .career-controls-label { font-size: 0.66rem; }
.career-controls-overlay select { padding: 1px 20px 1px 6px; font-size: 0.72rem; }
.radial-cards-panel .career-controls { justify-content: center; margin-bottom: 12px; }

.family-controls { justify-content: flex-start; margin: 6px 0 10px; }

/* ---- State licensing panel (career card on careers.html) ---- */
.license-summary { margin: 0 0 8px; font-size: 0.9rem; color: var(--text); }
.license-state-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.license-chip {
  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border, #d6dbe6); background: var(--surface, #fff); color: var(--text); cursor: pointer;
}
.license-chip:hover { border-color: #2a78d6; }
.license-chip.active { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.license-detail { border: 1px solid var(--border, #d6dbe6); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
.license-detail-head { margin: 0 0 8px; font-weight: 700; font-size: 0.9rem; }
.license-row { padding: 6px 0; border-top: 1px solid var(--border, #e3e7ef); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.license-row:first-of-type { border-top: 0; }
.license-title { font-weight: 600; font-size: 0.88rem; }
.license-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.license-tag { font-size: 0.7rem; padding: 1px 7px; border-radius: 999px; background: rgba(42,120,214,0.10); color: var(--text); }
.license-link { font-size: 0.75rem; margin-left: auto; }
.license-note { margin: 4px 0 0; font-size: 0.72rem; color: var(--text-muted); }

/* ---- Certifications panel (career card on careers.html) ---- */
.cert-summary { margin: 0 0 8px; font-size: 0.9rem; color: var(--text); }
.cert-type-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cert-chip {
  font: inherit; font-size: 0.75rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border, #d6dbe6); background: var(--surface, #fff); color: var(--text); cursor: pointer;
}
.cert-chip:hover { border-color: #2a78d6; }
.cert-chip.active { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.cert-list { border: 1px solid var(--border, #d6dbe6); border-radius: 10px; padding: 4px 12px; margin-bottom: 6px; }
.cert-row { padding: 7px 0; border-top: 1px solid var(--border, #e3e7ef); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.cert-row:first-child { border-top: 0; }
.cert-title { font-weight: 600; font-size: 0.88rem; }
.cert-org { font-size: 0.78rem; color: var(--text-muted); }
.cert-link { font-size: 0.75rem; margin-left: auto; }
.cert-more { margin: 2px 0 6px; }
.cert-note { margin: 4px 0 0; font-size: 0.72rem; color: var(--text-muted); }

/* ---- Price-adjusted pay note (state/metro wage panel) ---- */
.state-wage-adjusted { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--text); }
.state-wage-adjusted-cite { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); }

/* ---- Working conditions panel (career card on careers.html) ---- */
.wc-intro { margin: 0 0 6px; font-size: 0.85rem; color: var(--text); }
.wc-list { border: 1px solid var(--border, #d6dbe6); border-radius: 10px; padding: 6px 12px 10px; margin-bottom: 6px; }
.wc-group-title { margin: 10px 0 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.wc-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 62px; gap: 8px; align-items: center; padding: 3px 0; font-size: 0.82rem; }
.wc-label { color: var(--text); }
.wc-track { height: 6px; border-radius: 999px; background: rgba(42,120,214,0.12); overflow: hidden; }
.wc-fill { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.wc-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wc-value-wide { grid-column: 2 / 4; text-align: right; font-weight: 600; }
.wc-note { margin: 4px 0 0; font-size: 0.72rem; color: var(--text-muted); }

/* ---- Note that specialties share their parent occupation's BLS figures (career card on careers.html) ---- */
.wage-shared-note { margin: 8px 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }

.earn-legend { margin: 0 0 6px; font-size: 0.78rem; display: flex; gap: 8px; flex-wrap: wrap; }
.src-tag {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.src-census { background: rgba(42, 120, 214, 0.14); color: var(--series-blue); }
.src-score { background: rgba(122, 79, 214, 0.14); color: var(--series-purple, #7a4fd6); }
.earn-src + .earn-src { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--gridline); }

/* "Where these graduates work" cards */
.ind-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  gap: 14px;
  margin: 8px 0 6px;
}
.ind-card {
  border: 1.5px solid rgba(27, 175, 122, 0.4);
  border-top: 4px solid var(--series-aqua);
  border-radius: 14px;
  padding: 12px 14px 10px;
  background: var(--surface-1);
  box-shadow: 0 1px 6px rgba(20, 30, 50, 0.06);
}
.ind-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ind-card-title { font-weight: 700; font-size: 0.95rem; }
.ind-card-meta { font-size: 0.72rem; color: var(--text-muted); }
.ind-chain {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 8px;
  row-gap: 0;
  align-items: start;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(27, 175, 122, 0.07);
  margin-bottom: 8px;
}
.ind-chain-step { display: contents; }
.ind-chain-step em { padding-top: 3px; }
.ind-chain-step em {
  display: block;
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ind-chain-arrow { color: var(--text-muted); font-weight: 700; font-size: 0.8rem; line-height: 1; padding: 0 0 3px 4px; }
.ind-chip {
  display: inline-block;
  margin: 0 3px 3px 0;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
}
.ind-chip-more { color: var(--text-muted); border-style: dashed; }
.ind-chip-field { background: rgba(122, 79, 214, 0.12); border-color: rgba(122, 79, 214, 0.4); color: var(--series-purple, #7a4fd6); font-weight: 700; }
.ind-card-sub { margin: 4px 0 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.ind-row { display: grid; grid-template-columns: 175px 1fr 100px; gap: 8px; align-items: center; margin-bottom: 5px; font-size: 0.76rem; }
.ind-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.ind-track { height: 10px; border-radius: 5px; background: var(--gridline); overflow: hidden; }
.ind-fill { display: block; height: 100%; border-radius: 5px; background: var(--series-aqua); }
.ind-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-card-sample { margin: 6px 0 0; }
@media (max-width: 420px) { .ind-row { grid-template-columns: 110px 1fr 74px; } }

#scorecard-family-sankey .sankey-col-heading { font-size: 12px; font-weight: 700; fill: var(--text-secondary); letter-spacing: 0.02em; }

#scorecard-family-sankey .sankey-industry-card-box { fill: var(--surface-1); stroke: rgba(27, 175, 122, 0.55); stroke-width: 1.4; }
#scorecard-family-sankey .sankey-industry-card-title { font-size: 10.5px; font-weight: 700; fill: var(--text-primary); }
#scorecard-family-sankey .sankey-industry-card-track { fill: var(--gridline); }
#scorecard-family-sankey .sankey-industry-card-fill { fill: var(--series-aqua); }
#scorecard-family-sankey .sankey-industry-card-pct { font-size: 10.5px; font-weight: 700; fill: var(--text-primary); }

#scorecard-family-sankey .sankey-industry-card-field { font-size: 9.5px; fill: var(--text-secondary); }
#scorecard-family-sankey .sankey-industry-card-fieldpct { font-size: 9.5px; font-weight: 700; fill: var(--text-primary); }
#scorecard-family-sankey .sankey-industry-card-fill-field { fill: var(--series-purple, #7a4fd6); }
#scorecard-family-sankey .sankey-industry-card-link { stroke: rgba(27, 175, 122, 0.7); stroke-width: 1.4; }

/* Field cards in the real-earnings diagram: four bar charts of equal weight */
#scorecard-family-sankey .fc-wrap { width: 100%; height: 100%; box-sizing: border-box; font-family: inherit; }
#scorecard-family-sankey .fc {
  box-sizing: border-box; width: 100%; height: 100%; padding: 6px 9px 6px;
  border: 1.5px solid rgba(27, 175, 122, 0.5); border-top: 3px solid var(--series-aqua); border-radius: 10px;
  background: var(--surface-1); box-shadow: 0 1px 5px rgba(20, 30, 50, 0.07); overflow: hidden;
}
#scorecard-family-sankey .fc-head { font-size: 9.5px; color: var(--text-muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scorecard-family-sankey .fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
#scorecard-family-sankey .fc-sec { min-width: 0; }
#scorecard-family-sankey .fc-lab { font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 1px; }
#scorecard-family-sankey .fc-lab span { font-weight: 400; text-transform: none; color: var(--text-muted); }
#scorecard-family-sankey .fc-lab-prog { color: var(--series-blue); }
#scorecard-family-sankey .fc-lab-fam { color: var(--series-orange); }
#scorecard-family-sankey .fc-lab-field { color: var(--series-purple, #7a4fd6); }
#scorecard-family-sankey .fc-lab-ind { color: var(--series-aqua); }
#scorecard-family-sankey .fc-bar { display: grid; grid-template-columns: 104px 1fr 34px; gap: 4px; align-items: center; height: 15px; font-size: 9.5px; }
#scorecard-family-sankey .fc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
#scorecard-family-sankey .fc-track { height: 6px; border-radius: 3px; background: var(--gridline); overflow: hidden; }
#scorecard-family-sankey .fc-fill { display: block; height: 100%; border-radius: 3px; }
#scorecard-family-sankey .fc-fill-prog { background: var(--series-blue); }
#scorecard-family-sankey .fc-fill-fam { background: var(--series-orange); }
#scorecard-family-sankey .fc-fill-field { background: var(--series-purple, #7a4fd6); }
#scorecard-family-sankey .fc-fill-ind { background: var(--series-aqua); }
#scorecard-family-sankey .fc-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
#scorecard-family-sankey .fc-more { font-size: 8.5px; color: var(--text-muted); }

.fod-pay { font-size: 0.68rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }

/* Institution profile: outcomes panel */
.ip-sub-heading { margin: 18px 0 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); }
.ip-bars { display: grid; gap: 6px; }
.ip-bar-row { display: grid; grid-template-columns: 170px 1fr 90px; gap: 10px; align-items: center; font-size: 0.85rem; }
.ip-bar-track { height: 12px; border-radius: 6px; background: var(--gridline); overflow: hidden; }
.ip-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--series-blue); }
.ip-bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ip-bar-caption { margin: 10px 0 4px; font-size: 0.85rem; }
.ip-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--gridline); }
.ip-stack-seg { display: block; height: 100%; border-right: 1px solid var(--surface-1); }
.ip-stack-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 0.78rem; color: var(--text-secondary); }
.ip-stack-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; }
@media (max-width: 560px) { .ip-bar-row { grid-template-columns: 110px 1fr 76px; } }

/* ===== Phone-friendly refinements (October 2026). Everything here applies only on narrow screens or touch devices; desktop layouts are unchanged. ===== */
@media (max-width: 720px) {
  /* layout problems found by the phone-width audit */
  .ranking-mode-toggle { flex-wrap: wrap; }
  .ranking-mode-btn { flex: 1 1 130px; }
  .csv-format { overflow-x: auto; }
  .ip-chart-years { overflow: hidden; font-size: 0.64rem; }
  .ip-chart-years span:nth-child(even) { display: none; }
  /* comfortable tap targets (about 36-40 px) and no automatic zoom when focusing a field on iPhones */
  .letter-filter-btn, .tier-toggle-btn, .license-chip, .cert-chip, .filter-group-maximize-btn { min-height: 36px; min-width: 36px; }
  .text-button { padding-top: 9px; padding-bottom: 9px; }
  select, input[type="text"], input[type="search"], input[type="number"] { min-height: 40px; font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .site-nav-links a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---- light / dark toggle (js/theme.js): top-right corner of the page header ---- */
.theme-toggle { position: absolute; top: 12px; right: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35); background: #0f2a4a; color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.theme-toggle:hover { background: #1d3a63; }
.theme-toggle:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.theme-toggle-fixed { position: fixed; }
@media (max-width: 720px) { .theme-toggle { top: 8px; right: 10px; padding: 6px 10px; } .theme-toggle-text { display: none; } .theme-toggle span[aria-hidden] { font-size: 1.1rem; } }
@media print { .theme-toggle { display: none !important; } }

/* landing page: its header is light in light mode, so the small "Major -> Career -> Earnings" line must not be white */
body[data-page="landing"] .site-header .hero-flow,
body[data-page="landing"] .site-header .hero-flow-arrow { color: var(--text-secondary); }

/* light mode: green text (#1baf7a, 2.7:1 on white) is darkened to a readable green; chart colors are unchanged */
:root:not([data-theme="dark"]) .ip-section[data-category="cost"] .ip-stat-value,
:root:not([data-theme="dark"]) .fact-tile-label,
:root:not([data-theme="dark"]) .hero-float-value,
:root:not([data-theme="dark"]) .stair-delta-chip,
:root:not([data-theme="dark"]) .mini-chart-fact-tag,
:root:not([data-theme="dark"]) .start-card-arrow { color: #0d7a53; }

/* Dropdown lists and form fields: readable text in light and dark mode (the list popup of a <select> does not inherit the page colors on every browser) */
select, select option, select optgroup { color: var(--text-primary); background-color: var(--surface-1); }
select:disabled, input:disabled { color: var(--text-secondary); opacity: 1; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); opacity: 1; }
select option:checked { color: var(--text-primary); background-color: var(--gridline); }

/* ---- Shared table, layout and chart fixes (UX audit 2026-10-05) ---- */
.sm-rankwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px;
  background: linear-gradient(to right, var(--surface-1) 30%, rgba(255,255,255,0)), linear-gradient(to left, var(--surface-1) 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-table th, .rp-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); vertical-align: top; }
.rp-table th:first-child, .rp-table td:first-child { text-align: left; }
.rp-table td:nth-child(2):not(:last-child) { white-space: nowrap; }
.sm-rankwrap + p, .sm-rankwrap + .scorecard-note { margin-top: 10px; }
@media (max-width: 720px) { .rp-table th, .rp-table td { padding: 8px 6px; font-size: 13px; } }
/* careers page: the single selected-career card uses the full width */
#occupation-detail.results-grid { grid-template-columns: minmax(0, 880px); }
.education-bar-row { grid-template-columns: minmax(8em, 11em) 1fr 3.2em; }
.education-bar-label { white-space: normal; overflow: visible; text-overflow: clip; }
.ind-row > :last-child { white-space: nowrap; }
/* comparison tables: left-aligned row labels, row lines */
.cmp-table tbody th[scope=row] { text-align: left; }
.cmp-table td, .cmp-table th { border-bottom: 1px solid var(--border); }
@media (max-width: 700px) { .cmp-table th, .cmp-table td { min-width: 104px; font-size: .85rem; } }
/* trend chart year labels on narrow screens: keep the first and last label */
@media (max-width: 720px) {
  .ip-chart-years span:nth-child(even) { display: initial; }
  .ip-chart-years span:nth-child(even):not(:last-child) { display: none; }
  .ip-chart-years span:nth-last-child(2) { display: none; }
}
/* stat cards that hold text instead of a number */
.ip-stat-value--text { font-size: 1rem; line-height: 1.4; }
/* school profile hero links */
.site-header .subtitle a { color: #cfe3ff; text-decoration: underline; }