/* StayValid tokens — official Design System (see memory stayvalid-design-system). Fonts: Inter (body) +
   Playfair Display (headings). Phase A foundation: token/font/focus values from the DS; component
   sizing (button radius, card/table specs, type scale) is tuned per-area in the follow-on passes. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');
:root{
  /* DS semantic color tokens */
  --primary-dark:#1F2F1F;  /* primary CTA fill, nav, strong text */
  --primary:#2E4B2E;       /* primary actions, links, selected */
  --primary-light:#E7F1E4; /* soft backgrounds, selected surfaces, ghost button */
  --card:#FFFDF7;          /* card surface */
  /* greens (existing var names kept, remapped to DS so components using them re-theme) */
  --forest:#1F2F1F;      /* primary buttons, topnav (DS Primary Dark) */
  --forest-2:#16210E;    /* primary hover (darker) */
  --band:#2E4B2E;        /* context bar band */
  --green:#2E4B2E;       /* links (DS Primary) */
  --green-dark:#1F2F1F;  /* topnav */
  --accent:#6BA16B;      /* accent, links-on-light, focus (DS Accent) */
  --accent-lt:#B7CE97;   /* light accent on dark surfaces (wordmark) */
  /* neutrals */
  --ink:#1F1F1F;         /* Neutral Dark — body text */
  --bg:#FBFCFA;          /* Background — page */
  --surface:#FFFFFF;
  --border:#E6E9E6;      /* DS Border */
  --muted:#6B6F72;       /* Neutral Medium — secondary text */
  --neutral-light:#F2F4F3; /* DS Neutral Light — disabled, subtle surfaces */
  --shadow-card:0 8px 24px rgba(31,47,31,.06); --shadow-elev:0 4px 16px rgba(31,47,31,.08);
  /* DS raw status hues (for dots/icons) */
  --success:#4CAF50; --warning:#F5A623; --error:#D64545;
  /* status pills — DS backgrounds; text inks kept AA-accessible on those soft bgs */
  --ok-bg:#EAF5E8;   --ok-tx:#316A41;     /* Success / on track */
  --amber-bg:#FFF3DE; --amber-tx:#7C561B; /* Warning / expiring soon */
  --terra-bg:#F1E0D3; --terra-tx:#8C4A24; /* Due very soon / grace (no DS token; kept) */
  --red-bg:#FDE7E7;  --red-tx:#93362E;    /* Error / overdue */
  --info-bg:#E7EEF2; --info-tx:#426A7A;   /* Info / in review */
  --pill-bg:#EAF5E8; --pill-tx:#316A41;
  /* DS spacing — 8pt grid (4/8/12/16/20/24/32/40/48/64). Every gap/padding/margin uses these. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* DS radius — per component spec (input 8 / table 12 / card 16 / ghost 20 / button 24 / pill). */
  --r-input:8px; --r-table:2px; --r-card:2px; --r-ghost:20px; --r-btn:24px; --r-pill:999px;
  /* DS line-height ladder — headings tight, body 1.5, relaxed for prose blocks. */
  --lh-tight:1.2; --lh-snug:1.35; --lh-body:1.5; --lh-relaxed:1.6;
}
*{box-sizing:border-box}body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:var(--lh-body)}
/* Regular weight everywhere; emphasis comes from size and colour, not bold. Weight 500 is
   reserved for headings, controls, big numbers and the selected nav tab. Body <b> is de-bolded;
   it stays as a colour/structure hook, never heavier. */
b,strong{font-weight:400}
h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.01em;font-size:24px}
h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.01em;font-size:15px}
.kn,.kpi .kn,.ac-stats .st b,.pathcard h3{font-family:'Playfair Display',Georgia,serif;font-weight:500}
.topnav{background:var(--green-dark);color:#fff;padding:var(--sp-3) var(--sp-6);display:flex;align-items:center;gap:var(--sp-6)}
.brand{font-weight:500;font-size:18px}.brand .v{color:var(--accent-lt)}
.topnav nav a{color:rgba(255,255,255,.85);text-decoration:none;margin-right:var(--sp-4)}
.topnav nav a:hover{color:#fff}
.logout{margin-left:auto}.logout button{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-input);padding:var(--sp-1) var(--sp-3);cursor:pointer}
.logout button:hover{background:rgba(255,255,255,.1)}
.container{max-width:960px;margin:24px auto;padding:0 var(--sp-4)}
/* Inline highlight for an email address (activation/reset screens) — reads as a distinct code token. */
.email-chip{display:inline-block;background:var(--primary-light);color:var(--primary);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:2px var(--sp-2);border-radius:var(--r-input);word-break:break-all}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-6);margin-bottom:var(--sp-4);box-shadow:var(--shadow-card)}
label{display:block;font-size:13px;font-weight:500;margin:var(--sp-3) 0 var(--sp-1)}
/* :where() keeps this at element-specificity (0,0,1) so component rules like .emp-row input still win —
   :not() would raise it to (0,3,1) and silently override them (taller inputs, broken table rows). */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])),select,textarea{width:100%;padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,161,107,.22)}
/* DS accessibility: visible keyboard focus — 2px Accent outline, 2px offset. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--forest);color:#fff;border:none;border-radius:var(--r-btn);padding:var(--sp-3) var(--sp-6);font-weight:600;cursor:pointer;margin-top:var(--sp-4);min-height:44px}
button.primary:hover{background:var(--forest-2)}
table{width:100%;border-collapse:collapse}th{text-align:left;font-size:12px;color:var(--muted);padding:var(--sp-2)}td{padding:var(--sp-2);border-top:1px solid var(--border)}
/* Sticky table headers — the column header pins to the top of the viewport on whole-page scroll (just
   under the app top bar where one exists), so long rosters keep their labels; it releases once you scroll
   past the table. Offset auto-adapts: pages with a sticky .sv-top bar get 56px, wizard/onboarding gets 0. */
:root{--table-stick-top:0px}
body:has(.sv-top){--table-stick-top:56px}
thead th{position:sticky;top:var(--table-stick-top);z-index:3;background:var(--surface)}
.pill{display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);font-size:11px;font-weight:500;white-space:nowrap}
.pill.green{background:var(--pill-bg);color:var(--pill-tx)}.pill.amber{background:var(--amber-bg);color:var(--amber-tx)}.pill.terra{background:var(--terra-bg);color:var(--terra-tx)}.pill.red{background:var(--red-bg);color:var(--red-tx)}
.error{color:var(--red-tx);font-size:13px}
.checkbox-row{display:flex;align-items:center;gap:var(--sp-2);font-weight:400;margin:var(--sp-1) 0}
.checkbox-row input[type=checkbox]{accent-color:var(--forest);width:15px;height:15px;margin:0}
.step-type-card input[type=radio]{accent-color:var(--forest);width:15px;height:15px;margin:0 var(--sp-1) 0 0;vertical-align:middle}
/* context bar + workflow additions */
.topnav a.brand{color:#fff;text-decoration:none}
.topnav a.admin-link{color:var(--accent-lt)}
.ctxbar{display:flex;align-items:center;gap:var(--sp-2);background:var(--band);color:#fff;padding:var(--sp-2) var(--sp-6);font-size:13px;flex-wrap:wrap}
.pill.ctx{background:rgba(255,255,255,.18);color:#fff}
.ctxbar .switcher{margin-left:auto}
.ctxbar select{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-input);border:1px solid rgba(255,255,255,.4);background:#fff;color:var(--ink);font-family:inherit;font-size:12px;width:auto}
.ctx-resume{color:#fff;font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)}
@media(max-width:800px){.grid2,.grid3{grid-template-columns:1fr}}
/* mobile: let the top nav wrap to a second row instead of overflowing */
@media(max-width:720px){
  .topnav{flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding:var(--sp-2) var(--sp-4)}
  .topnav nav{order:3;flex-basis:100%;display:flex;flex-wrap:wrap;gap:var(--sp-3)}
  .topnav nav a{margin-right:0}
  .logout{margin-left:auto}
  .container{margin:16px auto;padding:0 var(--sp-3)}
  .card{padding:var(--sp-4)}
  .ctxbar{padding:var(--sp-2) var(--sp-4)}
  table{font-size:13px}
  th,td{padding:var(--sp-1)}
}
.pathcard{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-4);background:#fff;display:block;text-decoration:none;color:var(--ink)}
.pathcard:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(46,59,39,.08)}
.pathcard h3{margin:0 0 var(--sp-1)}
.pathcard p{color:var(--muted);font-size:13px;margin:0;line-height:var(--lh-body)}
/* ---- Onboarding wizard shell (left rail + cream canvas), per product design ---- */
.wiz{display:flex;align-items:flex-start;min-height:100vh}
/* Rail stays put; the content column determines page height and the window scrolls (CTA always reachable). */
.wiz-rail{width:280px;flex:none;background:var(--primary-light);border-right:1px solid var(--border);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-gutter:stable}
.wiz-brand{display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none}
.wiz-brand .wiz-shield{width:26px;height:27px;flex:none}
.wiz-brand .wiz-word{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.wiz-kicker{font-size:11px;letter-spacing:.14em;color:var(--muted);margin:var(--sp-2) 0 var(--sp-6) 2px}
.wiz-steps{display:flex;flex-direction:column;gap:2px}
/* Main steps break out of the rail padding so the selected/hover bar is full-bleed across the
   green rail (100% width). Sub-steps (.wiz-substeps) keep their own indent. */
.wiz-step{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);margin:0 calc(-1 * var(--sp-5));border-radius:0;text-decoration:none}
a.wiz-step{cursor:pointer}
a.wiz-step:hover{background:#fff}
a.wiz-step:hover .lbl{color:var(--ink)}
.wiz-step .n{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;border:1.5px solid var(--border);background:transparent;color:var(--muted)}
.wiz-step .lbl{font-size:14px;color:var(--muted);white-space:nowrap}
.wiz-step.done .n{background:var(--forest);border-color:var(--forest);color:#fff}
.wiz-step.done .lbl{color:var(--ink)}
.wiz-step.current{background:#fff}
.wiz-step.current .n{border-color:var(--forest);color:var(--ink)}
.wiz-step.current .lbl{color:var(--ink);font-weight:500}
.wiz-main{flex:1;min-width:0;background:var(--bg);padding:var(--sp-8) var(--sp-12)}
.wiz-inner{max-width:1080px}
.wiz-stepof{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-3)}
.wiz-h{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.01em;font-size:26px;line-height:var(--lh-tight);color:var(--ink);margin:0 0 var(--sp-2)}
.wiz-sub{font-size:15px;color:var(--muted);margin:0 0 var(--sp-5);line-height:var(--lh-body)}
/* account-type cards */
.wiz-cards{display:flex;flex-direction:column;gap:var(--sp-3)}
.wiz-card{border:1px solid var(--border);border-radius:var(--r-table);background:#fff}
.wiz-card:hover{border-color:var(--accent)}
.wiz-card:has(input[name="Input.AccountType"]:checked){border-color:var(--forest);background:var(--primary-light);box-shadow:inset 0 0 0 1px var(--forest)}
.wiz-card:has(input[name="Input.AccountType"]:checked) .ico{background:var(--forest);color:#fff}
.wiz-card-head{position:relative;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-12) var(--sp-5) var(--sp-5);cursor:pointer}
.wiz-card-head .ico{width:46px;height:46px;flex:none;border-radius:var(--r-table);background:#ECEAE1;display:flex;align-items:center;justify-content:center;color:#3B4632}
.wiz-card-head .ico svg{width:22px;height:22px}
.wiz-card-head .txt{display:block}
.wiz-card-head .txt .t{display:block;font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:var(--sp-1)}
.wiz-card-head .txt .d{display:block;font-size:13.5px;color:var(--muted);line-height:var(--lh-body)}
.wiz-card-head input[type=radio]{position:absolute;top:50%;right:20px;transform:translateY(-50%);width:18px;height:18px;accent-color:var(--forest);margin:0}
/* Kill the grey mouse-focus box on the radios; keep a ring for keyboard users (a11y). */
.wiz-card input[type=radio]:focus:not(:focus-visible){outline:none;box-shadow:none}
.wiz-card input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* PRO Firm follow-up (branch flag) — lives INSIDE the PRO Firm card, revealed when it's chosen */
.wiz-card-expand{border-top:1px solid var(--border);padding:var(--sp-4) var(--sp-5) var(--sp-4)}
.wiz-card-expand .q{font-size:14px;color:var(--ink);margin-bottom:var(--sp-3)}
.wiz-card-expand .opts{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.wiz-card-expand label{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:14px;color:var(--ink);cursor:pointer}
.wiz-card-expand input[type=radio]{width:16px;height:16px;accent-color:var(--forest);margin:0}
/* wizard forms */
.wiz-form .fld{margin-bottom:var(--sp-4)}
.wiz-form label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:var(--sp-1)}
.wiz-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.wiz-form .quick{font-size:12px;color:var(--accent);cursor:pointer;margin-left:var(--sp-2)}
.wiz-form .quick:hover{text-decoration:underline}
/* wizard intro (step 1, no rail) — clean standalone screen */
.wiz-intro{min-height:100vh;display:flex;flex-direction:column;background:var(--bg,#f6f6f4)}
.wiz-intro-top{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6)}
/* Top-anchored (not vertically centred) so expanding the PRO card pushes only the content below it —
   the heading and "Step 1 of 7" stay put instead of the whole block re-centring upward. */
.wiz-intro-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:8vh 24px 8vh}
.wiz-intro-inner{width:100%;max-width:760px}
.wiz-hint{display:block;font-size:12px;color:var(--muted);margin-top:var(--sp-1);line-height:var(--lh-snug)}
.wiz-form label .opt{font-weight:400;color:var(--muted);font-size:11px}
.wiz-form input[readonly]{background:var(--bg,#f6f6f4);color:var(--muted);cursor:default}
.wiz-check{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:12.5px;color:var(--muted);font-weight:400;cursor:pointer}
.wiz-check input{width:15px;height:15px;accent-color:var(--forest);margin:0}
@media(max-width:640px){.wiz-form .grid2{grid-template-columns:1fr}}
/* review summary */
.wiz-summary{border:1px solid var(--border);border-radius:var(--r-table);background:#fff;overflow:hidden;margin-bottom:var(--sp-2)}
.wiz-summary .row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--border)}
.wiz-summary .row:last-child{border-bottom:none}
.wiz-summary .kv{display:flex;flex-direction:column;gap:var(--sp-1)}
.wiz-summary .k{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.wiz-summary .v{color:var(--ink);font-size:15px}
.wiz-summary .sub{color:var(--muted);font-size:12px;line-height:var(--lh-body);margin-top:2px}
.wiz-summary .row .kv{min-width:0}
.wiz-summary .sub{overflow-wrap:anywhere}
.wiz-finish{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;background:var(--forest);color:var(--bg);border:none;border-radius:var(--r-btn);padding:var(--sp-4);font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:var(--sp-5)}
.wiz-finish:hover{background:var(--forest-2)}
.wiz-finish:disabled{opacity:.7;cursor:default}
.wiz-summary .e{color:var(--accent);font-size:13px;text-decoration:none}
.wiz-summary .e:hover{text-decoration:underline}
/* repeatable rows (docs / agencies / customers) */
.wiz-rows{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.wiz-rowcard{border:1px solid var(--border);border-radius:var(--r-table);background:#fff;padding:var(--sp-3) var(--sp-4)}
.wiz-rowgrid{display:grid;gap:var(--sp-2);align-items:end}
.wiz-empty{border:1px dashed var(--border);border-radius:var(--r-table);background:#fff;color:var(--muted);font-size:13px;padding:var(--sp-5);text-align:center}
.wiz-addbtn{display:inline-flex;align-items:center;gap:var(--sp-1);background:#fff;border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;font-family:inherit}
.wiz-addbtn:hover{border-color:var(--accent);color:var(--accent)}
.wiz-addbtn:focus:not(:focus-visible){outline:none}
.wiz-delrow{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:0 var(--sp-1)}
.wiz-delrow:hover{color:var(--red-tx)}
.wiz-static{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-input);background:var(--neutral-light);color:var(--ink);font-size:13px}
.wiz-rowcard.saved{border-color:var(--forest)}
.wiz-tag{display:inline-block;margin-left:var(--sp-2);padding:1px var(--sp-2);border-radius:var(--r-pill);background:var(--forest);color:#fff;font-size:11px;font-weight:500;vertical-align:middle}
.wiz-rowfoot{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.wiz-rowfoot .wiz-attach{margin-top:0}
.wiz-listhead{font-size:13px;font-weight:500;color:var(--ink);margin:var(--sp-1) 0 var(--sp-2)}
.wiz-empname{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
.wiz-empid{margin-left:var(--sp-2);font-size:12px;font-weight:400;color:var(--muted)}
.wiz-docline{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--border);font-size:13px}
.wiz-docline .dl-type{font-weight:500;color:var(--ink);min-width:180px}
.wiz-docline .dl-exp{color:var(--muted)}
.wiz-docline .dl-view{color:var(--accent);text-decoration:none;margin-left:auto}
.wiz-docline .dl-view:hover{text-decoration:underline}
.wiz-docline .dl-nofile{color:var(--muted);font-style:italic;margin-left:auto}
.wiz-del{background:none;border:1px solid var(--border);border-radius:var(--r-input);color:var(--muted);cursor:pointer;font-size:12px;font-family:inherit;padding:var(--sp-1) var(--sp-3)}
.wiz-del:hover{border-color:var(--red-tx);color:var(--red-tx)}

/* ── Document line-item list (org-docs, employee-docs) ───────────────────── */
.doclist{border:1px solid var(--border);border-radius:var(--r-table);background:#fff;overflow:hidden}
.doclist-head{display:grid;grid-template-columns:1fr 148px 148px 172px 44px;gap:var(--sp-4);padding:var(--sp-2) var(--sp-4);background:#F7F6F0;border-bottom:1px solid var(--border);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.doc-row{display:grid;grid-template-columns:1fr 148px 148px 172px 44px;gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid #EEEBE3}
.doc-row:last-child{border-bottom:none}
.doc-cat{padding:var(--sp-2) var(--sp-4);background:#FBFAF5;border-bottom:1px solid #EEEBE3;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dc-noexp{font-size:12px;color:var(--muted);align-self:center}
.dc-renew{margin-top:2px;font-size:11px;color:var(--muted)}
.dc-renew.pro{color:#42592F}
.xl-open{display:inline-flex;align-items:center;gap:var(--sp-1);flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap}
.xl-open:hover{border-color:var(--green);color:var(--green)}
.xl-steps{list-style:none;margin:0;padding:0;counter-reset:xl}
.xl-steps>li{position:relative;padding:0 0 var(--sp-4) var(--sp-8);font-size:13.5px;color:var(--ink);line-height:var(--lh-body)}
.xl-steps>li::before{counter-increment:xl;content:counter(xl);position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:#EBF0E0;color:#42592F;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.xl-rules{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);color:var(--muted);font-size:12.5px;line-height:var(--lh-relaxed)}
.xl-req{color:#8A4B2F;font-weight:500}
.xl-dl{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);background:var(--green);color:#fff;border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:13px;font-weight:500;text-decoration:none}
.xl-dl:hover{background:var(--forest-2)}
.xl-up{margin-top:var(--sp-2);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.xl-up input[type=file]{font-size:12.5px;color:var(--muted)}
.xl-prog{display:flex;align-items:center;gap:var(--sp-2);width:100%;margin-top:var(--sp-3)}
.xl-track{flex:1;height:8px;background:#EEEBE3;border-radius:var(--r-pill);overflow:hidden}
.xl-bar{height:100%;width:0;background:var(--accent);border-radius:var(--r-pill);transition:width .15s ease}
.xl-pct{font-size:12px;color:var(--muted);min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
/* 3-column org-docs row: details | dates | soft copy */
/* Onboarding org-docs row: 2-tier grid — labels top-aligned, content aligned below. */
.doc-row3{
  display:grid;
  grid-template-columns:auto minmax(0,1.5fr) 148px 128px 128px minmax(188px,1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "na name numlbl ilbl elbl albl"
    "na meta num    iss  exp  att";
  column-gap:var(--sp-5);row-gap:var(--sp-2);align-items:start;
  padding:var(--sp-4) var(--sp-4);border-bottom:1px solid #EEEBE3}
.doc-row3:last-child{border-bottom:none}
.doc-row3:hover{background:#FAFAF7}
.doc-row3.saved{background:#F6F9F1}
.doc-row3.na .dr-name span:first-child,.doc-row3.na .dr-meta{opacity:.5}
/* Not-applicable (client-side toggle): hide the fields + labels, show the pill, hide On file. */
.doc-row3.na .dr-numlbl,.doc-row3.na .dr-ilbl,.doc-row3.na .dr-elbl,.doc-row3.na .dr-albl,
.doc-row3.na .dr-num,.doc-row3.na .dr-issue,.doc-row3.na .dr-expiry,.doc-row3.na .dr-attach{display:none}
.doc-row3:not(.na) .na-pill{display:none}
.doc-row3.na .na-onfile{display:none}
.dr-name{grid-area:name;font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.dr-meta{grid-area:meta;min-width:0}
.dr-meta .dc-desc{margin-bottom:var(--sp-2)}
.dr-numlbl{grid-area:numlbl}.dr-ilbl{grid-area:ilbl}.dr-elbl{grid-area:elbl}.dr-albl{grid-area:albl}
.dr-num{grid-area:num}.dr-issue{grid-area:iss}.dr-expiry{grid-area:exp}
/* Attach cell only: top-aligned (like the inputs) with a min-height band so "0 files"/Add File
   center on the input's line — inputs/labels keep their original top position. */
.dr-attach{grid-area:att;display:flex;align-items:center;justify-content:flex-end;min-height:33px}
.dr-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;padding-top:2px}
.doc-row3 input[type=date],.dr-num input{width:100%;padding:var(--sp-2) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.dr-num input::placeholder{color:#B4AF9E}
.doc-row3 input.err{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.15)}
/* Reusable red-outline for an invalid input; !important so it wins over Tailwind's border utility. */
.inp-err{border-color:#c0392b !important;box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.fld-err{color:var(--red-tx);font-size:11px;margin-top:var(--sp-1);line-height:var(--lh-snug)}
/* Not-applicable switch: ON = applies (accent), OFF = not applicable (grey) */
.na-switch{grid-area:na;align-self:center;flex:none;width:34px;height:20px;border-radius:var(--r-pill);border:none;background:#D9D5CC;position:relative;cursor:pointer;padding:0;transition:background .15s}
.na-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.na-switch.on{background:var(--accent)}
.na-switch.on .knob{left:16px}
.dc-chips{margin-top:var(--sp-1);display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.chip{display:inline-flex;align-items:center;padding:2px var(--sp-2);border-radius:var(--r-pill);font-size:10.5px;font-weight:600;letter-spacing:.02em}
.chip-pro{background:#EBF0E0;color:#42592F}
.chip-self{background:#F3E9DE;color:#8A5A2F}
.chip-freq{background:#EAF0F4;color:#3A566E}
/* Import drawer: smaller download CTA + connected sequential stepper */
.xl-dl{padding:var(--sp-1) var(--sp-3);font-size:12px}
.xl-steps{position:relative}
.xl-steps>li{padding-left:var(--sp-10)}
.xl-steps>li:not(:last-child)::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;background:#E4E7DC}
.xl-steps>li::before{width:21px;height:21px;left:0}
.doc-row:hover{background:#FAFAF7}
.doc-row.saved{background:#F6F9F1}
.dc-name{font-size:14px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:var(--sp-2)}
.dc-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:var(--lh-snug)}
.doc-row input[type=date]{width:100%;padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.doc-row.saved input[type=date]{border-color:#cfe0bf}
.dc-file{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:1px solid #cfe0bf;border-radius:var(--r-input);background:#fff;font-size:12px;color:var(--accent);cursor:pointer;font-family:inherit;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-file:hover{background:#f2f7ec}
.dc-file svg{width:14px;height:14px;flex:none}
.dc-icon{border:none;background:none;cursor:pointer;color:var(--muted);display:inline-flex;padding:var(--sp-1);border-radius:var(--r-input)}
.dc-icon:hover{color:var(--red-tx);background:#fbecec}
.dc-icon svg{width:16px;height:16px}
/* "Not applicable" per-tenant exclusion */
.na-toggle{margin-top:var(--sp-2);padding:0;border:none;background:none;cursor:pointer;font-family:inherit;font-size:11.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.na-toggle:hover{color:var(--accent)}
.na-pill{display:inline-flex;align-items:center;padding:1px var(--sp-2);border-radius:var(--r-pill);background:#EEEBE3;color:var(--muted);font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none}
.doc-row3.na{opacity:.6}
.doc-row3.na .dc-name{color:var(--muted)}
.na-onfile{display:inline-flex;align-items:center;padding:1px var(--sp-2);border-radius:var(--r-pill);background:#EBF0E0;color:#42592F;font-size:10.5px;font-weight:600;letter-spacing:.02em;cursor:default}

/* Import-errors drawer (_ImportErrorsDrawer) */
.ie-link{margin-left:var(--sp-2);border:none;background:none;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:inherit}
.ie-row{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-3);background:#fff}
.ie-row.done{opacity:.55}
.ie-doc{font-size:13px;font-weight:600;color:var(--ink)}
.ie-reason{font-size:12px;color:#b23b2e;margin:var(--sp-1) 0 var(--sp-2)}
.ie-fields{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.ie-f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.ie-f input{text-transform:none;letter-spacing:0;font-weight:400;padding:var(--sp-2) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);font-size:13px;color:var(--ink);background:#fff;font-family:inherit}
.ie-f input.err{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.ie-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-2)}
.ie-msg{font-size:12px}
.ie-msg.ok{color:var(--accent)}
.ie-msg.bad{color:#c0392b}
.ie-fix{border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:12px;font-weight:500;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-input);cursor:pointer;font-family:inherit}
.ie-fix:hover{background:var(--forest)}
.ie-fix:disabled{opacity:.6;cursor:default}

/* One styled tooltip everywhere: put data-tip="…" on the element (sv-tip just sets the cursor).
   The tooltip itself is rendered body-level by sv-tooltip.js as .sv-tt, so it never clips inside a
   scroll/overflow container the way a CSS ::after did. */
.sv-tip{cursor:default}
.sv-tt{position:fixed;z-index:200;max-width:240px;background:var(--forest);color:#F2F0E6;font-size:11.5px;font-weight:400;line-height:var(--lh-snug);letter-spacing:0;text-transform:none;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-input);white-space:normal;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.sv-tt[hidden]{display:none}

/* Multi-file attach control (_AttachControl) — horizontal, right-aligned so "Add File"
   (and the "n files added" link) sit at the far right of the Copy column. */
.sv-attach{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:var(--sp-2);min-width:0;width:100%}
.sv-files{min-width:0;display:flex}
.sv-nofile{flex:none;font-style:italic;color:#B4AF9E;font-size:12px;white-space:nowrap}
.sv-count{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:1px solid #cfe0bf;border-radius:var(--r-input);background:#fff;font-size:12px;color:var(--accent);cursor:pointer;font-family:inherit;font-weight:500}
.sv-count:hover{background:#f2f7ec}
.sv-count svg{width:14px;height:14px;flex:none}
.sv-add{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);background:#fff;font-size:12px;color:var(--muted);cursor:pointer;font-family:inherit}
.sv-add:hover{border-color:var(--accent);color:var(--accent)}
.sv-add svg{width:14px;height:14px;flex:none}
.sv-add.uploading{pointer-events:none;border-color:var(--accent)}
.sv-add.uploading>svg,.sv-add.uploading>.lbl{visibility:hidden}
.sv-ring{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.sv-add.uploading .sv-ring{display:flex}
.sv-ring svg{width:20px;height:20px;transform:rotate(-90deg)}
.sv-ring .rb{fill:none;stroke:#e6e2d8;stroke-width:3}
.sv-ring .rf{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.sv-ico{flex:none;border:none;background:none;cursor:pointer;color:var(--muted);display:inline-flex;padding:var(--sp-1);border-radius:var(--r-input)}
.sv-ico:hover{color:var(--accent);background:#f2f7ec}
.sv-ico.danger:hover{color:var(--red-tx);background:#fbecec}
.sv-ico svg{width:15px;height:15px}
/* Manage/preview drawer file list */
.pv-files{display:none;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);background:#fff;max-height:38vh;overflow:auto}
.pv-drawer.manage .pv-files{display:flex}
.pv-drawer:not(.manage) .pv-add{display:none}
.pv-file-row{display:flex;align-items:center;gap:var(--sp-1);padding:2px 0}
.pv-file-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--accent);font-size:13px}
.pv-file-row .nm.active{font-weight:600}
.pv-file-row .nm:hover{text-decoration:underline}
.doc-emp{display:grid;grid-template-columns:1fr 148px 172px 44px;gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid #EEEBE3;font-size:13px}
.doc-emp:last-child{border-bottom:none}
.doc-emp:hover{background:#FAFAF7}
.doc-emp .de-exp{color:var(--muted)}

/* ── Slide-in document preview drawer (shared) ───────────────────────────── */
.pv-backdrop{position:fixed;inset:0;background:rgba(20,24,16,.34);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:60}
.pv-backdrop.open{opacity:1;visibility:visible}
.pv-drawer{position:fixed;top:0;right:0;height:100vh;width:min(92vw,max(460px,50vw));background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18);z-index:61;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.pv-drawer.open{transform:translateX(0)}
.pv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.pv-title{font-size:14px;font-weight:600;color:var(--ink);word-break:break-all}
.pv-sub{font-size:12px;color:var(--muted);margin-top:2px}
.pv-close{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);flex:none}
.pv-close:hover{color:var(--ink)}
.pv-body{flex:1;background:#EEEBE3;overflow:hidden}
.pv-body iframe{width:100%;height:100%;border:0;background:#EEEBE3}
.pv-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;padding:var(--sp-6);text-align:center}
.pv-foot{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border);display:flex;gap:var(--sp-2);justify-content:flex-end}
.pv-btn{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-input);background:#fff;font-size:13px;cursor:pointer;color:var(--ink);text-decoration:none;font-family:inherit}
.pv-btn:hover{border-color:var(--accent);color:var(--accent)}
.wiz-attach{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-input);background:var(--neutral-light);color:var(--muted);font-size:13px;cursor:pointer}
.wiz-attach:hover{border-color:var(--accent);color:var(--accent)}
.wiz-attach svg{width:15px;height:15px;flex:none}
.wiz-info{border:1px solid var(--border);border-radius:var(--r-table);background:#fff;padding:var(--sp-5) var(--sp-6);color:var(--muted);font-size:14px;line-height:var(--lh-body);margin-bottom:var(--sp-2)}
.wiz-info b{color:var(--ink)}
.wiz-sech{font-family:'Playfair Display',Georgia,serif;font-size:18px;color:var(--ink);margin:var(--sp-4) 0 var(--sp-2)}
.wiz-sechead{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-3)}
.wiz-drop{display:block;border:1.5px dashed var(--border);border-radius:var(--r-table);background:#fff;padding:var(--sp-8) var(--sp-6);text-align:center;cursor:pointer}
.wiz-drop:hover,.wiz-drop.drag{border-color:var(--accent);background:#fcfdfb}
.wiz-drop .dz-ic{display:block;color:var(--muted)}
.wiz-drop .dz-ic svg{width:26px;height:26px}
.wiz-drop .dz-title{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-top:var(--sp-3)}
.wiz-drop .dz-file{display:block;font-size:12.5px;color:var(--accent);margin-top:var(--sp-1)}
.wiz-drop .dz-tmpl{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--muted);font-size:13px;margin-top:var(--sp-3);text-decoration:none}
.wiz-drop .dz-tmpl:hover{color:var(--accent);text-decoration:underline}
.wiz-drop .dz-tmpl svg{width:15px;height:15px}
.wiz-addrow{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;border:1.5px dashed var(--border);border-radius:var(--r-table);background:#fff;padding:var(--sp-4);font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;font-family:inherit;margin-top:var(--sp-3)}
.wiz-addrow:hover{border-color:var(--accent);color:var(--accent)}
.wiz-addrow[hidden]{display:none}   /* attr must beat .wiz-addrow's display:flex */
/* footer nav */
.wiz-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);border-top:1px solid var(--border);margin-top:var(--sp-8);padding-top:var(--sp-5)}
.wiz-foot .wiz-skip{background:none;border:none;cursor:pointer;font-family:inherit;color:var(--muted);font-size:14px;text-decoration:none}
.wiz-foot .wiz-skip:hover{color:var(--ink);text-decoration:underline}
.wiz-foot .sp{flex:1}
.wiz-back{display:inline-flex;align-items:center;gap:var(--sp-2);background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;font-family:inherit}
.wiz-back:hover{color:var(--ink)}
/* DS Primary button: fill Primary Dark, height 48, radius 24, label 15-16/SemiBold. */
.wiz-next{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);background:var(--forest);color:var(--bg);border:none;border-radius:var(--r-btn);height:48px;padding:0 var(--sp-6);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.wiz-next:hover{background:var(--forest-2)}
.wiz-next:disabled{background:var(--neutral-light);color:var(--muted);cursor:not-allowed}
@media(max-width:820px){
  .wiz{flex-direction:column}
  .wiz-rail{width:auto;border-right:none;border-bottom:1px solid var(--border);padding:var(--sp-4) var(--sp-4);position:static;height:auto;overflow:visible}
  .wiz-kicker{margin-bottom:var(--sp-3)}
  .wiz-steps{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1)}
  .wiz-step{padding:var(--sp-1) var(--sp-2);margin:0;border-radius:var(--r-input)}
  .wiz-step .lbl{display:none}
  .wiz-step.current .lbl{display:inline}
  .wiz-main{padding:var(--sp-6) var(--sp-5)}
  .wiz-h{font-size:26px}
}
.section-h{font-size:15px;font-weight:500;margin:var(--sp-4) 0 var(--sp-2)}
.hint{font-size:12px;color:var(--muted);margin-top:var(--sp-1)}
.banner{border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:13px;margin:var(--sp-2) 0;line-height:var(--lh-body)}
.banner.ok{background:var(--ok-bg);color:var(--ok-tx)}
.banner.warn{background:var(--amber-bg);color:var(--amber-tx)}
.banner.terra{background:var(--terra-bg);color:var(--terra-tx)}
.banner.err{background:var(--red-bg);color:var(--red-tx)}
.banner.warn{background:var(--amber-bg);color:var(--amber-tx)}
.imp-issues{margin:var(--sp-1) 0 0;padding-left:var(--sp-4);font-size:12.5px;line-height:var(--lh-body)}
.dz-note{margin:var(--sp-2) 2px 0;font-size:12px;color:var(--muted);line-height:var(--lh-body)}

/* Employee bulk-import stepper (onboarding step 5) */
.eimp-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-6) var(--sp-6) var(--sp-5);margin-bottom:var(--sp-5);box-shadow:var(--shadow-card)}
.eimp-close{position:absolute;top:14px;right:16px;width:30px;height:30px;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:var(--r-input);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.eimp-close:hover{border-color:var(--accent);color:var(--accent)}
/* These set an explicit display, which overrides the plain [hidden] attribute — restore hiding. */
.eimp-toggle[hidden],.eimp-close[hidden]{display:none}
.eimp-steps{display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;align-items:start}
.eimp-arrow{display:flex;justify-content:center;padding-top:var(--sp-4);color:var(--border)}
.eimp-arrow svg{width:24px;height:24px}
.eimp-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.eimp-col p{min-height:2.6em}
.eimp-uprow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* Importing state — the card flips to this while the upload POST is in flight. */
.eimp-loading{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--sp-2) var(--sp-5);text-align:center}
.eimp-spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:eimp-rot .8s linear infinite}
.eimp-lname{font-weight:600;font-size:14px;color:var(--ink);word-break:break-all}
.eimp-bar{width:min(420px,80%);height:7px;border-radius:var(--r-pill);background:#E8EDDF;overflow:hidden}
.eimp-bar-fill{width:40%;height:100%;border-radius:var(--r-pill);background:var(--accent);animation:eimp-slide 1.1s ease-in-out infinite}
.eimp-ltext{font-size:12.5px;color:var(--muted);max-width:44ch}
@keyframes eimp-rot{to{transform:rotate(360deg)}}
@keyframes eimp-slide{0%{margin-left:-40%}100%{margin-left:100%}}
@media(prefers-reduced-motion:reduce){.eimp-spin{animation-duration:2s}.eimp-bar-fill{animation:none;width:100%}}
.eimp-tile{width:44px;height:44px;border-radius:var(--r-table);background:var(--ok-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.eimp-tile svg{width:22px;height:22px}
.eimp-no{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.eimp-col h3{font-family:'Playfair Display',Georgia,serif;font-size:16px;font-weight:500;color:var(--ink);margin:-4px 0 0}
.eimp-col p{color:var(--muted);font-size:13px;margin:-6px 0 0;max-width:22ch}
.eimp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:40px;min-width:168px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);font-weight:600;font-size:14px;padding:0 var(--sp-4);border-radius:var(--r-ghost);cursor:pointer;text-decoration:none;font-family:inherit;box-shadow:0 1px 2px rgba(46,59,39,.12)}
.eimp-btn:hover{background:var(--forest);border-color:var(--forest)}
/* DS Ghost button: soft Primary-Light fill, Primary green text, pill. */
.eimp-btn.ghost{background:var(--primary-light);color:var(--primary);border-color:transparent;box-shadow:none}
.eimp-btn.ghost:hover{background:#DBE9D6;border-color:transparent;color:var(--primary-dark)}
.eimp-btn.ghost svg{color:var(--primary)}
.eimp-btn svg{width:15px;height:15px}
/* A small flat text tag — deliberately unlike the buttons so it never reads as clickable. */
.eimp-chip{display:inline-block;background:var(--info-bg);color:var(--info-tx);font-size:11.5px;font-weight:500;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill)}
.eimp-mini{font-size:12px;color:var(--muted)}
.eimp-cols{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-3)}
.eimp-cols h4{font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 var(--sp-1)}
.eimp-cols .note{font-size:12.5px;color:var(--muted);margin:0 0 var(--sp-3)}
.eimp-grid{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-2)}
.eimp-fld{display:inline-flex;align-items:center;gap:var(--sp-2);border:none;background:var(--neutral-light);border-radius:var(--r-input);padding:var(--sp-1) var(--sp-2)}
.eimp-fld .fn{font-weight:500;font-size:12.5px;color:var(--ink)}
.eimp-tag{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;padding:2px var(--sp-2);border-radius:var(--r-input);white-space:nowrap}
.eimp-tag.req{background:var(--info-bg);color:var(--info-tx)}
.eimp-tag.opt{background:var(--neutral-light);color:var(--muted)}
.eimp-or{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted);font-size:13px;margin:var(--sp-1) 0 var(--sp-3)}
.eimp-or::before,.eimp-or::after{content:"";flex:1;height:1px;background:var(--border)}
.eimp-or a{color:var(--accent);text-decoration:underline;cursor:pointer}
/* Import card — Option A2 (2 aligned steps, Upload button, hover column list) */
.a2-steps{display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;gap:var(--sp-2)}
.a2-col{display:flex;flex-direction:column}
.a2-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.a2-col h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:16px;color:var(--ink);margin:0 0 3px}
.a2-col p{margin:0;color:var(--muted);font-size:13px;max-width:34ch;min-height:3.9em}
.a2-act{padding-top:var(--sp-3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1)}
.a2-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.a2-arrow svg{width:26px;height:26px}
.a2-foot{margin-top:var(--sp-4)}
.a2-link{position:relative;display:inline-block;font-size:12px;color:var(--primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.a2-link:hover,.a2-link:focus-visible{color:var(--forest);outline:none}
.a2-pop{position:absolute;left:0;bottom:135%;width:250px;background:var(--forest);color:var(--bg);border-radius:10px;padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-elev);opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;display:flex;flex-direction:column;gap:2px}
.a2-link:hover .a2-pop,.a2-link:focus-visible .a2-pop{opacity:1;pointer-events:auto}
.a2-pt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-2)}
.a2-pr{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.a2-pr:last-child{border-bottom:0}
.a2-rq{color:var(--accent);font-weight:600}
.a2-op{color:rgba(255,255,255,.6)}
@media(max-width:640px){.a2-steps{grid-template-columns:1fr}.a2-arrow{transform:rotate(90deg);padding:var(--sp-2) 0}.a2-col p{min-height:0}}
/* Multi-org hub (PRO firm step 4): list of managed orgs + per-org editor drawer (iframe) */
.od-summary{display:flex;align-items:center;gap:var(--sp-2);background:var(--ok-bg);color:var(--ok-tx);border-radius:var(--r-input);padding:var(--sp-3) var(--sp-4);font-size:13px;margin-bottom:var(--sp-4)}
.od-summary.neutral{background:var(--neutral-light);color:var(--muted)}
.od-rows{border:1px solid var(--border);border-radius:var(--r-table);overflow:hidden;background:var(--surface)}
.od-row{display:grid;grid-template-columns:1fr 170px 130px 96px;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border)}
.od-row:first-child{border-top:0}
.od-row.firm{background:var(--card)}
.od-org{min-width:0}
.od-name{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.od-name:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.od-meta{font-size:12px;color:var(--muted)}
.od-prog{font-size:12px;color:var(--muted)}
.od-bar{height:6px;border-radius:var(--r-pill);background:var(--neutral-light);overflow:hidden;margin-top:5px}
.od-bar>i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.od-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:var(--r-pill);padding:3px var(--sp-2)}
.od-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.od-pill.none{background:var(--neutral-light);color:var(--muted)}
.od-pill.prog{background:var(--amber-bg);color:var(--amber-tx)}
.od-pill.done{background:var(--ok-bg);color:var(--ok-tx)}
.od-add{justify-self:end;font:inherit;font-size:13px;font-weight:600;border-radius:var(--r-input);padding:var(--sp-2) var(--sp-4);cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--bg)}
.od-add:hover{background:var(--forest);border-color:var(--forest)}
/* Hub org row as a whole-row link (full-page per-org navigation) */
a.od-row{text-decoration:none;color:inherit;cursor:pointer}
a.od-row:hover{background:#FAFAF7}
a.od-row:hover .od-add{background:var(--forest);border-color:var(--forest)}
.orgs-back{margin-bottom:var(--sp-3)}
.od-scrim{position:fixed;inset:0;background:rgba(26,28,22,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.od-scrim.on{opacity:1;pointer-events:auto}
.od-drawer{position:fixed;top:0;right:0;height:100vh;width:min(680px,96vw);background:var(--surface);box-shadow:-16px 0 40px -20px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .24s ease;z-index:61;display:flex;flex-direction:column}
.od-drawer.on{transform:none}
.od-dhead{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.od-dtitle{font-weight:600;font-size:16px}
.od-x{background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.od-frame{flex:1;border:0;width:100%}
.panel-body{background:var(--bg);overflow-x:hidden}   /* off-canvas drawers (translateX 100%) must not add horizontal scroll inside the iframe */
.panel-main{padding:var(--sp-5) var(--sp-6) var(--sp-8);max-width:760px;margin:0 auto}
@media(max-width:640px){.od-row{grid-template-columns:1fr auto;gap:var(--sp-2)}.od-prog{display:none}}
@media(max-width:860px){.eimp-steps{grid-template-columns:1fr}.eimp-arrow{transform:rotate(90deg);padding:var(--sp-2) 0}.eimp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.eimp-grid{grid-template-columns:1fr}}

/* Employee-docs zip upload: layout toggle + folder-tree visual */
.zip-modes{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-3);flex-wrap:wrap}
.zip-vis{margin-bottom:var(--sp-3)}
.zt-cap{font-size:12.5px;color:var(--muted);margin:0 0 var(--sp-2)}
.zt-tree{background:var(--neutral-light);border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3) var(--sp-3)}
.zt-folder{display:flex;align-items:center;gap:var(--sp-2);font-weight:600;font-size:13px;color:var(--ink);margin-top:var(--sp-1)}
.zt-folder:first-child{margin-top:0}
.zt-folder svg{width:16px;height:16px;color:var(--accent)}
.zt-file{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px;color:var(--muted);padding:2px 0 2px var(--sp-6)}
.zt-file svg{width:14px;height:14px}

/* Step 6 — employee documents: coverage line, phase tabs, details matrix */
.edoc-cover{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;font-size:13px;color:var(--muted);margin:2px 0 var(--sp-3)}
.edoc-cover b{color:var(--ink);font-weight:600}
.edoc-cover .dot{opacity:.5}

.edoc-phases{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.ephase{display:inline-flex;align-items:center;gap:var(--sp-2);background:none;border:1px solid var(--border);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.ephase:hover{color:var(--ink)}
.ephase.sel{border-color:var(--forest);color:var(--ink)}
.ephase .en{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#EEEBE3;color:var(--muted);font-size:12px}
.ephase.sel .en{background:var(--forest);color:#fff}
.ephase-sep svg{width:16px;height:16px;color:var(--muted);opacity:.6}

.edoc-steps{margin:0 0 var(--sp-4);padding:0 0 0 var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);font-size:13.5px;line-height:var(--lh-body);color:var(--ink);max-width:70ch}
.edoc-steps li{padding-left:var(--sp-1)}
.edoc-steps code{background:var(--ok-bg);color:var(--forest);padding:1px var(--sp-1);border-radius:var(--r-input);font-size:12.5px}
.zip-modes-q{font-size:12.5px;color:var(--muted);margin-right:var(--sp-1);align-self:center}
.edoc-tools{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.edoc-tools-r{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.edoc-search{flex:1;min-width:180px;max-width:320px;border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:13px;background:var(--surface);color:var(--ink)}
.edoc-search:focus{outline:none;border-color:var(--accent)}
.emp-search{flex:1;max-width:320px;margin:0}

/* Shared scroll-wrapper mechanism (single source of truth): horizontal scroll on narrow screens, but on
   desktop drop the scroll box so the page becomes the scroll parent and the sticky thead pins to the
   viewport instead of being trapped in an inner overflow box. Used by the onboarding compliance matrix
   (.mx-scroll, which also adds card chrome) and the plain list rosters People/Requests/PRO (.tbl-scroll,
   mechanism only — those tables already sit in their own card). */
.mx-scroll,.tbl-scroll{overflow-x:auto}
@media (min-width:1200px){.mx-scroll,.tbl-scroll{overflow:visible}}
.mx-scroll{border:1px solid var(--border);border-radius:var(--r-table);background:var(--surface)}
.mx{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:13px}
/* DS table header: Neutral-Medium, UPPERCASE, SemiBold. ponytail: row height kept dense (not DS 72px) —
   this is a compact 6-column status matrix, not a standard data table; 72px would waste vertical space. */
.mx thead th{position:sticky;top:var(--table-stick-top);background:var(--neutral-light);text-align:left;font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:bottom}
/* Doc-type headers carry the full registry name (single source of truth) — let them wrap to 2-3 lines
   and bound the column so all core columns fit without horizontal scroll. */
.mx thead th:not(.mx-emp){white-space:normal;min-width:88px;max-width:104px;line-height:var(--lh-tight)}
.mx tbody td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);vertical-align:top}
.mx tbody tr:last-child td{border-bottom:none}
.mx tbody tr:hover td{background:var(--neutral-light)}
.mx-emp{position:sticky;left:0;background:var(--surface);z-index:1;min-width:150px}
.mx thead .mx-emp{background:var(--neutral-light);z-index:2}
.mx tbody tr:hover .mx-emp{background:var(--neutral-light)}
.mx-name{font-weight:500;color:var(--ink)}
.mx-namelink{background:none;border:none;padding:0;font:inherit;font-weight:500;color:var(--primary);cursor:pointer;text-align:left;text-decoration:none}
.mx-namelink:hover{color:var(--primary-dark);text-decoration:underline}
.mx-eid{font-size:11.5px;color:var(--muted);margin-top:1px}
.mx-hint{font-size:12px;color:var(--muted);margin:var(--sp-2) 2px 0}
/* Skipped-rows summary bar + link */
.edoc-skipbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;background:var(--red-bg);border:1px solid var(--error);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);font-size:13px;color:var(--red-tx)}
.edoc-skipbar b{font-weight:600}
.skip-link{background:none;border:none;color:#A5382B;font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap}
/* Row error icon (distinct from the status icons) + name row */
.mx-namewrap{display:flex;align-items:center;gap:var(--sp-1)}
.mx-err{display:inline-flex;color:var(--red-tx)}
.mx-err svg{width:15px;height:15px}
.edoc-onlyerr{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.edoc-onlyerr input{width:14px;height:14px;accent-color:var(--forest);margin:0}
/* Skipped-rows drawer content */
.sk-group{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:var(--sp-3) 0 var(--sp-1);display:flex;align-items:center;gap:var(--sp-2)}
.sk-group:first-child{margin-top:0}
.sk-count{background:var(--neutral-light);border-radius:var(--r-pill);padding:1px var(--sp-2);font-size:11px}
.sk-row{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.sk-r1{display:flex;justify-content:space-between;gap:var(--sp-2)}
.sk-emp{font-weight:500;color:var(--ink);font-size:13px}
.sk-rowno{font-size:11.5px;color:var(--muted)}
.sk-doc{font-size:12px;color:var(--muted);margin-top:1px}
.sk-msg{font-size:12px;color:var(--red-tx);margin-top:var(--sp-1)}
.sk-more{font-size:12px;color:var(--muted);margin:2px 0 var(--sp-2)}
/* Drawer inline-edit form */
.pd-form .pd-doc.err{border-color:var(--error);background:var(--red-bg)}
.pd-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-2)}
.pd-f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:11px;color:var(--muted)}
.pd-f input{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-2);font-size:12.5px;background:var(--surface);color:var(--ink)}
.pd-f input:focus{outline:none;border-color:var(--forest)}
.pd-f.err input{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.pd-ferr{font-style:normal;font-size:11px;color:var(--red-tx);line-height:var(--lh-snug);margin-top:var(--sp-1)}
.pd-save{position:sticky;bottom:0;background:var(--surface);padding:var(--sp-3) 0 var(--sp-4);margin-top:var(--sp-1);border-top:1px solid var(--border);box-shadow:0 -6px 10px -8px rgba(0,0,0,.12)}
@media(max-width:520px){.pd-fields{grid-template-columns:1fr}}
/* Status icon per cell — colour carries meaning; hover title gives the detail. */
.stat{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;cursor:default}
.stat svg{width:15px;height:15px}
.stat.ok{color:var(--ok-tx);background:var(--ok-bg)}
.stat.warn{color:var(--amber-tx);background:var(--amber-bg)}
.stat.exp{color:var(--red-tx);background:var(--red-bg)}
.stat.miss{color:var(--red-tx);background:var(--red-bg)}
.stat.none{color:var(--muted);background:var(--neutral-light)}
.mxcell{position:relative;display:inline-flex}
.clip{position:absolute;right:-7px;bottom:-6px;width:16px;height:16px;border-radius:50%;background:var(--info-bg);color:var(--info-tx);border:1.5px solid #fff;display:inline-flex;align-items:center;justify-content:center}
.clip svg{width:9px;height:9px}
/* Drawer file row (paperclip + blue filename/upload link) + in-page file preview. */
.pd-file-row{display:flex;align-items:center;gap:var(--sp-2);margin:2px 0 var(--sp-2)}
.pd-attach-ic{width:16px;height:16px;color:var(--primary);flex:none;display:inline-flex}
.pd-attach-ic svg{width:16px;height:16px}
.pd-file-link{color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;background:none;border:none;padding:0;font:inherit;text-decoration:none}
.pd-file-link:hover{text-decoration:underline}
.pd-file-picked{font-size:12.5px;color:var(--muted,#6B6F60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fp-backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;background:rgba(26,28,22,.6);padding:var(--sp-6)}
.fp-backdrop[hidden]{display:none}
.fp-modal{background:#fff;width:min(900px,100%);height:min(85vh,900px);border-radius:var(--r-table);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px -24px rgba(26,28,22,.6)}
.fp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);background:#F7F6F0}
.fp-head .eimp-close{position:static;flex:none}
.fp-name{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-frame{border:none;flex:1;width:100%;background:#525659}
/* Attach-tab upload status + attachment-mode matrix (Phase 2 of the upload→review flow). */
.up-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin:var(--sp-3) 0 var(--sp-1);font-size:13.5px;color:var(--ink)}
.up-status .up-count b{font-weight:700}
.up-status .up-count.warn{color:var(--amber-tx)}
.up-status .up-dot{color:var(--border)}
/* The matrix carries both a detail-validity view and an attachment view per cell; the wrapper class picks. */
#mx-wrap .cell-attach{display:none}
#mx-wrap.mode-attach .cell-detail{display:none}
#mx-wrap.mode-attach .cell-attach{display:inline-flex}
.mx-attach-only{display:none}
#mx-wrap.mode-attach .mx-attach-only{display:flex}
#mx-wrap.mode-attach .mx-detail-only{display:none}
/* Attach mode lists only employees with activity unless "show all" is toggled on. */
#mx-wrap.mode-attach #mx-body tr[data-activity="0"]{display:none}
#mx-wrap.mode-attach.show-all #mx-body tr[data-activity="0"]{display:table-row}
.mx-nofiles{font-size:12.5px;color:var(--muted,#6B6F60);margin-right:var(--sp-1)}
.stat-at{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%}
.stat-at svg{width:15px;height:15px}
.stat-at.have{color:var(--ok-tx);background:var(--ok-bg)}
.stat-at.review{color:var(--amber-tx);background:var(--amber-bg)}
.stat-at.none{color:var(--muted);background:var(--neutral-light)}
.cell-bang{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;margin-left:-4px;align-self:flex-start;font-size:11px;font-weight:800;color:#fff;background:#C4462F;border-radius:50%;border:1.5px solid #fff}
.lg-at{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;vertical-align:middle}
.lg-at svg{width:11px;height:11px}
.lg-at.have{color:var(--info-tx);background:var(--info-bg)}
.lg-at.review{color:#7A5A12;background:#FBF0D6}
.lg-at.none{color:#9AA0A6;background:#F1F2F4}
/* Step-5 IA redesign: rail sub-steps, collapsible help, prominent progress strip, docked review CTA. */
.wiz-substeps{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px var(--sp-8);padding-left:var(--sp-2);border-left:2px solid var(--border)}
.wiz-substep{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-input);text-decoration:none;color:var(--muted);font-size:13px}
.wiz-substep:hover{background:rgba(0,0,0,.03);color:var(--ink)}
.wiz-substep.current{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--border)}
.wiz-substep .sn{font-size:11px;font-weight:600;color:var(--muted);min-width:24px}
.wiz-substep.current .sn{color:var(--accent)}
.edoc-help{margin:0 0 var(--sp-4);border:1px solid var(--border);border-radius:var(--r-table);background:var(--surface);overflow:hidden}
.edoc-help>summary{cursor:pointer;list-style:none;padding:var(--sp-3) var(--sp-3);font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:var(--sp-2)}
.edoc-help>summary::-webkit-details-marker{display:none}
.edoc-help>summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.edoc-help[open]>summary::before{transform:rotate(45deg)}
.edoc-help>summary:hover{color:var(--accent)}
.edoc-help>p,.edoc-help>ol{margin:0;padding:0 var(--sp-4) var(--sp-3) var(--sp-4);font-size:13px;color:var(--muted);line-height:var(--lh-body)}
.edoc-help>ol{padding-left:var(--sp-8)}
.edoc-help>ol li{margin:var(--sp-1) 0}
/* Prominent progress strip */
.up-progress{margin:0 0 var(--sp-4);padding:var(--sp-4) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-table);background:var(--surface)}
.up-bar{height:10px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.up-bar>span{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);transition:width .3s}
.up-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.up-chip{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:13px;font-weight:600;color:var(--ink);background:var(--ok-bg);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3)}
.up-chip.strong{background:var(--ok-bg);color:var(--ok-tx)}
.up-chip.warn{background:var(--amber-bg);color:var(--amber-tx)}
.up-chip.warn::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
/* Docked "go to review" CTA — quiet secondary, sits directly under the upload card */
.edoc-review-cta{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-1);padding:var(--sp-2) var(--sp-4);border:1px solid var(--accent);border-radius:var(--r-input);background:var(--surface);color:var(--accent);font-size:13.5px;font-weight:600;text-decoration:none}
.edoc-review-cta:hover{background:var(--accent);color:#fff}
.edoc-review-cta svg{width:15px;height:15px}
/* 5.2 rebuild: status stat cards (accent bar + title + big count), single upload card, help drawer. */
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin:0 0 var(--sp-5)}
.stat-card{position:relative;display:block;text-decoration:none;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-6);overflow:hidden;box-shadow:var(--shadow-card)}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.stat-card.ok::before{background:var(--success)}
.stat-card.warn::before{background:var(--warning)}
.stat-card.err::before{background:var(--error)}
.stat-card.zero::before{background:var(--border)}
.stat-card-t{font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:var(--sp-1)}
.stat-card-t .go{color:var(--primary);font-weight:700}
.stat-card-n{font-size:30px;font-weight:700;color:var(--ink);line-height:var(--lh-tight);margin-top:var(--sp-1)}
.stat-card-n .of{font-size:13px;font-weight:500;color:var(--muted);margin-left:var(--sp-1)}
a.stat-card{transition:border-color .12s,box-shadow .12s}
a.stat-card:not(.zero):hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(31,47,31,.08)}
a.stat-card.zero{pointer-events:none;opacity:.7}
@media(max-width:720px){.stat-cards{grid-template-columns:1fr}}
.up-bar-row{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.up-bar-row .eimp-toggle{margin:0}
.up-card-t{font-size:15px;font-weight:600;color:var(--ink)}
.up-help{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:none;color:var(--primary);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:2px var(--sp-1)}
.up-help:hover{text-decoration:underline}
.up-help svg{width:15px;height:15px;flex:none}
.help-p{font-size:13.5px;color:var(--muted);line-height:var(--lh-body);margin:0 0 var(--sp-3)}
.help-ol{margin:0 0 var(--sp-4);padding-left:var(--sp-4);font-size:13.5px;color:var(--ink);line-height:var(--lh-relaxed)}
.help-ol li{margin:var(--sp-1) 0}
.help-eg{background:var(--primary-light);border-radius:var(--r-input);padding:var(--sp-3) var(--sp-3)}
.help-eg-t{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--sp-2)}
.help-eg-note{font-size:12px;color:var(--muted);font-weight:400}
/* DS primary text link (Tertiary/link style): Primary green, underline on hover, 15px medium. */
.link-primary{color:var(--primary);font-weight:500;font-size:15px;text-decoration:none;cursor:pointer}
.link-primary:hover{color:var(--primary-dark);text-decoration:underline}
.lh-sub{color:var(--muted);font-weight:400}
/* Upload card (5.2): title + why + how-it-works, an important note, and a soft-green drop zone that
   reads as the primary action area. Stays open so users can keep dropping. */
.up-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-6);margin:0 0 var(--sp-5);box-shadow:var(--shadow-card)}
.up-card-head{display:flex;align-items:flex-start;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.up-card-title{font-size:16px;font-weight:700;color:var(--ink)}
.up-card-sub{font-size:13px;color:var(--muted);margin-top:2px;line-height:var(--lh-body)}
.up-how{margin-left:auto;white-space:nowrap;flex:none;color:var(--primary);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
.up-how:hover{color:var(--primary-dark);text-decoration:underline}
.up-note{display:flex;align-items:flex-start;gap:var(--sp-2);background:var(--amber-bg);color:var(--amber-tx);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:12.5px;line-height:var(--lh-body);margin:0 0 var(--sp-3)}
.up-note svg{flex:none;color:var(--amber-tx);margin-top:2px}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);text-align:center;background:var(--primary-light);border:1.5px dashed var(--accent);border-radius:var(--r-table);padding:var(--sp-5) var(--sp-4);cursor:pointer;transition:background .12s,border-color .12s}
.dropzone:hover,.dropzone.drag{background:#DCEBD6;border-color:var(--primary)}
.dropzone .dz-ic{width:34px;height:34px;color:var(--primary);display:inline-flex}
.dropzone .dz-ic svg{width:34px;height:34px}
.dropzone .dz-title{font-size:14px;color:var(--ink)}
.dropzone .dz-title .dz-or{color:var(--muted);font-weight:400}
.dropzone .dz-types{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.dropzone .dz-file{font-size:12.5px;color:var(--primary);font-weight:600}
/* Folder-pick trigger — sits just under the dropzone, outside its label so it opens the dir picker only. */
.dz-folder{display:inline-block;margin-top:var(--sp-2);background:none;border:none;padding:0;font:inherit;font-size:13px;color:var(--primary);font-weight:600;text-decoration:underline;cursor:pointer}

/* Employee-documents review drawer */
.pd-backdrop{position:fixed;inset:0;background:rgba(20,24,16,.34);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:80}
.pd-backdrop.open{opacity:1;visibility:visible}
.pd-drawer{position:fixed;top:0;right:0;height:100vh;width:clamp(360px,50vw,92vw);background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.18);z-index:81;transform:translateX(100%);visibility:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear .25s;display:flex;flex-direction:column}
.pd-drawer.open{transform:translateX(0);visibility:visible;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility 0s}
.pd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5);border-bottom:1px solid var(--border)}
.pd-head .eimp-close{position:static}
.pd-title{font-weight:500;font-size:16px;color:var(--ink)}
.pd-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.pd-body{padding:var(--sp-4) var(--sp-5) 0;overflow-y:auto;flex:1}
.pd-empty{color:var(--muted);font-size:13px;padding:var(--sp-4) 0}
.pd-doc{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-2)}
.pd-doc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.pd-type{font-weight:500;font-size:13.5px;color:var(--ink)}
.pd-meta{font-size:12px;color:var(--muted);margin-top:var(--sp-1)}
.pd-filerow{margin-top:var(--sp-2)}
.pd-file{font-size:12.5px;color:var(--forest);text-decoration:none}
.pd-file:hover{text-decoration:underline}
.pd-nofile{font-size:12px;color:var(--muted);font-style:italic}
.pd-add{border-style:dashed}
.pd-add-type{margin:var(--sp-2) 0 2px;max-width:280px}
.pd-add-type select{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-1) var(--sp-2);font-size:12.5px;background:#fff;color:var(--ink)}
.pd-add-type select:focus{outline:none;border-color:var(--forest)}
.pd-addmore{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);width:100%;background:none;border:1px dashed var(--border);color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-input);font-family:inherit;margin-bottom:var(--sp-2)}
.pd-addmore:hover{border-color:var(--accent);background:#FAFAF7}
.pd-remove{background:none;border:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.pd-remove:hover{color:var(--red-tx)}
.nd-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-1);cursor:pointer;font-family:inherit}
.nd-row:hover{background:var(--neutral-light)}
.pd-back{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:none;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;padding:2px 2px var(--sp-3);font-family:inherit}
.nd-name{font-weight:500;color:var(--ink);font-size:13.5px}
.nd-eid{font-size:12px;color:var(--muted)}
.stat-pill{font-size:11px;font-weight:500;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);white-space:nowrap}
.stat-pill.ok{background:var(--ok-bg);color:var(--ok-tx)}
.stat-pill.warn{background:var(--amber-bg);color:var(--amber-tx)}
.stat-pill.exp{background:var(--red-bg);color:var(--red-tx)}
.stat-pill.miss{background:var(--red-bg);color:var(--red-tx)}

.add-more{display:inline-flex;align-items:center;gap:var(--sp-1);background:none;border:none;color:var(--forest);font-size:13px;font-weight:600;cursor:pointer;padding:0;margin:var(--sp-3) 0 var(--sp-1)}
.add-more svg{width:16px;height:16px}

/* Employee roster — compact editable table (one header, one row per person) */
/* Column order: Employee ID · Full name · Emirates ID · Email · Country code+Phone · delete */
.emp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-table);background:#fff}
.emp-scroll .doclist{border:none;border-radius:0;min-width:900px}
.emp-cols{grid-template-columns:110px minmax(130px,1.2fr) 170px minmax(150px,1.3fr) minmax(210px,1.5fr) 40px}
.emp-row{display:grid;gap:var(--sp-3);align-items:start;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid #EEEBE3}
.emp-row:last-child{border-bottom:none}
.emp-row:hover{background:#FAFAF7}
.emp-row.saved{background:#F6F9F1}
.emp-row.saved:hover{background:#EEF5E6}
.emp-row.has-err,.emp-row.saved.has-err{background:#FCF3F2}
.emp-row.removing{display:none}
/* Organisation-documents inline table (onboarding step 4). Same row system as .emp-cols, org columns:
   [NA toggle] · [status icon + name + chips] · Number · Issue · Expiry · Files. */
.doc-cols{grid-template-columns:40px minmax(200px,1.7fr) 1fr 150px 150px minmax(150px,180px);align-items:center}
.doclist-head.doc-cols,.emp-row.doc-cols{padding-left:var(--sp-4);padding-right:var(--sp-4)}
.emp-row.doc-cols{align-items:center}
.doc-cols .na-switch{grid-area:auto;align-self:center}
.doc-name{min-width:0}
.doc-nl{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.doc-t{font-weight:600;font-size:14px;color:var(--ink);min-width:0}
.doc-cols .dc-chips{margin-top:var(--sp-1)}
.doc-cols .stat{width:20px;height:20px;flex:none}
.doc-cols .stat svg{width:13px;height:13px}
.emp-row:not(.na) .na-pill{display:none}
.emp-row.na .na-onfile{display:none}
.emp-row.na .doc-t{opacity:.55}
.emp-row.na .ecell input,.emp-row.na .doc-files{visibility:hidden}
/* PRO onboarding profile (step 2): section headings (reuses .cd-sh/.cd-sect) + firm-agency inline rows. */
.pf-sublbl{font-size:12px;font-weight:600;color:var(--muted);margin:var(--sp-4) 0 var(--sp-2)}
.pf-desc{font-size:13px;color:var(--muted);margin:0 0 var(--sp-3);max-width:74ch}
/* Agencies: one row per agency — name · emirate · optional contact name/email/phone · remove. */
.agw-cols{grid-template-columns:minmax(150px,1.4fr) 120px minmax(120px,1fr) minmax(150px,1.4fr) 130px 34px}
.doclist-head.agw-cols,.emp-row.agw-cols{padding-left:var(--sp-3);padding-right:var(--sp-3);align-items:center;min-width:930px}
/* PRO onboarding: agency (profile step 2) + map (structure step 3) inline tables. */
.ag-cols{grid-template-columns:minmax(220px,2fr) 200px 40px}
.map-cols{grid-template-columns:minmax(240px,2fr) 260px}
.doclist-head.ag-cols,.emp-row.ag-cols,.doclist-head.map-cols,.emp-row.map-cols{padding-left:var(--sp-4);padding-right:var(--sp-4);align-items:center}
.eimp-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--border);background:var(--surface);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-input);cursor:pointer;margin-bottom:var(--sp-4)}
.eimp-toggle:hover{border-color:var(--accent);color:var(--accent)}
.od-drawer-imp{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-2) 0 var(--sp-4)}
.eimp-link{display:inline-flex;align-items:center;gap:var(--sp-2);border:0;background:none;padding:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline}
.eimp-link:hover{color:var(--forest)}
.eimp-link.subtle{font-weight:500;color:var(--muted)}
.eimp-link.subtle:hover{color:var(--accent)}
/* Firm-drawer document editor — one card per document (finalised org-docs drawer layout).
   Resets the table-row (.emp-row) styles it borrows for the search/filter JS. */
.od-doc.emp-row{display:block;background:transparent;border:1px solid var(--border);border-radius:var(--r-input);padding:13px 14px;margin-top:var(--sp-3);box-sizing:border-box}
.od-doc.emp-row:hover{background:transparent}
.od-doc.na{opacity:.55}
.od-doc.na .od-doc-fields,.od-doc.na .pd-file-row{display:none}
.od-doc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.od-doc-id{min-width:0}
.od-doc-cat{font-size:11px;line-height:var(--lh-snug);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:2px}
.od-doc-name{font-size:14px;line-height:var(--lh-snug);font-weight:600;color:var(--ink)}
.od-doc .od-na{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;font-size:12px;font-weight:400;color:var(--muted);cursor:pointer;white-space:nowrap}
.od-doc .od-na input[type=checkbox]{width:16px;height:16px;padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer;accent-color:var(--primary);flex:none}
/* Instant styled tooltip on the N/A label — opens below, right-anchored inside the card so the drawer's
   overflow can't clip it (unlike the old right-of-edge popover). title="" stays for accessibility. */
/* .od-na uses the shared data-tip / .sv-tt tooltip now (was a bespoke .od-na-tip span). */
.od-doc-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2);margin-top:var(--sp-3)}
.od-doc-fields .fld{margin-bottom:0;min-width:0}
.od-doc-fields label{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-bottom:3px}
.od-doc-fields input{width:100%;min-width:0;box-sizing:border-box}
.od-doc .pd-file-row{margin-top:var(--sp-3);align-items:center}
.od-doc .pd-file-input{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden}
.sv-attach .pd-file-link{display:inline-block;margin:0;font-weight:600;line-height:var(--lh-snug)}   /* beat .wiz-form label (block+margin+500) so the clip + "Upload file" align */
.sv-attach .pd-file-view{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0}
.sv-attach .pd-file-view[hidden],.sv-attach .pd-file-add[hidden]{display:none}
.sv-attach .pd-file-open{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-attach .pd-file-sep{color:var(--muted);font-size:13px}
.od-doc .pd-file-link.chg{color:var(--muted);font-weight:400}
.pd-file-rm{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:400;color:var(--error);cursor:pointer}
.pd-file-rm:hover{text-decoration:underline}
/* card list fills the drawer — drop the table's horizontal scroll + min-width */
.emp-scroll.od-cards{overflow:visible;border:0;background:none;border-radius:0}
.doclist.od-cards{min-width:0;border:0;border-radius:0;background:none;overflow:visible}
.emp-scroll.od-cards .doclist{min-width:0}
/* Direct-org documents (Variation 1): standalone cards grouped under category headers with progress. */
.emp-scroll.od-listwrap{overflow:visible;border:0;background:none;border-radius:0}
.doclist.od-list{min-width:0;border:0;border-radius:0;background:none;overflow:visible}
.emp-scroll.od-listwrap .doclist{min-width:0}
.od-cat{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-1)}
.od-cat:first-child{margin-top:var(--sp-1)}
.od-cat-l{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;white-space:nowrap}
.od-cat-bar{width:64px;height:5px;border-radius:var(--r-pill);background:var(--neutral-light);overflow:hidden;flex:none}
.od-cat-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.od-cat-count{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.od-cat-rule{height:1px;background:var(--border);flex:1}
.od-doc2:hover{border-color:#D3DAC9}
.od-doc2 .od-doc-id{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.od-doc2 .od-doc-name{font-weight:650}
.od-doc2 .stat{width:22px;height:22px;flex:none}
.od-doc2 .stat svg{width:13px;height:13px}
.od-doc2 .na-onfile{cursor:default}
.od-doc-fields.f4{grid-template-columns:1.1fr 1fr 1fr 1.2fr}
@media(max-width:820px){.od-doc-fields.f4{grid-template-columns:1fr 1fr}}
.sk-cols{grid-template-columns:110px minmax(120px,1fr) 170px minmax(150px,1.2fr) 130px}
/* Header and data rows must share gap + horizontal padding or the columns drift apart. */
.doclist-head.sk-cols,.emp-row.sk-cols{gap:var(--sp-4);padding-left:var(--sp-4);padding-right:var(--sp-4);text-align:left}
.sk-c{font-size:13px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
/* "show only rows needing attention" filter */
.emp-filter{margin:2px 0 var(--sp-2)}
.emp-flink{color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;text-decoration:underline}
.banner.info{background:var(--info-bg);color:var(--info-tx)}
.emp-listbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-1) 0 var(--sp-2)}
.emp-clear{background:none;border:1px solid var(--border);color:var(--red-tx);font-family:inherit;font-size:12.5px;font-weight:500;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-input);cursor:pointer;white-space:nowrap}
.emp-clear:hover{border-color:var(--red-tx);background:var(--red-bg)}
.errors-only .emp-row:not(.has-err){display:none}
.mx.errors-only tbody tr[data-issue="0"]{display:none}
.ecell{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.emp-row input{width:100%;padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);font-size:13px;background:#fff;color:var(--ink);font-family:inherit}
.emp-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(94,122,72,.16)}
.emp-row input.emp-err{border-color:#c0392b;box-shadow:0 0 0 2px rgba(192,57,43,.12)}
.ferr{font-size:11px;color:var(--red-tx);line-height:var(--lh-tight);padding-left:2px}
/* country code + phone read as one control: joined borders, shared focus ring */
.emp-phone{display:flex;min-width:0}
.emp-phone select{flex:none;width:66px;padding:var(--sp-1) 2px;border:1px solid var(--border);border-right:none;border-radius:7px 0 0 7px;background:#F4F2E9;color:var(--ink);font-size:12px;font-family:inherit}
.emp-phone input{flex:1;min-width:0;border-radius:0 7px 7px 0}
.emp-phone:focus-within select,.emp-phone:focus-within input{border-color:var(--accent)}
.emp-phone:focus-within input{box-shadow:0 0 0 2px rgba(94,122,72,.16)}
.emp-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:var(--sp-1);display:inline-flex;font-family:inherit;align-self:start;margin-top:var(--sp-1)}
.emp-del:hover{color:var(--red-tx)}
.emp-del svg{width:16px;height:16px}
.emp-add{display:inline-flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-3);color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;text-decoration:none}
.emp-add:hover{text-decoration:underline}
/* These affordances render as <button> for keyboard access; strip the native button chrome. */
button.emp-add,button.emp-flink,button.up-how{background:none;border:0;padding:0;font-family:inherit}

/* ===== PRO client roster + add/fix drawer (onboarding step 3) ===== */
/* Reuses .emp-scroll/.doclist/.emp-row; client-specific column grid + two-line cells. */
.cl-cols{grid-template-columns:minmax(150px,1.2fr) 132px minmax(190px,1.5fr) 138px 96px 44px;gap:var(--sp-4)}
.doclist-head.cl-cols{gap:var(--sp-4)}
.cl-search{max-width:340px;margin:0 0 var(--sp-3)}
.cl-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.cl-c.mut{color:var(--muted)}
.cl-c.err{color:var(--red-tx);font-weight:500}
.cl-org{display:flex;flex-direction:column;gap:1px;white-space:normal;min-width:0}
.cl-org .cl-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-org .l2{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-org .cl-name.err,.cl-org .l2.err{color:var(--red-tx);font-weight:500}
.cl-acts{display:flex;justify-content:flex-end;align-items:center}
.cl-acts form{display:flex}
.chip.lic{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border))}
.emp-row .chip{border:1px solid var(--border);color:var(--muted)}
/* drawer body */
.cd-drawer{width:min(720px,96vw)}
.cd-body{padding:var(--sp-5) var(--sp-6);overflow-y:auto;flex:1;display:block}
.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.cd-grid3{display:grid;grid-template-columns:1.4fr 1.3fr 1fr;gap:var(--sp-4)}
@media(max-width:640px){.cd-grid,.cd-grid3{grid-template-columns:1fr}}
.cd-fld{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.cd-fld.full{grid-column:1/-1}
.cd-fld label{font-size:12.5px;font-weight:600;color:var(--ink)}
.cd-fld label .rq{color:var(--red-tx);margin-left:2px}
.cd-fld input,.cd-fld select{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-input);font:inherit;font-size:13.5px;background-color:#fff;color:var(--ink)}
.cd-fld input:focus,.cd-fld select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,122,72,.16)}
.cd-fld.bad input,.cd-fld.bad select{border-color:var(--error);box-shadow:0 0 0 2px rgba(214,69,69,.14)}
.cd-fld .cd-ferr{display:none;font-size:11px;color:var(--red-tx);line-height:var(--lh-snug);margin-top:var(--sp-1)}
.cd-fld.bad .cd-ferr{display:block}
.cd-sect{margin-top:var(--sp-6)}
.cd-sh{display:flex;align-items:center;gap:var(--sp-2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:var(--sp-1)}
.cd-sh .ln{height:1px;background:var(--border);flex:1}
.cd-licrow{display:grid;grid-template-columns:1.3fr 1.3fr .9fr auto;gap:var(--sp-2);align-items:end;margin-bottom:var(--sp-2)}
.cd-licpad{width:37px}
.cd-licx{background:none;border:1px solid var(--border);border-radius:var(--r-input);color:var(--muted);cursor:pointer;height:37px;width:37px;font-size:15px}
.cd-licx:hover{color:var(--red-tx);border-color:var(--red-tx)}
.cd-addrow{display:inline-flex;align-items:center;gap:var(--sp-2);background:none;border:1px dashed var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.cd-addrow:hover{border-color:var(--accent)}
.cd-locked{display:flex;align-items:center;gap:var(--sp-2);background:var(--neutral-light);border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:12.5px;color:var(--muted);margin-top:var(--sp-3)}
.cd-tagl{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--border);color:var(--muted);padding:2px var(--sp-1);border-radius:var(--r-input)}
.cd-foot{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.cd-foot .sp{margin-left:auto}
.btn-row{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);align-items:center}
button.ghost{background:transparent;border:1px solid var(--forest);color:var(--forest);border-radius:var(--r-btn);padding:var(--sp-3) var(--sp-6);font-weight:600;cursor:pointer;margin-top:var(--sp-4);min-height:44px}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}
a.btnlink{display:inline-block;background:var(--forest);color:#fff;border-radius:var(--r-btn);padding:var(--sp-3) var(--sp-6);font-weight:600;text-decoration:none;margin-top:var(--sp-4);min-height:44px}
a.btnlink:hover{background:var(--forest-2)}
a.btnlink.ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
a.btnlink.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
button.sm{padding:var(--sp-1) var(--sp-3);font-size:12px;margin-top:0}
.empty{color:var(--muted);padding:var(--sp-4) var(--sp-2);font-size:14px}
.checklist .it{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-1) 0;font-size:14px}
table.fixed td form{display:inline}
/* renewal guides */
.gpick{max-width:520px}
.gcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.gauth{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.gauth .a{font-size:15px;font-weight:500}
.gauth .who{font-size:12.5px;color:var(--muted);font-weight:400}
.gintro{font-size:13px;color:var(--muted);margin:var(--sp-2) 0 2px;line-height:var(--lh-body)}
.flags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-3) 0 2px}
.flag{font-size:11px;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);background:var(--amber-bg);color:var(--amber-tx);font-weight:400}
.gsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin:var(--sp-3) 0}
.gstep{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3);background:#FAF9F3}
.gstep .no{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-2)}
.gstep .st{font-weight:500;font-size:13px;margin-bottom:var(--sp-1)}
.gstep .sd{font-size:12px;color:var(--muted);line-height:var(--lh-body)}
.gflow{overflow-x:auto;padding:var(--sp-1) 0 var(--sp-1);margin:var(--sp-1) 0 var(--sp-1)}
.gmeta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-1)}
.gmeta .m{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3);background:#fff}
.gmeta .m b{font-size:12px}.gmeta .m p{font-size:12.5px;color:var(--muted);margin-top:var(--sp-1);line-height:var(--lh-body)}
.gverify{font-size:11.5px;color:var(--muted);margin-top:var(--sp-3);line-height:var(--lh-body);border-top:1px solid var(--border);padding-top:var(--sp-2)}
@media(max-width:620px){.gmeta{grid-template-columns:1fr}}
/* firm overview */
.kpirow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.kpi{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-3);background:#FAF9F3}
.kpi .kn{font-size:24px;font-weight:500;line-height:1}
.kpi .kn.red{color:var(--red-tx)}
.kpi .kl{font-size:12px;color:var(--muted);margin-top:var(--sp-1)}
.agencygrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.agencycard{display:block;border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-4);background:var(--surface);text-decoration:none;color:var(--ink)}
.agencycard:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(46,59,39,.08)}
.ac-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-3)}
.ac-name{font-weight:500;font-size:15px}
.ac-loc{font-size:12px;color:var(--muted)}
.ac-arrow{color:var(--muted)}
.track{display:flex;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--border);margin-bottom:var(--sp-2)}
.track span{height:100%}
.ac-stats{display:flex;gap:var(--sp-4)}
.ac-stats .st{font-size:12px;color:var(--muted)}
.ac-stats .st b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.ac-stats .st.ok b{color:var(--ok-tx)}.ac-stats .st.amber b{color:var(--amber-tx)}.ac-stats .st.red b{color:var(--red-tx)}
@media(max-width:800px){.kpirow{grid-template-columns:1fr 1fr}.agencygrid{grid-template-columns:1fr}}
/* ===== Increment A: app shell (sidebar + profile menu). Supersedes the old .topnav chrome. ===== */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--primary-light);color:var(--ink);display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-3);position:sticky;top:0;height:100vh;border-right:1px solid var(--border)}
.side .brand{color:var(--primary-dark);text-decoration:none;font-weight:500;font-size:15px;padding:var(--sp-1) var(--sp-2);display:block}
.side .brand .v{color:#5E7A48}
.side-scope{font-size:11px;color:var(--muted);padding:2px var(--sp-2) var(--sp-3)}
.side-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-input);color:var(--ink);text-decoration:none;font-size:13px;font-weight:400}
.side-nav a svg{width:17px;height:17px;flex:none;color:var(--accent)}
.side-nav a.on svg{color:var(--primary-dark)}
.side-nav a:hover{background:rgba(31,47,31,.06);color:var(--primary-dark)}
.side-nav a.on{background:#fff;color:var(--primary-dark);font-weight:500;box-shadow:0 1px 2px rgba(31,47,31,.08)}
.side-nav a.admin-link{color:var(--accent)}
.side-sect{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:var(--sp-3) var(--sp-3) var(--sp-1)}
.side-spring{flex:1}
.main{min-width:0;display:flex;flex-direction:column}
.sv-top{min-height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.sv-top .crumb{font-size:13px;color:var(--muted)}
.sv-top .crumb b{color:var(--ink)}
.sv-top .sp{flex:1}
.sv-top .switcher{margin:0}
.sv-top .switcher select{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-input);border:1px solid var(--border);background:#fff;color:var(--ink);font-family:inherit;font-size:12px;width:auto}
.sv-top .ctx-resume{color:var(--accent);font-weight:500;text-decoration:none;font-size:12.5px}
.pill.ctx{background:var(--primary-light);color:var(--primary)}
.profile{position:relative}
.profile summary{list-style:none;cursor:pointer;display:flex;align-items:center}
.profile summary::-webkit-details-marker{display:none}
.av{width:34px;height:34px;border-radius:50%;background:var(--primary-light);color:var(--forest);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:12px}
.profile .menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--border);border-radius:var(--r-input);box-shadow:0 8px 24px rgba(46,59,39,.14);min-width:220px;width:max-content;max-width:320px;padding:var(--sp-1);z-index:20}
.profile .who{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border)}
.profile .who b{display:block;font-size:13.5px}
.profile .who span{font-size:12px;color:var(--muted)}
.profile .menu form{margin:0}
.profile .menu button{width:100%;text-align:left;background:none;border:none;padding:var(--sp-2) var(--sp-3);font-size:13px;color:var(--red-tx);border-radius:var(--r-input);cursor:pointer;font-family:inherit}
.profile .menu button:hover{background:#FAF9F3}
/* Impersonation bar — shared by _Layout + _DashboardLayout via _ImpersonationBanner partial */
.sv-imp{background:var(--amber-bg);border-bottom:1px solid var(--border);color:var(--amber-tx);display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);font-size:13px}
.sv-imp form{margin:0}
.sv-imp button{background:var(--amber-tx);color:var(--surface);border:none;border-radius:2px;padding:var(--sp-1) var(--sp-3);font-size:12px;font-weight:600;cursor:pointer}
/* Unauthenticated shell (login / sign-up / activation / reset / 404): soft sage wash so the
   screens read as branded, not blank. Cue: the marketing site's warm sage hero, dialled down. */
body.anon{min-height:100vh;background:linear-gradient(155deg,#FBFCFA 0%,#F2F5EC 52%,#E4EDD6 100%);background-attachment:fixed}
body.anon .card{box-shadow:0 18px 46px -26px rgba(31,47,31,.4)}
.topbar-anon{background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-6)}

/* ===== Signed-out split-screen shell (login / signup / forgot / reset / check-inbox / 404) ===== */
:root{--auth-cream:#F1F0E7;--auth-green:#3F6B3C;--auth-green-2:#335630;--auth-leaf:#4A7A48;--auth-leaf-soft:#E7EFE1;--auth-field:#F5F5EE;--auth-field-line:#E0E1D3;--auth-cta:#1F2F1F;--auth-cta-2:#16210E;--auth-serif:'Fraunces',Georgia,'Times New Roman',serif}
body.auth{margin:0;background:var(--auth-cream);color:#23301E;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.auth-screen{position:relative;min-height:100vh;background:var(--auth-cream);display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden}
.auth-screen.auth-error{grid-template-columns:.92fr 1.08fr}
.auth-wordmark{position:absolute;top:24px;left:30px;z-index:6;display:flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:18px;color:#23301E;text-decoration:none}
.auth-wordmark svg{width:auto;height:30px;display:block}
/* Dark mark by default (mobile has the light cream bg; error pages are light too). */
.auth-logo-light{display:none}
/* On desktop, the non-error left panel is dark (radar/skyline) — use the light mark there. */
@media(min-width:821px){.auth-screen:not(.auth-error) .auth-logo-dark{display:none}.auth-screen:not(.auth-error) .auth-logo-light{display:block}}
.auth-fronds{position:absolute;top:0;right:0;width:190px;height:150px;z-index:5;pointer-events:none;opacity:.9}
.auth-fronds svg{width:100%;height:100%}
.auth-left{position:relative;overflow:hidden;background:var(--auth-cream)}
/* Full-height skyline, faded back so the story text stays readable over it (not shrunk to a strip). */
.auth-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.auth-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--auth-cream) 0%,rgba(241,240,231,.72) 34%,rgba(241,240,231,.30) 60%,transparent 82%)}
.auth-li{position:relative;z-index:2;padding:var(--sp-10);display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.auth-error .auth-li{justify-content:center;min-height:0;padding:var(--sp-16) var(--sp-10)}
.auth-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--auth-green);margin:0 0 var(--sp-3)}
.auth-head{font-family:var(--auth-serif);font-weight:700;font-size:34px;line-height:var(--lh-tight);letter-spacing:0;margin:0 0 var(--sp-4);color:#222d1b;max-width:15ch;text-wrap:balance}
.auth-sub{font-size:14.5px;color:#4c5742;margin:0 0 var(--sp-6);max-width:38ch}
.auth-props{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.auth-props li{display:flex;align-items:center;gap:var(--sp-3);font-size:14px;color:#374229;font-weight:500}
.auth-props .ck{flex:none;width:30px;height:30px;border-radius:50%;background:var(--auth-leaf-soft);color:var(--auth-leaf);display:flex;align-items:center;justify-content:center}
.auth-props .ck svg{width:15px;height:15px}
.auth-right{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--sp-6) var(--sp-10);z-index:3}
.auth-card{width:100%;max-width:430px;background:#fff;border:1px solid #E9E9DA;border-radius:var(--r-card);box-shadow:0 26px 60px -28px rgba(35,48,30,.5);padding:var(--sp-8) var(--sp-8) var(--sp-6)}
.auth-card h1{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;margin:0 0 var(--sp-1);color:#222d1b}
.auth-card .auth-lead{font-size:13px;color:#5F6B53;margin:0 0 var(--sp-5)}
.auth-card label{display:block;font-size:12px;font-weight:600;color:#3a4530;margin:0 0 var(--sp-1)}
.auth-field{position:relative;margin:0 0 var(--sp-4)}
.auth-card input{width:100%;height:46px;border:1px solid var(--auth-field-line);background:var(--auth-field);border-radius:var(--r-input);padding:0 var(--sp-10) 0 var(--sp-3);font-size:14px;color:#23301E;font-family:inherit}
.auth-card input:focus{border-color:var(--auth-leaf);box-shadow:0 0 0 3px rgba(74,122,72,.16)}
.auth-card input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.auth-field .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#9aa387;pointer-events:none}
.auth-field .auth-eye{pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;display:block;color:#9aa387}
.auth-field .auth-eye:hover{color:var(--auth-leaf,#3F6B3C)}
.auth-field .auth-eye svg{width:17px;height:17px;display:block}
.auth-field .auth-eye svg[hidden]{display:none}
.auth-btn{width:100%;height:46px;border:none;border-radius:var(--r-input);background:var(--auth-cta);color:#fff;font-weight:600;font-size:14.5px;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-1)}
.auth-btn:hover{background:var(--auth-cta-2)}
.auth-linkr{display:block;text-align:right;font-size:12.5px;color:var(--auth-leaf);font-weight:600;margin:-4px 0 14px;text-decoration:none}
.auth-linkr:hover{text-decoration:underline}
.auth-foot{text-align:center;font-size:12.5px;color:#5F6B53;margin:var(--sp-4) 0 0}
.auth-foot+.auth-foot{margin-top:var(--sp-1)}
.auth-foot a{color:var(--auth-leaf);font-weight:600;text-decoration:underline}
.auth-hint{font-size:11.5px;color:#5F6B53;margin:-8px 0 14px}
.auth-err{background:#FDE7E7;color:#9A2C2C;border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:12.5px;margin:0 0 var(--sp-3);line-height:var(--lh-body)}
.auth-ok{background:var(--auth-leaf-soft);color:#2f5a2c;border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:12.5px;margin:0 0 var(--sp-3)}
.auth-chip{display:inline-block;background:var(--auth-leaf-soft);color:var(--auth-green);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:2px var(--sp-2);border-radius:var(--r-input);word-break:break-all}
/* 404 text side */
.nf-404{font-family:var(--auth-serif);font-weight:700;font-size:clamp(64px,9vw,96px);line-height:.9;color:#222d1b;margin:0}
.nf-h{font-family:var(--auth-serif);font-weight:700;font-size:28px;margin:var(--sp-1) 0 var(--sp-2);color:#33402a}
.nf-sub{font-size:14.5px;color:#4c5742;max-width:32ch;margin:0 0 var(--sp-5)}
.nf-btn{display:inline-flex;height:44px;padding:0 var(--sp-5);gap:var(--sp-2);border-radius:var(--r-input);background:var(--auth-cta);color:#fff;font-weight:600;font-size:13.5px;align-items:center;text-decoration:none}
.nf-btn:hover{background:var(--auth-cta-2)}.nf-btn svg{width:16px;height:16px}
.nf-art{position:relative;width:100%;height:100%;min-height:340px}
.nf-art svg{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:820px){.auth-screen,.auth-screen.auth-error{grid-template-columns:1fr}.auth-left{display:none}.auth-li{min-height:0}.auth-error .auth-left{display:block}.nf-art{min-height:240px}}
.topbar-anon .brand{display:inline-block;line-height:0}
/* documents inbox: type folders left, documents right */
.inbox{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--border);border-radius:var(--r-table);overflow:hidden;background:var(--surface)}
.inbox-list{border-right:1px solid var(--border);background:#FAF9F3;max-height:72vh;overflow-y:auto}
.inbox-list .hd{padding:var(--sp-3) var(--sp-3);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.folder{display:block;padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.folder:hover{background:#fff}
.folder.on{background:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.folder .fn{font-size:13px;font-weight:500}
.folder .fc{font-size:11.5px;color:var(--muted);margin-top:2px}
.folder .dots{display:flex;gap:var(--sp-1);margin-top:var(--sp-1)}
.folder .dots i{height:5px;border-radius:var(--r-input);min-width:6px}
.inbox-main{min-width:0;overflow-x:auto}
.inbox-main .mh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.inbox-main .mh b{font-size:15px}
.inbox-main th,.inbox-main td{padding:var(--sp-2) var(--sp-4)}
@media(max-width:800px){.inbox{grid-template-columns:1fr}.inbox-list{max-height:none}}
/* authed pages are a full-width view: left-aligned, fixed padding from the sidebar,
   content extends to the right edge. Not a centered, capped container. */
.page{padding:var(--sp-6) var(--sp-8)}
.page > h1:first-child{margin-top:0}
.inbox-main td:nth-child(2),.inbox-main td:nth-child(3),.inbox-main td:nth-child(4){white-space:nowrap}
.inbox-main summary{list-style:none}
.inbox-main summary::-webkit-details-marker{display:none}
@media(max-width:640px){.page{padding:var(--sp-4) var(--sp-3)}}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);padding:var(--sp-2) var(--sp-3)}
  .side .brand{padding:var(--sp-1) var(--sp-2)}
  .side-scope,.side-spring{display:none}
  .side-nav{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1)}
  .side-sect{display:none}
  .sv-top{position:static}
}
.plan-usage-card{border:1px solid var(--border);border-radius:var(--r-input);background:var(--surface);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
.plan-usage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2);font-weight:500}
.plan-usage-bar{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px;color:#7C8A66;margin-top:var(--sp-1)}
.plan-usage-bar progress{flex:1;height:6px}
.pricing-page{max-width:1040px;margin:40px auto;padding:0 var(--sp-6)}
.pricing-sub{color:#7C8A66;margin-bottom:var(--sp-6)}
.pricing-toggle{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.pricing-toggle button{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-input);border:1px solid var(--border);background:#fff;cursor:pointer;font-size:13px}
.pricing-toggle button.on{background:#2E3B27;color:#fff;border-color:#2E3B27}
.pricing-save{color:#5E7A48;font-weight:500}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.pricing-card{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-5);background:var(--surface);display:flex;flex-direction:column;gap:var(--sp-2)}
.pricing-price{font-size:28px;font-weight:700}
.pricing-price span{font-size:13px;font-weight:400;color:#7C8A66}
.pricing-benefits{list-style:none;padding:0;margin:0;font-size:13px;color:#4A583C;display:flex;flex-direction:column;gap:var(--sp-1);flex:1}
.pricing-benefits li::before{content:"✓ ";color:#5E7A48}
.pricing-cta{background:#2E3B27;color:#fff;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-input);font-size:13px;font-weight:500}
.checkout-page{max-width:420px;margin:60px auto;padding:0 var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.checkout-banner{background:#FFF4E5;color:#8A5A00;border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font-size:12.5px;text-align:center}
.checkout-page label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:13px}
.mock-button{display:inline-block;background:var(--green);color:#fff;border:none;border-radius:var(--r-input);padding:var(--sp-3) var(--sp-5);font-size:13px;font-weight:500;font-family:inherit;text-align:center;cursor:pointer}
.mock-button:hover{background:var(--forest-2)}
/* header plan/usage cluster */
.plancluster{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-3);border-left:1px solid var(--border)}
.plancluster .pname{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.plancluster .pseats{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
.plancluster .pbar{width:110px;height:6px;border-radius:var(--r-pill);background:var(--border);overflow:hidden}
.plancluster .pbar span{display:block;height:100%;background:var(--accent)}
.plancluster .ppct{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* owner tag, status dot, legend, view-all link — shared by dashboard preview and inbox */
.owntag{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:var(--r-input);background:#EDEBDF;color:var(--forest);font-size:9.5px;font-weight:700;flex:none}
.statusdot{width:7px;height:7px;border-radius:50%;flex:none}
.statusdot.green{background:var(--ok-tx)}.statusdot.amber{background:var(--amber-tx)}.statusdot.terra{background:var(--terra-tx)}.statusdot.red{background:var(--red-tx)}
.legend{font-size:11.5px;color:var(--muted);display:flex;gap:var(--sp-3);margin:var(--sp-1) 0 var(--sp-2)}
.legend .lg{display:inline-flex;align-items:center;gap:var(--sp-1)}
.subj{display:flex;align-items:center;gap:var(--sp-1)}
.viewall{display:block;text-align:right;margin-top:var(--sp-2);color:var(--accent);font-weight:500;font-size:12.5px;text-decoration:none}
.viewall:hover{color:var(--forest)}

/* documents inbox: 3rd column (owner rows + detail) added alongside the existing type-folder column.
   Both list-header bars get the same explicit height — matching padding values alone previously
   drifted apart and made the two columns look misaligned. This rule appears after the original
   `.inbox-list .hd` rule earlier in this file, so it wins the cascade for both selectors. */
.inbox{grid-template-columns:230px 240px 1fr}
.inbox-list .hd,.inbox-people .hd{height:38px;box-sizing:border-box;display:flex;align-items:center;padding:0 var(--sp-3)}
.inbox-people{border-right:1px solid var(--border);background:#FAF9F3}
.inbox-people .hd{font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.prow{display:block;padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--border);text-decoration:none;color:var(--ink)}
.prow:hover{background:#fff}
.prow.on{background:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.prow .pn{font-size:13px;font-weight:500;display:flex;align-items:center;gap:var(--sp-2)}
.prow .pd{font-size:11px;color:var(--muted);margin-top:var(--sp-1);padding-left:var(--sp-3)}

.doc-detail{padding:var(--sp-5) var(--sp-5);min-width:0}
.doc-detail .dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.doc-detail .dhead h2{font-size:16px;margin-bottom:var(--sp-1);font-family:'Playfair Display',Georgia,serif;font-weight:500}
.doc-detail .dsub{font-size:12px;color:var(--muted)}
.doc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:var(--sp-4)}
.doc-meta .m b{display:block;font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--sp-1)}
.doc-meta .m span{font-size:13.5px}
.doc-attach{display:flex;align-items:center;gap:var(--sp-2);border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-4);background:#FAF9F3}
.doc-attach .ic{width:30px;height:30px;border-radius:var(--r-input);background:var(--accent-lt);color:var(--forest);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.doc-attach .fn{font-size:12.5px;font-weight:500}
.doc-attach .fs{font-size:11px;color:var(--muted)}
.doc-attach a{margin-left:auto;color:var(--accent);font-weight:500;font-size:12px;text-decoration:none}
.doc-timeline{border-top:1px solid var(--border);padding-top:var(--sp-3)}
.doc-timeline .th{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:var(--sp-2)}
.doc-event{display:flex;gap:var(--sp-2);padding:var(--sp-2) 0}
.doc-event .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:var(--sp-1);flex:none}
.doc-event .tc{font-size:13px}
.doc-event .tt{font-size:11px;color:var(--muted);margin-top:1px}
@media(max-width:900px){.inbox{grid-template-columns:1fr}}

/* ---- Inline review drawers on the Attach step (Needs review / Unmatched) ------------------ */
/* Stat cards are buttons that open the review drawers — reset the native button chrome. */
button.stat-card{width:100%;text-align:left;font:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s}
button.stat-card:not(.zero):hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(31,47,31,.08)}
button.stat-card.zero{cursor:default;opacity:.7}
.stat-card-cta{margin-top:var(--sp-2);font-size:12px;font-weight:700;color:var(--error)}
.stat-card-cta[hidden]{display:none}
/* Review item cards inside the drawers. */
.rv-gh-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.rv-gsub{font-size:12.5px;color:var(--muted);margin:0 0 var(--sp-3);line-height:var(--lh-body)}
.rv-bulk{background:none;border:1px solid var(--border);color:var(--primary);font:inherit;font-size:12.5px;font-weight:600;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-input);cursor:pointer;white-space:nowrap}
.rv-bulk:hover{border-color:var(--accent);background:var(--primary-light)}
.rv-emp-group{margin:0 0 var(--sp-4)}
.rv-emp{font-size:13px;font-weight:700;color:var(--ink);margin:0 0 var(--sp-1)}
.rv-item{border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-2);background:var(--surface)}
.rv-item .pd-file-row{margin:2px 0 var(--sp-1)}
.rv-item .pd-fields{margin-top:var(--sp-1)}
.pd-meta{font-size:12.5px;color:var(--muted);margin:2px 0 var(--sp-1)}
.pd-note{font-size:11.5px;color:var(--muted);margin:2px 0 var(--sp-2);line-height:var(--lh-snug)}
/* DS Ghost — soft green fill so the in-card confirm reads as a button, not text. */
.pd-confirm{background:var(--primary-light);border:1px solid transparent;color:var(--primary);font:inherit;font-size:13px;font-weight:600;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-ghost);cursor:pointer;margin-top:var(--sp-2)}
.pd-confirm:hover{background:var(--forest);color:#fff}
.pd-confirm:disabled{opacity:.6;cursor:default}
/* Auto-detected document type: same dropdown chrome as the picker, but locked (non-interactive). */
.svpick.is-locked{margin:0 0 var(--sp-1)}
.svpick.is-locked .svpick-btn{cursor:default;background:var(--neutral-light);color:var(--ink)}
.svpick.is-locked .svpick-btn:after{opacity:.4}
/* Tighter vertical rhythm inside review cards — no oversized gap before the number/date row. */
.rv-item .svpick{margin-bottom:var(--sp-1)}
.rv-item .pd-fields{margin-top:var(--sp-1)}
.rv-cf-err{font-size:12px;color:var(--error);margin-top:var(--sp-1)}
.rv-cf-err[hidden]{display:none}
/* Searchable dropdown (employee / type pickers). */
.svpick{position:relative;margin:0 0 var(--sp-2)}
.svpick-btn{width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:var(--r-input);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2)}
.svpick-btn.placeholder{color:var(--muted)}
.svpick-btn:after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);flex:none;margin-top:-3px}
.svpick-panel{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-input);box-shadow:0 14px 34px -18px rgba(28,30,22,.5);overflow:hidden}
.svpick-panel[hidden]{display:none}
.svpick-search{width:100%;border:none;border-bottom:1px solid var(--border);padding:var(--sp-2) var(--sp-3);font:inherit;font-size:13px;outline:none;background:var(--card);color:var(--ink)}
.svpick-list{max-height:230px;overflow:auto}
.svpick-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:var(--sp-2) var(--sp-3);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.svpick-opt:hover,.svpick-opt.active{background:var(--primary-light)}
.svpick-empty{padding:var(--sp-2) var(--sp-3);font-size:12.5px;color:var(--muted)}
.rv-empty[hidden]{display:none}
.up-card.busy{pointer-events:none}
.up-card.busy .dropzone{border-style:solid;background:var(--primary-light)}
/* Uploading status — fills the whole upload card (green), hides every other action. Shared by the
   Attach zip upload and the Excel import so both read identically. Bar sits on the green, no white box. */
.up-card.uploading,.eimp-card.uploading{background:var(--primary-light);border-color:var(--accent);box-shadow:none}
.up-card.uploading .up-card-head,.up-card.uploading .up-note,.up-card.uploading #zip-form{display:none}
.up-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-height:200px;padding:var(--sp-8) var(--sp-6);text-align:center}
.up-loading[hidden]{display:none}
.up-loading-title{font-size:15px;font-weight:700;color:var(--primary-dark);max-width:90%}
.up-loading-txt{font-size:14px;font-weight:600;color:var(--primary);margin-top:var(--sp-1)}
.up-loading-note{font-size:12.5px;color:var(--muted);margin-top:2px}
.up-loading-track{width:min(360px,80%);height:8px;border-radius:var(--r-pill);background:rgba(31,47,31,.14);overflow:hidden}
.up-loading-bar{height:100%;width:0;background:var(--primary);border-radius:var(--r-pill);transition:width .18s ease}
.up-loading-bar.err{background:var(--error)}
.up-loading-bar.indet{width:35%;animation:upIndet 1.15s ease-in-out infinite}
@keyframes upIndet{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
.rv-pickrow{display:flex;gap:var(--sp-2)}
.rv-pickcol{flex:1;min-width:0}
@media(max-width:520px){.rv-pickrow{flex-direction:column;gap:0}}

/* Chunked-upload reject list — files the client or server rejected (oversize / wrong type). Never
   silently dropped: this always renders under the upload card after a batch finishes. */
.up-rejects{margin-top:var(--sp-3);border:1px solid var(--error);border-radius:var(--r-input);background:var(--error-light,rgba(200,60,60,.06));padding:var(--sp-3)}
.up-rejects[hidden]{display:none}
.up-rej-h{font-size:13px;font-weight:700;color:var(--error);margin-bottom:var(--sp-1)}
.up-rej-row{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:13px;padding:2px 0;color:var(--ink)}
.up-rej-row em{font-style:normal;color:var(--muted)}


/* ── PRO onboarding · Structure 3.2: agency⇄organisation assignment (simplified) ── */
.asn-summary{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:var(--sp-4);margin-bottom:var(--sp-4)}
.asn-summary b{color:var(--ink);font-weight:600}
.asn-sep{color:var(--border)}
.asn-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.asn-chip{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-pill);padding:7px 14px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.asn-chip:hover{border-color:var(--accent)}
.asn-chip.on{background:var(--primary-dark);color:var(--surface);border-color:var(--primary-dark)}
.asn-chip .n{font-weight:600;opacity:.85}
.asn-chips.asn-disabled{opacity:.6;pointer-events:none}
.asn-chips.asn-disabled .asn-chip,.asn-chips.asn-disabled .asn-chip.on{background:var(--surface);color:var(--muted);border-color:var(--border)}
.asn-row .onm{cursor:pointer}
.asn-row .onm:hover,.asn-row .onm:focus-visible{color:var(--primary);text-decoration:underline;text-underline-offset:2px;outline:none}
.asn-hovercard{position:fixed;z-index:70;width:320px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(31,47,31,.16);padding:var(--sp-4);font-size:13px;pointer-events:none}
.asn-hovercard[hidden]{display:none}
.asn-hovercard .hc-name{font-weight:600;color:var(--ink);font-size:14px}
.asn-hovercard .hc-legal{color:var(--muted);font-size:12px;margin-top:2px}
.asn-hovercard .hc-body{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:6px}
.asn-hovercard .hc-row{display:flex;gap:var(--sp-3);align-items:baseline}
.asn-hovercard .hc-k{flex:none;width:66px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.asn-hovercard .hc-v{flex:1;min-width:0;color:var(--ink);word-break:break-word}
.asn-controls{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4)}
.asn-search{flex:1;min-width:0;position:relative}
.asn-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:var(--r-input);font:inherit;background:var(--surface)}
.asn-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,161,107,.2)}
.asn-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.asn-agencyfilter{flex:none;width:auto;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-input);font:inherit;background:var(--surface);color:var(--ink);min-width:150px;max-width:280px}
.asn-list{border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;background:var(--card)}
.asn-grp+.asn-grp{border-top:1px solid var(--border)}
.asn-grphead{display:grid;grid-template-columns:1fr 260px;gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--sp-4);background:var(--neutral-light)}
.asn-grphead .gt{font-weight:600;font-size:14px;min-width:0}
.asn-grphead .gt .em{color:var(--muted);font-weight:400;margin-left:8px}
.asn-grphead .gt .warn{color:var(--amber-tx);font-weight:400;margin-left:8px}
.asn-assignall{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.asn-assignall select{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--border);border-radius:var(--r-input);font:inherit;font-size:13px;background:var(--surface)}
/* When rows are selected, the selection bar is the only assign path — dim the frozen pickers. */
.asn-list.asn-selecting .asn-assignall,.asn-list.asn-selecting select.pick{opacity:.45}
.asn-list.asn-selecting select:disabled{cursor:not-allowed}
.asn-row{display:grid;grid-template-columns:26px 1fr 260px;gap:var(--sp-4);align-items:center;padding:10px var(--sp-4);border-top:1px solid var(--border);font-size:14px}
/* Visually-hidden text for screen readers (status words that the dot alone can't convey). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Status matches the Organisations tab: leading dot + subtle DS status-bg tint (never colour alone). */
.asn-row .onm::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;background:var(--muted)}
.asn-row.auto,.asn-row.saved,.asn-row.manual{background:var(--ok-bg)}
.asn-row.auto .onm::before,.asn-row.saved .onm::before,.asn-row.manual .onm::before{background:var(--success)}
.asn-row.review{background:var(--amber-bg)}
.asn-row.review .onm::before{background:var(--warning)}
.asn-row.none{background:var(--red-bg)}
.asn-row.none .onm::before{background:var(--error)}
.asn-row:hover{box-shadow:inset 3px 0 0 var(--accent)}
.asn-cb{width:15px;height:15px;accent-color:var(--primary);opacity:.55;transition:opacity .1s}
.asn-row:hover .asn-cb,.asn-cb:checked{opacity:1}
.asn-row .onm{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-self:start;max-width:100%}
.asn-row select.pick{width:100%;padding:8px 9px;border:1px solid var(--border);border-radius:var(--r-input);font:inherit;font-size:14px;background:var(--surface);color:var(--ink)}
.asn-empty{padding:48px;text-align:center;color:var(--muted)}
.asn-empty .big{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:var(--ink);margin-bottom:6px}
.asn-selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;background:var(--primary-dark);color:var(--surface);border-radius:var(--r-pill);padding:10px var(--sp-4);display:none;align-items:center;gap:var(--sp-3);box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:60;white-space:nowrap}
.asn-selbar.show{display:flex}
.asn-selbar select{padding:6px 10px;border-radius:var(--r-input);border:none;font:inherit;font-size:13px}
.asn-selbar button{background:var(--primary);color:var(--surface);border:none;border-radius:var(--r-pill);padding:7px 16px;font:inherit;font-weight:600;cursor:pointer}
.asn-selbar button:hover{background:var(--primary-dark)}
.asn-selbar .x{background:none;color:rgba(255,255,255,.7);padding:6px;cursor:pointer}
@media(max-width:640px){.asn-grphead,.asn-row{grid-template-columns:1fr}.asn-assignall,.asn-row select.pick{grid-column:1}.asn-cb{display:none}}

/* Map group accordion: collapse/expand a location's rows. Default open. */
.asn-grphead .gt.asn-gtoggle{background:none;border:none;font:inherit;font-weight:600;color:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;text-align:left;padding:0;min-width:0}
.asn-chev{flex:none;color:var(--muted);transition:transform .15s}
.asn-grp.collapsed .asn-chev{transform:rotate(-90deg)}
.asn-grp.collapsed .asn-row{display:none}

/* Global busy-lock: while an upload/import is in flight, freeze every control so nothing
   double-submits or navigates away mid-operation. Add `sv-busy` to <body> on start; the page
   reload on completion clears it (AJAX flows call svBusy(false)). Mark anything that must stay
   live with `.sv-busy-keep`. Ground rule — every upload/import path must set this.
   Controls are made unclickable (pointer-events) but NOT dimmed or given a wait cursor —
   the page should read as "uploading" (the import affordance shows progress), not frozen. */
body.sv-busy a,body.sv-busy button,body.sv-busy [role=button]{pointer-events:none}
body.sv-busy input,body.sv-busy select,body.sv-busy textarea{pointer-events:none}
body.sv-busy .sv-busy-keep,body.sv-busy .sv-busy-keep,body.sv-busy .sv-busy-keep *{pointer-events:auto !important;opacity:1 !important}

/* Shared search box (_Search.cshtml + sv-search.js) */
.sv-search{position:relative;display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;max-width:28rem}
.sv-search-ico{position:absolute;left:10px;color:var(--muted);pointer-events:none;display:flex}
.sv-search-in{flex:1;min-width:0;padding:8px 10px 8px 32px;border:1px solid var(--border);border-radius:var(--r-input);background:var(--card);color:var(--ink);font-size:14px}
.sv-search-in:focus{outline:2px solid var(--primary-light);outline-offset:1px}
.sv-search-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--border);border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow:auto}
.sv-search-opt{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:2px;cursor:pointer}
.sv-search-opt.is-active,.sv-search-opt:hover{background:var(--primary-light)}
.sv-search-opt-l{font-size:14px;color:var(--ink)}
.sv-search-opt-s{font-size:12px;color:var(--muted)}
/* result with a leading icon: icon column + stacked text (icon aligns to the first text line) */
.sv-search-opt.has-ic{flex-direction:row;align-items:flex-start;gap:9px}
.sv-search-opt-ic{flex:none;margin-top:1px;color:var(--muted);display:flex}
.sv-search-opt-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
/* non-clickable guidance line (data-hints): "keep typing…", "no matches…" */
.sv-search-hint{padding:8px 10px;font-size:12.5px;color:var(--muted);cursor:default}
.sv-search-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}