/* design-system-employer.css: ADDITIVE sheet for the EMPLOYER and LIVE RECRUITER portals only.
   Merge 2026-10-22 (coordinator decision). public/design/design-system.css stays byte-identical to the
   approved P1 seeker sheet (scripts/seeker-sheet-hash-guard.mjs, c157ae19). Every rule that exists in the
   P2 sheet (56daa17cb1) and not in P1's is moved here, unchanged and in P2's order.
   Five rules exist in both with DIFFERENT values; the P2 value is restated here so employer and
   recruiter pages keep what P2 rendered, and the seeker keeps P1's:
     .cd-rcount (adds align-items:center), .pjd-rh (adds align-items:center),
     .pjd-meta (gradient + border), .pjd-repost .iconbtn (border-color var(--brand)),
     .vr-modal (padding-top:56px).
   Loaded AFTER design-system.css by (employer)/layout.tsx and (recruiter)/layout.tsx. Never import it
   from a seeker, marketing or admin layout. */
:root{
  --match-ideal:#2160F0; --match-strong:#2FA85E;
  --match-good:#F0C22E;  --match-fair:#E56A6A;
}
/* FOUNDER-SCOPED 2026-08-15 — frames 23 (Dunning Sequence - Retry Scheduled) and 36
   (Add-ons Transaction History - Empty) ONLY, by explicit instruction.
   The `Filters` chip renders a 9px corner while the `.jm-search` box beside it in the
   SAME row, at the SAME 58px height, renders 12px. The founder's eye caught the 3px
   disagreement. Height is NOT changed: 58px is correct and matches its row-mate.
   ⛔ This marker is applied in exactly two frame files. 19 OTHER frames carry the
   identical mismatch and are deliberately LEFT ALONE pending a founder ruling —
   enumerated in the session report. Do not widen this without that ruling. */
.select.sel-r12{border-radius:12px}
/* CLASS FIX (founder 2026-08-15, frames 28-32 "the most recent is off alignment
   from the chevron dropdown"). `.js-sort` is a text label + a chevron. Four
   ancestor-scoped rules gave it inline-flex/centre/gap; the class itself had
   none, so every instance OUTSIDE those four ancestors fell back to baseline
   alignment and its chevron sat 6.50px above the text centre. Measured: 40 of
   68 controls in the build, 39 in `.pjd-rh` and 1 in `.cd-rcount`.
   This is the base rule for the control. The four ancestor rules below set the
   same three properties, so they are now redundant, not conflicting - kept so
   the frames they cover stay byte-identical. */
.js-sort{display:inline-flex;align-items:center;gap:6px}
/* CLASS FIX part 2, sibling site — see the note at `.pjd-rh`. Same shape, same
   cause: flex row, no `align-items`, sort label measured +10.00px below its
   row-mate. */
.cd-rcount{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:8px}
/* gate fix 2026-07-24: the original divides the delete control from the Required checkbox with a
   short vertical rule — restored here (the -4px pulls it into the row's own 16px gap). */
.ewz-sfdiv{width:1px;height:22px;background:#DDE2F0;flex:none;margin:0 -4px}
/* CLASS FIX part 2 (founder 2026-08-15). Same defect as the `.js-sort` rule at
   css:631, one level up. A sort-control row is `display:flex` with no
   `align-items`, so it defaults to `stretch`: the shorter child (the plain text
   label) is stretched and its text stays at the TOP of the stretched box, while
   the taller child (the sort control) centres its own content. The label then
   sits BELOW its row-mate. Measured across the build: `.pjd-rh` +9.00px on 26
   rows, `.cd-rcount` +10.00px on 1. The `.js-sort` fix alone only took those to
   +2.50 / +3.50 - it does not close it, because the cause is the ROW.
   ⛔ `.pjd-fixed .pjd-rh` at css:1202 already carried `align-items:center`. That
   was this same bug fixed for ONE variant instead of for the class, which is
   why it kept coming back on every other screen. Its rule is now redundant and
   is kept only so those frames stay byte-identical.
   Sibling site dispositioned: `.js-rhead` (19 rows) is NOT affected - its
   children are equal height, measured +0.00px on all 19, so stretch and centre
   are identical there and it is left alone. */
.pjd-rh{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--ink);margin-bottom:8px}
.pjd-meta{background:linear-gradient(150deg,#EAF1FF 0%,#EFEBFF 100%);border:1px solid #9DBEF3;border-radius:14px;padding:22px}
.pjd-repost .iconbtn{color:var(--brand);border-color:var(--brand)}
.vr-modal{width:720px;max-width:720px;text-align:left;padding-top:56px}
/* gate fix 2026-07-24: drop the content below the close-X so it never touches the candidate
   card, and draw the scrollbar the original shows (render_plan hides real scrollbars). The
   track runs the modal's scroll height in a right gutter; the thumb sits near the top since
   this view opens at the top of a long question list. */
.vr-modal .modal-x{top:20px;right:22px}
.vr-sb{position:absolute;top:78px;bottom:34px;right:12px;width:6px;border-radius:3px;background:#EDEFF5}
.vr-sb::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;border-radius:3px;background:#C6C8CE}
/* ==================== P2 · Candidate Interviews (calendar views) ==================== */
/* Additive-only (marker law). Chrome = eye-passed cand portal shell (build_shellnav);
   only the calendar body is new. Nav cluster (Today/‹/›/view-select) are NAVIGATION
   controls — neutral dark-on-white like .btn-dd dropdown triggers, NOT CTAs, so the
   OI-34 blue-outline button law does not apply (interpretive call, flagged for gate).
   The one CTA in the section is the popup Join = .btn-primary. Content from the frame
   ORIGINALS; treatment = elected tokens. */
.cv-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.cv-hd-l{display:flex;align-items:center;gap:16px}
/* 30px = the approved .page-title. The originals measure ~31px on BOTH the page
   headings and the calendar month titles (cap-height 22px on each), so there is one
   heading size here, not two — no calendar fork. */
.cv-title{font-family:var(--font-head);font-weight:800;font-size:30px;letter-spacing:-.01em;color:var(--ink);margin:0}
.cv-ctl{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);
  border-radius:10px;color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:16px;padding:11px 18px;white-space:nowrap}
.cv-nav{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--ink)}
.cv-nav svg{width:22px;height:22px}
.cv-navwrap{display:inline-flex;align-items:center;gap:2px;margin-left:2px}
.cv-sel{padding:11px 16px;min-width:120px;justify-content:space-between}
.cv-sel svg{width:18px;height:18px;color:var(--mut)}
.cv-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;display:inline-block}

/* ---- month grid ---- */
.cv-month{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-mrow{display:grid;grid-template-columns:repeat(7,1fr)}
.cv-mhead>div{padding:15px 0;text-align:center;font-size:15px;font-weight:600;color:var(--mut);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line-2)}
.cv-mhead>div:first-child{border-left:0}
.cv-cell{min-height:146px;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px;position:relative}
.cv-cell:first-child{border-left:0}
.cv-mrow:last-child .cv-cell{border-bottom:0}
.cv-dnum{font-size:15px;color:var(--ink);align-self:flex-end;line-height:1}
.cv-cell.out .cv-dnum{color:var(--mut-2)}
.cv-dnum.today{background:var(--brand);color:#fff;border-radius:7px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;margin:-4px -4px 0 0;font-weight:600}
.cv-ev{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
.cv-ev .cv-evt{color:var(--mut);text-overflow:ellipsis;overflow:hidden}

/* ---- week / day time grid ---- */
.cv-tg{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-tghead{display:grid;border-bottom:1px solid var(--line)}
.cv-tghead>div{padding:16px 0;text-align:center;font-size:16px;font-weight:600;color:var(--ink);border-left:1px solid var(--line-2)}
.cv-tghead>div:first-child{border-left:0}
.cv-daybadge{background:var(--brand);color:#fff;border-radius:6px;padding:1px 7px;margin-left:7px;font-size:15px}
.cv-tgbody{display:grid;position:relative}
.cv-times{border-right:0}
.cv-thour{height:57px;position:relative;font-size:13px;color:var(--mut);text-align:right;padding-right:14px}
.cv-thour span{position:absolute;right:14px;top:-8px}
.cv-daycol{border-left:1px solid var(--line-2);position:relative}
.cv-daycol .cv-hr{height:57px;border-bottom:1px solid var(--line-2)}
.cv-block{position:absolute;left:8px;right:8px;background:var(--tint-panel);border-radius:8px;padding:9px 12px;overflow:hidden}
.cv-block .cv-bt{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-block .cv-btime{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.cv-block .cv-bd{font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- schedule list ---- */
.cv-sched{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cv-srow{display:grid;grid-template-columns:210px 260px 1fr;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line-2)}
.cv-srow:last-child{border-bottom:0}
.cv-sdate{display:flex;align-items:center;gap:14px;font-size:16px;color:var(--ink)}
.cv-snum{font-size:17px;font-weight:600;color:var(--ink);min-width:22px;text-align:center}
.cv-snum.today{background:var(--brand);color:#fff;border-radius:7px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;min-width:0}
.cv-stime{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink)}
.cv-stitle{font-size:16px;font-weight:700;color:var(--ink)}

/* ---- join popup ---- */
.cv-pop{position:absolute;top:266px;right:64px;width:428px;background:#fff;border-radius:14px;
  box-shadow:var(--sh-pop);padding:26px 28px 28px;z-index:5}
.cv-pop-x{position:absolute;top:20px;right:20px;color:var(--mut)}
.cv-pop-x svg{width:22px;height:22px}
.cv-pop-t{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--ink);margin:2px 0 20px}
.cv-pop-t .cv-dot{width:11px;height:11px}
.cv-pop-r{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;font-size:15px;color:var(--ink-2);line-height:1.4}
.cv-pop-r svg{width:20px;height:20px;color:var(--mut);flex:none;margin-top:1px}
.cv-pop-link{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2);margin-bottom:20px}
.cv-pop-link a{color:var(--brand);font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-pop-link .cv-copy{color:var(--mut)}.cv-pop-link .cv-copy svg{width:18px;height:18px}
.cv-pop-join{background:var(--brand);color:#fff;border-radius:9px;padding:9px 22px;font-weight:600;font-size:15px}
.cv-pop-pt{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.cv-pop-pt svg{width:20px;height:20px;color:var(--mut)}
.cv-part{display:flex;align-items:center;gap:14px;margin-bottom:15px}
.cv-part img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.cv-part b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.cv-part span{display:block;font-size:13.5px;color:var(--mut);margin-top:1px}

/* ---- P2 · Employer Interviews (calendar reuse + employer specifics) ---- */
.cv-hd-r{display:flex;align-items:center;gap:14px}
.cv-evstack{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.cv-evstack .cv-ev{margin-top:0}
.cv-pop-acts{position:absolute;top:20px;right:22px;display:flex;align-items:center;gap:16px;color:var(--mut)}
.cv-pop-acts svg{width:21px;height:21px}
.cv-pop-acts .cv-pen{color:var(--brand)}
.cv-sgrp{display:grid;grid-template-columns:210px 1fr;align-items:flex-start;padding:18px 26px;border-bottom:1px solid var(--line-2)}
.cv-sgrp:last-child{border-bottom:0}
.cv-sgrp .cv-sdate{padding-top:4px}
.cv-sgln{display:grid;grid-template-columns:260px 1fr;align-items:center;padding:7px 0}

/* ==================== P2 · Candidate Courses ==================== */
.crs-sub{font-size:16px;color:var(--mut);margin:6px 0 24px}
.crs-search{display:flex;gap:16px;margin-bottom:24px}
.crs-field{width:565px;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;color:var(--mut-2);font-size:16px}
.crs-field svg{width:20px;height:20px;color:var(--mut)}
.crs-chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
/* Ink, not brand. The ORIGINAL keeps both the idle and the selected category label at
   #1D1D1F; brand-blue selected text was invented here. Shape/border already match both
   the original and the system's ordinary chip (.jd-chip, 8px rect + --line). */
.crs-chip{border:1px solid var(--line);border-radius:8px;padding:10px 17px;font-size:15px;color:var(--ink);white-space:nowrap}
.crs-chip.on{background:var(--brand-tint);border-color:var(--brand-tint);color:var(--ink)}
.crs-mrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.crs-count{font-size:15px;font-weight:600;color:var(--ink)}
.crs-sort{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.crs-sort svg{width:16px;height:16px;color:var(--mut)}
.crs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 26px}
.crs-card img{width:100%;height:216px;object-fit:cover;border-radius:12px;display:block}
.crs-ct{display:flex;gap:8px;align-items:flex-start;font-size:18px;font-weight:700;color:var(--ink);margin:16px 0 12px;line-height:1.32}
.crs-arr{color:#EA8C1E;flex:none;margin-top:1px}
.crs-sk{font-size:15px;color:var(--mut);line-height:1.5}
.crs-sk b{color:var(--ink);font-weight:600}
.crs-cm{font-size:14.5px;color:var(--mut);margin-top:16px}
.crs-pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:34px}
.crs-pg{min-width:34px;height:34px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:15px;color:var(--ink)}
.crs-pg.on{background:var(--brand);color:#fff}
.crs-pg.nav,.crs-pg.dots{color:var(--mut-2)}
.crs-modal{width:684px;background:#fff;border-radius:20px;box-shadow:var(--sh-pop);padding:54px 60px 48px;position:relative;text-align:center;overflow:hidden}
.crs-mx{position:absolute;top:24px;right:26px;color:var(--ink)}
.crs-mx svg{width:24px;height:24px}
.crs-marr{position:absolute;inset:0;background:url(fonts/../arrow-blue.png) center/210px no-repeat;opacity:.05;pointer-events:none}
.crs-mh{font-family:var(--font-head);font-weight:800;font-size:30px;color:var(--ink);line-height:1.25;margin-bottom:16px;position:relative}
.crs-mb{font-size:16px;color:var(--mut);line-height:1.5;max-width:440px;margin:0 auto 28px;position:relative}
.crs-mbtn{position:relative;display:inline-flex}

/* ==================== P2 · Employer Live sourcing ==================== */
.ls-search{display:flex;gap:16px;margin-bottom:26px}
.ls-field{flex:1;max-width:592px;display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;font-size:16px;color:var(--ink)}
.ls-field.loc{max-width:365px} .ls-field svg{color:var(--mut);width:20px;height:20px;flex:none}
.ls-crow{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ls-cnt{font-size:15px;color:var(--ink)}
.ls-sort{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)} .ls-sort svg{width:16px;height:16px;color:var(--mut)}
.ls-row{padding:28px 0;border-bottom:1px solid var(--line-2)}
.ls-main{display:grid;grid-template-columns:118px 1.15fr 1fr 1.12fr;gap:26px;align-items:start}
.ls-c1{display:flex;flex-direction:column;align-items:center;gap:7px;width:118px}
.ls-c1 .ls-mlabel{font-size:14.5px;font-weight:600;color:var(--ink);text-align:center;line-height:1.25}
.ls-title{font-size:18px;font-weight:700;color:var(--ink);line-height:1.3}
.ls-loc{font-size:15px;color:var(--mut);margin:5px 0 16px}
.ls-unlock{display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;border-radius:9px;padding:11px 20px;font-size:15px;font-weight:600;width:max-content}
.ls-unlock svg{width:17px;height:17px}
.ls-blk{margin-bottom:14px;font-size:15px;line-height:1.5}
.ls-blk .o{color:var(--mut)} .ls-blk b{display:block;color:var(--ink);font-weight:600}
.ls-blk .d{color:var(--mut)}
.ls-foot{padding-left:144px;margin-top:18px}
.ls-chips{display:flex;gap:12px;flex-wrap:wrap}
.ls-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #B7E3C6;border-radius:8px;padding:8px 14px;font-size:14.5px;color:var(--ink)}
.ls-chip svg{color:var(--up);width:15px;height:15px}
.ls-bars{display:grid;grid-template-columns:1.15fr 1fr 1.12fr;gap:26px}
.ls-bar .bl{display:flex;justify-content:space-between;font-size:15px;color:var(--ink);margin-bottom:9px}
.ls-bar .bt{height:6px;border-radius:999px;background:var(--line)}
.ls-bar .bt i{display:block;height:100%;border-radius:999px;background:var(--bar-fill)}
/* unlock modals */
.ls-modal{width:502px;background:#fff;border-radius:18px;box-shadow:var(--sh-pop);padding:34px 38px 36px;position:relative}
.ls-mx{position:absolute;top:24px;right:26px;color:var(--ink)} .ls-mx svg{width:24px;height:24px}
.ls-mh{font-family:var(--font-head);font-weight:800;font-size:27px;color:var(--ink);margin-bottom:12px}
.ls-mp{font-size:16px;color:var(--mut);line-height:1.5;margin-bottom:22px}
.ls-mq{font-size:16px;color:var(--ink);margin-bottom:14px}
.ls-step{display:flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:10px;width:150px;overflow:hidden;margin-bottom:14px}
.ls-step span{flex:1;text-align:center;font-size:17px;font-weight:600;color:var(--ink);padding:12px 0}
.ls-step b{width:48px;text-align:center;font-size:20px;color:var(--ink);padding:11px 0;cursor:default}
.ls-stepwrap{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ls-hint{display:flex;align-items:center;gap:9px;background:var(--soft);border-radius:9px;padding:12px 14px;font-size:14.5px;color:var(--ink);margin-bottom:22px}
.ls-hint svg{width:17px;height:17px;color:var(--mut)}
.ls-pay{background:var(--soft);border-radius:12px;padding:18px 20px;margin-bottom:22px}
.ls-pay .pt{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
.ls-card{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink);margin-bottom:12px}
.ls-radio{width:18px;height:18px;border-radius:50%;border:5px solid var(--brand);flex:none}
.ls-card img{height:18px}
.ls-addcard{color:var(--brand);font-size:15px;font-weight:600}
.ls-paybtn{background:var(--brand);color:#fff;border-radius:11px;padding:15px 0;text-align:center;font-size:16px;font-weight:600}
.ls-credbox{border:1.5px solid var(--line);border-radius:12px;padding:22px 0;text-align:center;margin-bottom:20px}
.ls-credbox .n{font-size:22px;font-weight:700;color:var(--ink)} .ls-credbox .l{font-size:15px;color:var(--mut);margin-top:3px}

/* ---- P2 · Live sourcing · Unlocked profile ---- */
.up-bc{font-size:15px;color:var(--mut);margin-bottom:26px}
.up-bc b{color:var(--ink);font-weight:600}
.up-grid{display:grid;grid-template-columns:1fr 372px;gap:40px;align-items:start}
.up-hd{display:flex;gap:22px;margin-bottom:26px}
.up-av{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:none}
.up-nm{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--ink)}
.up-tag{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;border-radius:999px;padding:5px 12px}
.up-tag.ok{background:var(--ok-bg);color:var(--ok-ink)} .up-tag.nu{background:var(--neu-bg);color:var(--neu-ink)}
.up-tag .dotg{width:8px;height:8px;border-radius:50%;background:var(--up)} .up-tag svg{width:14px;height:14px}
.up-role{font-size:17px;color:var(--ink);margin:12px 0 4px}
.up-loc{font-size:15px;color:var(--mut);margin-bottom:12px}
.up-contact{display:flex;gap:26px;font-size:15px;color:var(--ink)}
.up-contact span{display:flex;align-items:center;gap:8px} .up-contact svg{width:17px;height:17px;color:var(--mut)}
.up-verd{color:var(--up)!important}
.up-mm{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center;margin-bottom:34px}
.up-bar .bl{display:flex;justify-content:space-between;font-size:15px;color:var(--ink);margin-bottom:8px}
.up-bar+.up-bar{margin-top:16px}
.up-bt{height:6px;border-radius:999px;background:var(--line)} .up-bt i{display:block;height:100%;border-radius:999px;background:var(--bar-fill)}
.up-ringwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.up-ringwrap .mr-ring{width:92px;height:92px} .up-ringwrap .mr-pct{font-size:20px}
.up-ringlab{font-size:16px;font-weight:700;color:var(--ink)}
.up-sec{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);margin:30px 0 16px}
.up-about{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.up-about a{color:var(--brand)}
.up-skills{display:flex;flex-wrap:wrap;gap:12px}
.up-skill{border:1px solid var(--line);border-radius:8px;padding:9px 16px;font-size:15px;color:var(--ink)}
.up-exp{display:flex;gap:16px;margin-bottom:22px}
.up-logo{width:46px;height:46px;border-radius:9px;object-fit:contain;background:#fff;border:1px solid var(--line-2);padding:4px;flex:none}
.up-etile{width:46px;height:46px;border-radius:9px;background:#E8EEFE;color:#8FA9D9;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.up-ei .cn{font-size:15px;color:var(--ink)} .up-ei b{font-size:16px;color:var(--ink)} .up-ei .dt{font-size:14px;color:var(--mut);font-weight:400;margin-left:8px}
.up-ei p{font-size:15px;color:var(--ink-2);line-height:1.55;margin-top:8px}
.up-ei p a{color:var(--brand)}
.up-side{display:flex;flex-direction:column;gap:20px}
.up-actions{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.up-msgrow{display:flex;justify-content:center;gap:34px;font-size:15px;color:var(--brand);font-weight:500;margin-top:4px}
.up-msgrow span{display:flex;align-items:center;gap:8px} .up-msgrow svg{width:17px;height:17px}
.up-cardp{background:var(--tint-panel);border-radius:14px;padding:24px 26px}
.up-cardp h4{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--ink);margin:0 0 18px}
.up-kv{margin-bottom:18px} .up-kv:last-child{margin-bottom:0}
.up-kv .k{font-size:14px;color:var(--mut);margin-bottom:4px} .up-kv .v{font-size:16px;color:var(--ink);font-weight:500}
/* send job invite modal */
.sji-cand{background:var(--tint-panel);border-radius:12px;padding:18px 20px;margin-bottom:22px}
.sji-cand b{font-size:16px;color:var(--ink)} .sji-cand span{display:block;font-size:14.5px;color:var(--mut);margin-top:4px}
.sji-lb{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:9px}
.sji-sel{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:10px;padding:15px 18px;font-size:16px;color:var(--mut);margin-bottom:20px}
.sji-sel svg{width:18px;height:18px;color:var(--mut)}
.sji-ta{border:1.5px solid var(--line);border-radius:10px;padding:15px 18px;font-size:16px;color:var(--mut-2);height:118px;margin-bottom:24px}
.sji-btnrow{display:flex;justify-content:flex-end}

/* ==================== P2 · Employer Candidates (tables) ==================== */
.pill.info{background:#E4ECFF;color:#2E5BD8}
.ct-tabs{display:flex;gap:32px;border-bottom:1px solid var(--line);margin-bottom:24px}
.ct-tab{padding:0 0 15px;font-size:16px;color:var(--mut);position:relative}
.ct-tab.on{color:var(--brand);font-weight:600}
.ct-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand)}
.ct-search{display:flex;gap:14px;margin-bottom:6px}
/* FOUNDER-SCOPED 2026-08-15 — frame 33 (Screening Questions - Empty) ONLY.
   `.ct-search` is flex with NO `align-items`, so it defaults to `stretch`, and its
   children took their 54px height from the `.ct-sf` search field standing beside
   them. The Empty state correctly removes that field (dead furniture goes with the
   dead list), so Add / Filters / kebab collapse to their bare 22px text height — a
   12px radius on a 22px box is what reads as an unfamiliar lozenge.
   Restoring the row's own height lets `stretch` do exactly what it did before.
   Verified against the populated sibling: row 54px, all children 54px. */
.ct-search.ct-search-noinput{min-height:54px}
.ct-sf{flex:1;display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;color:var(--mut-2);font-size:16px}
.ct-sf svg{width:20px;height:20px;color:var(--mut)}
.ct-btn{display:flex;align-items:center;gap:10px;border:1.5px solid #C7D6FB;border-radius:12px;padding:0 22px;color:var(--brand);font-weight:600;font-size:16px}
.ct-btn svg{width:18px;height:18px}
.ct-kebab{width:56px;display:flex;align-items:center;justify-content:center;border:1.5px solid #C7D6FB;border-radius:12px;color:var(--brand)}
.ct-name{display:flex;align-items:center;gap:14px}
.ct-cb{width:18px;height:18px;border:1.5px solid var(--mut-2);border-radius:5px;flex:none}
.ct-th-cb{display:flex;align-items:center;gap:14px}
.ct-sortic{display:inline-flex;color:var(--mut-2);margin-left:6px}.ct-sortic svg{width:14px;height:14px}
.ct-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.ct-nm{color:var(--brand);font-weight:600}
.dtable td .c{color:var(--mut)} .dtable td .b{display:block;color:var(--ink);font-weight:600} .dtable td .d{color:var(--mut);font-size:14px}
.ct-actions{display:flex;align-items:center;gap:10px}
.ct-seg{display:flex}
.ct-ab{width:40px;height:36px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.ct-ab.yes{border-radius:8px 0 0 8px} .ct-ab.no{border-radius:0 8px 8px 0;border-left:0}
.ct-ab.gon{background:var(--ok-bg);color:var(--ok-ink);border-color:#BfE4CC}
.ct-ab.ron{background:var(--bad-bg);color:var(--bad-ink);border-color:#F1C4C0}
.ct-ab svg{width:17px;height:17px}
.ct-kb{color:var(--mut-2)}.ct-kb svg{width:20px;height:20px}
.ct-vcell{display:flex;align-items:center;gap:10px}
.ct-vb{width:17px;height:17px;border-radius:50%;background:#2E5BD8;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ct-vb.g{background:var(--mut-2)} .ct-vb svg{width:11px;height:11px}
.ct-sact{display:flex;align-items:center;gap:20px;color:var(--mut)}
.ct-sact .bm{color:var(--brand)} .ct-sact svg{width:19px;height:19px}
.ct-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.ct-pageinfo{font-size:15px;color:var(--ink)} .ct-pageinfo b{font-weight:700}
.ct-pager{display:flex;align-items:center;gap:12px;color:var(--mut-2)}
.ct-pg{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--mut-2)}
.ct-pg.on{background:var(--brand);color:#fff}

/* ==================== P2 · Employer Analytics (dashboard) ==================== */
.an-sub{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--ink);margin:2px 0 18px}
/* COMPACT STAT TILE — a deliberate variant, not a fork of .tile.
   Analytics runs FIVE tiles across the 1254px content column. The approved .tile is
   302px wide; five need 1546px and cannot fit. The original therefore draws a tighter
   box — measured 244x68 with 9px gaps (5x244 + 4x9 = 1256) and a 21px number — so the
   compact geometry is load-bearing, forced by the row, not a drawing accident.
   Type/ink follow .tile's rules; only the scale is reduced. */
.an-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:26px}
.an-kpi{border:1px solid var(--line);border-radius:8px;padding:11px 14px;background:#fff}
.an-ktop{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.an-kn{font-size:21px;font-weight:800;color:var(--ink);font-family:var(--font-head);line-height:1}
.an-kd{font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px}
.an-kd svg{width:13px;height:13px} .an-kd.up{color:var(--up)} .an-kd.down{color:var(--down)}
.an-klb{font-size:15px;color:var(--ink)}
.an-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.an-card{border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.an-ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.an-ct{font-size:18px;font-weight:700;color:var(--ink)}
.an-sel{border:1px solid var(--line);border-radius:9px;padding:8px 13px;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.an-sel svg{width:15px;height:15px;color:var(--mut)}
/* bar chart */
.an-bars{display:flex;align-items:flex-end;gap:0;height:290px;position:relative}
.an-yax{display:flex;flex-direction:column;justify-content:space-between;height:290px;font-size:12px;color:var(--mut-2);padding-right:14px;text-align:right}
.an-plot{flex:1;display:flex;align-items:flex-end;justify-content:space-between;height:290px;border-left:1px dashed var(--line);position:relative}
.an-grid{position:absolute;inset:0;pointer-events:none}
.an-grid i{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.an-bar{width:34px;border-radius:6px 6px 0 0;background:#D9E4FC;position:relative}
.an-bar.hot{background:var(--brand)}
.an-xax{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);margin-top:10px;padding-left:52px}
.an-tt{position:absolute;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--sh-card);padding:8px 12px;font-size:13px;text-align:center;transform:translateX(-50%)}
.an-tt .t{color:var(--mut);font-size:12px} .an-tt .v{font-weight:700;color:var(--ink)}
/* donut */
.an-donut-wrap{display:flex;align-items:center;gap:30px}
.an-donut{width:230px;height:230px;border-radius:50%;flex:none;position:relative}
.an-donut::after{content:"";position:absolute;inset:52px;background:#fff;border-radius:50%}
.an-dctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}
.an-dctr .l{font-size:14px;color:var(--mut)} .an-dctr .v{font-size:24px;font-weight:800;color:var(--ink);font-family:var(--font-head)}
.an-leg{display:flex;flex-direction:column;gap:16px}
.an-legi{display:flex;gap:11px;align-items:flex-start}
.an-legi .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.an-legi .lt{font-size:14.5px;color:var(--mut)} .an-legi .lv{font-size:15px;font-weight:700;color:var(--ink)}
/* perf metrics */
.an-pm-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:26px}
.an-pm-tile{border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.an-sbrow{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:16px;margin-bottom:10px}
.an-sblab{font-size:13.5px;color:var(--mut);line-height:1.3}
.an-sbar{display:flex;gap:8px;height:40px}
.an-sseg{border-radius:6px}
.an-leg-row{display:flex;justify-content:center;gap:26px;margin-top:20px}
.an-leg-row span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.an-leg-row .dot{width:9px;height:9px;border-radius:50%}
/* funnel + line */
.an-fbars{display:flex;align-items:flex-end;justify-content:space-between;height:250px;position:relative}
.an-fbar{width:64px;border-radius:6px 6px 0 0;background:#D9E4FC}
.an-fbar.hot{background:var(--brand)}
.an-fx{display:flex;justify-content:space-between;font-size:13px;color:var(--mut);margin-top:10px}
.an-fx span{width:64px;text-align:center}
.an-toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.an-tgsw{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative}
.an-tgsw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff}

/* ================= FOUNDER EYE-GATE 2026-07-20 — P2 batch-1 (20 frames) ==========
   Authority for this lane = the APPROVED DESIGN SYSTEM (tokens + eye-passed P1
   frames); the Figma original supplies content/IA only. Appended as overrides so
   design-system.css stays +N/-0 under the marker law. */

/* [1] Courses flag = the BRAND ARROW MARK in orange, not a drawn glyph. Recoloured
   by CSS filter — the sanctioned path (colour is the permitted arrow variant), and
   unlike mask: it survives file://, which is how the founder gates. Filter solved
   to the original's measured ink #EF8A43 (exact, dist 0.00). */
.crs-arr{display:inline-flex;align-items:center;margin-top:4px}
.crs-arrmk.mk-arrow{filter:brightness(0) saturate(100%) invert(64%) sepia(64%) saturate(1850%) hue-rotate(333deg) brightness(103%) contrast(88%)}

/* [4] Match ring on the unlocked profile was a fat donut: .mr-ring grew to 92px but
   .mr-pct stayed at the base 42px, giving a 25px stroke against the system's 7-11px.
   The system's hole/outer ratio is a constant ~0.75 (56/42, 74/56, 84/62) — 92 x .75
   = 69, stroke 11.5px, in line with every other progress ring. Number scales with
   the hole (jdo-lg is 22px in a 62px hole) so it doesn't read lost in the middle. */
.up-ringwrap .mr-pct{width:69px;height:69px;font-size:24px}

/* [5] Send-job-invite modal opens with a full-width tinted card instead of a heading,
   so the shared 34px top padding let the close X land on the card's top-right corner.
   Original clears it with 64px; X position itself was already correct. */
.ls-modal.sji{padding-top:64px}

/* [6] Verification mark = badge-check OUTLINE, per the canonical treatment (founder
   ruling event 26, 2026-07-17). Was a filled circle. Green = verified, muted = not;
   the glyph is constant so colour alone carries state. */
.ct-vb{width:18px;height:18px;border-radius:0;background:none;color:var(--up)}
.ct-vb.g{background:none;color:var(--mut-2)}
.ct-vb svg{width:18px;height:18px}

/* ---- AUTHORITY REWORK 2026-07-20 (the 3 items whose only justification was the
   original, a premise the founder rejected). Authority = eye-gated passed frames. */

/* [R1] COMPACT 5-ACROSS STAT TILE. The 21px number was measured off the original,
   not derived. The system ALREADY HAS a 5-across compact stat tile — .pjd-tile
   (repeat(5,1fr), gap 14): number 26px font-head/800, label 14px, radius 12,
   padding 16/18. That is the system's own answer to "a stat tile that must fit
   five across", so the Analytics KPI + performance-metrics tiles take its
   geometry and type scale, keeping the neutral white .tile skin (the pjd colour
   variants encode pipeline status, which these do not carry).
   The 5-across fit constraint is real and still binds — it fixes the WIDTH at
   (1254-4*14)/5 = 239.6px — but it never forced a smaller type scale: 26px
   "9,800" + delta measures ~138px inside 203px of usable width. */
.an-kpis{gap:14px}
.an-kpi{border-radius:12px;padding:16px 18px}
.an-kn{font-size:26px}
.an-klb{font-size:14px;color:var(--ink)}
.an-pm-tile{border-radius:12px;padding:16px 18px}

/* [R2] PAGER: private bare-arrow .ct-pg/.crs-pg retired in favour of the approved
   .pager/.pg boxed cells (consumed from lib.pager / lib.pager_cells). Courses keeps
   its centred multi-page layout — 14 pages is a different job from a 5-row table —
   but takes the system's cell. Only the layout wrapper is local now. */
.crs-pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:34px}
.crs-pager .pg.dots{border:none;color:var(--mut-2)}

/* [R3] MATCH RINGS now name their tier via match_ring()'s own .mr-lab, so the
   private .ls-mlabel / .up-ringlab are gone. Scale .mr-lab to the size those
   labels held in each context (base .mr-lab is 12px, tuned for the 56px ring). */
.ls-c1 .mr-lab{font-size:14.5px}
.up-ringwrap .mr-lab{font-size:16px;font-weight:700}

/* [R3-fix 2026-07-20] Ring LABELS take the registry's own size, not the sizes of
   the private labels they replaced. Founder rule: consistency with the approved
   frames wins. .ls-c1 was carrying .ls-mlabel's 14.5px and .up-ringwrap was
   carrying .up-ringlab's 16px/700 — both inherited from components that no longer
   exist. The registry is 12px/600, and .jdo-lg (84px, the largest approved ring)
   deliberately keeps that base label, so a large ring + 12px label IS the approved
   pairing. Label text stays tier-named in the tier's colour: that part already
   matches the 300+ (24 blue "Ideal match" / 3 green "Strong match"), and the
   founder confirmed the blue=Ideal / green=Strong mapping is correct. */
.ls-c1 .mr-lab{font-size:12px;font-weight:600}
.up-ringwrap .mr-lab{font-size:12px;font-weight:600}

/* ==================== P2 BATCH-2 · Employer / Screening ====================
   Layout-only glue. Every component is consumed from the registry: .tabs/.tab,
   .dtable, .ct-search bar, .pager, .overlay/.modal, .field/.inp/.sel-chev,
   .ewz-radio, .ls-chip. Nothing here re-implements an approved component. */
.sc-q{color:var(--ink)}
.sc-act{display:flex;align-items:center;gap:18px;color:var(--mut)}
.sc-act .k{display:flex;color:var(--mut)}
.ct-search .sc-add{padding:0 26px;display:flex;align-items:center;gap:10px;flex:none}
.sc-modal{width:668px;padding:34px 38px 30px}
.sc-modal h3{margin:0 0 26px}
.sc-modal .field{margin:0 0 22px}
.sc-rolef .sc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.sc-rchip{padding:7px 14px;font-size:14.5px;color:var(--ink);gap:9px}
.sc-rchip svg{color:var(--mut)}
.sc-ta{min-height:57px;align-items:flex-start;padding:16px}
.sc-opts{margin-top:16px}
.sc-opt{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--ink);padding:8px 0}
.sc-opt.ph{color:var(--mut-2)}
.sc-optx{margin-left:auto;color:var(--mut);display:flex}
.sc-hint{color:var(--ink);font-size:15px;margin-top:14px}
.sc-btnrow{display:flex;justify-content:flex-end;margin-top:8px}

/* ================= P2 BATCH-2 · Employer / Live recruiters ==================
   Layout glue only. Consumed from the registry: .breadcrumb, .dtable, .pill,
   .an-kpis/.an-kpi (approved compact stat tile), .pager, .kv, .jcard/.jc-*,
   .jd-chip, .ct-search bar, .btn. Avatars = assets/lr-avatars/* extracted 1:1
   from these originals. */
.lg-intel{background-image:url(reflogo-intel.png)!important}
.lr-av{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:none}
.lr-nm{color:var(--brand);font-weight:500}
.lr-act{display:flex;align-items:center;gap:18px;color:var(--mut)}
.lr-act .k{display:flex}
.lr-sh{font-size:22px;margin:26px 0 18px}
.lr-sort{display:inline-flex;color:var(--mut-2);margin-left:4px;vertical-align:middle}
.lr-job{color:var(--brand)}
.lr-days{display:inline-flex;align-items:center;gap:7px;color:var(--mut)}
.lr-yn{display:flex;gap:10px}
.lr-yn .y,.lr-yn .n{width:34px;height:34px;border:1.5px solid var(--line);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--mut)}
.lr-yn .n{color:#D9534F;border-color:#F0C0C0}
.lr-file{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);margin-top:6px}
.lr-file.inline{margin:0}
.lr-file .pdf{width:22px;height:26px;border-radius:4px;background:#E8443A;color:#fff;font-size:8px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
/* detail pages: main column + 316px rail, matching the originals' split */
.lr-grid{display:grid;grid-template-columns:1fr 316px;gap:34px;align-items:start}
.lr-hd{display:flex;gap:22px;align-items:flex-start;margin-bottom:8px}
.lr-bigav{width:96px;height:96px;border-radius:12px;object-fit:cover;flex:none}
.lr-hdmain{flex:1;min-width:0}
.lr-nmrow{display:flex;align-items:center;gap:14px}
.lr-nmrow h1{font-family:var(--font-head);font-size:30px;font-weight:800;margin:0}
.lr-role{font-size:17px;color:var(--ink);margin-top:8px}
.lr-loc{font-size:15px;color:var(--mut);margin-top:6px}
.lr-contact{display:flex;gap:26px;margin-top:12px;font-size:15px;color:var(--ink)}
.lr-contact span{display:inline-flex;align-items:center;gap:8px}
.lr-contact svg{color:var(--brand)}
.lr-hdacts{display:flex;gap:12px;flex:none}
.lr-appr,.lr-rej{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line);
  border-radius:12px;padding:0 24px;font-size:16px;font-weight:600;color:var(--ink);background:#fff}
.lr-appr{color:#2FA85E;border-color:#B7E0C6}
.lr-rej{color:var(--ink)}
.lr-side{background:var(--tint-panel);border-radius:14px;padding:24px;margin-bottom:22px}
.lr-side h4{font-family:var(--font-head);font-size:20px;font-weight:800;margin:0 0 18px}
.lr-side .kv{margin:0 0 18px}
.lr-side .kv .k{font-size:14px}
.lr-side .kv .v{font-size:16px}
.lr-alog{display:flex;gap:12px;margin-bottom:18px}
.lr-alav{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.lr-alog b{display:block;font-size:15px}
.lr-alog span{display:block;font-size:14px;color:var(--mut)}
.lr-alog .t{font-size:13px;margin-top:3px}
/* timeline: reuses the .jds-timeline rail idea, scoped to the request rail */
.lr-tl{position:relative}
.lr-tlstep{display:flex;gap:12px;position:relative;padding-bottom:22px}
.lr-tlstep:not(:last-child)::before{content:"";position:absolute;left:10px;top:24px;bottom:2px;
  width:2px;background:var(--line)}
.lr-tlm{width:22px;height:22px;border-radius:50%;border:2px solid var(--mut-2);flex:none;
  display:flex;align-items:center;justify-content:center;background:#fff;z-index:1;color:transparent}
.lr-tlm.on{background:#2FA85E;border-color:#2FA85E;color:#fff}
.lr-tlstep b{display:block;font-size:15px}
.lr-tlstep span{display:block;font-size:14px;color:var(--mut)}
.lr-about{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 4px}
.lr-about a{color:var(--brand)}
.lr-specs{display:flex;flex-wrap:wrap;gap:10px}
.lr-exp{display:flex;gap:16px;margin-bottom:22px}
.lr-exp .jc-logo{width:38px;height:38px;border-radius:9px}
.lr-exco{font-size:15px;color:var(--mut)}
.lr-exrole{font-size:16px;font-weight:700;color:var(--ink);margin-top:2px}
.lr-exrole span{font-weight:400;font-size:14.5px;color:var(--mut);margin-left:10px}
.lr-exd{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:6px}
.lr-exd a{color:var(--brand)}
.lr-openh{display:flex;align-items:center;justify-content:space-between}
.lr-viewall{color:var(--brand);font-size:15px;font-weight:600}
.lr-jcard{margin-bottom:18px}
.lr-jmeta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.lr-jchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:8px;padding:7px 12px;font-size:14px;color:var(--mut)}

/* ============ P2 BATCH-2 · Employer/Interview — DURING INTERVIEW ============
   NEW SURFACE CLASS. 1444x996, no portal chrome, full-bleed dark video stage.
   No founder-approved frame is a dark video surface, so the dark values below are
   INTERPRETIVE and flagged for the gate — everything else (glyphs, type scale,
   radii, the red Leave token) comes from the registry, and all four participant
   videos are extracted 1:1 into assets/iv-video (labels/mic/active-border are
   re-rendered as chrome here, never baked into the pixels). */
.di-frame{background:#000;display:flex;flex-direction:column;overflow:hidden}
.di-strip{display:flex;gap:8px;justify-content:center;padding:16px 0 8px;flex:none}
.di-tile{position:relative;width:168px;height:112px;border-radius:8px;overflow:hidden;
  border:2px solid transparent;background:#101012}
.di-tile.on{border-color:#3DD16E}          /* active speaker, per the original */
.di-tile img{width:100%;height:100%;object-fit:cover;display:block}
.di-tnm{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;
  padding:5px 8px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.di-tnm .m{display:flex;color:#fff}
.di-tnm .m.off{color:#F4776B}
.di-body{flex:1;display:flex;gap:12px;padding:6px 20px 0;min-height:0}
.di-stagewrap{flex:1;min-width:0;display:flex}
.di-stage{flex:1;border-radius:10px;overflow:hidden;background:#0B0B0D}
.di-stage img{width:100%;height:100%;object-fit:cover;display:block}
.di-bar{display:flex;align-items:center;padding:14px 28px 20px;flex:none;position:relative}
.di-cgroup{display:flex;gap:14px;margin:0 auto}
.di-cgroup.right{margin:0;position:absolute;right:28px;gap:26px}
.di-ctl{display:flex;flex-direction:column;align-items:center;gap:7px}
.di-btn{width:44px;height:44px;border-radius:10px;background:#111114;display:flex;
  align-items:center;justify-content:center;color:#fff}
.di-ctl.leave .di-btn{background:#F26057}
.di-cl{font-size:12.5px;color:#D6D8DE}
.di-cgroup.right .di-btn{background:transparent}
/* side panels — interpretive: the original narrows the stage rather than floating */
.di-panel{width:362px;flex:none;background:#17181B;border-radius:10px;padding:20px 22px;
  color:#fff;overflow:hidden}
.di-ph{display:flex;align-items:center;font-size:17px;font-weight:700;margin-bottom:16px}
.di-px{margin-left:auto;color:#9AA0AC;display:flex}
.di-qs{list-style:none;margin:0;padding:0}
.di-qs li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:#E4E6EB;
  padding:11px 0;border-bottom:1px solid #23252A}
.di-qs .n{color:#9AA0AC;flex:none}
.di-parts{list-style:none;margin:0;padding:0}
.di-parts li{display:flex;align-items:center;gap:12px;padding:10px 0}
.di-parts img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.di-parts b{display:block;font-size:15px;font-weight:600}
.di-parts span{display:block;font-size:13.5px;color:#9AA0AC}
.di-pm{margin-left:auto;color:#D6D8DE;display:flex}
.di-pm.off{color:#F4776B}

/* ============ FOUNDER GATE FEEDBACK — batch-2 round 1 (2026-07-20) ============ */

/* [2/7] Contact verify marks: GREEN, matching .up-verd on the APPROVED Unlocked
   profile (`.up-verd{color:var(--up)}`) — the same profile-header pattern. These
   were rendering var(--brand) blue. The originals show a filled BLUE seal here,
   but the approved frames and the founder's 2026-07-17 event-26 ruling both put
   the canonical verification mark at a GREEN badge-check OUTLINE, and the founder
   re-affirmed that for Saved candidates this session. Approved frames win. */
.lr-contact svg{color:var(--up)}

/* [4/5] Approve/Reject and the row yes/no are ONE SEGMENTED control in the
   originals (joined cells, shared border), and only the decision actually taken is
   lit. Everything else stays neutral — a lit cell means a decision was made. */
.lr-seg,.lr-yn{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;gap:0}
.lr-seg .lr-sgc{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;
  font-size:16px;font-weight:600;color:var(--ink-2);background:#fff}
.lr-seg .lr-sgc+.lr-sgc{border-left:1.5px solid var(--line)}
.lr-seg .lr-sgc svg{color:var(--mut)}
.lr-seg .lr-sgc.ok{background:#EAF7EE;color:#2FA85E}
.lr-seg .lr-sgc.ok svg{color:#2FA85E}
.lr-seg .lr-sgc.bad{background:#FDECEC;color:#D9534F}
.lr-seg .lr-sgc.bad svg{color:#D9534F}
.lr-yn .y,.lr-yn .n{width:38px;height:34px;border:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;color:var(--mut);background:#fff}
.lr-yn .n{border-left:1.5px solid var(--line);color:var(--mut)}
.lr-yn .y.on{background:#EAF7EE;color:#2FA85E}
.lr-yn .n.on{background:#FDECEC;color:#D9534F}

/* [6] Timeline mark = the REGISTRY's sealed success badge (round green + white
   check, --ok-ink) rather than a hand-rolled ring, per founder. Pending step keeps
   the original's grey info circle. Connector is green between completed steps. */
.lr-tlb{width:22px;height:22px;border-radius:50%;background:var(--ok-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;z-index:1;line-height:0}
.lr-tlb svg{display:block}
.lr-tlb.pend{background:#E3E6EC;color:var(--mut)}
.lr-tlstep.done:not(:last-child)::before{background:var(--ok-ink);opacity:.55}

/* [1] During-Interview questions panel is an ACCORDION, not a numbered list. */
.di-qs li{display:block;padding:14px 0;border-bottom:1px solid #23252A}
.di-qh{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:600;
  line-height:1.45;color:#fff}
.di-qh svg{margin-left:auto;flex:none;color:#9AA0AC;margin-top:3px}
.di-qa{font-size:14px;line-height:1.6;color:#B9BEC8;margin-top:10px}

/* [6-fix] The timeline badge was losing to `.lr-tlstep span` (0,1,1 beats 0,1,0),
   which forced display:block + color:var(--mut) onto it — that is exactly why the
   check rendered grey and off-centre. Scoped high enough to win, and matched to
   the APPROVED sealed badge on Candidate/Profile completion success: solid
   var(--ok-ink) disc, white check-circle glyph, optically centred. */
.lr-tlstep span.lr-tlb{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--ok-ink);color:#fff;
  flex:none;z-index:1;font-size:0}
.lr-tlstep span.lr-tlb svg{display:block;width:14px;height:14px}
.lr-tlstep span.lr-tlb.pend{background:#E3E6EC;color:var(--mut)}

/* ===== VERIFICATION BADGE — glyph + scale unification (2026-07-20, founder-approved)
   The elected mark (GATE-LEDGER event 26) is the green OUTLINE badge-check — the
   SCALLOPED rosette — and the approved set renders it at 24px (160 of 175 marks).
   Three consumers were pinning it smaller via CSS, which the svg attribute cannot
   override. Badge rules ONLY; no layout, colour or spacing touched. */
.up-verd svg{width:24px;height:24px}      /* was pinned 17px by .up-contact svg */
.ct-vb{width:24px;height:24px}
.ct-vb svg{width:24px;height:24px}        /* was pinned 18px */

/* ========== P2 BATCH-2 · the 9 remaining Employer/Interview frames ==========
   Layout glue only. Consumed from the registry: .cv-* calendar (approved), .modal/
   .overlay, .field/.inp/.sel-chev, .tabs/.tab.active, .dtable, .ct-search, .pager,
   .breadcrumb, .btn/.btn-primary, .sc-* (Screening table/modal), .jd-chip.
   Photos are the 1:1 extractions in assets/iv-video + refav-*. */

/* --- post-interview feedback popup (2 states) --- */
.cv-pop-fb .cv-pop-acts{justify-content:flex-end}
.cv-pop-sec{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.cv-pop-sec p{margin:0 0 14px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.cv-pop-btn{padding:0 22px;height:44px;display:inline-flex;align-items:center}
.cv-pop-out{padding:0 20px;height:42px;display:inline-flex;align-items:center;
  border:1.5px solid #C7D6FB;border-radius:12px;color:var(--brand);font-weight:600;background:#fff}

/* --- submit-feedback modal --- */
.fb-modal{width:668px;padding:32px 36px 28px}
.fb-cand{background:var(--tint-panel);border-radius:12px;padding:16px 18px;margin-bottom:24px}
.fb-cand b{display:block;font-size:16px;color:var(--ink)}
.fb-cand span{display:block;font-size:14.5px;color:var(--mut);margin-top:4px}
.fb-modal h3{margin:0 0 20px}
.fb-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:22px}
.fb-rate{padding-right:18px}
.fb-rate+.fb-rate{border-left:1px solid var(--line);padding-left:18px}
.fb-lb{font-size:14.5px;font-weight:700;margin-bottom:10px}
.fb-stars{display:flex;gap:6px;color:#C9CDD6}
.fb-ta{min-height:104px;align-items:flex-start}
.fb-btnrow{display:flex;justify-content:flex-end;margin-top:6px}

/* --- waiting room --- */
.wr-modal{width:660px;padding:30px 34px 32px}
.wr-h{font-size:24px;margin:0 0 12px}
.wr-date{display:flex;align-items:center;gap:10px;font-size:15.5px;color:var(--ink);margin-bottom:20px}
.wr-date svg{color:var(--ink-2)}
/* The extracted still is VIDEO ONLY — the original's name label, kebab and control
   buttons are re-rendered as chrome below, never baked into the pixels (the first
   extraction included them and everything doubled). Clean band is short, so cover-fit
   it to the stage the original uses. */
.wr-stage{position:relative;border-radius:12px;overflow:hidden;margin-bottom:20px;
  background:#0B0B0D;height:392px}
.wr-stage img{width:100%;height:100%;object-fit:cover;display:block}
.wr-nm{position:absolute;left:18px;top:16px;color:#fff;font-size:16px}
.wr-kb{position:absolute;right:16px;top:14px;color:#fff;display:flex}
.wr-vctl{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:14px}
.wr-vctl span{width:48px;height:44px;border:1.5px solid rgba(255,255,255,.75);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:#fff}
.wr-vctl .off{background:#FCE9E7;border-color:#FCE9E7;color:#E0554A}
.wr-self{position:absolute;right:16px;bottom:16px;width:48px;height:44px;
  border:1.5px solid rgba(255,255,255,.75);border-radius:10px;display:flex;
  align-items:center;justify-content:center;color:#fff}
.wr-sels{display:flex;gap:12px;margin-bottom:20px}
.wr-sel{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--line);border-radius:12px;padding:12px 0;font-size:15.5px;
  color:var(--ink)}
.wr-sel svg{color:var(--ink-2)}
.wr-join{width:100%;justify-content:center;height:54px;display:flex;align-items:center;font-size:17px}

/* --- post interview (summary / transcript) --- */
.pi-grid{display:grid;grid-template-columns:1fr 506px;gap:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:#fff;height:717px}
.pi-left{padding:24px 26px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.pi-h{font-family:var(--font-head);font-size:20px;font-weight:800}
.pi-sub{font-size:14.5px;color:var(--mut);margin:6px 0 18px}
.pi-video{position:relative;border-radius:10px;overflow:hidden;background:#0B0B0D}
.pi-video img{width:100%;height:auto;display:block}
.pi-pbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:50%;background:rgba(20,22,28,.62);color:#fff;display:flex;align-items:center;
  justify-content:center}
.pi-pbtn svg{margin-left:3px}
.pi-bar{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:20px;color:var(--mut)}
.pi-t{font-size:13.5px}
.pi-sp{font-size:13.5px;margin-left:auto}
.pi-c{display:flex;color:var(--mut)}
.pi-play{width:34px;height:30px;border-radius:8px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center}
.pi-play svg{margin-left:2px}
.pi-right{display:flex;flex-direction:column;min-width:0}
.pi-tabs{padding:20px 26px 0;margin:0}
.pi-tabs .tab{font-size:16px;padding-bottom:14px}
.pi-body{padding:20px 26px 26px;overflow-y:auto;flex:1;min-height:0}
/* the mock DRAWS its scrollbar; --hide-scrollbars in the render pipeline means a
   real one can never paint. Measured off the original: 9px thumb, 222px tall,
   top y279 (7px under the tabs rule), right edge 24px inside the card. */
.pi-right{position:relative}
.pi-sb{position:absolute;top:66px;right:24px;width:9px;height:222px;border-radius:5px;
  background:#D2D6DF;z-index:2}
.pi-sec{margin-bottom:22px}
.pi-sec h5{font-size:15.5px;font-weight:700;margin:0 0 10px}
.pi-sec p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin:0}
.pi-search{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 16px;color:var(--mut-2);font-size:15.5px;margin-bottom:18px}
.pi-tr{display:flex;gap:12px;margin-bottom:18px}
.pi-tr img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.pi-trh{display:flex;align-items:center;gap:8px;font-size:14.5px}
.pi-trh .d{color:var(--mut-2)} .pi-trh .t{color:var(--brand)}
.pi-tr p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:4px 0 0}

/* --- add interview question modal (answer field is taller) --- */
.iq-ta{min-height:118px;align-items:flex-start;padding:16px}

/* --- interview availability --- */
.av-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.av-h{font-family:var(--font-head);font-size:20px;font-weight:800;margin:0 0 6px}
.av-h2{margin-top:28px;padding-top:26px;border-top:1px solid var(--line)}
.av-p{font-size:14.5px;color:var(--mut);margin:0 0 16px}
.av-rows{padding-bottom:22px;margin-bottom:6px}
.av-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.av-d{width:40px;font-size:15.5px;color:var(--ink);flex:none}
.av-mid{width:320px;display:flex;align-items:center;gap:12px;flex:none}
.av-t{border:1.5px solid var(--line);border-radius:10px;padding:11px 16px;font-size:15px;min-width:104px}
.av-to{color:var(--mut);font-size:14.5px}
.av-un{color:var(--mut);font-size:15px}
.av-add{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.av-x{color:var(--mut-2);display:flex;width:18px;flex:none}
.av-datebtn{border:1.5px solid #C7D6FB;color:var(--brand);border-radius:12px;padding:0 22px;
  height:46px;display:inline-flex;align-items:center;font-weight:600;background:#fff}
.av-sel{max-width:100%}
.av-wk{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.av-wkh{display:flex;align-items:center;gap:14px;padding:16px 18px}
.av-wkt{font-family:var(--font-head);font-size:19px;font-weight:800}
.av-nav{display:flex;gap:10px;color:var(--mut);margin-left:auto}
.av-cols{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.av-gut{width:60px;flex:none;border-right:1px solid var(--line)}
.av-col{flex:1;text-align:center;padding:12px 0;font-size:14px;color:var(--ink);
  border-right:1px solid var(--line)}
.av-col:last-child{border-right:none}
.av-pill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  border-radius:6px;background:var(--brand);color:#fff;font-size:13px;margin-left:6px}
.av-body{display:flex;position:relative}
.av-hrs{width:60px;flex:none;border-right:1px solid var(--line)}
.av-hr{height:34px;position:relative}
.av-hr span{position:absolute;right:8px;top:-8px;font-size:12.5px;color:var(--mut)}
.av-plot{flex:1;position:relative;background:
  repeating-linear-gradient(to bottom,transparent 0 33px,var(--line-2) 33px 34px),
  repeating-linear-gradient(to right,transparent 0 calc(14.2857% - 1px),var(--line) calc(14.2857% - 1px) 14.2857%)}
.av-slot{position:absolute;width:calc(14.2857% - 10px);margin-left:5px;border-radius:6px;
  background:#EEF3FF;border:1px solid #C9D8FB}
.av-slot.booked{background:var(--brand);border-color:var(--brand)}
.av-leg{display:flex;gap:22px;padding:14px 18px;font-size:14px;color:var(--ink)}
.av-leg span{display:inline-flex;align-items:center;gap:8px}
.av-k{width:14px;height:14px;border-radius:4px;background:#EEF3FF;border:1px solid #C9D8FB;display:inline-block}
.av-k.bk{background:var(--brand);border-color:var(--brand)}

/* ===== P2 batch-2 GATE ROUND 3 overrides (founder 2026-07-20) — append-only ===== */
/* Post-Interview player bar: its own full-width page section directly above the
   footer (line above; the line below IS the footer's top rule), timestamp left,
   control cluster centred on the page. Replaces the in-card .pi-bar row. */
.pi-pagebar{flex:none;height:62px;display:flex;align-items:center;padding:0 48px;
  border-top:1px solid var(--line);position:relative;color:var(--mut)}
.pi-pagebar .pi-t{font-size:13.5px}
.pi-ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:26px}
/* R4: the ORIGINAL centres the PLAY BUTTON itself on the page (measured play
   cx=988.5 vs content centre 989), not the cluster's bounding box. The flanking
   pairs must therefore be equal width: back/fwd are both 20px icons, so pinning
   the '1x' label to the download icon's 20px makes the row symmetric about the
   play button. */
.pi-ctr .pi-sp{width:20px;display:flex;justify-content:center}
.pi-ctr .pi-sp{margin-left:0}
/* With the bar out of the card, 695px is the exact fit for the 1052 canvas:
   1052 - 113 topbar - 40 pad - 38 breadcrumb - 40 pad - 62 bar - 64 footer. */
.pi-grid{height:695px}
/* Transcript scrollbar: starts flush under the search bar and lives in the card's
   right padding band (right:5px, as measured in the original: thumb x1604-1612 vs
   card edge 1617) so it can never cover text. Summary keeps the base .pi-sb. */
.pi-tx .pi-sb{top:123px;right:5px}
/* Availability: the original splits the screen with a vertical rule at DEAD CENTRE
   (x=842 = 1684/2, measured y250-1331). Columns 434px/1fr + 54px gap put the rule
   at exactly content-left 381 + 434 + 27 = 842 and the calendar at 869 (original:
   870). The rule spans the full two-column block. */
.av-grid{grid-template-columns:434px 1fr;gap:54px;position:relative}
.av-grid::before{content:"";position:absolute;left:461px;top:0;bottom:0;width:1px;
  background:var(--line)}

/* ===== P2 batch-2 GATE ROUND 4 overrides (founder 2026-07-20) — append-only ===== */
/* R4-1 NO GAP: in the original the card runs all the way DOWN to the player bar's
   rule (measured: card side borders and the full-width rule meet at y900, no card
   bottom border, no rounded bottom, no white gap). The card therefore FILLS the
   content box and the bar's top rule IS the card's bottom edge. */
.content.pi-fill{display:flex;flex-direction:column;padding-bottom:0}
.pi-fill .pi-grid{flex:1;min-height:0;height:auto;border-bottom:0;
  border-radius:14px 14px 0 0}
/* R4-2 SCROLL COLUMN: the scrollbar owns its own slither of a column — a 1px
   divider running from the top of the scroll region to the card bottom, thumb
   centred in the strip. Measured original: divider x1600 / thumb x1604-1612 /
   card edge x1616 => 16px column, 3px + 4px around a 9px thumb. .pi-list IS the
   scroll region, so the divider needs no per-frame offset. */
.pi-body{display:flex;flex-direction:column}
.pi-search{flex:none}
.pi-list{position:relative;flex:1;min-height:0}
.pi-sbcol{position:absolute;top:0;bottom:-26px;right:-9px;width:1px;
  background:var(--line-2);z-index:2}
.pi-list>.pi-sb{top:0;right:-22px}
.pi-tx .pi-list>.pi-sb{top:6px}   /* original: thumb starts 6px below the divider */
/* R4-3 CALENDAR LONGER: hour pitch 34 -> the original's measured 58px. Rows,
   gridlines and slots all scale from AV_ROW in the builder, so every slot keeps
   the row relationship the founder already passed. */
.av-hr{height:58px}
.av-plot{background:
  repeating-linear-gradient(to bottom,transparent 0 57px,var(--line-2) 57px 58px),
  repeating-linear-gradient(to right,transparent 0 calc(14.2857% - 1px),var(--line) calc(14.2857% - 1px) 14.2857%)}

/* ===== P2 BATCH-3 — Employer: Screening assessments · Immigration =====
   Activity log is deliberately ABSENT from this block: it consumes the approved
   `.al-*` timeline component (authored for Admin/Activity Log, eye-passed)
   verbatim — same markup, employer shell, three filters instead of four. The
   first cut of this batch re-authored that component under the same class names
   and collided with it; consuming it is both the registry law and the fix.
   Prefix note: the candidate-side assessment-TAKING screens already own `.as-*`,
   so these employer assessment-LIBRARY bits take `.asm-*`.
   Geometry measured off each frame's own original; every surface, ink and radius
   is an existing registry token — no new colours. */
.asm-skills{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}
.asm-table td:nth-child(3){white-space:nowrap}
.asm-f{margin:0 0 22px}
.asm-name{color:var(--ink)}
.asm-chips{margin-top:14px}
.asm-qh{margin:30px 0 18px}
.asm-empty{min-height:430px}
.asm-addq{margin-top:26px;height:56px;border-radius:12px;font-size:17px;gap:10px}
/* --- Immigration: the job cell is a link over a muted location line; the
   candidate cell is the approved avatar+name pair. --- */
.im-loc{color:var(--mut);font-size:14px;margin-top:4px}
.im-cand{display:flex;align-items:center;gap:12px}

/* --- P2 batch-3 · Live Recruiter auth (4 frames) -------------------------------
   Consumes the approved Affiliate auth shell wholesale; only the band image, the
   band tone and two card rects are Live-Recruiter-specific.
   Band = each frame's OWN original pixels (make_band_assets_lr.py, per-frame
   watermark law) over the measured #2D54C8; .wm-fig is inset:0 so its background
   colour covers the affiliate grey underneath.
   Card rects MEASURED off the LR originals: sign in x855 y261 668x618 and sign up
   x855 y187 668x766 are IDENTICAL to the approved affiliate rects, so those two
   reuse .g-signin/.g-signup values verbatim; verify and success sit a few px
   apart and carry their own. */
.wm-fig.b-lrsignin{background-image:url(band-lr-signin.png);background-color:#2D54C8}
.wm-fig.b-lrsignup{background-image:url(band-lr-signup.png);background-color:#2D54C8}
.wm-fig.b-lrverify{background-image:url(band-lr-verify.png);background-color:#2D54C8}
.wm-fig.b-lrsuccess{background-image:url(band-lr-success.png);background-color:#2D54C8}
/* GATE R1+R2 (founder 2026-07-21), the two CENTRED frames only. The mock insets
   its app ~40px inside the export canvas, so raw pixels inherited that inset and
   the arrow field sat 58px off our left border AND 58px off the bottom, where the
   original keeps an even 17/19/18 on left/top/bottom. Their band assets are
   therefore cropped to the ORIGINAL'S OWN APP RECT (1604x883) and the
   background-size above scales them back out to 1684x923 — so every margin scales
   with the pattern and stays even, and the arrows land ~5% bigger.
   The crop lives in make_band_assets_lr.py, not in CSS: the PNGs carry an ICC
   profile and the browser colour-manages them while a CSS colour is not, so any
   area left to background-color shows as a seam.
   Sign in / sign up PASSED — their assets are byte-identical and untouched. */
.authcard.g-lrsignin{left:855px;top:133px;width:668px;min-height:618px}
.authcard.g-lrsignup{left:855px;top:59px;width:668px;min-height:766px}
.authcard.g-lrverify{left:597px;top:222px;width:489px;min-height:440px;
  text-align:center;padding:52px 40px}
.authcard.g-lrsuccess{left:597px;top:215px;width:489px;min-height:454px;
  text-align:center;padding:52px 40px}

/* ---- Live Recruiter portal rail (new 5th portal shell) ------------------------
   Same rail component as every other role; only the palette differs, set as
   local token overrides so .rail-item / .rail-item.active need no new rules.
   MEASURED from Live Recruiter/Other Actions/Menu.png: rail #2D54C8 (the same
   brand blue as the LR auth band), inactive label #C2CDEA, active pill #E0E8FB
   with INK-dark text — note the active ink is ink, not the brand blue the
   employer rail uses, because the pill already sits on blue. */
.rail.lr{background:#2D54C8;--rail-mut:#C2CDEA;--rail-active-bg:#E0E8FB;--rail-active-ink:#1D1D1F}
.rail.lr .rail-wm{background:#507AEE}
/* the LR account dropdown is the first to carry a real logo tile rather than a
   letter tile — .pm-av already clips, this just fits the mark inside it. */
.pm-av img{width:100%;height:100%;object-fit:contain;display:block}
/* LR onboarding: step 1's foot carries a single DISABLED Save & continue (its
   original — the flow cannot go back from step 1); the overview step's About box
   is the taller textarea variant; the redirect countdown highlights its number. */
.lr-save{background:#F2F3F7;color:var(--mut-2);border:1px solid #E6E9F2;font-weight:600}
.lr-ta{min-height:118px;align-items:flex-start;padding-top:16px}
.lr-redirect b{color:var(--brand);font-weight:600}
.authcard.g-lrprofileok{left:597px;top:275px;width:489px;min-height:335px;
  text-align:center;padding:52px 40px}
.wm-fig.b-lrprofileok{background-image:url(band-lr-profileok.png);background-color:#2D54C8}
.lr-otp{justify-content:flex-start}
/* ---- gate batch-4 r1 (founder 2026-07-21) --------------------------------
   1. Account button pressed state. Every role's Other Actions/Menu ORIGINAL
   draws a NEUTRAL tile behind the account glyph while the popup is open —
   measured #F5F5F7, not the brand tint .hot carried (that rule shipped unused:
   zero frames referenced .hot). The tile is also the alignment datum: the
   popup's right edge sits on the tile's right edge, and both land on the
   topbar's 40px inline padding, so no offset is needed on .pmenu. */
.topbar-icons .tb-btn.hot{background:#F5F5F7}
/* 2. LR onboarding step connector. The LR and Employer originals both draw it
   as a 1px hairline #67BC6E CENTRED ON THE NUMBER BADGE, floating clear of the
   boxes at both ends; .cwiz-body's border-left instead pinned a 2.5px --up rule
   to the card's left edge, running box to box. Redrawn as a rule at the badge
   centre: .cwiz-hd's 24px inline padding + half the 28px .cwiz-num = 38px.
   Gaps 12px — the originals' 18/19px carried through their own ~1.49x type
   scale (verified on a shared string: 'About the company' 288px wide there vs
   193px here), which the badge-relative reading independently confirms.
   The rule needs a gutter to sit in, so the body indents to clear it. The
   original sets that indent by ALIGNING BODY CONTENT WITH THE ACCORDION HEADER
   TITLE — measured there at ink x236 for the title against x236/x237 for the
   body h3 and first label, with the connector alone in the gutter. That
   alignment is scale-free, so it transfers where raw px cannot: .cwiz-hd's 24px
   inline padding + the 28px .cwiz-num + its 14px gap = 66px. Scoped to .lrwiz:
   founder ruled batch-4 frames only, so Employer Step 13-18 keep the old
   treatment. */
.lrwiz .cwiz-body{position:relative;border-left:0;padding-left:66px}
.lrwiz .cwiz-body::before{content:"";position:absolute;left:38px;top:12px;bottom:0;
  width:1px;background:#67BC6E}
/* ---- batch-5: Live Recruiter Jobs + Analytics ----------------------------
   1. LR job header. A recruiter works across employers, so the LR originals of
   Posted Job Details lead with the EMPLOYER's logo and name where the employer
   frames name the person who posted. Tile is the registry .jc-logo (56px), the
   instance already used 36x in approved frames — the original's own tile is
   62px on a mock whose text measures ~5% larger than ours, so 56px is the
   system's answer to the same size rather than a new one. */
.pjd-brand{display:flex;align-items:flex-start;gap:12px}
.pjd-brand .jc-logo{background-size:cover;background-position:center}
.pjd-bmain{min-width:0;flex:1}
/* 2. Share-access card. Same .pjd-meta skin and same .es-t title this column
   already gives "Priority placement"; the toggle is the registry .switch in its
   off state. Sits above the meta card, per the original. */
.pjd-share{margin-bottom:20px}
.pjd-shareh{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pjd-share p{color:var(--ink-2);font-size:14.5px;line-height:1.5;margin:10px 0 0}
/* 3. Analytics page-level company picker. The employer's Analytics heading is a
   bare h1; the LR frames put a company selector opposite it, reusing the .an-sel
   control every chart card on this page already carries. */
.an-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.an-cosel{min-width:168px;justify-content:space-between}
/* ---- batch-6: LR Share-access confirm modal ------------------------------
   Only a live recruiter shares a job with an employer, so this frame has no
   employer twin. Registry .modal + .btn pair; the original centres its copy and
   splits the footer into two equal buttons (measured: card 507px wide, buttons
   filling the inner width at 53px tall, Cancel outline then Share primary). */
.lr-share-modal{width:520px;text-align:center}
.lr-share-modal h3{margin:6px 0 14px}
/* max-width buys the original's LINE BREAK, not its column width — measured, the
   two differ: the mock sets 403px of text on line 1, but our glyphs run narrower
   (58 chars in 422px against its 48 in 403px), so honouring its column would pull
   "with the" up onto line 1 and break in a different place. The break is the part
   anyone actually sees, so that is what this matches: after "job", as the original. */
.lr-share-modal p{color:var(--ink-2);font-size:15.5px;line-height:1.55;
  max-width:360px;margin:0 auto 26px}
.lr-share-acts{display:flex;gap:14px}
.lr-share-acts .btn{flex:1;justify-content:center;height:48px}
/* ---- P2-N1a: Company Verification (EM-006) — NEW frames on the .eauth-light card ----
   Content from the brief's acceptance criteria; treatment = the approved Claim-company
   card + tokens. .ver-* are frame-local; fields/buttons/pills come from the registry. */
.ver-note{display:flex;gap:10px;align-items:flex-start;background:var(--brand-tint);border-radius:12px;
  padding:14px 16px;color:var(--ink-2);font-size:14px;line-height:1.5;margin-bottom:24px}
.ver-note svg{color:var(--brand);flex:none;margin-top:1px}
.ver-link{color:var(--brand);font-weight:600;font-size:14.5px}
.ver-foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:8px}
.ver-foot .grow{margin-right:auto}
/* frame 3 — verification status checklist */
.ver-check{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:24px}
.ver-row{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);font-size:15px}
.ver-row:last-child{border-bottom:0}
.ver-row .ver-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.ver-ico.ok{background:var(--ok-bg);color:var(--ok-ink)} .ver-ico.wait{background:var(--warn-bg);color:var(--warn-ink)}
.ver-row .ver-lb{font-weight:600;color:var(--ink)} .ver-row .pill{margin-left:auto}
/* frame 4 — failed error card + remediation list */
.ver-fail{display:flex;gap:14px;background:var(--bad-bg);border:1px solid #F0C0C0;border-radius:14px;padding:18px 20px;margin-bottom:24px}
.ver-fail svg{color:var(--bad-ink);flex:none;margin-top:1px}
.ver-fail .ver-ft{font-weight:800;color:var(--bad-ink);font-family:var(--font-head);margin-bottom:3px}
.ver-fail .ver-fr{color:var(--ink-2);font-size:14.5px;line-height:1.5}
.ver-remedy-h{font-weight:700;font-size:15px;margin:0 0 12px}
.ver-remedy{list-style:none;margin:0 0 26px;padding:0}
.ver-remedy li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;color:var(--ink-2);font-size:15px;line-height:1.5;border-top:1px solid var(--line)}
.ver-remedy li:last-child{border-bottom:1px solid var(--line)}
.ver-remedy li svg{color:var(--brand);flex:none;margin-top:2px}
/* frame 5 — global suspended banner over the (locked) company profile */
.susp-banner{display:flex;align-items:flex-start;gap:16px;background:var(--bad-bg);border:1px solid #F0C0C0;border-radius:14px;padding:18px 22px;margin-bottom:22px}
.susp-banner svg{color:var(--bad-ink);flex:none;margin-top:2px}
.susp-main{flex:1;min-width:0}
.susp-banner .susp-t{font-weight:800;color:var(--bad-ink);font-family:var(--font-head)}
.susp-banner .susp-reason{color:var(--bad-ink);font-size:14px;font-weight:600;margin-top:3px}
.susp-banner .susp-d{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.susp-banner .susp-acts{margin-left:auto;align-self:center;display:flex;gap:12px;flex:none}
/* ---- P2-N1a state variants: field error (from input-states.html) + form-level alerts ---- */
.field.err .inp{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.10)}
.field .err-msg{color:#E5484D;font-size:13px;margin-top:8px;display:flex;align-items:center;gap:6px}
.field .err-msg svg{flex:none}
.field .inp .fpill{margin-left:auto;flex:none}
.ver-alert{display:flex;gap:10px;align-items:flex-start;background:var(--bad-bg);border:1px solid #F0C0C0;
  border-radius:12px;padding:14px 16px;color:var(--bad-ink);font-size:14px;line-height:1.5;margin-bottom:24px}
.ver-alert svg{flex:none;margin-top:1px}
.ver-warn{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border:1px solid #EAD9A8;
  border-radius:12px;padding:14px 16px;color:var(--warn-ink);font-size:14px;line-height:1.5;margin-bottom:24px}
.ver-warn svg{flex:none;margin-top:1px;color:var(--warn-ink)}
.ver-ico.bad{background:var(--bad-bg);color:var(--bad-ink)}

.mini-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;opacity:.75;margin-right:6px;vertical-align:-2px}
/* ---- P2-N1a frame 6: AI job-draft generator (EM-020) — two-pane inputs | editable draft ---- */
.aid-cols{display:grid;grid-template-columns:352px 1fr;gap:26px;align-items:start;margin-top:6px}
.aid-panel{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:#fff}
.aid-panel h4{font-family:var(--font-head);font-weight:800;font-size:16px;margin:0 0 3px}
.aid-panel .aid-psub{color:var(--mut);font-size:13.5px;margin:0 0 20px}
.aid-tone{display:flex;gap:8px;margin-top:2px}
.aid-tone span{flex:1;text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:9px 0;font-size:14px;color:var(--ink-2);font-weight:600}
.aid-tone span.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand)}
.aid-gen{width:100%;justify-content:center;margin-top:4px}
.aid-genhint{color:var(--mut);font-size:13px;text-align:center;margin-top:10px}
.aid-draft{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.aid-draft-top{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--line);background:var(--soft)}
.aid-badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px}
.aid-badge svg{color:var(--brand)}
.aid-draft-top .link{font-size:14px;display:inline-flex;align-items:center;gap:6px}
.aid-body{padding:6px 22px 18px}
.aid-sec{padding:17px 0;border-bottom:1px solid var(--line-2)}
.aid-sec:last-child{border-bottom:0}
.aid-sec-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:9px}
.aid-sec-h .aid-edit{color:var(--mut);display:inline-flex;gap:5px;align-items:center;font-size:13px;font-weight:600}
.aid-sec p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.aid-sec ul{margin:0;padding-left:20px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.aid-sec li{margin-bottom:5px}
.aid-note{display:flex;gap:9px;align-items:center;color:var(--mut);font-size:13px;margin:16px 2px 0}
.aid-note svg{flex:none;color:var(--brand)}
.aid-foot{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:24px}
/* draft-pane state overlays (loading / empty / error / clarify) */
.aid-state{padding:64px 40px;text-align:center;color:var(--mut)}
.aid-state .aid-si{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--brand-tint);color:var(--brand)}
.aid-state h4{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);margin:0 0 6px}
.aid-state p{margin:0 auto;max-width:360px;font-size:14px;line-height:1.55}
.aid-skel{height:13px;border-radius:6px;background:linear-gradient(90deg,#EEF0F5,#F5F6FA,#EEF0F5);margin:10px 0}
/* ---- P2-N1b 7a: Interested Applicants (EM-021/022 reframed) ----
   The employer-facing half of the candidate-paid Express Interest signal. No
   "boost"/"paid" language: the employer sees enthusiasm, never a transaction.
   Built on the approved .pjd-* Posted Job Details skin; these are the additions. */
/* Review fix: filters and sorts were four identical chevron pills, so nothing said
   which was which, and the toggle (a FILTER) sat on the sort row. Filters + toggle
   now share one row; the sort group is labelled and its options carry no chevron,
   because each option IS the sort, not a menu that opens one. */
.ia-filt{align-items:center;margin-bottom:12px}
.ia-filt .ia-tog{margin-left:8px}
.ia-ctrls{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.ia-sortlab{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink-2)}
/* Review fix: sort chips matched the filter pills in height, border and radius, so
   the two groups read as one family. The sorts are now ONE joined segmented control
   with a single outer border and internal dividers, so it is structurally a
   different control from a row of separate filter pills before any label is read. */
.ia-sorts{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ia-sorts .select{border:none;border-radius:0;border-right:1px solid var(--line)}
.ia-sorts .select:last-child{border-right:none}
.ia-tog{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.ia-sorts{display:flex;gap:10px}
.ia-sec{border:1px solid #9DBEF3;border-radius:var(--r-card);background:linear-gradient(150deg,#EAF1FF 0%,#F7F9FF 100%);padding:36px 24px 8px;margin-bottom:26px}
.ia-sec-h{display:flex;align-items:center;gap:11px}
.ia-sec-h h3{font-family:var(--font-head);font-weight:800;font-size:17px;margin:0;color:var(--ink)}
.ia-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:13px;font-weight:700}
.ia-info{position:relative;display:inline-flex;color:var(--mut)}
/* review fix: the tooltip opened BELOW its trigger and painted over the combined-
   ranking sentence. It now opens to the RIGHT, where the header row is short and
   nothing sits, and carries a caret so it reads as anchored to the trigger. The
   caret is scoped to .ia-tt — shared .an-tt stays tail-less (founder-ruled). */
.ia-tt{top:50%;left:calc(100% + 16px);transform:translateY(-50%);width:290px;line-height:1.45;color:var(--ink-2);text-align:left;z-index:3}
.ia-tt::after{content:"";position:absolute;left:-6px;top:50%;margin-top:-6px;width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
/* review fix: `.select.on` is used on approved frames but has NO rule anywhere in
   this stylesheet, so an "active" sort chip rendered identical to an inactive one.
   A global rule would move approved frames, so the active state is scoped here. */
.ia-sorts .select.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-press);font-weight:700}
.ia-count-line{color:var(--mut);font-size:14px;margin:0 0 14px}
/* review fix: the open tooltip sat 3px off this paragraph. The extra top margin
   gives the right-anchored tooltip real clearance instead of hairline crowding. */
.ia-rank{color:var(--ink-2);font-size:14px;line-height:1.5;margin:0 0 18px;max-width:760px}
.ia-sec .pjd-app{border-bottom-color:#CFDFFA}
.ia-sec .pjd-app:last-child{border-bottom:none}
.ia-note{display:flex;gap:9px;align-items:flex-start;color:var(--brand-press);font-size:13.5px;line-height:1.5;font-weight:600;margin-top:12px;max-width:860px}
.ia-note svg{flex:none;margin-top:2px;color:var(--brand)}
.ia-when{display:inline-flex;align-items:center;gap:5px;margin-left:14px;color:var(--mut)}
.ia-when svg{flex:none}
.ia-allh{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);margin:0 0 6px}
.ia-allh span{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:var(--r-pill);background:var(--neu-bg);color:var(--neu-ink);font-size:13px;font-weight:700;font-family:var(--font-body)}
/* treatment B: the same section as a right-column widget */
.ia-widget{margin-top:0;margin-bottom:20px}
.ia-widget .ia-sec-h h3{font-size:16px}
.ia-wnote{color:var(--mut);font-size:13px;line-height:1.45;margin:9px 0 14px}
.ia-wrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.ia-wav{width:38px;height:38px;border-radius:50%;flex:none;background-size:cover}
.ia-wmain{min-width:0;flex:1}
.ia-wmain b{display:block;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia-wsub{display:flex;align-items:center;gap:5px;color:var(--mut);font-size:12.5px;margin-top:2px}
.ia-wsub svg{flex:none}
/* review fix: interactive blue in the row-end action slot read as a BUTTON.
   A static indicator takes the muted ink instead. */
.ia-wmsg{color:var(--mut);flex:none}
.ia-wall{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px}
/* the new-interest notification. Review fix: it was the same pale blue as the
   Priority-placement promo card and the interested section, so a NOTICE read as a
   third promo. It is now a white card with a brand accent bar — the one element on
   the page that is white-on-accent, which is what makes it read as an event. */
.ia-notif{display:flex;align-items:center;gap:14px;border:1px solid #9DBEF3;border-left:4px solid var(--brand);border-radius:var(--r-card);background:var(--brand-tint);padding:16px 20px;margin-bottom:16px}
.ia-notif>svg{flex:none;color:var(--brand)}
.ia-nmain{flex:1;min-width:0}
.ia-nmain b{font-size:14.5px;color:var(--ink)}
.ia-nsub{color:var(--ink-2);font-size:13.5px;margin-top:3px}
.ia-nx{color:var(--mut);flex:none;display:inline-flex}
/* backend-gap flag — states plainly that a screen is not wired yet.
   Review fix: --warn-ink on --warn-bg measured 4.25:1, under AA for body text, which
   made the most important warning on the page the least legible text on it. The icon
   keeps --warn-ink; the sentence runs at --ink-2 on the same amber (about 10:1). */
.gapflag{display:flex;align-items:flex-start;gap:10px;border:1px solid #F0DCA8;border-radius:var(--r-field);background:var(--warn-bg);color:var(--ink-2);font-size:13.5px;line-height:1.5;padding:13px 16px;margin-bottom:20px}
.gapflag svg{flex:none;margin-top:1px;color:var(--warn-ink)}
.gapflag span{font-weight:600}
/* ---- P2-N1b 7b: Express Interest copy alignment (candidate side) ----
   The message field now shows its 300-character cap and the PDF's confirmation
   line. Row sits under the textarea: confirmation left, counter right. */
.ei-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}
.ei-meta .ei-help{margin:0;flex:1}
.ei-count{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums;flex:none;padding-top:1px}
/* review fixes on the express-interest variants */
.ei-addcard-sp{margin-bottom:20px}
/* the sent message, shown read-only: real ink, not placeholder grey, and no
   editable affordance (the compose state kept a placeholder here, which read as
   "you were charged and your message was lost") */
.ei-sent{color:var(--ink-2);font-size:14.5px;line-height:1.55;min-height:0;padding-bottom:15px!important;background:#F5F6FA;border-color:transparent}
.ei-added{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ok-ink);margin:14px 0 16px}
.ei-added svg{color:var(--up);flex:none}
/* once the application is completable the footer action is live, not muted */
.ei-submit.ready{background:var(--brand);color:#fff}
/* ROOT CAUSE (found in review, P2-N1b 7b): the elected field treatment is written as
   `.field .inp` — a DESCENDANT selector. The express-interest message field is
   `.ei-ta-wrap > .inp`, with no `.field` ancestor, so it inherits NOTHING: no border,
   no radius, no padding, no min-height. It renders as placeholder text floating on
   bare white, while the Cover letter field 900px below it in the same drawer IS
   inside a `.field` and so is correctly bordered. Two identical controls, two
   treatments, one panel. Scoped to `.ei-fielded` so the approved Express Interest
   4/5/6 frames stay byte-identical; the underlying bug is raised for the founder. */
.ei-fielded .inp{border:1.5px solid #DDE2F0;border-radius:12px;padding:16px;font-size:16px;color:var(--ink);background:#fff}
.ei-fielded .inp.ph{color:var(--mut-2)}
/* counter gets its own right-aligned row directly under the field. Sharing a row with
   the confirmation line made it read as part of that sentence: "...increase your
   chances of 0 / 300". */
.ei-countrow{display:flex;justify-content:flex-end;margin-top:5px}
.ei-meta{display:block;margin-top:15px}
.ei-meta .ei-help{margin:0}
/* the sent message, read-only. It was inheriting the unstyled .inp above, so its text
   sat flush against the fill edge with square corners next to a padded, rounded twin. */
.ei-sent{background:#F5F6FA;border:none;border-radius:12px;padding:18px 20px!important;color:var(--ink-2);font-size:14.5px;line-height:1.55;min-height:0;display:block}
.ei-sentlab{font-size:13px;font-weight:700;color:var(--mut);margin:16px 0 8px}
/* the outcome leads the box, on a success surface rather than the same neutral grey
   as the message it sits next to */
.ei-paid.ei-lead{background:var(--ok-bg);color:var(--ok-ink);margin:14px 0 0}

.ei-msglab{font-size:13px;font-weight:700;color:var(--ink-2);margin:16px 0 8px}
/* review catch: the settled success box wore the identical blue as the live Submit
   button, signalling interactivity on a container that holds no controls. */
.ei-box.ei-settled{border-color:var(--line)}
/* ---- P2-N1b frame 8: Google Jobs feed status (admin-only, EM-015) ---- */
.gj-tiles{margin-bottom:20px}
.gj-muted{opacity:.55}
.gj-acts{display:flex;align-items:center;gap:16px;white-space:nowrap}
.gj-act{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:13.5px}
.gj-act svg{flex:none}
.gj-err{color:var(--bad-ink)}
.gj-table td{vertical-align:middle}
.gj-open td{background:var(--bad-bg)}
.gj-errrow td{padding:0!important;background:var(--bad-bg)}
.gj-errbox{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 22px;border-top:1px solid #F3CFCF}
.gj-errbox>svg{flex:none;color:var(--bad-ink);margin-top:1px}
.gj-errmain{flex:1;min-width:0}
.gj-errmain b{font-size:14.5px;color:var(--bad-ink)}
.gj-errmain p{margin:6px 0 14px;color:var(--ink-2);font-size:13.5px;line-height:1.55;max-width:820px}
.gj-errbtn{background:#fff}
.gj-errx{color:var(--mut);flex:none;display:inline-flex}
.gj-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#EEF0F5,#F5F6FA,#EEF0F5)}
.gj-state{padding:60px 40px;text-align:center;color:var(--mut)}
.gj-state .gj-si{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--brand-tint);color:var(--brand)}
.gj-state h4{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);margin:0 0 6px}
.gj-state p{margin:0 auto;max-width:420px;font-size:14px;line-height:1.55}
.gj-off{display:flex;align-items:center;gap:14px;border:1px solid #F0DCA8;border-left:4px solid var(--warn-ink);border-radius:var(--r-card);background:var(--warn-bg);padding:16px 20px;margin-bottom:18px}
.gj-off>svg{flex:none;color:var(--warn-ink)}
.gj-off .btn{flex:none}
/* frame 8 review fixes */
/* "Submitted" tile matched the neu/grey pill in the table but was lavender up top,
   showing one status in two colours on one screen. */
.pjd-tile.t-neu{border-color:#D3D7E0;background:#F5F6FA}
.pjd-tile.t-neu b{color:var(--neu-ink)}
.gj-tskel{width:44px;height:22px;border-radius:6px;margin-bottom:6px}
/* feed switched off: the STALE treatment belongs on the data, not on the summary tiles */
.gj-stalenote{display:flex;align-items:center;gap:9px;color:var(--mut);font-size:13.5px;margin:0 0 12px}
.gj-stalenote svg{flex:none}
.gj-act-off{color:var(--mut-2);font-weight:600}
.gj-act-off.gj-err{color:var(--mut-2)}
/* the Error pill sat on a row whose highlight is the same pink, so it lost its chip.
   On a highlighted row it draws on white with its own outline. */
.gj-open .pill.bad{background:#fff;box-shadow:inset 0 0 0 1px #EDB6B3}
/* an actionable off-state must not look like the standing amber build caveat directly
   under it: white card + dark rail, so hierarchy reads state first, caveat second */
.gj-off{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ink);box-shadow:var(--sh-soft)}
.gj-off>svg{color:var(--ink)}

/* the kebab keeps its own column: the extra View-error action on the error row was
   pushing it 114px right of where it sits on every other row */
.gj-acts>svg:last-child{margin-left:auto}
/* loading skeleton mirrors the real row's structure so columns and row height match */
.gj-skrow td{height:76px}
.gj-sk2{margin-top:7px}
.gj-sklogo{width:26px;height:26px;border-radius:7px;background:#EEF0F5;flex:none}

/* ROOT CAUSE of the cross-state column drift: the table was content-driven, so the
   skeleton's bar widths, not the real data's, decided where every column landed —
   6 of 7 columns sat 27 to 119px right of their loaded positions and the page
   visibly jumped on load. Fixed layout pins the columns for EVERY state. */
.gj-table{table-layout:fixed}
.gj-table th:nth-child(1),.gj-table td:nth-child(1){width:126px}
.gj-table th:nth-child(2),.gj-table td:nth-child(2){width:309px}
.gj-table th:nth-child(3),.gj-table td:nth-child(3){width:135px}
.gj-table th:nth-child(4),.gj-table td:nth-child(4){width:131px}
.gj-table th:nth-child(5),.gj-table td:nth-child(5){width:126px}
.gj-table th:nth-child(6),.gj-table td:nth-child(6){width:134px}
/* the skeleton numeral chip must occupy the numeral's line box, or the tiles are
   6px shorter while loading and everything below shifts up */
.gj-tskel{height:26px;margin-bottom:8px}
/* the kebab kept the live near-black while its neighbours greyed out */
.gj-acts-off svg:last-child{color:var(--mut-2)}
/* ---- P2-N1b frames 9 + 10: Resume Score (EM-025) + AI Shortlist (EM-028) ----
   Built on the approved Candidates pipeline table. Score labels/colours come from the
   locked lib._MR_LEVELS tiers via match_tier(), never hardcoded. */
.rs-cols{display:grid;grid-template-columns:1fr 372px;gap:24px;align-items:start}
.rs-main{min-width:0}
.rs-score{display:block;line-height:1.25}
.rs-score b{font-family:var(--font-head);font-size:19px;font-weight:800;display:block}
.rs-tier{display:block;font-size:12.5px;font-weight:700;margin-top:1px}
.rs-low{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--warn-ink);background:var(--warn-bg);border-radius:var(--r-pill);padding:2px 8px}
.rs-na{display:inline-flex;flex-direction:column;color:var(--mut);font-size:14px;font-weight:700}
.rs-na svg{color:var(--warn-ink)}
.rs-nasub{font-size:11.5px;font-weight:600;color:var(--mut);margin-top:2px}
.rs-why{color:var(--brand);font-weight:600;font-size:13.5px;white-space:nowrap}
.rs-why.on{background:var(--brand-tint);border-radius:8px;padding:5px 9px}
.rs-openrow td{background:var(--brand-tint)}
.rs-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#EEF0F5,#F5F6FA,#EEF0F5)}
.rs-sk2{margin-top:7px}
.rs-skav{width:36px;height:36px;border-radius:50%;background:#EEF0F5;display:inline-block;flex:none}
.rs-skrow td{height:82px}
.rs-state{padding:62px 40px;text-align:center;color:var(--mut)}
.rs-state .rs-si{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--brand-tint);color:var(--brand)}
.rs-state h4{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);margin:0 0 6px}
.rs-state p{margin:0 auto;max-width:420px;font-size:14px;line-height:1.55}
/* the rationale drawer */
.rs-drawer{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-card);padding:22px 24px}
.rs-dh{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.rs-dtitle{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink)}
.rs-dsub{color:var(--mut);font-size:13px;margin-top:3px}
.rs-dx{color:var(--mut);flex:none;display:inline-flex}
.rs-dscore{display:flex;align-items:baseline;gap:10px;margin:16px 0 0}
.rs-dscore b{font-family:var(--font-head);font-size:34px;font-weight:800}
.rs-dscore .rs-tier{display:inline;font-size:14px}
.rs-dnote{display:block;color:var(--mut);font-size:12.5px;line-height:1.55;margin:10px 0 0}
.rs-dnote svg{color:var(--brand);vertical-align:-3px;margin-right:4px}
.rs-dsec{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-2);margin:22px 0 12px}
.rs-f{margin-bottom:15px}
.rs-fh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs-fn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.rs-fn svg{flex:none}

.rs-fv{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;flex:none}
.rs-fbar{height:6px;border-radius:3px;background:var(--line-2);margin:7px 0 5px;overflow:hidden}
.rs-fbar span{display:block;height:100%;border-radius:3px}
.rs-fbar .ok{background:var(--bar-fill)}
.rs-fbar .bad{background:#E9B4B1}
.rs-fnote{color:var(--mut);font-size:12.5px;line-height:1.45}
.rs-dfoot{display:flex;gap:12px;margin-top:22px}
.rs-dfoot .btn{flex:1;justify-content:center}
/* frame 10: the AI shortlist side panel */
.sl-panel{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);box-shadow:var(--sh-card);padding:22px 24px}
.sl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.sl-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink)}
.sl-title svg{color:var(--brand);flex:none}
.sl-sub{color:var(--mut);font-size:12.5px;line-height:1.5;margin-top:5px}
.sl-x{color:var(--mut);flex:none;display:inline-flex}
.sl-count{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-2);margin:20px 0 10px}
.sl-row{display:flex;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.sl-row .ct-av,.sl-row .rs-skav{width:36px;height:36px;border-radius:50%;flex:none}
.sl-rank{width:22px;font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--mut-2);flex:none;padding-top:8px}
.sl-rmain{flex:1;min-width:0}
.sl-rtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sl-rtop b{font-size:14.5px;color:var(--ink)}
.sl-score{font-size:12.5px;font-weight:700;flex:none;white-space:nowrap}
.sl-why{color:var(--ink-2);font-size:13px;line-height:1.5;margin-top:5px}
.sl-lowflag{display:flex;gap:8px;align-items:flex-start;background:var(--warn-bg);color:var(--ink-2);border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.45;margin-top:9px}
.sl-lowflag svg{flex:none;color:var(--warn-ink);margin-top:1px}
.sl-acts{display:flex;gap:9px;margin-top:11px}
.sl-acts .btn{padding:8px 14px;font-size:13.5px}
.sl-foot{display:flex;gap:12px;margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.sl-foot .btn{flex:1;justify-content:center}

/* frame 9/10 review fixes */
.rs-fn-ok svg{color:var(--up)}
.rs-fn-bad svg{color:var(--bad-ink)}
.rs-dmath{font-size:12.5px;font-weight:600;color:var(--mut);margin-top:6px}
.rs-req{color:var(--warn-ink)!important}
.ct-actions .ct-seg{flex:none}
.rs-why{margin-left:2px}
.sl-note{display:flex;gap:8px;align-items:flex-start;color:var(--ink-2);font-size:12.5px;line-height:1.45;background:var(--soft);border-radius:9px;padding:9px 11px;margin-top:14px}
.sl-note svg{flex:none;color:var(--brand);margin-top:1px}
/* the unreadable row is the SUBJECT of its own frame, so it is called out rather than
   merely hoisted to the top with no highlight */
.rs-narow td{background:var(--warn-bg)}
.rs-nacall{display:flex;gap:10px;align-items:flex-start;border:1px solid #F0DCA8;border-left:4px solid var(--warn-ink);border-radius:var(--r-field);background:var(--warn-bg);color:var(--ink-2);font-size:13.5px;line-height:1.5;padding:13px 16px;margin-bottom:18px}
.rs-nacall svg{flex:none;color:var(--warn-ink);margin-top:1px}

/* frames 9/10 round-2 review fixes */
/* a table beside a side panel must actually narrow, or it slides under it */
.rs-narrow{table-layout:fixed;width:100%}
.rs-narrow th:nth-child(1),.rs-narrow td:nth-child(1){width:19%}
.rs-narrow th:nth-child(2),.rs-narrow td:nth-child(2){width:13%}
.rs-narrow th:nth-child(3),.rs-narrow td:nth-child(3){width:19%}
.rs-narrow th:nth-child(4),.rs-narrow td:nth-child(4){width:12%}
.rs-narrow th:nth-child(5),.rs-narrow td:nth-child(5){width:12%}
/* Actions carries accept + reject + the explainer + overflow */
.rs-narrow th:nth-child(6),.rs-narrow td:nth-child(6){width:25%}
.rs-narrow .c,.rs-narrow .b,.rs-narrow .d{font-size:12.5px}
/* the overflow button gets its own right-hand slot so it stops drifting with
   whatever label precedes it */
/* SCOPED 2026-08-10 — founder ruling "scope and restore". These two shipped as BARE `.ct-actions`
   duplicates of the batch-1 rule at :3214 and silently overrode it, drifting the APPROVED frame
   Employer/Candidate/Candidates by 28,481px for 16 days while byte-identity stayed green.
   Narrowed to `.rs-table`: present on all 9 score/shortlist frames, absent from the approved frame.
   MEASURED — neutralising these returns Candidates to 0px, and the 9 frames genuinely need them
   (61,740px / 77,318px change without). Declared narrowing per frame-gates/DUPSEL-CONVENTION.md.
   Root class A-01, proofs/FRAME-LOOP.md §9. */
.rs-table .ct-actions{display:flex;align-items:center;gap:9px}
.rs-table .ct-actions .ct-kb{margin-left:auto}
.rs-narrow .ct-nm{white-space:normal}
/* the rank numeral IS the ranking on the low-confidence view, so it cannot be the
   lowest-contrast text in the panel (was 3.25:1) */
.sl-rank{color:var(--ink-2)}
.rs-dsec,.sl-count{color:var(--mut)}
/* amber ink on the amber surface measured 4.25:1, under AA */
.rs-low{color:var(--ink-2)}
.rs-narow .rs-req{color:var(--brand-press)!important}
.rs-low{white-space:nowrap;padding:2px 7px}
/* a visible break between the low-confidence group and the rest of the ranking */
.sl-grp{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:18px 0 2px;padding-top:14px;border-top:2px solid var(--line)}
.sl-grp1{border-top:none;padding-top:0;margin-top:14px}
/* ---- P2-N1b frames 11 + 12: Offer E-Sign (EM-057) + Signed Contract Vault (EM-058) ---- */
.es-sub{color:var(--mut);font-size:14.5px;margin-bottom:18px}
.es-counsel{display:flex;gap:10px;align-items:flex-start;border:1px solid #CFC3EC;border-left:4px solid var(--dv-purple);border-radius:var(--r-field);background:#F7F4FE;color:var(--ink-2);font-size:13.5px;line-height:1.5;padding:13px 16px;margin-bottom:20px}
.es-counsel svg{flex:none;color:var(--dv-purple);margin-top:1px}
.es-banner{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;margin-bottom:18px}
.es-banner>svg{flex:none;margin-top:1px}
.es-banner.es-ok{background:var(--ok-bg);border-color:#B7E0C6}.es-banner.es-ok>svg{color:var(--ok-ink)}
.es-banner.es-bad{background:var(--bad-bg);border-color:#F0C0C0}.es-banner.es-bad>svg{color:var(--bad-ink)}
.es-banner.es-info{background:var(--brand-tint);border-color:#9DBEF3}.es-banner.es-info>svg{color:var(--brand)}
.es-cols{display:grid;grid-template-columns:1fr 392px;gap:26px;align-items:start}
.es-left{min-width:0}
/* the document viewer */
.es-doc{border:1px solid var(--line);border-radius:var(--r-card);background:var(--soft);overflow:hidden}
.es-docbar{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line)}
.es-docname{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink)}
.es-docname svg{color:var(--mut);flex:none}
.es-doctools{display:inline-flex;align-items:center;gap:16px;color:var(--mut)}
.es-page{background:#fff;margin:26px;padding:44px 52px;box-shadow:var(--sh-card);position:relative}
.es-doch{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--ink)}
.es-docmeta{color:var(--mut);font-size:13px;margin:6px 0 26px}
.es-sec{margin-bottom:20px}
.es-sec h5{font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 5px}
.es-sec p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.es-sigline{display:flex;gap:44px;margin-top:38px}
.es-sigline>div{flex:1}
.es-sigrule{border-bottom:1px solid var(--ink);margin-bottom:7px;height:34px}
.es-sigline span{font-size:12.5px;color:var(--mut)}
.es-pageno{text-align:center;color:var(--mut);font-size:12.5px;padding-bottom:18px}
.es-stamp{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;font-weight:700}
.es-stamp-ok{background:var(--ok-bg);color:var(--ok-ink)}
.es-stamp-bad{background:var(--bad-bg);color:var(--bad-ink)}
.es-acts{display:flex;gap:12px;margin-top:18px}
/* right column cards */
.es-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);padding:20px 22px;margin-bottom:18px}
.es-cardh{font-family:var(--font-head);font-weight:800;font-size:15.5px;color:var(--ink);margin-bottom:4px}
.es-cardsub{color:var(--mut);font-size:12.5px;line-height:1.5;margin:0 0 14px}
.es-dts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.es-dt{border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--ink-2)}
.es-dt.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-press)}
.es-excl{display:flex;gap:9px;align-items:flex-start;background:var(--bad-bg);border-radius:10px;padding:11px 13px;color:var(--ink-2);font-size:12.5px;line-height:1.5}
.es-excl svg{flex:none;color:var(--bad-ink);margin-top:1px}
.es-party{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}
.es-pav{color:var(--mut-2);flex:none;display:inline-flex;margin-top:2px}
.es-pmain{flex:1;min-width:0}
.es-pmain b{font-size:14px;color:var(--ink)}
.es-prole,.es-pmail{color:var(--mut);font-size:12px;margin-top:2px}
.es-pst{flex:none;text-align:right}
.es-pwhen{color:var(--mut);font-size:11.5px;margin-top:5px}
.es-ev{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.es-ev b{font-size:13.5px;color:var(--ink)}
.es-evd{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;margin-top:5px}
.es-evm{color:var(--mut);font-size:11.5px;margin-top:2px}
.es-hash{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:11.5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.es-hash svg{flex:none;color:var(--up)}
.es-count{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 0 9px}
.es-count b{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--ink)}
.es-count span{color:var(--mut);font-size:12px}
.es-bar{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.es-bar span{display:block;height:100%;background:var(--bar-fill);border-radius:3px}
.es-expired{display:flex;gap:9px;align-items:flex-start;background:var(--bad-bg);border-radius:10px;padding:12px 13px;color:var(--ink-2);font-size:12.5px;line-height:1.5;margin:12px 0 14px}
.es-expired svg{flex:none;color:var(--bad-ink);margin-top:1px}
/* frame 12 */
.es-retain{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--soft);padding:16px 20px;margin-bottom:20px}
.es-retain b{display:block;font-size:14.5px;color:var(--ink)}
.es-retain span{color:var(--mut);font-size:13px}
.es-retain .btn{flex:none}
.es-vacts{display:flex;align-items:center;gap:14px}
.es-act{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:13.5px;white-space:nowrap}
.es-act svg{flex:none}
.es-vacts>svg:last-child{margin-left:auto}
.es-gone{color:var(--mut);font-size:13.5px;font-style:italic}
.es-expcall{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--mut);border-radius:var(--r-field);background:var(--soft);color:var(--ink-2);font-size:13.5px;line-height:1.5;padding:13px 16px;margin-bottom:20px}
.es-expcall svg{flex:none;color:var(--mut);margin-top:1px}
.es-si-bad{background:var(--bad-bg)!important;color:var(--bad-ink)!important}
.es-skrow td{height:70px}
/* frames 11/12 review fixes */
.es-sig{font-family:var(--font-head);font-size:21px;font-style:italic;color:var(--ink);display:block;padding:4px 0 2px}
.es-sigrule{display:flex;align-items:flex-end}
.es-pg{color:var(--mut);display:inline-flex;vertical-align:-5px}
.es-evh{font-variant-numeric:tabular-nums;color:var(--mut-2)}
.es-lock{display:flex;gap:8px;align-items:flex-start;color:var(--mut);font-size:12.5px;line-height:1.45;margin:0 0 12px}
.es-lock svg{flex:none;color:var(--up);margin-top:1px}
.es-dts-locked{margin-bottom:10px}
/* the vault table must keep one column grid across every state */
.es-vtable{table-layout:fixed;width:100%}
.es-vtable th:nth-child(1),.es-vtable td:nth-child(1){width:16%}
.es-vtable th:nth-child(2),.es-vtable td:nth-child(2){width:24%}
.es-vtable th:nth-child(3),.es-vtable td:nth-child(3){width:17%}
.es-vtable th:nth-child(4),.es-vtable td:nth-child(4){width:13%}
.es-vtable th:nth-child(5),.es-vtable td:nth-child(5){width:12%}
.es-gone{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:13.5px}
.es-gone svg{flex:none}


/* --- P2-S0 registry: the LOADING skeleton. New selectors, none of which
   already exist (checked at build time). A skeleton is the one state that
   cannot be composed from existing parts — P2-S0-SCOPE.md names creating
   these shared classes as this batch's deliverable. No animation: the
   determinism control refuses a frame whose render is not reproducible,
   and a shimmer would make every Loading row permanently NOT-RUNNABLE. */
.skel{padding:22px 0}
.skel-row{height:14px;border-radius:7px;background:linear-gradient(90deg,#EDF1F8 0%,#E3E9F4 50%,#EDF1F8 100%);margin:0 0 14px}
.skel-row.s-60{width:60%}
.skel-row.s-40{width:40%}
.skel-card{border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:14px}


/* --- P2-S0 registry: VALIDATION and PAGINATION edges.
   New selectors, every one checked against the file first. .field.err .inp was
   already ratified; .rte is the same treatment reaching a rich-text editor,
   which is what Post a job's fields actually are. .vsum is the form-level
   summary. .dis is the pager's disabled first/last arrow, which
   P2-S0-SCOPE.md records as never having been drawn. */
.field.err .rte{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.10)}
/* FOUNDER 2026-08-15. Ten form pages ended at their last field with no way to
   submit - measured: 20 form frames in the 133, 10 carried a primary action and
   10 carried none. `.form-acts` is that missing action row. `.btn-inert` is a
   NEW class, not the existing `.btn-disabled` (which is scoped to `.jsk-ready`
   and used by 4 other frames - widening it would have reached them). Inert is for
   states where the action is unavailable: Applied / Blocked / Ineligible. */
.form-acts{display:flex;gap:12px;margin-top:26px}
.btn.btn-inert{background:var(--soft);color:var(--mut);border-color:transparent}
.vsum{display:flex;align-items:flex-start;gap:12px;background:var(--bad-bg);border:1px solid #F0C0C0;border-radius:var(--r-card);padding:14px 18px;margin-bottom:20px}
.vsum b{display:block;font-size:14.5px;margin-bottom:2px}
.vsum ul{margin:4px 0 0;padding-left:18px;color:var(--ink-2);font-size:13.5px}
.pg.dis{opacity:.38;pointer-events:none}
.js-pager .pg-prev.dis,.js-pager .pg-next.dis{opacity:.38;pointer-events:none}