/* ===================================================================== app-core.css — Unbeaten App shared design system One spine for every internal tool (hub, projects, design, measure & map, estimate, job details). All classes are prefixed `ucl-` so this can be loaded ALONGSIDE a page's existing styles without collisions. Branding is tokenised: override the --ucl-brand-* tokens (or set window.UCL_BRAND before app-core.js) to re-skin the whole app. Visual language: light, quiet, professional. White working surfaces on a soft grey page, one navy for structure, red reserved for the primary action on a page, 13–14px UI text, 8px radii, hairline borders. ===================================================================== */ /* ---------- tokens ---------- */ .ucl-hd__logo{object-fit:contain;max-width:220px;object-position:left center} .ucl-hd__wordmark{font-size:15px;font-weight:700;max-width:220px;overflow-wrap:anywhere;color:inherit} html[data-feature-payments="false"] [data-payments],html[data-feature-payments="false"] #depositNews,html[data-feature-integrations="false"] #calGoogle{display:none!important} :root{ /* brand (override these to white-label) */ --ucl-brand:#12365c; /* primary / navy */ --ucl-brand-strong:#0d2a49; --ucl-brand-tint:#e8eff7; --ucl-brand-tint-2:#d3e0ee; --ucl-accent:#c8102e; /* action red */ --ucl-accent-strong:#a50f26; --ucl-gold:#de8f05; --ucl-on-brand:#ffffff; --ucl-header-bg:#0d2038; /* top app bar */ /* neutrals (cool, biased toward brand) */ --ucl-bg:#f3f5f8; --ucl-surface:#ffffff; --ucl-surface-2:#f7f9fb; --ucl-surface-3:#eef2f6; --ucl-ink:#0f1f33; --ucl-ink-2:#33475e; --ucl-muted:#5c6b7c; --ucl-faint:#8b98a8; --ucl-line:#e3e8ee; --ucl-line-2:#cfd7e0; --ucl-canvas:#0f1d2e; /* photo / map stage background */ /* semantic (distinct from accent) */ --ucl-ok:#1a7d4f; --ucl-ok-bg:#e8f5ee; --ucl-ok-line:#bfe3cf; --ucl-warn:#a35f00; --ucl-warn-bg:#fdf4e3; --ucl-warn-line:#f0dcb4; --ucl-danger:#c8102e; --ucl-danger-bg:#fdecee; --ucl-danger-line:#f3c2c9; --ucl-info:#1d5fb0; --ucl-info-bg:#e9f1fc; --ucl-info-line:#c6dcf5; /* spacing scale */ --ucl-1:4px; --ucl-2:8px; --ucl-3:12px; --ucl-4:16px; --ucl-5:20px; --ucl-6:24px; --ucl-8:32px; --ucl-10:40px; --ucl-12:48px; /* radius */ --ucl-r-sm:6px; --ucl-r:8px; --ucl-r-lg:12px; --ucl-r-xl:16px; --ucl-r-pill:999px; /* type */ --ucl-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; --ucl-mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; --ucl-fs-xs:12px; --ucl-fs-sm:13px; --ucl-fs-base:14px; --ucl-fs-md:15px; --ucl-fs-lg:17px; --ucl-fs-xl:20px; --ucl-fs-2xl:24px; /* controls */ --ucl-control-h:38px; /* desktop control height */ --ucl-control-h-lg:44px; /* touch / primary control height */ --ucl-focus:0 0 0 3px color-mix(in srgb,var(--ucl-brand) 25%,transparent); /* elevation */ --ucl-shadow-sm:0 1px 2px rgba(15,31,51,.06); --ucl-shadow:0 1px 2px rgba(15,31,51,.05),0 4px 14px rgba(15,31,51,.06); --ucl-shadow-lg:0 12px 40px rgba(15,31,51,.18); /* motion */ --ucl-ease:cubic-bezier(.2,.7,.3,1); --ucl-fast:.12s; --ucl-med:.2s; --ucl-z-header:50; --ucl-z-toast:9000; --ucl-z-modal:9500; } /* opt-in dark theme (data-theme="dark" on ). Never automatic. */ :root[data-theme="dark"]{ --ucl-brand:#5b9be0; --ucl-brand-strong:#4585cc; --ucl-brand-tint:#14263c; --ucl-brand-tint-2:#1d3553; --ucl-accent:#ff5a6e; --ucl-accent-strong:#e23b50; --ucl-gold:#e0a43a; --ucl-on-brand:#eaf3ff; --ucl-header-bg:#07111f; --ucl-bg:#0a1422; --ucl-surface:#111f33; --ucl-surface-2:#0e1a2b; --ucl-surface-3:#152741; --ucl-ink:#eaf1f9; --ucl-ink-2:#c2d1e2; --ucl-muted:#93a5bd; --ucl-faint:#66798f; --ucl-line:#22364f; --ucl-line-2:#31485f; --ucl-canvas:#060d17; --ucl-ok:#4fc48a; --ucl-ok-bg:#12271d; --ucl-ok-line:#22412f; --ucl-warn:#e3ad55; --ucl-warn-bg:#241c10; --ucl-warn-line:#40331a; --ucl-danger:#ff6b7d; --ucl-danger-bg:#2a1620; --ucl-danger-line:#4a2330; --ucl-info:#6fb0f5; --ucl-info-bg:#101f30; --ucl-info-line:#213954; --ucl-shadow-sm:0 1px 2px rgba(0,0,0,.35); --ucl-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35); --ucl-shadow-lg:0 24px 70px rgba(0,0,0,.55); } /* ---------- base helpers (scoped; do not restyle bare tags globally) ---------- */ .ucl-scope,.ucl-scope *{box-sizing:border-box} .ucl-scope a{color:inherit;text-decoration:none} .ucl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [hidden]{display:none!important} /* ---------- icons ---------- */ .ucl-i{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .ucl-i--lg{width:1.4em;height:1.4em} /* ===================================================================== App shell: one header for every authenticated page [ logo → Projects ] [+ New house] Account ⌄ Under it, on project screens: the project header (whose house), then the tool tabs (Design · Measure & Map · Estimate · Job details). ===================================================================== */ .ucl-hd{box-sizing:border-box;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;min-height:56px;padding:0 20px;background:var(--ucl-header-bg);color:#fff;position:relative;z-index:var(--ucl-z-header);font:14px/1.3 var(--ucl-font);border-bottom:1px solid rgba(255,255,255,.06)} .ucl-hd__brand{display:flex;align-items:center;height:56px;padding:0;background:transparent;border-radius:0;text-decoration:none;box-sizing:border-box} .ucl-hd__logo{display:block;height:40px;width:auto;max-width:190px;object-fit:contain} .ucl-hd__right,.ucl-hd__account{display:flex;align-items:center;gap:8px} .ucl-hd__right{justify-self:end} .ucl-hd .ucl-hd__btn,.ucl-tool-header .ucl-hd__btn{box-sizing:border-box;min-height:36px;font:600 14px/1.2 var(--ucl-font);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border:1px solid transparent;border-radius:var(--ucl-r);background:transparent;color:rgba(255,255,255,.78);text-decoration:none;white-space:nowrap;cursor:pointer;letter-spacing:normal;margin:0;text-transform:none;transition:background var(--ucl-fast),color var(--ucl-fast)} .ucl-hd .ucl-hd__btn:hover{background:rgba(255,255,255,.08);color:#fff} .ucl-hd .ucl-hd__btn--start{color:#fff;border-color:rgba(255,255,255,.28);padding:7px 12px 7px 10px} .ucl-hd .ucl-hd__btn--start:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)} .ucl-hd .ucl-hd__btn--start .ucl-i{width:1.05em;height:1.05em} .ucl-hd .ucl-hd__btn[aria-current=page]{background:transparent;color:#fff;border-color:transparent} .ucl-hd a:focus-visible,.ucl-hd button:focus-visible,.ucl-hd summary:focus-visible{outline:2px solid #fff;outline-offset:-4px} /* project header: whose house this is, on every project screen */ .ucl-project-hd{box-sizing:border-box;display:flex;align-items:center;gap:14px;min-height:50px;padding:6px 20px;background:var(--ucl-surface);color:var(--ucl-ink);border-bottom:1px solid var(--ucl-line);font:13px/1.35 var(--ucl-font);position:relative;z-index:36} .ucl-project-hd__back{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:36px;padding:0 10px 0 6px;margin-left:-6px;border-radius:var(--ucl-r);color:var(--ucl-muted);font-weight:600;font-size:13px;text-decoration:none} .ucl-project-hd__back:hover{background:var(--ucl-surface-2);color:var(--ucl-ink)} .ucl-project-hd__back:focus-visible{outline:2px solid var(--ucl-brand);outline-offset:-2px} .ucl-project-hd__main{display:flex;align-items:center;gap:8px 14px;flex:1 1 auto;min-width:0;flex-wrap:wrap} .ucl-project-hd__name{margin:0;font-size:15.5px;font-weight:650;line-height:1.25;color:var(--ucl-ink);letter-spacing:-.005em;overflow-wrap:anywhere} .ucl-project-hd__meta{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;color:var(--ucl-muted);font-size:13px;min-width:0} .ucl-project-hd__meta a{color:var(--ucl-brand);font-weight:600;text-decoration:none;min-height:28px;display:inline-flex;align-items:center} .ucl-project-hd__meta a:hover{text-decoration:underline} .ucl-project-hd__dot{color:var(--ucl-faint)} .ucl-project-hd__pills{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} .ucl-project-hd__price{display:inline-flex;align-items:baseline;gap:4px;font-size:13px;color:var(--ucl-muted);padding-left:4px} .ucl-project-hd__price strong{font-size:14px;color:var(--ucl-ink);font-weight:700} .ucl-project-hd__actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} .ucl-project-hd__actions:empty{display:none} .ucl-project-hd__actions .ucl-hd__btn{color:var(--ucl-ink);border-color:var(--ucl-line-2);background:var(--ucl-surface);min-height:34px;padding:6px 12px;font-size:13px} .ucl-project-hd__actions .ucl-hd__btn:hover{background:var(--ucl-surface-2)} .ucl-project-hd__actions .ucl-hd__state{font-size:12.5px;font-weight:600;color:var(--ucl-muted)} @media(max-width:900px){.ucl-project-hd{gap:10px;padding:6px 12px}.ucl-project-hd__back span{display:none}.ucl-project-hd__back{padding:0 8px;margin-left:-4px}.ucl-project-hd__name{font-size:15px}} @media(max-width:600px){.ucl-project-hd{flex-wrap:wrap}.ucl-project-hd__actions{width:100%;margin-left:0;justify-content:flex-start}} @media print{.ucl-project-hd{display:none!important}} /* account menu */ .ucl-account{position:relative;justify-self:end;z-index:100} .ucl-account>summary{list-style:none;cursor:pointer;min-height:36px;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.18)!important;border-radius:var(--ucl-r)!important;padding:7px 12px!important} .ucl-account>summary:hover{background:rgba(255,255,255,.08)} .ucl-account>summary:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.8} .ucl-account>summary::-webkit-details-marker{display:none} .ucl-account .ucl-hd__account{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;padding:6px;display:grid;gap:2px;background:var(--ucl-surface);color:var(--ucl-ink);border:1px solid var(--ucl-line);border-radius:var(--ucl-r-lg);box-shadow:var(--ucl-shadow-lg)} .ucl-account:not([open]) .ucl-hd__account{display:none} .ucl-account .ucl-hd__account .ucl-hd__btn{color:var(--ucl-ink);text-align:left;justify-content:flex-start;min-height:40px;background:transparent;border:0;border-radius:var(--ucl-r-sm);font-weight:500;padding:8px 12px} .ucl-account .ucl-hd__account .ucl-hd__btn:hover{background:var(--ucl-surface-3);color:var(--ucl-ink)} /* page tool header: slim context strip under the navigation */ .ucl-tool-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px;padding:6px 20px;background:var(--ucl-surface);color:var(--ucl-ink);border-bottom:1px solid var(--ucl-line);font:13px/1.4 var(--ucl-font)} .ucl-hd__title{font-size:14px;font-weight:650;color:inherit} .ucl-hd__ctx{font-size:13px;color:var(--ucl-muted);overflow-wrap:anywhere;max-width:min(100%,640px)} .ucl-hd__title+.ucl-hd__ctx:not([hidden])::before{content:"·";margin-right:8px;color:var(--ucl-faint)} .ucl-hd__sp{flex:1 1 auto} .ucl-hd__state{font-size:12.5px;font-weight:600;color:var(--ucl-muted)} .ucl-tool-header .ucl-hd__btn{color:var(--ucl-ink);border-color:var(--ucl-line-2);background:var(--ucl-surface);min-height:34px;padding:6px 12px;font-size:13px} .ucl-tool-header .ucl-hd__btn:hover{background:var(--ucl-surface-2)} .ucl-tool-header .ucl-hd__btn--primary{background:var(--ucl-accent);border-color:var(--ucl-accent);color:#fff} .ucl-tool-header .ucl-hd__btn--primary:hover{background:var(--ucl-accent-strong)} .ucl-tool-header .ucl-hd__btn:focus-visible{outline:2px solid var(--ucl-brand);outline-offset:2px} .ucl-tool-header:has(.ucl-hd__ctx[hidden]):not(:has(.ucl-hd__title)):not(:has(button)):not(:has(a)){display:none} @media(max-width:700px){ .ucl-hd{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:0 12px;min-height:52px} .ucl-hd__brand{height:48px} .ucl-hd__logo{height:30px;max-width:140px} .ucl-hd__sp{display:none} .ucl-hd__right{grid-column:2;grid-row:1;gap:6px} .ucl-tool-header{padding:6px 12px} } .ucl-hd .ucl-hd__btn--calendar .ucl-i{width:1.1em;height:1.1em} .ucl-hd .ucl-hd__btn--calendar[aria-current=page]{background:rgba(255,255,255,.12)} @media(max-width:520px){.ucl-hd .ucl-hd__btn--calendar .ucl-hd__btn-label{display:none}.ucl-hd .ucl-hd__btn--calendar{padding:7px 9px}} @media(max-width:420px){.ucl-hd .ucl-hd__btn--start .ucl-hd__btn-label{display:none}.ucl-hd .ucl-hd__btn--start{padding:7px 9px}} @media(max-width:370px){.ucl-hd__logo{max-width:120px}.ucl-account>summary{padding:6px 8px!important}} @media print{.ucl-app-shell{display:none!important}} /* ===================================================================== Buttons ===================================================================== */ .ucl-btn{cursor:pointer;border:1px solid transparent;border-radius:var(--ucl-r);min-height:var(--ucl-control-h);padding:8px 14px;font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;transition:background var(--ucl-fast) var(--ucl-ease),border-color var(--ucl-fast),color var(--ucl-fast),box-shadow var(--ucl-fast);white-space:nowrap;color:var(--ucl-ink);background:var(--ucl-surface);border-color:var(--ucl-line-2)} .ucl-btn:hover{background:var(--ucl-surface-2)} .ucl-btn:active{background:var(--ucl-surface-3)} .ucl-btn:focus-visible{outline:2px solid var(--ucl-brand);outline-offset:2px} .ucl-btn[disabled],.ucl-btn.is-busy{opacity:.5;cursor:default;pointer-events:none} .ucl-btn--primary{background:var(--ucl-accent);color:#fff;border-color:var(--ucl-accent)} .ucl-btn--primary:hover{background:var(--ucl-accent-strong);border-color:var(--ucl-accent-strong)} .ucl-btn--brand{background:var(--ucl-brand);color:var(--ucl-on-brand);border-color:var(--ucl-brand)} .ucl-btn--brand:hover{background:var(--ucl-brand-strong);border-color:var(--ucl-brand-strong)} .ucl-btn--secondary{background:var(--ucl-surface);color:var(--ucl-ink);border-color:var(--ucl-line-2)} .ucl-btn--secondary:hover{background:var(--ucl-surface-2)} .ucl-btn--ghost{background:transparent;color:var(--ucl-brand);border-color:transparent} .ucl-btn--ghost:hover{background:var(--ucl-brand-tint)} .ucl-btn--danger{background:var(--ucl-surface);color:var(--ucl-danger);border-color:var(--ucl-line-2)} .ucl-btn--danger:hover{background:var(--ucl-danger-bg);border-color:var(--ucl-danger-line)} .ucl-btn--sm{min-height:32px;padding:5px 10px;font-size:13px;border-radius:var(--ucl-r-sm)} .ucl-btn--lg{min-height:var(--ucl-control-h-lg);padding:10px 20px;font-size:14.5px;border-radius:var(--ucl-r)} .ucl-btn--block{display:flex;width:100%} .ucl-btn--icon{padding:8px;width:var(--ucl-control-h);border-radius:var(--ucl-r)} .ucl-btn--icon.ucl-btn--sm{padding:6px;width:32px} @media(pointer:coarse){.ucl-btn{min-height:var(--ucl-control-h-lg)}.ucl-btn--sm{min-height:38px}} .ucl-field-error{display:block;color:var(--ucl-danger);font-size:13px;line-height:1.4;margin:6px 0 12px} .ucl-field-error[hidden]{display:none} input[aria-invalid=true],textarea[aria-invalid=true]{outline:2px solid var(--ucl-danger);outline-offset:2px} /* ===================================================================== Surfaces ===================================================================== */ .ucl-card{background:var(--ucl-surface);border:1px solid var(--ucl-line);border-radius:var(--ucl-r-lg);box-shadow:var(--ucl-shadow-sm);padding:20px} .ucl-card--flat{box-shadow:none} .ucl-card--pad-lg{padding:26px} .ucl-panel{background:var(--ucl-surface);border:1px solid var(--ucl-line);border-radius:var(--ucl-r-lg);box-shadow:var(--ucl-shadow-sm)} /* section eyebrow used across tools */ .ucl-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ucl-muted)} /* ===================================================================== Forms ===================================================================== */ .ucl-field{margin-bottom:var(--ucl-4)} .ucl-label{display:block;font-size:12.5px;font-weight:600;color:var(--ucl-ink-2);margin-bottom:6px} .ucl-input,.ucl-select,.ucl-textarea{width:100%;font:inherit;font-size:15px;color:var(--ucl-ink);padding:10px 12px;min-height:var(--ucl-control-h-lg);border:1px solid var(--ucl-line-2);border-radius:var(--ucl-r);background:var(--ucl-surface);transition:border-color var(--ucl-fast),box-shadow var(--ucl-fast)} .ucl-input::placeholder,.ucl-textarea::placeholder{color:var(--ucl-faint)} .ucl-input:focus,.ucl-select:focus,.ucl-textarea:focus{outline:none;border-color:var(--ucl-brand);box-shadow:var(--ucl-focus)} .ucl-textarea{resize:vertical;min-height:76px} /* ===================================================================== Chips / badges / status ===================================================================== */ .ucl-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--ucl-r-pill);border:1px solid var(--ucl-line-2);background:var(--ucl-surface);color:var(--ucl-ink);cursor:pointer;user-select:none;transition:background var(--ucl-fast),border-color var(--ucl-fast),color var(--ucl-fast)} .ucl-chip:hover{border-color:var(--ucl-brand)} .ucl-chip.is-on{background:var(--ucl-brand);color:var(--ucl-on-brand);border-color:var(--ucl-brand)} .ucl-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--ucl-r-pill);background:var(--ucl-brand-tint);color:var(--ucl-brand)} .ucl-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:var(--ucl-r-pill);border:1px solid} .ucl-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .ucl-status--new{color:var(--ucl-warn);background:var(--ucl-warn-bg);border-color:var(--ucl-warn-line)} .ucl-status--lead{color:var(--ucl-info);background:var(--ucl-info-bg);border-color:var(--ucl-info-line)} .ucl-status--hot_lead{color:#a43b0b;background:#fff0e4;border-color:#edb180} .ucl-status--quoted{color:var(--ucl-brand);background:var(--ucl-brand-tint);border-color:var(--ucl-brand-tint-2)} .ucl-status--approved,.ucl-status--scheduled{color:var(--ucl-info);background:var(--ucl-info-bg);border-color:var(--ucl-info-line)} .ucl-status--complete,.ucl-status--deposit{color:var(--ucl-ok);background:var(--ucl-ok-bg);border-color:var(--ucl-ok-line)} .ucl-status--lost{color:var(--ucl-muted);background:var(--ucl-surface-2);border-color:var(--ucl-line)} .ucl-status--due{color:var(--ucl-warn);background:var(--ucl-warn-bg);border-color:var(--ucl-warn-line)} /* ===================================================================== Toast ===================================================================== */ .ucl-toasts{position:fixed;left:50%;bottom:calc(22px + var(--ucl-action-bar-height,0px));transform:translateX(-50%);z-index:var(--ucl-z-toast);display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 28px));pointer-events:none} .ucl-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;background:var(--ucl-surface);color:var(--ucl-ink);border:1px solid var(--ucl-line);border-left:4px solid var(--ucl-info);border-radius:var(--ucl-r-lg);box-shadow:var(--ucl-shadow-lg);padding:12px 14px;font-size:14px;line-height:1.4;transform:translateY(14px);opacity:0;transition:transform var(--ucl-med) var(--ucl-ease),opacity var(--ucl-med)} .ucl-toast.is-in{transform:translateY(0);opacity:1} .ucl-toast__i{flex:none;margin-top:1px} .ucl-toast__msg{flex:1} .ucl-toast__msg b{display:block;margin-bottom:1px} .ucl-toast__x{flex:none;cursor:pointer;background:transparent;border:0;color:var(--ucl-faint);padding:2px;line-height:1;font-size:16px} .ucl-toast--ok{border-left-color:var(--ucl-ok)} .ucl-toast--ok .ucl-toast__i{color:var(--ucl-ok)} .ucl-toast--warn{border-left-color:var(--ucl-warn)} .ucl-toast--warn .ucl-toast__i{color:var(--ucl-warn)} .ucl-toast--danger{border-left-color:var(--ucl-danger)} .ucl-toast--danger .ucl-toast__i{color:var(--ucl-danger)} .ucl-toast--info .ucl-toast__i{color:var(--ucl-info)} /* ===================================================================== Modal / dialog (header · scrolling body · pinned actions) ===================================================================== */ .ucl-modal{position:fixed;inset:0;z-index:var(--ucl-z-modal);display:flex;align-items:center;justify-content:center;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));background:rgba(9,18,32,.5);opacity:0;transition:opacity var(--ucl-med) var(--ucl-ease)} .ucl-modal.is-in{opacity:1} .ucl-modal__box{background:var(--ucl-surface);color:var(--ucl-ink);border-radius:var(--ucl-r-xl);box-shadow:var(--ucl-shadow-lg);width:min(480px,100%);padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden;transform:translateY(10px) scale(.985);transition:transform var(--ucl-med) var(--ucl-ease)} .ucl-modal.is-in .ucl-modal__box{transform:none} .ucl-modal__box--wide{width:min(800px,100%)} .ucl-modal__header{padding:14px 20px;border-bottom:1px solid var(--ucl-line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none} .ucl-modal__title{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em} .ucl-modal__header>button{margin:0;min-height:36px;flex:none} .ucl-modal__scroll{overflow:auto;overscroll-behavior:contain;padding:20px;min-height:0} .ucl-modal__body{color:var(--ucl-ink-2);font-size:14.5px;line-height:1.55;margin:0 0 20px} .ucl-modal__actions{flex:none;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--ucl-line);margin:0} .ucl-modal__actions:empty{display:none} .ucl-modal__scroll form>button[type=submit],.ucl-modal__scroll form>button:last-of-type{position:sticky;bottom:0;z-index:2} .ucl-modal button,.ucl-modal summary{min-height:38px} .ucl-modal summary{cursor:pointer;padding:10px 0} .ucl-modal input:not([type=checkbox]):not([type=range]),.ucl-modal select,.ucl-modal textarea{font-size:16px} @media(pointer:coarse){.ucl-modal button,.ucl-modal summary{min-height:44px}} @media(max-width:699px){ .ucl-modal{padding:0} .ucl-modal__box,.ucl-modal__box--wide{width:100%;max-height:100dvh;border-radius:0} .ucl-modal__header{padding:12px 16px} .ucl-modal__scroll{padding:16px} .ucl-modal__actions{padding:12px 16px max(12px,env(safe-area-inset-bottom))} } /* ===================================================================== Empty / loading / skeleton ===================================================================== */ .ucl-empty{text-align:center;padding:44px 22px;color:var(--ucl-muted)} .ucl-empty__i{width:48px;height:48px;margin:0 auto 14px;color:var(--ucl-faint);opacity:.85} .ucl-empty__i .ucl-i{width:100%;height:100%;stroke-width:1.5} .ucl-empty h3{font-size:16px;color:var(--ucl-ink);margin:0 0 6px} .ucl-empty p{margin:0 auto 16px;max-width:42ch;font-size:14px} .ucl-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ucl-line-2);border-top-color:var(--ucl-brand);animation:ucl-spin .7s linear infinite;display:inline-block;vertical-align:-4px} @keyframes ucl-spin{to{transform:rotate(360deg)}} .ucl-skel{position:relative;overflow:hidden;background:var(--ucl-surface-3);border-radius:var(--ucl-r-sm)} .ucl-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ucl-surface) 70%,transparent),transparent);animation:ucl-shimmer 1.3s infinite} @keyframes ucl-shimmer{100%{transform:translateX(100%)}} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ===================================================================== Shared project navigation (Design · Measure & Map · Estimate · Job) A tab strip directly under the app bar. The active tab is underlined in brand navy; step numbers sit in small circles. ===================================================================== */ #projectFlow{box-sizing:border-box;display:flex;align-items:stretch;gap:2px;margin:0;padding:0 20px;background:var(--ucl-surface);border:0;border-bottom:1px solid var(--ucl-line);border-radius:0;position:relative;z-index:35;flex:none;font:600 13.5px/1.25 var(--ucl-font);overflow-x:auto;scrollbar-width:none} #projectFlow::-webkit-scrollbar{display:none} #projectFlow>a,#projectFlow>button{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-width:0;min-height:46px;padding:6px 16px;border:0;border-radius:0;background:transparent;color:var(--ucl-muted);font:inherit;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:color var(--ucl-fast)} #projectFlow>a::after,#projectFlow>button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:3px 3px 0 0;background:transparent;transition:background var(--ucl-fast)} #projectFlow>a:hover,#projectFlow>button:hover{color:var(--ucl-ink);border-color:transparent} #projectFlow>.active,#projectFlow>[aria-current=page]{background:transparent;color:var(--ucl-brand);border-color:transparent} #projectFlow>.active::after,#projectFlow>[aria-current=page]::after{background:var(--ucl-brand)} #projectFlow>a:focus-visible,#projectFlow>button:focus-visible{outline:2px solid var(--ucl-brand);outline-offset:-4px;border-radius:var(--ucl-r-sm)} #projectFlow[aria-busy=true]{opacity:.7} #projectFlow>.estimate-tab{margin-left:auto;margin-block:5px;min-height:36px;padding-inline:20px;border:1px solid #ddb34b;border-radius:7px;background:#fff0bc;color:#583c00;font-weight:750} #projectFlow>.estimate-tab:hover{background:#ffe59a;color:#422d00} #projectFlow>.estimate-tab.active,#projectFlow>.estimate-tab[aria-current=page]{background:#e9b83e;border-color:#b78314;color:#302000} #projectFlow>.estimate-tab::after{display:none} #projectFlow b{display:none} #projectFlow[data-context] b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ucl-surface-3);color:var(--ucl-muted);font-size:11px;font-weight:700} #projectFlow[data-context]>.active b,#projectFlow[data-context]>[aria-current=page] b{background:var(--ucl-brand);color:var(--ucl-on-brand)} #projectFlow[data-context=project],#projectFlow[data-context=sandbox]{grid-template-columns:none} @media(max-width:900px),(pointer:coarse){#projectFlow{padding:0 10px}#projectFlow>a,#projectFlow>button{flex:1 0 auto;padding:6px 12px;min-height:46px}} @media(max-width:699px){#projectFlow{padding:0 6px}#projectFlow>a,#projectFlow>button{flex:0 0 auto;padding:6px 8px;font-size:13px}} .canvas-focus #projectFlow,.roof-expanded #projectFlow,.focus #projectFlow{display:none!important} @media print{#projectFlow{display:none!important}} /* ---------- measurement source selector (Photo · Aerial) ---------- */ .ucl-measure-mode{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--ucl-line);border-radius:var(--ucl-r);background:var(--ucl-surface-3);font:600 13px var(--ucl-font)} .ucl-measure-mode a{display:flex;align-items:center;justify-content:center;min-width:84px;min-height:32px;padding:6px 14px;border-radius:6px;text-decoration:none;color:var(--ucl-muted)} .ucl-measure-mode a[aria-current=page]{background:var(--ucl-surface);color:var(--ucl-ink);box-shadow:var(--ucl-shadow-sm)} @media(pointer:coarse){.ucl-measure-mode a{min-height:38px}} /* ===================================================================== Shared forms and device-safe dialogs (job fields, team, audits) ===================================================================== */ .job-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:14px 0} .job-fields label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ucl-ink-2)} .job-fields input,.job-fields select,.job-fields textarea{box-sizing:border-box;width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--ucl-line-2);border-radius:var(--ucl-r);font:15px var(--ucl-font);font-weight:400;background:var(--ucl-surface);color:var(--ucl-ink)} .job-fields input:focus,.job-fields select:focus,.job-fields textarea:focus{outline:none;border-color:var(--ucl-brand);box-shadow:var(--ucl-focus)} .job-fields input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--ucl-brand)} .job-fields .wide{grid-column:1/-1} .team-member{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--ucl-line)} .team-member>span{overflow-wrap:anywhere} .team-member button{flex:none} .audit-table{width:100%;border-collapse:collapse;font-size:13.5px} .audit-table td,.audit-table th{text-align:left;padding:10px;border-bottom:1px solid var(--ucl-line);overflow-wrap:anywhere} .audit-table th{font-size:12px;color:var(--ucl-muted);font-weight:600} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ucl-brand);outline-offset:2px} .focus #appHeader,.focus .footer-actions,.focus .save-bar,.focus #saveStatus,.focus #decisionBtn,.focus #acceptedQuoteBtn,.focus .line-source,.focus #accuracyNote,.focus #configNote,.focus #designStale{display:none!important} .focus .line-name{pointer-events:none;border:none} .focus .estimate-row .include{display:none} .focus #focusBtn{position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:500} .focus .wrap{padding-top:16px} .connection-banner{padding:9px 16px;background:var(--ucl-warn-bg);color:var(--ucl-ink);font:13px var(--ucl-font);border-bottom:1px solid var(--ucl-warn-line)} @media(max-width:650px){.job-fields{grid-template-columns:1fr}.team-member{align-items:flex-start;flex-direction:column}} .danger-action,[data-remove]{color:var(--ucl-danger)!important} .field-form-actions:has([data-remove]){border-top:1px solid var(--ucl-line);padding-top:14px} .team-edit{margin-top:16px} .team-edit form>label:has([name=disabled]){grid-column:1/-1;border-top:1px solid var(--ucl-line);padding-top:16px} @media(max-width:699px){.team-member{flex-wrap:wrap}} /* Shared recovery review: usable with long job notes and geometry. */ .ucl-recovery-table{width:100%;border-collapse:collapse;table-layout:fixed} .ucl-recovery-table th,.ucl-recovery-table td{padding:10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ucl-line)} .ucl-recovery-table pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;font:inherit;margin:0} .ucl-recovery-paused{position:fixed;inset:20% max(16px,20%);z-index:9999;padding:24px;background:var(--ucl-surface,#fff);color:var(--ucl-ink,#172033);border:1px solid var(--ucl-line-2);border-radius:16px;box-shadow:var(--ucl-shadow-lg)} .ucl-recovery-item{padding:16px 0;margin-top:12px;border-top:1px solid var(--ucl-line)}.ucl-recovery-item h3{margin:0 0 8px}.ucl-recovery-item button{margin:8px 8px 0 0}.ucl-recovery-item [role=status]{margin:12px 0 0} /* Customer editor: an address suggestion list fits inside the existing modal. */ .customer-fields input{min-width:0;width:100%;box-sizing:border-box} .customer-address-options{border:1px solid var(--ucl-line,#cbd5e1);border-radius:8px;overflow:hidden;background:var(--ucl-surface,#fff)} .customer-address-options[hidden]{display:none} .customer-address-options button{display:block;width:100%;padding:12px;border:0;border-bottom:1px solid var(--ucl-line,#cbd5e1);border-radius:0;text-align:left;background:transparent;color:inherit;font:inherit;font-size:14px;cursor:pointer} .customer-address-options button:hover,.customer-address-options button[aria-selected=true]{background:var(--ucl-surface-2,#e8f1f7)} .customer-state-zip{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px} .customer-address-note{font-size:12px;font-weight:400;line-height:1.5} .customer-google-attribution{display:block;padding:8px 12px;font:500 14px Arial,sans-serif;color:#5e5e5e;background:white}