/* Operator design system -- the one place colour, type, spacing and the
   shared components are defined. Spec: shots4/design/DESIGN_SYSTEM.md.

   Order: fonts, tokens, base, components, then (further down this file) the
   page sections. A page section arranges components -- grid, order, width --
   and does not repaint them. index.html and signal-overhaul.css load before
   this file and keep only layout that nothing here restates. */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted, so every machine and the installed app offline draw the same
   letters. Variable weight: one file covers 400-600. */
@font-face{font-family:"Geist";src:url("/assets/fonts/geist-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/geist-mono-latin-wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ----------------------------------------------------------------- tokens */
:root,
:root[data-theme="light"]{
 /* neutrals: a faintly green-grey paper, white cards */
 --bg:#F7F8F6; --sidebar-bg:#F7F8F6;
 --surface-1:#FFFFFF; --surface-2:#F2F4F1; --surface-3:#FFFFFF; --surface-hover:#EFF2EE;
 --text:#111813; --secondary-text:#3E4842; --muted:#5F6A63;
 --ink:17,24,19;
 --line:rgba(17,24,19,.08); --border-strong:rgba(17,24,19,.15); --border-hover:rgba(17,24,19,.25);
 --grid:rgba(17,24,19,.06);
 /* the brand: the logo's leaf green, deepened to hold white text */
 --accent:#0D6B33; --accent-strong:#0A5728; --accent-dim:#5E9A73;
 --accent-wash:rgba(13,107,51,.08); --accent-line:rgba(13,107,51,.30); --accent-ink:#FFFFFF;
 /* status: only where good / look / wrong is the point */
 --positive:#12704D; --positive-wash:rgba(18,112,77,.10); --positive-rgb:18,112,77;
 --warning:#965A06; --warning-wash:rgba(150,90,6,.10); --warning-rgb:150,90,6;
 --critical:#B3261E; --critical-wash:rgba(179,38,30,.08); --critical-line:rgba(179,38,30,.35);
 /* charts */
 --series-1:#7C8780; --series-2:#A3ACA6; --series-3:#C4CBC6; --series-4:#DADFDB; --series-5:#E9ECEA;
 --composition-color:var(--series-1); --service-color:var(--series-1); --share:0%;
 --route-1:#A47745; --route-2:#557783; --route-3:#597761; --route-4:#A45F4E; --route-5:#73657E;
 /* a panel that paints its own dark ground, and the ink on it */
 --brief-panel:#0A5728; --brief-ink:#F4F8F5; --brief-label:#A9D3B6;
 --brief-line:rgba(255,255,255,.18); --brief-btn:rgba(255,255,255,.10);
 --green-deep:#E4EFE7;
 --toast-bg:#111813; --toast-ink:#F7F8F6; --knob:#FFFFFF;
 --scrim:rgba(17,24,19,.30);
 /* elevation: cards are flat; only what floats casts a shadow */
 --shadow:none;
 --shadow-xs:0 1px 2px rgba(17,24,19,.08),0 0 0 1px rgba(17,24,19,.04);
 --shadow-pop:0 1px 2px rgba(17,24,19,.06),0 8px 24px -6px rgba(17,24,19,.16);
 --float-shadow:0 1px 2px rgba(17,24,19,.05),0 16px 40px -10px rgba(17,24,19,.20);
 color-scheme:light;
}
:root[data-theme="dark"]{
 --bg:#0C0F0D; --sidebar-bg:#0C0F0D;
 --surface-1:#131815; --surface-2:#191F1B; --surface-3:#1B211E; --surface-hover:#1E2521;
 --text:#ECF0ED; --secondary-text:#B6BFB9; --muted:#8E9891;
 --ink:236,240,237;
 --line:rgba(236,240,237,.08); --border-strong:rgba(236,240,237,.15); --border-hover:rgba(236,240,237,.26);
 --grid:rgba(236,240,237,.06);
 --accent:#45BE6E; --accent-strong:#62CC86; --accent-dim:#2E7D4A;
 --accent-wash:rgba(69,190,110,.12); --accent-line:rgba(69,190,110,.34); --accent-ink:#06120A;
 --positive:#4CC497; --positive-wash:rgba(76,196,151,.12); --positive-rgb:76,196,151;
 --warning:#E3A54E; --warning-wash:rgba(227,165,78,.12); --warning-rgb:227,165,78;
 --critical:#F2806F; --critical-wash:rgba(242,128,111,.12); --critical-line:rgba(242,128,111,.40);
 --series-1:#7A857E; --series-2:#5A645E; --series-3:#454E48; --series-4:#353D38; --series-5:#2A312C;
 --route-1:#B89A68; --route-2:#7FA3B5; --route-3:#8FA97E; --route-4:#B58A6F; --route-5:#9B8BAE;
 --brief-panel:#132A1B; --brief-ink:#ECF0ED; --brief-label:#8FD6A7;
 --brief-line:rgba(255,255,255,.12); --brief-btn:rgba(255,255,255,.07);
 --green-deep:#12241A;
 --toast-bg:#1B211E; --toast-ink:#ECF0ED; --knob:#ECF0ED;
 --scrim:rgba(0,0,0,.55);
 --shadow-xs:0 1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(236,240,237,.06);
 --shadow-pop:0 1px 2px rgba(0,0,0,.4),0 10px 28px -6px rgba(0,0,0,.6);
 --float-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -10px rgba(0,0,0,.65);
 color-scheme:dark;
}
:root{
 /* type */
 --font-ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
 --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:36px;
 /* space: a 4px grid; --s1..--s5 are the legacy names for 8/16/24/32/48 */
 --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
 --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
 --card-pad:20px; --stack-gap:16px;
 /* row rhythm: list rows and table cells (Compact spacing tightens these) */
 --row-py:var(--sp-3); --cell-py:10px; --th-py:8px;
 /* shape */
 --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
 /* controls */
 --ctl-sm:28px; --ctl-md:34px; --ctl-lg:40px;
 /* motion */
 --dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.2,0,0,1);
 --ease-out-fast:cubic-bezier(0,0,.2,1); --spring:cubic-bezier(.2,0,0,1); --tap:100ms;
 --sidebar:232px;
 /* old names, new roles: several hundred rules still say these */
 --green:var(--positive); --green-bright:var(--positive); --green2:var(--positive); --green-glow:var(--positive-wash);
 --amber:var(--warning); --red:var(--critical);
 --cyan:var(--series-1); --blue:var(--series-1); --purple:var(--series-2);
 --surface:var(--surface-2); --panel:var(--surface-1); --border:var(--line);
}
@media (max-width:700px){:root{--card-pad:16px;--stack-gap:12px}}
/* Personal settings (prefs.js puts these classes on <html>, before the first
   paint). Compact spacing: tighter rows, cells and card padding, through the
   tokens above -- no page restates it. Controls keep their thumb size. */
:root.density-compact{--row-py:var(--sp-2);--cell-py:6px;--th-py:6px;--card-pad:14px;--stack-gap:10px}
@media (max-width:700px){:root.density-compact{--card-pad:12px;--stack-gap:8px}}
/* Large text (:root.text-large) scales every font size in these stylesheets
   by 1.125; the inline script at the top of index.html does it, because the
   sizes are px and a root font size would not reach them. */

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
html,body{font-family:var(--font-ui),system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--text);font-size:var(--fs-md);line-height:1.45;letter-spacing:-.003em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1}
body,button,input,select,textarea{font-family:var(--font-ui),system-ui,sans-serif}
button,input,select,textarea{font-size:inherit;letter-spacing:inherit}
code,kbd,pre,samp{font-family:var(--font-mono);font-size:.92em}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.015em;line-height:1.25}
h3{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
h4{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;color:var(--secondary-text)}
strong,b{font-weight:600}
a:not([class]){color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:not([class]):hover{color:var(--accent-strong)}
.small{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.eyebrow{font-size:var(--fs-sm);font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none}
.section-title{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:0}
.num,td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
::selection{background:var(--accent-wash);color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0}

/* ------------------------------------------------------------ page header */
.page>.page-head,.collections-head,.finance-command-head,.inventory-command-head,.fleet-command-head-pro{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-5);padding:0;border:0;background:none}
.page>.page-head h2,.collections-head h2,.finance-command-head h2,.inventory-command-head h2,.fleet-command-head-pro h2,.page>h2:first-child,.calls-title h2,.mk-title h2,.stk-title h2,.sl-title h2,.sched-title h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:0}

/* ------------------------------------------------------------ card / section */
.card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:none}
.card:hover{border-color:var(--line)}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.section-head>*{min-width:0}
.section-head .small,.section-head p{margin:2px 0 0}

/* ------------------------------------------------------------- KPI figure */
.kpi-value,.big,.metric{font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}

/* ------------------------------------------------------------------ table */
table{width:100%;border-collapse:collapse;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
th{font-size:var(--fs-sm);font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;text-align:left;padding:var(--th-py) 12px;border-bottom:1px solid var(--line);background:none;white-space:nowrap}
td{padding:var(--cell-py) 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text)}
tbody tr:last-child>td{border-bottom:0}
tfoot td,tr.total td,tr.totals td{border-top:1px solid var(--border-strong);font-weight:500}
tbody tr:hover>td{background:var(--surface-hover)}
tbody tr[tabindex],tbody tr[data-open],tbody tr.clickable{cursor:pointer}
.table-wrap,.table-scroll{border:0;border-radius:0;background:none;overflow-x:auto}

/* --------------------------------------------------------- underline tabs */
:is(.section-tabs,.finance-tabs,.territory-tabs,#mktTabs,#econTabs,.pipeline-tabs,.revenue-tabs,.warranty-tabs,.property-tabs-pro,.fleet-tabs-pro,.stk-tabs,.drawer-tabs,.property-drawer-tabs-pro,.collections-drawer-tabs,.fleet-drawer-tabs-pro,.mk-tabs,.outreach-tabs){display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;padding:0;width:auto;max-width:100%}
:is(.section-tabs,.finance-tabs,.territory-tabs,#mktTabs,#econTabs,.pipeline-tabs,.revenue-tabs,.warranty-tabs,.property-tabs-pro,.fleet-tabs-pro,.stk-tabs,.drawer-tabs,.property-drawer-tabs-pro,.collections-drawer-tabs,.fleet-drawer-tabs-pro,.mk-tabs,.outreach-tabs)::-webkit-scrollbar{display:none}
:is(.section-tab,.finance-tab,.territory-tab,.pipeline-tab-btn,.revenue-tab-btn,.warranty-tab,.property-tab-pro,.inventory-tab,.fleet-tabs-pro>button,.stk-tabs>button,.drawer-tabs>button,.property-drawer-tabs-pro>button,.collections-drawer-tabs>button,.fleet-drawer-tabs-pro>button,.mk-tabs>button,.outreach-tabs>button){display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;min-height:40px;padding:0 var(--sp-3);margin:0 0 -1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:var(--fs-md);font-weight:400;letter-spacing:-.003em;white-space:nowrap;cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
:is(.section-tab,.finance-tab,.territory-tab,.pipeline-tab-btn,.revenue-tab-btn,.warranty-tab,.property-tab-pro,.inventory-tab,.fleet-tabs-pro>button,.stk-tabs>button,.drawer-tabs>button,.property-drawer-tabs-pro>button,.collections-drawer-tabs>button,.fleet-drawer-tabs-pro>button,.mk-tabs>button,.outreach-tabs>button):hover{color:var(--text);background:none}
:is(.section-tab,.finance-tab,.territory-tab,.pipeline-tab-btn,.revenue-tab-btn,.warranty-tab,.property-tab-pro,.inventory-tab,.fleet-tabs-pro>button,.stk-tabs>button,.drawer-tabs>button,.property-drawer-tabs-pro>button,.collections-drawer-tabs>button,.fleet-drawer-tabs-pro>button,.mk-tabs>button,.outreach-tabs>button):is(.active,[aria-selected="true"],[aria-current="page"]){color:var(--text);font-weight:500;border-bottom-color:var(--text);background:none}

/* ------------------------------------------------------ segmented control */
:is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch,.account-theme){display:inline-flex;align-items:center;gap:2px;padding:2px;margin:0;border:0;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:none;width:auto;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
:is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch,.account-theme)>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;min-height:28px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;box-shadow:none;color:var(--secondary-text);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
:is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch,.account-theme)>button:hover{color:var(--text)}
:is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch,.account-theme)>button:is(.active,.is-current,[aria-pressed="true"],[aria-selected="true"]){background:var(--surface-1);color:var(--text);box-shadow:var(--shadow-xs)}
:root[data-theme="dark"] :is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch,.account-theme)>button:is(.active,.is-current,[aria-pressed="true"],[aria-selected="true"]){background:var(--surface-hover)}

/* ------------------------------------------------- vertical nav (Settings) */
.settings-tabs{display:flex;flex-direction:column;gap:2px;padding:0;border:0;background:none;box-shadow:none}
.settings-tab{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;color:var(--secondary-text);font-size:var(--fs-md);font-weight:400;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.settings-tab:hover{background:var(--surface-hover);color:var(--text)}
.settings-tab.active{background:var(--surface-2);color:var(--text);font-weight:500}
@media (max-width:900px){
 .settings-tabs{flex-direction:row;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
 .settings-tab{width:auto;flex:none;min-height:44px;padding:0 var(--sp-3);margin-bottom:-1px;border-radius:0;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}
 .settings-tab:hover{background:none}
 .settings-tab.active{background:none;border-bottom-color:var(--text)}
}

/* ------------------------------------------------------- chips and filters */
:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button){display:inline-flex;align-items:center;gap:6px;height:28px;min-height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface-1);box-shadow:none;color:var(--secondary-text);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button):hover{background:var(--surface-hover);color:var(--text)}
:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button):is(.active,.is-on,[aria-pressed="true"],[aria-selected="true"]){background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent)}
:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button) :is(b,em,small,.count,span:last-child:not(:first-child)){font-weight:500;font-style:normal;color:var(--muted)}
:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button):is(.active,.is-on,[aria-pressed="true"]) :is(b,em,small,.count,span:last-child:not(:first-child)){color:inherit;opacity:.8}
@media (max-width:900px){:is(.pl-chip,.sl-chip,.calls-chip,.sched-tech,.collection-chip,.progression-chip,.work-list-chip,.filter-chip,.migration-chip,.msg-filters>button){height:36px;min-height:36px}:is(.segment,.sched-seg,.calls-seg,.stk-seg,.map-metric-switch)>button{height:36px;min-height:36px}}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:auto;min-height:var(--ctl-md);padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-1);box-shadow:none;color:var(--text);font-size:var(--fs-md);font-weight:500;line-height:1.2;letter-spacing:-.003em;text-decoration:none;white-space:nowrap;cursor:pointer;transform:none;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.btn:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text);transform:none;box-shadow:none}
.btn:active{background:var(--surface-2)}
.btn.secondary{background:var(--surface-1);border-color:var(--border-strong);color:var(--text)}
.btn.secondary:hover{background:var(--surface-hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500;letter-spacing:-.003em}
.btn.primary:not(:disabled,[aria-disabled="true"]):is(:hover,:active){background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.primary:hover{color:var(--accent-ink);filter:none;box-shadow:none}
.btn.primary:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.btn.ghost,.btn.quiet,.btn.link{background:transparent;border-color:transparent;color:var(--secondary-text)}
.btn.ghost:hover,.btn.quiet:hover,.btn.link:hover{background:var(--surface-hover);border-color:transparent;color:var(--text)}
.btn.danger{background:var(--surface-1);border-color:var(--critical-line);color:var(--critical)}
.btn.danger:hover{background:var(--critical-wash);border-color:var(--critical-line);color:var(--critical)}
.btn.small,.btn.sm{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.btn.lg,.btn.large{min-height:var(--ctl-lg);padding:0 18px;font-size:14px}
.btn:disabled,.btn[aria-disabled="true"],.btn.disabled{opacity:.45;cursor:not-allowed;filter:none}
/* a disabled button does not answer the pointer; the primary keeps its fill */
.btn:not(.primary):is(:disabled,[aria-disabled="true"]):hover{background:var(--surface-1);border-color:var(--border-strong)}
.btn svg{width:16px;height:16px;flex:none}
/* In a list row the actions are the small size: the row is the subject. */
:is(.row-actions,.calls-row-actions,.sl-row-act,.pr-contact-actions) .btn,.pr-head-btn{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
/* Phones: a thumb, not a pointer. 44px is the touch target for anything you
   press; small buttons and chips keep 36. */
@media (max-width:900px){.btn{min-height:44px}.btn.small,.btn.sm,:is(.row-actions,.calls-row-actions,.sl-row-act,.pr-contact-actions) .btn,.pr-head-btn{min-height:36px}}

/* ---------------------------------------------------------------- inputs */
:is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=password],input[type=date],input[type=month],input[type=time],input[type=datetime-local],select,textarea){min-height:var(--ctl-md);padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background-color:var(--surface-1);color:var(--text);font-size:var(--fs-md);font-weight:400;line-height:1.3;box-shadow:none;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
textarea{padding:8px 10px;line-height:1.45;resize:vertical}
:is(input,select,textarea){min-width:0;max-width:100%}
/* :not([multiple]) lifts this to the field rule's specificity, whose
   "padding:0 10px" otherwise put the text under the chevron. */
select:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
select[multiple]{background-image:none;padding:6px 8px}
:is(input,select,textarea)::placeholder{color:var(--muted);opacity:1}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):hover{border-color:var(--border-hover)}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
:is(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
:is(input,select,textarea)[aria-invalid="true"]{border-color:var(--critical)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
input[type=range]{accent-color:var(--accent)}
/* A field's label: the span or .small written first inside its <label>. */
.page label>span,.page label>.small,label.field>span:first-child,.field-label{font-size:var(--fs-sm);font-weight:500;letter-spacing:0;text-transform:none;color:var(--secondary-text)}
@media (max-width:900px){:is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=password],input[type=date],input[type=month],input[type=time],select,textarea){font-size:16px;min-height:44px}}

/* switch (settings) */
.switch-row .switch-track{width:32px;height:18px;flex:0 0 32px;border-radius:var(--radius-pill);border:0;background:var(--border-strong);transition:background var(--dur-1) var(--ease)}
.switch-row .switch-track::after{top:2px;left:2px;width:14px;height:14px;background:var(--knob);box-shadow:var(--shadow-xs)}
.switch-row>input:checked~.switch-track{background:var(--accent);border-color:var(--accent)}
.switch-row>input:checked~.switch-track::after{transform:translateX(14px);background:var(--knob)}

/* --------------------------------------------------- badges / status pills */
:is(.badge,.pr-badge,.call-pill,.econ-pill,.status-chip,.warranty-pill,.confidence-pill,.stk-chip,.schedule-unbilled-badge,.drive-time-badge,.property-recon-badge,.sync-pill,.pill){display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border:0;border-radius:var(--radius-xs);background:var(--surface-2);box-shadow:none;color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle}
:is(.badge,.pr-badge,.call-pill,.econ-pill,.status-chip,.warranty-pill,.stk-chip,.pill):is(.ok,.good,.is-good,.is-ok,.positive,.success,.s-active,.is-ready,.ready,.paid){background:var(--positive-wash);color:var(--positive)}
:is(.badge,.pr-badge,.call-pill,.econ-pill,.status-chip,.warranty-pill,.stk-chip,.pill):is(.warn,.warning,.is-warn,.is-warning,.amber,.watch){background:var(--warning-wash);color:var(--warning)}
:is(.badge,.pr-badge,.call-pill,.econ-pill,.status-chip,.warranty-pill,.stk-chip,.pill):is(.bad,.is-bad,.critical,.is-critical,.danger,.risk,.is-risk,.red,.overdue,.is-short){background:var(--critical-wash);color:var(--critical)}
:is(.badge,.pr-badge,.call-pill,.econ-pill,.status-chip,.warranty-pill,.stk-chip,.pill):is(.is-info,.selected){background:var(--accent-wash);color:var(--accent)}

/* ------------------------------------------------------------------ drawer */
:is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.ray-chat-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro){background:var(--surface-1);border:0;border-left:1px solid var(--line);color:var(--text)}
:is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro) h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:2px 0 0}
:is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro) h3{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
:is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.progression-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro) .eyebrow{font-size:var(--fs-sm);color:var(--muted)}
/* One Close for every panel: a quiet small button, an x and the word, top
   right. operator-shell.js marks each panel's close as .panel-close; the
   markup's own .secondary/.ghost no longer decides how it looks. */
:root[data-theme] :is(.drawer-close,.panel-close).btn{min-height:var(--ctl-sm);padding:0 10px;gap:6px;font-size:var(--fs-sm);font-weight:500;background:transparent;border-color:transparent;box-shadow:none;color:var(--secondary-text);border-radius:var(--radius-sm)}
:root[data-theme] :is(.drawer-close,.panel-close).btn:hover{background:var(--surface-hover);border-color:transparent;color:var(--text)}
:root[data-theme] :is(.drawer-close,.panel-close).btn .op-icon{width:14px;height:14px}
.drawer-sticky-header{background:var(--surface-1)}
.drawer-grid{gap:var(--sp-3) var(--sp-4)}
.drawer-grid>div{background:none;border:0;padding:0}
.drawer-grid span{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400}
.drawer-grid strong{display:block;font-size:var(--fs-md);font-weight:500;margin-top:2px}
/* .fold is the same fold-away row outside a drawer (Revenue › Proof). */
details:is(.drawer-more,.fold){margin:0;border:0;border-top:1px solid var(--line);border-radius:0;padding:0;background:none}
details:is(.drawer-more,.fold):last-of-type{border-bottom:1px solid var(--line)}
details:is(.drawer-more,.fold)+details:is(.drawer-more,.fold){margin-top:0}
details:is(.drawer-more,.fold)>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px;padding:0 2px;list-style:none;font-size:var(--fs-md);font-weight:500;color:var(--text);cursor:pointer}
details:is(.drawer-more,.fold)>summary::-webkit-details-marker{display:none}
details:is(.drawer-more,.fold)>summary::after{content:"";width:7px;height:7px;flex:none;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1) var(--ease)}
details:is(.drawer-more,.fold)[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
details:is(.drawer-more,.fold)>summary:hover{color:var(--accent)}
details:is(.drawer-more,.fold)[open]{padding-bottom:var(--sp-4)}
:is(.property-drawer-backdrop,.progression-drawer-backdrop,.overview-modal-backdrop,.mobile-sheet-backdrop){background:var(--scrim);backdrop-filter:none}

/* ------------------------------------------------------------- modal / dialog */
.modal-card,.op-dialog-card{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--float-shadow)}
.op-dialog-scrim{background:var(--scrim)}
.op-dialog-card h3,.modal-head h2,.modal-head h3{font-size:17px;font-weight:600;letter-spacing:-.015em}

/* ------------------------------------------------------------------ toast */
.toast{background:var(--toast-bg);color:var(--toast-ink);border:1px solid transparent;border-radius:10px;box-shadow:var(--float-shadow);font-size:var(--fs-md);padding:10px 14px}
:root[data-theme="dark"] .toast{border-color:var(--border-strong)}
.toast.is-error{background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--float-shadow),inset 3px 0 0 var(--critical)}
.toast .toast-x{color:inherit;opacity:.7}

/* ------------------------------------------------------------ empty state */
:is(.empty-state,.home-empty,.notif-empty,.fleet-empty-pro,.stk-empty,.pr-empty,.sched-empty,.kanban-empty,.work-list-empty,.pc-empty,.exp-empty,.econ-empty,.calls-chart-empty){padding:var(--sp-8) var(--sp-4);border:0;border-radius:0;background:none;color:var(--muted);font-size:var(--fs-sm);line-height:1.5;text-align:center}
:is(.empty-state,.home-empty,.notif-empty,.fleet-empty-pro,.stk-empty,.pr-empty,.sched-empty,.kanban-empty,.work-list-empty,.pc-empty,.exp-empty,.econ-empty) :is(strong,b,h3,h4){display:block;color:var(--text);font-size:var(--fs-md);font-weight:500;margin:0 0 4px}
:is(.empty-state,.home-empty,.notif-empty,.fleet-empty-pro,.stk-empty,.pr-empty,.sched-empty,.kanban-empty,.work-list-empty,.pc-empty,.exp-empty,.econ-empty) .btn{margin-top:var(--sp-3)}

/* -------------------------------------------------------- loading skeleton */
@keyframes opShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel-shimmer:before,.skel-shimmer:after,.msg-skel i{background:linear-gradient(90deg,var(--surface-2) 30%,var(--surface-hover) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:opShimmer 1.4s linear infinite;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){.skel-shimmer:before,.skel-shimmer:after,.msg-skel i{animation:none}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===================================================== LAYOUT COMPONENTS
   For page passes. Spec and rules: shots4/design/DESIGN_SYSTEM.md, "Layout
   components". A page uses these instead of drawing its own tiles, boxes
   inside cards, rail cards or emoji. */

/* ------------------------------------------------------ figure strip / KPI */
/* One strip of figures. Tiles are divided by hairlines (drawn as shadows, so
   a short last row leaves no grey cells); inside a card the strip bleeds to
   the card's edges like a table instead of becoming a box in a box. */
.fig-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}
.card .fig-strip{margin:0 calc(-1 * var(--card-pad));border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.card .fig-strip:is(:last-child,:has(+ [hidden]:last-child)){margin-bottom:calc(-1 * var(--card-pad));border-bottom:0;border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px)}
.fig{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;margin:0;padding:var(--sp-4) var(--sp-5);border:0;border-radius:0;background:var(--surface-1);box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);color:var(--text);font:inherit;text-align:left}
.card .fig{padding-left:var(--card-pad);padding-right:var(--card-pad)}
.fig-label{font-size:var(--fs-sm);font-weight:400;color:var(--muted);line-height:1.35}
.fig-value{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fig-sub{font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.fig.is-good .fig-value{color:var(--positive)}
.fig.is-warn .fig-value{color:var(--warning)}
.fig.is-bad .fig-value{color:var(--critical)}
.fig.is-empty .fig-value{color:var(--muted)}
.fig.is-empty .fig-sub{color:var(--warning)}
.fig-strip.is-compact .fig{padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.fig-strip.is-compact .fig-value{font-size:20px}
:is(button,a).fig{cursor:pointer;text-decoration:none;transition:background var(--dur-1) var(--ease)}
:is(button,a).fig:hover{background:var(--surface-hover)}
@media (max-width:700px){.fig-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.fig{padding:var(--sp-3) var(--sp-4)}.card .fig{padding-left:var(--card-pad);padding-right:var(--card-pad)}.fig-value{font-size:22px}.fig-strip.is-compact .fig-value{font-size:18px}}

/* ------------------------------------------------ sections within a card */
/* A card holds sections separated by full-width hairlines, not more cards.
   A quiet grouped area that still needs a ground is .card-inset: a fill,
   no border. */
.card-section{margin:var(--sp-4) calc(-1 * var(--card-pad)) 0;padding:var(--sp-4) var(--card-pad) 0;border-top:1px solid var(--line)}
.card-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;margin:0 0 var(--sp-2)}
.card-section-title{margin:0;font-size:var(--fs-md);font-weight:500;letter-spacing:-.005em;color:var(--text)}
.card-inset{padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--radius-md);background:var(--surface-2)}

/* ---------------------------------------------------- list rows in a card */
/* Rails and queues ("To book", "Call back"): rows between hairlines that
   bleed to the card's edges. Text left, value or actions right; actions can
   wrap to their own line under the text in a narrow rail. */
.row-list{display:block;margin:0 calc(-1 * var(--card-pad));padding:0;list-style:none}
.card .row-list:is(:last-child,:has(+ [hidden]:last-child)){margin-bottom:calc(-1 * var(--card-pad))}
.row-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-1) var(--sp-4);width:100%;margin:0;padding:var(--row-py) var(--card-pad);border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:inherit;font:inherit;text-align:left}
.row-item-main{min-width:0}
.row-item-title{display:block;font-size:var(--fs-md);font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-item-meta{display:block;font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.row-item-aside{display:flex;align-items:center;gap:var(--sp-2);justify-self:end;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.row-item-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.row-item-actions .btn{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
:is(a,button).row-item,.row-item.is-clickable{cursor:pointer;transition:background var(--dur-1) var(--ease)}
:is(a,button).row-item:hover,.row-item.is-clickable:hover{background:var(--surface-hover)}
.row-item.is-urgent .row-item-aside{color:var(--critical)}
@media (max-width:900px){.row-item-actions .btn{min-height:36px}}

/* --------------------------------------------- icons and history timeline */
/* Icons come from one inline sprite (index.html, #op-icons) through opIcon()
   in core.js. 1.6 stroke, currentColor, no emoji. */
.op-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.op-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.op-tl{display:grid;margin:0;padding:0;list-style:none}
.op-tl-item{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--sp-3);padding:5px 0}
.op-tl-item:not(:last-child)::before{content:"";position:absolute;left:10.5px;top:29px;bottom:-5px;width:1px;background:var(--line)}
.op-tl-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--secondary-text)}
.op-tl-ico .op-icon{width:12px;height:12px;vertical-align:0}
.op-tl-ico.is-good{background:var(--positive-wash);color:var(--positive)}
.op-tl-ico.is-warn{background:var(--warning-wash);color:var(--warning)}
.op-tl-ico.is-bad{background:var(--critical-wash);color:var(--critical)}
.op-tl-body{min-width:0;font-size:var(--fs-md);line-height:22px;color:var(--text)}
.op-tl-meta{display:block;font-size:var(--fs-sm);line-height:1.4;color:var(--muted)}

/* ------------------------------------------- callout and strip additions */
/* Added by the Marketing/Territory pass. A callout is the DESIGN_SYSTEM.md
   "Callout / banner": a card-coloured row with a 3px bar in the tone on the
   left -- never a tinted panel. Tones: .is-good, .is-warn, .is-bad, .is-info;
   no tone is a neutral bar. Every page callout (Stock's job verdict, Cash &
   checks' deadline) is this component; page rules only arrange it.
   A strip with nothing in it draws nothing, and a .fig can be the selected
   filter (.is-selected / aria-pressed): accent text on the accent wash, the
   chip's selected look. */
.callout{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-1);color:var(--secondary-text);font-size:var(--fs-sm);line-height:1.5}
.callout.is-good{border-left-color:var(--positive)}
.callout.is-warn{border-left-color:var(--warning)}
.callout.is-bad{border-left-color:var(--critical)}
.callout.is-info{border-left-color:var(--accent)}
.callout :is(strong,b){color:var(--text);font-weight:500}
.callout p{margin:0}
.callout p+p{margin-top:4px}
.fig-strip:empty{display:none}
/* .is-word: a figure whose value is a status in words ("Not connected",
   "Ready · Dialpad") reads at body size, not as a 26px number. */
.fig.is-word .fig-value,.fig-strip.is-compact .fig.is-word .fig-value{font-size:var(--fs-md);font-weight:500;letter-spacing:-.003em;line-height:1.45}
:is(button,a).fig:is(.is-selected,[aria-pressed="true"]){background:var(--accent-wash)}
:is(button,a).fig:is(.is-selected,[aria-pressed="true"]) .fig-label{color:var(--accent)}
/* A file picker's button looks like a secondary sm button, not the
   browser's grey bevel; the file name beside it is muted meta text. */
input[type=file]{font-size:var(--fs-sm);color:var(--muted)}
input[type=file]::file-selector-button{min-height:var(--ctl-sm);margin-right:var(--sp-2);padding:0 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--text);font:inherit;font-weight:500;cursor:pointer;transition:background var(--dur-1) var(--ease)}
input[type=file]::file-selector-button:hover{background:var(--surface-hover)}
@media (max-width:900px){input[type=file]::file-selector-button{min-height:36px}}

/* ---------------------------------------------------------------- icons */
.nav-ico svg,.section-btn svg,.btn svg{stroke-width:1.5}

/* Explanations live behind the number (phase 5); page-level AI insight boxes
   were replaced by one line in "Needs you". Content decisions, not styling. */
button.info,[data-def].info{display:none!important}
.ai-insight-slot[data-ai-insight-body]{display:none!important}

/* ============================================================ SHELL AND PAGES */
/* ------------------------------------------------------------------ shell */
.sidebar{background:var(--sidebar-bg)!important;box-shadow:none!important;border-right:1px solid var(--line)!important;padding:14px 10px!important}
.sidebar .brand{gap:9px!important;padding:6px 8px!important;margin-bottom:14px!important}
.sidebar .brand img{width:26px!important;height:26px!important;padding:0!important;border-radius:7px!important}
.sidebar .brand-word{font-size:14px!important;font-weight:600!important;letter-spacing:-.015em!important;text-transform:none!important}
.sidebar .brand-sub{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important}



/* The eight sections (operator-shell.js). The seventeen page buttons stay in
   the markup as the router, hidden. */
.nav.sectioned>.nav-btn,.nav.sectioned>.nav-group,.nav.sectioned>.nav-divider{display:none!important}
.section-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:7px 9px;border-radius:var(--radius-sm);color:var(--secondary-text);font-size:var(--fs-md);font-weight:400;text-align:left;cursor:pointer;min-height:34px;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.section-btn:hover{background:var(--surface-hover);color:var(--text)}
.section-btn[aria-current="page"]{background:var(--surface-2);color:var(--text);font-weight:500}
.section-btn svg{width:16px;height:16px;flex:none;opacity:.85}
.section-label{font-size:var(--fs-xs);font-weight:500;color:var(--muted);padding:16px 9px 4px}
.sidebar-collapsed .section-btn span{display:none}
.sidebar-collapsed .section-btn{justify-content:center}

/* The bar bleeds to the edges by the page gutter, so its content is inset by
   the same gutter: the title no longer touches the sidebar and the account
   button no longer runs off the right edge. */
.topbar{border-bottom:1px solid var(--line)!important;padding:4px var(--main-gutter,24px) 12px!important;margin-bottom:0!important;background:var(--bg)!important;box-shadow:none!important}
.topbar .ray-chat-btn,.topbar .global-search-btn{gap:6px}
.topbar .company-lockup img{display:none!important}
.topbar .topbar-brandline{display:none!important}
.topbar #pageTitle{font-size:15px!important;font-weight:500!important;letter-spacing:-.01em!important;margin:0!important}
.topbar #pageTitle .crumb-section{color:var(--muted);font-weight:400}
.topbar .actions{gap:8px!important;align-items:center!important}
#themeToggle,#refresh{display:none!important}
/* Your face and first name (onboarding, October 2026): a quiet pill, the
   avatar at its left edge and a chevron that says it opens a menu. */
.operator-account-button{gap:8px!important;height:32px!important;min-height:32px!important;max-width:200px;padding:0 8px 0 3px!important;border-radius:var(--radius-pill)!important;background:var(--surface-1)!important;color:var(--text)!important;border:1px solid var(--border-strong)!important;font-size:var(--fs-md);font-weight:500}
.operator-account-button:hover{background:var(--surface-hover)!important}
.operator-account-button[aria-expanded="true"]{background:var(--surface-2)!important}
.operator-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operator-account-chev{flex:0 0 14px;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.operator-account-menu{min-width:220px;width:min(300px,calc(100vw - 24px))}
/* Four appearances (Automatic, Light, Dark, Trump) share the row evenly. */
.account-menu-group .account-theme{display:flex;width:100%}
.account-menu-group .account-theme>button{flex:1 1 0;min-width:0;padding:0 6px}
.account-menu-group{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
.account-menu-group>b{font-size:12px;font-weight:500;color:var(--muted)}

/* Section tabs: the pages inside a section, under the top bar. */
.section-tabs{margin:0 0 var(--sp-6)}


/* ------------------------------------------------------------------- home */
/* Approved sample, version 2. Drawn into #page-overview by page-home.js. */
.home{display:flex;flex-direction:column;gap:24px;padding-top:4px}
.home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.home-greet{font-size:12.5px;color:var(--muted)}
.home-head h1{margin:3px 0 0;font-size:var(--fs-xl);font-weight:600;line-height:1.35;letter-spacing:-.02em;text-wrap:balance}
.home-hero{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);border:1px solid var(--line);border-radius:12px;background:var(--surface-1)}
.home-pace{padding:20px 20px 12px;min-width:0}
.home-pace-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start}
.home-hero-fig{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;cursor:pointer;color:inherit}
.home-hero-fig:hover .home-big{color:var(--accent)}
.home-label{font-size:13px;color:var(--secondary-text)}
.home-big{font-size:var(--fs-3xl);line-height:1.1;font-weight:600;letter-spacing:-.025em;margin-top:8px;transition:color .12s}
.home-sub{margin-top:8px;font-size:13px;color:var(--secondary-text)}
.home-delta{font-weight:500}
.home-delta.up{color:var(--positive)} .home-delta.down{color:var(--critical)}
.home-pace-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
@media (max-width:700px){.home-pace-side{width:100%;align-items:flex-start}}
.home-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--secondary-text)}
.home-legend b{font-weight:400}
.home-legend i,.home-tip i{display:inline-block;width:14px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}
.k-cur{border-color:var(--accent)!important} .k-prev{border-color:var(--series-2)!important} .k-goal{border-top:1.5px dashed var(--muted)!important}
.home-chart{position:relative;margin-top:14px}
.home-chart svg{display:block;width:100%;height:220px;overflow:visible}
.home-chart .c-grid{stroke:var(--grid);stroke-width:1}
.home-chart .c-tick{fill:var(--muted);font-family:var(--font-ui),system-ui,sans-serif;font-size:11px;font-variant-numeric:tabular-nums}
.home-chart .c-goal{stroke:var(--muted);stroke-width:1.25;stroke-dasharray:3 4}
.home-chart .c-prev{fill:none;stroke:var(--series-2);stroke-width:2;stroke-linejoin:round}
.home-chart .c-cur{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2400;stroke-dashoffset:2400;animation:home-draw 1.1s cubic-bezier(.3,.7,.2,1) .1s forwards}
.home-chart .c-area{fill:url(#homeFill);opacity:0;animation:home-fade .5s ease .8s forwards}
.home-chart .fill-top{stop-color:var(--accent);stop-opacity:.16} .home-chart .fill-bottom{stop-color:var(--accent);stop-opacity:0}
.home-chart .c-end{fill:var(--accent);stroke:var(--surface-1);stroke-width:2}
.home-chart .c-hx{stroke:var(--border-strong);stroke-width:1}
.home-chart .c-hc{fill:var(--accent);stroke:var(--surface-1);stroke-width:2}
.home-chart .c-hp{fill:var(--series-2);stroke:var(--surface-1);stroke-width:2}
.home-chart .c-hit{fill:transparent}
@keyframes home-draw{to{stroke-dashoffset:0}} @keyframes home-fade{to{opacity:1}}
/* Dark: last month's line and the grid were nearly invisible on the card. */
:root[data-theme="dark"] .home-chart .c-prev{stroke:rgba(var(--ink),.5)}
:root[data-theme="dark"] .home-chart .c-grid{stroke:rgba(var(--ink),.12)}
:root[data-theme="dark"] .home-chart .c-tick{fill:var(--secondary-text)}
:root[data-theme="dark"] .k-prev{border-color:rgba(var(--ink),.5)!important}
.home-tip{position:absolute;pointer-events:none;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;box-shadow:var(--float-shadow);padding:8px 10px;font-size:12.5px;min-width:170px;opacity:0;transition:opacity .1s;z-index:2}
.home-tip .d{font-family:var(--font-ui),system-ui,sans-serif;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.home-tip .r{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.home-tip .r span:first-child{color:var(--secondary-text)} .home-tip .r.gap{margin-top:4px}
.home-figs{border-left:1px solid var(--line);display:flex;flex-direction:column}
.home-fig{border:0;background:none;text-align:left;padding:16px 20px;display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;cursor:pointer;color:inherit}
.home-fig+.home-fig{border-top:1px solid var(--line)}
.home-fig:hover{background:var(--surface-hover)}
.home-fig:first-child{border-top-right-radius:12px} .home-fig:last-child{border-bottom-right-radius:12px}
.home-v-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.home-v{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
.home-s{font-size:12.5px;color:var(--muted)}
.home-v-row .home-delta{font-size:12.5px}
.home-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.home-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.home-sec-head h2{margin:0;font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
.home-sec-head h2 span{color:var(--muted);font-weight:400;margin-left:6px}
.home-link{border:0;background:none;color:var(--secondary-text);font-size:13px;padding:0 8px;margin:-12px -8px;min-height:40px;display:inline-flex;align-items:center;cursor:pointer}
.home-link:hover{color:var(--text)}
.home-link.is-new{color:var(--accent);font-weight:600}
.home-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface-1)}
.home-list li+li{border-top:1px solid var(--line)}
.home-item{width:100%;border:0;background:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:var(--row-py) 14px;text-align:left;cursor:pointer;color:inherit}
.home-item:hover{background:var(--surface-hover)}
.home-list li:first-child .home-item{border-radius:12px 12px 0 0}
.home-list li:last-child .home-item{border-radius:0 0 12px 12px}
.home-t{min-width:0}
.home-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500;font-size:13.5px;overflow:hidden;line-height:1.35}
/* The detail wraps to a second line rather than being cut mid-word. */
.home-t span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12.5px;color:var(--muted);overflow:hidden;line-height:1.4}
.home-more{width:100%;border:0;background:none;padding:10px 14px;min-height:40px;text-align:left;font-size:13px;color:var(--secondary-text);cursor:pointer;border-radius:0 0 12px 12px}
.home-more:hover{background:var(--surface-hover);color:var(--text)}
.home-fail{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home-retry-inline{font-size:inherit!important;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.home-iv{font-size:13.5px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-pri{width:16px;height:16px;display:grid;place-items:center}
.home-pri svg{width:14px;height:14px}
.pri-urgent{fill:var(--critical)} .pri-mark{stroke:var(--surface-1);stroke-width:1.8;stroke-linecap:round;fill:none}
.pri-soon{fill:var(--warning)} .pri-off{fill:var(--border-strong)}
.home-time{font-family:var(--font-ui),system-ui,sans-serif;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--secondary-text);width:64px;white-space:nowrap}
/* With no figures to draw, no empty chart frame or legend either. */
.home-hero.no-data .home-chart,.home-hero.no-data .home-legend{display:none}
.home-tag{font-size:11.5px;border:1px solid var(--border-strong);border-radius:5px;padding:0 6px;color:var(--secondary-text);font-weight:500}
.home-foot{display:flex;gap:16px;padding:10px 14px;font-size:12.5px;color:var(--muted)}
.home-foot b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.home-empty{padding:16px 14px;color:var(--muted);font-size:13px}
/* A person's own card order and hidden cards (Personal settings): every card
   becomes one item of Home's column, in their order. prefs.js sets
   --card-<key> (the position) and hide-<key> on #homeV2. */
#homeV2{--card-rings:1;--card-streak:2;--card-revenue:3;--card-needs:4;--card-today:5;--card-figures:6}
#homeV2.home-custom :is(.home-hero,.home-cols,.home-head){display:contents}
#homeV2.home-custom .home-head>div:first-child{order:0}
#homeV2.home-custom #dlRings{order:var(--card-rings)}
#homeV2.home-custom #jyHomeExtras{order:var(--card-streak)}
#homeV2.home-custom [data-home-card="revenue"]{order:var(--card-revenue)}
#homeV2.home-custom [data-home-card="needs"]{order:var(--card-needs)}
#homeV2.home-custom [data-home-card="today"]{order:var(--card-today)}
#homeV2.home-custom [data-home-card="figures"]{order:var(--card-figures)}
#homeV2.hide-rings #dlRings,#homeV2.hide-streak #jyHomeExtras,#homeV2.hide-revenue [data-home-card="revenue"],
#homeV2.hide-needs [data-home-card="needs"],#homeV2.hide-today [data-home-card="today"],#homeV2.hide-figures [data-home-card="figures"]{display:none}
#homeV2.home-custom .home-pace,#homeV2.home-custom .home-figs{border:1px solid var(--line);border-radius:12px;background:var(--surface-1)}
#homeV2.home-custom .home-fig:first-child{border-radius:12px 12px 0 0} #homeV2.home-custom .home-fig:last-child{border-radius:0 0 12px 12px}
@media (min-width:901px){
 #homeV2.home-custom .home-figs{flex-direction:row}
 #homeV2.home-custom .home-fig+.home-fig{border-top:0;border-left:1px solid var(--line)}
 #homeV2.home-custom .home-fig:first-child{border-radius:12px 0 0 12px} #homeV2.home-custom .home-fig:last-child{border-radius:0 12px 12px 0}
}
@media (max-width:900px){
 .home-hero,.home-cols{grid-template-columns:minmax(0,1fr)}
 .home-figs{border-left:0;border-top:1px solid var(--line)}
 .home-fig:first-child{border-top-right-radius:0} .home-fig:last-child{border-bottom-left-radius:12px}
 .home-big{font-size:32px} .home-chart svg{height:180px}
 .home-head h1{font-size:19px}
}

/* -------------------------------------------------------- record panel */
/* One panel for every record and every number (plan: Navigation). */
.record{position:fixed;inset:0;z-index:900;pointer-events:none}
.record-scrim{position:absolute;inset:0;background:rgba(8,12,10,.24);opacity:0;transition:opacity .2s}
.record-panel{position:absolute;top:8px;right:8px;bottom:8px;width:min(460px,calc(100% - 16px));background:var(--surface-3);border:1px solid var(--line);border-radius:12px;box-shadow:var(--float-shadow);transform:translateX(calc(100% + 16px));transition:transform .22s cubic-bezier(.3,.7,.2,1);display:flex;flex-direction:column}
.record.open{pointer-events:auto}
.record.open .record-scrim{opacity:1}
.record.open .record-panel{transform:none}
.record-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.record-kind{font-size:12px;color:var(--muted)}
.record-head h3{margin:1px 0 0;font-size:15px!important}
.record-x{width:30px;height:30px;border:0;background:none;border-radius:6px;display:grid;place-items:center;cursor:pointer}
.record-x:hover{background:var(--surface-hover)}
.record-x svg{width:14px;height:14px;stroke:var(--secondary-text);stroke-width:1.7;fill:none;stroke-linecap:round}
.record-body{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:20px}
.record-fig{font-size:36px;font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.record-body h4{margin:0 0 6px;font-size:12px!important;color:var(--muted);letter-spacing:0!important}
.record-body p{margin:0;max-width:58ch}
.record-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:0;font-size:13px}
.record-kv dt{color:var(--muted)} .record-kv dd{margin:0}
.record-go{align-self:flex-start}
@media (max-width:700px){.record-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-radius:16px 16px 0 0;transform:translateY(100%)}}

/* ------------------------------------------------ shell, over the old rail */
/* signal-overhaul.css painted a dark green rail in light mode with
   :root[data-theme="light"] rules; these outrank them by one element. */
:root[data-theme] body .sidebar{background:var(--sidebar-bg)!important;background-image:none!important;box-shadow:none!important;border-right:1px solid var(--line)!important}
:root[data-theme] body .sidebar .nav.sectioned{display:flex!important;flex-direction:column!important;gap:1px!important;flex:0 1 auto!important}
:root[data-theme] body .sidebar .brand{border-bottom:0!important}
:root[data-theme] body .sidebar .brand img{box-shadow:0 0 0 1px var(--line)!important;background:var(--surface-1)!important}
:root[data-theme] body .sidebar .brand-word{color:var(--text)!important}
:root[data-theme] body .sidebar .brand-sub{color:var(--muted)!important}




:root[data-theme] body .sidebar-collapse{color:var(--muted)!important;border-color:var(--line)!important;background:var(--surface-1)!important}
:root[data-theme] body .section-btn{color:var(--secondary-text)}
:root[data-theme] body .section-btn[aria-current="page"]{color:var(--text)}
:root[data-theme] body .section-label{color:var(--muted)}
:root[data-theme] body .topbar .btn{min-height:32px;font-size:var(--fs-sm)}

:root[data-theme] body .app{--sidebar:220px}
:root[data-theme] body .app.sidebar-collapsed{--sidebar:64px}
.sidebar-collapsed .section-btn span,.sidebar-collapsed .section-label{display:none}

/* Data sources move to Settings (plan: top bar and footers). */
.page-data-source{display:none!important}

/* Schedule no longer takes the menu away: the rail stays its normal width
   and names its sections. The page's own redesign comes in phase 4. */
@media(min-width:901px){
 :root[data-theme] body .app:has(#page-schedule.active){--sidebar:220px}
 :root[data-theme] body .app.sidebar-collapsed:has(#page-schedule.active){--sidebar:64px}
 :root[data-theme] body .main:has(#page-schedule.active){max-width:none!important}
 :root[data-theme] body .app:not(.sidebar-collapsed):has(#page-schedule.active) .brand>div{display:block!important}
 :root[data-theme] body .app:not(.sidebar-collapsed):has(#page-schedule.active) .sidebar{padding:14px 10px!important}
 :root[data-theme] body .app:not(.sidebar-collapsed):has(#page-schedule.active) .brand img{width:26px!important;height:26px!important}
 
}


:root[data-theme] #page-schedule #teamWeekSummary{color:var(--muted)!important}

:root[data-theme] #page-schedule{background:none!important}

/* Revenue: the forecast legend was white on the light card. */

/* ------------------------------------------------------------ phone chrome */
.mobile-office-banner{display:none!important}
@media (max-width:900px){
 :root[data-theme] body .mobile-dock{background:var(--surface-1)!important;box-shadow:none!important;border-top:1px solid var(--line)!important}
 :root[data-theme] body .mobile-dock button{font-weight:500!important;font-size:10.5px!important;color:var(--muted)!important}
 :root[data-theme] body .mobile-dock button .dock-icon{color:inherit!important;margin-bottom:2px}
 :root[data-theme] body .mobile-dock button .dock-icon svg{display:block;margin:0 auto}
 :root[data-theme] body .mobile-dock button.active{color:var(--text)!important}
 :root[data-theme] body .mobile-dock button.active:before{background:var(--text)!important}
}

/* ---------------------------------------------------------------- finance */
/* Money > Finance in the 2026 system: a plain title, underlined tabs, one
   calm status line, a short list of what needs attention, six figures. */
:root[data-theme] #page-finance .finance-command-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important}
:root[data-theme] #page-finance .finance-command-head h2{margin:0!important}
:root[data-theme] #page-finance .finance-command-head>div:last-child{display:flex;align-items:center;gap:10px;text-align:left!important}
:root[data-theme] #page-finance #financeRefresh{margin-top:0!important;}
:root[data-theme] #page-finance .finance-tabs{display:flex!important;gap:2px!important;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;margin:0 0 20px!important}
:root[data-theme] #page-finance .finance-tabs::-webkit-scrollbar{display:none}







/* ------------------------------------------------------------ page heads */
/* Every page opens the same way: its name, and nothing to read before the
   work. The eyebrow and the slogan under each title are gone; the section
   tabs and the top bar already say where you are. */
:root[data-theme] .page>.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px!important;padding:0!important;border:0!important;background:none!important;min-height:0!important}
:root[data-theme] .page>.page-head .eyebrow,
:root[data-theme] .page>.page-head>p.small,
:root[data-theme] .page>.page-head>div>p.small{display:none!important}
:root[data-theme] .page>.page-head h2{margin:0!important;}
:root[data-theme] .fleet-command-head-pro .eyebrow,
:root[data-theme] .collections-head .eyebrow,
:root[data-theme] .inventory-command-head .eyebrow{display:none!important}:root[data-theme] .inventory-command-head h2{font-size:22px!important}
/* Mini tiles everywhere: the number, its label, no box of its own. */
:root[data-theme] .mini{background:var(--surface-1)!important;border:1px solid var(--line)!important;box-shadow:none!important;border-radius:10px!important}
:root[data-theme] .mini .small,:root[data-theme] .mini span{text-transform:none!important;letter-spacing:0!important}
/* Filter bars: one quiet row. */
:root[data-theme] .collections-toolbar{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
:root[data-theme] .collections-toolbar .small{font-size:12px!important;color:var(--muted)!important;text-transform:none!important;letter-spacing:0!important}
/* Page-level tabs (marketing, economics, territory, warranty, inventory,
   collections, pipeline, settings): underlined, like the section tabs. */
:root[data-theme] .territory-tabs,:root[data-theme] #mktTabs,:root[data-theme] .warranty-tabs,:root[data-theme] .pipeline-tabs{margin:0 0 20px!important}


/* Pipeline's green brief band takes the page's surface. */





/* ---------------------------------------------------------------- dialogs */
.op-dialog{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px}
.op-dialog-scrim{position:absolute;inset:0;background:rgba(8,12,10,.32);opacity:0;transition:opacity .16s}
.op-dialog-card{position:relative;width:min(440px,100%);background:var(--surface-3);border:1px solid var(--line);border-radius:12px;box-shadow:var(--float-shadow);padding:20px;display:flex;flex-direction:column;gap:12px;transform:translateY(6px) scale(.98);opacity:0;transition:transform .16s,opacity .16s}
.op-dialog.open .op-dialog-scrim{opacity:1}
.op-dialog.open .op-dialog-card{transform:none;opacity:1}
.op-dialog-card h3{margin:0;font-size:16px!important;line-height:1.35}
.op-dialog-text{margin:0;color:var(--secondary-text);white-space:pre-line;font-size:13.5px;max-height:40vh;overflow:auto}
.op-dialog-input{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-1);color:var(--text);font:inherit}
.op-dialog-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.op-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.op-dialog .btn.danger{background:var(--critical)!important}

/* A heading with a definition behind it: tap it to read. */
:is(h1,h2,h3,h4,.eyebrow,.section-title,th,label>span,.small):has(> button.info[data-def],> button.info[data-defs]){cursor:help}
:is(h1,h2,h3,h4,.section-title):has(> button.info[data-def],> button.info[data-defs]):hover{text-decoration:underline dotted var(--border-strong);text-underline-offset:5px}

/* Top bar status: quiet text, only when something is actually behind. */
:root[data-theme] body .topbar .stale-pill{background:none!important;border:0!important;box-shadow:none!important;color:var(--muted)!important;font-weight:400!important;font-size:12px!important;padding:0 4px!important}
:root[data-theme] body .topbar #freshnessPill{display:none!important}
:root[data-theme] body .topbar{gap:12px;min-width:0}
:root[data-theme] body .topbar .company-lockup{min-width:0;flex:1 1 auto}
:root[data-theme] body .topbar .actions{flex:0 0 auto;flex-wrap:nowrap!important}
:root[data-theme] #page-finance #financeQboOverviewSummary{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:700px){:root[data-theme] #page-finance #financeQboOverviewSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Sentence case everywhere (Stripe / Linear register): the old sheets set
   small labels in spaced capitals -- NORMALIZED PROPERTIES, INBOUND ANSWER
   RATE -- on almost every tile and table head. */
body *:not(kbd):not(abbr){text-transform:none!important}
body :is(th,small,.small,.eyebrow,.badge,[class*="label"],[class*="kicker"],[class*="eyebrow"]){letter-spacing:0!important}

:root[data-theme] #page-revenue .fh-head .section-title::first-letter{text-transform:uppercase!important}

/* A name that opens its record. */
.record-link{color:inherit;text-decoration:none;cursor:pointer;border-bottom:1px solid var(--border-strong)}
.record-link:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* -------------------------------------------------------- side panels */
/* Every slide-in panel in the app wears the record panel's clothes: the
   raised surface, one hairline, the floating shadow, the same close button.
   Where each one opens from is unchanged. */
:root[data-theme] :is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.ray-chat-drawer){background:var(--surface-3)!important;border-left:1px solid var(--line)!important;color:var(--text)}
/* An open side panel floats and dims the page behind it; the scrim is the
   panel's own spread shadow, so every panel does it the same way wherever it
   sits in the page, and a closed panel (parked just off-screen) casts nothing
   -- its shadow used to reach back in as a dark strip down the right edge. A
   press on the dimmed page closes the panel (operator-shell.js). */
:root[data-theme] :is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.ray-chat-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro,.inventory-drawer):not(.open){box-shadow:none!important}
:root[data-theme] :is(.call-drawer,.finance-drawer,.warranty-drawer,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.territory-detail-drawer,.property-drawer-pro,.progression-drawer,.ray-chat-drawer,.collections-drawer,.sl-drawer,.stk-drawer,.fleet-drawer-pro,.inventory-drawer).open{box-shadow:var(--float-shadow),0 0 0 100vmax var(--scrim)!important}
/* The click-catching backdrops some panels bring stay, but clear: the panel
   draws the dim. Sheets and modals keep their own scrim. */
:root[data-theme] :is(.property-drawer-backdrop,.progression-drawer-backdrop,.work-list-backdrop){background:transparent!important;backdrop-filter:none!important}

:root[data-theme] :is(.overview-modal-backdrop,.mobile-sheet-backdrop){background:var(--scrim)!important;backdrop-filter:none!important}
:root[data-theme] .modal-card{background:var(--surface-3)!important;border:1px solid var(--line)!important;border-radius:12px!important}
:root[data-theme] .drawer-tabs,:root[data-theme] .property-drawer-tabs-pro{border-bottom:1px solid var(--line)!important;background:none!important}

/* ------------------------------------------------------- customers: properties */
:root[data-theme] #page-properties .property-tabs-pro{display:flex!important;gap:2px!important;overflow-x:auto;scrollbar-width:none;border:0!important;border-bottom:1px solid var(--line)!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;margin:0 0 16px!important}

:root[data-theme] #page-properties .property-tab-pro:hover{color:var(--text)!important}



/* ------------------------------------------------------------ customers: calls */
:root[data-theme] #page-calls .call-controls{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(160px,1.4fr) auto!important;gap:8px!important;align-items:end}







@media (max-width:1100px){
 :root[data-theme] #page-calls .call-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 
 
}

/* ----------------------------------------------------------- sales: warranty */


/* The indicator drawer sits outside every page, but its rule ships with the
   Market conditions bundle; until that page had been opened, the closed
   drawer stood in the page flow ("Indicator detail — Close") on Home and
   Finance. Its resting state lives here, where it always loads. */
.econ-drawer{position:fixed;right:0;top:0;width:min(560px,96vw);height:100vh;transform:translateX(105%);visibility:hidden;overflow:auto;z-index:130;transition:transform .22s cubic-bezier(.3,.7,.2,1),visibility 0s linear .22s}
.econ-drawer.open{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.3,.7,.2,1)}
/* Fleet's tabs, like every other page's. */
:root[data-theme] #page-fleet .fleet-tabs-pro{display:flex!important;gap:2px!important;overflow-x:auto;scrollbar-width:none;border:0!important;border-bottom:1px solid var(--line)!important;background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important;margin:0 0 16px!important}
:root[data-theme] #page-fleet .fleet-tabs-pro button{flex:0 0 auto!important;min-width:0!important;width:auto!important}
:root[data-theme] #page-fleet .fleet-tabs-pro button:hover{color:var(--text)!important}

/* Section eyebrows that only repeat the heading under them. */
:root[data-theme] #page-testing .section-head .eyebrow,
:root[data-theme] .fleet-command-head-pro .eyebrow{display:none!important}

/* ---- Pass 3: titles one size; dense cards that said too much too loudly ---- */

:root[data-theme] body .page .page-head h2 button.info{font-size:11px}
/* Market conditions: name, value, three changes; the source line only on the card's detail. */
:root[data-theme] body #page-economics .section-head p.small{display:none}
/* Collections: three lines of the story; the rest on request. */
:root[data-theme] body #collectionNarrative{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;max-width:72ch}
:root[data-theme] body #collectionNarrative.open{display:block}
/* Settings: words, not glyphs. */

:root[data-theme] body #page-settings .section-head .eyebrow{display:none}
/* Rules revived when the stylesheet's unclosed comment was closed: keep their
   layout, drop their decoration -- one surface, one border, no glow. */





:root[data-theme] body #pipelineNeedsCard,:root[data-theme] body #customerJourneyCard,:root[data-theme] body #pipelineRequestsCard{border-radius:12px!important;box-shadow:none!important}
@media(min-width:901px){
:root[data-theme] body .pipeline-tabs{position:static!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:0!important;background:none!important;display:flex!important;gap:20px!important}
:root[data-theme] body .pipeline-tabs button{flex:none!important;}
:root[data-theme] body .pipeline-tabs button.active{color:var(--text)!important;border-bottom-color:var(--text)!important}
}

:root[data-theme] body .route-opportunity-card{border-radius:10px!important}
:root[data-theme] body .finance-command-head h2,:root[data-theme] body .inventory-command-head h2{}
/* Phone: the new Home has no header of its own, so the brand bar stays. */
@media(max-width:900px){
 :root[data-theme] body .mobile-brandbar.is-home{background:var(--bg)!important;border-bottom-color:var(--line)!important;pointer-events:auto!important}
 :root[data-theme] body .mobile-brandbar.is-home .mobile-brandbar-title,:root[data-theme] body .mobile-brandbar.is-home .mobile-menu-btn{display:revert!important}
 :root[data-theme] body .mobile-brandbar.is-home .mobile-menu-btn{display:inline-flex!important}
 :root[data-theme] body .finance-command-head,:root[data-theme] body .inventory-command-head{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;text-align:left!important;gap:8px 12px!important}
 :root[data-theme] body .finance-command-head>*,:root[data-theme] body .inventory-command-head>*{text-align:left!important;margin-left:0!important}
 :root[data-theme] body .finance-command-head h2,:root[data-theme] body .inventory-command-head h2{width:100%;text-align:left!important}
}

/* Section tabs inside a page: one weight, one size, everywhere. */


.home-ai-mark{display:grid;place-items:center;width:16px;height:16px;font-size:12px;color:var(--accent)}
.home-ai .home-t b{font-weight:500}
.record-list{margin:0;padding-left:18px;display:grid;gap:8px;font-size:13.5px;line-height:1.5;color:var(--text)}
/* A figure that explains itself looks tappable. */
.page [data-explains="1"]{cursor:pointer}
.page [data-explains="1"]:hover>:first-child{color:var(--text);text-decoration:underline dotted;text-underline-offset:3px}
/* Finance > Job profit: typical cost per job type, and estimates set apart. */
.job-standards{display:grid;gap:6px;max-width:560px}
.job-standards-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;align-items:center;font-size:13.5px}
.job-standards-row.head{font-size:12px;color:var(--muted)}
.job-standards-row input{min-height:34px}
.estimate{color:var(--secondary-text);font-style:normal;border-bottom:1px dotted var(--muted);cursor:help}

/* A quote under the price floor. */
.ray-pricing-detail.pricing-floor-warn{color:var(--critical);font-weight:600}

/* Follow-ups */

.exp-soon td{color:var(--critical)}


/* Every window: Close at the top right, the same everywhere. */
.panel-close{float:right;order:99;margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.pc-head-top{display:flex;align-items:flex-start;gap:12px}
/* Property record: a group's parts one under another. */
.pc-group-section+.pc-group-section{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
.pc-group-title{font-size:14px;margin:0 0 8px}
/* Lead and quote window: one line of facts, folded extras. */
.drawer-facts{margin:12px 0 0;color:var(--muted);font-size:13px}
.drawer-more{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px}
.drawer-more>summary{cursor:pointer;font-weight:600}

/* Lead facts and call outcome, in the lead / quote drawer */
.lead-facts{margin-top:4px}
.lead-facts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 12px;margin-top:6px}
.lead-facts-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.lead-facts-grid label.wide{grid-column:1/-1}

.call-outcome{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px}
.call-outcome .row-actions{flex-wrap:wrap;margin-top:6px}
.call-outcome-later{display:flex;gap:8px;margin-top:8px}

/* Automatic follow-ups (Settings) */
.followup-template{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.followup-template textarea,.followup-template input{width:100%;font-size:13px}
/* One on/off switch for every setting that takes effect the moment it is
   flipped. A .switch-row label holds the checkbox (role=switch, with an
   aria-label), then a .switch-track and a .switch-state span, both
   aria-hidden; operator-shell.js upgradeSwitches() adds the two spans to any
   older .switch-row that only has the input. The real checkbox sits invisibly over the track, so it keeps keyboard,
   screen-reader and form behaviour; the track and the single word beside it
   are drawn from its :checked state, so a value set from code shows too.
   OFF: grey track, knob left, "Off". ON: filled green track, knob right, "On". */
:root[data-theme] body .switch-row{position:relative;display:inline-flex!important;flex-direction:row!important;align-items:center;gap:10px;min-height:44px;margin:0;font-size:13px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
:root[data-theme] body .switch-row>input[type=checkbox]{position:absolute!important;left:0;top:0;width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;opacity:0!important;cursor:pointer;z-index:1;appearance:auto;-webkit-appearance:auto}
:root[data-theme] body .switch-row>input[type=checkbox]:disabled{cursor:not-allowed}
:root[data-theme] body .switch-row .switch-track{position:relative;flex:0 0 40px;width:40px;height:24px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface-2);transition:background .18s ease,border-color .18s ease;box-sizing:border-box}
:root[data-theme] body .switch-row .switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);box-shadow:0 1px 2px rgba(var(--ink),.25);transition:transform .18s ease,background .18s ease}
:root[data-theme] body .switch-row>input:checked~.switch-track{background:var(--positive);border-color:var(--positive)}
:root[data-theme] body .switch-row>input:checked~.switch-track::after{transform:translateX(16px);background:var(--surface-1)}
:root[data-theme] body .switch-row>input:focus-visible~.switch-track{outline:2px solid var(--accent-line);outline-offset:2px}
:root[data-theme] body .switch-row>input:disabled~.switch-track,:root[data-theme] body .switch-row>input:disabled~.switch-state{opacity:.45}
:root[data-theme] body .switch-row>.switch-state{display:inline-block;min-width:24px;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;line-height:1}
:root[data-theme] body .switch-row>.switch-state::after{content:"Off"}
:root[data-theme] body .switch-row>input:checked~.switch-state{color:var(--positive)!important}
:root[data-theme] body .switch-row>input:checked~.switch-state::after{content:"On"}
:root[data-theme] body .switch-row>.switch-text{font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important}
.switch-reason{margin:2px 0 0;color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){:root[data-theme] body .switch-row .switch-track,:root[data-theme] body .switch-row .switch-track::after{transition:none}}

/* ---------------------------------------------------------------- Messages */
/* Desktop: the card fills the space under the top bar exactly (top bar,
   section tabs and page padding are measured, not guessed). */
.msg-app{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);height:calc(100dvh - var(--msg-chrome,128px));min-height:480px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1);overflow:hidden}
.msg-list-pane{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.msg-list-head{padding:12px 16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}
.msg-list-head input{width:100%;}
.msg-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.msg-filters button{flex:0 0 auto;}

.msg-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;line-height:1}
.msg-count:empty{display:none}
.msg-filters button.active .msg-count{background:var(--surface-1);color:var(--accent)}
.msg-banner{font-size:12.5px;line-height:1.4;color:var(--secondary-text);background:var(--surface-2);border-radius:var(--radius-md);padding:8px 10px}
.msg-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.msg-list-foot{padding:12px 16px 16px;font-size:var(--fs-sm);color:var(--muted);text-align:center}
.msg-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:12px 16px;cursor:pointer;min-height:64px;transition:background var(--dur-1) var(--ease)}
.msg-row:hover{background:var(--surface-hover)}
.msg-row.active{background:var(--accent-wash)}
.msg-avatar{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:var(--fs-sm);background:var(--surface-2);color:var(--secondary-text)}
.msg-row.active .msg-avatar{background:var(--surface-1);color:var(--accent)}
.msg-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.msg-row-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.msg-row-top b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row-top time{flex:0 0 auto;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums}
.msg-row-preview{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);min-width:0}
.msg-row-preview>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.msg-row-preview svg{flex:0 0 auto}
.msg-row.unread .msg-row-top b{font-weight:600}
.msg-row.unread .msg-row-preview{color:var(--text)}
.msg-row.missed .msg-row-preview svg{color:var(--critical)}
.msg-dot{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--text);color:var(--bg);font-size:var(--fs-xs);font-style:normal;font-weight:600;display:grid;place-items:center}
.msg-nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--text);color:var(--bg);font-size:var(--fs-xs);font-weight:600;display:inline-grid;place-items:center;line-height:1}
#mobileMsgBtn{position:relative}
#mobileMsgBtn .msg-nav-badge{position:absolute;top:2px;right:0;margin:0;min-width:16px;height:16px;font-size:10px}
.msg-skel{display:flex;flex-direction:column}
.msg-skel i{display:block;height:64px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hover) 50%,var(--surface-2) 75%);background-size:250% 100%;animation:skeletonSweep 1.4s ease-in-out infinite}
.msg-skel-thread{gap:12px;padding:8px 0}
.msg-skel-thread i{height:40px;width:60%;border:0;border-radius:18px}
.msg-skel-thread i:nth-child(2){align-self:flex-end;width:45%}
.msg-thread-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--bg)}
.msg-thread-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-1);min-height:64px}
.msg-back{display:none;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--accent);place-items:center;cursor:pointer;padding:0}
.msg-who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.msg-name{max-width:100%;border:0;background:transparent;padding:0;font:inherit;font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;color:var(--text);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.msg-name:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px}
.msg-name:disabled{cursor:default;opacity:1}
.msg-who>span{max-width:100%;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-who>span a{color:inherit;text-decoration:none}
.msg-call{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.msg-call svg{width:16px;height:16px}
.msg-thread-pane.empty .msg-call,.msg-thread-pane.empty .msg-compose,.msg-thread-pane.empty .msg-setup{display:none!important}
.msg-thread-pane.empty .msg-thread-head{display:none}
.msg-thread-pane.empty .msg-scroll{justify-content:center}
.msg-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 8px;display:flex;flex-direction:column;gap:6px}
.msg-day{text-align:center;margin:12px 0 4px}
.msg-day span{font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.msg-bubble{max-width:min(78%,520px);padding:8px 12px 6px;border-radius:18px;line-height:1.4;font-size:15px;word-wrap:break-word;overflow-wrap:anywhere}
.msg-bubble.in{align-self:flex-start;background:var(--surface-1);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg-bubble.out{align-self:flex-end;background:var(--accent-wash);color:var(--text);border:1px solid var(--accent-line);border-bottom-right-radius:6px}
.msg-bubble.email{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.msg-bubble.failed{background:var(--critical-wash);color:var(--text);border:1px solid var(--critical)}
.msg-text{white-space:pre-wrap}
.msg-meta{font-size:11px;opacity:.75;margin-top:3px;text-align:right}
.msg-email-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}
.msg-event{align-self:center;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:100%;font-size:var(--fs-sm);color:var(--secondary-text);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-md);padding:6px 12px;margin:4px 0;text-align:center}
.msg-event svg{color:var(--muted)}
.msg-event time{color:var(--muted)}
.msg-event.missed{color:var(--critical)}
.msg-event.missed svg{color:var(--critical)}
.msg-note{color:var(--muted);font-size:var(--fs-md);text-align:center;padding:32px 16px}
.msg-note .btn{margin-top:12px}
.msg-setup{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-1);font-size:var(--fs-md);color:var(--secondary-text)}
.msg-setup .btn{flex:0 0 auto}
.msg-compose{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-top:1px solid var(--line);background:var(--surface-1)}
.msg-compose select{align-self:flex-start;font-size:12.5px;border:0;background:transparent;color:var(--muted);padding:2px 0}
.msg-line-text{font-size:12.5px;color:var(--muted);padding:0 4px}
.msg-compose-row{display:flex;align-items:flex-end;gap:8px}
.msg-compose textarea{flex:1;resize:none;font:inherit;font-size:16px;line-height:1.35;padding:9px 14px;border-radius:20px;max-height:140px}
/* The send button is the primary button (.btn.primary), drawn round. */
.msg-send{flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;display:grid;place-items:center}
@media(max-width:900px){.msg-send{flex-basis:44px;width:44px;height:44px}}
.msg-sheet{position:fixed;inset:0;z-index:320;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.msg-sheet-card{width:min(520px,100%);background:var(--surface-1);border-radius:16px 16px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--float-shadow)}
.msg-sheet-card p{color:var(--secondary-text);font-size:var(--fs-md);line-height:1.5}
.msg-sheet-actions{display:flex;gap:10px;justify-content:flex-end}
@media (max-width:900px){
 #page-messages .msg-app{display:block;height:auto;min-height:0;border:0;border-radius:0;background:transparent}
 #page-messages .msg-list-pane{border-right:0}
 #page-messages .msg-list-head{position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 0 10px}
 
 #page-messages .msg-row{padding:12px 4px}
 #page-messages .msg-list{padding-bottom:16px}
 #page-messages .msg-thread-pane{display:none}
 #page-messages .msg-back{display:grid}
 #page-messages .msg-thread-head{padding:6px 10px 6px 4px;padding-top:calc(6px + env(safe-area-inset-top))}
 #page-messages .msg-compose,#page-messages .msg-setup{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
 #page-messages .msg-bubble{max-width:84%}
 /* The open conversation is a screen of its own. The page section loses its
    entrance animation (which made it a stacking context, so the top bar and
    dock painted over the thread), and the app chrome steps aside. */
 body.msg-thread-open #page-messages{animation:none!important;transform:none!important;opacity:1!important}
 body.msg-thread-open #page-messages .msg-thread-pane.open{display:flex;position:fixed;left:0;right:0;top:var(--msg-vv-top,0px);height:var(--msg-vh,100dvh);z-index:300}
 body.msg-thread-open .mobile-brandbar,body.msg-thread-open .mobile-dock,body.msg-thread-open #mobileFab,body.msg-thread-open .mobile-fab-dial{display:none!important}
 body.msg-thread-open{overflow:hidden}
}
/* Messages has its own actions; the floating Create button only covered
   the list times and, with a conversation open, the composer. */
body[data-page="messages"] #mobileFab{display:none!important}

/* ------------------------------------------------------- shared buttons */
/* A primary button in an action row is the ordinary primary button. An
   older rule (removed from index.html) painted it light grey with the page
   colour for text -- white on near-white, so the main action of every row
   was the one you could not read. */

/* Disabled looks disabled, primary or not. */
:root[data-theme] body .btn:disabled,:root[data-theme] body .btn[aria-disabled="true"]{opacity:.45!important;cursor:not-allowed!important;filter:none}
/* Server setup instructions, folded away under one plain status line. */
.dev-details{margin-top:6px;font-size:12px;color:var(--muted);font-weight:400}
.dev-details>summary{cursor:pointer;width:fit-content}
.dev-details[open]{word-break:break-word}

/* ------------------------------------------------- closed side panels */
/* No closed panel may be wider than the phone. (Shadows only while open:
   see "side panels".) */
@media (max-width:900px){.call-drawer,.finance-drawer,.warranty-drawer,.collections-drawer,.territory-detail-drawer,.inventory-drawer,.property-drawer-pro,.fleet-drawer-pro,.econ-drawer,.revenue-quality-drawer,.pipeline-quality-drawer,.ray-chat-drawer{max-width:100vw}}
.access-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,170px) auto;gap:10px;width:100%}
@media (max-width:700px){.access-invite{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){:root[data-theme] body #mobileMsgBtn.active{background:var(--surface-1);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}}
.toast{display:flex!important;align-items:center;gap:10px;font-size:13px!important;max-width:min(420px,calc(100vw - 32px))}
.toast.is-error{border-color:var(--critical)!important;background:var(--surface-1)!important;box-shadow:inset 3px 0 0 var(--critical)!important}
.toast-x{border:0;background:none;color:var(--muted);cursor:pointer;min-width:32px;min-height:32px;font-size:13px}
.toast.show{pointer-events:auto}
/* Data accuracy: labels wrap (they were cut mid-word and ran off a phone);
   passing and not-run checks fold into one line each. */
:root[data-theme] body .recon-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
.recon-fold{border:0;border-radius:0;margin:0;background:none}
.recon-fold>summary{cursor:pointer;padding:12px var(--card-pad);font-size:var(--fs-md);color:var(--secondary-text);list-style-position:inside}
.recon-fold[open]>summary{border-bottom:1px solid var(--line)}
.recon-allclear{padding:14px var(--card-pad);font-size:var(--fs-md);color:var(--secondary-text)}
@media (max-width:700px){:root[data-theme] body .recon-row summary{flex-wrap:wrap}}
.setting-input{width:240px;max-width:100%}
.setting-input{width:240px;max-width:100%}
/* A number with its unit beside it (Settings > Radiation safety). */
.unit-input{display:inline-flex;align-items:center;gap:8px;flex:none}
.unit-input input{width:96px}
.unit-input>span{font-size:13px;color:var(--secondary-text)}
.radiation-save{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.exp-empty{padding:16px 0;color:var(--muted);font-size:13.5px}
/* A number with its unit beside it (Settings > Radiation safety). */
.unit-input{display:inline-flex;align-items:center;gap:8px;flex:none}
.unit-input input{width:96px}
.unit-input>span{font-size:13px;color:var(--secondary-text)}
.radiation-save{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.exp-empty{padding:16px 0;color:var(--muted);font-size:13.5px}
/* Settings > AI and automation */
.followup-tools{display:flex;flex-direction:column;gap:12px;padding:10px 0 4px}
.followup-tool{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.followup-tool>.small{flex:0 0 150px}
.followup-tool select,.followup-tool input{flex:1 1 200px;max-width:280px}
#ipqsCard.is-not-connected #ipqsSummaryGrid,#ipqsCard.is-not-connected #ipqsSummaryGrid~*{display:none}
.ipqs-note{margin:8px 0 0}
/* Settings > Diagnostics: three lines for the owner, tools folded below. */
.health-lines{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:10px 16px;margin:4px 0 0;font-size:14px}
.health-lines dt{color:var(--muted)} .health-lines dd{margin:0}
.dev-tools{margin-top:var(--s2,16px)}
.dev-tools>summary{cursor:pointer;padding:12px 4px;font-size:14px;color:var(--secondary-text);width:fit-content}
.dev-tools>.card{margin-top:12px}
:root[data-theme] body .switch-row>.switch-text{white-space:nowrap}
/* Phone: every window's Close is a full-size target (it was 30px tall). */
@media (max-width:900px){:root[data-theme] body .panel-close.btn{min-height:36px;min-width:64px;display:inline-flex;align-items:center;justify-content:center}}




/* Drawers lifted to <body> (liftOverlay in core.js) sit above the sticky top
   bar and the phone dock; the toast sits above them so a drawer's own
   confirmations are seen. */
:root{--z-drawer:240}
.lifted-overlay{z-index:var(--z-drawer)!important}
.lifted-overlay.progression-drawer-backdrop{z-index:calc(var(--z-drawer) - 1)!important}
:root .toast{z-index:calc(var(--z-drawer) + 10)}
/* Properties filter row: six fields on one line at desktop width. The search
   box spanned two tracks, which pushed Sort onto a line of its own. */

/* Phone: the saved-view chips and the property drawer's group tabs wrap
   instead of running off the right edge with nothing to say there is more. */
@media(max-width:640px){
 #propertyDrawerTabsPro{flex-wrap:wrap;overflow:visible}
}
/* Warranty review on a phone: each candidate is a card with its facts stacked
   under their labels, and the decision buttons in one full-width row. */
@media(max-width:640px){
 #warrantyCandidateTable td{display:block!important;text-align:left!important;height:auto!important;max-height:none!important;overflow:visible!important;white-space:normal!important}
 #warrantyCandidateTable tr{height:auto!important;max-height:none!important}
 #warrantyCandidateTable td:before{display:block;margin-bottom:4px}
 #warrantyCandidateTable .warranty-candidate-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #warrantyCandidateTable .warranty-candidate-actions .btn{min-height:44px}
}
/* Designer: the controls column grows with its steps so Generate and Save
   are on the page, not at the bottom of a fixed-height inner scroller. */
/* The three steps are sections of one card, divided by hairlines; the
   photo slots are rows, not boxes. */
/* The quote drawer sits above the phone dock, like the other drawers. */

/* ---- Money / Marketing / Stock ------------------------------------------ */
/* Closed side drawers sat just off-screen with their shadow still reaching
   back into the page, shading the right edge of every Money and Stock screen. */
.collections-drawer:not(.open),.finance-drawer:not(.open),.inventory-drawer:not(.open){visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
.collections-drawer.open,.finance-drawer.open,.inventory-drawer.open{visibility:visible;transition:transform .3s ease,visibility 0s}
.mkt-chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
.mkt-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.mkt-chart-legend i{width:14px;height:3px;border-radius:2px;display:inline-block}
#page-inventory .nowrap{white-space:nowrap}
/* Phone: the bottom dock sits over the last 64px of a drawer; leave room so
   Save and Add are reachable. */
@media(max-width:700px){.inventory-drawer,.collections-drawer,.finance-drawer{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important;max-width:100vw}}
/* Revenue workspaces: the grid track was sized to its widest table, which
   made the Audit tab 1,914px wide on a phone. Tracks shrink; tables scroll. */
#page-revenue .revenue-workspace,#page-revenue #revenueReconciliation{grid-template-columns:minmax(0,1fr)}
#page-revenue .revenue-workspace>*,#page-revenue #revenueReconciliation>*{min-width:0}
#page-revenue .nowrap{white-space:nowrap}
/* Until page-revenue.js has sorted the cards into tabs, show only the heading. */
#page-revenue:not(.is-built)>:not(.page-head){visibility:hidden}
/* Money: the one-line folds that stand in for empty sections. */
.money-owed-why{margin-top:var(--s2)}
.money-quiet{align-items:center;margin-bottom:var(--s2)}
/* Marketing budget slider: the value on its own line above a full-width
   track, the limits under it. It sat in one row that ran 55px off a phone,
   inside a bordered box that made the slider look like a text field. */
#page-marketing .mkt-slider-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"value value value" "range range range" "min . max";gap:4px 8px;align-items:center}
#page-marketing .mkt-slider-row>span:first-child{grid-area:min;font-size:12px;color:var(--muted)}
#page-marketing .mkt-slider-row>input[type=range]{grid-area:range;width:100%;min-width:0}
#page-marketing .mkt-slider-row>span:nth-of-type(2){grid-area:max;font-size:12px;color:var(--muted);text-align:right}
#page-marketing .mkt-slider-row>strong{grid-area:value;text-align:left!important;min-width:0!important;font-size:20px}
#page-marketing input[type=range]{-webkit-appearance:auto;appearance:auto;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:28px;accent-color:var(--text)}
@media(max-width:700px){
 #page-revenue .cash-collection-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important}
 #page-revenue .cash-collection-grid>*{flex:none!important;min-width:0}
}
.paytype-donut-center{display:flex!important;flex-direction:column;align-items:center;justify-content:center}
/* Finance › Job profit */
#page-finance .finance-setup-steps{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--warning);border-radius:var(--radius-md);background:var(--surface-1);font-size:13px}
#page-finance .finance-setup-steps ol{margin:6px 0 0;padding-left:20px;color:var(--secondary-text)}
#page-finance .finance-setup-steps li.done{color:var(--muted)}
#page-finance .finance-setup-steps a{color:var(--text);text-decoration:underline}
#page-finance .finance-customer-cell{min-width:160px}
#page-finance .nowrap{white-space:nowrap}
#page-inventory .table-wrap{max-height:none!important}
/* Job templates: Duplicate and Archive appear once a template is chosen;
   column heads at the app's normal table size. */
#page-inventory #templateDuplicate:disabled,#page-inventory #templateArchive:disabled{display:none}
/* Territory: the rankings table grows with the page (it was a 638px box
   inside a scrolling page, hiding rows and columns). */
#page-territory .table-wrap{max-height:none!important}
#page-marketing details.mkt-tech{margin-top:6px}
#page-marketing details.mkt-tech>summary{cursor:pointer;font-size:12px;color:var(--muted)}
#page-marketing details.mkt-tech code{overflow-wrap:anywhere}
#page-economics a{color:var(--text);text-decoration:underline}
#page-marketing .btn{white-space:nowrap}
#page-economics details.econ-tech,#econDrawer details.econ-tech{margin-top:6px;font-size:12px;color:var(--muted)}
#page-economics details.econ-tech>summary,#econDrawer details.econ-tech>summary{cursor:pointer}
/* A disabled button looks disabled on the Money, Marketing and Stock pages
   (later button rules had restored full opacity). */
:is(#page-revenue,#page-finance,#page-marketing,#page-inventory,#page-economics,#page-territory) .btn:disabled{opacity:.45!important;cursor:not-allowed!important;box-shadow:none!important}
/* Money owed account drawer on phone: long emails wrap; drawer tabs scroll
   on one line. */
.collections-drawer .detail strong,.collections-drawer .detail span{overflow-wrap:anywhere}
.collections-drawer-tabs{flex-wrap:nowrap!important;overflow-x:auto}
.collections-drawer-tabs button{white-space:nowrap;flex:0 0 auto}

/* ------------------------------------------------------------------
   Schedule (page-schedule.js). One calendar and one "To book" rail.
   Technician colour comes in as --tech (one of --route-1..5).
   Only the page chrome is here, so the header does not jump while the
   bundle loads; the calendar, rail rows, booking drawer and stop sheet are
   styled from page-schedule.js (SCHED_CSS).
   ------------------------------------------------------------------ */
#page-schedule{--sched-gutter:56px}
.sched-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-4)}
.sched-title p{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted)}
.sched-tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sched-nav{display:inline-flex;height:var(--ctl-md);border:1px solid var(--border-strong);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-1)}
.sched-nav button{min-width:34px;padding:0 12px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:var(--fs-md);font-weight:500;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.sched-nav button:last-child{border-right:0}
.sched-nav button:hover{background:var(--surface-hover)}
.sched-nav #schedPrev,.sched-nav #schedNext{font-size:17px;line-height:1;color:var(--secondary-text)}
.sched-nav #schedToday.is-current{color:var(--muted)}
.sched-rail-toggle{display:none}
.sched-rail-toggle span,.sched-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums;vertical-align:1px}
.sched-strip{display:none}
.sched-techs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--sp-4)}
.sched-tech:not(.is-on) .sched-dot{opacity:.35}
.sched-tech-more{border-style:dashed}
.sched-dot{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--tech,var(--muted))}
.sched-notice{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--warning);border-radius:var(--radius-md);background:var(--surface-1);color:var(--secondary-text);font-size:var(--fs-sm)}
.sched-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--stack-gap);align-items:start}
.sched-main{min-width:0;padding:0;overflow:hidden}
.sched-main[aria-busy="true"]{opacity:.7;transition:opacity var(--dur-2)}
.sched-error .btn{margin-left:8px}
/* rail: "To book" and "Needs attention" are hairline rows in one card */
.sched-rail{position:sticky;top:var(--sp-4);display:grid;align-content:start;max-height:calc(100vh - 120px);overflow:auto}
.sched-rail-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 var(--sp-3)}
.sched-rail-head h3{margin:0;font-size:var(--fs-lg);font-weight:500}
.sched-rail-close{display:none}
.sched-ready .row-item{padding-top:10px;padding-bottom:10px}
.sched-ready .row-item-meta{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sched-ready .row-item.is-held .row-item-title{color:var(--secondary-text)}
.sched-attention .card-section{margin-top:0}
.sched-attention .card-section-title{display:flex;align-items:center;gap:2px}
.sched-attention .row-list{margin-bottom:0}
.sched-attention .card-section:last-child .row-list{margin-bottom:calc(-1 * var(--card-pad))}
/* A double-booking, said in words wherever the stop is shown. */
.sched-clash{display:block;color:var(--warning);font-size:var(--fs-xs);font-weight:500;line-height:15px}
.pc-stop{display:grid;gap:2px;margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-sm)}
.pc-stop .sched-clash{font-size:var(--fs-sm)}
/* In Week and Day the To book rail goes under the calendar so the day lists
   and technician columns get the width; the header's To book button jumps
   down to it. */
#page-schedule.sched-is-wide .sched-layout{grid-template-columns:minmax(0,1fr)}
#page-schedule.sched-is-wide .sched-rail{position:static;max-height:none;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 var(--stack-gap)}
#page-schedule.sched-is-wide .sched-rail-head{grid-column:1/-1}
@media (min-width:901px){#page-schedule.sched-is-wide .sched-rail-toggle{display:inline-flex;align-items:center}}
@media (max-width:1100px){#page-schedule.sched-is-wide .sched-rail{grid-template-columns:minmax(0,1fr)}}

@media (max-width:1100px){
 .sched-layout{grid-template-columns:minmax(0,1fr)}
 .sched-rail{position:static;max-height:none}
}
@media (max-width:900px){
 #page-schedule{--sched-gutter:44px}
 .sched-head{align-items:stretch;gap:10px;margin-bottom:var(--sp-3)}
 .sched-title h2{display:none}
 .sched-title p{font-size:var(--fs-lg);font-weight:500;color:var(--text)}
 .sched-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
 .sched-seg{width:100%}
 .sched-seg button{flex:1}
 .sched-nav{height:44px}
 .sched-nav button{min-width:44px}
 .sched-rail-toggle,#scheduleCreateButton{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
 .sched-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:0 0 var(--sp-3)}
 .sched-sday{display:grid;justify-items:center;gap:2px;min-height:58px;padding:6px 0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--text);font:inherit;cursor:pointer}
 .sched-sday span{color:var(--muted);font-size:var(--fs-xs);font-weight:500}
 .sched-sday b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
 .sched-sday i{width:4px;height:4px;border-radius:50%;background:var(--muted)}
 .sched-sday i.is-empty{background:transparent}
 .sched-sday.is-today b{color:var(--accent)}
 .sched-sday.is-on b{background:var(--text);color:var(--bg)}
 .sched-techs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;margin-bottom:var(--sp-3);scrollbar-width:none}
 .sched-tech{flex:0 0 auto}
 .sched-rail{display:none}
 body.sched-rail-open .sched-rail{display:grid}
 body.sched-rail-open .sched-main,body.sched-rail-open .sched-techs,body.sched-rail-open .sched-strip{display:none}
 .sched-rail-close{display:inline-flex}
}

/* ------------------------------------------------------------------
   Fleet: four tabs, one header line, tiles only when there is driving.
   ------------------------------------------------------------------ */
#page-fleet .fleet-command-head-pro{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-1);padding:0;border:0}
#page-fleet .fleet-command-head-pro h2{margin:0}
/* Summary and the route check share the subtitle line; the two filters sit
   on the right with their labels above, bottoms on the subtitle's baseline. */
.fleet-sub-pro{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:2px}
.fleet-sub-pro p{margin:0;font-size:var(--fs-md);color:var(--muted)}
.fleet-recon-pro{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.fleet-recon-pro.ok{background:var(--positive-wash);color:var(--positive)}
.fleet-recon-pro.is-warn{background:var(--warning-wash);color:var(--warning)}
.fleet-head-tools-pro{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.fleet-period-pro{display:grid;gap:6px;min-width:150px;font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
#fleetReadinessPro:empty{display:none}
.fleet-routes-layout-pro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--stack-gap);align-items:start}
.fleet-routes-layout-pro .card,#fleetTabVehiclesPro .card,#fleetTabCostsPro .card{min-width:0}
/* Routes are hairline rows in their card, the driver's colour as a dot. */
#page-fleet .fleet-route-card-pro{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--sp-2);align-items:center;width:calc(100% + 2 * var(--card-pad));margin:0 calc(-1 * var(--card-pad));padding:var(--sp-3) var(--card-pad);border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
#page-fleet .fleet-route-card-pro:last-child{margin-bottom:calc(-1 * var(--card-pad))}
#page-fleet .fleet-route-card-pro:hover{background:var(--surface-hover)}
#page-fleet .fleet-route-card-pro strong{display:flex;align-items:center;gap:7px;font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums}
#page-fleet .fleet-route-card-pro span{display:block;color:var(--muted);font-size:var(--fs-sm)}
.fleet-quality-row-pro{display:flex;justify-content:space-between;gap:var(--sp-3);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-md)}
/* A driver's licence that needs a look, beside the van they drive. */
.fleet-licence-pill{margin-left:var(--sp-2)}
.fleet-quality-row-pro .pill{flex:0 0 auto}
@media (max-width:900px){.fleet-licence-pill{display:flex;width:max-content;margin:4px 0 0}}
.fleet-quality-row-pro strong{font-weight:500;font-variant-numeric:tabular-nums}
.fleet-quality-row-pro strong.warn{color:var(--warning)}
#fleetActualCostsPro .fig-strip{margin-bottom:calc(-1 * var(--card-pad))}
#radiationSummaryGrid{margin-top:var(--stack-gap)}
.fleet-scorecard-pro summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none}
.fleet-scorecard-pro summary::-webkit-details-marker{display:none}
.fleet-scorecard-pro summary h3{margin:0;font-size:var(--fs-lg);font-weight:500}
.fleet-scorecard-pro summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-2) var(--ease)}
.fleet-scorecard-pro[open] summary::after{transform:rotate(225deg) translateY(-2px)}
#page-fleet .fleet-map-pro svg{width:100%;height:auto}
#page-fleet .fleet-command-grid-pro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--stack-gap);margin-top:0}
@media (max-width:900px){
 #page-fleet .fleet-command-head-pro{display:block}
 #page-fleet .fleet-recon-pro{height:auto;min-height:20px;margin-top:0;padding:2px 7px;line-height:16px}
 .fleet-head-tools-pro{margin-top:var(--sp-3);gap:var(--sp-2)}
 .fleet-head-tools-pro .fleet-period-pro{flex:1 1 140px;min-width:0}
 .fleet-period-pro select{width:100%}
 .fleet-routes-layout-pro,#page-fleet .fleet-command-grid-pro{grid-template-columns:minmax(0,1fr)}
 #page-fleet .fleet-route-card-pro{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,auto));min-height:52px}
}
#page-fleet .fleet-map-pro{height:auto;min-height:0}
/* Google's map is absolutely placed inside: with no height of its own the card
   showed an empty Map heading (Oct 2026). The drawn fallback sizes itself. */
#page-fleet .fleet-map-pro.is-google{height:clamp(300px,52vh,520px)}
#page-fleet .fleet-command-grid-pro,.fleet-routes-layout-pro{align-items:start}

/* ============================================================ HOME (wave 2)
   Phone order: the month's sentence and figure, then what needs you, then
   today's stops, then the three supporting figures. Desktop is unchanged:
   revenue with its chart beside the three figures, Needs you beside Today. */
.record-fig-note{margin-top:6px;font-size:13px;color:var(--secondary-text)}
/* Table rows that open a record (Pipeline's lead list). */
tr.clickable{cursor:pointer}
.record-body>.record-go{margin-top:-6px}
@media (max-width:900px){
 #homeV2{padding-bottom:88px}
 #homeV2 .home-hero,#homeV2 .home-cols{display:contents}
 #homeV2 .home-head{order:1}
 #homeV2 .home-pace{order:2;border:1px solid var(--line);border-radius:12px;background:var(--surface-1);padding:16px 16px 8px}
 #homeV2 .home-needs{order:3}
 #homeV2 .home-today{order:4}
 #homeV2 .home-figs{order:5;border:1px solid var(--line);border-radius:12px;background:var(--surface-1)}
 #homeV2 .home-fig:first-child{border-radius:12px 12px 0 0} #homeV2 .home-fig:last-child{border-radius:0 0 12px 12px}
 #homeV2 .home-chart svg{height:150px}
}

/* Notifications (bell): two groups, a close button, and on a phone a sheet
   under the brand bar (the desktop top bar it lives in is hidden there). */
.notif-head .notif-head-actions{display:flex;align-items:center;gap:4px}
.notif-group{padding:10px 16px 4px;font-size:var(--fs-sm);font-weight:500;color:var(--muted);background:none;border-top:1px solid var(--line)}
.notif-group:first-child{border-top:0}
.notif-item.is-event .notif-detail{margin-top:1px}
.notif-item .notif-meta:empty{display:none}
@media (max-width:900px){
 body>#notifPanel{position:fixed;left:8px;right:8px;top:64px!important;width:auto!important;z-index:950}
 body>#notifPanel .notif-list{max-height:calc(100dvh - 290px)}
 body>#notifPanel .notif-item{min-height:48px}
}

/* Search (Cmd-K and the phone's search button): over the page, not instead
   of it; grouped results; a real close button; no per-row shortcut hints. */
.command-backdrop{background:rgba(8,12,10,.28)!important}
.command-search-wrap{gap:10px!important;padding:12px 12px 12px 16px!important}
.command-search-icon{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.command-search-wrap input{min-width:0;font-size:17px!important;min-height:40px}
.command-close{flex:none;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);color:var(--secondary-text);font-size:12px;cursor:pointer}
.command-close:hover{color:var(--text)}
.command-group{padding:12px 8px 4px!important;font-size:11.5px!important;text-transform:none!important;letter-spacing:0!important;font-weight:600}
.command-item-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.command-item>span:nth-child(2){min-width:0}
.command-item strong{font-weight:550}
.command-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.command-note{padding:14px 10px;color:var(--muted);font-size:13px}
@media (max-width:900px){
 .command-backdrop{padding-top:8px!important}
 .command-palette{width:calc(100vw - 16px)!important}
 .command-results{max-height:calc(100dvh - 120px)!important}
 .command-item{min-height:52px}
}

/* ======================================================== SETTINGS (wave 2) */
.btn-link{border:0;background:none;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-link:hover{color:var(--accent)}
/* Data sync: the operating mode and its four freshness figures are one
   card; the strip bleeds to the card's bottom edge. Folded lists open from a
   full-width row with a chevron on the right, like every other fold. */
.sync-mode>strong{display:block;margin:4px 0 2px;font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em}
.sync-mode .sync-provider-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.sync-mode .fig-strip{margin-top:var(--sp-4)}
.sync-idle{margin-top:var(--stack-gap);padding:0 var(--card-pad);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1)}
.sync-idle[open]{padding-bottom:var(--card-pad)}
:is(.sync-idle,.oauth-redirects)>summary{position:relative;display:block;padding:var(--sp-4) 28px var(--sp-4) 0;list-style:none;cursor:pointer;line-height:1.45;color:var(--secondary-text);font-size:var(--fs-md);font-weight:400}
:is(.sync-idle,.oauth-redirects)>summary::-webkit-details-marker{display:none}
:is(.sync-idle,.oauth-redirects)>summary::after{content:"";position:absolute;right:4px;top:calc(50% - 4px);width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1) var(--ease)}
:is(.sync-idle,.oauth-redirects)[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.sync-idle>summary:hover{color:var(--text)}
.sync-idle>summary b{font-weight:500;color:var(--text)}
.sync-idle>summary small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}
.sync-none{grid-column:1/-1}
details.card.oauth-redirects{padding-top:0;padding-bottom:0}
details.card.oauth-redirects[open]{padding-bottom:var(--card-pad)}
.oauth-redirects>summary{color:var(--text);font-size:var(--fs-lg);font-weight:500}
.oauth-redirects>p{margin:0 0 var(--sp-3)}
/* Automation: the AI's state is a dot and a sentence, not a filled bar. */
.ai-status-row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);color:var(--secondary-text)}
.ai-reference-empty{padding:var(--sp-6) var(--sp-4)}
#followupsConnections details.dev-details{margin-top:4px}
/* ===== Customers (wave 2): the property record ===== */
#propertyDrawerPro .pc-shell{padding:0 var(--sp-6) var(--sp-8)}
/* The sticky header shares the record's surface; a hairline under the tabs
   is the only edge. */
#propertyDrawerPro .pc-chrome{padding-top:var(--sp-5);background:var(--surface-1);box-shadow:0 1px 0 var(--line)}
:root[data-theme="dark"] #propertyDrawerPro .pc-chrome{background:var(--surface-3)}
#propertyDrawerPro .pc-head{padding-bottom:var(--sp-3);border-bottom:0}
#propertyDrawerPro .pc-head-top{display:flex;align-items:center;gap:var(--sp-3)}
#propertyDrawerPro .pc-title-block h2{line-height:1.3}
#propertyDrawerPro .pc-sub{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted)}
#propertyDrawerPro .pc-status{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:0;border-radius:var(--radius-xs);background:var(--positive-wash);color:var(--positive);font-size:var(--fs-xs);font-weight:500}
#propertyDrawerPro .pc-status.is-inactive{background:var(--surface-2);color:var(--secondary-text)}
.pr-customer-view{font-size:var(--fs-sm);color:var(--muted);text-decoration:none;white-space:nowrap}
.pr-customer-view:hover{color:var(--text);text-decoration:underline}
.pr-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.pr-actions .pr-action{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.pr-action-detail{font-weight:500;opacity:.85}
.pr-action.is-off{opacity:.45;cursor:not-allowed}
#propertyDrawerTabsPro{border-bottom:0;margin-top:var(--sp-1)}
.pr-tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warning);vertical-align:middle;margin-left:4px}
#propertyDrawerBodyPro{padding-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-6)}
/* Sections are titled blocks divided by hairlines, not boxes inside the
   record; two columns on a wide record. */
.pr-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-6) var(--sp-8);align-items:start}
.pr-col{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
.pr-section{min-width:0;padding-top:var(--sp-5);border:0;border-top:1px solid var(--line);border-radius:0;background:none}
#propertyDrawerBodyPro>.pr-section:first-child,.pr-col>.pr-section:first-child{padding-top:0;border-top:0}
.pr-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:28px;margin:0 0 var(--sp-3);padding:0;border:0}
.pr-section-head h3{margin:0}
.pr-count{margin-left:4px;font-size:var(--fs-sm);font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.pr-section-body{padding:0;min-width:0}
.pr-todo{margin:0}
.pr-todo .row-item{padding-left:0;padding-right:0}
.pr-todo .row-item:first-child{border-top:0;padding-top:0}
.pr-todo .row-item-title{white-space:normal}
.pr-todo .row-item-aside{color:var(--muted)}
.pr-todo .row-item:hover{background:none}
.pr-todo .row-item:hover .row-item-title{color:var(--accent)}
.pr-empty{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.pr-hint{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--secondary-text)}
.pr-subhead{margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.pr-visits,.pr-lines{list-style:none;margin:0;padding:0}
.pr-visit{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr) minmax(0,auto);gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.pr-visit:first-child{padding-top:0}.pr-visit:last-child{border-bottom:0;padding-bottom:0}
.pr-visit-day{color:var(--secondary-text);font-variant-numeric:tabular-nums}
.pr-visit strong,.pr-line strong{display:block;font-weight:500;overflow-wrap:anywhere}
.pr-visit small,.pr-line small{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px;overflow-wrap:anywhere}
.pr-visit-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pr-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.pr-line:first-child{padding-top:0}.pr-line:last-child{border-bottom:0;padding-bottom:0}
.pr-line>div{min-width:0}
.pr-line>span{display:flex;align-items:center;gap:10px;flex-shrink:0}
.pr-contact{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.pr-contact:first-child{padding-top:0}.pr-contact:last-of-type{border-bottom:0}
.pr-contact-who{min-width:0}
.pr-contact-who strong{display:block;font-size:var(--fs-md);font-weight:500}
.pr-contact-who small{display:block;font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.pr-contact-actions{display:flex;gap:6px;flex-shrink:0}
.pr-contact-actions .btn{text-decoration:none}
.pr-note{margin:6px 0 0;font-size:13px;white-space:pre-wrap;color:var(--secondary-text)}
.pr-amount{font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
.pr-medium{font-size:var(--fs-xs);color:var(--muted);font-weight:500;margin-left:4px}
.pr-total{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--secondary-text);text-align:right}
.pr-total strong{color:var(--text)}
.pr-radon-line{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.pr-systems{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.pr-system{padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--radius-md);background:var(--surface-2)}
.pr-system-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.pr-kv{display:grid;gap:6px;margin:0}
.pr-kv>div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:10px;font-size:13px}
.pr-kv dt{color:var(--muted)}
.pr-kv dd{margin:0;overflow-wrap:anywhere}
.pr-kv-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.pr-timeline-title{display:block;overflow-wrap:anywhere}
.pr-timeline-sub{display:block;font-size:var(--fs-sm);color:var(--secondary-text);overflow-wrap:anywhere}
.pr-log{font-size:13px;display:grid;gap:6px;color:var(--secondary-text)}
.pr-failed{padding:24px 0;display:grid;gap:10px;justify-items:start}
.pr-failed p{margin:0}
.po-intro{margin:0 0 10px}
.pr-photo-upload{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border:0;border-radius:var(--radius-md);background:var(--surface-2)}
#propertyDrawerPro .lab-upload{margin:0 0 12px}
/* The Jobber write-back block reads as one more section of the record. */
#propertyDrawerPro .pc-section{margin:0;padding-top:var(--sp-5);border:0;border-top:1px solid var(--line);border-radius:0;background:none;overflow:visible}
#propertyDrawerPro .pc-section-head{min-height:28px;margin:0 0 var(--sp-1);padding:0;border:0}
#propertyDrawerPro .pc-section-head h3{font-size:var(--fs-lg);font-weight:500}
#propertyDrawerPro .pc-section-body{padding:0}
@media(max-width:1100px){.pr-cols{grid-template-columns:minmax(0,1fr)}.pr-col+.pr-col>.pr-section:first-child{padding-top:var(--sp-5);border-top:1px solid var(--line)}}
@media(max-width:700px){
 #propertyDrawerPro .pc-shell{padding:0 var(--sp-4) calc(28px + env(safe-area-inset-bottom))}
 #propertyDrawerPro .pc-chrome{padding-top:calc(10px + env(safe-area-inset-top))}
 #propertyDrawerPro .pc-title-block h2{}
 .pr-customer-view{display:none}
 .pr-close{min-height:44px;min-width:64px}
 .pr-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .pr-actions .pr-action{justify-content:center;}
 .pr-action-detail{display:none}
 #propertyDrawerTabsPro{overflow-x:auto;scrollbar-width:none}
 #propertyDrawerTabsPro button{}
 .pr-visit{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
 .pr-visit-day{grid-column:1/-1;font-size:12px}
 .pr-contact{flex-wrap:wrap}
 .pr-contact-actions .btn{}
 .pr-kv-grid{grid-template-columns:minmax(0,1fr)}
 .pr-section-head .btn{}
}

#propertyDrawerPro:focus{outline:none}
@media(max-width:700px){
 #propertyDrawerPro #propertyDrawerTabsPro{flex-wrap:nowrap!important}
 #propertyDrawerTabsPro button{flex:0 0 auto}
 .pr-actions .pr-action{}
}
/* ===== end Customers: property record ===== */

/* ===== Customers (wave 2): Properties directory ===== */
.pl-head{align-items:flex-end}
.pl-meta{margin:6px 0 0;font-size:13px;color:var(--secondary-text)}
.pl-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#page-properties .property-tabs-pro{margin-bottom:14px}
#page-properties .property-tab-pro{min-height:40px}
.pl-toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.pl-search{flex:1 1 360px;display:grid;gap:5px;min-width:0}
.pl-search input{width:100%}

.pl-filters{flex:0 1 auto}
.pl-filters>summary{display:none}
.pl-filter-row{display:flex;gap:10px;flex-wrap:wrap}
.pl-filter-row label{display:grid;gap:5px;min-width:150px}
.pl-filter-row select{}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pl-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-1);color:var(--secondary-text);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.pl-chip span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.pl-chip:hover{border-color:var(--border-strong);color:var(--text)}

.pl-chip.active span{color:var(--text)}
#page-properties .pl-card{padding:0;overflow:hidden}
.pl-table{overflow-x:auto}
.pl-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.pl-table th{position:sticky;top:0;text-align:left;}
.pl-table td{vertical-align:top}
.pl-table .num{text-align:right}
.pl-row{cursor:pointer}
.pl-row:hover td,.pl-row:focus-visible td{background:var(--surface-hover)}
.pl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pl-row.selected td{background:var(--surface-2)}
.pl-table td strong{font-weight:500}
#page-properties .property-panel-pro>.fig-strip{margin-bottom:var(--stack-gap)}
#page-properties .property-panel-pro>.fig-strip:empty{display:none}
.pl-table td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pl-muted{color:var(--muted)}
#page-properties .property-tab-pro.pl-tab-off{display:none!important}
.pl-overdue{color:var(--amber)}
.pl-reasons{display:flex;gap:4px;flex-wrap:wrap}
.pl-table td.pl-next,.pl-table td.pl-next small{text-align:left}
.pl-next small{max-width:280px}
#page-properties .property-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px}
@media(max-width:900px){
 .pl-head{align-items:flex-start}
 .pl-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .pl-search{flex:none}
 .pl-search .pl-label{display:none}
 .pl-filters{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1)}
 .pl-filters>summary{display:flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
 .pl-filters>summary::-webkit-details-marker{display:none}
 .pl-filters>summary::after{content:"▾";margin-left:auto;color:var(--muted)}
 .pl-filters[open]>summary::after{content:"▴"}
 .pl-filter-row{padding:0 14px 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 .pl-filter-row label{min-width:0}
 .pl-filter-row label:last-child{grid-column:1/-1}
 .pl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
 .pl-chip{min-height:40px}
 #page-properties .pl-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
 #page-properties .pl-where strong{font-size:15px}
 .pl-head-actions{width:100%;justify-content:space-between}
 .pl-table{overflow:visible}
 .pl-table thead{display:none}
 .pl-table table,.pl-table tbody{display:block}
 #page-properties .pl-table tr.pl-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:4px 12px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1)}
 #page-properties .pl-table tr.pl-row td{display:block;padding:0!important;border:0!important;background:transparent!important;min-height:0;height:auto}
 #page-properties .pl-table table{min-width:0!important;width:100%}
 .pl-table .pl-where{grid-column:1}
 .pl-table .pl-owed{grid-column:2;grid-row:1;text-align:right}
 .pl-table .pl-who{grid-column:1/-1}
 .pl-table .pl-who small{display:inline;margin-left:6px}
 .pl-table .pl-system{grid-column:1}
 .pl-table .pl-when{grid-column:2;grid-row:3;text-align:right;color:var(--muted);font-size:12px}
 .pl-table .pl-system small{display:inline;margin-left:6px}
 .pl-table .pl-next{grid-column:1/-1}
 .pl-table .pl-next small{max-width:none}
 .pl-table .pl-next .pl-muted{display:none}
 .pl-table tr:not(.pl-row) td{display:block;border:0}
 #page-properties .property-pager{padding:8px 0}
 #page-properties .property-pager .btn{min-height:44px}
 .pl-head-actions .btn{min-height:44px}
}
/* ===== end Customers: Properties directory ===== */

/* ===== Customers (wave 2): Radon tests ===== */
/* Round 3: the four figures and the mitigation figures are .fig-strip; the
   result table wears the system table (no band, no uppercase); a result is a
   pill in its tone; the monthly chart is accent air over neutral water. */
.rt-head{align-items:flex-end}
#testingScoreboard{margin-bottom:var(--stack-gap)}
#page-testing .rt-card{padding:0;overflow:hidden}
.rt-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:var(--card-pad) var(--card-pad) 0}
.rt-toolbar label{display:grid;gap:6px;min-width:150px}
.rt-toolbar .rt-search{flex:1 1 280px}
.rt-count{margin:12px var(--card-pad);font-size:var(--fs-sm);color:var(--muted)}
.rt-table{overflow-x:auto;border-top:1px solid var(--line)}
.rt-table table{width:100%;border-collapse:collapse}
.rt-table th:first-child,.rt-table td:first-child{padding-left:var(--card-pad)}
.rt-table th:last-child,.rt-table td:last-child{padding-right:var(--card-pad)}
.rt-table td{vertical-align:top}
.rt-table tr:last-child td{border-bottom:0}
.rt-table td small{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.rt-table td .pr-badge,.rt-result .badge+div{margin-top:4px}
.rt-table tr.click-row{cursor:pointer}
.rt-table tr.click-row:hover td{background:var(--surface-hover)}
.rt-date{white-space:nowrap;color:var(--secondary-text)}
.rt-where strong{font-weight:500}
.rt-quiet{font-size:var(--fs-sm);color:var(--muted)}
.rt-result .badge .op-icon{width:12px;height:12px;margin-right:4px;vertical-align:-2px}
.rt-actions .row-actions{justify-content:flex-end;flex-wrap:wrap;gap:6px}
.rt-actions .btn{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm);white-space:nowrap}
.rt-actions .row-actions{align-items:center}
.rt-actions .rt-quiet{white-space:nowrap}
/* Report pending: the reason under the label, and the fix when there is one. */
.rt-pending{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:280px;text-align:right}
.rt-pending .rt-check{margin-top:0}
/* A row with no address names the dataset the tech typed, quietly. */
.rt-where strong.rt-quiet{font-weight:400}
#mitigationOutcomesCard,#testingActivityCard,#testingWaitingCard{margin-top:var(--stack-gap)}
/* address validation: what Google made of an unmatched address, one quiet line. */
.rt-check{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}
.rt-check.is-confirmed{color:var(--secondary-text)}
#testingWaitingCard .row-list{margin-top:var(--sp-3)}
#testingWaitingCard .row-list-note{margin:0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));color:var(--muted)}
.pc-standard{margin-top:2px;color:var(--secondary-text)}
.rt-proof{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:var(--sp-3) 0;font-size:var(--fs-md)}
.rt-proof strong{font-weight:500}
.rt-proof .btn{min-height:var(--ctl-sm);font-size:var(--fs-sm)}
.card .rt-strip{margin-top:var(--sp-3)}
.card .rt-strip+.rt-strip{margin-top:-1px}
.rt-pair{margin-top:var(--sp-6);gap:var(--sp-6)}
#mitigationRecentRows small{display:block;color:var(--muted);font-size:var(--fs-sm)}
#mitigationRecentRows td{white-space:nowrap}
#mitigationRecentRows td:first-child{white-space:normal;min-width:120px}
#mitigationOutcomesScoreboard{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){#mitigationOutcomesScoreboard{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tests per month */
#page-testing .testing-trend{gap:var(--sp-2);padding-top:var(--sp-3);border-bottom:1px solid var(--border-strong)}
#page-testing .testing-month{height:150px;gap:0;position:relative}
#page-testing .testing-bars{gap:2px;justify-content:center;height:100%}
#page-testing .testing-bar{flex:0 1 12px;min-width:4px;border-radius:2px 2px 0 0}
#page-testing .testing-bar.water{background:var(--series-3)}
#page-testing .testing-month small{position:absolute;top:calc(100% + 6px);left:0;right:0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.rt-legend{display:flex;gap:16px;margin-top:28px;font-size:var(--fs-sm);color:var(--muted)}
.rt-legend span{display:inline-flex;align-items:center;gap:6px}
.rt-legend i{width:8px;height:8px;border-radius:2px}
.rt-legend i.lg-water{background:var(--series-3)}
@media(max-width:900px){
 .rt-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .rt-toolbar .rt-search{grid-column:1/-1}
 .rt-toolbar label{min-width:0}
 .rt-table{overflow:visible}
 .rt-table thead{display:none}
 .rt-table table,.rt-table tbody{display:block}
 /* Phone: each result is a row between hairlines in the same card. */
 #page-testing .rt-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:4px 12px;padding:12px var(--card-pad);border-bottom:1px solid var(--line)}
 #page-testing .rt-table tr:last-child{border-bottom:0}
 #page-testing .rt-table td{display:block;padding:0!important;border:0!important;background:transparent!important}
 #page-testing .rt-table table{min-width:0!important;width:100%}
 #page-testing .rt-table td{min-height:0!important;height:auto!important}
 .rt-date{grid-column:1;grid-row:1;font-size:var(--fs-sm)}
 .rt-result{grid-column:2;grid-row:1/3;text-align:right}
 .rt-where{grid-column:1;grid-row:2}
 .rt-kind{grid-column:1;grid-row:3}
 .rt-source{grid-column:2;grid-row:3;text-align:right}
 .rt-kind,.rt-source{font-size:var(--fs-sm)}
 .rt-where strong{font-size:var(--fs-md)}
 .rt-kind small,.rt-source small{display:inline!important;margin-left:4px}
 .rt-actions{grid-column:1/-1;grid-row:4}
 .rt-actions .row-actions{justify-content:flex-start}
 .rt-actions .btn{min-height:36px}
 .rt-actions:empty{display:none!important}
 .rt-pair{gap:var(--sp-5)}
}
/* ===== end Customers: Radon tests ===== */


/* ===== Customers (wave 2): Warranty ===== */
/* Round 3: the five figures are one .fig-strip; the board is one card whose
   lanes are divided by hairlines, a case a .row-item in its lane; the ranks
   are .row-list rows with a neutral bar. Arrangement only. */
.wy-head{align-items:flex-end}
#warrantyScoreboard{margin-bottom:var(--sp-5)}
.wy-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:var(--stack-gap)}
.wy-bar .warranty-tabs{border-bottom:0;margin-bottom:-1px}
.wy-search{display:block;flex:0 1 280px;min-width:0}
.wy-search input{width:100%}
/* The board: lanes share one card; hairlines between them, drawn as shadows
   like the figure strip so a short last row leaves no grey cells. */
.wy-board{padding:0;overflow:hidden}
#page-callbacks .warranty-kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
#page-callbacks .warranty-column{min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.warranty-column-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 10px}
#page-callbacks .warranty-column .row-list{--card-pad:16px;margin:0}
.warranty-column .row-item{align-items:start}
.warranty-column .row-item-title{white-space:normal}
.warranty-column .row-item-aside{font-size:var(--fs-sm);color:var(--secondary-text)}
.wy-lane-empty{margin:0;padding:0 16px 16px;font-size:var(--fs-sm);color:var(--muted)}
.wy-board-empty{grid-column:1/-1}
.wy-ranks{margin-top:var(--stack-gap)}
.wy-ranks .section-title{margin-bottom:var(--sp-3)}
.wy-ranks-list .row-item{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
.wy-ranks-list .row-item-aside{justify-self:stretch;gap:12px}
.wy-meter{flex:1 1 auto;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.wy-meter>i{display:block;height:100%;border-radius:3px;background:var(--series-1)}
.wy-meter-n{min-width:2ch;text-align:right}
#warrantyWatchCount:empty{display:none}
#page-callbacks .warranty-candidate-controls{gap:8px 16px}
/* The case drawer: sticky header, a hairline, then sections. */
#warrantyDrawer{display:flex;flex-direction:column}
#warrantyDrawer:focus{outline:none}
.wy-drawer-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 16px;background:inherit;border-bottom:1px solid var(--line)}
#warrantyDrawerBody{padding:20px 24px 24px}
.wy-move{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.wy-move label{display:grid;gap:6px;flex:1 1 200px;min-width:0}
.wy-sec{margin:20px -24px 0;padding:20px 24px 0;border-top:1px solid var(--line)}
.wy-sec h3{margin:0 0 12px}
.wy-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.wy-facts .full{grid-column:1/-1}
.wy-note{margin:16px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.wy-form-actions{display:flex;gap:8px;margin-top:16px}
#warrantyDrawer .warranty-intake-grid{gap:12px}
@media(max-width:1100px){#page-callbacks .warranty-kanban{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 #page-callbacks .warranty-kanban{grid-template-columns:minmax(0,1fr)}
 #page-callbacks .warranty-column.is-empty{display:none}
 .wy-bar{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:0;gap:12px}
 .wy-bar .warranty-tabs{border-bottom:1px solid var(--line);margin-bottom:0}
 .wy-search{flex:none}
 .wy-ranks-list .row-item{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
 .wy-drawer-head{padding:16px}
 #warrantyDrawerBody{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
 .wy-sec{margin:16px -16px 0;padding:16px 16px 0}
 .warranty-drawer{width:100vw}
}
/* ===== end Customers: Warranty ===== */

/* ------------------------------------------------------------------
   Sales: Pipeline (To do first) and the one quote/lead drawer.
   ------------------------------------------------------------------ */
#page-pipeline{max-width:1280px;padding-bottom:80px}
.sl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3) var(--sp-4);flex-wrap:wrap;margin:0}
.sl-title h2{margin:0}
.sl-title p{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted)}
.sl-head-tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sl-period{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.sl-period select{width:auto}
#page-pipeline .pipeline-tabs{margin:var(--sp-4) 0 var(--sp-5)}
#page-pipeline [data-pipeline-panel]:not(.pipeline-tab-hidden){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap)}
#page-pipeline [data-pipeline-panel]>*{margin:0}
#page-pipeline [data-pipeline-panel] .grid.two{gap:var(--stack-gap)}

/* To do: chips and search on one bar, then groups of hairline rows that
   bleed to the card's edges. */
.sl-todo-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.sl-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.sl-chip small{font-variant-numeric:tabular-nums}
.sl-todo-tools{display:flex;gap:var(--sp-2);align-items:center}
.sl-todo-tools input{width:220px;max-width:100%}
.sl-groups{display:grid;gap:0}
.sl-group{margin:0 calc(-1 * var(--card-pad));padding:var(--sp-5) 0 0}
.sl-group>header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:0 var(--card-pad) var(--sp-3)}
.sl-group h3{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:var(--fs-lg);font-weight:500}
.sl-group h3 b{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums}
.sl-group header p{margin:2px 0 0;color:var(--muted);font-size:var(--fs-sm)}
.sl-group header>strong{font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);line-height:22px}
.sl-group h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.sl-group.is-book h3::before{background:var(--positive)}
.sl-group.is-revise h3::before{background:var(--critical)}
.sl-group.is-chase h3::before,.sl-group.is-price h3::before{background:var(--warning)}
.sl-rows{display:grid}
.sl-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.5fr) minmax(0,.62fr);gap:var(--sp-4);align-items:center;min-height:52px;padding:var(--sp-3) var(--card-pad);border-top:1px solid var(--line);cursor:pointer;transition:background var(--dur-1) var(--ease)}
.sl-row:hover{background:var(--surface-hover)}
.sl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sl-row>div{display:grid;gap:2px;min-width:0}
.sl-row-main strong{overflow:hidden;font-size:var(--fs-md);font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.sl-row-main span,.sl-row-why small,.sl-row-num small{overflow:hidden;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;text-overflow:ellipsis}
.sl-row-why span{font-size:var(--fs-md);color:var(--secondary-text)}
.sl-row-num{text-align:right}
.sl-row-num strong{font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums}
.sl-row-num small.chance{font-weight:500}
.sl-row-act{display:flex!important;justify-content:flex-end;gap:var(--sp-2)}
.sl-row-act .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sl-more{display:block;width:100%;margin:0;padding:var(--sp-3) var(--card-pad);border:0;border-top:1px solid var(--line);background:none;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:500;text-align:left;cursor:pointer}
.sl-more:hover{background:var(--surface-hover)}
.sl-group:last-child{margin-bottom:calc(-1 * var(--card-pad))}

/* Follow-ups: underline tabs, then one hairline row per customer with the
   drafted message on an inset. */
#outreachTabs{margin:var(--sp-3) 0 0}
.outreach-item{display:grid;gap:var(--sp-2);margin:0 calc(-1 * var(--card-pad));padding:var(--sp-4) var(--card-pad);border-top:1px solid var(--line)}
#outreachTabs+#outreachList>.outreach-item:first-child{border-top:0}
.outreach-item.done{opacity:.6}
.outreach-head{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.outreach-head strong{font-size:var(--fs-md);font-weight:500}
.outreach-draft{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);background:var(--surface-2);font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.outreach-mark{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin-left:auto}
.outreach-mark>.small{margin-right:var(--sp-1)}
.outreach-mark .btn[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent)}
.outreach-more{margin-top:var(--sp-4)}
#outreachList:last-child>.outreach-item:last-child{margin-bottom:calc(-1 * var(--card-pad))}

/* Requests: the open-request queue is a row list; the lead table and its
   funnel strip sit in the next card. */
#page-pipeline .board-lane-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
#page-pipeline .board-lane-head .section-title{margin:0}
#page-pipeline #boardJourneyNote{margin-left:auto}
#page-pipeline .board-lane-count{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums}
#pipelineRequestsCard>p.small{margin:var(--sp-2) 0 0}
#pipelineRequestsCard>p.small:empty{display:none}
.pipeline-request-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:var(--sp-3) 0;color:var(--muted);font-size:var(--fs-sm)}
.pipeline-request-chips b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;margin-right:2px}
#pipelineRequestQueue>.empty-state{border-top:1px solid var(--line)}
#pipelineRequestQueue .row-item-aside{gap:var(--sp-3)}
.row-list-note{padding:var(--sp-3) var(--card-pad);border-top:1px solid var(--line)}
#leadProgressionCard .pipeline-funnel{margin-top:var(--sp-4)}
#leadProgressionSummary:not(:empty){margin-top:var(--sp-3)}
#leadProgressionSummary .small{margin:0}
#page-pipeline .progression-toolbar{margin:var(--sp-4) 0 var(--sp-3)}
#page-pipeline .pipeline-more-filters{margin:var(--sp-3) 0}
#page-pipeline .sl-filter-wide{grid-column:span 2}
.sl-progression-empty .pipeline-funnel,.sl-progression-empty .progression-toolbar,.sl-progression-empty .table-wrap,.sl-progression-empty #leadProgressionExport{display:none}

/* Journey: every stage fits the screen; stages with customers share the
   width, an empty stage shrinks to its name (click to open it). */
#page-pipeline .journey-board{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);overflow-x:auto;padding-bottom:var(--sp-2)}
/* Seven columns: each keeps a readable width and the board scrolls
   sideways rather than squeezing cards into a word per line. */
#page-pipeline .journey-board .kanban-column{flex:1 0 236px;min-width:0;width:auto}
#page-pipeline .journey-board .kanban-card{min-width:0}
#page-pipeline .journey-board .kanban-column.is-collapsed{flex:0 0 96px;min-width:0;max-width:none;min-height:0}
#page-pipeline .journey-board .kanban-column.is-collapsed .kanban-column-head strong{white-space:normal;font-size:var(--fs-sm)}
/* The board (Sales opens on it): a column scrolls its own cards rather than
   cutting them off at its foot, and its head stays in view while it does.
   A collapsed, empty column stacks its name over its count. */
#page-pipeline .journey-board{align-items:flex-start}
#page-pipeline .journey-board .kanban-column{max-height:min(72vh,780px);overflow-y:auto;overscroll-behavior:contain}
#page-pipeline .journey-board .kanban-column-head{position:sticky;top:calc(-1 * var(--sp-2));z-index:1;background:var(--surface-2)}
#page-pipeline .journey-board .kanban-column.is-collapsed .kanban-column-head{flex-direction:column;align-items:flex-start;gap:2px}
/* Card anatomy, the same in every column: name and value, town and what,
   one status line, at most two badges, a muted note, then the actions. */
#page-pipeline .journey-board .kc-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--sp-2);min-width:0}
#page-pipeline .journey-board .kc-top .kc-title{flex:1 1 8em;min-width:0;padding-right:0;overflow-wrap:break-word}
#page-pipeline .journey-board .kc-actions .btn.primary{color:var(--accent-ink)}
#page-pipeline .journey-board .kc-value{flex:none;font-size:var(--fs-sm);font-weight:500;font-variant-numeric:tabular-nums}
#page-pipeline .journey-board .kc-value.is-est{font-weight:400;color:var(--muted)}
#page-pipeline .journey-board .kc-status{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--secondary-text)}
#page-pipeline .journey-board .kc-status :is(.kc-days,.chance){font-weight:500;font-variant-numeric:tabular-nums}
#page-pipeline .journey-board .kc-days:is(.age-watch,.age-stale){color:var(--warning)}
#page-pipeline .journey-board .kc-days.age-critical,#page-pipeline .journey-board .lab-problem{color:var(--critical);font-weight:600}
#page-pipeline .journey-board .kc-moved{color:var(--muted)}
#page-pipeline .journey-board .kc-badges{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-2)}
#page-pipeline .journey-board .kc-badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);font-size:var(--fs-xs);font-weight:500;background:var(--surface-2);color:var(--secondary-text)}
#page-pipeline .journey-board .kc-badge.is-red{background:var(--critical-wash);color:var(--critical)}
#page-pipeline .journey-board .kc-badge.is-amber{background:var(--warning-wash);color:var(--warning)}
#page-pipeline .journey-board .kanban-card .kc-note{margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#page-pipeline .journey-board .kc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
/* Dismiss sits at the end of the actions, so it never covers a long name. */
#page-pipeline .journey-board .kanban-card .kc-dismiss{margin-left:auto;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--muted);cursor:pointer}
#page-pipeline .journey-board .kanban-card .kc-dismiss:hover,#page-pipeline .journey-board .kanban-card .kc-dismiss:focus-visible{background:var(--surface-hover);color:var(--text)}
#page-pipeline .journey-board .kanban-card .kc-dismiss .op-icon{width:14px;height:14px}
.journey-switch{display:none}
/* Phone: one column at a time, picked from the chips; 40px to a thumb. */
@media (max-width:900px){
 #page-pipeline .journey-switch{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--sp-1);margin-top:var(--sp-3);padding-bottom:2px}
 #page-pipeline .journey-switch .filter-chip{flex:none;white-space:nowrap}
 #page-pipeline .journey-switch .filter-chip{height:40px;min-height:40px}
 #page-pipeline .journey-board.has-switch .kanban-column:not(.is-current){display:none}
 #page-pipeline .journey-board.has-switch .kanban-column.is-current{flex:1 1 100%;max-height:none}
 #page-pipeline .journey-board.has-switch{margin-right:0;padding-right:0;overflow-x:visible}
 #page-pipeline .journey-board .kc-actions .btn,#page-pipeline .journey-board .kanban-card .kc-dismiss{min-height:40px;min-width:40px}
}
.board-dismissed-foot{margin-top:var(--sp-3);font-size:var(--fs-sm)}
.board-dismissed-foot .btn-link{color:var(--secondary-text)}
/* Inbound call cards: what Jobber still needs. */
#page-pipeline .journey-board .kanban-card .kc-missing{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--warning)}
/* Notes in the card drawer: add box, then newest first; the request's own
   words last, marked as such. Hairlines, no boxes. */
.jn-add{display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
.jn-add textarea,.jn-item textarea{width:100%}
.jn-add .btn{justify-self:start}
.jn-list{list-style:none;margin:0;padding:0}
.jn-item{padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.jn-item:first-child{border-top:0}
.jn-body{margin:0;white-space:pre-wrap;font-size:var(--fs-md);color:var(--text)}
.jn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--muted)}
.jn-item.is-request .jn-meta{color:var(--secondary-text)}
#page-pipeline .journey-board .kanban-card{padding:var(--sp-2) var(--sp-3)}
/* Columns are a quiet fill (no border) holding the cards, so the board is
   one level of boxes inside the card. */
#page-pipeline .kanban-column{padding:var(--sp-2);border:0;border-radius:var(--radius-lg);background:var(--surface-2);gap:var(--sp-2)}
#page-pipeline .kanban-column-head{gap:var(--sp-2);padding:var(--sp-1) var(--sp-1) var(--sp-2);margin:0;border-bottom:0;background:var(--surface-2)}
#page-pipeline .kanban-column-head strong{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
#page-pipeline .kanban-column-head span{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
#page-pipeline .kanban-column-value{margin:-4px var(--sp-1) var(--sp-1);padding:0;border:0;font-size:var(--fs-xs);color:var(--muted)}
#page-pipeline .kanban-card{margin:0;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1);box-shadow:none;transition:border-color var(--dur-1) var(--ease)}
#page-pipeline .kanban-card:hover{border-color:var(--border-strong);transform:none;box-shadow:none}
#page-pipeline .kanban-card .kc-title{font-size:var(--fs-md);font-weight:500}
#page-pipeline .kanban-card .kc-name{font-size:var(--fs-sm);color:var(--muted)}
#page-pipeline .kanban-card .kc-metrics{margin-top:var(--sp-2)}
#page-pipeline .kanban-card .kc-amount{margin:0;font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums}
#page-pipeline .kanban-card .kc-close-inline{font-size:var(--fs-xs);font-weight:500}
#page-pipeline .kanban-card .kc-foot{margin-top:var(--sp-2)}
#page-pipeline .kanban-card .kc-date{font-size:var(--fs-xs);color:var(--muted)}
#page-pipeline .kanban-card :is(.kc-age,.kc-lead-flag){display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
#page-pipeline .kanban-card .kc-lead-flag{margin-top:var(--sp-2);margin-right:6px}
#page-pipeline .kanban-card .kc-lead-flag.is-new-lead{background:var(--accent-wash);color:var(--accent)}
#page-pipeline .kanban-card .kc-lead-flag.is-existing{background:var(--warning-wash);color:var(--warning)}
#page-pipeline .kanban-card .kc-age:is(.age-watch,.age-stale){background:var(--warning-wash);color:var(--warning)}
#page-pipeline .kanban-card .kc-age.age-critical{background:var(--critical-wash);color:var(--critical)}
#page-pipeline .kanban-card :is(.kc-owner,.kc-contact-flag){font-size:var(--fs-xs)}
#page-pipeline .kanban-card .kc-contact-flag,#page-pipeline .kanban-card .kc-owner.unassigned{color:var(--warning)}

/* Performance: figure strips, then bar rows on one 0-100 scale in the
   accent (the series being read) over a quiet track. */
#pipelineRefreshTime{margin:2px 0 var(--sp-4)}
#pipeWeighted.metric{margin:var(--sp-3) 0 2px;font-size:var(--fs-2xl)}
.pipeline-bases{display:grid;gap:var(--sp-1);margin:var(--sp-4) 0}
.pipeline-bases>div{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--secondary-text)}
.pipeline-bases strong{font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
.pipeline-bases>div.is-forecast strong{color:var(--accent)}
#pipelineOpportunityBands>.empty-state{grid-column:1/-1}
/* Conversion by job type (Pipeline > Performance): the system table. */
.type-table-sub{margin-left:6px;color:var(--muted);font-size:var(--fs-sm);font-weight:400}
#propertyMatchNote{margin:var(--sp-2) 0 var(--sp-4)}
.pipeline-bar-chart{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.pipeline-bar-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) 52px;align-items:center;gap:var(--sp-4)}
.pipeline-bar-row>div:first-child{display:grid;gap:0;min-width:0}
.pipeline-bar-row strong{font-size:var(--fs-md);font-weight:500}
.pipeline-bar-row span{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.pipeline-bar-track{height:8px;overflow:hidden;border-radius:var(--radius-pill);background:var(--surface-2)}
.pipeline-bar-track i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.pipeline-bar-row>b{text-align:right;font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums}
#pipelineQueueExpiredNote{margin:var(--sp-2) 0 0}
.pipeline-how-scores>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;margin:0}
.pipeline-how-scores>summary::-webkit-details-marker{display:none}
.pipeline-how-scores>summary::after{content:"";width:7px;height:7px;flex:none;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1) var(--ease)}
.pipeline-how-scores[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.pipeline-how-scores[open]>summary{margin-bottom:var(--sp-3)}
.pipeline-how-scores>.fig-strip{margin-top:var(--sp-3);margin-bottom:var(--sp-4)}
.pipeline-how-scores>h3.section-title{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-md);font-weight:500}
.pipeline-how-scores .model-note{margin:0 0 var(--sp-2)}

/* The quote / lead drawer: header with the close, actions, the facts, then
   sections divided by hairlines. */
.sl-drawer{padding:0!important;display:flex;flex-direction:column;width:min(520px,100vw)}
#boardCardDrawer.sl-drawer{z-index:119}
#progressionDrawer.sl-drawer{z-index:97}
.sl-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6) var(--sp-4);background:inherit;border-bottom:1px solid var(--line)}
.sl-drawer-head h2{margin:2px 0 0}
.sl-drawer-head .drawer-close{float:none;flex:0 0 auto}
.sl-drawer>div:last-child{padding:var(--sp-4) var(--sp-6) var(--sp-8)}
.sl-drawer-actions,.sl-drawer-more{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.sl-drawer-actions .btn,.sl-drawer-more .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sl-drawer-more{margin-top:var(--sp-2)}
.sl-warn{color:var(--warning)}
.sl-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3) var(--sp-4);margin:var(--sp-5) calc(-1 * var(--sp-6)) 0;padding:var(--sp-5) var(--sp-6) 0;border:0;border-top:1px solid var(--line)}
.sl-facts div{min-width:0}
.sl-facts dt{color:var(--muted);font-size:var(--fs-sm)}
.sl-facts dd{margin:2px 0 0;font-size:var(--fs-md);font-weight:500;overflow-wrap:anywhere}
.sl-drawer :is(.sl-sec,#boardLeadFacts:not(:empty),#boardCompareCrew:not(:empty),#boardCallOutcome:not(:empty),#boardFollowups:not(:empty)){margin:var(--sp-5) calc(-1 * var(--sp-6)) 0;padding:var(--sp-5) var(--sp-6) 0;border-top:1px solid var(--line)}
.sl-sec>h3{margin:0 0 var(--sp-3)}
.sl-drawer details.drawer-more{margin-top:var(--sp-5)}
.sl-drawer details.drawer-more+details.drawer-more{margin-top:0}
.sl-model{margin-top:var(--sp-2)}
.sl-items{margin:0;padding-left:18px;color:var(--secondary-text);font-size:var(--fs-md);line-height:1.6}
.sl-submission{white-space:pre-wrap;font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.progression-evidence{display:grid;margin:0;padding:0;list-style:none}
.progression-evidence-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.progression-evidence-row:first-child{border-top:0;padding-top:0}
.progression-evidence-row strong{display:block;font-size:var(--fs-md);font-weight:500}
.progression-evidence-row small{display:block;font-size:var(--fs-sm);color:var(--muted)}
.closed-flow-card{margin-top:var(--sp-5);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--critical);border-radius:var(--radius-md);background:var(--surface-1)}
.closed-flow-card p{margin:var(--sp-1) 0 var(--sp-3);color:var(--secondary-text);font-size:var(--fs-sm);line-height:1.5}
.close-out-panel>.small{margin:0 0 var(--sp-3)}
.close-out-panel .btn.danger{margin-top:var(--sp-3)}
.sl-crew{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);background:var(--surface-2)}
.sl-crew-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.sl-crew-head h3{margin:0;font-size:var(--fs-md);font-weight:500}
.sl-crew-head p{margin:2px 0 0}
.sl-crew-list{display:grid;margin-top:var(--sp-2)}
.sl-crew-row{display:grid;gap:2px;padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.sl-crew-row strong{font-size:var(--fs-md);font-weight:500}
.sl-crew-row span{color:var(--muted);font-size:var(--fs-sm)}
.sl-crew-row.is-pick strong{color:var(--accent)}
/* The house's listing on Realtor.com (listing_status_service): one line,
   who listed it, when it was checked, and the sale question when asked. */
.listing-line{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--text)}
.listing-line strong{font-weight:500}
.listing-who{color:var(--secondary-text)}
.listing-meta{margin:var(--sp-1) 0 0}
.listing-sale-ask{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--secondary-text)}
.listing-sale-ask>span{margin-right:var(--sp-1)}
.listing-sale-done{margin:var(--sp-2) 0 0}
.pr-listing:empty{display:none}
@media (max-width:1100px){
 .sl-row{grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-areas:"main num" "why act";gap:var(--sp-1) var(--sp-3)}
 .sl-row-main{grid-area:main}.sl-row-why{grid-area:why}.sl-row-num{grid-area:num}.sl-row-act{grid-area:act}
}
@media (max-width:900px){
 #page-pipeline{padding:12px 16px 96px}
 .sl-head-tools{width:100%}
 #pipelineTabTrigger{display:none!important}
 #page-pipeline>.pipeline-tabs{margin:var(--sp-3) 0 var(--sp-4)}
 .sl-todo-bar{display:grid;grid-template-columns:minmax(0,1fr)}
 .sl-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--card-pad));padding:0 var(--card-pad)}
 .sl-filters::-webkit-scrollbar{display:none}
 .sl-chip{flex:0 0 auto}
 .sl-todo-tools input{flex:1 1 auto;width:auto}
 .sl-row{padding:var(--sp-3) var(--card-pad)}
 .sl-row-act .btn{min-width:72px}
 .outreach-mark{margin-left:0}
 #page-pipeline .journey-board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
 #page-pipeline .journey-board .kanban-column{flex:0 0 76%;scroll-snap-align:start;max-height:70vh}
 /* The next column shows at the edge, so the board reads as one you swipe. */
 #page-pipeline .journey-board{margin-right:calc(-1 * var(--card-pad));padding-right:var(--card-pad)}
 #page-pipeline .journey-board .kanban-column.is-collapsed{flex:0 0 auto}
 #page-pipeline .sl-filter-wide{grid-column:auto}
 .pipeline-bar-row{grid-template-columns:minmax(0,1fr) 48px;gap:var(--sp-1) var(--sp-3)}
 .pipeline-bar-row>div:first-child{grid-column:1/-1}
 .sl-drawer{width:100vw;max-width:100vw}
 #boardCardDrawer.sl-drawer,#progressionDrawer.sl-drawer{z-index:260}
 .sl-drawer-head{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
 .sl-drawer>div:last-child{padding:var(--sp-4) var(--sp-4) calc(24px + env(safe-area-inset-bottom))}
 .sl-facts,.sl-drawer :is(.sl-sec,#boardLeadFacts:not(:empty),#boardCompareCrew:not(:empty),#boardCallOutcome:not(:empty),#boardFollowups:not(:empty)){margin-left:calc(-1 * var(--sp-4));margin-right:calc(-1 * var(--sp-4));padding-left:var(--sp-4);padding-right:var(--sp-4)}
 .sl-drawer-actions .btn{flex:1 1 auto}
 .listing-sale-ask>span{flex:1 0 100%}
 .listing-sale-ask .btn{flex:1 1 0}
}
@media (max-width:520px){.sl-facts{grid-template-columns:minmax(0,1fr)}}
/* Designer: the empty stage fills the space the photos will take, so the
   page reads as two halves (controls, picture) before anything is added. */

/* ------------------------------------------------------------------
   Calls (page-calls.js). One "Call back" rail -- the same list Messages
   marks "Call back" -- beside one call log; how the phones did underneath.
   Round 3: the rail is .row-list rows (no cards in the card), the log rows
   are hairline rows, the chart is one stacked column per hour or day.
   ------------------------------------------------------------------ */
#page-calls{max-width:1480px}
.calls-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-1)}
.calls-title h2{margin:0}
.calls-status{display:flex;align-items:center;gap:6px;margin:2px 0 0}
.calls-status .health-dot{flex:0 0 auto}
.calls-kpis{margin:0 0 var(--sp-5);color:var(--secondary-text);font-size:var(--fs-md)}
.calls-kpis b{color:var(--text);font-weight:500}
.calls-kpi-bad{color:var(--critical)}
.calls-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--stack-gap);align-items:start}
.calls-rail,.calls-main{display:grid;gap:var(--stack-gap);min-width:0}
.calls-panel,.calls-log,.calls-perf{margin:0;min-width:0}
.calls-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.calls-panel-head h3{margin:0;display:flex;align-items:center;gap:8px}
.calls-panel-note{margin:2px 0 var(--sp-3)}
.calls-panel-note:empty{display:none}
.calls-panel-head+.row-list,.calls-panel-head+div{margin-top:var(--sp-3)}
.calls-count:empty{display:none}
.calls-link{color:var(--accent);font-size:var(--fs-sm);font-weight:500;text-decoration:none;white-space:nowrap}
.calls-link:hover{text-decoration:underline;text-underline-offset:3px}
/* Rail rows: the whole left side opens the caller; the wait sits right. */
.calls-q-main{display:block;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.calls-q-main:hover .row-item-title{text-decoration:underline;text-underline-offset:3px}
#callbackList .row-item,#newCallersList .row-item{align-items:start}
#callbackList .row-item-aside{font-size:var(--fs-sm);color:var(--secondary-text)}
#callbackList .row-item.is-due .row-item-aside{color:var(--warning)}
#callbackList .row-item.is-urgent .row-item-aside{color:var(--critical)}
#callbackList>:is(.calls-clear,.calls-loading,.empty-state){padding:var(--sp-3) var(--card-pad)}
.calls-more{display:block;width:100%;margin:0;padding:var(--sp-3) var(--card-pad);border:0;border-top:1px solid var(--line);background:none;color:var(--accent);font:inherit;font-size:var(--fs-md);font-weight:500;text-align:left;cursor:pointer}
.calls-more:hover{background:var(--surface-hover)}
.calls-clear{display:grid;gap:2px;font-size:var(--fs-md)}
.calls-clear span{color:var(--muted);font-size:var(--fs-sm)}
/* The log */
.calls-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--sp-3)}
.calls-tools input[type=search]{flex:1 1 200px;min-width:0}
.calls-tools select{flex:0 0 auto;min-width:130px}
.calls-chips{display:flex;flex-wrap:wrap;gap:6px;order:3;flex:1 1 100%}
.calls-list{display:grid;margin:0 calc(-1 * var(--card-pad));border-top:1px solid var(--line)}
.calls-list[aria-busy="true"]{opacity:.6;transition:opacity var(--dur-2) var(--ease)}
.calls-list>.calls-loading{padding:var(--sp-6) var(--card-pad);color:var(--muted);font-size:var(--fs-md);text-align:center}
.calls-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding-right:var(--card-pad);border-bottom:1px solid var(--line)}
.calls-row:last-child{border-bottom:0}
.calls-row:hover{background:var(--surface-hover)}
.calls-row-main{display:grid;grid-template-columns:24px minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,.9fr);align-items:center;gap:12px;min-width:0;padding:10px 0 10px var(--card-pad);border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.calls-dir{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--muted)}
.calls-dir .op-icon{width:13px;height:13px;vertical-align:0}
.calls-dir.out .op-icon{transform:rotate(-45deg)}
.calls-dir.in .op-icon{transform:rotate(135deg)}
.calls-row-who{display:grid;min-width:0}
.calls-row-who b{overflow:hidden;font-size:var(--fs-md);font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.calls-row-who>span{overflow:hidden;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;text-overflow:ellipsis}
.calls-row-when{color:var(--secondary-text);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.calls-row-result{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#page-calls .calls-row-result .call-pill,.calls-len{white-space:nowrap}
.calls-len{color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.calls-row-line{overflow:hidden;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;text-overflow:ellipsis}
#page-calls .call-pill.out{background:var(--surface-2);color:var(--secondary-text)}
.call-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));padding:var(--sp-3) var(--card-pad);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.call-pager.single-page{display:none}
/* How the phones did */
.calls-perf-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-6);align-items:start;margin-top:var(--sp-3)}
.calls-perf-grid:has(>#callsTeamCard[hidden]){grid-template-columns:minmax(0,1fr)}
#page-calls .call-volume-chart{position:relative;display:flex;align-items:flex-end;gap:6px;height:168px;margin:0 0 26px;padding:16px 0 0 28px;border-bottom:1px solid var(--border-strong);background:linear-gradient(var(--grid),var(--grid)) 28px 16px/100% 1px no-repeat,linear-gradient(var(--grid),var(--grid)) 28px calc(16px + (100% - 16px) / 2)/100% 1px no-repeat}
.volume-max{position:absolute;left:0;top:9px;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.volume-group{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.volume-stack{display:flex;flex-direction:column;width:100%;max-width:22px;min-height:0;border-radius:3px 3px 0 0;overflow:hidden}
.volume-seg{display:block;flex-basis:0;min-height:1px}
.volume-seg+.volume-seg{border-top:1px solid var(--surface-1)}
/* The series being read, in every chart on these pages: one accent rule. */
.volume-seg.answered,#page-calls .chart-legend .lg-answered,#page-testing .testing-bar,.rt-legend i{background:var(--accent)}
.volume-seg.missed,#page-calls .chart-legend .lg-missed{background:var(--critical)}
.volume-seg.outbound,#page-calls .chart-legend .lg-out{background:var(--series-3)}
.volume-label{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
#page-calls .chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:var(--fs-sm);color:var(--muted)}
#page-calls .chart-legend span{display:inline-flex;align-items:center;gap:6px}
#page-calls .chart-legend i{width:8px;height:8px;margin:0;border-radius:2px}
.calls-chart-empty{align-self:center;margin:auto}
.calls-team th,.calls-team td{white-space:nowrap}
/* The call drawer: header, a row of actions, then sections between hairlines. */
#callDetailDrawer{padding:20px 24px 24px}
#callDetailDrawer h2{margin:2px 0 0;padding-right:84px}
.call-drawer-sub{margin:2px 0 var(--sp-4);color:var(--muted)}
.call-drawer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sp-5)}
.calls-wait-box{display:grid;gap:2px;margin:0 0 var(--sp-4);padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--critical);border-radius:var(--radius-md);background:var(--surface-1);font-size:var(--fs-md)}
.calls-wait-box span{color:var(--secondary-text);font-size:var(--fs-sm)}
#callDetailDrawer h3{margin:var(--sp-5) 0 var(--sp-2)}
.call-jobber-actions{display:grid;gap:0}
.call-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.call-form-grid .full{grid-column:1/-1}
.call-form-grid label{display:grid;gap:6px;min-width:0}
.call-form-grid input,.call-form-grid textarea{width:100%;min-width:0}
@media(max-width:1100px){
 .calls-layout{grid-template-columns:minmax(0,1fr)}
 .calls-perf-grid{grid-template-columns:minmax(0,1fr)}
 .calls-row-main{grid-template-columns:24px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr)}
 .calls-row-line{display:none}
}
@media(max-width:900px){
 #callDetailDrawer.call-drawer{width:100vw;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
 .calls-head{display:grid;gap:8px}
 .calls-seg{display:flex}
 .calls-seg button{flex:1 1 0}
 .calls-row{gap:4px}
 .calls-row-main{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"dir who when" "dir result result";row-gap:4px;column-gap:10px}
 .calls-dir{grid-area:dir;align-self:start}
 .calls-row-who{grid-area:who}
 .calls-row-when{grid-area:when;align-self:start}
 .calls-row-result{grid-area:result;flex-direction:row;align-items:center;gap:6px}
 .calls-tools select{flex:1 1 140px}
 .call-form-grid{grid-template-columns:minmax(0,1fr)}
 .call-drawer-actions .btn{flex:1 1 auto}
 #page-calls .call-volume-chart{gap:3px}
}

/* ------------------------------------------------------------------
   Messages (page-messages.js): the call-back tag, and the band above a
   conversation with the waiting notice and the one line Call and texts use.
   ------------------------------------------------------------------ */
.msg-count.is-alert{background:var(--critical-wash);color:var(--critical)}
.msg-filters button.active .msg-count.is-alert{background:var(--surface-1);color:var(--critical)}
.msg-tag{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--radius-xs);background:var(--critical-wash);color:var(--critical);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.msg-row-top b{min-width:0}
.msg-context{display:grid;border-bottom:1px solid var(--line);background:var(--surface-1)}
.msg-wait{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 16px 8px 13px;border-bottom:1px solid var(--line);border-left:3px solid var(--critical);background:var(--surface-1);color:var(--text);font-size:var(--fs-md)}
.msg-wait .btn{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.msg-lineband{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 16px;font-size:var(--fs-sm);color:var(--muted)}
.msg-lineband select{width:auto;max-width:100%;height:var(--ctl-sm);min-height:var(--ctl-sm);font-size:var(--fs-sm)}
.msg-lineband .msg-line-text{padding:0;color:var(--text);font-weight:500}
.msg-calls-link{margin-left:auto;color:var(--accent);font-weight:500;text-decoration:none;white-space:nowrap}
.msg-calls-link:hover{text-decoration:underline;text-underline-offset:3px}
.msg-thread-pane.empty .msg-context{display:none!important}
@media(max-width:900px){
 .msg-wait .btn,.msg-lineband select{min-height:40px}
}
/* Calls/Messages follow-ups */
@media(max-width:900px){.msg-lb-long{display:none}}
@media(max-width:900px){.msg-lineband label{display:inline-block}.msg-lineband label::first-letter{text-transform:uppercase}}
.msg-wait{flex-wrap:nowrap}.msg-wait span{min-width:0}.msg-wait .btn{flex:0 0 auto;white-space:nowrap}

/* ===== Money (Revenue + Finance) redesign, Oct 2026 ===== */
#page-finance .finance-command-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#page-finance .money-overview-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s2);margin:var(--s2) 0;align-items:start}
#page-finance .money-overview-grid .card{margin:0}
#page-finance .money-subhead{margin:var(--s3) 0 var(--s1)}
#page-finance .money-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#page-finance .money-panel-head p{margin:0;max-width:70ch}
#page-finance .money-problems{margin-top:var(--s3)}
#page-finance .money-problems .money-problem-row{margin-top:var(--s2)}
#page-finance .money-history,#page-finance .money-model{margin-top:var(--s3)}
#page-finance .money-history>summary,#page-finance .money-model>summary{cursor:pointer;list-style:none;display:flex;gap:4px var(--sp-3);align-items:baseline;flex-wrap:wrap;min-height:28px;padding-right:24px;position:relative}
#page-finance :is(.money-history,.money-model)>summary::-webkit-details-marker{display:none}
#page-finance :is(.money-history,.money-model)>summary strong{font-size:var(--fs-lg);font-weight:500}
#page-finance :is(.money-history,.money-model)>summary::after{content:"";position:absolute;right:4px;top:8px;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur-1) var(--ease)}
#page-finance :is(.money-history,.money-model)[open]>summary::after{transform:rotate(-135deg);top:11px}
#page-finance :is(.money-history,.money-model)[open]>summary{margin-bottom:var(--sp-3)}
#financeJobCostDrawer .finance-toolbar{grid-template-columns:minmax(0,1fr)!important}
@media (max-width:900px){
 
 
 
 
 #page-finance .money-overview-grid{grid-template-columns:minmax(0,1fr)}
 
 
 #page-finance .finance-command-meta{justify-content:flex-start}
 #page-finance .finance-command-head{flex-wrap:wrap}
}
#page-finance .money-owed-title{display:none}
#page-finance .money-owed-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 var(--s2)}
#page-finance .money-owed-search{flex:1 1 260px;display:grid;gap:4px}
#page-finance .money-owed-search input{}
#page-finance .money-owed-more{flex:0 0 auto}
#page-finance .money-owed-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-1)}
#page-finance .money-owed-more[open]{flex-basis:100%}
#page-finance .money-owed-more[open]>summary{margin-bottom:8px}
#page-finance .collections-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 12px;margin:0}
#page-finance #collectionSavedViews .small{margin-left:6px;color:var(--muted)}
#page-finance .collections-toolbar input,#page-finance .collections-toolbar select{}
#collectionAgingRows .aging-row-pro{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0}
#collectionAgingRows .aging-row-pro .aging-track{grid-column:1/-1;order:3}
#collectionAgingRows .aging-row-pro small{grid-column:1/-1;order:4;color:var(--muted)}
#collectionPriorityTable td:last-child .row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#page-finance .money-panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#page-finance .money-panel-actions label{display:flex;align-items:center;gap:8px}
#page-finance .money-panel-actions select{width:auto}
#page-revenue .revenue-command-deck.money-single{display:block!important}
#page-revenue .revenue-command-deck.money-single>.card{width:auto!important;max-width:none!important}
@media (max-width:900px){
 :root[data-theme] #page-finance .finance-command-head h2{display:none}
 :root[data-theme] #page-finance .finance-command-head{margin:0 0 8px!important}
 #page-finance .finance-command-meta{width:100%;justify-content:space-between;flex-wrap:nowrap}
 #page-finance .finance-command-meta .btn{min-height:40px;padding:0 14px}
 #page-finance .money-panel-head{align-items:stretch}
 #page-finance .money-panel-actions{width:100%}
 #page-finance .money-panel-actions label{flex:1 1 auto}
 #page-finance .money-panel-actions select{flex:1 1 auto;min-height:44px}
 #page-finance .collections-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 #page-finance .money-owed-search{flex-basis:100%}
}
.finance-drawer select,.finance-drawer input,.finance-drawer textarea,.collections-drawer select{max-width:100%;min-width:0}
.finance-drawer .collection-intake label,.finance-drawer .finance-toolbar label{min-width:0}
@media (max-width:700px){.finance-drawer,.collections-drawer{width:100vw!important;padding-left:16px!important;padding-right:16px!important}}
/* Ghost buttons on Money read as plain text in tables ("Review", "Deactivate",
   "Check the bank now"); give them the outline every other button has. */


#page-finance .money-problem-row.money-problem-single{grid-template-columns:minmax(0,1fr)!important}
/* ===== end Money ===== */

/* ------------------------------------------------------------------
   Marketing (wave 2): three tabs and a Setup drawer. Google Ads opens on
   one sentence and six figures; everything else is a plain card list.
   ------------------------------------------------------------------ */
.mk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--sp-4)}
.mk-title h2{margin:0}
.mk-title p{margin:2px 0 0}
.mk-tools{display:flex;align-items:center;gap:var(--s1)}
#page-marketing > .territory-panel > *{margin-top:var(--stack-gap)}
/* This month (loadMktMonthForecast): three whole-business forecasts on the Ads tab; the
   run-rate model, when shown, is a quiet line under them. */
.mk-forecast{display:grid;gap:var(--sp-2);margin:0 0 var(--stack-gap)}
.mk-forecast .section-head{margin:0}
.mk-forecast-runrate{margin:0;color:var(--secondary-text)}
#page-marketing > .territory-panel > :first-child{margin-top:0}
/* Google Ads opens on one sentence; its six figures are a strip that bleeds
   to the card's edges (design system 6.1), not six boxes in the card. */
.mk-verdict{display:grid;gap:var(--sp-2)}
.mk-verdict-line{margin:0;font-size:var(--fs-lg);line-height:1.5;color:var(--text)}
.mk-verdict-line b{font-weight:600;font-variant-numeric:tabular-nums}
.mk-verdict-note{margin:0;color:var(--secondary-text)}
.mk-verdict .fig-strip{margin-top:var(--sp-2)}
/* Two columns of a card section (tables, charts) side by side. */
.mk-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3) var(--sp-6);align-items:start}
.mk-two > *{min-width:0}
.mk-two .card-section-title,.card-section > .card-section-title{margin-bottom:var(--sp-2)}
.card-section > .fig-strip{margin-top:var(--sp-2)}
.mk-table td,.mk-table th{white-space:nowrap}
.mk-table td:first-child,.mk-table th:first-child{white-space:normal}
.mk-budget .mkt-slider-row{max-width:560px}
.mk-budget-rec{margin:var(--sp-2) 0 var(--sp-4);font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.mk-budget-rec .econ-pill{margin-right:6px;vertical-align:1px}
/* A quiet ground for a source's own words (Google's report, the GA line). */
.mk-note{color:var(--secondary-text);font-size:var(--fs-md);line-height:1.5;margin-bottom:var(--sp-3)}
.mk-note:empty{display:none}
.mk-note p{margin:0}
.mk-note p + p{margin-top:6px}
.mk-line{margin:0 0 6px;font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.mk-line strong{color:var(--text);font-weight:500}
/* "Connect X" sits on an inset ground: one sentence, one button. */
.mk-connect{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;color:var(--secondary-text);font-size:var(--fs-md)}
.mk-note .mk-connect{margin-top:var(--sp-3)}
/* Fold-away rows: a full-width row with a chevron on the right, between
   hairlines that bleed to the card's edges -- the drawer's fold, in a card. */
.mk-fold{margin:var(--sp-4) calc(-1 * var(--card-pad)) 0;padding:0 var(--card-pad);border-top:1px solid var(--line)}
.card > .mk-fold:last-child,.card-section > .mk-fold:last-child{margin-bottom:calc(-1 * var(--card-pad))}
.mk-fold[open]{padding-bottom:var(--sp-4)}
.mk-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:44px;list-style:none;cursor:pointer;color:var(--text);font-size:var(--fs-md);font-weight:500}
.mk-fold > summary::-webkit-details-marker{display:none}
.mk-fold > summary::after{content:"";width:7px;height:7px;flex:none;margin-right:4px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-1) var(--ease)}
.mk-fold[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.mk-fold > summary:hover{color:var(--accent)}
/* The folded card (Google's own report): the card's title row is the
   summary. */
details.card.mk-fold{margin:var(--stack-gap) 0 0;padding:0 var(--card-pad);border:1px solid var(--line)}
details.card.mk-fold[open]{padding-bottom:var(--card-pad)}
.mk-fold-card > summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:2px var(--sp-3);min-height:56px;font-size:var(--fs-lg)}
@media (max-width:700px){.mk-fold-card > summary{grid-template-columns:minmax(0,1fr) auto;padding:var(--sp-3) 0}.mk-fold-card > summary small{grid-column:1;grid-row:2}.mk-fold-card > summary::after{grid-column:2;grid-row:1/3}}
.mk-fold-card > summary small{color:var(--muted);font-size:var(--fs-sm);font-weight:400}
.mk-fold-card[open] > summary{margin-bottom:var(--sp-3)}
.mk-search{display:grid;gap:4px;max-width:320px;margin:var(--sp-2) 0}
/* The page's drawers pad their sides by --s3; sections and row lists bleed
   by --card-pad, so the two are made the same number here. */
:is(#mktSetupDrawer,#territoryQualityDrawer,#territoryDetailDrawer,#econDrawer,#econSourcesDrawer){--card-pad:var(--s3)}
.card .fig-strip + .mk-fold,.card-section > .fig-strip + .mk-fold{margin-top:0;border-top:0}
/* Setup drawer: three sections between hairlines; connections are rows. */
.mk-setup.call-drawer{width:min(560px,100vw)}
.mk-import{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-3)}
.mk-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);align-items:end}
.mk-form label{display:grid;gap:6px}
.mk-form .btn{grid-column:1/-1;justify-self:start}
#mktProviderGrid .row-item-title{white-space:normal}
#mktProviderGrid .econ-pill{margin-left:6px;vertical-align:1px}
@media (max-width:1100px){.mk-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
 .mk-head{align-items:stretch}
 .mk-tools{width:100%}
 .mk-period{flex:1}
 .mk-period select{width:100%}
 .mk-verdict-line{font-size:var(--fs-md)}
 .mk-form{grid-template-columns:minmax(0,1fr)}
 #mktTabs .territory-tab{min-height:44px}
 #mktTabs{gap:0}
 .mk-setup.call-drawer{padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
 .mk-table th,.mk-table td{padding-left:8px;padding-right:8px}
}
.mk-num td:not(:first-child),.mk-num th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.mk-num td:first-child{white-space:nowrap}
.mk-num th.mk-left,.mk-num td.small{text-align:left}

/* ------------------------------------------------------------------
   Territory (wave 2): Towns and Where to grow; data quality in a drawer.
   ------------------------------------------------------------------ */
#page-territory > .territory-panel > *{margin-top:var(--stack-gap)}
#page-territory > .territory-panel > :first-child{margin-top:0}
/* The six headline figures are one strip (design system 6.1); a region is a
   pressable figure in a second strip under the filters. */
.tr-states{margin:0 0 var(--sp-2)}
.tr-states .fig-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tr-meta{margin:0 0 var(--sp-4)}
.tr-meta .link-btn{min-height:32px;padding:0 2px;border:0;background:none;color:var(--accent);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tr-alert{margin:0 0 var(--sp-4)}
.tr-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:var(--sp-3);align-items:end;margin-bottom:var(--sp-3)}
.tr-filters label{display:grid;gap:6px;min-width:0}
.tr-regions{margin-bottom:var(--stack-gap)}
.tr-warn{color:var(--warning)}
.tr-map-tools{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
#page-territory .tr-map-card .map-metric-switch{position:static}
#page-territory .territory-row{cursor:pointer}
.tr-says{margin:var(--sp-3) 0 4px;color:var(--secondary-text);line-height:1.5}
.tr-method + .tr-method{margin-top:var(--sp-3)}
.tr-method h4{margin:0 0 2px}
.tr-method p{margin:0}
.tr-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);align-items:end;margin:var(--sp-3) 0}
.tr-calc label{display:grid;gap:6px;min-width:0}
.tr-calc .btn{justify-self:start}
.tr-filters select,.tr-filters input,.tr-calc select,.tr-calc input{width:100%;min-width:0}
/* Drawers: the town's facts are the drawer facts grid; quality figures are a
   compact strip of their own. */
.tr-quality.call-drawer{width:min(720px,100vw)}
.tr-quality-figs{margin-top:var(--sp-4)}
.tr-facts{margin:var(--sp-4) 0 0}
@media (max-width:900px){
 .tr-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .tr-filters label:nth-child(3){grid-column:1/-1}
 .tr-calc{grid-template-columns:minmax(0,1fr)}
 #territoryTabs .territory-tab{min-height:44px}
 .tr-meta .link-btn{min-height:44px}
 #page-territory .territory-rank-table th:nth-child(2),#page-territory .territory-rank-table td:nth-child(2),#page-territory .territory-rank-table th:nth-child(8),#page-territory .territory-rank-table td:nth-child(8){display:none}
 #page-territory .territory-rank-table td:first-child{min-width:150px}
}
#territoryDrawerBody > .eyebrow:first-child,#territoryDrawerBody > .selected-market-title{display:none}

/* ------------------------------------------------------------------
   Market conditions (wave 2): one view, Sources in a drawer.
   ------------------------------------------------------------------ */
#page-economics > .territory-panel > .card,#econOverviewCards > .card{margin-top:var(--stack-gap)}
#page-economics > .territory-panel > .card:first-child{margin-top:0}
/* Each group is a card whose indicators are one figure strip; a figure
   opens its chart. The direction arrow sits small beside the value. */
#page-economics .ec-group .fig-strip{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
#page-economics .fig-label .econ-pill{margin-left:4px;vertical-align:1px}
.ec-dir{margin-left:6px;font-size:11px;color:var(--muted);vertical-align:3px}
.econ-card-changes{display:flex;flex-wrap:wrap;gap:2px 10px}
.ec-waiting{margin:var(--sp-4) 0 0}
.ec-waiting .link-btn{border:0;background:none;padding:0 2px;color:var(--accent);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ec-outlook-none{margin:0;padding:var(--sp-3) var(--card-pad) var(--card-pad);border-top:1px solid var(--line)}
#econOutlookGrid .row-item-main details{margin-top:4px}
#econOutlookGrid details.econ-tech>div{padding:2px 0}
/* Indicator drawer: the figure, its changes, the chart, then what it means
   as rows. */
.ec-drawer-figure{display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-4) 0 2px}
.ec-drawer-figure strong{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ec-drawer-figure span{color:var(--muted);font-size:var(--fs-md)}
.ec-drawer-changes{font-size:var(--fs-sm)}
.ec-chart{display:block;margin-top:var(--sp-4)}
.ec-explain{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--secondary-text);line-height:1.5}
#econDrawer .row-item-title{white-space:normal}
.ec-source-meta{display:grid;gap:4px}
.ec-caveat{margin:var(--sp-4) 0 0}
/* Sources drawer. */
.ec-sources.call-drawer{width:min(620px,100vw)}
.ec-sources .mk-form{grid-template-columns:minmax(0,1fr);margin-top:var(--sp-2)}
.ec-sources input[type=file],.mk-import input[type=file]{max-width:100%;min-width:0}
.ec-sources select{max-width:100%;min-width:0}
.ec-sources .econ-tech summary,.ec-sources details.econ-tech>summary{font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
.ec-health{margin:0 0 var(--sp-3)}
.ec-subhead{margin:var(--sp-4) 0 var(--sp-1)}
.ec-impact-head{border-top:0;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.econ-card:disabled{cursor:default;opacity:1}
@media (max-width:900px){#econSourcesOpen{min-height:44px}}
#page-economics .econ-up,#page-economics .econ-down,#page-economics .econ-flat,#econDrawer .econ-up,#econDrawer .econ-down,#econDrawer .econ-flat{color:var(--secondary-text)}
/* Phone: the bottom dock covers the last 64px of a drawer; these drawers
   leave room so Save, Import and the last rows are reachable. */
@media (max-width:900px){#mktSetupDrawer,#territoryQualityDrawer,#territoryDetailDrawer,#econSourcesDrawer,#econDrawer{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}}

/* ------------------------------------------------------------------
   Stock (page-inventory.js): Jobs · Stock · To order · Material lists.
   Tones: .is-good / .is-warn / .is-bad / .is-muted.
   ------------------------------------------------------------------ */
.stk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-4)}
.stk-title h2{margin:0;}
.stk-title p{margin:2px 0 0;font-size:var(--fs-md);color:var(--muted)}

.stk-tabs{margin:0 0 var(--sp-5)}

.stk-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums}
.stk-error{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--warning);border-radius:var(--radius-md);background:var(--surface-1);font-size:var(--fs-md)}
.stk-error .btn{margin-left:8px}
.stk-panel{min-width:0}
.stk-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--stack-gap);align-items:start}
.stk-main{display:grid;gap:var(--sp-3);min-width:0}
/* tiles are a .fig-strip of buttons; the one filtering the list is marked
   like a selected tab: a 2px ink line under it */
.stk-tiles .fig[aria-pressed="true"]{background:var(--surface-2);box-shadow:1px 0 0 var(--line),0 1px 0 var(--line),inset 0 -2px 0 var(--text)}
.stk-note{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:10px var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--warning);border-radius:var(--radius-md);background:var(--surface-1);color:var(--secondary-text);font-size:var(--fs-sm)}
.stk-note+.stk-note{margin-top:6px}
.stk-note .btn{flex:0 0 auto}
.stk-listbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.stk-listbar input[type=search]{flex:1 1 220px;min-width:0;}
.stk-jobs{display:grid;gap:var(--sp-3)}
.stk-day{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface-1);overflow:hidden}
.stk-day header{display:flex;align-items:baseline;gap:10px;padding:12px var(--sp-4) 10px;border-bottom:1px solid var(--line);background:none}
.stk-day header b{font-size:var(--fs-md);font-weight:500}
.stk-day header span{color:var(--muted);font-size:var(--fs-sm)}
.stk-link{margin-left:auto;padding:4px 0;border:0;background:none;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:500;cursor:pointer}
.stk-link:hover{color:var(--accent-strong);text-decoration:underline}
.stk-job{display:grid;grid-template-columns:minmax(0,72px) minmax(0,2.2fr) minmax(0,.8fr) minmax(0,1.6fr) minmax(0,140px);align-items:center;gap:12px;width:100%;min-height:56px;padding:10px var(--sp-4);border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.stk-day header+.stk-job,.stk-day>.stk-job:first-child{border-top:0}
.stk-job:hover{background:var(--surface-hover)}
.stk-time{color:var(--secondary-text);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.stk-who{display:grid;gap:1px;min-width:0}
.stk-who strong{overflow:hidden;font-size:var(--fs-md);font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.stk-who small{overflow:hidden;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;text-overflow:ellipsis}
.stk-tech{overflow:hidden;color:var(--secondary-text);font-size:var(--fs-sm);white-space:nowrap;text-overflow:ellipsis}
.stk-needs{display:flex;flex-wrap:wrap;gap:4px;min-width:0}

.stk-chip::before{content:"";width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--muted)}
.stk-chip.is-good::before{background:var(--positive)}
.stk-chip.is-warn::before{background:var(--warning)}
.stk-chip.is-bad{border-color:var(--critical)}
.stk-chip.is-bad::before{background:var(--critical)}
.stk-chip.is-muted{color:var(--secondary-text);font-weight:500}
.stk-chip.is-muted::before{display:none}
.stk-verdict{justify-self:end;font-size:var(--fs-sm);font-weight:500;text-align:right}
.stk-verdict.is-good{color:var(--positive)}
.stk-verdict.is-warn{color:var(--warning)}
.stk-verdict.is-bad{color:var(--critical)}
.stk-verdict.is-muted{color:var(--muted);font-weight:500}
.stk-verdict .btn{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--fs-sm);border-radius:var(--radius-sm);pointer-events:none}
.stk-intro{margin:0 0 6px}
.stk-quiet{margin:0;padding:6px 0;color:var(--muted);font-size:var(--fs-sm)}
.stk-rail{position:sticky;top:var(--sp-4);display:block;max-height:calc(100vh - 120px);overflow:auto}
.stk-rail h3{margin:0;font-size:var(--fs-lg);font-weight:500}
.stk-rail>p{margin:2px 0 var(--sp-3)}
.stk-take .row-item-main{display:grid;gap:4px}
.stk-take-line{display:grid;grid-template-columns:minmax(0,26px) minmax(0,1fr) auto;gap:6px;align-items:baseline;font-size:var(--fs-sm)}
.stk-take-line em{color:var(--muted);font-style:normal;font-weight:500}
.stk-take-line span{color:var(--secondary-text)}
.stk-take-line b{font-weight:500;font-variant-numeric:tabular-nums}
.stk-take-line b.is-good,.stk-n.is-good b,.stk-facts dd.is-good,.stk-req-stock.is-good{color:var(--text)}
.stk-take-line b.is-warn,.stk-n.is-warn b,.stk-facts dd.is-warn,.stk-req-stock.is-warn{color:var(--warning)}
.stk-take-line b.is-bad,.stk-n.is-bad b,.stk-facts dd.is-bad,.stk-req-stock.is-bad,.stk-order-why .is-bad{color:var(--critical)}
.stk-techload{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none;font-size:var(--fs-sm)}
.stk-techload li{display:grid;gap:1px}
/* Radon monitors (renderStockMonitors): the counts per state, today and the
   days ahead that run out, above what the jobs take. */
.stk-monitors{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0 0 var(--sp-4);border-bottom:1px solid var(--line)}
.stk-monitors>p{margin:0}
.stk-mon-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.stk-mon-sub{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.stk-mon-days{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none;font-size:var(--fs-sm)}
.stk-mon-days li{display:grid;gap:1px;padding-left:var(--sp-2);border-left:3px solid var(--warning)}
.stk-mon-days li.is-bad{border-left-color:var(--critical)}
.stk-mon-days li b{font-weight:500}
.stk-mon-days li span{color:var(--secondary-text)}
.stk-mon-days li.is-bad span{color:var(--critical)}
.stk-mon-serials{margin:0;color:var(--muted)}
.stk-mon-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2)}
.stk-mon-edit label{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--secondary-text)}
.stk-mon-actions{grid-column:1/-1;display:flex;gap:var(--sp-2)}
.stk-mon-edit p{grid-column:1/-1;margin:0}
.stk-techload b{font-weight:500;color:var(--text)}
.stk-techload span{color:var(--secondary-text)}
.stk-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin:0 0 var(--sp-3)}
.stk-bar p{margin:0;max-width:80ch}
.stk-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
.stk-stock{padding:0;overflow:hidden}
.stk-item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);align-items:center;padding:10px var(--card-pad);border-top:1px solid var(--line);color:var(--text)}
.stk-item[role=button]{cursor:pointer}
.stk-item[role=button]:hover{background:var(--surface-hover)}
.stk-item-head{border-top:0;background:none;color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.stk-item-name{display:grid;gap:1px;min-width:0}
.stk-item-name strong{font-size:var(--fs-md);font-weight:500}
.stk-item-name small{color:var(--muted);font-size:var(--fs-sm)}
.stk-group{margin:0;padding:var(--sp-4) var(--card-pad) 6px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.stk-loc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:center}
.stk-loc em{display:none;color:var(--muted);font-size:var(--fs-sm);font-style:normal;font-weight:500}
.stk-n{display:grid;gap:0;min-width:0}
.stk-n b{font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums}
.stk-n small{display:none;color:var(--muted);font-size:11px}
.stk-loc-head{display:grid;gap:4px}
.stk-loc-head b{color:var(--text);font-weight:500}
.stk-loc-head .stk-loc span{font-weight:400;font-size:var(--fs-sm)}
.stk-count-input{width:100%;max-width:84px;min-height:36px}
.stk-item.is-untracked{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr)}
.stk-untracked-note{color:var(--muted);font-size:12.5px}
.stk-savebar{position:sticky;bottom:10px;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:var(--s1);margin-top:var(--s1);padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--float-shadow);font-size:13px}
/* To order: one card, a hairline row per item */
.stk-order{display:block;padding:0;overflow:hidden}
.stk-order>.empty-state,.stk-order>.stk-empty{border:0}
.stk-order-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,70px) minmax(0,2fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-3) var(--card-pad);border-top:1px solid var(--line)}
.stk-order>.stk-order-row:first-child{border-top:0}
.stk-order-item,.stk-order-qty,.stk-order-why{display:grid;gap:2px;min-width:0}
.stk-order-item strong{font-size:var(--fs-md);font-weight:500}
.stk-order-item small,.stk-order-qty small,.stk-order-why small{color:var(--muted);font-size:var(--fs-sm)}
.stk-order-qty b{font-size:var(--fs-lg);font-weight:600;font-variant-numeric:tabular-nums}
.stk-order-why{font-size:var(--fs-md)}
.stk-order-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.stk-order .stk-group{background:none}
.stk-foot{margin:var(--s2) 0 0}
.stk-tpl{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--stack-gap);align-items:start}
.stk-tpl-list{display:block}
.stk-tpl-list>input{width:100%;margin:0 0 var(--sp-3)}
.stk-tpl-items{display:block;margin:0 calc(-1 * var(--card-pad))}
.stk-tpl-items>.stk-quiet{padding:0 var(--card-pad) var(--sp-2)}
/* saved lists: hairline rows, the open one carries the selected-row fill */
.stk-tpl-card{display:grid;gap:2px;width:100%;padding:10px var(--card-pad);border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.stk-tpl-card:hover{background:var(--surface-hover)}
.stk-tpl-card.active{background:var(--accent-wash)}
.stk-tpl-card.is-archived{opacity:.7}
.stk-tpl-card strong{font-size:var(--fs-md);font-weight:500}
.stk-tpl-card small{color:var(--muted);font-size:var(--fs-sm)}
.stk-sugg .row-item-aside{color:var(--accent);font-size:var(--fs-sm)}
.stk-tpl-editor{display:grid;gap:var(--sp-3)}
.stk-tpl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s1);flex-wrap:wrap}
.stk-tpl-head h3{margin:0;font-size:var(--fs-lg);font-weight:500}
.stk-tpl-head p{margin:2px 0 0}
.stk-tpl-actions{display:flex;gap:6px;flex-wrap:wrap}
.stk-tpl-actions .btn:disabled{display:none}
.stk-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.stk-form-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}
.stk-form label{display:grid;gap:6px;min-width:0}
.stk-form label>span,.stk-wide>span{color:var(--secondary-text);font-size:var(--fs-sm);font-weight:500}
.stk-form input,.stk-form select,.stk-form textarea{width:100%;min-width:0}
.stk-form .wide,.stk-form .stk-wide{grid-column:1/-1}
.stk-wide{display:grid;gap:4px;margin-top:8px}
.stk-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.stk-sub h4{margin:0;font-size:var(--fs-md);font-weight:500}
.stk-mat-head,.stk-mat-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,36px);gap:6px;align-items:center}
.stk-plan-head,.stk-plan-row{grid-template-columns:minmax(0,2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,36px)}
.stk-mat-head{color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.stk-mat-rows{display:grid;gap:6px}
.stk-mat-row select,.stk-mat-row input{width:100%;min-width:0;min-height:36px}
.stk-x{display:grid;place-items:center;min-height:36px;border:0;border-radius:var(--radius-sm);background:none;color:var(--muted);cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.stk-x:hover{background:var(--surface-hover);color:var(--text)}
.stk-maps{display:block}
.stk-map{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.stk-map:last-child{border-bottom:1px solid var(--line)}
.stk-map span{display:grid;gap:1px;min-width:0}
.stk-map b{overflow-wrap:anywhere;font-size:var(--fs-md);font-weight:500}
.stk-map small{color:var(--muted);font-size:var(--fs-sm)}
.stk-map.is-pending b{color:var(--secondary-text)}
.stk-map-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,.8fr) auto;gap:6px}
.stk-map-add input,.stk-map-add select{width:100%;min-width:0;min-height:36px}
.stk-more .stk-form{margin-top:var(--sp-1)}
/* drawers */
.stk-drawer{width:min(560px,96vw)}
.stk-drawer-head{margin-bottom:var(--s2)}
#inventoryDrawerBody,#stockItemBody{display:grid;gap:var(--s2)}
.stk-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.stk-drawer-head h2{margin:2px 0 0;overflow-wrap:anywhere}
.stk-drawer-head .btn{flex:0 0 auto}
.stk-drawer-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-5)}
.stk-drawer-actions:empty{display:none}
/* the job verdict is a callout: the tone is the 3px bar, never a fill */
.stk-verdict-block{display:grid;gap:2px;margin:0 0 var(--sp-5)}
.stk-verdict-block b{font-size:var(--fs-md)}
.stk-verdict-block .btn{justify-self:start;margin-top:var(--sp-2)}
.stk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);margin:0}
.stk-facts div{display:grid;gap:1px;min-width:0}
.stk-facts dt{color:var(--muted);font-size:var(--fs-sm)}
.stk-facts dd{margin:0;font-size:var(--fs-md);font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stk-h{margin:var(--sp-5) 0 var(--sp-2);padding-top:var(--sp-5);border-top:1px solid var(--line);font-size:var(--fs-lg);font-weight:500}
.stk-receive .stk-h{margin:0;padding:0;border:0;font-size:var(--fs-md)}
.stk-reqs{display:block;margin:0;padding:0;list-style:none}
.stk-req{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.5fr) minmax(0,1.3fr);gap:var(--sp-2);align-items:center;width:100%;padding:10px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:var(--text);font:inherit;text-align:left}
.stk-reqs>li:first-child>.stk-req,.stk-reqs>.stk-req:first-child{border-top:0}
.stk-req.is-link{cursor:pointer}
.stk-req.is-link:hover strong{color:var(--accent)}
.stk-req>span:first-child{display:grid;gap:1px;min-width:0}
.stk-req strong{font-size:var(--fs-md);font-weight:500}
.stk-req small{color:var(--muted);font-size:var(--fs-sm)}
.stk-req-qty{font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.stk-req-stock{color:var(--secondary-text);font-size:var(--fs-sm);text-align:right}
.stk-plan{margin-top:var(--sp-5)}
.stk-plan .stk-mat-head{margin-top:var(--s1)}
.stk-plan-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:var(--sp-3)}
.stk-receive{display:grid;gap:var(--sp-2);margin:0 0 var(--sp-5)}
.stk-receive-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:6px}
.stk-receive-row select,.stk-receive-row input{width:100%;min-width:0;min-height:38px}
.stk-locs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.stk-loccard{min-width:0}
.stk-loccard+.stk-loccard{padding-left:var(--sp-5);border-left:1px solid var(--line)}
.stk-loccard h4{margin:0 0 var(--sp-3);font-size:var(--fs-md);font-weight:500}
@media(max-width:1100px){
 .stk-layout{grid-template-columns:minmax(0,1fr)}
 .stk-main{display:contents}
 .stk-rail{position:static;max-height:none;order:3}
 #stkTiles{order:1}
 #stkSetup{order:2}
 .stk-listbar{order:4}
 #stkJobs{order:5}
 .stk-job{grid-template-columns:minmax(0,64px) minmax(0,2fr) minmax(0,1.4fr) minmax(0,120px)}
 .stk-job .stk-tech{display:none}
}
@media(max-width:900px){
 .stk-head{align-items:flex-start}
 .stk-head .stk-tools,.stk-head .stk-seg{width:100%}
 .stk-head .stk-seg button{flex:1;justify-content:center;}
 .stk-tiles .fig-sub{display:none}
 .stk-note{flex-direction:column;align-items:flex-start}
 .stk-listbar .stk-seg{flex:1 1 auto}
 .stk-listbar .stk-seg button{flex:1;justify-content:center;}
 .stk-job{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who verdict" "time tech" "needs needs";gap:4px 10px;padding:12px var(--sp-4)}
 .stk-job .stk-who{grid-area:who}
 .stk-job .stk-time{grid-area:time}
 .stk-job .stk-tech{display:block;grid-area:tech;justify-self:end}
 .stk-job .stk-needs{grid-area:needs}
 .stk-job .stk-verdict{grid-area:verdict}
 .stk-item,.stk-item.is-untracked{grid-template-columns:minmax(0,1fr);gap:8px}
 .stk-item-head{display:none}
 .stk-loc{grid-template-columns:minmax(0,26px) repeat(4,minmax(0,1fr))}
 .stk-loc em{display:block}
 .stk-n small{display:block}
 .stk-order-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .stk-order-why{grid-column:1/-1}
 .stk-order-actions{grid-column:1/-1;justify-content:flex-start}
 .stk-tpl{grid-template-columns:minmax(0,1fr)}
 .stk-form,.stk-locs{grid-template-columns:minmax(0,1fr)}
 .stk-loccard+.stk-loccard{padding:var(--sp-5) 0 0;border-left:0;border-top:1px solid var(--line)}
 .stk-form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .stk-mat-head{display:none}
 .stk-mat-row,.stk-plan-row{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,40px);padding-bottom:8px;border-bottom:1px solid var(--line)}
 .stk-mat-row>:first-child{grid-column:1/4}
 .stk-mat-row>.stk-x{grid-column:4;grid-row:1}
 .stk-map-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .stk-map-add input{grid-column:1/-1}
 .stk-drawer.call-drawer{width:100vw;padding:var(--s2);padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));z-index:260}
 .stk-req{grid-template-columns:minmax(0,1fr) auto}
 .stk-req-stock{grid-column:1/-1;text-align:left}
 .stk-receive-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .stk-receive-row .btn{grid-column:1/-1}
 .stk-savebar{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ================================================= MONEY: REVENUE (round 3)
   Revenue on the layout components. The outlook card is one card: the
   figure and its bar on the left, the cohorts on the right behind a hairline,
   the pace strip bleeding along the bottom. No panels inside it. */
#page-revenue #revenueForecast .section-head{margin-bottom:var(--sp-4)}
#page-revenue .revenue-cockpit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;margin:0 calc(-1 * var(--card-pad));border-top:1px solid var(--line)}
#page-revenue .revenue-cockpit-primary{min-width:0;padding:var(--sp-5) var(--card-pad)}
#page-revenue .forecast-composition{min-width:0;padding:var(--sp-5) var(--card-pad);border-left:1px solid var(--line)}
#page-revenue .forecast-kicker{display:block;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .fh-headline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin:2px 0 0}
#page-revenue .fh-headline strong{font-size:var(--fs-3xl);line-height:1.1;font-weight:600;letter-spacing:-.025em;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .fh-verdict{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-sm);font-weight:500}
#page-revenue .fh-verdict:empty{display:none}
#page-revenue .fh-verdict.is-short{background:var(--warning-wash);color:var(--warning)}
#page-revenue .fh-verdict.is-clear{background:var(--positive-wash);color:var(--positive)}
#page-revenue .forecast-trajectory{margin-top:var(--sp-6)}
#page-revenue .trajectory-track{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--surface-2)}
#page-revenue .trajectory-track span{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-pill);transition:width var(--dur-2) var(--ease)}
#page-revenue .trajectory-track #trajectoryForecast{background:var(--series-3)}
#page-revenue .trajectory-track #trajectoryCommitted{z-index:2;background:var(--series-1)}
#page-revenue .trajectory-track #trajectoryEarned{z-index:3;background:var(--accent)}
#page-revenue .trajectory-track i{position:absolute;top:-5px;width:2px;height:18px;border-radius:1px;background:var(--text)}
#page-revenue .trajectory-labels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
#page-revenue .trajectory-labels span{font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .trajectory-labels span:nth-child(2),#page-revenue .trajectory-labels span:nth-child(3){text-align:center}
#page-revenue .trajectory-labels span:last-child{text-align:right}
#page-revenue .trajectory-labels b{display:block;margin-top:2px;font-size:var(--fs-md);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .forecast-gap-callout{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--sp-2);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
#page-revenue .forecast-gap-callout span{font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .forecast-gap-callout strong{font-size:var(--fs-lg);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .forecast-gap-callout small{flex-basis:100%;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .fh-legend{margin:var(--sp-3) 0 0;max-width:72ch;font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
#page-revenue .fh-legend b{font-weight:500;color:var(--secondary-text)}
#page-revenue .composition-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-2)}
#page-revenue .composition-head span{display:block;font-size:var(--fs-md);font-weight:500;color:var(--text)}
#page-revenue .composition-head small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .composition-head>strong{font-size:var(--fs-xl);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .composition-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;width:calc(100% + 2 * var(--sp-2));margin:0 calc(-1 * var(--sp-2));padding:10px var(--sp-2);border:0;border-top:1px solid var(--line);border-radius:0;background:none;color:inherit;font:inherit;text-align:left}
#page-revenue button.composition-row{cursor:pointer;transition:background var(--dur-1) var(--ease)}
#page-revenue button.composition-row:hover{background:var(--surface-hover)}
#page-revenue .composition-row i{width:8px;height:8px;border-radius:50%;background:var(--composition-color)}
#page-revenue .composition-row span{font-size:var(--fs-md);font-weight:500;color:var(--text);min-width:0}
#page-revenue .composition-row small{display:block;margin-top:1px;font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
#page-revenue .composition-row strong{font-size:var(--fs-md);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .forecast-confidence{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--sp-4);margin-top:0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
#page-revenue .forecast-confidence span{font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .forecast-confidence b{font-size:var(--fs-sm);font-weight:500;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
#page-revenue #revenueInsight .revenue-go{gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
#page-revenue #revenueInsight .row-item:hover .revenue-go{color:var(--accent)}
#page-revenue #revenueInsight .row-item-title{white-space:normal}
#page-revenue #revenueInsight .row-item{grid-template-columns:22px minmax(0,1fr) auto;align-items:start}
#page-revenue #revenueInsight .rank{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums}
#page-revenue #revenueInsight .revenue-go{align-self:center}
@media (max-width:1100px){
 #page-revenue .revenue-cockpit{grid-template-columns:minmax(0,1fr)}
 #page-revenue .forecast-composition{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:700px){
 #page-revenue .fh-headline strong{font-size:32px}
 #page-revenue .trajectory-labels{grid-template-columns:repeat(2,minmax(0,1fr))}
 #page-revenue .trajectory-labels span:nth-child(n){text-align:left}
 #page-revenue #revenueInsight .row-item{grid-template-columns:22px minmax(0,1fr)}
 #page-revenue #revenueInsight .revenue-go{grid-column:2;justify-self:start}
}
#page-revenue .revenue-nav-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-5);padding:0;border-bottom:1px solid var(--line)}
#page-revenue .revenue-nav-row .revenue-tabs{margin:0;border-bottom:0}
#page-revenue .revenue-filter-bar{display:flex;align-items:center;padding:0 0 var(--sp-2)}
#page-revenue .revenue-filter-bar label{display:flex;align-items:center;gap:var(--sp-2);margin:0}
#page-revenue .revenue-filter-bar label>span{margin:0;font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
#page-revenue .revenue-filter-bar select{width:180px}
#page-revenue .card>.section-title+:is(.fig-strip,#revenueInsight),#page-revenue .card>.section-title+.fig-strip{margin-top:var(--sp-3)}
@media (max-width:700px){
 #page-revenue .revenue-nav-row{flex-direction:column;align-items:stretch}
 #page-revenue .revenue-filter-bar label{justify-content:space-between}
 #page-revenue .revenue-filter-bar select{width:min(62vw,230px)}
}

/* Trends: a segmented choice of view, cards with ordinary titles, charts on
   the card itself (no tinted plate), readings as figures not pills. */
#page-revenue .performance-subnav{width:fit-content;margin:0 0 var(--sp-4)}
#page-revenue .performance-panel{display:grid;gap:var(--stack-gap)}
#page-revenue .revenue-chart-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);margin-bottom:var(--sp-3)}
#page-revenue .revenue-chart-head p{max-width:72ch;margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .revenue-chart-head h3{margin:0;font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em}
#page-revenue .market-chart-toolbar{margin-bottom:var(--sp-3)}
#page-revenue .market-chart-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-2)}
#page-revenue .market-overlays{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
#page-revenue .market-chart-canvas-wrap{position:relative;height:420px;overflow:hidden}
#page-revenue .market-chart-canvas-wrap canvas{width:100%;height:100%;cursor:crosshair}
#page-revenue .market-signal-summary{margin-top:var(--sp-3)}
#page-revenue .market-signal-summary .fig-value{font-size:var(--fs-lg)}
#page-revenue .revenue-chart-reading{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
#page-revenue .revenue-chart-reading small{display:block;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .revenue-chart-reading strong{display:block;margin-top:2px;font-size:var(--fs-lg);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
#page-revenue .revenue-chart-reading .is-good strong{color:var(--positive)}
#page-revenue .revenue-chart-reading .is-bad strong{color:var(--critical)}
#page-revenue #revenueMomentumCard canvas{display:block;width:100%;height:340px;cursor:crosshair}
#page-revenue #revenuePaceLegend{justify-content:flex-end}
@media (max-width:700px){
 #page-revenue .performance-subnav{display:flex;width:100%}
 #page-revenue .performance-subnav>button{flex:1}
 #page-revenue .market-chart-controls .segment{width:100%}
 #page-revenue .market-chart-controls .segment>button{flex:1;padding:0 6px}
 #page-revenue .market-chart-canvas-wrap{height:280px}
 #page-revenue #revenueMomentumCard canvas{height:260px}
 #page-revenue .revenue-chart-reading{gap:var(--sp-4)}
}
/* Patterns: the heatmap's days are quiet cells; the grade is the figure's
   colour, not a tinted tile. Seasonal bars are the neutral ramp, the month
   being read is the accent. */
#page-revenue .calendar-key{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
#page-revenue .calendar-key span{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--secondary-text)}
#page-revenue .calendar-key span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
#page-revenue .calendar-key .is-good::before{background:var(--positive)}
#page-revenue .calendar-key .is-warn::before{background:var(--warning)}
#page-revenue .calendar-key .is-bad::before{background:var(--critical)}
#page-revenue .production-cadence{margin:var(--sp-3) 0 var(--sp-4)}
#page-revenue .production-cadence .fig-value{font-size:var(--fs-lg)}
#page-revenue .revenue-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
#page-revenue .calendar-head{padding:0 0 2px;font-size:var(--fs-xs);color:var(--muted);text-align:left}
#page-revenue .calendar-day{display:flex;flex-direction:column;justify-content:space-between;min-height:60px;min-width:0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-2)}
#page-revenue .calendar-day.empty{background:none}
#page-revenue .calendar-day .daynum{font-size:var(--fs-xs);color:var(--muted)}
#page-revenue .calendar-day strong{font-size:var(--fs-md);font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-revenue .calendar-day:is(.off,.future) strong{color:var(--muted);font-weight:400}
#page-revenue .calendar-day.good strong{color:var(--positive)}
#page-revenue .calendar-day.warn strong{color:var(--warning)}
#page-revenue .calendar-day.bad strong{color:var(--critical)}
#seasonalityReading{display:flex;align-items:baseline;gap:var(--sp-2)}
#seasonalityReading strong{font-size:var(--fs-lg);font-weight:600}
#seasonalityReading span{font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .seasonality-baseline{display:flex;justify-content:space-between;align-items:center;margin:var(--sp-3) 0 0;font-size:var(--fs-xs);color:var(--muted)}
#page-revenue .seasonality-baseline b{font-weight:500;color:var(--secondary-text)}
#page-revenue .seasonality-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:var(--sp-2);height:240px;border-bottom:1px solid var(--line);background:linear-gradient(to bottom,transparent calc(50% - .5px),var(--grid) calc(50% - .5px),var(--grid) calc(50% + .5px),transparent calc(50% + .5px))}
#page-revenue .season-month{display:grid;grid-template-rows:20px 1fr 22px;align-items:end;height:100%;min-width:0;padding:0;border:0;background:none;color:var(--text);font:inherit;cursor:pointer}
#page-revenue .season-month span{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
#page-revenue .season-month i{display:block;width:70%;min-height:8px;margin:0 auto;border-radius:4px 4px 0 0;background:var(--series-2);transition:background var(--dur-1) var(--ease)}
#page-revenue .season-month.high i{background:var(--series-1)}
#page-revenue .season-month.low i{background:var(--series-3)}
#page-revenue .season-month b{align-self:center;font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
#page-revenue .season-month.current b{color:var(--text)}
#page-revenue .season-month.selected :is(b,span){color:var(--text)}
@media (max-width:700px){
 #page-revenue .revenue-calendar{gap:3px}
 #page-revenue .calendar-day{min-height:44px;padding:4px 5px}
 #page-revenue .calendar-day strong{font-size:var(--fs-xs)}
 #page-revenue .seasonality-chart{gap:3px;height:200px}
 #page-revenue .season-month span{visibility:hidden}
}
/* Mix & team: summary figures as a strip, the share bar on the card (not in
   a grey box), sub-heads as section titles, findings between hairlines. */
#page-revenue .bd-summary{margin-top:var(--sp-3)}
#page-revenue .bd-summary .fig-value{font-size:var(--fs-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page-revenue .bd-summary:not(:last-child){margin-bottom:var(--sp-2)}
#page-revenue .bd-subhead{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-md);font-weight:500;letter-spacing:0;color:var(--text)}
#page-revenue .service-mix-visual{margin:var(--sp-4) 0 var(--sp-2)}
#page-revenue .service-share-bar{display:flex;gap:2px;height:10px;border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-2)}
#page-revenue .service-share-bar button{flex:0 0 var(--share);min-width:3px;padding:0;border:0;background:none;cursor:pointer}
#page-revenue .service-share-bar button i{display:block;width:100%;height:100%;background:var(--service-color);transition:background var(--dur-1) var(--ease)}
/* the month or service being read is the current series */
#page-revenue .season-month:is(:hover,.selected) i,#page-revenue .service-share-bar button:hover i{background:var(--accent)}
#page-revenue .service-share-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin-top:var(--sp-3)}
#page-revenue .service-share-legend>div{display:grid;grid-template-columns:8px auto auto;gap:2px 6px;align-items:center}
#page-revenue .service-share-legend>div>i{width:8px;height:8px;border-radius:50%}
#page-revenue .service-share-legend span{font-size:var(--fs-sm);font-weight:500;color:var(--text)}
#page-revenue .service-share-legend strong{font-size:var(--fs-sm);font-weight:400;color:var(--muted)}
#page-revenue .service-share-legend small{grid-column:2/4;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .bd-row .bd-name{font-weight:500}
#page-revenue .bd-row .bd-name small,#page-revenue .bd-row .bd-num i{font-size:var(--fs-sm)}
#page-revenue .bd-row .bd-num b{font-weight:500}
#page-revenue .bd-insights{display:block}
#page-revenue .bd-insight{padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
#page-revenue .bd-insight:first-child{border-top:0;padding-top:0}
#page-revenue .bd-insight b{display:block;font-size:var(--fs-md);font-weight:500;color:var(--text)}
#page-revenue .integrity-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5);margin:var(--sp-3) 0 0;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .integrity-line:empty{display:none}
#page-revenue .integrity-line b{font-weight:500;color:var(--text)}
#page-revenue .integrity-line :is(.ok,.warn)::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--positive);vertical-align:1px}
#page-revenue .integrity-line .warn::before{background:var(--warning)}
#page-revenue .integrity-line button{margin-left:auto;padding:0;border:0;background:none;color:var(--accent);font:inherit;cursor:pointer}
#page-revenue .bd-table{container-type:inline-size}
@container (max-width:520px){
 #page-revenue .bd-row{grid-template-columns:repeat(3,minmax(0,1fr)) auto;row-gap:4px}
 #page-revenue .bd-row .bd-name{grid-column:1/-1}
 #page-revenue .bd-row .bd-num{text-align:left}
}
/* Proof: figures as strips, the cohort lists as fold-away rows, the ledger's
   parts as sections of one card, notes on a quiet inset. */
#page-revenue :is(#projectionAuditSummary,#invoiceAuditSummary,#revenueBridgeOut,#revenueBacktest)>.fig-strip,#page-revenue #revenueApprovedAging{margin-top:var(--sp-3);margin-bottom:var(--sp-4)}
#page-revenue #revenueApprovedAging:last-child{margin-bottom:calc(-1 * var(--card-pad))}
#page-revenue .projection-audit-list{display:block}
#page-revenue .projection-audit-list summary strong{font-weight:500}
#page-revenue .projection-audit-list summary span{margin:0 auto 0 0;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .projection-audit-list details>:not(summary){margin-left:0}
#page-revenue #revenueBridgeOut td small{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue #revenueBridgeOut td strong{font-weight:500}
#page-revenue .backtest-horizons{margin:0 0 var(--sp-4)}
#page-revenue .backtest-horizons>.small{margin:0 0 var(--sp-2)}
#page-revenue .backtest-horizon-row .fig.is-current .fig-label{color:var(--accent);font-weight:500}
#page-revenue .backtest-coverage{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--secondary-text)}
#page-revenue .backtest-unreplayable td{color:var(--muted)}
#page-revenue #revenueBacktest :is(td,th){white-space:nowrap}
#page-revenue .ledger-run{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-2)}
#page-revenue .ledger-run label{margin:0}
#page-revenue .ledger-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
#page-revenue .card-section .table-wrap,#page-revenue #reconDriftAlert{margin-top:var(--sp-2)}
#page-revenue #reconMergeNote:not(:empty),#page-revenue #ledgerAuditSummary:not(:empty),#page-revenue #ledgerAuditOut:not(:empty){margin-top:var(--sp-3)}
#page-revenue .audit-quality-launch p{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted)}
#page-revenue .audit-quality-launch h3{margin:0;font-size:var(--fs-lg);font-weight:500}
#page-revenue .audit-quality-launch{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4)}

/* ================================================= MONEY: FINANCE (round 3)
   Finance on the layout components: figure strips instead of boxed tiles,
   row lists instead of boxed attention items, one tab row per page (Money
   owed's views are a segmented control), notes on a quiet inset. */
#page-finance .money-answers{margin:0 0 var(--stack-gap)}
#page-finance .money-strip:not(.card .money-strip){margin:0 0 var(--stack-gap)}
#page-finance .card .money-strip{margin-top:var(--sp-3);margin-bottom:var(--sp-3)}
/* A Finance card's strip that has nothing to show yet (no QuickBooks, no bank
   feed) stays as the hairline between the card's header and its body. */
#page-finance .card .money-strip:empty{display:grid}
#page-finance .card>.section-title+.row-list,#page-finance .card>.section-title+#financeAttention{margin-top:var(--sp-3)}
#financeAttention .row-item-aside{gap:var(--sp-2);color:var(--muted)}
#financeAttention .row-item-title{white-space:normal}
#financeAttention>.empty-state{padding:var(--sp-6) var(--sp-4)}
/* Money owed */
#page-finance .collections-recon{display:flex;align-items:center;gap:var(--sp-2)}
#page-finance .owed-views{margin:0 0 var(--sp-4)}
#page-finance .ar-health-hero{margin:0 0 var(--stack-gap)}
#page-finance .ar-health-hero>.fig-strip:first-child{margin-top:calc(-1 * var(--card-pad));border-top:0}
#page-finance .ar-health-metrics{display:contents}
#page-finance #collectionNarrative{margin:var(--sp-3) 0 0;max-width:110ch;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
#page-finance #collectionNarrative.open{display:block}
#page-finance .collection-saved-views{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-3) 0}
#page-finance .collection-layout{gap:var(--stack-gap)}
#page-finance #collectionForecast .row-list{margin-top:var(--sp-3)}
#page-finance .collection-quality-grid{margin:0 0 var(--stack-gap)}
@media (max-width:700px){
 #page-finance .owed-views{display:flex;width:100%}
 #page-finance .owed-views>button{flex:1 0 auto}
}
#page-finance .collection-saved-views{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--card-pad));margin-right:calc(-1 * var(--card-pad));padding:0 var(--card-pad)}
#page-finance .collection-saved-views::-webkit-scrollbar{display:none}
#page-finance .collection-saved-views .filter-chip{flex:none}
.collection-class{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--radius-xs);background:var(--surface-2);color:var(--secondary-text);font-size:var(--fs-xs);font-weight:500;white-space:nowrap}
.collection-class.bad{background:var(--critical-wash);color:var(--critical)}
.collection-class.dispute{background:var(--accent-wash);color:var(--accent)}
#page-finance #collectionPriorityTable td:nth-child(3){white-space:nowrap}
#page-finance #collectionPriorityTable .row-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
#page-finance .money-call-who{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#page-finance .money-call-who:hover .row-item-title{color:var(--accent)}
#page-finance #financeCallList{margin-top:var(--sp-3)}
#page-finance .money-note{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.5;color:var(--secondary-text)}
#page-finance .money-note:empty{display:none}
#page-finance .money-lede{margin:0 0 var(--sp-4);color:var(--muted)}
#page-finance .card>.section-title+:is(#financeCashOutBreakdown,#financeRecurringBreakdown){margin-top:var(--sp-2)}
#page-finance .finance-panel>.finance-toolbar{margin-bottom:var(--stack-gap)}
/* Cash & checks: the week's deadline is a callout (a bar carries the tone),
   not a tinted card. */
#page-finance .finance-deadline-banner{margin:0 0 var(--stack-gap)}
#page-finance .finance-deadline-banner strong{display:block;font-size:var(--fs-md);font-weight:500;line-height:1.45;color:var(--text)}
#page-finance .finance-deadline-meta{display:flex;flex-wrap:wrap;gap:2px var(--sp-4);margin-top:2px;font-size:var(--fs-sm);color:var(--secondary-text)}
#page-finance .finance-panel>:is(.card,details.card)+:is(.card,details.card,.money-problems){margin-top:var(--stack-gap)}
#page-finance #financeChecksInBankBody .card-section:first-child{margin-top:var(--sp-3)}
#page-finance #financeCashTable td:nth-child(-n+2){white-space:nowrap}
#page-finance #ownerValue>.fig-strip,#page-finance .card>.section-title+.fig-strip,#page-finance .card>.section-head+.fig-strip{margin-top:var(--sp-3)}
#page-finance #ownerValue>.fig-strip{margin-bottom:var(--sp-3)}
#page-finance .money-panel-head{margin-bottom:var(--sp-3)}
#page-finance .finance-setup-steps .op-icon{color:var(--positive)}
/* Money drawers: the title sits above its content with the system's gap; a
   collection account's reason is a plain line, not a boxed note. */
:is(.finance-drawer,.collections-drawer,#serviceDrillDrawer,.revenue-quality-drawer)>h2{margin:0 0 var(--sp-4)}
.collections-drawer .collection-why{margin:var(--sp-3) 0 0;color:var(--muted)}
.collections-drawer .detail-grid+.row-actions{margin-top:var(--sp-4)}
#page-finance .finance-toolbar .span-row{grid-column:1/-1}

/* ============================================== BOARD: dismiss dialogs */
.journey-dialog{width:min(560px,calc(100vw - 32px));padding:0;border:0;border-radius:var(--radius-xl);background:var(--surface-1);color:var(--text);box-shadow:var(--float-shadow)}
.journey-dialog::backdrop{background:var(--scrim)}
.journey-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6) var(--sp-2)}
.journey-dialog-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.journey-dialog-body{padding:0 var(--sp-6) var(--sp-6);display:grid;gap:var(--sp-3)}
.journey-dialog-body .small{margin:0}
.jd-note{display:grid;gap:6px;font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.jd-reasons{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.jd-section{display:grid;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.jd-section h3{margin:0;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.jd-snooze-row{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.jd-snooze-row .jd-note{flex:1 1 160px}
.jd-snooze-row input[type=date]{min-height:40px}
/* The toast's one action reads in the toast's own ink, underlined: the
   toast is inverted in light and Trump, so an accent there would be dim. */
.toast .toast-action{margin-left:var(--sp-3);min-height:32px;padding:0 4px;border:0;background:none;font:inherit;font-weight:600;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.journey-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0}.journey-dialog-head,.journey-dialog-body{padding-left:var(--sp-4);padding-right:var(--sp-4)}}

/* ===== Board: urgent test results =====
   A radon test back at or above 4.0 pCi/L (QUOTE_NOW_PCI) is a quote to send
   now: critical rule on the left, a faint critical wash, a pill above the
   foot, first in its column. 2.7 up to 4.0 is the same in warning. Only
   until a quote goes out; the server stops sending result_urgency then. */
#page-pipeline .kanban-card.kc-urgent-high{border-left:3px solid var(--critical);background:var(--critical-wash)}
#page-pipeline .kanban-card.kc-urgent-elevated{border-left:3px solid var(--warning);background:var(--warning-wash)}
#page-pipeline .kanban-card.kc-urgent-high:hover{border-color:var(--critical-line);border-left-color:var(--critical)}
#page-pipeline .kanban-card.kc-urgent-elevated:hover{border-left-color:var(--warning)}
#page-pipeline .kanban-column-head span:has(.kc-col-high){white-space:nowrap}
#page-pipeline .kanban-column-head span .kc-col-high{margin-right:var(--sp-1);font-weight:600;color:var(--critical)}
#page-pipeline .kanban-column-head span .kc-col-high::after{content:" ·";color:var(--muted);font-weight:400}
.kc-result-fact.is-high{color:var(--critical);font-weight:600}
.kc-result-fact.is-elevated{color:var(--warning);font-weight:600}
/* The quote builder in the Board drawers: each label stacks over its field
   (it sat inline, so "Line item" and "Message" squeezed their inputs). */
:is(#journeyRecordQuoteBox,#boardQuoteBox){scroll-margin-top:var(--sp-4)}
:is(#journeyRecordQuoteBox,#boardQuoteBox,#testingQuoteModal) .jobber-quote-create label{display:grid;gap:var(--sp-1)}

/* Settings › Email (Gmail) and Settings › Data sync (BigQuery). The
   phone rule that makes header buttons inline-flex !important would
   otherwise show Connect beside Disconnect. */
:is(.gmail-card,.bigquery-card) .row-actions [hidden]{display:none!important}
.gmail-send-as{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.gmail-send-as li{display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
.gmail-send-as .is-yes{color:var(--positive)}
.gmail-send-as .is-no{color:var(--critical)}
:is(.gmail-card,.bigquery-card) .oauth-redirect-row{margin-top:var(--sp-4);display:flex;gap:var(--sp-3);align-items:center;justify-content:space-between;flex-wrap:wrap}
:is(.gmail-card,.bigquery-card) .oauth-redirect-row code{display:block;margin-top:var(--sp-1);white-space:normal;overflow-wrap:anywhere;word-break:break-all}

/* The customer email preview. The frame is the width a mail client gives
   it: 640 for a desktop reading pane, 390 for a phone. */
.email-preview-card{width:min(720px,100%)}
.email-preview-widths{display:flex;gap:var(--sp-2);margin:var(--sp-3) 0}
.email-preview-widths [aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.email-preview-stage{display:flex;justify-content:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-3);overflow:auto}
#emailPreviewFrame{width:640px;max-width:100%;height:max(300px,min(calc(100vh - 400px),760px));border:0;background:transparent}
#emailPreviewFrame.is-phone{width:390px}

/* Board drawer: the request form's answers. The question is the quiet part;
   the answer is what the reader came for. */
.board-told-list{display:grid;gap:var(--sp-3);margin:0}
.board-told-list dt{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-1)}
.board-told-list dd{margin:0;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.board-told-other{margin:var(--sp-3) 0 0;white-space:pre-wrap;color:var(--text)}
/* First in the drawer: no rule above it, one below it before the actions. */
#boardCardDrawerBody>.sl-sec.board-told{margin-top:0;border-top:0;padding-top:0;margin-bottom:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)}

/* ---- places autocomplete ------------------------------------------------
   A street field that offers real addresses as you type (attachAddress-
   Autocomplete in core.js). The list sits under its field, as wide as the
   field, so it never leaves the drawer or the phone screen. */
.addr-ac{position:relative;min-width:0}
.addr-ac>input{width:100%}
.addr-ac-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:264px;overflow-y:auto;padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3);box-shadow:var(--shadow-pop)}
.addr-ac-list.is-open{display:block}
.addr-ac-item{display:grid;gap:1px;min-width:0;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-md);line-height:1.35}
.addr-ac-item strong{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-ac-item span{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addr-ac-item:hover,.addr-ac-item.is-active{background:var(--surface-hover)}
.addr-ac-item.is-active strong{color:var(--accent)}
/* The intake card's Edit form: street on its own row, then City / State / ZIP. */
.call-details-locality{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,72px) minmax(0,110px);gap:8px;min-width:0}
.call-details-locality label{min-width:0}
/* The Board's "Add details" drawer for an inbound caller. */
.call-details-form{display:grid;gap:var(--sp-3)}
.call-details-form label{display:grid;gap:6px;min-width:0}
.call-details-form input{width:100%}
.call-details-form .call-details-actions{margin-top:var(--sp-2)}
.call-details-form .small{margin:0;color:var(--muted)}
/* Nothing missing any more: the line turns from amber to green. */
#page-pipeline .journey-board .kanban-card .kc-missing.is-ready{color:var(--positive)}
@media (max-width:520px){.call-details-locality{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.call-details-locality label:first-child{grid-column:1/-1}}
/* ---- end places autocomplete ------------------------------------------ */
/* ---- customer cards ---------------------------------------------------- */
/* The card's progress on an inbound-call card: sent, opened, answered. */
#page-pipeline .journey-board .kanban-card .kc-card-status{display:flex;align-items:flex-start;gap:6px;margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--muted)}
#page-pipeline .journey-board .kanban-card .kc-card-status .op-icon{flex-shrink:0;margin-top:1px}
#page-pipeline .journey-board .kanban-card .kc-card-status.is-answered{color:var(--positive)}
#page-pipeline .journey-board .kanban-card .kc-card-status.is-failed{color:var(--critical)}
/* Send card: the exact text, as the customer will get it. */
.sc-text{display:grid;gap:var(--sp-2)}
.sc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.sc-bubble{margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-lg);background:var(--surface-2);color:var(--text);font-size:var(--fs-md);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.sc-error{margin:0;font-size:var(--fs-md);color:var(--critical)}
.sc-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap}
@media (max-width:700px){.sc-actions{flex-direction:column-reverse}.sc-actions .btn{width:100%}}
.card-answer-photos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.card-answer-photo{display:grid;gap:var(--sp-1);width:88px;color:var(--secondary-text);font-size:var(--fs-sm);text-decoration:none}
.card-answer-photo img{display:block;width:88px;height:88px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface-2)}
.card-answers .board-told-list{gap:0}
.card-answers .board-told-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);padding:var(--sp-2) 0;border-bottom:1px solid var(--line)}
.card-answers .board-told-list>div:last-child{border-bottom:0}
.card-answers .board-told-list dt{margin:0;flex-shrink:0}
.card-answers .board-told-list dd{text-align:right;font-weight:500}
.card-answers>.small{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
/* Settings › Customer cards */
.cc-owner-list{margin:var(--sp-3) calc(-1 * var(--sp-5)) 0;border-top:1px solid var(--line)}
.cc-owner-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.cc-owner-row label{font-weight:500;color:var(--text)}
.cc-owner-row .small{display:block;margin-top:2px}
.cc-owner-pick{display:flex;align-items:center;gap:10px;min-width:0}
.cc-owner-pick select{flex:1 1 auto;min-width:0}
.cc-avatar{width:32px;height:32px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent-wash);color:var(--accent);font-size:12px;font-weight:600;object-fit:cover}
.cc-avatar.is-company{background:var(--surface-2);color:var(--secondary-text)}
.cc-url-pick{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.cc-url-pick input{min-width:0;width:min(260px,100%)}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-4)}
.cc-previews{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
@media (max-width:700px){.cc-owner-list{margin-left:calc(-1 * var(--sp-4));margin-right:calc(-1 * var(--sp-4))}.cc-owner-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-2);padding:var(--sp-3) var(--sp-4)}}
/* ---- end customer cards ------------------------------------------------ */


/* ===================================================== onboarding =====
   Who each person is (October 2026): avatars, the walk-through overlay
   (onboarding.js), the account menu, the My profile drawer, Settings ›
   Users and the faces in team chat. Built from the system above: no new
   colours, one accent (the primary button, the switch, the progress meter). */

/* Avatar: a photo, or initials on a neutral circle. */
.op-avatar{display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--secondary-text);font-size:var(--fs-sm);font-weight:500;line-height:1;letter-spacing:0;overflow:hidden;user-select:none}
.op-avatar>img{display:block;width:100%;height:100%;object-fit:cover}
.op-avatar.is-xs{width:20px;height:20px;font-size:9px}
.op-avatar.is-sm{width:24px;height:24px;font-size:10px}
.op-avatar.is-lg{width:40px;height:40px;font-size:var(--fs-md)}
.op-avatar.is-xl{width:72px;height:72px;font-size:24px}

/* The account menu: who you are, then My profile / Finish setting up. */
.operator-account-menu .operator-user-copy{display:flex!important;align-items:center;gap:var(--sp-3);text-align:left!important}
.operator-account-menu .operator-user-copy .op-avatar{margin:0;color:var(--secondary-text);font-size:var(--fs-md);letter-spacing:0}
.operator-user-lines{display:grid;gap:2px;min-width:0}
.operator-account-menu .operator-user-lines strong{font-size:var(--fs-md);font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.operator-account-menu .operator-user-lines span{margin:0;font-size:var(--fs-sm);letter-spacing:0;color:var(--muted)}
.account-profile-group .btn{justify-content:flex-start;width:100%}

/* The same block at the top of the phone's More menu. */
.mobile-account{display:grid;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-4);border-bottom:1px solid var(--line)}
.mobile-account-who{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.mobile-account-lines{display:grid;gap:2px;min-width:0}
.mobile-account-lines strong{font-size:var(--fs-md);font-weight:500;color:var(--text)}
.mobile-account-lines span{font-size:var(--fs-sm);color:var(--muted)}
.mobile-account-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* "Create your password": the one line of help under the field. */
.auth-form .auth-help{font-size:var(--fs-sm);font-weight:400;letter-spacing:0;color:var(--muted)}

/* ---- walk-through overlay ---- */
html.onb-open,html.onb-open body{overflow:hidden}
.onb{position:fixed;inset:0;z-index:330;display:grid;place-items:center;padding:var(--sp-8);background:var(--scrim);overflow:auto}
.onb-panel{display:flex;flex-direction:column;width:min(560px,100%);max-height:calc(100dvh - 64px);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--float-shadow);overflow:hidden;color:var(--text)}
.onb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:44px;padding:var(--sp-5) var(--sp-8) 0}
.onb-brand{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);font-weight:500;color:var(--text)}
.onb-brand img{width:26px;height:26px;border-radius:7px;background:var(--surface-1);box-shadow:0 0 0 1px var(--line)}
.onb-progress{display:grid;gap:var(--sp-2);padding:var(--sp-4) var(--sp-8) var(--sp-3)}
.onb-step-count{margin:0;font-size:var(--fs-sm);color:var(--muted)}
.onb-bar{height:4px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}
.onb-bar>i{display:block;width:calc(var(--onb-progress,0) * 100%);height:100%;border-radius:inherit;background:var(--text);transition:width var(--dur-2) var(--ease)}
.onb-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--sp-2) var(--sp-8) var(--sp-6)}
.onb-title{margin:var(--sp-2) 0 var(--sp-1);font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--text)}
.onb-title:focus{outline:none}
.onb-lead{margin:0 0 var(--sp-5);max-width:52ch;font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.onb-done-line{margin:var(--sp-3) 0 0;font-size:var(--fs-sm);font-weight:500;color:var(--positive)}
.onb-note{margin:calc(-1 * var(--sp-2)) 0 var(--sp-5);padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-md);background:var(--surface-1)}
.onb-note p{margin:0;font-size:var(--fs-md);line-height:1.5;color:var(--text)}
.onb-note footer{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--muted)}
.onb-foot{display:grid;gap:var(--sp-2);padding:var(--sp-4) var(--sp-8) var(--sp-5);border-top:1px solid var(--line)}
.onb-status{margin:0;font-size:var(--fs-sm);color:var(--critical)}
.onb-status:empty{display:none}
.onb-buttons{display:flex;align-items:center;gap:var(--sp-2)}
.onb-spacer{flex:1 1 auto}
.onb.is-done .onb-foot{display:none}

/* Fields: label, control, help, and the line an error is written on. */
.onb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.onb-field{display:grid;align-content:start;min-width:0}
.onb-field.is-wide{grid-column:1/-1}
.onb-field>label:not(.switch-row){margin-bottom:6px;font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.onb-field :is(input:not([type=checkbox]):not([type=range]),select){width:100%}
.onb-optional{font-weight:400;color:var(--muted)}
.onb-help{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.onb-error{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);color:var(--critical)}
.onb-error:empty{display:none}
.onb-warn{margin:var(--sp-1) 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--warning)}
.onb-warn:empty{display:none}

/* Photo: the face and its two buttons; editing, a circle to drag in. */
.onb-photo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-5)}
.onb-photo.is-big{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:var(--sp-4)}
.onb-photo.is-big .onb-photo-face .op-avatar{width:160px;height:160px;font-size:48px}
.onb-photo-face{border-radius:var(--radius-pill)}
.onb-photo-face.is-over{outline:2px solid var(--accent);outline-offset:4px}
.onb-photo-side{display:grid;gap:var(--sp-2);min-width:0}
.onb-photo.is-big .onb-photo-side{justify-items:center}
.onb-photo-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.onb-photo.is-big .onb-photo-actions{justify-content:center}
.onb-photo .onb-help,.onb-photo .onb-error{margin:0}
.onb-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.onb-crop{position:relative;width:160px;max-width:100%;aspect-ratio:1;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);overflow:hidden;touch-action:none;cursor:grab}
.onb-crop:active{cursor:grabbing}
.onb-crop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.onb-photo.is-big .onb-crop{width:240px}
.onb-crop canvas{display:block;width:100%;height:100%}
.onb-zoom{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3);width:min(240px,100%);font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.onb-zoom input{width:100%;min-height:28px}

/* Signature: the real email, sized to its content. */
.onb-preview{margin-top:var(--sp-5)}
.onb-preview-label{margin:0 0 6px;font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.onb-preview-frame{display:block;width:100%;height:240px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2)}
.onb-preview-note:empty{display:none}

/* Licences: one row each, hairlines between. */
.onb-certs{display:grid}
.onb-cert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.onb-cert:first-child{padding-top:0}
.onb-cert-kind,.onb-cert-label,.onb-cert-note{grid-column:1/-1}
.onb-cert-note{margin:0}
.onb-cert-remove{grid-column:3;justify-self:end;align-self:start;margin-top:27px}
.onb-cert-remove .op-icon{width:14px;height:14px}
.onb-cert-add{margin-top:var(--sp-4)}

/* Team chat step: connected (ticked), or the button that connects it. */
.onb-chat{display:grid;justify-items:start;gap:var(--sp-3)}
.onb-chat .onb-help,.onb-chat .onb-alert-state{margin:0}
.onb-chat-state{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:var(--fs-md);font-weight:500;color:var(--text);overflow-wrap:anywhere}
.onb-chat-state .op-icon{flex:0 0 auto;width:18px;height:18px;color:var(--positive)}

/* Alerts and the last step. */
.onb-alerts{display:grid;justify-items:start;gap:var(--sp-3)}
.onb-alert-state{margin:0;font-size:var(--fs-md);color:var(--secondary-text)}
.onb-who{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.onb-who strong{display:block;font-size:var(--fs-lg);font-weight:500}
.onb-who span{display:block;margin-top:2px;font-size:var(--fs-md);color:var(--muted)}
.onb-tiles{--card-pad:0px;margin:0 0 var(--sp-5);border-bottom:1px solid var(--line)}
.onb-tiles .row-item{grid-template-columns:32px minmax(0,1fr) auto;gap:var(--sp-3);min-height:52px;padding-left:var(--sp-1);padding-right:var(--sp-1);cursor:pointer;transition:background var(--dur-1) var(--ease)}
.onb-tiles .row-item:hover{background:var(--surface-hover)}
.onb-tile-ico{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--secondary-text)}
.onb-tiles .row-item-aside{color:var(--muted)}
.onb-open-app{width:100%;min-height:var(--ctl-lg)}

@media (max-width:900px){
 .onb{display:block;padding:0;background:var(--bg)}
 .onb-panel{width:100%;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
 .onb-head{padding:calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) 0}
 .onb-progress{padding:var(--sp-3) var(--sp-4)}
 .onb-body{padding:var(--sp-1) var(--sp-4) var(--sp-6)}
 .onb-title{font-size:19px}
 .onb-foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));background:var(--bg)}
 .onb-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .onb-spacer{display:none}
 .onb-next{grid-column:1/-1;order:3}
 .onb-back{order:1}
 .onb-skip{order:2}
 .onb-back[hidden]+.onb-spacer+.onb-skip{grid-column:1/-1}
 .onb .btn,.profile-drawer .btn{min-height:44px}
 .onb .btn.sm,.profile-drawer .btn.sm{min-height:36px}
 .onb .onb-later{min-height:44px}
 .onb-grid{grid-template-columns:minmax(0,1fr)}
 .onb-photo{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 .onb-photo-side{justify-items:center}
 .onb-photo-actions{justify-content:center}
 .onb-cert{grid-template-columns:repeat(2,minmax(0,1fr))}
 .onb-cert-remove{grid-column:1/-1;justify-self:start;margin-top:0}
 .onb-zoom input{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.onb-bar>i{transition:none}}

/* ---- My profile drawer ---- */
.profile-drawer.call-drawer{width:min(560px,100vw);padding:0;z-index:var(--z-drawer)}
.profile-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6) var(--sp-4);background:inherit;border-bottom:1px solid var(--line)}
.profile-drawer-who{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.profile-drawer-who h2{overflow-wrap:anywhere}
.profile-drawer-who .small{margin:2px 0 0;color:var(--muted)}
.profile-drawer-head .drawer-close{flex:0 0 auto}
.profile-drawer-form{background:inherit}
.profile-drawer-body>.small,.profile-drawer-body>.empty-state{padding:var(--sp-6)}
.profile-section{padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line)}
.profile-section:first-child{border-top:0}
.profile-section>h3{margin:0 0 var(--sp-3);font-size:var(--fs-lg);font-weight:500}
.profile-section>.onb-help{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
.profile-drawer-foot{position:sticky;bottom:0;z-index:2;display:grid;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom));background:inherit;border-top:1px solid var(--line)}
.profile-drawer-buttons{display:flex;gap:var(--sp-2)}
@media (max-width:900px){
 .profile-drawer.call-drawer{width:100vw;z-index:260}
 .profile-drawer-head{padding:var(--sp-4)}
 .profile-section{padding:var(--sp-4)}
 .profile-drawer-foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom))}
 .profile-drawer-buttons .btn.primary{flex:1 1 auto}
 body.profile-drawer-open :is(.mobile-fab,.dl-tabbar){display:none!important}
}

/* ---- Personal settings drawer (prefs.js): the profile drawer's frame ---- */
.prefs-status{margin:0;padding:var(--sp-2) var(--sp-6) 0;font-size:var(--fs-sm);color:var(--secondary-text)}
.prefs-status:empty{display:none}
.prefs-status.is-bad{color:var(--critical)}
.prefs-drawer .profile-section{scroll-margin-top:96px}
.prefs-lead{margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
.prefs-help{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.prefs-sub{margin:var(--sp-5) 0 var(--sp-1)}
.prefs-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.prefs-row:last-child{border-bottom:1px solid var(--line)}
.prefs-row-text{min-width:0}
.prefs-row-text>label{font-size:var(--fs-md);font-weight:500;color:var(--text)}
.prefs-row .switch-row,.prefs-card .switch-row{flex:none}
.prefs-device{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:0 0 var(--sp-3)}
.prefs-device .prefs-help{margin:0;flex:1 1 200px}
.prefs-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.prefs-times .prefs-help{grid-column:1/-1;margin:0}
.prefs-time{display:grid;gap:6px;min-width:0}
.prefs-time>span{font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.prefs-time>input{width:100%}
.prefs-field{display:grid;gap:6px;margin-top:var(--sp-5);min-width:0}
.profile-section>h3+.prefs-field{margin-top:0}
.prefs-label{font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.prefs-field>select{width:100%}
.segment.prefs-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;overflow:visible}
.segment.prefs-seg>button{white-space:normal;text-align:center;line-height:1.2;padding:0 6px}
.segment.prefs-seg>button:disabled{opacity:.45;cursor:not-allowed}
.prefs-cards{margin:0;padding:0;list-style:none}
.prefs-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);padding:var(--sp-1) 0;border-top:1px solid var(--line)}
.prefs-card:last-child{border-bottom:1px solid var(--line)}
.prefs-card-name{min-width:0;font-weight:500}
.prefs-card.is-hidden .prefs-card-name{color:var(--muted);font-weight:400}
.prefs-card-move{display:flex;gap:var(--sp-1)}
.prefs-card-move>.btn{width:36px;padding:0}
.prefs-link{justify-self:start;min-height:40px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-size:var(--fs-md);cursor:pointer}
.prefs-link:hover{color:var(--accent-strong)}
@media (max-width:900px){
 .prefs-status{padding:var(--sp-2) var(--sp-4) 0}
 .segment.prefs-seg.cols-4{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
 .prefs-card-move>.btn{width:44px;min-height:44px}
}

/* ---- Settings › Users ---- */
.access-invite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-3)}
.access-invite .is-wide{grid-column:1/-1}
.access-field{display:grid;gap:6px;min-width:0}
.access-field>span{font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.access-field :is(input,select,textarea){width:100%}
.access-field textarea{min-height:64px;padding:8px 10px;resize:vertical}
.access-invite-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.access-invite-foot .small{margin:0;color:var(--muted)}
.access-invite-result{margin:0;font-size:var(--fs-md);color:var(--secondary-text)}
.access-invite-result:empty{display:none}
.access-invite-result.is-bad{color:var(--critical)}
.access-table{width:100%;border-collapse:collapse}
.access-person{display:flex;align-items:center;gap:var(--sp-3);min-width:240px}
.access-table :is(.access-cell-status,.access-actions){white-space:nowrap}
.access-last{display:block;margin-top:4px;font-size:var(--fs-sm);color:var(--muted)}
.access-person-lines{display:grid;gap:2px;min-width:0}
.access-person-lines strong{font-weight:500;white-space:nowrap}
.access-person-lines span{font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.access-table td.access-actions{text-align:right;white-space:nowrap}
.access-actions .btn+.btn{margin-left:var(--sp-2)}
.access-table select{min-width:112px}
.access-help{margin:var(--sp-4) 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
@media (max-width:900px){
 .access-invite{grid-template-columns:minmax(0,1fr)}
 .access-invite-foot .btn{width:100%}
 .access-table thead{display:none}
 .access-table,.access-table tbody{display:block;min-width:0!important;font-size:var(--fs-md)!important}
 .access-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
 .access-table tr:last-child{border-bottom:0}
 .access-table td{display:block;padding:0;border:0}
 .access-table td.access-cell-person{grid-column:1;min-width:0}
 .access-person{min-width:0}
 .access-table .access-actions{white-space:normal}
 .access-table td.access-cell-status{text-align:right}
 .access-table td.access-cell-status{grid-column:2;align-self:start}
 .access-table td:is(.access-cell-role,.access-actions){grid-column:1/-1}
 .access-field-switch>span{display:none}
 .access-table td.access-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);text-align:left}
 .access-actions .btn{flex:1 1 auto}
 .access-actions .btn+.btn{margin-left:0}
 .access-table select{width:100%}
}

/* ---- Team chat (team-chat.js): the person's own Google Chat ----
   A drawer from the right on a computer, a full-screen sheet on a phone.
   My messages sit right on the accent wash (the chip's selected look);
   everyone else's on the inset ground, with their face and name. */
.team-chat-backdrop{position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);background:var(--scrim);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.team-chat-backdrop.open{opacity:1}
.team-chat{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);display:flex;flex-direction:column;width:min(440px,100vw);background:var(--surface-1);border-left:1px solid var(--line);box-shadow:var(--float-shadow);color:var(--text);transform:translateX(100%);transition:transform var(--dur-2) var(--ease)}
.team-chat.open{transform:none}
.team-chat-head{display:flex;align-items:center;gap:var(--sp-2);min-height:68px;padding:var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line)}
.team-chat-head-main{display:flex;align-items:center;gap:var(--sp-3);flex:1 1 auto;min-width:0}
.team-chat-head-text{min-width:0}
.team-chat-head h2{margin:0;font-size:var(--fs-lg);font-weight:500;line-height:22px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chat-head h2:focus{outline:none}
.team-chat-sub{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chat-head .btn{flex:0 0 auto;gap:6px}
.team-chat-head .btn .op-icon{width:16px;height:16px}
.team-chat-close{width:32px;padding:0;justify-content:center}
.team-chat-back{margin-left:calc(-1 * var(--sp-2));padding-left:6px}
.team-chat-notice{padding:var(--sp-3) var(--sp-4) 0}
.team-chat-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto}
.team-chat-list{display:flex;flex-direction:column}
.team-chat-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:64px;padding:var(--sp-3) var(--sp-5);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.team-chat-row:hover{background:var(--surface-hover)}
.team-chat-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.team-chat-row:disabled{opacity:.45;cursor:progress}
.team-chat-row-main{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.team-chat-row-top{display:flex;align-items:baseline;gap:var(--sp-2);min-width:0}
.team-chat-row-name{flex:1 1 auto;min-width:0;font-size:var(--fs-md);font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chat-row time{flex:0 0 auto;font-size:var(--fs-sm);color:var(--muted)}
.team-chat-row-preview{display:flex;align-items:center;gap:var(--sp-2);min-width:0;font-size:var(--fs-sm);color:var(--muted)}
.team-chat-row-preview>span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chat-row.is-unread .team-chat-row-preview>span,.team-chat-row.is-unread time{color:var(--text)}
.team-chat-connect{display:grid;justify-items:center;gap:var(--sp-2);margin:auto 0;padding:var(--sp-8) var(--sp-6);text-align:center}
.team-chat-connect-ico{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--sp-2);border-radius:var(--radius-pill);background:var(--surface-2);color:var(--secondary-text)}
.team-chat-connect-ico .op-icon{width:22px;height:22px}
.team-chat-connect strong{font-size:var(--fs-lg);font-weight:500;color:var(--text)}
.team-chat-connect p{margin:0;max-width:36ch;font-size:var(--fs-md);line-height:1.5;color:var(--secondary-text)}
.team-chat-connect .btn{margin-top:var(--sp-3)}
.team-chat-connect .team-chat-fine{margin-top:0}
.team-chat-fine{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)}
.team-chat-fine.is-bad{padding:var(--sp-2) var(--sp-5);color:var(--critical)}
.team-chat-thread{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.team-chat-thread>.msg-skel{padding:0}
.team-chat-thread>.empty-state{margin:auto 0}
.team-chat-day{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-xs);font-weight:500;color:var(--muted)}
.team-chat-day:first-child{margin-top:0}
.team-chat-day::before,.team-chat-day::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.team-chat-msg{display:flex;align-items:flex-start;gap:var(--sp-2);margin-top:var(--sp-3)}
.team-chat-msg-face{padding-top:4px}
.team-chat-msg.is-run{margin-top:3px}
.team-chat-msg.is-mine{justify-content:flex-end}
.team-chat-msg-face{flex:0 0 24px;width:24px}
.team-chat-msg-col{display:grid;justify-items:start;gap:3px;min-width:0;max-width:78%}
.team-chat-msg.is-mine .team-chat-msg-col{justify-items:end}
.team-chat-msg-name{padding:0 var(--sp-1);font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.team-chat-bubble{max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:14px;border-bottom-left-radius:var(--radius-xs);background:var(--surface-2);color:var(--text);font-size:var(--fs-md);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.team-chat-msg.is-mine .team-chat-bubble{border-color:var(--accent-line);border-radius:14px;border-bottom-right-radius:var(--radius-xs);background:var(--accent-wash)}
.team-chat-msg.is-sending .team-chat-bubble{opacity:.65}
.team-chat-msg.is-failed .team-chat-bubble{border-color:var(--critical)}
.team-chat-msg-meta{display:flex;align-items:center;gap:var(--sp-1);padding:0 var(--sp-1);font-size:var(--fs-xs);color:var(--muted)}
.team-chat-msg-meta.is-bad{color:var(--critical)}
.team-chat-msg-meta .btn.sm{height:24px;min-height:24px;padding:0 6px}
.team-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--sp-1) var(--sp-2);padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface-1)}
.team-chat-compose textarea{display:block;width:100%;height:36px;min-height:36px;max-height:140px;padding:7px 10px;line-height:20px;resize:none;overflow-y:auto}
.team-chat-send{height:36px}
.team-chat-count,.team-chat-hint{grid-column:1/-1;margin:0;font-size:var(--fs-xs);color:var(--muted)}
.team-chat-count.is-bad{color:var(--critical)}
.mobile-team-chat{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:52px;padding:0 var(--sp-4);border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:var(--fs-md);font-weight:500;text-align:left}
.mobile-team-chat-ico{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--surface-2);color:var(--secondary-text)}
.access-chat-mark{display:inline-flex!important;align-items:center;gap:4px;font-size:var(--fs-sm);color:var(--muted)}
.access-chat-mark .op-icon{width:13px;height:13px}
@media (max-width:900px){
 .team-chat{width:100vw;border-left:0;z-index:260}
 .team-chat-backdrop{z-index:259}
 .team-chat-head{min-height:56px;padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-2) var(--sp-2) var(--sp-4)}
 .team-chat-back{margin-left:calc(-1 * var(--sp-2))}
 .team-chat .btn{min-height:44px}
 .team-chat .btn.sm{min-height:36px}
 .team-chat-close{width:44px}
 .team-chat-new span{display:none}
 .team-chat-new{width:44px;padding:0;justify-content:center}
 .team-chat-row{padding:var(--sp-3) var(--sp-4)}
 .team-chat-thread{padding:var(--sp-3)}
 .team-chat-msg-col{max-width:84%}
 .team-chat-compose{padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom))}
 .team-chat-compose textarea{height:44px;min-height:44px;padding:11px 12px;font-size:16px}
 .team-chat-send{height:44px}
 .team-chat-hint{display:none}
 body.team-chat-open .mobile-fab{display:none!important}
}
@media (prefers-reduced-motion:reduce){.team-chat,.team-chat-backdrop{transition:none}}
/* ---- end onboarding ---------------------------------------------------- */

.msg-lab.problem{color:var(--critical);font-weight:600}

/* Home, Today: a stop Jobber has as completed. */
.home-done{font-size:11.5px;font-weight:600;color:var(--positive);margin-left:6px;white-space:nowrap}
.home-item.is-done .home-time,.home-item.is-done .home-iv{opacity:.6}

/* ---- Expenses (page-expenses.js) ------------------------------------------
   Receipts sent for reimbursement and the approver's list. Rows are the
   design system's .row-list; the sheet is the one window for sending,
   reading, approving and turning down: full screen on a phone (a technician
   in the truck), a centred window on a desktop. */
#page-expenses .xp-head{margin-bottom:var(--sp-5);gap:var(--sp-3);align-items:center}
#page-expenses .xp-head .op-icon{width:16px;height:16px}
.xp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack-gap);max-width:880px}
.xp-row{cursor:pointer}
.xp-row:hover{background:var(--surface-hover)}
.xp-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.xp-row-main{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.xp-reason{color:var(--secondary-text)}
.xp-thumb{display:inline-grid;place-items:center;flex:none;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);font-weight:500}
.xp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.xp-thumb.is-sm{width:40px;height:40px}
.xp-thumb.is-md{width:56px;height:56px}
.xp-thumb.is-lg{width:88px;height:112px;border-radius:var(--radius-md)}
.xp-thumb .op-icon{width:18px;height:18px}
.xp-inline-match{display:inline-flex;min-width:0;flex:1 1 200px}
.xp-inline-match select{width:100%;min-height:var(--ctl-sm);font-size:var(--fs-sm)}

.xp-sheet{position:fixed;inset:0;z-index:var(--z-drawer);display:grid;place-items:center;padding:var(--sp-6)}
.xp-sheet-scrim{position:absolute;inset:0;background:var(--scrim)}
.xp-sheet-card{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(480px,100%);max-height:min(760px,100%);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--float-shadow);overflow:hidden}
.xp-sheet.is-wide .xp-sheet-card{width:min(560px,100%)}
.xp-sheet-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-4) var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line)}
.xp-sheet-head h2{grid-column:2;margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-sheet-head h2:focus{outline:none}
.xp-sheet-back{grid-column:1}
.xp-sheet-back[hidden]+h2{grid-column:1/3}
.xp-sheet-x{grid-column:3}
.xp-sheet-body{overflow:auto;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);overscroll-behavior:contain}
.xp-sheet-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5) var(--sp-4);border-top:1px solid var(--line);background:var(--surface-1)}
.xp-sheet-foot .xp-wide{flex:1 1 auto}
body.xp-sheet-open{overflow:hidden}
.xp-step{margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--muted)}
.xp-lead{margin:0;font-size:var(--fs-md);color:var(--secondary-text)}
.xp-help,.xp-note{margin:0;color:var(--muted)}
.xp-note:empty{display:none}
.xp-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
.xp-pick-btn{position:relative;justify-content:flex-start;min-height:56px;padding:0 var(--sp-4);font-size:15px;gap:var(--sp-3)}
.xp-pick-btn:first-child{border-color:var(--accent-line);color:var(--accent)}
.xp-pick-btn .op-icon{width:20px;height:20px}
.xp-pick-btn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.xp-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.xp-pages{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.xp-page{position:relative}
.xp-page-remove{position:absolute;top:4px;right:4px;width:28px;min-height:28px!important;padding:0;background:var(--surface-1);border:1px solid var(--border-strong)}
.xp-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.xp-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3)}
.xp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.xp-field>span{font-size:var(--fs-sm);font-weight:500;color:var(--secondary-text)}
.xp-field>span em{font-style:normal;font-weight:400;color:var(--muted)}
.xp-field :is(input,select,textarea){width:100%}
.xp-field textarea{padding:8px 10px;line-height:1.45}
.xp-money{position:relative}
.xp-money>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.xp-money input{padding-left:22px;font-variant-numeric:tabular-nums}
.xp-job{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-height:var(--ctl-md);padding:0 4px 0 10px;border-radius:var(--radius-md);background:var(--surface-2);font-size:var(--fs-md)}
.xp-job span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-suggest{margin:4px 0 0;padding:4px;list-style:none;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-3);box-shadow:var(--shadow-pop)}
.xp-suggest button{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.xp-suggest button:hover,.xp-suggest button:focus-visible{background:var(--surface-hover);outline:none}
.xp-suggest b{font-weight:500;font-size:var(--fs-md)}
.xp-suggest span{font-size:var(--fs-sm);color:var(--muted)}
.xp-suggest-empty{padding:8px 10px;font-size:var(--fs-sm);color:var(--muted)}
.xp-seg{display:flex;width:100%}
.xp-seg>button{flex:1 1 0;height:34px}
.xp-error{margin:0;font-size:var(--fs-md);color:var(--critical)}
.xp-sent{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-2);text-align:center}
.xp-sent-mark{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--positive-wash);color:var(--positive)}
.xp-sent-mark .op-icon{width:28px;height:28px}
.xp-sent h3{margin:var(--sp-2) 0 0;font-size:var(--fs-xl);font-weight:600;letter-spacing:-.02em}
.xp-sent h3:focus{outline:none}
.xp-sent p{margin:0;max-width:40ch;color:var(--secondary-text)}
.xp-sent p.small{color:var(--muted)}
.xp-claim-status{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.xp-receipts{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none}
.xp-receipt{flex:none;display:grid;place-items:center;width:min(220px,62vw);height:260px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-2);color:var(--secondary-text);font:inherit;cursor:zoom-in}
.xp-receipt img{width:100%;height:100%;object-fit:contain}
.xp-receipt.is-pdf{display:flex;flex-direction:column;gap:var(--sp-2);height:120px;cursor:pointer}
.xp-receipt.is-missing,.xp-thumb.is-missing{color:var(--muted)}
.xp-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3) var(--sp-4);margin:var(--sp-2) 0 0}
.xp-facts div{min-width:0}
.xp-facts dt{font-size:var(--fs-sm);color:var(--muted)}
.xp-facts dd{margin:2px 0 0;font-size:var(--fs-md);font-weight:500;overflow-wrap:anywhere}
.xp-approve-head{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.xp-approve-head>div{display:flex;flex-direction:column;min-width:0}
.xp-approve-head b{font-weight:500}
.xp-approve-head span{font-size:var(--fs-sm);color:var(--muted)}
.xp-goes{display:flex;align-items:center;gap:var(--sp-2);margin:0;font-size:var(--fs-md);color:var(--secondary-text)}
.xp-goes .op-icon{color:var(--muted)}
.xp-quick{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.xp-lightbox{position:fixed;inset:0;z-index:calc(var(--z-drawer) + 5);display:grid;place-items:center;padding:56px var(--sp-4) var(--sp-4);background:var(--scrim)}
.xp-lightbox img{max-width:100%;max-height:100%;border-radius:var(--radius-md);background:var(--surface-1);box-shadow:var(--float-shadow)}
.xp-lightbox-close{position:absolute;top:var(--sp-3);right:var(--sp-3)}
.xp-approver-pick{display:flex;gap:var(--sp-2);align-items:center;min-width:0}
.xp-approver-pick select{min-width:200px}
.fin-reimb-dup{color:var(--warning)}
@media (max-width:900px){
 #page-expenses .xp-head{flex-wrap:wrap}
 #page-expenses .xp-head .btn.primary{width:100%;min-height:48px}
 .xp-sheet{padding:0;place-items:stretch}
 .xp-sheet-card,.xp-sheet.is-wide .xp-sheet-card{width:100%;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none}
 .xp-sheet-head{padding:calc(var(--sp-2) + env(safe-area-inset-top)) var(--sp-2) var(--sp-2) var(--sp-4)}
 .xp-sheet-body{padding:var(--sp-4)}
 .xp-sheet-foot{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));flex-wrap:wrap}
 .xp-sheet-foot .btn{flex:1 1 0;min-height:48px}
 .xp-seg>button{height:44px;min-height:44px}
 .xp-pick-btn{min-height:64px}
 .xp-receipt{height:300px}
 .xp-approver-row{flex-wrap:wrap}
 .xp-approver-pick{width:100%}
 .xp-approver-pick select{flex:1 1 auto;min-width:0}
 body.xp-sheet-open :is(.mobile-dock,.mobile-fab){visibility:hidden}
}
@media (max-width:380px){.xp-row2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
 .xp-row .row-item-aside{grid-column:1/-1;justify-self:start;padding-left:52px}
}

/* Assessment: the team's view of one house, readable on a phone in the house. */
.as-dialog{width:min(820px,calc(100vw - 16px));max-height:calc(100vh - 24px)}
.as-dialog .journey-dialog-body{overflow:auto;max-height:calc(100vh - 110px)}
.as{display:grid;gap:var(--sp-4)}
.as-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3)}
.as-name{font-size:18px;font-weight:600}
.as-where,.as-contact{color:var(--secondary-text);font-size:14px}
.as-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.as-badge{border:1px solid var(--border-strong);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:600}
.as-badge.is-high{color:var(--critical);border-color:var(--critical)}
.as-badge.is-mid{color:var(--warning);border-color:var(--warning)}
.as-badge.is-low{color:var(--positive);border-color:var(--positive)}
.as-sec h3{margin:0 0 var(--sp-2);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary-text)}
.as-check{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.as-check label{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.35}
.as-check input{margin-top:3px;width:18px;height:18px;flex:none}
.as-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:0}
.as-facts div{border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.as-facts dt{font-size:12px;color:var(--secondary-text)}
.as-facts dd{margin:2px 0 0;font-weight:600;display:flex;flex-direction:column}
.as-facts dd small{font-weight:400;font-size:11px;color:var(--muted)}
.as-facts .is-ask dd{color:var(--warning)}
.as-diff{font-weight:400;font-size:12px;color:var(--warning)}
.as-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.as-photos a{display:grid;gap:4px;color:inherit;text-decoration:none;font-size:12px}
.as-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--surface-2)}
.as-table{width:100%;border-collapse:collapse;font-size:14px}
.as-table th,.as-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
.as-note{margin:4px 0;font-size:14px;color:var(--secondary-text)}
.as-note.is-problem{color:var(--critical);font-weight:600}
.as-price{border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.as-price-fig{font-size:24px;font-weight:700}
.as-private{margin-top:6px;font-size:12px;color:var(--muted)}
.as-sketch{display:grid;gap:8px;justify-items:start}
.as-sketch-canvas{width:100%;height:auto;border-radius:10px}
.as-warn{margin:0;padding-left:18px;font-size:13px;color:var(--warning)}
.as-to-quote{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.as-facts .is-guess dd small{color:var(--warning)}

/* ===== UI add-ons (app/delight.js) ===== */
.dl-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999}
.dl-peek{position:fixed;z-index:900;background:var(--surface-1);color:var(--text);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--float-shadow);padding:12px 14px;display:grid;gap:6px;animation:dl-pop .14s ease-out}
.dl-peek-load{font-size:13px;color:var(--secondary-text)}
.dl-peek-name{font-weight:700;font-size:16px}
.dl-peek-sub{font-size:13px;color:var(--secondary-text)}
.dl-peek-facts{display:flex;flex-wrap:wrap;gap:6px}
.dl-chip{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:1px 8px;color:var(--secondary-text)}
.dl-chip.is-high{color:var(--critical);border-color:var(--critical);font-weight:600}
.dl-chip.is-mid{color:var(--warning);border-color:var(--warning);font-weight:600}
.dl-chip.is-low{color:var(--positive);border-color:var(--positive);font-weight:600}
.dl-peek-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
[data-peek-phone],[data-peek-property],[data-peek-client]{cursor:default;text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
[data-peek-phone]:hover,[data-peek-property]:hover,[data-peek-client]:hover{text-decoration-color:var(--muted)}
@keyframes dl-pop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.dl-rings{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px}
.dl-ring{display:flex;align-items:center;gap:8px}
.dl-ring div{display:grid;line-height:1.15}
.dl-ring b{font-size:17px}
.dl-ring span{font-size:12px;color:var(--secondary-text)}
.dl-ring-arc{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.dl-ring.is-closed svg{filter:drop-shadow(0 0 5px var(--positive))}
.dl-ring-calls{padding:6px 12px;border:1px solid var(--border);border-radius:12px}
.dl-today-map{margin-top:14px}
.dl-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--secondary-text)}
.dl-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.dl-map{height:300px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.dl-map-tall{height:min(70vh,620px)}
.dl-wide{width:min(980px,calc(100vw - 16px))}
.dl-toasts{position:fixed;top:14px;right:14px;z-index:950;display:grid;gap:8px;width:min(340px,calc(100vw - 28px))}
.dl-toast{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--border-strong);background:var(--surface-1);color:var(--text);border-radius:14px;padding:10px 12px;box-shadow:var(--float-shadow);cursor:pointer;transform:translateX(120%);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.dl-toast.in{transform:none;opacity:1}
.dl-toast span{display:grid;gap:2px}
.dl-toast small{color:var(--secondary-text);font-size:12px}
.dl-toast.is-quote_approved,.dl-toast.is-paid,.dl-toast.is-test_passed{border-color:var(--positive)}
.dl-toast.is-lab_problem{border-color:var(--critical)}
.dl-ba{display:grid;gap:8px;padding:4px 0}
.dl-ba-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:14px}
.dl-ba-row i{display:block;height:12px;border-radius:6px}
.dl-ba-row i.is-before{background:var(--critical)}
.dl-ba-row i.is-after{background:var(--positive)}
.dl-ba-row small{color:var(--secondary-text)}
.dl-ba-drop{font-size:15px;color:var(--positive)}
.kanban-card{transition:transform .12s ease-out}
.kanban-card.dl-swipe-call{box-shadow:inset 6px 0 0 var(--positive)}
.kanban-card.dl-swipe-snooze{box-shadow:inset -6px 0 0 var(--warning)}
.dl-pull{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:960;background:var(--surface-1);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;box-shadow:var(--float-shadow)}
.dl-tabbar{display:none}
/* One bar on a phone: the tab bar covered the older dock below 760px and the
   dock showed alone from 761 to 900px. Now the tab bar shows up to 900px and
   the dock stays out of sight (and out of reach of a stray tap) beneath it.
   It steps aside wherever the dock did: an open thread, an expense sheet. */
@media (max-width:900px){
 body.dl-has-tabbar .mobile-dock{visibility:hidden}
 body:is(.msg-thread-open,.xp-sheet-open) .dl-tabbar{display:none!important}
 .dl-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:800;background:var(--surface-1);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 .dl-tabbar button{flex:1;border:0;background:none;color:var(--secondary-text);display:grid;justify-items:center;gap:2px;font-size:11px;padding:4px 0}
 .dl-tabbar button.active{color:var(--accent)}
 .dl-tabbar svg{width:22px;height:22px}
 body.dl-has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
 .dl-toasts{top:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
}
.dl-tv{position:fixed;inset:0;z-index:1000;background:var(--surface-1);color:var(--text);overflow:auto;padding:28px 36px}
.dl-tv-exit{position:absolute;top:14px;right:18px;border:0;background:none;font-size:22px;color:var(--secondary-text);cursor:pointer}
.dl-tv-body{display:grid;gap:26px}
.dl-tv-top{display:flex;align-items:baseline;gap:20px}
.dl-tv-clock{font-size:72px;font-weight:700;letter-spacing:-.02em}
.dl-tv-date{font-size:26px;color:var(--secondary-text)}
.dl-tv-rings{display:flex;flex-wrap:wrap;gap:26px}
.dl-tv-rings .dl-ring b{font-size:30px}
.dl-tv-rings .dl-ring span{font-size:16px}
.dl-tv-rings svg{width:96px;height:96px}
.dl-tv-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:30px}
.dl-tv-cols h2{font-size:22px;margin:0 0 12px}
.dl-tv-stops,.dl-tv-wins{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dl-tv-stops li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:2px 14px;font-size:20px;padding:10px 14px;border:1px solid var(--border);border-radius:12px}
.dl-tv-stops li small{grid-column:2;font-size:15px;color:var(--secondary-text)}
.dl-tv-stops li.is-done{opacity:.5}
.dl-tv-wins li{display:grid;font-size:18px;padding:10px 14px;border-left:4px solid var(--accent);background:var(--surface-2);border-radius:8px}
.dl-tv-wins li small{color:var(--secondary-text);font-size:15px}
@media (max-width:900px){.dl-tv-cols{grid-template-columns:minmax(0,1fr)}}

/* ===== Fun and feel (app/joy.js) ===== */
/* Progress bar */
.jy-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--positive);z-index:10000;opacity:0;pointer-events:none;border-radius:0 2px 2px 0}
.jy-bar.is-on{opacity:1;animation:jyBarGrow 9s cubic-bezier(.08,.6,.2,1) forwards}
.jy-bar.is-on.is-done{animation:none;width:100%;opacity:0;transition:width .18s var(--ease),opacity .25s .15s}
@keyframes jyBarGrow{from{width:0}to{width:88%}}
/* Shimmer where a panel says "Loading…" */
.jy-wait{position:relative;color:transparent!important;min-height:58px;border-radius:var(--radius-md);overflow:hidden;
 background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hover) 50%,var(--surface-2) 75%);background-size:250% 100%;animation:skeletonSweep 1.4s ease-in-out infinite}
.jy-wait::before{content:"";position:absolute;left:14px;right:14px;top:12px;height:34px;
 background:linear-gradient(var(--line),var(--line)) 0 0/62% 9px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/38% 9px no-repeat}
.jy-wait.is-slow{min-height:80px}
.jy-wait.is-slow::after{content:attr(data-jy-line);position:absolute;left:14px;bottom:10px;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
td.jy-wait{display:table-cell}
/* Street View */
.jy-street{margin:0 0 var(--s2);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);aspect-ratio:640/280}
.jy-street img{display:block;width:100%;height:100%;object-fit:cover;animation:jyFade .4s var(--ease)}
.jy-street-peek{margin:-4px -4px 10px;border-radius:var(--radius-md)}
@keyframes jyFade{from{opacity:0}to{opacity:1}}
/* Launch splash (phone app only) */
.jy-splash{display:none}
@media (display-mode: standalone),(max-width:760px){
 .jy-splash{position:fixed;inset:0;z-index:10001;display:grid;place-content:center;justify-items:center;gap:var(--s2);background:var(--bg);transition:opacity .35s var(--ease)}
 .jy-splash img{width:84px;height:84px;border-radius:22px;animation:jyPulse 1.2s ease-in-out infinite}
 .jy-splash span{font-weight:800;letter-spacing:.24em;font-size:var(--fs-sm);color:var(--muted)}
 .auth-checked .jy-splash,.jy-splash.is-gone{opacity:0;pointer-events:none}
}
.jy-splash{animation:jySplashOut .3s 3.5s forwards}
@keyframes jySplashOut{to{opacity:0;visibility:hidden}}
@keyframes jyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* Face ID */
.auth-passkey{width:100%;margin-top:var(--s2);min-height:44px;padding:var(--s2);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface-1);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.auth-passkey:disabled{opacity:.55;cursor:wait}
.jy-dialog .journey-dialog-body{display:grid;gap:var(--s2)}
.jy-keys{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jy-keys li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-md)}
.jy-keys li span{display:grid}
.jy-keys li small{color:var(--muted)}
.jy-actions{display:flex;gap:8px;justify-content:flex-end}
/* Home: streak, podium, links */
.jy-home-extras{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;width:100%}
.jy-streak{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:var(--fs-sm);font-weight:650}
.jy-streak i{width:9px;height:12px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:var(--series-2)}
.jy-streak.is-hot{background:var(--warning-wash);color:var(--warning)}
.jy-streak.is-hot i{background:var(--warning);animation:jyFlicker 1.1s ease-in-out infinite}
@keyframes jyFlicker{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.18)}}
.jy-top{display:inline-flex;gap:8px;font-size:var(--fs-sm);color:var(--secondary-text)}
.jy-podium b{color:var(--text)}
.jy-podium.is-1 b{color:var(--warning)}
/* Recap */
.jy-recap{display:grid;gap:var(--s2)}
.jy-recap-range{font-size:var(--fs-sm);color:var(--muted);font-weight:650}
.jy-recap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:10px}
.jy-recap-fig,.jy-recap-star{display:grid;gap:2px;padding:14px;border-radius:var(--radius-lg);background:var(--surface-2);animation:jyRise .45s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.jy-recap-fig b{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.jy-recap-fig span,.jy-recap-star small{color:var(--muted);font-size:var(--fs-sm)}
.jy-recap-fig small{font-size:var(--fs-xs);color:var(--muted)}
.jy-recap-fig small.is-up{color:var(--positive)}
.jy-recap-fig small.is-down{color:var(--critical)}
.jy-recap-stars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px}
.jy-recap-star{background:var(--accent-wash)}
.jy-recap-star b{font-size:20px}
@keyframes jyRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Leaderboard */
.jy-board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jy-board li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-2);animation:jyRise .4s var(--ease) both}
.jy-board li.jy-board-empty{display:block;color:var(--muted)}
.jy-board-rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--fs-sm);background:var(--surface-1)}
.jy-board li.is-1 .jy-board-rank{background:var(--warning);color:var(--surface-1)}
.jy-board li.is-2 .jy-board-rank{background:var(--series-2);color:var(--surface-1)}
.jy-board li.is-3 .jy-board-rank{background:var(--route-1);color:var(--surface-1)}
.jy-board-name{display:grid;gap:2px;min-width:0}
.jy-board-name small{color:var(--muted)}
.jy-board-name i{display:block;height:4px;border-radius:2px;background:var(--positive);transition:width .6s var(--ease)}
.jy-board-n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.jy-check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm)}
/* Shortcuts */
.jy-keylist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jy-keylist li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;font-size:var(--fs-md)}
.jy-keylist kbd{display:inline-block;min-width:22px;padding:2px 6px;margin-right:4px;text-align:center;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-xs);background:var(--surface-2);font-family:var(--font-mono);font-size:var(--fs-xs)}
/* Basement mode */
.jy-outbox{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;padding:8px 14px;border-radius:999px;border:0;background:var(--toast-bg);color:var(--toast-ink);font:inherit;font-size:var(--fs-sm);font-weight:650;box-shadow:var(--shadow-pop);cursor:pointer}
.jy-outbox.is-offline{background:var(--warning);color:var(--surface-1)}
.dl-has-tabbar .jy-outbox{bottom:calc(76px + env(safe-area-inset-bottom))}
.jy-calm{color:var(--positive)}
/* Smooth page changes */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion: reduce){.jy-wait,.jy-splash img,.jy-streak.is-hot i,.jy-recap-fig,.jy-recap-star,.jy-board li{animation:none}}
/* Change password */
.jy-pw{display:grid;gap:12px}
.jy-pw label{display:grid;gap:4px;font-size:var(--fs-sm);font-weight:650}
.jy-pw input{min-height:40px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-1);color:var(--text);font:inherit}
.jy-pw small{font-weight:400;color:var(--muted)}
.jy-pw-error{margin:0;min-height:18px;color:var(--critical);font-size:var(--fs-sm)}
/* Riding out a server restart (index.html fetch wrapper) */
.reconnect-pill{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:10003;padding:6px 14px;border-radius:999px;background:var(--toast-bg);color:var(--toast-ink);font-size:var(--fs-sm);font-weight:650;box-shadow:var(--shadow-pop)}
/* Reliability panel (joy.js) */
.jy-rel-list h3{margin:0 0 6px;font-size:var(--fs-md)}
.jy-rel-list ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.jy-rel-list li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--surface-2);font-size:var(--fs-sm)}
.jy-rel-list li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}