/* TVP CLIENT COMPONENT SHEET — one set of parts for every page a client signs in to
   (client-portal.html, hotline.html, and the panels client-express.js / client-verify.js / client-credits.js print into them).
   Director's UI upgrade notice, 1 Oct 2026. Linked AFTER /assets/tvp-tokens.css and /assets/tvp-interact.css.

   RULES OF THIS SHEET
   · Brand is locked: every colour, radius, shadow, space and face is a --tvp- token. No hex, no new colour, no new font.
   · Hierarchy before decoration: one ground (paper), one surface (white card, hairline border), no shadow at rest,
     no card inside a card. Pills are for status only. One filled button per group.
   · Spacing is the token scale (4 · 8 · 12 · 16 · 20 · 24 · 28 · 40). Nothing in between.
   · Status never rests on colour alone: every badge carries its words, the key ones an icon.
   · Text is never lighter than --tvp-muted-2, and sits on solid grounds only (the readability audit averages gradients).
   Parts, in order: base · icons · shell · page · surfaces · buttons · badges · avatar · forms · toolbar · alerts ·
   empty · skeleton · table · pager · popover/menu · dialog · toast · mandate list · tracker · candidate · interview ·
   agreement · updates · sign-in · hotline thread · responsive. */

:root{
 --navy:var(--tvp-navy);--steel:var(--tvp-steel);--steel-l:var(--tvp-steel-tint);
 --bg:var(--tvp-paper);--card:var(--tvp-surface);--line:var(--tvp-hairline);--line2:var(--tvp-hairline-soft);
 --tx:var(--tvp-ink);--tx2:var(--tvp-muted);--tx3:var(--tvp-muted-2);
 --ok:var(--tvp-verified);--okbg:var(--tvp-verified-tint);--warn:var(--tvp-warning);--warnbg:var(--tvp-warning-tint);
 --neg:var(--tvp-negative);--negbg:var(--tvp-negative-tint);
 --sans:var(--tvp-font-app);--mono:var(--tvp-font-app-mono);
 --ease:cubic-bezier(.22,.61,.36,1);--bar:56px;--gut:max(var(--tvp-space-24),calc((100vw - 1200px)/2));
 /* tinted borders are mixed from the status colour and the surface — no colour of their own */
 --warn-line:color-mix(in srgb,var(--tvp-warning) 30%,var(--tvp-surface));
 --neg-line:color-mix(in srgb,var(--tvp-negative) 30%,var(--tvp-surface));
 --ok-line:color-mix(in srgb,var(--tvp-verified) 30%,var(--tvp-surface));
 --veil:color-mix(in srgb,var(--tvp-navy) 55%,transparent);
 --on-navy-hover:color-mix(in srgb,var(--tvp-on-navy) 9%,transparent);
}

/* ── base ───────────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--bar) + var(--tvp-space-24));-webkit-text-size-adjust:100%}
body{font:14.5px/1.55 var(--sans);color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px;border-radius:var(--tvp-radius-xs)}
h1,h2,h3{text-wrap:balance}
h1{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--navy)}
h2{font-size:16px;font-weight:600;letter-spacing:-.005em;line-height:1.3;color:var(--navy)}
h3{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--navy)}
a{color:var(--tvp-steel-strong)}
.muted{color:var(--tx2)}
.small{font-size:13px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.mt-12{margin-top:var(--tvp-space-12)}.mb-12{margin-bottom:var(--tvp-space-12)}
.skip{position:absolute;left:var(--tvp-space-12);top:-60px;z-index:100;background:var(--card);color:var(--navy);font-weight:600;padding:var(--tvp-space-8) var(--tvp-space-12);border-radius:var(--tvp-radius-md);box-shadow:var(--tvp-shadow-app)}
.skip:focus{top:var(--tvp-space-8)}
.lbl{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}

/* ── icons: one mask per name, drawn in the text colour (24 grid, 2px stroke). Never an emoji, never an <img>. ── */
[data-i]::before{content:"";flex:none;display:inline-block;width:16px;height:16px;background:currentColor;
 -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic{display:inline-flex;align-items:center;flex:none}
[data-i=case]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")}
[data-i=plus]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
[data-i=card]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
[data-i=bell]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
[data-i=chat]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
[data-i=file]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}
[data-i=check]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
[data-i=x]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
[data-i=cal]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
[data-i=pen]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
[data-i=lock]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
[data-i=pin]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
[data-i=up]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E")}
[data-i=dl]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E")}
[data-i=arrow]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}
[data-i=back]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
[data-i=down]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
[data-i=shield]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
[data-i=info]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
[data-i=alert]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E")}
[data-i=search]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
[data-i=grid]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='7' rx='1.5'/%3E%3C/svg%3E")}
[data-i=rows]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E")}
[data-i=user]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
[data-i=users]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E")}
[data-i=out]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
[data-i=more]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")}
[data-i=clock]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
[data-i=video]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m16 10 6-3v10l-6-3'/%3E%3C/svg%3E")}
[data-i=clip]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 14l2 2 4-4'/%3E%3C/svg%3E")}
[data-i=layers]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E")}

/* ── application shell: brand · primary navigation · one call to action · utilities · account ── */
.top{background:var(--navy);color:var(--tvp-on-navy);padding:0 var(--gut);height:var(--bar);display:flex;align-items:center;gap:var(--tvp-space-24);position:sticky;top:0;z-index:40}
.top :focus-visible{outline-color:var(--tvp-steel-silver)}
.brand{display:flex;align-items:center;gap:var(--tvp-space-10);color:var(--tvp-on-navy);text-decoration:none;flex:none}
.brand img{height:28px;width:auto;display:block}
.brand b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.brand i{display:block;font:500 11px/1.2 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--tvp-steel-silver);margin-top:2px}
.nav{flex:1;display:flex;align-items:stretch;gap:var(--tvp-space-4);min-width:0;height:100%}
/* a destination is a word with a line under the current one — never a filled button */
.nav>a{display:inline-flex;align-items:center;gap:var(--tvp-space-8);color:var(--tvp-on-navy-body);text-decoration:none;font-size:14px;font-weight:500;
 padding:0 var(--tvp-space-12);position:relative;white-space:nowrap;border-bottom:2px solid transparent;border-top:2px solid transparent;border-radius:0;
 transition:color .18s var(--ease),border-color .18s var(--ease)}
.nav>a::before{display:none}
.nav>a:hover{color:var(--tvp-on-navy)}
.nav>a.on,.nav>a[aria-current=page]{color:var(--tvp-on-navy);border-bottom-color:var(--tvp-steel-silver);font-weight:600}
.dot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--tvp-space-4);border-radius:var(--tvp-radius-pill);
 background:var(--neg);color:var(--tvp-on-navy);font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.util{display:flex;align-items:center;gap:var(--tvp-space-8);flex:none}
.cta{display:inline-flex;align-items:center;gap:var(--tvp-space-6);height:34px;padding:0 var(--tvp-space-14);border-radius:var(--tvp-radius-md);border:1px solid var(--tvp-surface);
 background:var(--tvp-surface);color:var(--navy);font:600 13.5px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.cta:hover{background:var(--tvp-steel-tint);border-color:var(--tvp-steel-tint)}
.cta::before{width:14px;height:14px}
.ub{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--tvp-radius-md);border:0;background:transparent;color:var(--tvp-on-navy-body);cursor:pointer;text-decoration:none}
.ub::before{width:18px;height:18px}
.ub:hover,.ub[aria-expanded=true]{background:var(--on-navy-hover);color:var(--tvp-on-navy)}
.ub .dot{position:absolute;top:1px;right:0;box-shadow:0 0 0 2px var(--navy)}
#creditsChip{display:inline-flex;align-items:center;height:34px;padding:0 var(--tvp-space-12);border:1px solid var(--tvp-on-navy-line);border-radius:var(--tvp-radius-md);
 color:var(--tvp-on-navy-body);font-size:13px;text-decoration:none;white-space:nowrap}
#creditsChip:hover{background:var(--on-navy-hover);color:var(--tvp-on-navy)}
#creditsChip b{color:var(--tvp-on-navy);font-weight:600}
.acct{display:inline-flex;align-items:center;gap:var(--tvp-space-8);height:40px;padding:0 var(--tvp-space-6) 0 var(--tvp-space-4);border:0;border-radius:var(--tvp-radius-md);background:transparent;
 color:var(--tvp-on-navy-body);font:500 13px/1 var(--sans);cursor:pointer;max-width:220px}
.acct:hover,.acct[aria-expanded=true]{background:var(--on-navy-hover);color:var(--tvp-on-navy)}
.acct .anm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;
 --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.anon .nav,.anon .util,.staff .nav,.staff .util{display:none}
.busy-bar{position:absolute;left:0;right:0;bottom:-2px;height:2px;overflow:hidden;opacity:0;transition:opacity .2s var(--ease)}
.busy-bar::before{content:"";position:absolute;inset:0;width:40%;background:var(--tvp-steel-glow);animation:slide 1.1s var(--ease) infinite}
.is-busy .busy-bar{opacity:1}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.preview{background:var(--warn);color:var(--tvp-on-navy);padding:var(--tvp-space-8) var(--gut);font:600 13.5px/1.45 var(--sans);display:flex;align-items:center;gap:var(--tvp-space-12);flex-wrap:wrap;position:sticky;top:var(--bar);z-index:39}
.preview button{margin-left:auto;font:600 13px var(--sans);background:var(--navy);color:var(--tvp-on-navy);border:0;border-radius:var(--tvp-radius-md);padding:var(--tvp-space-6) var(--tvp-space-12);cursor:pointer}

/* ── page frame ── */
.wrap{max-width:1200px;margin:0 auto;padding:var(--tvp-space-28) var(--tvp-space-24) 80px}
.wrap.narrow{max-width:820px}
.wrap.has-foot{padding-bottom:190px}
.crumbs{display:flex;align-items:center;gap:var(--tvp-space-6);flex-wrap:wrap;font-size:13px;color:var(--tx2);margin-bottom:var(--tvp-space-12)}
.crumbs a{color:var(--tvp-steel-strong);text-decoration:none;font-weight:500}
.crumbs a:hover{text-decoration:underline;text-underline-offset:2px}
.crumbs .sepr{color:var(--tx3)}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tvp-space-16) var(--tvp-space-24);flex-wrap:wrap;margin-bottom:var(--tvp-space-20)}
.phead .ttl{display:flex;align-items:center;gap:var(--tvp-space-12);flex-wrap:wrap}
.sub{color:var(--tx2);font-size:14px;margin-top:var(--tvp-space-4)}
.sub:empty{display:none}
.pacts{display:flex;align-items:center;gap:var(--tvp-space-8);flex-wrap:wrap}
/* the numbers: ONE surface divided by hairlines, not a row of cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);margin-bottom:var(--tvp-space-24);overflow:hidden}
.stats:empty{display:none}
.stat{padding:var(--tvp-space-16) var(--tvp-space-20);border-left:1px solid var(--line);margin-left:-1px;min-width:0}
.stat .k{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}
.stat .v{font:600 24px/1.2 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums;margin-top:var(--tvp-space-4);display:flex;align-items:center;gap:var(--tvp-space-8)}
.stat .v.act{color:var(--warn)}
.stat .v .txt{font-size:16px;line-height:1.5}
.stat .v .sk{width:42px;height:22px;margin:0}
.stat .h{font-size:12.5px;color:var(--tx2);margin-top:var(--tvp-space-2)}
.sec{margin-top:var(--tvp-space-28)}
.sech{display:flex;align-items:center;justify-content:space-between;gap:var(--tvp-space-8) var(--tvp-space-16);flex-wrap:wrap;margin-bottom:var(--tvp-space-12)}
.sech h2{display:flex;align-items:center;gap:var(--tvp-space-8)}
.cnt{font:500 13px/1 var(--sans);color:var(--tx2);font-variant-numeric:tabular-nums}
.cnt:empty{display:none}

/* ── surfaces ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);padding:var(--tvp-space-20) var(--tvp-space-24);margin-bottom:var(--tvp-space-16)}
.card>h2{margin-bottom:var(--tvp-space-12)}
.card>h2:only-child{margin-bottom:0}
.dstack>.card,.dstack>.sec{margin-top:0;margin-bottom:var(--tvp-space-24)}
.hr{border:0;border-top:1px solid var(--line2);margin:var(--tvp-space-16) 0}

/* ── buttons: ONE filled per group. primary (navy) · secondary .g (outline) · tertiary .t (text) · .ok approve · .no destructive ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tvp-space-8);min-height:36px;padding:0 var(--tvp-space-14);font:600 13.5px/1.2 var(--sans);
 border-radius:var(--tvp-radius-md);border:1px solid var(--navy);background:var(--navy);color:var(--tvp-on-navy);cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}
.btn:hover{background:var(--tvp-navy-hover);border-color:var(--tvp-navy-hover)}
.btn.g{background:var(--card);color:var(--navy);border-color:var(--tvp-line-strong)}
.btn.g:hover{background:var(--steel-l);border-color:var(--tvp-steel-silver)}
.btn.t{background:transparent;border-color:transparent;color:var(--tvp-steel-strong);padding:0 var(--tvp-space-8)}
.btn.t:hover{background:var(--steel-l)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--tvp-on-navy)}
.btn.ok:hover{background:var(--tvp-signal-deep);border-color:var(--tvp-signal-deep)}
.btn.no{background:var(--card);color:var(--neg);border-color:var(--tvp-line-strong)}
.btn.no:hover{background:var(--negbg);border-color:var(--neg)}
.btn.danger{background:var(--neg);border-color:var(--neg);color:var(--tvp-on-navy)}
.btn.danger:hover{background:color-mix(in srgb,var(--tvp-negative) 86%,var(--tvp-ink));border-color:color-mix(in srgb,var(--tvp-negative) 86%,var(--tvp-ink))}
.btn.sm{min-height:32px;padding:0 var(--tvp-space-12);font-size:13px}
.btn.t.sm{padding:0 var(--tvp-space-8)}
.btn.lg{min-height:44px;padding:0 var(--tvp-space-20);font-size:14.5px}
.btn.w{width:100%}
.btn.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--navy)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn.busy{color:transparent!important;pointer-events:none}
.btn.busy::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid var(--tvp-steel-silver);border-top-color:var(--tvp-on-navy);animation:spin .7s linear infinite}
.btn.g.busy::after,.btn.t.busy::after{border-color:var(--tvp-line-strong);border-top-color:var(--navy)}
@keyframes spin{to{transform:rotate(360deg)}}
.ib{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--tvp-radius-md);border:1px solid transparent;background:transparent;color:var(--tx2);cursor:pointer}
.ib:hover{background:var(--steel-l);color:var(--navy)}
.acts{display:flex;gap:var(--tvp-space-8);flex-wrap:wrap;align-items:center;margin-top:var(--tvp-space-12)}
.acts .push{margin-left:auto}

/* ── badges: status and category only ── */
.badge{display:inline-flex;align-items:center;gap:var(--tvp-space-6);font:600 12px/1.3 var(--sans);padding:var(--tvp-space-4) var(--tvp-space-10) var(--tvp-space-4) var(--tvp-space-8);
 border-radius:var(--tvp-radius-pill);background:var(--steel-l);color:var(--navy);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge[data-i]::before{width:13px;height:13px;border-radius:0;background:currentColor}
.badge.ok{background:var(--okbg);color:var(--ok)}
.badge.warn{background:var(--warnbg);color:var(--warn)}
.badge.neg{background:var(--negbg);color:var(--neg)}
.badge.mute{background:var(--tvp-paper-2);color:var(--tx2)}
/* older names still printed by the service panels: same part */
.st,.pill{display:inline-flex;align-items:center;font:600 12px/1.3 var(--sans);padding:var(--tvp-space-4) var(--tvp-space-10);border-radius:var(--tvp-radius-pill);background:var(--steel-l);color:var(--navy)}
.tag{display:inline-block;background:var(--tvp-paper-2);color:var(--tvp-ink-2);font:500 12.5px/1.3 var(--sans);border-radius:var(--tvp-radius-sm);padding:var(--tvp-space-4) var(--tvp-space-8)}
.tags{display:flex;flex-wrap:wrap;gap:var(--tvp-space-6);align-items:center}
.tagmore{font:600 12.5px/1.3 var(--sans);color:var(--tvp-steel-strong);background:none;border:0;padding:var(--tvp-space-4);cursor:pointer;border-radius:var(--tvp-radius-sm)}
.tagmore:hover{background:var(--steel-l)}
.code{font:500 12.5px/1.3 var(--mono);color:var(--tx2);letter-spacing:.01em;white-space:nowrap}

/* ── avatar ── */
.av{width:40px;height:40px;border-radius:50%;background:var(--steel-l);color:var(--navy);font:600 14px/1 var(--sans);display:inline-grid;place-items:center;flex:none;letter-spacing:.02em}
.av[data-i]::before{width:20px;height:20px}
.av.sm{width:28px;height:28px;font-size:11.5px;background:var(--tvp-steel-strong);color:var(--tvp-on-navy)}
.av.sm:empty{display:none}

/* ── forms ── */
.field{display:flex;flex-direction:column;gap:var(--tvp-space-6);margin-bottom:var(--tvp-space-16);min-width:0}
.lab{display:block;font-size:13px;font-weight:600;color:var(--tvp-ink-2)}
.lab .rq{color:var(--neg)}
.lab .opt{font-weight:400;color:var(--tx2)}
.fld,.panel textarea,.panel input,.panel select{font:14px/1.4 var(--sans);color:var(--tx);border:1px solid var(--tvp-line-strong);border-radius:var(--tvp-radius-md);padding:var(--tvp-space-8) var(--tvp-space-12);width:100%;min-height:38px;background:var(--card);
 transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.fld:focus,.panel textarea:focus,.panel input:focus,.panel select:focus{outline:0;border-color:var(--steel);box-shadow:var(--tvp-focus-glow)}
.fld::placeholder,.panel textarea::placeholder{color:var(--tx3)}
textarea.fld,.panel textarea{min-height:76px;resize:vertical}
.fld.auto{width:auto}
.fld[aria-invalid=true]{border-color:var(--neg)}
.fld:disabled{background:var(--tvp-paper-2);color:var(--tx2)}
.hint{font-size:12.5px;color:var(--tx2);line-height:1.5}
.ferr{display:flex;align-items:flex-start;gap:var(--tvp-space-6);font-size:13px;color:var(--neg)}
.ferr::before{margin-top:2px;width:14px;height:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--tvp-space-20)}
.fbar{display:flex;align-items:center;gap:var(--tvp-space-16);flex-wrap:wrap}
.fbar.end{align-items:flex-end}
.fld.w-num{max-width:150px}
.drop{display:flex;align-items:center;gap:var(--tvp-space-12);flex-wrap:wrap;border:1px dashed var(--tvp-line-strong);border-radius:var(--tvp-radius-lg);padding:var(--tvp-space-16);background:var(--bg)}
.drop input[type=file]{flex:1 1 240px;font:14px var(--sans);color:var(--tx2);min-width:0}
.drop input[type=file]::file-selector-button{font:600 13px var(--sans);color:var(--navy);background:var(--card);border:1px solid var(--tvp-line-strong);border-radius:var(--tvp-radius-md);padding:var(--tvp-space-8) var(--tvp-space-12);margin-right:var(--tvp-space-12);cursor:pointer}

/* ── toolbar: search · filter · sort · view ── */
.tbar{display:flex;align-items:center;gap:var(--tvp-space-8);flex-wrap:wrap;margin-bottom:var(--tvp-space-12)}
.tbar:empty{display:none}
.tbar .push{margin-left:auto}
.search{position:relative;flex:1 1 220px;max-width:320px;color:var(--tx3)}
.search::before{position:absolute;left:var(--tvp-space-12);top:11px}
.search .fld{padding-left:34px}
.tbar select.fld{width:auto;padding-right:var(--tvp-space-28)}
.seg{display:inline-flex;border:1px solid var(--tvp-line-strong);border-radius:var(--tvp-radius-md);overflow:hidden;background:var(--card);flex:none}
.seg button{display:inline-flex;align-items:center;gap:var(--tvp-space-6);min-height:36px;padding:0 var(--tvp-space-12);border:0;background:transparent;color:var(--tx2);font:500 13px/1 var(--sans);cursor:pointer}
.seg button+button{border-left:1px solid var(--tvp-line-strong)}
.seg button:hover{color:var(--navy);background:var(--bg)}
.seg button[aria-pressed=true]{background:var(--steel-l);color:var(--navy);font-weight:600}

/* ── alerts ── */
.note{display:flex;gap:var(--tvp-space-12);align-items:flex-start;padding:var(--tvp-space-12) var(--tvp-space-16);border-radius:var(--tvp-radius-lg);border:1px solid var(--tvp-steel-silver);background:var(--steel-l);color:var(--navy);font-size:14px;margin-bottom:var(--tvp-space-16)}
.note::before{margin-top:3px}
.note b{font-weight:600}
.note .nx{color:var(--tvp-ink-2);margin-top:var(--tvp-space-2)}
.note .btn{margin-top:var(--tvp-space-10)}
.note.warn{background:var(--warnbg);border-color:var(--warn-line);color:var(--warn)}
.note.neg{background:var(--negbg);border-color:var(--neg-line);color:var(--neg)}
.note.ok{background:var(--okbg);border-color:var(--ok-line);color:var(--ok)}
.note.plain{background:var(--tvp-paper-2);border-color:var(--line);color:var(--navy)}
.alert{background:var(--negbg);border:1px solid var(--neg-line);color:var(--neg);border-radius:var(--tvp-radius-lg);padding:var(--tvp-space-10) var(--tvp-space-12);font-size:13.5px;margin-top:var(--tvp-space-12)}
.masked{display:flex;gap:var(--tvp-space-8);align-items:flex-start;font-size:13px;color:var(--tx2);line-height:1.5}
.masked::before{margin-top:2px;width:14px;height:14px}

/* ── empty state ── */
.blank{background:var(--card);border:1px dashed var(--tvp-line-strong);border-radius:var(--tvp-radius-xl);padding:var(--tvp-space-40) var(--tvp-space-24);text-align:center;color:var(--tx2);font-size:14px}
.blank .bi{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--steel-l);color:var(--navy);margin-bottom:var(--tvp-space-12)}
.blank .bi::before{width:20px;height:20px}
.blank h3{font-size:16px;margin-bottom:var(--tvp-space-4)}
.blank p{max-width:46ch;margin:0 auto}
.blank .btn{margin-top:var(--tvp-space-16)}
.empty{color:var(--tx2);font-size:14px;padding:var(--tvp-space-8) 0}

/* ── skeleton ── */
.sk{display:block;border-radius:var(--tvp-radius-md);height:14px;margin-bottom:var(--tvp-space-8);
 background:linear-gradient(100deg,var(--tvp-paper-2) 40%,var(--line2) 50%,var(--tvp-paper-2) 60%);background-size:220% 100%;animation:shim 1.4s linear infinite}
.sk.row{height:72px;border-radius:var(--tvp-radius-xl);margin-bottom:var(--tvp-space-12)}
.sk.tall{height:168px;border-radius:var(--tvp-radius-xl);margin-bottom:var(--tvp-space-12)}
.sk.w40{width:40%}.sk.w60{width:60%}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}

/* ── table (compare view) ── */
.tblw{background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--tx3);padding:var(--tvp-space-10) var(--tvp-space-12);border-bottom:1px solid var(--line);background:var(--bg);white-space:nowrap}
.tbl td{padding:var(--tvp-space-12);border-bottom:1px solid var(--line2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl th:first-child,.tbl td:first-child{padding-left:var(--tvp-space-20)}
.tbl th:last-child,.tbl td:last-child{padding-right:var(--tvp-space-20)}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr.go{cursor:pointer}
.tbl tbody tr.go:hover td{background:var(--bg)}
.tbl .t1{font-weight:600;color:var(--navy)}
.tbl .t2{font-size:12.5px;color:var(--tx2);margin-top:var(--tvp-space-2)}
.tbl button.t1{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--navy);cursor:pointer;text-align:left}
.tbl button.t1:hover{text-decoration:underline;text-underline-offset:2px}

/* ── pager ── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--tvp-space-12);margin-top:var(--tvp-space-12);font-size:13px;color:var(--tx2)}
.pager:empty{display:none}
.pager .acts{margin-top:0}

/* ── popover and menu ── */
.pop{position:absolute;top:calc(100% + var(--tvp-space-8));right:var(--gut);width:min(400px,calc(100vw - var(--tvp-space-16)));background:var(--card);color:var(--tx);
 border:1px solid var(--line);border-radius:var(--tvp-radius-xl);box-shadow:var(--tvp-shadow-modal);z-index:60;overflow:hidden;animation:rise .16s var(--ease)}
.pop:focus{outline:0}
.poph{display:flex;align-items:center;justify-content:space-between;gap:var(--tvp-space-12);padding:var(--tvp-space-12) var(--tvp-space-12) var(--tvp-space-12) var(--tvp-space-16);border-bottom:1px solid var(--line)}
.popb{max-height:min(60vh,480px);overflow-y:auto;overscroll-behavior:contain}
.menu{width:264px;padding:var(--tvp-space-6)}
.menu .mhd{padding:var(--tvp-space-10) var(--tvp-space-12) var(--tvp-space-12);border-bottom:1px solid var(--line2);margin-bottom:var(--tvp-space-6)}
.menu .mhd b{display:block;font-size:14px;color:var(--navy);overflow:hidden;text-overflow:ellipsis}
.menu .mhd span{display:block;font-size:12.5px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis}
.mi{display:flex;align-items:center;gap:var(--tvp-space-10);width:100%;padding:var(--tvp-space-8) var(--tvp-space-12);border:0;border-radius:var(--tvp-radius-md);background:transparent;
 color:var(--tx);font:500 14px/1.3 var(--sans);text-decoration:none;text-align:left;cursor:pointer}
.mi::before{color:var(--tx2)}
.mi:hover,.mi:focus-visible{background:var(--steel-l);color:var(--navy)}
.mi.sepd{margin-top:var(--tvp-space-6);border-top:1px solid var(--line2);border-radius:0 0 var(--tvp-radius-md) var(--tvp-radius-md);padding-top:var(--tvp-space-12)}
/* "More" on a card: a native disclosure, so the keyboard works without script */
.more{position:relative}
.more>summary{list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>.menu{position:absolute;right:0;bottom:calc(100% + var(--tvp-space-6));width:230px;background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-lg);box-shadow:var(--tvp-shadow-app);z-index:20}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}

/* ── dialog ── */
.dlg{border:0;border-radius:var(--tvp-radius-2xl);padding:var(--tvp-space-24);width:min(92vw,480px);margin:auto;box-shadow:var(--tvp-shadow-modal);color:var(--tx);background:var(--card)}
.dlg::backdrop{background:var(--veil)}
.dlg[open]{animation:rise .18s var(--ease)}
.dlg h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--tvp-space-8)}
.dlg p{font-size:14.5px;color:var(--tx2)}
.dlg .acts{justify-content:flex-end;margin-top:var(--tvp-space-20)}
.ovl{position:fixed;inset:0;background:var(--veil);display:none;align-items:center;justify-content:center;z-index:70;padding:var(--tvp-space-20)}
.ovl.on{display:flex}
.modal{background:var(--card);border-radius:var(--tvp-radius-2xl);max-width:520px;width:100%;padding:var(--tvp-space-24);box-shadow:var(--tvp-shadow-modal)}
.modal h2{font-size:18px;font-weight:700;margin-bottom:var(--tvp-space-8);color:var(--neg)}
.modal p{font-size:14px;color:var(--tx2);margin-bottom:var(--tvp-space-16)}
.modal .acts{justify-content:flex-end}

/* ── toast ── */
.toast{position:fixed;bottom:var(--tvp-space-24);left:50%;transform:translate(-50%,8px);background:var(--navy);color:var(--tvp-on-navy);max-width:min(92vw,520px);
 padding:var(--tvp-space-12) var(--tvp-space-16);border-radius:var(--tvp-radius-lg);opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;z-index:90;font-size:14px;box-shadow:var(--tvp-shadow-modal)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--neg)}
.foot~.toast{bottom:110px}

/* ── waiting on you: the ONLY pending list in the portal ── */
.todo{background:var(--card);border:1px solid var(--warn-line);border-left:3px solid var(--warn);border-radius:var(--tvp-radius-xl);padding:var(--tvp-space-16) var(--tvp-space-20);margin-bottom:var(--tvp-space-24)}
.todo>h2{display:flex;align-items:center;gap:var(--tvp-space-8);font-size:15px;margin-bottom:var(--tvp-space-4)}
.todo>h2 .dot{background:var(--warn)}
.todo .row{display:flex;align-items:center;gap:var(--tvp-space-12);padding:var(--tvp-space-10) 0;border-top:1px solid var(--line2)}
.todo .row:first-of-type{border-top:0}
.todo .row .t{flex:1;font-size:14px;min-width:0}
.todo .row .t small{display:block;font-size:12.5px;color:var(--tx2)}

/* ── mandate list: rows on one surface ── */
.mlist{background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);overflow:hidden}
.mand{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:var(--tvp-space-8) var(--tvp-space-20);align-items:center;text-decoration:none;color:inherit;padding:var(--tvp-space-16) var(--tvp-space-20);border-top:1px solid var(--line2);
 transition:background-color .18s var(--ease)}
.mand:first-child{border-top:0}
.mand:hover{background:var(--bg)}
.mand .ti{font-size:15.5px;font-weight:600;letter-spacing:-.005em;color:var(--navy);line-height:1.3}
.mand .meta{font-size:13px;color:var(--tx2);margin-top:var(--tvp-space-2)}
.mand .meta:empty{display:none}
.mand .pills{display:flex;flex-wrap:wrap;gap:var(--tvp-space-6);margin-top:var(--tvp-space-8)}
.mand .pills:empty{display:none}
.mand .note{font-size:13px;color:var(--tx2);margin-top:var(--tvp-space-6);display:block;padding:0;border:0;background:none}
.mand .side{text-align:right;white-space:nowrap}
.mand .side b{display:block;font:600 18px/1.2 var(--sans);color:var(--navy);font-variant-numeric:tabular-nums}
.mand .side span{display:block;font-size:12.5px;color:var(--tx2)}
.mand .go{color:var(--tx3)}

/* ── mandate header ── */
.mhead{margin-bottom:var(--tvp-space-20)}
.mhead .phead{margin-bottom:var(--tvp-space-16)}

/* ── progress tracker: numbered nodes on one line; a column on a phone ── */
.pipe{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);counter-reset:s}
.step{position:relative;padding-right:var(--tvp-space-10);counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--card);
 border:2px solid var(--tvp-line-strong);color:var(--tx3);font:600 12px/1 var(--sans);position:relative;z-index:1}
.step::after{content:"";position:absolute;top:11px;left:24px;right:0;height:2px;background:var(--tvp-line)}
.step:last-child::after{display:none}
.step.done::before{content:"\2713";background:var(--ok);border-color:var(--ok);color:var(--tvp-on-navy)}
.step.done::after{background:var(--ok)}
.step.live::before{background:var(--navy);border-color:var(--navy);color:var(--tvp-on-navy);box-shadow:0 0 0 4px var(--steel-l)}
.step .l{font-size:13px;font-weight:500;line-height:1.3;margin-top:var(--tvp-space-8);color:var(--tx2)}
.step.done .l{color:var(--tvp-ink-2)}
.step.live .l{color:var(--navy);font-weight:600}
.step .b{display:none;font-size:12.5px;color:var(--tx2);margin-top:var(--tvp-space-2);line-height:1.4}
.step.live .b{display:block}
.stagenote{display:flex;gap:var(--tvp-space-10);align-items:flex-start;border-top:1px solid var(--line2);padding-top:var(--tvp-space-12);margin-top:var(--tvp-space-16);font-size:14px;color:var(--tvp-ink-2)}
.stagenote::before{margin-top:3px;color:var(--steel)}

/* ── candidate: ONE component. identity → title → status → facts → compensation → skills → assessment → interview → actions ── */
.cands{display:flex;flex-direction:column;gap:var(--tvp-space-12)}
.cand{background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);padding:var(--tvp-space-20) var(--tvp-space-24);container-type:inline-size;
 transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.cand:has(.panel),.cand.hot{border-color:var(--tvp-steel-silver);box-shadow:var(--tvp-shadow-xs)}
.ctop{display:flex;align-items:flex-start;gap:var(--tvp-space-12)}
.cwho{flex:1;min-width:0}
.cname{display:flex;align-items:center;gap:var(--tvp-space-8);flex-wrap:wrap}
.cand .nm{font-size:16.5px;font-weight:600;letter-spacing:-.005em;color:var(--navy);line-height:1.3}
.ctitle{font-size:14px;color:var(--tvp-ink-2);margin-top:1px}
.vb{display:inline-flex;align-items:center;gap:var(--tvp-space-4);font:600 12px/1.3 var(--sans);color:var(--ok)}
.vb::before{width:14px;height:14px}
.cstat{display:flex;flex-direction:column;align-items:flex-end;gap:var(--tvp-space-6);flex:none}
.cmeta{display:flex;flex-wrap:wrap;gap:var(--tvp-space-4) var(--tvp-space-16);list-style:none;padding:0;margin:var(--tvp-space-12) 0 0;font-size:13.5px;color:var(--tx2)}
.cmeta li{display:inline-flex;align-items:center;gap:var(--tvp-space-6)}
.cmeta li::before{width:14px;height:14px;color:var(--tx3)}
.cmeta:empty{display:none}
/* facts: label over value on one flat row — no boxes */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--tvp-space-12) var(--tvp-space-24);margin-top:var(--tvp-space-16);padding-top:var(--tvp-space-16);border-top:1px solid var(--line2)}
.kv dt{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}
.kv dd{font-size:14.5px;font-weight:600;color:var(--tx);margin:var(--tvp-space-2) 0 0;font-variant-numeric:tabular-nums}
.kv dd.na{font-weight:400;color:var(--tx2);font-size:13.5px}
.kv dd small{display:block;font-size:12.5px;font-weight:500;margin-top:1px}
.neg{font:500 12.5px/1.3 var(--sans)}
.neg.y{color:var(--ok)}.neg.n{color:var(--tx2)}
/* assessment: the score is one more fact on the row; the assessor's line sits under it */
.kv .score dd{font-size:18px;font-weight:700;color:var(--navy);line-height:1.2}
.kv .score dd span{font-size:13px;font-weight:500;color:var(--tx2)}
.kv .score small{display:flex;align-items:center;gap:var(--tvp-space-4);color:var(--ok);font-weight:600}
.kv .score small::before{width:12px;height:12px}
.why{font-size:13.5px;color:var(--tvp-ink-2);line-height:1.5;margin-top:var(--tvp-space-12)}
.why .lbl{margin-right:var(--tvp-space-6)}
.cand .tags{margin-top:var(--tvp-space-16)}
.cand .sum{margin-top:var(--tvp-space-16);padding-top:var(--tvp-space-16);border-top:1px solid var(--line2);font-size:14px;line-height:1.6;color:var(--tvp-ink-2)}
.cand .hl{font-weight:600;color:var(--tx);margin-bottom:var(--tvp-space-4)}
.pts{display:grid;grid-template-columns:1fr 1fr;gap:var(--tvp-space-12) var(--tvp-space-28);margin-top:var(--tvp-space-12)}
.pts:empty{display:none}
.cand ul.pl{margin:var(--tvp-space-4) 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--tvp-ink-2)}
.cand ul.pl li{position:relative;padding-left:var(--tvp-space-16);margin-top:var(--tvp-space-2)}
.cand ul.pl li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--tvp-steel)}
.cand .wo li::before{background:var(--card);box-shadow:0 0 0 1.5px var(--tx3)}
.cand .masked{margin-top:var(--tvp-space-16)}
.cfoot{display:flex;gap:var(--tvp-space-8);flex-wrap:wrap;align-items:center;margin-top:var(--tvp-space-16);padding-top:var(--tvp-space-16);border-top:1px solid var(--line2)}
.cfoot .push{margin-left:auto}
.verdict{display:inline-flex;align-items:center;gap:var(--tvp-space-6);font:600 13px/1.3 var(--sans)}
.verdict.a{color:var(--ok)}.verdict.r{color:var(--neg)}
.verdict::before{width:14px;height:14px}
.panel{margin-top:var(--tvp-space-16);border:1px solid var(--tvp-steel-silver);border-radius:var(--tvp-radius-lg);padding:var(--tvp-space-16);background:var(--bg);animation:rise .2s var(--ease)}
.panel h3{margin-bottom:var(--tvp-space-12)}
.panel .acts{margin-top:var(--tvp-space-12)}
.slotrow{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr auto;gap:var(--tvp-space-8);margin-bottom:var(--tvp-space-8);align-items:center}
.slotrow .x{background:none;border:none;color:var(--tx2);font-size:20px;cursor:pointer;line-height:1;padding:0 var(--tvp-space-6);border-radius:var(--tvp-radius-sm)}
.sub2{margin-top:var(--tvp-space-16)}
.slotpill{display:inline-block;background:var(--tvp-paper-2);color:var(--tvp-ink-2);font:500 12.5px/1.3 var(--sans);border-radius:var(--tvp-radius-sm);padding:var(--tvp-space-4) var(--tvp-space-8);margin:var(--tvp-space-6) var(--tvp-space-6) 0 0}
.noteitem{border-left:2px solid var(--tvp-steel-silver);padding:var(--tvp-space-2) 0 var(--tvp-space-2) var(--tvp-space-12);margin-top:var(--tvp-space-8);font-size:13.5px;color:var(--tvp-ink-2)}
.noteitem .m{font-size:12.5px;color:var(--tx2);margin-top:var(--tvp-space-2)}

/* ── interview: a structured event, not a sentence ── */
.ivrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--tvp-space-2) var(--tvp-space-12);margin-top:var(--tvp-space-16);padding:var(--tvp-space-12) var(--tvp-space-16);border:1px solid var(--line);border-left:3px solid var(--tvp-steel-silver);border-radius:var(--tvp-radius-lg);background:var(--bg)}
.ivrow::before{grid-row:1 / span 4;margin-top:2px;width:18px;height:18px;color:var(--steel)}
.ivrow:not([data-i])>*{grid-column:1 / -1}
.ivrow>*{grid-column:2}
.ivrow .ivk{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--tx3)}
.ivrow .ivs{display:block;font:600 14.5px/1.4 var(--sans);color:var(--navy)}
.ivrow .ivn{display:block;font-size:13px;line-height:1.5;color:var(--tx2)}
.ivrow .ivn a{word-break:break-all}
.ivrow .iva{display:flex;flex-wrap:wrap;gap:var(--tvp-space-8);margin-top:var(--tvp-space-8)}
/* no interview yet: one quiet line, not a box */
.ivrow.idle{display:flex;align-items:center;gap:var(--tvp-space-8) var(--tvp-space-12);flex-wrap:wrap;background:transparent;border:0;border-top:1px solid var(--line2);border-radius:0;padding:var(--tvp-space-16) 0 0}
.ivrow.idle::before{margin-top:0;color:var(--tx3)}
.ivrow.idle .ivn{flex:1 1 280px}
.ivrow.idle .iva{margin-top:0}
.ivrow.sched{border-left-color:var(--navy)}
.ivrow.need{border-left-color:var(--warn)}
.ivrow.need::before{color:var(--warn)}
.ivrow.hot,.cand .hot{animation:flash 1.1s var(--ease) 3}
@keyframes flash{50%{box-shadow:0 0 0 4px var(--warnbg)}}

/* ── agreement ── */
.doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--tvp-space-4) var(--tvp-space-16);align-items:center;padding:var(--tvp-space-12) 0;border-top:1px solid var(--line2)}
.doc:first-child{border-top:0;padding-top:0}
.doc:last-child{padding-bottom:0}
.doc>.ic{width:36px;height:36px;border-radius:var(--tvp-radius-md);background:var(--steel-l);color:var(--navy);justify-content:center}
.doc>.ic::before{width:18px;height:18px}
.doc .dt{display:flex;align-items:center;gap:var(--tvp-space-8);flex-wrap:wrap;font-weight:600;color:var(--navy)}
.doc .ds{font-size:13px;color:var(--tx2);margin-top:var(--tvp-space-2)}
.doc .acts{margin-top:0;justify-content:flex-end}
.doc>.full{grid-column:1 / -1}
.quote{border:1px solid var(--line);border-radius:var(--tvp-radius-lg);padding:var(--tvp-space-16);margin-top:var(--tvp-space-12);font-size:14px;background:var(--bg)}
.quote .row{display:flex;gap:var(--tvp-space-12) var(--tvp-space-16);flex-wrap:wrap;margin-top:var(--tvp-space-12);align-items:flex-end}
.qf{display:flex;flex-direction:column;gap:var(--tvp-space-6)}
#agrQuoteBox:not(:empty){margin-top:var(--tvp-space-12);padding:var(--tvp-space-12) var(--tvp-space-16);border-radius:var(--tvp-radius-md);background:var(--steel-l);color:var(--navy);font-size:14px;line-height:1.55}
#agrQuoteBox .kv{margin-top:var(--tvp-space-12);padding-top:var(--tvp-space-12)}
#agrQuoteBox .kv dd small{color:var(--tx2);font-weight:400}
.fine{font-size:12.5px;color:var(--tx2);margin-top:var(--tvp-space-8);line-height:1.5}

/* ── notifications ── */
.upd{display:grid;grid-template-columns:8px minmax(0,1fr);gap:var(--tvp-space-2) var(--tvp-space-12);padding:var(--tvp-space-12) var(--tvp-space-16);border-top:1px solid var(--line2);font-size:14px;color:var(--tx)}
.upd:first-child{border-top:0}
.upd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel);margin-top:7px}
.upd.rd{color:var(--tx2)}
.upd.rd::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tvp-line-strong)}
.upd>*{grid-column:2}
.upd .um{font-weight:500}
.upd.rd .um{font-weight:400}
.upd .m{display:flex;align-items:center;gap:var(--tvp-space-8);flex-wrap:wrap;font-size:12.5px;color:var(--tx2)}
.upd .m a,.upd .m button{font:600 12.5px/1.3 var(--sans);color:var(--tvp-steel-strong);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.upd .m a:hover,.upd .m button:hover{text-decoration:underline;text-underline-offset:2px}
.ulist{background:var(--card);border:1px solid var(--line);border-radius:var(--tvp-radius-xl);overflow:hidden}

/* ── sign in ── */
.login{max-width:400px;margin:8vh auto 0}
.login .card{padding:var(--tvp-space-28)}
.login .mark{display:block;height:96px;width:auto;margin:0 auto var(--tvp-space-8)}
.login h1{font-size:22px;text-align:center}
.login .sub{text-align:center;margin-bottom:var(--tvp-space-20)}
.login #li_join{margin-top:var(--tvp-space-12)}   /* 2 Oct — the website funnel: "Create a company account" under Sign in */
.login .btn{margin-top:var(--tvp-space-4)}
.login .fine{text-align:center;margin-top:var(--tvp-space-16)}

/* ── hotline: the conversation ── */
.thread{display:flex;flex-direction:column;gap:var(--tvp-space-12)}
.msg{display:flex}
.msg .b{max-width:min(78%,560px);padding:var(--tvp-space-10) var(--tvp-space-14);border-radius:var(--tvp-radius-xl);font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.msg .meta{font-size:12px;color:var(--tx2);margin-top:var(--tvp-space-4)}
.msg.them{justify-content:flex-start}
.msg.them .b{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:var(--tvp-radius-xs)}
.msg.me{justify-content:flex-end}
.msg.me>div{display:flex;flex-direction:column;align-items:flex-end}
.msg.me .b{background:var(--navy);color:var(--tvp-on-navy);border-bottom-right-radius:var(--tvp-radius-xs)}
.msg.esc .b{background:var(--negbg);border:1px solid var(--neg-line);color:var(--neg)}
.esctag{display:inline-block;background:var(--neg);color:var(--tvp-on-navy);font:700 11px/1.3 var(--sans);letter-spacing:.06em;border-radius:var(--tvp-radius-xs);padding:var(--tvp-space-2) var(--tvp-space-6);margin-bottom:var(--tvp-space-6)}
.foot{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:var(--tvp-space-12) var(--tvp-space-24) var(--tvp-space-16);z-index:30}
.foot .in{max-width:772px;margin:0 auto;display:flex;gap:var(--tvp-space-8);align-items:flex-end}
.foot textarea{flex:1;resize:none;min-height:40px;max-height:150px}
.foot .btn{min-height:40px}

/* ── tablet and phone ── */
/* the bar never crowds: the account name goes first, then the company name, then the places move to the tab bar */
@media(max-width:1180px){
 .acct .anm{display:none}
 .acct{padding:0 var(--tvp-space-4)}
 .top{gap:var(--tvp-space-16)}
}
@media(max-width:1020px){
 .brand b{display:none}
 .brand i{font-size:11.5px;margin-top:0}
}
@media(max-width:860px){
 :root{--gut:var(--tvp-space-16)}
 .top{gap:var(--tvp-space-12)}
 .brand{margin-right:auto}
 /* the places move to a tab bar under the thumb */
 .nav{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:45;background:var(--navy);gap:0;justify-content:space-around;
  padding:var(--tvp-space-4) var(--tvp-space-4) calc(var(--tvp-space-4) + env(safe-area-inset-bottom));border-top:1px solid var(--tvp-on-navy-line)}
 .nav>a{flex:1 1 0;flex-direction:column;justify-content:center;gap:var(--tvp-space-2);font-size:12px;padding:var(--tvp-space-6) var(--tvp-space-4);border:0;border-top:2px solid transparent;min-height:52px}
 .nav>a::before{display:block;width:20px;height:20px}
 .nav>a.on,.nav>a[aria-current=page]{border-top-color:var(--tvp-steel-silver)}
 .nav>a .dot{position:absolute;top:var(--tvp-space-4);left:calc(50% + 6px)}
 .cta{width:36px;padding:0;justify-content:center;font-size:0;gap:0}
 .cta::before{width:16px;height:16px}
 #creditsChip{display:none!important}
 body{padding-bottom:64px}
 .toast{bottom:84px}
 .foot~.toast{bottom:170px}
 .wrap.has-foot{padding-bottom:220px}
 .wrap{padding:var(--tvp-space-20) var(--tvp-space-16) var(--tvp-space-40)}
 h1{font-size:21px}
 .card,.cand{padding:var(--tvp-space-16)}
 .pop{right:var(--tvp-space-8);left:var(--tvp-space-8);width:auto}
 .pop.menu{left:auto;width:264px}
 .foot{bottom:60px;padding:var(--tvp-space-8) var(--tvp-space-16) var(--tvp-space-12)}
}
@media(max-width:760px){
 .pipe{grid-auto-flow:row}
 .step{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--tvp-space-12);padding:0 0 var(--tvp-space-16)}
 .step:last-child{padding-bottom:0}
 .step::before{grid-row:1 / span 2}
 .step::after{top:24px;bottom:0;left:11px;right:auto;width:2px;height:auto}
 .step .l{margin-top:2px}
 .step .l,.step .b{grid-column:2}
 .step .b{display:block}
 .mand{grid-template-columns:minmax(0,1fr) 16px}
 .mand .side{grid-column:1;grid-row:2;text-align:left;display:flex;gap:var(--tvp-space-6);align-items:baseline}
 .mand .side b{font-size:14px;display:inline}
 .mand .side span{display:inline}
 .mand .go{grid-row:1 / span 2}
 .doc{grid-template-columns:auto minmax(0,1fr)}
 .doc .acts{grid-column:1 / -1;justify-content:flex-start;margin-top:var(--tvp-space-8)}
 .seg.viewsw{display:none}
 .slotrow{grid-template-columns:1fr 1fr}
 .stat{padding:var(--tvp-space-12) var(--tvp-space-16)}
 .stat .v{font-size:20px}
}
/* the card answers to its own width, so it stacks the same way in a narrow column as on a phone:
   identity · status · facts · compensation · assessment · actions */
@container (max-width:560px){
 .ctop{flex-wrap:wrap}
 .cstat{flex-direction:row;align-items:center;flex-basis:100%;order:3;margin-top:var(--tvp-space-4)}
 .pts{grid-template-columns:1fr}
 .kv{grid-template-columns:1fr 1fr}
 .cfoot .btn:not(.t){flex:1 1 auto}
 .cfoot .push{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}