:root,
:root[data-theme="dark"] {
  --bg: #0d1117;
  --card: #161b22;
  --card-hover: #1c232d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #d62b2b;
  --accent-hover: #b62525;
  --success: #2ea043;
  --warning: #d29922;
  --info: #58a6ff;
  --border: #30363d;
  /* Theme-aware subtle surface tints. In dark mode these are white-on-dark
     (hover states, zebra stripes, faint card fills). They MUST flip to
     black-on-light in the light theme or they vanish on white surfaces —
     see the light override below. Use these instead of hard-coded
     rgba(255,255,255,0.0x) so both themes stay legible. */
  --overlay-weak: rgba(255, 255, 255, 0.03);
  --overlay-med: rgba(255, 255, 255, 0.05);
  --overlay-strong: rgba(255, 255, 255, 0.08);
  /* Modal/backdrop scrim — stays dark in both themes (it dims the page). */
  --scrim: rgba(0, 0, 0, 0.65);
  /* Hero banner surface — flips with the theme (see .hero). */
  --hero-bg: #4A4A4A;
  /* Architecture-page diagram panel. Must stay in lockstep with the
     Mermaid palette in admin/architecture.html (MERMAID_THEMES). */
  --diagram-bg: #0d1117;
  /* Aliases used by the analytics page. They were referenced as
     var(--surface-2 / --primary / --text-muted, <fallback>) but never
     defined, so every use silently fell back to a hard-coded DARK value
     (#1a1a1a / #888) that stayed dark on the light theme. Defining them
     here (as aliases to vars that already flip) makes those tiles
     theme-aware. Declared once on the base :root so they resolve against
     whichever theme is active. */
  --primary: var(--accent);
  --surface-2: var(--card-hover);
  --text-muted: var(--muted);
  color-scheme: dark;
}

/* Light theme — same variable names, palette tuned so the Homecredit
   red accent still pops without burning eyes on white. Light surfaces
   are layered: page < card < hover, mirroring the dark layering. */
:root[data-theme="light"] {
  --bg: #f6f8fa;
  --card: #ffffff;
  --card-hover: #f0f3f6;
  --text: #1f2328;
  --muted: #57606a;
  --accent: #c92525;
  --accent-hover: #a91d1d;
  --success: #1a7f37;
  --warning: #9a6700;
  --info: #0969da;
  --border: #d0d7de;
  /* Subtle tints flip to black-on-light so hovers/stripes stay visible on
     white surfaces. Slightly lower alpha than dark's white so they read as
     gentle, not muddy. */
  --overlay-weak: rgba(0, 0, 0, 0.03);
  --overlay-med: rgba(0, 0, 0, 0.05);
  --overlay-strong: rgba(0, 0, 0, 0.07);
  --scrim: rgba(0, 0, 0, 0.5);
  /* Light hero: white so the white-background logo SVG blends seamlessly. */
  --hero-bg: #ffffff;
  /* Diagram panel goes white in day mode so Mermaid's dark-on-light
     palette is legible. */
  --diagram-bg: #ffffff;
  color-scheme: light;
}

/* Theme toggle button — fixed top-right on every page so it survives
   page-specific layouts (admin home, role workspace, login, etc.).
   The button itself uses theme vars so it inverts cleanly. */
.theme-toggle {
  position: fixed;
  /* Sit below the version + active-sessions badges (those are at top:14px).
     56px clears the badge row with a 14px gap. */
  top: 56px;
  right: 20px;
  z-index: 9999;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.theme-toggle:hover { background: var(--card-hover); transform: scale(1.06); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Top bar */
.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar h1 { margin: 0; font-size: 1.25rem; }
.topbar #subtitle { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

.version-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.version-badge-hero {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 3;
  display: flex;
  gap: 6px;
  align-items: center;
}
.active-sessions-badge {
  color: var(--text);
}
.active-sessions-badge.busy {
  border-color: rgba(210, 153, 34, 0.55);
  color: #d29922;
}
.active-sessions-badge.full {
  border-color: rgba(214, 43, 43, 0.55);
  color: #ff7b72;
}

/* Version badge becomes a button that opens a release-notes modal. */
.version-badge-btn {
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.version-badge-btn:hover {
  border-color: rgba(214, 43, 43, 0.5);
  color: var(--text);
}

/* Release-notes modal (clicking version badge → CHANGELOG view). */
.release-modal {
  position: fixed; inset: 0; background: var(--scrim);
  display: none; align-items: center; justify-content: center;
  z-index: 9998; padding: 32px;
}
.release-modal.visible { display: flex; }
.release-modal-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(820px, 100%);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.release-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.release-modal-header h2 {
  margin: 0; font-size: 1.05rem; font-weight: 600;
}
.release-modal-versions {
  display: flex; gap: 8px; margin-top: 4px;
}
.release-modal-versions .version-badge { font-size: 0.7rem; }
.release-modal-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.release-modal-close:hover { color: var(--text); }
.release-modal-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}
.release-modal-body h1 { font-size: 1.2rem; margin: 16px 0 8px; }
.release-modal-body h2 { font-size: 1rem; margin: 18px 0 6px; color: var(--accent); }
.release-modal-body h3 { font-size: 0.92rem; margin: 14px 0 4px; color: var(--text); }
.release-modal-body code { background: var(--overlay-med); padding: 1px 5px; border-radius: 3px; font-size: 0.82em; }
.release-modal-body ul { padding-left: 22px; margin: 6px 0; }
.release-modal-body li { margin-bottom: 4px; }
.release-modal-body hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.release-modal-body a { color: #58a6ff; }

.role-chip {
  padding: 6px 12px;
  background: rgba(214, 43, 43, 0.12);
  color: var(--text);
  border: 1px solid rgba(214, 43, 43, 0.35);
  border-radius: 999px;
  font-size: 0.85rem;
}

/* Shell */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.section-header h2 { margin: 0; font-size: 1.05rem; }
.section-sub { margin: 0; color: var(--muted); font-size: 0.85rem; }

.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 14px;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.tab-active {
  color: var(--info);
  border-bottom-color: var(--info);
}

/* ---- Role page top-level tabs (Setup vs Candidates) ---- */
.role-toptabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin: 16px 0 0;
}
.role-toptab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 26px;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s;
}
.role-toptab:hover { color: var(--text); }
.role-toptab.role-toptab-active {
  color: var(--text);
  border-bottom-color: #DB0011;
}
.role-toptab-count {
  background: rgba(219,0,17,0.12);
  color: #DB0011;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 6px;
}
.role-toptab-panel { margin-top: 20px; }
.role-toptab-panel.hidden { display: none; }

/* Custom Questions tab — per-role question authoring with rubrics. */
.customq-list { display: flex; flex-direction: column; gap: 12px; }
.customq-empty {
  padding: 32px 16px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--overlay-weak);
  margin: 12px 0;
}
.customq-empty.hidden { display: none; }
.customq-warn {
  padding: 10px 14px;
  margin: 12px 0;
  border-radius: 8px;
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.35);
  color: var(--warning);
  font-size: 0.85rem;
}
.customq-warn.hidden { display: none; }
.customq-card {
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customq-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.customq-card-num {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 28px;
}
.customq-card-mandatory {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.customq-card-mandatory input { margin: 0; }
.customq-card-mandatory.is-on {
  color: var(--accent);
  font-weight: 600;
}
.customq-card-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.customq-icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 8px;
  line-height: 1.2;
}
.customq-icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.customq-icon-btn[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.customq-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.customq-card textarea {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.customq-card textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.customq-card textarea.customq-question-text {
  min-height: 50px;
}
.customq-card textarea.customq-rubric {
  min-height: 70px;
  font-size: 0.82rem;
}
.customq-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.customq-toolbar.hidden { display: none; }
.customq-dirty-badge {
  font-size: 0.78rem;
  color: var(--warning);
}
.customq-dirty-badge.hidden { display: none; }

.table-wrap { overflow-x: visible; }
#candidates-table { table-layout: fixed; width: 100%; }
/* Seven columns since the Interview timestamp was added.
   These widths are POSITIONAL and the table is `table-layout: fixed`, so
   inserting a column shifts every rule one place to the right and leaves the
   last column with no rule at all — it then collapses to whatever is left
   over and its `white-space: nowrap` content bursts out past the card edge.
   Keep this list in sync with the <thead> in role.html; the percentages are
   meant to total 100. */
#candidates-table th:nth-child(1) { width: 32px; }  /* Select checkbox */
#candidates-table th:nth-child(2) { width: 19%; }   /* Candidate */
#candidates-table th:nth-child(3) { width: 14%; }   /* Email */
#candidates-table th:nth-child(4) { width: 23%; }   /* Pipeline */
#candidates-table th:nth-child(5) { width: 13%; }   /* Interview */
#candidates-table th:nth-child(6) { width: 10%; }   /* Score */
#candidates-table th:nth-child(7) { width: 21%; }   /* Actions */

/* The action buttons stack vertically (.action-group is a column), so a
   right-aligned column would leave the header sitting off the ragged left
   edge of the stack. Align both to the left instead. Scoped to this table so
   the ranking tables keep their right-aligned actions. */
#candidates-table th.actions-col,
#candidates-table td.actions { text-align: left; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
thead th {
  text-align: left;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--overlay-med);
  vertical-align: middle;
}
tbody tr:hover { background: var(--card-hover); }
.actions-col { width: 1%; white-space: nowrap; text-align: right; }
td.actions { text-align: right; white-space: nowrap; }
td.muted { color: var(--muted); text-align: center; padding: 24px; }
td.rank-col { font-weight: 600; width: 60px; }
td.composite-col { font-weight: 600; width: 100px; }

/* Status pills */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--overlay-weak);
}
.pill-scheduled  { color: var(--info);    border-color: rgba(88, 166, 255, 0.35); background: rgba(88, 166, 255, 0.08); }
.pill-in_progress { color: var(--warning); border-color: rgba(210, 153, 34, 0.35); background: rgba(210, 153, 34, 0.08); }
.pill-completed  { color: var(--success); border-color: rgba(46, 160, 67, 0.35); background: rgba(46, 160, 67, 0.08); }
/* Attempted = interview conducted but ended abnormally (dropped/walkout/terminated). Amber to read as "needs a look", not a clean pass. */
.pill-attempted  { color: var(--warning); border-color: rgba(210, 153, 34, 0.35); background: rgba(210, 153, 34, 0.10); }
.pill-pending    { color: var(--muted); }
.pill-no_show, .pill-failed, .pill-candidate_withdrawn { color: var(--accent); border-color: rgba(214, 43, 43, 0.35); }

/* Recommendations */
.rec {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}
.rec-STRONG_YES  { background: rgba(46, 160, 67, 0.2); color: var(--success); }
.rec-YES         { background: rgba(88, 166, 255, 0.15); color: var(--info); }
.rec-MAYBE       { background: rgba(210, 153, 34, 0.15); color: var(--warning); }
.rec-NO          { background: rgba(214, 43, 43, 0.15); color: var(--accent); }
.rec-STRONG_NO   { background: rgba(214, 43, 43, 0.28); color: white; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.btn:hover:not([disabled]) { filter: brightness(1.1); }
.btn[disabled], .btn.btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover:not([disabled]) { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

/* Button that reads as an inline text link (used in the scorecard footer for
   "View transcript"). Keeps native <button> semantics for the data-action
   click delegation while looking like the adjacent anchors. */
.btn-inline-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--info);
  cursor: pointer;
  text-decoration: underline;
}
.btn-inline-link:hover { color: var(--accent); }
.btn-secondary:hover:not([disabled]) { background: var(--overlay-med); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 6px 8px;
}
.btn-ghost:hover { color: var(--text); background: var(--overlay-med); }

.btn-danger {
  background: transparent;
  color: var(--accent);
  border-color: rgba(214, 43, 43, 0.35);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  max-width: 520px;
  text-align: center;
}
.toast.visible { opacity: 1; }
.toast.error { border-color: rgba(214, 43, 43, 0.5); color: #ffb7b7; }
.toast.success { border-color: rgba(46, 160, 67, 0.5); color: #9affb4; }

/* Upload progress banner */
.upload-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: #1a2f1a;
  border-bottom: 2px solid rgba(46, 160, 67, 0.6);
  color: #9affb4;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
.upload-banner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(154, 255, 180, 0.3);
  border-top-color: #9affb4;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.8s linear infinite;
}

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal.hidden { display: none; }
.modal-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.modal-panel-wide { max-width: 820px; }
.modal-panel h3 { margin: 0 0 16px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

form label {
  display: block;
  margin-bottom: 12px;
}
form label span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}
form input,
textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
form input:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}
textarea {
  resize: vertical;
  font-family: -apple-system, "Segoe UI", Roboto, monospace;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* JD parsed block */
.jd-parsed-block {
  margin-top: 16px;
  padding: 14px;
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.jd-parsed-block h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--text);
}
.jd-parsed-block .jd-section {
  margin-bottom: 12px;
}
.jd-parsed-block .jd-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jd-parsed-block .jd-value {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}
.jd-parsed-block ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.jd-parsed-block li { margin-bottom: 3px; font-size: 0.88rem; }
.jd-parsed-block .jd-tag {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.3);
  color: var(--info);
  font-size: 0.78rem;
}
.jd-parsed-block .jd-comp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--overlay-med);
}
.jd-parsed-block .jd-comp-row:last-child { border-bottom: 0; }
.jd-parsed-block .jd-comp-name { flex: 1; }
.jd-parsed-block .jd-comp-meta { color: var(--muted); font-size: 0.78rem; }

/* Scorecard */
.health-banner-ok   { background: rgba(46, 160, 67, 0.08); border-color: rgba(46, 160, 67, 0.35) !important; color: var(--success); }
.health-banner-warn { background: rgba(210, 153, 34, 0.10); border-color: rgba(210, 153, 34, 0.40) !important; color: var(--warning); }
.health-banner-bad  { background: rgba(248, 81, 73, 0.10); border-color: rgba(248, 81, 73, 0.45) !important; color: #f85149; }
.health-banner strong { color: inherit; }

.scorecard-summary {
  padding: 12px 16px;
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
}
.scorecard-summary-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sum-item { display: flex; flex-direction: column; }
.sum-item-label { color: var(--muted); font-size: 0.78rem; }
.sum-item-value { font-weight: 600; font-size: 1rem; }
.exec-summary { margin: 8px 0 0; color: var(--text); line-height: 1.45; font-size: 0.9rem; }

.dim-table { margin-top: 8px; }
.dim-table td {
  padding: 8px 10px;
  font-size: 0.85rem;
}
.dim-name { font-weight: 600; text-transform: capitalize; }
.dim-score {
  width: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
}
.dim-assessment { color: var(--muted); line-height: 1.4; }
.dim-evidence, .dim-flags {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: var(--muted);
}
.dim-evidence li, .dim-flags li { margin-bottom: 2px; }
.dim-flags { color: #ffb7b7; }
.scorecard-footer {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
.scorecard-footer a { color: var(--info); text-decoration: none; }
.scorecard-footer a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .topbar-actions { width: 100%; justify-content: space-between; }
  .section-header { flex-direction: column; align-items: flex-start; }
  thead .hide-mobile, tbody .hide-mobile { display: none; }
}

.edit-inline-btn {
  opacity: 0;
  padding: 2px 5px;
  font-size: 11px;
  transition: opacity 0.15s;
}
tr:hover .edit-inline-btn { opacity: 1; }

/* ── Candidate cell ── */
.cand-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  white-space: nowrap;
}
.cand-sub { margin-top: 3px; }
.cand-email { font-size: 0.82rem; color: var(--muted); }
.rank-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 22px;
}
.pill-sm { font-size: 0.7rem; padding: 2px 7px; }
.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

/* ── Pipeline cell ── */
.pipeline-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.pipe-arrow { color: var(--muted); font-size: 0.9rem; }
.pipe-step {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: default;
  white-space: nowrap;
}
button.pipe-step { cursor: pointer; }
.pipe-done {
  background: rgba(46, 160, 67, 0.15);
  color: #9affb4;
  border-color: rgba(46, 160, 67, 0.3);
}
.pipe-todo {
  background: rgba(110, 168, 254, 0.12);
  color: var(--info);
  border-color: rgba(110, 168, 254, 0.3);
  cursor: pointer;
}
.pipe-locked {
  background: var(--overlay-med);
  color: var(--muted);
  border-color: var(--border);
}
.pipe-rescore {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.8rem;
  line-height: 1;
}
.pipe-rescore:hover { color: var(--text); }
.pipe-locked-hint { font-size: 0.78rem; }
.action-group { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

/* Withdrawn row */
.row-withdrawn { opacity: 0.5; }
.row-withdrawn:hover { opacity: 0.8; }
.pill-withdrawn { background: var(--overlay-med); color: var(--muted); border: 1px solid var(--border); }
label.pipe-step { display: inline-flex; align-items: center; }

/* ── Score cell ── */
/* align-items: flex-start so the recommendation badge hugs its own text.
   A column flex container stretches its children by default, which made a
   five-letter "MAYBE" span the whole column and read as a progress bar. */
.score-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.rec-sm { font-size: 0.7rem; padding: 1px 6px; }

/* ── Legacy resume-cell (kept for any remaining refs) ── */
.resume-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.resume-upload {
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}
.tag {
  background: rgba(110, 168, 254, 0.15);
  color: var(--info);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
}
.exp-row {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--overlay-weak);
  border-radius: 6px;
}
.exp-row ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.85rem; }

.hm-questions-block { margin-top: 12px; }
#hm-edit-bar { padding-top: 4px; }
.hm-q {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--overlay-weak);
  border-radius: 6px;
}
.hm-q-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.hm-cat {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--info);
  background: rgba(110,168,254,0.12);
  padding: 2px 8px;
  border-radius: 999px;
}
.hm-why { margin: 4px 0 8px; font-size: 0.85rem; }
.hm-answer {
  width: 100%;
  background: rgba(0,0,0,0.25);
  color: var(--text);
  border: 1px solid var(--overlay-strong);
  border-radius: 4px;
  padding: 6px 8px;
  font: inherit;
  resize: vertical;
}
.hm-answer:focus { outline: 1px solid var(--info); }
.hm-q-saved .hm-answer-saved {
  margin: 6px 0 0;
  white-space: pre-wrap;
  color: var(--info);
  font-size: 0.9rem;
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--info);
}

.match-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.match-badge {
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0b1020;
}
.match-badge.match-strong { background: #4ade80; }
.match-badge.match-borderline { background: #facc15; }
.match-badge.match-weak { background: #f87171; }
.match-rescore {
  font-size: 0.8rem;
  padding: 2px 6px;
  opacity: 0.6;
}
.match-rescore:hover { opacity: 1; }
.sum-item-value.match-strong { color: #4ade80; }
.sum-item-value.match-borderline { color: #facc15; }
.sum-item-value.match-weak { color: #f87171; }

/* ── Hero ── */
.hero {
  position: relative;
  overflow: hidden;
  /* Flips with the theme: HC dark gray in dark mode (matches the
     dark-background logo SVG), white in light mode (matches the
     white-background logo SVG). See --hero-bg + the .hero-logo swap. */
  background: var(--hero-bg);
  border-top: 5px solid #DB0011; /* mirror the red accent baked into the logo */
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 24px;
  text-align: center;
}
/* Logo swap: show the dark-background logo in dark mode, the light-background
   logo in light mode. Both are the SAME wordmark design, just recoloured, and
   both ship in the markup so toggling never triggers a load flash. Used on the
   hero headers AND the login/sleep cards. The `img.` element+class selector
   out-specifies the plain `.hero-logo-img { display:block }` rule below, so
   exactly one logo is ever shown regardless of container. */
img.hero-logo-light { display: none; }
:root[data-theme="light"] img.hero-logo-dark { display: none; }
/* inline-block (not block) so the login/sleep cards, which centre the logo
   with text-align:center, keep it centred; the hero centres via its flex
   container either way. */
:root[data-theme="light"] img.hero-logo-light { display: inline-block; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: heroFadeUp 0.7s ease both;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-logo {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-vs {
  color: #fff;
  animation: shimmer 3.5s ease-in-out infinite;
}
.hero-screen {
  color: var(--accent);
  animation: shimmer 3.5s ease-in-out 0.4s infinite;
}
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}
.hero-sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.hero-cta {
  margin-top: 8px;
  padding: 10px 22px;
  font-size: 0.95rem;
}

/* floating particles */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: floatDot 6s ease-in-out infinite;
}
.hero-particles span:nth-child(1)  { top: 20%; left: 10%; animation-delay: 0s; }
.hero-particles span:nth-child(2)  { top: 65%; left: 18%; animation-delay: 0.8s; }
.hero-particles span:nth-child(3)  { top: 30%; left: 80%; animation-delay: 1.4s; }
.hero-particles span:nth-child(4)  { top: 70%; left: 75%; animation-delay: 2.1s; }
.hero-particles span:nth-child(5)  { top: 10%; left: 50%; animation-delay: 0.4s; }
.hero-particles span:nth-child(6)  { top: 85%; left: 40%; animation-delay: 1.8s; }
.hero-particles span:nth-child(7)  { top: 45%; left: 92%; animation-delay: 2.7s; }
.hero-particles span:nth-child(8)  { top: 55%; left: 5%;  animation-delay: 3.2s; }
@keyframes floatDot {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ── Process flow map ── */
.flow-map {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 8px 0 16px;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  flex: 1;
}
.flow-owner {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  white-space: nowrap;
}
.flow-owner-recruit {
  background: rgba(88, 166, 255, 0.12);
  color: var(--info);
  border: 1px solid rgba(88, 166, 255, 0.3);
}
.flow-owner-hm {
  background: rgba(210, 153, 34, 0.12);
  color: var(--warning);
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.flow-owner-ai {
  background: rgba(214, 43, 43, 0.12);
  color: var(--accent);
  border: 1px solid rgba(214, 43, 43, 0.3);
}
.flow-box {
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  text-align: center;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.flow-box:hover {
  background: var(--card-hover);
  border-color: rgba(214,43,43,0.4);
}
.flow-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.flow-title {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--text);
  line-height: 1.3;
}
.flow-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}
.flow-arrow {
  align-self: center;
  font-size: 1.4rem;
  color: var(--border);
  padding: 0 6px;
  flex-shrink: 0;
  margin-top: 28px; /* align with box centre (offset for owner label) */
}

/* ── Role grid & cards ── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.role-card {
  display: block;
  padding: 16px;
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.role-card:hover {
  background: var(--card-hover);
  border-color: rgba(214, 43, 43, 0.5);
}
.role-card-title { font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
.role-card-dept { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; }
.role-card-pills { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.role-card-meta { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

/* Stage badges on role cards */
.role-card-stage {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.stage-jd     { background: rgba(214,43,43,0.12);  color: var(--accent);  border: 1px solid rgba(214,43,43,0.3); }
.stage-hm     { background: rgba(210,153,34,0.12); color: var(--warning); border: 1px solid rgba(210,153,34,0.3); }
.stage-cands  { background: var(--overlay-med); color: var(--muted);  border: 1px solid var(--border); }
.stage-short  { background: rgba(88,166,255,0.12); color: var(--info);   border: 1px solid rgba(88,166,255,0.3); }
.stage-active { background: rgba(46,160,67,0.12);  color: var(--success); border: 1px solid rgba(46,160,67,0.3); }
.stage-closed { background: var(--overlay-med); color: var(--muted);  border: 1px solid var(--border); }

/* Roles toolbar: tabs + search above the table */
.role-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.role-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.role-tab {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 7px 14px; border-radius: 7px; font-size: 0.86rem; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 7px;
}
.role-tab:hover { color: var(--text); border-color: var(--accent); }
.role-tab.active { background: var(--card); color: var(--text); border-color: var(--accent); font-weight: 600; }
.role-tab-count {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: var(--overlay-med); font-size: 0.74rem; font-weight: 600;
}
.role-tab.active .role-tab-count { background: rgba(214,43,43,0.18); color: var(--accent); }
#role-search {
  flex: 0 1 280px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  padding: 8px 12px; font-size: 0.88rem; font-family: inherit;
}
#role-search:focus { border-color: var(--accent); outline: none; }

/* Roles row table — replaces the old card grid */
.role-table { width: 100%; border-collapse: collapse; }
.role-table th, .role-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.role-table th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 600;
}
/* Needs to out-specify `.role-table th, .role-table td { text-align: left }`
   above — as a bare class it never applied, so these columns have always
   rendered left-aligned. Matters now that there are two count columns
   side by side: ragged digits make 235 and 88 hard to compare at a glance. */
.role-table th.role-table-num,
.role-table td.role-table-num { text-align: right; font-variant-numeric: tabular-nums; }
.role-row { cursor: pointer; transition: background 0.1s; }
.role-row:hover { background: var(--overlay-weak); }
.role-row-title { font-weight: 600; }
.role-row-checks { font-family: ui-monospace, monospace; color: var(--muted); white-space: nowrap; }
.role-row-closed { opacity: 0.55; }
.role-row-closed .role-row-title { text-decoration: line-through; }
.role-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.74rem; font-weight: 600;
  background: var(--overlay-med); color: var(--muted); border: 1px solid var(--border);
}
.role-tag-mass { background: #5e2a8a; color: #fff; border-color: #5e2a8a; }

.back-link {
  color: var(--info);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* ── Wizard stepper ── */
.wizard-stepper {
  display: flex;
  align-items: center;
  padding: 20px 24px 4px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 0;
  overflow-x: auto;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  flex: 1;
}
.ws-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--muted);
  transition: all 0.2s;
}
.ws-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s;
}
.ws-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-bottom: 22px;
  min-width: 20px;
  transition: background 0.2s;
}

/* done */
.ws-done .ws-bubble {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.ws-done .ws-label { color: var(--success); }

/* active (current step) */
.ws-active .ws-bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(214,43,43,0.2);
  animation: stepPulse 2s ease-in-out infinite;
}
.ws-active .ws-label { color: var(--text); font-weight: 600; }

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214,43,43,0.2); }
  50%       { box-shadow: 0 0 0 7px rgba(214,43,43,0.08); }
}

/* locked */
.ws-locked .ws-bubble { opacity: 0.35; }
.ws-locked .ws-label  { opacity: 0.35; }

/* n/a — step does not apply to this role's process_type (e.g. JD/HM/match
   are not applicable for walk-in roles). Renders dimmed with a small
   "N/A" label inside the bubble so the recruiter sees that we
   deliberately skipped the step rather than thinking it's pending. */
.ws-na .ws-bubble {
  opacity: 0.5;
  background: transparent;
  border-style: dashed;
  font-size: 0.65rem;
}
.ws-na .ws-label { opacity: 0.5; font-style: italic; }

/* connector tinted when previous step is done */
.ws-done + .ws-connector { background: var(--success); opacity: 0.5; }

/* ── Next-action banner ── */
.wizard-banner {
  max-width: 1280px;
  margin: 12px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(214,43,43,0.07);
  border: 1px solid rgba(214,43,43,0.25);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 0.88rem;
  color: var(--text);
}
.wizard-banner.hidden { display: none; }

/* ── System status strip (deep health banner) ── */
.status-strip {
  max-width: 1280px;
  margin: 12px auto 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.status-strip.hidden { display: none; }
.status-strip-heading { font-weight: 600; margin-bottom: 6px; }
.status-strip-list { margin: 0; padding-left: 18px; }
.status-strip-list li { margin: 2px 0; }
.status-strip-warning {
  background: rgba(220, 160, 0, 0.10);
  border-color: rgba(220, 160, 0, 0.45);
  color: #f0c060;
}
.status-strip-critical {
  background: rgba(214, 43, 43, 0.12);
  border-color: rgba(214, 43, 43, 0.5);
  color: #ff8585;
}

/* ── Analytics dashboard ── */
.role-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.analytics-role-tile {
  text-align: left;
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s;
}
.analytics-role-tile:hover { border-color: var(--primary, #d62b2b); }
.analytics-role-tile.active { border-color: var(--primary, #d62b2b); background: rgba(214,43,43,0.06); }
.analytics-role-title { font-weight: 600; margin-bottom: 4px; }
.analytics-role-meta { font-size: 0.82rem; color: var(--text-muted, #888); }
.pill-mass { background: #5e2a8a; color: #fff; font-size: 0.7rem; padding: 1px 6px; border-radius: 6px; margin-left: 6px; }

.analytics-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.stat-tile {
  background: var(--surface-2, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.stat-tile-label { font-size: 0.78rem; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-tile-value { font-size: 1.6rem; font-weight: 700; margin: 4px 0; }
.stat-tile-of { font-size: 0.85rem; color: var(--text-muted, #888); margin-left: 2px; }
.stat-tile-sub { font-size: 0.78rem; color: var(--text-muted, #888); }
.stat-warn { color: #ff8585; }

.rec-bars { display: flex; flex-direction: column; gap: 6px; max-width: 600px; }
.rec-bar-row { display: grid; grid-template-columns: 100px 1fr 40px; align-items: center; gap: 10px; font-size: 0.9rem; }
.rec-bar-track { height: 16px; background: var(--overlay-med); border-radius: 8px; overflow: hidden; }
.rec-bar-fill { height: 100%; border-radius: 8px; transition: width 0.3s; }
.rec-bar-fill.rec-strong-yes { background: #2eb86b; }
.rec-bar-fill.rec-yes { background: #6ec96e; }
.rec-bar-fill.rec-maybe { background: #d8b242; }
.rec-bar-fill.rec-no { background: #d8624a; }
.rec-bar-fill.rec-strong-no { background: #b73d2a; }
.rec-bar-count { text-align: right; color: var(--text-muted, #888); }

.narrative-panel {
  background: rgba(46, 184, 107, 0.06);
  border: 1px solid rgba(46, 184, 107, 0.25);
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.focus-list { margin: 0 0 0 18px; }
.focus-list li { margin: 4px 0; font-size: 0.92rem; line-height: 1.45; }

.analytics-dim-table { width: 100%; border-collapse: collapse; }
.analytics-dim-table th, .analytics-dim-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.analytics-dim-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #888); }
.gap-high { color: #9affb4; }
.gap-mid { color: #ddd; }
.gap-neg { color: #ffb7b7; }
.redflag-chip {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 6px;
  background: rgba(214, 43, 43, 0.15);
  border: 1px solid rgba(214, 43, 43, 0.35);
  border-radius: 6px;
  margin: 1px 2px;
  color: #ff8e8e;
}

/* ── Analytics sync banner ── */
.analytics-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(220, 160, 0, 0.10);
  border: 1px solid rgba(220, 160, 0, 0.45);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}
.analytics-cache-strip {
  font-size: 0.82rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.btn-sm { padding: 4px 10px; font-size: 0.82rem; }

/* ── Panayam brand logo ── */
.hero-logo-img {
  max-width: 860px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* No border-radius or shadow — the SVG bg color matches the hero so the
     logo melts into the band instead of floating as a card. */
}

/* ── Hero CTA row: New position on the left, secondary actions on the right ── */
.hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1100px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.hero-cta-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* All three hero buttons share the same footprint so the row reads as a
   single typographic line, not "one big button + two small links". */
.hero-cta,
.hero-cta-primary {
  font-size: 1rem;
  font-weight: 600;
  padding: 10px 22px;
  letter-spacing: 0.2px;
}
.hero-cta-primary {
  box-shadow: 0 4px 14px rgba(219, 0, 17, 0.30);
}
.hero-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(219, 0, 17, 0.40);
}

/* ---------------- Utilization page ---------------- */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.stat-tile-hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.stat-tile-ok   { border-color: rgba(46, 160, 67, 0.35); background: rgba(46, 160, 67, 0.06); }
.stat-tile-warn { border-color: rgba(210, 153, 34, 0.40); background: rgba(210, 153, 34, 0.06); }
.stat-tile-bad  { border-color: rgba(248, 81, 73, 0.45); background: rgba(248, 81, 73, 0.06); }

/* Calendar */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.78rem; color: var(--muted);
  margin-bottom: 14px;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}
.cal-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
}
.cal-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px;
  background: var(--overlay-weak);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 100px;
  font-size: 0.78rem;
}
.cal-cell.cal-past { opacity: 0.55; }
.cal-cell.cal-weekend { background: var(--overlay-weak); }
.cal-cell.cal-today {
  border-color: #DB0011;
  box-shadow: 0 0 0 1px rgba(219, 0, 17, 0.4);
}
.cal-date { display: flex; flex-direction: column; align-items: center; }
.cal-weekday { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; }
.cal-day { font-weight: 700; font-size: 0.95rem; }
.cal-bar-wrap {
  width: 16px;
  height: 50px;
  background: var(--overlay-med);
  border-radius: 3px;
  display: flex; align-items: flex-end;
  margin: 4px 0;
  overflow: hidden;
}
.cal-bar-fill {
  width: 100%;
  display: flex; flex-direction: column-reverse;
  transition: height 0.3s;
}
.cal-role-bar { width: 100%; }
.cal-count { font-weight: 600; }
.cal-util { font-size: 0.65rem; }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.funnel-row {
  display: grid;
  grid-template-columns: 160px 1fr 64px;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
}
.funnel-label { color: var(--text); }
.funnel-bar-wrap {
  height: 22px;
  background: var(--overlay-med);
  border-radius: 4px;
  overflow: hidden;
}
.funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, #4f9cf9, #5fd1c0);
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 8px;
  border-radius: 4px;
  white-space: nowrap;
  transition: width 0.3s;
}
.funnel-drop { font-size: 0.78rem; text-align: right; }

.util-funnel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.util-funnel-table th, .util-funnel-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.util-funnel-table th {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}
.util-funnel-table td { color: var(--text); }
.util-funnel-table tbody tr:hover { background: var(--overlay-weak); }

/* Architecture page — mermaid container. The background MUST be
   theme-aware: Mermaid can't read CSS variables, so architecture.html
   hands it an explicit palette per theme (dark text in day mode). A
   hard-coded dark panel here left that dark text sitting on near-black
   whenever the user flipped to day mode, which wiped out every edge
   label, cluster title and sequence-diagram caption. --diagram-bg
   flips with the theme so the panel always matches the palette
   Mermaid was initialised with. */
.arch-diagram {
  background: var(--diagram-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  margin-top: 6px;
  overflow-x: auto;
  text-align: center;
}
.arch-diagram svg {
  max-width: 100%;
  height: auto !important;
}

/* ============================================================ */
/* Light-theme overrides.
 *
 * Most of the app reads colour from the --bg / --text / --card / etc.
 * CSS variables which flip automatically when data-theme="light" is
 * set (see :root[data-theme="light"] near the top). But a handful of
 * status pills, toasts, health banners, and overlays use hard-coded
 * hex values that were tuned for dark backgrounds and read badly on
 * white (e.g. pale-green text on white). The block below patches
 * those specific cases without disturbing the dark default.
 * ============================================================ */
:root[data-theme="light"] {

  /* Status text colours — the dark theme uses neon greens / reds /
     ambers that punch through black; light mode needs deeper shades
     to keep ≥4.5:1 contrast on a near-white background. */
  & .active-sessions-badge.busy { color: #9a6700; }
  & .active-sessions-badge.full { color: #c92525; }
  & .toast.error { color: #c92525; }
  & .toast.success { color: #1a7f37; }
  & .toast-success { background: #dcffe4; color: #0f5132; border-color: rgba(26, 127, 55, 0.4); }
  & .toast-success::before { border-top-color: #1a7f37; }
  & .health-banner-bad { color: #c92525; background: rgba(214, 43, 43, 0.08); }
  & .dim-flags { color: #c92525; }
  & .stat-warn { color: #c92525; }
  & .gap-high { color: #1a7f37; }

  /* Match-strength badges: the colours are still semantically right
     but the background pills need to read on white. */
  & .match-badge.match-strong { background: #1a7f37; color: #fff; }
  & .match-badge.match-borderline { background: #9a6700; color: #fff; }
  & .match-badge.match-weak { background: #c92525; color: #fff; }
  & .sum-item-value.match-strong { color: #1a7f37; }
  & .sum-item-value.match-borderline { color: #9a6700; }
  & .sum-item-value.match-weak { color: #c92525; }

  /* Recommendation bars on candidate analytics keep their hue but go
     a shade darker for legibility on white. */
  & .rec-bar-fill.rec-strong-yes { background: #156c2c; }
  & .rec-bar-fill.rec-yes { background: #2ea043; }
  & .rec-bar-fill.rec-maybe { background: #b58413; }
  & .rec-bar-fill.rec-no { background: #c92525; }
  & .rec-bar-fill.rec-strong-no { background: #8b1d1d; }

  /* Subtle surface overlays that use rgba-white are invisible on
     white; flip to rgba-black at the same alpha. */
  & .role-toptab-row,
  & .release-modal-versions,
  & .role-summary-overlay {
    background: rgba(0, 0, 0, 0.03);
  }

  /* The "Parsing…" / loading-state buttons keep their red accent
     (it's the brand) but the text colour is still readable. The
     button itself is already var(--accent) which flips correctly. */

  /* Link colours inside modals — light mode wants the standard
     darker blue not the dark-mode-tuned pale blue. */
  & .release-modal-body a { color: #0969da; }
}

/* ==========================================================================
   Interview timestamps + review panel
   ========================================================================== */

/* Two-line timestamp cell (candidates table, positions table). Date over
   time keeps the column narrow enough not to push the actions column off a
   13" screen, which a single-line "23 Sep 2026, 3:41 PM" does. */
.interview-when {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.interview-when-date { font-size: 0.85rem; }
.interview-when-time { font-size: 0.78rem; color: var(--muted); }
.interview-when-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.interview-when-scheduled .interview-when-date,
.interview-when-scheduled .interview-when-time { color: var(--muted); }
.interview-when-cell { white-space: nowrap; }
.interview-when-pending { font-size: 0.82rem; }

/* Sortable headers on the positions table. */
.role-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.role-th-sortable:hover { color: var(--text); }
.role-th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.role-th-active { color: var(--text); }
.role-th-arrow { font-size: 0.6rem; margin-left: 4px; opacity: 0.8; }
.role-row-last-interview { white-space: nowrap; }

/* Interview date sits alongside composite / rank / recommendation on the
   scorecard header; it needs more room than the numeric items. */
.sum-item-when .sum-item-value { font-size: 0.88rem; font-weight: 500; }

/* ---- "What moved this score" — per-dimension observations ---- */
.dim-obs-block {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.dim-obs-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 6px;
}
.dim-obs-head .muted { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.dim-obs-list { list-style: none; margin: 0; padding: 0; }
.dim-obs {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 5px;
  /* Severity reads off the left edge, so a reviewer scanning a dimension
     sees how hard each moment hit before reading a word of it. */
  border-left: 3px solid var(--border);
  background: var(--overlay-weak);
}
.dim-obs-lowered.sev-high   { border-left-color: var(--accent); }
.dim-obs-lowered.sev-medium { border-left-color: var(--warning); }
.dim-obs-lowered.sev-low    { border-left-color: var(--muted); }
.dim-obs-raised             { border-left-color: var(--success); }
.dim-obs-stamp {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--info);
  cursor: pointer;
}
.dim-obs-stamp:hover { border-color: var(--info); }
.dim-obs-stamp-dead { color: var(--muted); cursor: default; }
.dim-obs-body { display: flex; flex-direction: column; gap: 2px; }
.dim-obs-quote { font-style: italic; font-size: 0.84rem; }
.dim-obs-note { font-size: 0.82rem; color: var(--muted); }

.btn-review-open { font-weight: 600; }
.review-open-count {
  margin-left: 4px;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--accent);
  border: 1px solid rgba(214, 43, 43, 0.35);
  background: rgba(214, 43, 43, 0.08);
}

/* ---- Review panel ---- */
.modal-panel-review { max-width: 1180px; }
.review-body { min-height: 200px; }
.review-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--border); font-size: 0.85rem; }

/* Player and flagged moments on the left, transcript on the right. The
   transcript scrolls independently so the player stays put while a reviewer
   reads down the call. */
.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.review-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review-right { display: flex; flex-direction: column; min-width: 0; }
.review-player {
  width: 100%;
  max-height: 46vh;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #000;
}
.review-no-recording {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 0.86rem;
}

/* Marker rail: the call's flagged moments laid out along its length, so the
   shape of a bad interview is visible before anything is played. */
.review-rail-wrap { margin-top: -4px; }
.review-rail {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--overlay-weak);
  border: 1px solid var(--border);
}
.review-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid var(--card);
  padding: 0;
  cursor: pointer;
}
.review-dot:hover { transform: translateY(-50%) scale(1.35); }
.review-dot-high   { background: var(--accent); }
.review-dot-medium { background: var(--warning); }
.review-dot-low    { background: var(--muted); }
.review-dot-raised { background: var(--success); }
.review-rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}
.review-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.review-legend-item .review-dot { position: static; transform: none; margin: 0; width: 8px; height: 8px; cursor: default; }
.review-legend-item .review-dot:hover { transform: none; }

.review-h4 { margin: 0; font-size: 0.95rem; display: flex; align-items: baseline; gap: 8px; }
.review-h4-note { font-weight: 400; font-size: 0.78rem; }
.review-empty { font-size: 0.84rem; padding: 12px 0; }

.review-flagged { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.review-flagged-list { max-height: 26vh; overflow-y: auto; padding-right: 4px; }
.review-obs {
  padding: 7px 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--overlay-weak);
  cursor: pointer;
}
.review-obs[data-seek]:hover { background: var(--card-hover); }
.review-obs:not([data-seek]) { cursor: default; opacity: 0.75; }
.review-obs-lowered.sev-high   { border-left-color: var(--accent); }
.review-obs-lowered.sev-medium { border-left-color: var(--warning); }
.review-obs-lowered.sev-low    { border-left-color: var(--muted); }
.review-obs-raised             { border-left-color: var(--success); }
.review-obs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.review-obs-stamp {
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--info);
}
.review-obs-stamp-dead { color: var(--muted); }
.review-obs-dim { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.review-obs-score {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.review-obs-quote { margin: 0; font-style: italic; font-size: 0.84rem; border: 0; padding: 0; }
.review-obs-note { margin: 3px 0 0; font-size: 0.82rem; color: var(--muted); }

.review-transcript-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
}
.review-toggle input:disabled + * ,
.review-toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }

.review-turns {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.review-turn {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.review-turn:last-child { border-bottom: 0; }
.review-turn[data-seek]:hover { background: var(--card-hover); }
.review-turn:not([data-seek]) { cursor: default; }
.review-turn-maria { background: var(--overlay-weak); }
/* The turn currently being spoken. Deliberately louder than the flag
   colours — while the recording plays, "where am I" is the question the
   panel must answer first. */
.review-turn-active { border-left-color: var(--info); background: rgba(88, 166, 255, 0.10); }
.review-turn-lowered.sev-high   { border-left-color: var(--accent); }
.review-turn-lowered.sev-medium { border-left-color: var(--warning); }
.review-turn-lowered.sev-low    { border-left-color: var(--muted); }
.review-turn-raised             { border-left-color: var(--success); }
.review-turn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.review-turn-stamp {
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--info);
}
.review-turn-stamp-dead { color: var(--muted); }
.review-turn-speaker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.review-turn-maria .review-turn-speaker { color: var(--accent); }
.review-turn-flag {
  margin-left: auto;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: help;
}
.review-turn-text { line-height: 1.5; white-space: pre-wrap; font-size: 0.88rem; }

/* Below ~900px the two columns can't both hold their content, so the
   transcript drops under the player rather than squeezing both. */
@media (max-width: 900px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); }
  .review-player { max-height: 38vh; }
  .review-turns { max-height: 44vh; }
}

/* Visual-frame strip on the scorecard. The thumbnail opens the still; its
   caption seeks the recording, because frame timestamps are offsets into the
   same MP4 the review panel plays. */
.frame-thumb { display: inline-block; width: 120px; flex-shrink: 0; text-align: center; }
.frame-thumb img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.frame-caption, .frame-seek {
  display: block;
  width: 100%;
  margin-top: 3px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.frame-caption { color: var(--muted); }
.frame-seek {
  background: transparent;
  border: 0;
  padding: 2px 0;
  color: var(--info);
  cursor: pointer;
  font-weight: 600;
}
.frame-seek:hover { text-decoration: underline; }

/* A no-show still ran as a session — it carries a real date. The label keeps
   that date from reading as an ordinary completed interview, because the
   recruiter's next step differs (rebook, not review). */
.interview-when-noshow {
  display: block;
  color: var(--warning);
  font-weight: 600;
}

/* Sortable headers on the candidates table. The arrow is a fixed-width span
   that is empty until its column is active, so turning it on and off doesn't
   reflow the header row. */
.cand-th-sortable { cursor: pointer; user-select: none; }
.cand-th-sortable:hover { color: var(--text); }
.cand-th-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cand-th-active { color: var(--text); }
.cand-th-arrow {
  display: inline-block;
  width: 12px;
  margin-left: 4px;
  font-size: 0.6rem;
  opacity: 0.8;
}