/* Truffle WWPS Onboarding — Shared Stylesheet
   Aligned with the official Truffle UI Style Guide (index (1).html).
   ----------------------------------------------------------------- */

/* Gilroy — the brand display face (see Brand/README.md). */
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Primary Colors */
  --color-oxford-blue: #131A30;
  --color-electric-indigo: #7300E2;
  --color-veronica: #A123E7;
  --color-phlox: #DB00FF;
  --color-cyclamen: #FF6AA1;

  /* Secondary Colors */
  --color-lavender: #E5DEED;
  --color-platinum: #EAEAEA;
  --color-white: #FFFFFF;
  --color-sunset: #FFD899;
  --color-orange-peel: #FFA20D;

  /* Semantic — brand-kit values (Tailwind greens/reds retired) */
  --color-success: #1F9D6B;
  --color-warning: var(--color-orange-peel);
  --color-error: #E5484D;
  --color-info: var(--color-electric-indigo);

  /* AA-safe ink derivatives for text on light tints (11px pill text needs 4.5:1).
     Contrast on white: ink-green 5.4:1 · ink-amber 6.3:1 · ink-red 5.4:1. */
  --ink-green: #147A52;
  --ink-amber: #8A5400;
  --ink-red:   #C2373C;

  /* Canonical tint scale — never improvise opacities inline. */
  --tint-indigo-4:  rgba(115, 0, 226, 0.04);
  --tint-indigo-8:  rgba(115, 0, 226, 0.08);
  --tint-indigo-12: rgba(115, 0, 226, 0.12);
  --tint-veronica-10: rgba(161, 35, 231, 0.10);
  --tint-green-10:  rgba(31, 157, 107, 0.10);
  --tint-amber-14:  rgba(255, 162, 13, 0.14);
  --tint-red-10:    rgba(229, 72, 77, 0.10);
  --tint-oxford-6:  rgba(19, 26, 48, 0.06);

  /* Rating palette (dataviz-validated) — REVIEW data only, never skill levels. */
  --rating-1: #E8590C;
  --rating-2: #FFA20D;
  --rating-3: #CFC8DC;
  --rating-4: #B07CE8;
  --rating-5: #7300E2;

  /* Gradient: the 3-stop signature is the ONLY brand gradient, and it appears
     exactly once per layout in a declared slot (the shell spends its slot on
     the active nav pill). Everything else uses solid Electric Indigo. */
  --gradient-hero: linear-gradient(135deg, var(--color-cyclamen) 0%, var(--color-veronica) 55%, var(--color-electric-indigo) 100%);
  --gradient-primary: var(--gradient-hero); /* backcompat alias; 2-stop retired */

  /* Typography (official) */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Gilroy', 'Century Gothic', var(--font-primary);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.75rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  4rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Spacing (4px base) */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Brand corner rule: blocks/cards/inputs sharp-ish (8px max); buttons pill. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows — blue-tinted per the brand kit (black shadows retired). */
  --shadow-sm: 0 2px 6px rgba(19, 26, 48, 0.08);
  --shadow-md: 0 8px 24px rgba(19, 26, 48, 0.10);
  --shadow-lg: 0 16px 40px rgba(19, 26, 48, 0.14);
  --shadow-xl: 0 24px 56px rgba(19, 26, 48, 0.16);
  --shadow-glow: 0 12px 40px rgba(115, 0, 226, 0.28);

  /* Motion — brand easing. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 360ms var(--ease-out);

  /* Light theme (default) */
  --bg-primary: var(--color-white);
  --bg-secondary: #F7F5FA;             /* kit lavender-tint, one value portal-wide */
  --bg-tertiary: var(--color-platinum);
  --bg-dark-elevated: #1E2541;
  --fg-on-dark-muted: rgba(255, 255, 255, 0.72);
  --text-primary: var(--color-oxford-blue);
  --text-secondary: #4A5568;
  --text-muted: #5C6B84;
  --border-color: var(--color-platinum);
  --border-light: var(--color-platinum); /* was used on 4 pages but never defined */
  --border-mid: #D4CDDC;
  --fg-on-dark-label: rgba(255, 255, 255, 0.52);
  --border-soft: rgba(115, 0, 226, 0.12);

  --card-bg: #FFFFFF;                  /* translucency is not a brand motif */

  /* ---- Talent UI tokens (polish 2026-09) ---- */
  /* Spacing: the brand scale (Brand/colors_and_type.css --s-*) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  /* Control heights */
  --h-s: 34px; --h-m: 40px; --h-l: 48px; --h-touch: 44px;
  /* Lists and tables: one geometry, right-anchored, on every talent list */
  --cell-x: 16px;      /* horizontal padding of every list/table cell */
  --col-rank: 32px;    /* rank (#1) column */
  --col-faces: 136px;  /* board faces column */
  --col-st: 280px;     /* status column */
  --col-act: 168px;    /* action-button column (901–1140px: 120px) */
  --col-menu: 44px;    /* chevron / ⋯ / × column */
  --row-head: 36px; --row-group: 56px; --row-req: 60px; --row-person: 64px; --menu-item-h: 36px;
  /* Avatars */
  --av-s: 28px; --av-m: 36px; --av-l: 44px; --av-xl: 96px; --radius-av: 4px;
  /* Lines */
  --hairline: #F1F1F4;           /* in-list row separator (the board's --hairline-soft) */
  --border-input: #8B91A8;       /* inputs: 3.13:1 on white, WCAG 1.4.11 (E6 decided) */
  --dot-neutral: #8B91A8;        /* brand --fg-3 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, .brand-display, .nav-item, .kpi-value, .rank-num, .rank-pct {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
}

a { color: var(--color-electric-indigo); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-phlox); }

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 264px;
  background: var(--color-oxford-blue);
  color: var(--color-white);
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  box-shadow: 4px 0 24px rgba(19, 26, 48, 0.18);
  z-index: 100;
}

/* Sidebar stripe retired: the shell's single gradient slot is the active
   nav pill (gradient budget rule — one gradient hero per layout). */

/* .main-col holds the top bar + main content beside the fixed sidebar. */
.main-col {
  margin-left: 264px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 264px);
}
/* Safari ignores the standard scrollbar props. */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: var(--radius-full); }
html { scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: var(--radius-full); }
.sidebar::-webkit-scrollbar-button { display: none; height: 0; }
.matrix-wrap::-webkit-scrollbar, .matrix-scroll::-webkit-scrollbar, .trail::-webkit-scrollbar { height: 8px; }
.matrix-wrap::-webkit-scrollbar-thumb, .matrix-scroll::-webkit-scrollbar-thumb, .trail::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: var(--radius-full); }
.matrix-wrap::-webkit-scrollbar-button, .matrix-scroll::-webkit-scrollbar-button, .trail::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.matrix-wrap, .matrix-scroll, .trail { scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; }

.main-content {
  padding: var(--space-2xl) var(--space-3xl);
  flex: 1;
  width: 100%;
  max-width: 1240px;   /* composed, centred column on wide screens */
  margin-inline: auto;
}
@media (max-width: 900px) {
  /* Off-canvas sidebar: hamburger in the top bar toggles .sidebar-open on body. */
  .sidebar { transform: translateX(-100%); transition: transform var(--transition-base); }
  /* Off-canvas the drawer casts no shadow (it bled a grey strip down every phone page); open, it does. */
  .sidebar { box-shadow: none; }
  body.sidebar-open .sidebar { transform: none; box-shadow: 4px 0 24px rgba(19, 26, 48, 0.18); }
  .shell-scrim { display: none; position: fixed; inset: 0; background: rgba(19, 26, 48, 0.5); z-index: 95; }
  body.sidebar-open .shell-scrim { display: block; }
  .main-col { margin-left: 0; max-width: 100%; }
  body.sidebar-open { overflow: hidden; }
  .main-content { padding: var(--space-xl) var(--space-md); }
}

/* ---------- Icon rail (collapsible sidebar) ----------
   body.rail narrows the sidebar to a 72px rail of icon pills with tooltips;
   the shell toggles it and remembers the choice per browser ('ob-rail').
   Below 900px the off-canvas drawer wins and the rail rules are undone. */
.sidebar { transition: width 200ms var(--ease-out), padding 200ms var(--ease-out); }
.main-col { transition: margin-left 200ms var(--ease-out), max-width 200ms var(--ease-out); }
.rail-toggle {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: var(--font-semibold) 0.75rem var(--font-primary);
  padding: 7px 10px; border-radius: var(--radius-full); cursor: pointer;
}
.rail-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-white); }
.rail-toggle .ti { font-size: 16px; transition: transform 200ms var(--ease-out); }
.brand-marks { display: none; flex-direction: column; align-items: center; gap: 12px; margin: 4px auto 22px; }
.brand-marks .mark-truffle { width: 34px; height: 34px; display: block; }
.brand-marks .mark-wwps { width: 26px; height: 26px; display: block; border-radius: 50%; opacity: 0.9; }
.brand-marks::after { content: ''; width: 24px; height: 1px; background: rgba(255, 255, 255, 0.14); }
body.rail .sidebar { width: 72px; padding: var(--space-lg) 12px; }
body.rail .main-col { margin-left: 72px; max-width: calc(100vw - 72px); }
body.rail .brand-logos { display: none; }
body.rail .brand-marks { display: flex; }
body.rail .nav-zone { background: transparent; border-color: transparent; padding: 0; margin-top: 0; }
body.rail .nav-links, body.rail .nav-zone > ul { display: flex; flex-direction: column; align-items: center; }
body.rail .nav-zone-label, body.rail .nav-group-label, body.rail .sidebar-progress { display: none; }
body.rail .nav-item span:not(.nav-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.rail .nav-item { justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0 auto 4px; position: relative; overflow: visible; }
body.rail .nav-item .ti { font-size: 21px; width: auto; }
body.rail .nav-item .nav-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 20px; height: 20px; line-height: 20px; padding: 0 5px;
  font-size: 0.6875rem; font-weight: var(--font-bold);
  background: var(--color-cyclamen); color: var(--color-oxford-blue);
  box-shadow: 0 0 0 2px var(--color-oxford-blue);
  animation: none;
}
body.rail .nav-item::after {
  content: attr(data-label); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--color-oxford-blue); color: var(--color-white);
  font: var(--font-semibold) 0.75rem var(--font-primary); padding: 5px 9px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 120;
}
body.rail .nav-item:hover::after, body.rail .nav-item:focus-visible::after { opacity: 1; }
body.rail .rail-toggle { align-self: center; padding: 8px; }
body.rail .rail-toggle span { display: none; }
body.rail .rail-toggle .ti { transform: rotate(180deg); }
/* Short menus keep a caption under each icon in rail mode (desktop only). */
@media (min-width: 901px) {
  body.rail.rail-labels .sidebar { width: 88px; padding: var(--space-lg) 8px; }
  body.rail.rail-labels .main-col { margin-left: 88px; max-width: calc(100vw - 88px); }
  body.rail.rail-labels .nav-item { flex-direction: column; gap: 4px; width: 72px; height: auto; min-height: 58px; padding: 8px 2px; border-radius: 12px; margin: 0 auto 6px; }
  /* A two-word caption ("Hiring managers") wraps onto two centred lines inside the 72px pill. */
  body.rail.rail-labels .nav-item span:not(.nav-badge) { position: static; width: auto; height: auto; overflow: visible; clip: auto;
    font-size: 0.6875rem; font-weight: var(--font-semibold); line-height: 13px; letter-spacing: 0; white-space: normal; text-align: center; }
  body.rail.rail-labels .nav-item .nav-badge { top: 2px; right: 8px; }
  body.rail.rail-labels .nav-item::after { display: none; }
}
@media (max-width: 900px) {
  body.rail .sidebar { width: 264px; padding: var(--space-2xl) var(--space-lg); }
  body.rail .main-col { margin-left: 0; max-width: 100%; }
  body.rail .brand-logos { display: flex; }
  body.rail .brand-marks { display: none; }
  body.rail .nav-zone { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.07); padding: var(--space-sm); margin-top: var(--space-md); }
  body.rail .nav-links, body.rail .nav-zone > ul { display: block; }
  body.rail .nav-zone-label, body.rail .nav-group-label, body.rail .sidebar-progress { display: block; }
  body.rail .nav-item { justify-content: flex-start; width: auto; height: 40px; padding: 0 var(--space-md); margin: 0 0 var(--space-xs); }
  .sidebar .nav-item { min-height: 44px; }   /* drawer: phone-sized targets */
  body.rail .nav-item .ti { font-size: 20px; width: 20px; }
  body.rail .nav-item span:not(.nav-badge) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  body.rail .nav-item .nav-badge { position: static; min-width: 20px; height: 20px; font-size: 0.6875rem; font-weight: var(--font-semibold); padding: 0 7px; margin-left: auto; box-shadow: none; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
  body.rail .nav-item .nav-badge.attention, body.rail .nav-item .nav-badge.pop { background: var(--color-cyclamen); color: var(--color-oxford-blue); }
  body.rail .nav-item::after { display: none; }
  .rail-toggle { display: none; }
}

/* ---------- Sidebar brand & nav ---------- */
.brand-logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.brand-logos .sidebar-logo {
  width: 170px;
  height: auto;
  display: block;
}

.brand-partner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.625rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.brand-partner span { line-height: 1.6; }

.brand-partner img { max-width: 104px; display: block; }

.nav-links { list-style: none; }

/* Two bounded zones make the hiring pipeline vs the running engagement
   read as different places: NEW REQUESTS on top, ACTIVE PROJECTS below. */
.nav-zone {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: var(--space-sm);
  margin: var(--space-md) 0 0;
  list-style: none;
}
.nav-zone > ul { list-style: none; }
.nav-zone-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-dark-label);
  padding: 4px var(--space-md) 8px;
}
.nav-zone + li { margin-top: var(--space-md); }

.nav-group-label {
  margin: var(--space-md) 0 2px;
  padding: 0 var(--space-md);
  font-size: 0.625rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-dark-label);      /* 5.48:1 on Oxford (was .38 = 3.46:1) */
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-full);   /* interactive = pill */
  margin-bottom: var(--space-xs);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.72);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  font-family: var(--font-primary);
  letter-spacing: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}
.nav-item .ti { font-size: 20px; width: 20px; flex: none; text-align: center; }

.nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-white); }
.nav-item.active {
  background: var(--gradient-hero); /* the shell's one gradient slot */
  color: var(--color-white);
  font-weight: var(--font-semibold);
  box-shadow: 0 6px 20px rgba(115, 0, 226, 0.35);
}
.nav-item.active:hover { color: var(--color-white); }

.sidebar-progress {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-progress-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-on-dark-label);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
}

.sidebar-progress-item {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  margin-bottom: var(--space-md);
}

.sidebar-progress-item:hover { color: var(--color-white); }

.sidebar-progress-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: baseline;
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
}

.sidebar-progress-name { font-weight: var(--font-semibold); }
.sidebar-progress-count { color: rgba(255, 255, 255, 0.58); }
.sidebar-progress .progress-bar { height: 7px; background: rgba(255, 255, 255, 0.14); margin: 0; }

/* ---------- Page header ---------- */
.page-header { margin-bottom: var(--space-2xl); }
.page-header h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
/* Dense pages that stack meta under the title share one tight rhythm. */
.page-header--tight { margin-bottom: var(--space-lg); }
/* Long-form prose never runs past a readable measure inside wide cards. */
.stage-body p, .timeline-entry ul, .achieve { max-width: 80ch; }
.page-header p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  max-width: 760px;
}

.eyebrow {
  display: inline-block;
  color: var(--color-electric-indigo);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-xs);
  margin-bottom: var(--space-sm);
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card-grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Stage card ---------- */
.stage-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 6px solid var(--color-electric-indigo);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  transition: all var(--transition-base);
}
.stage-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* Phones: the action drops under the step so no-wrap S buttons never push the page sideways. */
@media (max-width: 640px) {
  .stage-card { grid-template-columns: 48px minmax(0, 1fr); }
  .stage-card > :last-child { grid-column: 1 / -1; justify-content: flex-start !important; }
}
.stage-card.is-complete { border-left-color: var(--color-success); background: rgba(34, 197, 94, 0.04); }
.stage-card.is-progress { border-left-color: var(--color-orange-peel); }

.stage-number {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-electric-indigo);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}
.stage-card.is-complete .stage-number { background: var(--color-success); }
.stage-card.is-progress .stage-number { background: var(--color-orange-peel); }

.stage-body h3 {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}
.stage-body p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

.stage-meta {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
}
.stage-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  font-family: var(--font-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }

.pill.complete  { background: rgba(34, 197, 94, 0.12); color: var(--color-success); }
.pill.complete::before  { background: var(--color-success); }
.pill.progress  { background: rgba(255, 162, 13, 0.14); color: var(--color-orange-peel); }
.pill.progress::before  { background: var(--color-orange-peel); }
.pill.pending   { background: rgba(113, 128, 150, 0.14); color: var(--text-muted); }
.pill.pending::before   { background: var(--text-muted); }
.pill.blocked   { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }
.pill.blocked::before   { background: var(--color-error); }

/* ---------- Progress bar ---------- */
.progress-bar {
  height: 10px;
  background: var(--color-lavender);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-sm) 0;
}
.progress-fill {
  height: 100%;
  background: var(--color-electric-indigo);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.4rem;
  /* Brand corner rule: buttons are the one fully-rounded element. */
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--color-electric-indigo);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(115, 0, 226, 0.25);
}
.btn-primary:hover {
  background: var(--color-electric-indigo);
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(161, 35, 231, 0.45);
  color: var(--color-white);
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-electric-indigo);
  border: 1.5px solid var(--color-electric-indigo);
}
.btn-secondary:hover { background: var(--color-lavender); color: var(--color-electric-indigo); }

.btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.nav-item:active, .account-btn:active, .menu-item:active, .topbar-burger:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.btn-ghost:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* .btn-sm is the S tier: see the talent ui components section. */

/* ---------- KPI tiles ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.kpi {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 4px solid var(--color-electric-indigo);
  box-shadow: var(--shadow-sm);
}
.kpi.alt  { border-top-color: var(--color-phlox); }
.kpi.warn { border-top-color: var(--color-orange-peel); }
.kpi.good { border-top-color: var(--color-success); }

.kpi-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
}
.kpi-value {
  font-size: var(--text-3xl);
  color: var(--text-primary);
  line-height: 1;
}
.kpi-value small {
  font-size: 0.5em;
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 2px;
}
.kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ---------- Matrix table ---------- */
.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.matrix th, .matrix td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-color);
}
.matrix th {
  background: var(--color-oxford-blue);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
}
.matrix tbody tr:hover { background: rgba(115, 0, 226, 0.03); }
.matrix .name-cell { font-weight: var(--font-semibold); color: var(--text-primary); }
.matrix .name-cell a { color: var(--text-primary); }
.matrix .name-cell a:hover { color: var(--color-electric-indigo); }
.matrix .role-tag { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-regular); margin-top: 0.15rem; }
.matrix .cell-check { text-align: center; cursor: pointer; }

.cell-state {
  display: inline-block;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  background: var(--color-white);
  transition: all var(--transition-fast);
  position: relative;
}
.cell-state.done   { background: var(--color-success); border-color: var(--color-success); color: var(--color-white); }
.cell-state.done::after  { content: ''; position: absolute; left: 50%; top: 46%; width: 0.42rem; height: 0.72rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.cell-state.partial { background: rgba(255, 162, 13, 0.2); border-color: var(--color-orange-peel); color: var(--color-orange-peel); }
.cell-state.partial::after { content: '•'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 0; }
.cell-state:hover { transform: scale(1.1); border-color: var(--color-electric-indigo); }

/* ---------- Leaderboard rows ---------- */
.rank-row {
  display: grid;
  grid-template-columns: 56px 1fr 220px 100px;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-base);
}
.rank-row:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.rank-row.gold   { border-left: 6px solid #FFD700; }
.rank-row.silver { border-left: 6px solid #C0C0C0; }
.rank-row.bronze { border-left: 6px solid #CD7F32; }
.rank-row.me     { background: linear-gradient(135deg, rgba(161, 35, 231, 0.08) 0%, rgba(255, 106, 161, 0.04) 100%); border-color: var(--color-veronica); }

.rank-num {
  font-size: var(--text-2xl);
  color: var(--color-veronica);
  text-align: center;
}
.rank-name { font-weight: var(--font-semibold); color: var(--text-primary); }
.rank-name small { display: block; color: var(--text-muted); font-weight: var(--font-regular); font-size: var(--text-xs); margin-top: 0.15rem; }
.rank-pct { text-align: right; font-size: var(--text-2xl); color: var(--color-electric-indigo); }

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-lavender);
  color: var(--color-electric-indigo);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}
.tag.wwps       { background: rgba(0, 135, 166, 0.12); color: #0087a6; }
.tag.truffle    { background: var(--color-lavender); color: var(--color-electric-indigo); }
.tag.consultant { background: rgba(255, 162, 13, 0.14); color: var(--color-orange-peel); }
.tag.internal   { background: rgba(34, 197, 94, 0.12); color: var(--color-success); }

/* ---------- Section title ---------- */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin: var(--space-xl) 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-semibold);
}
.section-title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--color-electric-indigo);
  border-radius: 2px;
}

/* ---------- Misc ---------- */
.empty-state {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-muted);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-color);
}

.demo-banner {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  background: var(--color-oxford-blue);
  color: var(--color-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  z-index: 999;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-primary);
}
.demo-banner a { color: var(--color-cyclamen); font-weight: var(--font-semibold); }

.task-list { list-style: none; padding-left: 0; }
.task-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
}
.task-item:last-child { border-bottom: none; }
.task-checkbox {
  width: 22px; height: 22px;
  border: 2px solid var(--color-electric-indigo);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  margin-top: 2px;
}
.task-checkbox:hover { box-shadow: 0 0 0 4px rgba(115, 0, 226, 0.08); }
.task-checkbox.done {
  background: var(--color-electric-indigo);
  border-color: transparent;
}
.task-checkbox.done::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-bold);
  font-size: 0.95rem;
}
.task-item .task-label { font-size: var(--text-base); color: var(--text-primary); }
.task-item.is-done .task-label { color: var(--text-muted); text-decoration: line-through; }

.alert-box {
  background: rgba(255, 162, 13, 0.08);
  border-left: 4px solid var(--color-orange-peel);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
  color: #92400e;
  font-size: var(--text-sm);
}
.alert-box.info {
  background: rgba(115, 0, 226, 0.06);
  border-left-color: var(--color-electric-indigo);
  color: var(--color-electric-indigo);
}

.action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--color-lavender);
  color: var(--color-electric-indigo);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin-right: var(--space-sm);
  margin-top: var(--space-xs);
}
.action-link:hover { background: var(--color-electric-indigo); color: var(--color-white); }

.task-image {
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  margin-top: var(--space-sm);
}

/* ---------- Status system ----------
   One vocabulary for every state in the portal. States map to seven roles in
   a single JS lookup (STATUS_ROLE in supabase-client.js); no page ever picks
   a color. All tint/ink pairs pass WCAG AA at pill-text size. */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-primary);
  font-size: 0.6875rem; font-weight: var(--font-semibold); line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-sm { height: 20px; padding: 0 9px; font-size: 0.625rem; }

.status.neutral { background: var(--tint-oxford-6);    color: #4A506B; }
.status.brand   { background: var(--tint-indigo-8);    color: var(--color-electric-indigo); }
.status.violet  { background: var(--tint-veronica-10); color: var(--color-veronica); }
.status.green   { background: var(--tint-green-10);    color: var(--ink-green); }
.status.amber   { background: var(--tint-amber-14);    color: var(--ink-amber); }
.status.red     { background: var(--tint-red-10);      color: var(--ink-red); }
.status.dark    { background: var(--color-oxford-blue); color: var(--color-white); }
.status.dark::before { background: var(--color-cyclamen); }
.status.on-dark { background: rgba(255, 255, 255, 0.10); color: var(--color-white); }

/* ---------- Focus (accessibility, both surfaces) ---------- */
:focus-visible { outline: 2px solid var(--color-electric-indigo); outline-offset: 2px; border-radius: 2px; }
.sidebar :focus-visible, .hero :focus-visible, .cv-hero :focus-visible {
  outline: 2px solid var(--color-cyclamen); outline-offset: 2px; /* EI is invisible on Oxford Blue */
}
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-electric-indigo); }

/* ---------- Motion standards ---------- */
.enter { opacity: 0; transform: translateY(8px); animation: enter-up var(--transition-slow) forwards; }
@keyframes enter-up { to { opacity: 1; transform: none; } }
.enter:nth-child(2) { animation-delay: 40ms; } .enter:nth-child(3) { animation-delay: 80ms; }
.enter:nth-child(4) { animation-delay: 120ms; } .enter:nth-child(5) { animation-delay: 160ms; }
.enter:nth-child(6) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Shell: top bar, badges, account menu ---------- */
.topbar {
  position: sticky; top: 0; z-index: 90;
  height: 56px; flex: none;
  display: flex; align-items: center; gap: var(--space-md);
  /* The crumb and the account menu sit on the content column's edges: the
     same 64px floor and 1240px centring as .main-content (16px at ≤900). */
  padding: 0 max(var(--space-3xl), calc((100% - 1240px) / 2 + var(--space-3xl)));
  background: var(--color-white);
  border-bottom: 1px solid var(--color-platinum);
}
.topbar-burger {
  display: none;
  width: 40px; height: 40px; flex: none; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-full);
  color: var(--text-primary); font-size: 22px;
  align-items: center; justify-content: center;
}
.topbar-burger:hover { background: var(--color-lavender); }
@media (max-width: 900px) { .topbar { padding: 0 var(--space-md); } .topbar-burger { display: inline-flex; } }
@media (max-width: 640px) { .topbar-burger { width: var(--h-touch); height: var(--h-touch); } }

.breadcrumb { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.8125rem; min-width: 0; }
.breadcrumb a { color: var(--text-secondary); font-weight: var(--font-medium); white-space: nowrap; }
.breadcrumb a:hover { color: var(--color-electric-indigo); }
.breadcrumb .sep { color: var(--text-muted); font-size: 14px; line-height: 1; }
/* The way back: an arrow to the page this one was reached from (phones use the ‹ crumb below instead). */
.breadcrumb .crumb-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 2px; border: 1px solid var(--color-platinum); border-radius: 999px; color: var(--text-primary); background: #fff; }
.breadcrumb .crumb-back:hover, .breadcrumb .crumb-back:focus-visible { color: var(--color-electric-indigo); border-color: var(--color-electric-indigo); }
.breadcrumb .crumb-back .ti { font-size: 16px; }
.breadcrumb .current { color: var(--color-oxford-blue); font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phones: a 44 × 44 tap area on crumb links (a short crumb like "Board" is ~37px of text) without moving the line. */
@media (max-width: 640px) { .breadcrumb a { line-height: 20px; padding-block: 12px; margin-block: -12px; padding-inline: 4px; margin-inline: -4px; } }
/* Phones: a trail would cut the page name to a letter (the h1 already says it), so it becomes one back link. */
@media (max-width: 640px) {
  .breadcrumb:has(a) :is(.current, .sep), .breadcrumb:has(a) a:not(:last-of-type):not(.crumb-back) { display: none; }
  .breadcrumb:has(.crumb-back) a:not(.crumb-back):last-of-type { margin-left: 4px; }
  .breadcrumb .crumb-back { width: 44px; height: 44px; margin: -6px 0; }
  .breadcrumb:not(:has(.crumb-back)) a:last-of-type::before { content: '\2039'; margin-right: 6px; font-size: 16px; }
}

.nav-badge {
  margin-left: auto;
  min-width: 20px; height: 20px;
  padding: 0 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem; font-weight: var(--font-semibold);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-badge { background: rgba(255, 255, 255, 0.24); color: var(--color-white); }
.nav-badge.attention { background: var(--color-cyclamen); color: var(--color-oxford-blue); }
/* New requests deserve the eye: Cyclamen with a slow, gentle pulse. */
.nav-badge.pop {
  background: var(--color-cyclamen);
  color: var(--color-oxford-blue);
  font-weight: var(--font-bold);
  animation: badge-pop 2.4s var(--ease-out) infinite;
}
@keyframes badge-pop {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 106, 161, 0.55); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(255, 106, 161, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav-badge.pop { animation: none; } }

.account-wrap { position: relative; margin-left: auto; flex: none; }
.account-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px 0 6px;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  border-radius: var(--radius-full);
  font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.account-btn:hover { background: var(--color-lavender); }
.account-btn .ti-chevron-down { font-size: 16px; color: var(--text-muted); }
@media (max-width: 900px) { .account-btn .account-name { display: none; } }

.avatar-initials {
  width: 30px; height: 30px; border-radius: var(--radius-md); flex: none;
  background: var(--color-lavender); color: var(--color-electric-indigo);
  font-family: var(--font-display); font-weight: var(--font-semibold); font-size: 0.6875rem;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}

::selection { background: var(--color-lavender); color: var(--color-oxford-blue); }
.sidebar ::selection, .cv-hero ::selection, .hero ::selection { background: rgba(255, 106, 161, 0.40); color: var(--color-white); }

.notif-wrap { position: relative; margin-left: auto; flex: none; }
.notif-wrap:not([hidden]) + .account-wrap { margin-left: 0; }
.notif-wrap:not([hidden]) { display: flex; align-items: center; }
/* The bell is an icon button at the M height, level with the 40px account button. */
.notif-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--h-m); height: var(--h-m); padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius-full); color: var(--text-secondary); font-size: 20px; transition: background var(--transition-fast), color var(--transition-fast); }
.notif-btn .ti { font-size: 20px; }
.notif-btn:hover, .notif-wrap:has(.menu-pop.open) .notif-btn { background: var(--color-lavender); color: var(--color-electric-indigo); }
/* Oxford on Cyclamen: 6.43:1, as .nav-badge.attention (white was 2.68:1). */
.notif-count { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-cyclamen); color: var(--color-oxford-blue); font-size: 0.625rem; font-weight: var(--font-bold); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--color-white); }
@media (max-width: 640px) { .notif-btn, .account-btn { height: var(--h-touch); } .notif-btn { width: var(--h-touch); } }
/* .menu-pop / .menu-item: see the talent ui components section (A11). */

/* ---------- Talent: ranked candidate rows ---------- */
/* .cand-row: see the talent ui components section (A8). */
.cand-rank {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.headshot { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; object-position: center top; border: 1px solid var(--color-platinum); display: block; background: var(--color-lavender); }
img.headshot { opacity: 0; transition: opacity var(--transition-base); }
img.headshot.loaded { opacity: 1; }
/* Initials stand in wherever a candidate has no photo (or it fails to load). */
.headshot-fallback { width: 56px; height: 56px; border-radius: var(--radius-md); font-size: var(--text-base); display: inline-flex; }

.cand-id { min-width: 0; }
.cand-id .n { font-size: 0.9375rem; font-weight: var(--font-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-id .t { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-id .meta { margin-top: 4px; display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-muted); flex-wrap: wrap; }
.cand-id .meta .viewed { color: var(--ink-green); }
.cand-id .meta .m { display: inline-flex; align-items: center; gap: 3px; }
.cand-id .meta .ti { font-size: 13px; }
.cand-id .rationale { margin-top: 4px; font-size: var(--text-xs); color: var(--text-secondary); font-style: italic; }

.cand-actions { display: flex; gap: var(--space-xs); align-items: center; }
/* .icon-btn metrics: see the talent ui components section (A4). */
.icon-btn.starred { color: var(--color-electric-indigo); background: var(--tint-indigo-8); }

/* ---------- Talent: role sections, meters, NEXT banner ---------- */
.role-head { display: flex; align-items: baseline; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-sm); padding-bottom: 0.45rem; border-bottom: 1px solid var(--border-mid); }
.role-head .meta { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }

.meter { margin-top: var(--space-sm); }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.meter-head .l { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); }
.meter-head .c { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.meter-track { height: 6px; border-radius: var(--radius-full); background: var(--color-lavender); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-electric-indigo); transition: width var(--transition-slow); }
.meter-fill.done { background: var(--color-success); }
.meter-seg { display: flex; gap: 3px; }
.meter-seg i { flex: 1; height: 8px; background: var(--color-lavender); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--border-mid); }
.role-line .meter-seg { width: 90px; flex: none; }
.meter-seg i.on { background: var(--color-electric-indigo); box-shadow: none; }
.meter-seg i.pend { background: var(--color-orange-peel); box-shadow: none; }

.next-banner {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--tint-indigo-4); border: 1px solid var(--tint-indigo-12);
  border-radius: var(--radius-md); margin: var(--space-md) 0;
  font-size: var(--text-sm); color: var(--color-electric-indigo); font-weight: var(--font-medium);
}
.next-banner .ti { font-size: 18px; flex: none; }
.next-banner a { color: inherit; text-decoration: underline; }

/* ---------- Talent: request cards ---------- */
.req-card {
  background: var(--color-white); border: 1px solid var(--color-platinum);
  border-radius: var(--radius-md); padding: var(--space-lg); margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}
.req-card:hover { border-color: var(--border-mid); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.req-card .head { display: flex; align-items: center; gap: var(--space-md); }
.req-card h3 { font-family: var(--font-display); font-weight: var(--font-semibold); font-size: var(--text-xl); color: var(--text-primary); }
.req-card .head .status { margin-left: auto; }
.req-card .roles { margin-top: var(--space-md); display: grid; gap: var(--space-sm); }
.req-card .role-line { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-sm); color: var(--text-secondary); flex-wrap: wrap; }
.req-card .role-line .name { min-width: min(10rem, 40vw); font-weight: var(--font-medium); color: var(--text-primary); }
.req-card .foot { margin-top: var(--space-md); display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-xs); color: var(--text-muted); }
.req-card { max-width: 1060px; }   /* keeps the footer CTA within reach of its content */
.req-card .foot .btn { margin-left: auto; }

/* ---------- Talent: CV page ---------- */
.cv-hero {
  position: relative; overflow: hidden;
  background: var(--color-oxford-blue);
  border-radius: 0;                       /* dark blocks are sharp (A7) */
  padding: 28px var(--s-6);
  margin-bottom: var(--space-xl);
  display: flex; gap: var(--space-lg); align-items: center;
}
/* A solid EI rule: the portal's one gradient is the active nav pill (A14b). */
.cv-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--color-electric-indigo); }
.cv-hero .headshot-lg { width: 96px; height: 96px; border-radius: var(--radius-av); object-fit: cover; object-position: center top; border: 2px solid rgba(255,255,255,0.9); flex: none; background: var(--color-lavender); }
.cv-hero .headshot-fallback { width: 96px; height: 96px; border-radius: var(--radius-av); font-size: var(--text-2xl); border: 2px solid rgba(255,255,255,0.9); }
.cv-hero h1 { color: #fff; font-family: var(--font-display); font-weight: var(--font-medium); font-size: var(--text-3xl); letter-spacing: -0.01em; margin: 0 0 2px; }
.cv-hero .role { color: var(--fg-on-dark-muted); font-size: var(--text-base); }
.cv-hero .meta-chips { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }
.chip-dark {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.85);
  font-size: var(--text-xs); font-weight: var(--font-medium);
}
.chip-dark.feat { background: rgba(255, 255, 255, 0.18); color: var(--color-white); }
.chip-dark .ti { font-size: 14px; }
.cv-hero .cv-actions { margin-left: auto; display: flex; gap: var(--space-sm); flex: none; flex-wrap: wrap; justify-content: flex-end; }
.btn-inverse { background: var(--color-white); color: var(--color-oxford-blue); }
.btn-inverse:hover { background: var(--color-lavender); color: var(--color-electric-indigo); }

.cv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-xl); align-items: start; }
.cv-rail { position: sticky; top: 80px; display: grid; gap: var(--space-md); }
@media (max-width: 1100px) { .cv-layout { grid-template-columns: 1fr; } .cv-rail { position: static; } }

.timeline { border-left: 2px solid var(--border-mid); padding-left: var(--space-lg); margin-left: 5px; }
.timeline-entry { position: relative; padding-bottom: var(--space-lg); }
.timeline-entry::before {
  content: ''; position: absolute; left: calc(-1 * var(--space-lg) - 7px); top: 5px;
  width: 10px; height: 10px; background: var(--color-white);
  border: 2px solid var(--border-mid);
}
.timeline-entry.current::before { background: var(--color-electric-indigo); border-color: var(--color-electric-indigo); }
.timeline-entry .role { font-size: 0.9375rem; font-weight: var(--font-semibold); color: var(--text-primary); }
.timeline-entry .org { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 1px; }
.timeline-entry .dates { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.timeline-entry ul { margin: var(--space-sm) 0 0 1.1rem; font-size: var(--text-sm); color: var(--text-secondary); }
.timeline-entry .achieve { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--tint-indigo-4); border-left: 3px solid var(--color-electric-indigo); font-size: var(--text-sm); color: var(--text-secondary); }

.skill-cols { columns: 2; column-gap: var(--space-xl); }
.skill-row { display: grid; grid-template-columns: 1fr; break-inside: avoid; gap: var(--space-md); align-items: center; padding: 7px 0; }
.skill-row .name { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-medium); }
.skill-group-label { font-size: 0.6875rem; font-weight: var(--font-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-md) 0 var(--space-xs); }

.cv-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-oxford-blue); }
.cv-video video { width: 100%; height: 100%; object-fit: cover; }

.pipeline-dots { display: flex; align-items: center; gap: 4px; margin: var(--space-sm) 0; }
.pipeline-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-lavender); flex: none; }
.pipeline-dots i.on { background: var(--color-electric-indigo); }
.pipeline-dots .bar { flex: 1; height: 2px; background: var(--color-lavender); }
.pipeline-dots .bar.on { background: var(--color-electric-indigo); }

/* Comments */
.comment { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-platinum); }
.comment:last-of-type { border-bottom: none; }
.comment .avatar-initials { width: 28px; height: 28px; font-size: 0.625rem; }
.comment .who { font-size: 0.8125rem; font-weight: var(--font-semibold); color: var(--text-primary); }
.comment .when { font-size: 0.6875rem; color: var(--text-muted); margin-left: 6px; font-weight: var(--font-regular); }
.comment p { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; overflow-wrap: anywhere; }
.comment .internal-tag { display: inline-block; margin-left: 6px; font-size: 0.625rem; color: var(--ink-amber); background: var(--tint-amber-14); border-radius: var(--radius-full); padding: 1px 7px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--font-semibold); }
.comment-input { margin-top: var(--space-sm); }
.comment-input textarea {
  width: 100%; min-height: 64px; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--border-input); border-radius: 0;
  font-family: var(--font-primary); font-size: var(--text-sm);
}
.comment-input textarea:focus { outline: none; border-color: var(--color-electric-indigo); box-shadow: 0 0 0 3px var(--tint-indigo-12); }

/* Empty states + skeletons: see the talent ui components section (A13). */
@keyframes skel-sweep { to { transform: translateX(100%); } }

/* Dialog system (.dialog-scrim .dialog + native .ui-dialog): see the talent ui components section (A10). */
.dialog-scrim { position: fixed; inset: 0; background: rgba(19,26,48,0.5); z-index: 200; display: none; align-items: center; justify-content: center; }
.dialog-scrim.open { display: flex; }
/* The global margin reset removes the UA's centring on native <dialog>. */
dialog { margin: auto; }

/* Once-per-session "needs you" summary shown right after login. */
.actions-scrim { position: fixed; inset: 0; background: rgba(19, 26, 48, 0.55); display: none; align-items: center; justify-content: center; z-index: 300; padding: var(--space-lg); }
.actions-scrim.show { display: flex; }
.actions-pop { background: var(--color-white); width: min(460px, 94vw); box-shadow: var(--shadow-xl); padding: var(--space-xl); animation: pop-rise 240ms var(--ease-out); }
@keyframes pop-rise { from { opacity: 0; transform: translateY(14px); } }
.actions-pop .eyebrow { margin-bottom: 4px; }
.actions-pop h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.action-row { display: flex; align-items: center; gap: 14px; padding: 14px 10px; margin: 0 -10px; border-top: 1px solid var(--color-platinum); color: var(--text-primary); text-decoration: none; transition: background var(--transition-fast); }
.action-row:hover { background: rgba(229, 222, 237, 0.35); }
.action-row:hover .ti-chevron-right { transform: translateX(3px); }
.action-glyph { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #F1E7FC; }
.action-glyph .ti { color: var(--color-electric-indigo); font-size: 20px; }
.action-title { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-electric-indigo); }
.action-sub { font-size: var(--text-xs); color: var(--text-muted); }
.action-row .ti-chevron-right { margin-left: auto; color: var(--color-electric-indigo); font-size: 16px; flex-shrink: 0; transition: transform var(--transition-fast); }
.actions-dismiss { display: block; margin: var(--space-md) auto 0; background: none; border: none; cursor: pointer; font-family: var(--font-primary); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted); padding: 6px 14px; }
.actions-dismiss:hover { color: var(--text-primary); }

/* ==== talent ui components (polish 2026-09) ==== */
/* The shared visual contract for the talent surfaces (board, request,
   candidate, interviews, manager) and the shell. Tokens: the "Talent UI
   tokens" block at the end of :root. New classes carry the ui- prefix so they
   never restyle the out-of-scope pages that already own .st / .chip / .panel.
   Pages build layout (grids, positions) locally from the tokens and never
   re-declare these classes. Restyled in place elsewhere in this file: .cv-hero
   (sharp, 28/24 padding, solid EI rule), .chip-dark (22px), .comment-input. */

/* ---- A4 Buttons: four tiers, one primary. .btn-sm is an exact alias of .btn-s
   (the request page's pinned Invite button carries it). The global .btn and
   .btn-primary keep their lift for the untouched consultant pages; a tier is
   always flat. ---- */
.btn-s, .btn-sm, .btn-m, .btn-l {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--font-semibold); letter-spacing: 0.01em; line-height: 1;
  box-shadow: none; transform: none; filter: none;
  cursor: pointer; text-decoration: none; text-transform: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn-s, .btn-sm { height: var(--h-s); padding: 0 14px; font-size: 13px; gap: 6px; }
.btn-m { height: var(--h-m); padding: 0 18px; font-size: 14px; gap: 8px; }
.btn-l { height: var(--h-l); padding: 0 24px; font-size: 16px; gap: 8px; }
:is(.btn-s, .btn-sm, .btn-m) .ti { font-size: 16px; }
.btn-l .ti { font-size: 18px; }
:is(.btn-s, .btn-sm, .btn-m, .btn-l):hover { transform: none; box-shadow: none; filter: none; }
:is(.btn-s, .btn-sm, .btn-m, .btn-l, .btn-link, .btn-icon):active:not(:disabled) { transform: scale(0.98); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l, .btn-link, .btn-icon, .icon-btn):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Variants (existing names), flat inside a tier. */
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-primary { background: var(--color-electric-indigo); color: var(--color-white); border: none; }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-primary:hover:not(:disabled) { background: #8516E8; color: var(--color-white); }
/* Destructive confirmation (switching a board link off): red, and only ever inside its confirm dialog. */
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-danger { background: var(--ink-red); color: var(--color-white); border: none; }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-danger:hover:not(:disabled) { background: #A92E33; color: var(--color-white); }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--ink-red); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-secondary { background: var(--color-white); color: var(--color-electric-indigo); border: 1.5px solid var(--color-electric-indigo); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-secondary:hover:not(:disabled) { background: var(--tint-indigo-8); color: var(--color-electric-indigo); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-ghost { background: var(--color-white); color: var(--text-primary); border: 1px solid var(--border-mid); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-ghost:hover:not(:disabled) { background: var(--bg-secondary); color: var(--text-primary); }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-inverse { background: var(--color-white); color: var(--color-oxford-blue); border: none; }
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-inverse:hover:not(:disabled) { background: var(--color-lavender); color: var(--color-oxford-blue); }
/* Disabled keeps its resting colours: no hover. */
:is(.btn-s, .btn-sm, .btn-m, .btn-l):disabled:hover { filter: none; }

/* Tertiary text button. .neutral = secondary text, .danger = red. */
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h-s); padding: 0 2px; margin: 0;
  border: none; background: none; border-radius: var(--radius-full); box-shadow: none;
  font: var(--font-semibold) 13px/18px var(--font-primary); letter-spacing: 0; text-transform: none;
  color: var(--color-electric-indigo); cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn-link .ti { font-size: 16px; flex: none; }
.btn-link:hover:not(:disabled) { color: var(--color-electric-indigo); background: none; text-decoration: underline; text-underline-offset: 3px; transform: none; }
.btn-link.neutral { color: var(--text-secondary); }
.btn-link.neutral:hover:not(:disabled) { color: var(--text-primary); }
.btn-link.danger, .btn-link.danger:hover:not(:disabled) { color: var(--ink-red); }

/* Icon-only button: 34 (40 with .btn-m, the topbar bell), 44 on phones.
   .icon-btn and the board's .more-btn take the same metrics. */
.btn-icon, .icon-btn, .more-btn {
  width: var(--h-s); height: var(--h-s); padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-full); box-shadow: none;
  color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; position: relative;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-icon.btn-m { width: var(--h-m); height: var(--h-m); padding: 0; }
:is(.btn-icon, .icon-btn, .more-btn) .ti { font-size: 18px; }
:is(.btn-icon, .icon-btn, .more-btn):hover:not(:disabled) { background: var(--color-lavender); color: var(--color-electric-indigo); }
.icon-btn::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; }

@media (max-width: 640px) {
  .btn-s, .btn-sm, .btn-m, .btn-link { height: auto; min-height: var(--h-touch); }
  .btn-icon, .icon-btn, .more-btn, .btn-icon.btn-m { width: var(--h-touch); height: var(--h-touch); }
}

/* ---- A5 Status: one component on every talent page. A dot and a sentence,
   optional sub-line. Roles are the OB.STATUS_ROLE names. The global .status
   pill stays for the admin and consultant pages (E7). ---- */
.ui-status { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0;
  font: 500 13px/18px var(--font-primary); color: var(--text-primary); text-transform: none; letter-spacing: 0; }
.ui-status::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dot-neutral); }
.ui-status .sub { display: block; font: 400 12px/16px var(--font-primary); color: var(--text-muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-status.neutral::before { background: var(--dot-neutral); }
.ui-status.brand::before   { background: #7300E2; }
.ui-status.violet::before  { background: #A123E7; }   /* kept for completeness; talent pages do not use it */
.ui-status.green::before   { background: #1F9D6B; }
.ui-status.amber::before   { background: #FFA20D; }
.ui-status.red::before     { background: #E5484D; }   /* problems only: blocked, start overdue — never an outcome */
.ui-status.dark            { color: var(--text-muted); }                                   /* terminal / out */
.ui-status.dark::before    { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dot-neutral); }
.ui-status.me   { font-weight: 600; } .ui-status.me::before { background: #FF6AA1; }        /* the viewer's move */
.ui-status.slow { font-weight: 600; color: var(--ink-amber); }                               /* waiting 7+ days */

/* ---- A6 Chips: urgency, seats, start, Filled, rank, Updated. ---- */
.ui-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px;
  font: 500 12px/1 var(--font-primary); letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--color-platinum); }
.ui-chip .ti { font-size: 14px; color: var(--text-muted); }
.ui-chip.urg::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dot-neutral); flex: none; }
/* Urgency is a quiet label, not a pill: most requisitions are Critical or High, so filled
   chips turned the board into a column of red (Seth, 29 Sep 2026). The dot carries the
   colour and the words carry the meaning; only Highest priority reads in red. */
.ui-chip.urg { background: transparent; border-color: transparent; padding: 0; gap: 6px; color: var(--text-muted); }
.ui-chip.urg.crit::before { background: #E5484D; }
.ui-chip.urg.high::before { background: #FFA20D; }
.ui-chip.urg.top  { color: var(--ink-red); font-weight: 600; } .ui-chip.urg.top::before { background: #E5484D; }
/* Other chip fills are the tint tokens pre-composited on white: opaque, so a chip keeps its
   contrast on a tinted (hover / open / search-hit) row. */
.ui-chip.ok   { background: #E9F5F0; border-color: transparent; color: var(--ink-green); font-weight: 600; }
.ui-chip.rank { font-weight: 700; }  .ui-chip.rank.first { background: #EEE0FC; border-color: transparent; color: var(--color-electric-indigo); }
.ui-chip.new  { background: #F4EBFD; border-color: transparent; color: var(--color-electric-indigo); font-weight: 600; }

/* ---- A7 Panels: sharp, 1px platinum, no shadow, no hover lift. ---- */
.ui-panel { background: #fff; border: 1px solid var(--color-platinum); border-radius: 0; padding: 24px; box-shadow: none; }
.ui-panel:hover { transform: none; box-shadow: none; }
.ui-panel-title { font: 600 11px/16px var(--font-primary); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
@media (max-width: 640px) { .ui-panel { padding: 16px; } }

/* ---- A8 Lists, rows and column headers. Pages set grid-template-columns
   from the --col-* / --av-* tokens; the right edge is the menu column. ---- */
.ui-list { background: #fff; border: 1px solid var(--color-platinum); border-radius: 0; }
.ui-row {
  display: grid; align-items: center; column-gap: var(--s-3);
  min-height: var(--row-person); padding: 10px 0 10px var(--cell-x);   /* 10 + 44px avatar + 10 = 64 */
  background: #fff; border-bottom: 1px solid var(--hairline);
  transition: background-color var(--transition-fast);
}
.ui-list > .ui-row:last-child { border-bottom: 0; }
.ui-row:hover { background: var(--tint-indigo-4); box-shadow: none; transform: none; }
a.ui-row, .ui-row[data-href], .ui-row.link, .ui-row[role="link"], .ui-row[role="button"] { cursor: pointer; color: inherit; text-decoration: none; }
/* Out / terminal rows dim with colour, never opacity (text stays AA). */
.ui-row.out, .ui-row.out :is(.n, .name, .t, .hl, .headline) { color: var(--text-muted); }
.ui-row.out img { filter: grayscale(1); opacity: 0.6; }

.ui-colhead, .ui-colhead th {
  font: 600 11px/16px var(--font-primary); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); text-align: left; background: var(--bg-secondary);
}
div.ui-colhead { display: grid; align-items: center; column-gap: var(--s-3); min-height: var(--row-head); padding: 0 0 0 var(--cell-x);
  border-bottom: 1px solid var(--color-platinum); position: sticky; top: 56px; z-index: 5; }
.ui-colhead th { height: var(--row-head); padding: 0 var(--cell-x); vertical-align: middle; white-space: nowrap;
  border-bottom: 1px solid var(--color-platinum); position: sticky; top: 56px; z-index: 5; }
@media (max-width: 900px) { div.ui-colhead, thead.ui-colhead, tr.ui-colhead { display: none; } }

/* ---- A9 Manager card decision column. ---- */
.ui-side { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border-left: 1px solid var(--color-platinum); padding-left: 24px; }   /* 264px track → 239px content */
.ui-side > .btn { width: 100%; }
.ui-side-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--h-s); min-width: 0; }
/* Left: the share / PDF link, one line, ellipsis (full text in title). Right: Pass. */
.ui-side-foot > .btn-link:not(.neutral) { display: block; flex: 1 1 auto; min-width: 0; line-height: var(--h-s);
  overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ui-side-foot > .btn-link.neutral { flex: none; margin-left: auto; }
.ui-side-foot > .btn-link.neutral:hover:not(:disabled) { color: var(--ink-red); }
@media (max-width: 960px) {
  .ui-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-platinum); padding-top: 16px; }
  .ui-side > .btn { height: auto; min-height: var(--h-touch); }
}
@media (max-width: 640px) { .ui-side-foot > .btn-link:not(.neutral) { line-height: var(--h-touch); } }

/* ---- A10 Dialogs: one anatomy. .ui-dialog on a native <dialog> (board,
   manager); the portal's .dialog-scrim > .dialog (candidate, request,
   interviews) gets the same look. The candidate video dialog is exempt. ---- */
dialog.ui-dialog { margin: auto; max-width: calc(100vw - 32px); }   /* beats the UA dialog:modal cap (100% - 6px - 2em) */
dialog.ui-dialog::backdrop { background: rgba(19, 26, 48, 0.5); }
.ui-dialog, .dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--color-white); color: var(--text-primary);
  border: 0; border-top: 3px solid var(--color-electric-indigo); border-radius: 0; box-shadow: var(--shadow-xl);
  padding: 24px 28px;
}
:is(.ui-dialog, .dialog) :is(h2, h3, .ui-dialog-title) {
  font: 700 20px/26px var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px;
}
:is(.ui-dialog, .dialog) :is(p, .lead, .sub):not(.ui-status .sub) { font-size: 14px; line-height: 21px; color: var(--text-secondary); margin: 0 0 16px; }
:is(.ui-dialog, .dialog) .who { display: flex; align-items: center; gap: 12px; background: var(--bg-secondary); padding: 10px 12px; margin: 0 0 16px;
  font-size: 14px; line-height: 20px; }
:is(.ui-dialog, .dialog) .who :is(img, .ini, .headshot, .headshot-fallback, .avatar-initials) { width: var(--av-m); height: var(--av-m); border-radius: var(--radius-av); flex: none; }
:is(.ui-dialog, .dialog) .who :is(strong, b, .name) { font-weight: 600; color: var(--text-primary); }
:is(.ui-dialog, .dialog) .who small { display: block; font-size: 12px; line-height: 16px; color: var(--text-muted); }
:is(.ui-dialog, .dialog) .who .ini { display: flex; align-items: center; justify-content: center; background: var(--color-lavender); color: var(--color-electric-indigo); font: 600 13px/1 var(--font-display); }
:is(.ui-dialog, .dialog) label { display: block; font: 600 13px/18px var(--font-primary); color: var(--text-primary);
  text-transform: none; letter-spacing: 0; margin: 16px 0 6px; }
:is(.ui-dialog, .dialog) label :is(.opt-note, .optional) { font-weight: 400; color: var(--text-muted); }
:is(.ui-dialog, .dialog) :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) {
  display: block; width: 100%; height: var(--h-m); padding: 0 12px;
  border: 1px solid var(--border-input); border-radius: 0; background: var(--color-white); color: var(--text-primary);
  font-family: var(--font-primary); font-size: 14px; line-height: 20px;
}
:is(.ui-dialog, .dialog) textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
:is(.ui-dialog, .dialog) :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"])):focus { outline: none; border-color: var(--color-electric-indigo); box-shadow: 0 0 0 3px var(--tint-indigo-12); }
:is(.ui-dialog, .dialog) .hint { font-size: 12px; line-height: 16px; color: var(--text-muted); margin-top: 6px; }
/* A consequence the reader should see before confirming: tinted, sharp, with its icon. */
:is(.ui-dialog, .dialog) .notice { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; background: var(--tint-indigo-4); border-left: 3px solid var(--color-electric-indigo); font-size: 13px; line-height: 19px; color: var(--text-primary); }
:is(.ui-dialog, .dialog) .notice .ti { font-size: 16px; color: var(--color-electric-indigo); flex: none; margin-top: 1px; }
:is(.ui-dialog, .dialog) :is(.err, .msg) { font-size: 13px; line-height: 18px; color: var(--ink-red); margin-top: 6px; }
:is(.ui-dialog, .dialog) .msg:empty { margin-top: 0; }   /* fields → footer stays 24 until a message shows */
:is(.ui-dialog, .dialog) .note { margin-top: 16px; font-size: 12px; line-height: 16px; color: var(--text-muted); display: flex; gap: 6px; align-items: baseline; }
:is(.ui-dialog, .dialog) .note .ti { flex: none; }
/* The field rules above set display, which would otherwise override [hidden]. */
:is(.ui-dialog, .dialog) [hidden] { display: none !important; }
/* Footer: Cancel (btn-m btn-ghost), then secondary, then primary right-most, in
   DOM order too. An optional left group sits in .start. */
.ui-dialog-foot, .dialog .actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
:is(.ui-dialog-foot, .dialog .actions) .start { margin-right: auto; display: flex; gap: 8px; }
/* The candidate intro-video dialog is exempt (960px on Oxford, no strip). */
.dialog.vid-dialog { border-top: 0; }
@media (max-width: 640px) {
  .ui-dialog, .dialog { padding: 20px 16px; }
  :is(.ui-dialog, .dialog) :is(input, select):where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"])) { height: var(--h-touch); }
  .ui-dialog-foot, .dialog .actions { flex-direction: column-reverse; align-items: stretch; }
  :is(.ui-dialog-foot, .dialog .actions) .start { margin-right: 0; flex-direction: column-reverse; }
  :is(.ui-dialog-foot, .dialog .actions) .btn { width: 100%; height: auto; min-height: var(--h-touch); }
}

/* ---- A11 Menus: the shell account + bell menus and the request row menu
   (.menu-pop / .menu-item, which also own their positioning), and the board's
   row menus (.ui-menu / .ui-menu-item: look only, the page positions them). ---- */
.menu-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.menu-pop.open { opacity: 1; visibility: visible; transform: none; }
.menu-pop, .ui-menu {
  min-width: 220px; background: var(--color-white);
  border: 1px solid var(--color-platinum); border-radius: 0; box-shadow: var(--shadow-lg);
  padding: 6px 0;
}
.account-wrap:has(.menu-pop.open) .account-btn { background: var(--color-lavender); }
.menu-pop .menu-head { padding: 8px 14px 10px; border-bottom: 1px solid var(--color-platinum); margin-bottom: 6px; }
.menu-pop .menu-head strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 20px; color: var(--text-primary); }
.menu-pop .menu-head small { display: block; color: var(--text-muted); font-size: 12px; line-height: 16px; }
/* A divider between groups of menu items. */
.ui-menu-sep { height: 1px; margin: 4px 0; background: var(--hairline); }
.menu-item, .ui-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: var(--menu-item-h); padding: 0 14px; margin: 0;
  border: none; border-radius: 0; background: none; box-shadow: none; cursor: pointer; text-align: left; text-decoration: none;
  font: 500 13px/18px var(--font-primary); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--text-primary);
}
:is(.menu-item, .ui-menu-item) .ti { font-size: 16px; flex: none; color: var(--text-muted); }
:is(.menu-item, .ui-menu-item):is(:hover, :focus-visible) { background: var(--tint-indigo-4); color: var(--color-electric-indigo); }
:is(.menu-item, .ui-menu-item):is(:hover, :focus-visible) .ti { color: var(--color-electric-indigo); }
:is(.menu-item, .ui-menu-item):focus-visible { outline: 2px solid var(--color-electric-indigo); outline-offset: -2px; border-radius: 0; }
:is(.menu-item, .ui-menu-item).danger, :is(.menu-item, .ui-menu-item).danger .ti,
:is(.menu-item, .ui-menu-item).danger:is(:hover, :focus-visible), :is(.menu-item, .ui-menu-item).danger:is(:hover, :focus-visible) .ti { color: var(--ink-red); }
:is(.menu-item, .ui-menu-item):is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; background: none; color: var(--text-primary); }
/* Bell items: a title over a sub line. */
.notif-pop { min-width: 300px; }
/* Phones: the bell menu spans the page gutter instead of hanging off the left edge. */
@media (max-width: 640px) { .notif-pop { position: fixed; top: 64px; left: 16px; right: 16px; min-width: 0; } }
.notif-pop .menu-item { height: auto; min-height: var(--menu-item-h); padding: 8px 14px; align-items: flex-start; white-space: normal; }
.notif-pop .menu-item .ti { margin-top: 1px; color: var(--color-electric-indigo); }
.notif-pop .menu-item small { color: var(--text-muted); font-size: 12px; line-height: 16px; font-weight: var(--font-regular); }
@media (max-width: 640px) {
  .menu-item, .ui-menu-item { height: var(--h-touch); }
  .notif-pop .menu-item { min-height: var(--h-touch); }
}

/* ---- A11 Toast (replaces the page-local .toast rules). The action button
   is Cyclamen; the manager's dismiss × is a .btn-icon. ---- */
.ui-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 16px;
  width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px;
  background: var(--color-oxford-blue); color: var(--color-white); border-radius: 0; box-shadow: var(--shadow-lg);
  font: 400 14px/20px var(--font-primary);
}
.ui-toast[hidden] { display: none; }
.ui-toast > button:not(.btn-icon) {
  flex: none; height: 36px; padding: 0 10px; margin: -4px 0;
  border: none; background: none; border-radius: var(--radius-full); box-shadow: none;
  color: var(--color-cyclamen); font: 700 14px/1 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
}
.ui-toast > button:not(.btn-icon):hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-toast .btn-icon { width: 36px; height: 36px; margin: -4px 0; color: rgba(255, 255, 255, 0.7); }
.ui-toast .btn-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.10); color: var(--color-white); }
@media (max-width: 640px) {
  .ui-toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; width: auto; max-width: none; }
  .ui-toast > button:not(.btn-icon), .ui-toast .btn-icon { height: var(--h-touch); min-width: var(--h-touch); margin: -6px 0; }
}

/* ---- A11 Segmented control (board tabs, manager view switch). The selected
   button carries aria-selected / aria-pressed / aria-current, or .on. ---- */
.ui-seg {
  display: inline-flex; align-items: center; gap: 2px;
  height: var(--h-m); padding: 3px;
  border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--color-platinum);
}
.ui-seg > :is(button, a) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; margin: 0;
  border: none; border-radius: var(--radius-full); background: transparent; box-shadow: none;
  font: 600 13px/1 var(--font-display); letter-spacing: 0.01em; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ui-seg > :is(button, a) .ti { font-size: 16px; }
.ui-seg > :is(button, a):hover { color: var(--text-primary); }
.ui-seg > :is(button, a):is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"], .on) { background: var(--color-oxford-blue); color: var(--color-white); }
.ui-seg > :is(button, a):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-electric-indigo); border-radius: var(--radius-full); }
@media (max-width: 640px) {
  .ui-seg { display: flex; width: 100%; height: auto; }
  .ui-seg > :is(button, a) { flex: 1; height: var(--h-touch); }
}

/* ---- A12 Focus rings. The global :focus-visible (EI outline) is in the
   Focus section; these complete it. ---- */
/* Pills stay pills while focused (the global rule rounds to 2px). */
:is(.btn, .btn-s, .btn-sm, .btn-m, .btn-l, .btn-link, .btn-icon, .icon-btn, .more-btn, .account-btn, .notif-btn, .topbar-burger, .rail-toggle):focus-visible { border-radius: var(--radius-full); }
/* Filled buttons: a white gap then an EI ring. No page overrides this box-shadow. */
:is(.btn-s, .btn-sm, .btn-m, .btn-l).btn-primary:focus-visible, .btn-primary:focus-visible, .sl-tog.on:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-electric-indigo);
}
/* On Oxford surfaces the ring is Cyclamen (EI is invisible there). */
.sl-hero :focus-visible, .ui-toast :focus-visible { outline: 2px solid var(--color-cyclamen); outline-offset: 2px; box-shadow: none; }
:is(.cv-hero, .sl-hero) .btn-inverse:focus-visible { outline: 2px solid var(--color-cyclamen); outline-offset: 2px; box-shadow: none; }
/* List rows: an inset outline. The 3px EI left bar means open / expanded only. */
:is(.ui-row, .cand-row, tr.ui-row):focus-visible { outline: 2px solid var(--color-electric-indigo); outline-offset: -2px; border-radius: 0; }

/* ---- A13 Empty and loading states. The existing text is the title. ---- */
.empty-tile {
  padding: 32px 24px; text-align: center;
  background: var(--color-white); border: 1px solid var(--color-platinum); border-radius: 0;
}
.empty-tile .glyph {
  width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 0; background: var(--color-lavender);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--color-electric-indigo);
}
.empty-tile .glyph .ti { font-size: 24px; }
.empty-tile :is(h3, .title) { font: 700 16px/22px var(--font-display); letter-spacing: 0; color: var(--text-primary); margin: 0 0 4px; }
.empty-tile p { color: var(--text-secondary); font-size: 14px; line-height: 20px; max-width: 48ch; margin: 0 auto; }
.empty-tile .btn { margin-top: 16px; }
.empty-tile.compact { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-align: left; }
.empty-tile.compact .glyph { width: 40px; height: 40px; margin: 0; font-size: 20px; flex: none; }
.empty-tile.compact .glyph .ti { font-size: 20px; }
.empty-tile.compact p, .empty-tile.compact :is(h3, .title) { margin: 0; }
.empty-tile.compact .btn { margin-top: 0; margin-left: auto; }
/* Inside a bordered wrapper (a .ui-list, the board's .wrap) the tile drops its own border. */
.ui-list .empty-tile, .empty-tile.flush { border: 0; }

.skel { position: relative; overflow: hidden; background: #EFEBF4; border-radius: 0; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%); animation: skel-sweep 1.2s ease-in-out infinite;
}
.skel-row { height: 88px; margin-bottom: var(--space-sm); border-radius: 0; }

/* ---- A15 Request and interviews rows (.cand-row): a joined list, no lift.
   Pages set the grid template from the tokens; out rows dim with colour. ---- */
.cand-row {
  display: grid;
  grid-template-columns: var(--col-rank) var(--av-l) minmax(0, 1fr) auto auto;
  column-gap: var(--s-3); align-items: center;
  min-height: var(--row-person); padding: 10px 0 10px var(--cell-x); margin: 0;
  background: var(--color-white); border: 1px solid var(--color-platinum); border-radius: 0;
  cursor: pointer; box-shadow: none; transform: none;
  transition: background-color var(--transition-fast);
}
.cand-row + .cand-row { border-top: 0; }
.cand-row:hover { background: var(--tint-indigo-4); box-shadow: none; transform: none; }
.cand-row:hover .cand-id .n { color: var(--color-electric-indigo); }
.cand-row .chev { transition: color var(--transition-fast); }
.cand-row:hover .chev { color: var(--color-electric-indigo); }
.cand-row :is(.headshot, .headshot-fallback) { width: var(--av-l); height: var(--av-l); border-radius: var(--radius-av); }
.cand-row.terminal .cand-id :is(.n, .t, .meta, .rationale) { color: var(--text-muted); }
.cand-row.terminal img { filter: grayscale(1); opacity: 0.6; }
.cand-rank .h { font-size: 1em; font-weight: var(--font-semibold); opacity: 1; margin-right: 1px; }
/* Request role title: Title 3, sentence case (interviews keeps its overline locally). */
.role-head h3 { font: 700 16px/22px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text-primary); }

/* Searchable chooser (Talent.picker): a search box over a grouped listbox. Sharp, white, one indigo pick. */
.pk { position: relative; border: 1px solid var(--border-input); background: #fff; border-radius: 0; }
/* Focus is the 1px indigo border alone: the dialog's top bar and the pick's bar are indigo already. */
.pk:focus-within { border-color: var(--color-electric-indigo); }
.pk-q { position: relative; border-bottom: 1px solid var(--color-platinum); }
.pk-q .ti { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; pointer-events: none; }
.pk .pk-q input { display: block; width: 100%; height: 44px; border: 0; border-radius: 0; padding: 0 12px 0 36px; background: transparent; font: 400 14px/20px var(--font-primary); color: var(--text-primary); }
.pk .pk-q input:focus { outline: none; box-shadow: none; border: 0; }
/* A steady height: the dialog never jumps as a search narrows or empties the list. */
.pk-list { height: min(40vh, 340px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 36px; }
.pk-list[hidden] { display: none; }
.pk-g + .pk-g { border-top: 1px solid var(--color-platinum); }
.pk-grp { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 12px 7px; background: var(--bg-secondary); border-bottom: 1px solid var(--color-platinum); font: 700 13px/18px var(--font-display); color: var(--text-primary); white-space: nowrap; }
.pk-grp b { flex: none; }
.pk-grp span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px/18px var(--font-primary); color: var(--text-muted); }
.pk-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background-color 120ms; }
.pk-g .pk-opt:last-child { border-bottom: 0; }
.pk-opt:hover, .pk-opt.act { background: var(--tint-indigo-4); }
.pk-opt.act { outline: 2px solid var(--color-electric-indigo); outline-offset: -2px; }
.pk-opt.on, .pk-opt.on:hover { background: var(--tint-indigo-8); box-shadow: inset 3px 0 0 var(--color-electric-indigo); }
.pk-opt.off { cursor: not-allowed; background: #fff; }
.pk-opt.off .pk-t, .pk-opt.off .pk-m, .pk-opt.off .pk-m .ui-chip { color: var(--text-muted); }
.pk-opt.off .pk-m .ui-chip.urg::before { background: var(--dot-neutral); }
.pk-opt.off .pk-av { filter: grayscale(1); opacity: 0.6; }
/* A row that cannot be picked: the tag says why, so its count gives the headline the room. */
.pk-opt.off .pk-m.one :is(.pk-dot, .n) { display: none; }
.pk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pk-t { font: 600 14px/20px var(--font-primary); color: var(--text-primary); overflow-wrap: anywhere; }
.pk-m { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; font: 400 12px/17px var(--font-primary); color: var(--text-secondary); }
.pk-m .pk-f { white-space: nowrap; }
.pk-m .ui-chip.urg { font-size: 12px; line-height: 17px; }
.pk-m .pk-dot { margin: 0 6px; color: var(--text-muted); }
/* One line: the headline gives way, the count stays whole. */
.pk-m.one { flex-wrap: nowrap; white-space: nowrap; column-gap: 0; }
.pk-m.one .hl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pk-m.one .n { flex: none; }
.pk-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--bg-secondary); font: 600 11px/16px var(--font-primary); color: var(--text-muted); white-space: nowrap; }
.pk-ck { flex: none; font-size: 18px; color: var(--color-electric-indigo); visibility: hidden; }
.pk-opt.on .pk-ck { visibility: visible; }
.pk-none { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: 4px 12px; height: min(40vh, 340px); padding: 16px 12px; font: 400 14px/20px var(--font-primary); color: var(--text-muted); }
.pk-none[hidden], .pk-none .btn-link[hidden] { display: none; }
.pk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pk-sum { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-top: 1px solid var(--color-platinum); border-radius: 0; background: var(--bg-secondary); text-align: left; cursor: pointer; font: 400 13px/18px var(--font-primary); color: var(--text-secondary); }
.pk-sum[hidden] { display: none; }
.pk-sum .ti { flex: none; font-size: 16px; color: var(--color-electric-indigo); }
.pk-sum b { color: var(--text-primary); font-weight: 600; }
.pk-sum:hover b, .pk-sum:focus-visible b { color: var(--color-electric-indigo); }
.pk-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: var(--radius-av); background: var(--color-lavender); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font: 600 12px/1 var(--font-display); color: var(--color-electric-indigo); }
.pk-av::before { content: attr(data-ini); }
.pk-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: inherit; }
@media (max-width: 640px) {
  .pk-list, .pk-none { height: 40vh; }
  .pk-opt { min-height: 56px; }
  /* Phones: urgency, then the facts, on their own lines; candidates keep their headline, not the count. */
  .pk-m:not(.one) { flex-direction: column; align-items: flex-start; }
  .pk-m.one :is(.pk-dot, .n) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pk-opt { transition: none; } }

/* A picker's heading inside a dialog reads like the dialog's field labels; a dialog holding one is wider. */
:is(.ui-dialog, .dialog) .pk-l { display: block; margin: 16px 0 6px; font: 600 13px/18px var(--font-primary); color: var(--text-primary); }
:is(.ui-dialog, .dialog) .pk-l[hidden], :is(.ui-dialog, .dialog) .pk[hidden] { display: none; }
.pk-hint { font-weight: 400; color: var(--text-muted); }
:is(.ui-dialog, .dialog):has(.pk) { width: min(600px, calc(100vw - 32px)); }
dialog.ui-dialog:has(.pk) { margin-block: max(16px, 6vh) auto; }
.dialog-scrim:has(.pk) { align-items: flex-start; padding-top: max(16px, 6vh); }
:is(.ui-dialog, .dialog):has(.pk:not([hidden]) ~ .pk:not([hidden])) :is(.pk-list, .pk-none),
:is(.ui-dialog, .dialog):has(.pk:not([hidden]) ~ * ~ .pk:not([hidden])) :is(.pk-list, .pk-none) { height: min(24vh, 200px); }
:is(.ui-dialog, .dialog):has(.pk) :is(.ui-dialog-foot, .actions) { position: sticky; bottom: 0; z-index: 2; margin-bottom: -24px; padding-top: 12px; padding-bottom: 24px; background: #fff; }