/* =====================================================================
Prosafe Platform: design system (off-white · turquoise · charcoal)
Brand (official, Brand Master Reference 2026-09-07): Mint #A2DADE · Brown #49363A · Black #231F20.
One responsive layout: turquoise top bar with a hamburger drawer on every
screen size.
===================================================================== */
:root{
/* palette */
--bg:#f5f6f6; /* bright off-white page ground */
--bg-2:#eceff0;
--ink:#231F20; /* primary text: brand black */
--ink-2:#49363A; /* brand brown: secondary text, icons */
--muted:#6b6164; /* labels, hints. A11Y-10 (round 55): 5.97:1 on white, 5.05:1 on the paper ground, 4.70:1 on a tint */
--accent:#A2DADE; /* brand mint: top bar, menu, every action */
--accent-hi:#b9e6ea; /* hover */
--accent-deep:#4fa4ac; /* turquoise for lines and fills (2.9:1 on white: not for text) */
--accent-text:#237078; /* A11Y-05 (round 54): link and accent TEXT, 5.7:1 on white, 4.85:1 on the paper ground */
--accent-ink:#1a2e30; /* text ON turquoise */
--accent-soft:rgba(162,218,222,.26);
--accent-line:rgba(79,164,172,.5);
--ok:#1a7a43; --okbg:#e6f5ec; /* A11Y-09 (round 55): 4.77:1 on its tint, 5.37:1 on white, white on it 5.37:1 */
--bad:#b3261e; --badbg:#fbe9e7;
--warn:#8a5f00; --warnbg:#fff3d6;
--info:#2f5fc9; --infobg:#e8eefc;
--violet:#6d4fc4;
/* surfaces */
--panel:#fcfdfd; /* S114 (CEO): cards are SOLID in the colour Reza approved (it was white glass over the light paper) */
--panel-solid:#ffffff;
--line:#e2e6e7;
--line-2:#cfd6d8;
--field-line:#868f92; /* A11Y-11 (round 55): the edge of a field, 3.30:1 on white */
--field:#ffffff;
--shadow:0 1px 2px rgba(38,25,28,.05),0 10px 30px rgba(38,25,28,.07);
--shadow-sm:0 1px 2px rgba(38,25,28,.05),0 4px 14px rgba(38,25,28,.06);
--radius:16px; --radius-sm:11px;
--topbar:64px; --drawer:288px;
--ease:cubic-bezier(.2,.7,.2,1);
/* legacy alias (app.js still reads it) */
--orange-ink:var(--accent-deep);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);
font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--accent-text)}
::selection{background:var(--accent);color:var(--accent-ink)}
/* ---------- ground (S114, CEO): the brand charcoal with depth, mint and copper light (generated for Prosafe; the
light paper texture is retired). Fixed so it never scrolls; the charcoal shows until the picture loads. Text that sits
straight on the ground is light (the --on-ground colours); everything else sits on solid cards. ---------- */
:root{--ground:#2a2022;--on-ground:#ffffff;--on-ground-2:rgba(255,255,255,.78)}
.bgfx{position:fixed;inset:0;z-index:-1;background:var(--ground) url("/bg/ground-1.webp") center/cover no-repeat}
@media(max-width:860px){.bgfx{background-image:url("/bg/ground-1-mobile.webp")}}
/* ---------- app shell ---------- */
.shell{min-height:100vh}
.main{min-width:0;display:flex;flex-direction:column}
body:not(.is-owner) #menuBtn{display:none!important}
/* top bar: turquoise */
.topbar{position:sticky;top:0;z-index:5;height:var(--topbar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 18px;
background:var(--accent);color:var(--accent-ink);border-bottom:1px solid rgba(26,46,48,.08);
box-shadow:0 2px 14px rgba(79,164,172,.18)}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0;justify-self:start;grid-column:1}
.tb-right{display:flex;align-items:center;gap:12px;min-width:0;justify-self:end;grid-column:3}
.topbar .spacer{flex:1}
.topbar .who{color:rgba(26,46,48,.8);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.iconbtn-bar{width:42px;height:42px;border-radius:12px;border:0;background:transparent;color:var(--accent-ink);cursor:pointer;
display:grid;place-items:center;transition:background .15s}
.iconbtn-bar:hover{background:rgba(255,255,255,.45)}
.iconbtn-bar svg{width:24px;height:24px}
/* ONE logo lockup everywhere (S76, CEO): the bull beside the wordmark, bull = 1.55 x the wordmark height, both centred;
set --wm per place. Anything under it (address) goes BELOW the whole lockup. */
.logo{--wm:22px;display:flex;align-items:center;gap:calc(var(--wm) * .36);text-decoration:none;color:inherit;white-space:nowrap;min-width:0}
.logo-btn{appearance:none;border:0;background:transparent;padding:6px 8px;margin-left:-8px;border-radius:12px;cursor:pointer;font:inherit;transition:background .15s}
.logo-btn:hover{background:rgba(255,255,255,.45)}
.logo-btn:active{transform:scale(.98)}
.logo img{display:block;height:calc(var(--wm) * 1.55);width:auto;flex:none}
.logo .wm{height:calc(var(--wm) * 1.094)} /* wordmark file carries 8/170 clear space top + bottom (S76) */
.lockup{--wm:22px;display:flex;align-items:center;gap:calc(var(--wm) * .36)}
.lockup img{display:block;height:calc(var(--wm) * 1.55);width:auto;flex:none}
.lockup .wm{height:calc(var(--wm) * 1.094)}
@media(max-width:1100px){.topbar .logo .wm{display:none}.topbar .logo img{height:34px}}
.page-title{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;color:var(--accent-ink);opacity:.85;
padding-left:14px;border-left:1px solid rgba(26,46,48,.15)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:24px 22px 80px}
/* drawer menu: turquoise, slides in from the left on every screen size */
.drawer-overlay{position:fixed;inset:0;z-index:40;background:rgba(38,25,28,.38);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:41;width:var(--drawer);max-width:88vw;display:flex;flex-direction:column;gap:6px;
padding:14px 14px calc(16px + env(safe-area-inset-bottom));background:var(--accent);color:var(--accent-ink);
box-shadow:0 20px 60px rgba(38,25,28,.3);transform:translateX(-112%);transition:transform .26s var(--ease);visibility:hidden;
overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain} /* a short screen scrolls the menu, so Settings and the footer stay reachable */
body.drawer-open .drawer{transform:none;visibility:visible}
body.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 2px 14px;min-width:0}
.drawer-head .logo{min-width:0;flex:1}
.drawer-head .logo{--wm:18px}
.drawer-head .logo .wm{max-width:100%;object-fit:contain;object-position:left}
.drawer-head .iconbtn-bar{flex:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid transparent;
background:none;color:var(--accent-ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-align:left;
white-space:nowrap;transition:background .18s,color .18s,transform .18s}
.nav-item svg{width:21px;height:21px;flex:none;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,.35)}
.nav-item.active{background:rgba(255,255,255,.72);box-shadow:0 2px 10px rgba(26,46,48,.08)}
.nav-item.active svg{opacity:1}
.drawer-foot{margin-top:auto;font-size:12px;color:rgba(26,46,48,.6);padding:8px 6px 0;border-top:1px solid rgba(26,46,48,.12)}
/* phones: a tighter top bar and page padding */
@media(max-width:860px){
.topbar{padding:0 10px;height:58px;gap:8px}
.topbar .who,.page-title{display:none}
.wrap{padding:16px 14px 40px}
}
/* ---------- cards (S114: solid, no glass) ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);padding:22px;margin:0 0 20px;
transition:border-color .2s,transform .2s}
.card h2{margin:0 0 4px;font-size:16px;letter-spacing:.005em}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.sub{color:var(--muted)}
label{display:block;font-size:12.5px;color:var(--ink-2);margin:0 0 5px;letter-spacing:.01em}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--field-line);border-radius:10px;
font:inherit;background:var(--field);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#766b6e} /* A11Y-11 (round 55): 5.12:1 on white (was #a19699, 2.86:1) */
select{appearance:none;-webkit-appearance:none;padding-right:34px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center}
input[type=file]{padding:8px}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
/* A11Y-12 (round 55): the rule above leaves a 26% halo that cannot be seen on a checkbox, a radio or a file box: they get a real ring */
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,input[type=file]:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
input[type=checkbox]{width:auto;accent-color:var(--accent-text)}
input:disabled,select:disabled,textarea:disabled{background:#f0f0f0;color:#9a9095;cursor:not-allowed}
.row{display:grid;grid-template-columns:1fr 1fr 160px auto;gap:12px;align-items:end}
/* buttons */
.btn{appearance:none;border:1px solid transparent;border-radius:11px;padding:10px 16px;font:inherit;font-weight:700;
cursor:pointer;background:var(--accent);color:var(--accent-ink);letter-spacing:.005em;
box-shadow:0 4px 12px rgba(79,164,172,.22);transition:background .15s,transform .12s,box-shadow .15s,border-color .15s}
.btn:hover{background:var(--accent-hi)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:var(--panel-solid);color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{background:var(--bg-2)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.danger{background:#fff;color:var(--bad);border-color:#f0c9c5;box-shadow:none}
.btn.danger:hover{background:var(--badbg)}
.btn.wiz-danger{background:var(--bad);border-color:var(--bad);color:#fff} /* round 62 W13: the final Delete of a wizard */
.btn.wiz-danger:hover{filter:brightness(.93)}
.link{background:none;border:0;color:var(--accent-text);font:inherit;font-weight:600;cursor:pointer;padding:0}
.link:hover{text-decoration:underline}
.iconbtn{background:none;border:0;color:var(--bad);cursor:pointer;font-size:18px;line-height:1;padding:6px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(162,218,222,.1)}
.muted-row td{color:var(--muted)}
/* pills */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid transparent}
.pill.active,.pill.converted{background:var(--okbg);color:var(--ok)}
.pill.deactivated{background:var(--badbg);color:var(--bad)}
.pill.new{background:var(--infobg);color:var(--info)}
.pill.contacted{background:var(--warnbg);color:var(--warn)}
.pill.archived{background:#eef1f2;color:var(--muted)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px;align-items:center}
.note{font-size:13px;color:var(--muted)}
.msg{position:fixed;top:16px;right:16px;z-index:1200;max-width:min(92vw,420px);padding:11px 15px;border-radius:11px;font-size:14px;display:none;border:1px solid transparent;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.msg.show{display:block}
@media(max-width:600px){.msg{left:12px;right:12px;max-width:none}}
.msg.ok{background:var(--okbg);color:var(--ok);border-color:#bfe3cc}
.msg.err{background:var(--badbg);color:var(--bad);border-color:#f0c9c5}
.center{min-height:100vh;display:grid;place-items:center;padding:16px}
.login{width:min(420px,100%);padding:30px 28px;background:var(--panel-solid);margin:0}
@media(max-width:480px){.login{padding:24px 20px}}
.login h2{font-size:22px;margin-bottom:6px}
.login .logo{margin:0 0 18px}
.login .logo{--wm:28px}
.dot{color:var(--accent-deep)}
.switch{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink)}
.switch input{width:auto}
/* modal */
.modal{position:fixed;inset:0;background:rgba(38,25,28,.4);display:grid;place-items:start center;
padding:40px 16px;z-index:20;overflow:auto;scrollbar-gutter:stable;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-card{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:0 30px 80px rgba(38,25,28,.28);width:min(600px,96vw);padding:0;animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700}
.modal-head .iconbtn-bar{flex:none;margin:-4px -8px -4px 0}
.modal-head .iconbtn-bar:hover{background:var(--bg-2)}
#modalBody{padding:20px}
#modalBody .row{margin-bottom:12px}
@media(max-width:600px){.modal{padding:0;place-items:end center}.modal-card{width:100%;border-radius:20px 20px 0 0;max-height:94vh;overflow:auto}}
/* proposal editor */
.pe-sub{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:22px 0 8px}
#pe_items input,#pe_items select{padding:7px 9px}
#pe_items td{padding:6px 6px;vertical-align:middle}
.pe-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pe-foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;margin-top:20px}
.pe-settings{display:flex;gap:14px;flex-wrap:wrap}
.pe-totals{min-width:260px;margin-left:auto;font-size:14px}
.pe-totals .t{display:flex;justify-content:space-between;padding:4px 0}
.pe-totals .t.grand{border-top:1px solid var(--line-2);margin-top:4px;padding-top:8px;font-weight:700;font-size:15px}
.pe-totals .t.dep{background:var(--accent-soft);color:#2f6f75;font-weight:700;border-radius:9px;padding:8px 10px;margin-top:8px;border:1px solid var(--accent-line)}
.pe-actions{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pe-workflow{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#f7f9f9}
.pe-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pe-wf-status{font-size:13.5px;color:var(--ink-2);margin:8px 0;line-height:1.5}
.pe-wf-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.wf-more{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.pe-step{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff}
.pe-step.done{color:var(--ok);border-color:#bfe3cc;background:var(--okbg)}
.pe-step.now{color:#2f6f75;border-color:var(--accent-line);background:var(--accent-soft);font-weight:700}
.copyrow{display:flex;gap:8px;align-items:center;margin:8px 0}
.copyrow input{flex:1;min-width:0;width:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.copyrow .btn{flex:none;white-space:nowrap}
#pe_items tr.opt-row{background:rgba(162,218,222,.1)}
#pe_items tr.opt-row .i-desc{font-style:italic}
/* A11Y-01 (round 54): at 600 px and below each line item is a stacked block: Description full width; Qty, Unit price and
Amount on one row; Tax and Add-on under it. The page's editor hides while a wizard hosts its blocks (body.pe-hosted). */
body.pe-hosted #proposalEditor{display:none!important}
@media(max-width:600px){
#pe_items,#pe_items tbody{display:block;width:100%}
#pe_items thead{display:none}
#pe_items tr{display:grid;grid-template-columns:minmax(64px,1fr) minmax(88px,1.3fr) minmax(0,1fr) 44px;gap:6px 10px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
#pe_items td{display:block;padding:0;min-width:0}
#pe_items td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 3px}
#pe_items td.pi-desc{grid-column:1/-1;grid-row:1}
#pe_items td.pi-qty{grid-column:1;grid-row:2}
#pe_items td.pi-unit{grid-column:2;grid-row:2}
#pe_items td.pi-amt{grid-column:3/-1;grid-row:2;align-self:center;padding-top:16px}
#pe_items td.pi-tax{grid-column:1/3;grid-row:3}
#pe_items td.pi-opt{grid-column:3;grid-row:3;text-align:left!important}
#pe_items td.pi-del{grid-column:4;grid-row:3;justify-self:end}
#pe_items .i-qty,#pe_items .i-unit{max-width:none!important;width:100%;min-width:56px}
#pe_items .i-del{min-width:44px;min-height:44px}
}
/* public agreement / sign page */
.agreement{max-width:780px;margin:0 auto}
.agreement .terms{white-space:pre-wrap;font-size:13px;color:var(--ink-2);background:#f7f9f9;border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 0}
.agreement table{margin:10px 0}
.sign-box{border:1px solid var(--accent-line);border-radius:14px;padding:18px;margin-top:18px;background:var(--accent-soft)}
/* S116: the deposit after signing (Deposit due, Pay deposit to QuickBooks' page; a full-width 44 px button on a phone) */
.sign-dep{margin-top:14px;padding-top:14px;border-top:1px solid var(--accent-line)}
.sign-dep-due{margin-bottom:10px}
.sign-dep .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;box-sizing:border-box}
.sign-dep .note{margin:8px 0 0}
@media (max-width:520px){.sign-dep .btn{width:100%}}
/* ---------- global search (top bar) ---------- */
.home-search{position:relative;width:clamp(180px,42vw,560px);justify-self:center}
.home-search input{font-size:14px;padding:10px 14px 10px 38px;border-radius:12px;border-color:rgba(26,46,48,.1);
background:rgba(255,255,255,.82) url("data:image/svg+xml;utf8,") no-repeat 13px center;
box-shadow:0 1px 2px rgba(26,46,48,.06) inset}
.home-search input:focus{background-color:#fff;border-color:rgba(26,46,48,.2);box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:12;background:var(--panel-solid);border:1px solid var(--line);
border-radius:14px;box-shadow:0 20px 60px rgba(38,25,28,.18);max-height:60vh;overflow:auto;padding:6px}
.sr-item{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:10px;cursor:pointer;color:var(--ink)}
.sr-item:hover{background:var(--accent-soft)}
.sr-code,.ref-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;
color:#2f6f75;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:6px;padding:1px 6px;white-space:nowrap}
.sr-kind{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-left:auto}
@media(max-width:860px){.home-search{width:clamp(150px,46vw,560px)}.home-search input{padding-left:34px;padding-right:8px}}
/* ---------- HOME: widget grid (always editable: ⋮ to move, corner to resize) ---------- */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.home-head .hello{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--on-ground)}
.home-head .hello small{display:block;font-size:13px;font-weight:500;color:var(--on-ground-2);margin-top:2px}
.home-tools{display:flex;gap:8px;align-items:center;position:relative}
.view .wgrid .widget{margin:0}
.iconbtn-page{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;
display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s,transform .3s var(--ease)}
.iconbtn-page svg{width:22px;height:22px}
.iconbtn-page:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.iconbtn-page.on{background:var(--accent);border-color:transparent;color:var(--accent-ink);transform:rotate(30deg)}
.popover{position:absolute;top:calc(100% + 8px);right:0;z-index:15;width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 20px 60px rgba(38,25,28,.18);padding:8px;animation:pop .18s var(--ease)}
.pop-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:8px 10px 6px}
.pop-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;margin:0;color:var(--ink)}
.pop-row:hover{background:var(--accent-soft)}
.pop-row input{width:18px;height:18px;margin:0}
.pop-foot{border-top:1px solid var(--line);margin-top:6px;padding:10px 10px 4px;display:flex;justify-content:flex-end}
.wgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;position:relative;align-items:start}
.widget{grid-column:span var(--span,12);height:var(--h,auto);position:relative;margin:0;display:flex;flex-direction:column;
overflow:visible;min-width:0;transition:box-shadow .2s,border-color .2s,opacity .2s}
.widget > *{min-width:0}
.w-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
@media(max-width:1080px){.widget[data-span="3"],.widget[data-span="4"],.widget[data-span="5"]{grid-column:span 6}}
@media(max-width:860px){.widget{grid-column:span 12!important;height:auto!important}}
.widget.is-hidden{display:none}
.w-head{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.w-head h2{margin:0;flex:1}
.w-handle{width:32px;height:32px;border-radius:9px;border:0;background:transparent;color:var(--muted);cursor:grab;touch-action:none;
display:grid;place-items:center;padding:0;user-select:none;-webkit-user-select:none;transition:background .15s,color .15s;flex:none;margin-right:-6px}
.w-handle:hover{background:var(--accent-soft);color:var(--ink-2)}
.w-handle:active{cursor:grabbing}
.w-resize{position:absolute;right:3px;bottom:3px;width:24px;height:24px;cursor:ns-resize;touch-action:none;border-radius:0 0 12px 0;opacity:.55;
background:linear-gradient(135deg,transparent 0 50%,var(--line-2) 50% 58%,transparent 58% 70%,var(--line-2) 70% 78%,transparent 78%);transition:opacity .15s}
.widget:hover .w-resize,.widget.resizing .w-resize{opacity:1;
background:linear-gradient(135deg,transparent 0 50%,var(--accent-deep) 50% 58%,transparent 58% 70%,var(--accent-deep) 70% 78%,transparent 78%)}
.widget.resizing{border-color:var(--accent-deep)!important}
.w-sizechip{display:none;position:absolute;right:12px;bottom:32px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;
color:#fff;background:var(--ink-2);border-radius:6px;padding:3px 7px;pointer-events:none;box-shadow:0 4px 12px rgba(38,25,28,.25);z-index:2}
.w-sizechip.show{display:block}
@media(max-width:860px){.w-resize{display:none}} /* phone: natural height, no height-resize (only reorder) */
.widget.dragging{opacity:1;background:var(--accent-soft)!important;border:1.5px dashed var(--accent-line)!important;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.widget.dragging > *{visibility:hidden}
.widget{will-change:transform}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;margin:0;border-radius:var(--radius);overflow:hidden;
background:var(--panel-solid)!important;border:1px solid var(--accent-line)!important;
box-shadow:0 8px 24px rgba(38,25,28,.14)!important;transform:scale(1);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.drag-ghost.lifted{transform:scale(1.025);box-shadow:0 28px 64px rgba(38,25,28,.26)!important}
.drag-ghost.settling{transform:scale(1);transition:left .22s var(--ease),top .22s var(--ease),width .22s var(--ease),height .22s var(--ease),
transform .22s var(--ease),box-shadow .22s var(--ease);box-shadow:0 4px 16px rgba(38,25,28,.12)!important}
body.is-dragging{user-select:none;-webkit-user-select:none;cursor:grabbing}
/* home content pieces */
.stats-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:#f7f9f9;border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.stat .n{font-size:27px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
@media(max-width:600px){.stats-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stat{padding:13px 14px}.stat .n{font-size:23px}.stat .l{white-space:normal}}
/* M5: the donut charts. Light theme; 390px-safe. */
.health-sub2{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:11.5px}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.donut-svg{width:118px;height:118px;flex:0 0 auto}
.donut-total{text-anchor:middle;font-size:26px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.donut-cap{text-anchor:middle;font-size:9px;fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.donut-legend{list-style:none;margin:0;padding:0;flex:1 1 148px;min-width:148px;display:flex;flex-direction:column;gap:6px}
/* Round 62 C (CEO S138): no legend row opens anything, so none looks clickable (no hand cursor, no hover highlight) */
.donut-li{display:flex;align-items:center;gap:9px;cursor:default;padding:5px 8px;border-radius:9px}
.donut-key{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.donut-lab{font-size:13.5px;color:var(--ink);font-weight:600}
.donut-val{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:600px){.donut-legend{flex-basis:130px;min-width:130px}}
.attn{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.attn:last-child{border-bottom:0}
.attn:hover .attn-label{color:var(--accent-text)}
.attn-dot{width:9px;height:9px;border-radius:50%;flex:none}
/* S86 (CEO): levels 2 and 3 swapped so urgency runs cool to warm: grey · turquoise · amber · red (level 3, e.g. an
automatic clock-out, read as "green / fine" in turquoise). */
.attn-dot.sev4{background:var(--bad)} .attn-dot.sev3{background:#e0a800}
.attn-dot.sev2{background:var(--accent-deep)} .attn-dot.sev1{background:#b5adaf}
.attn-main{flex:1;min-width:0}
.attn-label{font-weight:600}
.attn-reason{font-size:12px;color:var(--muted)}
.attn-age{font-size:12px;color:var(--muted);white-space:nowrap}
.upd{display:flex;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}
.upd:last-child{border-bottom:0}
.upd .when{color:var(--muted);white-space:nowrap;font-size:12px;min-width:96px}
.upd .act{font-weight:600;text-transform:capitalize}
/* M3: needs-attention tabs + count badges */
.attn-tabs{display:flex;gap:6px;margin:0 0 8px;border-bottom:1px solid var(--line)}
.attn-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent-soft);color:#2f6f75;font-size:11px;font-weight:700;border:1px solid var(--accent-line)}
.attn-tab.on .attn-badge{background:var(--accent-text);color:#fff;border-color:var(--accent-text)}
/* M3: recent-activity filter chips + deep-link rows */
.upd-filter{display:flex;gap:6px;margin:0 0 8px;flex-wrap:wrap}
.upd-chip:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.upd-chip.on{color:#2f6f75;background:var(--accent-soft);border-color:var(--accent-line)}
.upd-link{cursor:pointer;position:relative;padding-left:6px;padding-right:16px;margin:0 -6px;border-radius:8px}
.upd-link:hover{background:var(--accent-soft)}
.upd-link:hover .act{color:var(--accent-text)}
.upd-link::after{content:"›";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
/* M4: pipeline card: one card, three stage tabs + a per-tab action menu */
.pipe-tabs{display:flex;align-items:center;gap:6px;margin:0 0 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pipe-sp{flex:1;min-width:8px}
.empty-good{color:var(--ok);font-size:14px;padding:8px 0}
/* skeleton loaders */
.sk{display:block;height:14px;border-radius:7px;margin:10px 0;
background:linear-gradient(90deg,#eef1f2 25%,#e2e7e8 50%,#eef1f2 75%);background-size:200% 100%;animation:sk 1.3s infinite}
.sk.w60{width:60%}.sk.w80{width:80%}.sk.w40{width:40%}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.view{animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- a record's activity: the note kinds ---------- */
.tl-kind{font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--muted);min-width:52px}
.tl-kind.call{color:var(--ok)} .tl-kind.note{color:var(--info)} .tl-kind.system{color:var(--muted)}
/* responsive: wide tables scroll inside their card, never the page */
.card:not(.widget){overflow-x:auto}
@media(max-width:680px){
.row{grid-template-columns:1fr!important}
.pe-totals{min-width:0;width:100%}
.card{padding:16px}
table{font-size:13px}
th,td{padding:9px 6px}
}
/* =====================================================================
v2: New Business Desk (2026-09-05): quick actions, record sections,
invoices, 3-step sign page, portal docs
===================================================================== */
/* quick actions: one control everywhere */
.qa-btn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;display:inline-grid;place-items:center;padding:0;vertical-align:middle;transition:background .15s,border-color .15s}
.qa-btn:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.qa-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
.qa-btn:disabled{opacity:.4;cursor:default}
.qa-btn svg{width:18px;height:18px}
.qa-menu{position:fixed;z-index:60;min-width:220px;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px rgba(38,25,28,.2);padding:6px;animation:pop .16s var(--ease)}
.qa-menu .qa-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:8px 10px 4px}
.qa-menu .qa-note{font-size:12.5px;color:var(--muted);padding:2px 10px 6px;overflow-wrap:anywhere}
.qa-menu .qa-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;border:0;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.qa-menu .qa-i:hover{background:var(--accent-soft)}
.qa-menu .qa-i.go{font-weight:700;color:#2f6f75}
.qa-menu .qa-i.danger{color:var(--bad)}
.qa-menu .qa-i:disabled{opacity:.45;cursor:not-allowed}
.qa-menu .qa-sep{height:1px;background:var(--line);margin:4px 6px}
/* the wide modal and the record sections (evidence, activity) */
.modal-card.wide{width:min(860px,96vw)}
.rec-sec{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;min-width:0}
.rec-sec .t{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 6px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rec-sec.locked{opacity:.6;border-style:dashed;background:transparent}
.rec-sec .kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.rec-sec .kv:last-child{border-bottom:0}
.rec-sec .kv .k{color:var(--muted)}
.rec-sec .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rec-act{max-height:220px;overflow:auto;font-size:12.5px}
.rec-act .a{display:flex;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line)}
.rec-act .a .w{color:var(--muted);white-space:nowrap;min-width:92px}
/* proposal editor: numbered sections */
.pe-sec{display:flex;align-items:center;gap:10px;margin:22px 0 10px}
.pe-sec h3{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.pe-client{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);margin-top:6px}
.pe-frozen{background:var(--warnbg);border:1px solid #f0d8b0;color:var(--warn);border-radius:10px;padding:9px 12px;font-size:13px;margin:0 0 12px}
.pe-frozen.pe-editing{background:#e9f9f0;border-color:#9bd9b8;color:#1e7a4d}
#proposalEditor.pe-readonly .pe-block{opacity:.7}
#proposalEditor.pe-readonly .pe-block input,#proposalEditor.pe-readonly .pe-block select,#proposalEditor.pe-readonly .pe-block textarea{background:#f0f0f0;cursor:default}
/* invoices + status pills */
.pill.issued{background:var(--warnbg);color:var(--warn)}
.pill.paid{background:var(--okbg);color:var(--ok)}
.pill.void{background:#eef1f2;color:var(--muted)}
.pill.on_hold,.pill.invoicing{background:var(--warnbg);color:var(--warn)}
.pill.proposal_sent,.pill.active,.pill.in_progress{background:var(--accent-soft);color:#2f6f75}
.pill.signed{background:var(--warnbg);color:var(--warn)}
.pill.completed{background:var(--okbg);color:var(--ok)}
.pill.lost{background:var(--badbg);color:var(--bad)}
.pill.new_lead{background:var(--infobg);color:var(--info)}
.pill.quoted{background:var(--accent-soft);color:#2f6f75}
/* proposal statuses that had no pill rule read as bare text, give every status a pill (Reza note 1, S64) */
.pill.draft{background:#eef1f2;color:var(--ink-2)}
.pill.sent{background:var(--infobg);color:var(--info)}
.pill.declined{background:var(--badbg);color:var(--bad)}
.pill.deposit_paid{background:var(--okbg);color:var(--ok)}
/* sign page: three active steps */
.sign-steps{display:grid;gap:14px;margin-top:6px}
.sign-step{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.sign-step .sn{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--accent-line);display:grid;place-items:center;font-weight:800;color:#2f6f75;font-size:13px}
.sign-step.done .sn{background:var(--ok);border-color:var(--ok);color:#fff}
.sign-step h4{margin:2px 0 4px;font-size:15px}
.sign-step .note{margin:0}
.terms-panel{display:none;white-space:pre-wrap;font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 0 0;max-height:360px;overflow:auto}
.terms-panel.open{display:block}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.consent input{width:20px;height:20px;margin-top:1px;flex:none}
.sign-evidence{font-size:11.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;margin-top:10px}
/* ---- v3 (2026-09-06): payment schedule editor, per-line tax picks ---- */
.tax-cell,.tax-picks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:36px}
.tp{display:inline-flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;color:var(--muted)}
.tp input{width:auto;margin:0}
.sched{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-width:720px}
.sched .srow{display:grid;grid-template-columns:1.5fr 120px 110px 1.4fr 96px 32px;gap:8px;align-items:center}
.sched .srow .sk-label{font-weight:700;font-size:13px}
.sched .srow .s-amt{padding-top:0!important;font-weight:600}
.sched .srow input,.sched .srow select{margin:0}
@media (max-width:760px){.sched .srow{grid-template-columns:1fr 1fr 1fr;row-gap:4px}.sched .srow .s-amt{grid-column:3}}
/* =====================================================================
IA v4 (2026-09-06): menu pages with sub-tabs, the action-layer wizard,
"next block" placeholders, account card
===================================================================== */
/* drawer: two-line items (name + what is inside), a gap before Settings */
.nav-item{flex-wrap:wrap;row-gap:0}
.nav-item span{flex:1 1 auto}
.drawer-gap{flex:1 1 auto}
.drawer .drawer-foot{margin-top:0}
/* sub-tabs on a page */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:5px;background:#eef1f1;border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.tab{appearance:none;border:0;background:transparent;color:var(--ink-2);font:inherit;font-weight:600;font-size:14px;padding:9px 16px;border-radius:10px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}
.tab:hover{background:rgba(255,255,255,.7)}
.tab.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 10px rgba(79,164,172,.25)}
@media(max-width:600px){.tabs{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.tab{padding:9px 6px;font-size:13px;text-align:center}}
.kv-list .kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv-list .kv:last-child{border-bottom:0}
.kv-list .kv .k{color:var(--muted)}
/* ---------- wizard: the action layer's own surface ---------- */
.wiz{position:fixed;inset:0;z-index:70;background:rgba(38,25,28,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;justify-content:flex-end}
body.wiz-open{overflow:hidden}
.wiz-panel{width:min(560px,100%);height:100%;background:var(--panel-solid);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(38,25,28,.28);animation:wizin .28s var(--ease)}
@keyframes wizin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.wiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 12px;background:var(--accent);color:var(--accent-ink)}
.wiz-kicker{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:2px}
.wiz-title h2{margin:0;font-size:21px;letter-spacing:-.01em;line-height:1.2}
.wiz-rail{display:flex;gap:6px;padding:12px 24px 16px;background:var(--accent);flex-wrap:wrap}
.wiz-dot{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:rgba(26,46,48,.6);padding:5px 10px 5px 5px;border-radius:999px;background:rgba(255,255,255,.35)}
.wiz-dot i{font-style:normal;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--accent-ink)}
.wiz-dot.now{background:#fff;color:var(--accent-ink);box-shadow:0 2px 8px rgba(26,46,48,.12)}
.wiz-dot.now i{background:var(--ink-2);color:#fff}
.wiz-dot.done{color:var(--accent-ink)}
.wiz-dot.done i{background:var(--ok);color:#fff}
.wiz-body{flex:1 1 auto;overflow:auto;padding:22px 24px 10px}
.wiz-step-title{margin:0 0 4px;font-size:17px}
.wiz-hint{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.45}
.wiz-err{background:var(--badbg);color:var(--bad);border:1px solid #f1c7c3;border-radius:10px;padding:9px 12px;font-size:13.5px;margin:0 0 14px}
#wiz_form .row{margin-bottom:12px}
#wiz_form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 5px}
#wiz_form .switch{font-size:13.5px}
.wiz-sub{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:18px 0 8px}
.wiz-review{border:1px solid var(--line);border-radius:12px;padding:6px 14px;background:#f7f9f9}
.wiz-review .kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.wiz-review .kv:last-child{border-bottom:0}
.wiz-review .kv .k{color:var(--muted);flex:none}
.wiz-review .kv span:last-child{text-align:right;word-break:break-word}
.wiz-static{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f7f9f9;font-size:14px;min-height:42px;display:block;line-height:20px} /* A11Y-02 (round 54): block, so a sentence with bold inside reads as one line of text */
.wiz-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.wiz-count{font-size:12px;color:var(--muted);font-weight:600}
/* S162 (0181): the QuickBooks number light of a Send / Issue window (above its footer), and numGate's small window */
.wiz-num{display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 24px;border-top:1px solid var(--line);font-size:13.5px;line-height:19px;background:#f7f9f9;color:var(--ink)}
.wiz-num-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-top:4.5px;background:#8a9396}
.wiz-num.ok{background:var(--okbg);color:var(--ok)} .wiz-num.ok .wiz-num-dot{background:var(--ok)}
.wiz-num.warn{background:var(--warnbg);color:var(--warn)} .wiz-num.warn .wiz-num-dot{background:#e0a800}
.wiz-num.bad{background:var(--badbg);color:var(--bad)} .wiz-num.bad .wiz-num-dot{background:var(--bad)}
.wiz-num.info{background:#e8f1f8;color:#1d4f75} .wiz-num.info .wiz-num-dot{background:#2f6fa3}
.wiz-num.wait .wiz-num-dot{animation:numpulse 1.2s ease-in-out infinite}
@keyframes numpulse{50%{opacity:.35}}
.wiz-num a{color:inherit;font-weight:700;text-decoration:underline}
.numgate{position:fixed;inset:0;z-index:1100;background:rgba(38,25,28,.42);display:grid;place-items:center;padding:16px}
.numgate-card{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:min(440px,100%);overflow:hidden}
.numgate-card h3{margin:0;padding:18px 20px 12px;font-size:17px}
.numgate-card .wiz-num{padding:12px 20px}
.numgate-acts{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}
@media(max-width:600px){.wiz-num{padding:10px 18px}}
@media(max-width:600px){.wiz{justify-content:center;align-items:flex-end}.wiz-panel{height:96%;width:100%;border-radius:22px 22px 0 0;animation:wizup .28s var(--ease)}@keyframes wizup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}.wiz-head{padding:18px 18px 8px;border-radius:22px 22px 0 0}.wiz-rail{padding:8px 18px 12px}.wiz-body{padding:18px}.wiz-foot{padding:12px 18px calc(14px + env(safe-area-inset-bottom))}.wiz-dot{font-size:0;gap:0;padding:4px}.wiz-dot i{font-size:11px}}
/* F14 (round 37): Settings › Templates grouped by where each template is used */
.tpl-grp{margin:6px 0 18px}
.tpl-gh{margin:14px 0 8px;font-size:15px}
.tpl-gh .cmuted{font-weight:400;font-size:12.5px;margin-left:6px}
.tpl-sub{margin:0 0 12px}
.tpl-sl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 6px}
/* F16b (round 37): activity rows for a clock tap with no location: denied = red, no position / too slow = grey */
.act-tone.bad{color:var(--bad);font-weight:600}
.act-tone.muted{color:var(--muted)}
/* F10 (round 37): the in-app question step (askStep) sits above a card and above an open wizard */
#askwiz{z-index:95}
body.ask-open{overflow:hidden}
#askwiz .ask-text{display:block;line-height:1.45;white-space:pre-line}
#ask_form .row{margin-bottom:12px}
#ask_form label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 5px}
/* ---- v4b (2026-09-06): proposal wizard hosts the editor blocks; convert wizard pick rows ---- */
.wiz-panel.wide{width:min(820px,100%)}
body.modal-over-wiz .modal{z-index:80}
.wiz-host .pe-sec{display:none}
.wiz-host .pe-block .row{margin-bottom:12px}
.wiz-host #pe_items{margin-top:4px}
.wiz-host .pe-foot{margin-top:14px}
.wiz-pick,.wiz-choice{display:flex;flex-direction:column;gap:8px}
.pick-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-size:14px}
.pick-row:has(input:checked){border-color:var(--accent-line);background:var(--accent-soft)}
.pick-row input{width:18px;height:18px;margin:0;flex:none}
.pick-row .pick-main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.pick-row .pick-main .note{font-size:12px}
/* ---- v5 (2026-09-07): market badge · ready/overdue pills · schedule picker · invoice view · settings rows ---- */
.mkt{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.mkt.residential{background:var(--accent-soft);color:#2f6f75;border:1px solid var(--accent-line)}
.mkt.commercial{background:#49363A;color:#fff}
.pill.ready{background:var(--accent-soft);color:#2f6f75;border-color:var(--accent-line)}
.pill.overdue{background:var(--badbg);color:var(--bad)}
.sched-pick{margin:12px 0 4px}
.sched-pick .pick-row.is-done{opacity:.6}
.sched-pick .pick-row .pill{margin-left:auto}
.inv-doc{font-size:14px}
.inv-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.inv-meta div{display:flex;gap:10px;justify-content:flex-end;align-items:center;font-size:13px}
.inv-meta .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;min-width:52px;text-align:right}
.inv-lines{width:100%;margin-top:12px}
.inv-lines td,.inv-lines th{padding:8px 6px}
.inv-lines tfoot td{border-top:2px solid var(--line);font-size:15px}
.inv-pay{margin-top:14px;padding:12px 14px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;font-size:13.5px;line-height:1.55}
.inv-pay .t{font-weight:700;margin-bottom:4px;color:#2f6f75}
/* ---- v5c (round 6) ---- */
.wiz-foot-actions{display:flex;align-items:center;gap:10px}
.wiz-foot #wiz_alt{margin-right:0}
/* ---- v5d (round 6b) ---- */
.jt-wrap{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.jt-wrap select{flex:1;min-width:0}
.jt-wrap .jt-note{width:150px;flex:0 0 150px;padding:6px 9px;font-size:13px}
input.is-locked{background:var(--bg-2);color:var(--muted);cursor:not-allowed}
/* =====================================================================
v6 (2026-09-08, CEO round-07 volume review): flat menu, clean rows, Live|All toggle,
three Home stage cards + Workspace, the two-level Customer Card, Settings edit-windows.
===================================================================== */
/* BUG-1 (§1D): a widget body that could not scroll still swallowed the wheel (overscroll-behavior:contain
on a scroll container stops chaining even when there is nothing to scroll). Bodies now only become
scroll containers when the card was given an explicit height, and never contain the overscroll. */
.w-body{overflow:visible;overscroll-behavior:auto}
@media(min-width:861px){.widget[style*="--h"] .w-body{overflow:auto}}
.stage-list{max-height:460px;overflow:auto;overscroll-behavior:auto;scrollbar-width:thin;padding-right:2px}
/* segmented Live | All toggle (§1C) */
.seg{display:inline-flex;padding:3px;border:1px solid var(--line-2);border-radius:11px;background:#fff;flex:none}
.seg-b{appearance:none;border:0;background:transparent;font:inherit;font-weight:700;font-size:13px;padding:6px 14px;border-radius:8px;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.seg-b.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(79,164,172,.25)}
@media (max-width:420px){.seg-b{padding:6px 8px}} /* S111: the 5-button date range fits a 390 px card */
.list-tools input[type=search]{max-width:260px}
.list-tools select{width:auto;max-width:190px;padding:8px 32px 8px 12px;font-size:13px}
@media(max-width:600px){.list-tools input[type=search],.list-tools select{max-width:100%;width:100%}}
/* clean rows (§G): one line · subtle status tint · expand arrow · ⋯ menu */
.crow-list{display:flex;flex-direction:column;gap:6px}
.crow{display:grid;grid-template-columns:10px 26px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;
transition:border-color .15s,background .15s;min-width:0}
.crow:hover{border-color:var(--accent-line);background:#fcfdfd}
.crow-dot{width:9px;height:9px;border-radius:50%;background:var(--dot,var(--line-2));justify-self:center;flex:none}
.crow.tone-new{--dot:var(--info)}
.crow.tone-contacted{--dot:#e0a800}
.crow.tone-draft{--dot:#b5adaf}
.crow.tone-sent{--dot:var(--accent-deep)}
.crow.tone-viewed{--dot:var(--violet)}
.crow.tone-signed{--dot:#e0a800}
.crow.tone-active,.crow.tone-in_progress{--dot:var(--accent-deep)}
.crow.tone-invoicing{--dot:#e0a800}
.crow.tone-on_hold{--dot:#c98a00}
.crow.tone-completed{--dot:var(--ok)}
.crow.tone-issued{--dot:var(--line-2)}
.crow.tone-overdue{--dot:var(--bad);background:#fdf5f3}
.crow.tone-paid{--dot:#cfd6d8;color:var(--muted)}
.crow.tone-paid .crow-main strong{color:var(--ink-2)}
.crow.tone-void,.crow.tone-lost,.crow.tone-cancelled,.crow.tone-declined,.crow.tone-archived,.crow.tone-converted{--dot:#cfd6d8;color:var(--muted)}
.crow.tone-void .crow-main strong,.crow.tone-cancelled .crow-main strong{text-decoration:line-through;color:var(--muted)}
.crow-x{width:28px;height:28px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0;transition:transform .18s var(--ease),background .15s}
.crow-x:hover{background:var(--accent-soft);color:var(--ink-2)}
.crow-x svg{width:16px;height:16px;transform:rotate(180deg);transition:transform .18s var(--ease)}
.crow.is-open .crow-x svg{transform:rotate(270deg)}
.crow-main{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-width:0;font-size:14px;line-height:1.35}
.crow-main strong{font-weight:700;color:var(--ink)}
.crow-main .cm{color:var(--ink-2)}
.crow-main .cm a{color:var(--accent-text);text-decoration:none}
.crow-main .cm a:hover{text-decoration:underline}
.crow-main .cq{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:360px}
.crow-main .cmoney{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.crow-main .cmuted{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.crow-main .cref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.crow-right{display:flex;align-items:center;gap:6px;flex:none}
.crow-right select{width:auto;padding:5px 28px 5px 10px;font-size:12.5px;font-weight:600;border-radius:9px}
.row-open{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0;flex:none;transition:border-color .15s,color .15s,background .15s}
.row-open:hover{border-color:var(--accent-line);color:var(--ink-2);background:var(--accent-soft)}
.row-open svg{width:15px;height:15px}
/* Customer-card project switcher (Reza 2026-09-10): read clearly as a dropdown, with a visible caret */
.cc-projpick select:hover{border-color:var(--accent,#4fa4ac)}
/* Persistent Save bar on the proposal editor (Reza 2026-09-10) */
.pe-stickybar{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin:10px -14px -14px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);z-index:3}
.crow-detail{display:none;margin:-2px 0 2px 46px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:0 0 12px 12px;background:#fbfcfc;font-size:13.5px}
.crow-detail.show{display:block}
.crow-detail .kv{display:flex;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.crow-detail .kv:last-child{border-bottom:0}
.crow-detail .kv .k{color:var(--muted);min-width:110px;flex:none}
.crow-detail textarea{margin-top:6px;font-size:13.5px}
.crow-detail .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
/* Mobile (Reza 2026-09-10): give .crow-main the full row width (was crushed into a 24px column),
drop the action cluster to its own row, and grow the tap targets to ~40px. */
@media(max-width:760px){
/* Stack vertically so the details always fit and wrap; the dot sits in the corner,
the confusing expand-chevron is dropped, and the open/actions buttons grow to ~40px. */
.crow{display:flex;flex-direction:column;align-items:stretch;gap:8px;position:relative;padding:12px 12px 12px 26px}
.crow-dot{position:absolute;left:10px;top:16px}
.crow > .crow-x{display:none}
.crow-main{min-width:0}
.crow-main .cq{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}
.crow-right{justify-content:flex-end;flex-wrap:wrap;gap:10px}
.row-open,.qa-btn{width:40px;height:40px}
.row-open svg{width:20px;height:20px}
.qa-btn svg{width:22px;height:22px}
.crow-detail{margin-left:0}.crow-detail .dgrid{grid-template-columns:1fr}
}
.crow-empty{color:var(--muted);font-size:14px;padding:14px 6px}
.type-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--accent-soft);color:#2f6f75;border:1px solid var(--accent-line)}
.type-tag.commercial{background:#49363A;color:#fff;border-color:#49363A}
.pin{width:26px;height:26px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:0;border-radius:7px}
.pin:hover{background:var(--accent-soft);color:var(--ink-2)}
.pin.on{color:#e0a800}
.pin .ico{width:18px;height:18px;vertical-align:middle}
.pin.on .ico{fill:currentColor}
/* Home stage cards (§1.3) + Workspace (§1.5) */
.srow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line)}
.stage-list .srow:last-child{border-bottom:0}
.srow .sname{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .ssub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .pill{font-size:11px;padding:2px 8px}
.srow .crow-x{width:22px;height:22px}
.srow .srow-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
/* status toggle (New | Contacted): a compact segmented pill instead of a dropdown */
.lead-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:#fff}
.lead-toggle .lt-opt{border:0;background:none;padding:3px 10px;font-size:11px;line-height:1.4;cursor:pointer;color:var(--muted);white-space:nowrap}
.lead-toggle .lt-opt.on{background:#dff3f5;color:#0b7681;font-weight:700}
.lead-toggle .lt-opt:not(.on):hover{background:#f2f4f4}
/* light text-link action (Send proposal on a row, Edit in the expanded panel) */
.btn-link{background:none;border:0;padding:2px 2px;color:#0b7681;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.btn-link:hover{text-decoration:underline}
.sdetail-foot{margin-top:8px}
/* phone: drop the row's controls (status + Send proposal) to their own line under the name so it never crowds */
@media(max-width:560px){.stage-list .srow .srow-right{grid-column:1 / -1;justify-content:flex-start;padding-left:30px;margin-top:2px}}
.sdetail{display:none;padding:6px 8px 10px 30px;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--line);background:#fafbfb}
.sdetail.show{display:block}
.sdetail div{padding:2px 0}
/* Customer Card (§3B): a modal styled like the wizard pages */
.modal-card.ccard{width:min(960px,96vw)}
.cc-head{background:var(--accent);color:var(--accent-ink);padding:18px 22px 14px;border-radius:var(--radius) var(--radius) 0 0;margin:-20px -20px 16px}
.cc-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-title h2{margin:0;font-size:21px;letter-spacing:-.01em;line-height:1.2}
.cc-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;margin-top:6px;color:rgba(26,46,48,.85)}
.cc-meta a{color:var(--accent-ink);font-weight:600;text-decoration:none}
.cc-meta a:hover{text-decoration:underline}
.cc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.cc-actions .btn{box-shadow:none}
.cc-actions .btn.ghost{background:rgba(255,255,255,.6);border-color:rgba(26,46,48,.12);color:var(--accent-ink)}
.cc-actions .btn:not(.ghost){background:var(--ink-2);color:#fff}
.cc-actions .btn:not(.ghost):hover{background:#5c464b}
.cc-head select{width:auto;padding:5px 28px 5px 10px;font-size:12.5px;font-weight:700;border-radius:9px;background-color:#fff}
.cc-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px;padding:4px;background:#f3f5f5;border:1px solid var(--line);border-radius:12px}
.cc-tab{appearance:none;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:9px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.cc-tab:hover{background:#fff}
.cc-tab.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(79,164,172,.25)}
.cc-tab small{font-size:11px;font-weight:700;opacity:.65;margin-left:4px}
/* M6: customer-card 2-level IA: primary segmented row + sub-tab underline row */
.cc-ptabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px;padding:4px;background:#f3f5f5;border:1px solid var(--line);border-radius:12px}
.cc-ptab{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;padding:8px 14px;border-radius:9px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.cc-ptab:hover{background:#fff}
.cc-ptab.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(79,164,172,.25)}
.cc-ptab small{font-size:11px;font-weight:700;opacity:.7;margin-left:5px}
.cc-ptab small.cc-unread{background:var(--bad);color:#fff;opacity:1;border-radius:999px;padding:0 6px}
.cc-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:0 2px;border-bottom:1px solid var(--line)}
.cc-subtab{appearance:none;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;padding:7px 4px;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.cc-subtab:hover{color:var(--ink)}
.cc-subtab.on{color:var(--accent-text);border-bottom-color:var(--accent-deep)}
.cc-subtab small{font-size:11px;font-weight:700;opacity:.65;margin-left:4px}
.cc-subtab small.cc-unread{background:var(--bad);color:#fff;opacity:1;border-radius:999px;padding:0 6px}
@media(max-width:600px){.cc-ptabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.cc-subtabs{flex-wrap:nowrap;overflow-x:auto}}
/* M8: staff card pay-model tag (Employee = by time · Sub-contractor = work order/AP) */
.tc-pay{color:var(--accent-text);font-weight:600}
.cc-sec{margin:0 0 16px}
.cc-sec .t{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:0 0 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cc-sec .kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.cc-sec .kv:last-child{border-bottom:0}
.cc-sec .kv .k{color:var(--muted)}
.cc-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.cc-two{grid-template-columns:1fr}.modal-card.ccard{width:100%}.cc-head{margin:-20px -16px 14px;padding:16px}}
.cc-hl{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:12px}
.cc-slot{border:1px dashed var(--line-2);border-radius:12px;padding:14px;background:#fbfcfc;color:var(--muted);font-size:13.5px}
.cc-slot strong{color:var(--ink)}
.cc-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.biz-logo{--wm:18px;display:flex;align-items:center;gap:calc(var(--wm) * .36);margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f7f9f9}
.biz-logo img{height:calc(var(--wm) * 1.55)}
.biz-logo .wm{height:calc(var(--wm) * 1.094)}
.biz-logo .note{margin-left:12px}
/* invoice view: tax breakdown */
.inv-lines tfoot td.sub{border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.inv-lines tfoot tr.tax td{font-size:13px;color:var(--muted);border-top:0;padding-top:2px;padding-bottom:2px}
/* Read-only proposal view (list & card open into this, not the raw editor) */
.pp{font-size:14px}
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:-4px 0 6px}
.pp-tbl{width:100%;margin:10px 0}
.pp-tot{max-width:300px;margin:12px 0 4px auto;font-size:13.5px}
.pp-tot > div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.pp-tot .grand{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;font-size:15px;font-weight:800}
.pp-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
/* Customer card v2 (CEO 2026-09-09): identity head + info popovers + project band + overview */
.cc-idrow{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cc-i{width:20px;height:20px;border-radius:50%;border:0;background:rgba(255,255,255,.6);color:var(--ink-2);font:700 12px/1 Georgia,serif;font-style:italic;cursor:pointer;display:grid;place-items:center;padding:0}
.cc-i:hover{background:#fff}
.cc-leadtag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(26,46,48,.8)}
.cc-overdue{border:0;background:var(--bad);color:#fff;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer}
.cc-overdue:hover{filter:brightness(1.06)}
.cc-projband{margin-top:12px;background:rgba(255,255,255,.55);border-radius:12px;padding:12px 14px}
.cc-projpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc-plus{width:28px;height:28px;border-radius:8px;border:0;background:var(--ink-2);color:#fff;font-size:18px;line-height:1;cursor:pointer;flex:none}
.cc-plus:hover{background:#5c464b}
/* Per-job chip switcher on the customer card (Reza bug 2, S64): every project a customer has,
visible as a chip, current one highlighted, one click to switch. */
.cc-jobchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc-jobchip{display:inline-flex;align-items:center;gap:6px;max-width:230px;padding:5px 11px;border:1px solid var(--line,#e2e6e7);border-radius:999px;background:#fff;color:var(--ink-2,#2b2124);font-size:12px;font-weight:600;cursor:pointer}
.cc-jobchip:hover{border-color:var(--accent,#4fa4ac)}
.cc-jobchip.on{border-color:var(--accent-line,#a9dde1);background:var(--accent-soft,#e6f5f6);color:#2f6f75}
.cc-jobchip .jc-ref{flex:none}
.cc-jobchip .jc-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;color:var(--muted);font-weight:500}
.cc-jobchip .jc-dot{width:8px;height:8px;border-radius:999px;background:var(--muted);flex:none}
.cc-jobchip.cc-jobadd{border-style:dashed;color:var(--muted)}
.jc-dot.active,.jc-dot.in_progress,.jc-dot.invoicing{background:#2f6f75}
.jc-dot.completed{background:var(--ok)}
.jc-dot.on_hold{background:var(--warn)}
.jc-dot.lost,.jc-dot.cancelled{background:var(--bad)}
.jc-dot.signed,.jc-dot.proposal_sent,.jc-dot.new_lead,.jc-dot.contacted{background:var(--info)}
.cc-projpick select{appearance:none;-webkit-appearance:none;background-color:#fff;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='%2349363A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:15px;border:1px solid var(--accent-line,#a9dde1);border-radius:8px;padding:7px 30px 7px 12px;font-size:13px;font-weight:600;color:var(--ink-2,#2b2124);cursor:pointer;max-width:min(70vw,320px)}
.cc-pi-id{display:flex;align-items:center;gap:8px;margin-top:10px}
.cc-pi-addr{font-size:13px;color:rgba(26,46,48,.85);margin-top:2px}
.cc-pi-title{font-size:15px;font-weight:700;color:var(--accent-ink);margin-top:2px}
.cc-pi-edit{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px}
.cc-ed{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(26,46,48,.85)}
.cc-ed .lab{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;opacity:.7}
.cc-ed b{color:var(--accent-ink)}
.cc-ed select{background:#fff;border:0;border-radius:7px;padding:4px 8px;font-size:12.5px}
.cc-pen{border:0;background:transparent;color:var(--ink-2);cursor:pointer;font-size:13px;padding:2px 4px;border-radius:6px;opacity:.75}
.cc-pen:hover{background:rgba(255,255,255,.6);opacity:1}
/* overview */
.cc-feed{display:flex;flex-direction:column;gap:2px;max-height:196px;overflow-y:auto;scrollbar-gutter:stable}
/* customer-card Overview: two money donuts + primary/Actions row + Team link (CEO 2026-09-17) */
.cc-donuts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 14px}
.cc-donut-card{background:#f7f9f9;border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
.cc-donut-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:0 0 8px}
.cc-donuts .donut-wrap{align-items:flex-start;gap:12px}
.cc-donuts .donut-svg{width:96px;height:96px}
.cc-donuts .cmd-donut .donut-total{font-size:15px}
.cc-donuts .donut-legend{flex:1 1 108px;min-width:108px;gap:4px}
.cc-donuts .donut-li{padding:3px 6px;cursor:default}
.cc-donuts .donut-li:hover{background:none}
.cc-donut-foot{font-size:10.5px;color:var(--muted);margin:8px 0 0}
.cc-actrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.cc-actbtn{font-weight:700;border-color:#8fcdd2;color:#0b7681;background:#f0fbfc}
.cc-actbtn:hover{background:#e3f6f8}
.cc-caret{opacity:.7;margin-left:2px}
.cc-link{background:none;border:0;padding:0;margin:0;font-size:14px;font-weight:700;text-transform:none;letter-spacing:normal;color:#0b7681;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.cc-link:hover{text-decoration:underline}
.cc-assigned-line{display:flex;gap:8px;align-items:baseline;padding:6px 0;font-size:13.5px}
.cc-assigned-line .k{color:var(--muted)}
/* per-page Back + Home bar (CEO 2026-09-17) */
.page-nav{display:flex;gap:8px;align-items:center;margin:0 0 14px}
.page-nav.pn-doc{max-width:780px;margin:0 auto 14px} /* sign / invoice / complete: line up with the .agreement card */
@media(max-width:600px){.cc-donuts{grid-template-columns:1fr}}
.cc-frow{display:flex;gap:12px;align-items:baseline;text-align:left;width:100%;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;color:var(--ink-2)}
.cc-frow:hover{background:var(--accent-soft)}
.cc-frow .w{color:var(--muted);font-size:12px;white-space:nowrap;flex:none;min-width:88px}
/* info popover (built on .qa-menu) */
.info-pop{padding:8px;min-width:220px;max-width:300px}
.info-r{display:flex;justify-content:space-between;gap:16px;padding:5px 8px;font-size:13px;border-bottom:1px dashed var(--line)}
.info-r:last-child{border-bottom:0}
.info-k{color:var(--muted)}
.info-v{text-align:right;color:var(--ink)}
/* ===================================================================== */
/* BLOCK 2 (2026-09-14): roles, team card, project workspace, time, money-out */
/* ===================================================================== */
/* Manager (DB role `admin`) = the Admin shell minus Settings + Money */
body.is-admin .money-only{display:none!important}
/* pills */
.pill.role-owner{background:var(--accent-soft);color:#2f6f75;border-color:var(--accent-line)}
.pill.role-admin{background:#efe9ff;color:#5b3fa8}
.pill.role-employee,.pill.role-technician{background:#eef1f2;color:var(--ink-2)}
.pill.role-subcontractor{background:#fff3e0;color:#9a5b00}
.pill.appr-approved,.pill.doc-ok,.pill.doc-approved,.pill.asg-active,.pill.asg-accepted{background:var(--okbg);color:var(--ok)}
.pill.appr-pending,.pill.doc-expiring,.pill.doc-pending_review,.pill.doc-submitted,.pill.asg-offered{background:var(--warnbg);color:var(--warn)}
.pill.appr-suspended,.pill.doc-expired,.pill.doc-rejected,.pill.doc-missing,.pill.asg-declined{background:var(--badbg);color:var(--bad)}
.pill.asg-completed{background:var(--okbg);color:var(--ok)}
.pill.asg-removed{background:#eef1f2;color:var(--muted)}
/* team card */
.tc-head .cc-title{align-items:baseline}
.tc-co{font-size:14px;color:rgba(26,46,48,.8);font-weight:600}
.tc-weeknav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.tc-weeknav strong{font-size:14px}
.tw-tot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13px;color:var(--ink-2);background:#f7f9f9;border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0 0 10px}
.tw-tot b{font-size:15px;color:var(--ink)}
.tw-tbl{width:100%;border-collapse:collapse;font-size:13px}
.tw-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.tw-tbl td{padding:6px;border-bottom:1px dashed var(--line);vertical-align:middle}
.tw-tbl tr.tw-day td{background:#f3f5f5;border-bottom:1px solid var(--line);padding:6px 8px;font-size:12.5px}
.tw-tbl tr.te-open td{background:#effaf7}
.tw-tbl .te-h{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.tw-tbl .te-times{white-space:nowrap}
.tw-tbl .te-note{color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-tbl .te-act{white-space:nowrap;text-align:right}
.tw-tbl .te-act .btn{padding:3px 8px;font-size:12px}
.tw-form{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin-top:12px}
.tw-form .t{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:0 0 8px}
.td-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.td-row:last-child{border-bottom:0}
.td-main{flex:1;min-width:0;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.td-file{flex-basis:100%;font-size:12.5px;color:var(--ink-2)}
.td-acts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:none;max-width:45%}
.td-acts .btn{padding:4px 9px;font-size:12px}
.td-up{cursor:pointer}
/* CEO-01 (round 54): the card's Documents tab adds a document of a chosen type (type + Upload file on one line) */
.td-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.td-add select{flex:1 1 180px;min-width:0;width:auto;max-width:320px}
.td-add .btn{margin:0;white-space:nowrap}
.ta-body{white-space:pre-wrap;font:inherit;font-size:13px;line-height:1.5;background:#f7f9f9;border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-height:340px;overflow:auto;margin:0}
/* workspace: overview */
.ws-done{background:var(--okbg);color:var(--ok);border-radius:12px;padding:10px 14px;margin:0 0 14px;font-size:13.5px}
.ws-over{margin-bottom:6px}
.ws-unread{display:block;width:100%;text-align:left;margin-top:8px;border:0;background:var(--warnbg);color:var(--warn);font:inherit;font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;cursor:pointer}
.cc-tab small.cc-unread{background:var(--bad);color:#fff;opacity:1;border-radius:999px;padding:0 6px}
/* workspace: tasks */
.ws-proposed{background:var(--infobg);color:var(--info);border-radius:10px;padding:8px 12px;font-size:13px;margin:0 0 10px}
.ws-tasks{display:flex;flex-direction:column;gap:4px}
.ws-task{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px}
.ws-task.done .ws-ttitle{text-decoration:line-through;color:var(--muted)}
.ws-task.skipped{opacity:.55}
.ws-task.proposed{border-style:dashed;background:#fbfcfc}
.ws-task.vis{border-left:3px solid var(--accent-deep)}
.ws-tick input{width:18px;height:18px}
.ws-ticon{font-size:15px;width:22px;text-align:center;flex:none}
.ws-tmain{flex:1;min-width:0}
.ws-ttitle{font-weight:600}
.ws-tsub{font-size:12px;color:var(--muted);margin-top:1px}
.ws-tacts{display:flex;align-items:center;gap:4px;flex:none}
.ws-tacts .btn{padding:3px 7px;font-size:11px}
@media(max-width:640px){.ws-task{flex-wrap:wrap}.ws-tacts{width:100%;justify-content:flex-end}}
/* workspace: files */
.ws-fglbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 6px}
.ws-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ws-file{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.ws-file.vis{border-color:var(--accent-line);background:#f6fbfb}
.ws-thumb{width:84px;height:84px;flex:none;border:0;border-radius:9px;background:#eef1f2;overflow:hidden;cursor:pointer;display:grid;place-items:center;padding:0}
.ws-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ws-thumb .ph-file{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.04em}
.ws-thumb .ph-load{color:var(--muted)}
/* F27 (round 37): the file card. Thumbnail left · name (2 lines, …) · who · date · size · who can see · caption + icons */
.ws-fgrid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.ws-file{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start;padding:10px}
.ws-file .ws-thumb{width:72px;height:72px;grid-row:1 / span 4}
.ws-fbody{display:contents}
.ws-fbody > *{grid-column:2}
.ws-fname2{font-weight:600;font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.ws-fsub{font-size:12px;color:var(--muted);line-height:1.3}
.ws-fwho{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12.5px}
.ws-fwho .k,.ws-uplbar > .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.ws-fwho label{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.ws-fwho label.off{color:var(--muted);cursor:default}
.ws-fwho input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent-text)}
.ws-frow{display:flex;align-items:center;gap:6px}
.ws-frow input{flex:1;min-width:0;padding:6px 9px;font-size:12.5px;border-radius:9px}
.ws-ib{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink-2);cursor:pointer;padding:0}
.ws-ib svg{width:17px;height:17px}
.ws-ib:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.ws-ib.bad:hover{background:var(--badbg);border-color:#f1c7c3;color:var(--bad)}
.ws-uplbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;margin:0 0 14px;border:1px dashed var(--line-2);border-radius:12px;background:#fbfcfc}
@media(max-width:600px){.ws-fgrid{grid-template-columns:1fr}
/* phone: the thumbnail sits beside the name only; "Who can see" and the caption row take the full width (one row each) */
.ws-file{grid-template-columns:56px minmax(0,1fr)}.ws-file .ws-thumb{width:56px;height:56px;grid-row:1 / span 2}
.ws-fbody > .ws-fwho,.ws-fbody > .ws-frow{grid-column:1 / -1}.ws-fwho{gap:4px 10px}}
/* workspace: notes + messages */
.ws-thread{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto;padding:4px 2px;margin:0 0 10px}
.ws-msg{max-width:78%;border-radius:14px;padding:8px 12px;font-size:13.5px;line-height:1.4}
.ws-msg.cust{align-self:flex-start;background:#f3f5f5;border-bottom-left-radius:4px}
.ws-msg.office{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:4px}
.ws-msg .who{font-size:11px;color:var(--muted);margin-bottom:2px}
.ws-msg .body{white-space:pre-wrap}
.ws-compose{display:flex;gap:8px;align-items:flex-end}
.ws-compose textarea{flex:1}
/* Round 46 P5: an office-only note in the job's Team messages (the crew never sees it), and the tick that writes one */
.ws-msg.internal{background:#f1efeb;border:1px dashed #d3ccc0}
.ws-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:#e6e1d8;color:#5b5448;font-size:10.5px;font-weight:700;line-height:16px;vertical-align:1px}
.ws-send{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.ws-only{display:flex;align-items:center;gap:5px;margin:0;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer}
.ws-only input{margin:0}
/* wizard bits */
.cw-item .pick-main input{width:100%}
/* ============================================================
Home review pass: Command Center + scroll/tab/height fixes
(namespace: cmd-* / #cmd_body, distinct from the Customer Card's cc-*)
============================================================ */
/* HOME-3: keep scroll + adjustable height, but hide scrollbars and never double them */
.w-body{scrollbar-width:none}
.w-body::-webkit-scrollbar{width:0;height:0;display:none}
.stage-list,.rec-act,.cmd-body,#home_updates,#home_attention{scrollbar-width:none}
.stage-list::-webkit-scrollbar,.rec-act::-webkit-scrollbar,.cmd-body::-webkit-scrollbar,#home_updates::-webkit-scrollbar,#home_attention::-webkit-scrollbar{width:0;height:0;display:none}
/* one scroll region per card: when a card height is set, the body scrolls and inner lists flow */
@media(min-width:861px){.widget[style*="--h"] .stage-list,.widget[style*="--h"] .rec-act{max-height:none;overflow:visible}}
/* REC-2: stable card height so switching tabs/filters doesn't jump the layout */
#home_updates,#home_attention{min-height:150px}
.cmd-body{min-height:230px}
/* REC-1: one consistent tab look across Home cards (needs-attention / pipeline / command / updates) */
.attn-tabs,.cmd-tabs,.upd-filter,.pipe-tabs{border-bottom:1px solid var(--line);margin:0 0 12px}
/* Home cards: keep the tab / filter bars pinned when a (height-dragged) card body scrolls */
.pipe-tabs,.attn-tabs,.upd-filter,.cmd-tabs{position:sticky;top:0;z-index:3;background:var(--panel-solid);margin-bottom:0;padding-bottom:10px}
.cmd-tabs{display:flex;gap:4px;flex-wrap:wrap}
.attn-tab,.pipe-tab,.cmd-tab,.upd-chip{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.attn-tab:hover,.pipe-tab:hover,.cmd-tab:hover,.upd-chip:hover{color:var(--ink)}
.attn-tab.on,.pipe-tab.on,.cmd-tab.on,.upd-chip.on{color:var(--ink);border-bottom-color:var(--accent-deep)}
/* Command Center */
.cmd-range{display:inline-flex;gap:2px;background:var(--accent-soft);border-radius:10px;padding:3px;margin:0 0 14px}
.cmd-rg{appearance:none;border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer}
.cmd-rg.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(38,25,28,.12)}
.cmd-panes{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:720px){.cmd-panes{grid-template-columns:1fr}}
.cmd-pane{min-width:0}
.cmd-h{font-size:13px;font-weight:700;color:var(--ink);margin:0}
/* uniform header height so charts in adjacent panes line up (Pulse donuts) */
.cmd-pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;min-height:34px;flex-wrap:wrap;row-gap:6px}
.cmd-seg{display:inline-flex;gap:2px;background:var(--accent-soft);border-radius:8px;padding:2px}
.cmd-sv{appearance:none;border:0;background:transparent;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 9px;border-radius:6px;cursor:pointer}
.cmd-sv.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(38,25,28,.12)}
.cmd-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 16px}
@media(max-width:900px){.cmd-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cmd-tiles{grid-template-columns:repeat(2,1fr)}}
.cmd-queue{margin:-6px 0 16px}
.cmd-queue .btn-link{font-size:11.5px}
.donut-total.loss{fill:#b8503a}
/* S72: Home launcher + setup wizard */
.home-tools #homeGo{height:42px;border-radius:12px}
.launch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px}
@media(max-width:640px){.launch-grid{grid-template-columns:1fr}}
.launch-grid{grid-auto-rows:1fr}
.launch-item{text-align:left;appearance:none;font:inherit;color:inherit;align-items:flex-start;height:100%;min-height:64px}
.launch-item .pick-main strong{font-size:14px;line-height:1.25}
.launch-item .pick-main .note{line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.launch-item svg{margin-top:2px}
/* S73: a row without its action button keeps the button's width, so the "..." lines up down the list. */
.crow-right .act-ph{display:inline-block;flex:none}
.launch-item:hover{border-color:var(--accent-deep)}
.launch-item svg{width:18px;height:18px;flex:0 0 18px;color:var(--muted)}
.setup-rate{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.pick-row .setup-rate input{width:72px;height:auto;flex:none}
.pick-row input.setup-inline{border:0;background:transparent;font:inherit;font-weight:600;width:100%;height:auto;flex:1;padding:0;border-radius:0}
.pick-row input.setup-inline:focus{outline:none;border-bottom:1px solid var(--accent-deep)}
.setup-add{display:flex;gap:8px;margin-top:10px}
.setup-add input{flex:1}
.setup-list{margin:0 0 6px;padding-left:18px;font-size:13.5px;line-height:1.6}
.setup-tpl{flex-wrap:wrap}
.setup-tpl-head{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.setup-tpl-body{flex-basis:100%;margin-top:6px}
.setup-tpl-body summary{cursor:pointer;font-size:12.5px;color:var(--accent-text)}
.setup-tpl-body pre{white-space:pre-wrap;font:inherit;font-size:12.5px;line-height:1.5;background:var(--bg-2);padding:10px;border-radius:8px;max-height:260px;overflow:auto;margin:6px 0 0}
.setup-new{margin-top:8px}
.wiz-menu-arrow{width:16px;height:16px;vertical-align:-3px;margin-right:4px}
.track-row{display:grid;grid-template-columns:180px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.track-row:last-of-type{border-bottom:0}
.track-lab{font-weight:600;font-size:13.5px}
.track-link{font-size:12.5px;word-break:break-all;background:var(--bg-2);padding:4px 8px;border-radius:8px}
@media(max-width:640px){.track-row{grid-template-columns:1fr auto}.track-link{grid-column:1 / -1}}
.cmd-tile{cursor:default;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;display:block}
button.cmd-tile{cursor:pointer;appearance:none}
button.cmd-tile:hover{border-color:var(--accent-deep)}
.cmd-tile .n{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cmd-tile .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.cmd-tile.warn .n{color:#b8503a}
.cmd-foot{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.4}
.cmd-donut .donut-total{font-size:17px}
.cmd-arc{transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
/* top-align the donut so panes with taller legends keep their donut at the same height */
.cmd-pane .donut-wrap{align-items:flex-start}
/* 390-safety: never let the donut+legend overflow horizontally on a phone */
.cmd-panes,.cmd-pane,.cmd-body,.cmd-pane .donut-wrap,.cmd-pane .donut-legend{min-width:0;max-width:100%}
@media(max-width:560px){
.cmd-pane .donut-wrap{flex-wrap:wrap;justify-content:center;row-gap:8px}
.cmd-pane .donut-legend{width:100%}
}
/* Round 56: one quiet line under the range switcher saying what the tab is (Money = platform, Business = QuickBooks) */
.cmd-desc{font-size:12px;color:var(--muted);margin:-6px 0 14px;line-height:1.45}
/* Round 56 (SPEC F): Command Center "Business", read like the QuickBooks dashboard in the platform's look. S114 (CEO: as
tall as the Money tab): three cards in ONE row, PROFIT AND LOSS with EXPENSES (two parts), RECEIVABLES AND PAYABLES and
BANK ACCOUNTS (one part each). Narrower: P&L beside the two others stacked; then P&L on its own row with the two others
side by side under it; a phone: one column.
Sized by the tab's own width (container query), not the window. */
.biz-bar{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.biz-bar .qbo-env{align-self:center;margin:0 0 14px}
.biz-refresh{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px}
.biz-refresh .ico{width:15px;height:15px}
.cmd-biz{container-type:inline-size}
.biz-cards{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
@container (max-width:999px){.biz-cards{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.biz-wide{grid-row:1 / span 2}}
@container (max-width:759px){.biz-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.biz-wide{grid-row:auto;grid-column:1 / -1}}
@container (max-width:560px){.biz-cards{grid-template-columns:minmax(0,1fr)}}
.biz-card{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 16px 16px;display:flex;flex-direction:column;min-width:0}
.biz-t{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0}
.biz-s{font-size:12.5px;color:var(--muted);margin:8px 0 2px}
.biz-big{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.15;margin:0;white-space:nowrap}
.biz-big.loss{color:var(--bad)}
.biz-chg{font-size:12px;font-weight:600;color:var(--muted);margin:4px 0 0}
.biz-chg.good{color:var(--ok)}
.biz-chg.bad{color:var(--bad)}
.biz-tri{width:8px;height:8px;vertical-align:0;flex:none} /* S114: the drawn up / down mark */
/* PROFIT AND LOSS | EXPENSES side by side, a hairline between; stacked on a phone */
.biz-halves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;flex:1}
.biz-half{min-width:0;display:flex;flex-direction:column}
.biz-half:first-child{padding-right:18px}
.biz-spend{padding-left:18px;border-left:1px solid var(--line)}
.biz-half .biz-t{margin-top:0}
.biz-half .biz-s{margin-top:4px}
@container (max-width:560px){.biz-halves{grid-template-columns:minmax(0,1fr)}.biz-half:first-child{padding-right:0}.biz-spend{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}}
/* the P&L in three lines: Income, Expenses, Net */
.biz-brk{margin-top:14px;display:grid}
.biz-kr{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.biz-kr span:last-child{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.biz-kr.tot{border-bottom:0;border-top:1px solid var(--ink);margin-top:-1px;font-weight:700}
.biz-kr.tot span:last-child{font-weight:800}
.biz-kr.loss{color:var(--bad)}
/* EXPENSES: the figure with a small donut beside it (the Money tab's size class), the accounts listed under both */
.biz-shead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.biz-sfig{min-width:0;flex:1 1 auto}
.biz-shead .donut-svg{width:92px;height:92px;flex:0 0 auto}
.biz-legend{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;min-width:0;line-height:1.25}
.biz-legend .donut-li{display:grid;grid-template-columns:11px minmax(0,1fr) auto 44px;column-gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line);border-radius:0;cursor:default}
.biz-legend .donut-li:last-child{border-bottom:0}
.biz-legend .donut-li:hover{background:none}
.biz-legend .donut-lab{font-size:12.5px;font-weight:600;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
.biz-legend .donut-val{margin:0;font-size:12.5px;color:var(--ink);font-weight:600;text-align:right;white-space:nowrap}
.biz-ddc{text-align:left;white-space:nowrap;line-height:1.25}
.biz-dd{font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.biz-dd.good{color:var(--ok)}
.biz-dd.bad{color:var(--bad)}
.biz-dd .biz-tri{width:7px;height:7px;margin-right:2px}
/* RECEIVABLES AND PAYABLES: two figures, each with its bar on one scale, the net position as a total line */
.biz-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:6px 0 12px}
.biz-fig{min-width:0}
.biz-fig .biz-s{margin:0 0 2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-fig .biz-big{font-size:20px}
.biz-bt{display:block;position:relative;height:8px;margin-top:8px;background:var(--bg-2);border-radius:4px;overflow:hidden}
.biz-bf{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.biz-bf.on{transform:none}
/* BANK ACCOUNTS */
.biz-accts{margin-top:4px;display:grid}
.biz-acct{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.biz-an{font-size:13px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.biz-av{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.biz-av.loss{color:var(--bad)}
.biz-av.gain{color:var(--ok)}
.biz-net{border-bottom:0;border-top:1px solid var(--ink);margin-top:-1px}
.biz-net .biz-an{font-weight:700}
.biz-accts .biz-acct:last-child{border-bottom:0}
.biz-asof{margin-top:14px}
.biz-quiet{margin:4px 0 0}
/* Block 3 A1 (S121): Website analytics (Office › Website + the Command Center "Website" glance). The Business cards' look;
three across, two, then one, by the panel's own width. */
.web-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@container (max-width:899px){.web-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:520px){.web-cards{grid-template-columns:minmax(0,1fr)}}
.web-line{display:block;width:100%;height:64px;margin-top:10px}
.web-rank{display:grid;gap:6px;margin-top:4px}
.web-rr .biz-acct{border-bottom:0;padding:4px 0 0}
.web-rr .biz-bt{margin-top:4px;height:6px}
/* ---- Round 62 C (S138, W15 / W16): four equal cards, ▾ More, the status light, the Command Center stats line ---- */
.web-four{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
@container (max-width:899px){.web-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:520px){.web-four{grid-template-columns:minmax(0,1fr)}}
.web-card .web-g{margin-top:auto;padding-top:10px}
.web-card .web-g .web-line{margin-top:0}
.web-tl{display:flex;align-items:center;gap:12px;min-width:0}
.web-tl .donut-svg{width:64px;height:64px;flex:0 0 64px}
/* CEO S138 review: the legend stays one line per link (a long name is cut with …), so this card is no taller than the
others and the four keep their shape */
.web-tl .donut-legend{margin:0;min-width:0;flex:1 1 auto;gap:3px}
.web-tl .donut-li{padding:0;gap:6px;line-height:1.35;min-width:0;cursor:default}
.web-tl .donut-li:hover{background:none}
.web-tl .donut-key{width:9px;height:9px}
.web-tl .donut-lab{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.web-tl .donut-val{flex:0 0 auto;font-size:12px}
/* the counts in More line up row under row (number right-aligned, then its word) */
.web-cc{display:inline-flex;align-items:baseline;white-space:nowrap}
.web-c{display:inline-flex;align-items:baseline;gap:4px}
.web-cn{display:inline-block;min-width:4.6ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.web-cw{display:inline-block;min-width:3.3em;text-align:left;font-weight:600;color:var(--muted);font-size:12.5px}
.web-cs{margin:0 6px 0 2px;color:var(--muted);font-weight:600}
.web-more-btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;min-height:44px}
.web-more-btn:hover{background:var(--accent-soft)}
.web-more-btn .web-chev{width:16px;height:16px;transition:transform .2s ease}
.web-more-btn[aria-expanded="true"] .web-chev{transform:rotate(180deg)}
/* CEO S138 review: two columns that each keep their own height (webMoreLayout places the parts); one under 760 px */
.web-more{display:flex;gap:14px;margin-top:12px;align-items:flex-start}
.web-more[hidden]{display:none}
.web-mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.web-more.one .web-mcol:last-child{display:none}
.web-ll{display:grid;gap:2px;margin-top:2px}
.web-lr{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:8px 6px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;cursor:pointer;border-radius:6px;min-height:44px}
.web-lr:last-child{border-bottom:0}
.web-lr:hover{background:var(--accent-soft)}
.web-lrn{font-weight:700;font-size:13.5px;color:var(--ink)}
.web-lrs{font-size:12px;color:var(--muted)}
.web-tlk{display:flex;align-items:center;gap:12px;margin-top:5px;min-width:0}
.web-tc{display:block;min-width:0;flex:0 1 auto;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.web-tlk .btn-link{font-size:12px;padding:0;flex:0 0 auto}
.web-copy{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;color:#0b7681;cursor:pointer}
.web-copy .ico{width:14px;height:14px}
.web-copy:hover{background:var(--accent-soft)}
.web-copy.done{color:var(--ok);border-color:var(--ok)}
@media (pointer:coarse){.web-copy{width:36px;height:36px}.web-copy .ico{width:16px;height:16px}}
.web-trr .biz-an .pill{font-size:11px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.web-head{flex-wrap:wrap;row-gap:8px}
.web-status-slot{display:inline-flex;min-width:0;max-width:100%}
/* the status light (CEO S138: "cool and flashy"): a glowing dot that beats, two rings rippling out of it and a shine
sweeping the pill; red beats twice as fast; grey and still when there is nothing live to show. Calm when the person
asked their device for less motion. */
.web-status{--ws-c:#98a2b3;--ws-glow:transparent;position:relative;overflow:hidden;contain:paint;display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:6px 14px 6px 11px;border-radius:999px;border:1px solid var(--line);background:#f2f4f7;color:var(--muted);font-size:12.5px;font-weight:800;line-height:1.25;white-space:nowrap;isolation:isolate}
.web-status .ws-t{letter-spacing:.01em}
.web-status .ws-m{font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ws-dot{position:relative;flex:0 0 10px;width:10px;height:10px}
.ws-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ws-c);box-shadow:0 0 4px 1px var(--ws-glow),0 0 12px 3px var(--ws-glow);animation:wsBeat 2.4s ease-in-out infinite;will-change:transform}
.ws-dot i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ws-c);opacity:0;animation:wsRing 2.4s cubic-bezier(.2,.6,.3,1) infinite;will-change:transform,opacity}
.ws-dot i:nth-child(2){animation-delay:1.2s}
.web-status::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-110%);animation:wsShine 5s ease-in-out infinite;will-change:transform;pointer-events:none}
@keyframes wsRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.4);opacity:0}}
@keyframes wsBeat{0%,48%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1)}36%{transform:scale(1.16)}}
@keyframes wsShine{0%,68%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
@keyframes wsWait{0%,100%{opacity:.35}50%{opacity:1}}
.web-status.st-up{--ws-c:#12b76a;--ws-glow:rgba(18,183,106,.6);background:linear-gradient(135deg,#ecfdf4 0%,#d1f6e3 100%);color:#05603a;border-color:#9fe5c3;box-shadow:0 0 0 3px rgba(18,183,106,.08),0 2px 10px rgba(18,183,106,.18)}
.web-status.st-down{--ws-c:#e5383b;--ws-glow:rgba(229,56,59,.65);background:linear-gradient(135deg,#fff1f1 0%,#ffd9d9 100%);color:#a4161a;border-color:#f4a9aa;box-shadow:0 0 0 3px rgba(229,56,59,.1),0 2px 12px rgba(229,56,59,.25)}
.web-status.st-down .ws-dot::before,.web-status.st-down .ws-dot i{animation-duration:1.1s}
.web-status.st-down .ws-dot i:nth-child(2){animation-delay:.55s}
.web-status.st-warn{--ws-c:#f59e0b;--ws-glow:rgba(245,158,11,.6);background:linear-gradient(135deg,#fffaeb 0%,#ffefc2 100%);color:#7a4a00;border-color:#f6d27f;box-shadow:0 0 0 3px rgba(245,158,11,.1)}
.web-status.st-off .ws-dot::before,.web-status.st-off::after,.web-status.st-wait::after{animation:none;background:none}
.web-status.st-off .ws-dot::before{background:var(--ws-c);animation:none}
.web-status.st-off .ws-dot i,.web-status.st-wait .ws-dot i{display:none}
.web-status.st-wait .ws-dot::before{animation:wsWait 1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.web-status::after,.ws-dot i{display:none}.ws-dot::before{animation:none!important}}
/* Command Center › Website: one line of small stats */
.web-stats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:2px 0 14px}
.ws-stat{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.ws-stat b{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ws-stat.ws-live{align-self:center}
.ws-v{display:inline-flex;align-items:baseline;gap:6px}
@media (max-width:640px){
.web-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.ws-stat{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;min-width:0}
.ws-stat.ws-live{grid-column:1 / -1;order:-1;align-self:start}
.ws-stat.ws-live .web-status{max-width:100%}
}
.ws-chg{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;font-weight:700}
.ws-chg.good{color:var(--ok)}
.ws-chg.bad{color:var(--bad)}
.ws-chg .biz-tri{width:8px;height:8px}
/* Settings › Tracking links › Not named yet */
.track-unnamed:not(:empty){margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.track-uh{font-size:13px;font-weight:800;color:var(--ink);margin:0 0 4px}
.track-unnamed .track-row{grid-template-columns:140px minmax(0,1fr) auto auto}
.track-n{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:640px){.track-unnamed .track-row{grid-template-columns:minmax(0,1fr) auto}.track-unnamed .track-link{grid-column:1 / -1}.track-unnamed [data-tname]{grid-column:1 / -1;width:100%}}
/* ---- end Round 62 C ---- */
/* Expenses hub (S70): one group per project or person, subtotal on the header */
.xh-group{margin:0 0 14px}
.xh-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 4px 8px;border-bottom:1px solid var(--line)}
.xh-head strong{font-size:15px}
.xh-head .cmoney{margin-left:auto;font-weight:700}
/* By project = the tree: customer header, then that customer's projects indented under it (S71) */
.xh-cust{margin:0 0 22px}
.xh-chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 4px 8px;border-bottom:2px solid var(--ink-2)}
.xh-chead strong{font-size:16px}
.xh-chead .cmoney{margin-left:auto;font-weight:700}
.xh-sub{margin:8px 0 10px 16px}
@media (max-width:480px){.xh-sub{margin-left:8px}}
/* Title row: the Manage button sits on the right of the page title (CEO 2026-09-23) */
.xh-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.xh-title h2{margin:0}
/* Project headers fold their rows; collapsed by default */
.xh-fold{cursor:pointer;user-select:none}
.xh-fold .xh-chev{display:inline-block;width:14px;color:var(--ink-2);transition:transform .15s}
.xh-fold.open .xh-chev{transform:rotate(90deg)}
.xh-rows.closed{display:none}
/* Status dots on a project line: red overdue (first, bigger) · yellow pending · green waiting for payment · grey paid */
.xh-dots{display:inline-flex;align-items:center;gap:4px;margin-left:4px;vertical-align:middle}
.xh-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#b8c0c4}
.xh-dot.late{width:11px;height:11px;background:#d23c3c}
.xh-dot.pend{background:#e0b12a}
.xh-dot.back{background:#e08a3c} /* S88 T20: sent back to fix */
.pill.returned{background:#fde8d8;color:#9a4a12}
.xh-dot.wait{background:#2e9e5b}
.xh-dot.done{background:#b8c0c4}
.xh-late{color:#d23c3c;font-weight:600}
/* Money rows (AR + Expenses, S71): a fixed column grid so amounts, dates and statuses line up down the list.
who · number + job · date · amount · kind · status */
.crow.crow-money .crow-main{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) minmax(0,150px) 100px minmax(0,130px) minmax(212px,max-content);align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-money .crow-main>strong,.crow.crow-money .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-money .crow-main .cmoney{text-align:right}
.crow.crow-money .crow-main .cpills{display:flex;gap:6px;overflow:visible}
.crow.crow-money .crow-main .cpills .pill{white-space:nowrap}
@media (max-width:820px){.crow.crow-money .crow-main{display:flex;flex-wrap:wrap}.crow.crow-money .crow-main>span:empty{display:none}.crow.crow-money .crow-main .cmoney{text-align:left}}
/* Proposals row (S73): customer · job · total · deposit · sent date · status as fixed columns. */
.crow.crow-prop .crow-main{display:grid;grid-template-columns:180px minmax(0,1fr) 100px 132px 96px 88px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-prop .crow-right .prop-next{min-width:156px;text-align:center;justify-content:center}
.crow.crow-prop .crow-main>strong,.crow.crow-prop .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-prop .crow-main .cq{max-width:none}
.crow.crow-prop .crow-main .cmoney{text-align:right}
.crow.crow-prop .crow-main .cpills{overflow:visible}
.crow.crow-prop .crow-right .prop-next{white-space:nowrap}
@media (max-width:820px){.crow.crow-prop .crow-main{display:flex;flex-wrap:wrap}.crow.crow-prop .crow-main>span:empty{display:none}.crow.crow-prop .crow-main .cmoney{text-align:left}}
/* Proposal preview v2 (S73): card band + boxed sections, the wizard/card look. */
.pp-v2 .pp-band{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pp-v2 .pp-band h2{margin:2px 0 0;font-size:20px;letter-spacing:-.01em;color:inherit}
.pp-v2 .pp-kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.8}
.pp-v2 .pp-band-sub{margin-top:4px;font-size:13.5px;opacity:.9}
.pp-v2 .pp-band .pill{background:rgba(255,255,255,.85);color:var(--ink);border-color:transparent;flex:none}
.pp-v2 .wiz-sub{margin-top:16px}
.pp-v2 .pp-text{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#f7f9f9;white-space:pre-wrap}
.pp-v2 .pp-tbl{margin:0}
.pp-v2 .pp-tot{margin-top:10px}
/* Team rows (S73). Sub-contractors: name · company · phone · email · approval · login. Employees: name · access · phone · email · login. */
/* round 46: narrower name / email / approval / login columns make room for the next-action button (the company column had 4 px left at 1280) */
.crow.crow-sub .crow-main{display:grid;grid-template-columns:150px minmax(0,1fr) 106px 170px 124px 112px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-emp .crow-main{display:grid;grid-template-columns:190px 110px 112px minmax(0,1fr) 150px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-sub .crow-main>strong,.crow.crow-sub .crow-main>span,.crow.crow-emp .crow-main>strong,.crow.crow-emp .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-sub .crow-main .cq,.crow.crow-emp .crow-main .cq{max-width:none}
.crow.crow-sub .crow-main .cpills,.crow.crow-emp .crow-main .cpills{overflow:visible}
@media (max-width:820px){.crow.crow-sub .crow-main,.crow.crow-emp .crow-main{display:flex;flex-wrap:wrap}.crow.crow-sub .crow-main>span:empty,.crow.crow-emp .crow-main>span:empty{display:none}}
/* Projects row (S73): ref · job · customer · total · remaining · status as fixed columns. */
.crow.crow-job .crow-main{display:grid;grid-template-columns:78px minmax(0,1fr) 180px 100px 120px 96px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-job .crow-main>strong,.crow.crow-job .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-job .crow-main .cmoney{text-align:right}
.crow.crow-job .crow-main .cpills{overflow:visible}
.crow.crow-job .crow-right .job-next{white-space:nowrap;min-width:110px;justify-content:center}
/* Round 46 P1: the people rows' next-action button (Invite · Review documents · Approve · Review time · Approve time) */
.crow.crow-sub .crow-right .people-next,.crow.crow-emp .crow-right .people-next{white-space:nowrap;min-width:144px;justify-content:center}
/* Round 46 P2: the person wizard's document step (Open the file + the expiry on file) */
.pr-file{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pr-exp{margin:0 0 12px} /* O1: the expiry date as text, Change opens the date box */
.pick-row.is-off{opacity:.55}
@media (max-width:820px){.crow.crow-job .crow-main{display:flex;flex-wrap:wrap}.crow.crow-job .crow-main>span:empty{display:none}.crow.crow-job .crow-main .cmoney{text-align:left}}
/* Customers row (S73): name · type · phone · email · projects as fixed columns. */
.crow.crow-cust .crow-main{display:grid;grid-template-columns:200px 90px 112px 230px minmax(0,1fr);align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-cust .crow-main>strong,.crow.crow-cust .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-cust .crow-main .ctype{font-size:12.5px;color:var(--muted)}
.crow.crow-cust .crow-right .cust-next{white-space:nowrap;min-width:110px;justify-content:center}
@media (max-width:820px){.crow.crow-cust .crow-main{display:flex;flex-wrap:wrap}.crow.crow-cust .crow-main>span:empty{display:none}}
/* Leads row (S73): name · service · phone · email as fixed columns; the rest lives in the detail. */
.crow.crow-lead .crow-main{display:grid;grid-template-columns:180px minmax(0,1fr) 112px 230px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-lead .crow-right .lead-st{width:118px}
.crow.crow-lead .crow-main>strong,.crow.crow-lead .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-lead .crow-main .cq{max-width:none}
.crow.crow-lead .crow-right .lead-send{white-space:nowrap}
@media (max-width:820px){.crow.crow-lead .crow-main{display:flex;flex-wrap:wrap}.crow.crow-lead .crow-main>span:empty{display:none}}
/* S74 (2026-09-24): Settings rows share one fixed grid (name · detail · state); save-on-change tick beside labels. */
.crow.crow-set .crow-main{display:grid;grid-template-columns:220px minmax(0,1fr) 150px;align-items:center;column-gap:14px;flex-wrap:nowrap}
.crow.crow-set .crow-main>strong,.crow.crow-set .crow-main>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow.crow-set .crow-main>span.cmuted{text-align:right}
.crow.crow-set.crow-act .crow-main{grid-template-columns:minmax(0,1fr) 220px 170px} /* round 34 #19: the plain-words line gets the room */
@media (max-width:820px){.crow.crow-set .crow-main,.crow.crow-set.crow-act .crow-main{display:flex;flex-wrap:wrap}.crow.crow-set .crow-main>span:empty{display:none}.crow.crow-set .crow-main>span.cmuted{text-align:left}}
.set-body{white-space:pre-wrap;display:block;max-height:260px;overflow:auto}
.saved-tick{margin-left:8px;font-size:11.5px;font-weight:600;color:#2e7d4f}
.saved-tick.bad{color:var(--bad,#b3261e)}
/* S76: proposal question / decline answer wizard (openProposalResponseWizard) */
.prw-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f7f9f9;margin:0 0 6px}
.prw-kv{display:flex;flex-direction:column;gap:3px;font-size:13.5px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.prw-kv .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prw-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.prw-table{width:100%;border-collapse:collapse;font-size:13.5px}
.prw-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);background:#f7f9f9}
.prw-table td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.prw-table .r{text-align:right;white-space:nowrap}
.prw-thread{display:flex;flex-direction:column;gap:8px}
.prw-msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:14.5px;line-height:1.5}
.prw-msg.in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent-line)}
.prw-msg.out{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--accent-line)}
.prw-msg.note{align-self:flex-end;background:#faf6ee;border:1px dashed #e3d3b0}
.prw-who{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.prw-body{white-space:pre-wrap}
.prw-quote{padding:10px 12px;margin:0 0 12px;border-left:4px solid var(--accent-line);background:#f7f9f9;border-radius:0 10px 10px 0;white-space:pre-wrap;font-size:14px;color:var(--ink-2)}
@media(max-width:700px){.prw-strip{grid-template-columns:1fr 1fr}.prw-msg{max-width:100%}}
.sg-thread{display:flex;flex-direction:column;gap:8px;margin:22px 0 0;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfc}
.sg-thread-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* S76: Recent updates "System" tab: machine rows only, set apart in red (CEO) */
.upd-sys-gap{flex:1}
.upd-chip.sys{color:var(--bad)}
.upd-chip.sys.on{color:var(--bad);border-bottom-color:var(--bad)}
/* Round 38 (G5 + G6, CEO): a section that opens and closes, the Time tab's day look (foldHtml in app-v6.js). The title
line carries the facts; everything else sits inside. Nested sections (the signed text) sit inside the body. */
.fd{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin:0 0 10px}
.fd-head{appearance:none;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:#f7f9f9;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.fd-head:hover{background:var(--accent-soft)}
.fd-head svg{width:15px;height:15px;color:var(--muted);transform:rotate(180deg);transition:transform .18s}
.fd.open>.fd-head{border-bottom:1px solid var(--line)}
.fd.open>.fd-head svg{transform:rotate(270deg)}
.fd-title{font-weight:700;font-size:14px;min-width:0}
.fd-sum{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;font-size:13px;color:var(--ink-2);text-align:right}
.fd-body{display:none;padding:10px 12px}
.fd.open>.fd-body{display:block}
.fd .fd{margin:12px 0 0}
.fd-body>.cc-btns{margin-top:10px}
@media(max-width:600px){.fd-head{grid-template-columns:16px minmax(0,1fr)}.fd-sum{grid-column:2;justify-content:flex-start;text-align:left}}
/* Round 48 (S101, T11): the team's job sign-offs in the office (the approval wizard, the document view, the Team tab) */
.pill.so-wait{background:var(--badbg);color:var(--bad)}
.pill.so-back{background:var(--warnbg);color:var(--warn)}
.pill.so-ok{background:var(--okbg);color:var(--ok)}
.so-open{padding:10px 12px;margin:0 0 12px;border:1px solid #ecd39a;border-radius:10px;background:var(--warnbg);font-size:14px}
.so-open ul,.so-list{margin:6px 0 0;padding-left:20px}
.so-list li,.so-open li{margin:2px 0;overflow-wrap:anywhere}
.so-text{white-space:pre-wrap;margin-top:6px}
.so-sign{margin:14px 0 0;padding:12px;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);font-size:14px;overflow-wrap:anywhere}
.so-sigimg{display:block;max-width:240px;width:100%;height:auto;margin:0 0 8px;background:#fff;border:1px solid var(--line);border-radius:8px}
.so-phs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:6px 0 0}
.so-ph{position:relative;appearance:none;padding:0;border:1px solid var(--line);border-radius:10px;background:#f7f9f9;aspect-ratio:1;overflow:hidden;cursor:pointer;display:grid;place-items:center;font:inherit;color:var(--muted)}
.so-ph img{width:100%;height:100%;object-fit:cover}
.so-ph .cap{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Round 49 (S103, N4): Complete a project › Share with the customer (nothing ticked; a photo tile carries its own tick) */
.cw-shead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 6px}
.cw-shead .wiz-sub{margin:0}
.cw-phs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:0 0 6px}
.cw-ph{position:relative;display:grid;place-items:center;aspect-ratio:1;margin:0;border:2px solid var(--line);border-radius:10px;background:#f7f9f9;overflow:hidden;cursor:pointer;color:var(--muted);font-weight:400}
.cw-ph:has(input:checked){border-color:var(--accent-deep)}
.cw-ph input{position:absolute;top:6px;left:6px;z-index:1;width:22px;height:22px;margin:0;accent-color:var(--accent-text)}
.cw-ph .im,.cw-ph .im img{width:100%;height:100%;display:grid;place-items:center}
.cw-ph .im img{object-fit:cover}
.cw-ph .cap{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Round 49 (N6): the office's look at a sub invoice (the work order, hours by week, their invoices on the job) */
.si-rows{display:grid;gap:4px;margin:4px 0 0}
.si-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.si-row .d{font-size:12.5px;color:var(--muted)}
.si-row.this{border-color:var(--accent-line);background:var(--accent-soft)}
.si-warn{margin:8px 0 0;padding:8px 10px;border:1px solid #ecd39a;border-radius:8px;background:var(--warnbg);font-size:13.5px}
/* Round 50 (N10): each invoice amount before tax with its tax under it; the money lines under the invoices */
.si-amt{display:grid;justify-items:end;text-align:right;white-space:nowrap}
.si-amt .d{font-weight:400}
.si-lines{display:grid;gap:2px;margin:8px 0 0;font-size:14px;overflow-wrap:anywhere}
.si-line.b{font-weight:700}/* Round 50 (N8): the shared thumbnail (app.js ftTile / ftDraw). A PDF's first page shows from the top of the page; the
large preview shows the whole page. The fallback is an icon and the extension (or "PDF, 12.4 MB"); the name shows in
the large preview (the rows and cards show it beside the tile). A tile is at least 44 px (a phone tap). */
.ft{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);overflow:hidden;cursor:pointer;font:inherit;color:var(--muted);vertical-align:middle}
.ft-m{width:96px;height:96px}
.ft-l{width:150px;height:200px;border-radius:10px}
span.ft{cursor:default}
.ft > img{width:100%;height:100%;object-fit:cover;display:block}
.ft > img.ft-page,.ws-thumb img.ft-page,.tm-ph img.ft-page,.pp-ph img.ft-page,.so-ph img.ft-page,.cw-ph .im img.ft-page{object-position:top;background:#fff}
.ft-l > img{object-fit:contain;background:#fff}
.ft .ph-load,.ft .ph-file{font-size:11px;font-weight:700;letter-spacing:.03em}
.ft-ic{display:grid!important;place-items:center;align-content:center;gap:2px;padding:2px;text-align:center;line-height:1.15;overflow:hidden}
.ft-ic .ft-svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.ft-ic .ft-x{font-size:10px;font-weight:700;letter-spacing:.02em;overflow-wrap:anywhere}
.ft-ic .ft-nm{display:none}
.ft-l .ft-ic .ft-svg{width:30px;height:30px}
.ft-l .ft-ic .ft-x{font-size:12px}
.ft-l .ft-ic .ft-nm{display:block;max-width:136px;font-size:11.5px;font-weight:400;overflow-wrap:anywhere}
.ft-prev{margin:0 0 10px}
.td-file .ft{margin-right:8px}
.xrc-f{display:inline-flex;align-items:center;gap:8px}
.pick-row .ft{margin-right:4px}
.tm-exprev{margin:8px 0 0}
.tm-docrow > .ft{flex:none}
/* Round 51 (N3, CEO): a picker row inside a wizard keeps its tick box LEFT of the name on one line. "#wiz_form label"
(display:block, the field labels) beat ".pick-row{display:flex}" and the time approval's week rows / the setup
templates' heads, so the box sat on its own line above the name. */
#wiz_form label:is(.pick-row,.ta-wk,.setup-tpl-head){display:flex;margin:0;font-size:14px;font-weight:400;color:inherit}
/* Round 51 (N8): the office expense / invoice form: labels on one line, every box one height, a line under a box (the due
date under Payment terms, the custom tax under Tax) never pushes its row out of line */
.ex-form .row{align-items:start}
#wiz_form .ex-form .row>div>label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-form .row>div>input:not([type=checkbox]):not([type=file]),.ex-form .row>div>select{height:42px}
.ex-tax2{margin:-4px 0 12px}
/* Round 51 (N11): the upload icon on every office Upload button; the person card's Documents | Files; Files by job */
.up-ic{display:inline-flex;width:15px;height:15px;margin:0 6px 0 0;vertical-align:-2px;flex:none}
.up-ic svg{width:100%;height:100%}
/* Round 51 walk note 4 (CEO): an icon button carries no words (the name is in title + aria-label) */
.btn.icon-only{display:inline-flex;align-items:center;justify-content:center;padding-left:0;padding-right:0;min-width:36px}
.btn.icon-only .up-ic{margin:0;width:16px;height:16px}
/* exactly as tall as the word buttons next to it (CEO, walk): a label button loses the label rule's 5 px bottom margin
(it shrank the stretched label by 5 px), and the zero-width space gives it the same text line as a word button */
.btn.icon-only{margin:0}
.btn.icon-only::after{content:"\200b"}
/* Round 55 (UI-09): the one icon map (app.js IC). An icon takes its button's text colour; a context's own rule below sizes it. */
.ico{width:18px;height:18px;flex:none;vertical-align:-3px}
.btn .ico{width:16px;height:16px}
.btn.icon-only .ico{width:18px;height:18px}
.outbtn{width:44px;height:44px;flex:none}
/* S114: the office bell (notifications on this phone): a small dot when on */
.pushbtn{width:44px;height:44px;flex:none;position:relative}
.pushbtn.on::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px #fff}
.iconbtn .ico{vertical-align:middle}
.cc-pen .ico{width:14px;height:14px;vertical-align:-2px}
.cc-plus .ico{width:16px;height:16px;vertical-align:middle}
.cc-link .ico,.ws-unread .ico{width:14px;height:14px;vertical-align:-2px;margin-left:2px}
.xh-fold .xh-chev .ico{width:14px;height:14px;vertical-align:-2px}
.cc-actbtn .ico{width:14px;height:14px;vertical-align:-2px;margin-left:2px}
.lock-ico .ico{width:14px;height:14px;vertical-align:-2px}
.tb-locked .ico,.pill .ico,.ta-state .ico{width:13px;height:13px;vertical-align:-2px}
.td-seg{margin:0 0 12px}
.td-ag .td-main strong{font-size:14.5px}
.td-hist .td-main .ft{margin-right:4px}
.tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin:0 0 6px}
.tf-item{display:flex;flex-direction:column;gap:3px;min-width:0}
.tf-item .ft{width:100%;height:96px}
.tf-nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Round 51 (N1): "Visible to customers" is longer: on a phone the task's boxes go under its title */
@media(max-width:600px){.tw-task,[class^="pp-task-"]{display:flex!important;flex-wrap:wrap}.tw-task .ppt-title,[class^="pp-task-"] .ppt-title{flex:1 1 100%}}
/* Round 54 (S110 shared-action check): on a phone every sign out, back, close, upload and menu control is at least a
44 x 44 px target in the office, the team app and the portal (the icon buttons were 42, the Actions buttons 40, the
Sign out / upload buttons and the browser file boxes 28 to 43). */
@media(max-width:760px){
.iconbtn-bar,.iconbtn-page,.tm-bar .tm-back,.qa-btn{width:44px;height:44px}
#signOut,#p_noneOut,#tm_gateOut,#homeGo,#dw_upload,label.btn.td-up,#wiz_form label.btn.icon-only,.tm-actions .btn[data-dup]{min-width:44px;min-height:44px}
#pn_file,#so_file,#oa_file,#tm_dFile{min-height:44px}
}
/* =====================================================================
Round 55 (part AX): accessibility polish, A11Y-07 to A11Y-20
===================================================================== */
/* A11Y-17 / A11Y-13: words only a screen reader reads (a message announced, a field named from its placeholder) */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
/* A11Y-07: the Home gear menu never leaves the screen (app.js keepOnScreen also moves it back in); a range row scrolls inside
itself on a very narrow phone, it never widens the page */
.popover{max-width:calc(100vw - 16px)}
@media(max-width:400px){.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}}
@media(max-width:360px){.seg-b{padding:6px 6px;font-size:12.5px}}
/* A11Y-05 / A11Y-10: the words in the mint bands (the card head, the wizard head) and on the selected project chip are 4.5:1 or better */
.cc-ed .lab{opacity:1;color:rgba(26,46,48,.78)}
.wiz-kicker{opacity:.85}
.cc-jobchip.on,.cc-jobchip.on .jc-title{color:#1f666d}
.cc-head .tc-pay,.cc-head .type-tag:not(.commercial){color:var(--accent-ink)}
/* a date is longer since the year is always shown (round 54): in these rows it never shrinks into the words beside it
(it was squeezed to its 92 px minimum and drawn over them) */
.upd .when,.rec-act .a .w{flex:none}
/* A11Y-18: the Add-on tick of a proposal line sits in a label (its tap box); the label keeps the tick where it was */
.pi-optl{display:inline-flex;align-items:center;justify-content:center;margin:0}
/* A11Y-19: the last button of a bottom sheet clears the iPhone home indicator */
@media(max-width:600px){.modal-card{padding-bottom:env(safe-area-inset-bottom,0px)}}
/* A11Y-08 / A11Y-18 / A11Y-20: on a phone every control a thumb hits is 44 px (the CEO's rule). A control with a box of its
own is 44 px tall; a small icon keeps its look and gets an invisible 44 px hit area; a text link keeps its place and gets
14 px of hit area above and below (padding that a negative margin takes back). */
@media(max-width:760px){
.btn,.seg-b,.tab,.cmd-rg,.cmd-sv,.cmd-tab,.attn-tab,.pipe-tab,.upd-chip,.cc-tab,.cc-ptab,.cc-subtab,.cc-frow,.pop-row,.pick-row,.qa-menu .qa-i,.lead-toggle .lt-opt,.switch,.ws-unread,.iconbtn,select,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]){min-height:44px}
/* a short label or a symbol is still 44 wide. A flex or grid item with a min-width of its own may shrink below its words,
so these never shrink (flex-shrink:0), and a tab gets side padding instead of a min-width (its grid track keeps the words) */
.seg-b,.cmd-rg,.cmd-sv,.lead-toggle .lt-opt,.iconbtn,.pi-optl,.btn.icon-only,.btn[data-tddel],.btn[data-tedel],.btn.tt-up,.btn.tt-down,.btn.tt-del,#tw_prev,#tw_next{min-width:44px}
.seg-b,.cmd-rg,.cmd-sv,.lead-toggle .lt-opt,.iconbtn{flex-shrink:0}
.tab{padding-left:10px;padding-right:10px}
/* round 67 item 6: the owner's five Recent updates chips (All · Money · Team · Website · System) on one line at 390 px */
.upd-filter{gap:2px}
.upd-chip{padding-left:8px;padding-right:8px;min-width:44px;justify-content:center}
/* S158 (0179): Needs attention's three tabs (Money & customers · Team · Website) on one line at 390 px; a narrower card
scrolls the row sideways, never the page */
.attn-tabs{gap:0;overflow-x:auto;scrollbar-width:none}
.attn-tab{padding-left:6px;padding-right:6px}
.pi-optl{min-height:44px}
.il-row .tp,.cw-ex .tp{padding:15px 7px;margin:-15px -7px} /* an invoice line's and a completion extra's tax ticks (S153: the proposal's picker) */
.ws-tick{padding:10px;margin:-10px} /* the task's done tick (a 25 px label) */
a.btn,label.btn{display:inline-flex;align-items:center;justify-content:center}
.row-open,.ws-ib,.tb-day .tb-fold button{width:44px;height:44px} /* the Time tab's open / close a day pair is set in time.js: the longer selector wins */
.crow-main{min-height:44px}
.cc-frow{align-items:center}
.lead-toggle .lt-opt{padding:3px 14px}
.topbar .logo,.drawer-head .logo{min-height:44px;min-width:44px}
summary{min-height:44px;padding-top:12px;padding-bottom:12px;box-sizing:border-box;cursor:pointer}
.login .pwwrap button.eye{min-width:44px;min-height:44px}
.login .links a{display:inline-flex;align-items:center;min-height:44px}
.cc-i,.cc-pen,.pin,.srow .crow-x,.w-handle,.cc-overdue,.cc-jobchip{position:relative}
.cc-i::after,.cc-pen::after,.pin::after,.srow .crow-x::after,.w-handle::after,.cc-overdue::after,.cc-jobchip::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
.link,.btn-link,.cc-link,.crow-main .cm a,.cc-meta a,.tp,.ws-only,.ws-fwho label,a[href^="mailto:"]:not(.btn),a[href^="tel:"]:not(.btn),a[target="_blank"]:not(.btn){padding:15px 7px;margin:-15px -7px}
}
/* Round 56 (QuickBooks): Settings › Money › QuickBooks card, and the QuickBooks pill on invoice, proposal and cost rows. */
#qboCard .qbo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
#qboCard .qbo-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
#qboCard .qbo-status strong{font-size:15px;overflow-wrap:anywhere}
#qboCard .qbo-btns{display:flex;gap:8px;flex-wrap:wrap}
#qboCard .qbo-btns .qa-btn{height:auto;width:auto;min-width:40px;align-self:stretch} /* the "..." as tall as Disconnect beside it */
#qboCard .qbo-warn{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--warnbg);color:var(--warn);font-weight:600}
#qboCard .qbo-next{margin-top:12px;padding:10px 12px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#qboCard .qbo-next.bad{border-color:transparent;background:var(--badbg);color:var(--bad)}
#qboCard .qbo-msg{margin:8px 0 0}
#qboCard .qbo-msg:empty{display:none}
#qboCard .qbo-msg.bad{color:var(--bad)}
#qboCard .qbo-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
#qboCard .qbo-retry{margin-top:8px}
#qboCard .qbo-gh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 6px}
#qboCard .qbo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
#qboCard .qbo-grid select{width:100%}
.qbo-pill{white-space:nowrap}
button.pill.qbo-pill{appearance:none;cursor:pointer;font:inherit;font-size:12px;font-weight:600;line-height:inherit;position:relative}
.qbo-kv{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.qbo-mnote{margin:-4px 0 10px}
@media(max-width:760px){
#qboCard .qbo-grid{grid-template-columns:minmax(0,1fr)}
#qboCard .qbo-counts .stat{padding:12px}
button.pill.qbo-pill::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
}
/* =====================================================================
Round 57 (S116): the office on a phone. Phone-only rules sit inside @media (max-width:600px); the row standard
(R57-B, CEO S116) applies everywhere.
===================================================================== */
/* ---- R57-A: the project card and the person card (head, tabs, full-height sheet, time / documents / activity) ---- */
/* the pieces only a phone shows (app-v6.js ccContactIcons, the head's Details, Show all, the Time tab's "...", the Activity
date headings and times) never show on a wider screen */
.cc-cicon,.cc-dettog,.cc-feedmore,.tw-more,.tc-aday,.tc-wt{display:none}
@media(max-width:600px){
/* 3: a card is a sheet of a fixed height (the top edge never jumps between tabs); the bar with the X and the tab rows
stay pinned while the content scrolls under them */
.modal-card.ccard:has(#modalBody > .cc-head){height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);overscroll-behavior:contain}
.modal-card.ccard:has(#modalBody > .cc-head) .modal-head{position:sticky;top:0;z-index:7;height:56px;box-sizing:border-box;padding:6px 12px 6px 18px;background:var(--panel-solid);border-radius:20px 20px 0 0}
.modal-card.ccard:has(#modalBody > .cc-head) #modalBody{padding:16px}
.modal-card.ccard #modalBody > .cc-head{margin:-16px -16px 16px;padding:14px 16px 14px;border-radius:0}
#cc_nav,#modalBody > .cc-tabs{position:sticky;top:56px;z-index:6;box-shadow:0 0 0 16px var(--panel-solid);clip-path:inset(-16px -16px 0 -16px)}
#cc_nav{background:var(--panel-solid)}
/* 1: a compact head. Ref, name, type, the call / email icons, the star and "..."; the contact lines fold away (the
customer "i" shows the billing address), the project's address, work type and sign-off sit behind Details */
.cc-head .cc-idrow{gap:6px;flex-wrap:wrap;min-height:44px;margin-bottom:2px}
.cc-head a.cc-cicon{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;margin:0;border-radius:10px;background:rgba(255,255,255,.6);color:var(--accent-ink);position:relative}
.cc-head a.cc-cicon::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.cc-head a.cc-cicon .ico{width:18px;height:18px}
.cc-head .cc-title h2{font-size:19px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cc-head:not(.tc-head) .cc-meta,.tc-head .tc-rep,.tc-head .tc-co{display:none}
.tc-head .cc-meta{margin-top:4px}
.cc-projband{position:relative;margin-top:10px;padding:10px 12px}
.cc-projpick:has(> .cc-plus:only-child){position:absolute;top:10px;right:12px}
.cc-projpick:has(> .cc-plus:only-child) .cc-plus{width:40px;height:40px;border-radius:10px}
.cc-projpick:has(> .cc-plus:only-child) + #cc_projident .cc-pi-id{margin-top:0;padding-right:50px}
.cc-pi-id{min-height:40px}
.cc-dettog{display:inline-flex;align-items:center;gap:4px;margin-left:auto;min-height:40px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.7);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;position:relative}
.cc-dettog::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.cc-dettog .ico{width:15px;height:15px;transition:transform .18s}
.cc-det-open .cc-dettog .ico{transform:rotate(180deg)}
.cc-head:not(.cc-det-open) .cc-pi-addr,.cc-head:not(.cc-det-open) .cc-pi-more{display:none}
.cc-pi-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* 19: the head's label above its value (STATUS / In progress), the pencil beside the value */
.cc-pi-edit{flex-direction:column;gap:6px}
.cc-head .cc-ed{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:0}
.cc-head .cc-ed > .lab{flex-basis:100%}
/* 4: a project chip is as wide as its row allows; the chips and "+ Project" wrap */
.cc-jobchip{max-width:100%;min-width:0}
.cc-jobchip .jc-title{max-width:none;min-width:0}
/* 2: the five project tabs fit at 390 px; a row that still does not fit scrolls sideways with no scrollbar, a soft
fade on the cut edge and the open tab in view (app-v6.js ccTabStrip); the person card's tabs are one such row */
.cc-ptabs{flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 0 6px}
.cc-ptab{flex:1 0 auto;padding:8px 6px;font-size:13.5px;text-align:center}
.cc-ptab small{margin-left:3px}
.cc-subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;margin:0 0 10px}
#modalBody > .cc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px}
#modalBody > .cc-tabs .cc-tab{flex:none;padding:8px 12px}
.cc-ptabs::-webkit-scrollbar,.cc-subtabs::-webkit-scrollbar,#modalBody > .cc-tabs::-webkit-scrollbar{display:none}
.cc-ptabs,.cc-subtabs,#modalBody > .cc-tabs{scroll-padding-inline:36px}
.r57-fr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.r57-fl{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px);mask-image:linear-gradient(to right,transparent,#000 32px)}
.r57-fl.r57-fr{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
/* 19: label / value pairs inside the cards: the label above the value, the value full width */
#cc_tab .kv:has(> .k),#tc_tab .kv:has(> .k){flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px}
#cc_tab .kv > .k,#tc_tab .kv > .k{min-width:0;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
#cc_tab .kv:has(> .k) > :not(.k),#tc_tab .kv:has(> .k) > :not(.k){text-align:left;min-width:0;overflow-wrap:anywhere}
#cc_tab .cc-invh{flex-direction:column;align-items:flex-start;gap:2px}
#cc_tab .cc-invh > span{white-space:nowrap}
.r57-nw{white-space:nowrap}
/* 23: buttons beside a section title keep 8 px apart */
#cc_tab .cc-sec > .t > span{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* 9: Recent activity in the page flow, the latest 5, then Show all */
#cc_tab .cc-feed{max-height:none;overflow:visible}
#cc_tab .cc-feed:not(.all) .cc-fx{display:none}
.cc-feedmore{display:inline-flex;margin-top:6px}
/* 26: the Google review row: the words, then the opt-out tick and the button on one row */
#wso_review .kv{flex-direction:column;align-items:stretch;gap:8px}
#wso_review .cc-btns{justify-content:space-between;align-items:center;flex-wrap:nowrap;gap:12px}
#wso_review .cc-btns .btn{white-space:nowrap}
/* 24: a task is one row: tick, the words, then the eye and "..." at the top right (up / down are in "...") */
#cc_tab .ws-task{flex-wrap:nowrap;align-items:flex-start;padding:8px 8px 8px 10px}
#cc_tab .ws-task.proposed{flex-wrap:wrap}
#cc_tab .ws-tick,#cc_tab .ws-ticon{margin-top:2px}
#cc_tab .ws-tacts{width:auto;flex:none}
#cc_tab .ws-tacts [data-tup],#cc_tab .ws-tacts [data-tdown]{display:none}
/* 25: one composer shape: the box full width (no resize handle), Office only and Send in a row under it */
#cc_tab .ws-compose,#tc_tab .ws-compose{flex-direction:column;align-items:stretch;gap:8px}
#cc_tab .ws-compose textarea,#tc_tab .ws-compose textarea{resize:none;width:100%;flex:none}
#cc_tab .ws-compose > .btn,#tc_tab .ws-compose > .btn{align-self:flex-end}
#cc_tab .ws-send{flex-direction:row;justify-content:flex-end;align-items:center;gap:18px}
/* 5: the project Time tab as stacked rows: name + hours, in to out (+ the buttons), status + note */
#cc_tab .ws-ttbl,#cc_tab .ws-ttbl tbody{display:block;width:100%}
#cc_tab .ws-ttbl thead{display:none}
#cc_tab .ws-ttbl tr.tw-day{display:block}
#cc_tab .ws-ttbl tr.tw-day td{display:block;border-radius:8px;border-bottom:0;margin-top:8px}
#cc_tab .ws-ttbl tr:not(.tw-day){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"nm nm h" "tm tm act" "st nt nt";column-gap:10px;row-gap:2px;align-items:center;padding:10px 4px;border-bottom:1px dashed var(--line)}
#cc_tab .ws-ttbl tr:not(.tw-day) td{display:block;padding:0;border:0;min-width:0}
#cc_tab .ws-ttbl tr:not(.tw-day) td:first-child{grid-area:nm;font-weight:700}
#cc_tab .ws-ttbl .te-times{grid-area:tm;white-space:normal}
#cc_tab .ws-ttbl .te-h{grid-area:h;text-align:right;font-size:14px}
#cc_tab .ws-ttbl .te-st{grid-area:st;white-space:nowrap}
#cc_tab .ws-ttbl .te-note{grid-area:nt;max-width:none;white-space:normal;overflow:visible}
#cc_tab .ws-ttbl tr:not(.tw-day) td.te-none{display:none}
#cc_tab .ws-ttbl tr:not(.tw-day) td.te-act{grid-area:act;display:flex;gap:8px;justify-content:flex-end}
#cc_tab .ws-ttbl .te-act .btn{padding:3px 12px;font-size:12.5px}
/* 6: the person Time toolbar: the week with its arrows at the edges; the filter, + Add line and "..." (This week, CSV,
Print) on one row */
#tc_tab .tc-weeknav{gap:8px}
#tc_tab .tc-weeknav > #tw_prev{order:1}
#tc_tab .tc-weeknav > .tc-wk{order:2;flex:1 1 calc(100% - 104px);min-width:0;text-align:center;white-space:normal}
#tc_tab .tc-weeknav > #tw_next{order:3}
#tc_tab .tc-weeknav > #tw_view{order:4;flex:1 1 auto;display:flex}
#tc_tab .tc-weeknav > #tw_view .seg-b{flex:1 1 auto}
#tc_tab .tc-weeknav > #tw_add{order:5;flex:none}
#tc_tab .tc-weeknav > .tw-more{order:6;display:inline-grid;flex:none;width:44px;height:44px}
#tc_tab .tc-weeknav > .spacer,#tc_tab .tc-weeknav > #tw_today,#tc_tab .tc-weeknav > #tw_csv,#tc_tab .tc-weeknav > #tw_print{display:none}
/* 7: a person's document: name + status, the file line, the details, then its buttons in one row, Delete set apart */
#tc_tab .td-row{flex-direction:column;align-items:stretch;gap:8px}
#tc_tab .td-acts{max-width:none;width:100%;justify-content:flex-start;flex-wrap:nowrap;gap:8px}
#tc_tab .td-acts:empty{display:none}
#tc_tab .td-ag .td-row{flex-direction:row;align-items:flex-start}
#tc_tab .td-ag .td-acts{width:auto}
#tc_tab .td-acts [data-tddel]{margin-left:auto}
/* 8: person Activity in the page flow, under a date heading, the time alone on each row */
#tc_tab .tc-act{max-height:none!important;overflow:visible}
#tc_tab .tc-aday{display:block;margin:14px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
#tc_tab .tc-aday:first-child{margin-top:0}
#tc_tab .tc-act .tc-wf{display:none}
#tc_tab .tc-act .tc-wt{display:inline}
#tc_tab .tc-act .a .w{min-width:64px}
/* 28: no one-option Pay & time switcher; Readiness as plain words; the Access row's note on its own line */
#tc_tab .tp-tabs{display:none}
#tc_tab .tp-f[style*="visibility:hidden"]{display:none} /* a sub's hidden Hourly rate box leaves no blank band */
#tc_tab .tc-ready{display:inline;padding:0;border:0;background:none;color:var(--ok);font-weight:700;white-space:normal}
#tc_tab .kv:has(.tc-accnote) > span:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
#tc_tab .tc-accnote{order:3;flex-basis:100%}
}
/* ---- end R57-A ---- */
/* ---- R57-B: the row standard, list pages, settings, cut text ---- */
/* THE ROW STANDARD (CEO S116), every width. An opened row continues inside the same row: same background, no line or
shaded box between the main row and the opened part, the opened part indented to the title, the chevron turned down. */
.crow.is-open,.crow.is-open:hover{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--line);border-bottom-color:transparent;background:#fff}
.crow.tone-overdue.is-open,.crow.tone-overdue.is-open + .crow-detail.show{background:#fdf5f3}
.crow.is-open + .crow-detail.show{margin:-1px 0 0;padding:2px 14px 12px 68px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#fff}
.crow-list > .crow.is-open + .crow-detail.show{margin-top:-7px} /* the list's 6 px gap + the row's border: one box */
.crow-detail .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
/* Home rows (Pipeline): the same opened look; the chevron turns down when open */
.srow.is-open .crow-x svg{transform:rotate(270deg)}
.srow.is-open{border-bottom-color:transparent}
.sdetail{background:transparent;padding:0 4px 12px 34px;font-size:13px}
.sdetail .btns,.sdetail .sdetail-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.stage-list .sdetail:last-child{border-bottom:0}
/* one spacing for the Home rows (Pipeline, Workspace, Needs attention, Recent updates) */
.srow,.attn,.upd{padding-top:10px;padding-bottom:10px}
/* titles and addresses wrap to two lines instead of a one-line "..."; amounts, refs and dates never break */
.crow[class] .crow-main > strong,.crow[class] .crow-main > .cq,.srow .sname,.srow .ssub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
.crow-main .cmoney,.crow-main .cref,.nw{white-space:nowrap}
/* Proposals: its two chips (status + QuickBooks) sit apart like on Receivables, and the status column is as wide as its
chips, so the QuickBooks chip no longer slides under the row's button */
.crow.crow-prop .crow-main .cpills{display:flex;gap:6px}
@media(min-width:821px){.crow.crow-prop .crow-main{grid-template-columns:170px minmax(0,1fr) 96px 122px 92px max-content}}
/* Settings > Data: a clock-in time in a title is a map link; it reads as part of the title */
.crow-act .crow-main strong a{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
/* the phone-only list pieces (app.js r57ListTools) never show on a wider screen */
.lt-bar,.lt-sum,.logo-btn .logo-menu{display:none}
@media(max-width:600px){
/* ---- list rows (.crow): chevron | title + chip ... "..." on the first line, one sub line, the actions in one row ---- */
/* (the Time rows, .crow-time, keep their own phone layout from time.js) */
.crow:not(.crow-time){display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:4px;row-gap:8px;align-items:start;position:relative;padding:6px 8px 10px 4px}
.crow:not(.crow-time) > .crow-dot{display:none}
.crow:not(.crow-time) > .crow-x{display:grid;grid-column:1;grid-row:1;width:32px;height:32px;margin-top:4px;position:relative}
.crow:not(.crow-time) > .crow-x::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.crow:not(.crow-time) > .crow-main{grid-column:2;grid-row:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;min-height:0;padding-top:10px;font-size:14px}
.crow:not(.crow-time):has(> .crow-right > .qa-btn) > .crow-main{padding-right:44px}
.crow:not(.crow-time) > .crow-main > *{order:3}
.crow:not(.crow-time) > .crow-main > strong{order:0;flex:1 1 0;min-width:40%;font-size:14.5px;line-height:1.3}
/* the status chip on the title line; a second chip (QuickBooks, hours) and any note under it go to the sub line */
.crow:not(.crow-time) > .crow-main > .cpills{display:contents}
.crow:not(.crow-time) > .crow-main > .cpills > *{order:3}
.crow:not(.crow-time) > .crow-main > .cpills > :first-child,.crow-cust > .crow-main > .ctype,.crow-set:not(.crow-act) > .crow-main > span.cmuted{order:1;flex:none;max-width:58%;align-self:flex-start;white-space:nowrap}
.crow:not(.crow-time) > .crow-main::after{content:"";order:2;flex-basis:100%;height:0}
.crow:not(.crow-time) > .crow-main > span{min-width:0;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;font-size:13px;line-height:1.35}
.crow:not(.crow-time) > .crow-main > span:empty{display:none}
.crow:not(.crow-time) > .crow-main > .cq{flex-basis:100%;color:var(--muted)}
.crow:not(.crow-time) > .crow-main > .cmoney{white-space:nowrap;font-size:13.5px}
.crow:not(.crow-time) > .crow-main > .cpills .pill{white-space:nowrap}
.crow:not(.crow-time) > .crow-right{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px}
.crow:not(.crow-time) > .crow-right > .qa-btn{position:absolute;top:4px;right:4px}
.crow:not(.crow-time) > .crow-right > .act-ph:empty{display:none}
.crow:not(.crow-time) > .crow-right:not(:has(> :not(.qa-btn):not(.act-ph:empty))){display:contents}
.crow:not(.crow-time) > .crow-right .row-open{order:9}
.crow:not(.crow-time).is-open + .crow-detail.show{padding:0 10px 12px 40px}
.crow-detail .kv{flex-direction:column;gap:2px}
.crow-detail .kv .k{min-width:0;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
/* ---- Home > Pipeline rows: chevron | name + sub | chip | open, the lead's New / Contacted + Send proposal under it ---- */
#home_pipeline_body .srow{grid-template-columns:22px minmax(0,1fr) auto auto;align-items:start;column-gap:8px;row-gap:6px}
#home_pipeline_body .srow > .crow-x{grid-column:1;grid-row:1;margin-top:1px}
#home_pipeline_body .srow > div:not(.srow-right){grid-column:2;grid-row:1}
#home_pipeline_body .srow .srow-right{display:contents}
#home_pipeline_body .srow .srow-right > .pill{grid-column:3;grid-row:1;white-space:nowrap}
#home_pipeline_body .srow .srow-right > .row-open{grid-column:4;grid-row:1;margin-top:-10px}
#home_pipeline_body .srow .srow-right > .srow-act{grid-column:2 / -1;grid-row:2;justify-self:start}
#home_pipeline_body .srow .srow-right:has(.lead-toggle){display:flex;grid-column:2 / -1;grid-row:2;justify-content:flex-start;align-items:center;gap:14px;flex-wrap:wrap;padding:0;margin:0}
/* Recent updates: the date at the top right like Needs attention's age, the words get the width */
.upd{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:start}
.upd > .when{grid-column:2;grid-row:1;min-width:0}
.upd > span:not(.when){grid-column:1;grid-row:1;min-width:0}
/* ---- list pages: the intro on one line (tap it to read it all), the filters behind one Filters button ---- */
/* a 44 px tap target (A11Y-18): a 12.5 px transparent border above and below (the clamp clips at the padding edge, so the
next line never shows in it; padding would show it), the same negative margins, so the line sits where it did */
.widget > p.sub.lt-intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;cursor:pointer;padding:0;border:solid transparent;border-width:12.5px 0;background-clip:padding-box;margin-top:-12.5px;margin-bottom:-2.5px}
.widget > p.sub.lt-intro.open{-webkit-line-clamp:unset;line-clamp:none;display:block}
.list-tools.lt-ph{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.list-tools.lt-ph > *{order:4}
.list-tools.lt-ph > .lt-keep{order:1;flex:1 1 0;min-width:0;max-width:none;width:auto}
.list-tools.lt-ph > .lt-bar{order:2;display:flex;gap:8px;align-items:center;margin-left:auto}
.list-tools.lt-ph > .lt-sum{order:3;display:block;flex-basis:100%;margin:-2px 0 0;font-size:12.5px;color:var(--muted)}
.list-tools.lt-ph:not(:has(> .lt-keep)) > .lt-sum{order:1;flex:1 1 0;margin:0} /* no search kept in view: the summary beside Filters */
.list-tools.lt-ph.lt-open:not(:has(> .lt-keep))::before{content:"";order:3;flex-basis:100%;height:0} /* the open panel starts on its own line */
.list-tools.lt-ph:not(.lt-open) > :not(.lt-bar):not(.lt-sum):not(.lt-keep){display:none!important}
.list-tools.lt-ph > .csv-btn,.list-tools.lt-ph > .spacer{display:none!important}
.list-tools.lt-ph.lt-open{padding-bottom:12px;border-bottom:1px solid var(--line)}
.list-tools.lt-ph.lt-open > .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.list-tools.lt-ph.lt-open > .seg::-webkit-scrollbar{display:none}
.lt-fbtn{display:inline-flex;align-items:center;gap:6px}
.lt-fbtn .ico{width:16px;height:16px;transition:transform .18s var(--ease)}
.lt-fbtn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.lt-bar .qa-btn{flex:none}
/* the money tiles on Receivables and Payables: a compact 2 x 2 */
#inv_stats,#xh_stats{gap:8px;margin-bottom:12px!important}
#inv_stats .stat,#xh_stats .stat{padding:8px 10px;border-radius:10px}
#inv_stats .stat .n,#xh_stats .stat .n{font-size:17px}
#inv_stats .stat .l,#xh_stats .stat .l{font-size:10.5px;margin-top:1px}
/* Payables group rows: chevron + title on one line, the amount and count to the right under it */
.xh-head.xh-fold,.xh-chead{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;column-gap:8px;row-gap:2px;align-items:center}
.xh-chead{grid-template-columns:minmax(0,1fr) auto auto}
.xh-head.xh-fold{align-items:start}
.xh-fold > .xh-chev{grid-column:1;grid-row:1;margin-top:2px}
.xh-fold > strong{grid-column:2 / -1;grid-row:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.xh-fold > .xh-dots,.xh-fold > .cmoney,.xh-fold > .cmuted{align-self:center}
.xh-fold > .xh-dots{grid-column:2;grid-row:2;margin-left:0}
.xh-fold > .cmoney{grid-column:3;grid-row:2;margin-left:0;white-space:nowrap}
.xh-fold > .cmuted{grid-column:4;grid-row:2;white-space:nowrap}
.xh-chead > strong{grid-column:1 / -1;grid-row:1;min-width:0}
.xh-chead > span.cmuted:not(:last-child){grid-column:1;grid-row:2}
.xh-chead > .cmoney{grid-column:2;grid-row:2;margin-left:0;white-space:nowrap}
.xh-chead > .cmuted:last-child{grid-column:3;grid-row:2;white-space:nowrap}
/* ---- Settings ---- */
/* the 8 tabs: two rows of four, every tab whole, no scrollbar */
#page-settings > .tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:4px;overflow:visible;width:100%}
#page-settings > .tabs .tab{padding:8px 4px;font-size:13px;min-width:0;text-align:center}
/* a section's note goes on its own line under the heading */
.tpl-gh .cmuted,.set-h3 .note{display:block;margin-top:2px;font-weight:500}
/* the Add buttons on a Settings card read "+ Add" on a phone (their full name stays in aria-label) */
.ph-hide{display:none}
/* Data: Export everything above the activity log */
#view-s_data .wgrid > #exportCard{order:-1}
/* Money: How to pay grows with its words (settings.js sizes it) */
#how_to_pay{resize:none;overflow:hidden;min-height:88px}
/* Leads: each tracking link's Copy button is full width */
.track-row{grid-template-columns:minmax(0,1fr)}
.track-row [data-copy]{width:100%}
/* ---- Home donuts (Pulse, Money): the donut above its legend, each value on one line; the 5th money tile full width ---- */
.cmd-pane .donut-wrap{flex-direction:column;align-items:center;flex-wrap:nowrap}
.cmd-pane .donut-legend{width:100%;flex:none;min-width:0}
.donut-li .donut-lab{min-width:0}
.donut-li .donut-val{white-space:nowrap;flex:none}
.cmd-tiles > :nth-child(5):last-child{grid-column:1 / -1}
/* ---- the top bar: a menu icon beside the logo ---- */
.logo-btn .logo-menu{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--accent-ink)}
.logo-btn .logo-menu .ico{width:22px;height:22px}
/* a row with nothing to open (the payment schedule rows carry an empty placeholder instead of the chevron): no chevron
column, the row uses the full width */
.crow:not(.crow-time):not(:has(> .crow-x)){grid-template-columns:minmax(0,1fr);padding-left:12px}
.crow:not(.crow-time):not(:has(> .crow-x)) > span:not([class]):empty{display:none}
.crow:not(.crow-time):not(:has(> .crow-x)) > .crow-main,.crow:not(.crow-time):not(:has(> .crow-x)) > .crow-right{grid-column:1}
}
/* ---- end R57-B ---- */
/* ---- R57-C: Home sections that fold (phone), wizards, small fixes ---- */
/* finding 22: on a phone a Home card's title is a fold button (app.js applyHomeFold); folded = the title row only.
The button exists only on a phone, so a desktop never folds. */
@media(max-width:600px){
.w-head h2 .w-fold{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:0;padding:0;border:0;background:none;
font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.w-fold .w-fold-chev{display:grid;place-items:center;width:20px;height:20px;flex:none;color:var(--muted);transition:transform .2s var(--ease)}
.w-fold .w-fold-chev .ico{width:18px;height:18px}
.w-fold[aria-expanded="true"] .w-fold-chev{transform:rotate(90deg)}
.w-fold:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;border-radius:8px}
.wgrid .widget.is-folded{height:auto!important}
.wgrid .widget.is-folded > .sub,.wgrid .widget.is-folded > .w-body{display:none}
.wgrid .widget.is-folded > .w-head{margin:0}
}
/* finding 27: a wizard's radio buttons in the theme teal, like its checkboxes (was the browser blue) */
#wizard input[type=radio],#askwiz input[type=radio]{accent-color:var(--accent-text)}
/* team finding 11: the expense wizard's project status: the chip beside the title on a desktop, in the line under the
title on a phone (like the job-note wizard), so it never squeezes the title */
.ew-proj .ew-st{display:none}
@media(max-width:600px){
.ew-proj > .pill{display:none}
.ew-proj .ew-st{display:inline}
/* finding 27: the Home launcher is a menu: no step marker, no "Step 1 of 1", no Close beside the X (app.js: .is-menu) */
.wiz-panel.is-menu .wiz-rail,.wiz-panel.is-menu .wiz-foot{display:none}
.wiz-panel.is-menu .wiz-head{padding-bottom:16px}
.wiz-panel.is-menu .wiz-body{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
/* its option cards are as tall as their words (the equal rows left a blank strip under the short ones) */
.launch-grid{grid-auto-rows:auto}
.launch-item{height:auto}
}
/* not phone-specific: Recent updates keeps the typed words as typed (app.js capitalizes only the first letter) */
.upd .act{text-transform:none}
/* ---- end R57-C ---- */
/* ---- R59-D: the top bar in a narrow window (R11), text fields on an iPhone (R15) ---- */
/* R11: the bar is a 1fr | search | 1fr grid. Each side used to keep its full content width even when its column was
narrower, so the right side (email + bell + Sign out) spilled left over the search (up to 49 px at 880 to 1040 px wide
with a longer email). Each side now stays inside its column: the icons keep their size, the email (and a long page
title) shortens with "..." instead. A wide window has room for everything, so nothing there moves. */
.tb-left,.tb-right{max-width:100%}
.tb-left > .logo-btn,.tb-right > .iconbtn-bar{flex:none}
.topbar .who{min-width:0}
.page-title{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-right:2px;margin-right:-2px} /* the 2 px keep a bold last letter's edge from being cut */
@media(max-width:600px){
/* R11 on a phone: the bell + Sign out (two 44 px buttons) need 92 px beside the centred search; at 390 px each side had
87.5, so the bell sat 4.7 px over the search. Below 407 px the search gives up the difference (390 px: 170 wide). */
.tb-right{gap:4px}
.home-search{width:min(clamp(150px,46vw,560px),calc(100vw - 220px))}
/* R15: iPhone zooms the page in when a field under 16 px is tapped and stays zoomed after it closes, so the next screen
(the project card) opened cut off at both sides until he zoomed out. Every office field was 12.5 to 15 px. On a
phone they are 16 px (office page only: the team app and the portal keep their own rules). */
body:has(> .shell) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),select,textarea){font-size:16px!important}
/* a long email, link or code in a card or a wizard breaks inside the box instead of pushing past the screen edge */
#modalBody,#wizard{overflow-wrap:break-word}
}
/* ---- end R59-D ---- */
/* ---- R60-1: search results on a phone (Reza's retest r09) ---- */
/* The list was as wide as the search box (170 px at 390 px), so a project title wrapped one word per line and the
PROJECT label was cut at the right. On a phone the list now spans the screen (12 px each side) under the centred
search; in every width the title takes the free room and the kind label never shrinks. */
.sr-label{flex:1;min-width:0}
.sr-code,.sr-kind{flex:none}
@media(max-width:600px){
.search-results{left:50%;right:auto;width:calc(100vw - 24px);transform:translateX(-50%)}
}
/* ---- end R60-1 ---- */
/* ---- R64-B (S132, CEO): a label or a link drawn as a button looks exactly like a button, at every width ----
An upload is a