/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ===========================================================================
   Samcruit Talent Partners — operations console
   Design tokens. Nothing below this block may hard-code a token value.
   =========================================================================== */
:root {
  /* ground + surface */
  --ground: #F5F7F8;
  --surface: #FFFFFF;
  --surface-sunken: #EDF0F2;
  --border: #DDE3E6;
  --border-strong: #C3CCD1;

  /* ink */
  --ink: #101A1C;
  --ink-muted: #5A686D;
  --ink-faint: #808E94;

  /* accent */
  --primary: #0E6B5C;
  --primary-hover: #0B564A;
  --primary-soft: #E4F0ED;
  --focus: #1D6FD0;

  /* semantic */
  --info: #1D5FBF;
  --success: #0E6B5C;
  --warning: #9A5B06;
  --danger: #B42318;
  --danger-hover: #8F1C13;
  --danger-soft: #FBE9E7;
  --info-soft: #E7EFFA;
  --warning-soft: #FBEFDC;
  --success-soft: #E4F0ED;

  /* pipeline stages: hue + soft tint + readable ink on that tint */
  --stage-new: #1D5FBF;
  --stage-new-soft: #E7EFFA;
  --stage-new-ink: #184F9E;
  --stage-screening: #9A5B06;
  --stage-screening-soft: #FBEFDC;
  --stage-screening-ink: #7E4A05;
  --stage-interview: #6B3FA0;
  --stage-interview-soft: #F0E9F8;
  --stage-interview-ink: #58338A;
  --stage-offer: #0E6B5C;
  --stage-offer-soft: #E4F0ED;
  --stage-offer-ink: #0B564A;
  --stage-rejected: #8A969B;
  --stage-rejected-soft: #EDF0F2;
  --stage-rejected-ink: #4E5C62;

  /* monogram tints, palette-derived, cycled deterministically t1…t5 */
  --tint-1-bg: #E4F0ED;  --tint-1-ink: #0B564A;
  --tint-2-bg: #E7EFFA;  --tint-2-ink: #184F9E;
  --tint-3-bg: #FBEFDC;  --tint-3-ink: #7E4A05;
  --tint-4-bg: #F0E9F8;  --tint-4-ink: #58338A;
  --tint-5-bg: #EDF0F2;  --tint-5-ink: #41525A;

  /* type */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-display: 34px;  --lh-display: 1.15;
  --fs-h1: 26px;       --lh-h1: 1.2;
  --fs-h2: 20px;       --lh-h2: 1.3;
  --fs-h3: 16px;       --lh-h3: 1.4;
  --fs-body: 16px;     --lh-body: 1.6;
  --fs-small: 14px;    --lh-small: 1.5;
  --fs-micro: 12px;    --lh-micro: 1.4;

  /* spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* radius */
  --r-card: 10px;
  --r-control: 8px;
  --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 1px 2px rgba(16, 26, 28, .06);
  --shadow-raised: 0 6px 20px rgba(16, 26, 28, .10);

  /* motion */
  --t-state: 150ms ease-out;
  --t-transition: 220ms ease-out;
  --t-exit: 150ms ease-in;
  --t-stagger: 40ms;

  /* shell */
  --sidebar-w: 240px;
}

/* ===========================================================================
   Reset + base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }

button { font: inherit; color: inherit; }

svg { flex: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ===========================================================================
   Type utilities
   =========================================================================== */
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -.01em; }
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -.01em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.micro,
.eyebrow {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }
.eyebrow { color: var(--ink-muted); }
.num { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   Skip link
   =========================================================================== */
.skip-link {
  position: absolute;
  left: var(--s-2);
  top: var(--s-2);
  z-index: 60;
  transform: translateY(-200%);
  display: block;
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-raised);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-state);
}
.skip-link:focus { transform: translateY(0); }

/* ===========================================================================
   APP SHELL — identical on every page
   <1024px: top brand bar + always-visible horizontal nav rail
   >=1024px: persistent 240px left sidebar
   =========================================================================== */
.app { display: block; min-height: 100%; }

.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand-bar {
  --od-gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.brand {
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-control);
}
.brand:hover { color: var(--ink); }
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand-sub {
  display: block;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav {
  --od-gap: var(--s-2);
  --od-rail-pad: var(--s-4);
  padding-block: 0 var(--s-3);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}

.nav-item {
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  color: var(--ink-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color var(--t-state), color var(--t-state);
}
.nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
.nav-label { display: block; white-space: nowrap; }
.nav-item[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 0 var(--primary);
}
.nav-item[aria-current="page"] svg { color: var(--primary); }
.nav-item[aria-disabled="true"] {
  color: var(--ink-faint);
  cursor: default;
}
.nav-item[aria-disabled="true"]:hover { background: transparent; color: var(--ink-faint); }

.consultant {
  display: none;
  --od-gap: var(--s-3);
  margin-top: auto;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
}
.consultant-name { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.consultant-role {
  display: block;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* main region */
.shell-main { display: block; min-width: 0; }

.topbar {
  --od-gap: var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--s-3) var(--s-4);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -.01em;
}
.topbar-actions { --od-gap: var(--s-2); }

.content { padding: var(--s-4) var(--s-4) var(--s-12); }
.content-inner { --od-gap: var(--s-6); display: flex; flex-direction: column; max-width: 1240px; }

@media (min-width: 768px) {
  .content { padding: var(--s-6) var(--s-6) var(--s-16); }
  .topbar { padding: var(--s-3) var(--s-6); }
  .brand-bar { padding: var(--s-3) var(--s-6); }
  .nav { --od-rail-pad: var(--s-6); }
}

@media (min-width: 1024px) {
  body { overflow: hidden; }
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    height: 100dvh;
    min-height: 0;
  }
  .sidebar {
    position: static;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }
  .brand-bar { padding: var(--s-4); }
  .brand-me { display: none; }
  .consultant { display: flex; align-items: center; }
  .nav {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-inline: var(--s-3);
    margin-inline: 0;
    scroll-snap-type: none;
  }
  .nav > :last-child { margin-inline-end: 0; }
  .nav-item { min-height: 40px; }
  .nav-item[aria-current="page"] { box-shadow: inset 3px 0 0 0 var(--primary); }
  .topbar { position: sticky; top: 0; z-index: 20; padding-inline: var(--s-8); }
  .content { padding: var(--s-8); padding-bottom: var(--s-16); }
}

/* ===========================================================================
   Buttons
   =========================================================================== */
.btn {
  --od-gap: var(--s-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-state), border-color var(--t-state), transform var(--t-state);
}
.btn:hover { color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--surface); }

.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--ink); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: var(--surface); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--ink); }
.btn-quiet:hover { background: var(--surface-sunken); color: var(--ink); }

.btn-icon {
  padding: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn-icon:hover { background: var(--surface-sunken); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  color: var(--primary);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-control);
}
.btn-link:hover { color: var(--primary-hover); text-decoration: underline; }

/* ===========================================================================
   Cards
   =========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-head {
  --od-gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.card-body { padding: var(--s-4); }
.card-body-flush { padding: 0; }
.card-foot {
  --od-gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.card-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.card-note { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }

.section-head { --od-gap: var(--s-3); margin-bottom: var(--s-3); }
.section-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }

/* ===========================================================================
   Chips, pills, badges
   =========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 28px;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

/* filter chip (button) */
button.chip { cursor: pointer; transition: background-color var(--t-state), border-color var(--t-state); }
button.chip:hover { background: var(--surface-sunken); color: var(--ink); }
button.chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-hover);
}
.chip-count { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
button.chip[aria-pressed="true"] .chip-count { color: var(--primary-hover); }

.chip-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}

.chip-stage { border-color: transparent; }
.chip-stage.is-new       { background: var(--stage-new-soft);       color: var(--stage-new-ink); }
.chip-stage.is-screening { background: var(--stage-screening-soft); color: var(--stage-screening-ink); }
.chip-stage.is-interview { background: var(--stage-interview-soft); color: var(--stage-interview-ink); }
.chip-stage.is-offer     { background: var(--stage-offer-soft);     color: var(--stage-offer-ink); }
.chip-stage.is-rejected  { background: var(--stage-rejected-soft);  color: var(--stage-rejected-ink); }

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 24px;
  padding: 0 var(--s-2);
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-status.is-open   { background: var(--success-soft); color: var(--primary-hover); }
.badge-status.is-paused { background: var(--warning-soft); color: var(--stage-screening-ink); }
.badge-status.is-closed { background: var(--surface-sunken); color: var(--stage-rejected-ink); }
.badge-status.is-draft  { background: var(--surface); color: var(--ink-muted); border-color: var(--border-strong); border-style: dashed; }

.pill-soft {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill-soft.is-warning { background: var(--warning-soft); color: var(--stage-screening-ink); }
.pill-soft.is-info { background: var(--info-soft); color: var(--stage-new-ink); }
.pill-soft.is-primary { background: var(--primary-soft); color: var(--primary-hover); }

/* ===========================================================================
   Monogram marks — people and client accounts (no photography anywhere)
   =========================================================================== */
.mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface-sunken);
  color: var(--ink);
  flex: none;
}
.mono-sm { width: 28px; height: 28px; font-size: 11px; }
.mono-md { width: 36px; height: 36px; font-size: 13px; }
.mono-lg { width: 48px; height: 48px; font-size: 17px; }
.mono.t1 { background: var(--tint-1-bg); color: var(--tint-1-ink); }
.mono.t2 { background: var(--tint-2-bg); color: var(--tint-2-ink); }
.mono.t3 { background: var(--tint-3-bg); color: var(--tint-3-ink); }
.mono.t4 { background: var(--tint-4-bg); color: var(--tint-4-ink); }
.mono.t5 { background: var(--tint-5-bg); color: var(--tint-5-ink); }
.mono-brand { background: var(--primary); color: var(--surface); }

/* ===========================================================================
   Stats / KPI
   =========================================================================== */
.kpi {
  display: block;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-state), box-shadow var(--t-transition), transform var(--t-transition);
}
.kpi:hover {
  color: var(--ink);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}
.od-stat { --od-gap: var(--s-1); }
.od-stat .stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.od-stat .stat-label { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.od-stat .stat-meta { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-faint); }

/* ===========================================================================
   Pipeline bar
   =========================================================================== */
.progress-pipeline {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-sunken);
}
.progress-pipeline > a {
  display: block;
  height: 100%;
  border-right: 2px solid var(--surface);
  transition: opacity var(--t-state);
}
.progress-pipeline > a:last-child { border-right: 0; }
.progress-pipeline > a:hover { opacity: .78; }
.progress-pipeline > a:focus-visible { outline-offset: -2px; }
.seg-new       { background: var(--stage-new); }
.seg-screening { background: var(--stage-screening); }
.seg-interview { background: var(--stage-interview); }
.seg-offer     { background: var(--stage-offer); }
.seg-rejected  { background: var(--stage-rejected); }

.legend-item {
  --od-gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  min-width: 112px;
}
.legend-head { --od-gap: var(--s-2); }
.legend-name { display: block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--ink); }
.legend-count {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dot-new       { color: var(--stage-new); }
.dot-screening { color: var(--stage-screening); }
.dot-interview { color: var(--stage-interview); }
.dot-offer     { color: var(--stage-offer); }
.dot-rejected  { color: var(--stage-rejected-ink); }

/* ===========================================================================
   Data rows (list inside a card) — whole row is one link
   =========================================================================== */
.row-link {
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--t-state);
}
.row-link:last-child { border-bottom: 0; }
.row-link:hover { background: var(--surface-sunken); color: var(--ink); }
.row-link:focus-visible { outline-offset: -2px; }
.row-title { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.row-sub { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.row-chevron { color: var(--ink-faint); }
.row-link:hover .row-chevron { color: var(--ink-muted); }

.list-divided > li { border-bottom: 1px solid var(--border); }
.list-divided > li:last-child { border-bottom: 0; }

/* ===========================================================================
   Table
   =========================================================================== */
.table-wrap { width: 100%; overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.table caption { text-align: left; }
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  text-align: left;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
}
.table tbody tr { transition: background-color var(--t-state); }
.table tbody tr:hover { background: var(--surface-sunken); }
.table tbody tr:hover td { color: var(--ink); }
.table .num, .table td.num, .table th.num { font-variant-numeric: tabular-nums; }
.table .col-num { text-align: right; }

.th-sort { padding: 0; }
.th-sort > button {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  min-height: 36px;
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.th-sort > button:hover { background: var(--border); color: var(--ink); }
.th-sort .sort-arrow { opacity: 0; transition: opacity var(--t-state); }
.th-sort[aria-sort] .sort-arrow { opacity: 1; }
.th-sort[aria-sort="descending"] .sort-arrow { transform: rotate(180deg); }

/* responsive: below 768px each row becomes a card, each cell labels itself */
@media (max-width: 767px) {
  .table-card .table-wrap { overflow-x: visible; }
  .table-card table,
  .table-card tbody,
  .table-card tr,
  .table-card td { display: block; width: 100%; }
  .table-card thead { display: none; }
  .table-card tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .table-card tbody td {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
  }
  .table-card tbody td:last-child { border-bottom: 0; }
  .table-card tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .table-card tbody td[data-label=""]::before,
  .table-card tbody td.no-label::before { content: none; }
  .table-card .col-num { text-align: left; }
}

/* ===========================================================================
   Forms
   =========================================================================== */
.field { --od-gap: var(--s-2); }
.field-label { display: block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--ink); }
.field-req { color: var(--danger); }
.field-help { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.field-error {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--danger);
  font-weight: 600;
}
.field-error:empty { display: none; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: border-color var(--t-state), box-shadow var(--t-state);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  outline: none;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.textarea { min-height: 104px; resize: vertical; }
.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image: linear-gradient(45deg, transparent 49%, var(--ink-muted) 50%, var(--ink-muted) 58%, transparent 59%),
                    linear-gradient(-45deg, transparent 49%, var(--ink-muted) 50%, var(--ink-muted) 58%, transparent 59%);
  background-size: 9px 9px, 9px 9px;
  background-position: calc(100% - 20px) 17px, calc(100% - 13px) 17px;
  background-repeat: no-repeat;
}
[aria-invalid="true"].input,
[aria-invalid="true"].select,
[aria-invalid="true"].textarea { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

.search-input {
  padding-left: var(--s-8);
  background-image: none;
}
.search-wrap { position: relative; display: block; }
.search-wrap .search-icon {
  position: absolute;
  left: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.checkbox, .radio {
  appearance: none;
  width: 18px; height: 18px;
  flex: none;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-state), border-color var(--t-state);
}
.radio { border-radius: var(--r-pill); }
.checkbox:hover, .radio:hover { border-color: var(--primary); }
.checkbox:checked, .radio:checked { background: var(--primary); border-color: var(--primary); }
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(40deg);
}
.radio:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
}
.checkbox:indeterminate { background: var(--primary); border-color: var(--primary); }
.checkbox:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px; top: 7px;
  width: 10px; height: 2px;
  background: var(--surface);
  transform: none;
  border: 0;
}
.check-row { --od-gap: var(--s-3); min-height: 44px; }
.check-label { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }

.switch {
  appearance: none;
  width: 40px; height: 24px;
  flex: none;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  border: 0;
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-state);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: transform var(--t-state);
}
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(16px); }

.error-summary {
  padding: var(--s-3) var(--s-4);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: var(--r-card);
}
.error-summary[hidden] { display: none; }
.error-summary-title { display: block; font-size: var(--fs-h3); font-weight: 600; color: var(--danger); font-family: var(--font-display); }
.error-summary ul { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.error-summary a { color: var(--danger); font-size: var(--fs-small); font-weight: 600; }

.fieldset { border: 0; padding: 0; margin: 0; }

/* ===========================================================================
   Empty state
   =========================================================================== */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-4);
  text-align: center;
}
.empty-state[hidden] { display: none; }
.empty-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-control);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.empty-title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }
.empty-body { display: block; max-width: 44ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }

/* ===========================================================================
   Skeleton
   =========================================================================== */
.skeleton {
  display: block;
  background: var(--surface-sunken);
  border-radius: var(--r-control);
  animation: od-pulse 1.4s ease-in-out infinite;
}
.skeleton-line { height: 12px; }
.skeleton-line.is-short { max-width: 40%; }
.skeleton-line.is-mid { max-width: 62%; }
.skeleton-mono { width: 36px; height: 36px; border-radius: var(--r-control); }
.skeleton-row { --od-gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.skeleton-row:last-child { border-bottom: 0; }
@keyframes od-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ===========================================================================
   Toast
   =========================================================================== */
.toast-region {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 80;
  display: grid;
  gap: var(--s-2);
  width: min(360px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  --od-gap: var(--s-3);
  display: flex;
  align-items: flex-start;
  pointer-events: auto;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--ink-muted);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--t-transition), opacity var(--t-transition);
}
.toast.is-in { transform: translateY(0); opacity: 1; }
.toast.is-out { transform: translateY(8px); opacity: 0; transition: transform var(--t-exit), opacity var(--t-exit); }
.toast-text { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); }
.toast.is-success { border-left-color: var(--success); }
.toast.is-success .toast-icon { color: var(--success); }
.toast.is-danger { border-left-color: var(--danger); }
.toast.is-danger .toast-icon { color: var(--danger); }
.toast-icon { color: var(--ink-muted); margin-top: 2px; }
.toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: var(--r-control);
  color: var(--ink-muted);
  cursor: pointer;
}
.toast-close:hover { background: var(--surface-sunken); color: var(--ink); }

/* ===========================================================================
   Dialog
   =========================================================================== */
.dialog {
  width: min(480px, calc(100vw - var(--s-8)));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-raised);
}
.dialog::backdrop { background: rgba(16, 26, 28, .44); }
.dialog[open] { animation: od-dialog-in var(--t-transition); }
@keyframes od-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dialog-head { --od-gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); }
.dialog-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.dialog-body { padding: var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.dialog-foot { --od-gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--s-2); }

/* ===========================================================================
   Bulk selection bar
   =========================================================================== */
.bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-raised);
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--t-transition), opacity var(--t-transition);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar.is-in { transform: translateY(0); opacity: 1; }
.bulk-count { display: block; font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Pagination
   =========================================================================== */
.pagination { --od-gap: var(--s-1); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); }
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--t-state), border-color var(--t-state);
}
.page-btn:hover { background: var(--surface-sunken); color: var(--ink); }
.page-btn[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }
.page-btn[disabled] { color: var(--ink-faint); cursor: not-allowed; background: var(--surface); }

/* ===========================================================================
   Timeline
   =========================================================================== */
.timeline { display: grid; gap: var(--s-4); }
.timeline > li {
  position: relative;
  padding-left: var(--s-6);
}
.timeline > li::before {
  content: "";
  position: absolute;
  left: 3px; top: 6px;
  width: 10px; height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 2px solid var(--primary);
}
.timeline > li::after {
  content: "";
  position: absolute;
  left: 7px; top: 20px;
  bottom: calc(-1 * var(--s-4));
  width: 2px;
  background: var(--border);
}
.timeline > li:last-child::after { display: none; }
.timeline-time { display: block; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.timeline-title { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.timeline-body { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }

/* ===========================================================================
   Stage board (5 columns) — used by the role detail screen
   =========================================================================== */
.stage-board {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(5, minmax(220px, 1fr));
}
.stage-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.stage-col-head {
  --od-gap: var(--s-2);
  display: flex;
  align-items: center;
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.stage-col-name { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.stage-col-count {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stage-col-body {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.stage-col.is-new       { box-shadow: inset 0 3px 0 0 var(--stage-new); }
.stage-col.is-screening { box-shadow: inset 0 3px 0 0 var(--stage-screening); }
.stage-col.is-interview { box-shadow: inset 0 3px 0 0 var(--stage-interview); }
.stage-col.is-offer     { box-shadow: inset 0 3px 0 0 var(--stage-offer); }
.stage-col.is-rejected  { box-shadow: inset 0 3px 0 0 var(--stage-rejected); }
.stage-card {
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-state), transform var(--t-transition);
}
.stage-card:hover { color: var(--ink); border-color: var(--border-strong); transform: translateY(-1px); }
@media (max-width: 1023px) {
  .stage-board { grid-template-columns: 1fr; }
  .stage-col-body { max-height: none; }
}

/* ===========================================================================
   Breadcrumb
   =========================================================================== */
.breadcrumb { --od-gap: var(--s-2); display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-small); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: var(--primary-hover); text-decoration: underline; }
.breadcrumb .is-current { color: var(--ink); font-weight: 600; }
.breadcrumb-sep { color: var(--ink-faint); }

/* ===========================================================================
   Multi-page grid composition
   The stat strip and the two-column grid are shared: the dashboard, the role
   detail and the applicant detail screens all build on them. Rules only the
   dashboard needs live in assets/consultant-dashboard.css.
   =========================================================================== */
.stat-strip { --od-cols: 1; --od-gap: var(--s-3); }
@media (min-width: 768px) { .stat-strip { --od-cols: 2; } }
@media (min-width: 1024px) { .stat-strip { --od-cols: 4; } }

.dash-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1280px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

.dash-col { display: grid; gap: var(--s-6); align-content: start; }

.reason-chip-wrap { --od-gap: var(--s-2); }

/* ===========================================================================
   Reduced motion — every transition and animation off
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .toast { transform: none; opacity: 1; }
  .bulk-bar { transform: none; opacity: 1; }
  .kpi:hover { transform: none; }
  .stage-card:hover { transform: none; }
}

/* ===========================================================================
   Composition refinements — shell main region + list row internals.
   These sit after the base rules on purpose: later declaration wins.
   =========================================================================== */
.shell-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* a legend entry pairs a dot with its stage name: redundant encoding of one
   piece of information, so the dot may share the name's line */
.legend-name { display: flex; align-items: center; gap: var(--s-2); }
.chip-dot { display: block; }

/* trailing column of a data row: stage chip over date, right-aligned */
.row-aside { --od-gap: var(--s-1); justify-items: end; text-align: right; }
.row-date { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* skeleton rows are sized to the real rows they stand in for, so the swap
   never shifts anything */
.skeleton-row { min-height: 71px; }
.skeleton-list { min-height: 355px; }
[data-skeleton-host] { min-height: 355px; }

/* ───────────────────────────────────────────────────────────────────────────
   Shared page composition
   Rules more than one page needs. Rules only one page needs live in
   assets/<page>.css, which loads after this sheet. Tokens only, no raw values.
   ─────────────────────────────────────────────────────────────────────────── */

/* Control resets: components the sheet styles as links, used here as buttons */
button.kpi { width: 100%; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; }
button.btn-link { padding: 0; background: transparent; border: 0; font-family: inherit; cursor: pointer; }

/* A row title rendered as a link keeps product colour, never browser defaults */
a.row-title { text-decoration: none; }
a.row-title:hover { color: var(--primary-hover); text-decoration: underline; }

/* A client (HR contact + organization) rendered as a link, same treatment */
.client-link { color: inherit; text-decoration: none; }
.client-link:hover { color: var(--primary-hover); text-decoration: underline; }
.client-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }

/* Stacked table cells, and the label/value fact clusters on the detail pages */
.cell-stack { --od-gap: var(--s-1); justify-items: start; }
.fact-cluster { --od-gap: var(--s-4); column-gap: var(--s-6); align-items: flex-start; }
.fact-cluster > .od-field { --od-gap: var(--s-1); }
.timeline .od-cell { --od-gap: var(--s-1); }

/* List wrappers, pagination, the stage menu inside the shared actions dialog */
.paginate-wrap { display: grid; gap: var(--s-4); }
.pagination[hidden] { display: none; }
.stage-options { display: grid; gap: var(--s-1); }
.empty-actions { --od-gap: var(--s-2); flex-wrap: wrap; justify-content: center; }

@media (max-width: 767px) {
  /* .table-card turns rows into blocks, which outranks the UA [hidden] rule */
  .table-card tbody tr[hidden] { display: none; }
}