/* ============================================================
   TALENT POOL — redesigned browse + filter + profile drawer
   Ported from the prototype (HANDOFF.md). Tokens are scoped to the
   talent-pool surfaces (.tp-host = page, .pd-root = drawer at body
   level) so they don't collide with the theme's global variables.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&display=swap');

.tp-host, .pd-root, .rec-cand-scope {
  --teamed-teal: #00A896;
  --teamed-teal-dark: #007A6E;
  --teamed-teal-light: #E6F7F5;
  --teamed-dark: #1A2B2A;
  --teamed-mid: #3D5250;
  --teamed-gray: #6B7B7A;
  --teamed-light: #F5F9F8;
  --teamed-border: #E2EEEC;

  --fg-1: var(--teamed-dark);
  --fg-2: var(--teamed-mid);
  --fg-3: var(--teamed-gray);
  --fg-accent: var(--teamed-teal);
  --fg-accent-strong: var(--teamed-teal-dark);
  --bg-1: #FFFFFF;
  --bg-2: var(--teamed-light);
  --border-1: var(--teamed-border);
  --border-strong: #D0E0DD;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(26,43,42,0.04);
  --shadow-card-hover: 0 8px 24px rgba(0,122,110,0.10), 0 1px 2px rgba(26,43,42,0.04);
  --shadow-float: 0 12px 32px rgba(26,43,42,0.12);
  --shadow-focus: 0 0 0 3px rgba(0,168,150,0.28);
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms;
}

/* host */
.tp-host { background: #EDF3F2; font-family: var(--font-sans); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
.tp-host *, .pd-root *, .rec-cand-scope * { box-sizing: border-box; }
/* Ensure the `hidden` attribute always wins over author display rules
   (display:grid/inline-flex on panels + count badges would otherwise
   override the UA [hidden]{display:none}, so they never hide). */
.tp-host [hidden], .pd-root [hidden] { display: none !important; }
.tp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tp-host .main { font-family: var(--font-sans); padding: 28px 30px 60px; }

/* icon wrapper (we wrap inline SVGs in <span class="tp-ico">) */
.tp-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.tp-ico svg { width: 16px; height: 16px; }
.tp-ico.teal svg { color: var(--teamed-teal); }

/* ============================================================ FRAME */
.tp-frame { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: var(--radius-2xl); box-shadow: var(--shadow-float); }
.fb .ttl { flex: none; margin-right: 6px; }
.fb .ttl h1 { font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 400 !important; margin: 0 !important; line-height: 1 !important; color: var(--fg-1) !important; letter-spacing: -.01em; white-space: nowrap; }
.fb.compact .ttl { display: none; }
.tp-body { padding: 24px 30px 32px; }

/* ============================================================ PRIMITIVES */
.tp-av { border-radius: var(--radius-pill); overflow: hidden; flex: none; background: var(--teamed-teal-light); }
.tp-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-av.is-initials { display: flex; align-items: center; justify-content: center; color: var(--teamed-teal-dark); font-weight: var(--fw-semibold); }

.tp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tp-chip { display: inline-flex; align-items: center; gap: 5px; font: var(--fw-semibold) 12px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border: 1px solid rgba(0,168,150,0.16); padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.tp-chip .yrs { color: var(--teamed-teal); font-weight: var(--fw-medium); opacity: .85; }
.tp-chip--spec { color: #8A6D1F; background: #FCF4DD; border-color: #F0E2B4; }
.tp-chip--more { color: var(--fg-3); background: var(--bg-2); border-color: var(--border-1); }

.tp-select-badge { position: relative; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: var(--fw-semibold) 11px/1 var(--font-sans); color: var(--teamed-teal-dark); cursor: help; outline: none; }
.tp-select-badge .tp-ico svg { width: 14px; height: 14px; }
/* Hover/focus tooltip explaining Teamed Select (replaces the page-level banner). */
.tp-select-badge::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 9px); z-index: 60; width: 256px; white-space: normal; background: var(--teamed-teal-dark); color: #fff; font: var(--fw-medium) 12px/1.5 var(--font-sans); text-align: left; padding: 10px 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); pointer-events: none; }
.tp-select-badge::before { content: ""; position: absolute; left: 16px; bottom: calc(100% + 4px); z-index: 61; border: 5px solid transparent; border-top-color: var(--teamed-teal-dark); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-standard); pointer-events: none; }
.tp-select-badge:hover::after, .tp-select-badge:focus-visible::after, .tp-select-badge:hover::before, .tp-select-badge:focus-visible::before { opacity: 1; visibility: visible; transform: translateY(0); }
.tp-new { font: var(--fw-bold) 10px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--teamed-teal); padding: 5px 8px; border-radius: 5px; }
.tp-avail { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: var(--fw-medium) 12.5px/1 var(--font-sans); color: var(--fg-2); }
.tp-avail .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.tp-avail.now .dot { background: var(--teamed-teal); }

.tp-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-3); white-space: nowrap; }
.tp-meta .tp-ico svg { width: 13px; height: 13px; opacity: .8; }

.c-row-rateline strong { font-weight: var(--fw-semibold); color: var(--fg-1); }
.c-row-rateline .u { color: var(--fg-3); margin-left: 1px; }
.c-row-rateline .alt { color: var(--fg-3); }

.tp-fav { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border-1); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: all var(--dur-fast) var(--ease-standard); color: var(--fg-3); padding: 0; }
.tp-fav svg { width: 16px; height: 16px; fill: none; }
.tp-fav:hover { border-color: #DD5C92; color: #DD5C92; }
/* Favorited = pink (pairs better with teal than red). Subtle pill ring +
   saturated heart so it reads as a soft accent, not an alarm. Matched to the
   Favorites page heart (#DD5C92). */
.tp-fav.on { background: #FBEAF2; border-color: #F2C9DD; color: #DD5C92; }
.tp-fav.on svg { fill: currentColor; }

.tp-btn { font: var(--fw-semibold) 13px/1 var(--font-sans); cursor: pointer; border-radius: var(--radius-sm); padding: 9px 16px; border: none; transition: all var(--dur-normal) var(--ease-standard); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.tp-btn--ghost { background: #fff; border: 1px solid var(--border-1); color: var(--fg-2); }
.tp-btn--ghost:hover { border-color: var(--teamed-teal); color: var(--teamed-teal-dark); }

.tp-search { position: relative; flex: 1; }
.tp-search .tp-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }
.tp-search input { width: 100%; font: 400 14.5px/1.4 var(--font-sans); color: var(--fg-1); padding: 10px 14px 10px 42px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: #fff; outline: none; transition: all var(--dur-fast) var(--ease-standard); }
.tp-search input::placeholder { color: var(--fg-3); }
.tp-search input:focus { border-color: var(--teamed-teal); box-shadow: var(--shadow-focus); }

.tp-count { font-size: 13.5px; color: var(--fg-2); white-space: nowrap; }
.tp-count b { font-weight: var(--fw-semibold); color: var(--fg-1); }

.tp-sort { display: flex; align-items: center; gap: 8px; }
.tp-sort label { font-size: 12.5px; color: var(--fg-3); }
.tp-sel { appearance: none; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-1); border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: #fff; padding: 8px 30px 8px 12px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7B7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.tp-sel:focus { outline: none; border-color: var(--teamed-teal); box-shadow: var(--shadow-focus); }

.tp-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tp-active-chip { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-medium) 12.5px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border: 1px solid rgba(0,168,150,0.22); padding: 7px 8px 7px 12px; border-radius: var(--radius-pill); }
.tp-active-chip .lbl { opacity: .6; font-weight: 400; }
.tp-active-chip button { border: none; background: none; cursor: pointer; color: var(--teamed-teal-dark); display: flex; padding: 0; opacity: .7; }
.tp-active-chip button:hover { opacity: 1; }
.tp-active-chip button svg { width: 13px; height: 13px; }
.tp-clear { font: var(--fw-medium) 12.5px/1 var(--font-sans); color: var(--fg-3); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tp-clear:hover { color: var(--teamed-teal-dark); }

.tp-empty { text-align: center; padding: 60px 20px; color: var(--fg-3); }
.tp-empty h4 { font-family: var(--font-display); font-size: 22px; color: var(--fg-1); margin: 0 0 6px; font-weight: 400; }
.tp-empty p { font-size: 14px; margin: 0 0 18px; }

/* ============================================================ MULTISELECT POPOVER */
.tp-ms { position: relative; }
.tp-ms-trigger { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--fg-2); border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: #fff; padding: 9px 12px; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.tp-ms-trigger:hover { border-color: var(--border-strong); }
.tp-ms-trigger.has { border-color: var(--teamed-teal); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); }
.tp-ms-trigger .cnt { font-size: 11px; font-weight: var(--fw-bold); background: var(--teamed-teal); color: #fff; border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.tp-ms-trigger .chev svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.tp-ms-trigger.open .chev svg { transform: rotate(180deg); }
.tp-ms-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: 8px; }
.tp-ms-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--fg-1); cursor: pointer; user-select: none; }
.tp-ms-opt:hover { background: var(--bg-2); }
.tp-ms-opt-lbl { flex: 1; }
.tp-ms-opt-ct { font-size: 11.5px; color: var(--fg-3); }
.tp-ms-box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.tp-ms-box svg { width: 11px; height: 11px; opacity: 0; }
.tp-ms-opt.sel .tp-ms-box, .b-check.sel .tp-ms-box { background: var(--teamed-teal); border-color: var(--teamed-teal); }
.tp-ms-opt.sel .tp-ms-box svg, .b-check.sel .tp-ms-box svg { opacity: 1; }
.tp-ms-radio { width: 17px; height: 17px; border-radius: 999px; border: 1.5px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; }
.tp-ms-radio .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--teamed-teal); opacity: 0; }
.tp-ms-radio-opt.sel .tp-ms-radio { border-color: var(--teamed-teal); }
.tp-ms-radio-opt.sel .tp-ms-radio .dot { opacity: 1; }

/* segmented + range */
.tp-seg { display: flex; padding: 3px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-md); margin-bottom: 14px; }
.tp-seg button { flex: 1; font: var(--fw-medium) 12.5px/1 var(--font-sans); color: var(--fg-2); background: none; border: none; padding: 7px 13px; border-radius: 6px; cursor: pointer; }
.tp-seg button.on { background: #fff; color: var(--teamed-teal-dark); box-shadow: var(--shadow-card); font-weight: var(--fw-semibold); }
.tp-range { padding: 4px 2px; }
.tp-range-track { position: relative; height: 4px; background: var(--border-1); border-radius: 999px; margin: 18px 6px 8px; }
.tp-range-fill { position: absolute; height: 100%; background: var(--teamed-teal); border-radius: 999px; }
.tp-range input[type=range] { position: absolute; top: -8px; left: 0; width: 100%; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; margin: 0; height: 20px; }
.tp-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--teamed-teal); cursor: pointer; box-shadow: var(--shadow-card); }
.tp-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--teamed-teal); cursor: pointer; }
.tp-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); font-weight: var(--fw-medium); }

/* ============================================================ STICKY FILTER BAR */
.fb { position: sticky; top: 0; z-index: 50; background: var(--bg-1); border-bottom: 1px solid var(--border-1); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; padding: 22px 30px 18px; transition: padding var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard); }
.fb.compact { padding: 9px 30px; box-shadow: 0 6px 20px rgba(26,43,42,0.06); }
.fb-row1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fb-search { flex: 1; min-width: 220px; max-width: 440px; }
.fb-row1-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.fb-pillwrap { overflow: visible; transition: max-height .28s var(--ease-standard), opacity .2s, margin .22s; max-height: 800px; opacity: 1; margin-top: 12px; }
.fb-pillwrap.hidden { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; pointer-events: none; }
.fb-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.fb-more { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: var(--fw-semibold) 13px/1 var(--font-sans); color: var(--teamed-teal-dark); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: #fff; padding: 9px 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.fb-more:hover { border-color: var(--teamed-teal); }
.fb-more .chev svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.fb-more.open .chev svg { transform: rotate(180deg); }
.fb-more.has { border-style: solid; border-color: var(--teamed-teal); background: var(--teamed-teal-light); }
.fb-more .cnt { font-size: 11px; font-weight: var(--fw-bold); background: var(--teamed-teal); color: #fff; border-radius: 999px; min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }

.fb-morepanel { margin-top: 14px; padding: 20px 22px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 26px; align-items: start; }
.fb-mcol { min-width: 0; }
.b-subhead { font: var(--fw-bold) 10px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-accent); margin: 0 2px 8px; }
.b-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: var(--fg-1); }
.b-check > span:nth-child(2) { flex: 1; min-width: 0; }
.b-check:hover { background: rgba(0,168,150,0.06); }
.b-check .tp-ms-box { width: 16px; height: 16px; margin-top: 1px; }
.b-check .ct { margin-left: auto; font-size: 11.5px; color: var(--fg-3); }

.fb-active { margin-top: 12px; }
.fb.compact .fb-active { margin-top: 8px; }

.fb-filtersbtn { white-space: nowrap; }
.fb-filtersbtn .tp-ico svg { width: 15px; height: 15px; }

/* location popover bits */
.tp-loc-search { position: relative; margin-bottom: 4px; }
.tp-loc-search .tp-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-3); }
.tp-loc-search .tp-ico svg { width: 13px; height: 13px; }
.tp-loc-search input { width: 100%; font: 400 13px/1.3 var(--font-sans); color: var(--fg-1); padding: 9px 12px 9px 34px; border: 1px solid var(--border-1); border-radius: var(--radius-sm); background: #fff; outline: none; }
.tp-loc-search input:focus { border-color: var(--teamed-teal); box-shadow: var(--shadow-focus); }
.tp-loc-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; background: var(--teamed-teal-light); border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.45; color: var(--teamed-teal-dark); }
.tp-loc-note .tp-ico { margin-top: 1px; }
.tp-loc-note .tp-ico svg { width: 13px; height: 13px; }

/* level pill + activity */
.tp-level { font: var(--fw-semibold) 11.5px/1 var(--font-sans); color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-1); padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.tp-activity { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: var(--fw-medium) 12.5px/1 var(--font-sans); }
.tp-activity .tp-ico svg { width: 13px; height: 13px; opacity: .85; }
.tp-activity.now { color: var(--teamed-teal-dark); font-weight: var(--fw-semibold); }
.tp-activity.mid { color: var(--teamed-teal-dark); }
.tp-activity.old { color: var(--fg-3); }

/* ============================================================ ROWS */
.c-rows { display: flex; flex-direction: column; gap: 12px; }
.c-row { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: 20px 24px; display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(0, 1.45fr) minmax(176px, auto); gap: 28px; align-items: center; transition: transform var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard), border-color var(--dur-normal) var(--ease-standard); cursor: pointer; position: relative; }
.c-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--teamed-teal); }
.c-row:focus-visible { outline: 2px solid var(--teamed-teal); outline-offset: 2px; }
.c-row-id { display: flex; gap: 15px; align-items: flex-start; min-width: 0; }
.c-row-idmain { min-width: 0; }
.c-row-id .name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--fw-semibold) 16px/1.2 var(--font-sans); color: var(--fg-1); }
.c-row-id .role { font-family: var(--font-display); font-size: 16px; color: var(--teamed-teal-dark); margin: 2px 0 11px; line-height: 1.2; }
.c-row-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.c-row-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-row-skills { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.b-block-lbl { font: var(--fw-bold) 10.5px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; white-space: nowrap; }
.c-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; }
.c-row-right-top { display: flex; gap: 10px; align-items: center; }

.row-viewlink { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: var(--fw-semibold) 13px/1 var(--font-sans); color: var(--teamed-teal-dark); background: none; border: none; padding: 8px 6px; white-space: nowrap; transition: gap var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.row-viewlink .arr { transition: transform var(--dur-fast) var(--ease-standard); font-weight: var(--fw-medium); }
.c-row:hover .row-viewlink { color: var(--teamed-teal); }
.c-row:hover .row-viewlink .arr { transform: translateX(3px); }

/* Interview band — full-width sub-row on interview-stage cards (scheduled/proposed
   time, who's invited, where). Spans all grid columns onto its own line. Status
   colours mirror the drawer stamp (confirmed = teal, declined = amber). */
.c-row .rec-row-iv { grid-column: 1 / -1; margin-top: -8px; padding-top: 14px; border-top: 1px dashed var(--border-1); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.rec-iv-status { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-semibold) 13px/1.3 var(--font-sans); color: #007A6E; }
.rec-iv-status i { font-size: 13px; }
.rec-iv--declined .rec-iv-status { color: #C9772B; }
.rec-iv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.rec-iv-chip { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-medium) 12.5px/1.35 var(--font-sans); color: var(--fg-2); }
.rec-iv-chip i { font-size: 12px; color: var(--fg-3); }
.rec-iv-chip a { color: var(--teamed-teal-dark); text-decoration: none; }
.rec-iv-chip a:hover { text-decoration: underline; }
.rec-iv-more { color: var(--fg-3); }

@media (max-width: 1100px) {
  .c-row { grid-template-columns: 1fr auto; grid-template-areas: "id right" "skills skills"; row-gap: 18px; column-gap: 20px; }
  .c-row-id { grid-area: id; }
  .c-row-right { grid-area: right; align-self: start; }
  .c-row-skills { grid-area: skills; border-top: 1px solid var(--border-1); padding-top: 16px; flex-direction: row; flex-wrap: wrap; gap: 18px 32px; align-items: flex-start; }

  /* Recommended Candidates card → clean vertical stack on mobile. The generic
     2-col grid crammed the Yes/Maybe/Pass decision into the top-right cell where
     it overlapped the title, and left Recruiter insights misaligned. For rec
     rows only: name/title on top, recruiter insights full-width, then View
     profile + the decision thumbs in their own full-width row at the bottom. */
  .c-row.rec-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    position: relative;
  }
  .c-row.rec-row .c-row-id { order: 0; }
  /* Reserve room on the name line for the pinned View profile link. */
  .c-row.rec-row .c-row-idmain .name { padding-right: 112px; }
  /* Left-align the recruiter insights: label, write-up + chips stacked. */
  .c-row.rec-row .c-row-skills { order: 1; width: 100%; flex-direction: column; align-items: flex-start; gap: 10px; }
  .c-row.rec-row .c-row-right {
    order: 2; flex-direction: column; align-items: stretch; gap: 12px;
    border-top: 1px solid var(--border-1); padding-top: 14px;
  }
  /* View profile pinned top-right, beside the candidate name. */
  .c-row.rec-row .row-viewlink { position: absolute; top: 20px; right: 22px; }
  .c-row.rec-row .rec-decide { align-items: stretch; }
  .c-row.rec-row .rec-decide .b-block-lbl { text-align: left; }
  .c-row.rec-row .rec-votes { justify-content: flex-start; }

  .fb-morepanel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tp-host .main { padding: 16px; }
  .fb, .tp-body { padding-left: 16px; padding-right: 16px; }
  .fb-morepanel { grid-template-columns: 1fr; }

  /* ---- Talent Pool card: single-column phone layout ----
     The ≤1100 grid keeps an "id | right" row, so on a phone the heart +
     View profile + recency column squeezes the name/title into ugly 2–3 line
     wraps. Stack everything: identity → skills → footer. Heart pins to the
     card's top-right corner; View profile + "Active" become a left-aligned
     footer row. */
  .c-row { grid-template-columns: 1fr; grid-template-areas: "id" "skills" "right"; gap: 14px; padding: 18px; }
  .c-row-id { grid-area: id; gap: 13px; }
  .c-row-idmain { padding-right: 42px; }            /* clear the pinned heart */
  .c-row-id .name { font-size: 16px; }
  .c-row-id .role { font-size: 15px; margin: 2px 0 9px; }

  .c-row .tp-fav { position: absolute; top: 15px; right: 15px; }
  .c-row-right { grid-area: right; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px 16px; border-top: 1px solid var(--border-1); padding-top: 13px; }
  .c-row-right-top { gap: 0; }                       /* heart is now pinned, leaving View profile */
  .row-viewlink { padding: 0; font-size: 14px; }
  .c-row-right .teamed-sched-status { margin-top: 0; }
}

/* ============================================================ PROFILE DRAWER */
.pd-root { position: fixed; inset: 0; z-index: 99999; visibility: hidden; pointer-events: none; font-family: var(--font-sans); }
.pd-root.open { visibility: visible; }
.pd-scrim { position: absolute; inset: 0; background: rgba(26,43,42,0.18); opacity: 0; transition: opacity var(--dur-slow) var(--ease-standard); pointer-events: none; }
.pd-root.open .pd-scrim { opacity: 1; pointer-events: auto; }
.pd-panel { position: absolute; top: 0; right: 0; height: 100%; width: 75vw; max-width: 1100px; min-width: 320px; background: var(--bg-1); box-shadow: -16px 0 48px rgba(26,43,42,0.18); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-standard); display: flex; flex-direction: column; pointer-events: auto; }
.pd-root.open .pd-panel { transform: translateX(0); }
/* Hiring: the in-context hire form (js/hire-drawer-open.js) opens as a 780px
   panel on the right; the candidate profile slides to cover the talent pool on
   the left and shrinks to meet it (geometry animated inline by the JS; this is
   the resting fallback). Scrim hides since the profile fills the left. While
   hiring the profile is display-only so its prev/next can't desync the form. */
@media (min-width: 1024px) {
  .pd-root.tw-hiring .pd-panel { left: 0; right: auto; width: calc(100vw - 780px); max-width: none; }
}
.pd-root.tw-hiring .pd-panel { pointer-events: none; }
.pd-root.tw-hiring .pd-scrim { opacity: 0; pointer-events: none; }

.pd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--border-1); flex: none; background: var(--bg-2); }
.pd-breadcrumb { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; font: var(--fw-semibold) 13.5px/1 var(--font-sans); color: var(--fg-2); }
.pd-breadcrumb:hover { color: var(--teamed-teal-dark); }
.pd-breadcrumb svg { width: 16px; height: 16px; }
.pd-nav { display: flex; align-items: center; gap: 8px; }
.pd-navpos { font: var(--fw-semibold) 13px/1 var(--font-sans); color: var(--fg-2); margin-right: 4px; white-space: nowrap; }
.pd-navpos .of { color: var(--fg-3); font-weight: var(--fw-regular); }
.pd-navbtn, .pd-close { width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border-1); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fg-2); transition: all var(--dur-fast) var(--ease-standard); padding: 0; }
.pd-navbtn:hover:not(:disabled), .pd-close:hover { border-color: var(--teamed-teal); color: var(--teamed-teal-dark); }
.pd-navbtn:disabled { opacity: .4; cursor: default; }
.pd-navbtn svg, .pd-close svg { width: 16px; height: 16px; }

.pd-scroll { overflow-y: auto; flex: 1; }
.pd-loading { padding: 80px 40px; text-align: center; color: var(--fg-3); font-size: 14px; }

/* Identity block (avatar + name + status + title + level) lives at the top of
   the hero's left column. Actions sit up on the Notes row (.pd-headacts). */
.pd-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pd-titlerow .pd-title { margin-top: 0; }
.pd-headacts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; }
.pd-headacts .tp-btn { padding: 10px 16px; font-size: 13.5px; }
.pd-hire { background: var(--teamed-dark); color: #fff; padding: 10px 24px; }
.pd-hire:hover { background: #0f1c1b; color: #fff; }

/* notes accordion */
/* Notes row: toggle on the left (takes the slack), action buttons on the
   right, both inline; the notes body wraps to its own full-width line below. */
.pd-notes { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; padding: 0 40px; border-bottom: 1px solid var(--border-1); }
.pd-notes-h { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 0; background: none; border: none; cursor: pointer; text-align: left; }
.pd-notes-lbl { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-bold) 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-accent); flex: none; }
.pd-notes-lbl svg { width: 13px; height: 13px; }
.pd-notes-empty { font-size: 13.5px; color: var(--fg-3); font-style: italic; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-notes-chev { color: var(--fg-3); display: inline-flex; transition: transform var(--dur-fast) var(--ease-standard); }
.pd-notes-chev svg { width: 14px; height: 14px; }
.pd-notes-chev.open { transform: rotate(180deg); }
.pd-notes-body { flex: 0 0 100%; padding: 0 0 16px; }
.pd-notes-body textarea { width: 100%; min-height: 72px; resize: vertical; font: 400 14px/1.5 var(--font-sans); color: var(--fg-1); padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: #fff; outline: none; }
.pd-notes-body textarea:focus { border-color: var(--teamed-teal); box-shadow: var(--shadow-focus); }
/* Notes — multi-note, team-shared (matches the full candidate profile). */
.pd-notes-help { font-size: 12px; color: var(--fg-3); margin: 0 0 12px; }
.pd-notes-num { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font: var(--fw-bold) 10px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border-radius: 999px; margin-left: 6px; }
.pd-note-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-note-item { padding: 11px 13px; background: #F7FBFA; border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.pd-note-itemmeta { font-size: 11.5px; color: var(--fg-3); margin-bottom: 4px; }
.pd-note-itemmeta strong { color: var(--fg-1); font-weight: var(--fw-semibold); }
.pd-note-itembody { font: 400 13.5px/1.5 var(--font-sans); color: var(--fg-1); white-space: pre-wrap; word-break: break-word; }
.pd-note-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.pd-note-add { font: var(--fw-semibold) 13px/1 var(--font-sans); color: #fff; background: var(--teamed-teal); border: none; border-radius: var(--radius-md); padding: 9px 18px; cursor: pointer; transition: background .15s; }
.pd-note-add:hover { background: var(--teamed-teal-dark); }
.pd-note-add:disabled { opacity: .6; cursor: default; }

.pd-hero { display: grid; grid-template-columns: 1fr 340px; gap: 44px; padding: 32px 40px 8px; align-items: start; }
.pd-hero-main { min-width: 0; }
.pd-hero-id { display: flex; gap: 22px; align-items: center; }
.pd-hero-id .tp-av { box-shadow: var(--shadow-card); }
.pd-hero-idmain { min-width: 0; }
.pd-namerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-namerow h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.05; margin: 0; font-weight: 400; color: var(--fg-1); }
.pd-title { font-family: var(--font-display); font-size: 19px; color: var(--teamed-teal-dark); margin-top: 5px; }
.pd-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

.pd-snapshot { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-xl); padding: 8px 20px 16px; }
.pd-snap-hd { font: var(--fw-bold) 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); padding: 16px 0 6px; }
.pd-snapshot .pd-fact { padding: 13px 0; }
.pd-snapshot .pd-fact-v { text-align: right; }
.pd-sub { font-size: 12.5px; color: var(--fg-3); font-weight: 400; margin-top: 3px; }
.pd-rate-box { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-md); }
.pd-rate-box span { font-size: 12.5px; color: var(--fg-3); }
.pd-rate-box strong { font: var(--fw-semibold) 18px/1 var(--font-sans); color: var(--fg-1); }
.pd-rate-box .u { font-weight: 400; font-size: 13px; color: var(--fg-3); }
/* Recruitment rate box — stacked Pay rate / Bill rate rows. */
.pd-rate-box--rec { display: block; padding: 6px 16px; }
.pd-rate-box--rec .pd-rate-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; }
.pd-rate-box--rec .pd-rate-row + .pd-rate-row { border-top: 1px solid var(--border-1); }
.pd-rate-box--rec span { font-size: 12.5px; color: var(--fg-3); }
.pd-rate-box--rec strong { font: var(--fw-semibold) 17px/1 var(--font-sans); color: var(--fg-1); }
.pd-rate-box--rec .u { font-weight: 400; font-size: 13px; color: var(--fg-3); }

.pd-section { margin-top: 28px; }
.pd-section--flush { margin-top: 0; }
.pd-section h4 { font: var(--fw-bold) 11px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 13px; }
.pd-divide { height: 1px; background: var(--border-1); margin: 30px 40px 26px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; padding: 0 40px; }
/* Work + Credentials: right column matches the Snapshot card width (340px) so
   Credentials sits in the same proportion/column as Snapshot above it. */
.pd-grid--aside { grid-template-columns: minmax(0,1fr) 340px; gap: 0 44px; }
.pd-full { padding: 0 40px; }
.pd-col { min-width: 0; }
.pd-muted { font-size: 13.5px; color: var(--fg-3); }
.pd-about { font-size: 14px; line-height: 1.7; color: var(--fg-2); }
.pd-about p { margin: 0 0 12px; }

.pd-tag { display: inline-flex; align-items: center; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border: 1px solid rgba(0,168,150,0.18); padding: 7px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
/* Skills = neutral gray, Tools = teal (matches the job-seeker profile chips). */
.pd-tag--skill { color: var(--fg-2); background: #F1F5F4; border-color: var(--border-1); }
.pd-tag--tool  { color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border-color: rgba(0,168,150,0.18); }

/* collapsible long lists (skills / tools / credentials) */
.pd-more { display: none; }
.pd-more.is-open { display: contents; }
/* Scoped to .pd-creds so the hidden rule out-specifies `.pd-creds{display:flex}`
   below — otherwise that later rule revealed the collapsed credentials and all
   of them showed instead of the first 3 + "Show all". */
.pd-creds.pd-more-block { display: none; }
.pd-creds.pd-more-block.is-open { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.pd-showall { margin-top: 12px; font: var(--fw-semibold) 13px/1 var(--font-sans); color: var(--teamed-teal-dark); background: none; border: none; cursor: pointer; padding: 4px 0; }
.pd-showall:hover { color: var(--teamed-teal); }

.pd-fact { display: flex; gap: 16px; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--border-1); }
.pd-fact:first-of-type { border-top: none; }
.pd-fact-l { flex: none; font-size: 12.5px; color: var(--fg-3); }
.pd-fact-v { font: var(--fw-medium) 13.5px/1.4 var(--font-sans); color: var(--fg-1); }

.pd-count { font: var(--fw-bold) 10px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border-radius: 999px; padding: 3px 8px; margin-left: 6px; vertical-align: middle; }
/* Work samples — 2-column portrait cards matching the recruitment profile view */
.pd-works { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-work { display: flex; flex-direction: column; border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: all var(--dur-normal) var(--ease-standard); }
.pd-work:hover { border-color: var(--teamed-teal); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pd-work-thumb { width: 100%; aspect-ratio: 16/9; flex: none; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.9); overflow: hidden; }
.pd-work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-work-thumb svg { width: 28px; height: 28px; }
.pd-work-thumb.t0 { background: linear-gradient(135deg, #7FD3C7, #00A896); }
.pd-work-thumb.t1 { background: linear-gradient(135deg, #2A4E4B, #1A2B2A); }
.pd-work-thumb.t2 { background: linear-gradient(135deg, #E3C77A, #C99A2E); }
.pd-work-body { padding: 10px 12px; min-width: 0; flex: 1; }
.pd-work-title { font: var(--fw-semibold) 13.5px/1.25 var(--font-sans); color: var(--teamed-teal-dark); }
.pd-work-body p { font-size: 12px; color: var(--fg-2); line-height: 1.5; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pd-creds { display: flex; flex-direction: column; gap: 16px; }
.pd-cred { display: flex; gap: 12px; align-items: flex-start; }
.pd-cred .tp-ico { color: var(--teamed-teal-dark); margin-top: 1px; }
.pd-cred-ico svg { width: 20px; height: 20px; }
.pd-cred-t { font: var(--fw-semibold) 14px/1.3 var(--font-sans); color: var(--fg-1); }
.pd-cred-s { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.pd-cred--expired .tp-ico { color: var(--fg-4, #9aa3a1); }
.pd-cred--expired .pd-cred-t { color: var(--fg-3); }
.pd-cred--expired .pd-cred-s { color: var(--fg-4, #9aa3a1); }

.pd-accs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; align-items: start; }
.pd-acc { display: flex; gap: 10px; align-items: flex-start; }
.pd-acc-star { flex: none; color: var(--teamed-teal-dark); margin-top: 1px; }
.pd-acc-t { font: var(--fw-semibold) 14px/1.45 var(--font-sans); color: var(--fg-1); }
.pd-acc-m { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }

/* AI capability — drawer block (mirrors the profile's language) */
.pd-ai { display: flex; flex-direction: column; gap: 12px; }
.pd-ai-left { min-width: 0; }
/* When the candidate shared words/guardrails, split the section: stance +
   surfaces + Backed-by on the left, "In their words / Where they hold back"
   in a right column matching the Snapshot/Credentials width (fills the
   otherwise-empty right side). */
.pd-ai--split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 0 44px; align-items: start; }
.pd-ai-top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pd-ai-disp { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-1); padding: 6px 11px; border-radius: var(--radius-pill); }
.pd-ai-disp .tp-ico svg { width: 13px; height: 13px; }
.pd-ai-headline { display: inline-flex; align-items: baseline; gap: 7px; font: var(--fw-medium) 15px/1.3 var(--font-sans); color: var(--fg-1); }
.pd-ai-headline strong { font-weight: var(--fw-bold); }
.pd-ai-headline .tp-ico { align-self: center; }
.pd-ai-headline .tp-ico svg { width: 15px; height: 15px; }
.pd-ai-freq { color: var(--fg-3); font-weight: var(--fw-medium); }
.pd-ai-also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pd-ai-also-lbl { font-size: 12px; color: var(--fg-3); margin-right: 2px; }
.pd-ai-pill { display: inline-flex; align-items: center; gap: 5px; font: var(--fw-medium) 12px/1 var(--font-sans); color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-1); padding: 6px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.pd-ai-pill--flag { color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border-color: rgba(0,168,150,0.16); }
.pd-ai-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-ai-backed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 11px 0; border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.pd-ai-backed-lbl { font-size: 12px; color: var(--fg-3); }
.pd-ai-bk { display: inline-flex; align-items: center; gap: 5px; font: var(--fw-medium) 12.5px/1 var(--font-sans); }
.pd-ai-bk .tp-ico svg { width: 13px; height: 13px; }
.pd-ai-bk.is-on { color: var(--teamed-teal-dark); }
.pd-ai-bk.is-on .tp-ico { color: var(--teamed-teal); }
.pd-ai-bk.is-off { color: var(--fg-3); }
.pd-ai-bk.is-off .tp-ico { color: #C9A227; }
.pd-ai-words { min-width: 0; }
.pd-ai-qlbl { font: var(--fw-bold) 10.5px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.pd-ai-qlbl--gap { margin-top: 18px; }
.pd-ai-quote p { font: var(--fw-medium) 14px/1.6 var(--font-sans); color: var(--fg-1); margin: 0; }
/* Reframed AI block (2026-06-26) — matches the candidate + client profile card. */
.pd-ai-stance { display: inline-flex; align-items: center; gap: 7px; font: var(--fw-semibold) 16px/1.3 var(--font-sans); color: var(--fg-1); }
.pd-ai-stance .tp-ico { color: var(--teamed-teal-dark); }
.pd-ai-stance .tp-ico svg { width: 14px; height: 14px; }
.pd-ai-stance--none { color: var(--fg-3); font-weight: var(--fw-medium); }
.pd-ai-stance-sub { font-size: 12.5px; line-height: 1.4; color: var(--fg-3); margin: 6px 0 0; }
.pd-ai-facts { display: flex; flex-direction: column; gap: 7px; }
.pd-ai-fact { display: flex; align-items: flex-start; gap: 8px; font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--fg-1); }
.pd-ai-fact .tp-ico { color: var(--teamed-teal-dark); flex: none; margin-top: 1px; }
.pd-ai-fact .tp-ico svg { width: 14px; height: 14px; }
.pd-ai-fact strong { font-weight: var(--fw-bold); }
.pd-ai-ev-items { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-ai-ev-link { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-medium) 12.5px/1 var(--font-sans); color: var(--teamed-teal-dark); text-decoration: none; border: 1px solid var(--border-1); border-radius: 8px; padding: 6px 10px; }
.pd-ai-ev-link:hover { border-color: var(--teamed-teal); background: var(--teamed-teal-light); }
.pd-ai-ev-link .tp-ico svg { width: 13px; height: 13px; }
.pd-ai-hold { display: flex; gap: 10px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 12px 14px; }
.pd-ai-hold .tp-ico { color: var(--teamed-teal); flex: none; margin-top: 1px; }
.pd-ai-hold p { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* AI capability — compact card chip */
.tp-ai-chip { display: inline-flex; align-items: center; gap: 5px; font: var(--fw-semibold) 11.5px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border: 1px solid rgba(0,168,150,0.18); padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.tp-ai-chip .tp-ico { color: var(--teamed-teal); }
.tp-ai-chip .tp-ico svg { width: 13px; height: 13px; }

.pd-jobs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 13px; }
.pd-jobs-head h4 { margin: 0; }
.pd-ind-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-ind-chip { display: inline-flex; align-items: center; font: var(--fw-semibold) 11.5px/1 var(--font-sans); color: var(--teamed-teal-dark); background: var(--teamed-teal-light); border: 1px solid rgba(0,168,150,0.22); padding: 5px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.pd-ind-chip-m { font-weight: 500; opacity: 0.7; margin-left: 5px; font-size: 10.5px; }
.pd-jobs { display: flex; flex-direction: column; }
.pd-job { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border-1); }
.pd-job:first-child { border-top: none; padding-top: 4px; }
.pd-job-mark { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: var(--radius-md); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font: var(--fw-semibold) 17px/1 var(--font-display); }
/* Company logo (when available) sits over the initial fallback (which shows if
   the logo errors out via onerror). */
.pd-job-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pd-job-role { font: var(--fw-semibold) 15.5px/1.2 var(--font-sans); color: var(--fg-1); }
.pd-job-meta { font-size: 13px; color: var(--fg-3); margin-top: 3px; }
.pd-job-body p { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; margin: 9px 0 0; max-width: 760px; }

.pd-scrollinner { padding-bottom: 48px; }

@media (max-width: 1000px) {
  .pd-panel { width: 92vw; }
  .pd-hero { grid-template-columns: 1fr; gap: 28px; }
  .pd-grid { grid-template-columns: 1fr; gap: 0; }
  .pd-grid--aside { grid-template-columns: 1fr; }
  .pd-grid .pd-col + .pd-col .pd-section { margin-top: 28px; }
  .pd-accs { grid-template-columns: 1fr; gap: 14px; }
  .pd-ai--split { grid-template-columns: 1fr; gap: 16px 0; }

  /* Action bar: the Notes label + the votes/Schedule/Message/Hire cluster shared
     one row, and .pd-headacts was flex:0 0 auto (non-shrinking) so the buttons
     ran off the right of the drawer. Reduce the row's side padding, put Notes
     and the actions on their own full-width rows, and let the action buttons
     wrap so Schedule interview / Message / Hire stay within the frame. */
  .pd-notes { padding: 0 20px; }
  .pd-notes-h { flex: 1 1 100%; order: 1; }
  /* Notes body opens directly under the NOTES toggle (was rendering below the
     action buttons, which read as a "strange location" disconnected from the
     button). Order: toggle → notes body → actions → interview stamp. */
  .pd-notes-body { order: 2; }
  /* Separator line between the NOTES area and the decision/action buttons. */
  .pd-headacts {
    flex: 1 1 100%; margin: 0; order: 3; flex-wrap: wrap; gap: 8px;
    border-top: 1px solid var(--border-1); margin-top: 6px; padding-top: 12px;
  }
  .pd-notes .pd-sched-stamp { order: 4; }
  /* Row 1: Yes/Maybe/Pass + heart. Force a flex row-break, then Row 2:
     Schedule interview / Message / Hire share a single line (Hire beside
     Message rather than orphaned below). */
  .pd-headacts .pd-rec-votes { order: 0; flex: 1 1 auto; }
  .pd-headacts .tp-fav { order: 0; flex: 0 0 auto; }
  .pd-headacts::before { content: ''; flex-basis: 100%; height: 0; order: 1; }
  .pd-headacts .teamed-sched-open,
  .pd-headacts .teamed-msg-open,
  .pd-headacts .pd-hire { order: 2; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .pd-headacts .tp-btn,
  .pd-headacts .pd-hire { padding: 9px 12px; font-size: 13px; }
}

/* Inline schedule popup must sit ABOVE the candidate drawer (.pd-root z-index
   99999) and the message overlay (100000) — its base z-index is only 999. */
.tp-schedule-popup { z-index: 100001; }
.tp-schedule-popup .popup-head .teammate-info { display: flex; align-items: center; gap: 12px; }
.tp-schedule-popup .tp-sched-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* Interview-sent stamp on the Notes row (full-width line below the actions). */
.pd-notes .pd-sched-stamp { flex: 0 0 100%; padding: 2px 0 10px; }
.c-row-right .teamed-sched-status { margin-top: 6px; }

/* =====================================================================
 * RECRUITMENT — per-job "Recommended Candidates" list.
 * Reuses the Talent Pool .c-row look for visual consistency; adds the
 * recruiter write-up teaser + Yes/Maybe/Pass decisions. Loaded on
 * portal-job singles via teamed_tp_enqueue().
 * ================================================================== */

/* Section header */
.rec-cand-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin: 4px 0 18px; }
.rec-cand-title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; color: var(--fg-1); margin: 0; }
.rec-cand-sub { font-size: 13.5px; color: var(--fg-3); margin: 4px 0 0; }

/* Row: three balanced columns (id | recruiter insights | decision) */
.c-row.rec-row { grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr) minmax(220px, auto); cursor: default; align-items: stretch; }
.c-row.rec-row .c-row-id,
.c-row.rec-row .c-row-skills { cursor: pointer; }
.c-row.rec-row .c-row-skills { justify-content: center; }

/* Recruiter insights: short teaser + recruiter-selected tags */
.rec-writeup-teaser { font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0 0 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-writeup-teaser.rec-muted { color: var(--fg-3); font-style: italic; }

/* Right column: View profile on top, decisions below */
.c-row.rec-row .c-row-right { gap: 14px; justify-content: center; }
.rec-decide { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rec-decide .b-block-lbl { margin-bottom: 0; }

/* Decision pills — restyled to match the new look (overrides dash-style.css).
   Functional markup kept: .teammate-vote-wrap/.vote-btn[vote-val]/.count. */
.c-row.rec-row .rec-votes { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.c-row.rec-row .rec-votes .vote-btn {
  margin: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  color: var(--fg-2); font: var(--fw-semibold) 12px/1 var(--font-sans);
  padding: 8px 12px; transition: all var(--dur-fast) var(--ease-standard);
}
.c-row.rec-row .rec-votes .vote-btn > i { margin: 0; font-size: 12px; color: inherit; }
.c-row.rec-row .rec-votes .vote-btn .count {
  width: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--bg-2); color: var(--fg-3);
  font: var(--fw-semibold) 10px/16px var(--font-sans); display: inline-flex;
  align-items: center; justify-content: center;
}
.c-row.rec-row .rec-votes .vote-yes:hover   { border-color: #1FA971; color: #1B8A5E; background: #ECFAF3; }
.c-row.rec-row .rec-votes .vote-maybe:hover  { border-color: #D9AE45; color: #9A6D12; background: #FCF6E6; }
.c-row.rec-row .rec-votes .vote-no:hover     { border-color: #DD8A8A; color: #B23B3B; background: #FBEDED; }
.c-row.rec-row .rec-votes .vote-btn:hover > i { color: inherit; }

/* Candidate drawer vote group ("Your decision" — Yes/Maybe/Pass) — mirrors the
   list buttons; sits at the left of the drawer action row. */
.pd-rec-votes { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; }
.pd-rec-votes .vote-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  color: var(--fg-2); font: var(--fw-semibold) 12px/1 var(--font-sans);
  padding: 9px 13px; transition: all var(--dur-fast) var(--ease-standard);
}
.pd-rec-votes .vote-btn > i { font-size: 12px; color: inherit; }
.pd-rec-votes .vote-btn .count { width: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bg-2); color: var(--fg-3); font: var(--fw-semibold) 10px/16px var(--font-sans); display: inline-flex; align-items: center; justify-content: center; }
.pd-rec-votes .vote-yes:hover  { border-color: #1FA971; color: #1B8A5E; background: #ECFAF3; }
.pd-rec-votes .vote-maybe:hover { border-color: #D9AE45; color: #9A6D12; background: #FCF6E6; }
.pd-rec-votes .vote-no:hover    { border-color: #DD8A8A; color: #B23B3B; background: #FBEDED; }
/* Active = the current user's recorded decision (list + drawer; specificity must
   beat the per-context base .vote-btn rules). */
.c-row.rec-row .rec-votes .vote-yes.is-active,   .pd-rec-votes .vote-yes.is-active   { border-color: #1FA971; color: #1B8A5E; background: #ECFAF3; }
.c-row.rec-row .rec-votes .vote-maybe.is-active, .pd-rec-votes .vote-maybe.is-active { border-color: #D9AE45; color: #9A6D12; background: #FCF6E6; }
.c-row.rec-row .rec-votes .vote-no.is-active,    .pd-rec-votes .vote-no.is-active    { border-color: #DD8A8A; color: #B23B3B; background: #FBEDED; }
.rec-votes.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 900px) {
  .c-row.rec-row { grid-template-columns: 1fr auto; grid-template-areas: "id right" "skills skills"; }
  .c-row.rec-row .c-row-right { grid-area: right; align-self: start; }
  .c-row.rec-row .rec-decide { align-items: flex-start; }
  .c-row.rec-row .rec-votes { justify-content: flex-start; }
}

/* Recruitment funnel tabs (New / Yes / Maybe / Pass / Interview / Offer) */
.rec-funnel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; border-bottom: 1px solid var(--border-1); padding-bottom: 14px; }
.rec-funnel-tab {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  color: var(--fg-2); font: var(--fw-semibold) 13px/1 var(--font-sans);
  padding: 8px 14px; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard);
}
.rec-funnel-tab:hover { border-color: var(--teamed-teal); color: var(--teamed-teal-dark); }
.rec-funnel-tab .rec-funnel-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bg-2); color: var(--fg-3);
  font: var(--fw-semibold) 10.5px/18px var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
}
.rec-funnel-tab.is-active { background: var(--teamed-teal); border-color: var(--teamed-teal); color: #fff; }
.rec-funnel-tab.is-active .rec-funnel-count { background: rgba(255,255,255,0.25); color: #fff; }
.rec-empty-stage { color: var(--fg-3); font-size: 14px; padding: 28px 4px; text-align: center; }

/* Recruitment drawer: full recruiter write-up block */
.pd-rec-writeup .pd-rec-writeup-body { font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.pd-rec-writeup-body p { margin: 0 0 10px; }
.pd-rec-writeup-body p:last-child { margin-bottom: 0; }
.pd-rec-writeup-body ul, .pd-rec-writeup-body ol { margin: 0 0 10px; padding-left: 20px; }
.pd-rec-writeup-body li { margin: 0 0 5px; }
.pd-rec-writeup-body strong, .pd-rec-writeup-body b { color: var(--fg-1); font-weight: var(--fw-semibold); }
.pd-rec-writeup-body a { color: var(--teamed-teal-dark); text-decoration: underline; }

/* Recruitment: Job Description / Hiring Info drawer links + facts */
.rec-info-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rec-info-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-md);
  color: var(--teamed-teal-dark); font: var(--fw-semibold) 13px/1 var(--font-sans);
  padding: 9px 14px; cursor: pointer; transition: all var(--dur-fast) var(--ease-standard);
}
.rec-info-link:hover { border-color: var(--teamed-teal); background: var(--teamed-teal-light); }
.rec-info-link svg { width: 15px; height: 15px; }
.pd-facts { display: flex; flex-direction: column; gap: 2px; }
.pd-facts .pd-fact { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--border-1); }
.pd-facts .pd-fact:last-child { border-bottom: 0; }
.pd-facts .pd-fact-l { color: var(--fg-3); font-size: 13px; }
.pd-facts .pd-fact-v { color: var(--fg-1); font-size: 13.5px; font-weight: var(--fw-medium); text-align: right; }
.pd-muted { color: var(--fg-3); font-size: 14px; }