/* ==========================================================================
   Academic Exchange — single source of truth for the whole site's styling.
   Every page links ONLY this file. Templates carry no inline style and no
   hardcoded sizes/colours; they reference the classes and tokens defined here.

   Edit a token in :root once and the change ripples across every page.
   ========================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  /* Palette — strict black & white, minimal greys for structure only */
  --bg: #ffffff;
  --fg: #111111;
  --muted: #777777;
  --line: #e2e2e2;
  --line-strong: #111111;
  --hover: #f4f4f4;

  /* Typography — Jost everywhere, with a graceful system fallback */
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --track-tight: -0.02em;
  --track-wide: 0.08em;
  --track-wider: 0.14em;

  /* Spacing scale */
  --space-1: 0.4rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --maxw: 1100px;
  --maxw-wide: 1400px;
  --maxw-narrow: 680px;
  --radius: 0;
  --nav-h: 4rem;
  --border: 1px solid var(--line-strong);   /* strong outline — for component boxes only */
  --border-soft: 1px solid var(--line);      /* RULE: every separator/divider line uses this faint grey */
  --transition: 0.15s ease;
}

/* ---- Reset / base ----------------------------------------------------- */
* { box-sizing: border-box; }

/* Always reserve the scrollbar gutter so the centered top nav doesn't shift
   horizontally between pages that scroll and pages that don't. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { letter-spacing: var(--track-tight); line-height: var(--lh-tight); }

/* ---- Shared page shell (inner pages: postings, auth, submissions) ----- */
.page { flex: 1 1 auto; width: 100%; max-width: var(--maxw-narrow); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }
.page--wide { max-width: var(--maxw); }
.page--xwide { max-width: var(--maxw-wide); }
.page-header {
  border-bottom: var(--border-soft);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}
.page-header h1 {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-1);
}
.subtitle { color: var(--muted); margin: 0; font-size: var(--fs-sm); }

/* ---- Buttons / shared controls --------------------------------------- */
.btn {
  border: var(--border); border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-family: inherit;
  cursor: pointer; background: var(--fg); color: var(--bg);
  text-decoration: none; display: inline-block; text-align: center;
  transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--bg); color: var(--fg); }
.btn--ghost { background: var(--bg); color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }

/* ---- Back link -------------------------------------------------------- */
.back-link {
  display: inline-block; margin-bottom: var(--space-4); font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px; color: var(--muted);
}

/* ---- Posting cards ---------------------------------------------------- */
.postings { display: flex; flex-direction: column; gap: var(--space-3); }
.posting { padding-bottom: var(--space-3); border-bottom: var(--border-soft); }
.posting:last-child { padding-bottom: 0; border-bottom: 0; }
.posting-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.posting-inst { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.posting-dept { color: var(--muted); font-size: var(--fs-sm); margin: 0.2rem 0 0; }
.posting-id { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.badge {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--track-wide);
  border: var(--border); padding: 0.15rem 0.5rem;
}
.posting-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.25rem;
  font-size: var(--fs-sm); margin-top: var(--space-1);
}
.posting-grid dt { color: var(--muted); }
.posting-grid dd { margin: 0; }
.empty { color: var(--muted); }

/* Clickable posting card — the whole card links to the position page. */
.posting--link { display: block; color: inherit; text-decoration: none; }
.posting--link:hover { background: var(--hover); }
.posting-cta {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--fs-sm); color: var(--muted);
}
.posting--link:hover .posting-cta { color: var(--fg); }

/* ---- Position detail page -------------------------------------------- */
.backlink { font-size: var(--fs-sm); margin: 0 0 var(--space-3); }
.position-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* Discussion forum thread. */
.thread { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.thread-item { padding-bottom: var(--space-3); border-bottom: var(--border-soft); }
.thread-item:last-child { padding-bottom: 0; border-bottom: 0; }
.thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); }
.thread-author { font-weight: var(--fw-semibold); }
.thread-body { margin: var(--space-2) 0 0; white-space: pre-wrap; }
.thread-form { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.thread-form textarea { width: 100%; font: inherit; padding: var(--space-2); border: var(--border); resize: vertical; }
.thread-signin { margin-top: var(--space-4); }
.privacy-note {
  margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--border-soft);
  font-size: var(--fs-sm); color: var(--muted);
}

/* ---- Generic top nav (inner pages) ------------------------------------ */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--space-3); margin-bottom: var(--space-5); border-bottom: var(--border-soft);
  font-size: var(--fs-sm);
}
.nav a { text-decoration: none; }
.nav-brand { font-weight: var(--fw-semibold); }
.nav-right { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); }
.nav-right a { text-decoration: underline; text-underline-offset: 3px; }
.role-chip {
  text-transform: uppercase; letter-spacing: var(--track-wide); font-size: 0.62rem;
  border: var(--border); color: var(--fg); padding: 0.1rem 0.4rem;
}
.linkform { display: inline; }
.linkform button {
  background: none; border: none; padding: 0; color: var(--muted); cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* ---- Forms ------------------------------------------------------------ */
.auth-card { max-width: 380px; }
.form-row { margin-bottom: var(--space-4); }
.form-row label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.35rem; }
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password] {
  width: 100%; background: var(--bg); border: var(--border);
  color: var(--fg); border-radius: var(--radius); padding: var(--space-2) var(--space-2);
  font-size: var(--fs-base); font-family: inherit;
}
.form-row input:focus { outline: 2px solid var(--fg); outline-offset: -1px; }
.role-options { display: flex; gap: var(--space-2); }
.role-options label {
  flex: 1; display: flex; align-items: center; gap: 0.5rem; color: var(--fg);
  border: var(--border); padding: var(--space-2); cursor: pointer; margin: 0;
}
.helptext, .errorlist {
  font-size: var(--fs-xs); color: var(--muted); margin: 0.35rem 0 0; padding: 0; list-style: none;
}
.errorlist { color: var(--fg); font-weight: var(--fw-semibold); }
.form-foot { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--muted); }
.form-foot a { text-underline-offset: 3px; }

/* ---- Postings filters + pagination ------------------------------------ */
/* Postings: a full-width page where filters sit in a slim bar across the top
   and each view (List/Map/Timeline/Insights) spans the whole width below. */
.postings-filterbar {
  margin-bottom: var(--space-4); padding-bottom: var(--space-4);
  border-bottom: var(--border-soft);
}
.postings-filterbar .filters { margin-bottom: 0; }

.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); align-items: center;
}
.filters input[type=text], .filters select {
  border: var(--border); border-radius: var(--radius); padding: 0.55rem 0.7rem;
  font-size: var(--fs-sm); font-family: inherit; background: var(--bg); color: var(--fg);
}
.filters input[type=text] { flex: 1 1 14rem; }
.filters-clear { font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.pagination {
  display: flex; align-items: center; gap: var(--space-3); justify-content: flex-end;
  margin-top: var(--space-5); font-size: var(--fs-sm);
}
.pagination a { text-decoration: underline; text-underline-offset: 3px; }
.pagination-info { color: var(--muted); }

/* ==========================================================================
   DASHBOARD (applicant home base) — stat tiles + panels in a two-col layout
   ========================================================================== */

/* Header with the role chip pushed to the right. */
.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

/* Tabbed shell: a vertical tab rail on the left, one switched container on the
   right. Only the active pane is shown; the rest stay in the DOM for instant,
   reload-free switching (toggled by the small script in the template). */
.dash-shell {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-5); align-items: start;
}
.dash-tabs {
  display: flex; flex-direction: column;
  position: sticky; top: calc(var(--nav-h) + var(--space-4));
  border-top: var(--border-soft);
}
.dash-tab {
  appearance: none; background: none; border: 0; border-bottom: var(--border-soft);
  font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer;
  color: var(--muted); padding: var(--space-3) var(--space-3);
  transition: color var(--transition), background var(--transition);
}
.dash-tab:hover { color: var(--fg); background: var(--hover); }
.dash-tab.is-active {
  color: var(--fg); font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--fg);
}
.dash-panes { min-width: 0; }
.dash-pane { display: none; flex-direction: column; gap: var(--space-4); }
.dash-pane.is-active { display: flex; }

/* Employer dashboard — at-a-glance posting counts above the postings list. */
.dash-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.dash-stat { border: var(--border); padding: var(--space-4); text-align: center; }
.dash-stat__num { display: block; font-size: var(--fs-xl); font-weight: 600; }
.dash-stat__label { display: block; color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 720px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }

/* "My package" — stacked question/answer rows grouped per wizard piece. */
.pkg-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0 0; }
.pkg-item {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding-bottom: var(--space-3); border-bottom: var(--border-soft);
}
.pkg-item:last-child { padding-bottom: 0; border-bottom: 0; }
.pkg-item__q { color: var(--muted); font-size: var(--fs-sm); }
.pkg-item__a { margin: 0; font-size: var(--fs-base); }

/* ---- "About me" — inline-editable package (no wizard round-trip) ------- */
.about-intro { margin: 0 0 var(--space-4); }
/* Each editable piece is its own <form>; space the forms like panels. */
.pkg-section + .pkg-section { margin-top: var(--space-4); }
.about-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-3); }
.about-field { padding-bottom: var(--space-4); border-bottom: var(--border-soft); }
.about-field:last-child { padding-bottom: 0; border-bottom: 0; }
.about-field__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: 0.35rem;
}
.about-field__label { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.about-field__req { color: var(--fg); }
.about-input {
  width: 100%; background: var(--bg); border: var(--border); color: var(--fg);
  border-radius: var(--radius); padding: var(--space-2);
  font-size: var(--fs-base); font-family: inherit;
}
textarea.about-input { resize: vertical; }
.about-input:focus { outline: 2px solid var(--fg); outline-offset: -1px; }
.about-name { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.about-name__field { display: flex; flex-direction: column; gap: 0.3rem; }
.about-name__label { font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 520px) { .about-name { grid-template-columns: 1fr; } }
.about-currency { display: flex; align-items: stretch; }
.about-currency__sign,
.about-currency__unit { display: flex; align-items: center; padding: 0 var(--space-2); border: var(--border); background: var(--bg); color: var(--muted); font-size: var(--fs-sm); }
.about-currency__sign { border-right: none; }
.about-currency__unit { border-left: none; letter-spacing: 0.08em; }
.about-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.about-check { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); cursor: pointer; }
.about-rank { display: flex; flex-direction: column; gap: var(--space-2); }
.about-rank__row { display: flex; align-items: center; gap: var(--space-3); }
.about-rank__num { width: 4rem; background: var(--bg); border: var(--border); color: var(--fg); padding: 0.35rem var(--space-2); font-family: inherit; }
.about-rank__label { font-size: var(--fs-sm); }
/* A private piece's fields read owner-only — tint the rail to signal it. */
.about-field--private { border-left: var(--border); padding-left: var(--space-3); }

/* Employer-visibility control: an open-eye / slashed-eye toggle beside each
   public field. Open eye + black label = employers can see it; slashed eye +
   grey label = hidden. Purely typographic + line-icon, to match the site. */
.vis-eye { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; flex: none; }
.vis-eye__input { position: absolute; opacity: 0; width: 0; height: 0; }
.vis-eye__icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--muted); transition: color .12s ease; }
.vis-eye__slash { transition: opacity .12s ease; }            /* shown only when hidden */
.vis-eye__text {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: var(--track-wide); transition: color .12s ease;
}
/* Visible (checked): open eye, no slash, full-strength colour. */
.vis-eye__input:checked + .vis-eye__icon { color: var(--fg); }
.vis-eye__input:checked + .vis-eye__icon .vis-eye__slash { opacity: 0; }
.vis-eye__input:checked ~ .vis-eye__text { color: var(--fg); }
.vis-eye__input:focus-visible + .vis-eye__icon { outline: 2px solid var(--fg); outline-offset: 3px; }

/* Section master eye: a larger eye in its own bar that drives every field eye
   below it, with a third "mixed" state (half-faded slash). */
.vis-master {
  display: flex; margin: var(--space-3) 0; padding: var(--space-2) var(--space-3);
  border: var(--border-soft); background: var(--hover);
}
.vis-eye--lg .vis-eye__icon { width: 1.5rem; height: 1.5rem; }
.vis-eye--lg .vis-eye__text { font-size: var(--fs-sm); color: var(--fg); }
.vis-eye__input:indeterminate + .vis-eye__icon { color: var(--fg); }
.vis-eye__input:indeterminate + .vis-eye__icon .vis-eye__slash { opacity: 0.4; }
.vis-eye__input:indeterminate ~ .vis-eye__text { color: var(--fg); }

/* ---- "General outlook" — US tile-grid map of open positions ----------- */
.outlook-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4);
}
.outlook-lead { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 52ch; }
.outlook-controls { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.outlook-legend { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--muted); }
.outlook-legend li { display: flex; align-items: center; gap: 0.35rem; }
.usmap__swatch { width: 0.9rem; height: 0.9rem; display: inline-block; border: var(--border-soft); }

/* Layout switch: a sharp two-cell segmented control (by state | by deadline).
   The active cell is inverted to solid black, matching the site's chrome. */
.outlook-switch { display: inline-flex; border: var(--border); }
.outlook-switch__btn {
  appearance: none; font: inherit; cursor: pointer; padding: 0.35rem var(--space-3);
  background: var(--bg); color: var(--muted); border: 0;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide);
  transition: background .12s, color .12s;
}
.outlook-switch__btn + .outlook-switch__btn { border-left: var(--border); }
.outlook-switch__btn:hover { color: var(--fg); }
.outlook-switch__btn.is-active { background: var(--fg); color: var(--bg); }

/* The two layouts share the left column; only the active one is shown. */
.outlook-block { display: none; }
.outlook-block.is-active { display: block; }

/* By-deadline layout: a month calendar; day cells use the same shade scale as
   the map, so "darker = more positions closing that day". */
.cal { max-width: 560px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal__title { margin: 0; font-size: var(--fs-md); }
.cal__nav {
  appearance: none; font: inherit; cursor: pointer; line-height: 1;
  border: var(--border); background: var(--bg); color: var(--fg);
  padding: 0.1rem 0.7rem; font-size: var(--fs-md);
}
.cal__nav:hover { background: var(--fg); color: var(--bg); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__weekdays {
  margin-bottom: 4px; font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--track-wide); text-align: center;
}
.cal__day {
  appearance: none; font: inherit; aspect-ratio: 1 / 1; padding: 0.3rem;
  border: var(--border-soft); background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  transition: box-shadow var(--transition);
}
.cal__day--pad { border: 0; background: transparent; }
.cal__day--empty { color: var(--muted); }
.cal__num { font-size: 0.62rem; font-weight: var(--fw-semibold); }
.cal__count { align-self: flex-end; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; }
.cal__day.is-today { outline: 1px dashed var(--fg); outline-offset: -3px; }
/* Only days with deadlines are interactive. */
.cal__day.has-positions { cursor: pointer; }
.cal__day.has-positions:hover,
.cal__day.is-selected { box-shadow: inset 0 0 0 2px var(--fg); }

/* Map (left) + selected-state detail panel (right). */
.outlook-layout {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--space-5); align-items: start;
}

/* The tile grid: 11 columns matching the server-built 8x11 cartogram. Capped so
   the square tiles keep a sensible size no matter how wide the page gets. */
.usmap { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; max-width: 560px; }
.usmap__cell {
  appearance: none; font: inherit; cursor: default; padding: 0;
  border: var(--border-soft); aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; color: var(--fg); background: var(--bg);
  transition: box-shadow var(--transition);
}
.usmap__cell--empty { border: 0; background: transparent; }
.usmap__code { font-size: 0.6rem; font-weight: var(--fw-semibold); letter-spacing: var(--track-wide); }
.usmap__count { font-size: 0.62rem; opacity: 0.7; }
/* Only states with at least one opening are interactive. */
.usmap__cell.has-positions { cursor: pointer; }
.usmap__cell.has-positions:hover,
.usmap__cell.is-active { box-shadow: inset 0 0 0 2px var(--fg); }

/* Greyscale choropleth bands (light = fewer, dark = more open positions). */
.usmap__cell--l0 { background: var(--bg); color: var(--muted); }
.usmap__cell--l1 { background: #ededed; }
.usmap__cell--l2 { background: #cfcfcf; }
.usmap__cell--l3 { background: #9a9a9a; color: #fff; }
.usmap__cell--l4 { background: #2b2b2b; color: #fff; }
.usmap__swatch--l1 { background: #ededed; }
.usmap__swatch--l4 { background: #2b2b2b; }

.usmap-panel { align-self: stretch; }
.outlook-foot { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--fg); }
.outlook-foot .muted { color: var(--muted); }

@media (max-width: 760px) {
  /* Drop the detail panel below the map on narrow screens. */
  .outlook-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Postings page — view switcher (List / Timeline / Insights) and the
   Timeline and Insights visualizations. Reuses .panel and .usmap-panel.
   ========================================================================== */

/* ---- View switcher tabs ---------------------------------------------- */
.pv-tabs {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  border-bottom: var(--border-soft); margin-bottom: var(--space-4);
}
.pv-tab {
  appearance: none; font: inherit; cursor: pointer; background: transparent;
  border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  padding: var(--space-2) var(--space-3); margin-bottom: -1px;
  font-weight: var(--fw-medium); letter-spacing: var(--track-wide);
  text-transform: uppercase; font-size: var(--fs-xs);
  transition: color var(--transition), border-color var(--transition);
}
.pv-tab:hover { color: var(--fg); }
.pv-tab.is-active { color: var(--fg); border-bottom-color: var(--fg); }
/* Visible keyboard focus for arrow-key tab navigation. */
.pv-tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Panes: only the active one shows. */
.pv-pane { display: none; }
.pv-pane.is-active { display: block; }
/* Keep AT and CSS in agreement: a `hidden` pane stays hidden even if styled. */
.pv-pane[hidden] { display: none; }

/* ---- Accessible data tables ------------------------------------------ */
/* The no-JS / CDN-failure equivalent of the choropleth and the charts: the same
   numbers rendered as plain tables behind a <details> disclosure. */
.pv-data-table { margin-top: var(--space-4); }
.pv-data-table > summary {
  cursor: pointer; color: var(--muted);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--track-wide);
}
.pv-table {
  width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-4);
}
.pv-table caption {
  text-align: left; color: var(--muted); padding: var(--space-2) 0;
  font-weight: var(--fw-medium);
}
.pv-table th, .pv-table td {
  text-align: left; padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-soft);
}
.pv-table td { text-align: right; font-variant-numeric: tabular-nums; }

/* Two-column viz + side panel for the Timeline view. */
.pv-tl__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-5); align-items: start;
}

/* ---- View: horizontal timeline --------------------------------------- */
.pv-tl__lead {
  font-size: var(--fs-sm); color: var(--muted); max-width: 52ch;
  margin: 0 0 var(--space-4);
}
.pv-tl__axis {
  display: flex; gap: var(--space-5); overflow-x: auto; padding-bottom: var(--space-3);
  border-bottom: var(--border-soft); align-items: flex-end; min-height: 120px;
}
.pv-tl__month { flex: 0 0 auto; }
.pv-tl__month-label {
  display: block; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--muted); margin-bottom: var(--space-2);
}
.pv-tl__track { display: flex; gap: var(--space-2); align-items: flex-end; }
.pv-tl__marker {
  appearance: none; font: inherit; cursor: pointer; padding: 0;
  border: var(--border-soft); border-radius: 50%; background: #ededed; color: var(--fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; transition: box-shadow var(--transition), background var(--transition);
}
.pv-tl__marker:hover,
.pv-tl__marker.is-selected { box-shadow: inset 0 0 0 2px var(--fg); background: #cfcfcf; }
.pv-tl__marker.is-today { border-color: var(--fg); }
.pv-tl__marker-day { font-size: 0.6rem; font-weight: var(--fw-semibold); }
.pv-tl__marker-n { font-size: 0.55rem; opacity: 0.7; }

/* ---- View 3: insights (charts + AI summary) -------------------------- */
.pv-insights { display: flex; flex-direction: column; gap: var(--space-5); }
.pv-summary { position: relative; }
.pv-summary__body { font-size: var(--fs-md); line-height: var(--lh-normal); margin: 0 0 var(--space-3); }
/* Locked teaser: blur the (anonymous) briefing behind a centered log-in prompt. */
.pv-summary--locked .pv-summary__body {
  filter: blur(6px); pointer-events: none; user-select: none; min-height: 6rem;
}
.pv-summary__lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  text-align: center; padding: var(--space-4);
}
.pv-summary__lock-text { margin: 0; max-width: 28rem; font-weight: var(--fw-semibold); }
.pv-summary__consent-text { margin: 0 0 var(--space-3); max-width: 34rem; }
.pv-summary__consent-btn { display: inline-block; }
.pv-summary__intro { margin: 0 0 var(--space-3); }
.pv-summary__sec {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide);
  color: var(--muted); margin: var(--space-3) 0 var(--space-1);
}
.pv-summary__list { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.pv-summary__list li { margin-bottom: var(--space-1); }
.pv-summary__body mark { background: #fff1a8; padding: 0 0.15em; }
.pv-summary__body u { text-decoration: underline; text-underline-offset: 2px; }
/* DEBUG-only briefing-regenerate control — remove with the button before release. */
.pv-summary__debug {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-2) 0 0; flex-wrap: wrap;
}
.pv-summary__regen {
  font-size: var(--fs-xs); padding: var(--space-1) var(--space-2);
  border: var(--border-soft); background: #fff; cursor: pointer;
}
.pv-summary__regen:disabled { opacity: 0.6; cursor: default; }
.pv-summary__debug-note { font-size: var(--fs-xs); color: #b00020; }
.pv-charts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
}
.pv-chart { margin: 0; border: var(--border-soft); padding: var(--space-4); }
.pv-chart--wide { grid-column: 1 / -1; }
.pv-chart figcaption {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide);
  color: var(--muted); margin-bottom: var(--space-3);
}
.pv-chart__canvas { position: relative; height: 220px; }

@media (max-width: 760px) {
  .pv-tl__layout,
  .pv-charts { grid-template-columns: 1fr; }
}

/* At-a-glance stat tiles. */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.stat {
  border: var(--border); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  text-decoration: none; color: inherit;
  transition: background var(--transition), color var(--transition);
}
a.stat:hover { background: var(--fg); color: var(--bg); }
.stat__num { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.stat__label {
  text-transform: uppercase; letter-spacing: var(--track-wide);
  font-size: var(--fs-xs); color: var(--muted);
}
a.stat:hover .stat__label { color: var(--bg); }

/* Two-column body: the applicant's own application on the left, a live window
   into the open-positions pool on the right. */
.dash-layout {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4); align-items: start;
}
.dash-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash-rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Outlined content panels shared by the dashboard. */
.panel { border: var(--border); padding: var(--space-5); }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.panel__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.panel__link { font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.panel__lead { font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }

/* Key/value rows for the application summary. */
.kv {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.25rem;
  font-size: var(--fs-sm); margin: var(--space-3) 0 0;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ---- Flash messages (dashboard actions) ------------------------------- */
.dash-messages { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dash-message { border: var(--border); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.dash-message--error { border-color: var(--line-strong); font-weight: var(--fw-semibold); }

/* ---- "Files & links" tab ---------------------------------------------- */
.doc-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--border-soft);
}
.doc-row:last-child { border-bottom: 0; }
.doc-row__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.doc-row__label { font-weight: var(--fw-medium); }
.doc-row__file { font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.doc-row__date { font-size: var(--fs-xs); color: var(--muted); }
.doc-row__empty { font-size: var(--fs-sm); color: var(--muted); }
.doc-row__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.doc-upload { margin: 0; }
/* The real file input is hidden; the styled label/span is the control. */
.doc-upload__file { display: inline-block; cursor: pointer; }
.doc-upload__file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.doc-upload__file .btn { cursor: pointer; }
.doc-row__remove {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.doc-row__remove:hover { color: var(--fg); }

.links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.links-grid .form-row { margin-bottom: 0; }
.form-row input[type=url] {
  width: 100%; background: var(--bg); border: var(--border); color: var(--fg);
  border-radius: var(--radius); padding: var(--space-2); font-size: var(--fs-base); font-family: inherit;
}
.form-row input[type=url]:focus { outline: 2px solid var(--fg); outline-offset: -1px; }

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

@media (max-width: 980px) {
  .dash-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Drop the tab rail above the content and lay the tabs out horizontally. */
  .dash-shell { grid-template-columns: 1fr; gap: var(--space-4); }
  .dash-tabs {
    position: static; flex-direction: row; flex-wrap: wrap;
    border-top: 0; border-bottom: var(--border-soft);
  }
  .dash-tab { border-bottom: 0; }
  .dash-tab.is-active { box-shadow: inset 0 -2px 0 var(--fg); }
}
@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Embedded wizard host ---------------------------------------------- */
/* The React SPA mounts into #root.wizard-host between the site nav and footer;
   grow it so the footer rests at the bottom on short wizard steps. */
.wizard-host { flex: 1 1 auto; width: 100%; }
/* The site nav already links home, so the SPA's own "← Exchange home" link is
   redundant once it's wrapped in the shell — hide it only in the embedded case. */
.home .home-link { display: none; }

/* ==========================================================================
   HOMEPAGE (landing) — sticky topnav + intro + two-role entry + footer
   ========================================================================== */

/* Full-height column so the footer rests at the bottom on short pages. */
.home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.home__main { flex: 1 1 auto; }

/* Two-column body: intro on the left, "Get started" rail on the right. */
.home__layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Shared centred container for landing sections. */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }

/* Hide visually but keep available to screen readers (e.g. section headings). */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Sticky top nav --------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: var(--border-soft);
  min-height: var(--nav-h);
  display: flex; align-items: center;
}
.site-nav__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.site-nav__brand {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight); text-decoration: none;
}
.site-nav__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.site-nav__links a { text-decoration: none; }
.site-nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav__user { color: var(--muted); }
/* Soft, outline-free Register button in the nav. */
.site-nav .btn--ghost { border: 0; background: var(--hover); color: var(--fg); }
.site-nav .btn--ghost:hover { background: var(--fg); color: var(--bg); }

/* ---- Hero / intro ----------------------------------------------------- */
.hero { min-width: 0; }
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: var(--track-wider);
  font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--space-3);
}
.hero__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4); max-width: 18ch;
}
.hero__lead {
  font-size: var(--fs-md); color: var(--muted); line-height: var(--lh-snug);
  max-width: 60ch; margin: 0 0 var(--space-5);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* "How it works" — a minimal numbered visualization of the flow. */
.steps {
  border-top: var(--border-soft);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.step { padding-top: var(--space-5); }
.step__num {
  font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  display: block; margin-bottom: var(--space-2);
}
.step__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); }
.step__body { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: var(--lh-snug); }

/* ---- Two-role login / signup entrypoint ------------------------------- */
/* Center the whole entry rail vertically against the taller intro column. */
.entry { align-self: center; min-width: 0; }
.entry__head { margin-bottom: var(--space-5); }
.entry__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.entry__sub { color: var(--muted); margin: 0; font-size: var(--fs-md); }

/* No black outlines: borderless cards split by a soft grey hairline. */
.roles { display: flex; flex-direction: column; }
.role-card {
  padding: var(--space-5) 0;
  display: flex; flex-direction: column;
}
.role-card:first-child { padding-top: 0; }
.role-card + .role-card { border-top: var(--border-soft); }
.role-card__label {
  text-transform: uppercase; letter-spacing: var(--track-wider);
  font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--space-2);
}
.role-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.role-card__body { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-snug); margin: 0 0 var(--space-4); }
/* Soft, outline-free buttons: filled-grey primary, plain-text secondary. */
.role-card__actions { display: flex; gap: var(--space-3); align-items: center; }
.role-card__actions .btn {
  border: 0; background: var(--hover); color: var(--fg);
}
.role-card__actions .btn:hover { background: var(--fg); color: var(--bg); }
.role-card__actions .btn--ghost {
  background: transparent; padding-left: 0; padding-right: 0;
  text-decoration: underline; text-underline-offset: 4px; color: var(--muted);
}
.role-card__actions .btn--ghost:hover { background: transparent; color: var(--fg); }

/* Authenticated state: single personalised continue panel. */
.welcome { border: var(--border); padding: var(--space-5); }
.welcome__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.welcome__body { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--space-4); }

/* ---- Footer ----------------------------------------------------------- */
.site-footer {
  border-top: var(--border-soft);
  background: var(--bg);
}
.site-footer__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  justify-content: flex-start; align-items: flex-start;
  padding-top: var(--space-5); padding-bottom: var(--space-5);
}
.site-footer__brand { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.site-footer__tagline { color: var(--muted); font-size: var(--fs-sm); margin: var(--space-1) 0 0; max-width: 32ch; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer__col h3 {
  text-transform: uppercase; letter-spacing: var(--track-wide);
  font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--space-2); font-weight: var(--fw-semibold);
}
.site-footer__col a { display: block; font-size: var(--fs-sm); text-decoration: none; margin-bottom: var(--space-1); }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal {
  border-top: var(--border-soft); color: var(--muted); font-size: var(--fs-xs);
  text-align: center;
  padding-top: var(--space-3); padding-bottom: var(--space-4);
}

/* ---- Responsive ------------------------------------------------------- */
/* Below this width the two columns get cramped, so the rail drops below. */
@media (max-width: 980px) {
  .home__layout { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); }
}

@media (max-width: 760px) {
  :root { --fs-3xl: 2.5rem; --fs-2xl: 2rem; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-top: var(--space-4); }
}

@media (max-width: 640px) {
  .page { padding: var(--space-5) var(--space-3) var(--space-6); }
  .filters input[type=text] { flex-basis: 100%; }
  .nav { flex-wrap: wrap; gap: var(--space-2); }
  .site-nav__links { gap: var(--space-2); }
}

/* ---------------------------------------------------------------------------
   Candidate avatar — the extracted profile + interview chat (candidate app).
   Uses the shared tokens/.panel/.btn; scoped under .cand to stay self-contained.
   --------------------------------------------------------------------------- */
.cand__headline { font-size: var(--fs-md); color: var(--fg); margin: 0 0 var(--space-1); }
.cand__byline { font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); margin: 0; }
.cand__owner { margin-bottom: var(--space-4); }
.cand__status { font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-wide); }

.cand__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 880px) { .cand__grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.cand__main, .cand__side { display: flex; flex-direction: column; gap: var(--space-4); }
.cand .panel { margin: 0; }

.cand__summary p { margin: 0 0 var(--space-2); line-height: var(--lh-normal); }
.cand__summary p:last-child { margin-bottom: 0; }
.cand__kv { margin: 0 0 var(--space-2); }
.cand__kv span { display: inline-block; min-width: 7rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted); }
.cand__muted { color: var(--muted); }
.cand__count { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-normal); }

.cand__list { margin: 0; padding-left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.cand__list li { line-height: var(--lh-snug); }
.cand__pubs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cand__pub-title { font-weight: var(--fw-medium); }

.cand__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.cand__chip { font-size: var(--fs-xs); border: var(--border-soft); padding: 0.2rem var(--space-2); color: var(--fg); }

.cand__metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cand__metric-val { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.cand__metric-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-wide); }
.cand__gaps { color: var(--muted); }

.cand__chat { margin-top: var(--space-4); }
.cand__log { display: flex; flex-direction: column; gap: var(--space-2); max-height: 22rem; overflow-y: auto; margin: var(--space-3) 0; }
.cand__msg { padding: var(--space-2) var(--space-3); max-width: 80%; line-height: var(--lh-snug); border: var(--border-soft); white-space: pre-wrap; }
.cand__msg--user { align-self: flex-end; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cand__msg--avatar { align-self: flex-start; background: var(--hover); }
.cand__compose { display: flex; gap: var(--space-2); }
.cand__compose input { flex: 1 1 auto; border: var(--border); padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--fs-base); }
.cand__voice { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cand__voice audio { display: none; }
.cand__transcripts { margin-bottom: var(--space-4); }
.cand__transcript { border: var(--border-soft); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.cand__transcript summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.cand__log--static { max-height: none; margin-top: var(--space-2); }
/* "My avatar" persona & voice tab — fields + the preset voice picker. */
.av-editor .panel__lead { margin-bottom: var(--space-4); }
.av-field { margin-bottom: var(--space-4); }
.av-field:last-of-type { margin-bottom: var(--space-3); }
.av-field__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.av-field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.av-field__hint { color: var(--muted); font-size: var(--fs-xs); }
.av-textarea { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.av-field [data-preview-audio] { display: none; }

.voicegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.voicecard {
  display: flex; align-items: stretch; border: var(--border);
  transition: border-color var(--transition), background var(--transition);
}
.voicecard:hover { background: var(--hover); }
.voicecard.is-selected { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.voicecard__play {
  flex: 0 0 auto; width: 2.4rem; border: 0; border-right: var(--border-soft);
  background: none; color: var(--muted); font-size: var(--fs-sm); cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.voicecard__play:hover { color: var(--fg); background: var(--hover); }
.voicecard.is-playing .voicecard__play { color: var(--fg); }
.voicecard__pick {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem;
  appearance: none; background: none; border: 0; font: inherit; text-align: left;
  cursor: pointer; color: var(--fg); padding: var(--space-2) var(--space-3);
}
.voicecard__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: capitalize; }
.voicecard.is-selected .voicecard__name { font-weight: var(--fw-semibold); }
.voicecard__tag { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-wide); }