/*
 * application.css — MatchConnector Job Fit
 * Design system ported 1:1 from the HTML prototype (mc-jobfit-v2.html).
 * Tokens, typography (DM Sans / DM Mono) and component styling mirror the
 * prototype. See CLAUDE.md §1a (fidelity to the prototype — BINDING).
 */

/* ── Design tokens (verbatim from prototype :root) ─────────────────── */
:root {
    --bg:#F7F7F5;
    --surface:#FFFFFF;
    --s2:#F2F2EF;
    --border:#E4E4E0;
    --border2:#EBEBEA;
    --text:#1C1C1A;
    --t2:#5A5A56;
    --t3:#9A9A94;
    --green:#1B9E72;
    --gl:#E3F5EE;
    --gb:#A8E0C8;
    --gd:#0D6B4C;
    --pink:#C94F78;
    --pl:#FAEDF2;
    --pb:#EAAFC4;
    --blue:#3478C7;
    --bl:#EAF1FB;
    --bb:#A8C8EE;
    --bd:#1A4F8A;
    --red:#D94040;
    --rl:#FBEAEA;
    --rb:#ECAAAA;
    --pf-dark:var(--red);
    --amber:#B87010;
    --al:#FBF1E0;
    --ab:#E8C070;
    --amber-dark:#7A5200;
    --purple:#7C4DB8;
    --purl:#F2EDFB;
    --purb:#C9B0E8;
    --white:#FFFFFF;
    --av1:#7C4DB8;
    --av2:#3478C7;
    --av3:#1B9E72;
    --av4:#D9822B;
    --av5:#C0392B;
    --av6:#0E7490;
    --btn-blue-hover:#2563b0;
    --nw:252px;
    /* ── Extended colour tokens (prototype :root lines 37-54) ──────── */
  --muted:#888888;
    --orange:#E07020;
    --red-dark:#6B1414;
    --career-dark:#1A1A2E;
    /* ODC archetype accent colours (F1-F4, M1-M4) */
  --arch-f1:#2E7D6E;
    --arch-f2:#4A6B2E;
    --arch-f3:#4B5DA8;
    --arch-f3-lt:#C7D0F8;
    --arch-m2:#2E6B8B;
    --arch-m3:#8B4DB8;
    --arch-m3-mid:#7B5EA7;
    --arch-m4:#6B4A2E;
    /* One-off semantic tokens */
  --match-good:#2E86AB;
    --green-light:#26C490;
    --green-pale:#E8F5E9;
    --green-pale-b:#A5D6A7;
    --amber-pale:#FFF8E6;
    --amber-dark-text:#5A3500;
    --red-pale:#FFF4F4;
    --green-icon:#1B7A56;
    --green-icon-dk:#1B5E3B;
    --hrbp-bg:#F3EEF9;
    --hrbp-border:#C4A8E0;
    --purple-text:#4A2B8A;
    --purple-border-lt:#C4B5FD;
    --lena-col:#6C8EBF;
    --r:10px;
    --rs:7px;
    --sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
    --shm:0 4px 16px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
    --shl:0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
    --font:'DM Sans',system-ui,sans-serif;
    --mono:'DM Mono','SFMono-Regular',Consolas,monospace;
    /* Legacy aliases so existing screens keep working and inherit the new look */
  --text-muted: var(--t2);
    --surface-2:  var(--s2);
    --radius:     var(--r);
    --radius-sm:  var(--rs);
    --shadow:     var(--sh);

    /* Avatar gradient colours (migrated from prototype.css) */
    --av-grad-a: #B0C4F0;
    --av-grad-b: #7B9DD9;
    --av-grad-text: #1A3A6E;
    --nav-av-a: #9B59B6;
    --nav-av-b: #5B8AF0;
}
/* -- Dark mode token overrides (prototype body.dark, lines 270-300) -- */
body.dark {
    --bg:#1A1A18;
    --surface:#242422;
    --s2:#2C2C2A;
    --border:#3A3A36;
    --border2:#323230;
    --text:#F0F0EC;
    --t2:#A8A8A0;
    --t3:#6A6A64;
    --green:#2DC98E;
    --gl:#0D2E22;
    --gb:#1A5A3C;
    --gd:#5AC99A;
    --pink:#E07A9D;
    --pl:#2E1020;
    --pb:#6B2540;
    --blue:#5A9EE8;
    --bl:#0D1E38;
    --bb:#1A4A7A;
    --red:#EF6565;
    --rl:#2E0D0D;
    --rb:#6B1A1A;
    --amber:#D4920A;
    --al:#2A1C08;
    --ab:#6B4510;
    --purple:#A07AD8;
    --purl:#1E1030;
    --purb:#4A2A7A;
    --pf-dark:#EF8080;
    --amber-dark:#E8A840;
    --btn-blue-hover:#4A8EDA;
    /* Extended tokens -- dark mode adaptations */
  --muted:#6A6A64;
    --orange:#E8842A;
    --blue-darker:#2A6AB8;
    --red-dark:#EF8080;
    --career-dark:#0A0A18;
    --match-good:#5AACE8;
    --green-light:#2DC98E;
    --green-pale:#0D2E22;
    --green-pale-b:#1A5A3C;
    --amber-pale:#2A1C08;
    --amber-dark-text:#E8A840;
    --red-pale:#2E0D0D;
    --green-icon:#5AC99A;
    --green-icon-dk:#2DC98E;
    --hrbp-bg:#1E1030;
    --hrbp-border:#4A2A7A;
    --purple-text:#C9B0E8;
    --purple-border-lt:#4A2A7A;
    --lena-col:#5A8EBF;
    /* Archetype colours -- slightly lighter for dark bg legibility */
  --arch-f1:#3A9E8A;
    --arch-f2:#5A8A3A;
    --arch-f3:#6A7DC8;
    --arch-f3-lt:#2A3A68;
    --arch-f4-dkr:#8B2A50;
    --arch-m2:#3A8BAB;
    --arch-m3:#A06AD8;
    --arch-m3-mid:#8A7AB8;
    --arch-m4:#8B6A3A;
}
/* ── Reset / base ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
input, select, textarea, button {
    font-family: var(--font);
    font-size: inherit;
}
h1, h2, h3 {
    margin: 0 0 .5rem;
    line-height: 1.25;
    color: var(--text);
}
h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
h2 {
    font-size: 1.05rem;
    font-weight: 700;
}
h3 {
    font-size: .95rem;
    font-weight: 700;
}
p {
    margin: 0 0 1rem;
}
ul {
    padding-left: 1.25rem;
}
a {
    color: var(--blue);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.text-muted {
    color: var(--t2);
}
.text-small {
    font-size: .85rem;
}
.empty-state {
    color: var(--t3);
    padding: 2rem 0;
}
.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
}
/* ── Material Icons (prototype lines 120-141) ────────────────────────── */
/* The entire prototype uses class="material-icons" (not Symbols).        */
/* Without this block every icon renders at browser-default size/align.   */
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}
/* Size variants used in icon containers (prototype lines 136-141) */
.ni-icon .material-icons {
    font-size: 20px;
}
.btn .material-icons {
    font-size: 15px;
}
.badge .material-icons {
    font-size: 12px;
}
.bell-wrap .material-icons {
    font-size: 20px;
}
/* Reference codes — monospace pill, as in the prototype (.ref-tag) */
.reference-code {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--t2);
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 9px;
    display: inline-flex;
    align-items: center;
}
/* ── Flash ─────────────────────────────────────────────────────────── */
.flash {
    padding: .7rem 1.5rem;
    margin: 0;
    font-weight: 500;
    font-size: .9rem;
}
.flash--notice {
    background: var(--gl);
    color: var(--gd);
    border-bottom: 1px solid var(--gb);
}
.flash--alert {
    background: var(--rl);
    color: var(--red);
    border-bottom: 1px solid var(--rb);
}
.flash-warning {
    margin-bottom: 12px;
    padding: 11px 13px;
    background: var(--al);
    border: 1px solid var(--ab);
    border-radius: var(--rs);
    font-size: 13px;
    font-weight: 600;
    color: var(--amber-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* ── Buttons (prototype .btn / .btn.pr / .btn.danger) ──────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: var(--rs);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    transition: all .15s;
    box-shadow: var(--sh);
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover {
    background: var(--s2);
    text-decoration: none;
}
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
.btn--primary, .btn.pr {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.btn--primary:hover:not(:disabled), .btn.pr:hover:not(:disabled) {
    background: var(--btn-blue-hover);
}
.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.btn--ghost {
    background: transparent;
    color: var(--t2);
    border-color: transparent;
    box-shadow: none;
}
.btn--ghost:hover {
    background: var(--s2);
}
.btn--small {
    padding: 4px 10px;
    font-size: 12px;
}
.btn--danger, .btn.danger {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}
.btn--danger:hover, .btn.danger:hover {
    background: #B53030;
}
/* bsm = prototype "btn-sm" utility (prototype.css lines 698-701) */
.bsm {
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--rs);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--t2);
    font-family: var(--font);
    transition: background .1s;
}
.bsm:hover {
    background: var(--bg);
}
.bsm.g {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}
.bsm.g:hover {
    background: var(--gd);
}
/* sum-box family = vacancy/candidate summary boxes (prototype.css lines 704-711) */
.sum-box {
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:11px 13px;
    margin-top:11px;
    display:none;
}
.sum-box.vis {
    display:block;
}
.sum-hd {
    font-size:12px;
    font-weight:600;
    color:var(--t2);
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:5px;
}
.sum-hd i {
    font-size:13px;
    color:var(--green);
}
.sum-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 16px;
}
.sum-r {
    font-size:12px;
    display:flex;
    gap:4px;
}
.sum-k {
    color:var(--t3);
    min-width:90px;
    flex-shrink:0;
}
.sum-v {
    color:var(--text);
    font-weight:500;
}
/* stepbar family = horizontal wizard step bar (prototype.css lines 712-721) */
.stepbar {
    display:flex;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px 17px;
    margin-bottom:16px;
    box-shadow:var(--sh);
}
.step-item {
    display:flex;
    align-items:center;
    gap:6px;
}
.sdot2 {
    width:24px;
    height:24px;
    border-radius:50%;
    border:1.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
    background:var(--bg);
    color:var(--t3);
    flex-shrink:0;
    transition:all .2s;
}
.sdot2.done {
    background:var(--gl);
    border-color:var(--gb);
    color:var(--gd);
    cursor:pointer;
}
.sdot2.active {
    background:var(--text);
    border-color:var(--text);
    color:#fff;
}
.slbl {
    font-size:11px;
    color:var(--t3);
    white-space:nowrap;
}
.slbl.active {
    color:var(--text);
    font-weight:600;
}
.slbl.done {
    color:var(--gd);
}
.sline {
    flex:1;
    height:1px;
    background:var(--border);
    margin:0 7px;
}
.sline.done {
    background:var(--gb);
}
/* ── Page chrome ───────────────────────────────────────────────────── */
/* F-543 -- no horizontal padding here on purpose. .content (application.html.erb's own layout
   wrapper) already applies the prototype's 24px on each side (identical to mc-jobfit-v2.html's
   .content rule); the prototype's own .screen -- what .page-container stands in for here --
   carries none. A left/right value on this rule stacks a second 24px on top of .content's,
   making every one of the 62 screens using this class ~48px narrower than its prototype
   counterpart. This replaces an earlier version of this same comment, from the repository's
   first commit, that claimed alignment with the prototype while the rule actually undid it --
   the vertical padding below is this rule's own, real contribution (rhythm above/below content),
   not a claim about matching anything on the horizontal axis. */
.page-container {
    max-width: none;
    margin: 0;
    padding: 16px 0 24px;
}
/* Room above the fixed confidentiality banner so content can scroll clear of it. */
/* Bug 5: ensure no browser default margin on <main> causes topbar/sidebar misalignment */
main {
    margin: 0;
    padding: 0;
}
/* F-334 — the confidentiality banner (application.html.erb:90, position:fixed;bottom:0) sits
   OUTSIDE <main>, so .main's own padding-bottom is the only thing standing between scrolled-to-
   the-end content and that fixed overlay. 36px matched the banner's single-line desktop height,
   but the banner's text wraps to more lines as the viewport narrows, and a fixed 36px stayed
   short of that taller banner — confirmed with a real Selenium click on the accept screen's
   submit button at 375px (ElementClickIntercepted, the banner receiving the click instead).
   --banner-h below is measured directly in Chrome against the ACTUAL Rails markup (not reused
   from the prototype's own numbers — the prototype's #confidentiality-banner has different CSS
   and DOM structure, `justify-content:space-between` vs Rails' `center` plus an inner flex
   wrapper, and does not wrap at the same widths). Every step below is a real
   getBoundingClientRect().height, swept every 10px from 320 to 1400 to find where the banner's
   text actually adds a line; each breakpoint uses the WIDER edge of its 10px measurement gap, so
   an untested width in between is always rounded toward the safer (taller) neighbour, never the
   shorter one. */
:root { --banner-h: 36px; }
@media (max-width: 979px) { :root { --banner-h: 52px; } }
@media (max-width: 629px) { :root { --banner-h: 71px; } }
@media (max-width: 519px) { :root { --banner-h: 89px; } }
@media (max-width: 449px) { :root { --banner-h: 108px; } }
@media (max-width: 409px) { :root { --banner-h: 127px; } }
@media (max-width: 389px) { :root { --banner-h: 145px; } }
@media (max-width: 359px) { :root { --banner-h: 183px; } }
.main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: var(--banner-h);
}
/* Breadcrumb — verbatim from prototype.css lines 247-251 */
.bc {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:13px;
    color:var(--t2);
}
.bc .sep {
    color:var(--t3);
    display:flex;
    align-items:center;
}
.bc .sep .material-icons {
    font-size:16px;
}
.bc .cur {
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    cursor:default;
}
/* Top chrome bar (prototype .topbar / .topbar-r, lines 261 + 267) */
.topbar {
    height:56px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:50;
    flex-shrink:0;
}
.topbar-r {
    display:flex;
    align-items:center;
    gap:10px;
}
/* Bug 2: hp-txt flex column starts text left-aligned (align-items default is stretch) */
.hp-txt {
    align-items:flex-start;
}
/* Confidentiality banner (prototype #confidentiality-banner) */
.conf-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--text);
    color: #fff;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 -2px 8px rgba(0,0,0,.25);
}
.conf-banner strong {
    color: var(--ab);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 10px;
}
.conf-banner .conf-sep {
    color: rgba(255,255,255,.55);
}
/* ── Page header bar (.page-hdr / .ph-l / .ph-t / .ph-s / .ph-r) ───── */
/* Verbatim from prototype.css lines 579-583. Used in application.html.erb lines 44-50. */
.page-hdr {
    padding:24px 24px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:13px;
    flex-wrap:wrap;
}
.ph-l {
    display:flex;
    flex-direction:column;
    gap:3px;
}
.ph-t {
    font-size:22px;
    font-weight:700;
    color:var(--text);
    letter-spacing:-.025em;
}
.ph-s {
    font-size:13px;
    color:var(--t2);
}
.ph-r {
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
    margin-top:2px;
}
.profile-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sh);
}
.profile-section h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    font-weight: 700;
    margin-bottom: .9rem;
}
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}
.definition-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1.25rem;
    margin: 0;
}
.definition-list dt {
    color: var(--t3);
    font-size: .85rem;
}
.definition-list dd {
    margin: 0;
}
/* ── Badges + score tiers (prototype .badge family) ────────────────── */
/* Base .badge — verbatim from prototype.css line 632 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.badge .material-icons {
    font-size: 12px;
}
/* Status modifier classes — verbatim from prototype.css lines 633-637 */
.badge.open {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.badge.closed {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
.badge.concept {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.badge.intern-b {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
.badge.extern-b {
    background: var(--s2);
    border: 1px solid var(--border);
    color: var(--t2);
}
.badge.matching {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
/* sdot — generic dot + per-status colour overrides (prototype lines 639-641) */
.badge .sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    flex-shrink: 0;
}
.badge.open .sdot {
    background: var(--green);
}
.badge.closed .sdot {
    background: var(--red);
}
.badge.concept .sdot {
    background: var(--amber);
}
/* .status-badge — kept for backward compat; prefer .badge.* modifier classes above */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.status-badge--draft {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.status-badge--open {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.status-badge--matching {
    background: var(--purl);
    border: 1px solid var(--purb);
    color: var(--purple);
}
.status-badge--closed {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
.score-tier {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.score-tier--strong {
    background: var(--gl);
    border: 1px solid var(--gb);
    color: var(--gd);
}
.score-tier--good {
    background: var(--bl);
    border: 1px solid var(--bb);
    color: var(--bd);
}
.score-tier--fair {
    background: var(--al);
    border: 1px solid var(--ab);
    color: var(--amber);
}
.score-tier--low {
    background: var(--rl);
    border: 1px solid var(--rb);
    color: var(--red);
}
tr.row-link {
    cursor: pointer;
}
tr.row-link:hover {
    background: var(--s2);
}
/* -- Candidate-status badge (.cs / .cs-u / .cs-g / .cs-o / .cs-af / .cs-aa) --
   Verbatim from prototype.css lines 627-632 (fidelity gap css-010).
   Used on the matching workspace candidate list and candidate detail header.  */
.cs {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
    border:1px solid transparent;
}
.cs-u {
    background:#EAF1FB;
    color:var(--bd);
    border-color:#A8C8EE;
}
.cs-g {
    background:var(--purl);
    color:var(--purple);
    border-color:var(--purb);
}
.cs-o {
    background:var(--al);
    color:var(--amber);
    border-color:var(--ab);
}
.cs-af {
    background:var(--rl);
    color:var(--red);
    border-color:var(--rb);
}
.cs-aa {
    background:var(--gl);
    color:var(--gd);
    border-color:var(--gb);
}
/* Prototype input rule (line 639) omits type=password — match it for auth forms */
input[type=password] {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    outline: none;
    font-family: var(--font);
}
/* Work-mode button group (prototype setWorkMode active state) */
.wm-btn.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
/* Field-state segmented control (prototype Invulvelden _fcBtn active) */
.seg-btn {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--rs);
    border: 1px solid var(--border2);
    cursor: pointer;
    font-family: var(--font);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    color: var(--t2);
}
.seg-btn.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}
/* ── Prototype cards / stats / table (.card .stats-row .tbl) ───────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px;
    margin-bottom: 13px;
    box-shadow: var(--sh);
}
.card-t {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 3px;
    letter-spacing: -.015em;
}
.stats-row {
    display: grid;
    gap: 11px;
    margin-bottom: 18px;
}
.stats-row--3 {
    grid-template-columns: repeat(3, 1fr);
}
.stats-row--6 {
    grid-template-columns: repeat(6, 1fr);
}
.card-hdr {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:14px;
}
.tbl-cell-title {
    font-weight: 600;
}
.tbl-cell-ref {
    font-size: 11px;
    color: var(--t3);
    font-family: var(--mono);
}
.stat-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 5px;
}
.stat-val {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}
.tbl {
    width: 100%;
    border-collapse: collapse;
}
.tbl th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--t3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.tbl td {
    padding: 12px 12px;
    font-size: 13px;
    color: var(--text);
    border-bottom: 1px solid var(--border2);
    vertical-align: middle;
}
.tbl tbody tr:hover td {
    background: var(--s2);
    cursor: pointer;
}
.tbl tr:last-child td {
    border-bottom: none;
}
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.search-wrap .material-symbols-outlined {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--t3);
    pointer-events: none;
}
.filter-input, .filter-select {
    font-size: 12px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: var(--rs);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    outline: none;
}
.filter-input {
    width: 100%;
    padding-left: 28px;
}
.filter-select {
    min-width: 130px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.result-count {
    font-size: 12px;
    color: var(--t3);
}
.label-xs {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--t2);
    margin-bottom: 13px;
    text-decoration: none;
    cursor: pointer;
}
.back-link:hover {
    color: var(--text);
    text-decoration: none;
}
.jv-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.jv-header__meta {
    color: var(--t2);
    font-size: .85rem;
    margin: .25rem 0 0;
}
.jv-header__right {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.jv-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
    gap: .75rem;
}
/* ── Tables ────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.data-table th {
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    color: var(--t3);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.data-table td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border2);
}
/* ── Forms ─────────────────────────────────────────────────────────── */
.form-input, .form-textarea, .form-select, .form-input--inline, .form-select--inline {
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--rs);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    outline: none;
    transition: border-color .15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--blue);
}
.form-textarea {
    width: 100%;
}
.form-input--inline {
    width: 7rem;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-grid label, .form-block {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .82rem;
    color: var(--t2);
    font-weight: 500;
}
.form-block {
    margin-bottom: 1rem;
}
/* Two- and three-column form grid (prototype.css lines 657-658) */
.fr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}
.fr3 {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:11px;
}
/* Inline helper text below form fields (prototype.css lines 1131-1132) */
.hint {
    display:flex;
    align-items:flex-start;
    gap:5px;
    font-size:12px;
    color:var(--t3);
    margin-top:7px;
    line-height:1.4;
}
.hint i {
    font-size:13px;
    flex-shrink:0;
    margin-top:1px;
}
/* ── App shell: sidebar + main (prototype .nav layout) ─────────────── */
.app-shell {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    flex-direction: row;
}
.app-main {
    flex: 1;
    min-width: 0;
}


/* On desktop (≥768px) the sidebar is always flex — override any Tailwind hidden class. */
@media (min-width: 768px) {nav.nav {
    display: flex !important;
}
 }
.nav {
    width: var(--nw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .25s cubic-bezier(.4,0,.2,1);
}
.nav-logo {
    padding: 0 12px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border2);
    flex-shrink: 0;
}
.nav-logo-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-logo-name {
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    color: var(--text);
}
.nav-items-wrap {
    padding: 6px 0;
    flex: 1;
}
.nav-sec {
    padding: 16px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--t3);
    text-transform: uppercase;
}
.ni {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--rs);
    cursor: pointer;
    margin: 1px 6px;
    transition: background .15s;
    user-select: none;
    text-decoration: none;
}
.ni:hover {
    background: var(--s2);
    text-decoration: none;
}
.ni.active {
    background: var(--s2);
}
.ni-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--t2);
}
.ni-icon .material-symbols-outlined {
    font-size: 20px;
}
.ni.active .ni-icon {
    color: var(--text);
}
.ni-txt {
    display:flex;
    flex-direction:column;
    gap:1px;
    flex:1;
    min-width:0;
    overflow:hidden;
}
.ni-lbl {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ni.active .ni-lbl {
    color: var(--text);
    font-weight: 600;
}
.ni-sub {
    font-size:11.5px;
    color:var(--t3);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.35;
}
.nav-bot {
    margin-top: auto;
    padding: 9px;
    border-top: 1px solid var(--border2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg,#9B59B6,#5B8AF0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}
.nav-user-txt {
    flex: 1;
    min-width: 0;
}
.nav-un {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-ur {
    font-size: 11px;
    color: var(--t3);
}
.nav-signout {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--rs);
    display: flex;
    align-items: center;
}
.nav-signout:hover {
    background: var(--s2);
    color: var(--text);
}
/* ── Nav collapse/expand toggle button (prototype lines 139 + 174-200) ─ */
.nav-toggle .material-icons {
    font-size: 18px;
}
/* Toggle button — expanded state (prototype lines 174-187) */
.nav-toggle {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border2);
    background: var(--s2);
    cursor: pointer;
    color: var(--t2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, background .15s, width .25s, height .25s, border-radius .25s;
    opacity: 1 !important;
    visibility: visible !important;
}
.nav-toggle:hover {
    background: var(--s2);
    color: var(--text);
    border-color: var(--border);
}
/* Collapsed: toggle fills the entire 56×56 header bar (prototype lines 191-200) */
.nav.collapsed .nav-toggle {
    margin: 0;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--t2);
}
.nav.collapsed .nav-toggle:hover {
    background: var(--s2);
    color: var(--text);
}
/* ── Nav collapsed state — complete block (prototype lines 147-259) ── */
/* Base collapsed width */
.nav.collapsed {
    width: 56px;
}
/* Max-width transition on text elements so they fade out cleanly (prototype lines 150-155) */
.nav-logo-name,
.ni-lbl,
.ni-badge,
.nav-sec,
.nav-un,
.nav-ur {
    max-width: 220px;
    transition: max-width .2s ease, opacity .15s ease;
}
.nav.collapsed .nav-logo-name,
.nav.collapsed .ni-lbl,
.nav.collapsed .ni-badge,
.nav.collapsed .nav-sec,
.nav.collapsed .nav-un,
.nav.collapsed .nav-ur {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
}
/* Collapsed nav-logo: centre the toggle button, hide mark + name (prototype lines 169-171) */
.nav.collapsed .nav-logo {
    padding: 0;
    justify-content: center;
    gap: 0;
}
.nav.collapsed .nav-logo-mark {
    display: none;
}
.nav.collapsed .nav-logo-name {
    display: none;
}
/* Hide section headers and subtitles when collapsed (prototype lines 203-204) */
.nav.collapsed .nav-sec {
    display: none;
}
.nav.collapsed .ni-sub {
    display: none;
}
/* Nav items wrapper: remove horizontal padding when collapsed (prototype line 207) */
.nav.collapsed .nav-items-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Collapsed nav items: icon perfectly centred in 56px nav (prototype lines 214-221) */
.nav.collapsed .ni {
    justify-content: center;
    padding: 0;
    margin: 1px 4px;
    height: 44px;
    gap: 0;
    width: calc(56px - 8px);
}
/* ni-badge base style (prototype line 232) */
.ni-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}
/* Hide badge and text container when collapsed (prototype lines 231-233) */
.nav.collapsed .ni-txt {
    display: none;
}
.nav.collapsed .ni-badge {
    display: none;
}
/* Collapsed bottom user area (prototype lines 241-242) */
.nav.collapsed .nav-user {
    justify-content: center;
    padding: 7px 0;
}
.nav.collapsed .nav-bot {
    padding: 9px 4px;
}
/* ── Tooltips for collapsed nav items (prototype lines 247-259) ──── */
.nav.collapsed .ni {
    position: relative;
}
.nav.collapsed .ni:hover::after {
    content: attr(data-lbl);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    color: var(--surface);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--rs);
    white-space: nowrap;
    z-index: 800;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
/* ── Overview (role-aware landing) ─────────────────────────────────── */
.mc-overview {
    max-width: 1040px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.nav-section {
    margin-bottom: 1.75rem;
}
.nav-section__title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--t3);
    font-weight: 700;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.nav-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem;
}
.nav-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: .92rem;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.nav-card:hover {
    border-color: var(--bb);
    box-shadow: var(--shm);
    transform: translateY(-1px);
    text-decoration: none;
}
.nav-card__icon {
    color: var(--blue);
}
/* ── Job-profile / generic list cards ──────────────────────────────── */
.job-profile-list, .progress-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.job-profile-card, .progress-card, .match-rank-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 1.1rem 1.25rem;
}
.job-profile-card__meta, .progress-card__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
}
.job-profile-card__title {
    margin: 0 0 .35rem;
    font-size: 1rem;
}
.job-profile-card__title a {
    color: var(--text);
}
.job-profile-card__info, .progress-card__meta {
    color: var(--t2);
    font-size: .85rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0;
}
.job-profile-card__date {
    color: var(--t3);
    font-size: .8rem;
    margin: .35rem 0 0;
}
.progress-card__counts {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 .35rem;
}
.progress-phases {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .82rem;
    color: var(--t2);
}
/* ── Matching workspace — ranked candidate list (prototype .cand-item) ─ */
.cand-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cand-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: all .15s;
    text-decoration: none;
    color: var(--text);
}
.cand-item:hover {
    border-color: var(--green);
    box-shadow: var(--sh);
    text-decoration: none;
}
/* MV-7 — my/vacancies/index.html.erb's own card sets flex-direction:column inline to stack its
   rows, but inherits .cand-item's align-items:center from the row layout above; on a column
   axis that centers each child on the cross (horizontal) axis instead of stretching it, which is
   what read as "centered content, wide empty margins" against the prototype's full-width card.
   .vacancy-card is already on that markup as an unused hook — this is what it was for. */
.cand-item.vacancy-card {
    align-items: stretch;
}
/* DS-5 — my/data_sharing/show.html.erb's organisation card sets flex-direction:column inline to
   stack its rows, but inherits .cand-item's align-items:center from the row layout above; on a
   column axis that centers each child (starting with the organisation name) on the cross
   (horizontal) axis instead of stretching it flush left. Same mechanism and same fix shape as
   MV-7's .vacancy-card rule above. */
.cand-item.org-card {
    align-items: stretch;
}
.cand-item.sel {
    border:2px solid var(--green);
    background:var(--gl);
}
.cand-chk {
    width:16px;
    height:16px;
    border-radius:4px;
    border:1.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .15s;
}
.cand-item.sel .cand-chk {
    background:var(--green);
    border-color:var(--green);
}
.cand-rank {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--t2);
    flex-shrink: 0;
}
.cand-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bb), var(--blue));
}
.cand-name {
    flex: 1;
    font-weight: 600;
    min-width: 0;
}
.cand-av--lg {
    width: 48px;
    height: 48px;
    font-size: 16px;
}
/* ── Match-score progress bar + tier badges (prototype .mbw/.mb/.mf/.mpct/.rbadge) ─ */
.mbw {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 155px;
}
.mb {
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    flex: 1;
    overflow: hidden;
}
.mf {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.mpct {
    font-size: 12px;
    font-weight: 700;
    min-width: 36px;
    text-align: right;
    font-family: var(--mono);
}
.rbadge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}
.rbadge-ex {
    background: var(--gl);
    color: var(--gd);
    border: 1px solid var(--gb);
}
.rbadge-good {
    background: #E3F2FD;
    color: #1565C0;
    border: 1px solid #90CAF9;
}
.rbadge-mod {
    background: #FFF8E1;
    color: #F57F17;
    border: 1px solid #FFE082;
}
.rbadge-low {
    background: var(--s2);
    color: var(--t3);
    border: 1px solid var(--border2);
}
.detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.detail-header h1 {
    margin: 0;
}
.detail-header__meta {
    color: var(--t2);
    font-size: .9rem;
    margin: .25rem 0 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
/* ── Matching workspace ────────────────────────────────────────────── */
.match-filter {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.match-rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.match-rank-card__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .6rem;
}
.match-rank-card__name {
    font-weight: 700;
}
.match-rank-card__name a {
    color: var(--text);
}
.match-rank-card__pct {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--blue);
    margin-left: auto;
}
.match-rank-card__detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
}
.match-rank-card__detail dt {
    color: var(--t3);
    font-size: .82rem;
}
.match-rank-card__detail dd {
    margin: 0;
}
.match-narrative {
    font-size: .92rem;
    line-height: 1.6;
}
/* ── Candidate status stepper ──────────────────────────────────────── */
.status-stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0;
    margin: 0 0 1rem;
}
.status-stepper__step {
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .4;
    font-size: .82rem;
}
.status-stepper__step.is-done {
    opacity: 1;
}
.status-stepper__dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--border2);
    color: var(--t3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .72rem;
}
.status-stepper__step.is-done .status-stepper__dot {
    background: var(--blue);
    color: #fff;
}
.status-form, .note-form, .membership-form, .ai-generate-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}
.preference-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.preference-group form {
    display: inline;
}
.hm-cv-name {
    margin: 0 0 .4rem;
}
.hm-cv-name a {
    color: var(--text);
}
/* ── Notes ─────────────────────────────────────────────────────────── */
.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.note-item {
    background: var(--al);
    border: 1px solid var(--ab);
    border-radius: var(--rs);
    padding: 10px 13px;
}
.note-item__meta {
    color: var(--amber);
    font-size: 11px;
    margin: 0 0 3px;
    font-weight: 500;
}
.note-item__body {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}
/* prototype class aliases (note-meta / note-text) — keep in sync with BEM above */
.note-meta {
    font-size: 11px;
    color: var(--amber);
    margin-bottom: 3px;
    font-weight: 500;
}
.note-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
}
/* ── Stat cards ────────────────────────────────────────────────────── */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .9rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.stat-card__value {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--text);
}
.stat-card__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 5px;
}
.stat-sub {
    font-size: 11px;
    color: var(--t3);
    margin-top: 3px;
}
/* ── Statistics funnel + distribution ──────────────────────────────── */
.funnel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.funnel-row {
    display: grid;
    grid-template-columns: 10rem 1fr 3rem;
    align-items: center;
    gap: .75rem;
}
.funnel-row__label {
    color: var(--t2);
    font-size: .88rem;
}
.funnel-row__bar {
    height: .9rem;
    border-radius: 999px;
    background: var(--blue);
    width: var(--w);
    min-width: 3px;
}
.funnel-row__count {
    text-align: right;
    font-weight: 700;
}
.distribution-bars {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.distribution-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.distribution-row__label {
    width: 8rem;
    color: var(--t2);
    font-size: .88rem;
}
/* ── Admin sub-nav ─────────────────────────────────────────────────── */
.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.admin-subnav__item {
    padding: .5rem .9rem;
    text-decoration: none;
    color: var(--t2);
    border-bottom: 2px solid transparent;
    font-size: .9rem;
}
.admin-subnav__item:hover {
    color: var(--text);
    text-decoration: none;
}
.admin-subnav__item.is-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}
/* ── ODC archetype drive-card grid + state modifiers (prototype.css lines 724-747) ─
   .dg4     — 4-column selection grid (step 3 of job-profile wizard + ODC drives step)
   .dc      — drive card base (border, radius, padding, cursor, text-align)
   .fc/.mc  — feminine/masculine type colour accent (border override)
   .di      — circular icon container inside each card
   .dn      — drive code/name label
   .dt      — drive sub-label (hidden when a selection state is active)
   .sb      — selection-rank badge (1st / 2nd / 3rd); hidden by default    */
.dg4 {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-bottom:9px;
}
.dc {
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:13px 8px;
    cursor:pointer;
    transition:all .15s;
    text-align:center;
    position:relative;
    background:var(--surface);
}
.dc.dis {
    opacity:.27;
    cursor:not-allowed;
    transform:none!important;
}
.dc.fc {
    border-color:var(--pb);
}
.dc.mc {
    border-color:var(--bb);
}
.dc.s1 {
    border:2px solid var(--green);
    background:var(--gl);
}
.dc.s2 {
    border:2px solid var(--blue);
    background:var(--bl);
}
.dc.s3 {
    border:2px solid var(--amber);
    background:var(--al);
}
.dc.fc:hover:not(.dis):not(.s1):not(.s2):not(.s3) {
    border-color:var(--pink);
    background:var(--pl);
}
.dc.mc:hover:not(.dis):not(.s1):not(.s2):not(.s3) {
    border-color:var(--blue);
    background:var(--bl);
}
.di {
    width:31px;
    height:31px;
    border-radius:50%;
    margin:0 auto 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}
.fc .di {
    background:var(--pl);
    color:var(--pink);
}
.mc .di {
    background:var(--bl);
    color:var(--blue);
}
.s1 .di {
    background:var(--gl);
    color:var(--green);
}
.s2 .di {
    background:var(--bl);
    color:#185FA5;
}
.s3 .di {
    background:var(--al);
    color:var(--amber);
}
.dn {
    font-size:12px;
    font-weight:700;
    color:var(--text);
}
.dt {
    font-size:10px;
    color:var(--t3);
    margin-top:2px;
}
.dc.s1 .dt,.dc.s2 .dt,.dc.s3 .dt {
    display:none;
}
.sb {
    font-size:10px;
    font-weight:600;
    padding:2px 5px;
    border-radius:20px;
    margin-top:3px;
    display:none;
}
.s1 .sb {
    display:inline-block;
    background:var(--gl);
    color:var(--gd);
}
.s2 .sb {
    display:inline-block;
    background:var(--bl);
    color:#185FA5;
}
.s3 .sb {
    display:inline-block;
    background:var(--al);
    color:var(--amber);
}
/* ── Pitfalls ──────────────────────────────────────────────────────── */
.pitfall-options {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .5rem 0;
}
.pitfall-option {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
}
/* ── Pitfall card grid + state modifiers (prototype.css lines 772-785) ─
   .pg5     — 5-column selection grid (step 4 of the job-profile wizard)
   .pc      — pitfall card base (modifier-only; shares border/radius with .dc)
   .pb2     — inline badge ("Most critical" / "Important") hidden by default;
              shown when .pc.sc or .pc.si2 is active                       */
.pg5 {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:7px;
}
.pc.dis2 {
    opacity:.27;
    cursor:not-allowed;
}
.pc.fc {
    border-color:var(--pb);
}
.pc.mc {
    border-color:var(--bb);
}
.pc.sc {
    border:2px solid var(--red);
    background:var(--rl);
}
.pc.si2 {
    border:2px solid var(--amber);
    background:var(--al);
}
.pc.fc .di {
    background:var(--pl);
    color:var(--pink);
}
.pc.mc .di {
    background:var(--bl);
    color:var(--blue);
}
.pc.sc .di {
    background:var(--rl);
    color:var(--red);
}
.pc.si2 .di {
    background:var(--al);
    color:var(--amber);
}
.pb2 {
    font-size:10px;
    font-weight:600;
    padding:2px 5px;
    border-radius:20px;
    margin-top:3px;
    display:none;
}
.pc.sc .pb2 {
    display:inline-block;
    background:var(--rl);
    color:var(--pf-dark);
}
.pc.si2 .pb2 {
    display:inline-block;
    background:var(--al);
    color:var(--amber);
}
.pc.sc .dt,.pc.si2 .dt {
    display:none;
}
/* ── Result competencies list (shared) ─────────────────────────────── */
.result-competencies {
    font-size: .9rem;
    line-height: 1.8;
}
/* ── Auth + privacy screens ────────────────────────────────────────── */
.auth-wrap {
    display: flex;
    justify-content: center;
    padding: 3.5rem 1rem;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shm);
    padding: 2rem;
}
.auth-card__title {
    margin-bottom: 1.5rem;
}
.auth-card .form-block {
    margin-bottom: 1rem;
}
.auth-card .btn {
    width: 100%;
    margin-top: .5rem;
}
.auth-card__link {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .88rem;
}
.mc-privacy {
    max-width: 600px;
    margin: 3.5rem auto;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shm);
}
/* ── Wizard layout ─────────────────────────────────────────────────── */
.wizard-container {
    max-width: 900px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.wizard-header {
    margin-bottom: 2rem;
}
.wizard-steps {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 .25rem;
}
.wizard-step {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--border2);
    color: var(--t3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
}
.wizard-step--active {
    background: var(--text);
    color: var(--bg);
}
.wizard-step--done {
    background: var(--blue);
    color: #fff;
}
.wizard-step-label {
    color: var(--t2);
    font-size: .85rem;
    margin: 0;
}
.wizard-instruction {
    color: var(--t2);
    margin-bottom: 1.25rem;
}
.wizard-progress {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}
.wizard-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
/* .footer / .sc2 — wizard step-bar footer row + centred step counter
   Verbatim from prototype.css lines 1150-1152. Used in jobprofile, ODC,
   education wizards (prototype HTML lines 3167, 3546, 4581, 4602, 4659,
   6271-6359). */
.footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:15px;
    border-top:1px solid var(--border2);
    position:relative;
}
.footer>.sc2,.footer .btng>.sc2 {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
}
.sc2 {
    font-size:12px;
    color:var(--t3);
}
/* ── Archetype grid (step 1) ───────────────────────────────────────── */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .9rem;
    margin-bottom: 1.5rem;
}
.archetype-card {
    position: relative;
    padding: 1.1rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
    transition: border-color .15s, transform .1s;
    user-select: none;
}
.archetype-card:hover {
    border-color: var(--bb);
    background: var(--bl);
    transform: translateY(-2px);
}
.archetype-card--selected, .archetype-card.ranked, .archetype-card.archetype-card--selected {
    border-color: var(--blue);
    background: var(--bl);
}
.archetype-card__rank, .archetype-rank-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.archetype-card__rank:empty, .archetype-rank-badge:empty {
    display: none;
}
.archetype-card__drive, .archetype-drive {
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
}
.archetype-icon {
    color: var(--blue);
    font-size: 2rem !important;
}
.archetype-name {
    font-size: 1rem;
    font-weight: 700;
}
.archetype-tagline {
    font-size: .78rem;
    color: var(--t2);
}
/* ── Summary drives / connector (shared with show screens) ─────────── */
.summary-drives {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.summary-drive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .75rem 1rem;
    border-radius: var(--r);
    min-width: 110px;
    text-align: center;
    font-size: .85rem;
    background: var(--bl);
    border: 1px solid var(--bb);
}
.summary-drive-rank {
    font-weight: 700;
    font-size: 1rem;
}
/* ── Competency cards (step 2) ─────────────────────────────────────── */
.competency-group {
    margin-bottom: 1.75rem;
}
.competency-group-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    margin-bottom: .75rem;
}
.competency-group-drive {
    font-size: .8rem;
    font-weight: 400;
    color: var(--t2);
    margin-left: auto;
}
.competency-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.competency-card {
    padding: .8rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--rs);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}
.competency-card:hover {
    border-color: var(--bb);
    background: var(--bl);
}
.competency-card.selected {
    border-color: var(--green);
    background: var(--gl);
}
.competency-card.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
.competency-kind {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t3);
    display: block;
    margin-bottom: .2rem;
}
.competency-text {
    margin: 0;
    font-size: .9rem;
}
/* ── Result / profile screens ──────────────────────────────────────── */
.result-container, .profile-container {
    max-width: 900px;
    margin: 1.75rem auto;
    padding: 0 1.5rem;
}
.result-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--sh);
}
.result-section h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    margin-bottom: 1rem;
}
.result-drives {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.result-drive-card {
    flex: 1;
    min-width: 160px;
    padding: 1.1rem;
    border-radius: var(--r);
    text-align: center;
    background: var(--bl);
    border: 1px solid var(--bb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}
.result-drive-rank {
    font-size: 1.1rem;
    font-weight: 800;
}
.result-drive-tag {
    font-size: .78rem;
    color: var(--t2);
    margin: 0;
}
.result-connector {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}
.connector-card {
    padding: .85rem 1.25rem;
    border-radius: var(--r);
    background: var(--bl);
    border: 1px solid var(--bb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    min-width: 130px;
}
.connector-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--t3);
}
.connector-badge {
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
}
.result-balances {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.balance-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.balance-label {
    width: 4rem;
    font-weight: 600;
    text-transform: capitalize;
}
.balance-track {
    flex: 1;
    height: .7rem;
    background: var(--s2);
    border-radius: 999px;
    overflow: hidden;
}
.balance-fill {
    height: 100%;
    background: var(--blue);
    border-radius: 999px;
    transition: width .4s;
}
.balance-score {
    width: 2.5rem;
    text-align: right;
    font-size: .85rem;
    color: var(--t2);
}
.result-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}
.profile-archetypes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.profile-archetype-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-radius: var(--rs);
    border-left: 4px solid var(--blue);
    background: var(--bl);
}
.profile-rank {
    font-weight: 800;
    width: 1.5rem;
    text-align: center;
}
.profile-archetype-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.profile-archetype-info em {
    font-size: .82rem;
    color: var(--t2);
    font-style: normal;
}
.profile-shadow {
    margin: .25rem 0 .5rem;
    padding: .6rem 1rem;
    background: var(--s2);
    border-radius: var(--rs);
    font-size: .85rem;
    color: var(--t2);
    border-left: 3px solid var(--border);
}
.profile-competencies {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    padding: 0;
}
.profile-competency {
    padding: .75rem 1rem;
    border-radius: var(--rs);
    border-left: 4px solid var(--bb);
    background: var(--bl);
    font-size: .9rem;
}
/* ── Form validation errors (prototype inline-red pattern) ─────────── */
/* Rails wraps invalid fields in .field_with_errors — display:contents
   prevents the wrapper div from breaking flex/grid child layouts.    */
.field_with_errors {
    display: contents;
}
.field_with_errors .form-input,
.field_with_errors .form-textarea,
.field_with_errors .form-select,
.field_with_errors input:not([type=submit]):not([type=button]):not([type=hidden]):not([type=checkbox]):not([type=radio]),
.field_with_errors textarea,
.field_with_errors select {
    border-color: var(--red) !important;
    background: var(--rl);
}
select:user-invalid,
textarea:user-invalid {
    border-color: var(--red) !important;
    background: var(--rl);
}
/* Error summary box (shown at top of forms with validation failures) */
.form-errors {
    background: var(--rl);
    border: 1px solid var(--rb);
    border-radius: var(--rs);
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    color: var(--red);
    font-size: .85rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.form-errors .form-errors__icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
}
.form-errors ul {
    margin: .25rem 0 0;
    padding-left: 1.2rem;
}
.form-errors li {
    margin-bottom: .1rem;
}
/* Inline field error text */
.field-error {
    display: block;
    color: var(--red);
    font-size: .76rem;
    margin-top: .2rem;
    line-height: 1.3;
}
/* Input placeholder improvement — prototype uses subdued grey */
input::placeholder, textarea::placeholder {
    color: var(--t3);
}
/* ── Improved empty state (prototype hm-empty pattern) ─────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: var(--t3);
    text-align: center;
}
.empty-state .material-icons, .empty-state .material-symbols-outlined {
    font-size: 36px;
    color: var(--border);
}
.empty-state__title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--t2);
    margin: 0;
}
.empty-state__sub {
    font-size: .82rem;
    color: var(--t3);
    margin: 0;
}
/* ── Tabs (tabs_controller) ─────────────────────────────────────────── */
.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}
.tab-btn {
    padding: .55rem 1.1rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--t2);
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: var(--font);
    transition: color .15s;
}
.tab-btn:hover {
    color: var(--text);
}
.tab-btn.is-active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    font-weight: 600;
}
.tab-panel {
    display: none;
}
.tab-panel.is-active {
    display: block;
}
/* ── Toggle row — div+tog-thumb pattern (prototype lines 660-668) ──── */
/* Used in wizard step 1 own-company toggle and similar flow toggles.   */
/* Distinct from the checkbox+.tog-sl pattern (admin/settings screens). */
.tog-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.tog-row:hover {
    border-color: var(--gb);
}
.tog-row.on {
    background: var(--gl);
    border-color: var(--gb);
}
.tog {
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: var(--border);
    position: relative;
    flex-shrink: 0;
    transition: background .2s;
}
.tog.on {
    background: var(--green);
}
.tog-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog.on .tog-thumb {
    left: 15px;
}
.tog-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.tog-sub {
    font-size: 12px;
    color: var(--t3);
    margin-left: auto;
}
.tog-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--rs);
    border: 1px solid var(--border);
    background: var(--bg);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.tog-sm:hover, .tog-sm.on {
    border-color: var(--gb);
}
.tog-sm.on {
    background: var(--gl);
}
.tog-sm-lbl {
    font-size: 12px;
    font-weight: 500;
    color: var(--t2);
}
.tog-sm.on .tog-sm-lbl {
    color: var(--gd);
}
/* ── Person-selector + dropdown (.psel / .dd family) (prototype.css lines 659-676) ──────
   Used in the candidate/user person-select widget wherever a JFA or HM picks a person
   from a searchable dropdown list (e.g. assign reviewer, select candidate).
   ──────────────────────────────────────────────────────────────────────────────────────── */
.psel {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:var(--rs);
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
    min-height:37px;
    transition:border-color .15s;
}
.psel:hover {
    border-color:var(--green);
}
.psel.filled {
    border-color:var(--gb);
}
.p-av {
    width:21px;
    height:21px;
    border-radius:50%;
    background:var(--gl);
    display:none;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:700;
    color:var(--gd);
    flex-shrink:0;
}
.p-ph {
    font-size:13px;
    color:var(--t3);
    flex:1;
}
.p-nm {
    font-size:13px;
    color:var(--text);
    font-weight:500;
    flex:1;
    display:none;
}
.dd {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r);
    margin-top:4px;
    display:none;
    box-shadow:var(--shm);
    position:relative;
    z-index:200;
}
.dd.open {
    display:block;
}
.dd-srch {
    padding:6px 9px;
    border-bottom:1px solid var(--border2);
}
.dd-srch input {
    font-size:12px;
    padding:5px 9px;
    border-radius:var(--rs);
    border:1px solid var(--border);
    background:var(--bg);
    width:100%;
}
.dd-list {
    max-height:145px;
    overflow-y:auto;
}
.dd-item {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    cursor:pointer;
    font-size:13px;
    transition:background .1s;
}
.dd-item:hover {
    background:var(--bg);
}
.dd-av {
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--gl);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:700;
    color:var(--gd);
    flex-shrink:0;
}
.dd-role {
    font-size:11px;
    color:var(--t3);
    margin-left:auto;
}
.dd-empty {
    padding:9px 11px;
    font-size:12px;
    color:var(--t3);
    text-align:center;
}
.dd-add {
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
    cursor:pointer;
    font-size:13px;
    color:var(--green);
    border-top:1px solid var(--border2);
    font-weight:500;
}
.dd-add:hover {
    background:var(--gl);
}
/* ── Settings toggle — label+input[checkbox]+.tog-sl pattern (prototype lines 403-408) ── */
/* Used in .pm-set-row rows: admin settings, role-settings, hub settings, vacancy templates. */
/* .tog:has(.tog-sl) overrides the div-variant dimensions for the checkbox-label variant.   */
.tog:has(.tog-sl) {
    width: 40px;
    height: 22px;
    border-radius: 0;
    background: transparent;
}
.tog input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.tog-sl {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s;
}
.tog input:checked + .tog-sl {
    background: var(--blue);
}
.tog-sl:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tog input:checked + .tog-sl:before {
    transform: translateX(18px);
}
/* ── Chip toggle — label+input[checkbox]+span pattern (JE-1, design triage 2026-09-10) ── */
/* my/experience/_chips.html.erb: a multi-select rendered as rounded pill buttons, matching the */
/* prototype's own _mpeRenderChips (border-radius:20px, background switches on selection, no    */
/* visible checkbox) rather than a literal checkbox+label. Same "opacity:0, kept focusable"      */
/* checkbox-hiding technique as .tog above; :has() is already an established pattern here via    */
/* .tog:has(.tog-sl). */
.chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--t2);
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.chip input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.chip:has(input:checked) {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
/* ── Notification / bell panel ──────────────────────────────────────── */
.notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 92vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shl);
    z-index: 501;
    display: none;
    flex-direction: column;
}
.notif-panel__hdr {
    padding: .75rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    border-bottom: 1px solid var(--border2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.notif-item {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border2);
    font-size: .85rem;
    cursor: pointer;
    transition: background .1s;
}
.notif-item:hover {
    background: var(--s2);
}
.notif-item:last-child {
    border-bottom: none;
}
.notif-item.is-unread {
    background: var(--bl);
}
/* ── Drive block family — job-profile drives section + ODC result screens ── */
/* Ported from prototype.css lines 824-838 (drv-blk family + seclbl + tc)   */
.seclbl {
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--t3);
    text-transform:uppercase;
    margin-bottom:10px;
    margin-top:16px;
}
.seclbl:first-of-type {
    margin-top:0;
}
.drv-blk {
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--surface);
    margin-bottom:8px;
}
.dh {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    background:var(--s2);
}
.dh-ic {
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    flex-shrink:0;
}
.dh-nm {
    font-size:13px;
    font-weight:700;
    flex:1;
    min-width:0;
}
.dh-type {
    font-size:10px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
    white-space:nowrap;
}
.drv-blk.fb {
    border-color:var(--pb);
}
.drv-blk.mb {
    border-color:var(--bb);
}
.drv-blk.fb .dh {
    background:var(--pl);
}
.drv-blk.mb .dh {
    background:var(--bl);
}
.drv-blk.fb .dh-ic {
    background:var(--pb);
    color:#6B1A38;
}
.drv-blk.mb .dh-ic {
    background:var(--bb);
    color:#0E3D7A;
}
.drv-blk.fb .dh-nm {
    color:#5A0F2A;
}
.drv-blk.mb .dh-nm {
    color:#072E5E;
}
.drv-blk.fb .dh-type {
    background:var(--pb);
    color:#5A0F2A;
}
.drv-blk.mb .dh-type {
    background:var(--bb);
    color:#072E5E;
}
.tc {
    font-family:var(--mono);
    font-size:10px;
    font-weight:500;
    min-width:33px;
}
.drv-blk.fb .tc {
    color:#8B2A50;
}
.drv-blk.mb .tc {
    color:var(--bd);
}
.notif-item.is-unread:hover {
    background: color-mix(in srgb, var(--bl) 80%, var(--s2));
}
/* ── Mobile utilities ─────────────────────────────────────────────── */
/* Used by mobile-sidebar Stimulus controller (sidebar toggle on < 768px) */
.hidden {
    display: none;
}
.flex {
    display: flex !important;
}


/* ── Mobile layout (NF5 — 375px viewport) ───────────────────────── */
@media (max-width: 767px) {/* Sidebar: overlay mode on narrow screens */
  #mobile-sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 999;
    box-shadow: 4px 0 16px rgba(0,0,0,.25);
}
/* Reduce page padding */
  .page-container {
    padding: 10px 12px 20px;
}
.page-hdr {
    padding: 16px 12px 0;
}
/* Tables: horizontal scroll to prevent overflow */
  .card {
    overflow-x: auto;
}
/* Stat grids wrap on narrow screens */
  .stat-grid, .kpi-grid {
    flex-wrap: wrap !important;
}
/* Topbar: reduce horizontal padding */
  .topbar {
    padding: 0 12px;
}
/* F-527: the button that opens #mobile-sidebar has display:none inline
   (_topbar.html.erb) with no override anywhere -- unreachable on every
   screen, every role, at this exact width. Same breakpoint as the sidebar's
   own overlay mode above and the controller's _syncDesktop() (768px), so the
   button appears exactly when the overlay mechanism it triggers is active.
   !important is required: an inline style always wins over a plain selector,
   same reason .flex above already carries it. */
  .mobile-sidebar-toggle {
    display: flex !important;
}

}


/* ── Extra narrow viewports (375px / iPhone SE) ─────────────────── */
@media (max-width: 480px) {table {
    display: block;
    overflow-x: auto;
}
.stat-card {
    min-width: 0;
    flex: 1 1 100%;
}
.topbar {
    padding: 0 8px;
}

}
.notif-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    display: inline-block;
    flex-shrink: 0;
}
.notif-badge {
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}
/* ── Screen show/hide + fade-up animation (prototype lines 606-608) ──── */
/* .screen panels are hidden by default; .active makes them visible.      */
/* The @keyframes fu animation fires on entry for a subtle fade-up.       */
.screen {
    display: none;
    animation: fu .18s ease;
}
.screen.active {
    display: block;
}

@keyframes fu {from {
    opacity: 0;
    transform: translateY(5px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
 }


/* ── Keyframe animations (prototype lines 835, 1056, 1323, 1352, 1392) ── */
/* spin — loading spinner used in wizard step 6 + regen-flow (line 835)   */
@keyframes spin {to {
    transform: rotate(360deg);
}
 }
/* notifPulse — deep-link highlight pulse on notification target (line 1056) */
.notif-highlight {
    animation: notifPulse 1.6s ease;
}

@keyframes notifPulse {0% {
    box-shadow: 0 0 0 0 rgba(59,130,246,.45);
}
60% {
    box-shadow: 0 0 0 7px rgba(59,130,246,0);
}
100% {
    box-shadow: 0 0 0 0 rgba(59,130,246,0);
}
 }

/* drawerIn — career-portal job-detail drawer slide-in (line 1323) */
@keyframes drawerIn {from {
    transform: translateX(48px);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
 }

/* fadeUp — career-portal apply modal entrance (line 1352) */
@keyframes fadeUp {from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
 }
/* fadeInUp — apply-modal multi-step transition (line 1392) */
.apply-step {
    animation: fadeInUp .25s ease;
}

@keyframes fadeInUp {from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
 }
/* ── Pitfall result boxes (.pf-res / .pfb family) ───────────────────────
   Verbatim from prototype.css lines 786-808.
   Used on the matching/candidate-detail pitfall section to show "critical"
   (.pfb.cr) and "important" (.pfb.im) pitfall hits.
   ─────────────────────────────────────────────────────────────────────── */
.ctx-bar {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    padding:7px 12px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--rs);
    margin-bottom:12px;
    font-size:12px;
    color:var(--t2);
}
.ctx-pill {
    padding:2px 8px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    background:var(--gl);
    color:var(--gd);
}
.pf-res {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:13px;
}
.pfb {
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid;
    display:flex;
    align-items:stretch;
}
.pfb.cr {
    border-color:var(--rb);
}
.pfb.im {
    border-color:var(--ab);
}
.pfb-h {
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:6px;
    width:120px;
    flex-shrink:0;
    box-sizing:border-box;
}
.pfb.cr .pfb-h {
    background:var(--rl);
}
.pfb.im .pfb-h {
    background:var(--al);
}
.pfb-ic {
    width:25px;
    height:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}
.pfb.cr .pfb-ic {
    background:var(--rb);
    color:var(--pf-dark);
}
.pfb.im .pfb-ic {
    background:var(--ab);
    color:#7A4A00;
}
.pfb-nm {
    font-size:13px;
    font-weight:600;
}
.pfb.cr .pfb-nm {
    color:#6B1414;
}
.pfb.im .pfb-nm {
    color:var(--amber-dark);
}
.pfb-bdg {
    font-size:10px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
    white-space:nowrap;
}
.pfb.cr .pfb-bdg {
    background:#E88A8A;
    color:#3D0A0A;
}
.pfb.im .pfb-bdg {
    background:#DDA030;
    color:#3A1A00;
}
.pfb-b {
    padding:10px 12px;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.pfb-code {
    font-family:var(--mono);
    font-size:11px;
    margin-bottom:2px;
}
.pfb.cr .pfb-code {
    color:var(--red);
}
.pfb.im .pfb-code {
    color:var(--amber);
}
.pfb-sh {
    font-size:12px;
    color:var(--t2);
    line-height:1.5;
}
/* ── Connector / archetype-pair selector cards (.cg / .cc / .cc-pair / .cp)
   Verbatim from prototype.css lines 770-783 (gap cc-connector-family-missing).
   Used on the connector-selection step of the matching wizard and job-profile
   flow where a JFA picks a Connector archetype pair.
   ──────────────────────────────────────────────────────────────────────────── */
.conn-sec {
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid var(--border2);
}
.conn-t {
    font-size:12px;
    font-weight:600;
    color:var(--t2);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:6px;
}
.conn-t i {
    font-size:14px;
    color:var(--green);
}
.cg {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:6px;
}
.cc {
    border:1px solid var(--border);
    border-radius:var(--rs);
    padding:8px 10px;
    cursor:pointer;
    transition:all .15s;
    background:var(--surface);
}
.cc:hover {
    border-color:var(--green);
    background:var(--gl);
}
.cc.act {
    border:2px solid var(--green);
    background:var(--gl);
}
.cc.faded {
    opacity:.3;
    cursor:not-allowed;
}
.cc-pair {
    display:flex;
    align-items:center;
    gap:4px;
    margin-bottom:3px;
}
.cp {
    font-size:11px;
    font-weight:600;
    padding:2px 7px;
    border-radius:20px;
}
.cp.f {
    background:var(--pl);
    color:#8B2A50;
}
.cp.m {
    background:var(--bl);
    color:var(--bd);
}
.cp.s {
    background:var(--gl);
    color:var(--gd);
}
.cn {
    font-size:12px;
    color:var(--t2);
}



/* ── Migrated from prototype.css (components) ──────────────────────── */

/* ── Focus visible — WCAG 2.1 AA ─────────────────────────────
   Uses :focus-visible so keyboard users get clear focus rings
   without affecting mouse users.
   ─────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px;}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue);}
.ni:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
/* ── Scenario Guide ─────────────────────────────────────────── */
#scenario-guide{position:fixed;bottom:20px;right:20px;z-index:9500;width:300px;background:var(--surface);border:1.5px solid var(--bb);border-radius:var(--r);box-shadow:var(--shl);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s;}
#scenario-guide.sg-expanded{top:20px;bottom:auto;max-height:calc(100vh - 40px);}
.sg-header{background:var(--blue);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;transition:background .15s;flex-shrink:0;}
.sg-header:hover{background:var(--btn-blue-hover);}
.sg-title{font-size:13px;font-weight:700;flex:1;}
.sg-body{padding:14px 14px 0 14px;overflow-y:auto;flex:1;}
.sg-footer{padding:10px 14px 14px 14px;flex-shrink:0;border-top:1px solid var(--border2);background:var(--surface);}
.sg-step{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border2);}
.sg-step:last-child{border-bottom:none;}
.sg-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px;}
.sg-num.done{background:var(--green);color:#fff;}
.sg-num.active{background:var(--blue);color:#fff;}
.sg-num.pending{background:var(--border2);color:var(--t3);}
.sg-step-text{font-size:12px;line-height:1.5;}
.sg-step-text.done{color:var(--t3);text-decoration:line-through;}
.sg-step-text.active{color:var(--text);font-weight:600;}
.sg-step-text.pending{color:var(--t3);}
.sg-action-btn{margin-top:8px;width:100%;font-size:12px;padding:7px 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;border:none;border-radius:var(--rs);cursor:pointer;font-weight:600;transition:background .15s;}
.sg-action-btn:hover{background:var(--btn-blue-hover);}
/* Login screen: highlight Sophie Roos */

.mw-arch-card{border:2px solid var(--border);border-radius:var(--r);padding:12px 8px;cursor:pointer;transition:all .15s;text-align:center;position:relative;background:var(--surface);}
.mw-arch-card:hover:not(.disabled){border-color:var(--bb);background:var(--bl);}
.mw-arch-card.selected{border-color:var(--blue);background:var(--bl);}
.mw-arch-card.selected::after{content:'✓';position:absolute;top:5px;right:7px;font-size:11px;font-weight:700;color:var(--blue);}
.mw-arch-card.auto-sel{border-color:var(--amber);background:var(--al);cursor:default;}
.mw-arch-card.auto-sel::after{content:'AUTO';position:absolute;top:4px;right:5px;font-size:8px;font-weight:700;color:var(--amber);background:var(--al);border-radius:3px;padding:1px 3px;}
.mw-arch-card.disabled{opacity:.25;cursor:default;filter:grayscale(.7);}
.mw-arch-img{width:44px;height:44px;border-radius:50%;margin:0 auto 7px;background:var(--s2);display:flex;align-items:center;justify-content:center;}
.mw-arch-name{font-size:11px;font-weight:600;line-height:1.3;}
.mw-arch-id{font-size:10px;color:var(--t3);margin-top:2px;}
.mw-substep{display:flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;font-size:12px;font-weight:500;background:var(--s2);color:var(--t3);}
.mw-substep.active{background:var(--text);color:var(--bg);font-weight:700;}
.mw-substep.done{background:var(--blue);color:#fff;font-weight:600;}
.mw-substep.done::before{content:'✓ ';}
.mw-comp-card{border:2px solid var(--border);border-radius:var(--rs);padding:11px 13px;cursor:pointer;transition:all .15s;position:relative;background:var(--surface);}
.mw-comp-card:hover{border-color:var(--bb);background:var(--bl);}
.mw-comp-card.selected{border-color:var(--green);background:var(--gl);}
.mw-comp-card.selected::after{content:'✓';position:absolute;top:6px;right:8px;font-size:13px;font-weight:700;color:var(--green);}
.mw-comp-arch-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;margin-bottom:5px;}
.mw-comp-text{font-size:11px;color:var(--text);line-height:1.5;}
.mw-pbar{height:6px;border-radius:3px;background:var(--border2);overflow:hidden;}
.mw-pbar-fill{height:100%;border-radius:3px;transition:width .35s;}
.mw-step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.mw-step-num.done{background:var(--green);color:#fff;}
.mw-step-num.active{background:var(--text);color:var(--bg);}
.mw-step-num.pending{background:var(--border2);color:var(--t3);}
.mw-step-lbl{font-size:13px;}
.mw-step-lbl.done{color:var(--green);}
.mw-step-lbl.active{color:var(--text);font-weight:700;}
.mw-step-lbl.pending{color:var(--t3);}

/* ── Material Icons sizing ───────────────────────────────── */
.material-icons{
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  font-size:18px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
}
/* Size variants used in icon containers */
.ni-icon .material-icons{font-size:20px;}
.uav-btn .material-icons, .udd-av .material-icons{font-size:16px;}
.bell-wrap .material-icons{font-size:20px;}
.nav-toggle .material-icons{font-size:18px;}
.btn .material-icons{font-size:15px;}
.badge .material-icons{font-size:12px;}

body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;}
.nav{width:var(--nw);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;flex-shrink:0;overflow-y:auto;overflow-x:hidden;transition:width .25s cubic-bezier(.4,0,.2,1);}

/* ── Collapsed state ─────────────────────────────────────── */
.nav.collapsed{width:56px;}

/* Hide text elements — use max-width transition so text fades out cleanly */
.nav-logo-name,
.ni-lbl,
.ni-badge,
.nav-sec,
.nav-un,
.nav-ur{max-width:220px;transition:max-width .2s ease, opacity .15s ease;}

.nav.collapsed .nav-logo-name,
.nav.collapsed .ni-lbl,
.nav.collapsed .ni-badge,
.nav.collapsed .nav-sec,
.nav.collapsed .nav-un,
.nav.collapsed .nav-ur{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;}

/* Logo bar — always show toggle button centred when collapsed */
.nav-logo{padding:0 12px;height:56px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border2);flex-shrink:0;}
.nav-logo-mark{flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* Collapsed nav-logo: hide the SVG logo, centre the toggle button and make it fill the bar */
.nav.collapsed .nav-logo{padding:0;justify-content:center;gap:0;}
.nav.collapsed .nav-logo-mark{display:none;}
.nav.collapsed .nav-logo-name{display:none;}

/* Toggle button — expanded state */
.nav-toggle{
  margin-left:auto;
  width:30px;height:30px;
  border:1px solid var(--border2);
  background:var(--s2);
  cursor:pointer;
  color:var(--t2);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:color .15s, background .15s, width .25s, height .25s, border-radius .25s;
  opacity:1 !important;
  visibility:visible !important;
}
.nav-toggle:hover{background:var(--s2);color:var(--text);border-color:var(--border);}

/* Collapsed: toggle fills the entire 56×56 header bar — easy to click, acts as expand button */
.nav.collapsed .nav-toggle{
  margin:0;
  width:56px;
  height:56px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--t2);
}
.nav.collapsed .nav-toggle:hover{background:var(--s2);color:var(--text);}

/* Hide section headers and subtitles when collapsed */
.nav.collapsed .nav-sec{display:none;}
.nav.collapsed .ni-sub{display:none;}

/* Nav items wrapper: remove horizontal padding when collapsed so items can centre */
.nav.collapsed .nav-items-wrap{padding-left:0 !important;padding-right:0 !important;}

/* Nav items — icon centred, fixed width */
.ni{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--rs);cursor:pointer;margin:1px 6px;transition:background .15s;user-select:none;min-height:46px;}
.ni:hover{background:var(--s2);}
.ni.active{background:var(--s2);position:relative;}
/* Collapsed: full width of the 56px nav, icon perfectly centred */
.nav.collapsed .ni{
  justify-content:center;
  padding:0;
  margin:1px 4px;
  height:44px;
  gap:0;
  width:calc(56px - 8px);
}

/* Icon — fixed size, never shrinks */
.ni-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--t2);}
.ni-icon .material-icons{font-size:20px;}
.ni.active .ni-icon{color:var(--text);}
.ni-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;overflow:hidden;}
.ni-lbl{font-size:13.5px;font-weight:500;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ni.active .ni-lbl{color:var(--text);font-weight:600;}
.ni-sub{font-size:11.5px;color:var(--t3);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;}
.nav.collapsed .ni-txt{display:none;}
.ni-badge{margin-left:auto;min-width:18px;height:18px;border-radius:9px;background:var(--green);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;}
.nav.collapsed .ni-badge{display:none;}

/* Nav section headers */
.nav-sec{padding:16px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--t3);text-transform:uppercase;}

/* Bottom user area */
.nav-bot{margin-top:auto;padding:9px;border-top:1px solid var(--border2);}
.nav-user{display:flex;align-items:center;gap:8px;padding:7px 5px;}
.nav.collapsed .nav-user{justify-content:center;padding:7px 0;}
.nav.collapsed .nav-bot{padding:9px 4px;}
.nav-av{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--nav-av-a),var(--nav-av-b));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--white);flex-shrink:0;}
.nav-un{font-size:12px;font-weight:600;color:var(--text);}
.nav-ur{font-size:11px;color:var(--t3);}

/* ── Tooltips for collapsed items ──────────────────────── */
.nav.collapsed .ni{position:relative;}
.nav.collapsed .ni:hover::after{
  content:attr(data-lbl);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;transform:translateY(-50%);
  background:var(--text);color:var(--surface);
  font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:var(--rs);
  white-space:nowrap;z-index:800;pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50;flex-shrink:0;}
/* Breadcrumb — matches design doc: underlined links, chevron separator, bold current */
.bc{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t2);}
.bc .sep{color:var(--t3);display:flex;align-items:center;}
.bc .sep .material-icons{font-size:16px;}
.bc .cur{font-weight:700;color:var(--text);text-decoration:none;cursor:default;}
.topbar-r{display:flex;align-items:center;gap:10px;}

/* --- Dark mode --- */
body.dark{
  --bg:#1A1A18;--surface:#242422;--s2:#2C2C2A;--border:#3A3A36;--border2:#323230;
  --text:#F0F0EC;--t2:#A8A8A0;--t3:#6A6A64;
  --green:#2DC98E;--gl:#0D2E22;--gb:#1A5A3C;--gd:#5AC99A;
  --pink:#E07A9D;--pl:#2E1020;--pb:#6B2540;
  --blue:#5A9EE8;--bl:#0D1E38;--bb:#1A4A7A;
  --red:#EF6565;--rl:#2E0D0D;--rb:#6B1A1A;
  --amber:#D4920A;--al:#2A1C08;--ab:#6B4510;
  --purple:#A07AD8;--purl:#1E1030;--purb:#4A2A7A;
  --pf-dark:#EF8080;--amber-dark:#E8A840;
  --btn-blue-hover:#4A8EDA;
  /* Extended tokens — dark mode adaptations */
  --muted:#6A6A64;
  --orange:#E8842A;
  --blue-darker:#2A6AB8;
  --red-dark:#EF8080;
  --career-dark:#0A0A18;
  --match-good:#5AACE8;
  --green-light:#2DC98E;
  --green-pale:#0D2E22;--green-pale-b:#1A5A3C;
  --amber-pale:#2A1C08;--amber-dark-text:#E8A840;
  --red-pale:#2E0D0D;
  --green-icon:#5AC99A;--green-icon-dk:#2DC98E;
  --hrbp-bg:#1E1030;--hrbp-border:#4A2A7A;
  --purple-text:#C9B0E8;--purple-border-lt:#4A2A7A;
  --lena-col:#5A8EBF;
  /* Archetype colours — slightly lighter for dark bg legibility */
  --arch-f1:#3A9E8A;--arch-f2:#5A8A3A;--arch-f3:#6A7DC8;--arch-f3-lt:#2A3A68;
  --arch-f4-dkr:#8B2A50;
  --arch-m2:#3A8BAB;--arch-m3:#A06AD8;--arch-m3-mid:#8A7AB8;--arch-m4:#8B6A3A;
}

/* --- NEW: User avatar button --- */
.user-wrap{position:relative;}
.uav-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--av-grad-text);cursor:pointer;box-shadow:0 0 0 2px var(--border);transition:box-shadow .15s;flex-shrink:0;user-select:none;overflow:hidden;}
.uav-btn:hover{box-shadow:0 0 0 2px var(--t3);}
.uav-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.user-dd{position:absolute;top:46px;right:0;width:280px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shl);z-index:400;display:none;overflow:hidden;}
.user-dd.open{display:block;}
.udd-hdr{padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border2);}
.udd-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--av-grad-text);flex-shrink:0;overflow:hidden;}
.udd-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.udd-nm{font-size:15px;font-weight:600;color:var(--text);line-height:1.25;}
.udd-em{font-size:12px;color:var(--t3);margin-top:2px;}
.udd-sec{padding:10px 18px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;}
.udd-mi{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;cursor:pointer;font-size:15px;font-weight:400;color:var(--text);transition:background .1s;line-height:1.3;}
.udd-mi:hover{background:var(--bg);}
.udd-mi.danger{color:var(--text);border-top:1px solid var(--border2);padding-top:14px;padding-bottom:14px;font-weight:400;}
.udd-mi.danger:hover{background:var(--bg);}
.udd-mi-arr{color:var(--t2);display:flex;align-items:center;}

/* --- Vacancy Summary Panel (inline slide-down in Job match) --- */
.vac-sum-panel{display:none;border-top:1px solid var(--border2);margin-top:14px;padding-top:16px;animation:fu .18s ease;}
.vac-sum-panel.open{display:block;}
.vac-sum-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.vac-sum-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:3px;}
.vac-sum-meta{font-size:12px;color:var(--t2);line-height:1.6;}
.vac-sum-close{width:26px;height:26px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);flex-shrink:0;transition:background .12s;}
.vac-sum-close:hover{background:var(--s2);color:var(--text);}
.vac-sum-section{margin-bottom:14px;}
.vac-sum-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:6px;}
.vac-sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.vac-sum-cell{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:9px 11px;}
.vac-sum-cell-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:3px;}
.vac-sum-cell-val{font-size:12px;color:var(--text);font-weight:500;}
.vac-sum-desc{font-size:13px;color:var(--t2);line-height:1.65;padding:10px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);}
.vac-sum-drives{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.vac-sum-pf-row{display:flex;align-items:flex-start;gap:8px;padding:8px 11px;border-radius:var(--rs);font-size:12px;line-height:1.5;}
.vac-sum-pf-row.crit{background:var(--rl);border:1px solid var(--rb);color:var(--pf-dark);}
.vac-sum-pf-row.imp{background:var(--al);border:1px solid var(--ab);color:var(--amber-dark);}
.vac-sum-crit-row{display:flex;flex-direction:column;gap:5px;}
.vac-sum-mh-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border2);}
.vac-sum-mh-row:last-child{border-bottom:none;}

/* --- Invite Candidate Modal --- */
.inv-modal{background:var(--surface);border-radius:16px;width:460px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shl);}
.inv-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);}
.inv-title{font-size:15px;font-weight:700;color:var(--text);}
.inv-body{padding:20px;overflow-y:auto;}
.inv-field{display:flex;flex-direction:column;gap:4px;margin-bottom:13px;}
.inv-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;}
.inv-field input,.inv-field select{font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;font-family:var(--font);transition:border .15s;}
.inv-field input:focus,.inv-field select:focus{border-color:var(--green);}
.inv-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.inv-footer{padding:14px 20px;border-top:1px solid var(--border2);display:flex;gap:9px;justify-content:flex-end;}
.inv-link-box{background:var(--gl);border:1px solid var(--gb);border-radius:var(--rs);padding:14px 16px;margin-top:4px;}
.inv-link-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gd);margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.inv-link-url{font-size:12px;font-family:var(--mono);color:var(--gd);word-break:break-all;line-height:1.6;}
.inv-link-copy{display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:4px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--gb);font-size:12px;font-weight:600;color:var(--gd);cursor:pointer;transition:background .12s;}
.inv-link-copy:hover{background:var(--bg);}
.inv-ref-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;background:var(--s2);border:1px solid var(--border);font-size:11px;color:var(--t2);font-family:var(--mono);margin-left:6px;}
.pm-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:700;display:none;align-items:center;justify-content:center;}
.pm-ov.open{display:flex;}
.pm-modal{background:var(--surface);border-radius:16px;width:520px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shl);}
.pm-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border2);}
.pm-title{font-size:15px;font-weight:700;color:var(--text);}
.pm-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;transition:all .15s;}
.pm-close:hover{background:var(--s2);color:var(--text);}
.pm-tabs{display:flex;gap:0;border-bottom:1px solid var(--border2);padding:0 20px;}
.pm-tab{padding:10px 14px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;}
.pm-tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:600;}
.pm-body{flex:1;overflow-y:auto;padding:20px;}
.pm-panel.active{display:block;}

/* Account info form */
.pm-avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.pm-av-big{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--av-grad-a),var(--av-grad-b));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--av-grad-text);flex-shrink:0;overflow:hidden;cursor:pointer;position:relative;}
.pm-av-big img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pm-av-big .av-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:50%;display:none;align-items:center;justify-content:center;}
.pm-av-big:hover .av-overlay{display:flex;}
.pm-av-big .av-overlay i{font-size:20px;color:#fff;}
.pm-av-info{display:flex;flex-direction:column;gap:4px;}
.pm-av-hint{font-size:12px;color:var(--t3);line-height:1.4;}
.pm-av-btns{display:flex;gap:7px;margin-top:4px;}
.pm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px;}
.pm-field{display:flex;flex-direction:column;gap:4px;margin-bottom:11px;}
.pm-field label{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;}
.pm-field input,.pm-field select{font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;width:100%;font-family:var(--font);transition:border .15s;}
.pm-field input:focus,.pm-field select:focus{border-color:var(--green);}
.pm-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}

/* Advanced tab */
.pm-adv-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border2);}
.pm-adv-row:last-child{border-bottom:none;}
.pm-adv-l{display:flex;flex-direction:column;gap:2px;}
.pm-adv-lbl{font-size:13px;font-weight:500;color:var(--text);}
.pm-adv-val{font-size:12px;color:var(--t3);}
.pm-deact-box{margin-top:20px;padding:14px;background:var(--rl);border:1px solid var(--rb);border-radius:var(--rs);}
.pm-deact-title{font-size:13px;font-weight:700;color:var(--red);margin-bottom:6px;}
.pm-deact-list{font-size:12px;color:var(--red);margin-left:16px;line-height:1.8;}

/* QR tab */
.pm-qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0;}
.pm-qr-box{width:180px;height:180px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:12px;display:flex;align-items:center;justify-content:center;}
.pm-qr-name{font-size:15px;font-weight:700;color:var(--text);}
.pm-qr-sub{font-size:12px;color:var(--t3);text-align:center;line-height:1.5;max-width:280px;}
.pm-qr-role-badge{font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;background:var(--gl);color:var(--gd);display:inline-flex;align-items:center;gap:5px;}

/* Settings panel */
.pm-set-section{margin-bottom:20px;}
.pm-set-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:10px;}
.pm-set-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border2);}
.pm-set-row:last-child{border-bottom:none;}
.pm-set-l{display:flex;align-items:center;gap:9px;}
.pm-set-l i{font-size:16px;color:var(--t2);}
.pm-set-lbl{font-size:13px;font-weight:500;color:var(--text);}
.pm-set-sub{font-size:11px;color:var(--t3);margin-top:1px;}
/* Toggle switch */
.tog{display:inline-block;position:relative;width:40px;height:22px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;position:absolute;}
.tog-sl{position:absolute;inset:0;background:var(--border);border-radius:11px;cursor:pointer;transition:background .2s;}
.tog input:checked+.tog-sl{background:var(--blue);}
.tog-sl:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tog input:checked+.tog-sl:before{transform:translateX(18px);}
/* Lang selector */
.lang-seg{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;}
.lang-seg button{flex:1;padding:5px 14px;font-size:12px;font-weight:600;color:var(--t2);background:none;border:none;cursor:pointer;transition:all .15s;font-family:var(--font);}
.lang-seg button.active{background:var(--green);color:#fff;}
/* Hub list in settings */
.pm-hub-list{display:flex;flex-direction:column;gap:6px;}
.pm-hub-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:all .15s;}
.pm-hub-item:hover{border-color:var(--green);}
.pm-hub-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.pm-hub-nm{font-size:13px;font-weight:500;color:var(--text);}
.pm-hub-role{font-size:11px;color:var(--t3);margin-top:1px;}
.pm-hub-arr{margin-left:auto;font-size:13px;color:var(--t3);}

/* Data & Privacy panel */
.pm-privacy-section{margin-bottom:22px;}
.pm-privacy-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
.pm-privacy-desc{font-size:12px;color:var(--t2);line-height:1.6;margin-bottom:10px;}

/* About panel */
.pm-about-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.pm-about-logo{width:52px;height:52px;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pm-about-logo i{font-size:22px;color:#fff;}
.pm-about-appname{font-size:17px;font-weight:700;color:var(--text);}
.pm-about-version{font-size:12px;color:var(--t3);}
.pm-about-divider{height:1px;background:var(--border2);margin:16px 0;}
.pm-cl-item{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--border2);}
.pm-cl-item:last-child{border-bottom:none;}
.pm-cl-ver{font-size:11px;font-weight:700;font-family:var(--mono);color:var(--green);min-width:52px;padding-top:1px;}
.pm-cl-date{font-size:10px;color:var(--t3);margin-top:2px;}
.pm-cl-changes{font-size:12px;color:var(--t2);line-height:1.7;}
.pm-cl-changes li{margin-left:14px;}
.pm-about-company{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:13px 15px;margin-bottom:14px;}
.pm-about-cn{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;}
.pm-about-cd{font-size:12px;color:var(--t2);line-height:1.7;}
.pm-about-links{display:flex;gap:14px;flex-wrap:wrap;}
.pm-about-link{font-size:12px;color:var(--green);cursor:pointer;text-decoration:none;}
.pm-about-link:hover{color:var(--gd);}
.pm-about-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--border2);text-align:center;font-size:12px;color:var(--t3);}
.pm-about-footer span{color:var(--red);}

/* --- NEW: Hub pill --- */
.hub-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all .15s;user-select:none;box-shadow:var(--sh);}
.hub-pill:hover{background:var(--s2);border-color:var(--t3);}
.hp-txt{display:flex;flex-direction:column;line-height:1.2;}
.hp-org{font-size:10px;color:var(--t3);font-weight:500;}
.hp-role{font-size:12px;color:var(--text);font-weight:600;}
/* Organisation/Role icon pill - matches design doc */
.hub-pill .material-icons.hp-person{font-size:17px;color:var(--t2);}

/* --- NEW: Bell --- */
.bell-wrap{position:relative;}
.bell-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;}
.bell-btn:hover{background:var(--s2);}
.bell-dot{position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--surface);display:none;}
.bell-count{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;border:2px solid var(--surface);}

/* Notification panel — right side panel (matches design doc) */
.notif-panel-ov{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:500;display:none;}
.notif-panel-ov.open{display:block;}
.notif-panel{position:fixed;top:0;right:0;width:380px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shl);z-index:501;display:none;flex-direction:column;}
.notif-panel.open{display:flex;}
/* Header — two rows */
.notif-panel-hdr{padding:14px 16px 0 16px;border-bottom:1px solid var(--border2);}
.notif-panel-hdr-row1{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.notif-panel-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);border-radius:var(--rs);transition:background .12s;flex-shrink:0;}
.notif-panel-close:hover{background:var(--s2);}
.notif-panel-close .material-icons{font-size:20px;}
.notif-panel-title{font-size:16px;font-weight:700;color:var(--text);flex:1;}
/* Mark all read — header button */
.notif-mark-all{font-size:12px;font-weight:600;color:var(--blue);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:var(--rs);transition:background .12s;white-space:nowrap;font-family:var(--font);}
.notif-mark-all:hover{background:var(--bl);}
.notif-mark-all:disabled{color:var(--t3);cursor:default;}
.notif-mark-all:disabled:hover{background:none;}
/* Filter row */
.notif-panel-hdr-row2{display:flex;align-items:center;gap:8px;padding-bottom:12px;}
.notif-tab-bar{display:flex;gap:0;padding-bottom:0;margin-top:2px;}
.notif-tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 12px;font-size:12px;font-family:var(--font);color:var(--t2);cursor:pointer;transition:color .12s,border-color .12s;margin-bottom:-1px;font-weight:400;}
.notif-tab:hover{color:var(--text);}
.notif-tab.active{color:var(--text);border-bottom-color:var(--text);font-weight:500;}
.notif-filter-label{font-size:12px;font-weight:600;color:var(--t3);white-space:nowrap;}
.notif-filter-select{font-size:13px;font-weight:500;color:var(--text);background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:5px 28px 5px 12px;cursor:pointer;outline:none;font-family:var(--font);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;transition:border-color .12s,background-color .12s;}
.notif-filter-select:hover{border-color:var(--bb);background-color:var(--bl);}
.notif-filter-select:focus{border-color:var(--blue);}
/* List */
.notif-list{flex:1;overflow-y:auto;padding:6px 10px;}
/* Card — clean, no icon, left border accent for unread/action */
.notif-card{background:var(--surface);border:none;border-left:2px solid transparent;padding:10px 14px 9px 12px;transition:background .12s;position:relative;display:grid;grid-template-columns:10px 1fr auto;gap:0 10px;align-items:start;}
.notif-card + .notif-card{border-top:0.5px solid var(--border2);}
.notif-card:hover{background:var(--s2);}
.notif-card.notif-unread{border-left-color:var(--text);}
.notif-card.notif-action{border-left-color:var(--red);}
.notif-card.notif-card-archived{opacity:.5;}
.notif-card.notif-read{opacity:.65;}
/* Dot column */
.notif-card-dot{width:6px;height:6px;border-radius:50%;background:var(--text);margin-top:5px;flex-shrink:0;}
.notif-card-dot.dot-action{background:var(--red);}
.notif-card-dot.dot-read{background:transparent;}
/* Content column */
.notif-card-content{min-width:0;cursor:pointer;}
.notif-card-body{cursor:pointer;}
.notif-card-type{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:2px;}
.notif-card-type.type-action{color:var(--red);}
.notif-card-title{font-size:12px;font-weight:500;color:var(--text);line-height:1.4;margin-bottom:1px;}
.notif-card-desc{font-size:11.5px;color:var(--t2);line-height:1.45;margin-top:3px;}
.notif-card.notif-card-archived .notif-card-title{color:var(--t2);}
/* Meta row */
.notif-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;}
.notif-card-link{font-size:11px;font-weight:500;color:var(--text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;cursor:pointer;}
.notif-card-link:hover{text-decoration-color:var(--text);}
.notif-time{font-size:11px;color:var(--t3);}
/* Action badge */
.notif-action-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red);margin-bottom:3px;}
/* Actions column */
.notif-card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.notif-archive-btn{background:none;border:none;font-size:10.5px;color:transparent;cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;}
.notif-unread-btn{background:none;border:none;font-size:10.5px;color:transparent;cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;display:block;}
.notif-card:hover .notif-unread-btn{color:var(--t3);}
.notif-unread-btn:hover{color:var(--text) !important;}
/* Tab badge */
.notif-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;background:var(--text);color:var(--bg);border-radius:8px;font-size:9px;font-weight:600;margin-left:5px;line-height:1;}
.notif-tab-badge.badge-action{background:var(--red);color:#fff;}
.notif-card:hover .notif-archive-btn{color:var(--t3);}
.notif-archive-btn:hover{color:var(--text) !important;}
.notif-restore-btn{background:none;border:none;font-size:10.5px;color:var(--t3);cursor:pointer;padding:1px 0;font-family:var(--font);transition:color .12s;white-space:nowrap;}
.notif-restore-btn:hover{color:var(--text);}
/* Footer */
.notif-panel-foot{padding:10px 16px;border-top:0.5px solid var(--border2);display:flex;align-items:center;justify-content:space-between;}
.notif-panel-foot-txt{font-size:11px;color:var(--t3);}
.notif-panel-foot a{font-size:12px;font-weight:500;color:var(--text);text-decoration:none;cursor:pointer;}
.notif-panel-foot a:hover{text-decoration:underline;}

/* --- NEW: Hub switcher panel --- */
.hs-ov{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:500;display:none;}
.hs-ov.open{display:block;}
.hs-panel{position:fixed;top:0;right:0;width:400px;max-width:92vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:var(--shl);z-index:501;display:none;flex-direction:column;}
.hs-panel.open{display:flex;}
.hs-hdr{padding:17px 20px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border2);}
.hs-close{width:30px;height:30px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .12s;}
.hs-close:hover{background:var(--s2);}
.hs-close .material-icons{font-size:20px;}
.hs-title{font-size:16px;font-weight:700;color:var(--text);}
.hs-body{padding:18px 20px;flex:1;overflow-y:auto;}
.hs-urow{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;}
.hs-uav{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#B0C4F0,#7B9DD9);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#1A3A6E;flex-shrink:0;}
.hs-unm{font-size:13px;font-weight:600;color:var(--text);}
.hs-uem{font-size:11px;color:var(--t3);margin-top:1px;}
.hs-intro{font-size:13px;color:var(--t2);line-height:1.55;margin-bottom:22px;}
.hs-fld{margin-bottom:20px;position:relative;}
.hs-flbl{font-size:13px;font-weight:500;color:var(--text);margin-bottom:8px;}
.hs-sbtn{width:100%;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface);cursor:pointer;font-size:14px;color:var(--text);transition:border-color .12s;}
.hs-sbtn:hover{border-color:var(--t3);}
.hs-sbtn .nm{flex:1;text-align:left;font-weight:400;}
.hs-sbtn .chev{color:var(--t3);font-size:18px;}
.hs-slist{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);box-shadow:var(--shm);z-index:10;max-height:230px;overflow-y:auto;display:none;}
.hs-slist.open{display:block;}
.hs-sitem{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;font-size:13px;transition:background .1s;}
.hs-sitem:hover{background:var(--bg);}
.hs-sitem.sel{background:var(--gl);}
.hs-sitem .ck{margin-left:auto;color:var(--green);font-size:14px;display:none;}
.hs-sitem.sel .ck{display:inline;}
.hs-defrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--t2);cursor:pointer;user-select:none;padding:4px 2px;}
.hschk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s;background:var(--surface);}
.hschk.on{background:var(--blue);border-color:var(--blue);}
.hschk.on .material-icons{color:#fff;font-size:11px;display:block;}
.hschk .material-icons{display:none;}
.hs-need-help{padding:10px 16px;border-top:1px solid var(--border2);text-align:center;}
.hs-foot{padding:14px 20px;border-top:1px solid var(--border2);display:flex;gap:9px;justify-content:flex-start;}

/* --- NEW: Page header --- */
.page-hdr{padding:24px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:13px;flex-wrap:wrap;}
.ph-l{display:flex;flex-direction:column;gap:3px;}
.ph-t{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.025em;}
.ph-s{font-size:13px;color:var(--t2);}
.ph-r{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-top:2px;}

/* Instructions button — outlined style matching design doc */
.btn.inst{background:var(--surface);border-color:var(--border);color:var(--text);box-shadow:var(--sh);}
.btn.inst:hover{background:var(--s2);}

/* All original styles below */
.ref-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--s2);border:1px solid var(--border);font-size:11px;color:var(--t2);font-family:var(--mono);}
.content{padding:20px 24px 32px;flex:1;}
.screen{display:none;animation:fu .18s ease;}
.screen.active{display:block;}
@keyframes fu{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font);transition:all .15s;box-shadow:var(--sh);}
.btn:hover{background:var(--s2);}
.btn.pr{background:var(--blue);border-color:var(--blue);color:var(--white);}
.btn.pr:hover:not(:disabled){background:var(--btn-blue-hover);}
.btn.pr:disabled{background:var(--border);border-color:var(--border);color:var(--t3);cursor:not-allowed;box-shadow:none;}
.btn.danger{background:var(--red);border-color:var(--red);color:var(--white);}
.btn.danger:hover{background:#B53030;}
.btn.sm{padding:5px 11px;font-size:12px;}
.btng{display:flex;align-items:center;gap:7px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;margin-bottom:13px;box-shadow:var(--sh);}
.card-t{font-size:15px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.015em;}
.card-s{font-size:13px;color:var(--t2);margin-bottom:17px;line-height:1.6;}
.card-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.stats-row{display:grid;gap:11px;margin-bottom:18px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px;box-shadow:var(--sh);}
.stat-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-val{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--text);}
.stat-sub{font-size:11px;color:var(--t3);margin-top:3px;}
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);padding:10px 12px;border-bottom:1px solid var(--border);}
.tbl td{padding:12px 12px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr{transition:background .1s;}.tbl tbody tr:hover td{background:var(--s2);cursor:pointer;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.badge.open{background:var(--gl);border:1px solid var(--gb);color:var(--gd);}
.badge.closed{background:var(--rl);border:1px solid var(--rb);color:var(--red);}
.badge.concept{background:var(--al);border:1px solid var(--ab);color:var(--amber);}
.badge.intern-b{background:var(--purl);border:1px solid var(--purb);color:var(--purple);}
.badge.extern-b{background:var(--s2);border:1px solid var(--border);color:var(--t2);}
.sdot{width:5px;height:5px;border-radius:50%;}
.badge.open .sdot{background:var(--green);}
.badge.closed .sdot{background:var(--red);}
.badge.concept .sdot{background:var(--amber);}
.cs{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid transparent;}
.cs-u{background:#EAF1FB;color:var(--bd);border-color:#A8C8EE;}
.cs-g{background:var(--purl);color:var(--purple);border-color:var(--purb);}
.cs-o{background:var(--al);color:var(--amber);border-color:var(--ab);}
.cs-af{background:var(--rl);color:var(--red);border-color:var(--rb);}
.cs-aa{background:var(--gl);color:var(--gd);border-color:var(--gb);}
.field{margin-bottom:12px;}
.field:last-child{margin-bottom:0;}
.lbl{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;display:flex;align-items:center;gap:6px;letter-spacing:.01em;}
.req{font-size:10px;padding:1px 6px;border-radius:20px;background:var(--rl);color:var(--red);font-weight:600;}
.opt{font-size:10px;padding:1px 6px;border-radius:20px;background:var(--s2);color:var(--t3);font-weight:500;}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;font-size:13px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;font-family:var(--font);transition:border-color .15s,box-shadow .15s;}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(52,120,199,.12);}
input.filled{border-color:var(--gb);}
textarea{resize:vertical;min-height:78px;line-height:1.6;}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;}
.divider{height:1px;background:var(--border2);margin:15px 0;}
.tog-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);margin-bottom:12px;cursor:pointer;user-select:none;transition:all .15s;}
.tog-row:hover{border-color:var(--gb);}
.tog-row.on{background:var(--gl);border-color:var(--gb);}
.tog{display:inline-block;width:30px;height:17px;border-radius:9px;background:var(--border);position:relative;flex-shrink:0;transition:background .2s;}
.tog.on{background:var(--green);}
.tog-thumb{width:13px;height:13px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tog.on .tog-thumb{left:15px;}
.tog-text{font-size:13px;font-weight:500;color:var(--text);}
.tog-sub{font-size:12px;color:var(--t3);margin-left:auto;}
.tog-sm{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);cursor:pointer;user-select:none;transition:all .15s;}
.tog-sm:hover,.tog-sm.on{border-color:var(--gb);}
.tog-sm.on{background:var(--gl);}
.tog-sm-lbl{font-size:12px;font-weight:500;color:var(--t2);}
.tog-sm.on .tog-sm-lbl{color:var(--gd);}
.psel{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);cursor:pointer;min-height:37px;transition:border-color .15s;}
.psel:hover{border-color:var(--green);}
.psel.filled{border-color:var(--gb);}
.p-av{width:21px;height:21px;border-radius:50%;background:var(--gl);display:none;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--gd);flex-shrink:0;}
.p-ph{font-size:13px;color:var(--t3);flex:1;}
.p-nm{font-size:13px;color:var(--text);font-weight:500;flex:1;display:none;}
.dd{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-top:4px;display:none;box-shadow:var(--shm);position:relative;z-index:200;}
.dd.open{display:block;}
.dd-srch{padding:6px 9px;border-bottom:1px solid var(--border2);}
.dd-srch input{font-size:12px;padding:5px 9px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);width:100%;}
.dd-list{max-height:145px;overflow-y:auto;}
.dd-item{display:flex;align-items:center;gap:7px;padding:7px 11px;cursor:pointer;font-size:13px;transition:background .1s;}
.dd-item:hover{background:var(--bg);}
.dd-av{width:23px;height:23px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--gd);flex-shrink:0;}
.dd-role{font-size:11px;color:var(--t3);margin-left:auto;}
.dd-empty{padding:9px 11px;font-size:12px;color:var(--t3);text-align:center;}
.dd-add{display:flex;align-items:center;gap:6px;padding:7px 11px;cursor:pointer;font-size:13px;color:var(--green);border-top:1px solid var(--border2);font-weight:500;}
.dd-add:hover{background:var(--gl);}
.apanel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:12px;margin-top:5px;display:none;}
.apanel.open{display:block;}
.apanel-t{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.arow{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;}
.aem{width:100%;font-size:13px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;margin-bottom:7px;font-family:var(--font);}
.abtns{display:flex;gap:5px;justify-content:flex-end;}
.bsm{font-size:12px;padding:5px 11px;border-radius:var(--rs);cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--t2);font-family:var(--font);transition:background .1s;}
.bsm:hover{background:var(--bg);}
.bsm.g{background:var(--green);border-color:var(--green);color:#fff;}
.bsm.g:hover{background:var(--gd);}
.bsm.danger{border-color:var(--rb);color:var(--red);}
.bsm.danger:hover{background:var(--rl);border-color:var(--red);}
.clt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px;margin-bottom:18px;}
.clt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:17px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.clt-card:hover{border-color:var(--green);box-shadow:var(--shm);transform:translateY(-1px);}
.clt-logo{width:40px;height:40px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0;}
.clt-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;}
.clt-sec{font-size:12px;color:var(--t3);}
.clt-stats{display:flex;gap:13px;margin-top:9px;padding-top:9px;border-top:1px solid var(--border2);}
.clt-stat{font-size:11px;color:var(--t3);}
.clt-stat strong{color:var(--text);font-weight:600;}
.contact-list{display:flex;flex-direction:column;gap:7px;}
.contact-item{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);}
.contact-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.contact-name{font-size:13px;font-weight:600;color:var(--text);}
.contact-role{font-size:11px;color:var(--t3);}
.contact-email{font-size:11px;color:var(--t3);margin-left:auto;}
.sum-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:11px 13px;margin-top:11px;display:none;}
.sum-box.vis{display:block;}
.sum-hd{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.sum-hd i{font-size:13px;color:var(--green);}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;}
.sum-r{font-size:12px;display:flex;gap:4px;}
.sum-k{color:var(--t3);min-width:90px;flex-shrink:0;}
.sum-v{color:var(--text);font-weight:500;}
.stepbar{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 17px;margin-bottom:16px;box-shadow:var(--sh);}
.step-item{display:flex;align-items:center;gap:6px;}
.sdot2{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--bg);color:var(--t3);flex-shrink:0;transition:all .2s;}
.sdot2.done{background:var(--gl);border-color:var(--gb);color:var(--gd);cursor:pointer;}
.sdot2.active{background:var(--text);border-color:var(--text);color:#fff;}
.slbl{font-size:11px;color:var(--t3);white-space:nowrap;}
.slbl.active{color:var(--text);font-weight:600;}
.slbl.done{color:var(--gd);}
.sline{flex:1;height:1px;background:var(--border);margin:0 7px;}
.sline.done{background:var(--gb);}
.grp-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;text-transform:uppercase;}
.dot{width:7px;height:7px;border-radius:50%;}
.dot-f{background:var(--pink);}
.dot-m{background:var(--blue);}
.dg4{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px;}
.dc.dis{opacity:.27;cursor:not-allowed;transform:none!important;}
.dc.fc{border-color:var(--pb);}
.dc.mc{border-color:var(--bb);}
.dc.s1{border:2px solid var(--green);background:var(--gl);}
.dc.s2{border:2px solid var(--blue);background:var(--bl);}
.dc.s3{border:2px solid var(--amber);background:var(--al);}
.dc.fc:hover:not(.dis):not(.s1):not(.s2):not(.s3){border-color:var(--pink);background:var(--pl);}
.dc.mc:hover:not(.dis):not(.s1):not(.s2):not(.s3){border-color:var(--blue);background:var(--bl);}
.di{width:31px;height:31px;border-radius:50%;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.fc .di{background:var(--pl);color:var(--pink);}
.mc .di{background:var(--bl);color:var(--blue);}
.s1 .di{background:var(--gl);color:var(--green);}
.s2 .di{background:var(--bl);color:#185FA5;}
.s3 .di{background:var(--al);color:var(--amber);}
.dn{font-size:12px;font-weight:700;color:var(--text);}
.dt{font-size:10px;color:var(--t3);margin-top:2px;}
.dc.s1 .dt,.dc.s2 .dt,.dc.s3 .dt{display:none;}
.sb{font-size:10px;font-weight:600;padding:2px 5px;border-radius:20px;margin-top:3px;display:none;}
.s1 .sb{display:inline-block;background:var(--gl);color:var(--gd);}
.s2 .sb{display:inline-block;background:var(--bl);color:#185FA5;}
.s3 .sb{display:inline-block;background:var(--al);color:var(--amber);}
.sstbar{display:flex;gap:5px;margin-bottom:14px;}
.sstep{flex:1;padding:6px 8px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);text-align:center;font-size:12px;font-weight:500;color:var(--t3);transition:all .15s;}
.sstep.active{background:var(--gl);border-color:var(--gb);color:var(--gd);}
.sstep.done{background:var(--gl);border-color:var(--gb);color:var(--gd);}
.sel-sum{display:none;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:12px;}
.sinum{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.sinum.n1{background:var(--green);color:#fff;}
.sinum.n2{background:var(--blue);color:#fff;}
.sinum.n3{background:var(--amber);color:#fff;}
.conn-sec{margin-top:15px;padding-top:15px;border-top:1px solid var(--border2);}
.conn-t{font-size:12px;font-weight:600;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.conn-t i{font-size:14px;color:var(--green);}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.cc{border:1px solid var(--border);border-radius:var(--rs);padding:8px 10px;cursor:pointer;transition:all .15s;background:var(--surface);}
.cc:hover{border-color:var(--green);background:var(--gl);}
.cc.act{border:2px solid var(--green);background:var(--gl);}
.cc.faded{opacity:.3;cursor:not-allowed;}
.cc-pair{display:flex;align-items:center;gap:4px;margin-bottom:3px;}
.cp{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.cp.f{background:var(--pl);color:#8B2A50;}
.cp.m{background:var(--bl);color:var(--bd);}
.cp.s{background:var(--gl);color:var(--gd);}
.cn{font-size:12px;color:var(--t2);}
.third-info{display:flex;align-items:flex-start;gap:6px;padding:8px 12px;background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);margin-top:11px;font-size:12px;color:#7A4A00;line-height:1.5;}
.pg5{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}
.pc.dis2{opacity:.27;cursor:not-allowed;}
.pc.fc{border-color:var(--pb);}
.pc.mc{border-color:var(--bb);}
.pc.sc{border:2px solid var(--red);background:var(--rl);}
.pc.si2{border:2px solid var(--amber);background:var(--al);}
.pc.fc .di{background:var(--pl);color:var(--pink);}
.pc.mc .di{background:var(--bl);color:var(--blue);}
.pc.sc .di{background:var(--rl);color:var(--red);}
.pc.si2 .di{background:var(--al);color:var(--amber);}
.pb2{font-size:10px;font-weight:600;padding:2px 5px;border-radius:20px;margin-top:3px;display:none;}
.pc.sc .pb2{display:inline-block;background:var(--rl);color:var(--pf-dark);}
.pc.si2 .pb2{display:inline-block;background:var(--al);color:var(--amber);}
.pc.sc .dt,.pc.si2 .dt{display:none;}
.ctx-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:12px;font-size:12px;color:var(--t2);}
.ctx-pill{padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);color:var(--gd);}
.pf-res{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;}
.pfb{border-radius:var(--r);overflow:hidden;border:1px solid;display:flex;align-items:stretch;}
.pfb.cr{border-color:var(--rb);}
.pfb.im{border-color:var(--ab);}
.pfb-h{padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:120px;flex-shrink:0;box-sizing:border-box;}
.pfb.cr .pfb-h{background:var(--rl);}
.pfb.im .pfb-h{background:var(--al);}
.pfb-ic{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.pfb.cr .pfb-ic{background:var(--rb);color:var(--pf-dark);}
.pfb.im .pfb-ic{background:var(--ab);color:#7A4A00;}
.pfb-nm{font-size:13px;font-weight:600;}
.pfb.cr .pfb-nm{color:#6B1414;}
.pfb.im .pfb-nm{color:var(--amber-dark);}
.pfb-bdg{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap;}
.pfb.cr .pfb-bdg{background:#E88A8A;color:#3D0A0A;}
.pfb.im .pfb-bdg{background:#DDA030;color:#3A1A00;}
.pfb-b{padding:10px 12px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.pfb-code{font-family:var(--mono);font-size:11px;margin-bottom:2px;}
.pfb.cr .pfb-code{color:var(--red);}
.pfb.im .pfb-code{color:var(--amber);}
.pfb-sh{font-size:12px;color:var(--t2);line-height:1.5;}
.tov-card.sel{border:2px solid var(--text);background:var(--bg);}
.tov-card.sel .tov-chk{display:flex;}
/* Notificatie detail modal */
.notif-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;display:none;align-items:center;justify-content:center;}
.notif-ov.open{display:flex;}
.notif-modal{background:var(--surface);border-radius:14px;width:460px;max-width:95vw;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.notif-mhdr{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border2);}
.notif-mhdr-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif-mhdr-ic i{font-size:17px;}
.notif-mbody{padding:18px 20px;}
.notif-mtext{font-size:14px;color:var(--text);line-height:1.6;margin-bottom:14px;}
.notif-mtime{font-size:12px;color:var(--t3);margin-bottom:18px;}
.notif-mfoot{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--border2);background:var(--bg);}
@keyframes spin{to{transform:rotate(360deg);}}
.draft-regen-banner.vis{display:flex;}
.seclbl{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--t3);text-transform:uppercase;margin-bottom:10px;margin-top:16px;}
.seclbl:first-of-type{margin-top:0;}
.drv-blk.fb{border-color:var(--pb);}
.drv-blk.mb{border-color:var(--bb);}
.drv-blk.fb .dh{background:var(--pl);}
.drv-blk.mb .dh{background:var(--bl);}
.drv-blk.fb .dh-ic{background:var(--pb);color:#6B1A38;}
.drv-blk.mb .dh-ic{background:var(--bb);color:#0E3D7A;}
.drv-blk.fb .dh-nm{color:#5A0F2A;}
.drv-blk.mb .dh-nm{color:#072E5E;}
.drv-blk.fb .dh-type{background:var(--pb);color:#5A0F2A;}
.drv-blk.mb .dh-type{background:var(--bb);color:#072E5E;}
.tc{font-family:var(--mono);font-size:10px;font-weight:500;min-width:33px;}
.drv-blk.fb .tc{color:#8B2A50;}
.drv-blk.mb .tc{color:var(--bd);}
.cb-pill.f{background:var(--pl);color:#6B1A38;border:1px solid var(--pb);}
.cb-pill.m{background:var(--bl);color:#0E3D7A;border:1px solid var(--bb);}
.pub-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start;margin-top:12px;}
input[type=date]{font-size:13px;padding:7px 10px;border-radius:var(--rs);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;font-family:var(--font);}
input[type=date]:focus{border-color:var(--green);}
.sl-row{display:flex;align-items:center;gap:13px;padding:11px 15px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:14px;}
.sl-lbl{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;}
.sl-val{font-size:18px;font-weight:700;color:var(--text);min-width:48px;text-align:right;font-family:var(--mono);}
input[type=range]{flex:1;accent-color:var(--green);cursor:pointer;}
input[type=range]:disabled{opacity:.35;}

/* ── Marketing Tone (read-only, from psychometrie) ───────── */

/* ── Searchable template picker modal ────────────────────────── */
#tpl-picker-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8500;display:none;align-items:flex-start;justify-content:center;padding:60px 20px 20px;}
#tpl-picker-modal.open{display:flex;}
.tpl-picker-box{background:var(--surface);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.22);width:100%;max-width:620px;display:flex;flex-direction:column;max-height:80vh;}
.tpl-picker-head{padding:16px 20px 0;flex-shrink:0;}
.tpl-picker-head h3{font-size:15px;font-weight:700;color:var(--text);margin:0 0 10px;}
.tpl-picker-search{width:100%;font-size:13px;padding:8px 12px 8px 34px;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--bg);color:var(--text);font-family:var(--font);outline:none;box-sizing:border-box;}
.tpl-picker-search:focus{border-color:var(--blue);}
.tpl-picker-search-wrap{position:relative;margin-bottom:10px;}
.tpl-picker-search-wrap .material-icons{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none;}
.tpl-picker-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tpl-filter-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--border2);background:var(--s2);color:var(--t2);cursor:pointer;transition:all .12s;}
.tpl-filter-chip:hover,.tpl-filter-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.tpl-picker-list{overflow-y:auto;flex:1;padding:0 20px 16px;}
.tpl-picker-item{padding:11px 13px;border:1.5px solid var(--border2);border-radius:var(--rs);cursor:pointer;margin-bottom:7px;transition:all .12s;}
.tpl-picker-item:hover{border-color:var(--blue);background:var(--bl);}
.tpl-picker-item.selected{border-color:var(--green);background:var(--gl);}
.tpl-picker-item-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.tpl-picker-item-meta{font-size:11px;color:var(--t2);display:flex;gap:10px;flex-wrap:wrap;}
.tpl-picker-item-drives{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--gl);border:1px solid var(--gb);color:var(--gd);}
.tpl-picker-item-pf{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:var(--rl);border:1px solid var(--rb);color:var(--red);}
.tpl-picker-footer{padding:12px 20px;border-top:1px solid var(--border2);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.tpl-picker-none{padding:28px 0;text-align:center;color:var(--t3);font-size:13px;}
/* ── Password strength meter ──────────────────────────────────── */
.pw-field-wrap{position:relative;margin-bottom:14px;}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;display:flex;align-items:center;}
.pw-strength-bar{height:4px;border-radius:2px;background:var(--border2);margin:8px 0 10px;overflow:hidden;}
.pw-strength-fill{height:100%;border-radius:2px;transition:width .25s,background .25s;}
.pw-req-list{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-bottom:14px;}
.pw-req{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px;transition:color .2s;}
.pw-req.met{color:var(--gd);}
.pw-req .material-icons{font-size:13px;}
.dept-wrap{position:relative;}
.dept-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);box-shadow:0 4px 16px rgba(0,0,0,.14);z-index:3000;max-height:220px;overflow-y:auto;display:none;}
.dept-dd.open{display:block;}
.dept-dd-item{padding:9px 13px;font-size:13px;color:var(--text);cursor:pointer;line-height:1.3;}
.dept-dd-item:hover,.dept-dd-item.focused{background:var(--bl);color:var(--blue);}
.dept-dd-none{padding:9px 13px;font-size:13px;color:var(--t3);}
/* ── Marketing Voice picker ───────────────────────────────── */
.voice-card{padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--rs);background:var(--bg);cursor:pointer;transition:all .15s;position:relative;}
.voice-card:hover{border-color:var(--green);background:var(--gl);}
.voice-card.selected{border-color:var(--green);background:var(--gl);box-shadow:0 0 0 2px rgba(27,158,114,.18);}
.voice-card.recommended{border-color:var(--blue);background:var(--bl);}
.voice-card.recommended.selected{border-color:var(--green);background:var(--gl);}
.voice-card-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px;line-height:1.3;}
.voice-card-quote{font-size:11px;color:var(--t2);font-style:italic;line-height:1.45;}
.voice-card-badge{position:absolute;top:7px;right:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:10px;background:var(--bl);color:var(--blue);border:1px solid var(--bb);}
.voice-card.selected .voice-card-badge{background:var(--gl);color:var(--gd);border-color:var(--gb);}
.voice-selected-display{padding:11px 14px;background:var(--gl);border:1.5px solid var(--green);border-radius:var(--rs);display:flex;align-items:flex-start;gap:10px;}
.voice-selected-icon{width:32px;height:32px;border-radius:8px;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.voice-selected-icon .material-icons{font-size:16px;color:#fff;}

/* ── Tone sliders ─────────────────────────────────────────── */
.tov-sliders{display:flex;flex-direction:column;gap:20px;}
.tov-sl-row{display:flex;flex-direction:column;gap:0;}
.tov-sl-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.tov-sl-lbl{font-size:13px;font-weight:600;color:var(--text);}
.tov-sl-val{font-size:12px;font-weight:600;color:var(--green);}

/* custom slider track with tick marks via background */
.tov-sl-track{position:relative;padding:4px 0 2px;}
.tov-sl-track input[type=range]{
  width:100%;margin:0;height:4px;
  -webkit-appearance:none;appearance:none;
  background:transparent;cursor:pointer;
  position:relative;z-index:2;
}
.tov-sl-track input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--green) 0%,var(--green) var(--pct,50%),var(--border) var(--pct,50%),var(--border) 100%);
}
.tov-sl-track input[type=range]::-moz-range-track{
  height:4px;border-radius:2px;background:var(--border);
}
.tov-sl-track input[type=range]::-moz-range-progress{
  height:4px;border-radius:2px;background:var(--green);
}
.tov-sl-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--surface);border:2px solid var(--green);
  box-shadow:0 1px 4px rgba(0,0,0,.15);margin-top:-7px;
  transition:transform .1s,box-shadow .1s;
}
.tov-sl-track input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(27,158,114,.3);}
.tov-sl-track input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--green);
  background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;
}
/* tick marks overlay */
.tov-sl-ticks{display:flex;justify-content:space-between;padding:0 9px;margin-top:5px;}
.tov-sl-ticks span{width:1px;height:6px;background:var(--border);border-radius:1px;display:block;}
.tov-sl-ticks span.active{background:var(--green);}
.tov-sl-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--t3);margin-top:5px;}

/* Regenerate prompt banner */
.tov-regen-bar{display:none;align-items:center;gap:9px;margin-top:16px;padding:10px 14px;
  background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);
  font-size:12px;color:var(--amber);}
.tov-regen-bar.vis{display:flex;}
.tov-regen-bar .material-icons{font-size:15px;flex-shrink:0;}
.tov-regen-bar strong{color:var(--amber);}

/* preset badge chip */
.sl-preset-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--bl);border:1px solid var(--bb);font-size:11px;font-weight:600;color:var(--blue);margin-top:10px;}
.sl-preset-chip .material-icons{font-size:12px;}
.cand-list{display:flex;flex-direction:column;gap:6px;}
.cand-item{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;}
.cand-item:hover{border-color:var(--green);box-shadow:var(--sh);}
.cand-item.sel{border:2px solid var(--green);background:var(--gl);}
.cand-chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.cand-item.sel .cand-chk{background:var(--green);border-color:var(--green);}
.cand-rank{width:21px;height:21px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--t2);flex-shrink:0;}
.cand-rank.top{background:var(--al);border-color:var(--ab);color:var(--amber);}
.cand-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.mbw{display:flex;align-items:center;gap:8px;min-width:155px;}
.mb{height:5px;border-radius:3px;background:var(--border);flex:1;overflow:hidden;}
.mf{height:100%;border-radius:3px;transition:width .4s ease;}
.mpct{font-size:12px;font-weight:700;min-width:36px;text-align:right;font-family:var(--mono);}
.rbadge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.rbadge-ex  {background:var(--gl);color:var(--gd);border:1px solid var(--gb);}
.rbadge-good{background:#E3F2FD;color:#1565C0;border:1px solid #90CAF9;}
.rbadge-mod {background:#FFF8E1;color:#F57F17;border:1px solid #FFE082;}
.rbadge-low {background:var(--s2);color:var(--t3);border:1px solid var(--border2);}
/* ── Candidate status badges ─────────────────────────────────── */
/* ── Status progress stepper ──────────────────────────────────── */
.cst-stepper{display:flex;align-items:center;gap:0;margin:12px 0 6px;}
.cst-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.cst-step::before{content:'';position:absolute;top:9px;left:50%;right:-50%;height:2px;background:var(--border2);z-index:0;}
.cst-step:last-child::before{display:none;}
.cst-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);background:var(--surface);z-index:1;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;}
.cst-dot.done{background:var(--green);border-color:var(--green);color:#fff;}
.cst-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.cst-dot.skip{background:var(--rl);border-color:var(--rb);color:var(--red);}
.cst-lbl{font-size:9px;color:var(--t3);margin-top:4px;text-align:center;white-space:nowrap;}
.cst-lbl.active{color:var(--blue);font-weight:700;}
.cst-lbl.done{color:var(--green);}
/* ── Shortlist export panel ───────────────────────────────────── */
.export-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-top:14px;}
.export-cand-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:var(--s2);border:1px solid var(--border2);font-size:12px;font-weight:600;color:var(--text);}
.export-cand-chip .av-sm{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;}
/* ── Department/location catalogue ───────────────────────────── */
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--s2);border-radius:var(--rs);margin-bottom:6px;gap:10px;}
.cat-item-name{font-size:13px;font-weight:600;color:var(--text);flex:1;}
.cat-add-row{display:flex;gap:8px;margin-top:10px;}
.cat-add-row input{flex:1;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg);color:var(--text);font-family:var(--font);outline:none;}
.cat-add-row input:focus{border-color:var(--green);}
.cat-drag-handle{cursor:grab;color:var(--t3);display:flex;align-items:center;flex-shrink:0;touch-action:none;padding:0 2px;}
.cat-drag-handle:active{cursor:grabbing;}
.cat-drag-item{transition:opacity .15s;}
.cat-drag-item.dragging{opacity:.4;}
.cat-drag-item.drag-over{border-top:2px solid var(--blue);}
/* ── Admin tab navigation (Job Fit settings) ─────────────── */
.adm-snav{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border:none;background:none;color:var(--t2);font-size:13px;font-weight:500;font-family:var(--font);border-radius:var(--rs);cursor:pointer;text-align:left;transition:background .12s,color .12s;white-space:nowrap;}
.adm-snav .material-icons{font-size:14px;flex-shrink:0;}
.adm-snav:hover{background:var(--bg);color:var(--text);}
.adm-snav.active{background:var(--bg);color:var(--blue);font-weight:700;}
.adm-snav.active .material-icons{color:var(--blue);}
/* ── Admin section panels ───────────────────────────────── */
.adm-sec-panel{}
/* ── Recommendation / status banner ─────────────────────────── */
.rec-banner{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:var(--rs);margin-top:10px;border:1px solid;}
.rec-banner.shortlisted{background:var(--al);border-color:var(--ab);}
.rec-banner.hired{background:var(--gl);border-color:var(--gb);}
.rec-banner.rejected{background:var(--rl);border-color:var(--rb);}
.rec-banner.onhold{background:var(--s2);border-color:var(--border2);}
/* ── Stepper pending dot ─────────────────────────────────────── */
.cst-dot.pending{background:var(--surface);border-color:var(--border2);color:var(--t3);}
/* ── Score breakdown section ────────────────────────────────── */
.score-breakdown{padding:13px 15px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r);margin-top:16px;}
/* ── Compose-prompt flash banner ────────────────────────────── */
.flash-compose-prompt{margin-bottom:12px;padding:12px 16px;border-radius:var(--rs);background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;gap:10px;font-size:13px;}

/* ── HM-specific styles ───────────────────────────────────────── */
/* HM dashboard vacancy cards */
.hm-vac-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:all .15s;}
.hm-vac-card:hover{border-color:var(--green);box-shadow:var(--sh);}
.hm-vac-card.has-new{border-left:3px solid var(--blue);}
.hm-vac-meta{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;}
.hm-vac-chip{font-size:11px;color:var(--t2);display:flex;align-items:center;gap:4px;}
.hm-vac-chip .material-icons{font-size:13px;color:var(--t3);}
/* HM candidate preference buttons */
.hm-pref-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid;cursor:pointer;transition:all .15s;background:var(--surface);}
.hm-pref-btn:hover{box-shadow:var(--sh);}
.hm-pref-btn.up{border-color:var(--gb);color:var(--gd);}
.hm-pref-btn.up.active{background:var(--gl);border-color:var(--green);}
.hm-pref-btn.down{border-color:var(--rb);color:var(--red);}
.hm-pref-btn.down.active{background:var(--rl);border-color:var(--red);}
.hm-pref-btn.neutral{border-color:var(--border2);color:var(--t3);}
/* Inline HM preference buttons on candidate-list rows */
.hm-lp-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border2);background:var(--surface);color:var(--t3);cursor:pointer;transition:all .15s;padding:0;}
.hm-lp-btn:hover{box-shadow:var(--sh);}
.hm-lp-btn.up:hover,.hm-lp-btn.up.active{background:var(--gl);border-color:var(--green);color:var(--gd);}
.hm-lp-btn.down:hover,.hm-lp-btn.down.active{background:var(--rl);border-color:var(--red);color:var(--red);}
/* One-click action button inside a notification card */
.notif-qa-btn{font-size:11px;font-weight:600;color:var(--blue);background:var(--bl);border:1px solid var(--bb);border-radius:14px;padding:3px 10px;cursor:pointer;margin-right:8px;}
.notif-qa-btn:hover{background:var(--blue);color:#fff;}
.notif-done-btn{color:var(--t2);background:var(--s2);border-color:var(--border);}
.notif-done-btn:hover{background:var(--t2);color:#fff;border-color:var(--t2);}
.notif-reminded-btn{color:var(--t2);background:var(--s2);border-color:var(--border);cursor:default;}
.notif-reminded-btn:hover{background:var(--s2);color:var(--t2);}
/* Deep-link highlight pulse */
.notif-highlight{animation:notifPulse 1.6s ease;}
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.45);}60%{box-shadow:0 0 0 7px rgba(59,130,246,0);}100%{box-shadow:0 0 0 0 rgba(59,130,246,0);}}
/* Command palette (Cmd/Ctrl-K) */
.cmdk-ov{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-start;justify-content:center;z-index:9999;}
.cmdk-ov.open{display:flex;}
.cmdk-box{margin-top:12vh;width:560px;max-width:92vw;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;}
.cmdk-inwrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border2);}
.cmdk-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text);}
.cmdk-hint{font-size:11px;color:var(--t3);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;}
.cmdk-list{max-height:340px;overflow-y:auto;padding:6px;}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;}
.cmdk-item.sel{background:var(--bl);}
.cmdk-title{font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmdk-ref{font-size:11px;color:var(--t3);font-family:var(--mono);}
.cmdk-client{font-size:11px;color:var(--t2);}
.cmdk-empty{padding:24px;text-align:center;color:var(--t3);font-size:13px;}
/* HM visibility badge */
.hm-vis-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--bl);color:var(--bd);border:1px solid var(--bb);}
/* HM action strip on candidate row */
/* HM empty state */
.hm-empty{padding:32px;text-align:center;color:var(--t3);}
.hm-empty .material-icons{font-size:40px;display:block;margin-bottom:10px;color:var(--border);}
/* HM notification item */
.hm-notif.unread{background:var(--bl);border-color:var(--bb);}
.hm-notif-dot.read{background:var(--t3);}
/* Welkomstbanner HM */
.hm-welcome{background:linear-gradient(135deg,var(--bl) 0%,var(--surface) 70%);border:1px solid var(--bb);border-radius:var(--r);padding:18px 22px;margin-bottom:16px;display:flex;align-items:flex-start;gap:14px;}
.hm-welcome-icon{width:44px;height:44px;border-radius:11px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hm-welcome-icon .material-icons{font-size:22px;color:#fff;}

/* ── Candidate-specific styles ────────────────────────────────── */
.cand-onboard{padding:16px 20px;background:linear-gradient(135deg,var(--bl) 0%,var(--surface) 70%);border:1px solid var(--bb);border-radius:var(--r);margin-bottom:16px;}
.cand-onboard-steps{display:flex;align-items:flex-start;gap:0;margin-top:14px;}
.co-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;}
.co-step::before{content:'';position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--border2);z-index:0;}
.co-step:last-child::before{display:none;}
.co-step.done::before{background:var(--green);}
.co-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--surface);z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.co-dot.done{background:var(--green);border-color:var(--green);color:#fff;}
.co-dot.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.co-dot.pending{background:var(--surface);border-color:var(--border2);color:var(--t3);}
.co-lbl{font-size:10px;text-align:center;margin-top:5px;line-height:1.3;max-width:70px;}
.co-lbl.done{color:var(--green);}
.co-lbl.active{color:var(--blue);font-weight:700;}
.co-lbl.pending{color:var(--t3);}
.cv-match-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center;background:var(--s2);border-radius:var(--rs);}
.cv-match-locked .material-icons{font-size:40px;color:var(--border);margin-bottom:10px;}
.det-tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--s2);border:1px solid var(--border);border-radius:var(--rs);padding:3px;}
.det-tab{flex:1;padding:6px 9px;border-radius:6px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;text-align:center;transition:all .15s;}
.det-tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--sh);}
/* M-1 (decision §64): the base .det-tabs/.det-tab pair above is shared by ten screens (four
   candidate, six staff); the PO's own decision scopes 390px behaviour to the candidate side only,
   so this wraps instead of overflowing ONLY where the .det-tabs-cand modifier is present -- the
   six staff screens using the bare classes are deliberately untouched. A fixed flex-basis
   (e.g. 31% for 3-per-row) was tried first and measured to fail: Mijn ODC-resultaat's own labels
   ("Rol- & Opleidingsmatches") don't fit a fixed column at any of this bar's four tabs, wrap or
   not. flex:1 1 auto (content-based sizing, not an equal-share split) plus a smaller font let the
   browser's own wrap algorithm pack as many tabs as actually fit per row, for whichever label
   lengths a given screen has -- proven per screen, not assumed, in
   spec/system/candidate_narrow_screen_tabs_spec.rb. */
@media (max-width: 480px) {
  .det-tabs.det-tabs-cand{flex-wrap:wrap;}
  .det-tabs.det-tabs-cand .det-tab{flex:1 1 auto;font-size:11px;padding:6px 5px;}
}
.iq-cat{margin-bottom:16px;}
.iq-cat-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.iq-item{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:11px 13px;margin-bottom:6px;}
.iq-q{font-size:13px;color:var(--text);font-weight:500;line-height:1.5;margin-bottom:6px;}
.iq-ntog{font-size:12px;color:var(--green);cursor:pointer;display:flex;align-items:center;gap:4px;}
.iq-ntog:hover{color:var(--gd);}
.iq-na{margin-top:7px;display:none;}
.iq-na.open{display:block;}
.iq-na textarea{font-size:12px;min-height:55px;background:var(--surface);}
.note-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.note-item{background:var(--al);border:1px solid var(--ab);border-radius:var(--rs);padding:10px 13px;}
.note-meta{font-size:11px;color:var(--amber);margin-bottom:3px;font-weight:500;}
.note-text{font-size:13px;color:var(--text);line-height:1.5;}
.note-new{display:flex;gap:7px;align-items:flex-end;}
.note-new textarea{flex:1;font-size:13px;min-height:65px;}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.cmp-col{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:12px;}
.cmp-col-t{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;}
.cmp-drv{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid var(--border2);font-size:12px;}
.cmp-drv:last-child{border-bottom:none;}
.dp{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;}
.dp.f{background:var(--pl);color:#8B2A50;}
.dp.m{background:var(--bl);color:var(--bd);}
.dp.match{background:var(--gl);color:var(--gd);}
.dp.no{background:var(--rl);color:var(--red);}
.admin-av{width:27px;height:27px;border-radius:50%;background:var(--gl);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--gd);}
.hint{display:flex;align-items:flex-start;gap:5px;font-size:12px;color:var(--t3);margin-top:7px;line-height:1.4;}
.hint i{font-size:13px;flex-shrink:0;margin-top:1px;}
.collapsible{overflow:hidden;transition:max-height .3s ease;}
.collapsible.closed{max-height:0!important;}
.org-note{display:none;align-items:center;gap:6px;font-size:12px;color:var(--gd);background:var(--gl);border:1px solid var(--gb);border-radius:var(--rs);padding:6px 12px;margin-bottom:12px;font-weight:500;}
.org-note.vis{display:flex;}
.sec-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.sec-l{display:flex;align-items:center;gap:7px;}
.sec-ic{width:27px;height:27px;border-radius:var(--rs);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.sec-ic i{font-size:14px;color:var(--t2);}
.sec-t{font-size:13px;font-weight:600;color:var(--text);}
.sec-s{font-size:11px;color:var(--t3);}
.cr{display:grid;grid-template-columns:140px 1fr;gap:7px;margin-bottom:7px;}
.lin{font-size:12px;padding:7px 9px;border-radius:var(--rs);border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;width:100%;font-family:var(--font);transition:all .15s;}
.lin:focus{border-color:var(--green);}
.lin.hv{border-color:var(--gb);background:var(--gl);color:var(--gd);font-weight:600;}
.dist-row{display:flex;align-items:center;gap:11px;}
.dist-val{font-size:13px;font-weight:600;color:var(--text);min-width:53px;text-align:right;}
.dist-val.off{color:var(--t3);}
.footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--border2);position:relative;}
.footer>.sc2,.footer .btng>.sc2{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;}
.sc2{font-size:12px;color:var(--t3);}
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--t2);cursor:pointer;margin-bottom:13px;padding:3px 0;}
.back-link:hover{color:var(--text);}
/* ── Education Module ─────────────────────────────────────── */
.edu-type-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.edu-type-education{background:var(--gl);color:var(--gd);border:1px solid #A8D8A8;}
.edu-type-training{background:#EAF1FB;color:var(--bd);border:1px solid #A8C8EE;}
.edu-type-course{background:var(--purl);color:var(--purple);border:1px solid var(--purb);}
.edu-prog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);margin-bottom:10px;}
.edu-prog-card:hover{border-color:var(--blue);box-shadow:var(--shm);transform:translateY(-1px);}
.edu-prog-card.published{border-left:3px solid var(--green);}
.edu-prog-card.draft{border-left:3px solid var(--amber);}
.edu-prog-card.concept{border-left:3px solid var(--border);}
.edu-inst-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:17px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.edu-inst-card:hover{border-color:var(--blue);box-shadow:var(--shm);}
.edu-inst-logo{width:42px;height:42px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;}
.edu-mkt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.edu-mkt-card:hover{border-color:var(--blue);box-shadow:var(--shm);transform:translateY(-1px);}
.edu-match-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;flex:1;}
.edu-match-fill{height:100%;border-radius:3px;transition:width .4s;}
.edu-career-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;background:var(--al);border:1px solid var(--ab);color:var(--amber);}
.edu-wizard-step{display:none;}
.edu-wizard-step.active{display:block;animation:fu .18s ease;}
.edu-upload-zone{border:2px dashed var(--border);border-radius:var(--r);padding:32px 20px;text-align:center;cursor:pointer;transition:all .15s;background:var(--bg);}
.edu-upload-zone:hover,.edu-upload-zone.drag{border-color:var(--blue);background:var(--bl);}
.edu-upload-zone.done{border-color:var(--green);background:var(--gl);}
.edu-profile-section{background:var(--bg);border:1px solid var(--border2);border-radius:var(--rs);padding:12px 14px;margin-bottom:10px;}
.edu-profile-section-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-bottom:8px;}
.edu-connector-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--gl);border:1px solid var(--gb);color:var(--gd);margin:2px;}
.edu-nh-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--bl);border:1px solid var(--bb);color:var(--blue);margin:2px;}
.edu-pf-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--rl);border:1px solid var(--rb);color:var(--red);margin:2px;}
.edu-privacy-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:var(--gl);border:1px solid var(--gb);font-size:11px;font-weight:600;color:var(--gd);}
.edu-stat-row{display:grid;gap:10px;margin-bottom:16px;}
.edu-reveal-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:11px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.edu-reveal-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}

/* ── Login screen ────────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}

/* ── Privacy statement gate ─────────────────────────────── */
#privacy-gate{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none;align-items:center;justify-content:center;padding:20px;}
#privacy-gate.open{display:flex;}
.pg-box{width:100%;max-width:600px;background:var(--surface);border-radius:var(--r);box-shadow:0 8px 40px rgba(0,0,0,.22);display:flex;flex-direction:column;max-height:90vh;}
.pg-header{padding:20px 24px 16px;border-bottom:1px solid var(--border2);flex-shrink:0;}
.pg-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:3px;}
.pg-subtitle{font-size:12px;color:var(--t2);}
.pg-body{padding:20px 24px;overflow-y:auto;flex:1;}
.pg-section{margin-bottom:18px;}
.pg-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.pg-section-title .material-icons{font-size:13px;}
.pg-section p{font-size:13px;color:var(--t2);line-height:1.7;margin-bottom:6px;}
.pg-section p strong{color:var(--text);}
.pg-section ul{font-size:13px;color:var(--t2);line-height:1.7;padding-left:18px;margin:0;}
.pg-section ul li{margin-bottom:3px;}
.pg-footer{padding:16px 24px;border-top:1px solid var(--border2);flex-shrink:0;}
.pg-checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer;}
.pg-checkbox-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;cursor:pointer;accent-color:var(--green);}
.pg-checkbox-label{font-size:13px;color:var(--text);line-height:1.5;}
.login-box{width:100%;max-width:560px;}
.login-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.login-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;}
.login-sub{font-size:13px;color:var(--t2);margin-bottom:24px;}
.login-list{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow-y:auto;}
/* ── SuperAdmin screen ──────────────────────────────────────── */
.sa-hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:var(--sh);}
.sa-hub-card:hover{border-color:var(--purple);}
.sa-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);}
.sa-stat-val{font-size:28px;font-weight:800;color:var(--text);}
.sa-stat-lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin-top:2px;}

/* ══════════════════════════════════════════════════════════════
   CAREER SITE — public vacancy portal (separate environment)
   Inspired by octopus.energy/careers/join-us/ — fully anonymised
   ══════════════════════════════════════════════════════════════ */
#career-site{display:none;position:fixed;inset:0;z-index:2000;background:#fff;overflow-y:auto;font-family:'DM Sans',system-ui,sans-serif;}
/* Detail panel */
.cs-detail-ov.open{display:flex;}
/* New badge on freshly published jobs */
/* No-jobs banner */

/* ══════════════════════════════════════════════════════════════
   CAREER PORTAL — embedded in MC Job Fit
   Scoped under #career-portal to avoid CSS conflicts
   ══════════════════════════════════════════════════════════════ */
#career-portal {
  --pink:#e040a0; --ink:#1a1a2e; --mid:#4a4a6a; --muted:#8a8aaa;
  --line:#e8e8f0; --bg:#ffffff; --bg2:#f5f5fa; --blue:#1565c0;
  font-family:'DM Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

#career-portal *{box-sizing:border-box;margin:0;padding:0;}
#career-portal :root{
#career-portal   --pink:#e040a0;
#career-portal   --ink:#1a1a2e;
#career-portal   --mid:#4a4a6a;
#career-portal   --muted:#8a8aaa;
#career-portal   --line:#e8e8f0;
#career-portal   --bg:#ffffff;
#career-portal   --bg2:#f5f5fa;
#career-portal   --blue:#1565c0;
#career-portal }
#career-portal body{font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;}

/* ── Top nav ─────────────────────────────────────────────────── */
#career-portal .topnav{height:60px;display:flex;align-items:center;padding:0 48px;border-bottom:1px solid var(--line);}
#career-portal .nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;}
#career-portal .nav-logo-sq{width:32px;height:32px;background:var(--ink);border-radius:7px;display:flex;align-items:center;justify-content:center;}
#career-portal .nav-logo-sq svg{width:18px;height:18px;}
#career-portal .nav-brand{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
#career-portal .nav-links{margin-left:auto;display:flex;align-items:center;gap:28px;}
#career-portal .nav-links a{font-size:14px;color:var(--mid);text-decoration:none;font-weight:500;transition:color .15s;}
#career-portal .nav-links a:hover,.nav-links a.active{color:var(--ink);}

/* ── Hero — dark, full width, big headline ──────────────────── */
#career-portal .hero{background:var(--ink);padding:72px 48px 80px;}
#career-portal .hero-label{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:20px;}
#career-portal .hero-title{font-size:clamp(36px,6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1.04;color:#fff;max-width:720px;margin-bottom:32px;}
#career-portal .hero-title .accent{color:var(--pink);}
/* Search bar — large, white, with icon */
#career-portal .hero-search{position:relative;max-width:640px;}
#career-portal .hero-search .material-icons{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--muted);pointer-events:none;}
#career-portal .hero-search input{width:100%;font-size:17px;padding:18px 22px 18px 56px;border-radius:12px;border:none;background:#fff;color:var(--ink);outline:none;box-shadow:0 4px 32px rgba(0,0,0,.35);font-family:inherit;font-weight:400;}
#career-portal .hero-search input::placeholder{color:var(--muted);}
#career-portal .hero-search input:focus{box-shadow:0 4px 32px rgba(0,0,0,.4),0 0 0 3px rgba(224,64,160,.35);}

/* ── Filters strip ───────────────────────────────────────────── */
#career-portal .filters-strip{background:var(--bg2);border-bottom:1px solid var(--line);padding:14px 48px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#career-portal .filter-label{font-size:13px;font-weight:600;color:var(--mid);margin-right:4px;}
/* Pill-style filter selects */
#career-portal .fpill{appearance:none;font-size:13px;font-weight:500;padding:7px 32px 7px 14px;border-radius:100px;border:1.5px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a8aaa' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;color:var(--ink);font-family:inherit;cursor:pointer;outline:none;transition:all .15s;}
#career-portal .fpill:hover{border-color:var(--mid);}
#career-portal .fpill:focus,.fpill.active{border-color:var(--pink);background-color:#fff8fc;}
#career-portal .filters-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
#career-portal .refresh-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--mid);background:#fff;border:1.5px solid var(--line);border-radius:100px;padding:6px 14px;cursor:pointer;font-family:inherit;transition:all .15s;}
#career-portal .refresh-pill:hover{border-color:var(--mid);color:var(--ink);}
#career-portal .refresh-pill .material-icons{font-size:15px;}

/* ── Main content ─────────────────────────────────────────────── */
#career-portal .content{max-width:960px;margin:0 auto;padding:40px 48px 100px;}
#career-portal .showing-count{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:28px;}
#career-portal .showing-count span{color:var(--pink);}

/* ── Job rows — full width, like Octopus ─────────────────────── */
#career-portal .job-list{display:flex;flex-direction:column;}
#career-portal .job-row{display:flex;align-items:flex-start;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s;border-radius:0;text-decoration:none;}
#career-portal .job-row:first-child{border-top:1px solid var(--line);}
#career-portal .job-row:hover{background:var(--bg2);margin:0 -16px;padding:22px 16px;border-radius:8px;border-color:transparent;}
#career-portal .job-row:hover + .job-row{border-top-color:transparent;}
#career-portal .job-main{flex:1;min-width:0;}
#career-portal .job-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3;letter-spacing:-.01em;}
#career-portal .job-org{font-size:14px;color:var(--mid);margin-bottom:10px;display:flex;align-items:center;gap:5px;}
#career-portal .job-org .material-icons{font-size:15px;color:var(--muted);}
#career-portal .job-tags{display:flex;flex-wrap:wrap;gap:6px;}
#career-portal .job-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:100px;background:var(--bg2);color:var(--mid);border:1px solid var(--line);}
#career-portal .job-tag.dept{background:#f0f0ff;border-color:#d0d0f0;color:#4040a0;}
#career-portal .job-tag.new-tag{background:#fff0f8;border-color:#f0b0d8;color:#c0206080;font-weight:700;}
#career-portal .job-tag .material-icons{font-size:12px;}
#career-portal .job-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);margin-top:4px;transition:all .18s;}
#career-portal .job-row:hover .job-arrow{border-color:var(--pink);color:var(--pink);background:#fff0f8;}

/* ── Empty state ─────────────────────────────────────────────── */
#career-portal .empty-state{padding:64px 32px;text-align:center;}
#career-portal .empty-state .material-icons{font-size:56px;color:var(--line);display:block;margin-bottom:16px;}
#career-portal .empty-title{font-size:20px;font-weight:700;color:var(--mid);margin-bottom:8px;}
#career-portal .empty-sub{font-size:15px;color:var(--muted);}

/* ── Detail drawer — slides in from right ────────────────────── */
#career-portal .drawer-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;backdrop-filter:blur(2px);}
#career-portal .drawer-ov.open{display:flex;align-items:stretch;justify-content:flex-end;}
#career-portal .drawer{width:600px;max-width:95vw;height:100vh;background:#fff;overflow-y:auto;display:flex;flex-direction:column;animation:drawerIn .24s cubic-bezier(.4,0,.2,1);}
@keyframes drawerIn{from{transform:translateX(48px);opacity:0;}to{transform:translateX(0);opacity:1;}}
#career-portal .drawer-close-bar{padding:16px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:1;}
#career-portal .drawer-close-btn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--mid);background:none;border:none;cursor:pointer;font-family:inherit;padding:6px 12px;border-radius:8px;transition:all .12s;}
#career-portal .drawer-close-btn:hover{background:var(--bg2);color:var(--ink);}
#career-portal .drawer-close-btn .material-icons{font-size:18px;}
#career-portal .drawer-apply-top{background:var(--pink);color:#fff;border:none;border-radius:8px;padding:9px 20px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
#career-portal .drawer-apply-top:hover{background:#c0308080;}
#career-portal .drawer-hdr{padding:32px 32px 24px;}
#career-portal .drawer-dept-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4040a0;background:#f0f0ff;border:1px solid #d0d0f0;border-radius:100px;padding:4px 12px;margin-bottom:14px;}
#career-portal .drawer-title{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--ink);margin-bottom:10px;}
#career-portal .drawer-org{font-size:15px;color:var(--mid);margin-bottom:16px;display:flex;align-items:center;gap:5px;}
#career-portal .drawer-org .material-icons{font-size:16px;color:var(--muted);}
#career-portal .drawer-meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:0;}
#career-portal .drawer-meta-tag{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;padding:5px 12px;border-radius:100px;background:var(--bg2);color:var(--mid);border:1px solid var(--line);}
#career-portal .drawer-meta-tag .material-icons{font-size:14px;color:var(--muted);}
#career-portal .drawer-body{padding:0 32px 32px;flex:1;}
#career-portal .drawer-section{margin-top:28px;padding-top:28px;border-top:1px solid var(--line);}
#career-portal .drawer-section:first-child{border-top:none;margin-top:0;padding-top:0;}
#career-portal .drawer-sec-title{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
#career-portal .drawer-text{font-size:15px;color:var(--ink);line-height:1.78;white-space:pre-wrap;}
#career-portal .drawer-footer{padding:24px 32px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;}
#career-portal .apply-big{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px;background:var(--ink);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:background .15s;}
#career-portal .apply-big:hover{background:#0d0d1a;}
#career-portal .apply-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.55;}

/* ── Apply modal ─────────────────────────────────────────────── */
#career-portal .modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
#career-portal .modal-ov.open{display:flex;}
#career-portal .modal{display:block;background:#fff;border-radius:20px;width:500px;max-width:95vw;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.3);animation:fadeUp .2s cubic-bezier(.4,0,.2,1);}
@keyframes fadeUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
#career-portal .modal-hdr{background:var(--ink);padding:22px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
#career-portal .modal-hdr-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px;}
#career-portal .modal-hdr-job{font-size:18px;font-weight:700;color:#fff;line-height:1.25;}
#career-portal .modal-close{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;margin-top:2px;}
#career-portal .modal-close:hover{background:rgba(255,255,255,.22);}
#career-portal .modal-body{padding:24px 26px;}
#career-portal .ref-section{background:#f5f5fa;border-radius:12px;padding:18px 20px;margin-bottom:22px;}
#career-portal .ref-section-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
#career-portal .ref-code{font-size:26px;font-weight:800;font-family:'DM Mono',monospace;color:var(--ink);letter-spacing:.06em;margin-bottom:7px;}
#career-portal .ref-note{font-size:13px;color:var(--mid);line-height:1.55;}
#career-portal .steps-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:11px;}
#career-portal .steps{display:flex;flex-direction:column;gap:10px;}
#career-portal .step{display:flex;align-items:flex-start;gap:12px;}
#career-portal .step-num{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
#career-portal .step-text{font-size:14px;color:var(--mid);line-height:1.5;}
#career-portal .step-text strong{color:var(--ink);}
#career-portal .modal-footer{padding:16px 26px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;}
#career-portal .btn-ghost{display:inline-flex;align-items:center;gap:5px;padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid var(--line);background:#fff;color:var(--mid);font-family:inherit;transition:all .15s;}
#career-portal .btn-ghost:hover{border-color:var(--mid);color:var(--ink);}
#career-portal .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);}
#career-portal .btn-dark:hover{background:#0d0d1a;}

/* ── Footer ─────────────────────────────────────────────────── */
#career-portal .site-footer{background:var(--ink);padding:36px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
#career-portal .footer-brand{font-size:14px;font-weight:700;color:#fff;}
#career-portal .footer-links{display:flex;gap:22px;}
#career-portal .footer-links a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none;transition:color .15s;}
#career-portal .footer-links a:hover{color:#fff;}
#career-portal .footer-note{font-size:12px;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:6px;}
#career-portal .footer-note .material-icons{font-size:14px;color:rgba(255,255,255,.3);}

@media(max-width:768px){
#career-portal   .topnav,.hero,.filters-strip,.content,.site-footer{padding-left:20px;padding-right:20px;}
#career-portal   .hero{padding-top:48px;padding-bottom:56px;}
#career-portal   .drawer{width:100vw;}
#career-portal }

/* ── Apply modal multi-step ──────────────────────────────── */
.apply-step { animation: fadeInUp .25s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.apply-how-row { display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:13px;color:var(--t2);line-height:1.5; }
.apply-how-row:not(:last-child) { border-bottom:1px solid var(--border2); }
.apply-how-ic { font-size:18px;color:var(--blue);flex-shrink:0;margin-top:1px; }
.ref-copy-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.ref-copy-btn:hover { border-color:var(--blue);color:var(--blue); }
.btn-primary { display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--rs,8px);border:none;background:var(--blue);color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.btn-primary:hover { filter:brightness(1.08); }
.btn-primary:disabled { opacity:.45;cursor:not-allowed; }
/* ── Test Data Manager ───────────────────────────────────────── */
.tdm-tab.active{color:var(--amber)!important;border-bottom-color:var(--amber)!important;font-weight:600!important;}
.tdm-tab:hover{color:var(--text)!important;}
.tdm-stat-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;}
.tdm-stat-num{font-size:22px;font-weight:700;color:var(--text);line-height:1.1;}
.tdm-stat-lbl{font-size:11px;color:var(--t3);margin-top:2px;}
.tdm-ds-card{border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer;transition:all .15s;}
.tdm-ds-card:hover{border-color:var(--amber);background:var(--al);}
.tdm-ds-card.loaded{border-color:var(--green);background:var(--gl);}
/* ── Typography utility classes ─────────────────────────────── */
.label-xs{font-size:var(--text-xs);font-weight:var(--label-weight);letter-spacing:var(--label-spacing);text-transform:var(--label-transform);color:var(--t3);}
.label-sm{font-size:var(--text-xs);font-weight:var(--label-weight);letter-spacing:.05em;text-transform:var(--label-transform);color:var(--t3);margin-bottom:4px;}
.text-sm{font-size:var(--text-sm);color:var(--t3);}
.text-base{font-size:var(--text-base);color:var(--t2);}
.text-md{font-size:var(--text-md);}
.text-muted{color:var(--t3);}
.text-secondary{color:var(--t2);}
.fw-6{font-weight:600;}
.fw-7{font-weight:700;}
.mono{font-family:var(--mono);}

/* ── v2.10 Statistieken scherm ──────────────────────────────────────────── */
.stat-period-btn{font-size:12px;padding:4px 12px;border-radius:20px;border:1px solid var(--border2);background:transparent;color:var(--t2);cursor:pointer;font-family:var(--font);}
.stat-period-btn.active{background:var(--text);color:var(--bg);border-color:var(--text);}
.stat-tab-btn{font-size:13px;padding:8px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--t2);cursor:pointer;font-family:var(--font);position:relative;bottom:-1px;}
.stat-tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.stat-tab-btn.admin-tab{color:var(--purple);}
.stat-tab-btn.admin-tab.active{color:var(--purple);border-bottom-color:var(--purple);}
.stat-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.stat-kpi-card{background:var(--s2);border-radius:var(--rs);padding:12px 14px;}
.stat-kpi-lbl{font-size:11px;color:var(--t2);margin-bottom:5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.stat-kpi-val{font-size:22px;font-weight:700;color:var(--text);line-height:1;}
.stat-kpi-sub{font-size:11px;color:var(--t3);margin-top:4px;}
.stat-chart-wrap{position:relative;height:220px;margin-bottom:6px;}
.stat-chart-label{font-size:11px;color:var(--t3);margin-bottom:8px;}
.stat-hm-table{width:100%;border-collapse:collapse;font-size:13px;}
.stat-hm-table th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--t3);padding:8px 12px;border-bottom:1px solid var(--border2);text-align:left;}
.stat-hm-table td{padding:10px 12px;border-bottom:1px solid var(--border2);color:var(--text);}
.stat-hm-table tr:last-child td{border-bottom:none;}
.stat-hm-table tr:hover td{background:var(--s2);}


.st0{fill:var(--white);}.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_00000054972652950698644030000017964670701689306506_);}.st3{fill:url(#SVGID_00000106128495029601101220000001680011480863901375_);}
.st0{fill:var(--white);}.st1{fill:url(#SVGID_1_);}.st2{fill:url(#SVGID_00000054972652950698644030000017964670701689306506_);}.st3{fill:url(#SVGID_00000106128495029601101220000001680011480863901375_);}
/* ── Thin unobtrusive scrollbar for .main ───────────────────────────────── */
.main::-webkit-scrollbar { width: 5px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.main::-webkit-scrollbar-button { display: none; height: 0; }
.main { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }

/* ── Stats sprint 2: doorlooptijd + trechter ───────────────────────────── */
.stat-funnel-wrap{display:flex;align-items:stretch;gap:0;margin:16px 0;}
.stat-funnel-step{flex:1;position:relative;text-align:center;}
.stat-funnel-bar{height:52px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;border-radius:0;transition:opacity .15s;}
.stat-funnel-step:first-child .stat-funnel-bar{border-radius:var(--rs) 0 0 var(--rs);}
.stat-funnel-step:last-child  .stat-funnel-bar{border-radius:0 var(--rs) var(--rs) 0;}
.stat-funnel-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:6px;color:var(--t2);}
.stat-funnel-pct{font-size:10px;color:var(--t3);margin-top:2px;}
.stat-funnel-arrow{position:absolute;right:-8px;top:50%;transform:translateY(-50%) translateY(-13px);font-size:16px;color:var(--border2);z-index:1;pointer-events:none;}
.stat-tt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px;}
.stat-tt-card{background:var(--s2);border-radius:var(--rs);padding:14px 16px;display:flex;flex-direction:column;gap:4px;}
.stat-tt-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);}
.stat-tt-val{font-size:26px;font-weight:700;color:var(--text);font-family:var(--mono);line-height:1;}
.stat-tt-sub{font-size:11px;color:var(--t3);}
.stat-match-bar-wrap{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.stat-match-bar-bg{flex:1;height:8px;background:var(--border2);border-radius:4px;overflow:hidden;}
.stat-match-bar-fill{height:100%;border-radius:4px;transition:width .4s ease;}
/* Table header corners — clip to card border-radius */

/* ── F-631: states that used to be inline event handlers ─────────────────────────────────────────
   A Content-Security-Policy without 'unsafe-inline' blocks onmouseover/onfocus attributes, so the
   hover and focus looks they set move here. Same values as the handlers had. */
.skip-link {
  position: absolute; top: -40px; left: 0; background: var(--blue); color: var(--white);
  padding: 8px 16px; font-size: 13px; font-weight: 600; z-index: 99999; text-decoration: none;
  border-radius: 0 0 var(--rs) 0; transition: top .15s;
}
.skip-link:focus { top: 0; }
.hover-bg-s2:hover { background: var(--s2); }
/* !important because the element sets its border colour in its own style attribute, which a class
   rule cannot otherwise override -- the handler did it by writing that same attribute. */
.hover-border-green:hover { border-color: var(--green) !important; }

/* §431 confirmTitle — the in-app confirmation dialog (shared/_confirm_dialog); backdrop as the prototype's showConfirmModal. */
/* margin:auto restores the UA centring that vacancy_portal.css's *{margin:0} takes away (MEET on 1759). */
dialog.mc-confirm{margin:auto;}
dialog.mc-confirm::backdrop{background:rgba(0,0,0,.42);}