/* Marrazzo Builder Portal — design system
   © Michael D. Marrazzo III. All rights reserved.

   BASIC and clean: neutral light-grey surfaces, white cards, a plain charcoal
   top bar, and ONE quiet accent used sparingly (primary action, links, active
   nav). No loud color, no art direction — deliberately plain and legible.
   Money & measurements use a mono, tabular face. Tenant color is quarantined to
   the wordmark (a 3px top marker) so it can never flood the UI. The whole app
   cascades off these tokens, so the look changes here in one place. */

:root{
  /* BASIC — clean neutral greys, white cards, one quiet accent. Deliberately
     plain: no warm kraft, no navy art-direction, nothing loud. */
  --paper:#F6F6F5; --surface:#FFFFFF; --surface-sunk:#F0F0EF;
  --hairline:#E6E6E4; --rule:#D6D6D3;
  --ink:#1C1C1A; --graphite:#45453F; --slate:#6E6E68;
  /* neutral dark for the top bar + structure (was navy; now plain charcoal) */
  --blueprint:#232321; --blueprint-2:#161614; --blueprint-wash:#ECECEA;
  /* one restrained accent — used sparingly for the primary action + links */
  --safety:#B4531F; --safety-press:#8C3E15; --safety-wash:#F5EAE1;
  /* muted, adult status — never candy */
  --go:#3E6B39; --hold:#8A6210; --stop:#9C3225;
  /* the system OWNS the accent slots; the tenant only ever paints --brand
     (the wordmark). app.css loads after the per-tenant <style>, so these win. */
  --primary:var(--blueprint); --accent:var(--safety);
  /* back-compat aliases so every existing var() reference cascades with no churn */
  --bg:var(--paper); --surface-2:var(--surface-sunk);
  --border:var(--hairline); --border-strong:var(--rule); --line:#ECECEA;
  --text:var(--ink); --muted:var(--slate); --muted-2:#9A9A94;
  --ok:var(--go); --ok-bg:#E9EFE8; --warn:var(--hold); --warn-bg:#F3EDDD;
  --danger:var(--stop); --danger-bg:#F5E6E3; --info:var(--blueprint); --info-bg:var(--blueprint-wash);
  /* type — three registers: UI sans, DATA mono (tabular), CUSTOMER serif */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --font-serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
  /* spacing (4px base grid) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;
  /* radius — 3px controls / 4px cards / 0 for tables & dividers. No rounded-everything. */
  --radius:4px; --radius-sm:3px; --radius-lg:4px;
  --shadow:none; --shadow-lg:0 6px 24px rgba(23,20,15,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:14.5px/1.55 var(--font-ui);
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* hierarchy from weight + tracking, not size explosions — 3 weights only (400/600/700) */
h1,h2,h3{font-weight:600;line-height:1.2;margin:0 0 .5rem;color:var(--ink)}
h1{font-size:1.45rem;letter-spacing:-.015em} h2{font-size:1.12rem;letter-spacing:-.01em} h3{font-size:.95rem}
code,.mono{font-family:var(--font-mono)}
/* money & measurements — mono, tabular, right-aligned figures */
.money,.num,.mono{font-variant-numeric:tabular-nums}
/* eyebrow label — the drafting-legend voice for column heads + field labels */
.eyebrow{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--slate)}
/* the customer-document lens — editorial serif (the clean "Customer Copy") */
.lens-customer{font-family:var(--font-serif)}

/* ---- Shell: a persistent left sidebar + a header/content column ----
   The sidebar carries all navigation (>=900px); the header stays light and
   minimal (search + who). Tenant color is quarantined to a 3px top marker on
   the sidebar/pubbar and the wordmark fill — never an everywhere fill. */
.shell{display:flex;align-items:stretch;min-height:100vh}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column}

.sidenav{
  width:222px;flex:0 0 auto;background:var(--surface);color:var(--ink);
  border-right:1px solid var(--hairline);border-top:3px solid var(--brand,var(--blueprint));
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  transition:width .15s ease;
}
.sidenav-top{display:flex;align-items:center;gap:.4rem;padding:.85rem .8rem .8rem;margin-bottom:.2rem}
.sidenav-top .brand{flex:1;min-width:0}
.sidenav-toggle{background:none;border:none;color:var(--slate);padding:.3rem;border-radius:var(--radius-sm);cursor:pointer;flex:0 0 auto;line-height:0}
.sidenav-toggle:hover{background:var(--surface-sunk);color:var(--ink)}
.sidenav-toggle .icn{width:18px;height:18px}
.sidenav-links{padding:0 .6rem;display:flex;flex-direction:column;gap:1px}
.sidenav-admin{margin-top:auto;padding:.6rem .6rem .8rem;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:1px}
.sn-link{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:var(--radius);color:var(--graphite);font-weight:500;font-size:.89rem;white-space:nowrap}
.sn-link:hover{background:var(--surface-sunk);text-decoration:none;color:var(--ink)}
.sn-link.on{background:var(--safety-wash);color:var(--safety-press);font-weight:600}
.sn-link .sn-ic{flex:0 0 auto;width:19px;height:19px;display:flex}
.sn-link .sn-ic .icn{width:19px;height:19px}
html.nav-collapsed .sidenav{width:60px}
html.nav-collapsed .sidenav-top{justify-content:center;padding:.85rem .4rem .8rem}
html.nav-collapsed .sidenav-top .brand{flex:0 0 auto}
html.nav-collapsed .sidenav-top .brand-name,html.nav-collapsed .sidenav-top .sidenav-toggle{display:none}
html.nav-collapsed .sn-link{justify-content:center;padding:.55rem}
html.nav-collapsed .sn-link .lbl{display:none}
html.nav-collapsed .sidenav:hover .sidenav-top .sidenav-toggle{display:inline-flex}

.topbar,.pubbar{
  display:flex;align-items:center;gap:.85rem;
  background:var(--surface);color:var(--ink);padding:.6rem 1rem;
  border-bottom:1px solid var(--hairline);
}
.pubbar{border-top:3px solid var(--brand,var(--blueprint))}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink)}
.brand-name{white-space:nowrap;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis}
.logo{height:24px;width:auto;display:block}
.logo-mark{display:inline-flex}
.lmk{width:20px;height:20px;fill:var(--brand,var(--blueprint));stroke:none;display:block}
.app-header .brand{display:none;flex:1 1 auto;min-width:0}   /* the sidebar already shows it at >=900px (scoped — NOT the settings branding-preview .topbar) */
.search-trigger{
  display:flex;align-items:center;gap:.55rem;flex:1;max-width:420px;
  background:var(--surface-sunk);border:1px solid var(--hairline);color:var(--slate);
  padding:.42rem .65rem;border-radius:var(--radius);cursor:pointer;font:inherit;text-align:left;
}
.search-trigger:hover{border-color:var(--rule);color:var(--ink)}
.search-trigger .icn{width:16px;height:16px;flex:0 0 auto}
.search-trigger .st-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.search-trigger .kbd{flex:0 0 auto;font-size:.68rem;font-family:var(--font-mono);color:var(--slate);background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:.05rem .32rem}
/* Account: one avatar button → a menu (name/role, dev-switch, sign out).
   Keeps role/name/sign-out OUT of the bar the way real dashboards do. */
.acct{position:relative;flex:0 0 auto}
.acct-btn{position:relative;background:none;border:none;padding:0;cursor:pointer;line-height:0;border-radius:50%}
.acct-btn:focus-visible{outline:2px solid var(--brand,var(--blueprint));outline-offset:2px}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--brand,var(--blueprint));color:#fff;font-size:.76rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.acct-btn:hover .avatar{filter:brightness(1.08)}
.avatar-lg{width:38px;height:38px;font-size:.9rem}
.acct-dot{position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--safety);border:2px solid var(--surface)}
.acct-menu{position:absolute;right:0;top:calc(100% + .5rem);width:236px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.35rem;z-index:70;animation:acctpop .12s ease}
.acct-menu[hidden]{display:none}
@keyframes acctpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.acct-id{display:flex;align-items:center;gap:.6rem;padding:.55rem .55rem .6rem}
.acct-id-txt{display:flex;flex-direction:column;min-width:0}
.acct-id-txt strong{font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-role{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);font-weight:600}
.acct-sep{height:1px;background:var(--hairline);margin:.15rem .2rem .3rem}
.acct-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .55rem;border-radius:var(--radius-sm);color:var(--ink);font-size:.9rem;font-weight:500}
.acct-item:hover{background:var(--surface-sunk);text-decoration:none}
.acct-item .icn{width:17px;height:17px;color:var(--slate);flex:0 0 auto}
.acct-item span{display:flex;flex-direction:column;line-height:1.25}
.acct-item small{font-size:.68rem;color:var(--slate);font-weight:500}
.acct-item.dev,.acct-item.dev .icn{color:var(--safety-press)}
.acct-item.dev small{color:var(--safety-press);opacity:.8}
.tabbar{display:none}
/* demo/beta strip — slim, dismissible (persisted). Liability is really captured
   at registration + in the Terms; this is the always-there reminder. */
.demobar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--safety-wash);color:var(--safety-press);font-size:.76rem;line-height:1.3;padding:.34rem 1rem;border-bottom:1px solid var(--hairline)}
.demobar a{color:inherit;text-decoration:underline;font-weight:700}
.demobar-x{background:none;border:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 .25rem;opacity:.65;flex:0 0 auto}
.demobar-x:hover{opacity:1}
html.demo-ack .demobar{display:none}
/* deal-board (quotes list) row actions */
.row-actions{white-space:nowrap}
button.act{background:none;border:none;cursor:pointer;font:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--safety);padding:0}
.act:hover,button.act:hover{text-decoration:underline}
.act.muted{color:var(--slate)}
.act-sep{color:var(--rule);margin:0 .05rem}
.tag.sent{color:var(--blueprint)}
.tag.draft{color:var(--slate)}
.card.hl{border-color:var(--safety);box-shadow:0 0 0 1px var(--safety)}
/* win moment — a tasteful count-up when a deal is won (green = won, "never candy") */
.winbar{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;animation:winpop .5s cubic-bezier(.2,.9,.3,1.2)}
.winbar-in{display:flex;align-items:center;gap:.7rem;background:var(--go);color:#fff;padding:.65rem 1rem .65rem 1.1rem;border-radius:999px;box-shadow:var(--shadow-lg)}
.winbar-k{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;opacity:.85}
.winbar-amt{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.winbar-who{font-size:.85rem;opacity:.9;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.winbar-x{background:none;border:none;color:#fff;opacity:.7;cursor:pointer;font-size:1.15rem;line-height:1;padding:0 .1rem}
.winbar-x:hover{opacity:1}
.winbar.leaving{animation:winout .4s ease forwards}
@keyframes winpop{0%{transform:translateX(-50%) translateY(22px) scale(.9);opacity:0}60%{transform:translateX(-50%) translateY(-4px) scale(1.02)}100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes winout{to{transform:translateX(-50%) translateY(22px);opacity:0}}

/* ---- Search palette (Cmd/Ctrl+K) ---- */
.cmdk{position:fixed;inset:0;z-index:80;display:none}
.cmdk.open{display:block}
.cmdk-scrim{position:absolute;inset:0;background:rgba(20,18,15,.4);animation:cmdkfade .12s ease}
.cmdk-panel{position:absolute;left:50%;top:14%;transform:translateX(-50%);width:min(560px,92vw);max-height:70vh;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:cmdkslide .15s ease}
@keyframes cmdkfade{from{opacity:0}to{opacity:1}}
@keyframes cmdkslide{from{transform:translateX(-50%) translateY(-8px);opacity:.4}to{transform:translateX(-50%) translateY(0);opacity:1}}
.cmdk-input-wrap{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--hairline)}
.cmdk-input-wrap .icn{width:18px;height:18px;color:var(--slate);flex:0 0 auto}
.cmdk-input-wrap input{border:none;padding:0;font-size:1rem;flex:1;background:transparent}
.cmdk-input-wrap input:focus{outline:none}
.cmdk-esc{font-size:.68rem;font-family:var(--font-mono);color:var(--slate);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:3px;padding:.1rem .35rem}
.cmdk-results{overflow-y:auto;padding:.4rem}
.cmdk-empty{padding:1.1rem .6rem;text-align:center;font-size:.88rem}
.cmdk-row{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:var(--radius);color:inherit}
.cmdk-row:hover,.cmdk-row.sel{background:var(--surface-sunk);text-decoration:none}
.cmdk-row.sel{box-shadow:inset 2px 0 0 var(--safety)}
.cmdk-grp{flex:0 0 auto;width:64px;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--slate);font-weight:600}
.cmdk-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cmdk-t{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-s{font-size:.78rem;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Layout ---- */
.app,.public{max-width:1100px;margin:0 auto;padding:1.25rem 1rem 3rem}
.public{max-width:720px}
.grid{display:grid;gap:var(--sp-4)}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.cols-2,.cols-3{grid-template-columns:1fr}}

.icn{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
/* small "opens in new tab" arrow that rides inline with link text (no emoji glyph) */
.ext-ic{width:.72em;height:.72em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.02em;margin-left:.15em}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4)}
.card+.card{margin-top:var(--sp-4)}
.card h2,.card h3{margin-top:0}
.muted{color:var(--muted)}
.right{text-align:right}
/* status = small-caps text + a 7px dot (muted go/hold/stop), never a pill */
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:0;border:none;background:none;border-radius:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--slate)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.tag.new{color:var(--hold)}
.tag.won,.tag.done,.tag.complete{color:var(--go)}
.tag.lost{color:var(--stop)}
.tag.open,.tag.assigned{color:var(--blueprint)}

/* ---- Page header primitive (EVERY app page uses this) ---- */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.page-head .ph-l{min-width:0}
.page-head h1{margin:0}
.page-head .ph-sub{color:var(--slate);font-size:.9rem;margin-top:.2rem}
.page-head .back{display:inline-block;font-size:.85rem;color:var(--muted);margin-bottom:.15rem}
.page-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---- Section subnav (tabs) — catalog etc. ---- */
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--hairline);margin-bottom:var(--sp-4);overflow-x:auto}
.tabs a{padding:.5rem .75rem;color:var(--slate);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);border-bottom-color:var(--safety)}

/* ---- Table action link (replaces lowercase "edit/open/view") ---- */
.act{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--safety);white-space:nowrap}

/* ---- Measured widths — forms never sprawl the full container ---- */
.measure{max-width:720px}
.measure-narrow{max-width:560px}

/* ---- Quiet editable grid (parts editor): inputs calm until touched ---- */
.grid-edit input,.grid-edit select{background:transparent;border-color:transparent;padding:.35rem .45rem}
.grid-edit input:hover,.grid-edit select:hover{border-color:var(--hairline)}
.grid-edit input:focus,.grid-edit select:focus{background:var(--surface);border-color:var(--safety)}
.grid-edit input.num{text-align:right;font-family:var(--font-mono)}
.grid-edit .btn,.grid-edit button{visibility:hidden}
.grid-edit tr:hover .btn,.grid-edit tr:hover button,.grid-edit tr:focus-within .btn,.grid-edit tr:focus-within button{visibility:visible}

/* ---- Color input: a real swatch, not a broken line ---- */
input[type=color]{width:52px;height:34px;padding:2px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.fieldset-sep{height:1px;background:var(--hairline);margin:1.3rem 0 1.1rem}
.swatch-row{display:flex;align-items:center;gap:.6rem}
.swatch-row .hex{font-family:var(--font-mono);color:var(--graphite);font-size:.85rem}

/* ---- Key/value list (replaces th/td row-label tables) ---- */
.kv{display:flex;flex-direction:column}
.kv>div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.kv>div:last-child{border-bottom:none}
.kv dt,.kv .k{color:var(--muted);font-weight:600;font-size:.82rem}
.kv dd,.kv .v{margin:0;text-align:right}

/* ---- Empty state (left-aligned: one sentence + one action, no hero circle) ---- */
.empty{text-align:left;color:var(--slate);padding:var(--sp-4) 0}
.empty .ic{display:none}
.empty p{margin:0 0 var(--sp-3)}

/* ---- Flash banner ---- */
.flash{border-radius:var(--radius);padding:.7rem 1rem;margin-bottom:var(--sp-4);font-weight:600;display:flex;align-items:center;gap:.5rem;border:1px solid}
.flash.ok{background:var(--ok-bg);border-color:#a5d6a7;color:#1f5c23}
.flash.error{background:var(--danger-bg);border-color:#e6a39c;color:#9a3128}

/* ---- Forms ---- */
label{display:block;font-weight:600;margin:.7rem 0 .2rem;font-size:.85rem}
input,select,textarea{
  width:100%;padding:.55rem .65rem;border:1px solid var(--border-strong);background:var(--surface);font:inherit;border-radius:var(--radius-sm);color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.inline{display:flex;gap:.5rem;align-items:center}
.inline input[type=checkbox]{width:auto}
.row,.field-grid{display:flex;gap:.75rem;flex-wrap:wrap}
.row>div,.field-grid>div{flex:1;min-width:150px}
.form-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-3)}
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;font:inherit;font-weight:600;
  padding:.55rem 1rem;border:1px solid var(--ink);background:var(--ink);color:var(--surface);border-radius:var(--radius-sm);
  transition:background .12s,border-color .12s,transform .05s;
}
button:hover,.btn:hover{background:#000;border-color:#000;text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
/* One clear keyboard-focus ring across every interactive element (A+ keyboard nav). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.sn-link:focus-visible,.tab:focus-visible,.act:focus-visible,.link:focus-visible,.opt-card:focus-visible,.workcard:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--safety);outline-offset:2px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Native-app feel (installed PWA / touch) ----
   Kills the browser tells — grey tap-flash, rubber-band overscroll, long-press
   callout, accidental text-selection on chrome — while keeping content + inputs
   selectable. Respects notch safe-areas so nothing hides under the camera. */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
.sidenav,.topbar,.pubbar,.tabbar,.nav-sheet,.acct,.search-trigger,button,.btn,.tab,.sn-link,.opt-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.app,.public,.card,.qline,input,textarea,select,[contenteditable]{-webkit-user-select:auto;user-select:auto}
.topbar,.pubbar{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
@media(max-width:899px){
  .app-header{position:sticky;top:0;z-index:40}   /* the header stays put like a real app */
  .tabbar{padding-bottom:max(.15rem,env(safe-area-inset-bottom))}
  .app{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
}

/* secondary — paper with an ink hairline (outline-on-paper) */
.btn.ghost,button.ghost{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover,button.ghost:hover{background:var(--surface-sunk);border-color:var(--ink)}
/* the ONE primary action per view — solid safety */
.btn.accent,button.accent{background:var(--safety);border-color:var(--safety);color:#fff}
.btn.accent:hover,button.accent:hover{background:var(--safety-press);border-color:var(--safety-press)}
.btn.sm,button.sm{padding:.35rem .7rem;font-size:.82rem}
.btn.block{width:100%}
.btn.danger,button.danger{background:var(--stop);border-color:var(--stop);color:#fff}
.btn.danger:hover,button.danger:hover{background:#7f2820;border-color:#7f2820}
/* tertiary — safety text link */
.link,.linklike,.btn.link,button.link{background:none;border:none;color:var(--safety);cursor:pointer;padding:0;font:inherit;font-weight:600}
.link:hover,.linklike:hover{text-decoration:underline;filter:none;background:none}

/* ---- Tables ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:.5rem .55rem;border-bottom:1px solid var(--line)}
th{background:var(--surface-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* responsive: below 640px, .table--cards collapses each row into a stacked card */
@media(max-width:640px){
  .table--cards thead{position:absolute;left:-9999px}
  .table--cards tr{display:block;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:var(--sp-2);padding:.4rem .7rem;background:var(--surface)}
  .table--cards td{display:flex;justify-content:space-between;gap:1rem;border:none;padding:.3rem 0;text-align:right}
  .table--cards td::before{content:attr(data-label);color:var(--muted);font-weight:600;text-align:left}
  .table--cards td[data-label=""]::before{content:none}
  .table--cards td.num{text-align:right}
  .table--cards td.cardfull{display:block;text-align:left;padding:.3rem 0}
  .table--cards td.cardfull::before{content:none}
}

/* ---- Estimate output ---- */
.estimate .total{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.lede{font-size:1.05rem;margin:.25rem 0 1rem}
.next-steps{margin:.25rem 0 0;padding-left:1.25rem}
.next-steps li{margin:.35rem 0;line-height:1.4}
.intake-list{margin:.25rem 0 0;padding-left:1.1rem}
.intake-list li{margin:.2rem 0}
.pill-kind{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;padding:.1rem .4rem;border-radius:3px;font-weight:600}
.pill-kind.product{background:var(--surface-sunk);color:var(--graphite)}
.pill-kind.service{background:var(--safety-wash);color:var(--safety-press)}
.itemform{margin-top:.5rem;background:var(--surface-sunk);padding:.75rem;border:1px solid var(--hairline);border-radius:4px}

/* ---- New Quote: clean list + add-item sheet (app-like) ---- */
.qb-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.tpl-sel{padding:.5rem .6rem;border:1px solid #ccc;border-radius:6px;background:#fff;font:inherit;max-width:60%}
.qb-card{padding:1rem 1.1rem}
.qlines{display:flex;flex-direction:column}
.qline{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid #eee}
.qline:first-child{padding-top:.2rem}
.ql-main{flex:1;min-width:0}
.ql-name{font-weight:600;line-height:1.2}
.ql-sub{font-size:.78rem;margin-top:.1rem}
.ql-qty{display:flex;align-items:center;gap:.3rem}
.ql-qty button{width:32px;height:32px;padding:0;font-size:1.2rem;line-height:1;border:1px solid #d5d5d0;background:#f6f6f4;border-radius:8px;cursor:pointer;color:#333}
.ql-qty button:active{background:#e8e8e4}
.ql-qty b{min-width:1.2rem;text-align:center;font-variant-numeric:tabular-nums}
.ql-price{width:92px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ql-ic{width:30px;height:30px;padding:0;border:none;background:none;color:#b3b3ad;cursor:pointer;font-size:1.1rem;border-radius:6px}
.ql-ic:hover{color:#c0392b;background:#f6f6f4}
.qb-add{width:100%;margin-top:.9rem;padding:.85rem;font-size:1rem;font-weight:600;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-lg);cursor:pointer}
.qb-add:hover{background:var(--surface-sunk);border-color:var(--ink)}
.qb-add:active{transform:translateY(1px)}
.qb-empty{text-align:left;color:var(--slate);padding:1rem 0 .5rem}
.qbe-ic{display:none}
.qb-summary{margin-top:1.1rem;border-top:2px solid #ececea;padding-top:.7rem}
.qs-row{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;font-variant-numeric:tabular-nums}
.qs-row.total{font-size:1.3rem;font-weight:700;border-top:2px solid var(--rule);padding:.55rem 0 .2rem;margin:.35rem 0 0;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.qs-margin{margin-top:.5rem;background:none;border:none;padding:0;font:inherit;font-size:.82rem;color:#777;cursor:pointer;text-align:left}
.qs-detail{margin-top:.5rem;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:.6rem}
.qsd-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:.8rem;color:#555;padding:.3rem 0;border-bottom:1px solid #f0f0ee}
.qsd-row:last-child{border-bottom:none}
.qsd-name{flex:1;min-width:8rem;font-weight:600;color:#333}
.qsd-row input{width:66px;padding:.2rem .3rem;border:1px solid #ddd;border-radius:4px;font-variant-numeric:tabular-nums}
.linklike{border:none;background:none;color:var(--accent);cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.qb-cust .qb-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.qb-cust .qb-actions button{padding:.7rem 1.1rem}

/* bottom sheet + preview */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet-scrim{position:absolute;inset:0;background:rgba(20,20,20,.45);animation:qbfade .15s ease}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:qbslide .2s ease}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.1rem .6rem;border-bottom:1px solid var(--hairline)}
.sheet-head strong{font-size:1.05rem}
.sheet-done{background:var(--safety);color:#fff;border:none;border-radius:var(--radius-sm);padding:.5rem 1rem;font-weight:600;cursor:pointer}
.sheet-body{padding:.8rem 1.1rem 1.3rem;overflow-y:auto}
.sheet-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.cat-search{width:100%;padding:.7rem .8rem;font-size:1rem;border:1px solid #ccc;border-radius:8px}
.cat-group{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#999;margin:.7rem 0 .15rem;font-weight:700}
.catrow{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:.8rem .8rem;cursor:pointer;font:inherit;color:inherit}
.catrow:hover{border-color:var(--ink);background:var(--surface-sunk)}
.catrow:active{transform:translateY(1px)}
.catrow.inq{border-color:var(--go);background:#E7EDE3}
.cr-name{flex:1;font-weight:600}
.cr-price{color:var(--graphite);font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-price small{color:var(--slate);font-weight:400}
.cr-plus{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:var(--radius-sm);font-size:1.2rem;line-height:1}
.catrow.inq .cr-plus{background:var(--go)}
.preview-panel{max-width:520px;margin:0 auto}
.preview-body{padding:1.1rem 1.2rem 1.6rem;overflow-y:auto}
.pv-doc{max-width:460px;margin:0 auto;font-family:var(--font-serif)}
.pv-co{font-weight:700;font-size:1.2rem}
.pv-h{color:var(--slate);margin:.1rem 0 .9rem}
.pv-line{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.pv-line.pv-total{font-weight:700;font-size:1.2rem;border-bottom:none;border-top:2px solid var(--rule);margin-top:.3rem}
.pv-notes{margin-top:.8rem;padding:.6rem .7rem;background:var(--surface-sunk);border-radius:var(--radius);font-size:.9rem}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(1rem);background:var(--ink);color:var(--surface);padding:.6rem 1.1rem;border-radius:var(--radius);font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:70}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@keyframes qbslide{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes qbfade{from{opacity:0}to{opacity:1}}
/* iPad / wide: center the sheet as a card, roomier quote */
@media(min-width:768px){
  .sheet-panel{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:560px;max-height:80vh;border-radius:16px}
  @keyframes qbslide{from{transform:translate(-50%,-46%);opacity:.6}to{transform:translate(-50%,-50%);opacity:1}}
  .qb-card,.qb-cust{max-width:760px}
}
.estimate .sub,.costbox .sub{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px solid var(--line)}
.costbox .sub{border-bottom-color:rgba(255,255,255,.12)}
.pill{font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.costbox{background:var(--ink);color:#EFECE4;padding:1rem;border-radius:var(--radius-lg)}
.costbox .total{color:#fff;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.costbox .muted{color:#a9a39a}

/* ---- Feedback widget ---- */
.fb-btn{position:fixed;right:14px;bottom:14px;z-index:40}
.notice{padding:.6rem .8rem;border:1px solid var(--hairline);border-left:2px solid var(--safety);background:var(--surface);margin:.5rem 0}
.error{border-color:var(--stop);background:var(--danger-bg)}
.ok{border-color:var(--go);background:var(--ok-bg)}

/* ---- Footer ---- */
.foot{max-width:1100px;margin:0 auto;padding:1.5rem 1rem;color:var(--slate);font-size:.78rem;border-top:1px solid var(--hairline)}
.foot .dot{margin:0 .4rem}
.foot a{color:var(--slate);text-decoration:underline;margin-left:.5rem}
.foot .ver{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2)}
/* centered error / not-found card (used by 404s, forbidden, invalid links) */
.simple-wrap{min-height:58vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.simple-card{max-width:440px;width:100%;text-align:center}

/* ---- Auth ---- */
.authwrap{max-width:360px;margin:8vh auto;padding:0 1rem}
.authwrap .card{padding:1.5rem}

/* ---- Professional quote document ---- */
.quote-doc{max-width:820px;margin:1.5rem auto;background:var(--surface);border:1px solid var(--rule);font-family:var(--font-serif)}
.quote-doc .inner{padding:2.25rem 2.5rem}
.qd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;border-bottom:2px solid var(--rule);padding-bottom:1rem;margin-bottom:1.25rem}
.qd-head .co-logo{max-height:56px;width:auto;margin-bottom:.5rem;display:block}
.qd-head .co-name{font-size:1.35rem;font-weight:700;color:var(--primary)}
.qd-head .co-meta{font-size:.8rem;color:#555;line-height:1.5}
.qd-head .doc-label{text-align:right}
.qd-head .doc-label .word{font-size:1.5rem;font-weight:700;letter-spacing:.08em;color:var(--primary)}
.qd-head .doc-label .meta{font-size:.8rem;color:#555;margin-top:.25rem;line-height:1.6}
.qd-parties{display:flex;justify-content:space-between;gap:2rem;margin-bottom:1.25rem}
.qd-parties .block{flex:1}
.qd-parties .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#888;margin-bottom:.25rem}
.qd-parties .val{font-size:.9rem;line-height:1.5}
.qd-scope{background:var(--surface-sunk);border:1px solid var(--hairline);padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.9rem}
.qd-scope b{color:var(--primary)}
.qd-total-row{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--primary);margin-top:1rem;padding-top:.75rem}
.qd-total-row .lbl{font-size:1rem;font-weight:600}
.qd-total-row .amt{font-size:1.9rem;font-weight:700;color:var(--blueprint);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.qd-fine{font-size:.75rem;color:#777;margin-top:.35rem}
.qd-terms{margin-top:1.5rem;font-size:.78rem;color:#555;line-height:1.6;border-top:1px solid #e6e6e2;padding-top:1rem}
.qd-sign{display:flex;gap:2rem;margin-top:1.75rem}
.qd-sign .line{flex:1;border-top:1px solid #333;padding-top:.35rem;font-size:.75rem;color:#666}
.qd-foot{text-align:center;font-size:.72rem;color:#999;margin-top:1.75rem;border-top:1px solid #e6e6e2;padding-top:.75rem}
.qd-actions{max-width:820px;margin:0 auto 2rem;display:flex;gap:.5rem}

/* ---- Client project stage stepper ---- */
.stepper{list-style:none;display:flex;padding:0;margin:.25rem 0 1rem;counter-reset:none;overflow-x:auto}
.stepper .stp{flex:1;min-width:80px;text-align:center;position:relative;padding-top:1.6rem;font-size:.78rem;color:#999}
.stepper .stp .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:#d8d8d4;border:2px solid #d8d8d4;z-index:2}
.stepper .stp::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:3px;background:#d8d8d4;z-index:1}
.stepper .stp:first-child::before{display:none}
.stepper .stp.done{color:#555}
.stepper .stp.done .dot,.stepper .stp.done::before{background:var(--accent);border-color:var(--accent)}
.stepper .stp.now .dot{background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.stepper .stp.now{color:var(--primary);font-weight:700}
.stepper .stp.now::before{background:var(--accent)}
.stepper .stp .nm{display:block;padding:0 .2rem}
.stage-now{background:var(--surface-sunk);border-left:2px solid var(--safety);padding:.75rem 1rem;font-size:.95rem}

/* ---- Guided quote wizard (public) ---- */
.wiz{max-width:560px;margin:1.5rem auto}
.wiz-progress{height:6px;background:#e2e2de;border-radius:3px;overflow:hidden;margin-bottom:1.5rem}
.wiz-bar{height:100%;width:0;background:var(--accent);transition:width .25s ease}
.wiz-step{background:#fff;border:1px solid #d8d8d4;padding:2rem}
.wiz-count{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#999;margin-bottom:.5rem}
.wiz-title{font-size:1.5rem;line-height:1.25;margin:0 0 .4rem}
.wiz-help{color:#666;font-size:.95rem;margin:0 0 1.25rem}
.wiz-ctrl{margin-bottom:1.5rem}
.opt-card{display:flex;flex-direction:column;width:100%;text-align:left;background:#fff;color:#1b1b1b;border:2px solid #d8d8d4;padding:1rem 1.1rem;margin-bottom:.6rem;cursor:pointer;font:inherit;border-radius:3px;transition:border-color .12s,background .12s}
.opt-card:hover{border-color:var(--ink);background:var(--surface-sunk)}
.opt-card.on{border-color:var(--accent);background:var(--safety-wash)}
.opt-card .opt-label{font-weight:600;font-size:1.02rem}
.opt-card .opt-sub{color:#888;font-size:.82rem;margin-top:.15rem}
.opt-row{display:flex;gap:.6rem}
.opt-row .opt-card{align-items:center;text-align:center;font-weight:600}
.big-input{display:flex;align-items:baseline;gap:.5rem;border-bottom:3px solid var(--accent);padding:.25rem 0}
.big-input input{font-size:2.2rem;font-weight:700;border:none;padding:0;width:100%;background:transparent}
.big-input input:focus{outline:none}
.big-input .unit{font-size:1rem;color:#888;white-space:nowrap}
.gatewiz{border:1px solid var(--hairline)}
.gaterow{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.gaterow:last-child{border-bottom:none}
/* qty stepper (wizard gates) — renamed from .stepper, which collided with the
   client-portal stage stepper and cross-contaminated both */
.qty-stepper{display:flex;align-items:center;gap:.9rem}
.qty-stepper button{width:34px;height:34px;padding:0;font-size:1.2rem;line-height:1;background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
.qty-stepper b{min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;gap:.5rem}
.wiz-nav .btn{min-width:110px;padding:.7rem 1.2rem}

/* ---- Field / job components ---- */
.workcard{display:block;background:var(--surface);border:1px solid var(--hairline);padding:.9rem 1rem;margin-bottom:.6rem;color:inherit;border-radius:var(--radius-lg)}
.workcard:hover{background:var(--surface-sunk);text-decoration:none;border-color:var(--rule)}
.workcard .wc-name{font-weight:700;font-size:1.05rem}
.workcard .wc-sub{color:var(--slate);font-size:.85rem}
.workcard .wc-tag{color:var(--safety);font-weight:600;font-size:.85rem;margin-top:.3rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.gallery figure{margin:0;border:1px solid #d8d8d4;background:#fff}
.gallery img{width:100%;height:90px;object-fit:cover;display:block}
.gallery figcaption{font-size:.68rem;color:#666;padding:.2rem .3rem;text-transform:uppercase;letter-spacing:.02em}
.gatemini td{padding:.3rem .25rem}
.fieldform .fld{margin-bottom:.4rem}
.fieldform .chk{display:flex;align-items:center;gap:.5rem;font-weight:600}
.fieldform .chk input{width:auto}
.fieldbtns{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.btn.big,button.big{padding:.85rem 1.1rem;font-size:1rem;flex:1;text-align:center;min-width:150px}

/* ---- Work order / field ticket ---- */
.wo-hero{border-color:var(--rule)}
.wo-cust{margin:.5rem 0}
.wo-cust b{font-size:1.1rem}
.wo-clock{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.wo-checklist{display:flex;flex-direction:column;gap:.4rem}
.wo-check button{width:100%;justify-content:flex-start;gap:.7rem;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:.8rem .8rem;text-align:left;font-weight:500}
.wo-check.on button{background:var(--ok-bg);border-color:#a5d6a7}
.wc-box{width:24px;height:24px;flex:0 0 auto;border:2px solid var(--border-strong);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--ok);font-weight:700}
.wo-check.on .wc-box{border-color:var(--ok);background:var(--ok)}
.wo-check.on .wc-box{color:#fff}
.wo-check.on .wc-lbl{text-decoration:line-through;color:var(--muted)}
.sigpad-wrap{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface-2);margin-top:.2rem}
.sigpad{width:100%;height:180px;touch-action:none;display:block}
.chip-picks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font-size:.9rem;font-weight:600}
.chip input{width:auto}

/* ---- Dashboard ---- */
.dash-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.dash-head .sub{color:var(--slate);font-size:.9rem}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:14px 16px;display:block;color:inherit;min-width:0}
a.stat{transition:border-color .12s}
a.stat:hover{border-color:var(--ink);text-decoration:none}
.stat-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:1rem}
.stat-val{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin-top:.35rem;color:var(--ink);line-height:1.05}
.stat-sub{color:var(--slate);font-size:.82rem;margin-top:.2rem}
.stat-delta{font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}
.stat-delta.up{color:var(--go)} .stat-delta.down{color:var(--stop)}
.stat-spark{margin-top:.6rem;height:34px}
.stat-spark svg{width:100%;height:34px;display:block}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.dash-cols.thirds{grid-template-columns:1.25fr 1fr}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .7rem}
.card-h h2{font-size:1rem;margin:0}
.card-h a{font-size:.8rem}
.donut{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.3rem 0}
.donut-pct{font-family:var(--font-mono);font-size:1.45rem;font-weight:700;fill:var(--ink)}
.donut-lbl{color:var(--slate);text-align:center}
.donut-sub{color:var(--slate);font-size:.82rem;text-align:center}
.funnel{display:flex;flex-direction:column;gap:.75rem}
.funnel-row{display:grid;grid-template-columns:128px 1fr 42px;align-items:center;gap:.6rem}
.funnel-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.funnel-label b{font-size:1.02rem}
.funnel-track{height:12px;background:var(--surface-sunk);border-radius:2px;overflow:hidden}
.funnel-fill{height:100%;background:var(--blueprint);border-radius:2px}
.funnel-conv{color:var(--slate);font-size:.8rem;text-align:right}
.barlist{display:flex;flex-direction:column;gap:.75rem}
.bar-row{display:flex;flex-direction:column;gap:4px}
.bar-head{display:flex;justify-content:space-between;gap:.5rem;font-size:.88rem;align-items:baseline}
.bar-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:8px;background:var(--surface-sunk);border-radius:2px;overflow:hidden}
.bar-fill{height:100%;border-radius:2px}
.bar-sub{color:var(--slate);font-size:.76rem}
.queue{display:flex;flex-direction:column}
.queue-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem .1rem;border-bottom:1px solid var(--line);color:inherit}
.queue-row:last-child{border-bottom:none}
a.queue-row:hover{text-decoration:none}
a.queue-row:hover .q-label{color:var(--safety)}
.q-label{font-weight:500}
.q-n{font-family:var(--font-mono);font-weight:700;background:var(--blueprint);color:#fff;border-radius:3px;padding:.1rem .5rem;font-size:.82rem;min-width:1.7rem;text-align:center}
.q-n.zero{background:var(--surface-sunk);color:var(--slate)}
.q-empty{color:var(--go);font-weight:600;padding:.75rem .1rem}
.dash-empty{color:var(--slate);font-size:.86rem;padding:.5rem 0}
.startlist{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-direction:column;gap:1rem}
.startlist li{display:flex;gap:.8rem;align-items:flex-start}
.startlist strong{display:block;margin-bottom:.1rem}
.start-n{flex:0 0 auto;min-width:1.7rem;height:1.7rem;padding:0 .4rem;border-radius:var(--radius-sm);background:var(--blueprint);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:.82rem;display:inline-flex;align-items:center;justify-content:center}
/* dev user switcher */
.dev-users{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.5rem}
.dev-user{display:flex;align-items:center;gap:.5rem;padding:.55rem .65rem;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface);color:inherit}
.dev-user:hover{border-color:var(--ink);text-decoration:none}
.dev-user .q-n{background:var(--surface-sunk);color:var(--slate);text-transform:uppercase}
.dev-un{font-weight:600}
/* request-form builder: question rows */
.qedit{background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:var(--radius);padding:.75rem .8rem;margin-bottom:.6rem}
.qedit .q-opts{margin-top:.4rem}
.qedit label{margin-top:.4rem}
.qedit-bar{display:flex;align-items:center;gap:.7rem;margin-bottom:.2rem}
.qedit-bar label{margin-top:0}
.qmove{display:inline-flex;gap:3px}
.qmv{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--rule);background:var(--surface);color:var(--slate);border-radius:var(--radius-sm)}
.qmv:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.qmv .icn{width:15px;height:15px}
.req-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--slate);font-weight:500}
.req-toggle input[type=checkbox]{width:auto;margin:0}
.qdel{margin-left:auto;font-size:.82rem}
/* share & embed */
.copyfield{display:flex;gap:.5rem;align-items:stretch}
.copyfield input,.copyfield textarea{flex:1;min-width:0;font-family:var(--font-mono);font-size:.82rem;background:var(--surface-sunk);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:.5rem .6rem;resize:vertical}
.copyfield .btn{flex:0 0 auto;align-self:flex-start}
/* embedded quote form (?embed=1): no chrome, transparent — the host page frames it */
body.embed{background:transparent}
body.embed .public{max-width:560px;margin:0 auto;padding:1rem}

/* ---- Responsive ----
   ONE breakpoint decides who drives navigation: >=900px the sidebar is visible
   (desktop + tablet-landscape); <900px it hides and the fixed bottom tab bar +
   "More" sheet takes over (tablet-portrait + phone) — no dead zone between them. */
@media(max-width:1100px){
  .cols-2,.cols-3{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .dash-cols,.dash-cols.thirds{grid-template-columns:1fr}
}
.mobilenav{display:none}
@media(max-width:899px){
  .sidenav{display:none}
  .app-header{gap:.6rem}
  .app-header .brand{display:flex}          /* sidebar's gone — the header carries the wordmark */
  /* clean 3-element mobile header: wordmark · search icon · account avatar */
  .search-trigger{flex:0 0 auto;max-width:none;width:38px;height:38px;justify-content:center;padding:0}
  .search-trigger .st-label,.search-trigger .kbd{display:none}
  .app{padding-bottom:5rem}                  /* clear the fixed tab bar */
  .mobilenav{display:block}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 12px rgba(0,0,0,.07);padding-bottom:env(safe-area-inset-bottom)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:.5rem 0 .55rem;color:var(--muted);font-size:.66rem;font-weight:600;background:none;border:none;text-decoration:none;border-radius:0;cursor:pointer}
  .tab .ti{height:22px;display:flex;align-items:center}
  .tab .icn{width:22px;height:22px}
  .tab.on{color:var(--accent)}
  .tab:active{background:var(--surface-2)}
  .nav-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
  .nav-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:.4rem .5rem 1.6rem;box-shadow:var(--shadow-lg);flex-direction:column}
  .nav-sheet-head{display:flex;justify-content:space-between;align-items:center;padding:.7rem .8rem;color:var(--muted);font-size:.85rem;border-bottom:1px solid var(--line)}
  .nav-sheet-a{padding:.95rem .8rem;border-radius:var(--radius);color:var(--text);font-weight:600;font-size:1rem;text-decoration:none}
  .nav-sheet-a.on{background:var(--warn-bg);color:var(--accent)}
  .nav-more-cb:checked ~ .nav-scrim{display:block}
  .nav-more-cb:checked ~ .nav-sheet{display:flex;animation:navsheetup .2s ease}
}
@keyframes navsheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:640px){
  .acct-menu{width:min(280px,calc(100vw - 1.5rem))}
  input,select,textarea{font-size:16px}      /* prevents iOS zoom-on-focus */
}

/* ---- Print ---- */
@media print{
  .shell{display:block}
  .sidenav,.topbar,.pubbar,.acct,.fb-btn,.cmdk,.noprint{display:none!important}
  body{background:#fff}
  .card{border:none;padding:0}
  .app,.public{max-width:none}
}