/* Agent Feedback & Recruiting dashboard.
   Palette + component rules follow the project's dataviz skill:
   references/palette.md (validated default palette) and
   references/marks-and-anatomy.md (mark specs, labels, text-vs-mark color).
*/

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --page-plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --success-text: #006300;

  --series-1: #2a78d6; /* categorical slot 1 / sequential anchor, blue */

  /* Ordinal pipeline-stage ramp (light -> dark = early -> late), light mode */
  --stage-contacted: #86b6ef;
  --stage-replied: #5598e7;
  --stage-interested: #1c5cab;
  --stage-recruited: #0d366b;
  --stage-revisit-later: #898781;

  /* Score chip: single hue, light -> dark by magnitude (1..10) */
  --score-0: #cde2fb; --score-1: #b7d3f6; --score-2: #9ec5f4; --score-3: #86b6ef;
  --score-4: #6da7ec; --score-5: #5598e7; --score-6: #3987e5; --score-7: #2a78d6;
  --score-8: #1c5cab; --score-9: #0d366b;

  /* Likelihood-to-move tag: semantic red/yellow/green, not the blue ramp
     above - low/moderate/high here are a risk-style read (Courted.io),
     not an ordinal magnitude, so they get their own hues. */
  /* Darkened from the initial picks (#c0392b/#b8860b/#1e8449) - measured
     at <4.5:1 against their own 16%-tint badge background (WCAG AA text
     minimum), since color-mix(... 16%, transparent) over a near-white
     surface barely tints away from white. Verified >=4.5:1 after. */
  --likelihood-low: #b63629;
  --likelihood-moderate: #856108;
  --likelihood-high: #1a7440;

  /* Status colors (good/warning/serious): reserved, never reused for
     categorical or sequential encodings above - see the likelihood tag
     and match-certainty badge, which each already have their own fixed
     hues for the same reason. Darkened from #b45309 for the same
     contrast reason as the likelihood tags above. */
  --status-warning: #a64d08;

  /* Recruiting-notes author badges: a fixed categorical hue per dashboard
     account (bill/angeleena/dominick/zach), in ACCOUNTS order from
     create_supabase_users.py - identity, not magnitude, so no ordinal
     relationship between them. Darkened for the same reason as the
     likelihood tags above (16%-tint badge background, WCAG AA text
     minimum, >=4.5:1 verified). The author's own name text is always
     shown alongside the badge, so color is never the only way to tell
     authors apart. */
  --author-bill: #1f63bf;
  --author-angeleena: #c2362f;
  --author-dominick: #0f7a3d;
  --author-zach: #5b3fae;

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --surface-2: #202020;
    --page-plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --success-text: #0ca30c;

    --series-1: #3987e5;

    --stage-contacted: #9ec5f4;
    --stage-replied: #6da7ec;
    --stage-interested: #256abf;
    --stage-recruited: #184f95;
    --stage-revisit-later: #898781;

    /* Lightened from #e0685c - measured at <4.5:1 against its own
       16%-tint badge background (WCAG AA text minimum). */
    --likelihood-low: #e57f74;
    --likelihood-moderate: #d9a83e;
    --likelihood-high: #3fae72;

    --status-warning: #f0a04b;

    --author-bill: #5590de;
    --author-angeleena: #d9635c;
    --author-dominick: #3cb376;
    --author-zach: #9686e0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --surface-2: #202020;
  --page-plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --success-text: #0ca30c;

  --series-1: #3987e5;

  --stage-contacted: #9ec5f4;
  --stage-replied: #6da7ec;
  --stage-interested: #256abf;
  --stage-recruited: #184f95;
  --stage-revisit-later: #898781;

  --likelihood-low: #e57f74;
  --likelihood-moderate: #d9a83e;
  --likelihood-high: #3fae72;

  --status-warning: #f0a04b;

  --author-bill: #5590de;
  --author-angeleena: #d9635c;
  --author-dominick: #3cb376;
  --author-zach: #9686e0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--page-plane);
  color: var(--text-primary);
}

a { color: inherit; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}

.topbar__brand { font-weight: 700; font-size: 15px; color: var(--series-1); }

.topbar__nav { display: flex; align-items: center; gap: 20px; }

.topbar__nav a {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-secondary);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.topbar__nav a:hover { color: var(--text-primary); }

.topbar__nav a.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--series-1);
}

.theme-toggle, .btn {
  font-family: var(--font-sans);
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.theme-toggle:hover, .btn:hover { background: var(--gridline); }

.btn-primary {
  background: var(--series-1);
  color: #ffffff;
  border-color: transparent;
}

.btn-primary:hover { opacity: 0.92; background: var(--series-1); }

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 28px;
}

/* Board view needs more horizontal room than the 1320px reading column -
   six Kanban columns squeezed into that width scroll internally even on a
   wide desktop with empty margins to spare. Applied only while Board is
   the active leads view (see initViewToggle in app.js); List/Table view
   keeps the standard 1320px column untouched. */
main.main--board-wide {
  max-width: 1800px;
}

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--border);
}
.flash-success { color: var(--success-text); }
.flash-error { color: var(--text-primary); }

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}

.stat-tile {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-top: 3px solid var(--series-1);
  border-radius: 10px;
  padding: 18px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.stat-tile:hover {
  border-color: var(--series-1);
  background: var(--gridline);
}

.stat-tile__label {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.stat-tile__value {
  font-size: 32px;
  font-weight: 600;
  font-variant-numeric: proportional-nums;
  margin: 0;
}

.stat-tile__value--muted { color: var(--text-muted); font-size: 22px; }

/* Card / chart container */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 28px;
}

.card__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.card__subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

/* Score trend chart */
.chart-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px 0;
  text-align: center;
}

.trend-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 0.08s ease;
  white-space: nowrap;
}

/* Leads table */
/* Lets the table scroll horizontally on its own on narrow screens
   instead of squeezing columns or breaking the page's own width. */
.table-scroll { overflow-x: auto; }

table.leads {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* Fixed, deliberate column widths instead of the browser's arbitrary
   auto-sizing (which left gaps uneven depending on what happened to be
   in each row). Name carries the most content (the agent's name plus
   the Courted subline) so it keeps more room; the rest split the
   remainder evenly rather than shrink-wrapping to their own content. */
table.leads th:nth-child(1), table.leads td:nth-child(1) { width: 32px; }
table.leads th:nth-child(2), table.leads td:nth-child(2) { width: 29%; }
table.leads th:nth-child(3), table.leads td:nth-child(3) { width: 16.5%; }
table.leads th:nth-child(4), table.leads td:nth-child(4) { width: 12%; }
table.leads th:nth-child(5), table.leads td:nth-child(5) { width: 12%; }
table.leads th:nth-child(6), table.leads td:nth-child(6) { width: 12%; }
table.leads th:nth-child(7), table.leads td:nth-child(7) { width: 12.5%; }

.col-check { padding-right: 0 !important; cursor: default !important; }

table.leads th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--gridline);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

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

table.leads th .sort-arrow { font-size: 10px; margin-left: 3px; color: var(--text-muted); }

/* Real tabs, not pills: rectangular with rounded top corners, sitting on
   a shared baseline that the active tab visually "erases" so it reads
   as flush with the table surface below - the same surface/page-plane
   pairing the rest of the app already uses for layering. */
.leads-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.leads-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.leads-search {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  min-width: 220px;
}

.leads-search:focus {
  outline: none;
  border-color: var(--series-1);
}

.stage-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 3px;
  margin: 0 0 16px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--gridline);
  scrollbar-width: thin;
  flex: 1 1 auto;
}

.stage-tab {
  flex: none;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  border: 1px solid var(--gridline);
  border-bottom: none;
  background: var(--page-plane);
  color: var(--text-secondary);
  border-radius: 10px 10px 0 0;
  padding: 8px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.1s ease, color 0.1s ease;
}

.stage-tab:hover { background: var(--gridline); color: var(--text-primary); }

.stage-tab.is-active {
  background: var(--surface-1);
  border-color: var(--gridline);
  border-top: 2px solid var(--series-1);
  border-bottom: 1px solid var(--surface-1);
  padding-top: 7px;
  color: var(--text-primary);
  font-weight: 600;
}

.stage-tab__count { opacity: 0.7; margin-left: 3px; }
.stage-tab.is-active .stage-tab__count { opacity: 0.85; }

/* List/Board view toggle (2026-09-18) - two plain buttons, active state
   mirrors .stage-tab.is-active's weight/color rather than introducing a
   new active-state convention. */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--surface-2);
}
.view-toggle__btn {
  font-family: var(--font-sans);
  font-size: 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
}
.view-toggle__btn:hover { color: var(--text-primary); }
.view-toggle__btn.is-active {
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Kanban board (2026-09-18) - second, switchable view of the same leads
   data the table already rendered; see dashboard.html/app.js. Columns
   scroll horizontally as a row; each column's card list scrolls
   vertically on its own so the column headers stay put. */
.kanban-board__columns {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: 4px;
}

.kanban-status {
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--likelihood-low) 14%, transparent);
  color: var(--likelihood-low);
  font-size: 12px;
}

.kanban-column {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 8px;
}

.kanban-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--gridline);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.kanban-column__count { opacity: 0.7; font-weight: 500; }

.kanban-column__cards {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
}
.kanban-column__cards.is-dragover {
  background: color-mix(in srgb, var(--series-1) 10%, transparent);
  outline: 2px dashed var(--series-1);
  outline-offset: -4px;
}

.kanban-column__empty {
  font-size: 12px;
  margin: 4px 0;
}

.kanban-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  cursor: grab;
  scroll-margin-top: 80px;
}
.kanban-card.is-dragging { opacity: 0.4; }

.kanban-card__name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
}
.kanban-card__brokerage {
  margin: 2px 0 6px;
  font-size: 11px;
}
.kanban-card .stuck-flag { margin-left: 0; margin-top: 4px; }
.kanban-card .tag-cell { margin-top: 6px; }

table.leads td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: middle;
}

table.leads tbody tr:hover { background: var(--gridline); }

table.leads a.row-link {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
}

table.leads tbody tr {
  scroll-margin-top: 80px;
}

table.leads tbody tr.row-return-highlight,
.kanban-card.row-return-highlight {
  animation: row-return-flash 2s ease-out;
}

@keyframes row-return-flash {
  0% { background: transparent; }
  22% { background: color-mix(in srgb, var(--series-1) 28%, transparent); }
  100% { background: transparent; }
}

.lead-subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.likelihood-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--gridline);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: default;
}
a.likelihood-tag {
  cursor: pointer;
}
a.likelihood-tag:hover {
  filter: brightness(0.92);
  text-decoration: none;
}
.likelihood-high { background: color-mix(in srgb, var(--likelihood-high) 16%, transparent); color: var(--likelihood-high); }
.likelihood-moderate { background: color-mix(in srgb, var(--likelihood-moderate) 16%, transparent); color: var(--likelihood-moderate); }
.likelihood-low { background: color-mix(in srgb, var(--likelihood-low) 16%, transparent); color: var(--likelihood-low); }

.no-courted-data {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--likelihood-low) 16%, transparent);
  color: var(--likelihood-low);
}

.production-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--series-1) 16%, transparent);
  color: var(--series-1);
}

/* Match Certainty: a small solid status dot (same shape at every tier -
   see .match-certainty__ring's own comment for why a partial-fill
   "meter" was dropped) plus a label, click-to-reveal an explanation.
   Status colors (good/warning/serious) are fixed - never themed,
   deliberately distinct from the likelihood-tag red/yellow/green above
   so the two indicators are never confusable at a glance even though
   both can appear right next to each other. */
.match-certainty-wrap { position: relative; display: inline-block; }
.match-certainty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 10px 3px 6px;
  font: inherit;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.match-certainty:hover {
  background: var(--gridline);
  border-color: var(--mc-fill);
  color: var(--text-primary);
}
.match-certainty[aria-expanded="true"] {
  border-color: var(--mc-fill);
  color: var(--text-primary);
}
.match-certainty__ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Solid dot, same shape at every confidence level - the earlier
     conic-gradient "meter" (partial fill by percentage) rendered
     medium/unverified as a lopsided crescent instead of a clean circle,
     which read as inconsistent/broken next to the full green dot rather
     than as a graduated meter. Confidence is a category (high/medium/
     unverified), not a percentage, so a uniform dot + distinct color +
     label is the more honest shape anyway. */
  background: var(--mc-fill);
  box-shadow: inset 0 0 0 2px var(--surface-2);
}
.match-certainty__label { white-space: nowrap; }
.match-certainty__detail {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: normal;
}
/* Small pointer triangle back to the badge - purely decorative, matches
   the popover's own surface/border so it reads as one continuous shape. */
.match-certainty__detail::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.match-certainty__detail[hidden] { display: none; }
.match-certainty__detail--flip { left: auto; right: 0; }
.match-certainty__detail--flip::before { left: auto; right: 14px; }

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

/* Pipeline stage badge: a full colored pill per stage. The stage name is
   always the actual text (never color-only), so this is a visual accent
   on top of an already-unambiguous label, not a replacement for one. */
.stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--gridline);
  color: var(--text-secondary);
}

.stuck-flag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--status-warning) 16%, transparent);
  color: var(--status-warning);
}

.delivery-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.delivery-badge--good { color: var(--success-text); }
.delivery-badge--bad { color: var(--likelihood-low); }

.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}
.bulk-action-bar[hidden] { display: none; }
.bulk-action-bar select {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.add-note-toggle {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.add-note-toggle:hover { color: var(--text-primary); text-decoration: underline; }

.inline-note { margin-top: 8px; max-width: 320px; }
.inline-note[hidden] { display: none; }
.inline-note__textarea {
  width: 100%;
  min-height: 60px;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  resize: vertical;
}
.inline-note__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.inline-note__status { font-size: 12px; margin: 6px 0 0; }

.add-detail-toggle {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.add-detail-toggle:hover { color: var(--text-primary); text-decoration: underline; }

.inline-detail { margin-top: 8px; max-width: 320px; }
.inline-detail[hidden] { display: none; }
.inline-detail__textarea {
  width: 100%;
  min-height: 60px;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  resize: vertical;
}
.inline-detail__actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.inline-detail__status { font-size: 12px; margin: 6px 0 0; }

/* Custom, reusable, colored recruiting-lead tags (2026-09-18). Colors are
   per-tag and dynamic (a hex string from tags.color), so .tag-pill and
   .tag-pick-btn get their color via an inline style attribute wherever
   they're rendered (see _macros.html tag_cell) rather than a fixed CSS
   class per color, unlike the static likelihood-tag/stage-badge palettes
   above. */
.tag-cell { margin-top: 6px; }
.tag-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: 6px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px 4px 10px;
  border-radius: 5px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-pill__remove {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.tag-pill__remove:hover { opacity: 1; }

.add-tag-toggle {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.add-tag-toggle:hover { color: var(--text-primary); text-decoration: underline; }

.inline-tag-picker { margin-top: 8px; max-width: 320px; }
.inline-tag-picker[hidden] { display: none; }
.inline-tag-picker__existing {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.tag-pick-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.inline-tag-picker__new {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.inline-tag-picker__name {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
  flex: 1 1 140px;
  min-width: 100px;
}
.inline-tag-picker__status { font-size: 12px; margin: 6px 0 0; flex-basis: 100%; }

.tag-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tag-color-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.tag-color-swatch.is-selected {
  border-color: var(--text-primary);
}

.tag-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.tag-filter-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid var(--tag-color, var(--gridline));
  background: none;
  color: var(--tag-color, var(--text-secondary));
  cursor: pointer;
}
.tag-filter-chip.is-active {
  background: color-mix(in srgb, var(--tag-color, var(--gridline)) 20%, transparent);
}

.stage-new { background: color-mix(in srgb, var(--baseline) 25%, transparent); color: var(--text-secondary); }
.stage-contacted { background: color-mix(in srgb, var(--stage-contacted) 20%, transparent); color: var(--stage-contacted); }
.stage-replied { background: color-mix(in srgb, var(--stage-replied) 20%, transparent); color: var(--stage-replied); }
.stage-interested { background: color-mix(in srgb, var(--stage-interested) 20%, transparent); color: var(--stage-interested); }
.stage-revisit-later { background: color-mix(in srgb, var(--stage-revisit-later) 20%, transparent); color: var(--stage-revisit-later); }
.stage-recruited { background: color-mix(in srgb, var(--stage-recruited) 20%, transparent); color: var(--stage-recruited); }

/* Score chip: sequential single-hue fill, light->dark by magnitude */
.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.score-chip--light { color: var(--text-primary); }
.score-chip--dark { color: #ffffff; }

.score-0 { background: var(--score-0); }
.score-1 { background: var(--score-1); }
.score-2 { background: var(--score-2); }
.score-3 { background: var(--score-3); }
.score-4 { background: var(--score-4); }
.score-5 { background: var(--score-5); }
.score-6 { background: var(--score-6); }
.score-7 { background: var(--score-7); }
.score-8 { background: var(--score-8); }
.score-9 { background: var(--score-9); }

/* Forms */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}
.field .hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-primary);
}

.field textarea { min-height: 90px; resize: vertical; }

.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field label { margin: 0; font-weight: 400; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.login-wrap {
  max-width: 340px;
  margin: 12vh auto 0;
  padding: 28px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.login-wrap h1 { font-size: 18px; margin: 0 0 20px; }

.closing-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.closing-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gridline);
}
.closing-list li:last-child { border-bottom: none; }

.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;
}

.note-log { list-style: none; padding: 0; margin: 16px 0 0; font-size: 13px; }
.note-log__entry { padding: 10px 0; border-bottom: 1px solid var(--gridline); }
.note-log__entry:last-child { border-bottom: none; }
.note-log__meta { margin: 0 0 4px; font-size: 12px; }
.note-log__text { margin: 0; white-space: pre-wrap; }

/* Recruiting-notes author badges - color is a secondary cue only, the
   author's name text (the badge's own content) is always visible, so
   an unrecognized/future username with no matching class below still
   renders fine, just unstyled. */
.author-badge { padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.author-bill { background: color-mix(in srgb, var(--author-bill) 16%, transparent); color: var(--author-bill); }
.author-angeleena { background: color-mix(in srgb, var(--author-angeleena) 16%, transparent); color: var(--author-angeleena); }
.author-dominick { background: color-mix(in srgb, var(--author-dominick) 16%, transparent); color: var(--author-dominick); }
.author-zach { background: color-mix(in srgb, var(--author-zach) 16%, transparent); color: var(--author-zach); }

.office-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.office-list__entry { padding: 2px 0; }
.office-list__name { margin: 0; font-weight: 600; }
.office-list__address { margin: 2px 0 0; color: var(--text-secondary); }

/* Responsive: width-based breakpoints (not a literal orientation query) -
   a phone in landscape and a small tablet in portrait can land at the
   same width, so sizing off width covers "orientation" in practice
   without a separate ruleset to keep in sync. */
@media (max-width: 720px) {
  main { padding: 16px; }
  .topbar { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
  .topbar__nav {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 14px;
    padding-bottom: 2px;
  }
  .topbar__nav a { white-space: nowrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .card { padding: 14px 16px; }
  .lead-subline { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-tile__value { font-size: 26px; }
  .login-wrap { margin: 6vh auto 0; padding: 22px; }
}

.footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 24px 20px 40px;
  font-size: 12px;
}
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--text-secondary); text-decoration: underline; }