/* Brand fonts, self-hosted (same origin, no font CDN): Cabinet (display, 700/800) and Switzer (body, 400-700), as on
   simplyhrconsulting.com. Files live in web/fonts/; scripts/build-web.mjs copies them, the Worker caches them for a year, so a
   changed font must get a new file name. Licence: docs/design/brand.md. */
@font-face{font-family:Cabinet;src:url(/fonts/cabinet-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Cabinet;src:url(/fonts/cabinet-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(/fonts/switzer-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  /* raw scales: components never use these directly */
  --n-0:#FFFFFF; --n-25:#F6F8FB; --n-50:#EFF3F8; --n-100:#E4EAF2; --n-200:#D5DDE8; --n-300:#B9C5D5; --n-400:#7A8BA3; --n-500:#5E7088; --n-600:#4A5B71; --n-700:#33445A; --n-800:#1C2B40; --n-850:#121D2E; --n-900:#0B1422; --n-950:#06172C;
  /* website brand (simplyhrconsulting.com): ink, action blue, logo blue, paper, soft blue. Map: docs/design/brand.md */
  --brand-ink:#0B1F33; --brand-act:#1668D6; --brand-sky:#68B1FF; --brand-paper:#F5F9FE; --brand-soft:#DBE9FA;
  --b-50:#EEF5FF; --b-100:#DCEBFF; --b-200:#B9D7FF; --b-300:#8DC0FF; --b-400:#68B1FF; --b-500:#4C93F0; --b-600:#1668D6; --b-700:#1155B4; --b-800:#0E4591; --b-900:#0C3670;
  /* semantic tokens (light) */
  --bg:#F5F9FE; --surface:#FFFFFF; --surface-2:#E9F0FA; --surface-soft:#DBE9FA; --surface-raised:#FFFFFF; --line:#E4EAF2; --line-strong:#D5DDE8; --ctl:#7A8BA3;
  --ink:#0B1F33; --ink-2:#4A5B71; --ink-3:#57697D; --btn-line:#D5DDE8;
  --act:#1668D6; --act-hover:#1155B4; --act-soft:#EEF5FF; --act-ink:#1155B4;
  --btn:#1668D6; --btn-hover:#1155B4; --btn-danger:#C0362C; --on-btn:#FFFFFF; --on-warn:#FFFFFF;
  --ok:#13794A; --ok-soft:#E8F5EE; --warn:#9A5B00; --warn-soft:#FDF3E1; --bad:#B42318; --bad-soft:#FDEDEC; --bad-line:#F5C2BE;
  --navy:#06172C; --navy-2:#0C2340; --on-navy:#FFFFFF; --on-navy-2:#BEDCFF;
  --feature-bg:#06172C; --feature-ink:#FFFFFF; --feature-ink-2:#BEDCFF; --feature-line:#06172C;
  --focus:#1668D6; --scrim:rgba(6,23,44,.48); --toast-line:#0B1F33;
  --e-1:0 1px 2px rgba(6,23,44,.05); --e-2:0 1px 2px rgba(6,23,44,.06),0 4px 12px rgba(6,23,44,.06); --e-3:0 2px 6px rgba(6,23,44,.08),0 16px 40px rgba(6,23,44,.16);
  --p-hr:#1668D6; --p-ops:#0E9384; --p-sales:#6E56CF; --p-tech:#475569; --p-retention:#C11574;
  /* toast is dark in both themes */
  --toast-bg:#0B1F33; --toast-ink:#E8EDF4; --toast-act:#8DC0FF; --toast-ok:#5BD39A; --toast-bad:#FF8F85;
  /* type */
  --f-sans:Switzer,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-display:Cabinet,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --f-sign:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
  --t-display:40px; --t-h1:26px; --t-h2:18px; --t-h3:15px; --t-body:15px; --t-body-sm:14px; --t-caption:13px; --t-label:13px; --t-overline:11px; --t-stat:28px; --t-price:44px;
  /* spacing (4px base), radius, motion */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-sheet:16px 16px 0 0;
  --d-fast:120ms; --d-base:180ms; --d-slow:260ms; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,.0,.2,1);
  --notch:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); --notch-sm:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
  --bar-h:56px; --top-h:56px;
  /* legacy names still referenced by older screens (aliases, resolve per theme) */
  --line-2:var(--line-strong); --btn-hi:var(--btn-hover); --btn-bad:var(--btn-danger); --act-hi:var(--act-hover); --tick:var(--ctl); --sky:#68B1FF;
  --f-disp:var(--f-display); --f-body:var(--f-sans);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1422; --surface:#121D2E; --surface-2:#172438; --surface-soft:#16294A; --surface-raised:#1A2A40; --line:#22324A; --line-strong:#2C3E58; --ctl:#61738C;
  --ink:#E8EDF4; --ink-2:#A3B1C4; --ink-3:#8B9BB1; --btn-line:#61738C;
  --act:#4C93F0; --act-hover:#68B1FF; --act-soft:rgba(76,147,240,.16); --act-ink:#8DC0FF;
  --btn:#2B6FD6; --btn-hover:#1F5FC2; --btn-danger:#C93C31; --on-btn:#FFFFFF; --on-warn:#1C1200;
  --ok:#5BD39A; --ok-soft:rgba(91,211,154,.14); --warn:#F0B85A; --warn-soft:rgba(240,184,90,.14); --bad:#FF8F85; --bad-soft:rgba(255,143,133,.14); --bad-line:#5A2A2A;
  --navy:#070F1B; --navy-2:#0E1A2B; --on-navy:#FFFFFF; --on-navy-2:#9FB3CC;
  --feature-bg:#1A2A40; --feature-ink:#E8EDF4; --feature-ink-2:#A3B1C4; --feature-line:#2C3E58;
  --focus:#68B1FF; --scrim:rgba(0,0,0,.6); --toast-line:#2C3E58;
  --e-1:0 0 0 0 transparent; --e-2:0 0 0 1px #2C3E58; --e-3:0 0 0 1px #2C3E58,0 16px 40px rgba(0,0,0,.5);
  --p-hr:#68B1FF; --p-ops:#2DD4BF; --p-sales:#A694F5; --p-tech:#94A3B8; --p-retention:#F472B6;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0B1422; --surface:#121D2E; --surface-2:#172438; --surface-soft:#16294A; --surface-raised:#1A2A40; --line:#22324A; --line-strong:#2C3E58; --ctl:#61738C;
  --ink:#E8EDF4; --ink-2:#A3B1C4; --ink-3:#8B9BB1; --btn-line:#61738C;
  --act:#4C93F0; --act-hover:#68B1FF; --act-soft:rgba(76,147,240,.16); --act-ink:#8DC0FF;
  --btn:#2B6FD6; --btn-hover:#1F5FC2; --btn-danger:#C93C31; --on-btn:#FFFFFF; --on-warn:#1C1200;
  --ok:#5BD39A; --ok-soft:rgba(91,211,154,.14); --warn:#F0B85A; --warn-soft:rgba(240,184,90,.14); --bad:#FF8F85; --bad-soft:rgba(255,143,133,.14); --bad-line:#5A2A2A;
  --navy:#070F1B; --navy-2:#0E1A2B; --on-navy:#FFFFFF; --on-navy-2:#9FB3CC;
  --feature-bg:#1A2A40; --feature-ink:#E8EDF4; --feature-ink-2:#A3B1C4; --feature-line:#2C3E58;
  --focus:#68B1FF; --scrim:rgba(0,0,0,.6); --toast-line:#2C3E58;
  --e-1:0 0 0 0 transparent; --e-2:0 0 0 1px #2C3E58; --e-3:0 0 0 1px #2C3E58,0 16px 40px rgba(0,0,0,.5);
  --p-hr:#68B1FF; --p-ops:#2DD4BF; --p-sales:#A694F5; --p-tech:#94A3B8; --p-retention:#F472B6;
  color-scheme:dark;
}

/* ==========================================================================
   SimplyHR portal design system v1 (see docs/build-history/design/DESIGN-SPEC.md and COMPONENTS.md)
   Order: tokens (above) > reset + base type > utilities > layout/shell > components > legacy screen leftovers > motion + print
   ========================================================================== */

/* ---------- reset + base type ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
#root{min-height:100%;display:flex;flex-direction:column}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Words wrap whole. Only known long tokens (emails, URLs, file names, ids) may break anywhere: use .break-all */
h1,h2,h3,h4,p,li,dd,dt,label,td,th,.chip,.box,.kv,.note,.err,.callout,.lrow,.field{overflow-wrap:break-word}
.break-all{overflow-wrap:anywhere;word-break:normal}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance}
/* Cabinet ships 700 and 800 only: headings say 700 so the browser never fakes a weight. h4 is small enough to read better in Switzer. */
h1{font-size:var(--t-h1);line-height:32px;font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:26px;font-weight:700;letter-spacing:-.012em}
h3{font-size:var(--t-h3);line-height:22px;font-weight:700;letter-spacing:-.005em}
h4{font-family:var(--f-sans);font-size:14px;line-height:20px;font-weight:600}
p{margin:0;text-wrap:pretty}
a{color:var(--act);text-underline-offset:2px}
a:hover{color:var(--act-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
hr{border:0;border-top:1px solid var(--line);margin:0}
fieldset{min-width:0;border:0;padding:0;margin:0}
pre{max-width:100%}
details > summary{list-style:revert;cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px}
@media (max-width:719px){details > summary{min-height:44px}}
.num,td,.stat-value,.price,.count,.cnt{font-variant-numeric:tabular-nums}
.ico{flex:none;display:block}
.btn .ico{width:16px;height:16px}
[hidden]{display:none!important}
@media (max-width:719px){h1{font-size:22px;line-height:28px}}

/* focus: always visible, never removed */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:inherit}
.top :focus-visible,.hero-band :focus-visible,.dark :focus-visible{outline-color:var(--b-400)}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-120px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.skip:focus{top:8px;z-index:80;background:var(--surface);color:var(--ink);padding:8px 16px;border-radius:999px;box-shadow:var(--e-3);font-weight:600;text-decoration:none}

/* ---------- utilities ---------- */
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.small{font-size:13px;line-height:18px}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-2{display:flex;flex-direction:column;gap:8px}
.stack-3{display:flex;flex-direction:column;gap:12px}
.stack-4{display:flex;flex-direction:column;gap:16px}
.stack-6{display:flex;flex-direction:column;gap:24px}
.stack-lg{display:flex;flex-direction:column;gap:20px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.nowrap{flex-wrap:nowrap}
.row-2{gap:8px}.row-4{gap:16px}
.between{justify-content:space-between}
.end{justify-content:flex-end}
.grow{flex:1 1 0;min-width:0}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.text-right{text-align:right}
.nowrap-text{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.overdue{color:var(--bad)}
.span{grid-column:1/-1}
.only-narrow{display:none}
@media (max-width:719px){.only-wide{display:none!important}.only-narrow{display:flex}.hide-phone{display:none!important}.hide-narrow{display:none}}
@media (min-width:720px){.show-phone{display:none!important}}
.eyebrow{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--act-ink)}
.lede{font-size:16px;line-height:24px;color:var(--ink-2);max-width:68ch}
.help{font-size:13px;line-height:18px;color:var(--ink-3)}
.ver{font-size:12px;color:var(--ink-3)}
.pre{white-space:pre-wrap;font-family:var(--f-mono);background:var(--surface-2);border-radius:var(--r-sm);padding:12px 16px;margin:0;font-size:13px;line-height:20px;overflow-wrap:anywhere}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;background:var(--btn);color:var(--on-btn);font-weight:600;font-size:14px;line-height:20px;cursor:pointer;clip-path:var(--notch);text-decoration:none;white-space:nowrap;position:relative;transition:background-color var(--d-fast),color var(--d-fast),border-color var(--d-fast),transform var(--d-fast)}
.btn:hover{background:var(--btn-hover);color:var(--on-btn)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--on-btn);outline-offset:-4px;border-radius:0}
.btn.sm{min-height:32px;padding:0 12px;font-size:13px;clip-path:var(--notch-sm)}
.btn.block{width:100%}
.btn.link{text-decoration:none}
/* secondary (legacy .ghost keeps this look for one release) */
.btn.secondary,.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--btn-line),var(--e-1);clip-path:none;border-radius:var(--r-sm)}
.btn.secondary:hover,.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.secondary:focus-visible,.btn.ghost:focus-visible,.btn.tertiary:focus-visible,.btn.danger:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
/* true ghost / tertiary */
.btn.tertiary{background:transparent;color:var(--ink-2);box-shadow:none;clip-path:none;border-radius:var(--r-sm)}
.btn.tertiary:hover{background:var(--surface-2);color:var(--ink)}
/* danger */
.btn.danger-solid,.btn.danger.solid,.btn.danger:not(.secondary):not(.ghost):not(.tertiary){background:var(--btn-danger);color:var(--on-btn);clip-path:none;border-radius:var(--r-sm)}
.btn.danger-solid:hover,.btn.danger.solid:hover,.btn.danger:not(.secondary):not(.ghost):not(.tertiary):hover{background:var(--btn-danger);filter:brightness(.92)}
.btn.secondary.danger,.btn.ghost.danger{background:var(--surface);color:var(--bad)}
.btn.secondary.danger:hover,.btn.ghost.danger:hover{background:var(--bad-soft);color:var(--bad)}
/* disabled never looks live: flat grey, no opacity trick */
.btn:disabled,.btn[aria-disabled=true]{background:var(--surface-2);color:var(--ink-3);box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.btn.secondary:disabled,.btn.ghost:disabled,.btn.tertiary:disabled{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn[aria-busy=true]{cursor:progress}
.btn .spin{width:16px;height:16px;border-width:2px;border-color:currentColor;border-top-color:transparent}
.btn-reason{font-size:13px;line-height:18px;color:var(--ink-3)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);flex:none;transition:background-color var(--d-fast),color var(--d-fast)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn:active{transform:translateY(1px)}
.iconbtn:disabled{color:var(--ink-3);cursor:not-allowed}
.top .iconbtn{color:var(--on-navy-2)}
.top .iconbtn:hover{background:var(--navy-2);color:var(--on-navy)}
.linkbtn{min-width:32px;text-align:left;background:none;border:0;padding:0;color:var(--act);font-weight:500;cursor:pointer;font-size:inherit;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.linkbtn:hover{color:var(--act-hover);text-decoration:underline;text-underline-offset:2px}
.check .linkbtn{align-self:flex-start}
@media (max-width:719px){
  .btn{min-height:44px}
  .btn.sm{min-height:44px;min-width:44px}
  .iconbtn{width:44px;height:44px}
  .linkbtn{min-height:44px;min-width:44px}
}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field .flabel{font-size:13px;line-height:18px;font-weight:500;color:var(--ink)}
.field .flabel .opt-mark{color:var(--ink-3);font-weight:400}
.field .hint{font-size:13px;line-height:18px;font-weight:400;color:var(--ink-3)}
.field .fe{display:flex;gap:6px;align-items:flex-start;color:var(--bad);font-weight:500;font-size:13px;line-height:18px}
.field .fe .ico{width:14px;height:14px;margin-top:2px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--bad)}
input[type=text],input[type=number],input[type=email],input[type=date],input[type=tel],input[type=password],input[type=search],input[type=url],input[type=month],input[type=time],input[type=datetime-local],select,textarea{min-height:40px;border:1px solid var(--ctl);border-radius:var(--r-sm);padding:0 12px;background:var(--surface);color:var(--ink);font-size:15px;line-height:22px;font-weight:400;width:100%;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--act);box-shadow:0 0 0 3px rgba(22,104,214,.22);box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 22%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
input[readonly]{background:var(--surface-2)}
textarea{padding:9px 12px;min-height:96px;max-height:320px;resize:vertical}
@supports (field-sizing:content){textarea{field-sizing:content}}
textarea.tall{min-height:150px}
textarea.short{min-height:64px}
select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8BA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
input[type=number]{text-align:right}
td input[type=number]{width:96px;min-height:36px}
input[type=range]{min-height:28px;padding:0;border:0;background:transparent;box-shadow:none;accent-color:var(--act)}
input[type=file]{min-height:0}
@media (max-width:719px){input[type=text],input[type=number],input[type=email],input[type=date],input[type=tel],input[type=password],input[type=search],input[type=url],input[type=month],input[type=time],input[type=datetime-local],select,textarea{font-size:16px;min-height:44px}textarea{min-height:96px}td input[type=number]{min-height:44px}.prow input[type=number]{min-height:44px}}
.input-group{display:flex;align-items:stretch;position:relative}
.input-group > .adorn{position:absolute;left:12px;top:0;bottom:0;display:flex;align-items:center;color:var(--ink-3);pointer-events:none}
.input-group > .adorn + input{padding-left:26px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px}
.field.wide{grid-column:1/-1}
.mini-input{width:100%}
/* checkbox + radio */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;border:1.5px solid var(--ctl);background:var(--surface);min-height:0;padding:0;box-shadow:none;transition:background-color var(--d-fast),border-color var(--d-fast)}
input[type=checkbox]{border-radius:var(--r-xs)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate{background:var(--act) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");border-color:var(--act)}
input[type=radio]:checked{border-color:var(--act);background:radial-gradient(circle,var(--act) 0 4.5px,var(--surface) 5px)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.opt{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:22px;cursor:pointer;padding:11px 0;min-height:44px}
.opt > input{margin-top:2px}
.opt > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt > span > .small,.opt > span > .muted{font-size:13px;line-height:18px;color:var(--ink-2)}
/* choice card: radio or checkbox as a card */
.choice{position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;cursor:pointer;min-width:0;transition:border-color var(--d-fast),box-shadow var(--d-fast),background-color var(--d-fast)}
.choice:hover{border-color:var(--line-strong)}
.choice > input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.choice > .c-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.choice .c-title{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.choice .c-ok{display:none;color:var(--act);flex:none}
.choice .c-off{display:block;color:var(--ink-3);flex:none}
.choice.sel,.choice:has(input:checked){border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act);background:var(--act-soft)}
.choice.sel .c-ok,.choice:has(input:checked) .c-ok{display:block}
.choice.sel .c-off,.choice:has(input:checked) .c-off{display:none}
.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.choice:has(input:disabled){opacity:.6;cursor:not-allowed}

/* ---------- layout + shell ---------- */
.top{background:var(--navy);color:var(--on-navy);position:sticky;top:0;z-index:30;height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.top .spacer{flex:1}
.brand{display:flex;gap:10px;align-items:center;color:var(--on-navy);text-decoration:none;min-width:0;min-height:44px}
.brand:hover{color:var(--on-navy)}
.brand img{height:28px;width:auto;display:block}
.brand .wm{display:flex;flex-direction:column;line-height:1.1;margin-left:2px}
.brand .wm b{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.top-tag{font-size:13px;font-weight:500;color:var(--on-navy-2);padding-left:12px;border-left:1px solid rgba(190,220,255,.3)}
.top a.top-link{color:var(--on-navy-2);font-size:13px;font-weight:500;text-decoration:none;display:inline-flex;gap:6px;align-items:center;padding:6px 8px;border-radius:var(--r-sm)}
.top a.top-link:hover{color:var(--on-navy);background:var(--navy-2)}
.acctwrap{position:relative}
.acct{display:flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--on-navy);padding:4px 8px 4px 4px;border-radius:999px;min-height:40px;font-size:14px;font-weight:500}
.acct:hover,.acct[aria-expanded=true]{background:var(--navy-2)}
.acct .nm{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .ico{color:var(--on-navy-2)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--b-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.avatar.lg{width:56px;height:56px;font-size:18px}
.avatar.sm{width:24px;height:24px;font-size:10px}
@media (max-width:1079px){.acct .nm,.acct .chev{display:none}.acct{padding:0;min-height:44px;min-width:44px;justify-content:center}}
@media (max-width:719px){.top{--top-h:52px;height:52px}.top-tag{display:none}.brand .wm{display:none}}
@media (min-width:360px) and (max-width:719px){.brand .wm{display:flex}}
.popover{position:absolute;z-index:40;right:0;top:calc(100% + 8px);width:256px;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-3);padding:8px;display:flex;flex-direction:column;gap:2px}
.popover.left{right:auto;left:0}
.popover .p-id{padding:8px 8px 10px;display:flex;flex-direction:column;gap:0;min-width:0}
.popover .p-id b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.popover .p-id span{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.popover .p-sec{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 8px 4px}
.popover hr{margin:6px 0}
.pitem{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 8px;border:0;background:transparent;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;text-align:left}
.pitem:hover{background:var(--surface-2);color:var(--ink)}
.pitem .ico{color:var(--ink-3)}
.pitem.danger{color:var(--bad)}
.pitem.danger .ico{color:var(--bad)}
.sheet .pitem{min-height:48px;padding:0 12px}
.menuwrap{position:relative;display:inline-block}

.app{display:flex;flex:1 1 auto;align-items:flex-start;min-height:0;min-width:0}
.sidenav{width:240px;flex:none;position:sticky;top:var(--top-h);height:calc(100dvh - var(--top-h));overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.sidenav .navgroup{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 6px}
.sidenav .navgroup:first-child{padding-top:4px}
.navitem{position:relative;display:flex;align-items:center;gap:12px;min-height:36px;padding:0 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:background-color var(--d-fast),color var(--d-fast)}
.navitem .ico{color:var(--ink-3)}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem.on{background:var(--act-soft);color:var(--act-ink);font-weight:600}
.navitem.on .ico{color:var(--act-ink)}
.navitem.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--act)}
.navitem .count{margin-left:auto}
.navitem.locked{color:var(--ink-3)}
.main{flex:1 1 0;min-width:0;padding:32px max(40px,env(safe-area-inset-right,0px)) 72px max(40px,env(safe-area-inset-left,0px))}
#root > .main{flex:1 1 auto}
.page{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.page.reading,.page.narrow-page{max-width:760px}
.page > .head{margin-bottom:-8px}
.narrow{max-width:520px;width:100%;margin:0 auto}
.center-page{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px}
@media (max-width:719px){
  .main{padding:20px 16px 48px}
  .page{gap:24px}
  .page > .head{margin-bottom:0}
}
/* phone bottom tab bar */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--e-2);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbtn{position:relative;flex:1 1 0;min-width:0;min-height:var(--bar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px 4px;border:0;background:transparent;color:var(--ink-3);font-size:11px;line-height:14px;font-weight:500;text-decoration:none;text-align:center}
.tabbtn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabbtn .ico{width:22px;height:22px}
.tabbtn.on{color:var(--act)}
.tabbtn.on::before{content:"";position:absolute;top:0;left:50%;width:20px;height:3px;margin-left:-10px;border-radius:0 0 3px 3px;background:var(--act)}
.has-bar .main{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 24px)}
/* banners above the top bar */
.banner{display:flex;gap:8px 16px;align-items:center;justify-content:space-between;min-height:40px;padding:6px max(16px,env(safe-area-inset-left,0px));font-size:13px;line-height:18px;background:var(--warn-soft);color:var(--warn);font-weight:500}
.banner .b-msg{display:flex;gap:8px;align-items:center;min-width:0}
.banner .b-act{display:flex;gap:4px;align-items:center;flex:none}
.banner .linkbtn{color:inherit;font-weight:600;min-height:28px;text-decoration:underline;text-underline-offset:2px}
.banner .linkbtn:hover{color:inherit}
.banner a{color:inherit}
.banner.info{background:var(--act-soft);color:var(--act-ink)}
.banner .pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--warn);color:var(--on-warn);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:719px){.banner .linkbtn{min-height:44px;min-width:44px}}

/* page header */
.head{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-end}
.head .t{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 320px}
.head .h-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
.head .meta,.meta-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:13px;line-height:18px;color:var(--ink-2)}
.head .meta > *,.meta-line > *{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.head .meta > *:not(:last-child)::after,.meta-line > *:not(:last-child)::after{content:"";flex:none;width:3px;height:3px;border-radius:50%;background:var(--ink-3);margin:0 8px}
.head .meta > .tag::after,.meta-line > .tag::after{display:none}
.head .meta > .tag,.meta-line > .tag{margin-right:12px}
.head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.head.keep{flex-wrap:nowrap;align-items:flex-end}
.head.keep > .btn{flex:none}
.back{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;min-height:32px;margin-left:-4px;padding-right:8px}
.back:hover{color:var(--ink)}
.back .ico{width:16px;height:16px}
@media (max-width:719px){.back{min-height:44px;margin-top:-8px}.head-actions{width:100%}.head-actions .btn{flex:1 1 auto}}
.sticky-actions{position:sticky;bottom:0;z-index:20;display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--e-2)}
@media (max-width:719px){
  .sticky-actions{position:fixed;left:0;right:0;bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .has-bar .sticky-actions{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding-bottom:12px}
  .sticky-actions .btn{flex:1 1 auto}
}

/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.grid.dense{grid-auto-flow:dense}
@media (max-width:719px){.grid.dense{grid-auto-flow:row}}
.box > .chip{align-self:flex-start}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
@media (max-width:719px){.grid,.grid-2{gap:12px}}
.split{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.split > .wide{flex:999 1 480px;min-width:0}
.split > .side{flex:1 1 280px;min-width:0}
@media (min-width:1080px){.split.rail{flex-wrap:nowrap}.split.rail > .wide{flex:1 1 0}.split.rail > .side{flex:0 0 320px;position:sticky;top:calc(var(--top-h) + 16px)}}

/* ---------- cards ---------- */
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-1);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:719px){.box{padding:16px}}
.box.sel{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act),var(--e-1)}
.box.click{cursor:pointer;text-align:left;font:inherit;color:inherit;transition:box-shadow var(--d-fast),border-color var(--d-fast)}
.box.click:hover{border-color:var(--line-strong);box-shadow:var(--e-2)}
a.box,a.box:hover{text-decoration:none;color:inherit}
.box .foot,.box-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.box-foot{justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font-size:13px;color:var(--ink-2)}
.box-label{font-size:13px;line-height:18px;font-weight:600;color:var(--ink-2)}
.bhead{display:flex;align-items:center;gap:8px;min-height:24px;min-width:0}
.bhead > .ico{color:var(--ink-3)}
.bhead > h3,.bhead > .box-label{flex:1 1 auto;min-width:0}
.bhead > .aside{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.box.lockedbox{border-style:dashed;background:transparent;box-shadow:none}
.box.lockedbox h3{color:var(--ink-2)}
/* emphasis box: sits above the page in both themes (never a hole darker than the page) */
.dark{background:var(--feature-bg);color:var(--feature-ink);border:1px solid var(--feature-line);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:8px}
.dark .muted,.dark .box-label,.dark .small{color:var(--feature-ink-2)}
.dark .linkbtn{color:var(--feature-ink);text-decoration:underline}
.dark h1,.dark h2,.dark h3{color:var(--feature-ink)}
.dark.hero{padding:36px 28px;gap:14px;border-radius:var(--r-lg)}
@media (max-width:719px){.dark.hero{padding:24px 18px}}
.big{font-family:var(--f-display);font-size:28px;line-height:32px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .stat-label{font-size:13px;line-height:18px;font-weight:500;color:var(--ink-2)}
.stat .stat-value{font-family:var(--f-display);font-size:var(--t-stat);line-height:32px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.stat .stat-cap{font-size:13px;line-height:18px;color:var(--ink-3)}
@media (max-width:719px){.stat .stat-value{font-size:clamp(20px,6vw,28px)}.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px}}
@media (min-width:720px){.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}}
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv > span:first-child{color:var(--ink-2)}
.kv > b,.kv > span:last-child{font-weight:500;text-align:right;max-width:60ch;overflow-wrap:anywhere}
.kv > b{font-weight:600}
.sec-title{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:center}
section.stack > .row > h2{margin:0}

/* ---------- chips, tags, counts ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;max-width:100%;padding:0 8px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--ink-2);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;vertical-align:middle}
.chip > .chip-t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.info{background:var(--act-soft);color:var(--act-ink)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.lockchip,.chip.lock{background:var(--surface-2);color:var(--ink-2)}
.chip-btn{cursor:pointer;border:0}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-2);min-width:0}
.tag > i{width:8px;height:8px;border-radius:50%;background:var(--tagc,var(--ink-3));flex:none}
.tag.p-hr{--tagc:var(--p-hr)}.tag.p-ops{--tagc:var(--p-ops)}.tag.p-sales{--tagc:var(--p-sales)}.tag.p-tech{--tagc:var(--p-tech)}.tag.p-retention{--tagc:var(--p-retention)}
.count,.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:11px;line-height:16px;font-weight:600;flex:none;margin-left:6px}
.navitem .count{height:20px;min-width:20px;margin-left:auto}
.navitem.on .count,.tabbtn .count{background:var(--act);color:var(--on-btn)}
.flagline{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-2)}
.flagline .ico{width:16px;height:16px;margin-top:1px}
.flagline.bad{color:var(--bad)}.flagline.warn{color:var(--warn)}.flagline.ok{color:var(--ok)}
.flags{display:flex;flex-direction:column;gap:4px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.ini{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600;flex:none}

/* ---------- tabs, segmented, filter chips ---------- */
.tabs-box{position:relative;width:100%;min-width:0}
.tabs,.seg.tabs{position:relative;display:flex;flex-wrap:nowrap;gap:4px;box-shadow:inset 0 -1px 0 var(--line);background:transparent;border-radius:0;padding:0;width:100%;max-width:100%}
.tabs.ghost{position:absolute;left:0;top:0;width:max-content;max-width:none;height:0;overflow:hidden;visibility:hidden;pointer-events:none;box-shadow:none}
.tabs.ghost > span{flex:none;display:inline-flex;align-items:center;padding:0 12px;font-size:14px;font-weight:600;white-space:nowrap}
.tabs > button,.seg.tabs > button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:40px;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--ink-2);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;min-width:0;position:relative;box-shadow:none;transition:color var(--d-fast)}
.tabs > button:hover,.seg.tabs > button:hover{color:var(--ink);background:transparent}
.tabs > button[aria-selected=true],.seg.tabs > button.on,.seg.tabs > button[aria-pressed=true]{color:var(--ink);font-weight:600;background:transparent;box-shadow:none}
.seg.tabs > button.on::after,.seg.tabs > button[aria-pressed=true]::after,.seg.tabs > button[aria-selected=true]::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--act)}
.tabs .tab-ind{position:absolute;bottom:0;height:2px;background:var(--act);border-radius:2px 2px 0 0;transition:left var(--d-base) var(--ease-out),width var(--d-base) var(--ease-out)}
.tabs > button:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.tabs > button[aria-selected=true] .count,.seg.tabs > button.on .cnt,.seg.tabs > button[aria-pressed=true] .cnt,.seg.tabs > button[aria-selected=true] .cnt{background:var(--act-soft);color:var(--act-ink)}
@media (max-width:719px){.tabs > button,.seg.tabs > button{min-height:44px}}
/* tabs that do not fit (or >3 on a phone) become one select: never cut off, never sideways */
.tabs-pick{display:flex;flex-direction:column;gap:6px;width:100%}
.tabs-pick .flabel{font-size:13px;line-height:18px;font-weight:500;color:var(--ink-2)}
.tabs-pick select{width:100%;font-weight:600}
/* segmented control: 2-4 mutually exclusive options that change a value */
.seg{display:flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--surface-2);border-radius:var(--r-md);max-width:100%;width:fit-content}
.seg > button{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;transition:background-color var(--d-fast),color var(--d-fast),box-shadow var(--d-fast)}
.seg > button:hover{color:var(--ink)}
.popover .seg > button,.sheet .seg > button,.dlg .seg.full > button{padding:0 6px;gap:6px;font-size:13px}
.seg > button .ico{width:16px;height:16px}
.seg > button.on,.seg > button[aria-pressed=true],.seg > button[aria-checked=true]{background:var(--surface-raised);color:var(--ink);font-weight:600;box-shadow:var(--e-1),0 0 0 1px var(--line)}
.seg > button:disabled{color:var(--ink-3);cursor:not-allowed}
.seg > button:focus-visible{outline-offset:0}
.seg.full{width:100%}
.seg.full > button{flex:1 1 0}
.seg.cols4{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);width:100%}
.seg > button .cnt,.seg > button .count{margin-left:6px}
.seg > button.on .cnt,.seg > button[aria-pressed=true] .cnt{background:var(--act-soft);color:var(--act-ink)}
@media (max-width:719px){.seg > button{min-height:44px}.seg{width:100%}}
.seg5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.seg5 button{min-height:44px;border:1px solid var(--ctl);background:var(--surface);border-radius:var(--r-sm);font-size:16px;font-weight:600}
.seg5 button.on,.seg5 button[aria-pressed=true]{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act);background:var(--act-soft);color:var(--act-ink)}
/* filter chips: wrap on desktop, one select on phones */
.filter{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0;max-width:100%}
.filter > button{position:relative;flex:none;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap;transition:background-color var(--d-fast),color var(--d-fast)}
.filter > button:hover{background:var(--surface-2)}
.filter > button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.filter-pick{display:block;width:100%}
.filter-pick select{width:100%}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toolbar .search{flex:1 1 220px;max-width:360px}
.toolbar select{width:auto;min-width:140px}
.toolbar .filter{flex:1 1 auto;min-width:0}
.toolbar .filter-pick{flex:1 1 100%}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
th{text-align:left;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);padding:0 16px;height:40px;background:var(--surface-2);border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:10px 16px;min-height:52px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
td:first-child{color:var(--ink);font-weight:500}
th.r,td.r{text-align:right}
tr:last-child td{border-bottom:0}
.tablewrap table{min-width:520px}
.dtable tbody tr.click{cursor:pointer}
.dtable tbody tr.click:hover td{background:var(--surface-2)}
.dtable td{height:52px}
.dtable td.trunc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead-sticky th{position:sticky;top:0}
.dtlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.dtlist > li + li{border-top:1px solid var(--line)}
.dtrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;color:inherit;text-decoration:none;width:100%;background:transparent;border:0;text-align:left}
a.dtrow:hover,button.dtrow:hover{background:var(--surface-2);color:inherit}
.dtrow .d-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dtrow .d-title{font-size:15px;line-height:20px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.dtrow .d-sub{font-size:13px;line-height:18px;color:var(--ink-3);overflow-wrap:anywhere}
.dtrow .d-end{display:flex;align-items:center;gap:8px;flex:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dtrow .d-end .ico{color:var(--ink-3)}

/* ---------- lists + checklists ---------- */
.lrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0;min-height:56px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow > .l{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lrow > .r{flex:0 1 190px;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.lrow > .r select{min-width:0}
@media (max-width:480px){.lrow > .r{flex:1 1 100%;justify-content:flex-end}}
.lrow.nw{flex-wrap:nowrap}
.lrow.nw > .l{flex:1 1 auto}
.lrow.nw > .r{flex:none}
.userrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.userrow:last-child{border-bottom:0}
.prow{display:grid;grid-template-columns:minmax(78px,1fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:8px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow.hd{padding:0 0 6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.prow.p4{grid-template-columns:minmax(78px,1fr) repeat(2,minmax(0,1.1fr))}
.prow input[type=number]{width:100%;min-height:40px;padding:0 8px}
.li-row{display:grid;grid-template-columns:minmax(0,1fr) 110px auto auto;gap:8px;align-items:center}
@media (max-width:719px){.li-row{grid-template-columns:minmax(0,1fr) 96px}.li-row > :nth-child(n+3){justify-self:start}}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:0}
.tick{position:relative;width:44px;height:44px;margin:-12px -12px -12px -12px;border:0;background:transparent;flex:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:var(--on-btn)}
.tick::before{content:"";width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ctl);box-sizing:border-box;transition:background-color var(--d-fast),border-color var(--d-fast)}
.tick > .ico{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;display:none}
.tick.done::before{background:var(--ok);border-color:var(--ok)}
.tick.done > .ico{display:block}
.tick.doing::before{border-color:var(--act);background:var(--act-soft)}
.tick.done ~ * .done-text,.check.is-done .check-text{color:var(--ink-2)}

/* ---------- feedback: callout, empty state, skeleton, spinner ---------- */
.callout,.note,.err{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);font-size:14px;line-height:20px;background:var(--act-soft);color:var(--act-ink);border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--act) 25%,transparent)}
.callout > .ico{margin-top:0}
.callout > .c-body,.callout > .callout-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.callout > .c-act{flex:none;margin:-6px -8px -6px 0}
.note{display:block}
.note.warn,.callout.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.note.ok,.callout.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.err,.note.bad,.callout.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.note a{color:inherit;font-weight:600}
.note a.btn{color:var(--on-btn)}
.note a.btn.ghost,.note a.btn.secondary{color:var(--ink)}
.callout.accent{border-left:3px solid var(--act)}
.pending-note{border:1px dashed var(--act);border-radius:var(--r-sm);padding:10px 12px;background:var(--act-soft);color:var(--act-ink);font-size:14px}
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:28px;text-align:center;color:var(--ink-2)}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 16px}
.empty-state.framed{border:1px dashed var(--line-strong);border-radius:var(--r-md)}
.empty-state .es-ico{width:40px;height:40px;border-radius:50%;background:var(--surface-2);color:var(--ink-3);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.empty-state .es-title{font-family:var(--f-sans);font-size:15px;line-height:22px;font-weight:600;color:var(--ink);letter-spacing:0;margin:0}
.empty-state .es-body{font-size:14px;line-height:20px;color:var(--ink-2);max-width:44ch}
.empty-state .es-act{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sk{display:block;background:var(--surface-2);border-radius:var(--r-xs);height:14px}
.sk.h{height:20px;width:40%}
.sk.block{height:96px}
.sk-card{display:flex;flex-direction:column;gap:12px}
.sk-lines{display:flex;flex-direction:column;gap:10px}
.sk-lines .sk:last-child{width:60%}
.sk-table{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:0 16px}
.sk-table .sk-row{display:flex;gap:16px;align-items:center;height:52px;border-bottom:1px solid var(--line)}
.sk-table .sk-row:last-child{border-bottom:0}
.sk-table .sk{flex:1}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--act);display:inline-block;vertical-align:middle}
.loading{display:flex;gap:12px;align-items:center;justify-content:center;padding:48px 16px;color:var(--ink-2)}
.login-wrap{max-width:860px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:24px}
.login-logo{display:flex;justify-content:center;background:var(--navy);padding:18px;border-radius:var(--r-md)}
.login-logo img{height:40px}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--toast-bg);color:var(--toast-ink);border:1px solid var(--toast-line);border-radius:var(--r-md);box-shadow:var(--e-3);padding:12px 16px;font-size:14px;line-height:20px;font-weight:500}
.toast > .ico{color:var(--toast-act)}
.toast.success > .ico{color:var(--toast-ok)}
.toast.error > .ico{color:var(--toast-bad)}
.toast > .t-msg{flex:1;min-width:0}
.toast .t-act{background:none;border:0;padding:0 4px;min-height:32px;color:var(--toast-act);font-weight:600;font-size:14px}
.toast .t-act:hover{text-decoration:underline}
.toast .iconbtn{color:var(--toast-ink);width:32px;height:32px;margin:-6px -8px -6px 0}
.toast .iconbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.toast :focus-visible{outline-color:var(--b-400)}
@media (max-width:719px){.toasts{left:16px;right:16px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.has-bar .toasts{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 12px)}}

/* ---------- dialogs + sheets ---------- */
.dialog{padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-raised);color:var(--ink);box-shadow:var(--e-3);width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);overflow:hidden}
.dialog.lg{width:min(640px,calc(100vw - 32px))}
.dialog[open]{display:flex;flex-direction:column}
.dialog::backdrop{background:var(--scrim)}
.dlg{display:flex;flex-direction:column;min-height:0;flex:1}
.dlg-head{display:flex;align-items:center;gap:12px;padding:16px 20px 0}
.dlg-head h2{flex:1;font-size:18px;line-height:26px;font-weight:600;min-width:0}
.dlg-head .iconbtn{margin-right:-8px}
.dlg-grab{display:none;width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:8px auto 0}
.dlg-body{padding:12px 20px 20px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:12px}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--line)}
body:has(dialog[open]){overflow:hidden}
.dialog.sheet,.dialog.sheet.lg{margin:auto 0 0;width:100%;max-width:none;border-radius:var(--r-sheet);border-bottom:0;max-height:90dvh}
.dialog.sheet .dlg-grab{display:block}
.dialog.sheet .dlg-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
@media (max-width:719px){
  .dialog,.dialog.lg{margin:auto 0 0;width:100%;max-width:none;border-radius:var(--r-sheet);border-bottom:0;max-height:90dvh}
  .dialog .dlg-grab{display:block}
  .dlg-foot{flex-direction:column-reverse;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .dlg-foot .btn{width:100%}
  .dlg-body{padding-bottom:16px}
}

/* ---------- progress: stepper, meter, timeline ---------- */
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.stepper > li{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;line-height:18px;color:var(--ink-2)}
.stepper > li > i{display:block;height:4px;border-radius:2px;background:var(--surface-2)}
.stepper > li.done > i{background:var(--ok)}
.stepper > li.now > i{background:var(--act)}
.stepper > li.now{color:var(--ink);font-weight:600}
.stepper > li > span{overflow-wrap:normal;word-break:normal;hyphens:manual}
.stepper.compact > li > span{display:none}
.stepper-wrap{container-type:inline-size}
.stepper-sum{font-size:13px;line-height:18px;color:var(--ink-2);margin-top:8px}
.stepper-sum.alt{display:none}
/* a stepper in a narrow card never prints per-segment labels (they run into each other): bars plus one summary line */
@container (max-width:460px){.stepper:not(.compact) > li > span{display:none}.stepper-sum.alt{display:block}}
.stepper > li > span{overflow:hidden;text-overflow:ellipsis}
.stepper-sum b{color:var(--ink);font-weight:600}
/* legacy .stages markup (div > i + .small) shares the stepper look */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.stages > div{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:18px;color:var(--ink-2);min-width:0}
.stages > div > i{height:4px;border-radius:2px;background:var(--surface-2);display:block}
.stages > div.done > i{background:var(--ok)}
.stages > div.now > i{background:var(--act)}
.stages > div.now{color:var(--ink);font-weight:600}
.stages > div .small{overflow-wrap:normal;word-break:normal;hyphens:manual}
.stages.bars-only > div .small,.stages.bars-only > div.now .small{display:none!important}
.bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
@media (max-width:719px){
  /* phone: bars only, then one line naming the current step (no per-segment labels, no mid-word breaks) */
  .stages{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));row-gap:6px}
  .stages > div{display:contents}
  .stages > div > i{grid-row:1}
  .stages > div .small{display:none}
  .stages > div.now .small{display:block;grid-row:2;grid-column:1/-1;color:var(--ink)}
  .stages.many{grid-template-columns:repeat(auto-fit,minmax(24px,1fr))}
}
.meter .m-head{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:18px;margin-bottom:6px;color:var(--ink-2)}
.meter .m-head b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.m-track,.bar,.prog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.m-track > i,.bar > i,.prog > i{display:block;height:100%;background:var(--act);border-radius:3px;transition:width var(--d-base) var(--ease-out)}
.meter.ok .m-track > i,.bar.ok > i{background:var(--ok)}
.meter.warn .m-track > i{background:var(--warn)}
.meter.bad .m-track > i{background:var(--bad)}
.timeline{list-style:none;margin:0;padding:0}
.timeline > li{position:relative;padding:0 0 20px 28px;display:flex;flex-direction:column;gap:2px;min-width:0}
.timeline > li::before{content:"";position:absolute;left:11px;top:14px;bottom:-4px;width:1px;background:var(--line)}
.timeline > li:last-child{padding-bottom:0}
.timeline > li:last-child::before{display:none}
.timeline > li::after{content:"";position:absolute;left:7px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 3px var(--surface)}
.timeline > li.tl-day::before,.timeline > li.tl-day::after{display:none}
.timeline > li.tl-day{padding-bottom:8px}
.timeline > li.ok::after{background:var(--ok)}
.timeline > li.info::after{background:var(--act)}
.timeline > li.warn::after{background:var(--warn)}
.timeline > li.bad::after{background:var(--bad)}
.timeline .tl-title{font-size:14px;line-height:20px;font-weight:500}
.timeline .tl-body{font-size:14px;line-height:20px;color:var(--ink-2)}
.timeline .tl-meta{font-size:12px;line-height:16px;color:var(--ink-3)}
.timeline .tl-day{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-3);padding:0 0 8px 28px;position:sticky;top:var(--top-h);background:var(--surface)}
.tl{display:flex;flex-direction:column}
.tl > div{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl > div:last-child{border-bottom:0}

/* ---------- files + signature ---------- */
.freq{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line);min-height:56px}
.freq:last-child{border-bottom:0}
.freq > .ico{color:var(--ink-3);margin-top:2px}
.freq .f-act{align-self:center}
.freq.received > .ico{color:var(--ok)}
.freq .f-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.freq .f-title{font-size:15px;line-height:20px;font-weight:500}
.freq .f-desc{font-size:13px;line-height:18px;color:var(--ink-2)}
.freq .f-file{font-size:13px;color:var(--ink-2);display:flex;gap:8px;min-width:0}
.freq .f-file .truncate{max-width:240px}
.freq .f-act{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.freq .f-err{grid-column:2/-1;color:var(--bad);font-size:13px}
.freq .f-prog{grid-column:2/-1}
@media (max-width:719px){
  .freq{grid-template-columns:20px minmax(0,1fr)}
  .freq .f-act{grid-column:2;justify-content:stretch;flex-direction:column;align-items:stretch}
  .freq .f-act .btn{width:100%}
  .freq.received .f-act{flex-direction:row;justify-content:flex-start;align-items:center}
  .freq.received .f-act .btn{width:auto}
}
.dropzone,.drop{border:1.5px dashed var(--line-strong);border-radius:var(--r-md);padding:24px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;cursor:pointer;color:var(--ink-2)}
.dropzone.over,.drop.over{border-color:var(--act);background:var(--act-soft)}
.dropzone .ico{color:var(--ink-3)}
.dropzone u{color:var(--act);font-weight:600;text-decoration:none}
.dropzone input[type=file],.drop input[type=file]{display:none}
@media (max-width:719px),(pointer:coarse){.dropzone{display:none}}
.filebar{display:flex;gap:10px;align-items:center}
.signblock{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
@media (max-width:719px){.signblock{padding:16px}}
.sig-preview{border-bottom:1px solid var(--line);padding:4px 0 6px;min-height:52px;display:flex;align-items:flex-end}
.sig-preview .sig{font-family:var(--f-sign);font-size:28px;line-height:36px;color:var(--ink);overflow-wrap:anywhere}
.sig-cap{font-size:12px;color:var(--ink-3);margin-top:6px}
.sign-done{display:flex;flex-direction:column;gap:12px}
.sign-done .sd-head{display:flex;gap:12px;align-items:flex-start;color:var(--ok)}
.sign-done .sd-head b{color:var(--ink)}
.sign-next{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}

/* ---------- legacy screen leftovers (kept working; screens are restyled by B1/B2) ---------- */
.lock{flex:none;vertical-align:-2px}
.lockbanner{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;background:var(--act-soft);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:18px 20px}
.lockbanner > .lock{width:22px;height:22px;color:var(--act-ink)}
.locked-preview{opacity:.5;pointer-events:none;user-select:none;filter:blur(1.5px);display:flex;flex-direction:column;gap:16px}
.sum3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sum3 .box{padding:14px;gap:4px}
.sum3 .box-label{font-size:11px}
.sum3 b{font-family:var(--f-display);font-size:20px;font-weight:600;white-space:nowrap}
.steps{display:flex;flex-direction:column;gap:2px}
.steps button{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--r-sm);padding:10px 12px;font-size:14px;color:var(--ink-2);min-height:44px}
.steps button.on{background:var(--act-soft);border-color:transparent;color:var(--act-ink);font-weight:600}
@media (max-width:719px){.stepside{flex-basis:100%!important}.steps{display:grid;grid-template-columns:1fr 1fr;gap:6px}.steps button{padding:8px;font-size:13px;border-color:var(--line)}}
.vlist{display:flex;flex-direction:column}
.vlist > div{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.vlist > div:last-child{border-bottom:0}
.diff{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.getting{border-color:var(--act)}
.sticky-save{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.xbtn{background:none;border:0;padding:0;color:inherit;font-weight:700;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-8px -8px -8px -2px;border-radius:var(--r-sm)}
@media (max-width:719px){.xbtn{min-width:44px;min-height:44px;margin:-12px -12px -12px -4px}}
.theme-seg{display:inline-flex}
.fb-back{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto}
.fb-card{background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;width:100%;max-width:480px;margin-top:6vh;box-shadow:var(--e-3)}
.drop input[type=file]{display:none}
.pdfmargin{margin-top:4px}
@media (max-width:719px){.hide-narrow{display:none}}
.stages.phases > div:not(.now) .small{display:none}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes in{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
  @keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes dlg-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
  @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .page{animation:in var(--d-base) var(--ease-out)}
  .spin{animation:spin .8s linear infinite}
  .sk{animation:pulse 1.2s ease-in-out infinite}
  .toast{animation:toast-in var(--d-base) var(--ease-out)}
  .dialog[open]{animation:dlg-in var(--d-slow) var(--ease-out)}
  .dialog.sheet[open]{animation:sheet-in var(--d-slow) var(--ease-out)}
  .dialog::backdrop{animation:fade var(--d-slow) var(--ease-out)}
  .popover{animation:pop-in var(--d-fast) var(--ease-out)}
  @media (max-width:719px){.dialog[open]{animation:sheet-in var(--d-slow) var(--ease-out)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .btn:active,.iconbtn:active{transform:none}
  .sk{animation:none}
  .dialog[open],.toast,.popover{animation:fade 120ms linear!important}
}

/* ---------- print ---------- */
@media print{
  .top,.bottombar,.sidenav,.banner,.toasts,.sticky-actions,.skip,.no-print{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .main{padding:0}
  .hero-band{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  section,.box,.signblock{break-inside:avoid}
}

/* === B1 screens === */
.top-start{align-items:flex-start}
.minw0{min-width:0}
.gap-wide{gap:16px 24px}
.gap-2{gap:8px}
.mb-3{margin-bottom:12px}
.pre-line{white-space:pre-line}
.grow-filter{flex:1 1 auto;min-width:0}
.status-filter{min-width:150px}
.person{display:inline-flex;align-items:center;gap:8px;min-width:0}
.cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.cell-main{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.cell-sub{font-size:var(--t-caption);color:var(--ink-3);overflow-wrap:anywhere}
.searchbox{position:relative;display:block;flex:1 1 240px;max-width:380px}
.searchbox>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.searchbox input{width:100%;padding-left:36px}
.bhead-t{margin:0;min-width:0;overflow-wrap:anywhere}
.meta-line{color:var(--ink-3)}
.stat-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.stat-line .big{font-size:var(--t-stat);font-weight:700;color:var(--ink);line-height:1}
.ok-ico{color:var(--ok)}
.plainlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plainlist.rows{gap:0}
.plainlist li:has(> .ico:first-child){display:flex;gap:8px;align-items:flex-start}
.plainlist li > .ico:first-child{margin-top:3px}
.kvlist{display:flex;flex-direction:column;gap:8px}
.stage-move select{min-width:150px}
.composer-collapsed{width:100%;text-align:left}
.composer{display:flex;flex-direction:column;gap:12px}
/* builders */
.has-sbar{padding-bottom:calc(var(--bar-h) + 112px)}
@media (min-width:821px){.has-sbar{padding-bottom:0}}
.price-big{font-family:var(--f-display);font-size:var(--t-price);font-weight:700;line-height:1.05;color:var(--ink);overflow-wrap:anywhere}
.price-big.small-val{font-size:var(--t-h1)}
.price-unit{font-size:var(--t-h3);font-weight:500;color:var(--ink-3);margin-left:4px}
.price-end{align-items:flex-end;text-align:right}
.signed-hero{border-left:4px solid var(--ok)}
.builder-bar .sbar-col{display:flex;flex-direction:column;gap:8px;width:100%}
.builder-bar .sbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.builder-bar .sbar-sum{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:8px}
.range{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.box.tight{padding:12px}
.scorebox{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qlist>li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.r-auto{margin-left:auto}
.q-seg{flex:0 0 auto}
/* offer picker */
.offer-list{display:flex;flex-direction:column;gap:12px;max-height:340px;overflow:auto}
.offer-opt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);cursor:pointer;min-height:44px}
.offer-opt:hover{border-color:var(--act)}
.offer-opt.sel{border-color:var(--act);background:var(--act-soft)}
.offer-opt-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.offer-opt .c-ok{color:var(--act);flex:none}
/* state chips */
.state-chip{gap:4px}
@media (max-width:820px){
  .searchbox{max-width:none;flex-basis:100%}
  .price-end{align-items:flex-start;text-align:left}
}
/* workspace + helper utilities */
.g2{gap:2px}.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}
.row-end{align-items:flex-end}
.jend{justify-content:flex-end}
.fit{flex:0 0 auto!important}
.lrow > .r.full{flex:1 1 100%}
.lrow > .r.start{justify-content:flex-start}
.lrow > .r.col{flex-direction:column;align-items:stretch}
.divided{padding:12px 0;border-bottom:1px solid var(--line)}
.divided:last-of-type{border-bottom:0}
.pointer{cursor:pointer}
.mt-2{margin-top:8px}
.mw-440{min-width:440px}
.warn-text{color:var(--warn)}
.minh-20{min-height:20px}
.hours-read{min-height:44px;display:flex;align-items:center;gap:6px}
.w-150{width:150px;max-width:100%}
.w-170{width:170px;max-width:100%}
.done-text{color:var(--ink-2)}
.seg5{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.stages.phases{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.rail-person{display:flex;flex-direction:column;gap:2px}
.side .box{min-width:0}
.linkbtn-row{display:flex;gap:8px;flex-wrap:wrap}

/* === B2 screens === */
/* Client, public and login screens (engineer B2). Spliced in by hand: edit the region, not the rest of the file. */

/* ---------- proposal: the premium sales document (PublicProposal, PublicOffer) ---------- */
main.pp{display:block;padding:0;flex:1 1 auto;min-width:0}
.pp-inner{width:100%;max-width:1120px;margin:0 auto;padding:0 40px}
.pp-top .top-tag{display:inline-block}
.pp-top .top-link{margin-right:4px}
.pp-wrap{max-width:560px;margin:0 auto;padding:64px 16px}
.pp-load{padding:80px 16px}
.pp-over{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pp-sub{margin:0;font-size:14px;color:var(--ink-2)}
.pp-fine{margin:0;font-size:13px;line-height:18px;color:var(--ink-3)}
.pp-prose{white-space:pre-wrap;max-width:68ch;font-size:16px;line-height:26px;color:var(--ink)}
.pp-prose.small{font-size:14px;line-height:22px}

/* hero band */
.hero-band.pp-hero{background:var(--navy);color:var(--on-navy);padding:64px 0;border-bottom:1px solid var(--b-600)}
.pp-hero .pp-inner{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between}
.pp-hero-main{display:flex;flex-direction:column;gap:12px;min-width:0;flex:1 1 420px}
.pp-eyebrow{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--b-300)}
.pp-hero h1{font-size:var(--t-display);line-height:44px;font-weight:700;letter-spacing:-.025em;color:var(--on-navy);max-width:20ch;margin:0}
.pp-lede{margin:0;font-size:17px;line-height:26px;color:var(--on-navy-2);max-width:60ch}
.pp-meta{margin:0;font-size:14px;line-height:20px;color:var(--on-navy-2)}
.pp-hero-partner{display:none;align-items:center;gap:12px}
.pp-hero-partner .avatar{background:var(--b-700)}
.pp-hp-t{display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--on-navy-2)}
.pp-hp-t b{font-size:15px;color:var(--on-navy);font-weight:600}
@media (min-width:1080px){.pp-hero-partner{display:flex}}
@media (max-width:719px){
  .pp-inner{padding:0 16px}
  .hero-band.pp-hero{padding:40px 0}
  .pp-hero h1{font-size:30px;line-height:36px}
  .pp-lede{font-size:16px;line-height:24px}
}
.pp-notices{display:flex;flex-direction:column;gap:12px}
.pp-notices:not(:empty){padding-top:24px}

/* layout: main column + sticky rail */
.pp-layout{display:block;padding-top:48px;padding-bottom:104px}
.pp-main{display:flex;flex-direction:column;gap:48px;min-width:0;max-width:720px}
.pp-layout:not(.has-rail) .pp-main{margin:0 auto}
.pp-rail{display:none}
@media (min-width:1080px){
  .pp-layout.has-rail{display:grid;grid-template-columns:minmax(0,720px) 320px;justify-content:space-between;gap:48px;align-items:start}
  .pp-rail{display:block;position:sticky;top:calc(var(--top-h) + 16px)}
  .pp-layout{padding-bottom:96px}
}
@media (max-width:719px){.pp-layout{padding-top:32px}.pp-main{gap:32px}}

.pp-sec{display:flex;flex-direction:column;gap:20px;min-width:0}
.pp-sec-head{display:flex;flex-direction:column;gap:4px}
.pp-sec-head .pp-over{color:var(--act-ink)}
.pp-sec-head h2{font-size:22px;line-height:28px}
@media (max-width:719px){.pp-sec-head h2{font-size:20px;line-height:26px}}
.pp-sec h3{font-size:15px;line-height:22px}

/* findings */
.pp-findings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.pp-findings li{display:flex;gap:12px;align-items:flex-start}
.pp-findings .ico{color:var(--warn);margin-top:1px}
.pp-findings b{display:block;font-weight:600}
.pp-find-body{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--ink-2)}
@media (max-width:719px){.pp-findings{grid-template-columns:1fr}}

/* price type */
.pp-price{font-family:var(--f-display);font-size:var(--t-price);line-height:48px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pp-price small{font-family:var(--f-sans);font-size:14px;line-height:20px;font-weight:500;letter-spacing:0;color:var(--ink-2);margin-left:4px}
.pp-price.long{font-size:28px;line-height:34px;letter-spacing:-.02em;overflow-wrap:anywhere}
@media (max-width:719px){.pp-price{font-size:36px;line-height:40px}.pp-price.long{font-size:26px;line-height:32px}}

/* plan cards: radio semantics, the whole card is the control */
.pp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:8px}
.pp-plan{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-1);padding-bottom:20px;cursor:pointer;min-width:0;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.pp-plan:hover{border-color:var(--line-strong)}
.pp-plan.off{cursor:default}
.pp-plan.sel{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act),var(--e-1)}
.pp-plan:has(.pp-radio:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pp-radio{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;appearance:none;-webkit-appearance:none}
.pp-plan-head{display:flex;flex-direction:column;gap:4px;padding:24px 20px 12px;cursor:inherit;border-radius:7px 7px 0 0}
.pp-plan.sel .pp-plan-head{background:var(--act-soft)}
.pp-plan-name{font-family:var(--f-display);font-size:17px;line-height:24px;font-weight:600}
.pp-plan.sel .pp-plan-name{padding-right:78px}
.pp-plan-tag{font-size:14px;line-height:20px;color:var(--ink-2);min-height:40px}
.pp-plan .pp-price{font-size:36px;line-height:40px;margin-top:8px}
.pp-reco{position:absolute;top:0;left:20px;transform:translateY(-50%);z-index:1;background:var(--feature-bg);color:var(--feature-ink);box-shadow:0 0 0 1px var(--feature-line);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.pp-selbadge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:600;color:var(--act-ink)}
.pp-plan .pp-feats{padding:0 20px}
.pp-plan details{padding:0 20px}
.pp-plan summary{font-size:14px;font-weight:500;color:var(--act);min-height:44px;display:flex;align-items:center}
.pp-plan details[open] summary{margin-bottom:8px}
@media (max-width:719px){.pp-plans{grid-template-columns:1fr;gap:20px}.pp-plan{padding-bottom:16px}.pp-plan-tag{min-height:0}}
.pp-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px}
.pp-feats li{display:flex;gap:8px;align-items:flex-start}
.pp-feats .ico{color:var(--ok);margin-top:2px;width:16px;height:16px}
.pp-feats.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;font-size:15px;line-height:22px}
@media (max-width:719px){.pp-feats.cols2{grid-template-columns:1fr}}
.pp-plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px;color:var(--ink-2)}

/* commitment + add-ons */
.pp-commit-wrap{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.seg.pp-commit{width:100%}
.seg.pp-commit > button{flex:1 1 0;min-height:56px;padding:8px 16px;white-space:normal;justify-content:flex-start;text-align:left}
.pp-seg2{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.pp-seg2 b{font-weight:600;font-size:14px;line-height:20px}
.pp-seg2 small{font-size:13px;line-height:18px;font-weight:400;color:var(--ink-2)}
.seg.pp-commit > button.on small,.seg.pp-commit > button[aria-checked=true] small{color:var(--ink-2)}
.pp-addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pp-once{font-weight:400;color:var(--ink-2)}
@media (max-width:719px){.pp-addons{grid-template-columns:1fr}}
.pp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;align-items:start}
.pp-cols h3 .ico{display:inline-block;vertical-align:-3px;margin-right:6px}
.pp-cols h3 .ok-i{color:var(--ok)}
.pp-cols h3 .no-i{color:var(--ink-3)}
@media (max-width:719px){.pp-cols{grid-template-columns:1fr}}

/* steps (timeline and phases) */
.pp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px}
.pp-steps > li{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.pp-step-n{width:28px;height:28px;border-radius:50%;background:var(--feature-bg);color:var(--feature-ink);box-shadow:0 0 0 1px var(--feature-line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.pp-steps:not(.vertical) > li:not(:last-child)::after{content:"";position:absolute;left:40px;right:-12px;top:14px;height:1px;background:var(--line-strong)}
.pp-step-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-step-b ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px;color:var(--ink-2)}
.pp-step-b p{margin:0}
.pp-gets{font-size:14px;line-height:20px;color:var(--ink-2)}
.pp-gets b{color:var(--ink);font-weight:600;margin-right:4px}
.pp-gate{font-size:14px;line-height:22px}
.pp-steps.vertical{display:flex;flex-direction:column;gap:0}
.pp-steps.vertical > li{flex-direction:row;gap:16px;padding-bottom:28px}
.pp-steps.vertical > li:last-child{padding-bottom:0}
.pp-steps.vertical > li:not(:last-child)::after{content:"";position:absolute;left:13px;top:34px;bottom:6px;width:1px;background:var(--line-strong)}
@media (max-width:719px){
  .pp-steps:not(.vertical){display:flex;flex-direction:column;gap:0}
  .pp-steps:not(.vertical) > li{flex-direction:row;gap:16px;padding-bottom:24px}
  .pp-steps:not(.vertical) > li:last-child{padding-bottom:0}
  .pp-steps:not(.vertical) > li:not(:last-child)::after{left:13px;right:auto;top:34px;bottom:6px;width:1px;height:auto}
}

/* deliverables, numbered needs */
.pp-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px 24px}
.pp-icons li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:22px}
.pp-icons .ico{color:var(--act-ink);margin-top:1px}
.pp-numlist{list-style:none;counter-reset:pn;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pp-numlist > li{counter-increment:pn;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:22px}
.pp-numlist > li::before{content:counter(pn);flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:-1px}

/* terms, team, quote, special terms */
.pp-terms-wrap{display:flex;flex-direction:column;gap:16px}
.pp-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0}
.pp-terms > div{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-terms dt{font-size:13px;line-height:18px;color:var(--ink-2)}
.pp-terms dd{margin:0;font-weight:500;overflow-wrap:break-word}
@media (max-width:719px){.pp-terms{grid-template-columns:1fr}}
.pp-team{display:flex;gap:16px;align-items:flex-start}
.pp-team .avatar.lg{width:64px;height:64px;font-size:20px;background:var(--feature-bg);box-shadow:0 0 0 1px var(--feature-line)}
.pp-team-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-team-b p{margin:0;font-size:14px;line-height:22px;color:var(--ink-2)}
.pp-team-b .pp-team-title{color:var(--ink-3)}
.pp-tel{display:inline-flex;gap:6px;align-items:center;font-weight:600;text-decoration:none;min-height:44px;min-width:44px}
.pp-quote{margin:0;padding-left:20px;border-left:3px solid var(--line-strong);display:flex;flex-direction:column;gap:8px}
.pp-quote blockquote{margin:0;font-size:17px;line-height:26px}
.pp-quote figcaption{font-size:13px;color:var(--ink-2)}
.pp-special{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--act);border-radius:var(--r-md);padding:16px 20px}
.pp-special .pp-over{color:var(--act-ink)}
.pp-special-t{margin:0;white-space:pre-wrap;font-size:15px;line-height:24px}
.pp-portal .signblock,.pp .signblock{scroll-margin-top:calc(var(--top-h) + 24px)}
.pp .signblock h2{font-size:18px}

/* rail and sticky bar */
.pp-rail-card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--e-2);padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pp-rail-title{font-size:18px;line-height:26px}
.pp-rail-sub{margin:0;font-size:14px;line-height:20px;color:var(--ink-2)}
.pp-rail-note{margin:0;font-size:13px;line-height:18px;color:var(--ink-2)}
.pp-rail-lines{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pp-rail-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px;color:var(--ink-2)}
.pp-rail-lines b{font-weight:600;color:var(--ink);white-space:nowrap}
.pp-rail-total{display:flex;justify-content:space-between;gap:12px;font-weight:600;border-top:1px solid var(--line);padding-top:12px}
.pp-rail-foot{margin:0;font-size:13px;line-height:18px;color:var(--ink-3);text-align:center}
.pp-sched{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column}
.pp-sched .kv{font-size:14px;padding:8px 0}
.pp-sched .kv > b{white-space:nowrap}
.pp-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--e-2)}
.has-bar .pp-bar{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding-bottom:10px}
.pp-bar-t{display:flex;flex-direction:column;min-width:0}
.pp-bar-t b{font-family:var(--f-display);font-size:17px;line-height:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar-t span{font-size:13px;line-height:18px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar .btn{flex:none}
@media (min-width:1080px){.pp-bar{display:none}}
@media (min-width:720px){.app .pp-bar{left:240px}}

/* inside the signed-in portal (an existing client accepting an offer) */
.pp-portal{max-width:1120px;margin:0 auto}
.pp-portal .pp-inner{padding:0}
.pp-portal .hero-band.pp-hero{border-radius:var(--r-lg);padding:40px 0;border-bottom:0}
.pp-portal .hero-band.pp-hero .pp-inner{padding:0 32px}
.pp-portal .pp-layout{padding-top:32px;padding-bottom:32px}
@media (max-width:719px){.pp-portal .hero-band.pp-hero .pp-inner{padding:0 20px}.pp-portal .pp-layout{padding-bottom:88px}}

@media print{
  .pp-top,.pp-bar,.pp-rail .btn,.pp-hero-partner{display:none!important}
  .hero-band.pp-hero{padding:24px 0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pp-layout.has-rail{display:block}
  .pp-rail{position:static;display:block;margin-bottom:24px}
  .pp-plan,.pp-addon,.pp-special,.kv-row,.kv,.pp-step-b{break-inside:avoid}
  .pp-sec,.pp-layout section,.pp-layout .box{break-inside:auto}
  .pp-plans{grid-template-columns:repeat(3,1fr)}
  body{font-size:11pt}
  /* The proposal is read on paper; it is signed online. No form controls on the page. */
  .pp-rail,.pp-rail-card,.pp-bar,.pp-readfull,.signblock .fields,.signblock .opt,.signblock .sig-preview,.signblock .sig-cap,.signblock button,.signblock .btn,.signblock .callout,.signblock .pp-fine,.stickybar{display:none!important}
  .signblock{border:1px solid #999;break-inside:avoid;padding:12px 16px}
  .print-only{display:block!important;font-weight:600}
  .pp-layout.has-rail{display:block}
}
@page{margin:14mm}

/* ---------- inset hero inside the portal ---------- */
.pp-problem{display:flex;flex-direction:column;gap:12px}

/* ---------- login ---------- */
.login-page{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:64px 16px;background:var(--bg)}
.login-col{width:100%;max-width:440px;display:flex;flex-direction:column;gap:24px}
.login-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.login-head h1{font-size:26px;line-height:32px}
.login-mark{width:64px;height:64px;border-radius:var(--r-lg);background:var(--navy);display:flex;align-items:center;justify-content:center}
.login-mark img{display:block;width:46px;height:auto}
.login-card{padding:24px;gap:16px}
.login-card .btn.block{width:100%}
.login-sent{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.login-sent h2{font-size:18px}
.login-sent p{margin:0}
.login-or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--line)}
.login-demo{padding:24px;gap:12px;border-style:dashed}
.login-demo h2{font-size:18px}
.login-demo p{margin:0}
.pick-cols{display:grid;grid-template-columns:1fr;gap:20px}
.picklist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pickrow{width:100%;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.pickrow:hover{border-color:var(--line-strong);background:var(--surface-2)}
.pickrow:disabled{opacity:.6;cursor:default}
.pickrow .ini{width:32px;height:32px;border-radius:50%;background:var(--b-800);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.pickrow .ico:last-child{margin-left:auto;color:var(--ink-3);flex:none}
.pr-t{display:flex;flex-direction:column;min-width:0}
.pr-t b{font-weight:600}
.pr-t span{font-size:13px;line-height:18px;color:var(--ink-2)}
.login-foot{display:flex;flex-direction:column;gap:4px;align-items:flex-start;border-top:1px solid var(--line);padding-top:12px}
@media (min-width:720px){.login-page{padding-top:96px}.login-col:has(.login-demo){max-width:640px}.pick-cols{grid-template-columns:1fr 1fr}}

/* ---------- dev outbox ---------- */
.outbox{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.outbox-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.outbox-item{width:100%;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:56px}
.outbox-item:hover{border-color:var(--line-strong)}
.outbox-item.on{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act);background:var(--act-soft)}
.o-to{font-weight:600;font-size:14px}
.o-sub{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-meta{font-size:12px;line-height:16px;color:var(--ink-3)}
.outbox-preview{scroll-margin-top:calc(var(--top-h) + 12px)}
.o-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.o-head-t{min-width:0}
.o-head h2{font-size:18px;line-height:26px;overflow-wrap:anywhere}
.o-head p{margin:2px 0 0}
.o-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.o-body{white-space:pre-wrap;font-family:var(--f-sans);font-size:15px;line-height:24px;overflow-wrap:anywhere;margin-top:4px}
.o-ico{display:inline-block;vertical-align:-3px;margin-right:6px}
@media (min-width:900px){.outbox{grid-template-columns:320px minmax(0,1fr)}.outbox-list{position:sticky;top:calc(var(--top-h) + 16px);max-height:calc(100dvh - var(--top-h) - 32px);overflow:auto}}

/* ---------- client portal: home, plan, partner ---------- */
.box.wait .box-label{color:var(--ink-3)}
.box.wait h3{font-size:16px;line-height:24px}
.plan-name{font-family:var(--f-display);font-size:18px;line-height:26px;font-weight:600}
.plan-price{font-size:15px;color:var(--ink-2)}
.price-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.chev-end{color:var(--ink-3)}
.partner{display:flex;gap:16px;align-items:center}
.partner .avatar.lg{background:var(--navy);color:#fff}
.cap-line{display:flex;gap:8px;align-items:center;margin:0}
.cap-line .ico{flex:none;color:var(--ink-3)}
.nomin{width:100%}
.tl-sub{display:block;font-size:13px;line-height:18px;color:var(--ink-2)}
.tl-sub b{color:var(--ink);font-weight:600;margin-right:4px}

/* ---------- booking ---------- */
.when-big{font-family:var(--f-display);font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.02em}
@media (max-width:719px){.when-big{font-size:22px;line-height:28px}}

/* ---------- billing, agreements, documents ---------- */
.bill-list{list-style:none;margin:0;padding:0}
.bill-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.bill-list li:last-child{border-bottom:0}
.plan-hero{background:var(--feature-bg);color:var(--feature-ink);border:1px solid var(--feature-line);border-radius:var(--r-lg);padding:28px 32px;display:flex;flex-direction:column;gap:6px}
.plan-hero .eyebrow{color:var(--feature-ink-2);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.plan-hero h2{color:var(--feature-ink);font-size:22px;line-height:28px}
.plan-hero .big{color:var(--feature-ink);font-size:36px;line-height:40px}
.plan-hero .small{color:var(--feature-ink-2)}
@media (max-width:719px){.plan-hero{padding:20px}.plan-hero .big{font-size:30px;line-height:36px}}
.docrow{display:flex;gap:16px;align-items:center;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-1)}
.docrow > .ico{flex:none;color:var(--ink-3)}
.dr-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dr-title{font-weight:600;overflow-wrap:anywhere}
.dr-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
@media (max-width:719px){.docrow{flex-wrap:wrap;padding:16px}.dr-act{width:100%;justify-content:flex-start}}
.kvs{display:flex;flex-direction:column}
.pre-wrap{white-space:pre-wrap}
.tick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:20px}
.tick-list li{padding-left:20px;position:relative}
.tick-list li::before{content:"";position:absolute;left:4px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---------- security ---------- */
.keyrow{display:flex;gap:12px;align-items:center}
.keyrow > .ico{flex:none;color:var(--ink-3)}
.keyrow > .stack-2{flex:1;min-width:0;gap:2px}
.keyrow > .chip{flex:none}

/* ---------- intake ---------- */
.split.intake > .side{flex:0 0 220px}
.steplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.steplist button{width:100%;display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font:inherit;font-weight:500;text-align:left;cursor:pointer}
.steplist button:hover{background:var(--surface-2);color:var(--ink)}
.steplist button.on{background:var(--act-soft);color:var(--act-ink);font-weight:600}
.stepdot{width:24px;height:24px;border-radius:50%;border:1px solid var(--ctl);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none;color:var(--ink-2)}
.steplist .on .stepdot{background:var(--btn);border-color:var(--btn);color:#fff}
.stepdot.done{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.intake-box .bhead h2{font-size:18px;line-height:26px}
.intake-box{gap:20px}
.saved{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--ink-3)}
.saved.ok{color:var(--ok)}
.fields3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:719px){.fields3{grid-template-columns:1fr}}
.narrow-select{max-width:320px}
.yn{display:flex;gap:8px;flex-wrap:wrap}
.intake-bar{margin-top:16px}

/* ---------- audit ---------- */
.audit-score{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;align-items:center}
@media (max-width:719px){.audit-score{grid-template-columns:1fr}}
.audit-qs{display:flex;flex-direction:column}
.audit-q{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.audit-q:first-child{padding-top:0}
.audit-q:last-child{border-bottom:0;padding-bottom:0}
.audit-q p{margin:0;font-size:15px;line-height:22px}
.issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.issues li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:20px}
.issues li > span:nth-child(2){flex:1;min-width:0}
.dotl{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--warn);display:inline-block}
.dotl.bad{background:var(--bad)}
.issue-tag{flex:none;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);white-space:nowrap}

/* room under content for the fixed action bar on phones */
@media (max-width:719px){.page:has(.sticky-actions){padding-bottom:96px}}
.pp-plan .pp-price small{display:inline;margin:0 0 0 4px}
/* === end B2 screens === */
.pre-wrap{white-space:pre-wrap}
.sum3.sum-auto{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.track-row{padding:10px 0}
.track-row.sep{border-top:1px solid var(--line)}
.row.baseline{align-items:baseline}
.nowrap-t{white-space:nowrap}
.profile-actions{align-items:center}
/* settings */
.settings-layout{display:flex;flex-direction:column;gap:16px}
.settings-main{min-width:0;max-width:720px}
.settings-nav .settings-groups{display:none}
.settings-pick select{width:100%}
.settings-nav{display:flex;flex-direction:column;gap:8px}
.settings-jump select{width:100%}
.fields2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.band-card .bhead{min-height:44px}
@media (min-width:1080px){
  .settings-layout{display:grid;grid-template-columns:200px minmax(0,720px);gap:32px;align-items:start}
  .settings-nav{position:sticky;top:calc(var(--top-h) + 16px)}
  .settings-pick,.settings-jump{display:none}
  .settings-nav .settings-groups{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
  .settings-groups a{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink-2);text-decoration:none;font-size:var(--t-body-sm)}
  .settings-groups a:hover{background:var(--surface-2);color:var(--ink)}
  .settings-groups a.on{color:var(--act-ink);background:var(--act-soft);font-weight:600}
  .settings-groups ul{list-style:none;margin:2px 0 8px;padding:0 0 0 12px;border-left:1px solid var(--line)}
  .settings-groups ul a{font-size:var(--t-caption);padding:6px 10px}
}
.settings-sec{scroll-margin-top:calc(var(--top-h) + 16px)}
.settings-fields{display:flex;flex-direction:column;gap:14px;min-width:0}
.sep-block{padding-bottom:14px;border-bottom:1px solid var(--line)}
.dirty-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.ro-item{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.ro-item:last-child{border-bottom:0}
.bands-table input{width:100%;min-width:90px}
.bands-table td{vertical-align:top}
.err-text{color:var(--bad);font-size:var(--t-caption)}
textarea.xtall{min-height:240px}
.dtable td .input-group input{min-width:90px}
/* audit + toolbar controls */
.toolbar .field{flex-direction:column;gap:2px}
.audit-bar{align-items:flex-end}
.switch{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-body-sm);cursor:pointer}
.switch input[role=switch]{appearance:none;-webkit-appearance:none;width:40px;height:24px;border-radius:12px;background:var(--ctl);position:relative;margin:0;cursor:pointer;flex:none;transition:background-color var(--d-fast)}
.switch input[role=switch]::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--d-fast)}
.switch input[role=switch]:checked{background:var(--act)}
.switch input[role=switch]:checked::after{transform:translateX(16px)}
.switch input[role=switch]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dtable details summary{cursor:pointer;color:var(--act-ink);font-size:var(--t-caption)}
.tablewrap{position:relative}
@media (max-width:719px){.callout.getting{flex-wrap:wrap}.callout.getting .c-body{flex:1 1 calc(100% - 40px)}.callout.getting .c-act{flex:1 1 100%;display:flex;gap:8px}}
.dtable td .num{white-space:nowrap}
.deliver{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.deliver input{width:20px;height:20px;min-height:0}
.bill-list li{align-items:center}.bill-list li > .chip{margin-right:auto}
@media (min-width:1080px){.grid.by3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.print-only{display:none}

/* Phone: links in a head meta line are real tap targets, not inline text. */
@media (max-width:719px){.head .meta a,.meta-line a{min-height:44px;min-width:44px}}

.head .meta a,.meta-line a{min-height:32px;min-width:32px}

.head .meta > *:has(+ .tag)::after,.meta-line > *:has(+ .tag)::after{display:none}
.grid.start{align-items:start}
.bill-list li > span.num:first-child{min-width:64px}
@media (max-width:719px){.head .meta a,.meta-line a{min-height:44px;min-width:44px}}
.side .kv{font-size:13px;line-height:18px;padding:6px 0}.side .kv > b{font-weight:600}

/* Phone: a header whose only action is the "..." menu keeps it at the top right, level with the back link, instead of on a row of its own. */
@media (max-width:719px){
  .head:has(> .head-actions > .menuwrap:only-child){position:relative}
  .head:has(> .head-actions > .menuwrap:only-child) > .t{padding-right:48px}
  .head > .head-actions:has(> .menuwrap:only-child){position:absolute;top:-6px;right:-6px;width:auto}
}

/* Margin-leak / opportunity register: five columns that wrap, never a sideways scroll. Row actions live in the "..." menu. */
.leak-table{width:100%;min-width:0}
.leak-table table{width:100%;table-layout:fixed;border-collapse:collapse}
.leak-table th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);padding:8px 10px;border-bottom:1px solid var(--line)}
.leak-table td{padding:12px 10px;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere;min-width:0}
.leak-table th:nth-child(1),.leak-table td:nth-child(1){width:36px}
.leak-table th:nth-child(3),.leak-table td:nth-child(3){width:22%}
.leak-table th:nth-child(4),.leak-table td:nth-child(4){width:18%}
.leak-table th:nth-child(5),.leak-table td:nth-child(5){width:56px;text-align:right}
.leak-table .leak-main{display:flex;flex-direction:column;gap:4px}
.leak-table .leak-size span{display:block}

/* AI: proposal studio chat and the client assistant */
.chat-log{display:flex;flex-direction:column;gap:var(--s-3);max-height:min(60vh,520px);overflow-y:auto;padding:2px}
.msg{max-width:92%;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface-2);color:var(--ink);overflow-wrap:anywhere}
.msg p{margin:0;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--act-soft);border-color:var(--line-strong)}
.msg.ai{align-self:flex-start;background:var(--surface)}
.msg .changes{margin-top:var(--s-3)}
.change-row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;justify-content:space-between;padding:var(--s-2) 0;border-top:1px solid var(--line)}
.change-row > span:first-child{flex:1 1 200px;min-width:0}
.chat-form{display:flex;gap:var(--s-2);align-items:flex-end}
.chat-form textarea{flex:1 1 auto;min-width:0;min-height:44px}
ul.tight{margin:0;padding-left:1.1em}
ul.tight li + li{margin-top:2px}
.evidence{list-style:none;margin:0;padding:0}
.evidence q{color:var(--ink-2)}

/* R1 today */
/* Today (web/src/screens/Today.jsx) and the task quick-add (web/src/TaskQuickAdd.jsx). Counts first; phone stacks, desktop has two columns. */
.today-counts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.today-counts li > a,.today-counts li > span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink-2);font-size:14px;line-height:20px;text-decoration:none}
.today-counts li > span{color:var(--ink-3)}
.today-counts li.on > a{color:var(--ink);border-color:var(--line-strong)}
.today-counts li.on > a:hover{border-color:var(--act);color:var(--act-ink)}
.today-counts li.on b{color:var(--act-ink)}
.today-counts li.on.bad > a{border-color:var(--bad-line);background:var(--bad-soft)}
.today-counts li.on.bad b{color:var(--bad)}
.today-counts b{font-size:16px;font-weight:700}
.today-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:24px;align-items:start}
.today-col{min-width:0}
.today-col > h2{padding-bottom:8px;border-bottom:2px solid var(--act)}
.today-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-1);padding:16px 16px 8px;display:flex;flex-direction:column;gap:8px;min-width:0;scroll-margin-top:calc(var(--top-h) + 16px)}
.today-block:has(.task-add){padding-bottom:16px}
.today-bhead{display:flex;align-items:center;gap:8px}
.today-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:var(--r-xs);background:var(--act-soft);color:var(--act-ink);font-size:12px;font-weight:700}
.today-list{list-style:none;margin:0;padding:0}
.today-item{display:flex;align-items:center;gap:4px;min-height:56px;border-top:1px solid var(--line)}
.today-item:first-child{border-top:0}
.today-item .ti-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:48px;padding:6px 4px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm)}
.today-item a.ti-main:hover .ti-title{color:var(--act-ink);text-decoration:underline}
.today-item .ti-title{font-weight:600;line-height:20px}
.today-item .ti-sub{font-size:13px;line-height:18px;color:var(--ink-2)}
.today-item.late .ti-sub{color:var(--bad)}
.today-item .ti-check,.today-item .iconbtn{width:44px;height:44px;flex:none}
.ti-check{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ctl);cursor:pointer}
.ti-check:hover{color:var(--ok);background:var(--ok-soft)}
.task-add .seg.task-when{width:100%}
.task-add .seg.task-when > button{flex:1 1 auto;min-height:40px}
.task-add-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.task-add-foot .task-owner{flex:1 1 200px;min-width:0}
@media (max-width:719px){
  .task-add .seg.task-when{display:grid;grid-template-columns:1fr 1fr}
  .task-add .seg.task-when > button{min-height:44px}
  .task-add-foot .btn{flex:1 1 100%}
  .today-cols{gap:20px}
  .today-counts li:not(.on){display:none} /* phone: only the counts that need something; the sections below say when all is clear */
}

/* R2 proposals */
/* Proposal blocks (docs/specs/07-proposals.md): the written sections, the compliance roadmap, progression and support methods,
   the cost comparison, plus the builder's section editor and the Settings block list. Phone first; two columns from 720px. */
.pp-prose{margin:0;font-size:15px;line-height:24px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.pp-areas{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 32px;margin-bottom:16px}
.pp-area h3{margin:0 0 4px;font-size:16px;line-height:22px}
.pp-compliance{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pp-compliance > li{padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.pp-compliance > li.reached{border-color:var(--line-strong)}
.pp-compliance > li.current{border-color:var(--act);box-shadow:inset 3px 0 0 var(--act)}
.pp-compliance > li ul{margin:6px 0 0;padding-left:1.2em;font-size:14px;line-height:20px}
.pp-methods .pp-method h3{margin:0 0 4px;font-size:16px;line-height:22px}
.pp-benefits{margin-top:16px}
.pp-benefits h3{margin:0 0 8px;font-size:16px;line-height:22px}
.pp-cost dd{overflow-wrap:anywhere}
.pp-block-group{display:contents}
.sec-row{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.sec-row:first-child{border-top:0;padding-top:0}
.sec-row > .btn{align-self:flex-start}
.blocks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.blocks-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);min-height:44px}
.blocks-row:first-child{border-top:0}
.blocks-row .opt{flex:1 1 auto;min-width:0}
.blocks-row .row{flex:0 0 auto;gap:2px}
@media (min-width:720px){
  .pp-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:start}
  .sec-row > .fields2,.sec-row > input,.sec-row > textarea{grid-column:1}
  .sec-row > .btn{grid-column:2;grid-row:1}
}
/* R3 visits */
.visit-notes{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1080px){.visit-notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.note-box{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.note-box.internal{border-color:var(--line-strong);background:var(--surface-2)}
.note-box .note-head{display:flex;align-items:center;gap:8px}
.note-box .note-head h3{margin:0;font-size:var(--t-body);font-weight:600}
.note-box.internal .note-head{color:var(--ink)}
.note-box.client .note-head{color:var(--act-ink)}
.note-box textarea{width:100%;min-height:200px;font-family:var(--f-sans);line-height:22px;resize:vertical}
.note-box p{margin:0}
.aud-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:8px}
.recap-body{width:100%;min-height:260px;font-family:var(--f-sans);line-height:22px;resize:vertical}
.recap-sent{white-space:pre-wrap;font-family:var(--f-sans);font-size:14px;line-height:22px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);overflow-wrap:anywhere}
.recap-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.att-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--line)}
.att-row:last-child{border-bottom:0}
.att-tick{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
.att-tick input{width:20px;height:20px;min-height:0;margin:0}
.att-name{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;overflow-wrap:anywhere}
.att-add{padding-top:8px}
.sug-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.sug-row:last-child{border-bottom:0}
.sug-row.done .sug-main > span:first-child{color:var(--ink-2);text-decoration:line-through}
.sug-main{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.task-add{padding-top:12px;border-top:1px solid var(--line);margin-top:8px}
.summary-text{white-space:pre-wrap;margin:0;font-size:15px;line-height:24px;overflow-wrap:anywhere}
.gap-1{gap:4px}
/* R1 import (web/src/screens/Import.jsx): steps as plain sections; done steps collapse to one line; conflicts side by side */
.imp-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-1);padding:20px;min-width:0}
.imp-step.imp-done{padding:12px 20px;background:var(--surface-2);box-shadow:none}
.imp-map{display:grid;grid-template-columns:minmax(180px,240px) minmax(200px,320px) minmax(0,1fr);gap:8px 16px;align-items:center}
.imp-map-row{display:contents}
.imp-map-label{font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.imp-sample{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.imp-side{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);min-width:0}
.imp-conflict{gap:12px}
.imp-history{margin-top:8px}
@media (max-width:719px){
  .imp-step{padding:16px}
  .imp-step.imp-done{padding:12px 16px}
  .stack-3 > .imp-map-row{display:flex;flex-direction:column;gap:4px}
  .imp-sample{white-space:normal}
  .imp-pair{grid-template-columns:minmax(0,1fr)}
}
/* R4 templates */
.tl-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-between{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;justify-content:space-between}
.tl-end{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end}
.tl-item{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.tl-editor h3,.tl-preview h3{font-size:var(--t-h3);margin:0}
.tl-preview{display:flex;flex-direction:column;gap:var(--s-4);max-width:72ch}
.tl-preview section{display:flex;flex-direction:column;gap:var(--s-2)}
.tl-preview p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.tl-preview .tl-variant{padding-left:var(--s-3);border-left:3px solid var(--act-soft)}
.tl-footer{border-top:1px solid var(--line);padding-top:var(--s-3)}
.tl-inputs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-inputs li{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2) 0;border-top:1px solid var(--line);min-width:0}
.tl-inputs li:first-child{border-top:0}
.tl-inputs li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-inputs code{flex:0 0 auto;font-family:var(--f-mono);font-size:12px;color:var(--act-ink);background:var(--act-soft);padding:2px 6px;border-radius:var(--r-xs);max-width:45%;overflow-wrap:anywhere}
.tl-versions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-versions li{display:flex;gap:var(--s-2);align-items:center;min-height:44px;border-top:1px solid var(--line)}
.tl-versions li:first-child{border-top:0}
.tl-versions .linkbtn{min-height:44px;padding:0 var(--s-2);font-weight:600}
.tl-versions .linkbtn.current{color:var(--ink);text-decoration:underline}
.tl-tag{min-height:44px;padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:var(--t-body-sm);cursor:pointer}
.tl-tag:disabled{cursor:default;opacity:.7}
.ds-pick{display:flex;flex-direction:column;gap:var(--s-2)}
.ds-pick-item{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-height:44px}
.ds-pick-item.sel{border-color:var(--act);box-shadow:0 0 0 1px var(--act) inset;background:var(--act-soft)}
.ds-pick-item input{margin-top:4px;width:20px;height:20px;flex:0 0 auto}
.ds-pick-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ds-missing input,.ds-missing textarea,.ds-missing select{border-color:var(--warn)}
.ds-suggested input,.ds-suggested textarea,.ds-suggested select{background:var(--act-soft)}
.ds-preview mark.ds-ph{background:var(--warn-soft);color:var(--warn);font-family:var(--f-mono);font-size:12px;padding:0 4px;border-radius:var(--r-xs)}
.ds-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ds-list li{border-top:1px solid var(--line)}
.ds-list li:first-child{border-top:0}
.ds-list-row{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;min-height:44px;color:inherit;text-decoration:none;min-width:0}
.ds-list-row:hover b{text-decoration:underline}
.ds-list-main{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.flagline.ok.small,.flagline.warn.small{align-items:flex-start}
/* R1 companies */
.co-toolbar .searchbox{max-width:480px}
.co-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.co-filters .field select{width:100%}
.co-log{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.co-log-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px}
.co-chips{display:flex;flex-wrap:wrap;gap:8px}
.co-chips > button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--d-fast),color var(--d-fast)}
.co-chips > button:hover{background:var(--surface-2)}
.co-chips > button[aria-pressed=true]{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
.co-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.co-list > li{padding:10px 0;border-top:1px solid var(--line);gap:8px}
.co-list > li:first-child{border-top:0;padding-top:0}
.co-list a{overflow-wrap:anywhere}
.co-link{display:inline-flex;align-items:center;min-height:32px}
@media (max-width:719px){.co-link{min-height:44px}.co-chips > button{min-height:44px;flex:1 1 calc(50% - 8px)}.co-toolbar .searchbox{flex-basis:100%}.co-toolbar > .btn{width:100%}}
/* R3 requests */
.req-summary{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);align-items:flex-start;padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.req-summary > *{flex:1 1 200px;min-width:0}
.req-summary .flagline{align-self:center}
.req-new{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:var(--s-2) var(--s-3);align-items:end}
.req-new.with-eng{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto}
.req-new .field{margin:0}
@media (max-width:719px){.req-new,.req-new.with-eng{grid-template-columns:minmax(0,1fr)}}
.req-panel{container-type:inline-size}
.req-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);align-items:start}
/* Four columns need about 220px each; in the engagement workspace's narrower column (next to the rail) the board goes to two. */
@container (max-width:879px){.req-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1079px){.req-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
.req-col{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.req-col > h3{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-label);line-height:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.req-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2);min-width:0;box-shadow:var(--e-1)}
.req-card.flag{border-left:3px solid var(--bad)}
.req-card .req-title{font:inherit;font-weight:600;line-height:20px;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;overflow-wrap:anywhere;min-width:0;min-height:32px;display:flex;align-items:center}
.req-card .req-title:hover{color:var(--act)}
.req-card .req-title:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
@media (max-width:719px){.req-card .req-title{min-height:44px;display:flex;align-items:center}}
.req-chips{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:center}
.req-meta{font-size:var(--t-caption);line-height:18px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:0 var(--s-2)}
.req-act{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.req-act select{flex:1 1 150px;min-width:0}
.req-list{display:flex;flex-direction:column;gap:var(--s-4)}
.req-est{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line)}
.req-est .field{margin:0;flex:0 1 180px}
.req-rows{display:flex;flex-direction:column;gap:var(--s-2)}
.req-row{display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between;padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.req-row > .stack-2{flex:1 1 auto}
.req-row > .chip{flex:0 0 auto}
.req-row.req-wait{border-color:var(--warn)}
.req-row .req-est{background:var(--surface-2)}
.min0{min-width:0}
@media (max-width:719px){.req-row{flex-direction:column}.req-row > .chip{align-self:flex-start}}

/* Pipeline board on the Deals screen (desktop only). Columns wrap: nothing here scrolls sideways. */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;align-items:start}
.board-col{min-width:0;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface-2);border-radius:var(--r-md)}
.board-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.board-name{margin:0;font-size:var(--t-h3);line-height:22px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.board-count{flex:none;font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.board-total{margin:0}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.board-card{display:flex;flex-direction:column;gap:2px;padding:12px;min-height:44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:border-color var(--d-fast)}
.board-card:hover{color:var(--ink);border-color:var(--act)}
.board-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.board-co{font-weight:600}
.board-val{font-weight:600;margin-top:4px}
.board-next{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;color:var(--ink-2)}