/* ------------------------------------------------------------------
   Mannheim CDSE graduate outcomes
   Colour roles come from the validated categorical palette; both light
   and dark steps are selected, not flipped. Series 3 (aqua) sits below
   3:1 on the light surface, so every chart that uses it ships direct
   labels and the table view provides relief.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light;
  --surface-0: #f4f4f2;
  --surface-1: #fcfcfb;
  --surface-2: #ececea;
  --border:    #dcdcd8;
  --border-strong: #c3c2b7;

  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #77766f;

  /* Fixed categorical order. A sector always keeps its slot, so a filter that
     drops series never repaints the survivors. */
  --series-1: #2a78d6;  /* blue    — academia */
  --series-2: #eb6834;  /* orange  — private sector */
  --series-3: #1baf7a;  /* aqua    — central bank */
  --series-4: #eda100;  /* yellow  — research institute */
  --series-5: #e87ba4;  /* magenta — government */
  --series-6: #008300;  /* green   — international org */
  --series-7: #4a3aa7;  /* violet  — other */
  --series-8: #e34948;  /* red     — reserved */

  --grid: #e4e4e0;
  --shadow: 0 1px 2px rgba(11,11,11,.06), 0 4px 16px rgba(11,11,11,.05);
  --radius: 10px;
  --maxw: 1180px;
}


/* Dark mode is OPT-IN ONLY. There is deliberately no prefers-color-scheme rule:
   the OS setting does not decide this, the toggle does, and the default is light. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #121211;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --border:    #33332f;
  --border-strong: #4a4a45;

  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #97968c;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --grid: #2b2b29;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------- header ---------------- */
.page-head {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 40px 0 32px;
  position: relative;
}
.eyebrow {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.lede { margin: 0; max-width: 68ch; color: var(--text-secondary); font-size: 16px; }

.theme-toggle {
  position: absolute; top: 24px; right: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text-secondary); font-size: 15px; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { color: var(--text-primary); }

/* ---------------- tiles ---------------- */
.tiles {
  display: grid; gap: 14px; margin: 32px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.tile .v {
  font-size: 30px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
  overflow-wrap: anywhere; hyphens: auto;
}
/* a word-valued tile ("Research institute") must not blow out the card the way a
   number never would */
.tile .v:not(:has(+ .k)) { font-size: 30px; }
.tile .v.text { font-size: 19px; line-height: 1.25; }
.tile .k { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.tile .sub {
  margin-top: 2px; font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* ---------------- blocks ---------------- */
.block { margin: 44px 0; }
.block > h2 {
  margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.note { margin: 10px 0 18px; max-width: 76ch; color: var(--text-secondary); }
.note.small { font-size: 13px; }

.grid-2 {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  /* Cards take their content's height. Stretching them to match the tallest in the
     row leaves a short chart floating in a tall white box. */
  align-items: start;
}

.chart-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.chart-card h3 { margin: 0 0 2px; font-size: 15px; font-weight: 620; }
.chart-card .sub { margin: 0 0 12px; font-size: 12.5px; color: var(--text-muted); }
.chart { width: 100%; overflow-x: auto; }
.chart svg {
  /* fill the card: the viewBox is the drawing's own coordinate system, so letting
     it scale to the container removes the dead strip on the right */
  display: block; width: 100%; height: auto; max-width: 100%;
}

/* chart primitives */
.axis-line { stroke: var(--border-strong); stroke-width: 1; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.tick-text { fill: var(--text-muted); font-size: 11px; }
.axis-title { fill: var(--text-secondary); font-size: 11.5px; }
.bar-label { fill: var(--text-primary); font-size: 11.5px; font-weight: 600; }
.cat-label { fill: var(--text-secondary); font-size: 12px; }
.dot { stroke: var(--surface-1); stroke-width: 2; }

.legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* tooltip */
.tip {
  position: fixed; z-index: 50; pointer-events: none; opacity: 0;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow);
  max-width: 280px; transition: opacity .09s;
}
.tip strong { display: block; margin-bottom: 3px; }
.tip .m { color: var(--text-secondary); }

/* ---------------- mini table ---------------- */
.table-mini { margin-top: 14px; overflow-x: auto; }
.table-mini table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table-mini th, .table-mini td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.table-mini th { color: var(--text-secondary); font-weight: 600; }
.table-mini td.num, .table-mini th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- filters + table ---------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end;
  margin: 16px 0 12px; padding: 14px 16px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
}
.filters label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.filters label.check { flex-direction: row; align-items: center; gap: 7px; }
.filters input[type="search"], .filters select {
  font: inherit; font-size: 13.5px; padding: 6px 9px;
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: 7px; min-width: 170px;
}
.filters .count { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }

/* 213 rows is a 17,000px wall of table if left uncapped — scroll it in place
   instead, with the header sticky so the columns stay readable. */
.table-scroll {
  overflow: auto; max-height: 72vh;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1);
}
#people-table { border-collapse: collapse; width: 100%; font-size: 13px; }
#people-table th, #people-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
#people-table th {
  position: sticky; top: 0; background: var(--surface-2); z-index: 2;
  font-weight: 600; color: var(--text-secondary); cursor: pointer; user-select: none;
}
#people-table th:hover { color: var(--text-primary); }
#people-table th.num, #people-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#people-table th[data-dir]::after { content: attr(data-dir); margin-left: 5px; color: var(--text-muted); }
#people-table tbody tr:hover { background: var(--surface-2); }
#people-table td.name { font-weight: 560; cursor: pointer; }
#people-table td.name:hover { text-decoration: underline; }
#people-table td.wide { white-space: normal; min-width: 230px; }
#people-table a { color: var(--series-1); text-decoration: none; }
#people-table a:hover { text-decoration: underline; }
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid var(--border-strong); color: var(--text-secondary);
}
.pill.acad { border-color: var(--series-1); color: var(--series-1); }
td.dim, .dim { color: var(--text-muted); }

/* ---------------- dialog ---------------- */
dialog#person-dialog {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-primary);
  max-width: 640px; width: calc(100% - 40px); padding: 24px; box-shadow: var(--shadow);
}
dialog#person-dialog::backdrop { background: rgba(0,0,0,.45); }
dialog .close {
  position: absolute; top: 12px; right: 14px; border: 0; background: none;
  color: var(--text-muted); font-size: 17px; cursor: pointer;
}
dialog h3 { margin: 0 0 4px; font-size: 19px; }
dialog .meta { color: var(--text-secondary); font-size: 13px; margin: 0 0 16px; }
dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 13.5px; }
dialog dt { color: var(--text-muted); }
dialog h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
dialog ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
dialog ul li { margin-bottom: 3px; }
dialog .notes { font-size: 12.5px; color: var(--text-secondary); background: var(--surface-2); padding: 10px 12px; border-radius: 8px; }

/* career timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative; padding: 0 0 12px 20px; border-left: 2px solid var(--border-strong);
  font-size: 13.5px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--series-1); border: 2px solid var(--surface-1);
}
.timeline li.nonacad::before { background: var(--series-2); }
.timeline .yr { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 8px; }

/* ---------------- caveats + footer ---------------- */
.caveats { margin: 0; padding-left: 20px; color: var(--text-secondary); max-width: 82ch; }
.caveats li { margin-bottom: 9px; }
.page-foot {
  margin-top: 56px; padding: 26px 0 40px;
  border-top: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-muted); font-size: 12.5px;
}
.page-foot p { margin: 0 0 6px; max-width: 88ch; }

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .filters .count { margin-left: 0; width: 100%; }
}

/* ---------------- cross-page navigation ---------------- */
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.site-nav { gap: 8px; margin-top: 24px; }
.site-nav a {
  padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 550;
  text-decoration: none; color: var(--text-secondary);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  transition: background .12s, color .12s;
}
.site-nav a:hover { color: var(--text-primary); border-color: var(--text-muted); }
.site-nav a.here {
  color: #fff; background: var(--series-1); border-color: var(--series-1); font-weight: 650;
}


/* ---------------- collaboration matches ---------------- */
.match-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.match {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; box-shadow: var(--shadow);
}
.match .pair { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.match .pair .vs { color: var(--text-muted); font-weight: 400; margin: 0 6px; }
.match .where { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.match .terms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.match .terms span {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.match .meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.match .score { float: right; font-weight: 700; color: var(--series-1); font-size: 15px; }

.pinned { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pinned button {
  font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-primary);
}
.pinned button::after { content: " ✕"; color: var(--text-muted); }
.pinned button:hover::after { color: var(--series-2); }
.traj.faded { stroke-opacity: .07 !important; }
.traj.pin { stroke-width: 3 !important; stroke-opacity: 1 !important; }

.go-link {
  display: inline-block; padding: 11px 18px; border-radius: 9px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: #fff; background: var(--series-1);
}
.go-link:hover { filter: brightness(1.08); }

/* ---------------- on-demand explainers ---------------- */
.lead-line { margin: 6px 0 16px; font-size: 13.5px; color: var(--text-secondary); }
.info-btn {
  font: inherit; font-size: 12px; padding: 3px 10px; margin-left: 6px;
  border-radius: 999px; cursor: pointer; background: none;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.info-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
dialog.info-dialog {
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 26px;
  background: var(--surface-1); color: var(--text-primary);
  max-width: 560px; width: calc(100% - 40px); box-shadow: var(--shadow);
}
dialog.info-dialog::backdrop { background: rgba(0,0,0,.5); }
dialog.info-dialog .close {
  position: absolute; top: 14px; right: 16px; border: 0; background: none;
  color: var(--text-muted); font-size: 16px; cursor: pointer;
}
dialog.info-dialog h3 { margin: 0 0 12px; font-size: 17px; }
dialog.info-dialog h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase;
                        letter-spacing: .06em; color: var(--text-muted); }
dialog.info-dialog p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* ---------------- touch and small screens ---------------- */
@media (hover: none) {
  /* a tooltip that cannot be dismissed by moving the pointer must not cover the map */
  .tip { max-width: 74vw; font-size: 12px; }
}
@media (max-width: 720px) {
  .site-nav { gap: 6px; }
  .site-nav a { padding: 8px 12px; font-size: 13px; }
  .grid-2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .tile .v { font-size: 24px; }
  .filters { gap: 10px; padding: 12px; }
  .filters input[type="search"], .filters select { min-width: 0; width: 100%; }
  .filters label { flex: 1 1 100%; }
  .match-list { grid-template-columns: 1fr; }
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------- charts on narrow screens ---------------- */
@media (max-width: 720px) {
  /* An SVG that scales to a 360px viewport takes its 10px labels down to ~4px.
     Give charts a readable floor and let the container scroll instead. */
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 520px; }
  .hist-card svg { min-width: 300px; }
  .hist-card { overflow-x: auto; }
  .table-mini { overflow-x: auto; }
  .table-mini table { min-width: 480px; }
}

/* ---------------- touch target sizes ---------------- */
@media (hover: none), (max-width: 720px) {
  /* 44px is the smallest reliably tappable target */
  .theme-toggle, .about-btn { width: 44px; height: 44px; font-size: 17px; }
  .about-btn { right: 70px; }
  dialog .close, dialog.info-dialog .close, .close-follow {
    width: 44px; height: 44px; font-size: 20px;
  }
  .info-btn { padding: 9px 14px; font-size: 13px; }
  .btn { padding: 11px 16px; }
  .chip { padding: 9px 14px; font-size: 13px; }
  .theme-tags button { padding: 10px 15px; }
  .filters select, .filters input[type="search"] { min-height: 44px; }
  input[type="range"] { height: 32px; }
  .site-nav a { padding: 11px 14px; }
  /* stacked overlays fight for the same corner on a small map */
  .anim-stats, .sector-bar, .follow-panel, .map-legend { position: static; width: auto; margin-top: 10px; }
  .inst-grid { grid-template-columns: 1fr; }
  .crow, .wrow { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------- range sliders ---------------- */
/* accent-color styles the thumb but cannot resize it, so the thumb is drawn
   explicitly per engine. A default thumb is ~12px, well under a fingertip. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer; width: 100%;
  /* the input must be taller than the track or the thumb is clipped by its own box */
  height: 26px; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--series-1); border: 2px solid var(--surface-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  margin-top: -9px;                      /* centre on the 6px track */
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--series-1); border: 2px solid var(--surface-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text-primary); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--text-primary); outline-offset: 2px; }

@media (hover: none), (max-width: 720px) {
  /* bigger still on touch, and a taller hit area than the thumb itself */
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -13px; }
  input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; }
  input[type="range"]::-webkit-slider-runnable-track { height: 8px; }
  input[type="range"]::-moz-range-track { height: 8px; }
  /* the year scrubber is the one people drag most */
  #scrub { height: 48px; }
  #scrub::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -14px; }
  #scrub::-moz-range-thumb { width: 34px; height: 34px; }
}

/* ---------- section comment threads ---------- */
.comments { margin-top: 14px; }
.comments-btn {
  font: inherit; font-size: 12.5px; padding: 6px 13px 6px 11px;
  border-radius: 999px; cursor: pointer; background: none;
  border: 1px solid var(--border-strong); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.comments-btn::before {
  content: ''; width: 11px; height: 9px; border: 1.4px solid currentColor;
  border-radius: 3px 3px 3px 0;
}
.comments-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.comments-btn.open { color: var(--text-primary); border-color: var(--text-muted); }
.comments-body {
  margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--border);
}
.comments-wait { font-size: 12.5px; color: var(--text-muted); margin: 14px 0; }

/* giscus ships its own light/dark sheets; only the outer frame is ours.
   The frame must carry an explicit background: an iframe with none is painted
   by the UA according to color-scheme, so on a machine set to dark mode the
   light giscus theme ends up sitting on a black canvas. */
.giscus, .giscus-frame { width: 100%; }
.giscus-frame { border: 0; background: var(--surface-1); }

@media (hover: none), (max-width: 720px) {
  .comments-btn { padding: 9px 15px 9px 13px; font-size: 13px; }
}