/* ==========================================================================
   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 {
  /* Tropical Jade palette — one steady jade anchor with aqua, peach, yellow,
     and mint sharing the supporting visual space. */
  --canvas: #fafbf8;
  --surface: #ffffff;
  --surface-soft: #f3f6f3;
  --bg: var(--surface);
  --fg: #16383c;
  --muted: #587074;
  --line: #dce4e0;
  --line-strong: #aabbb5;
  --hover: #eef3f0;
  --primary: #097c87;
  --primary-dark: #065d65;
  --primary-soft: #e4f3f1;
  --aqua: #23ced9;
  --aqua-soft: #e4fafa;
  --accent: #8b462a;
  --accent-bright: #fca47c;
  --accent-soft: #fff0e9;
  --yellow: #f9d779;
  --yellow-soft: #fff8dd;
  --mint: #a1cca6;
  --mint-soft: #eaf4eb;
  /* Compatibility aliases for older components. */
  --teal: var(--primary);
  --teal-bright: var(--aqua);
  --teal-soft: var(--aqua-soft);
  --sun: var(--yellow);
  --sun-soft: var(--yellow-soft);
  --success: #3f6f46;
  --success-soft: var(--mint-soft);
  --danger: #b4233b;
  --danger-soft: #fff0f3;
  --focus: #097c87;

  /* Typography — Jost everywhere, with a graceful system fallback */
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", 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-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --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;
  --shadow-sm: 0 3px 0 rgba(22, 56, 60, 0.04), 0 10px 26px rgba(22, 56, 60, 0.09);
  --shadow-md: 0 18px 48px rgba(22, 56, 60, 0.14);
}

/* ---- 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); }
.btn--small { padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--fg); color: var(--bg); }
.btn--ghost[disabled]:hover { background: var(--bg); color: var(--fg); }

/* ---- 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-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin: 0.2rem 0 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;
}
/* Notable, employer-positive signals read as inverted (filled) chips; the soft
   location caution stays muted grey — all within the monochrome palette. */
.badge--quality, .badge--role, .badge--mech { background: var(--fg); color: var(--bg); }
.badge--autoapply { background: var(--fg); color: var(--bg); }
.badge--attention { border-style: dashed; font-weight: var(--fw-semibold); }
.badge--flag { border-color: var(--line); color: var(--muted); }
.badge--verb { font-family: var(--font-mono, monospace); letter-spacing: var(--track-wider); }
.exchange-turn--mine { border-left: 2px solid var(--fg); }
.exchange-manifest { margin-top: var(--space-2); }
.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); }
.posting--catalog { padding: var(--space-4) 0; }
.posting--catalog:first-child { padding-top: 0; }
.posting-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3);
  position: relative; z-index: 1;
}

/* ---- Employer posting-fit landing page ------------------------------- */
.fit-summary { margin-bottom: var(--space-4); }
.fit-count { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.fit-count strong { font-size: var(--fs-xl); }
.fit-sankey-wrap { position: relative; height: 320px; margin-bottom: var(--space-4); }
.fit-sankey-wrap canvas { max-width: 100%; }
.fit-sankey-empty { color: var(--muted); font-size: var(--fs-sm); }
.fit-funnel-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fit-funnel-table caption { text-align: left; margin-bottom: var(--space-2); }
.fit-funnel-table th, .fit-funnel-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-soft); }
.fit-funnel-table td { text-align: right; }
.fit-funnel-table thead th { color: var(--muted); font-weight: var(--fw-semibold); }
.fit-funnel-table thead th:first-child, .fit-funnel-table tbody th { text-align: left; }
.fit-funnel-table__total th, .fit-funnel-table__total td { font-weight: var(--fw-semibold); border-bottom: 0; }
.fit-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.fit-card-actions .btn { padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
.fit-card-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.fit-card-actions .btn[disabled]:hover { background: var(--bg); color: var(--fg); }
.fit-card-reason { font-size: var(--fs-xs); }
.fit-card-profile { font-size: var(--fs-sm); margin-left: auto; }
.fit-debug-form { margin: 0; }
.fit-debug-btn { border-style: dashed; padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }

/* ---- Quality filters: fit-page summary + config page ----------------- */
.qf-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.qf-summary__label { color: var(--muted); }
.qf-summary__mode { text-transform: lowercase; letter-spacing: 0; }
.qf-summary__edit { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qf-form { margin-top: var(--space-4); }
.qf-list { list-style: none; margin: var(--space-4) 0; padding: 0; }
.qf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-soft); }
.qf-row__label { font-weight: var(--fw-semibold); margin: 0; }
.qf-row__help { margin: 0.25rem 0 0; max-width: 48ch; }
.qf-row__modes { display: flex; gap: var(--space-3); border: 0; padding: 0; margin: 0; white-space: nowrap; }
.qf-mode { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 0.3rem; }
.qf-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link — clipped until focused, then a visible button that jumps keyboard
   users past the nav to the main landmark (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute; top: 0.5rem; left: 0.5rem; z-index: 1000;
  padding: 0.55rem 1rem; background: var(--fg); color: var(--bg);
  border-radius: 6px; font-weight: var(--fw-medium); text-decoration: none;
}
.skip-link:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 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); }
.position-title { margin: var(--space-1) 0; font-size: var(--fs-md); font-weight: var(--fw-medium); }

/* Applicant-only deterministic Auto Apply readiness on a position page. */
.autoapply-panel {
  margin: 0 0 var(--space-4);
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}
@media (max-width: 760px) {
  .autoapply-panel { scroll-margin-top: 9rem; }
}
.autoapply-status {
  border: var(--border-soft); padding: 0.15rem 0.5rem;
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--track-wide); white-space: nowrap;
}
.autoapply-status--ready { border-color: var(--fg); color: var(--fg); }
.autoapply-status--attention { border-color: var(--fg); color: var(--fg); font-weight: var(--fw-semibold); }
.autoapply-playbook { margin: 0 0 var(--space-3); font-weight: var(--fw-semibold); }
.autoapply-playbook span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-normal); }
.autoapply-attention {
  display: grid; gap: 0.2rem; margin: 0 0 var(--space-3);
  padding: var(--space-3); border: 2px solid var(--fg);
}
.autoapply-attention span { font-size: var(--fs-sm); }
.autoapply-captcha-note { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.autoapply-panel--blocked { border-width: 2px; }
.autoapply-checks { list-style: none; margin: 0; padding: 0; }
.autoapply-check {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: var(--border-soft);
}
.autoapply-check:last-child { border-bottom: 0; }
.autoapply-check__mark { color: var(--muted); line-height: 1.5; }
.autoapply-check.is-ready .autoapply-check__mark { color: var(--fg); }
.autoapply-check strong { display: block; font-size: var(--fs-sm); }
.autoapply-check small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.autoapply-check a { display: inline-block; font-size: var(--fs-xs); margin-top: 0.2rem; }
.autoapply-panel .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.autoapply-panel .btn[disabled]:hover { background: var(--fg); color: var(--bg); }
.autoapply-panel .panel__actions form,
.autoapply-run .panel__actions form { margin: 0; }
.autoapply-run { margin-bottom: var(--space-5); }
.autoapply-run--attention { border: 2px solid var(--fg); }
.autoapply-run--attention h3 { margin: 0 0 var(--space-2); }
.run-checkpoint-form { display: grid; gap: var(--space-2); max-width: 42rem; }
.run-checkpoint-form .about-input { min-height: 2.75rem; }
.run-checkpoint-form .btn { justify-self: start; }
.run-error { white-space: pre-wrap; color: var(--error, #8b1e1e); }
.run-log { border-top: var(--border); padding-top: var(--space-4); }
.run-log pre {
  max-height: 24rem; overflow: auto; margin: var(--space-2) 0 0;
  padding: var(--space-3); border: var(--border-soft); background: #f7f7f7;
  font: 0.8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.intake-section { padding: var(--space-5) 0; }
.intake-section + .intake-section { border-top: var(--border-soft); }
.intake-section .panel__title { font-size: var(--fs-md); }
.intake-section select.about-input,
.intake-section input.about-input { min-height: 2.55rem; }
.intake-section .errorlist { margin: var(--space-1) 0; padding: 0; list-style: none; font-size: var(--fs-xs); }
.mailbox-value { display: block; overflow-wrap: anywhere; font-size: var(--fs-base); }
.mailbox-actions form { margin: 0; }
.mailbox-error { margin: var(--space-2) 0 0; }
.intake-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.intake-check > div label { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); }
.intake-check input { margin-top: 0.2rem; flex: none; }
.intake-blockers { border-top: var(--border); border-bottom: var(--border); padding: var(--space-4) 0; margin-bottom: var(--space-5); }
.intake-blockers ul { margin: var(--space-2) 0 0; padding-left: 1.25rem; }
.application-answers-actions { border-top: var(--border); padding-top: var(--space-4); }
@media (max-width: 620px) { .intake-check { grid-template-columns: 1fr; } }

/* 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); }
/* Password-requirements hint: Django renders help_text as a nested <ul>, so
   tidy that list into small, muted guidance shown under the field. */
.field-hint { font-size: var(--fs-xs); color: var(--muted); margin: 0.35rem 0 0; }
.field-hint ul { margin: 0; padding-left: 1.1em; }
.field-hint li { margin: 0.1rem 0; }
.field-hint:empty { display: none; }
.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); }

/* Custom filter disclosures replace the operating system's native select
   popups while preserving ordinary form submission and radio semantics. */
.filter-menu {
  position: relative;
  min-width: 0;
  color: var(--fg);
}
.filter-menu.is-open { z-index: 40; }
.filter-menu__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--fg);
  cursor: pointer;
  font-size: var(--fs-sm);
  list-style: none;
  user-select: none;
}
.filter-menu__summary:hover { border-color: var(--primary); }
.filter-menu__summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.filter-menu.is-open > .filter-menu__summary {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.filter-menu__chevron {
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.2rem 0.15rem 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition), margin var(--transition);
}
.filter-menu.is-open .filter-menu__chevron {
  margin-top: 0.25rem;
  transform: rotate(225deg);
}
.filter-menu__options {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  max-height: min(18rem, 42vh);
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.filter-menu__option {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.65rem;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: left;
}
.filter-menu__option:hover { background: var(--surface-soft); }
.filter-menu__option:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.filter-menu__check {
  opacity: 0;
  color: var(--primary-dark);
  font-weight: var(--fw-semibold);
}
.filter-menu__option[aria-selected="true"] {
  background: var(--aqua-soft);
  color: var(--primary-dark);
  font-weight: var(--fw-semibold);
}
.filter-menu__option[aria-selected="true"] .filter-menu__check { opacity: 1; }
.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);
}
/* "About me" sub-menu: one entry per profile piece, indented under the parent
   tab and revealed only while one of the pieces is active. */
.dash-subtabs { display: none; flex-direction: column; }
.dash-subtabs.is-open { display: flex; }
.dash-subtab {
  font-size: var(--fs-xs);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
}
.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); }

/* Groups the pieces of one posting when an employer has several. */
.pkg-posting {
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-soft);
  font-size: var(--fs-lg);
}
.pkg-posting:first-child { margin-top: 0; }

/* ---- "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); }
/* Each editing section reads as an open form anchored by a strong top rule
   (the sidebar's group-header idiom), with soft grey outlines on the controls
   instead of the strong black. */
.about-section { border-top: 2px solid var(--fg); padding-top: var(--space-3); }
.about-section + .about-section { margin-top: var(--space-5); }
.about-section .about-input,
.about-section .about-rank__num { border: var(--border-soft); }
.about-section .about-currency__sign,
.about-section .about-currency__unit,
.about-section .badge { border-color: var(--line); }
.about-section .badge { color: var(--muted); }
/* One question per line, capped at a readable measure — genuinely paired
   values (name parts, currency, status@affiliation) pair up inside a field. */
.about-fields {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 42rem; margin-top: var(--space-3);
}
.about-field { padding-bottom: var(--space-4); border-bottom: var(--border-soft); }
/* Intrinsically short values shouldn't stretch across the whole measure. */
.about-field > input[type="number"].about-input { max-width: 10rem; }
.about-field > input[type="date"].about-input { max-width: 13rem; }
.about-field > select.about-input { max-width: 28rem; }
.about-field__label {
  display: block; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--fg); margin: 0 0 0.4rem;
}
.about-field__req { color: var(--fg); }
.about-field__hint { margin: -0.25rem 0 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.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; max-width: 18rem; }
.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; }
/* Checkbox options render as toggleable chips: the native box is visually
   hidden (still focusable), a checked chip inverts to solid black. */
.about-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.about-check {
  position: relative; display: inline-flex; align-items: center;
  border: var(--border-soft); padding: 0.3rem 0.85rem;
  font-size: var(--fs-sm); cursor: pointer; user-select: none;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.about-check:hover { border-color: var(--fg); }
.about-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.about-check:has(input:checked) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.about-check:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 2px; }
/* Type-to-filter box for long flat chip lists (hidden until JS wires it). */
.about-checks__search { max-width: 18rem; margin-bottom: var(--space-2); }
.about-field .about-checks__search { border: var(--border-soft); }
/* US-state pickers group chips by census region, each with a toggle-all. */
.about-checkgroups { display: flex; flex-direction: column; gap: var(--space-3); }
.about-checkgroup__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-1);
}
.about-checkgroup__label {
  font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--muted);
}
.about-checkgroup__toggle {
  border: 0; background: none; padding: 0; font-family: inherit;
  font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.about-checkgroup__toggle:hover { color: var(--fg); }
/* Priorities: a compact numbered list in one bordered block. */
.about-rank { display: inline-flex; flex-direction: column; width: 100%; min-width: 0; max-width: 20rem; border: var(--border-soft); }
.about-rank__row { display: flex; align-items: center; gap: var(--space-3); padding: 0.45rem var(--space-3); }
.about-rank__row + .about-rank__row { border-top: var(--border-soft); }
.about-rank__num {
  width: 3rem; background: var(--bg); color: var(--fg); padding: 0.3rem 0;
  font-family: inherit; text-align: center; font-weight: var(--fw-semibold);
}
.about-rank__label { font-size: var(--fs-base); }
.about-status-affiliation { display: flex; align-items: center; gap: var(--space-2); }
.about-status-affiliation select { flex: 1 1 0; min-width: 0; }
.about-status-affiliation input { flex: 1 1 0; min-width: 0; }
.about-status-affiliation__at { flex: none; color: var(--muted); }
@media (max-width: 520px) { .about-status-affiliation { flex-direction: column; align-items: stretch; } .about-status-affiliation__at { display: none; } }
/* Each degree is its own bordered block; blank template rows hide behind the
   "+ Add degree" button (JS) so only real history shows. */
.about-education { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.about-education__row {
  width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2); border: var(--border-soft); padding: var(--space-3);
}
.about-education__row > * { min-width: 0; }
/* `display: grid` above would beat the UA's [hidden] rule. */
.about-education__row[hidden] { display: none; }
.about-education__row > :nth-child(-n+3) { grid-column: span 4; }
.about-education__row > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 760px) { .about-education__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-education__row > * { grid-column: span 1 !important; } }
@media (max-width: 520px) { .about-education__row { grid-template-columns: minmax(0, 1fr); } }
.about-education .helptext { margin: 0; }
/* Sticky per-form save bar: stays reachable inside the scrolling pane and
   flags pending edits the moment the form goes dirty. */
.about-actions {
  position: sticky; bottom: 0; z-index: 5; max-width: 42rem;
  margin-top: var(--space-3); padding: var(--space-2) 0;
  background: var(--bg); border-top: var(--border-soft);
}
form.about-section.is-dirty .about-actions { border-top-color: var(--fg); border-top-width: 2px; }
.about-actions__dirty { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
/* A private piece's fields read owner-only — tint the rail to signal it. */
.about-field--private { border-left: var(--border-soft); padding-left: var(--space-3); }

/* ---- "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; }

/* ---- View: 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: var(--yellow); padding: 0 0.15em; }
.pv-summary__body u { text-decoration: underline; text-underline-offset: 2px; }
.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-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; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); border-bottom: var(--border-soft);
}
.doc-row:last-child { border-bottom: 0; }
/* The whole row doubles as a drop target for its document kind. */
.doc-row.is-dragover { outline: 2px dashed var(--fg); outline-offset: -2px; }
/* Upload state at a glance: hollow square = missing, filled = uploaded. */
.doc-row__mark { flex: none; width: 0.7rem; height: 0.7rem; border: var(--border); }
.doc-row__mark.is-done { background: var(--fg); }
.doc-row__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.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__source {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--muted);
}
.doc-row__source form { margin: 0; }
.doc-row__need { font-size: var(--fs-xs); color: var(--muted); }
.doc-row__need.is-missing { color: var(--fg); }
.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); }
/* Upload progress: one cell per document kind, filled when uploaded. */
.doc-progress {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--muted);
}
.doc-progress__meter { display: flex; gap: 3px; }
.doc-progress__cell { width: 1.1rem; height: 0.5rem; border: var(--border-soft); }
.doc-progress__cell.is-done { background: var(--fg); border-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); }
  .dash-subtabs.is-open { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  .dash-subtab { padding-left: var(--space-3); }
}
@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); }
.site-nav__assistant-short,
.site-nav__browse-short,
.site-nav__workspace-short { display: none; }
/* 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);
}

/* ---- Legal / prose pages (Terms, Privacy, About, Contact) ------------- */
.legal { max-width: 60ch; }
.legal h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); }
.legal h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { line-height: 1.65; }
.legal p { margin: 0 0 var(--space-3); }
.legal ul { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.legal li { margin-bottom: var(--space-1); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__lede { font-size: var(--fs-md); color: var(--muted); margin-bottom: var(--space-4); }
.legal__meta { font-size: var(--fs-sm); color: var(--muted); }
.form-consent { font-size: var(--fs-xs); color: var(--muted); margin: var(--space-3) 0 0; }

/* ---- Apply-at-source bar on the position page ------------------------- */
.apply-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: var(--border);
}
.apply-bar__btn { white-space: nowrap; }
.apply-bar__note { color: var(--muted); font-size: var(--fs-sm); }

/* ---- Report / flag affordance ---------------------------------------- */
.report-row { margin: var(--space-3) 0; }
.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }
.report { font-size: var(--fs-sm); margin-top: var(--space-2); }
.report__toggle {
  cursor: pointer; color: var(--muted); font-size: var(--fs-xs);
  list-style: none; display: inline-block;
}
.report__toggle:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.report__form {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  margin-top: var(--space-2); padding: var(--space-3); border: var(--border-soft);
  max-width: 32rem;
}
.report__form select, .report__form textarea { width: 100%; }
.report__label { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Saved postings + application tracker ----------------------------- */
/* Stretched-link cards on the board: the overlay anchor covers the whole card
   so the whole surface is clickable, while the save star (position:relative,
   raised) sits above it and receives its own clicks. */
.posting--link { position: relative; }
.posting__overlay { position: absolute; inset: 0; z-index: 0; }
.posting-head__aside { display: flex; align-items: center; gap: var(--space-2); position: relative; z-index: 1; }
.position-header__aside { display: flex; align-items: center; gap: var(--space-3); }

.save-star { position: relative; z-index: 1; }
.save-star__btn {
  display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer;
  background: none; border: var(--border-soft); font-family: inherit;
  font-size: var(--fs-xs); color: var(--muted); padding: 0.2rem 0.5rem;
}
.save-star__btn:hover { color: var(--fg); border-color: var(--fg); }
.save-star__icon { font-size: var(--fs-sm); line-height: 1; }
.save-star.is-saved .save-star__btn { color: var(--fg); border-color: var(--fg); }

.match-card__aside { display: flex; align-items: center; gap: var(--space-2); }

.saved-list { display: flex; flex-direction: column; gap: var(--space-3); }
.saved-card {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--border-soft);
  flex-wrap: wrap;
}
.saved-card__deadline { color: var(--muted); font-size: var(--fs-sm); margin: var(--space-1) 0 0; }
.saved-card__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.saved-stage { display: flex; align-items: center; gap: var(--space-2); }
.saved-stage__label { font-size: var(--fs-xs); color: var(--muted); }

/* ---- Employer shortlist + private notes ------------------------------- */
.cand-mark { margin-bottom: var(--space-3); }
.cand-note { display: flex; flex-direction: column; gap: var(--space-2); }
.cand-note__label { font-size: var(--fs-xs); color: var(--muted); }
.cand-note textarea { width: 100%; }
.fit-shortlist-note { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--space-3); }

/* ---- Express-interest handshake --------------------------------------- */
.interest-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.interest-row__note { color: var(--muted); font-size: var(--fs-sm); }
.interest-form { display: flex; flex-direction: column; gap: var(--space-2); }
.interest-shared { font-weight: var(--fw-semibold); }
.interest-flag { color: var(--fg); font-size: var(--fs-sm); }
.interest-msg { color: var(--muted); font-size: var(--fs-sm); font-style: italic; margin: var(--space-1) 0 0; }

/* ---- Institution directory + pages ------------------------------------ */
.inst-list { list-style: none; margin: 0; padding: 0; }
.inst-list__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--border-soft);
}
.inst-list__item a { text-decoration: none; font-weight: var(--fw-medium); }
.inst-list__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.inst-list__count { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.position-header__inst { color: inherit; text-decoration: none; }
.position-header__inst:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Notification center ---------------------------------------------- */
.site-nav__badge {
  position: absolute; top: -0.5rem; right: -0.6rem; min-width: 1.1rem; height: 1.1rem;
  padding: 0 0.25rem; border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: 0.65rem; font-weight: var(--fw-semibold); display: inline-flex;
  align-items: center; justify-content: center;
}
.site-nav__bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: inherit; border-radius: 999px;
}
.site-nav__bell:hover { background: var(--hover); text-decoration: none; }
.site-nav__bell-icon {
  width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.site-nav__bell .site-nav__badge { top: 0.1rem; right: 0.05rem; }
.notif-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--border-soft);
}
.notif-item--unread { border-left: 3px solid var(--fg); padding-left: var(--space-2); }
.notif-item__text { text-decoration: none; }
.notif-item__text:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif-item__time { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }

/* ---- Posting analytics tiles (employer) ------------------------------- */
.analytics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.analytics__tile { border: var(--border-soft); padding: var(--space-3); text-align: center; }
.analytics__num { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1; }
.analytics__label { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: var(--space-1); }
.sub-toggle { display: inline; }
.posting-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; position: relative; z-index: 1; }
.posting-renew { position: relative; z-index: 1; }
.alerts-pref { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.alerts-pref__row { display: flex; gap: var(--space-2); align-items: flex-start; max-width: 46ch; font-size: var(--fs-sm); }

/* ---- Avatar transparency dashboard ------------------------------------ */
.transparency-audit { font-size: var(--fs-sm); color: var(--muted); max-width: 60ch; }
.transparency-subhead { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-2); }
.transparency-list { list-style: none; margin: 0; padding: 0; }
.transparency-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-soft); max-width: 34rem; }

/* ---- Organizations ---------------------------------------------------- */
.org-claim { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.org-claim input[type=text] { flex: 1 1 20rem; }
.org-member-actions { display: flex; gap: var(--space-2); }

/* ---- Confidential references ------------------------------------------ */
.ref-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.ref-list__item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-soft); max-width: 40rem; }

/* ---- Direct messaging ------------------------------------------------- */
.site-nav__badge--inline { position: static; display: inline-flex; }
.msg-threads { list-style: none; margin: 0; padding: 0; }
.msg-thread { border-bottom: var(--border-soft); }
.msg-thread a { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem var(--space-3); padding: var(--space-3) 0; text-decoration: none; color: inherit; }
.msg-thread__who { font-weight: var(--fw-semibold); }
.msg-thread__snippet { color: var(--muted); font-size: var(--fs-sm); grid-column: 1; }
.msg-thread__time { color: var(--muted); font-size: var(--fs-xs); grid-row: 1; grid-column: 2; white-space: nowrap; }
.msg-thread--unread .msg-thread__who { color: var(--fg); }
.msg-thread__badge { background: var(--fg); color: var(--bg); font-size: var(--fs-xs); padding: 0 0.4rem; border-radius: 999px; }
.msg-log { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.msg { max-width: 80%; }
.msg--mine { align-self: flex-end; text-align: right; }
.msg__meta { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 0.2rem; }
.msg__body { border: var(--border-soft); padding: var(--space-2) var(--space-3); display: inline-block; text-align: left; }
.msg--mine .msg__body { background: var(--hover); }
.msg-form textarea, .msg-start textarea { width: 100%; }

/* ---- 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__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .site-nav__links {
    width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2);
    overflow: visible; padding-bottom: 0;
  }
  .site-nav__links > * { flex: 0 0 auto; }
  .site-nav__links > a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-nav__bell { width: 44px; height: 44px; }
  .site-nav .linkform button { min-height: 44px; }
  .site-nav .role-chip, .site-nav__user { display: none; }
  .site-nav__assistant-full { display: none; }
  .site-nav__browse-full, .site-nav__workspace-full { display: none; }
  .site-nav__assistant-short,
  .site-nav__browse-short,
  .site-nav__workspace-short { display: inline; }
}

/* ---------------------------------------------------------------------------
   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); }

/* --- Applicant dashboard: "My matches" tab ---------------------------------
   Tier 1 (the hard-bar funnel) narrows the pool; tier 2 (ranked cards) orders
   what's left by the applicant's private preferences. Strict b/w like the rest
   of the site: bars and score blocks are ink on paper, no accent colors. */
.dash-tab__count {
  display: inline-block; min-width: 1.4em; margin-left: var(--space-1);
  padding: 0 0.35em; text-align: center;
  background: var(--fg); color: var(--bg);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

.match-callout {
  border: var(--border); border-left: 3px solid var(--fg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm); color: var(--fg);
}
.match-callout p { margin: 0; }

.match-funnel { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.match-funnel__stage { margin-bottom: var(--space-3); }
.match-funnel__stage:last-child { margin-bottom: 0; }
.match-funnel__labels {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-sm); margin-bottom: 0.25rem;
}
.match-funnel__count { font-weight: var(--fw-semibold); }
.match-funnel__track { height: 0.6rem; background: var(--hover); }
.match-funnel__bar { height: 100%; background: var(--fg); min-width: 2px; }
.match-funnel__drop { margin: 0.25rem 0 0; font-size: var(--fs-xs); color: var(--muted); }

.match-hint { font-size: var(--fs-sm); border: 1px dashed var(--line); padding: var(--space-2) var(--space-3); }

.match-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.match-card { display: flex; align-items: stretch; border: var(--border); }
.match-card__score {
  flex: 0 0 4.5rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.1rem;
  border-right: var(--border-soft); padding: var(--space-2);
}
.match-card__num { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1; }
.match-card__num--none { color: var(--muted); }
.match-card__unit {
  font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--track-wide);
}
.match-card__score--strong { background: var(--fg); }
.match-card__score--strong .match-card__num,
.match-card__score--strong .match-card__unit { color: var(--bg); }
.match-card__body { flex: 1 1 auto; min-width: 0; padding: var(--space-3) var(--space-4); }
.match-card__body .posting-head { margin-bottom: var(--space-1); }
.match-card__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-3); font-size: var(--fs-sm);
}
.badge--band-strong { background: var(--fg); color: var(--bg); }
.badge--band-good { border-color: var(--fg); }
.badge--band-stretch, .badge--band-unranked { color: var(--muted); }

.match-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.chip {
  font-size: var(--fs-xs); padding: 0.1rem 0.5rem;
  border: 1px solid var(--line); color: var(--muted);
}
.chip--pro { border-color: var(--fg); color: var(--fg); }
.chip--con { border-style: dashed; }
.chip--soon { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.match-truncated { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .match-card { flex-direction: column; }
  .match-card__score {
    flex-direction: row; border-right: 0; border-bottom: var(--border-soft);
  }
}

/* --- Application workspace (/workspace/) -----------------------------------
   The applicant's one app, as a full-viewport shell: the top nav stays, the
   body never scrolls, a grouped sidebar switches sections, and the main pane
   scrolls internally. Reuses the match-*, dash-*, cand-* components inside. */
.ws-viewport { height: 100vh; height: 100dvh; overflow: hidden; }

.ws-app {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 230px minmax(0, 1fr);
}

.ws-side {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto;
  border-right: var(--border-soft);
}
.ws-side__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3); border-bottom: var(--border-soft);
}
.ws-mobile-nav { display: none; }
.ws-side__title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight); margin: 0;
}
.ws-side__nav { display: flex; flex-direction: column; }
.ws-side__group {
  margin: var(--space-3) 0 0; padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wider); color: var(--muted);
}
.ws-side__item {
  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-2) var(--space-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  transition: color var(--transition), background var(--transition);
}
.ws-side__item:hover { color: var(--fg); background: var(--hover); }
.ws-side__item.is-active {
  color: var(--fg); font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--fg);
}
.ws-side__subs { display: none; flex-direction: column; }
.ws-side__subs.is-open { display: flex; }
.ws-side__sub { font-size: var(--fs-xs); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-5); }
.ws-side__count {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  padding: 0.2rem 0.45rem; background: var(--hover); color: var(--fg); white-space: nowrap;
}
.ws-side__count--soon { background: var(--fg); color: var(--bg); }
.ws-side__count--zero { background: none; color: var(--muted); font-weight: var(--fw-normal); }
.ws-side__optional {
  color: var(--muted); font-size: 0.65rem; font-weight: var(--fw-normal);
  letter-spacing: var(--track-wide); text-transform: uppercase;
}
.ws-side__stats { list-style: none; margin: auto 0 0; padding: var(--space-3); border-top: var(--border-soft); }
.ws-side__stat {
  display: flex; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--muted); padding: 0.15rem 0;
}
.ws-side__stat b { color: var(--fg); font-weight: var(--fw-semibold); white-space: nowrap; }

/* Bottom inset lives on the pane, not the scroller: scroller padding would
   offset the sticky save bar's resting line above the true bottom edge. */
.ws-panes {
  min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; padding: var(--space-4) var(--space-5) 0;
}
.ws-pane { padding-bottom: var(--space-6); }
.ws-pane { display: none; flex-direction: column; gap: var(--space-3); }
.ws-pane.is-active { display: flex; }
.ws-panes .dash-messages { margin-bottom: var(--space-4); }
.ws-panes .match-callout { margin-bottom: var(--space-4); }

.ws-runway { list-style: none; margin: 0; padding: 0; }
.ws-runway__row {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--border-soft);
  font-size: var(--fs-sm);
}
.ws-runway__row:last-child { border-bottom: 0; }
.ws-runway__days {
  flex: 0 0 3.2rem; text-align: right;
  font-weight: var(--fw-semibold); color: var(--muted);
}
.ws-runway__days.is-soon { color: var(--fg); }
.ws-runway__what { min-width: 0; display: flex; flex-direction: column; }
.ws-runway__dept {
  color: var(--muted); font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The redesigned workspace leads with work in progress, not scoring. */
.application-next {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-4);
  border: var(--border-soft); padding: var(--space-3) var(--space-4);
}
.application-next--soon { border-left: 3px solid var(--fg); }
.application-next__label {
  color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
}
.application-next div { display: flex; flex-direction: column; min-width: 0; }
.application-next div > a { font-weight: var(--fw-semibold); }
.application-next div > span { color: var(--muted); font-size: var(--fs-xs); }
.application-next__link { font-size: var(--fs-sm); white-space: nowrap; }

.application-section { margin-top: var(--space-4); }
.application-section > h3,
.application-section__head h3 { margin: 0; font-size: var(--fs-md); }
.application-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--border-soft);
}
.application-section__head > span { color: var(--muted); font-size: var(--fs-sm); }
.application-section--attention {
  border-left: 3px solid var(--fg); padding: var(--space-3) var(--space-4);
  background: var(--hover);
}
.application-list { display: flex; flex-direction: column; }
.application-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, auto);
  gap: var(--space-4); align-items: center;
  padding: var(--space-3) 0; border-bottom: var(--border-soft);
}
.application-card:last-child { border-bottom: 0; }
.application-card__heading {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
}
.application-status {
  flex: 0 0 auto; border: var(--border-soft); color: var(--muted);
  font-size: var(--fs-xs); padding: 0.2rem 0.5rem; white-space: nowrap;
}
.application-status--attention { border-color: var(--fg); color: var(--fg); font-weight: var(--fw-semibold); }
.application-card__deadline {
  display: flex; gap: var(--space-2); margin: var(--space-2) 0 0;
  color: var(--muted); font-size: var(--fs-xs);
}
.application-card__deadline strong { color: var(--fg); }
.application-card__deadline.is-soon strong { text-transform: uppercase; letter-spacing: var(--track-wide); }
.application-card__closed {
  margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--track-wide);
}
.application-card__actions {
  display: flex; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; gap: var(--space-2);
}
.attention-row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--border-soft); text-decoration: none;
}
.attention-row:last-child { border-bottom: 0; }
.contact-request {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4);
  padding: var(--space-3) 0; border-top: var(--border-soft);
}
.contact-request h4 { margin: var(--space-1) 0; font-size: var(--fs-md); }
.contact-request p { margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
.contact-request__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.application-history { margin-top: var(--space-5); border-top: var(--border-soft); padding-top: var(--space-3); }
.application-history > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.match-card--simple .match-card__body { padding: var(--space-4); }

.deadline-layout {
  display: grid; grid-template-columns: minmax(22rem, 1.5fr) minmax(16rem, 1fr);
  gap: var(--space-5); align-items: start; margin-top: var(--space-2);
}
.deadline-calendar { padding: var(--space-4); }
.deadline-cal__day { background: var(--hover); color: var(--fg); }
.deadline-upcoming h3,
.deadline-alerts h3 { margin: 0 0 var(--space-2); font-size: var(--fs-md); }
.deadline-alerts { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-soft); }

.ai-profile-explainer {
  border-left: 3px solid var(--fg); padding: var(--space-3) var(--space-4);
  background: var(--hover);
}
.ai-profile-explainer h3 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.ai-profile-explainer p { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 70ch; }
.ai-profile-details { border-top: var(--border-soft); padding-top: var(--space-3); }
.ai-profile-details > summary { cursor: pointer; font-weight: var(--fw-semibold); }
.ai-profile-activity { margin-top: var(--space-3); }

.ws-docs { list-style: none; margin: 0; padding: 0; }
.ws-docs__row {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) 0; border-bottom: var(--border-soft);
  font-size: var(--fs-sm);
}
.ws-docs__row:last-child { border-bottom: 0; }
.ws-docs__mark { flex: 0 0 1.1rem; }
.ws-docs__row.is-ready .ws-docs__label { color: var(--muted); }
.ws-docs__label { min-width: 0; }
.ws-docs__need { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }


/* Insights: standing tiles, percentile bars, and priced cost rows. */
.ins-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}
.ins-tile {
  border: var(--border-soft); padding: var(--space-3);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.ins-tile__num { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.1; }
.ins-tile__label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}
.ins-tile__sub { font-size: var(--fs-xs); color: var(--muted); }
.ins-strengths { margin: 0; }

.ins-dist { list-style: none; margin: 0; padding: 0; }
.ins-dist__row { margin-bottom: var(--space-3); }
.ins-dist__row:last-child { margin-bottom: 0; }
.ins-dist__labels {
  display: flex; justify-content: space-between; gap: var(--space-3);
  align-items: baseline; margin-bottom: 0.25rem; font-size: var(--fs-sm);
}
.ins-dist__pct { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.ins-dist__track { height: 0.6rem; background: var(--hover); }
.ins-dist__bar { height: 100%; background: var(--fg); min-width: 2px; }
.ins-dist__note { margin: 0.25rem 0 0; font-size: var(--fs-xs); color: var(--muted); }

.ins-gaps { list-style: none; margin: 0; padding: 0; }
.ins-gap { padding: var(--space-3) 0; border-bottom: var(--border-soft); }
.ins-gap:first-child { padding-top: 0; }
.ins-gap:last-child { border-bottom: 0; }
.ins-gap__head {
  display: flex; justify-content: space-between; gap: var(--space-3);
  align-items: baseline; margin-bottom: 0.25rem; font-size: var(--fs-sm);
}
.ins-gap__title { font-weight: var(--fw-semibold); }
.ins-gap__cost { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.ins-gap__track { height: 0.6rem; background: var(--hover); }
.ins-gap__bar { height: 100%; background: var(--fg); min-width: 2px; }
.ins-gap__detail { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ins-gap__unlock { margin: var(--space-1) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ins-gap__action { display: inline-block; margin-top: var(--space-1); font-size: var(--fs-sm); }

@media (max-width: 760px) {
  .ws-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ws-side { overflow: visible; border-right: 0; border-bottom: var(--border-soft); }
  .ws-side__head { border-bottom: 0; padding-bottom: 0; }
  .ws-mobile-nav {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: var(--space-2); padding: var(--space-2) var(--space-3);
    color: var(--muted); font-size: var(--fs-xs);
  }
  .ws-mobile-nav select {
    min-width: 0; width: 100%; padding: var(--space-1) var(--space-2);
    border: var(--border-soft); background: var(--bg); color: var(--fg); font: inherit;
  }
  .ws-side__nav { display: none; }
  .ws-side__group { display: none; }
  .ws-side__item { border-bottom: 0; white-space: nowrap; }
  .ws-side__item.is-active { box-shadow: inset 0 -2px 0 var(--fg); }
  .ws-side__subs.is-open { flex-direction: row; }
  .ws-side__sub { padding: var(--space-2); }
  .ws-side__stats { display: none; }
  .ws-panes { padding: var(--space-3) var(--space-3) 0; }
  .ws-pane { padding-bottom: var(--space-3); }
  /* Comfortable touch targets in the horizontal tab strip. */
  .ws-side__item { min-height: 44px; }
  .application-next { grid-template-columns: 1fr; gap: var(--space-2); }
  .application-card { grid-template-columns: 1fr; }
  .application-card__actions { justify-content: flex-start; }
  .contact-request { grid-template-columns: 1fr; }
  .deadline-layout { grid-template-columns: 1fr; }
}

/* ---- Accessibility pass ----------------------------------------------- */
/* A single, always-visible keyboard focus ring across every interactive
   element (the workspace tabs, save stars, nav links, form controls). Only on
   :focus-visible, so mouse clicks stay ring-free. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Honour a user's reduced-motion preference — kill transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Wide content (the fit Sankey, the funnel table, analytics) must scroll inside
   its own box rather than push the page body sideways on a phone. */
@media (max-width: 640px) {
  .fit-sankey-wrap { overflow-x: auto; }
  .fit-funnel-table { display: block; overflow-x: auto; white-space: nowrap; }
  .analytics { grid-template-columns: repeat(2, 1fr); }
  .pv-tabs { overflow-x: auto; }
}

/* ---- The agent's room (/agent/) ---------------------------------------
   The applicant's agent as a presence, not a report page: a full-viewport
   two-pane shell in the workspace-shell family — a conversation feed (day
   dividers, glyph-marked agent messages, expandable critique cards, a
   quick-action composer) beside a dossier rail (presence, stat tiles,
   identity facts, component score meters). Monochrome, zero-radius. */
.agent-room {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
}

.feed { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.feed__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
}

.feed-day {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--track-wide);
}
.feed-day::before,
.feed-day::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--line); }

.msg { display: flex; gap: var(--space-2); max-width: 46rem; }
.msg--applicant { align-self: flex-end; }
.msg--new { animation: msg-in 0.25s ease; }
@keyframes msg-in { from { opacity: 0; transform: translateY(0.25rem); } }

/* The unnamed agent's mark: a bordered square holding a filled diamond. */
.msg__glyph {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-top: 0.1rem;
  border: 1px solid var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
}
.msg__glyph::before {
  content: ""; width: 0.55rem; height: 0.55rem;
  background: var(--fg); transform: rotate(45deg);
}
.msg__glyph--lg { width: 2.6rem; height: 2.6rem; }
.msg__glyph--lg::before { width: 0.8rem; height: 0.8rem; }

.msg__body { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.msg__text {
  margin: 0; border: var(--border-soft);
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}
.msg--applicant .msg__text { background: var(--hover); }
.msg--nudge .msg__text { border-left: 2px solid var(--fg); }
.msg__time { font-size: var(--fs-xs); color: var(--muted); }
.msg--applicant .msg__time { text-align: right; }
.msg__into {
  align-self: flex-start; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; color: var(--fg);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.msg__into:hover { color: var(--accent, var(--fg)); }

.feed-typing.is-hidden { display: none; }
.feed-typing__dots {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: var(--border-soft); padding: var(--space-2) var(--space-3);
}
.feed-typing__dots i {
  width: 0.45rem; height: 0.45rem; background: var(--fg);
  animation: agent-pulse 1.1s ease-in-out infinite;
}
.feed-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.feed-typing__dots i:nth-child(3) { animation-delay: 0.3s; }

/* Critique attachment card: the collapsed row carries the aggregate (issue
   count + score meter); it expands in place to the full per-target detail. */
.msg-card { border: var(--border); }
.msg-card__sum {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; list-style: none;
  transition: background var(--transition);
}
.msg-card__sum::-webkit-details-marker { display: none; }
.msg-card__sum:hover { background: var(--hover); }
.msg-card__title { font-weight: var(--fw-semibold); margin-right: auto; }
.msg-card__meta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--muted); white-space: nowrap;
}
.msg-card__score { font-variant-numeric: tabular-nums; color: var(--fg); font-size: var(--fs-sm); }
.msg-card__chev { width: 1rem; text-align: center; font-weight: var(--fw-semibold); }
.msg-card__chev::before { content: "+"; }
.msg-card[open] .msg-card__chev::before { content: "–"; }
.msg-card__body { border-top: var(--border-soft); padding: var(--space-3); }

.feed__composer { border-top: var(--border-soft); padding: var(--space-3) var(--space-4); }
.feed-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.feed-chip {
  font: inherit; font-size: var(--fs-xs); color: var(--fg);
  background: none; border: 1px solid var(--line);
  padding: 0.2rem 0.6rem; cursor: pointer;
  transition: background var(--transition);
}
.feed-chip:hover:not(:disabled) { background: var(--hover); border-color: var(--fg); }
.feed-chip:disabled { color: var(--muted); cursor: default; }
.feed-send { display: flex; gap: var(--space-2); }
.feed__input {
  flex: 1; min-width: 0; width: 100%; font: inherit;
  border: var(--border); background: none; color: var(--fg);
  padding: var(--space-2) var(--space-3);
}
.feed__input::placeholder { color: var(--muted); }
.feed-send__btn {
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--bg); background: var(--fg); border: var(--border);
  padding: var(--space-2) var(--space-4); cursor: pointer;
  transition: opacity var(--transition);
}
.feed-send__btn:hover:not(:disabled) { opacity: 0.85; }
.feed-send__btn:disabled { opacity: 0.5; cursor: default; }

/* Dossier rail: the agent's structured knowledge, compacted beside the feed. */
.dossier {
  min-width: 0; min-height: 0; overflow-y: auto;
  border-left: var(--border-soft);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.dossier__presence { display: flex; align-items: center; gap: var(--space-2); }
.dossier__name { margin: 0 0 0.2rem; font-weight: var(--fw-semibold); }
.dossier__read { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.dossier__tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border: var(--border);
}
.dossier__tile {
  display: flex; flex-direction: column; padding: var(--space-2);
  border-right: var(--border-soft); border-bottom: var(--border-soft);
}
.dossier__tile:nth-child(2n) { border-right: 0; }
.dossier__tile:nth-last-child(-n+2) { border-bottom: 0; }
.dossier__tile b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.dossier__tile b i { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--muted); }
.dossier__tile span {
  font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--track-wide);
}
.dossier__group {
  margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wider); color: var(--muted);
}
.dossier__facts { margin: 0; }
.dossier__fact {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 0.25rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.dossier__fact:last-child { border-bottom: 0; }
.dossier__fact dt { color: var(--muted); }
.dossier__fact dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.dossier__scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dossier__score { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.dossier__score-label { margin-right: auto; }
.dossier__score b { font-variant-numeric: tabular-nums; }
.dossier__score .scorebar { width: 3.5rem; }

.agent-status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: var(--border); padding: 0.1rem 0.55rem;
  color: var(--fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wide);
}
.agent-status__dot { width: 0.45rem; height: 0.45rem; background: var(--fg); }
.agent-status--running .agent-status__dot { animation: agent-pulse 1.1s ease-in-out infinite; }
@keyframes agent-pulse { 50% { opacity: 0.15; } }

/* Critique detail (shared with the scout's posting critiques): per-target
   items with strengths, severity-tagged issues, and suggestions. */
.critiques { margin-top: var(--space-6); }

/* 0–10 score meter — fill width driven by data-v so templates stay style-free. */
.scorebar { display: inline-block; width: 5.5rem; height: 0.4rem; border: 1px solid var(--fg); }
.scorebar i { display: block; height: 100%; width: 0; background: var(--fg); }
.scorebar i[data-v="1"] { width: 10%; }
.scorebar i[data-v="2"] { width: 20%; }
.scorebar i[data-v="3"] { width: 30%; }
.scorebar i[data-v="4"] { width: 40%; }
.scorebar i[data-v="5"] { width: 50%; }
.scorebar i[data-v="6"] { width: 60%; }
.scorebar i[data-v="7"] { width: 70%; }
.scorebar i[data-v="8"] { width: 80%; }
.scorebar i[data-v="9"] { width: 90%; }
.scorebar i[data-v="10"] { width: 100%; }

.critique__item + .critique__item {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.critique__head { display: flex; align-items: center; gap: var(--space-2); }
.critique__label {
  margin: var(--space-2) 0 0.15rem; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted);
}
.badge--high { background: var(--fg); color: var(--bg); }
.badge--medium { border-color: var(--fg); }
.badge--low { border-color: var(--line); color: var(--muted); }

/* Package diff card — the one place the strict B&W palette yields to the
   universal GitHub green/red so "what changed" reads at a glance. Added #e6ffed
   with an #acf2bd rail, deleted #ffeef0 with an #fdb8c0 rail; word-level
   intraline highlights are the denser #acf2bd / #fdb8c0. */
.diffcard { border: var(--border); margin-top: 0.35rem; }
.diffcard__group { padding: var(--space-2) var(--space-3); }
.diffcard__group + .diffcard__group { border-top: var(--border-soft); }
.diffcard__title {
  margin: 0 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted);
}
.difftable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.diffrow + .diffrow th, .diffrow + .diffrow td { border-top: 1px solid var(--line); }
.diffrow th {
  text-align: left; font-weight: var(--fw-semibold); white-space: nowrap;
  vertical-align: top; padding: 0.3rem var(--space-2) 0.3rem 0;
}
.diffrow td { vertical-align: top; padding: 0.3rem 0; min-width: 0; }
.difffiles { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.difffiles li + li { margin-top: 0.2rem; }

.diffline {
  display: block; text-decoration: none; overflow-wrap: anywhere;
  padding: 0.1rem 0.4rem; border-left: 3px solid transparent;
}
.diffline + .diffline { margin-top: 0.1rem; }
.diffline--add { background: #e6ffed; border-left-color: #acf2bd; color: #111; }
.diffline--del { background: #ffeef0; border-left-color: #fdb8c0; color: #111; }
.diffline--edit { background: var(--yellow-soft); border-left-color: var(--yellow); color: #111; }
.diffline--ctx { color: var(--muted); border-left-color: var(--line); }
.difftext { min-width: 0; }
.diffword { border-radius: 1px; }
.diffword--add { background: #acf2bd; }
.diffword--del { background: #fdb8c0; text-decoration: line-through; }

/* Scene dashboard: a two-column room. The application scene is the spine on
   the left; the agent's conversation is a permanent right column, never
   collapsed, so the narration is the page's second half rather than something
   you have to open. Each column scrolls on its own; only the composer pins. */
.scene {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
}
/* No centred measure here: this column is already narrowed by the conversation
   beside it, so capping it again just parks the scene in a pool of white. The
   long-line risk is carried by the paragraph inside a row instead
   (``.wb-item__detail``), which is the only prose on the page. */
.scene__main {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4);
  width: 100%;
}

/* Wide enough for the two halves to sit side by side: readiness takes the
   dominant column, needs-you the narrow one. Placement is by explicit grid
   position, not DOM order, so the adaptive hero can still reorder the markup
   for screen readers and small screens without the page visibly rearranging
   itself under you on a wide one. */
.scene__body { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1200px) {
  /* The body claims the rest of the viewport and the punch-list scrolls inside
     its own frame, so the room ends at the bottom edge instead of trailing off
     into blank page. Needs-you keeps its natural height — an empty state
     stretched to full height is just a taller void. */
  .scene__body {
    display: grid; align-items: stretch;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-4);
    flex: 1 1 auto; min-height: 0;
  }
  .scene-headline, .scene-hero { grid-column: 1 / -1; grid-row: 1; }
  .strip--work { grid-column: 1; grid-row: 2; min-height: 0; }
  .strip--needs { grid-column: 2; grid-row: 2; align-self: start; }
  .strip--work .wb-groups { min-height: 0; overflow-y: auto; }
  /* Side by side, only one bordered box reads as lopsided — both get the frame
     and the hero keeps its meaning through position, not decoration. */
  .scene__body > .strip { border: var(--border); padding: var(--space-4); }
}

.scene__presence { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.scene__who { display: flex; flex-direction: column; gap: 0.2rem; margin-right: auto; }
.scene__name { margin: 0; font-weight: var(--fw-semibold); }
.scene__read { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.scene__banner {
  margin: 0; border-left: 2px solid var(--fg);
  padding: var(--space-2) var(--space-3); font-size: var(--fs-sm);
  background: var(--hover);
}

/* The Phase 4 linkage line — one cross-insight crowning the strips. ``--linked``
   is the both-sided money moment (engagement set against unfinished work). */
.scene-headline { margin: 0; font-size: var(--fs-md); }
.scene-headline--linked { font-weight: var(--fw-semibold); }
.scene-headline__link {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.scene-headline__link:hover, .scene-headline__link:focus-visible { border-bottom-color: var(--fg); }

.scene-hero { border: var(--border); padding: var(--space-6) var(--space-4); }
.scene-hero__title { margin: 0 0 var(--space-2); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.scene-hero__lede { margin: 0; color: var(--muted); max-width: 40rem; }

/* A strip is one half of the scene — the needs-you outward signals or the
   readiness inward workbench. ``--hero`` is the adaptive top slot. */
.strip { display: flex; flex-direction: column; gap: var(--space-3); }
.strip--hero { border: var(--border); padding: var(--space-4); }
.strip__head { display: flex; align-items: baseline; gap: var(--space-2); }
.strip__title {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wider); color: var(--muted);
}
.strip__bolt { color: var(--fg); }
.strip__count {
  font-size: var(--fs-xs); color: var(--muted);
  border: 1px solid var(--line); padding: 0.05rem 0.45rem;
}
.strip__count--progress { border: 0; padding: 0; }
.strip__link { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.strip__empty {
  border: 1px dashed var(--line); padding: var(--space-3);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.strip__empty--running { border-style: solid; border-color: var(--line); background: var(--hover); }
.strip__empty-title { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.strip__empty-lede { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.strip__empty-link { margin-top: 0.15rem; font-size: var(--fs-sm); }

/* Every tile is a handle — a focusable anchor deep-linking to the field or
   thread it's about, not a readout. */
.tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.scene-tile {
  display: flex; flex-direction: column; gap: 0.2rem;
  border: var(--border-soft); border-left: 3px solid var(--line);
  padding: var(--space-2) var(--space-3);
  color: var(--fg); text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.scene-tile:hover, .scene-tile:focus-visible { background: var(--hover); border-left-color: var(--fg); }
.scene-tile__title { font-weight: var(--fw-semibold); }
.scene-tile__detail { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.scene-tile--needs { border-left-color: var(--fg); }
.scene-tile--sev-30 { border-left-color: var(--fg); }
.scene-tile--sev-20 { border-left-color: var(--muted); }
.scene-tile--sev-10 { border-left-color: var(--line); }

/* The workbench punch-list: groups collapse to one line, rows collapse to one
   line, and the critique paragraph is only ever rendered for the row you open.
   A 40-issue package reads as a dozen lines instead of a page of prose. */
.wb-groups { display: flex; flex-direction: column; gap: var(--space-3); }
.wb-group { border: var(--border-soft); }
.wb-group__sum {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--transition);
}
.wb-group__sum::-webkit-details-marker { display: none; }
.wb-group__sum::before { content: "▸"; color: var(--muted); font-size: var(--fs-xs); }
.wb-group[open] > .wb-group__sum::before { content: "▾"; }
.wb-group__sum:hover { background: var(--hover); }
.wb-group__title {
  margin-right: auto;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wider);
}
.wb-group__high {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--fg); color: var(--bg); padding: 0.05rem 0.4rem; white-space: nowrap;
}
.wb-group__count {
  font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: right;
}
.wb-list { list-style: none; margin: 0; padding: 0; border-top: var(--border-soft); }

.wb-item { border-left: 3px solid var(--line); border-bottom: var(--border-soft); }
.wb-list > li:last-child .wb-item { border-bottom: 0; }
.wb-item--sev-30 { border-left-color: var(--fg); }
.wb-item--sev-20 { border-left-color: var(--muted); }
.wb-item--sev-10 { border-left-color: var(--line); }
.wb-item__sum {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer; list-style: none;
  transition: background var(--transition);
}
.wb-item__sum::-webkit-details-marker { display: none; }
.wb-item__sum:hover, .wb-item__sum:focus-visible { background: var(--hover); }
/* One line, always — a long critique title truncates rather than reflowing the
   row and undoing the density the grouping bought. */
.wb-item__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-item[open] .wb-item__title { white-space: normal; font-weight: var(--fw-semibold); }
.wb-item__body { padding: 0 var(--space-3) var(--space-3); }
.wb-item__detail {
  margin: 0 0 var(--space-2); max-width: 68ch;
  font-size: var(--fs-sm); color: var(--muted);
}
.wb-item__acts { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.wb-item__open {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.wb-item__ask {
  border: var(--border-soft); background: var(--bg);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  transition: color var(--transition);
}
.wb-item__ask:hover, .wb-item__ask:focus-visible { color: var(--fg); }

/* A tile is a deep-link handle; its "Ask agent" button pulls a conversation
   scoped to that item out into the footer chat. */
.tile-wrap { position: relative; }
.tile-wrap .scene-tile { padding-right: 6rem; }
.scene-tile__ask {
  position: absolute; top: var(--space-2); right: var(--space-2);
  border: var(--border-soft); background: var(--bg);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  opacity: 0; transition: opacity var(--transition), color var(--transition);
}
.tile-wrap:hover .scene-tile__ask,
.tile-wrap:focus-within .scene-tile__ask,
.scene-tile__ask:focus-visible { opacity: 1; }
.scene-tile__ask:hover, .scene-tile__ask:focus-visible { color: var(--fg); }

/* The composer's active-scope banner: which item the next message is pinned to. */
.chat-scope {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-2); padding: 0.2rem 0.5rem;
  border: var(--border-soft); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--muted);
}
.chat-scope.is-hidden { display: none; }
.chat-scope__label strong { color: var(--fg); }
.chat-scope__clear {
  border: 0; background: none; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); text-decoration: underline;
}
.chat-scope__clear:hover { color: var(--fg); }

/* The conversation column: a titled, always-open log over a pinned composer. */
.convo {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-left: var(--border-soft);
}
.convo__title {
  flex: 0 0 auto; margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-soft);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--track-wider); color: var(--muted);
}
.convo__log { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.convo__log .feed__scroll { padding: var(--space-4) var(--space-3); }
.convo__composer {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-soft);
}
.convo__composer .feed-chips { margin-bottom: var(--space-2); }
/* In a narrow column the bubbles take the full width, and the agent's own
   messages keep the glyph gutter rather than wrapping under it. */
.convo .msg { max-width: 100%; }

@media (max-width: 1000px) {
  .scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .convo { border-left: 0; border-top: var(--border-soft); max-height: 55vh; }
  .convo__title { display: none; }
}

@media (max-width: 860px) {
  .agent-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .dossier { border-left: 0; border-top: var(--border-soft); max-height: 35vh; }
  .msg { max-width: 100%; }
  .msg-card__meta { white-space: normal; }
}

/* ---- The exchange sweep funnel ----------------------------------------
   The chain that makes thinning visible: pool → bars → handshake →
   conversing → advanced, each step narrower than the last. The numbers are
   the point, so they lead; the stage name is the caption under them. The
   accessible table below the chain carries the same counts with their full
   labels, so the chain can stay this terse. */
.xfunnel__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.xfunnel__step {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 5.5rem;
  padding: var(--space-2) var(--space-3);
  border: var(--border-soft);
  border-radius: var(--radius);
}
/* The arrow between steps reads as flow; it is decorative, and the ordered
   list already carries the sequence for a screen reader. */
.xfunnel__step + .xfunnel__step::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-3));
  transform: translate(-50%, -50%);
  color: var(--muted);
}
.xfunnel__n { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.xfunnel__label { font-size: var(--fs-xs); color: var(--muted); text-transform: lowercase; }
/* The two stages that cost tokens are the ones worth spotting at a glance. */
.xfunnel__step--conversing, .xfunnel__step--advanced { border-color: var(--line-strong); }

/* ==========================================================================
   TROPICAL JADE THEME PROTOTYPE
   Visual-only review layer: jade with restrained aqua and warm accents.
   Kept together at the end of the cascade so the prototype is easy to tune
   or remove without disturbing any page behavior.
   ========================================================================== */

/* ---- Foundation and typography --------------------------------------- */
body {
  background: var(--canvas);
  color: var(--fg);
}

::selection { background: var(--yellow); color: var(--fg); }

h1,
.hero__title,
.position-header h1,
.page-header h1,
.legal h1,
.entry__title,
.welcome__title {
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2 { color: var(--fg); }

.page-header {
  border-bottom-color: var(--line);
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 3.25rem;
  border-bottom: 3px solid var(--accent);
}

.back-link,
.backlink a,
.panel__link,
.posting-cta,
.filters-clear,
.pagination a,
.form-foot a,
.legal a,
.qf-summary__edit,
.application-next__link,
.strip__link,
.strip__empty-link,
.fit-card-profile {
  color: var(--primary);
  text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ---- Navigation and footer ------------------------------------------- */
.site-nav {
  background: rgba(6, 69, 75, 0.97);
  border-bottom: 0;
  box-shadow: 0 3px 18px rgba(6, 69, 75, 0.18);
  color: #fff;
  backdrop-filter: blur(12px);
}
.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}
.brand-mark { display: block; flex: 0 0 auto; width: 1.85rem; height: 1.85rem; }
.site-nav__links,
.site-nav__links a,
.site-nav__user,
.site-nav .linkform button { color: rgba(255, 255, 255, 0.82); }
.site-nav__link:hover,
.site-nav__links a:hover,
.site-nav .linkform button:hover { color: #fff; }
.site-nav__bell:hover { background: rgba(255, 255, 255, 0.10); }
.site-nav .role-chip {
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
  border-radius: 999px;
}
.site-nav .btn--ghost {
  background: #fff;
  color: var(--fg);
  box-shadow: none;
}
.site-nav .btn--ghost:hover {
  background: var(--focus);
  border-color: var(--focus);
  color: var(--fg);
}
.site-nav__badge { background: var(--accent); color: #fff; }

.site-footer {
  background: var(--fg);
  border-top: 0;
  color: rgba(255, 255, 255, 0.88);
}
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.site-footer__brand .brand-mark { width: 1.5rem; height: 1.5rem; }
.site-footer__tagline,
.site-footer__col h3,
.site-footer__legal { color: rgba(255, 255, 255, 0.62); }
.site-footer__col a { color: rgba(255, 255, 255, 0.88); }
.site-footer__col a:hover { color: #fff; }
.site-footer__legal { border-top-color: rgba(255, 255, 255, 0.14); }
.site-footer__legal a { color: rgba(255, 255, 255, 0.78); }

/* Older compact nav family used by a few utility pages. */
.nav { border-bottom-color: var(--line); }
.nav-brand { color: var(--primary); font-family: var(--font-display); }
.nav-right a,
.nav .linkform button { color: var(--primary); }

/* ---- Buttons, inputs, and focus -------------------------------------- */
.btn,
.feed-send__btn {
  background: var(--primary);
  border-color: var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 2px 7px rgba(9, 124, 135, 0.18);
  color: #fff;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.btn:hover,
.feed-send__btn:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(9, 124, 135, 0.24);
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}
.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: none;
  color: var(--primary);
}
.btn--ghost:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
.btn[disabled],
.feed-send__btn:disabled { box-shadow: none; transform: none; }
.btn[disabled]:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--ghost[disabled]:hover { background: var(--surface); border-color: var(--line-strong); color: var(--primary); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea,
.feed__input {
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input::placeholder,
textarea::placeholder { color: var(--muted); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--primary); }

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.form-row input:focus,
.about-input:focus,
.form-row input[type=url]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}

.auth-card {
  background: var(--surface);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 430px;
  padding: var(--space-5);
}
.role-options label,
.about-education__row,
.about-rank,
.voicecard { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
.role-options label:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.about-check { background: var(--surface); border-radius: 999px; }
.about-check:hover { border-color: var(--primary); }
.about-check:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }
.about-actions { background: linear-gradient(to bottom, rgba(246, 244, 238, 0.88), var(--canvas) 35%); }

/* ---- Shared surfaces -------------------------------------------------- */
.panel,
.welcome,
.dash-stat,
.stat,
.pv-chart,
.analytics__tile,
.match-card,
.ins-tile,
.application-next,
.deadline-calendar,
.report__form,
.voicecard,
.msg-card,
.diffcard,
.xfunnel__step,
.dossier__tiles,
.scene-hero,
.strip--hero,
.apply-bar {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel { border: var(--border-soft); }
.panel__title,
.posting-inst,
.stat__num,
.dash-stat__num,
.analytics__num,
.ins-tile__num { color: var(--fg); }
.stat__num,
.dash-stat__num,
.analytics__num { font-family: var(--font-display); }
a.stat:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
a.stat:hover .stat__label { color: rgba(255, 255, 255, 0.76); }
.dash-message {
  background: var(--primary-soft);
  border-color: var(--line);
  border-radius: var(--radius);
  color: var(--primary-dark);
}
.dash-message--error,
.errorlist {
  background: var(--danger-soft);
  border-color: #dfb9b9;
  color: var(--danger);
}
.empty {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.48);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

/* ---- Home ------------------------------------------------------------- */
.home__main {
  background:
    radial-gradient(circle at 12% 8%, rgba(35, 206, 217, 0.10), transparent 31rem),
    radial-gradient(circle at 82% 26%, rgba(252, 164, 124, 0.10), transparent 25rem);
}
.hero__eyebrow { color: var(--accent); font-weight: var(--fw-semibold); }
.hero__title { color: var(--fg); }
.hero__lead { color: var(--muted); }
.steps { border-top: 2px solid var(--line); }
.step__num { color: var(--accent); font-family: var(--font-display); }
.roles { gap: var(--space-3); }
.role-card {
  background: rgba(255, 255, 255, 0.80);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.role-card:first-child { padding-top: var(--space-4); }
.role-card + .role-card { border-top: var(--border-soft); }
.role-card__label { color: var(--accent); font-weight: var(--fw-semibold); }
.role-card__actions .btn { background: var(--primary); color: #fff; }
.role-card__actions .btn:hover { background: var(--primary-dark); color: #fff; }
.role-card__actions .btn--ghost { background: transparent; color: var(--primary); }
.role-card__actions .btn--ghost:hover { background: transparent; color: var(--primary-dark); }

/* ---- Badges, chips, and status --------------------------------------- */
.badge,
.role-chip,
.application-status,
.autoapply-status,
.strip__count,
.agent-status {
  background: var(--surface-soft);
  border-color: transparent;
  border-radius: 999px;
  color: var(--primary-dark);
  font-weight: var(--fw-semibold);
}
.badge--quality,
.badge--role,
.badge--mech,
.badge--autoapply,
.badge--band-strong {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.badge--attention,
.autoapply-status--attention,
.application-status--attention,
.badge--high,
.wb-group__high {
  background: var(--accent-soft);
  border-color: #f6bea4;
  color: var(--accent);
}
.badge--flag,
.badge--low { background: #f2f3f5; color: var(--muted); }
.badge--medium { background: var(--primary-soft); border-color: var(--line); color: var(--primary-dark); }
.autoapply-status--ready {
  background: var(--success-soft);
  border-color: var(--mint);
  color: var(--success);
}
.chip { background: var(--surface); border-radius: 999px; }
.chip--pro { background: var(--success-soft); border-color: var(--mint); color: var(--success); }
.chip--con { background: var(--accent-soft); border-color: #f6bea4; color: var(--accent); }
.chip--soon { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Position browse and detail -------------------------------------- */
.postings { gap: var(--space-3); }
.posting--catalog {
  background: var(--surface);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin: 0;
  padding: var(--space-4);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.posting--catalog:first-child { padding-top: var(--space-4); }
.posting--catalog:last-child { border-bottom: var(--border-soft); padding-bottom: var(--space-4); }
.posting--catalog:hover {
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(6, 93, 101, 0.10);
  transform: translateY(-1px);
}
.posting--link:hover .posting-cta { color: var(--primary-dark); }
.postings-filterbar {
  background: rgba(255, 255, 255, 0.70);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.pv-tabs { border-bottom-color: var(--line); }
.pv-tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pv-tab:hover { background: var(--primary-soft); color: var(--primary); }
.pv-tab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.apply-bar { border: var(--border-soft); }
.autoapply-panel {
  background: linear-gradient(135deg, var(--surface), var(--primary-soft));
  border-color: var(--line);
}
.autoapply-panel--blocked,
.autoapply-run--attention {
  background: linear-gradient(135deg, var(--surface), var(--accent-soft));
  border-color: #f6bea4;
}
.autoapply-attention {
  background: var(--accent-soft);
  border: 1px solid #f6bea4;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.autoapply-captcha-note { color: var(--accent); }
.run-error { color: var(--danger); }
.run-log pre { background: #f3f5f6; border-radius: var(--radius); }
.save-star__btn {
  background: var(--surface);
  border-radius: 999px;
  color: var(--muted);
}
.save-star__btn:hover,
.save-star.is-saved .save-star__btn {
  background: var(--accent-soft);
  border-color: #f6bea4;
  color: var(--accent);
}

/* ---- Dashboards and workspace ---------------------------------------- */
.dash-tab,
.ws-side__item { border-radius: 0 var(--radius) var(--radius) 0; }
.dash-tab:hover,
.ws-side__item:hover { background: var(--primary-soft); color: var(--primary-dark); }
.dash-tab.is-active,
.ws-side__item.is-active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
  color: var(--primary-dark);
}
.dash-tab__count,
.ws-side__count {
  background: var(--primary-soft);
  border-radius: 999px;
  color: var(--primary-dark);
}
.ws-side__count--soon { background: var(--accent); color: #fff; }
.ws-side__count--zero { background: transparent; color: var(--muted); }
.ws-viewport,
.ws-app,
.ws-panes { background: var(--canvas); }
.ws-side {
  background: var(--surface-soft);
  border-right-color: var(--line);
}
.ws-side__head { background: rgba(255, 255, 255, 0.58); }
.ws-side__group { color: var(--primary); }
.application-next {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
}
.application-next--soon { background: var(--accent-soft); border-left-color: var(--accent); }
.application-section--attention {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  border-radius: var(--radius);
}
.application-list { gap: var(--space-2); }
.application-card {
  background: var(--surface);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.application-card:last-child { border-bottom: var(--border-soft); }
.application-status { background: var(--primary-soft); color: var(--primary-dark); }
.application-status--attention { background: var(--accent-soft); color: var(--accent); }
.deadline-cal__day { background: var(--primary-soft); color: var(--primary-dark); }
.deadline-cal__day.has-positions { border-color: var(--line-strong); }
.cal__day.is-today { outline-color: var(--accent); }
.cal__day.has-positions:hover,
.cal__day.is-selected { box-shadow: inset 0 0 0 2px var(--primary); }
.ai-profile-explainer {
  background: var(--primary-soft);
  border-left-color: var(--primary);
  border-radius: var(--radius);
}
.doc-row__mark { border-color: var(--primary); border-radius: 2px; }
.doc-row__mark.is-done,
.doc-progress__cell.is-done { background: var(--success); border-color: var(--success); }
.match-callout { background: var(--primary-soft); border-color: var(--line); border-left-color: var(--primary); border-radius: var(--radius); }
.match-funnel__bar,
.ins-dist__bar,
.ins-gap__bar { background: var(--primary); border-radius: 999px; }
.match-funnel__track,
.ins-dist__track,
.ins-gap__track { background: var(--line); border-radius: 999px; }
.match-card__score--strong { background: var(--primary); }

/* ---- Notifications and semantic feedback ----------------------------- */
.notif-item {
  background: var(--surface);
  border: var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  padding: var(--space-3);
}
.notif-item--unread { background: var(--primary-soft); border-left: 4px solid var(--primary); }
.msg-thread { background: var(--surface); border-color: var(--line); }
.msg-thread__badge { background: var(--accent); color: #fff; }

/* ---- Assistant room --------------------------------------------------- */
.scene,
.agent-room,
.scene__main,
.feed { background: var(--canvas); }
.convo,
.dossier { background: var(--surface); border-color: var(--line); }
.scene__banner {
  background: var(--primary-soft);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  color: var(--primary-dark);
}
.scene__body > .strip,
.strip--hero {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.strip__bolt { color: var(--accent); }
.strip__empty { background: #fafbfb; border-color: var(--line-strong); border-radius: var(--radius); }
.strip__empty--running { background: var(--primary-soft); border-color: var(--line); }
.scene-tile {
  background: var(--surface);
  border-radius: var(--radius);
}
.scene-tile:hover,
.scene-tile:focus-visible { background: var(--primary-soft); border-left-color: var(--primary); }
.scene-tile--needs,
.scene-tile--sev-30 { border-left-color: var(--accent); }
.scene-tile--sev-20 { border-left-color: var(--primary); }
.wb-group {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.wb-group__sum:hover,
.wb-item__sum:hover,
.wb-item__sum:focus-visible { background: var(--primary-soft); }
.wb-item--sev-30 { border-left-color: var(--accent); }
.wb-item--sev-20 { border-left-color: var(--primary); }
.wb-item--sev-10 { border-left-color: var(--line-strong); }
.wb-item__ask,
.scene-tile__ask,
.chat-scope,
.feed-chip {
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: 999px;
  color: var(--primary);
}
.feed-chip:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); }
.chat-scope { border-radius: var(--radius); }
.convo__title { background: var(--surface-soft); color: var(--primary-dark); }
.convo__composer,
.feed__composer { background: var(--surface); }
.scene .msg__glyph,
.agent-room .msg__glyph { border-color: var(--primary); border-radius: var(--radius-sm); }
.scene .msg__glyph::before,
.agent-room .msg__glyph::before { background: var(--primary); }
.scene .msg__text,
.agent-room .msg__text {
  background: var(--primary-soft);
  border-color: var(--line);
  border-radius: var(--radius) var(--radius) var(--radius) 2px;
}
.scene .msg--applicant .msg__text,
.agent-room .msg--applicant .msg__text {
  background: var(--primary);
  border-color: var(--primary);
  border-radius: var(--radius) var(--radius) 2px var(--radius);
  color: #fff;
}
.scene .msg--nudge .msg__text,
.agent-room .msg--nudge .msg__text { border-left-color: var(--accent); }
.feed-typing__dots { background: var(--primary-soft); border-color: var(--line); border-radius: var(--radius); }
.feed-typing__dots i { background: var(--primary); border-radius: 999px; }
.agent-status {
  background: var(--success-soft);
  border-color: var(--mint);
  color: var(--success);
}
.agent-status__dot { background: var(--success); border-radius: 999px; }
.scorebar { border-color: var(--primary); border-radius: 999px; overflow: hidden; }
.scorebar i { background: var(--primary); }
.dossier__tiles { overflow: hidden; }
.dossier__tile b { color: var(--primary-dark); }
.xfunnel__step { background: var(--surface); }
.xfunnel__step--conversing,
.xfunnel__step--advanced { border-color: var(--primary); background: var(--primary-soft); }

/* Let the assistant's main column own its scrolling. This avoids the previous
   nested workbench scroller colliding visually with the sweep at desktop. */
@media (min-width: 1200px) {
  .scene__body { grid-template-rows: auto auto; flex: 0 0 auto; }
  .strip--work .wb-groups { min-height: auto; overflow: visible; }
}

/* ---- Maps and charts -------------------------------------------------- */
.usmap__cell--l0 { background: var(--surface); color: var(--muted); }
.usmap__cell--l1,
.usmap__swatch--l1 { background: var(--aqua-soft); }
.usmap__cell--l2 { background: #bceff2; }
.usmap__cell--l3 { background: var(--primary); color: #fff; }
.usmap__cell--l4,
.usmap__swatch--l4 { background: var(--primary-dark); color: #fff; }
.usmap__cell.has-positions:hover,
.usmap__cell.is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.pv-summary__body mark { background: var(--yellow); color: var(--fg); }

/* ---- Responsive polish ----------------------------------------------- */
@media (max-width: 760px) {
  .ws-side { background: var(--surface); border-bottom-color: var(--line); }
  .ws-mobile-nav select { background: var(--surface); border-color: var(--line-strong); border-radius: var(--radius); }
  .ws-side__item.is-active { box-shadow: inset 0 -3px 0 var(--primary); }
  .posting--catalog { padding: var(--space-3); }
  .posting--catalog:first-child { padding-top: var(--space-3); }
  .scene__body > .strip { border: var(--border-soft); padding: var(--space-3); }
}

@media (max-width: 640px) {
  .site-nav__inner { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .site-nav__brand { font-size: 1.1rem; }
  .site-nav__links { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: var(--space-1); }
  .auth-card { padding: var(--space-4); }
  .role-card { padding: var(--space-3); }
  .role-card:first-child { padding-top: var(--space-3); }
}

/* ==========================================================================
   SECOND-PASS COMPOSITION — Tropical Jade, genuinely different layouts.
   This remains a visual prototype: no navigation, copy, or behavior changes.
   ========================================================================== */

body {
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 4% 12%, rgba(252, 164, 124, 0.12), transparent 22rem),
    radial-gradient(circle at 94% 28%, rgba(35, 206, 217, 0.09), transparent 24rem),
    linear-gradient(135deg, rgba(9, 124, 135, 0.04) 0, transparent 38%);
  background-attachment: fixed;
}

.page { padding-top: var(--space-5); }

.site-nav {
  background: linear-gradient(110deg, #06454b 0%, var(--primary-dark) 42%, var(--primary) 100%);
  box-shadow: 0 8px 26px rgba(6, 93, 101, 0.24);
}
.site-nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aqua) 0 58%, var(--accent-bright) 58% 82%, var(--yellow) 82%);
}
.site-nav .btn--ghost {
  background: #fff;
  border-color: #fff;
  color: var(--primary-dark);
}
.site-nav .btn--ghost:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--fg);
}
.site-nav .role-chip {
  background: #fff;
  border-color: transparent;
  color: var(--primary-dark);
}
.site-nav__badge {
  background: var(--accent-bright);
  color: var(--fg);
}

.site-footer {
  background:
    radial-gradient(circle at 85% -20%, rgba(35, 206, 217, 0.20), transparent 25rem),
    linear-gradient(125deg, #063d42, #075760 64%, #06484e);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--aqua), var(--accent-bright), var(--yellow));
}

.btn,
.feed-send__btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary);
  box-shadow: 0 7px 16px rgba(9, 124, 135, 0.24);
}
.btn:hover,
.feed-send__btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary-dark);
  box-shadow: 0 10px 22px rgba(6, 93, 101, 0.30);
}
.btn--ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--primary-dark);
}
.btn--ghost:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}

.page-header {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(157, 189, 184, 0.72);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.page-header::after {
  bottom: auto;
  top: 0;
  left: var(--space-5);
  width: 5rem;
  border-bottom: 5px solid var(--accent-bright);
  border-radius: 0 0 999px 999px;
}
.auth-card {
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: 0 20px 46px rgba(6, 93, 101, 0.15);
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--aqua) 64%, var(--accent-bright));
}

.badge,
.role-chip,
.application-status,
.autoapply-status,
.strip__count,
.agent-status {
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.badge--quality,
.badge--role,
.badge--mech,
.badge--autoapply,
.badge--band-strong {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary);
  color: #fff;
}
.badge--attention,
.autoapply-status--attention,
.application-status--attention,
.badge--high,
.wb-group__high {
  background: var(--accent-soft);
  border-color: #f6bea4;
  color: var(--accent);
}
.chip--pro { background: var(--success-soft); border-color: var(--mint); color: var(--success); }
.chip--con { background: var(--accent-soft); border-color: #f6bea4; color: var(--accent); }
.chip--soon { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--fg); }

/* ---- Homepage: full-width color hero + a two-card role deck ---------- */
.home__main {
  background:
    radial-gradient(circle at 5% 12%, rgba(252, 164, 124, 0.14), transparent 25rem),
    radial-gradient(circle at 92% 70%, rgba(35, 206, 217, 0.10), transparent 24rem),
    var(--canvas);
}
.home__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}
.hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  grid-template-rows: auto auto auto 1fr;
  gap: 0 var(--space-6);
  overflow: hidden;
  position: relative;
  padding: clamp(2rem, 5vw, 4.75rem);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.20), transparent 15rem),
    linear-gradient(135deg, #06454b 0%, var(--primary) 55%, #0a929e 100%);
  border-radius: 30px;
  box-shadow: 0 28px 70px rgba(6, 93, 101, 0.27);
  color: #fff;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.hero::before {
  width: 18rem;
  height: 18rem;
  right: -7rem;
  bottom: -9rem;
  background: var(--accent-bright);
  opacity: 0.55;
}
.hero::after {
  width: 7rem;
  height: 7rem;
  left: 52%;
  top: -3.5rem;
  background: var(--aqua);
  opacity: 0.65;
}
.hero__eyebrow {
  grid-column: 1;
  color: var(--yellow);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.hero__title {
  grid-column: 1;
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.25rem);
  max-width: 13ch;
  position: relative;
  z-index: 1;
}
.hero__lead {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.80);
  font-size: 1.2rem;
  max-width: 55ch;
  position: relative;
  z-index: 1;
}
.hero__actions { grid-column: 1; position: relative; z-index: 1; }
.hero__actions .btn {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--fg);
  box-shadow: 0 10px 26px rgba(6, 69, 75, 0.24);
}
.hero__actions .btn:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--fg);
}
.steps {
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: rgba(3, 65, 70, 0.32);
  backdrop-filter: blur(9px);
  position: relative;
  z-index: 1;
}
.step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.step__num {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  border-radius: 12px;
  background: var(--aqua);
  color: var(--fg);
  font-size: 1rem;
}
.step:nth-child(2) .step__num { background: var(--accent-bright); }
.step:nth-child(3) .step__num { background: var(--yellow); }
.step__title { color: #fff; margin: 0 0 0.2rem; }
.step__body { color: rgba(255, 255, 255, 0.72); }
.entry { grid-column: 1 / -1; margin-top: var(--space-3); }
.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.role-card {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  padding: var(--space-5);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(6, 93, 101, 0.13);
}
.role-card:first-child { padding-top: var(--space-5); border-top: 8px solid var(--accent-bright); }
.role-card + .role-card { border-top: 8px solid var(--primary); }
.role-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.role-card + .role-card::after { background: var(--mint-soft); }
.role-card__label { color: var(--accent); }
.role-card + .role-card .role-card__label { color: var(--primary-dark); }
.role-card__title { font-family: var(--font-display); font-size: 2.15rem; }
.role-card__body { max-width: 46ch; font-size: 1rem; }
.role-card__actions { margin-top: auto; position: relative; z-index: 1; }
.role-card + .role-card .role-card__actions .btn:not(.btn--ghost) {
  background: var(--primary);
  border-color: var(--primary);
}
.welcome {
  background: linear-gradient(115deg, var(--surface), var(--primary-soft));
  border: 0;
  border-left: 9px solid var(--aqua);
  border-radius: 24px;
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}

/* ---- Job board: filter rail + two-column position deck --------------- */
.postings-page > .page-header {
  background:
    radial-gradient(circle at 88% 25%, rgba(255, 255, 255, 0.20), transparent 12rem),
    linear-gradient(120deg, var(--primary-dark), var(--primary) 72%, #0a929e);
  border: 0;
  color: #fff;
  padding: var(--space-5);
}
.postings-page > .page-header h1 { color: #fff; font-size: var(--fs-2xl); }
.postings-page > .page-header .subtitle { color: rgba(255, 255, 255, 0.74); }
.postings-page > .page-header::after { border-bottom-color: var(--yellow); }
.postings-view {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.postings-filterbar {
  grid-column: 1;
  grid-row: 1 / 3;
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
  margin: 0;
  padding: var(--space-4);
  background: #fff;
  border: 0;
  border-top: 7px solid var(--aqua);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
.postings-filterbar .filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}
.postings-filterbar .filters > *,
.postings-filterbar .filters input[type=text] { width: 100%; flex-basis: auto; }
.postings-filterbar .filters .btn { margin-top: var(--space-1); }
.postings-view > .pv-tabs,
.postings-view > .pv-pane { grid-column: 2; }
.postings-view > .postings-results { grid-column: 2; min-width: 0; }
.postings-view > .pv-tabs {
  width: max-content;
  margin: 0;
  padding: 0.3rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.pv-tab { border: 0; border-radius: 999px; margin: 0; padding-inline: var(--space-4); }
.pv-tab.is-active { background: var(--primary); color: #fff; }
.pv-tab.is-active:hover { background: var(--primary-dark); color: #fff; }
.postings-page #pv-pane-list .postings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.postings-page .posting--catalog {
  min-height: 15rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-4) + 0.35rem) var(--space-4) var(--space-4);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(6, 93, 101, 0.12);
}
.postings-page .posting--catalog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--aqua));
}
.postings-page .posting--catalog:nth-child(3n+2)::before {
  background: linear-gradient(90deg, var(--aqua), var(--mint));
}
.postings-page .posting--catalog:nth-child(3n)::before {
  background: linear-gradient(90deg, var(--accent-bright), var(--yellow));
}
.postings-page .posting--catalog:first-child { padding-top: calc(var(--space-4) + 0.35rem); }
.postings-page .posting-actions { margin-top: auto; }
.postings-page .posting-grid {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border-radius: 10px;
  background: var(--surface-soft);
}
.postings-page .privacy-note,
.postings-page .pagination { grid-column: 1 / -1; }

/* ---- Position detail: bento facts beneath a strong editorial header -- */
.position-page {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.75fr);
  gap: var(--space-4);
  align-items: start;
}
.position-page > .backlink,
.position-page > .position-header,
.position-page > .badges,
.position-page > .position-application-note,
.position-page > .helptext,
.position-page > .autoapply-panel,
.position-page > .apply-bar,
.position-page > .interest-row,
.position-page > .report-row,
.position-page > #discussion { grid-column: 1 / -1; }
.position-page > .backlink { margin: 0; }
.position-page > .position-header {
  overflow: hidden;
  min-height: 14rem;
  align-items: flex-end;
  background:
    radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.20), transparent 12rem),
    radial-gradient(circle at 100% 100%, rgba(252, 164, 124, 0.55), transparent 15rem),
    linear-gradient(130deg, #06454b, var(--primary) 64%, #0a929e);
  border: 0;
  color: #fff;
  padding: var(--space-5);
}
.position-page .position-header h1 { font-size: clamp(2.4rem, 5vw, 4.3rem); max-width: 16ch; }
.position-page .position-header h1,
.position-page .position-header__inst,
.position-page .position-title { color: #fff; }
.position-page .position-title { font-size: var(--fs-lg); }
.position-page .position-header .subtitle,
.position-page .position-header .posting-id { color: rgba(255, 255, 255, 0.74); }
.position-page .position-header::after { border-bottom-color: var(--yellow); }
.position-page .position-header .save-star__btn {
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  color: var(--primary-dark);
}
.position-page > .badges {
  grid-column: 1;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 3rem);
  margin: -3rem 0 0 var(--space-5);
  padding: var(--space-2);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.position-page > .position-source-actions {
  grid-column: 2;
  z-index: 2;
  align-self: center;
  justify-self: end;
  margin-top: -3rem;
}
.position-page > .autoapply-panel {
  border: 0;
  border-left: 8px solid var(--primary);
  background:
    radial-gradient(circle at 92% 20%, rgba(35, 206, 217, 0.14), transparent 13rem),
    linear-gradient(130deg, #fff, var(--primary-soft));
  box-shadow: var(--shadow-md);
}
.position-page > .autoapply-panel--blocked {
  border-left-color: var(--accent-bright);
  background: linear-gradient(130deg, #fff, var(--accent-soft));
}
.position-page > .pkg-section {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  min-width: 0;
  border: 0;
  border-top: 7px solid var(--primary);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.position-page > .pkg-section:nth-of-type(even) { border-top-color: var(--aqua); }
.position-page > .pkg-section:nth-of-type(3n) { border-top-color: var(--accent-bright); }
.position-page .pkg-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.position-page .pkg-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: var(--space-3);
  border: 0;
  border-radius: 12px;
  background: var(--surface-soft);
}
.position-page .pkg-item__q {
  flex: 0 1 auto;
  max-width: 100%;
  color: var(--primary-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.position-page .pkg-item__q::after { content: ":"; }
.position-page .pkg-item__a {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.position-page > #discussion {
  border: 0;
  border-top: 7px solid var(--yellow);
  border-radius: 18px;
}

/* ---- Employer dashboard: horizontal switcher + bento metrics -------- */
.employer-page > .page-header {
  background:
    radial-gradient(circle at 91% 30%, rgba(255, 255, 255, 0.20), transparent 13rem),
    linear-gradient(120deg, var(--primary-dark), var(--primary) 65%, #0a929e);
  border: 0;
  color: #fff;
  padding: var(--space-5);
}
.employer-page > .page-header h1 { color: #fff; font-size: var(--fs-2xl); }
.employer-page > .page-header .subtitle { color: rgba(255, 255, 255, 0.74); }
.employer-page > .page-header .role-chip { background: #fff; color: var(--primary-dark); }
.employer-page .dash-shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.employer-page .dash-tabs {
  position: static;
  flex-direction: row;
  width: max-content;
  padding: 0.35rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.employer-page .dash-tab {
  border: 0;
  border-radius: 999px;
  padding-inline: var(--space-4);
}
.employer-page .dash-tab.is-active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: none;
  color: #fff;
}
.employer-page .dash-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.employer-page .dash-stat {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 20px;
}
.employer-page .dash-stat:nth-child(1),
.employer-page .dash-stat:nth-child(2) { grid-column: span 2; }
.employer-page .dash-stat:nth-child(3),
.employer-page .dash-stat:nth-child(4) { grid-column: span 1; }
.employer-page .dash-stat:nth-child(1) {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
}
.employer-page .dash-stat:nth-child(2) {
  background: var(--accent-soft);
  box-shadow: inset 0 6px 0 var(--accent-bright);
  color: var(--fg);
}
.employer-page .dash-stat:nth-child(3) {
  background: var(--aqua-soft);
  box-shadow: inset 0 6px 0 var(--aqua);
}
.employer-page .dash-stat:nth-child(4) {
  background: var(--yellow-soft);
  box-shadow: inset 0 6px 0 var(--yellow);
}
.employer-page .dash-stat:nth-child(-n+2) .dash-stat__num,
.employer-page .dash-stat:nth-child(1) .dash-stat__label { color: inherit; }
.employer-page .dash-stat__num { font-size: 3.2rem; }
.employer-page .dash-pane > .postings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.employer-page .dash-pane > .postings .posting {
  overflow: hidden;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 0;
  border-top: 7px solid var(--primary);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.employer-page .dash-pane > .postings .posting:nth-child(even) { border-top-color: var(--aqua); }
.employer-page .posting-foot { margin-top: auto; }
.employer-page .pkg-item {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
}
.employer-page .pkg-item__q { flex: 0 0 auto; color: var(--primary-dark); font-weight: 600; }
.employer-page .pkg-item__q::after { content: ":"; }
.employer-page .pkg-item__a { flex: 1 1 8rem; min-width: 0; }

/* ---- Workspace: a floating, saturated navigation rail --------------- */
.ws-app {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background:
    radial-gradient(circle at 88% 15%, rgba(35, 206, 217, 0.10), transparent 22rem),
    var(--canvas);
}
.ws-side {
  margin: 0;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(165deg, var(--primary-dark), #06454b 72%, #053b40);
  box-shadow: 0 18px 42px rgba(6, 69, 75, 0.25);
  color: #fff;
}
.ws-side__head { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.14); }
.ws-side__title { color: #fff; font-family: var(--font-display); font-size: 1.2rem; }
.ws-side__group { color: #bceff2; padding-inline: var(--space-4); }
.ws-side__item {
  width: auto;
  margin: 0.1rem var(--space-2);
  padding: 0.7rem var(--space-3);
  border: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.70);
}
.ws-side__item:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.ws-side__item.is-active {
  background: #fff;
  box-shadow: 0 8px 18px rgba(3, 54, 59, 0.24);
  color: var(--primary-dark);
}
.ws-side__count { background: rgba(255, 255, 255, 0.14); color: #fff; }
.ws-side__item.is-active .ws-side__count { background: var(--primary-soft); color: var(--primary-dark); }
.ws-side__count--soon { background: var(--accent-bright); color: var(--fg); }
.ws-side__count--zero { background: transparent; color: inherit; }
.ws-side__optional { color: rgba(255, 255, 255, 0.55); }
.ws-panes { background: transparent; padding: var(--space-3) var(--space-4) 0; }
.ws-pane > .panel__head {
  align-items: center;
  padding: var(--space-4);
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 10%, rgba(252, 164, 124, 0.18), transparent 12rem),
    linear-gradient(130deg, #fff, var(--primary-soft));
  box-shadow: var(--shadow-sm);
}
.ws-pane > .panel__head .panel__title {
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-size: 1.7rem;
}
.application-section {
  padding: var(--space-4);
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
}
.application-section__head { border-bottom: 2px solid var(--primary-soft); }
.application-card { border: 0; border-left: 6px solid var(--primary); box-shadow: var(--shadow-sm); }
.application-card:last-child { border-bottom: 0; }
.application-next { border: 0; border-left: 7px solid var(--primary); box-shadow: var(--shadow-sm); }
.application-next--soon { border-left-color: var(--accent-bright); }
.ws-pane .empty {
  border: 2px dashed var(--line-strong);
  background: linear-gradient(120deg, #fff, var(--primary-soft));
}
.match-card { border: 0; border-left: 6px solid var(--aqua); box-shadow: var(--shadow-sm); }

/* ---- Assistant: colorful scene cards + a floating conversation room -- */
.scene {
  gap: var(--space-3);
  padding: var(--space-3);
  background:
    radial-gradient(circle at 8% 10%, rgba(252, 164, 124, 0.12), transparent 22rem),
    var(--canvas);
}
.scene__main { gap: var(--space-3); padding: 0; }
.scene__presence {
  min-height: 8rem;
  padding: var(--space-4);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.20), transparent 10rem),
    linear-gradient(125deg, var(--primary-dark), var(--primary) 72%, #0a929e);
  box-shadow: var(--shadow-md);
  color: #fff;
}
.scene__name { color: #fff; font-family: var(--font-display); font-size: 1.65rem; }
.scene__read,
.scene__read a { color: rgba(255, 255, 255, 0.76); }
.scene__presence .msg__glyph { border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.scene__presence .msg__glyph::before { background: var(--accent-bright); }
.scene__presence .agent-status {
  background: #fff;
  border: 0;
  color: var(--fg);
}
.scene__presence .agent-status__dot { background: var(--mint); }
.scene__banner {
  border: 0;
  border-left: 7px solid var(--accent-bright);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.scene__body > .strip {
  border: 0;
  border-top: 7px solid var(--primary);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.scene__body > .strip--needs {
  border-top-color: var(--accent-bright);
  background: linear-gradient(145deg, #fff, var(--accent-soft));
}
.scene-tile { border: 0; border-left: 5px solid var(--primary); box-shadow: 0 5px 15px rgba(6, 93, 101, 0.08); }
.scene-tile--needs,
.scene-tile--sev-30 { border-left-color: var(--accent-bright); }
.wb-group { border: 0; box-shadow: 0 5px 16px rgba(6, 93, 101, 0.09); }
.convo {
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
}
.convo__title {
  padding-block: var(--space-4);
  background: linear-gradient(110deg, #06454b, var(--primary));
  border: 0;
  color: #fff;
}
.convo__log { background: var(--surface-soft); }
.convo__composer { border-top: 0; box-shadow: 0 -8px 24px rgba(6, 93, 101, 0.09); }
.scene .msg__text,
.agent-room .msg__text { background: #fff; border: 0; box-shadow: 0 5px 16px rgba(6, 93, 101, 0.10); }
.scene .msg--applicant .msg__text,
.agent-room .msg--applicant .msg__text { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.feed-chip { background: var(--primary-soft); border-color: transparent; }
.feed-chip:nth-child(2n) { background: var(--primary-soft); color: var(--primary-dark); }
.feed-chip:hover:not(:disabled) { background: var(--aqua-soft); }
.convo .feed-send__btn {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--fg);
}
.scene__main > .xfunnel {
  padding: var(--space-4);
  border-top: 7px solid var(--aqua);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.xfunnel__step:nth-child(1) { border-color: var(--primary); background: var(--primary-soft); }
.xfunnel__step:nth-child(2) { border-color: var(--aqua); background: var(--aqua-soft); }
.xfunnel__step:nth-child(3) { border-color: var(--yellow); background: var(--yellow-soft); }
.xfunnel__step:nth-child(4),
.xfunnel__step:nth-child(5) { border-color: var(--accent-bright); background: var(--accent-soft); }

/* ---- Responsive composition ----------------------------------------- */
@media (max-width: 1180px) {
  .postings-page #pv-pane-list .postings { grid-template-columns: minmax(0, 1fr); }
  .employer-page .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .employer-page .dash-stat:nth-child(n) { grid-column: span 1; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .steps { grid-column: 1; }
  .steps { grid-row: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { grid-template-columns: 1fr; align-items: start; }
  .step__num { grid-row: auto; margin-bottom: var(--space-2); }
  .postings-view { grid-template-columns: minmax(0, 1fr); }
  .postings-filterbar {
    grid-column: 1;
    grid-row: auto;
    position: static;
    border-top-width: 6px;
  }
  .postings-filterbar .filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .postings-filterbar .filters input[type=text] { grid-column: 1 / -1; }
  .postings-filterbar .filters .btn,
  .postings-filterbar .filters-clear { grid-column: 1 / -1; }
  .postings-view > .pv-tabs,
  .postings-view > .pv-pane { grid-column: 1; }
  .postings-view > .postings-results { grid-column: 1; }
  .employer-page .dash-pane > .postings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .home__layout { display: block; }
  .hero { padding: var(--space-5) var(--space-4); border-radius: 22px; }
  .hero__title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .steps { display: flex; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .role-card { min-height: 0; }
  .position-page { grid-template-columns: minmax(0, 1fr); }
  .position-page > * { grid-column: 1 !important; }
  .position-page > .position-header { min-height: 19rem; align-items: flex-start; }
  .position-page .position-header { flex-direction: column; }
  .position-page .position-header h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
  .position-page > .badges { margin: -3rem var(--space-3) 0; max-width: calc(100% - 2rem); border-radius: 16px; }
  .position-page > .position-source-actions {
    justify-self: start;
    margin-top: 0;
  }
  .position-page .pkg-list { grid-template-columns: minmax(0, 1fr); }
  .ws-app { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .ws-side { border-radius: 0 0 20px 20px; background: linear-gradient(110deg, var(--primary-dark), var(--primary)); }
  .ws-side__head { padding-bottom: var(--space-2); }
  .ws-mobile-nav { color: rgba(255, 255, 255, 0.75); }
  .ws-mobile-nav select { background: #fff; }
  .ws-panes { padding: var(--space-3); }
  .application-section { padding: var(--space-3); }
  .scene { padding: 0; gap: 0; }
  .scene__main { padding: var(--space-3); }
  .scene__presence { border-radius: 18px; }
  .convo { border-radius: 18px 18px 0 0; }

  /* On phones the assistant becomes one readable page. Keeping the desktop
     viewport lock here hid the readiness cards behind the conversation pane. */
  .ws-viewport:has(.scene) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }
  .scene {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: auto;
  }
  .scene__main {
    min-height: auto;
    overflow: visible;
  }
  .convo {
    min-height: 0;
    max-height: none;
    margin: 0 var(--space-3) var(--space-3);
  }
  .convo__log {
    flex: 0 0 auto;
    height: min(28rem, 65dvh);
  }
}

@media (max-width: 640px) {
  .page-header { padding: var(--space-4); border-radius: 16px; }
  .postings-page > .page-header,
  .employer-page > .page-header { padding: var(--space-4); }
  .postings-filterbar .filters { grid-template-columns: minmax(0, 1fr); }
  .postings-page .posting--catalog { min-height: 0; }
  .postings-page .posting-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .postings-page .posting-head__aside {
    flex-wrap: wrap;
    width: 100%;
  }
  .employer-page .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employer-page .dash-stat { min-height: 7.5rem; }
  .employer-page .dash-stat__num { font-size: 2.4rem; }
  .employer-page .dash-tabs { width: 100%; }
  .employer-page .dash-tab { flex: 1 1 0; text-align: center; }

  .feed-send {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .feed-send__btn { width: 100%; }
}

@media (max-width: 360px) {
  .site-nav__links {
    column-gap: 0.6rem;
    row-gap: 0;
    font-size: 0.72rem;
  }
  .site-nav__links > a,
  .site-nav .linkform button { min-height: 36px; }
  .site-nav__bell { width: 32px; height: 36px; }
}

/* ---- Notification bell popover -------------------------------------- */
.site-nav__inner { position: relative; }
.nav-notifications {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.site-nav__bell {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.site-nav__bell:hover,
.site-nav__bell[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.site-nav__bell:focus-visible { outline-color: #fff; }

.notification-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 0.65rem);
  right: -0.35rem;
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 6rem));
  overflow-y: auto;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.notification-popover[hidden] { display: none; }
.notification-popover__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-soft);
}
.notification-popover__header h2 {
  margin: 0;
  color: var(--primary-dark);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}
.notification-popover__count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.notification-preview {
  margin: 0;
  padding: 0;
  list-style: none;
}
.notification-preview__item {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-soft);
}
.notification-preview__item--unread {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.site-nav .notification-preview__link,
.notification-preview__text {
  color: var(--fg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
}
.site-nav .notification-preview__link:hover {
  background: transparent;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notification-preview__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--fs-xs);
}
.notification-preview__meta time { white-space: nowrap; }
.notification-popover__empty {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  color: var(--muted);
  text-align: center;
}
.notification-popover__empty strong { color: var(--fg); }
.notification-popover__footer { padding: var(--space-2) var(--space-4); }
.site-nav .notification-popover__footer a {
  display: block;
  padding: var(--space-1);
  color: var(--primary-dark);
  font-weight: var(--fw-semibold);
  text-align: center;
  text-decoration: none;
}
.site-nav .notification-popover__footer a:hover {
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

@media (max-width: 760px) {
  .nav-notifications { position: static; }
  .notification-popover {
    top: calc(100% + 0.5rem);
    right: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-height: calc(100dvh - 8rem);
  }
}

@media (max-width: 360px) {
  .notification-popover__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
  .notification-popover__header,
  .notification-preview__item { padding-right: var(--space-3); padding-left: var(--space-3); }
  .notification-preview__meta { display: grid; gap: 0; }
}

/* ==========================================================================
   FLAT PALETTE PASS

   The reference palette gives jade about one third of its chromatic area and
   splits the remainder between aqua, peach, yellow, and mint. Large surfaces
   below follow that rhythm. Color communicates a state only when the state is
   also named or marked (for example, a filled star on a saved position).
   ========================================================================== */

/* The site uses no image-backed CSS backgrounds, so removing decorative
   background images here deliberately removes the legacy gradient layers. */
body,
body *,
body *::before,
body *::after {
  background-image: none !important;
}

body { background-color: var(--canvas); }

/* Shared chrome: jade anchors the navigation; mint and yellow keep the footer
   visually distinct without introducing another dark block. */
.site-nav {
  background-color: var(--primary-dark);
  box-shadow: 0 8px 24px rgba(22, 56, 60, 0.18);
}
.site-nav::after { background-color: var(--aqua); }
.site-nav .btn--ghost,
.site-nav .role-chip { background-color: #fff; }
.site-nav .btn--ghost:hover { background-color: var(--yellow); }
.site-nav__badge { background-color: var(--accent-bright); }

.site-footer {
  background-color: var(--mint);
  color: var(--fg);
}
.site-footer::before { background-color: var(--yellow); }
.site-footer__tagline,
.site-footer__brand,
.site-footer__col h3,
.site-footer__legal,
.site-footer__col a,
.site-footer__legal a { color: var(--fg); }
.site-footer__col a:hover { color: var(--primary-dark); }
.site-footer__legal { border-top-color: rgba(22, 56, 60, 0.22); }

.btn,
.feed-send__btn {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 7px 16px rgba(9, 124, 135, 0.18);
}
.btn:hover,
.feed-send__btn:hover:not(:disabled) {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 9px 20px rgba(22, 56, 60, 0.20);
}
.btn--ghost { background-color: #fff; }
.btn--ghost:hover { background-color: var(--primary-soft); }

.page-header { background-color: #fff; }
.auth-card::before { background-color: var(--aqua); }
.badge--quality,
.badge--role,
.badge--mech,
.badge--autoapply,
.badge--band-strong { background-color: var(--primary); }
.notification-preview__item--unread {
  background-color: var(--yellow-soft);
  box-shadow: inset 4px 0 0 var(--yellow);
}

/* ---- Homepage: a flat, editorial product story ---------------------- */
.home__main { background-color: var(--canvas); }
.home__layout {
  display: block;
  max-width: var(--maxw-wide);
  padding-top: clamp(1rem, 2.5vw, 2.5rem);
  padding-bottom: var(--space-7);
}
.home-story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
}
.home-story__copy {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  min-width: 0;
}
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(45rem, 78vh);
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  position: relative;
  border: 0;
  border-radius: 26px;
  background-color: var(--primary);
  box-shadow: 0 24px 56px rgba(22, 56, 60, 0.18);
  color: #fff;
}
.hero::before {
  width: 7.5rem;
  height: 0.55rem;
  inset: 2rem auto auto clamp(2rem, 5vw, 4.5rem);
  border-radius: 999px;
  background-color: var(--yellow);
  opacity: 1;
}
.hero::after {
  width: 9rem;
  height: 9rem;
  right: -4.25rem;
  bottom: -4.25rem;
  left: auto;
  top: auto;
  border: 1.7rem solid var(--aqua);
  background-color: transparent;
  opacity: 1;
}
.hero__eyebrow {
  grid-column: auto;
  margin: 2.1rem 0 var(--space-3);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.hero__title {
  grid-column: auto;
  max-width: 12ch;
  margin: 0 0 var(--space-4);
  color: #fff;
  font-size: clamp(3rem, 5.7vw, 5.2rem);
}
.hero__lead {
  grid-column: auto;
  max-width: 51ch;
  margin: 0 0 var(--space-5);
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}
.hero__actions {
  grid-column: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__actions .btn {
  background-color: var(--yellow);
  border-color: var(--yellow);
  box-shadow: none;
  color: var(--fg);
}
.hero__actions .btn:hover {
  background-color: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--fg);
}
.hero__text-link {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration-color: rgba(255, 255, 255, 0.62);
  text-underline-offset: 4px;
}
.hero__text-link:hover { text-decoration-color: var(--yellow); }

.home-story__steps {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.home-story__step {
  display: grid;
  align-content: center;
  min-height: min(35rem, 62vh);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 24px;
  color: var(--fg);
}
.home-story__step--aqua { background-color: var(--aqua); }
.home-story__step--peach { background-color: var(--accent-bright); }
.home-story__step--yellow { background-color: var(--yellow); }
.home-story__step--mint { background-color: var(--mint); }
.home-story__num {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
  border: 2px solid rgba(22, 56, 60, 0.35);
  border-radius: 50%;
  color: var(--fg);
  font-weight: var(--fw-semibold);
}
.home-story__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.home-story__title {
  max-width: 15ch;
  margin: 0 0 var(--space-3);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.5rem);
}
.home-story__body {
  max-width: 47ch;
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.exchange-overview {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background-color: #fff;
  box-shadow: 0 24px 56px rgba(22, 56, 60, 0.15);
}
.exchange-overview__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--primary-dark);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.exchange-overview__status { color: var(--yellow); }
.exchange-overview__intro {
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.exchange-overview__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--primary-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.exchange-overview__intro h2 {
  max-width: 16ch;
  margin: 0 0 var(--space-3);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
}
.exchange-overview__intro > p:last-child {
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
}
.exchange-overview__flow {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  background-color: var(--surface-soft);
  list-style: none;
}
.exchange-overview__item {
  --item-color: var(--aqua);
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 4.15rem;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-left: 6px solid var(--item-color);
  border-radius: 12px;
  background-color: #fff;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.exchange-overview__item--peach { --item-color: var(--accent-bright); }
.exchange-overview__item--yellow { --item-color: var(--yellow); }
.exchange-overview__item--mint { --item-color: var(--mint); }
.exchange-overview__item[aria-current="step"] {
  background-color: var(--item-color);
  border-color: rgba(22, 56, 60, 0.38);
  box-shadow: 0 7px 16px rgba(22, 56, 60, 0.10);
}
.exchange-overview__num {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--item-color);
  color: var(--fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.exchange-overview__item[aria-current="step"] .exchange-overview__num {
  background-color: #fff;
}
.exchange-overview__item-copy { display: grid; gap: 0.15rem; min-width: 0; }
.exchange-overview__item-copy strong { color: var(--fg); font-size: var(--fs-sm); }
.exchange-overview__item-copy span { color: var(--muted); font-size: var(--fs-xs); }
.exchange-overview__item[aria-current="step"] .exchange-overview__item-copy span { color: var(--fg); }
.exchange-overview__tag {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg);
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.exchange-overview__item[aria-current="step"] .exchange-overview__tag {
  border-color: rgba(22, 56, 60, 0.45);
  background-color: rgba(255, 255, 255, 0.62);
}
.exchange-overview__caption {
  min-height: 5.2rem;
  display: grid;
  align-content: center;
  gap: 0.3rem;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line);
  background-color: #fff;
  color: var(--fg);
}
.exchange-overview__caption-label {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.exchange-overview__caption strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.entry {
  margin-top: clamp(4rem, 9vw, 9rem);
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}
.roles { gap: var(--space-4); }
.role-card:first-child {
  background-color: var(--accent-soft);
  border-top-color: var(--accent-bright);
}
.role-card + .role-card {
  background-color: var(--mint-soft);
  border-top-color: var(--mint);
}
.role-card::after { background-color: var(--yellow); opacity: 0.42; }
.role-card + .role-card::after { background-color: var(--aqua); opacity: 0.25; }
.welcome { background-color: var(--mint-soft); }

/* Content only starts offset and transparent after JavaScript has confirmed
   it can observe the viewport. With no JS, everything remains readable. */
.home-motion-ready [data-home-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 560ms ease, transform 560ms ease;
}
.home-motion-ready [data-home-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 1000px) and (min-height: 650px) {
  .exchange-overview {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-3));
  }
}

/* ---- Position catalogue: color now communicates saved state ---------- */
.postings-page > .page-header {
  background-color: var(--aqua);
  color: var(--fg);
}
.postings-page > .page-header h1,
.postings-page > .page-header .subtitle { color: var(--fg); }
.postings-filterbar {
  background-color: var(--surface);
  border-top-color: var(--aqua);
}
.postings-page .posting--catalog {
  border: 1px solid var(--line);
  background-color: #fff;
  box-shadow: 0 10px 24px rgba(22, 56, 60, 0.09);
}
.postings-page .posting--catalog::before,
.postings-page .posting--catalog:nth-child(3n+2)::before,
.postings-page .posting--catalog:nth-child(3n)::before {
  background-color: var(--aqua);
}
.postings-page .posting--catalog.posting--saved {
  border: 2px solid var(--accent-bright);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 24px rgba(139, 70, 42, 0.12);
}
.postings-page .posting--catalog.posting--saved::before { background-color: var(--accent-bright); }
.posting--saved .save-star.is-saved .save-star__btn {
  background-color: var(--accent-soft);
  border-color: var(--accent-bright);
  color: var(--accent);
}
.postings-page .posting-grid { background-color: var(--surface-soft); }

/* Detail and work surfaces use solid colors with stable, meaningful roles. */
.position-page > .position-header { background-color: var(--primary); }
.position-page .position-header .subtitle,
.position-page .position-header .posting-id { color: #fff; }
.position-page > .autoapply-panel { background-color: var(--aqua-soft); }
.position-page > .autoapply-panel--blocked { background-color: var(--accent-soft); }
.position-page > .pkg-section,
.position-page > .pkg-section:nth-of-type(even),
.position-page > .pkg-section:nth-of-type(3n) { border-top-color: var(--aqua); }
.position-page > #discussion { background-color: var(--yellow-soft); }

.employer-page > .page-header {
  background-color: var(--accent-bright);
  color: var(--fg);
}
.employer-page > .page-header h1,
.employer-page > .page-header .subtitle { color: var(--fg); }
.employer-page > .page-header .role-chip { color: var(--fg); }
.employer-page .dash-tab.is-active,
.employer-page .dash-stat:nth-child(1) { background-color: var(--primary); }
.employer-page .dash-stat:nth-child(2) { background-color: var(--accent-soft); }
.employer-page .dash-stat:nth-child(3) { background-color: var(--aqua-soft); }
.employer-page .dash-stat:nth-child(4) { background-color: var(--yellow-soft); }
.employer-page .dash-pane > .postings .posting,
.employer-page .dash-pane > .postings .posting:nth-child(even) { border-top-color: var(--aqua); }

.ws-app,
.scene { background-color: var(--canvas); }
.ws-side { background-color: var(--primary-dark); }
.ws-side__optional { color: rgba(255, 255, 255, 0.74); }
.ws-pane > .panel__head { background-color: var(--mint-soft); }
.application-section { background-color: #fff; }
.ws-pane .empty { background-color: var(--yellow-soft); }
.scene__presence {
  background-color: var(--aqua);
  color: var(--fg);
}
.scene__name,
.scene__read,
.scene__read a { color: var(--fg); }
.scene__presence .msg__glyph { border-color: var(--fg); background-color: rgba(255, 255, 255, 0.58); }
.scene__banner { background-color: var(--accent-soft); }
.scene__body > .strip--needs { background-color: var(--accent-soft); }
.convo__title { background-color: var(--primary); }
.convo__log { background-color: var(--surface-soft); }
.scene .msg--applicant .msg__text,
.agent-room .msg--applicant .msg__text { background-color: var(--primary); }

@media (max-width: 999px) {
  .home-story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .home-story__copy { display: contents; }
  .hero { order: 1; min-height: min(40rem, 74vh); }
  .exchange-overview { order: 2; position: static; }
  .home-story__steps { order: 3; }
  .home-story__step { min-height: 28rem; }
}

@media (max-width: 760px) {
  .home__layout { padding-top: var(--space-3); }
  .hero {
    min-height: 35rem;
    padding: var(--space-5) var(--space-4);
    border-radius: 20px;
  }
  .hero::before { left: var(--space-4); }
  .hero__title { font-size: clamp(2.65rem, 12vw, 4rem); }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .home-story__step {
    min-height: 0;
    padding: var(--space-5) var(--space-4);
    border-radius: 20px;
  }
  .home-story__num { margin-bottom: var(--space-5); }
  .exchange-overview { border-radius: 20px; }
  .exchange-overview__topline { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .ws-side { background-color: var(--primary-dark); }
}

@media (max-width: 420px) {
  .home__layout { padding-right: var(--space-3); padding-left: var(--space-3); }
  .hero { min-height: 31rem; padding: 2rem 1.25rem; }
  .hero::before { top: 1.35rem; left: 1.25rem; width: 5.5rem; }
  .hero__eyebrow { margin-top: 1.5rem; }
  .exchange-overview__intro { padding: var(--space-4); }
  .exchange-overview__flow { padding: var(--space-2); }
  .exchange-overview__item {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
  }
  .exchange-overview__num { width: 2.35rem; height: 2.35rem; }
  .exchange-overview__tag {
    grid-column: 2;
    justify-self: start;
  }
  .exchange-overview__caption { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .home-motion-ready [data-home-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .exchange-overview__item { transition: none; }
}