/* Aestimor shared 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{
  /* App-wide content width — one standard for every workspace page. Fills the
     available width and caps on ultrawide so tables stay scannable. */
  --app-max:2880px;
  --app-pad:clamp(1rem,1.6vw,2rem);
  /* BASIC — clean neutral greys, white cards, one quiet accent. Deliberately
     plain: no warm kraft, no navy art-direction, nothing loud. */
  --paper:#F5F5F6; --surface:#FFFFFF; --surface-sunk:#F0F0F2;
  --hairline:#E4E4E7; --rule:#D4D4D8;
  --ink:#18181B; --graphite:#3F3F46; --slate:#71717A;
  /* neutral dark for the top bar + structure (was navy; now plain charcoal) */
  --blueprint:#27272A; --blueprint-2:#18181B; --blueprint-wash:#ECECEF;
  /* one restrained accent — used sparingly for the primary action + links */
  --safety:#7C5CE5; --safety-press:#6847CF; --safety-wash:#EEEAFB;
  /* 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);
  --fog:var(--surface-sunk);
  --border:var(--hairline); --border-strong:var(--rule); --line:var(--hairline);
  /* crisper boundary for form controls (was --rule #D6D6D3 = 1.46:1, too faint) */
  --field-border:#AFAFB7;
  --text:var(--ink); --muted:var(--slate); --muted-2:#75756F;
  /* native controls (date/select popups, scrollbars) render in this scheme */
  color-scheme:light;
  --switch-off:#CFCFCB;                 /* toggle OFF track — visible on white */
  /* themed dropdown caret so <select> stops using the cheap OS chevron */
  --caret-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E6E68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --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 — softened toward a calmer, more tactile feel (tables stay 0). */
  --radius:8px; --radius-sm:6px; --radius-lg:8px;
  --shadow:none; --shadow-lg:0 6px 24px rgba(23,20,15,.14);
  /* text color that sits ON a filled accent/status button (flips in dark) */
  --on-accent:#fff;
}

/* ---- Dark theme ---- toggle-driven (data-theme), OS-seeded on first load.
   Only the RAW tokens flip; every component cascades off them for free. */
:root[data-theme="dark"]{
  --paper:#101011; --surface:#19191B; --surface-sunk:#222225;
  --hairline:#2D2D31; --rule:#3C3C42; --field-border:#505058;
  --ink:#F4F4F5; --graphite:#D4D4D8; --slate:#A1A1AA; --muted-2:#85858F;
  --blueprint:#F4F4F5; --blueprint-2:#FFFFFF; --blueprint-wash:#242427;
  --safety:#A78BFA; --safety-press:#B8A4FA; --safety-wash:#2B2540;
  --go:#6FB265; --hold:#CB9E38; --stop:#E07A6C;
  --ok-bg:#1C2B1A; --warn-bg:#2C2510; --danger-bg:#301B17;
  --shadow-lg:0 10px 32px rgba(0,0,0,.55);
  --on-accent:#1A130E;
  color-scheme:dark;                    /* native date/select popups adapt to dark */
  --switch-off:#5E6B76;                 /* toggle OFF track — visible on dark surface */
  --caret-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239AA3A1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*{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}
/* stack: standard vertical rhythm for a card that follows a non-card sibling
   (grids/stat rows break .card+.card) — replaces scattered inline margin-top */
.stack{margin-top:1rem}
/* skip-to-content — visible only on keyboard focus */
.skip{position:fixed;left:10px;top:-60px;z-index:100;background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.55rem .9rem;font-weight:600;box-shadow:var(--shadow-lg);transition:top .15s ease}
.skip:focus{top:10px;outline:2px solid var(--safety);outline-offset:2px}
/* Visible to a screen reader, not to a sighted user. A table header that says
   nothing still has to be announced as something. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* larger tap targets for compact controls on touch */
@media(max-width:899px){
  .act{min-height:40px;display:inline-flex;align-items:center}
  .demobar-x,.winbar-x,.ql-ic,.ql-qty button,.qty-stepper button,.qmv,.acct-btn{min-width:40px;min-height:40px}
}
/* 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:.75rem;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. */
/* Fitted app-shell: the frame is locked to the viewport height and never
   scrolls; the demo bar, sidebar, and header stay pinned; ONLY .scrollport
   (the content pane) scrolls. Feels like a native desktop/tablet app, not a
   webpage. 100dvh so mobile browser chrome doesn't clip the bottom. */
.appframe{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.shell{display:flex;align-items:stretch;flex:1 1 auto;min-height:0}
.shell-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
/* the one scroll region: content + footer scroll together, chrome stays put.
   scrollbar-gutter:stable RESERVES the scrollbar's width at all times, so a
   short page and a tall page have the SAME content width — no horizontal jump
   ("the whole thing resizes") when an action makes the scrollbar appear/vanish.
   Harmless on overlay-scrollbar systems (mac/iOS reserve 0). */
.scrollport{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
.count-workspace{position:relative}
/* Count has its own job header once an estimate is open. Its parent-shell
   action therefore belongs with Build's global controls, never as an overlay
   on the Count toolbar. */
.count-topbar-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;margin-left:auto;padding:0 .65rem;border:1px solid var(--hairline);border-radius:var(--radius-sm);background:var(--surface);color:var(--slate);font-size:.78rem;font-weight:600;white-space:nowrap}
.count-topbar-link:hover{color:var(--ink);background:var(--surface-sunk);text-decoration:none}
.count-topbar-link:focus-visible{outline:2px solid var(--safety);outline-offset:2px}
@media(max-width:1179px){.count-topbar-link{display:none}}
.count-workspace-state{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:2rem;background:var(--surface-sunk);text-align:center}
.count-workspace-state[hidden]{display:none}
.count-workspace-state>div{display:grid;gap:.45rem;max-width:28rem;color:var(--slate)}
.count-workspace-state strong{color:var(--ink);font-size:1rem}
.count-workspace-loading{pointer-events:none}
.count-workspace-unavailable{background:var(--surface)}
.count-workspace-recovery{display:flex;justify-content:center;flex-wrap:wrap;gap:.55rem;margin-top:.6rem}
/* Count is a full-height estimating workspace inside Build's one product shell.
 * This explicit shell state intentionally avoids a late relational selector:
 * browser stylesheet parsing must never reduce the estimator iframe to its
 * HTML fallback size. */

.sidenav{
  /* viewport-fit=cover lets the app paint under the status bar, and every
     safe-area inset was honoured EXCEPT the top one. On an installed iPad the
     first ~24px of this rail — which is exactly where the collapse/expand
     button lives — sat under the status bar and could not be tapped. That is
     why the sidebar "wouldn't expand" on iPad landscape. Zero on every desktop,
     so nothing else moves. */
  padding-top:env(safe-area-inset-top);
  width:222px;flex:0 0 auto;background:var(--surface);color:var(--ink);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;align-self:stretch;min-height:0;overflow-y:auto;scrollbar-gutter:stable;
  transition:width .15s ease;
}
.sidenav-top{display:flex;align-items:center;gap:.4rem;min-height:72px;padding:10px 1.2rem 0;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}
.aestimor-brand{gap:16px}
.aestimor-mark{display:block;width:19px;height:19px;flex:0 0 19px;object-fit:contain}
html[data-theme="light"] .aestimor-mark{filter:brightness(0)}
.aestimor-brand .brand-divider{position:static;color:var(--rule);font-weight:400;line-height:1;transform:none}
.sidenav-workspace{min-height:52px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;margin:2px .6rem 8px;padding:7px 10px;color:var(--graphite);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.workspace-logo{width:32px;height:32px;display:grid;place-items:center;overflow:hidden;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:6px}
.workspace-logo .logo{max-width:24px;max-height:24px}
.workspace-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.workspace-copy small{color:var(--slate);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.workspace-copy strong{overflow:hidden;color:var(--ink);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.sidenav-links{padding:0 .6rem;display:flex;flex-direction:column;gap:1px;margin-top:2px}
.sidenav-sections{overflow-y:auto;flex:1 1 auto;min-height:0}
.sn-sect{display:flex;flex-direction:column;gap:1px;margin-bottom:.45rem}
/* Child nav entries — an Estimate belongs to a customer, so it reads as one
   level in, not as a peer of Projects. The rail (collapsed sidebar) has no
   room for hierarchy, so children flatten back to plain icons there. */
.sn-kids{display:flex;flex-direction:column;gap:1px;margin-left:1.15rem;padding-left:.55rem;border-left:1px solid var(--hairline)}
.sn-kids .sn-link{min-height:34px;font-size:.85rem;padding:.34rem .6rem}
.sn-kids .sn-link .sn-ic,.sn-kids .sn-link .sn-ic .icn{width:16px;height:16px}
html.nav-collapsed .sn-kids{margin-left:0;padding-left:0;border-left:0;align-items:center}
.sn-sect-h{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--muted);padding:.55rem .7rem .18rem}
.sidenav-admin{margin-top:auto;padding:.6rem .6rem .8rem;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:1px}
/* Rail (collapsed) mode: drop the section labels — the icon links carry the nav. */
html.nav-collapsed .sn-sect-h{display:none}
html.nav-collapsed .sn-sect{margin-bottom:.2rem;align-items:center}
.sn-link{min-height:40px;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;transition:color .15s ease,background-color .15s ease,transform .1s ease}
.sn-link:hover{background:var(--surface-sunk);text-decoration:none;color:var(--ink)}
.sn-link:active{transform:scale(.985)}
.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;overflow-x:visible;overflow-y:hidden;scrollbar-gutter:auto}
html.nav-collapsed .sidenav-top{display:grid;grid-template-rows:40px 32px;place-items:center;min-height:84px;padding:12px 0 0;margin-bottom:.55rem;box-sizing:border-box}
html.nav-collapsed .sidenav-top .brand{position:static;grid-row:2;display:flex;transform:none;flex:0 0 auto}
/* keep the expand toggle VISIBLE when collapsed — hover-only reveal stranded
   touch/iPad users with no way to reopen the sidebar */
html.nav-collapsed .sidenav-top .brand-name{display:none}
html.nav-collapsed .brand-divider,html.nav-collapsed .sidenav-workspace{display:none}
html.nav-collapsed .sidenav-toggle{position:static;grid-row:1;display:grid;place-items:center;width:40px;height:40px;padding:0;transform:none;border-radius:8px}
html.nav-collapsed .sn-link{width:40px;height:40px;min-height:40px;justify-content:center;margin:0 auto;padding:0;border-radius:8px}
html.nav-collapsed .sn-link .lbl{display:none}
.nav-mark-collapse-out{animation:nav-mark-collapse-out .12s ease-in forwards}
.nav-mark-collapse-in{animation:nav-mark-collapse-in .18s ease-out both}
.nav-mark-expand-out{animation:nav-mark-expand-out .12s ease-in forwards}
.nav-mark-expand-in{animation:nav-mark-expand-in .26s cubic-bezier(.2,.85,.3,1) both}
@keyframes nav-mark-collapse-out{to{opacity:0;transform:rotate(150deg) scale(.68)}}
@keyframes nav-mark-collapse-in{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}
@keyframes nav-mark-expand-out{to{opacity:0;transform:translateX(-8px) scale(.9)}}
@keyframes nav-mark-expand-in{from{opacity:0;transform:translateX(-44px) rotate(-210deg) scale(.72)}to{opacity:1;transform:translateX(0) rotate(0) scale(1)}}
.brand-wake .sidenav-top .aestimor-mark{animation:brand-wake .82s cubic-bezier(.18,.8,.28,1) both}
@keyframes brand-wake{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(.82)}42%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--safety) 72%,transparent));transform:scale(1.08)}100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}}

.topbar,.pubbar{
  display:flex;align-items:center;gap:.85rem;min-height:57px;
  background:var(--surface);color:var(--ink);padding:0 1rem;
  border-bottom:1px solid var(--hairline);
}
.pubbar{border-top:3px solid var(--brand,var(--blueprint));justify-content:center}
.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}
/* The real Aestimor mark: PNG shape as a mask, filled with the brand gradient —
   crisp at any size, works on light or dark. */
.aest-mark{width:24px;height:24px;display:inline-block;background:linear-gradient(135deg,#8b5cf6,#6366f1);-webkit-mask:url('/assets/aestimor-logo.png') center/contain no-repeat;mask:url('/assets/aestimor-logo.png') center/contain no-repeat}
.lmk{width:20px;height:20px;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) */
/* the header bar is full width (background + divider), but its content is capped
   to the same column as the page body so search + avatar line up with the page. */
.topbar.app-header{position:relative;z-index:250;padding:0}   /* compound selector beats the later .topbar safe-area padding rule, so only .topbar-inner sets the inset */
.topbar-inner{display:flex;align-items:center;gap:.85rem;width:100%;max-width:none;margin:0;padding:0 var(--app-pad);min-height:57px;min-width:0}
.topbar-utilities{display:flex;align-items:center;gap:.85rem;min-width:0;margin-left:auto}

/* Neutral reporting: dense enough for an operating review, still readable on
   a phone. Bars remain HTML so labels and drill-down counts are accessible. */
.report-dashboard-grid{margin-bottom:1rem}
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.report-chart{min-width:0}
.report-number{min-height:12rem}
.report-big-number{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:750;line-height:1;letter-spacing:-.055em;margin:1.15rem 0 .4rem}
.report-bars{display:grid;gap:.9rem;padding:.35rem 0}
.report-bar-row{min-width:0}
.report-bar-label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.28rem}
.report-bar-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-bar-track{height:.65rem;border-radius:999px;background:var(--fog);overflow:hidden}
.report-bar-track>span{display:block;height:100%;border-radius:inherit;background:var(--safety)}
.report-drill{font-size:.75rem;margin-top:.2rem;display:flex;justify-content:space-between;gap:.75rem;align-items:center}.report-drill a{font-weight:700;white-space:nowrap}
.report-builder{margin-top:1rem}
.report-builder>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none}
.report-builder>summary::-webkit-details-marker{display:none}
.report-builder[open]>summary{padding-bottom:1rem;border-bottom:1px solid var(--border);margin-bottom:1rem}
.report-config-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem;align-items:end}
.report-config-form label{display:grid;gap:.35rem;min-width:0}
.report-config-form label>span{font-size:.78rem;font-weight:650;color:var(--slate)}
.report-config-form button{justify-self:start}
.report-chart-settings{border-top:1px solid var(--border);margin-top:1rem;padding-top:.75rem}
.report-chart-settings>summary{cursor:pointer;color:var(--slate);font-size:.78rem;font-weight:650;list-style:none}
.report-chart-settings>summary::-webkit-details-marker{display:none}
.report-chart-settings[open]>summary{margin-bottom:.9rem}
.report-config-actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;margin-top:.75rem}
.report-config-actions form,.report-archive{margin:0}
.report-config-actions button[disabled]{opacity:.4;cursor:not-allowed}
.report-archive{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}
@media(max-width:780px){.report-grid,.report-config-form{grid-template-columns:1fr}.report-chart{padding:1rem}.report-builder>summary{align-items:flex-start;flex-direction:column;gap:.2rem}}
.portfolio-pane{min-height:13rem}
.portfolio-health.on_track{background:#e7f7ee;color:#176b42}.portfolio-health.at_risk{background:#fff3d6;color:#895b00}.portfolio-health.off_track{background:#ffe7e7;color:#a32929}.portfolio-health.on_hold{background:#edf0f4;color:#4b5565}.portfolio-health.complete{background:#e7efff;color:#2856a8}
.portfolio-timeline{display:grid;gap:.8rem;overflow-x:auto;min-width:36rem}
.portfolio-timeline-scale{display:flex;justify-content:space-between;margin-left:12rem;font-size:.72rem;color:var(--slate)}
.portfolio-timeline-row{display:grid;grid-template-columns:11rem minmax(16rem,1fr) 11rem;align-items:center;gap:1rem;font-size:.82rem}
.portfolio-timeline-row>a{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portfolio-timeline-track{height:.8rem;border-radius:999px;background:var(--fog);position:relative;overflow:hidden}
.portfolio-timeline-track>span{position:absolute;top:0;height:100%;min-width:3px;border-radius:999px;background:var(--safety)}
.portfolio-timeline-track>span.at_risk{background:#d49a1b}.portfolio-timeline-track>span.off_track{background:var(--stop)}.portfolio-timeline-track>span.on_hold{background:var(--slate)}.portfolio-timeline-track>span.complete{background:#37835c}
.portfolio-update-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}.portfolio-update-grid section{border-top:1px solid var(--border);padding-top:.8rem}.portfolio-update-grid h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin:0 0 .4rem}.portfolio-update-grid p{white-space:pre-wrap;margin:0}
.portfolio-history article{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--border)}
@media(max-width:780px){.portfolio-update-grid{grid-template-columns:1fr}.portfolio-history article{display:grid;gap:.2rem}.portfolio-table .rec-actions{text-align:left}}
.wk-viewtabs{display:flex;align-items:center;gap:.3rem;overflow-x:auto;max-width:100%;padding:.2rem;margin:0 0 1rem;scrollbar-width:thin}
.wk-viewtabs a{flex:0 0 auto;padding:.48rem .72rem;border-radius:var(--radius-sm);color:var(--slate);font-size:.82rem;font-weight:650;text-decoration:none}
.wk-viewtabs a:hover{background:var(--surface-sunk);color:var(--ink)}
.wk-viewtabs a.is-on{background:var(--surface-sunk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hairline)}
.insights-tabs{margin-bottom:1rem}
.insights-tabs~.card code{overflow-wrap:anywhere;word-break:break-word}
.operational-statgrid a.stat{text-decoration:none}.operational-statgrid a.stat:hover{border-color:var(--rule);box-shadow:var(--shadow-sm)}
.operational-queues{margin:.25rem 0 .8rem;border-bottom:1px solid var(--hairline);padding-bottom:.55rem}
.operational-table td{vertical-align:middle}.operational-table .tag{white-space:nowrap}
.operational-stage-blocked,.operational-stage-qa_correction,.operational-stage-revision{background:var(--danger-bg);color:var(--stop)}
.operational-stage-qa_review{background:var(--warn-bg);color:var(--hold)}
.operational-stage-ready,.operational-stage-production{background:var(--safety-wash);color:var(--accent)}
.operational-stage-delivered,.operational-stage-acknowledged{background:var(--ok-bg);color:var(--go)}
@media(max-width:480px){.wk-viewtabs{gap:.15rem}.wk-viewtabs a{padding:.42rem .58rem;font-size:.76rem}}
.resource-board{padding:0;overflow:hidden}.resource-board .table-wrap{border:0;border-radius:0}.resource-role,.resource-board td>span{display:block;font-size:.72rem;margin-top:.15rem}.resource-load{display:grid;grid-template-columns:minmax(7rem,1fr) auto;align-items:center;gap:.65rem;min-width:13rem}.resource-load-track{height:.62rem;background:var(--fog);border-radius:999px;overflow:hidden}.resource-load-track>span{display:block;height:100%;border-radius:inherit;background:#37835c}.resource-load-track>span.near{background:#d49a1b}.resource-load-track>span.over{background:var(--stop)}.resource-load-track>span.unavailable{background:var(--slate)}.capacity-form{display:flex;align-items:center;justify-content:flex-end;gap:.35rem}.capacity-form input{width:4.5rem;padding:.35rem .45rem;text-align:right}
.goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.goal-card{display:flex;flex-direction:column;gap:.65rem;color:inherit;text-decoration:none;min-width:0}.goal-card:hover{border-color:var(--rule);box-shadow:var(--shadow-sm)}.goal-card h2{font-size:1rem;margin:0}.goal-card p{color:var(--slate);margin:0;min-height:2.5em}.goal-card-head,.goal-summary,.goal-history article>div{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.goal-progress{display:grid;gap:.35rem;margin-top:auto}.goal-progress>div{height:.65rem;background:var(--fog);border-radius:999px;overflow:hidden}.goal-progress>div>span{display:block;height:100%;border-radius:inherit;background:var(--safety)}.goal-progress>b{font-size:.78rem}.goal-progress.large>div{height:.85rem}.goal-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.25rem}.goal-summary>div{display:grid;gap:.2rem}.goal-history{margin-top:1rem}.goal-history article{padding:1rem 0;border-top:1px solid var(--border)}.goal-history article p{white-space:pre-wrap}.report-wide{grid-column:1/-1}
@media(max-width:980px){.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.goal-grid,.goal-summary{grid-template-columns:1fr}.resource-load{min-width:0}.capacity-form{justify-content:flex-start}.report-wide{grid-column:auto}}
.topbar-product{width:155px;height:38px;flex:0 0 155px;display:inline-flex;align-items:center;gap:5px;color:var(--ink);white-space:nowrap}
.topbar-product strong{font-size:13px;letter-spacing:.04em}
.topbar-product small{color:var(--slate);font-size:12px;font-weight:500}
@media(max-width:899px){.topbar-inner{max-width:none;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}}
@media(max-width:899px){.topbar-utilities{gap:.6rem}}
/* Real, always-visible header search — indexes as you type + Enter → results page. */
.hdr-search-wrap{flex:1;max-width:460px;min-width:0;position:relative}
.hdr-search{
  display:flex;align-items:center;gap:.55rem;width:100%;
  background:var(--surface-sunk);border:1px solid var(--field-border,var(--hairline));
  min-height:38px;padding:.42rem .65rem;border-radius:var(--radius);
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.hdr-search:hover{border-color:var(--rule)}
.hdr-search:focus-within{border-color:var(--safety);background:var(--surface);box-shadow:0 0 0 2px var(--safety-wash)}
.hdr-results{position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:300;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:min(70vh,460px);overflow-y:auto;padding:.35rem}
.hdr-results[hidden]{display:none}
.hdr-grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--slate);font-weight:700;padding:.5rem .55rem .2rem}
.hdr-row{display:flex;align-items:center;gap:.7rem;padding:.5rem .55rem;border-radius:var(--radius);color:inherit}
.hdr-row:hover,.hdr-row.sel{background:var(--surface-sunk);text-decoration:none}
.hdr-rmain{flex:1;min-width:0;display:flex;flex-direction:column}
.hdr-rt{font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-rs{font-size:.76rem;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-ra{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--slate)}
.hdr-empty{padding:.8rem .6rem;color:var(--slate);font-size:.86rem;text-align:center}
.hdr-hint{padding:.7rem .6rem;color:var(--slate);font-size:.8rem;line-height:1.4}
.hdr-all{justify-content:center;font-weight:600;font-size:.82rem;color:var(--safety-press);border-top:1px solid var(--hairline);margin-top:.2rem;border-radius:0}
.hdr-search .icn{width:16px;height:16px;flex:0 0 auto;color:var(--slate)}
.hdr-search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:.9rem;padding:0;color:var(--ink);appearance:none;-webkit-appearance:none}
.hdr-search input:focus{outline:none;border-color:transparent;box-shadow:none}
.hdr-search input::placeholder{color:var(--slate)}
.hdr-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hdr-search .kbd{flex:0 0 auto;display:inline-grid;place-items:center;width:42px;min-width:42px;height:22px;overflow:hidden;padding:0 .38rem;color:var(--slate);background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--rule);border-radius:5px;font:650 .62rem/1 var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap;transform-origin:center;transition:width .16s ease,min-width .16s ease,padding .16s ease,margin .16s ease,opacity .12s ease,transform .16s ease,border-color .16s ease}
.hdr-search:focus-within .kbd{width:0;min-width:0;margin-right:-.38rem;padding:0;opacity:0;transform:scale(.86);border-color:transparent;pointer-events:none}
@media(max-width:560px){.hdr-search .kbd{display:none}}
/* 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;margin-left:auto}
.acct-btn{position:relative;background:none;border:none;padding:0;cursor:pointer;line-height:0;border-radius:50%}
.acct-btn:focus-visible{outline:0}
.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)}
.acct-btn:focus-visible .avatar,.acct-btn[aria-expanded="true"] .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--safety)}
.avatar-lg{width:42px;height:42px;font-size:.9rem;background:var(--graphite);border:1px solid var(--rule)}
.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:fixed;right:14px;top:57px;width:min(344px,calc(100vw - 40px));max-height:calc(100vh - 70px);overflow-y:auto;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0 0 8px 8px;box-shadow:0 18px 42px rgba(0,0,0,.22);padding:8px;z-index:70;opacity:0;pointer-events:none;transform:none;transform-origin:top right;transition:opacity .16s ease}
.acct-menu[hidden]{display:none}
.acct-menu.is-open{opacity:1;pointer-events:auto;transform:none}
.acct-menu.is-closing{opacity:0;pointer-events:none;transition-delay:.14s}
.acct-menu>*{opacity:0;transform:none;transition:opacity .14s ease}
.acct-menu.is-open>:nth-child(1){opacity:1;transition-delay:.04s}
.acct-menu.is-open>:nth-child(2){opacity:1;transition-delay:.075s}
.acct-menu.is-open>:nth-child(3){opacity:1;transition-delay:.11s}
.acct-menu.is-open>:nth-child(4){opacity:1;transition-delay:.145s}
.acct-menu.is-open>:nth-child(5){opacity:1;transition-delay:.18s}
.acct-menu.is-closing>*{opacity:0}
.acct-menu.is-closing>:nth-child(5){transition-delay:0s}
.acct-menu.is-closing>:nth-child(4){transition-delay:.025s}
.acct-menu.is-closing>:nth-child(3){transition-delay:.05s}
.acct-menu.is-closing>:nth-child(2){transition-delay:.075s}
.acct-menu.is-closing>:nth-child(1){transition-delay:.1s}
.acct-id{min-height:68px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:4px 11px;margin:0;padding:9px 10px;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:6px}
.acct-id>.avatar{grid-row:1 / span 2;align-self:center}
.acct-id-txt{display:flex;flex-direction:column;min-width:0}
.acct-id-txt strong{font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-role{margin-top:2px;color:var(--slate);font-size:12px;font-weight:500;text-transform:capitalize}
.acct-status{align-self:start;display:inline-flex;align-items:center;gap:5px;margin-top:4px;color:var(--slate);font-size:12px;font-weight:650}
.acct-status i{width:6px;height:6px;border-radius:50%;background:var(--go);box-shadow:0 0 0 2px var(--ok-bg)}
.acct-switch-user{grid-column:2 / -1;display:inline-flex;align-items:center;justify-self:start;gap:6px;min-height:24px;margin-top:-1px;color:var(--safety-press);border-radius:4px;font-size:12px;font-weight:700;text-decoration:none}
.acct-switch-user:hover{color:var(--ink);text-decoration:none}
.acct-switch-user .icn{width:13px;height:13px}
/* App switcher — jump between Build / Count / HQ from the initials menu.
   Answers "let me get back to HQ without signing out." Active app is lit. */
.acct-apps{display:flex;gap:6px;margin:8px 0 0}
.acct-app{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border:1px solid var(--hairline);border-radius:6px;background:var(--surface-sunk);color:var(--slate);text-decoration:none;transition:border-color .14s ease,color .14s ease,background .14s ease}
.acct-app:hover{border-color:color-mix(in srgb,var(--safety) 45%,var(--hairline));color:var(--ink);text-decoration:none}
.acct-app .acct-app-mk{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--surface);border:1px solid var(--hairline);font-size:13px;font-weight:800;color:var(--ink);letter-spacing:0}
.acct-app-nm{font-size:12px;font-weight:700}
.acct-app.is-on{border-color:var(--safety);background:var(--safety-wash);color:var(--safety-press)}
.acct-app.is-on .acct-app-mk{background:var(--safety);border-color:var(--safety);color:var(--on-accent)}
.acct-switch-user>span{display:inline-flex;align-items:baseline;gap:5px}
.acct-switch-user small{color:var(--slate);font-size:12px;font-weight:500}
.profile-shortcuts{margin-top:7px;padding:7px;background:color-mix(in srgb,var(--surface-sunk) 72%,transparent);border:1px solid var(--hairline);border-radius:7px}
.profile-shortcuts-head{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 3px 5px}
.profile-shortcuts-head>span{color:var(--slate);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.profile-shortcuts-head button{min-height:32px;display:inline-flex;align-items:center;gap:5px;padding:0 8px;color:var(--slate);background:transparent;border:1px solid transparent;border-radius:5px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.profile-shortcuts-head button:hover,.profile-shortcuts-head button[aria-expanded="true"]{color:var(--ink);background:var(--surface);border-color:var(--hairline)}
.profile-shortcuts-head button .icn{width:13px;height:13px}
.profile-app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.profile-app{min-width:0;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;padding:7px 4px;color:var(--graphite);background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--hairline);border-radius:7px;font:inherit;text-align:center;text-decoration:none;cursor:grab;transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .1s ease,box-shadow .12s ease,opacity .12s ease}
.profile-app[hidden]{display:none}
.profile-app:hover{color:var(--ink);background:var(--surface);border-color:var(--rule);box-shadow:0 5px 15px rgba(0,0,0,.12);text-decoration:none}
.profile-app:active{transform:scale(.97)}
.profile-app.is-dragging{opacity:.42;cursor:grabbing;transform:scale(.96)}
.profile-app.is-drop-target{border-color:var(--safety);background:color-mix(in srgb,var(--safety-wash) 60%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--safety) 45%,transparent)}
.profile-app-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--slate);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:8px;transition:color .12s ease,background-color .12s ease,border-color .12s ease,transform .12s ease}
.profile-app:nth-child(1) .profile-app-icon{color:var(--safety);background:var(--safety-wash)}
.profile-app:nth-child(2) .profile-app-icon{color:var(--graphite)}
.profile-app:nth-child(3) .profile-app-icon{color:var(--hold);background:var(--warn-bg)}
.profile-app:nth-child(4) .profile-app-icon{color:var(--graphite)}
.profile-app:nth-child(5) .profile-app-icon{color:var(--safety)}
.profile-app:nth-child(6) .profile-app-icon{color:var(--go);background:var(--ok-bg)}
.profile-app:hover .profile-app-icon{border-color:var(--rule);transform:translateY(-1px)}
.profile-app .icn,.profile-menu-signout .icn{width:18px;height:18px}
.profile-app>span:nth-child(2){font-size:12px;font-weight:650;line-height:1.2}
.profile-app small{color:var(--slate);font-size:12px;line-height:1.2}
.profile-pin-editor{margin-top:7px;padding-top:7px;border-top:1px solid var(--hairline);opacity:0;transform:translateY(-4px);transition:opacity .14s ease,transform .17s ease}
.profile-pin-editor[hidden]{display:none}
.profile-pin-editor.is-open{opacity:1;transform:none}
.profile-pin-note{display:flex;align-items:center;justify-content:space-between;padding:0 3px 7px;color:var(--slate);font-size:12px}
.profile-pin-note strong{color:var(--ink);font-variant-numeric:tabular-nums}
.profile-pin-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;max-height:194px;overflow-y:auto;padding-right:2px}
.profile-pin-choice{min-width:0;min-height:42px;display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:7px;padding:5px 7px;color:var(--graphite);background:var(--surface);border:1px solid var(--hairline);border-radius:6px;font:inherit;font-size:12px;font-weight:600;text-align:left;cursor:pointer}
.profile-pin-choice:hover{color:var(--ink);border-color:var(--rule)}
.profile-pin-icon{width:24px;height:24px;display:grid;place-items:center;color:var(--slate)}
.profile-pin-icon .icn{width:16px;height:16px}
.profile-pin-choice>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-pin-choice i{width:17px;height:17px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%;font-style:normal}
.profile-pin-choice i::before{content:"+";font-size:13px;line-height:1}
.profile-pin-choice.is-pinned{color:var(--safety-press);background:var(--safety-wash);border-color:color-mix(in srgb,var(--safety) 30%,var(--hairline))}
.profile-pin-choice.is-pinned i{color:var(--safety-press);border-color:currentColor}
.profile-pin-choice.is-pinned i::before{content:"−"}
.profile-pin-editor.at-limit .profile-pin-note{animation:pin-limit .28s ease}
@keyframes pin-limit{50%{color:var(--hold);transform:translateX(-3px)}}
.profile-utility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:7px;padding:5px;border:1px solid var(--hairline);border-radius:7px;background:color-mix(in srgb,var(--surface-sunk) 60%,transparent)}
.profile-utility{min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;color:var(--graphite);background:transparent;border:1px solid transparent;border-radius:6px;font:inherit;text-align:center;text-decoration:none;cursor:pointer}
.profile-utility:hover{color:var(--ink);background:var(--surface);border-color:var(--hairline);text-decoration:none}
.profile-utility .profile-app-icon{width:28px;height:28px;border:0;background:transparent}
.profile-utility .icn{width:16px;height:16px}
.profile-utility>span:nth-child(2){font-size:12px;font-weight:650}
.profile-utility small{color:var(--slate);font-size:12px;line-height:1.2}
.profile-menu-row{min-height:44px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;padding:6px 9px;color:var(--graphite);border-radius:6px}
.profile-menu-row:hover{background:var(--surface-sunk);text-decoration:none}
.profile-menu-row .icn{width:17px;height:17px;color:var(--slate)}
.profile-menu-row>span{display:flex;flex-direction:column;font-size:12.5px;font-weight:650}
.profile-menu-row small{color:var(--slate);font-size:12px;font-weight:500}
.profile-menu-row.dev,.profile-menu-row.dev .icn{color:var(--safety-press)}
.profile-menu-signout{min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:7px;padding:6px 10px;color:var(--graphite);border:1px solid var(--hairline);border-radius:7px;text-decoration:none;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.profile-menu-signout .profile-app-icon{width:32px;height:32px;border-radius:7px}
.profile-menu-signout:hover{color:var(--stop);background:var(--danger-bg);border-color:color-mix(in srgb,var(--stop) 25%,transparent);text-decoration:none}
.profile-signout-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.profile-signout-copy strong{font-size:12.5px;font-weight:650}
.profile-signout-copy small{margin-top:1px;color:var(--slate);font-size:12px}
.profile-app:focus-visible,.profile-pin-choice:focus-visible,.profile-utility:focus-visible,.profile-menu-row:focus-visible,.profile-menu-signout:focus-visible{outline:1px solid var(--safety);outline-offset:-1px}
@media(prefers-reduced-motion:reduce){
  .acct-menu,.acct-menu>*,.profile-pin-editor{transition:none}
  .profile-pin-editor.at-limit .profile-pin-note{animation:none}
}
.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);max-height:5rem;overflow:hidden;transition:max-height .24s ease,padding .24s ease,opacity .2s ease}
.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}
/* collapse smoothly (max-height→0) instead of a hard display:none that yanks
   the whole page up; after the transition it's fully gone from flow */
html.demo-ack .demobar{max-height:0;padding-top:0;padding-bottom:0;border-bottom-width:0;opacity:0}
/* 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:var(--on-accent);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:var(--on-accent);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}}
.winbar.summit .winbar-in{background:var(--safety)}

/* ---- Trailhead: the guided onboarding expedition ---- */
.trailbar{height:8px;background:var(--surface-sunk);border-radius:999px;overflow:hidden;margin:.1rem 0 1.1rem}
.trailbar-fill{height:100%;background:var(--go);border-radius:999px;transition:width .45s cubic-bezier(.2,.9,.3,1)}
.guide{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface-sunk);border-radius:var(--radius);padding:.75rem .9rem;margin-bottom:1.1rem}
.guide-mark{flex:0 0 auto;color:var(--safety);line-height:1}
.guide-mark .icn{width:22px;height:22px}
.guide p{margin:0;font-size:.9rem;color:var(--graphite);line-height:1.45}
.guide-say{color:var(--graphite);font-size:.92rem;line-height:1.5;margin:0 0 .9rem}

.trail{position:relative}
.leg{position:relative;padding-left:2.5rem}
.leg::before{content:"";position:absolute;left:1rem;top:0;bottom:0;width:2px;background:var(--hairline);transform:translateX(-50%)}
.leg:first-child::before{top:1.35rem}
.leg:last-child::before{bottom:auto;height:1.35rem}
.leg.done::before{background:var(--go)}
.leg-head{display:flex;align-items:center;gap:.6rem;padding:.65rem 0;color:inherit;text-decoration:none}
.leg-head:hover .leg-label{color:var(--safety-press)}
.leg-pin{position:absolute;left:1rem;top:1.35rem;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--slate);z-index:1}
.leg-pin .icn{width:12px;height:12px;stroke-width:2.4}
.leg.done .leg-pin{background:var(--go);border-color:var(--go);color:var(--on-accent)}
.leg.now .leg-pin{border-color:var(--safety);color:var(--safety);box-shadow:0 0 0 4px var(--safety-wash)}
.leg-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.leg-label{font-weight:600;color:var(--ink);font-size:.95rem;transition:color .12s}
.leg.todo .leg-label{color:var(--slate)}
.leg-sub{font-size:.8rem;color:var(--slate)}
.leg-flag{flex:0 0 auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--slate);white-space:nowrap}
.leg.now .leg-flag{color:var(--safety)}
.leg.done .leg-flag{color:var(--go)}
.leg-body{padding:.1rem 0 1.2rem;animation:acctpop .16s ease}

.trade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.5rem;margin:.5rem 0}
.trade-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:.85rem .5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s}
.trade-tile:hover{border-color:var(--rule)}
.trade-tile input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.trade-tile.sel,.trade-tile:has(input:checked){border-color:var(--safety);box-shadow:inset 0 0 0 1px var(--safety);background:var(--safety-wash)}
.trade-tile:has(input:focus-visible){outline:2px solid var(--safety);outline-offset:2px}
.tt-ic{color:var(--graphite);line-height:1}
.tt-ic .icn{width:26px;height:26px}
.trade-tile.sel .tt-ic,.trade-tile:has(input:checked) .tt-ic{color:var(--safety-press)}
.tt-label{font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.2}

.th-catalog{display:flex;flex-direction:column;gap:.8rem;margin:.2rem 0 1rem}
.th-catname{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--slate);font-weight:700;margin-bottom:.3rem}
.th-item{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.th-item:last-child{border-bottom:none}
.th-item span:last-child{color:var(--slate);flex:0 0 auto}

.summit-card{text-align:center;max-width:30rem;margin:0 auto;padding:.4rem .2rem .2rem}
.summit-flag{color:var(--safety);display:inline-flex}
.summit-flag .icn{width:38px;height:38px;stroke-width:1.6}

/* ---- 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}

/* ---- Job budget: the strip on the job page + the stats header ---- */
.budget-strip{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.8rem;padding:.65rem .85rem;
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-sunk);text-decoration:none;color:var(--ink)}
.budget-strip:hover{border-color:var(--rule);text-decoration:none}
.bs-l{display:flex;flex-direction:column;line-height:1.25}
.bs-l b{font-size:.9rem}
.bs-sub{font-size:.74rem;color:var(--slate)}
.bs-nums{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--graphite);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.bs-dot{color:var(--muted-2)}
.bs-var{font-weight:700;color:var(--go)}
.bs-var.over{color:var(--stop)}
.bs-go{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--accent);white-space:nowrap}
/* change orders on the job page */
.co-list{margin-top:.7rem;display:flex;flex-direction:column;gap:.4rem}
.co-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .7rem;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-sunk)}
.co-row.co-void{opacity:.6}
.co-l{flex:1;min-width:0;font-size:.88rem}
.co-title{color:var(--slate)}
.co-amt{font-weight:700;font-variant-numeric:tabular-nums}
.co-add{margin-top:.7rem;align-self:flex-start}
.budget-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.budget-stats .stat{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:.75rem .9rem}
.bg-var.go{color:var(--go)} .bg-var.stop{color:var(--stop)}
.budget-over{display:flex;align-items:flex-start;gap:.7rem;margin:0 0 1rem;padding:.8rem 1rem;
  border:1px solid var(--stop);background:var(--danger-bg);border-radius:var(--radius);font-size:.9rem;line-height:1.4;color:var(--ink)}
.bo-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--stop);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:.05rem}
@media(max-width:640px){ .budget-stats{grid-template-columns:1fr 1fr} }

/* ---- Quick List (the cart): header badge + slide-over panel ---- */
.qlist-btn{position:relative}
.qlist-badge{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:.62rem;font-weight:700;line-height:17px;text-align:center;
  border:2px solid var(--surface);box-sizing:content-box}
.qlist-pop{animation:qlpop .32s cubic-bezier(.2,.9,.3,1.4)}
@keyframes qlpop{35%{transform:scale(1.16)}}
.qlist-scrim{position:fixed;inset:0;z-index:88;background:rgba(10,10,10,.42)}
.qlist-scrim[hidden]{display:none}
.qlist-panel{position:fixed;top:0;right:0;bottom:0;z-index:89;width:min(400px,94vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--hairline);box-shadow:var(--shadow-lg);
  transform:translateX(102%);transition:transform .2s cubic-bezier(.2,0,0,1);
  padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom))}
.qlist-panel.open{transform:translateX(0)}
.qlist-panel[hidden]{display:none}
.qlist-head{display:flex;align-items:center;justify-content:space-between}
.qlist-head h2{margin:0;font-size:1.15rem}
.qlist-sub{margin:.25rem 0 .8rem;font-size:.82rem;color:var(--slate)}
.qlist-items{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable}
.qlist-empty{padding:2.2rem 0;text-align:center;color:var(--slate);font-weight:600}
.qlist-empty span{font-weight:400;font-size:.82rem}
.qlist-row{display:flex;align-items:center;gap:.6rem;padding:.65rem 0;border-bottom:1px solid var(--hairline)}
.qlist-row:last-child{border-bottom:0}
.qlr-main{flex:1;min-width:0}
.qlr-name{font-weight:600;font-size:.9rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qlr-sub{font-size:.76rem;color:var(--slate);font-variant-numeric:tabular-nums}
.qlr-qty{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.qlr-step{width:30px;height:34px;border:1px solid var(--field-border);background:var(--surface);font:inherit;font-size:1rem;cursor:pointer;color:var(--ink)}
.qlr-step:first-child{border-radius:8px 0 0 8px}
.qlr-step:last-of-type{border-radius:0 8px 8px 0}
.qlr-qin{width:44px;min-height:34px;border:1px solid var(--field-border);border-left:0;border-right:0;border-radius:0;
  text-align:center;font-size:16px;font-variant-numeric:tabular-nums;padding:.2rem}
.qlist-actions{display:flex;flex-direction:column;gap:.45rem;padding-top:.9rem;border-top:1px solid var(--hairline)}
.qlist-actions .btn{width:100%;text-align:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.qlist-actions .btn.disabled{opacity:.45;pointer-events:none}
.qlist-clear{color:var(--stop)}
/* the "+ List" quick-add on rows */
.addlist-btn{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);
  background:none;border:none;cursor:pointer;padding:.35rem .4rem;border-radius:6px;white-space:nowrap}
.addlist-btn:hover{background:var(--safety-wash)}

/* ---- Reusable modal (popup) — add/edit/import forms open here, not inline ---- */
.modal{position:fixed;inset:0;z-index:90;display:none}
.modal:not([hidden]){display:block}
.modal-scrim{position:absolute;inset:0;background:rgba(20,18,15,.45);animation:cmdkfade .12s ease}
.modal-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(600px,94vw);max-height:88vh;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:modalpop .16s cubic-bezier(.2,.9,.3,1)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.05rem 1.2rem .9rem}
.modal-head h2{margin:0;font-size:1.15rem}
.modal-head .bar-sub{display:block;margin-top:.15rem}
.modal-x{background:none;border:none;cursor:pointer;color:var(--slate);line-height:1;padding:.25rem .4rem;border-radius:var(--radius-sm);font-size:1.5rem;flex:0 0 auto;margin:-.2rem -.3rem 0 0}
.modal-x:hover{background:var(--surface-sunk);color:var(--ink)}
.modal-body{padding:0 1.2rem 1.2rem;overflow-y:auto;scrollbar-gutter:stable}
.modal-body .measure,.modal-body .itemform{max-width:none}
@keyframes modalpop{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:560px){.modal-panel{top:auto;bottom:0;left:0;transform:none;width:100%;max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;animation:navsheetup .2s ease}}
.modal-panel.modal-wide{width:min(760px,94vw)}
/* CSV import preview */
.modal-body input[type=file]{font-size:.88rem;color:var(--slate);width:100%;padding:.6rem;border:1px dashed var(--field-border,var(--rule));border-radius:var(--radius);background:var(--surface-sunk);cursor:pointer}
.imp-prev:not(:empty){margin-top:.9rem}
.imp-summary{font-size:.9rem;margin-bottom:.5rem}
.imp-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.imp-chip{font-size:.74rem;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:999px;padding:.15rem .55rem;color:var(--slate)}
.imp-chip b{color:var(--ink);font-weight:600}
.imp-preview{border:1px solid var(--hairline);border-radius:var(--radius);overflow:auto;max-height:240px}
.imp-preview table{font-size:.8rem}
.imp-preview th{position:sticky;top:0;background:var(--surface);z-index:1;white-space:nowrap}
.imp-preview td{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.imp-more{font-size:.78rem;color:var(--slate);padding:.4rem .2rem 0}

/* ---- Search results page ---- */
.search-page{display:flex;gap:.5rem;margin-bottom:var(--sp-4);max-width:640px}
.search-page input{flex:1;min-width:0;padding:.6rem .8rem;border:1px solid var(--field-border,var(--hairline));border-radius:var(--radius);font:inherit;font-size:1rem;background:var(--surface);color:var(--ink)}
.search-page input:focus{outline:none;border-color:var(--safety);box-shadow:0 0 0 3px var(--safety-wash)}
.srch-list{display:flex;flex-direction:column}
.srch-row{display:flex;align-items:center;gap:.85rem;padding:.65rem .3rem;border-top:1px solid var(--hairline);color:inherit}
.srch-row:first-child{border-top:none}
.srch-row:hover{background:var(--surface-sunk);text-decoration:none}
.srch-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.srch-t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-s{font-size:.82rem;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-amt{font-variant-numeric:tabular-nums;font-weight:600;flex:0 0 auto;color:var(--ink)}

/* ---- Layout ---- */
.app{max-width:var(--app-max);width:100%;margin:0 auto;padding:1.25rem var(--app-pad) 3rem}
.public{max-width:720px;margin:0 auto;padding:1.25rem 1rem 3rem}
/* Public pages scroll on the document (no .appframe), so a growing/shrinking
   page (answers expanding, the estimate appearing, an error showing) would
   add/remove the scrollbar and shift content sideways. Reserve its gutter too. */
html:has(main.public){scrollbar-gutter:stable}
/* cards sit at their natural height, tops aligned — never stretched to match a
 * taller neighbour (that stretch is what made short cards look empty & "offset") */
.grid{display:grid;gap:var(--sp-4);align-items:start}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2>.col-2{grid-column:1 / -1}
@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}
.card.warn{border-color:var(--hold)}
.card.stop{border-color:var(--stop)}
/* stat tile — a KPI card's big number + its label, e.g. admin overview tiles */
.card .n{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.card .k{font-size:.72rem;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
.card.warn .n{color:var(--hold)} .card.stop .n{color:var(--stop)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-bottom:1.4rem}
.small{font-size:.8rem;color:var(--slate)}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* bordered status/kind chip — distinct from .pill (a tabular-nums cost figure) and
   .chip (a clickable filter picker); this one is a small read-only label. */
.tagpill{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.02em;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--rule);color:var(--slate)}
.tagpill.go,.tagpill.beta,.tagpill.t3{color:var(--go);border-color:var(--go)}
.tagpill.warn,.tagpill.dev,.tagpill.t2{color:var(--hold);border-color:var(--hold)}
.tagpill.stop,.tagpill.susp{color:var(--stop);border-color:var(--stop)}
.tagpill.accent,.tagpill.admin{color:var(--safety-press);border-color:var(--safety)}
.tagpill.t1{color:var(--blueprint);border-color:var(--blueprint)}
.lead{color:var(--slate);margin:0 0 1.2rem;font-size:.85rem}
.f-inline{display:inline}
.copy{cursor:pointer;border-bottom:1px dashed var(--rule)}
.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)}
.tag.en_route{color:var(--hold)}
.tag.on_site{color:var(--go)}
.tag.scheduled{color:var(--hold)}
.tag.in_progress{color:var(--blueprint)}
.delta-up{color:var(--stop)}
.delta-down{color:var(--go)}

/* ---- Schedule (calendar of dispatched work) ---- */
.sched-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.sched-nav{display:flex;align-items:center;gap:.4rem}
.sched-range{font-weight:600;margin-left:.5rem;color:var(--ink)}
.sched-crew{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.sched-grid{display:grid;gap:.6rem}
.sched-week{grid-template-columns:repeat(7,minmax(0,1fr))}
.sched-day{grid-template-columns:minmax(0,560px)}
.sched-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0;display:flex;flex-direction:column;overflow:hidden}
.sched-col.today{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
.sched-dhead{display:flex;align-items:baseline;gap:.4rem;padding:.5rem .6rem;border-bottom:1px solid var(--line);background:var(--wash)}
.sd-dow{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--slate)}
.sd-num{font-weight:700;font-size:1rem;color:var(--ink)}
.sched-col.today .sd-dow,.sched-col.today .sd-num{color:var(--accent)}
.sd-today{margin-left:auto;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--accent)}
.sched-events{display:flex;flex-direction:column;gap:.45rem;padding:.5rem;min-height:3.2rem;flex:1}
.sched-none{color:var(--muted-2);text-align:center;padding:.6rem 0;font-size:.9rem}
.sev{display:block;text-decoration:none;color:inherit;background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--slate);border-radius:var(--radius-sm);padding:.45rem .55rem;transition:transform .08s ease,box-shadow .12s ease}
.sev:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.sev-assigned{border-left-color:var(--blueprint)}
.sev-en_route{border-left-color:var(--hold)}
.sev-on_site{border-left-color:var(--go)}
.sev-complete{border-left-color:var(--muted-2);opacity:.72}
.sev-top{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.15rem}
.sev-win{font-size:.75rem;font-weight:800;letter-spacing:.04em;color:var(--slate);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.08rem .35rem}
.sev-dot{width:7px;height:7px;border-radius:50%;background:var(--slate);flex:0 0 auto}
.st-assigned{background:var(--blueprint)}.st-en_route{background:var(--hold)}.st-on_site{background:var(--go)}.st-complete{background:var(--muted-2)}
.sev-name{font-weight:600;font-size:.86rem;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sev-addr{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sev-meta{font-size:.75rem;color:var(--slate);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-unsched{margin-top:var(--sp-4)}
.su-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.su-head h2{margin:0}
@media(max-width:640px){
  .sched-week{grid-template-columns:1fr}
  .sched-col.sched-empty{display:none}
  .sched-dhead{position:sticky;top:0}
}

/* ---- 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}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;min-height:70px;margin:0 0 1.3rem;padding:0 .1rem}
.home-head-copy{min-width:0}.home-head .eyebrow{display:block;margin-bottom:.5rem;color:var(--safety)}
.home-head h1{margin:0;font-size:clamp(1.65rem,2vw,2.15rem);letter-spacing:-.035em}.home-head .ph-sub{max-width:680px;margin:.42rem 0 0;color:var(--slate);font-size:.95rem}
.home-actions{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}.home-actions .btn{min-height:40px;padding-inline:.9rem}
.home-customize{padding:.45rem .2rem;color:var(--slate);font-size:.82rem;font-weight:650;text-decoration:none;white-space:nowrap}.home-customize:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.home-widget-list{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:1rem;align-items:start}
.home-widget{min-width:0}.home-widget-my_open_work{grid-column:1}.home-widget-projects{grid-column:2;grid-row:span 2}.home-widget-recent_activity{grid-column:1}.home-widget-overdue{grid-column:1}
.home-widget-work_snapshot,.home-widget-completion_pulse{grid-column:1/-1}
.home-work-role{display:inline-flex;width:max-content;max-width:100%;align-items:center;min-height:21px;margin-bottom:.32rem;padding:0 .45rem;border:1px solid color-mix(in srgb,var(--safety) 25%,var(--hairline));border-radius:999px;color:var(--safety-press);background:var(--safety-wash);font:750 .65rem/1 var(--font-mono);letter-spacing:.025em}
.home-widget .overview-panel{margin:0;overflow:hidden;border-color:var(--hairline);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.home-widget .overview-panel .card-h{min-height:68px;padding:.9rem 1.05rem;border-bottom-color:var(--hairline)}
.home-widget .overview-panel .card-h h2{font-size:1rem;letter-spacing:-.015em}.home-widget .overview-panel .bar-sub{display:block;margin-top:.2rem;color:var(--slate);font-size:.77rem}
.home-widget .overview-panel .card-h>a{display:inline-flex;align-items:center;min-height:32px;padding:0 .55rem;border-radius:6px;font-size:.78rem;font-weight:700}.home-widget .overview-panel .card-h>a:hover{background:var(--safety-wash);text-decoration:none}
.home-work-list,.home-project-list{padding:.35rem}.home-work-row,.home-project-row{display:grid!important;min-height:68px!important;align-items:center;gap:.7rem!important;margin:0!important;padding:.75rem!important;border-radius:8px!important}
.home-snapshot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:.35rem}
.home-snapshot-metric{display:flex;flex-direction:column;gap:.18rem;min-height:86px;padding:.85rem .8rem;color:var(--slate);text-decoration:none;border-radius:8px}
.home-snapshot-metric:hover{background:var(--surface-sunk);color:var(--ink)}
.home-snapshot-metric strong{color:var(--ink);font-size:1.55rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.home-snapshot-metric span{font-size:.78rem;font-weight:650}.home-snapshot-metric.is-attention strong{color:var(--stop)}
.home-pulse-total{font-size:.78rem;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.home-pulse-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:.55rem;min-height:145px;padding:.8rem 1rem .7rem;border-top:1px solid var(--hairline)}
.home-pulse-day{display:grid;grid-template-rows:18px 1fr 16px;align-items:end;gap:.28rem;min-width:0;height:118px;text-align:center}
.home-pulse-value{color:var(--slate);font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}.home-pulse-bar{display:block;align-self:end;min-height:4px;height:var(--pulse-height);background:var(--safety);border-radius:5px 5px 2px 2px;opacity:.82}
.home-pulse-label{color:var(--slate);font-size:.67rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
@media(max-width:700px){.home-snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-snapshot-metric{min-height:74px}.home-pulse-chart{gap:.3rem;padding-inline:.7rem}}
.home-work-row{grid-template-columns:18px minmax(0,1fr) auto}.home-work-check{width:17px;height:17px;border:1.5px solid var(--field-border);border-radius:50%;background:var(--surface);transition:border-color .14s ease,box-shadow .14s ease}.home-work-row:hover .home-work-check{border-color:var(--safety);box-shadow:0 0 0 3px var(--safety-wash)}
.home-work-row .q-label,.home-project-row .q-label{display:flex;min-width:0;flex-direction:column;gap:.14rem}.home-work-row .q-label strong,.home-project-row .q-label strong{overflow:hidden;color:var(--ink);font-size:.87rem}.home-work-row .q-label strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}.home-project-row .q-label strong{text-overflow:ellipsis;white-space:nowrap}.home-work-row .q-label small,.home-project-row .q-label small{overflow:hidden;color:var(--slate);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.home-work-row .home-work-role{margin-bottom:0}
.home-due,.home-no-date{font:700 .7rem/1 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}.home-no-date{color:var(--slate);font-weight:600}
.home-project-row{grid-template-columns:30px minmax(0,1fr) auto}.home-project-mark{display:grid;width:30px;height:30px;place-items:center;overflow:hidden;color:var(--safety-press);background:var(--safety-wash);border:1px solid color-mix(in srgb,var(--safety) 28%,var(--hairline));border-radius:8px;font-size:.7rem;font-weight:800;line-height:1}.home-project-row .q-n{min-width:52px;padding:.32rem .42rem;color:var(--slate);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:999px;font:700 .68rem/1 var(--font-mono);text-align:center;white-space:nowrap}.home-project-row .q-n.has-open-work{color:var(--safety-press);background:var(--safety-wash);border-color:color-mix(in srgb,var(--safety) 24%,var(--hairline))}
.home-activity-list{display:flex;flex-direction:column;gap:0;margin:0;padding:.35rem;list-style:none}.home-activity-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.65rem;align-items:start;position:relative;padding:.7rem .55rem;border-radius:8px}.home-activity-row:not(:last-child)::after{position:absolute;left:1.35rem;top:2.45rem;bottom:-.1rem;width:1px;background:var(--hairline);content:""}.home-activity-row:hover{background:var(--surface-sunk)}.home-activity-avatar{display:grid;width:26px;height:26px;place-items:center;color:var(--safety-press);background:var(--safety-wash);border-radius:50%;font-size:.62rem;font-weight:800;z-index:1}.home-activity-row .wk-act-h{display:flex;min-width:0;flex-direction:column;gap:.2rem;padding-top:.08rem}.home-activity-row .wk-act-h>a,.home-activity-row .wk-act-h{color:var(--ink);font-size:.81rem;line-height:1.35}.home-activity-row .wk-act-h>a:hover{color:var(--safety-press);text-decoration:none}.home-activity-row small{color:var(--slate);font-size:.7rem}
@media(max-width:960px){.home-widget-list{grid-template-columns:1fr}.home-widget-my_open_work,.home-widget-projects,.home-widget-recent_activity,.home-widget-overdue{grid-column:auto;grid-row:auto}}
@media(max-width:640px){.home-head{align-items:flex-start;flex-direction:column;margin-bottom:1rem}.home-actions{width:100%}.home-actions .btn{flex:1;justify-content:center}.home-widget .overview-panel .card-h{min-height:68px;padding:.85rem}.home-work-row,.home-project-row{padding:.68rem!important}.home-work-row .q-label small,.home-project-row .q-label small{max-width:calc(100vw - 155px)}}
.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}
/* touch devices have no hover — the per-row Save must always be visible */
@media(hover:none){.grid-edit .btn,.grid-edit button{visibility:visible}}
.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:var(--go);color:var(--go)}
.flash.error{background:var(--danger-bg);border-color:var(--stop);color:var(--stop)}

/* ---- Forms ---- */
label{display:block;font-weight:600;margin:.7rem 0 .2rem;font-size:.85rem}
/* labels used as CONTROLS (not field captions) must not inherit the caption margin */
.tab,.trade-tile,label.inline,label.req-toggle,label.link,label.nav-scrim,label.swatch{margin:0}
input,select,textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--field-border);background:var(--surface);font:inherit;border-radius:var(--radius-sm);color:var(--text);
  transition:border-color .12s ease,box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--safety-wash)}
/* Custom dropdown — kills the cheap native OS chevron; themed caret, room for it. */
select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:var(--caret-url);background-repeat:no-repeat;background-position:right .85rem center}
/* Date/time: color-scheme (set on :root) makes the value, placeholder, and picker
   glyph legible in dark; keep a comfortable height so an empty field isn't a void. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-height:2.7rem}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer}
input[type=date]:hover::-webkit-calendar-picker-indicator,input[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}
/* File input → a clean styled button instead of the raw "Choose File" OS control. */
input[type=file]{padding:.45rem .55rem;cursor:pointer;font-size:.85rem;color:var(--slate)}
input[type=file]::file-selector-button,input[type=file]::-webkit-file-upload-button{
  font:inherit;font-weight:600;font-size:.82rem;margin-right:.75rem;padding:.5rem .95rem;
  border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface-sunk);color:var(--ink);
  cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .12s ease}
input[type=file]::file-selector-button:hover,input[type=file]::-webkit-file-upload-button:hover{background:var(--rule)}
.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)}
/* Default button = SECONDARY (outline). Filled emphasis is reserved for ONE
   primary per context: .accent (orange) for commit, .danger (red) for destructive. */
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(--rule);background:var(--surface);color:var(--ink);border-radius:var(--radius);
  transition:background .12s,border-color .12s,color .12s,transform .05s;
}
button:hover,.btn:hover{background:var(--surface-sunk);border-color:var(--ink);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));padding-top:env(safe-area-inset-top)}
@media(max-width:899px){
  .app-header{position:sticky;top:0;z-index:250}   /* 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:var(--on-accent)}
.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%}
/* busy buttons show a real working state: label yields to a spinner, width frozen
   by the submit handler so nothing shifts. Feels like the system is checking. */
button[aria-busy="true"],.btn[aria-busy="true"]{color:transparent!important;position:relative;pointer-events:none}
button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:mbspin .7s linear infinite}
button[aria-busy="true"].ghost::after,.btn.ghost[aria-busy="true"]::after{border-color:var(--rule);border-top-color:var(--accent)}
@keyframes mbspin{to{transform:rotate(360deg)}}
.btn.danger,button.danger{background:var(--surface);border-color:var(--field-border);color:var(--stop)}
.btn.danger:hover,button.danger:hover{background:var(--danger-bg);border-color:var(--stop);color:var(--stop)}
.act.danger{color:var(--stop)}
/* 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)}
/* ---- row states -----------------------------------------------------------
 * This was one rule: `tbody tr:hover{background:var(--surface-2)}`. That token
 * is also the TABLE HEADER background, so a hovered row took on the header's
 * appearance — a full-width slab that changed the row's perceived structure,
 * and the only row state that existed. Hover, keyboard focus, the current row,
 * multi-selection, editing, error and completion are seven different things
 * and a person has to be able to tell them apart.
 *
 * Every state below changes colour only, plus an inset shadow for the accent
 * bar. Nothing changes width, padding or border thickness, so no state shifts
 * the row's geometry or moves the content beside it. */
tbody tr{transition:background-color .08s linear,box-shadow .08s linear}
@media (prefers-reduced-motion:reduce){tbody tr{transition:none}}

tbody tr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
/* Keyboard focus is louder than hover and carries the accent bar, because a
   keyboard user has no pointer to tell them where they are. */
tbody tr:focus-within{background:color-mix(in srgb,var(--safety) 7%,transparent);
  box-shadow:inset 3px 0 0 var(--safety)}
tbody tr.is-current{box-shadow:inset 3px 0 0 var(--rule)}
tbody tr.is-selected{background:color-mix(in srgb,var(--safety) 12%,transparent);
  box-shadow:inset 3px 0 0 var(--safety)}
tbody tr.is-selected:hover{background:color-mix(in srgb,var(--safety) 16%,transparent)}
tbody tr.is-editing{background:color-mix(in srgb,var(--safety) 6%,transparent);
  box-shadow:inset 0 0 0 1px var(--safety)}
tbody tr.is-error{background:var(--danger-bg,color-mix(in srgb,var(--stop) 10%,transparent));
  box-shadow:inset 3px 0 0 var(--stop)}
/* Completed work stays legible — dimmed, not hidden, and never struck through
   in a way that makes it unreadable. */
tbody tr.is-done td{opacity:.62}
tbody tr.is-done:hover td{opacity:.8}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* responsive: below 640px, .table--cards becomes a NATIVE-FEELING LIST — the
   canonical mobile row (title + meta line + trailing value), NOT a stack of
   label:value cards. One glance = identity, status, and the deciding number.
   Anatomy:  [Title.............................  $value]
             [sub/address · status chip · meta..........]  */
@media(max-width:640px){
  .table--cards thead{position:absolute;left:-9999px}
  .table--cards tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.15rem;
    border:0;border-bottom:1px solid var(--hairline);border-radius:0;margin:0;
    padding:.7rem .1rem;background:transparent;min-height:56px}
  .table--cards tbody tr:last-child{border-bottom:0}
  .table--cards tbody tr:hover{background:transparent}
  .table--cards tbody tr:active{background:var(--surface-sunk)}
  .table--cards td{display:inline-flex;align-items:baseline;border:0;padding:0;text-align:left;min-width:0}
  .table--cards td::before{content:none}
  /* 1 · the title zone — identity, one strong line + a quiet sub-line */
  .table--cards td:first-child{flex:1 1 55%;order:1;display:block;font-size:.94rem;font-weight:600;line-height:1.3}
  /* the title reads as a calm heading, not a loud orange link — the whole row is tappable */
  .table--cards td:first-child a{color:var(--ink)}
  .table--cards td:first-child .muted{display:block;font-weight:400;font-size:.78rem;line-height:1.35;margin-top:.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 2 · the deciding number(s) — trailing, strong, tabular. When a row carries
     more than one number (e.g. Material cost + Labor), a bare stack of digits is
     ambiguous, so each number wears a small caption above it. */
  .table--cards td.num{order:2;margin-left:auto;font-size:.94rem;font-weight:600;flex:0 0 auto;
    display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
  .table--cards td.num~td.num{margin-left:0}
  .table--cards td.num[data-label]:not([data-label=""])::before{content:attr(data-label);
    font-size:.62rem;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;
    line-height:1;margin-bottom:.18rem}
  /* rows carrying 2+ numbers (e.g. a kit's Material + Labor): title on its own
     line, then the labeled numbers as ONE right-aligned cluster below — instead
     of the second number wrapping awkwardly to the left. */
  .table--cards tr:has(td.num~td.num) td:first-child{flex:1 1 100%}
  .table--cards tr:has(td.num~td.num) td.num{flex-direction:row;align-items:baseline;gap:.35rem;margin-top:.15rem}
  .table--cards tr:has(td.num~td.num) td.num::before{margin-bottom:0}
  .table--cards tr:has(td.num~td.num) td.num:first-of-type{margin-left:auto}
  .table--cards tr:has(td.num~td.num) td.num~td.num{margin-left:.9rem}
  /* 3 · everything else demotes to a quiet meta line */
  .table--cards td[data-label]:not(:first-child):not(.num):not([data-label=""]){order:3;font-size:.78rem;color:var(--slate)}
  .table--cards td .tag{font-size:.64rem;padding:.08rem .42rem}
  .table--cards td.cardfull{display:block;flex-basis:100%;order:3;text-align:left}
  /* 4 · actions — a full-width quiet row, generous touch targets */
  .table--cards td:not([data-label]),.table--cards td[data-label=""]{order:4;flex-basis:100%;display:flex;align-items:center;gap:1.35rem;padding-top:0;margin-top:-.25rem}
  .table--cards td .act{min-height:36px;font-size:.7rem}
  .table--cards td:not([data-label]):empty,.table--cards td[data-label=""]:empty{display:none}
  .table--cards .act-sep{display: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) ---- */
.tpl-sel{padding:.5rem .6rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);font:inherit;max-width:100%}
.qb-card{padding:1rem 1.1rem}
/* invoice line-item table */
.qb2-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.qb2-count{font-size:.8rem;color:var(--slate);font-weight:600}
.qb2-bulk{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--safety-wash);border-radius:999px;padding:.25rem .3rem .25rem .8rem}
.qb2-bulk[hidden]{display:none}
.qb2-mgset{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--graphite)}
.qb2-mginput{width:52px;padding:.25rem .4rem;font:inherit;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
/* tiers: locked nav + upgrade screen */
/* The tier padlock badge. Its <svg> MUST be sized here: with no width/height
   and no .icn class it fell back to the replaced-element default and rendered
   as a 60-80px solid-black blob that shoved the nav labels out of alignment
   (every Tier-1 customer saw this on every page). .icn supplies
   fill:none/stroke:currentColor; these give it real dimensions. */
.sn-lock{font-size:.7rem;opacity:.7;margin-left:.25rem;display:inline-flex;align-items:center}
.sn-lock svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sn-locked{opacity:.62}
.tier-lock{max-width:640px}
.tl-badge{display:inline-block;font-weight:700;letter-spacing:.04em;margin-bottom:.6rem;padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;font-size:.85rem}
.tl-list{margin:.8rem 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem}
/* takeoff intake */
.to-api{font-size:.72rem;line-height:1.5;background:var(--wash,rgba(0,0,0,.04));border:1px solid var(--rule);border-radius:8px;padding:.7rem .8rem;overflow-x:auto;white-space:pre;margin:.4rem 0 .8rem}
/* communications */
.comms-list{display:flex;flex-direction:column;gap:.7rem}
.comm{border:1px solid var(--hairline,var(--rule));border-radius:8px;padding:.55rem .7rem}
.comm.in{border-left:3px solid var(--ok,#2e7d43)}
.comm.out{border-left:3px solid var(--blueprint,#3a6ea5)}
.comm-head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;font-size:.78rem;color:var(--slate)}
.comm-when{margin-left:auto}
.comm-subj{font-weight:600;font-size:.88rem;margin-top:.25rem}
.comm-body{font-size:.84rem;color:var(--graphite);margin-top:.2rem;white-space:pre-line}
.comm-add{margin-top:.8rem}
.comm-add summary{cursor:pointer;font-size:.85rem;color:var(--accent)}
.comm-form{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
/* click-to-rename any quote line */
.ql-rename{cursor:text;border-radius:4px}
.ql-rename:hover{outline:1px dashed var(--rule);outline-offset:2px}
/* PO/RFQ line editor */
.pl-table{width:100%;border-collapse:collapse;font-size:.875rem}
.pl-table th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:1.5px solid var(--rule);padding:.35rem .4rem;white-space:nowrap}
.pl-table th.num,.pl-table td.num{text-align:right}
.pl-table td{padding:.2rem .25rem;border-bottom:1px solid var(--hairline,var(--rule));vertical-align:middle}
.pl-table .pl-n{width:1.6rem;color:var(--slate);font-size:.78rem;text-align:right;padding-right:.5rem}
.pl-table .pl-desc{width:99%}
.pl-table .pl-code input{width:110px}
.pl-table .pl-qty input{width:70px;text-align:right}
.pl-table .pl-uom input{width:60px}
.pl-table .pl-price input{width:90px;text-align:right}
.pl-table .pl-ext{white-space:nowrap;font-variant-numeric:tabular-nums;padding-right:.5rem}
.pl-in{border:1px solid transparent;background:transparent;padding:.3rem .35rem;border-radius:6px;font:inherit;color:inherit;width:100%}
.pl-in:hover{border-color:var(--rule)}
.pl-in:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.pl-table .pl-act{white-space:nowrap;text-align:right}
/* These were bare × glyphs. A visible × that means "remove" is indistinguishable
   from one that means "close" — and the row-action ones meant delete. They carry
   their own word now, so the pill has to fit a short label without changing the
   row height. */
.ql-x,.tk-del{width:auto;min-width:0;padding:.15rem .45rem;font-size:.72rem;letter-spacing:.02em}
/* An action that is always readable does not need to fade in on hover, and a
   touch device has no hover to fade it in with. */
.pl-table .pl-act .ql-ic{opacity:.35}
.pl-table tr:hover .pl-act .ql-ic{opacity:1}
.pl-total-lbl{font-weight:600;color:var(--slate)}
#pl-total{font-weight:700;font-size:1rem}
/* the collapsed title / summary / chevron are phone-only — hidden on desktop */
.pl-table .pl-title,.pl-table .pl-sum,.pl-table .pl-chev{display:none}
/* PO/RFQ line editor on phones = the same calm CART LINE as the quote builder.
   Collapsed: [ description / "12 ea × $8.50" .......... $ext  ⌄ ]. Tap → the
   row expands into a labeled full-width field editor. No sideways panning. */
@media(max-width:640px){
  .pl-table,.pl-table tbody{display:block;width:100%}
  .pl-table thead,.pl-table tfoot{display:none}
  .pl-table tbody tr.pl-row{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.5rem;row-gap:.55rem;
    padding:.9rem .15rem;border-bottom:1px solid var(--hairline);cursor:pointer}
  .pl-table tbody tr.pl-row:last-child{border-bottom:0}
  .pl-table td{display:flex;align-items:center;border:0;padding:0}
  .pl-table .pl-n{display:none}
  /* collapsed layout */
  .pl-table td.pl-desc{order:1;flex:1 1 50%;min-width:0;display:block}
  .pl-table .pl-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
  .pl-table .pl-ph{color:var(--slate);font-weight:500}
  .pl-table .pl-sum{display:block;font-size:.82rem;color:var(--slate);margin-top:.2rem;font-variant-numeric:tabular-nums}
  .pl-table td.pl-ext{order:2;margin-left:auto;font-weight:700;font-size:1rem;color:var(--ink);
    white-space:nowrap;align-self:flex-start;padding-top:.05rem}
  .pl-table td.pl-chev{order:3;display:flex;flex:0 0 auto;align-self:flex-start;padding-top:.35rem;margin-left:.35rem}
  .pl-table td.pl-chev::after{content:"";display:inline-block;width:7px;height:7px;
    border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
    transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.6,.2,1)}
  .pl-table tr.pl-row.open td.pl-chev::after{transform:rotate(-135deg)}
  .pl-table tr.pl-row:not(.open) td.pl-chev{margin-left:auto}   /* RFQ has no $ext → push caret right */
  /* collapsed: hide the editors + the description input */
  .pl-table tr.pl-row:not(.open) td.pl-code,
  .pl-table tr.pl-row:not(.open) td.pl-qty,
  .pl-table tr.pl-row:not(.open) td.pl-uom,
  .pl-table tr.pl-row:not(.open) td.pl-price,
  .pl-table tr.pl-row:not(.open) td.pl-act,
  .pl-table tr.pl-row:not(.open) td.pl-desc input{display:none}
  /* OPEN: a labeled card — description on top, then Code/Qty/UOM/Cost/Ext rows */
  .pl-table tr.pl-row.open{position:relative;background:var(--surface-sunk);border-radius:12px;padding:.9rem .8rem}
  .pl-table tr.pl-row.open .pl-title,.pl-table tr.pl-row.open .pl-sum{display:none}
  .pl-table tr.pl-row.open td.pl-desc{order:1;flex:1 1 100%;display:block;padding-right:1.8rem}
  .pl-table tr.pl-row.open td.pl-desc input{display:block;width:100%}
  .pl-table tr.pl-row.open td.pl-code,
  .pl-table tr.pl-row.open td.pl-qty,
  .pl-table tr.pl-row.open td.pl-uom,
  .pl-table tr.pl-row.open td.pl-price,
  .pl-table tr.pl-row.open td.pl-ext{order:4;display:grid;grid-template-columns:5rem 1fr;align-items:center;gap:.5rem;flex:1 1 100%;margin:0}
  .pl-table tr.pl-row.open td.pl-code::before,
  .pl-table tr.pl-row.open td.pl-qty::before,
  .pl-table tr.pl-row.open td.pl-uom::before,
  .pl-table tr.pl-row.open td.pl-price::before,
  .pl-table tr.pl-row.open td.pl-ext::before{content:attr(data-l);font-size:.72rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
  .pl-table tr.pl-row.open td.pl-ext{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  /* the collapse caret floats top-right of the open card */
  .pl-table tr.pl-row.open td.pl-chev{position:absolute;top:.9rem;right:.8rem;order:0;padding:0;margin:0}
  .pl-table tr.pl-row.open td.pl-act{order:9;flex:1 1 100%;justify-content:flex-end;gap:.5rem;margin-top:.3rem}
  .pl-table tr.pl-row.open td.pl-act .ql-ic{width:40px;height:40px;opacity:1}
  /* full-width 16px fields (no iOS zoom); visible field chrome */
  .pl-table .pl-in{width:100%;min-height:44px;font-size:16px;border:1px solid var(--field-border);
    background:var(--surface);border-radius:8px;text-align:left}
  /* override the desktop fixed field widths so inputs fill the card's value column */
  .pl-table td.pl-code input,.pl-table td.pl-qty input,.pl-table td.pl-uom input,
  .pl-table td.pl-price input,.pl-table td.pl-desc input{width:100%;text-align:left}
  .pl-table .table-wrap{overflow:visible}
}
/* Import wizard */
.import-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem}
.import-tile{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:inherit;transition:border-color .12s}
.import-tile:hover{border-color:var(--accent)}
.import-tile .it-name{font-weight:600}
.import-tile .it-go{font-size:.82rem;color:var(--accent)}
.row-err td{background:var(--wash,rgba(180,40,40,.06))}
/* Vendor bid comparison matrix */
.bidcmp{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.bidcmp th,.bidcmp td{padding:.45rem .6rem;border-bottom:1px solid var(--hairline,var(--rule));text-align:left;vertical-align:top}
.bidcmp thead th{border-bottom:1.5px solid var(--rule);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.bidcmp .num{text-align:right;font-variant-numeric:tabular-nums}
.bidcmp .bc-item{font-weight:500;color:var(--ink)}
.bidcmp .bc-vendor a{font-weight:600}
.bidcmp .bc-sub{font-size:.72rem;color:var(--slate);font-family:var(--font-mono);font-weight:400}
.bidcmp .bc-nobid{font-size:.7rem;color:var(--danger,#b42318);text-transform:none;letter-spacing:0}
.bidcmp .bc-ext{font-size:.72rem;color:var(--slate)}
.bidcmp .bc-low{background:var(--accent-wash,rgba(40,140,60,.10));font-weight:600}
.bidcmp tfoot td{border-top:1px solid var(--rule)}
.bidcmp tfoot .bc-sum td,.bidcmp tfoot .bc-total td{font-weight:600}
.bidcmp tfoot .bc-total td{border-top:2px solid var(--primary);font-size:1rem}
.bidcmp tfoot .bc-meta{font-weight:400;color:var(--graphite);font-size:.8rem;text-align:right}
.bidcmp tfoot .bc-award td{padding-top:.6rem}
/* Journey log — per-entity audit timeline */
.journey{list-style:none;margin:.25rem 0 0;padding:0;position:relative}
.journey::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--rule)}
.jl-item{position:relative;display:flex;gap:.75rem;padding:.4rem 0 .4rem 0;align-items:baseline}
.jl-dot{position:relative;flex:0 0 12px;width:12px;height:12px;margin-top:.15rem;border-radius:50%;background:var(--paper,#fff);border:2px solid var(--accent);z-index:1}
.jl-item:last-child .jl-dot{background:var(--accent)}
.jl-body{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.jl-label{font-size:.9rem;color:var(--ink)}
.jl-meta{font-size:.75rem;color:var(--graphite)}
/* Related documents */
.docs-add{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--rule)}
.docs-add input[type=file]{font-size:.82rem;max-width:230px}
.docs-add input[type=text]{flex:1;min-width:130px}
.docs-add select{max-width:130px}
.docs-table td .act.danger{color:var(--danger,#b42318)}
.doc-attachments{max-width:820px;margin:0 auto}
/* Quote record panel (under the builder when editing an existing quote) */
.qb-context{margin-top:1.25rem}
.qctx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.qctx-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border:1px solid var(--rule);border-radius:999px;font-size:.82rem;color:var(--ink);text-decoration:none;background:var(--card,transparent);transition:border-color .12s,background .12s}
.qctx-chip:hover{border-color:var(--accent);background:var(--accent-wash,rgba(0,0,0,.03))}
/* the View menu: a quiet button; options open as an anchored popover card */
.qb2-view{position:relative;margin-left:auto}
.qb2-viewbtn{display:inline-flex;align-items:center;gap:.45rem}
.qb2-viewcaret{width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.qb2-viewmenu{position:absolute;right:0;top:calc(100% + .45rem);z-index:60;min-width:250px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:.3rem .9rem;animation:acctpop .12s ease}
.qb2-viewmenu[hidden]{display:none}
.qb2-viewmenu .qb2-costtoggle{justify-content:space-between;width:100%;min-height:46px;border-bottom:1px solid var(--hairline)}
.qb2-viewmenu .qb2-costtoggle:last-child{border-bottom:0}
.qb2-toggles{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
/* view-options render as refined iOS-style switches (label left, switch right),
   not stark checkboxes — brand-accent "on", 200ms synchronized thumb+track. */
.qb2-costtoggle{display:flex;flex-direction:row;align-items:center;gap:.55rem;font-size:.82rem;color:var(--graphite);margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qb2-costtoggle input[type=checkbox]{order:2;appearance:none;-webkit-appearance:none;flex:0 0 auto;width:44px;height:26px;border-radius:999px;background:var(--switch-off);position:relative;margin:0;cursor:pointer;transition:background .2s cubic-bezier(.2,.6,.2,1)}
.qb2-costtoggle input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .2s cubic-bezier(.2,.6,.2,1)}
.qb2-costtoggle input[type=checkbox]:checked{background:var(--accent)}
.qb2-costtoggle input[type=checkbox]:checked::after{transform:translateX(18px)}
.qb2-costtoggle input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qb2-tablewrap{margin:0 -.2rem}
.qb2-table{width:100%;border-collapse:collapse}
.qb2-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;text-align:left;padding:.3rem .5rem;border-bottom:1px solid var(--rule)}
.qb2-table th.ql-num,.qb2-table th.ql-total,.qb2-table th.costcol{text-align:right}
.qb2-table td{padding:.5rem .5rem;border-bottom:1px solid var(--hairline);vertical-align:middle}
.qb2-table .costcol{display:none}
.qb2-table.show-cost .costcol{display:table-cell}
.qb-summary .qs-yours{display:none}
.qb-summary.show-cost .qs-yours{display:flex}
.ql-sel{width:1%}
.ql-num{width:1%;text-align:right;color:var(--muted-2);font-variant-numeric:tabular-nums;font-size:.82rem}
.ql-item{min-width:9rem}
.ql-name{font-weight:600;line-height:1.2}
.ql-detail{font-size:.75rem;margin-top:.05rem}
.ql-qty{white-space:nowrap}
.ql-qtyin{width:56px;padding:.35rem .4rem;text-align:right;font:inherit;font-variant-numeric:tabular-nums;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
.ql-unit{font-size:.72rem;color:var(--slate);margin-left:.25rem}
.ql-unit-wrap,td.ql-unit{white-space:nowrap}
.ql-dollar{color:var(--muted-2);font-size:.85rem;margin-right:1px}
.ql-priceIn{width:76px;padding:.35rem .4rem;text-align:right;font:inherit;font-variant-numeric:tabular-nums;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
.ql-cost{text-align:right;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.ql-mg{text-align:right;white-space:nowrap}
.ql-mgin{width:46px;padding:.35rem .3rem;text-align:right;font:inherit;font-variant-numeric:tabular-nums;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
.ql-pct{color:var(--muted-2);font-size:.8rem;margin-left:1px}
.ql-reset{background:none;border:none;color:var(--slate);cursor:pointer;font-size:.95rem;padding:0 0 0 .25rem;line-height:1}
.ql-reset:hover{color:var(--accent)}
.qline.locked .ql-priceIn,.qline.locked .ql-mgin{border-color:var(--accent)}
.ql-total{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Number-column stability (desktop grid only — mobile reflows these to cards).
   Without fixed widths, an auto-layout table re-solves every column when a cell's
   text width changes, so editing qty/price and watching a total go $900→$9,000
   made the whole row twitch. Pinning the numeric columns keeps edits rock-steady. */
@media(min-width:641px){
  .qb2-table th.ql-qty,.qb2-table td.ql-qty{width:5.75rem}
  .qb2-table th.ql-unit,.qb2-table td.ql-unit{width:6.5rem}
  .qb2-table th.costcol,.qb2-table td.costcol{width:5.5rem}
  .qb2-table th.ql-total,.qb2-table td.ql-total{width:7rem}
  .qb2-table th.ql-rm,.qb2-table td.ql-rm{width:2.4rem}
  .pl-table td.pl-ext,.pl-table th.pl-ext{width:6.5rem}
  .pl-table td.pl-qty,.pl-table th.pl-qty{width:5.5rem}
  .pl-table td.pl-price,.pl-table th.pl-price{width:6rem}
}
.pack-toggle{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;font-size:.75rem;padding:.1rem 0;margin-top:.1rem}
.pack-toggle:hover{text-decoration:underline}
.pack-sub td{background:var(--surface-sunk);padding:.4rem .5rem}
.pack-parts{font-size:.78rem;color:var(--slate)}
.pack-parts .pp-h{color:var(--muted);font-weight:600;display:block;margin-bottom:.35rem}
.pack-parts .pp b{color:var(--ink);font-variant-numeric:tabular-nums}
.pp-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;padding:.15rem 0}
.pp-cat{flex:0 0 6.5rem;text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;font-weight:700;color:var(--muted-2)}
.pp{white-space:nowrap}
.ql-rm{width:1%;text-align:right}
.ql-ic{width:30px;height:30px;padding:0;border:none;background:none;color:var(--muted-2);cursor:pointer;font-size:1.1rem;border-radius:6px}
.ql-ic:hover{color:var(--stop);background:var(--surface-sunk)}
.ql-ic.ql-ok{color:var(--go)} .ql-ic.ql-ok:hover{color:var(--go);background:var(--ok-bg)}
/* inline editable custom/discount line */
.qle-name{width:100%;min-width:8rem;padding:.4rem .5rem;font:inherit;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
.qle-pwrap{display:flex;align-items:center;gap:.15rem}
.qle-minus{color:var(--slate);font-weight:700}
.qle-price{width:80px;padding:.4rem .5rem;text-align:right;font:inherit;font-variant-numeric:tabular-nums;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}

/* THE add-a-line row — always present, no popup */
.qb-addrow{margin-top:.8rem;display:flex;flex-direction:column;gap:.55rem}
.qb-ac-wrap{position:relative;display:flex;align-items:center}
.qb-add-caret{position:absolute;left:.85rem;color:var(--slate);font-size:1.15rem;font-weight:600;pointer-events:none}
.qb-add-input{width:100%;padding:.8rem .9rem .8rem 2.1rem;font-size:1rem;background:var(--surface);color:var(--ink);border:1px solid var(--field-border);border-radius:var(--radius-lg)}
.qb-add-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--safety-wash)}
.qb-ac{position:absolute;top:calc(100% + .3rem);left:0;right:0;z-index:30;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;padding:.25rem}
.qb-ac-row{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-sm);padding:.55rem .6rem;cursor:pointer;font:inherit;color:inherit}
.qb-ac-row:hover,.qb-ac-row.sel{background:var(--safety-wash)}
.qac-name{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qac-cat{font-size:.72rem;color:var(--slate);flex:0 0 auto}
.qac-price{font-variant-numeric:tabular-nums;color:var(--graphite);flex:0 0 auto;font-size:.88rem}
.qac-price small{color:var(--muted-2)}
.qb-chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip-btn{background:none;border:1px solid var(--field-border);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.82rem;color:var(--graphite);cursor:pointer}
.chip-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--surface-sunk)}
.qb-empty-hint{padding:.7rem 0 .2rem;font-size:.88rem}

/* inline fence-run editor */
.qb-runform{margin-top:.8rem;padding:.8rem;border:1px solid var(--accent);border-radius:var(--radius);background:var(--safety-wash)}
.qrf-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.5rem}
.qrf-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.qrf-btns{display:flex;align-items:center;gap:.5rem}
@media(max-width:560px){.qrf-grid{grid-template-columns:1fr}}
.qb-summary{margin-top:1.1rem;border-top:2px solid var(--hairline);padding-top:.7rem}
.qs-row{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0;font-variant-numeric:tabular-nums}
.qs-pct{width:56px;padding:.15rem .3rem;text-align:right;display:inline-block}
.w-price{width:120px;text-align:right}
.q-n.late{background:var(--stop);color:var(--on-accent,#fff)}
.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:var(--slate);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:var(--slate);padding:.3rem 0;border-bottom:1px solid var(--surface-sunk)}
.qsd-row:last-child{border-bottom:none}
.qsd-name{flex:1;min-width:8rem;font-weight:600;color:var(--graphite)}
.qsd-row input{width:66px;padding:.2rem .3rem;border:1px solid var(--field-border);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}
/* Two-column quote workspace: wide line table + a sticky right rail (customer +
   totals + actions), so the table uses the width and nothing dead-spaces. */
.qb-layout{display:flex;gap:1rem;align-items:flex-start}
.qb-main{flex:1 1 auto;min-width:0}
.qb-side{flex:0 0 336px;width:336px;position:sticky;top:1rem;display:flex;flex-direction:column;gap:1rem}
.qb-side .card{padding:1rem 1.05rem}
.qb-custhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.qb-custhead h3{margin:0}
.qb-custcard label{margin:.55rem 0 .18rem}
.qb-custcard input,.qb-custcard textarea{width:100%}
.qb-clientlink{position:relative;margin-bottom:.3rem}
.qb-client-in{width:100%;padding:.5rem .6rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);font:inherit}
.qb-client-results{position:absolute;left:0;right:0;top:calc(100% + .2rem);z-index:30;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;padding:.2rem}
.cl-row{display:flex;flex-direction:column;width:100%;text-align:left;background:none;border:none;border-radius:var(--radius-sm);padding:.45rem .55rem;cursor:pointer;font:inherit;color:inherit}
.cl-row:hover{background:var(--safety-wash)}
.cl-name{font-weight:600}
.cl-sub{font-size:.76rem;color:var(--slate)}
.cl-none{padding:.5rem .55rem;font-size:.82rem}
.qb-totcard .qb-summary{margin-top:0;border-top:none;padding-top:0}
.qb-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem}
.qb-actions>button{width:100%;padding:.7rem 1rem}
.qb-actions-row{display:flex;gap:.5rem}
.qb-actions-row button{flex:1}
.qb-tplform{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.7rem}
.qb-tplform input[name=name]{flex:1 1 220px;min-width:0;padding:.55rem .7rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);font:inherit}
@media(max-width:900px){.qb-layout{flex-direction:column}.qb-side{position:static;flex:1 1 auto;width:auto}}
/* Stages editor rows */
.stg-ord{white-space:nowrap;width:1%}
.ord-btn{background:none;border:1px solid var(--field-border);border-radius:var(--radius-sm);color:var(--slate);cursor:pointer;width:26px;height:26px;line-height:1;margin-right:.2rem;font-size:.85rem}
.ord-btn:hover{background:var(--surface-sunk);color:var(--ink)}
.stg-name,.stg-note{width:100%;padding:.5rem .6rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface);font:inherit}
.stg-rm{color:var(--stop)}

/* 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:var(--on-accent);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 var(--field-border);border-radius:8px}
.cat-group{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);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:var(--ok-bg)}
.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:var(--surface);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}}
}
.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:var(--surface-sunk);padding:1rem;border-radius:var(--radius-lg)}
.costbox .total{color:var(--surface);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.costbox .muted{color:var(--slate)}

/* ---- Feedback widget ---- */
.fb-btn{position:relative;z-index:80;flex:0 0 auto}
.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:var(--app-max);margin:0 auto;padding:1.5rem var(--app-pad);color:var(--slate);font-size:.78rem;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.15rem .45rem}
.foot .dot{margin:0 .15rem;opacity:.55}
.foot-links{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1rem .35rem}
.foot-legal,.foot-version,.foot-powered-group{display:inline-flex;align-items:center;gap:.1rem .35rem;white-space:nowrap}
.foot-links .dot{margin:0}
.foot-links .foot-legal a{margin-left:0}
/* Copyright + Powered-by sit on the same centered baseline (feedback #26). */
.foot .foot-copy{line-height:1.4}
.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}

/* ── Auth stage ─────────────────────────────────────────────────────────────
   A brand-lit full-height canvas for sign in / reset / request an invitation.
   Purple (logo) + orange (accent) ambient glows, one focused glass card. */
body.auth-body{min-height:100vh}
.auth-stage{position:relative;min-height:100vh;display:grid;place-items:center;padding:max(6vh,2.5rem) 1.25rem;overflow:hidden;isolation:isolate}
.auth-stage::before,.auth-stage::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.auth-stage::before{width:46vw;height:46vw;max-width:640px;max-height:640px;top:-16vh;left:-12vw;background:radial-gradient(circle at 30% 30%,#8b5cf6,transparent 68%)}
.auth-stage::after{width:42vw;height:42vw;max-width:560px;max-height:560px;bottom:-18vh;right:-12vw;background:radial-gradient(circle at 70% 70%,var(--safety),transparent 66%);opacity:.42}
.auth-inner{width:min(420px,100%);position:relative;z-index:1;animation:authRise .5s cubic-bezier(.2,.7,.2,1) both}
.auth-inner-wide{width:min(560px,100%)}
@keyframes authRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.auth-inner{animation:none}}

.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-bottom:1.35rem;text-align:center}
.auth-mark .logo-mark,.auth-mark svg{width:46px;height:46px}
.auth-mark{filter:drop-shadow(0 6px 18px color-mix(in srgb,#8b5cf6 40%,transparent))}
.auth-word{font-weight:800;letter-spacing:.34em;font-size:.95rem;color:var(--ink);padding-left:.34em}
.auth-tagline{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}

.auth-card{background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--hairline);border-radius:18px;padding:2rem 1.9rem;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -28px rgba(15,10,40,.5),0 4px 14px -8px rgba(15,10,40,.35);backdrop-filter:blur(10px) saturate(1.05)}
.auth-h{font-size:1.55rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 .3rem}
.auth-sub{color:var(--muted);margin:0 0 1.35rem;font-size:.95rem}
.auth-form{display:flex;flex-direction:column;gap:.35rem}
.auth-form label{font-size:.82rem;font-weight:600;color:var(--graphite);margin-top:.6rem}
.auth-form label:first-of-type{margin-top:0}
.auth-form input{width:100%;box-sizing:border-box}
.auth-field-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:.6rem}
.auth-field-row label{margin-top:0}
.auth-mini{font-size:.8rem;color:var(--muted);text-decoration:none}
.auth-mini:hover{color:var(--safety);text-decoration:underline}
.auth-submit{width:100%;margin-top:1.1rem;justify-content:center;text-align:center;font-weight:700;padding-top:.7rem;padding-bottom:.7rem}
/* Waiting on the human-check token: dim + not-allowed so it reads as "one sec",
   not "broken". Cleared the instant Turnstile solves (or the 7s fail-safe). */
.auth-submit.cf-wait,.auth-submit:disabled{opacity:.55;cursor:not-allowed}
a.auth-cta{display:block;text-decoration:none}
.auth-alt{margin:1.15rem 0 .2rem;text-align:center;font-size:.9rem;color:var(--muted);line-height:1.9}
.auth-alt a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--safety) 55%,transparent);transition:color .15s,border-color .15s}
.auth-alt a:hover{color:var(--safety);border-color:var(--safety)}
.auth-alt-quiet{font-size:.85rem;opacity:.85}
.auth-alt-quiet a{border-bottom-color:transparent}
.auth-alt-done{color:var(--go,#3f7d5a);font-weight:600}
.auth-foot{margin-top:1.5rem;text-align:center}
.auth-optional{font-weight:400;color:var(--muted);font-size:.78em}
.auth-body .cf-field{margin:1rem 0 0}

/* ── Branded intro loader ─────────────────────────────────────────────────────
   Textless splash that BUILDS the three-blade Aestimor mark (staggered fade +
   scale from center) then SPINS it — the mark is 120°-symmetric, so a continuous
   spin reads as one seamless loader. Eases out to reveal the page. */
html.bl-lock,html.bl-lock body{overflow:hidden}
/* A black title-sequence field. A whisper of brand purple pools behind the mark
   for depth; everything else is black so the mark and the shine carry the frame. */
.brand-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 44%,#141018 0%,#050506 58%,#000 100%);
  transition:opacity .55s ease,visibility .55s ease}
.brand-loader.bl-done{opacity:0;visibility:hidden;pointer-events:none}
.bl-wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.bl-stage{position:relative;width:132px;height:132px;display:grid;place-items:center}
/* the mark's true optical center measured at 54.4%,57.1% of its canvas (it's
   parked low-right in the PNG). .bl-orbit shifts it so that center lands dead
   in the middle of the stage; .bl-spin then rotates about the same point. The
   translate %s are exactly (center% − 50%), so it stays true at any size. */
.bl-orbit{display:inline-block;transform:translate(-4.4%,-7.1%)}
/* .bl-spin carries the rotation about the measured optical center — that's what
   locks the spin instead of wobbling. It starts turning only AFTER the three
   blades have finished fading in (~1.35s), so the assemble reads clean, then it
   RAMPS UP (accelerate 0→cruise over 120°, one symmetry period, invisible
   handoff) into a pure-LINEAR spin — constant velocity, never a dead stop. */
.bl-spin{position:relative;width:115.5px;height:116px;transform-origin:54.4% 57.1%;
  filter:drop-shadow(0 6px 26px color-mix(in srgb,var(--safety) 55%,transparent));
  animation:
    blRampUp 1.2s cubic-bezier(.1,0,.8,.61) 1.4s 1 both,
    blSpin 1.85s linear 2.6s infinite}
@keyframes blRampUp{from{transform:rotate(0)}to{transform:rotate(120deg)}}   /* accelerate 0→cruise */
@keyframes blSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}     /* constant, seamless */

/* Each blade = the full mark clipped to a 120° wedge (pivoted on the optical
   center) so exactly ONE blade shows. They fade in 1 → 2 → 3: the assemble. */
.bl-blade{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  animation:blFadeIn .55s ease forwards}
.bl-b1{-webkit-mask:conic-gradient(from 36deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);
  mask:conic-gradient(from 36deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);animation-delay:.15s}
.bl-b2{-webkit-mask:conic-gradient(from 156deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);
  mask:conic-gradient(from 156deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);animation-delay:.45s}
.bl-b3{-webkit-mask:conic-gradient(from 276deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);
  mask:conic-gradient(from 276deg at 54.4% 57.1%,#000 0 120deg,transparent 120deg);animation-delay:.75s}

/* The progress bar — thin, calm, its fill glowing brand-purple. "Checking
   everything." Width is driven by the controller; this styles the track + fill. */
.bl-bar{width:132px;height:3px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;
  opacity:0;animation:blFadeIn .5s ease .5s forwards}
.bl-bar-fill{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--safety),color-mix(in srgb,var(--safety) 55%,#fff));
  box-shadow:0 0 12px color-mix(in srgb,var(--safety) 70%,transparent);
  transition:width .35s cubic-bezier(.3,.7,.2,1)}
.bl-fill-done .bl-bar-fill{transition:width .3s ease}

.bl-caption{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.62);
  opacity:0;animation:blFadeIn .5s ease .6s both}
@keyframes blFadeIn{to{opacity:1}}
/* on finish, a soft flourish as the field clears */
.brand-loader.bl-done .bl-wrap{animation:blPop .55s ease forwards}
@keyframes blPop{to{transform:scale(1.06);opacity:.5}}

/* the READY mood (post-sign-in): no suspense — the blades appear quickly and
   nearly together, and the spin starts sooner while we settle you in. */
.brand-loader.bl-ready .bl-blade{animation:blFadeIn .4s ease forwards}
.brand-loader.bl-ready .bl-b1{animation-delay:.05s}
.brand-loader.bl-ready .bl-b2{animation-delay:.16s}
.brand-loader.bl-ready .bl-b3{animation-delay:.27s}
.brand-loader.bl-ready .bl-spin{animation:
  blRampUp .9s cubic-bezier(.15,0,.8,.71) .7s 1 both,
  blSpin 1.85s linear 1.6s infinite}

/* the post-sign-in overlay is hidden until the form is accepted */
.brand-loader.bl-submit{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
.brand-loader.bl-submit.bl-on{opacity:1;visibility:visible;pointer-events:auto}

/* Reduced motion: no spin, no stagger — all three blades simply fade in
   together (the full mark) and the bar fills. Calm, still, legible. */
@media (prefers-reduced-motion:reduce){
  .bl-spin,.brand-loader.bl-ready .bl-spin{animation:none}
  .bl-blade,.brand-loader.bl-ready .bl-blade{animation:blFadeIn .45s ease forwards;animation-delay:0s}
  .brand-loader.bl-done .bl-wrap{animation:none}
}

/* ---- 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:var(--slate);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:var(--slate);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:var(--slate);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:var(--slate);margin-top:.35rem}
.qd-terms{margin-top:1.5rem;font-size:.78rem;color:var(--slate);line-height:1.6;border-top:1px solid var(--hairline);padding-top:1rem}
.qd-sign{display:flex;gap:2rem;margin-top:1.75rem}
.qd-sign .line{flex:1;border-top:1px solid var(--graphite);padding-top:.35rem;font-size:.75rem;color:var(--slate)}
/* ---- Estimate acceptance (customer-facing) ----
   The estimate is the document a customer is asked to say yes to, so saying yes
   has to live ON it. Deliberately the ONE saturated moment on an otherwise
   quiet serif document: a single accent action, a decline that reads as a quiet
   link, and a plain-language line explaining that a typed name is a signature.
   Hidden in print — a printed copy falls back to the pen-and-paper rules. */
.qd-accept{margin-top:1.75rem;padding:1.15rem 1.25rem;border:1px solid var(--rule);
  border-radius:var(--radius);background:var(--surface-sunk);font-family:var(--font-ui)}
.qd-accept .qa-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.85rem}
.qd-accept .qa-head strong{font-size:1rem}
.qd-accept .qa-head span{font-size:.84rem;color:var(--slate)}
.qd-accept label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.3rem}
.qd-accept input{width:100%;max-width:420px;font-size:1rem;padding:.6rem .7rem;
  border:1px solid var(--field-border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink)}
.qd-accept .qa-btns{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.9rem}
.qd-accept .qa-fine{margin:.75rem 0 0;font-size:.76rem;color:var(--slate);line-height:1.5}
/* the recorded outcome, once decided */
.qd-accepted{margin-top:1.75rem;padding:.85rem 1rem;border-radius:var(--radius);
  font-family:var(--font-ui);font-size:.9rem;border-left:3px solid var(--rule);background:var(--surface-sunk)}
.qd-accepted.accepted{border-left-color:var(--go);background:var(--ok-bg)}
.qd-accepted.declined,.qd-accepted.expired{border-left-color:var(--stop);background:var(--danger-bg)}
/* pen-and-paper rules: printed copy only */
.printonly{display:none}
@media print{.printonly{display:flex}}
.qd-foot{text-align:center;font-size:.72rem;color:var(--slate);margin-top:1.75rem;border-top:1px solid var(--hairline);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:var(--slate)}
.stepper .stp .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--field-border);border:2px solid var(--field-border);z-index:2}
.stepper .stp::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:3px;background:var(--field-border);z-index:1}
.stepper .stp:first-child::before{display:none}
.stepper .stp.done{color:var(--slate)}
.stepper .stp.done .dot,.stepper .stp.done::before{background:var(--accent);border-color:var(--accent)}
.stepper .stp.now .dot{background:var(--surface);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}
/* ---- Public intake — a premium, branded, one-question-at-a-time flow ---- */
.wiz{max-width:560px;margin:0 auto}
.wiz-progress{height:7px;background:var(--surface-sunk);border-radius:999px;overflow:hidden;margin:.25rem 0 1.75rem;box-shadow:inset 0 0 0 1px var(--hairline)}
.wiz-bar{height:100%;width:0;background:linear-gradient(90deg,var(--safety),var(--safety-press));border-radius:999px;transition:width .35s cubic-bezier(.2,.9,.3,1)}
.wiz-step{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:2.1rem 1.85rem;box-shadow:0 1px 2px rgba(23,20,15,.04),0 16px 40px rgba(23,20,15,.07);animation:wizin .32s cubic-bezier(.2,.9,.3,1)}
@keyframes wizin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wiz-count{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--safety);font-weight:700;margin-bottom:.55rem}
.wiz-title{font-size:1.6rem;line-height:1.18;letter-spacing:-.02em;margin:0 0 .5rem;font-weight:700}
.wiz-help{color:var(--slate);font-size:1rem;line-height:1.5;margin:0 0 1.6rem}
.wiz-ctrl{margin-bottom:1.6rem}
.opt-card{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;background:var(--surface);color:var(--ink);border:1.5px solid var(--field-border);padding:1.1rem 3.4rem 1.1rem 1.2rem;margin-bottom:.7rem;cursor:pointer;font:inherit;border-radius:14px;transition:border-color .12s,background .12s,box-shadow .14s,transform .08s}
.opt-card:hover{border-color:var(--safety);box-shadow:0 6px 18px rgba(23,20,15,.09)}
.opt-card:active{transform:translateY(1px)}
.opt-card.on{border-color:var(--safety);background:var(--safety-wash);box-shadow:0 0 0 1.5px var(--safety)}
.opt-card::after{content:"";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:2px solid var(--rule);transition:border-color .12s,background .12s,box-shadow .12s}
.opt-card:hover::after{border-color:var(--safety)}
.opt-card.on::after{border-color:var(--safety);background:var(--safety);box-shadow:inset 0 0 0 4px var(--surface)}
.opt-card .opt-label{font-weight:600;font-size:1.06rem}
.opt-card .opt-sub{color:var(--slate);font-size:.85rem;margin-top:.2rem}
.opt-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.opt-row .opt-card{align-items:center;text-align:center;font-weight:600;padding:1.1rem;margin-bottom:0}
.opt-row .opt-card::after{display:none}
.big-input{display:flex;align-items:baseline;gap:.5rem;border-bottom:3px solid var(--safety);padding:.35rem 0}
.big-input input{font-size:2.5rem;font-weight:700;border:none;padding:0;width:100%;background:transparent;color:var(--ink)}
.big-input input:focus{outline:none}
.big-input input::placeholder{color:var(--muted);font-weight:400;opacity:.6}
.big-input .unit{font-size:1.05rem;color:var(--slate);white-space:nowrap}
.gatewiz{border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.gaterow{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.gaterow:last-child{border-bottom:none}
/* qty stepper (wizard gates) — renamed from .stepper to avoid the portal-stepper collision */
.qty-stepper{display:flex;align-items:center;gap:1rem}
.qty-stepper button{width:44px;height:44px;padding:0;font-size:1.35rem;line-height:1;background:var(--surface);color:var(--ink);border:1.5px solid var(--field-border);border-radius:50%;transition:border-color .12s,color .12s}
.qty-stepper button:hover{border-color:var(--safety);color:var(--safety)}
.qty-stepper b{min-width:2rem;text-align:center;font-variant-numeric:tabular-nums;font-size:1.25rem}
/* the itemized instant-estimate lines on the money screen */
.est-lines{border:1px solid var(--hairline);border-radius:12px;padding:.35rem 1rem;margin:0 0 1.4rem}
.est-line{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.est-line:last-child{border-bottom:none}
.est-line.est-total{font-weight:700;font-size:1.05rem}
/* owner form-builder: choice-option wiring rows (label · prices-as · qty · ×) */
.qopt{display:grid;grid-template-columns:1.2fr 1.4fr 74px auto;gap:.45rem;align-items:center;margin-bottom:.45rem}
.qopt .qo-qty{text-align:right}
.q-wireline{margin-top:.6rem}
@media(max-width:640px){.qopt{grid-template-columns:1fr 1fr;grid-auto-rows:auto}}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:.75rem}
.wiz-nav .btn{min-width:120px;padding:.8rem 1.3rem;border-radius:12px;font-size:1rem}
.wiz-nav .btn.accent{flex:1;justify-content:center}

/* ---- Field / job components ---- */
.mywork-page{display:flex;flex-direction:column;min-height:calc(100dvh - 174px)}
.mywork-page>.page-head{align-items:flex-end;margin-bottom:1rem}
.mywork-page>.page-head .eyebrow{margin-bottom:.3rem}
.mywork-summary{width:100%;max-width:960px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;margin-bottom:1.25rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.mywork-summary>div{min-width:0;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-right:1px solid var(--hairline)}
.mywork-summary>div:last-child{border-right:0}
.mywork-summary span{color:var(--slate);font-size:.78rem;font-weight:600}
.mywork-summary strong{color:var(--ink);font-size:1.45rem;line-height:1;font-variant-numeric:tabular-nums}
.mywork-queue{width:100%;max-width:960px}
.mywork-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.35rem 0 .55rem;padding-bottom:.45rem;border-bottom:1px solid var(--hairline)}
.mywork-section-head h2{margin:0;font-size:.9rem}
.mywork-section-head span{min-width:22px;height:22px;display:grid;place-items:center;color:var(--slate);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:50%;font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums}
.mywork-empty{min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:2rem 2.25rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.mywork-empty-status{display:flex;align-items:center;gap:.45rem;margin-bottom:.65rem;color:var(--go);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mywork-empty-status i{width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px var(--ok-bg)}
.mywork-empty h2{margin:0 0 .35rem;font-size:1.05rem}
.mywork-empty p{max-width:600px;margin:0;color:var(--slate);font-size:.88rem}
.mywork-empty .btn{margin-top:1rem}
.workcard{display:block;background:var(--surface);border:1px solid var(--hairline);padding:.9rem 1rem;margin-bottom:.6rem;color:inherit;border-radius:var(--radius-lg);transition:background-color .12s ease,border-color .12s ease,transform .1s ease}
.workcard:hover{background:var(--surface-sunk);text-decoration:none;border-color:var(--rule)}
.workcard:active{transform:scale(.995)}
.workcard-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.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}
@media(max-width:640px){
  .mywork-page{min-height:calc(100dvh - 190px)}
  .mywork-page>.page-head{align-items:flex-start}
  .mywork-summary{margin-bottom:1rem}
  .mywork-summary>div{min-height:64px;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;padding:.7rem .75rem}
  .mywork-summary span{font-size:.68rem;line-height:1.2}
  .mywork-summary strong{font-size:1.2rem}
  .mywork-empty{min-height:200px;padding:1.4rem}
  .workcard-head{align-items:flex-start}
}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.gallery figure{margin:0;border:1px solid var(--field-border);background:var(--surface)}
.gallery img{width:100%;height:90px;object-fit:cover;display:block}
.gallery figcaption{font-size:.68rem;color:var(--slate);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:var(--go)}
.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:var(--on-accent)}
.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 ---- */
.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;font-variant-numeric:tabular-nums}
/* KPI row: stays a compact 3-across row on every width (never 3 giant stacked cards on mobile) */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;align-items:stretch}
.statgrid .stat{display:flex;flex-direction:column}
@media(max-width:560px){
  .statgrid{gap:.5rem}
  .statgrid .stat{padding:.7rem .6rem}
  .statgrid .stat-top{min-height:0}
  .statgrid .eyebrow{font-size:.58rem;letter-spacing:.04em;line-height:1.2}
  /* auto-scale to the column width so currency never clips at 3-across */
  .statgrid .stat-val{font-size:clamp(1rem,4.3vw,1.45rem);margin-top:.15rem;overflow-wrap:anywhere}
}
.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}
/* Real SVG bar chart (opsviews.js barChart()) — value-scaled bars with axis +
   labels, not a CSS-width-percentage div pretending to be a chart. */
.bar-chart{width:100%;height:auto;margin-top:.4rem}
.chart-bar{fill:var(--safety);transition:fill .15s ease}
.chart-bar:hover{fill:var(--safety-press)}
.chart-axis{stroke:var(--hairline);stroke-width:1}
.chart-val{font-size:11px;font-weight:700;fill:var(--ink)}
.chart-label{font-size:10px;fill:var(--slate)}
.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:var(--surface);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}
/* 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 ----
   Navigation has three ranges: phone (<768px) gets the fixed bottom tab bar +
   "More" sheet; tablet (768-1180px) keeps the sidebar but defaults it to a
   collapsed icon rail (see the 768-1180px rule below — user-toggleable, not
   forced); desktop (>1180px) shows the full labeled sidebar. No dead zone. */
@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}
/* PHONE (<=767): sidebar gone, bottom tab bar on. TABLET (768-1023): icon rail. */
@media(max-width:767px){
  .sidenav{display:none}
  .app-header{gap:.6rem}
  .app-header .brand{display:flex}          /* sidebar's gone — the header carries the wordmark */
  .topbar-product{display:none}
  /* clean 3-element mobile header: logo · real search input · account avatar
     (wordmark text hidden so the search field gets real room) */
  .app-header .brand .brand-name,.app-header .brand-divider{display:none}
  .hdr-search-wrap{max-width:none}
  .app{padding-bottom:1.25rem}
  /* The scroll pane bottoms out at the viewport edge, under the fixed tab bar —
     so the pane itself carries the clearance (keeps the footer + last row clear). */
  .scrollport{padding-bottom:calc(3.75rem + env(safe-area-inset-bottom))}
  .foot{text-align:center}
  .mobilenav{display:block}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:stretch;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 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;margin:0;padding:0;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;justify-content: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,.45);z-index:55}
  /* the More sheet — a real native-grade sheet: handle, identity, icon rows
     in two-up groups, appearance + sign-out footer. Calm, dense, thumbable. */
  .nav-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--surface);
    border-radius:16px 16px 0 0;padding:.4rem .9rem calc(.9rem + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.28);flex-direction:column;max-height:82dvh;overflow-y:auto}
  .ns-handle{width:36px;height:4px;border-radius:2px;background:var(--rule);margin:.35rem auto .55rem;flex:0 0 auto}
  .ns-id{display:flex;align-items:center;gap:.65rem;padding:.25rem .15rem .75rem}
  .ns-id-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .ns-id-txt strong{font-size:.95rem}
  .ns-role{font-size:.75rem;color:var(--slate);text-transform:capitalize}
  .ns-close{margin-left:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-sunk);color:var(--slate);cursor:pointer}
  .ns-sec{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);padding:.8rem .15rem .35rem}
  .ns-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
  .nav-sheet-a{display:flex;align-items:center;gap:.55rem;padding:.7rem .7rem;border-radius:10px;
    background:var(--surface-sunk);color:var(--ink);font-weight:500;font-size:.86rem;text-decoration:none;
    border:none;font-family:inherit;cursor:pointer;min-height:48px}
  .nav-sheet-a:active{transform:scale(.97)}
  .nav-sheet-a.on{background:var(--safety-wash);color:var(--safety-press);font-weight:600}
  .ns-ic{flex:0 0 auto;display:flex;color:var(--slate)}
  .nav-sheet-a.on .ns-ic{color:inherit}
  .ns-ic .icn{width:19px;height:19px}
  .ns-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ns-lbl small{color:var(--slate);font-weight:400;margin-left:.25rem}
  .ns-foot{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--hairline)}
  .nav-more-cb:checked ~ .nav-scrim{display:block}
  .nav-more-cb:checked ~ .nav-sheet{display:flex;animation:navsheetup .24s var(--ease,ease)}
}
@keyframes navsheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* TABLET rail: 768-1180 — defaults to a 64px icon rail (labels in tooltips via
   title=) so content gets the width but nav never disappears; UNLIKE the old
   behavior, the same expand/collapse toggle used at desktop width still works
   here (rail is just this range's default, not a forced state — iPad landscape
   users asked to be able to open the full labeled sidebar same as desktop). */
@media(min-width:768px) and (max-width:1180px){
  html.nav-collapsed .sidenav{width:64px;overflow-x:visible}
  /* Same two-row grid the narrow rail uses — toggle on top, mark beneath. The
     old rule left the toggle as a plain inline box at y=0 with the brand
     absolutely positioned over its lower half: a 40px target you could only
     hit in its top 14px, on the exact device the founder works from. */
  html.nav-collapsed .sidenav-top{display:grid;grid-template-rows:40px 32px;place-items:center;min-height:84px;padding:12px 0 0;margin-bottom:.55rem;box-sizing:border-box}
  html.nav-collapsed .sidenav-top .brand{position:static;grid-row:2;display:flex;transform:none;flex:0 0 auto}
  html.nav-collapsed .sidenav-toggle{position:static;grid-row:1;display:grid;place-items:center;width:40px;height:40px;padding:0;transform:none;border-radius:8px}
  html.nav-collapsed .sidenav-top .brand-name{display:none}
  html.nav-collapsed .sidenav-top .brand-divider,html.nav-collapsed .sidenav-workspace{display:none}
  html.nav-collapsed .sn-link{width:40px;height:40px;min-height:40px;justify-content:center;margin:0 auto;padding:0;border-radius:8px}
  html.nav-collapsed .sn-link .lbl{display:none}
  html.nav-collapsed .sn-sect-h{display:none}
  html.nav-collapsed .sn-sect{margin-bottom:.2rem;align-items:center}
}
@media(min-width:900px) and (max-width:1180px){
  .topbar-product{width:126px;flex-basis:126px}
  .topbar-product small{display:none}
  .app{padding-top:1rem}
}
@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 ---- */
/* ============ Shared document/work view (.docv) ============ */
.docv{max-width:940px;margin:0 auto}
.docv-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.25rem 0 .85rem;position:sticky;top:0;z-index:6;background:var(--paper)}
.docv-bar .back{white-space:nowrap}
.docv-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.docv-sheet{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:1.75rem 2rem;font-size:.9rem;line-height:1.4}
/* header identity band */
.docv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;border-bottom:2px solid var(--rule);padding-bottom:1rem;margin-bottom:1.1rem}
.docv-head .co-logo{max-height:52px;width:auto;margin-bottom:.4rem;display:block}
.docv-head .co-name{font-size:1.25rem;font-weight:700;color:var(--primary)}
.docv-head .co-meta{font-size:.78rem;color:var(--slate);line-height:1.5}
.dh-id{text-align:right;min-width:180px}
.dh-type{font-size:1.15rem;font-weight:700;letter-spacing:.06em;color:var(--primary);text-transform:uppercase}
.dh-num{font-family:var(--font-mono);font-size:.95rem;color:var(--ink);margin-top:.15rem}
.dh-status{margin-top:.4rem}
.dh-headline{margin-top:.5rem;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blueprint)}
/* meta grid */
.docv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 1.75rem;margin-bottom:1.25rem}
.dm-col{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.dm-block{min-width:0}
.dm-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:.1rem}
.dm-val{font-size:.88rem;line-height:1.4;word-break:break-word}
.dm-val.addr{white-space:pre-line}
.dm-sub{font-size:.78rem;color:var(--slate)}
.dm-facts{gap:.4rem}
.dm-fact{display:flex;justify-content:space-between;gap:.75rem;font-size:.84rem;border-bottom:1px dotted var(--rule);padding-bottom:.25rem}
.dm-fact .dm-lbl{margin:0;align-self:center}
.dm-fact .dm-val{text-align:right;font-variant-numeric:tabular-nums}
.docv-intro{font-size:.85rem;color:var(--slate);margin:0 0 1rem;padding:.6rem .8rem;background:var(--wash,rgba(0,0,0,.02));border-radius:8px}
/* line items */
.docv-lines{width:100%;border-collapse:collapse;font-size:.86rem}
.docv-lines thead th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);border-bottom:1.5px solid var(--rule);padding:.4rem .5rem;white-space:nowrap}
.docv-lines th.num,.docv-lines td.num{text-align:right;font-variant-numeric:tabular-nums}
.docv-lines tbody td{padding:.4rem .5rem;border-bottom:1px solid var(--hairline,var(--rule));vertical-align:top}
.docv-lines .dl-n{width:1.5rem;color:var(--slate);font-size:.78rem}
.docv-lines .dl-desc{width:99%}
.dl-detail{display:block;font-size:.76rem;color:var(--slate);margin-top:.1rem}
.dl-code{font-size:.8rem;color:var(--slate)}
.dl-blank{color:var(--slate);letter-spacing:.05em}
.dl-empty{text-align:center;padding:1.25rem!important}
/* totals */
.docv-totals{display:flex;justify-content:flex-end;margin-top:.75rem}
.docv-totals table{min-width:260px;border-collapse:collapse}
.docv-totals td{padding:.3rem .5rem;font-size:.88rem}
.docv-totals .dt-lbl{color:var(--slate)}
.docv-totals .dt-val{text-align:right;font-variant-numeric:tabular-nums}
.docv-totals .dt-strong td{font-weight:700;font-size:1.05rem;border-top:2px solid var(--primary);color:var(--ink);padding-top:.5rem}
.docv-totals .dt-strong .dt-val{color:var(--blueprint)}
/* notes + terms */
.docv-notes{margin-top:1.25rem;display:grid;gap:.9rem;border-top:1px solid var(--rule);padding-top:1rem}
.dn-lbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:.2rem}
.dn-body{font-size:.85rem;line-height:1.5;white-space:pre-line}
.dn-terms{color:var(--slate);font-size:.8rem}
.docv-foot{margin-top:1.5rem;padding-top:.75rem;border-top:1px solid var(--rule);font-size:.72rem;color:var(--slate);text-align:center}
.docv-lines .dl-cost{color:var(--slate)}
.docv-banner{max-width:940px;margin:0 auto .75rem;padding:.6rem .9rem;background:var(--wash,rgba(180,120,0,.08));border:1px solid var(--rule);border-radius:8px;font-size:.85rem}
.docv-lines tbody tr.rev-current td,.table--cards tbody tr.rev-current td{font-weight:600}
/* Document line-items on a phone: a formal table with up to 9 columns cannot fit
   375px, so the price columns ran off-screen. Reflow each line to a RECEIPT ROW —
   description leads, Amount trails (bold), and qty/unit/cost/etc. become small
   labeled meta. Nothing hidden, no sideways scroll. */
@media(max-width:600px){
  .docv-lines,.docv-lines tbody{display:block;width:100%}
  .docv-lines thead{display:none}
  .docv-lines tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55rem;row-gap:.25rem;
    padding:.7rem .1rem;border-bottom:1px solid var(--hairline)}
  .docv-lines tbody tr:last-child{border-bottom:0}
  .docv-lines tbody td{display:inline-flex;align-items:baseline;border:0;padding:0}
  .docv-lines td.dl-n{order:0;flex:0 0 auto;width:1.4rem;color:var(--slate);font-size:.8rem}
  /* line 1 = "# Description" (the # stays inline); line 2 = the money — Amount
     (bold) then qty/unit/etc. as small labeled meta. Consistent for any length. */
  .docv-lines td.dl-desc{order:1;flex:1 1 calc(100% - 2.2rem);min-width:0;display:block;font-weight:600;line-height:1.32}
  .docv-lines td.dl-desc .dl-detail{display:block;font-weight:400;font-size:.78rem;color:var(--slate);margin-top:.05rem}
  .docv-lines td.dl-tot{order:2;flex:0 0 auto;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--ink)}
  .docv-lines td.dl-code,.docv-lines td.dl-uom,.docv-lines td.dl-qty,.docv-lines td.dl-unit,
  .docv-lines td.dl-cost,.docv-lines td.dl-mk,.docv-lines td.dl-tax{order:3;flex:0 0 auto;font-size:.78rem;color:var(--slate)}
  .docv-lines td[data-l]:not(.dl-tot):not(:empty)::before{content:attr(data-l);font-size:.64rem;
    text-transform:uppercase;letter-spacing:.03em;color:var(--muted-2);margin-right:.28rem}
  .docv-lines td.dl-tot::before{content:none}
}
/* internal (screen-only) panel below the sheet */
.docv-internal{max-width:940px;margin:1.1rem auto 0}
@media (max-width:720px){ .docv-meta{grid-template-columns:1fr} .docv-sheet{padding:1.25rem 1rem} }

@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}
  .docv-sheet{border:none;border-radius:0;padding:0}
  .docv,.docv-internal{max-width:none}
}

/* ================================================================
   REFINEMENT LAYER — flow-state pass (mobile-first, tablet, desktop)
   Research-encoded: 4px grid, one accent, 140ms ease-out motion,
   tabular numbers, calm density. Loaded last so it governs.
   ================================================================ */
:root{--ease:cubic-bezier(.2,0,0,1);--dur:140ms}
/* High-contrast / colorblind-safe mode (opt-in via the account menu). Stronger
   hairlines, rules and muted text so structure never relies on faint edges or on
   color alone — helps low-vision and colorblind estimators read the UI. */
:root[data-a11y="hc"]{--hairline:#8f8f98;--rule:#5f5f68;--muted:#3a3a41;--field-border:#3a3a41}
:root[data-a11y="hc"][data-theme="dark"]{--hairline:#63636d;--rule:#8f8f99;--muted:#cfcfd8;--field-border:#8f8f99}
:root[data-a11y="hc"] .card{border-width:2px}
:root[data-a11y="hc"] a{text-underline-offset:2px}
:root[data-a11y="hc"] .btn:focus-visible,:root[data-a11y="hc"] a:focus-visible,:root[data-a11y="hc"] button:focus-visible,:root[data-a11y="hc"] input:focus-visible,:root[data-a11y="hc"] select:focus-visible{outline:3px solid var(--safety);outline-offset:2px}

/* ---- Motion: state changes only, never decorative, nothing >300ms ---- */
.btn,button,.act,.sn-link,.tab,.tabs a,.chip-btn,.import-tile,.qctx-chip,.cl-row,.qb-ac-row,input,select,textarea{
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform 80ms var(--ease)}
.btn:active,button:active{transform:scale(.98)}
.tab:active,.sn-link:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--safety);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.btn:active,button:active,.tab:active,.sn-link:active{transform:none}}

/* ---- Desktop density: premium table feel ---- */
@media(min-width:900px){
  tbody td{padding:.55rem .6rem}
  th{font-weight:600}
}

/* ---- Tablet: grids keep two columns; document meta stays scannable ---- */
@media(min-width:768px) and (max-width:1023px){
  .cols-2{grid-template-columns:1fr 1fr}
  .docv-meta{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}

/* ---- PHONE (<=640): mobile is its own product — compact, calm, dense ---- */
@media(max-width:640px){
  :root{--app-pad:1rem}
  .app{padding-top:.7rem;padding-bottom:1rem}
  /* type steps down one notch; hierarchy from weight, not size */
  h1{font-size:1.28rem}
  h2{font-size:1rem}
  .page-head{margin-bottom:.7rem;row-gap:.45rem}
  .page-head .ph-sub{font-size:.8rem;line-height:1.4}
  /* filter/action chips become one thumb-swipe row — no wrap walls */
  .page-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;padding-bottom:2px}
  .page-actions::-webkit-scrollbar{display:none}
  .page-actions .btn{flex:0 0 auto}
  /* cards lose their bulk: tighter padding, lists inside go edge-to-edge */
  .card{padding:.8rem .9rem}
  .card .card-h{margin-bottom:.4rem}
  .card .bar-sub{font-size:.72rem}
  .grid{gap:.65rem}
  /* KPI stats: two-up glanceable strip, not a stack of billboards. (The base
     .kpi-row rule is declared AFTER its old media override in this file, so the
     override never won — this layer loads last and settles it.) */
  .kpi-row{grid-template-columns:repeat(2,1fr)!important;gap:.55rem}
  .grid:has(.stat){grid-template-columns:repeat(2,1fr)!important;gap:.55rem}
  /* an odd last stat spans the full row instead of orphaning */
  .grid:has(.stat) .stat:last-child:nth-child(odd),.kpi-row .stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat{padding:10px 12px}
  .stat .stat-val{font-size:1.2rem;white-space:nowrap;letter-spacing:-.01em}
  .stat .stat-sub{font-size:.72rem}
  .kpi-row .stat-val{font-size:1.25rem}
  /* the demo ribbon shrinks to a whisper */
  .demobar{font-size:.68rem;padding:.22rem .6rem;line-height:1.25}
  .demobar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* header: calmer height, search stays primary */
  .topbar-inner{min-height:50px}
  .hdr-search{padding:.36rem .6rem}
  /* buttons: full touch height without bloat */
  .btn,button.accent,button.ghost{min-height:40px}
  .btn.sm,button.sm{min-height:36px}
  /* tables that are NOT card-lists scroll inside their wrap, never the page */
  table{font-size:.82rem}
  /* forms breathe but don't sprawl */
  label{font-size:.82rem}
  .form-actions{position:sticky;bottom:0;background:var(--paper);padding:.6rem 0 max(.4rem,env(safe-area-inset-bottom));margin-top:.6rem;z-index:5}
  .card .form-actions{background:var(--surface)}
  /* document view: sheet hugs the phone, internal panel goes flush */
  .docv-sheet{padding:1rem .85rem}
  /* actions: back on its own line, then ONE thumb-swipe row of actions —
     primary first, no wrapped button pyramid */
  .docv-bar{position:static;flex-direction:column;align-items:stretch;gap:.45rem}
  .docv-actions{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .docv-actions::-webkit-scrollbar{display:none}
  .docv-actions .btn,.docv-actions form{flex:0 0 auto}
  .dh-headline{font-size:1.25rem}
  /* QUOTE LINE = a calm, tappable CART LINE (Apple / Jobber / Square pattern).
     Collapsed:  [ name / "4 ea × $360.00" .............. $total  ⌄ ]
     Tap the row → it expands inline to reveal the qty + unit-price fields and
     Remove. The line total is READ-ONLY text — never a box that dupes it. That
     is what makes a dense estimator feel calm instead of like a raw form. */
  .qb2-table{display:block;width:100%}
  .qb2-table thead{display:none}
  .qb2-table tbody{display:block}
  .qb2-table tbody tr.qline{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.5rem;row-gap:.6rem;
    padding:.9rem .15rem;border-bottom:1px solid var(--hairline)}
  .qb2-table tbody tr.qline:last-child{border-bottom:0}
  /* cart rows are not a data grid — no lingering hover fill on touch */
  .qb2-table tbody tr.qline:hover{background:transparent}
  .qb2-table tbody tr.qline-exp.open{background:var(--surface-sunk);border-radius:12px}
  .qb2-table tbody tr.qline-exp{cursor:pointer}
  .qb2-table .ql-sel,.qb2-table .ql-num{display:none}
  .qb2-table td{display:flex;align-items:center;border:0;padding:0}
  .qb2-table td.ql-item{order:1;flex:1 1 55%;min-width:0;display:block}
  .qb2-table .ql-name{font-weight:600;font-size:.95rem;line-height:1.3;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .qb2-table .ql-detail{font-size:.78rem;color:var(--slate);margin-top:.12rem;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .qb2-table .ql-sum{font-size:.82rem;color:var(--slate);margin-top:.2rem;font-variant-numeric:tabular-nums}
  .qb2-table td.ql-total{order:2;margin-left:auto;font-weight:700;font-size:1rem;color:var(--ink);
    font-variant-numeric:tabular-nums;white-space:nowrap;align-self:flex-start;padding-top:.05rem}
  /* chevron affordance — a down caret that flips up when the row is open */
  .qb2-table tr.qline-exp td.ql-total::after{content:"";display:inline-block;width:7px;height:7px;margin-left:.55rem;
    border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s cubic-bezier(.2,.6,.2,1)}
  .qb2-table tr.qline-exp.open td.ql-total::after{transform:rotate(-135deg) translateY(1px)}
  /* COLLAPSED (default): every editing field is hidden — the row is pure text */
  .qb2-table tr.qline-exp:not(.open) td.ql-qty,
  .qb2-table tr.qline-exp:not(.open) td.ql-unit,
  .qb2-table tr.qline-exp:not(.open) td.costcol,
  .qb2-table tr.qline-exp:not(.open) td.ql-rm{display:none}
  /* OPEN: the fields drop onto their own line beneath the name + total */
  .qb2-table tr.qline-exp.open .ql-sum{display:none}
  .qb2-table tr.qline-exp.open td.ql-qty{order:4;flex:0 0 auto;margin-top:.15rem}
  .qb2-table tr.qline-exp.open td.ql-unit{order:5;flex:0 0 auto;margin-top:.15rem}
  .qb2-table.show-cost tr.qline-exp.open td.costcol{display:flex;order:6;flex:0 0 auto;margin-top:.15rem}
  .qb2-table tr.qline-exp.open td.ql-rm{order:7;margin-left:auto;margin-top:.15rem}
  .qb2-table tr.qline-exp.open td.ql-rm .ql-ic{width:40px;height:40px}
  .ql-qtyin{width:72px;min-height:44px;font-size:16px}
  .ql-priceIn{width:104px;min-height:44px;font-size:16px}
  .ql-mgin{min-height:44px;font-size:16px}
  .qb2-tablewrap{overflow:visible;margin:0}
  .app,.scrollport{overflow-x:hidden}
  /* toolbar: count left · View menu right — one clean row, options in the popover */
  .qb2-toolbar{flex-direction:row;align-items:center;gap:.5rem}
  .qb2-count{font-size:.78rem;color:var(--slate)}
  .qb2-viewmenu{min-width:min(280px,78vw)}
  .qb2-viewmenu .qb2-costtoggle{font-size:.92rem;color:var(--ink);min-height:50px}
  /* the exploded pack sub-row spans full width under its line */
  .qb2-table tr.pack-sub{display:block;padding:.2rem .1rem .5rem}
  .qb2-table tr.pack-sub td{display:block}
}
/* the copyright footer is desktop chrome — on phones it just floats in dead
   space above the tab bar. Terms/Privacy live in the More sheet + settings. */
@media(max-width:767px){ .foot{display:none} }

/* ---- Bottom tab bar: native-grade (blur, safe-area, press states) ---- */
@media(max-width:767px){
  .tabbar{background:color-mix(in srgb,var(--surface) 88%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:none;border-top:1px solid var(--hairline)}
  .tab{height:54px;font-size:.64rem;gap:2px}
  .tab .icn{width:23px;height:23px}
  .tab.on{color:var(--safety)}
  .tab.on .icn{stroke-width:2.2}
}


/* ---- Account menu: dropdown on desktop, bottom sheet on phones ---- */
@media(max-width:640px){
  .acct{position:static}
  .acct-menu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:auto!important;max-width:none!important;border-radius:16px 16px 0 0;z-index:70;
    padding-bottom:calc(.9rem + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.28);transform:translateY(16px) scale(.99);transform-origin:bottom center}
  .acct-menu.is-open{transform:none}
  .acct-menu.is-closing{transform:translateY(12px) scale(.99)}
  .profile-app{min-height:76px}
}

/* Keep the shell stable and animate only the newly rendered workspace. */
.app{animation:aestimor-page-in 220ms cubic-bezier(.2,.7,.2,1) both}
@keyframes aestimor-page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.app{animation:none}}

/* ================================================================
   CHECKOUT LAYER — the cart + review pattern for the money surfaces
   (quote builder, PO/RFQ editors). The cart bar keeps count · total ·
   next-action pinned; the customer/vendor step presents as a sheet.
   ================================================================ */
.cartbar{display:none}
@media(max-width:899px){
  .cartbar{position:fixed;left:0;right:0;z-index:52;display:flex;align-items:center;gap:.8rem;
    padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));
    background:color-mix(in srgb,var(--surface) 90%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-top:1px solid var(--hairline);bottom:0}
  .cartbar[hidden]{display:none}
  .cb-sum{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
  .cb-count{font-size:.72rem;color:var(--slate)}
  .cb-total{font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .cb-go{flex:0 0 auto;min-height:44px;padding:.5rem 1.1rem}
  /* clearance so the last content row is never hidden under the bar */
  .qb-layout,#pl-form{padding-bottom:76px}
}
@media(max-width:767px){
  /* phone: the bar rides ABOVE the tab bar */
  .cartbar{bottom:calc(54px + env(safe-area-inset-bottom))}
}
/* the customer step: hidden behind the cart bar until Review (phone/tablet) */
/* segmented tabs — Lines | Customer & notes. Desktop keeps two columns (tabs hidden). */
.qb-tabs{display:none!important}
@media(max-width:899px){
  .qb-tabs{display:flex!important;gap:0;margin-bottom:.85rem;background:var(--surface-sunk);border-radius:10px;padding:3px}
  .qb-tabs[style*="display: none"],.qb-tabs[style*="display:none"]{display:none!important}
  .qbt{flex:1;min-height:40px;border:none;background:transparent;font:inherit;font-size:.88rem;font-weight:600;
    color:var(--slate);border-radius:8px;cursor:pointer;transition:background .15s ease,color .15s ease}
  .qbt.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  /* Customer tab: the side panel becomes the page (calm block, not the sheet) */
  body.qb-cust-tab .qb-main{display:none}
  body.qb-cust-tab:not(.qb-reviewing) .qb-side{display:block!important;position:static;box-shadow:none;border-radius:0;padding:0;background:transparent;max-height:none;animation:none}
  body.qb-cust-tab:not(.qb-reviewing) .qb-side::before{content:none}
  .qb-side{display:none!important}
  body.qb-reviewing .qb-side{display:block!important;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:66;
    max-height:88dvh;overflow-y:auto;margin:0;border-radius:16px 16px 0 0;
    background:var(--paper);box-shadow:0 -12px 40px rgba(0,0,0,.28);
    padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    animation:navsheetup .24s var(--ease,ease)}
  body.qb-reviewing .qb-side::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto .7rem}
  .cart-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60}
  .cart-scrim[hidden]{display:none}
  body.qb-reviewing{overflow:hidden}
}

/* ---- Wide editable grids (.grid-edit — catalog Items/parts) become mobile
        cards: SKU + Name lead, the rest are labeled fields in a 2-col grid.
        No horizontal scroll, no clipped names, every field labeled + editable. */
@media(max-width:640px){
  .grid-edit{display:block}
  .grid-edit thead{display:none}
  .grid-edit tbody,.grid-edit tbody tr{display:block}
  .grid-edit tbody tr{border:1px solid var(--rule);border-radius:10px;padding:.7rem .8rem;margin-bottom:.65rem;background:var(--surface)}
  .grid-edit td{display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.6rem;
    border:0;padding:.28rem 0}
  .grid-edit td::before{content:attr(data-l);font-size:.72rem;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;text-align:left;justify-self:start}
  .grid-edit td.ge-id{font-size:.82rem;color:var(--slate);padding-bottom:.15rem}
  .grid-edit td.ge-name::before{align-self:start;padding-top:.55rem}
  .grid-edit td input,.grid-edit td select{width:100%!important;min-width:0!important;max-width:none!important;
    min-height:40px;background:var(--surface);border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:.4rem .5rem}
  .grid-edit td.num input{text-align:left}
  .grid-edit td.ge-save{grid-template-columns:1fr;padding-top:.5rem;margin-top:.3rem;border-top:1px solid var(--hairline)}
  .grid-edit td.ge-save::before{display:none}
  .grid-edit td.ge-save button{width:100%;min-height:44px;visibility:visible!important}
}

/* ---- product analytics widgets ---- */
.ux-spark{display:flex;align-items:flex-end;gap:3px;height:72px;padding:4px 2px}
.ux-bar{flex:1;min-width:3px;background:var(--go);border-radius:3px 3px 0 0;opacity:.85;transition:opacity .12s}
.ux-bar:hover{opacity:1}
.ux-devs{display:flex;flex-wrap:wrap;gap:.5rem;padding:.2rem 0}
.ux-dev{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:.3rem .7rem;font-size:.82rem}
.ux-dev span{color:var(--slate);text-transform:capitalize}
.ux-dev b{font-variant-numeric:tabular-nums}
.disclose{margin:.4rem 0 .8rem;padding-left:1.1rem;line-height:1.6}
.disclose li{margin:.28rem 0;color:var(--slate)}
.disclose li b{color:var(--ink)}

/* ---- projects: pipeline + clickable rows ---- */
.rowlink{cursor:pointer;transition:background .1s}
.rowlink:hover{background:var(--surface-2,rgba(127,127,127,.06))}
.empty.sm{padding:1rem .5rem;text-align:left}
.pm-pipe{display:flex;flex-wrap:wrap;gap:0;align-items:flex-start;padding:.4rem 0 .2rem}
.pm-step{flex:1;min-width:72px;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.3rem .2rem;position:relative;color:var(--slate);font:inherit;font-size:.72rem;text-align:center}
.pm-step::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--hairline);z-index:0}
.pm-step:first-child::before{display:none}
.pm-step.done::before{background:var(--go)}
.pm-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--hairline);background:var(--paper);z-index:1;transition:all .12s}
.pm-step.done .pm-dot{background:var(--go);border-color:var(--go)}
.pm-step.now .pm-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--go) 25%,transparent)}
.pm-step.now .pm-lbl{color:var(--ink);font-weight:600}
.pm-step:hover .pm-lbl{color:var(--ink)}

/* ---- estimating engine: marks/parts/rules library + BOM ---- */
.mark{border-top:1px solid var(--hairline)}
.mark:first-of-type{border-top:none}
.mark>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.7rem .2rem}
.mark>summary::-webkit-details-marker{display:none}
.mark>summary::before{content:"▸";color:var(--slate);transition:transform .12s;flex:0 0 auto}
.mark[open]>summary::before{transform:rotate(90deg)}
.mark-key{font-weight:700;font-size:.82rem;flex:0 0 auto;min-width:120px}
.mark-desc{flex:1;color:var(--slate);font-size:.86rem}
.mark-unit{flex:0 0 auto}
.mark-body{padding:.2rem 0 1rem 1.4rem}
.mark-rule{font-size:.82rem;color:var(--slate);margin:.2rem 0 .6rem}
.mark-conds{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .7rem}
.cond-chip{font-size:.68rem;background:var(--surface-sunk,rgba(127,127,127,.1));border:1px solid var(--hairline);border-radius:4px;padding:.12rem .4rem;color:var(--slate)}
.eng-parts th,.eng-parts td{font-size:.82rem}
.cond-list{display:flex;flex-direction:column;gap:.1rem}
.cond-row{display:flex;gap:.7rem;align-items:baseline;padding:.5rem .2rem;border-top:1px solid var(--hairline)}
.cond-row:first-child{border-top:none}
.cond-row .cond-chip{flex:0 0 auto;min-width:64px;text-align:center}
.rfi-card{border-left:3px solid var(--hold)}
.rfi-row{display:flex;gap:.7rem;align-items:baseline;padding:.4rem .2rem;font-size:.86rem}
.bom-table th,.bom-table td{font-size:.83rem}
.bom-hold{background:color-mix(in srgb,var(--hold) 8%,transparent)}
.inline-select{padding:.5rem .6rem;border:1px solid var(--hairline);border-radius:var(--radius-sm,6px);background:var(--surface);color:var(--ink);font:inherit;margin-right:.4rem}

/* ---- takeoff → outputs actions ---- */
.takeoff-actions .ta-form{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end}
.ta-job{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--slate)}
.ta-btns{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---- estimating: connect tab api key row ---- */
.keyrow{display:flex;gap:.5rem;align-items:center}
.keyrow input{padding:.5rem .6rem;border:1px solid var(--hairline);border-radius:var(--radius-sm,6px);background:var(--surface-sunk,rgba(127,127,127,.06));color:var(--ink);font-size:.82rem}

/* calmer settings: advanced sections tuck away quietly */
.settings-adv{margin-top:1rem;border-top:1px solid var(--hairline);padding-top:.8rem}
.settings-adv>summary{list-style:none;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink);display:flex;gap:.4rem;align-items:center}
.settings-adv>summary::-webkit-details-marker{display:none}
.settings-adv>summary::before{content:"▸";color:var(--slate);transition:transform .12s}
.settings-adv[open]>summary::before{transform:rotate(90deg)}

/* keyboard shortcuts cheat-sheet (press ?) */
.kbd-help{position:fixed;inset:0;z-index:120;display:grid;place-items:center}
.kbd-scrim{position:absolute;inset:0;background:rgba(20,18,15,.45)}
.kbd-card{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.1rem 1.2rem;width:min(360px,92vw);animation:modalpop .16s cubic-bezier(.2,.9,.3,1)}
.kbd-h{font-weight:700;font-size:1rem;margin-bottom:.7rem}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.28rem 0;font-size:.88rem;color:var(--slate)}
.kbd-row span{color:var(--ink)}
.kbd-help kbd{font-family:var(--font-mono);font-size:.76rem;background:var(--surface-sunk,rgba(127,127,127,.1));border:1px solid var(--hairline);border-bottom-width:2px;border-radius:5px;padding:.12rem .45rem;color:var(--ink);white-space:nowrap}
.kbd-foot{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--hairline);font-size:.78rem;color:var(--slate)}

/* schedule: calm hint under the always-visible week grid */
.sched-hint{margin:.7rem 0 0;font-size:.85rem}
.sched-unsched{margin-top:1rem}
.sched-events{min-height:4.5rem}

/* Account menu — application switcher (feedback #21) */
.acct-sec,.ns-sec{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);padding:.45rem .55rem .2rem}
.acct-app-mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--brand,#14313C);color:#fff;font-size:.72rem;font-weight:800;line-height:1}
.acct-app.is-on{background:var(--surface-sunk)}
.acct-app.is-on .acct-app-mk{outline:2px solid var(--accent,#E8730C);outline-offset:1px}

/* "Powered by Aestimor" — subtle badge on customer-facing tenant-branded pages */
.powered-by{text-align:center;padding:20px 12px 28px}
.powered-by a{font-size:12px;color:var(--slate);text-decoration:none;letter-spacing:.02em;opacity:.75;transition:opacity .15s}
.powered-by a:hover{opacity:1}
.powered-by span{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
/* "Powered by Aestimor" — inline with the copyright in the footer (feedback #38) */
.foot-powered{color:var(--slate);text-decoration:none;transition:opacity .15s;opacity:.85}
.foot-powered:hover{opacity:1}
.foot-powered span{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
@media print{.powered-by{opacity:.6}}

/* Cloudflare Turnstile — human check on auth pages.
   A skeleton + spinner holds the space and shows a calm "verifying" state; the
   real widget cross-fades in only once Cloudflare paints its iframe (JS adds
   .cf-ready), so there's no empty-box flash or layout jump. */
.cf-field{position:relative;margin:1rem 0 .25rem;min-height:66px;display:flex;align-items:center;justify-content:center}
.cf-skeleton{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.6rem;border:1px solid var(--hairline);border-radius:12px;background:color-mix(in srgb,var(--surface-sunk) 55%,transparent);color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.01em;transition:opacity .35s ease;overflow:hidden}
.cf-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--surface) 60%,transparent) 50%,transparent 80%);background-size:200% 100%;animation:cfShimmer 1.4s ease-in-out infinite}
@keyframes cfShimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}
.cf-spinner{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--safety) 35%,var(--hairline));border-top-color:var(--safety);animation:cfSpin .7s linear infinite}
.cf-skeleton-text{position:relative;z-index:1}
@keyframes cfSpin{to{transform:rotate(360deg)}}
.cf-turnstile{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;width:100%;display:flex;justify-content:center}
.cf-field.cf-ready .cf-skeleton{opacity:0;pointer-events:none}
.cf-field.cf-ready .cf-turnstile{opacity:1;transform:none}
.cf-field.cf-error .cf-skeleton{opacity:0}
@media (prefers-reduced-motion:reduce){.cf-skeleton::after,.cf-spinner{animation:none}.cf-turnstile,.cf-skeleton{transition:none}}
.turnstile-box{min-height:0}
.turnstile-box:empty{display:none}

/* ── Share row (auth footer) ─────────────────────────────────────────────────
   Monochrome brand glyphs that light up in their real color on hover. Confident,
   compact, and honest — each opens the app/site with the invite link prefilled. */
/* ── Share the invite ────────────────────────────────────────────────────────
   No chrome — just the marks. A single graceful inline row of muted glyphs that
   bloom into their true brand color and rise on hover. They speak for themselves. */
.share-row{margin:1.7rem 0 .4rem;display:flex;justify-content:center}
.share-head{display:none}
.share-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.15rem;max-width:360px}
.share-btn{--sh:var(--safety);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;background:none;color:var(--muted);opacity:.62;cursor:pointer;text-decoration:none;transition:color .18s ease,opacity .18s ease,transform .18s ease}
.share-btn:hover,.share-btn:focus-visible{color:var(--sh);opacity:1;transform:translateY(-3px);outline:none}
.share-btn:active{transform:translateY(-1px)}
.share-btn svg{display:block;width:19px;height:19px}
/* a hair more room around the two utility marks so they read as a set */
.share-btn[data-share-act="native"]{margin-right:.15rem}
.share-btn[data-share-act="copy"]{margin-left:.15rem}
[data-theme="dark"] .share-btn[style*="--sh-dark"]:hover,[data-theme="dark"] .share-btn[style*="--sh-dark"]:focus-visible{color:var(--sh-dark)}
@media(prefers-color-scheme:dark){.share-btn[style*="--sh-dark"]:hover,.share-btn[style*="--sh-dark"]:focus-visible{color:var(--sh-dark)}}
@media (prefers-reduced-motion:reduce){.share-btn{transition:color .18s ease,opacity .18s ease}.share-btn:hover{transform:none}}
/* Toast confirmation for copy / app-paste */
.share-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:9999;background:var(--ink);color:var(--paper);font-size:.86rem;font-weight:600;padding:.6rem 1rem;border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;max-width:min(90vw,360px);text-align:center}
.share-toast.on{opacity:1;transform:translate(-50%,0)}

/* Header search centered in the app header on desktop (feedback #35) */
@media(min-width:900px){
  .app-header .topbar-inner{position:relative}
  .app-header .hdr-search-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,40vw);flex:none}
  .app-header .qlist-btn{margin-left:auto}
  .app-header .acct{margin-left:0}
  .app-header .topbar-utilities{margin-left:auto}
}
/* Ownership line — Aestimor + both owners with GitHub marks (confident, ours).
   Owner names sit in subtle "chips" so the two humans read as a pair. */
.foot-copy{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1rem .4rem;line-height:1.7}
.foot-brand,.foot-owners{display:inline-flex;align-items:center;justify-content:center;gap:.1rem .35rem}
.foot-owners{flex-wrap:wrap}
.foot-copy strong{color:var(--graphite);font-weight:800;letter-spacing:.03em}
.foot-copy .foot-sep{opacity:.45;font-weight:400}
.foot-owner-prefix,.foot-join{opacity:.65}
.foot-owner{display:inline-flex;align-items:center;gap:.32em;padding:.12em .5em;border-radius:999px;color:var(--slate);text-decoration:none;font-weight:600;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.foot .foot-owner{margin-left:0}
.foot-owner:hover{color:var(--graphite);background:color-mix(in srgb,var(--surface-sunk) 70%,transparent);border-color:var(--hairline);text-decoration:none}
.foot-owner svg{flex:none;vertical-align:-2px;opacity:.7;transition:opacity .15s}
.foot-owner:hover svg{opacity:1}
.foot-copy .foot-rights{opacity:.7;font-weight:400;white-space:nowrap}
/* Standalone copyright line (auth footer, print) gets a hairline flourish above */
.foot-copy-line{display:flex;justify-content:center;text-align:center;font-size:.76rem;color:var(--muted)}

/* Build operations refresh: the real application uses the compact operations
   hierarchy and calendar established in the Aestimor workspace preview. */
.page-head{align-items:flex-end;margin-bottom:1.1rem}
.page-head .eyebrow{margin-bottom:.35rem;letter-spacing:.08em}
.page-head h1{font-size:1.65rem;line-height:1.12}
.overview-panel{padding:0;overflow:hidden}
.overview-panel .card-h{min-height:64px;margin:0;padding:.85rem 1rem;border-bottom:1px solid var(--hairline)}
.overview-panel .card-h h2{margin:0 0 .15rem;font-size:1rem}
.overview-panel .card-h a{font-size:.76rem;font-weight:700}
.overview-empty{padding:1.2rem;color:var(--slate);font-size:.8rem}
.build-list-card{padding:0;overflow:hidden}
.build-list-card table{table-layout:fixed}
.build-list-card th,.build-list-card td{padding:.8rem 1rem}
.build-list-card tbody tr:last-child td{border-bottom:0}
.sidenav-more{position:relative}
.sidenav-more>summary{min-height:40px;display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;color:var(--graphite);border-radius:var(--radius);font-size:.89rem;font-weight:500;list-style:none;cursor:pointer;user-select:none}
.sidenav-more>summary::-webkit-details-marker{display:none}
.sidenav-more>summary:hover{color:var(--ink);background:var(--surface-sunk)}
.sidenav-more>summary .sn-ic{width:19px;height:19px;display:flex}
.sidenav-more>summary .icn{width:19px;height:19px}
.sidenav-more .more-chevron{margin-left:auto;color:var(--slate);font-size:1rem;transition:transform .14s ease}
.sidenav-more[open] .more-chevron{transform:rotate(90deg)}
.sidenav-more-links{max-height:min(44vh,390px);overflow-y:auto;padding:.2rem 0 .35rem}
.sidenav-more-links .sn-link{padding-left:.75rem}
/* Starred-projects quick list, nested right under the Projects sidebar link —
   same collapsible-<details> shell as .sidenav-more, scaled down one notch. */
.sn-starred{margin:0 0 .15rem 1.9rem}
.sn-starred>summary{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;color:var(--muted);border-radius:var(--radius-sm);font-size:.78rem;font-weight:600;list-style:none;cursor:pointer;user-select:none}
.sn-starred>summary::-webkit-details-marker{display:none}
.sn-starred>summary:hover{color:var(--ink);background:var(--surface-sunk)}
.sn-star-ic{color:#e0a838;font-size:.85rem;line-height:1}
.sn-starred .more-chevron{margin-left:auto;color:var(--slate);font-size:.9rem;transition:transform .14s ease}
.sn-starred[open] .more-chevron{transform:rotate(90deg)}
.sn-starred-links{display:flex;flex-direction:column;padding:.1rem 0 .3rem}
.sn-star-link{padding:.32rem .5rem .32rem 1.4rem;font-size:.79rem;color:var(--graphite);text-decoration:none;border-radius:var(--radius-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-star-link:hover{background:var(--surface-sunk);color:var(--ink)}
html.nav-collapsed .sn-starred{display:none}
/* The star toggle itself — used on project board/list cards AND the project
   detail page header, so this lives in the global sheet rather than a
   page-scoped <style> block (avoids duplicating it per page that uses it). */
.pj-star{background:none;border:none;padding:0;margin:0;font-size:.95rem;line-height:1;color:var(--hairline);cursor:pointer;flex:0 0 auto}
.pj-star:hover{color:var(--muted)}
.pj-star.is-starred{color:#e0a838}
.pj-star-lg{font-size:1.1rem;vertical-align:middle;margin-left:.15rem}
/* Board/list toggle + kanban — shared by Projects AND Leads (same component,
   moved here from a page-scoped <style> block so it's not duplicated per page). */
.pj-viewbar{display:flex;align-items:center;gap:.6rem;margin:1rem 0 .35rem;flex-wrap:wrap}
.pj-seg{display:inline-flex;background:var(--surface-sunk);border-radius:9px;padding:3px;gap:2px}
.pj-seg a{padding:.34rem .8rem;border-radius:7px;font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.pj-seg a:hover{color:var(--ink)}
.pj-seg a.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.pj-seg svg{width:15px;height:15px}
.pj-hint{color:var(--muted);font-size:.78rem;margin-left:auto}
/* Group-by picker + group header rows. Grouping is driven by the org's OWN
   custom fields — there is no built-in grouping concept to conform to. */
.grp-pick{display:flex;align-items:center;gap:.4rem;margin-left:auto;font-size:.78rem;color:var(--muted)}
.grp-pick select{font-size:.78rem;padding:.28rem .45rem;border:1px solid var(--hairline);border-radius:7px;background:var(--surface-sunk);color:var(--ink);width:auto}
.grp-row td{background:var(--surface-sunk);padding:.45rem .6rem!important}
.grp-name{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.grp-n{margin-left:.5rem;font-size:.7rem;color:var(--muted)}
@media(hover:none){.pj-hint{display:none}}
/* ---------------- Projects board ----------------
   Rebuilt against a real screenshot: five stacked control bands and ~400px of
   chrome above the work, empty columns rendered as big boxes that outweighed
   the one column with a card in it, and cards that showed money but nothing
   about the work. The register to hit is Asana's: one header line, one control
   line, then work; columns sized to their content; a card that says who owns
   it and how far along it is before it says anything about money. */

/* header: title and actions on ONE line */
.pj-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 .55rem}
.pj-head h1{margin:0;font-size:1.5rem;letter-spacing:-.015em}
.pj-head-r{margin-left:auto;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
/* money is context at the end of the line, never the headline */
.pj-money-inline{font-size:.84rem;color:var(--slate);text-decoration:none;white-space:nowrap}
.pj-money-inline b{color:var(--ink);font-weight:650}
.pj-money-inline:hover{color:var(--ink)}
.pj-dot{margin:0 .45rem;color:var(--hairline)}

/* one control line: layout · filters · group/sort */
.pj-viewbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:0 0 .7rem;margin:0 0 .8rem;border-bottom:1px solid var(--hairline)}
.pj-vsep{width:1px;height:18px;background:var(--hairline);flex:0 0 auto}
.pj-viewbar-r{margin-left:auto;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
/* filter chips — the two old tab rows, one grammar */
.pj-chips{display:inline-flex;align-items:center;gap:.1rem}
.pj-chips a{padding:.28rem .6rem;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;
  color:var(--slate);text-decoration:none;white-space:nowrap}
.pj-chips a:hover{color:var(--ink);background:var(--surface-sunk)}
.pj-chips a.on{color:var(--ink);font-weight:650;background:var(--surface-sunk)}

/* the board */
.pj-board{display:flex;gap:.75rem;overflow-x:auto;padding:.15rem .1rem 1.25rem;
  align-items:flex-start;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.pj-col{flex:0 0 272px;min-width:272px;background:var(--surface-sunk);
  border-radius:var(--radius);padding:.5rem;scroll-snap-align:start}
/* an empty column is a drop target, not a headline — it shrinks out of the way */
.pj-col.is-empty{background:none;border:1px dashed var(--hairline)}
.pj-col-h{display:flex;align-items:center;gap:.4rem;font-weight:650;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate);padding:.25rem .35rem .6rem}
.pj-count{margin-left:auto;font-size:.72rem;color:var(--slate);font-variant-numeric:tabular-nums}
.pj-col.drop-hot{outline:2px solid var(--safety);outline-offset:-2px;background:var(--safety-wash)}
.pj-empty{padding:.9rem .35rem;color:var(--slate);font-size:.78rem;text-align:center;opacity:.65}
/* why a card won't move, said once, above the board it applies to */
.pj-note{margin:0 0 .6rem;font-size:.8rem;color:var(--slate)}

/* the card */
.pj-card{position:relative;display:block;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-sm);padding:.6rem .65rem .5rem;margin-bottom:.45rem}
.pj-card:hover{border-color:var(--rule)}
/* status reads as a thin keyline on the LEFT only when it means something —
   not an accent stripe on every card (that was the "racing stripe" tell) */
.pj-card.is-won{box-shadow:inset 2px 0 0 var(--go)}
.pj-card.is-closed{opacity:.6}
.pj-card[draggable=true]{cursor:grab}
.pj-card.dragging{opacity:.4}
.pj-title{display:block;font-weight:600;font-size:.9rem;line-height:1.35;
  color:inherit;text-decoration:none}
.pj-title:hover{color:var(--safety)}
.pj-cust{font-size:.76rem;color:var(--slate);margin-top:.1rem}
/* who owns it + how far along + (last, quiet) money */
.pj-face{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.75rem;color:var(--slate)}
.pj-who{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--safety-wash);color:var(--safety);font-size:.62rem;font-weight:700;letter-spacing:.02em}
.pj-prog{display:inline-flex;align-items:center;gap:.35rem;font-variant-numeric:tabular-nums}
.pj-bar{display:inline-block;width:34px;height:3px;border-radius:2px;background:var(--hairline);overflow:hidden}
.pj-bar i{display:block;height:100%;background:var(--go)}
.pj-money{margin-left:auto;color:var(--graphite);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* identifier + controls step back until you touch the card */
.pj-tools{display:flex;align-items:center;gap:.35rem;margin-top:.45rem;opacity:0;transition:opacity .12s}
.pj-card:hover .pj-tools,.pj-card:focus-within .pj-tools{opacity:1}
.pj-num{font-size:.65rem;color:var(--slate);letter-spacing:.02em}
/* Move-between-columns buttons: the touch alternative to dragging. Hidden where
   a pointer can drag, shown where it can't. */
.pj-move{display:none;margin-left:auto;gap:.25rem}
@media(hover:none){
  /* No hover means nothing can be hover-revealed — the tools row is always
     visible on touch, or the star and the move buttons would be unreachable. */
  .pj-tools{opacity:1}
  .pj-move{display:flex}
  .pj-move button{width:32px;height:32px;border:1px solid var(--hairline);border-radius:var(--radius-sm);
    background:var(--surface);color:var(--slate);font-size:1rem;line-height:1;padding:0;font-family:inherit}
  .pj-move button:active{background:var(--safety-wash);color:var(--safety);border-color:var(--safety)}
  /* touch targets on the card's own controls */
  .pj-star{font-size:1.05rem;padding:.25rem}
}
.feedback-trigger{display:grid;place-items:center;width:32px;height:32px;padding:0;color:var(--graphite);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:8px;cursor:pointer;list-style:none;transform-origin:center;will-change:transform;transition:color .14s ease,background-color .14s ease,border-color .14s ease,transform .16s cubic-bezier(.2,.8,.25,1),box-shadow .16s ease}
.feedback-trigger::-webkit-details-marker{display:none}
.feedback-trigger:hover,.fb-btn[open] .feedback-trigger{color:var(--safety-press);background:var(--safety-wash);border-color:color-mix(in srgb,var(--safety) 45%,var(--hairline))}
.feedback-trigger:active{transform:scale(.88);box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 20%,transparent)}
.feedback-trigger:focus-visible{outline:2px solid var(--safety);outline-offset:2px}
.feedback-trigger .icn{width:17px;height:17px}
.feedback-trigger span{display:none}
.fb-popover{position:fixed;right:14px;top:57px;width:min(344px,calc(100vw - 40px));max-height:calc(100vh - 70px);overflow-y:auto;z-index:200;padding:8px;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0 0 8px 8px;box-shadow:0 18px 42px rgba(0,0,0,.22)}
.fb-menu-head{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:8px 9px 10px;border-bottom:1px solid var(--hairline)}
.fb-menu-icon{display:grid;place-items:center;width:34px;height:34px;color:var(--safety-press);background:var(--safety-wash);border:1px solid color-mix(in srgb,var(--safety) 32%,var(--hairline));border-radius:7px}
.fb-menu-icon .icn{width:18px;height:18px}
.fb-menu-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.fb-menu-head strong{font-size:12px;color:var(--ink)}
.fb-menu-head small{margin-top:2px;color:var(--slate);font-size:9px;line-height:1.35}
.fb-form{display:grid;gap:10px;padding:10px 9px 8px}
.fb-form label{display:grid;gap:5px;margin:0;color:var(--graphite);font-size:10px;font-weight:700}
.fb-form label>span{display:flex;align-items:baseline;gap:5px}
.fb-form label small{color:var(--slate);font-size:9px;font-weight:500}
.fb-form select,.fb-form textarea{margin:0;background:var(--surface-sunk);border-color:var(--hairline);box-shadow:none}
.fb-form textarea{min-height:88px;resize:vertical}
.fb-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:2px}
.fb-actions button{min-height:32px;border-radius:6px;font-size:10px;transform-origin:center;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s cubic-bezier(.2,.8,.25,1)}
.fb-actions button:active{transform:scale(.95)}
.fb-actions .primary{padding:0 11px}
details[open] .fb-popover{animation:fb-menu-in .18s cubic-bezier(.2,.75,.2,1) both}
details[open] .fb-menu-head,details[open] .fb-form>label,details[open] .fb-form>.fb-actions{opacity:0;animation:fb-section-in .14s ease forwards}
details[open] .fb-menu-head{animation-delay:.045s}
details[open] .fb-form>label:nth-of-type(1){animation-delay:.08s}
details[open] .fb-form>label:nth-of-type(2){animation-delay:.115s}
details[open] .fb-form>label:nth-of-type(3){animation-delay:.15s}
details[open] .fb-form>.fb-actions{animation-delay:.185s}
@keyframes fb-menu-in{from{opacity:0;transform:translateY(-5px) scale(.992)}to{opacity:1;transform:none}}
@keyframes fb-section-in{from{opacity:0}to{opacity:1}}
@media(max-width:767px){
  .app-header .fb-btn{display:none}
  .feedback-trigger{width:auto;height:40px;padding:0 .8rem;display:inline-flex;gap:.4rem;border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
  .feedback-trigger span{display:inline;font-size:.8rem;font-weight:650}
  .fb-popover{top:auto!important;bottom:calc(70px + env(safe-area-inset-bottom) + 40px + 10px);width:min(344px,calc(100vw - 28px));max-height:min(70vh,560px);border:1px solid var(--rule);border-radius:8px}
}
html.nav-collapsed .sidenav-admin{align-items:center;padding:.35rem 0 .45rem}
html.nav-collapsed .sidenav-more>summary{width:28px;height:28px;min-height:28px;justify-content:center;margin:0 auto;padding:0;border-radius:6px}
html.nav-collapsed .sidenav-more>summary .lbl,html.nav-collapsed .sidenav-more>summary .more-chevron{display:none}
html.nav-collapsed .sidenav-more>summary .sn-ic,html.nav-collapsed .sidenav-more>summary .icn{width:15px;height:15px}
html.nav-collapsed .sidenav-more-links{position:absolute;left:calc(100% + 8px);bottom:0;z-index:90;width:190px;max-height:min(58vh,440px);padding:.35rem;background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:0 14px 32px rgba(0,0,0,.2)}
html.nav-collapsed .sidenav-more-links .sn-link{width:auto;height:40px;margin:0;justify-content:flex-start;padding:0 .6rem}
html.nav-collapsed .sidenav-more-links .sn-link .lbl{display:inline}
@media(min-width:768px) and (max-width:1180px){
  .sidenav-more>summary{width:40px;height:40px;min-height:40px;justify-content:center;margin:0 auto;padding:0;border-radius:8px}
  .sidenav-more>summary .lbl,.sidenav-more>summary .more-chevron{display:none}
  .sidenav-more-links{position:absolute;left:calc(100% + 8px);bottom:0;z-index:90;width:190px;max-height:min(58vh,440px);padding:.35rem;background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:0 14px 32px rgba(0,0,0,.2)}
  .sidenav-more-links .sn-link{width:auto;height:40px;margin:0;justify-content:flex-start;padding:0 .6rem}
  .sidenav-more-links .sn-link .lbl{display:inline}
}
.sched-bar{padding:.5rem .6rem;margin-bottom:.65rem;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.sched-grid.card{padding:0;gap:0;overflow:hidden}
.sched-grid.card .sched-col{min-height:420px;background:transparent;border:0;border-right:1px solid var(--hairline);border-radius:0}
.sched-grid.card .sched-col:last-child{border-right:0}
.sched-grid.card .sched-col.today{box-shadow:inset 0 2px 0 var(--safety)}
.sched-grid.card .sched-dhead{min-height:58px;justify-content:center;background:transparent}
.sched-grid.card .sd-today{margin-left:0}
.sched-grid.card .sched-events{padding:.55rem;gap:.55rem}
.sched-grid.card .sev{background:var(--surface-sunk);box-shadow:none}

@media(max-width:700px){
  .page-head{align-items:flex-start}
  .sched-grid.card .sched-col{min-height:auto;border-right:0;border-bottom:1px solid var(--hairline)}
}

/* ---- The conversation ON the work, and the org's own fields ----
   Both of these render on projects, jobs, leads and estimates now, so their
   rules belong in the ONE stylesheet every page loads. They used to live in a
   page-scoped <style> block in opsviews, which meant the very same markup came
   out unstyled the moment it appeared on a views.js page. */
.cmt{padding:.4rem 0;border-top:1px solid var(--hairline)}
.cmt-meta{display:flex;align-items:center;gap:.4rem;font-size:.74rem;margin-bottom:.15rem}
.cmt-body{font-size:.86rem;white-space:pre-wrap;color:var(--ink)}
.cmt-add{display:flex;gap:.4rem;margin-top:.5rem}
.cmt-add input{flex:1;min-width:120px;font-size:.85rem;padding:.4rem .55rem;border:1px solid var(--hairline);border-radius:8px;background:var(--surface-sunk);color:inherit}
.cmt-card .cmt-add{margin-top:.7rem}
.cmt-none{color:var(--slate);font-size:.86rem;padding:.3rem 0}

.cf-form{display:grid;gap:.7rem}
.cf-row{display:grid;gap:.25rem}
.cf-row>label{font-size:.82rem;color:var(--slate)}
.cf-row input[type=text],.cf-row input[type=date],.cf-row input[type=number],.cf-row select{width:100%;max-width:26rem}
@media(min-width:760px){.cf-form{grid-template-columns:1fr 1fr;gap:.7rem 1.1rem}
  .cf-form .form-actions{grid-column:1/-1}}

/* Proof a job happened: the crew's timeline and the customer's real signature.
   Both were captured, stored, and rendered nowhere. */
.wo-proof{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--hairline)}
.wo-proof-steps{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;font-size:.84rem}
.wo-proof-steps li{display:flex;gap:.4rem;flex-wrap:wrap}
.wo-sig{margin:.6rem 0 0}
.wo-sig img{display:block;max-width:min(100%,320px);background:#fff;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.4rem}
.wo-sig figcaption{font-size:.78rem;color:var(--slate);margin-top:.3rem}

/* Projects leads with the work; money is a quiet strip beneath it, not a
   sales dashboard bolted to the top of a project manager. */
.pj-moneybar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.1rem;font-size:.84rem;color:var(--slate);margin:.15rem 0 .6rem}
.pj-moneybar b{color:var(--ink);font-weight:700}
.pj-moneybar a{margin-left:auto;white-space:nowrap}
.pj-kind{border:1px solid var(--hairline);border-radius:var(--radius);padding:.55rem .7rem;margin:.2rem 0 .1rem}
.pj-kind legend{font-size:.8rem;color:var(--slate);padding:0 .3rem}
.pj-kind label{display:flex;align-items:baseline;gap:.45rem;font-size:.88rem;padding:.2rem 0;font-weight:400}
.pj-kind input{width:auto;margin:0}

.pj-progress{height:5px;border-radius:999px;background:var(--surface-sunk);overflow:hidden;margin:0 0 .5rem}
.pj-progress>span{display:block;height:100%;background:var(--safety);border-radius:999px;transition:width .25s ease}

/* An unset assignee or due date is NOISE on every row — "Unassigned" and
   "mm/dd/yyyy" repeated down the page is what made this read as a form. Empty
   controls stay near-silent until you hover the row or focus them. */
.tk-meta [data-empty="1"]{opacity:0;pointer-events:auto}
.tk-row:hover .tk-meta [data-empty="1"],.tk-meta [data-empty="1"]:focus{opacity:1}
@media (hover:none){.tk-meta [data-empty="1"]{opacity:.45}}

/* ============================================================
   RECORD LAYOUT — the shape every serious tool converged on.
   Researched, not guessed:
   • HubSpot's record page is three columns — key properties left, a TABBED
     middle column for the work, associated records right.
     (knowledge.hubspot.com/records/understand-the-default-record-layout)
   • Asana puts the project's views in TABS across the top — Overview, List,
     Board, Timeline, Dashboard, Messages, Files — never one long scroll.
   • Linear treats a view as {layout} x {group by} x {order by} x {visible
     properties}, all chosen by the user. (linear.app/docs/display-options)
   This page used to be eight full-width cards stacked in one column, which is
   why it read as a form instead of a record.
   ============================================================ */
.rec-head{margin-bottom:var(--sp-3)}
.rec-head .back{font-size:.8rem}
.rec-title{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.2rem 0 .1rem}
.rec-title h1{margin:0;font-size:1.5rem;line-height:1.2}
.rec-num{font-size:.78rem;color:var(--slate)}
.rec-head-actions{margin-left:auto;display:flex;gap:.4rem}
.rec-tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--hairline);margin-top:.55rem;overflow-x:auto;scrollbar-width:none}
.rec-tabs::-webkit-scrollbar{display:none}
.rec-tabs a{padding:.5rem .7rem;font-size:.87rem;font-weight:500;color:var(--slate);border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;text-decoration:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.rec-tabs a:hover{color:var(--ink);background:var(--surface-sunk)}
.rec-tabs a.on{color:var(--safety-press);border-bottom-color:var(--safety);font-weight:600}
.rec-tab-n{margin-left:.35rem;font-size:.72rem;font-weight:600;color:var(--slate);background:var(--surface-sunk);
  border-radius:999px;padding:.05rem .35rem}
.rec-tabs a.on .rec-tab-n{background:var(--safety-wash);color:var(--safety-press)}

.rec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);align-items:start}
/* Stacked (phone/tablet portrait): the WORK comes first. Reading a project on
   a phone should not mean scrolling past six property rows to reach the tasks. */
@media (max-width:999px){
  .rec-main{order:-1}
  .rec-rail{flex-direction:column}
}
@media (min-width:1000px){
  /* THE WORK GETS THE WIDTH. These templates described a page that no longer
     exists — a pinned 264px left properties rail that became the on-demand
     inspector. The only live markup is <main> plus an optional right rail, so
     the old 3-track template put MAIN in the narrow 264px rail track and gave
     the ~730px flexible track to the quotes rail — and on rail-less tabs the
     deliverables/packages tables lived in 264px of a 1280px window while the
     rest sat empty (master spec, Part IV defect 5). */
  .rec-grid{grid-template-columns:minmax(0,1fr) 288px}
  .rec-grid-2{grid-template-columns:minmax(0,1fr)}
  .rec-rail{position:sticky;top:.5rem}
}
.rec-rail{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .8rem}
.rec-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);margin-bottom:.5rem}
.rec-card-h a{font-size:.72rem;font-weight:600;text-transform:none;letter-spacing:0}
.rec-card-quiet p{font-size:.82rem;color:var(--slate);margin:0}
.rec-props{margin:0;display:grid;gap:.4rem}
.rec-props>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:.5rem;align-items:baseline}
.rec-props dt{font-size:.78rem;color:var(--slate);margin:0}
.rec-props dd{margin:0;font-size:.85rem;overflow-wrap:anywhere}
.rec-link{display:flex;align-items:center;gap:.4rem;padding:.4rem .15rem;border-radius:var(--radius-sm);
  color:inherit;text-decoration:none;font-size:.84rem;flex-wrap:wrap}
a.rec-link:hover{background:var(--surface-sunk)}
.rec-link+.rec-link{border-top:1px solid var(--hairline)}
.rec-link-t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-link-v{margin-left:auto;font-weight:600;white-space:nowrap}
.rec-none{font-size:.82rem;color:var(--slate);margin:.1rem 0}
.rec-more{margin-top:.4rem}
.rec-more summary{font-size:.78rem;color:var(--slate);cursor:pointer}
.rec-attach{display:flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.25rem 0}
.rec-attach span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rec-main{min-width:0}
.rec-pane{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-4)}
.rec-pane-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .7rem}
.rec-pane-h h2{margin:0;font-size:1rem}
.rec-pane-h span{font-size:.78rem;color:var(--slate);text-align:right}
.rec-summary-pane{position:relative}
.rec-editor{margin:-2.35rem 0 .9rem;text-align:right}
.rec-editor>summary{display:inline-flex;list-style:none;cursor:pointer;user-select:none}
.rec-editor>summary::-webkit-details-marker{display:none}
.rec-editor-form{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--hairline);text-align:left}
.rec-editor[open]+.rec-readout{display:none}
.rec-readout{gap:.9rem 1.5rem}
.rec-readout>div{min-width:0}
.rec-readout .muted{display:block;margin-bottom:.18rem;font-size:.75rem}
.rec-description p{margin:.25rem 0 0;white-space:pre-wrap;line-height:1.55}
.rec-fields-editor{margin-top:-2.35rem}
@media(max-width:640px){
  .rec-editor,.rec-fields-editor{margin:-.25rem 0 .9rem;text-align:left}
  .rec-editor>summary{width:100%;justify-content:center}
  .rec-readout{grid-template-columns:1fr 1fr}
}
.auto-steward-head{align-items:flex-start}
.auto-steward-copy{display:grid;gap:.18rem;min-width:0}
.auto-steward-copy .bar-sub{display:block;max-width:42rem;text-align:left;line-height:1.4}
.auto-steward-head .pk-inline{flex:0 0 auto;margin-left:auto}
@media(max-width:700px){
  .auto-steward-head{align-items:stretch;flex-direction:column;gap:.55rem}
  .auto-steward-head .pk-inline{margin-left:0}
  .auto-steward-head .pk-inline .btn{align-self:flex-start}
  .wk-tools-pane .rec-pane-h{align-items:flex-start;flex-direction:column;gap:.25rem}
  .wk-tools-pane .rec-pane-h .bar-sub{text-align:left;line-height:1.4}
}
.rec-pane .cmt-card{background:none;border:0;padding:0}

/* Grouped LIST sections — the same groups the board draws as columns. */
.grp-empty td{color:var(--slate);font-size:.82rem;padding:.5rem .6rem}
.pj-viewbar .grp-pick{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--slate)}
.pj-viewbar .grp-pick select{font-size:.82rem;padding:.28rem .45rem;border:1px solid var(--hairline);
  border-radius:7px;background:var(--surface);color:var(--ink);width:auto;max-width:170px}

/* ---- Estimates list: age + follow-up cues ----
   A sent estimate going cold is the cheapest money in the business, and the
   list gave no way to see it. Age reads as quiet text until it crosses a
   threshold, then borrows the muted status tokens — never a candy pill. */
.q-age{font-size:.82rem;color:var(--slate);font-variant-numeric:tabular-nums}
.q-age.hold{color:var(--hold);font-weight:600}
.q-age.stop{color:var(--stop);font-weight:600}
.q-exp{font-size:.74rem;color:var(--slate)}
.q-exp.stop{color:var(--stop)}
/* the one-line follow-up prompt above the table */
.q-chase{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin:0 0 1rem;padding:.7rem .95rem;border:1px solid var(--rule);border-left:3px solid var(--hold);
  border-radius:var(--radius);background:var(--warn-bg);font-size:.9rem}
.q-chase a{white-space:nowrap;font-weight:600}

/* ---------------- Inbox + the bell ----------------
   Work coming TO you was the missing half of the product: you could assign
   someone a task and they were told nothing. The badge is the one place a
   saturated colour earns its keep, because it is the only thing on the page
   asking for attention. */
.notif-btn{position:relative;text-decoration:none;display:inline-grid;place-items:center}
.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--safety);color:var(--on-accent);
  font-size:.62rem;font-weight:700;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface)}

/* the queue itself — a list you work down and empty */
.nf-list{margin:0 -.35rem}
.nf-row{margin:0}
.nf-hit{display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;
  padding:.7rem .55rem;background:none;border:0;border-radius:var(--radius-sm);
  cursor:pointer;color:inherit;font:inherit}
.nf-hit:hover{background:var(--surface-sunk)}
.nf-row+.nf-row .nf-hit{border-top:1px solid var(--hairline);border-radius:0}
/* unread reads as a dot, not a filled row — 30 unread should not be 30 blocks of colour */
.nf-dot{flex:0 0 auto;width:7px;height:7px;margin-top:.42rem;border-radius:50%;background:transparent}
.nf-row.is-unread .nf-dot{background:var(--safety)}
.nf-main{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.nf-title{font-size:.9rem;font-weight:500;line-height:1.35}
.nf-row.is-unread .nf-title{font-weight:650}
.nf-body{font-size:.82rem;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-meta{font-size:.74rem;color:var(--slate)}

/* ---------------- Task depth: sections, subtasks, priority ----------------
   project_tasks was project → task and nothing else. No subtasks, so a real
   piece of work couldn't decompose; no sections, so sixty tasks were one flat
   scroll; no priority, the most-used field in any tracker. All of it stays
   quiet until it carries information — an unprioritised task shows no chip, an
   unorganised project shows no sections. */
.tk-sec{border-top:1px solid var(--hairline);margin-top:.35rem}
.tk-sec-h{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.55rem .25rem .4rem;font-size:.72rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.06em;color:var(--slate)}
.tk-sec-h::-webkit-details-marker{display:none}
.tk-sec-h::before{content:'▸';font-size:.7rem;transition:transform .12s;color:var(--slate)}
.tk-sec[open] .tk-sec-h::before{transform:rotate(90deg)}
.tk-sec-h:hover{color:var(--ink)}
.tk-sec-n{font-variant-numeric:tabular-nums;font-weight:500}
.tk-sec-h form{margin:0 0 0 auto;opacity:0;transition:opacity .12s}
.tk-sec-h:hover form,.tk-sec-h:focus-within form{opacity:1}
/* add a section — the quietest control on the page */
.tk-addsec{display:flex;align-items:center;gap:.55rem;padding:.5rem .25rem;margin-top:.2rem;
  border-top:1px solid var(--hairline)}
.tk-addsec input{flex:1;min-width:0;font-size:.82rem;padding:.25rem .1rem;border:0;background:none;color:inherit}
.tk-addsec input::placeholder{color:var(--slate)}
.tk-addsec input:focus{outline:none}

/* subtasks — indented, quieter, one level only */
.tk-kids{margin-left:1.6rem;border-left:1px solid var(--hairline);padding-left:.5rem}
.tk-row.tk-sub{min-height:32px}
.tk-row.tk-sub .tk-name{font-size:.85rem;font-weight:400}
.tk-sub-n{font-size:.72rem;color:var(--slate);font-variant-numeric:tabular-nums;font-weight:500}
.tk-addsub{display:flex;align-items:center;gap:.55rem;min-height:30px;opacity:0;transition:opacity .12s}
.tk-kids:hover .tk-addsub,.tk-addsub:focus-within{opacity:1}
.tk-addsub input{flex:1;min-width:0;font-size:.84rem;padding:.2rem .1rem;border:0;background:none;color:inherit}
.tk-addsub input::placeholder{color:var(--slate)}
.tk-addsub input:focus{outline:none}

/* priority — a mark, not a pill. Nothing renders at normal. */
.tk-pri{display:inline-block;min-width:1em;font-weight:800;font-size:.78rem;letter-spacing:-.05em}
.tk-pri-urgent{color:var(--stop)}
.tk-pri-high{color:var(--hold)}
.tk-pri-low{color:var(--slate);font-weight:600}
.tk-meta .tk-pri-pick[data-empty="1"]{max-width:0;padding:0;border:0;opacity:0;pointer-events:none}
.tk-row:hover .tk-meta .tk-pri-pick[data-empty="1"],
.tk-meta .tk-pri-pick:focus{max-width:110px;padding:.22rem .35rem;opacity:1;pointer-events:auto}

/* ---- TASK BOARD ----------------------------------------------------------
 * Deliberately thin. The board reuses .pj-board/.pj-col/.pj-card wholesale, so
 * everything below is only what a TASK card has that a project card does not:
 * a completion tick, a due date, a priority pip. If the board ever looks wrong,
 * fix .pj-* once and both surfaces move together — that was the whole point. */
.tk-viewbar{margin:.4rem 0 .6rem}
.tk-card{padding-left:2rem}
.tk-card .tk-card-check{position:absolute;left:.55rem;top:.55rem;margin:0}
.tk-tick{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--field-border);
  background:none;color:transparent;font-size:.66rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:background .12s,border-color .12s,color .12s}
.tk-tick:hover{border-color:var(--safety);color:var(--safety)}
.tk-tick.on{background:var(--go);border-color:var(--go);color:#fff}
.tk-card.is-done .pj-title{text-decoration:line-through;color:var(--slate)}
.tk-card.is-done{opacity:.62}
.tk-due{font-size:.72rem;color:var(--slate);font-variant-numeric:tabular-nums}
.tk-pri{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.1rem .32rem;border-radius:999px;background:var(--surface-sunk);color:var(--slate)}
.tk-pri-urgent{background:var(--danger-bg);color:var(--stop)}
.tk-pri-high{background:var(--warn-bg);color:var(--hold)}
.tk-cmt{font-size:.7rem;color:var(--slate)}
.tk-cmt::before{content:'💬 ';font-size:.66rem}
/* The per-column add row. Quiet until you reach for it, so a board of six
   columns isn't six input boxes shouting at you. */
.tk-col-add{padding:.1rem .35rem .35rem}
.tk-col-add input{width:100%;font-size:.78rem;padding:.35rem .45rem;border-radius:var(--radius-sm);
  border:1px dashed transparent;background:none;color:var(--ink)}
.tk-col-add input::placeholder{color:var(--slate)}
.tk-col-add input:hover{border-color:var(--hairline)}
.tk-col-add input:focus{border-style:solid;border-color:var(--safety);background:var(--surface);outline:none}

/* ---- TASK DETAIL ---------------------------------------------------------
 * Reuses the record shell (.rec-head/.rec-grid/.rec-rail/.rec-pane) that the
 * project and job pages already use, so a task reads as the same KIND of thing
 * as everything else you can open. Only the property list is new. */
.tdt-head .rec-title{align-items:flex-start;gap:.6rem}
.tdt-head h1{line-height:1.25}
.tdt-head h1.tdt-done{text-decoration:line-through;color:var(--slate)}
.tdt-tickform{margin:0;padding-top:.28rem}
.tk-tick.tdt-tick{width:22px;height:22px;font-size:.8rem}
.tdt-crumb{margin:.15rem 0 0;font-size:.8rem;color:var(--slate)}
.tdt-crumb a{color:var(--slate)}
.tdt-props dl{margin:0;display:grid;gap:.1rem}
.tdt-prop{display:grid;grid-template-columns:5.5rem 1fr;align-items:center;gap:.5rem;
  padding:.3rem 0;border-bottom:1px solid var(--hairline)}
.tdt-prop:last-child{border-bottom:0}
.tdt-prop dt{font-size:.74rem;color:var(--slate);font-weight:600}
.tdt-prop dd{margin:0;font-size:.85rem;min-width:0}
.tdt-prop dd select,.tdt-prop dd input{width:100%;font-size:.82rem;padding:.26rem .4rem;
  border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--ink)}
/* A field you can change must LOOK like one. Rendered flat these read as static
   text — the value was editable and nothing said so. A caret costs one glyph. */
.tdt-prop dd select:not(:disabled){appearance:none;-webkit-appearance:none;padding-right:1.1rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 9px) 55%,calc(100% - 5px) 55%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.tdt-prop dd select:hover,.tdt-prop dd input:hover{border-color:var(--hairline);background:var(--surface-sunk)}
.tdt-prop dd select:focus,.tdt-prop dd input:focus{border-color:var(--safety);background:var(--surface);outline:none}
.tdt-prop dd select:disabled,.tdt-prop dd input:disabled{opacity:1;border-color:transparent;background:none}
.tdt-desc textarea{width:100%;font:inherit;font-size:.88rem;padding:.6rem .7rem;border-radius:var(--radius);
  border:1px solid var(--hairline);background:var(--surface);color:var(--ink);resize:vertical}
.tdt-desc textarea:focus{border-color:var(--safety);outline:none}
.tdt-desc-ro{white-space:pre-wrap;font-size:.88rem;margin:.2rem 0 0}
.tk-sub-who,.tk-sub-due{font-size:.76rem;color:var(--slate);white-space:nowrap}
.tk-sub-due{font-variant-numeric:tabular-nums}
/* iPad portrait and narrower: the property rail sits above the work rather than
   squeezing the description into a column too narrow to write in. */
@media(max-width:899px){
  .tdt-prop{grid-template-columns:5rem 1fr}
}
.tk-subn{font-size:.7rem;color:var(--slate);font-variant-numeric:tabular-nums}
.tk-subn::before{content:'☑ ';font-size:.66rem}

/* Subtask rows on the task page. The project list's .tk-row is a wide grid built
   for eight columns of controls; reused here it collapsed name, assignee and
   date into one run-on line. This is its own two-column row. */
.tdt-subs{display:flex;flex-direction:column;margin-top:.2rem}
.tdt-sub{display:flex;align-items:center;gap:.55rem;padding:.42rem .1rem;
  border-bottom:1px solid var(--hairline)}
.tdt-sub:last-child{border-bottom:0}
.tdt-sub-tick{margin:0;display:flex;flex:0 0 auto}
.tdt-sub-name{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdt-sub-name:hover{color:var(--safety)}
.tdt-sub.done .tdt-sub-name{text-decoration:line-through;color:var(--slate)}
.tdt-sub-meta{flex:0 0 auto;font-size:.76rem;color:var(--slate);font-variant-numeric:tabular-nums}
@media(max-width:560px){.tdt-sub-meta{display:none}}

/* ---- Settings: one shell for the whole platform -----------------------------
 * This was a flat strip of eight links with no grouping, and Count kept its own
 * separate settings surface. The nav is now a persistent, grouped rail: the
 * groups ARE the mental model, and every settings page shares it, so a change
 * never depends on knowing which application owns the setting. */
.set-nav{float:left;width:15.5rem;margin:0 1.6rem .5rem 0;padding-right:1.2rem;border-right:1px solid var(--hairline)}
.set-grp{margin:0 0 1.05rem}
.set-grp-h{margin:0 0 .3rem;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.set-grp ul{list-style:none;margin:0;padding:0}
.set-link{display:block;padding:.34rem .5rem;margin:0 -.5rem;border-radius:6px;text-decoration:none;color:var(--ink)}
.set-link:hover{background:var(--hover,rgba(255,255,255,.05))}
.set-link.on{background:color-mix(in srgb, var(--safety) 14%, transparent);box-shadow:inset 2px 0 0 var(--safety)}
.set-link-n{display:block;font-size:.86rem;line-height:1.35}
.set-link-b{display:block;font-size:.72rem;line-height:1.35;color:var(--slate);margin-top:.05rem}
.set-link.on .set-link-n{font-weight:600}
.set-nav+*{overflow:hidden}          /* the page body becomes its own column */
@media (max-width:900px){
  /* On a narrow screen a rail would eat the working width, so it becomes a
     scrollable band above the content rather than a column beside it. */
  .set-nav{float:none;width:auto;margin:0 0 1rem;padding:0 0 .7rem;border-right:0;border-bottom:1px solid var(--hairline);
    display:flex;gap:1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .set-grp{margin:0;flex:0 0 auto}
  .set-link{white-space:nowrap}
  .set-link-b{display:none}
}
/* A fact is a label and its value reading left to right. The shared .kv list
   right-aligns its values, which threw a sentence to the far edge away from
   the word it belonged to. */
.set-facts{display:flex;flex-direction:column;gap:.55rem;margin:.2rem 0 0}
.set-fact{display:grid;grid-template-columns:9.5rem 1fr;gap:.2rem .9rem;align-items:baseline}
.set-fact-k{font-size:.78rem;color:var(--slate)}
.set-fact-v{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;min-width:0}
@media (max-width:640px){ .set-fact{grid-template-columns:1fr} }

/* WHAT THIS PROJECT DOES — capability chips on the Project overview.
 * A takeoff-only engagement should not carry a Money tab, and an internal
 * project should not imply plans it will never have. The chips read as a list
 * of what is on, then what could be added, so adding a capability later is a
 * decision made where the work is rather than in a settings maze. */
.cap-form{margin:0 0 .4rem}
.cap-on,.cap-off{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .6rem}
.cap-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border:1px solid var(--hairline);
  border-radius:999px;background:var(--surface);cursor:pointer;font-size:.86rem;line-height:1.2;min-height:32px}
.cap-chip:hover{border-color:var(--accent)}
.cap-chip input{margin:0;accent-color:var(--accent)}
.cap-chip small{color:var(--slate);font-size:.74rem}
.cap-chip.cap-fixed{opacity:.72;cursor:default}
.cap-chip.cap-fixed:hover{border-color:var(--hairline)}
/* The ones that are off read as an offer, not as a checklist of failures. */
.cap-chip-off{border-style:dashed;background:none;max-width:100%}
.cap-chip-off small{display:block;max-width:24rem;white-space:normal}
.cap-add-h{margin:.2rem 0 .45rem;color:var(--slate);font-size:.84rem}
.cap-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.cap-note{color:var(--slate);font-size:.78rem;max-width:34rem}
@media (max-width:700px){
  .cap-chip-off{width:100%}
  .cap-actions{align-items:flex-start;flex-direction:column;gap:.4rem}
}

/* Choosing what a project will do, at the moment it is created. A
 * recommendation, not a commitment — the same choice lives on the project. */
.pj-tpl{display:block;padding:.4rem .1rem;line-height:1.45}
.pj-tpl input{margin-right:.45rem;accent-color:var(--accent)}
.pj-tpl b{font-weight:600}
@media (max-width:700px){ .pj-tpl{padding:.55rem .1rem} }

/* Packages and deliverables — the scopes being delivered, and what goes back. */
.pk-inline{display:inline-flex;gap:.3rem;align-items:center;margin:0}
.pk-inline select{min-height:32px;font-size:.85rem}
.pk-new{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--hairline)}
.pk-qa{display:flex;align-items:center;gap:.45rem;margin:.4rem 0;font-size:.88rem}
.pk-qa input{accent-color:var(--accent)}
/* A superseded deliverable stays visible — somebody will ask which version the
   client has — but reads as history rather than as current work. */
tr.is-superseded{opacity:.55}
tr.is-superseded b{text-decoration:line-through}
.rec-actions{white-space:nowrap}
@media (max-width:700px){
  .rec-actions{white-space:normal}
  .pk-inline{flex-wrap:wrap}
}

/* ---- THE DETAILS INSPECTOR ------------------------------------------------
 * It was a rail pinned to every project view, on every tab, for everyone — so
 * a deliverables list rendered in the middle third of the window with context
 * on both sides that nobody had asked for. An inspector is asked for. */
.insp-toggle[aria-expanded="true"]{border-color:var(--accent);color:var(--ink)}
.rec-inspector[hidden]{display:none}
.insp-x{margin-left:auto;border:0;background:none;color:var(--slate);cursor:pointer;font-size:1rem;
  min-width:32px;min-height:32px;border-radius:6px}
.insp-x:hover,.insp-x:focus-visible{background:var(--hover,rgba(255,255,255,.06));color:var(--ink)}
.insp-scrim{display:none}

/* Desktop: a right-side inspector that overlays rather than reflows, so opening
   it never shifts the work the user is reading. */
@media (min-width:1101px){
  .rec-inspector{position:fixed;top:0;right:0;bottom:0;width:min(22rem,32vw);z-index:70;overflow:auto;
    padding:1rem;background:var(--surface);border-left:1px solid var(--hairline);
    box-shadow:-18px 0 44px rgba(0,0,0,.28)}
}
/* Tablet and phone: an overlay sheet. It does not replace the work behind it —
   the work is still there, and closing returns to exactly where they were. */
@media (max-width:1100px){
  .rec-inspector{position:fixed;top:0;right:0;bottom:0;width:min(26rem,88vw);z-index:70;overflow:auto;
    padding:1rem;background:var(--surface);border-left:1px solid var(--hairline);
    box-shadow:-18px 0 44px rgba(0,0,0,.38)}
  .insp-scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:65;background:rgba(10,12,15,.45)}
}
/* Phone: full screen, with the close control always reachable at the top. */
@media (max-width:640px){
  .rec-inspector{width:100vw;border-left:0}
  .rec-inspector .rec-card-h{position:sticky;top:0;background:var(--surface);z-index:1;padding-top:.2rem}
}

/* Plan sets and revisions. A superseded set stays visible — somebody will ask
   which drawing a number came from — but reads as history. */
.plan-sets{display:flex;flex-direction:column;gap:.7rem}
.plan-set{padding:.7rem .8rem;border:1px solid var(--hairline);border-radius:9px;background:var(--surface)}
.plan-set.is-superseded{opacity:.66}
.plan-set-h{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.plan-set-h .sp{flex:1}
.plan-set-m{font-size:.8rem;margin-top:.25rem}
.plan-diff{margin-top:.45rem;font-size:.86rem}
.plan-diff summary{cursor:pointer;color:var(--slate)}
/* A takeoff measured on a replaced drawing is the one thing on this page that
   must not be missed. */
.plan-stale{border:1px solid var(--safety,#e0a419);background:var(--safety-wash,rgba(224,164,25,.12));
  border-radius:9px;padding:.75rem .85rem;margin:0 0 .9rem}
.plan-stale ul{margin:.4rem 0 .4rem 1.1rem;padding:0}
.plan-stale li{margin:.2rem 0}
.plan-cmp-sum{margin:0 0 1rem;color:var(--slate)}
.plan-cmp-g{margin:0 0 1.2rem}
.plan-cmp-g h2{font-size:1rem;margin:0 0 .4rem}
.plan-cmp-l{margin:0;padding-left:1.1rem}
.plan-cmp-l li{margin:.15rem 0}
.plan-cmp-g.is-added h2{color:var(--ok,#1e9e4b)}
.plan-cmp-g.is-revised h2{color:var(--safety,#e0a419)}
.plan-cmp-g.is-removed h2{color:var(--danger,#d2372b)}
@media (max-width:700px){ .plan-set-h{gap:.3rem} }

/* Project activity feed — read from the domain-event outbox. */
.act-feed{list-style:none;margin:0;padding:0}
.act-row{display:flex;gap:.75rem;align-items:baseline;padding:.45rem .2rem;border-bottom:1px solid var(--border)}
.act-row:last-child{border-bottom:0}
.act-when{flex:0 0 6.5rem;font-size:.78rem;white-space:nowrap}
.act-what{flex:1;min-width:0}
.act-who{flex:0 0 auto;font-size:.78rem}

/* Automations surface */
.auto-sentence{font-family:var(--mono,ui-monospace,monospace);font-size:.8rem;margin-top:.15rem;word-break:break-word}
.auto-run{border:1px solid var(--border);border-radius:var(--radius);padding:.55rem .7rem;margin-bottom:.55rem}
.auto-run-h{display:flex;gap:.5rem;align-items:baseline;margin-bottom:.3rem}
.auto-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}
.auto-approvals{border-color:var(--safety,#7c5cff)}
.steward-card{border-left:3px solid var(--safety,#7c5cff)}
.steward-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}

/* Count-issued material line provenance */
.quantity-trace{margin-top:.45rem;font-size:.78rem}.quantity-trace summary{cursor:pointer;color:var(--accent);font-weight:700}.quantity-trace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem .8rem;margin:.55rem 0}.quantity-trace-grid>div{display:flex;flex-direction:column;gap:.12rem}.quantity-trace-grid span{overflow-wrap:anywhere}.quantity-stage-table{width:100%;font-size:.75rem;border-collapse:collapse}.quantity-stage-table th,.quantity-stage-table td{padding:.28rem .35rem;border:1px solid var(--line);text-align:right}.quantity-stage-table th:first-child,.quantity-stage-table td:first-child{text-align:left}@media(max-width:700px){.quantity-trace-grid{grid-template-columns:1fr}.quantity-stage-table{display:block;overflow-x:auto}}

/* ---- the work surface (governing addendum §4) ---------------------------- */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--sp-3)}
.wk-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:.8rem .9rem;text-decoration:none;color:inherit}
.wk-card:hover{border-color:var(--safety)}
.wk-project-empty{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;max-width:42rem;
  margin:clamp(2.5rem,8vh,6rem) auto;padding:clamp(1.35rem,3vw,2.1rem);background:linear-gradient(135deg,var(--surface),var(--surface-sunk));
  border:1px solid var(--border);border-radius:calc(var(--radius) + 3px)}
.wk-project-empty .eyebrow{color:var(--safety);font-size:.7rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.wk-project-empty h2{margin:0;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em}
.wk-project-empty p{max-width:34rem;margin:0;color:var(--slate);font-size:.94rem;line-height:1.55}
.wk-project-empty-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.25rem}
.wk-project-tabs{margin:-.15rem 0 1rem}
.wk-card-h{display:flex;gap:.45rem;align-items:baseline;margin-bottom:.3rem}
.wk-icon{font-size:1.05rem}
.wk-purpose{font-size:.85rem;margin:.2rem 0 .5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-card-f{display:flex;gap:.7rem;font-size:.8rem}
.wk-views{margin-bottom:.6rem}
.wk-pane{min-width:0}
.wk-section{margin-bottom:1.1rem}
.wk-section-h{display:flex;gap:.5rem;align-items:baseline;font-size:.9rem;margin:.2rem 0 .4rem}
.wk-check-col{width:2rem}
.wk-check{background:none;border:0;font-size:1rem;cursor:pointer;color:inherit;padding:.1rem .2rem;min-width:24px;min-height:24px}
.is-done > td:nth-child(2) a, a.is-done{text-decoration:line-through;opacity:.65}
.wk-quickadd{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.35rem}
.wk-quickadd input[name=title]{flex:1;min-width:12rem}
.wk-inline-add{margin:.15rem 0 .25rem;padding:.1rem .45rem .25rem;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.wk-inline-add summary{width:max-content;padding:.38rem 0;color:var(--accent);font-size:.78rem;font-weight:700;cursor:pointer;list-style:none}
.wk-inline-add summary::-webkit-details-marker{display:none}
.wk-inline-add-fields{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(7rem,auto) auto;gap:.4rem;padding:.15rem 0 .4rem}
.wk-inline-add-fields input,.wk-inline-add-fields select{min-width:0}
.wk-list.is-empty{margin:0;background:transparent}
.wk-list.is-empty .wk-empty-row td{height:2.25rem;padding:.45rem .7rem;border:0;background:transparent;font-size:.8rem}
@media(max-width:640px){.wk-inline-add-fields{grid-template-columns:minmax(0,1fr) auto}.wk-inline-add-fields select{grid-column:1 / -1;grid-row:2}}
.wk-empty-work{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.45rem .85rem;align-items:center;
  max-width:52rem;margin:.25rem auto 1rem;padding:1.35rem 1.45rem;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--safety-wash) 42%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--safety) 28%,var(--border));border-radius:calc(var(--radius) + 3px);box-shadow:0 12px 28px -26px rgba(38,27,92,.65)}
.wk-empty-work-mark{display:grid;place-items:center;width:38px;height:38px;color:var(--safety);background:var(--safety-wash);border:1px solid color-mix(in srgb,var(--safety) 38%,var(--border));border-radius:11px;font:500 1.5rem/1 var(--font-ui)}
.wk-empty-work-copy{min-width:0}.wk-empty-work-copy h2{margin:0;color:var(--ink);font-size:1.05rem;letter-spacing:-.015em}.wk-empty-work-copy p:not(.wk-empty-work-kicker){margin:.22rem 0 0;color:var(--slate);font-size:.85rem;line-height:1.45}
.wk-empty-work-kicker{margin:0 0 .15rem;color:var(--safety);font-size:.66rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.wk-empty-work-action{grid-column:2;min-width:0}.wk-empty-work-action .wk-quickadd{margin:.22rem 0 0}.wk-empty-work-action .wk-quickadd .btn{border-color:var(--safety);background:var(--safety);color:var(--safety-ink)}
@media(max-width:640px){.wk-empty-work{grid-template-columns:auto minmax(0,1fr);padding:1rem;gap:.35rem .65rem}.wk-empty-work-action{grid-column:1 / -1}.wk-empty-work-action .wk-quickadd input[name=title]{min-width:0}.wk-empty-work-action .wk-quickadd .btn{margin-left:auto}}
.wk-board{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.5rem}
.wk-col{flex:0 0 20rem;background:var(--surface-sunk);border-radius:var(--radius);padding:.55rem}
.wk-col-h{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}
.wk-col-b{display:flex;flex-direction:column;gap:.4rem}
.wk-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.55rem .65rem}
.wk-tile-f{display:flex;gap:.5rem;font-size:.78rem;margin-top:.25rem;flex-wrap:wrap}
.wk-move{margin-top:.3rem;display:flex;gap:.3rem}
.wk-move select{font-size:.78rem}
.wk-cal{list-style:none;margin:0;padding:0}
.wk-cal li{display:flex;gap:.6rem;align-items:baseline;padding:.3rem 0;border-bottom:1px solid var(--border)}
.wk-cal-d{flex:0 0 6rem;font-size:.8rem}
.due-late{color:var(--danger,#c0392b);font-weight:600}
.due-today{font-weight:600}
.wk-timeline{display:flex;flex-direction:column;gap:.35rem}
.wk-tl-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--slate);margin-bottom:.2rem}
.wk-tl-row{display:grid;grid-template-columns:minmax(8rem,16rem) 1fr;gap:.6rem;align-items:center}
.wk-tl-track{position:relative;height:1.1rem;background:var(--surface-sunk);border-radius:999px}
.wk-tl-bar{position:absolute;top:.15rem;height:.8rem;background:var(--safety);border-radius:999px;min-width:.6rem}
.wk-tl-bar.is-done{opacity:.45}
.wk-load{margin-bottom:.6rem}
.wk-load-n{font-size:.85rem;display:flex;gap:.4rem;align-items:baseline}
.wk-load-bar{height:.5rem;background:var(--surface-sunk);border-radius:999px;overflow:hidden;margin:.2rem 0}
.wk-load-bar span{display:block;height:100%;background:var(--safety)}
.wk-load-list{list-style:none;margin:.2rem 0 0;padding:0;font-size:.85rem}
.wk-load-list li{display:flex;gap:.5rem;justify-content:space-between;padding:.12rem 0}
.wk-dash{display:flex;flex-direction:column;gap:1rem;max-width:76rem}
.wk-dash-intro{display:flex;justify-content:space-between;gap:1.5rem;align-items:end;padding:.2rem 0 .25rem}
.wk-dash-intro h2{margin:.15rem 0;font-size:1.25rem;letter-spacing:-.025em}
.wk-dash-intro p{margin:0;color:var(--slate);font-size:.9rem}
.wk-dash-progress{width:min(15rem,35vw);display:grid;grid-template-columns:auto 1fr;gap:.1rem .45rem;align-items:baseline;text-align:right}
.wk-dash-progress b{font-size:1.25rem;line-height:1}.wk-dash-progress span{font-size:.76rem;color:var(--slate)}
.wk-dash-progress .wk-load-bar{grid-column:1/-1;width:100%;margin:.25rem 0 0}
.wk-dash-next{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.35rem 1.45rem;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--safety-wash) 52%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--safety) 30%,var(--border));border-radius:calc(var(--radius) + 5px)}
.wk-dash-next-copy{min-width:0}.wk-dash-next h3{margin:.2rem 0 .3rem;font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.18;letter-spacing:-.03em}
.wk-dash-next h3 a{color:var(--ink);text-decoration:none}.wk-dash-next h3 a:hover{text-decoration:underline;text-underline-offset:.16em}
.wk-dash-next p{margin:0;color:var(--slate);font-size:.92rem;line-height:1.5}
.wk-dash-next-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .75rem;margin-top:.8rem;color:var(--slate);font-size:.8rem}
.wk-dash-next-meta .tag{color:var(--ink)}.wk-dash-next>.btn{flex:0 0 auto}.wk-dash-next.is-clear{background:var(--surface);border-color:var(--border)}
.wk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem}
.wk-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.7rem .8rem;text-align:left}
.wk-stat b{display:block;font-size:1.5rem;line-height:1.1}
.wk-stat span{font-size:.78rem;color:var(--slate)}
.wk-stat.is-warn b{color:var(--danger,#c0392b)}
.wk-dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.wk-dash-card{margin:0;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px)}
.wk-dash-card-h{display:flex;justify-content:space-between;gap:.75rem;align-items:start;margin-bottom:.85rem}
.wk-dash-card-h h3{margin:.13rem 0 0;font-size:1rem;letter-spacing:-.015em}
.wk-dash-artifacts{grid-column:1/-1}
.wk-dash-list{list-style:none;margin:0;padding:0}.wk-dash-list li{display:flex;justify-content:space-between;gap:.75rem;align-items:start;padding:.5rem 0;border-top:1px solid var(--border)}
.wk-dash-list li:first-child{border-top:0;padding-top:0}.wk-dash-list a,.wk-dash-list b{display:block}.wk-dash-list .muted{display:block;font-size:.78rem;margin-top:.12rem}
.wk-dash-clear{margin:0;color:var(--slate);font-size:.9rem;line-height:1.5}
.wk-sub{list-style:none;margin:0;padding:0}
.wk-sub li{display:flex;gap:.4rem;align-items:center;padding:.2rem 0}
@media (max-width:720px){
  .wk-tl-row{grid-template-columns:1fr}
  .wk-col{flex-basis:82vw}
  .wk-cal li{flex-wrap:wrap}
  .wk-dash-intro{align-items:start;flex-direction:column}.wk-dash-progress{width:100%;text-align:left}
  .wk-dash-next{align-items:flex-start;flex-direction:column;padding:1.1rem}.wk-dash-next>.btn{width:100%}
  .wk-dash-grid{grid-template-columns:1fr}.wk-dash-artifacts{grid-column:auto}
}

/* Settings scope switcher — the user always knows what they are changing. */
.set-scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem;margin-bottom:1rem}
.set-scopes a{display:block;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;color:inherit}
.set-scopes a.on{border-color:var(--safety);box-shadow:inset 0 0 0 1px var(--safety)}
.set-scopes a b{display:block;font-size:.9rem}
.set-scopes a span{font-size:.78rem}
.pub-form{max-width:34rem;margin:2rem auto;padding:0 1rem}
.pub-form label{display:block;margin-bottom:.7rem}
.pub-form input{width:100%}

/* ---- FOCUS IS ALWAYS VISIBLE (WCAG 2.2 AA, 2.4.7) -----------------------
 * Fifteen scoped :focus-visible rules existed and no global fallback, so most
 * controls — including every kernel control — showed a keyboard user nothing
 * at all. Found by an accessibility sweep at 834px on 2026-08-02. This is the
 * floor; the scoped rules above still refine individual components. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--safety);
  outline-offset:2px;
  border-radius:3px;
}
/* Inside a dark surface the ring needs a light halo to stay legible. */
.wk-tile a:focus-visible,.wk-card:focus-visible,.wk-col a:focus-visible{
  outline-offset:3px;
  box-shadow:0 0 0 4px var(--safety-wash,rgba(124,92,229,.25));
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---- the template library ------------------------------------------------
 * A template is only trustworthy if you can read what is in it before you
 * install it, so the contents are laid out as plain grouped lists rather than
 * hidden behind a name and a description. */
.wk-tpl-group{margin:1.4rem 0 .6rem;font-size:1.05rem}
.wk-tpl-desc{margin:0 0 .6rem}
.wk-tpl-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem 1.2rem;margin:.4rem 0 .8rem}
.wk-tpl-part h4{margin:0 0 .25rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.wk-tpl-list{list-style:none;margin:0;padding:0;font-size:.87rem}
.wk-tpl-list li{padding:.1rem 0}
.wk-tpl-uses{font-size:.87rem;margin:.2rem 0 .6rem}
.wk-tpl-uses a{margin-right:.35rem}
.wk-tpl-actions{flex-wrap:wrap;gap:.5rem}
.wk-tpl-actions input{max-width:14rem}
.wk-tpl-publish h3{margin:0 0 .2rem}

/* ---- composing your own home --------------------------------------------- */
.wk-wg-list{list-style:none;margin:0;padding:0}
.wk-wg-row{display:flex;gap:.8rem;align-items:center;justify-content:space-between;
  padding:.75rem .15rem;border-bottom:1px solid var(--border)}
.wk-wg-row:last-child{border-bottom:0}
.wk-wg-order{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;color:var(--slate);background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:50%;font:700 .68rem/1 var(--font-mono)}
.wk-wg-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.wk-wg-body .muted{font-size:.85rem}
.wk-wg-actions{display:flex;gap:.35rem;align-items:center;flex:none}
.wk-wg-actions button[disabled]{opacity:.35;cursor:not-allowed}
.wk-wg-icon{display:grid;place-items:center;width:32px;min-width:32px;height:32px;min-height:32px;padding:0;color:var(--slate);background:var(--surface);border:1px solid var(--hairline);border-radius:7px;font-size:.9rem;line-height:1}
.wk-wg-icon:not([disabled]):hover{color:var(--ink);background:var(--surface-sunk);border-color:var(--rule)}
.wk-wg-remove{min-height:32px;padding:.3rem .5rem;color:var(--slate);background:transparent;border:1px solid transparent;border-radius:7px;font:700 .72rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
.wk-wg-remove:hover{color:var(--stop);background:var(--danger-bg);border-color:color-mix(in srgb,var(--stop) 28%,var(--hairline))}
@media(max-width:640px){.wk-wg-row{align-items:flex-start}.wk-wg-actions{margin-left:auto}.wk-wg-remove{padding-inline:.35rem}.wk-wg-body .muted{font-size:.78rem}}
.wk-ov-pf{margin-bottom:.7rem}
.wk-ov-pf>b{display:block;margin-bottom:.2rem;font-size:.9rem}
/* The first-workspace card is the product's first impression. Its content used
   to start directly on the header divider, which made the card look like a
   broken table rather than a composed next step. Give the decision, context,
   and actions a deliberate reading rhythm. */
.wk-gs{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;padding:1.05rem 1.05rem 1.15rem}
.wk-gs b{display:block;color:var(--ink);font-size:.94rem;letter-spacing:-.012em}
.wk-gs p{margin:.42rem 0 .85rem;max-width:62ch;color:var(--slate);line-height:1.5}
.wk-gs p:last-child{display:flex;flex-wrap:wrap;gap:.45rem;margin:0}
.wk-gs .btn{min-height:38px;padding-inline:.82rem}
@media(max-width:640px){.wk-gs{padding:.95rem}.wk-gs p:last-child .btn{flex:1;justify-content:center;min-width:8.5rem}}

/* ---- the conversation on the work ---------------------------------------- */
.wk-comments{margin-top:1rem}
.wk-thread{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.wk-cmt{border-left:2px solid var(--border);padding:.1rem 0 .1rem .7rem}
.wk-cmt-h{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;font-size:.85rem}
.wk-cmt-b{white-space:pre-wrap;margin-top:.15rem}
.wk-cmt-form label{display:block;margin-bottom:.2rem;font-size:.85rem}
.wk-cmt-form textarea{width:100%}

/* ---- the list as a work surface ------------------------------------------
 * Cells are editable in place. The inputs are borderless until they are
 * touched, so a dense list still reads as a list rather than as a form. */
.wk-list td{vertical-align:middle}
.wk-in{width:100%;min-width:0;background:transparent;border:1px solid transparent;
  border-radius:var(--radius-sm);padding:.2rem .3rem;font:inherit;color:inherit}
.wk-in:hover{border-color:var(--hairline)}
.wk-in:focus{border-color:var(--safety);background:var(--surface);outline:none}
.wk-in-title{font-weight:600}
.wk-c-title{min-width:14rem}
.wk-c-assignee,.wk-c-section{min-width:8rem}
.wk-c-due{min-width:8.5rem}
.wk-c-save{width:1%;white-space:nowrap}
/* Save is present for everyone; JavaScript only makes it prominent once the
   row has actually changed, so a person without it is never stuck. */
.wk-save{opacity:.45}
.wk-save.is-dirty{opacity:1}
.wk-open{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);margin-left:.35rem}
.wk-rowforms{display:none}
.wk-filter-panel{margin:0}
.wk-filter-summary{display:none}
.wk-filter-panel:not([open])>.wk-controls{display:flex}
@media (max-width:767px){
  .wk-filter-panel{margin-bottom:.7rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
  .wk-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:44px;padding:.55rem .7rem;color:var(--ink);font-size:.86rem;font-weight:650;cursor:pointer;list-style:none}
  .wk-filter-summary::-webkit-details-marker{display:none}
  .wk-filter-summary::after{content:"▾";color:var(--slate);font-size:.78rem;transition:transform .14s ease}
  .wk-filter-summary small{margin-left:auto;color:var(--slate);font-size:.7rem;font-weight:600}
  .wk-filter-panel[open]>.wk-filter-summary{border-bottom:1px solid var(--hairline)}
  .wk-filter-panel[open]>.wk-filter-summary::after{transform:rotate(180deg)}
  .wk-filter-panel:not([open])>.wk-controls{display:none}
  .wk-filter-panel>.wk-controls{margin:0;border:0;border-radius:0;background:transparent}
}
.wk-controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;
  padding:.6rem .7rem;margin-bottom:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.wk-ctl{display:flex;flex-direction:column;gap:.15rem;font-size:.78rem}
.wk-ctl>span{color:var(--slate);text-transform:uppercase;letter-spacing:.03em;font-size:.68rem}
.wk-ctl-check{flex-direction:row;align-items:center;gap:.35rem;padding-bottom:.35rem}
.wk-ctl-check>span{text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--ink)}
.wk-ctl-actions{display:flex;gap:.4rem;align-items:center;margin-left:auto}
.wk-filter-primary{display:flex;align-items:end;gap:.45rem}
.wk-filter-primary>.wk-ctl{flex:1;min-width:0}
.wk-view-options{width:100%;border-top:1px solid var(--hairline)}
.wk-view-options>summary{display:flex;align-items:center;gap:.65rem;min-height:38px;padding:.45rem 0 0;
  color:var(--ink);font-size:.8rem;font-weight:650;cursor:pointer;list-style:none}
.wk-view-options>summary::-webkit-details-marker{display:none}
.wk-view-options>summary::before{content:"+";width:1rem;color:var(--slate);font:700 .85rem/1 var(--font-mono)}
.wk-view-options[open]>summary::before{content:"−"}
.wk-view-options>summary small{margin-left:auto;color:var(--slate);font-size:.68rem;font-weight:550}
.wk-view-options-body{display:flex;flex-wrap:wrap;align-items:end;gap:.5rem;padding:.6rem 0 0}
.wk-batchbar{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  padding:.5rem .7rem;margin-bottom:.6rem;background:var(--safety-wash);border:1px solid var(--safety);
  border-radius:var(--radius)}
/* The [hidden] attribute is inert once an author rule sets display on the same
 * element — author origin beats the UA-stylesheet [hidden]{display:none} rule
 * regardless of specificity. Without this, the bar rendered permanently,
 * sticky at the top of the list, covering the first row. */
.wk-batchbar[hidden]{display:none}
.wk-batchn{font-weight:600;font-size:.85rem;margin-right:.3rem}
.wk-sec-d>summary{cursor:pointer;list-style:none}
.wk-sec-d>summary::-webkit-details-marker{display:none}
.wk-sec-d>summary::before{content:"▾";display:inline-block;width:1em;color:var(--slate)}
.wk-sec-d:not([open])>summary::before{content:"▸"}

/* ---- the board, dragged ---------------------------------------------------
 * The board scrolls inside itself. A board that scrolls the DOCUMENT sideways
 * takes the whole page with it and there is no way back on a phone. */
.wk-board-wrap{position:relative}
.wk-board-help{font-size:.8rem;color:var(--slate);margin:0 0 .5rem}
.wk-board{display:flex;gap:.8rem;align-items:flex-start;overflow-x:auto;overflow-y:visible;
  padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.wk-col{scroll-snap-align:start}
.wk-col-warn{margin:.2rem .1rem;font-size:.78rem;color:var(--stop)}
.wk-col.is-over .wk-col-h{color:var(--stop)}
/* grip · select · body · actions. The selection checkbox was added after the
   grid was written for three columns, so the body wrapped onto a second row
   and the drag handle moved out from under the finger. */
.wk-tile{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:.4rem;align-items:start}
.wk-tile-b{min-width:0}
.wk-tile-a{grid-column:1 / -1;display:flex;flex-direction:row;align-items:center;gap:.4rem;
  margin-top:.45rem;padding-top:.4rem;border-top:1px solid var(--hairline)}
.wk-tile-a .pk-inline{display:flex;align-items:center}
.wk-tile-a .wk-move{margin:0 0 0 auto;min-width:0}
.wk-tile-a .wk-move select{max-width:10.5rem;min-width:0}
.wk-board.is-compact .wk-tile{padding:.35rem .45rem}
.wk-board.is-compact .wk-tile-f{display:none}
/* The grip is the drag AND the keyboard entry point, so it is a real button
   with a real name — a drag handle nobody can focus is a drag handle half the
   people using this cannot use at all. */
/* touch-action:none is what makes this work with a finger at all. Without it
   the browser claims the gesture for scrolling the board and the card never
   moves — the drag simply does not exist on a phone. */
.wk-grip{cursor:grab;background:none;border:0;color:var(--slate);padding:.1rem .15rem;
  line-height:1;font-size:1rem;border-radius:var(--radius-sm);min-width:28px;min-height:28px;
  touch-action:none;-webkit-user-select:none;user-select:none}
.wk-grip:active{cursor:grabbing}
.wk-tile.is-dragging{position:fixed;z-index:60;pointer-events:none;opacity:.92;
  box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.25));transform:rotate(1deg)}
.wk-tile.is-held{outline:2px solid var(--safety);outline-offset:2px}
body.wk-dragging{user-select:none;cursor:grabbing}
/* Scroll snapping and an edge-scroll during a drag fight each other: every
   14px nudge got pulled straight back to the column start, so holding a card
   at the edge did nothing at all. Snapping is for browsing, not for dragging. */
body.wk-dragging .wk-board,.wk-board.is-moving{scroll-snap-type:none}
/* Where it will land, shown before it lands. */
/* An empty column collapsed to zero height, so there was nowhere to drop a
   card INTO it — the one move a board exists for. It keeps a target. */
.wk-col-b{min-height:3.5rem}
.wk-col-b:empty::after{
  content:"Drop here";display:block;padding:1rem .5rem;text-align:center;
  font-size:.8rem;color:var(--slate);border:1px dashed var(--border);border-radius:var(--radius)}
.wk-drop-marker{height:3px;margin:.25rem 0;border-radius:2px;background:var(--safety)}
.wk-board.wk-refused{animation:wk-shake .3s}
@keyframes wk-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.wk-board.wk-refused{animation:none;outline:2px solid var(--stop)}
  .wk-tile.is-dragging{transform:none}}
.wk-live{position:absolute;left:0;bottom:-1.4rem;font-size:.8rem;color:var(--slate);margin:0}
/* On a phone the arrange controls were taller than the board they arrange, so
   the work started below the fold. Two columns and a shorter help line give
   the board the screen back. */
@media (max-width:600px){
  .wk-controls{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.45rem .5rem}
  .wk-controls .wk-ctl-actions{grid-column:1 / -1;margin-left:0}
  .wk-board-help{font-size:.75rem;max-height:3.2em;overflow:hidden}
  .wk-list-wrap{overflow:visible}
  .wk-list,.wk-list>tbody{display:block;width:100%;max-width:100%;min-width:0}
  .wk-list tr[data-item]{display:grid;width:100%;box-sizing:border-box;grid-template-columns:max-content max-content minmax(0,1fr) max-content;align-items:center;gap:.45rem .55rem;padding:.78rem .05rem}
  .wk-list tr[data-item]>td{min-width:0;max-width:100%;margin:0;padding:0}
  .wk-list tr[data-item]>.wk-c-title{display:flex;grid-column:1 / -1;grid-row:1;align-items:center;gap:.35rem;font-size:.96rem;font-weight:650;line-height:1.3}
  .wk-list .wk-c-title .wk-in-title{flex:1 1 auto;min-width:0}
  .wk-list tr[data-item]>.wk-c-grip,.wk-list tr[data-item]>.wk-check-col,.wk-list tr[data-item]>.wk-c-done,.wk-list tr[data-item]>.wk-c-save{width:max-content;max-width:none;flex-basis:auto}
  .wk-list.is-editing tr[data-item]>.wk-c-grip{display:inline-flex;grid-column:1;grid-row:2;position:relative;z-index:1;align-items:center;gap:.15rem}
  .wk-list.is-editing tr[data-item]>.wk-check-col{display:inline-flex;grid-column:2;grid-row:2;align-items:center}
  .wk-list.is-editing tr[data-item]>.wk-c-done{display:inline-flex;grid-column:3;grid-row:2;align-items:center}
  .wk-list.is-editing tr[data-item]>.wk-c-save{display:flex;grid-column:4;grid-row:2;justify-self:end}
  .wk-list:not(.is-editing) tr[data-item]>.wk-c-done{display:inline-flex;grid-column:1;grid-row:1;align-items:center}
  .wk-list:not(.is-editing) tr[data-item]>.wk-c-title{grid-column:2 / -1}
  .wk-list tr[data-item]>.wk-c-assignee,.wk-list tr[data-item]>.wk-c-due,.wk-list tr[data-item]>.wk-c-section,.wk-list tr[data-item]>.wk-c-field{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:.18rem;color:var(--ink);font-size:.8rem}
  .wk-list tr[data-item]>.wk-c-assignee{grid-column:1 / 3;grid-row:3}
  .wk-list tr[data-item]>.wk-c-due{grid-column:3 / 5;grid-row:3}
  .wk-list tr[data-item]>.wk-c-section{grid-column:1 / -1;grid-row:4}
  .wk-list tr[data-item]>.wk-c-field{grid-column:1 / -1}
  .wk-list tr[data-item]>[data-label]::before{content:attr(data-label);color:var(--slate);font-size:.65rem;font-weight:650;letter-spacing:.04em;line-height:1.2;text-transform:uppercase}
  .wk-list tr[data-item]>.wk-c-assignee .wk-in,.wk-list tr[data-item]>.wk-c-due .wk-in,.wk-list tr[data-item]>.wk-c-section .wk-in{width:100%;max-width:100%;min-width:0}
}
.wk-cardcfg{margin:.4rem 0 .7rem;font-size:.85rem}
.wk-cardcfg summary{cursor:pointer;color:var(--slate)}
.wk-cardcfg fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .7rem;margin:.5rem 0}
.wk-cardcfg legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);padding:0 .3rem}
.wk-chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.4rem .8rem}
.wk-chk-grid input[type=number]{max-width:6rem}
.wk-pick{margin:.15rem 0 0}
.wk-list.is-compact td,.wk-list.is-compact th{padding:.22rem .4rem}
.wk-list.is-compact .wk-in{padding:.1rem .25rem}

/* ---- Workspace GUI reset -------------------------------------------------
 * This is intentionally the final workspace layout layer. The work surfaces
 * accumulated several generations of flex rules and breakpoint patches; at
 * laptop widths their controls wrapped unpredictably and board cards inherited
 * the position of whatever happened to precede them. These scoped rules make
 * each workspace a single, deterministic composition without changing the
 * underlying forms, routes, drag behavior, or data model. */
.wk-page-index,
.wk-page-project,
.wk-page-record{min-width:0}

.wk-page-index .page-head,
.wk-page-project .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 2rem}
.wk-page-index .ph-l,
.wk-page-project .ph-l{min-width:0}
.wk-page-index .ph-r,
.wk-page-project .ph-r{display:flex;align-items:center;justify-content:flex-end;gap:.45rem;flex-wrap:wrap}
.wk-page-project .ph-l>p{margin:0 0 .35rem}
.wk-project-title{display:flex;align-items:center;gap:.35rem;min-width:0}
.wk-page-project .ph-l h1{max-width:70ch;overflow-wrap:anywhere}
.wk-project-tools,.wk-project-menu{position:relative;z-index:12}
.wk-project-tools>summary,.wk-project-menu>summary{list-style:none;cursor:pointer}
.wk-project-tools>summary::-webkit-details-marker,.wk-project-menu>summary::-webkit-details-marker{display:none}
.wk-menu-chevron{display:inline-block;margin-left:.15rem;color:var(--slate);transition:transform .14s ease}
.wk-project-menu[open] .wk-menu-chevron{transform:rotate(180deg)}
.wk-project-tools-menu,.wk-project-menu-popover{
  position:absolute;top:calc(100% + .4rem);right:0;display:grid;width:min(17rem,calc(100vw - 2rem));
  overflow:hidden;padding:.35rem;background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 18px 42px rgba(0,0,0,.2)
}
.wk-project-tools-menu a,.wk-project-menu-popover a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:42px;padding:.55rem .7rem;color:var(--ink);border-radius:7px;text-decoration:none}
.wk-project-tools-menu a:hover,.wk-project-tools-menu a:focus-visible,
.wk-project-menu-popover a:hover,.wk-project-menu-popover a:focus-visible{background:var(--surface-sunk);text-decoration:none}
.wk-project-tools-menu b,.wk-project-menu-popover b{font-size:.86rem}
.wk-project-tools-menu span,.wk-project-menu-popover i{color:var(--slate)}
.wk-project-menu-popover span{display:grid;gap:.08rem;min-width:0}
.wk-project-menu-popover small{color:var(--slate);font-size:.72rem;font-weight:500;line-height:1.35}
.wk-project-menu-popover i{font-style:normal}
.wk-project-menu-popover em{font-style:normal}

.wk-page-index .wk-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  gap:.85rem;
}
.wk-page-index .wk-card{
  min-height:8.75rem;display:grid;grid-template-rows:auto minmax(2.5rem,1fr) auto;
  padding:1rem 1.05rem;border-radius:10px;
  transition:border-color .14s ease,background-color .14s ease,transform .14s ease;
}
.wk-page-index .wk-card:hover{background:color-mix(in srgb,var(--surface) 92%,var(--safety-wash));transform:translateY(-1px);text-decoration:none}
.wk-page-index .wk-card-h{align-items:flex-start;margin:0}
.wk-page-index .wk-card-h b{font-size:1rem;line-height:1.35}
.wk-page-index .wk-purpose{align-self:start;margin:.55rem 0;color:var(--slate);line-height:1.45}
.wk-page-index .wk-card-f{align-items:center;gap:.65rem;padding-top:.7rem;border-top:1px solid var(--hairline);font-variant-numeric:tabular-nums}

.wk-page-project .wk-viewtabs{
  position:sticky;top:0;z-index:8;min-height:43px;margin:0 0 .8rem;padding:.25rem;
  background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.wk-page-project .wk-viewtabs a{display:inline-flex;align-items:center;min-height:34px;padding:.4rem .72rem}
.wk-page-project .wk-pane{width:100%;min-width:0}

.wk-page-project .wk-filter-panel{margin:0 0 .8rem}
.wk-page-project .wk-controls{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;margin:0;padding:.65rem .75rem;border-radius:10px;
}
.wk-page-project .wk-filter-primary{display:grid;grid-template-columns:minmax(12rem,1fr) auto;align-items:end}
.wk-page-project .wk-ctl{min-width:0}
.wk-page-project .wk-ctl input:not([type=checkbox]),
.wk-page-project .wk-ctl select{width:100%;min-width:0;min-height:38px;padding-block:.42rem}
.wk-page-project .wk-ctl-check{align-self:end;min-width:max-content;min-height:38px;padding:0 .2rem;white-space:nowrap}
.wk-page-project .wk-view-options-body{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end}
.wk-page-project .wk-ctl-actions{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;margin:0;white-space:nowrap}
.wk-page-project .wk-view-options-body>.wk-ctl-actions{grid-column:1/-1;justify-content:flex-start}
.wk-page-project .wk-ctl-actions .btn{min-height:38px}

.wk-page-project .wk-board-wrap{min-width:0}
.wk-page-project .wk-board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(17.5rem,20rem);
  align-items:start;gap:.75rem;max-width:100%;overflow-x:auto;overflow-y:visible;
  padding:.15rem .15rem .8rem;scroll-padding-inline:.15rem;overscroll-behavior-x:contain;
}
.wk-page-project .wk-col{
  width:auto;min-width:0;max-width:none;display:grid;grid-template-rows:auto auto minmax(3.5rem,auto) auto;
  align-content:start;padding:.55rem;background:color-mix(in srgb,var(--surface-sunk) 88%,var(--surface));
  border:1px solid var(--hairline);border-radius:10px;
}
.wk-page-project .wk-col-h{min-height:32px;display:flex;align-items:center;gap:.45rem;margin:0;padding:.2rem .25rem .55rem}
.wk-page-project .wk-col-h>.muted{margin-left:auto;font:700 .7rem/1 var(--font-mono)}
.wk-page-project .wk-col-b{gap:.5rem}
.wk-page-project .wk-tile{
  position:relative;grid-template-columns:24px 24px minmax(0,1fr);gap:.35rem;
  padding:.65rem;background:var(--surface);border-color:var(--hairline);border-radius:8px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent);
}
.wk-page-project .wk-tile-t{display:block;min-width:0;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.wk-page-project .wk-tile-t:hover{color:var(--safety);text-decoration:none}
.wk-page-project .wk-tile-f{gap:.35rem .55rem;margin-top:.4rem;color:var(--slate);line-height:1.35}
.wk-page-project .wk-tile-a{min-height:32px;margin-top:.55rem;padding-top:.5rem}
.wk-page-project .wk-quickadd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem;margin:.55rem 0 0;padding-top:.55rem;border-top:1px solid var(--hairline)}
.wk-page-project .wk-quickadd input[name=title]{width:100%;min-width:0}

.wk-page-record .rec-grid{gap:1rem}
.wk-page-record .rec-pane,
.wk-page-record .rec-card{border-radius:10px}

@media(max-width:1399px){
  .wk-page-project .wk-view-options-body{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:899px){
  .wk-page-index .page-head,
  .wk-page-project .page-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:.75rem}
  .wk-page-index .ph-r,
  .wk-page-project .ph-r{justify-content:flex-start}
  .wk-page-project .wk-project-tools-menu,.wk-page-project .wk-project-menu-popover{right:auto;left:0}
  .wk-page-project .wk-viewtabs{top:0}
  .wk-page-project .wk-view-options-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-page-project .wk-ctl-actions{justify-content:flex-start;overflow-x:auto}
}
@media(max-width:600px){
  .wk-page-index .wk-grid{grid-template-columns:minmax(0,1fr)}
  .wk-page-index .wk-card{min-height:0}
  .wk-page-project .wk-filter-panel>.wk-controls{grid-template-columns:minmax(0,1fr);padding:.65rem}
  .wk-page-project .wk-filter-primary{grid-template-columns:minmax(0,1fr) auto}
  .wk-page-project .wk-view-options-body{grid-template-columns:minmax(0,1fr)}
  .wk-page-project .wk-ctl input:not([type=checkbox]),
  .wk-page-project .wk-ctl select,
  .wk-page-project .wk-ctl-check{min-height:44px}
  .wk-page-project .wk-view-options-body>.wk-ctl-actions{grid-column:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .wk-page-project .wk-ctl-actions .btn{justify-content:center}
  .wk-page-project .wk-board{grid-auto-columns:minmax(16.5rem,86vw)}
}

/* Templates are a product catalogue, not a settings dump. The page keeps the
   full, inspectable definition while making the decision to start clear. */
.wk-page-templates{padding-bottom:4rem}
.wk-page-templates .wk-tpl-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;
  align-items:end;overflow:hidden;margin:-.25rem 0 2.25rem;padding:clamp(1.5rem,3.5vw,3.25rem);
  color:#fff;background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--safety) 60%,transparent),transparent 34%),
    linear-gradient(135deg,#151419,#241c36);
  border:1px solid color-mix(in srgb,var(--rule) 44%,transparent);border-radius:18px;box-shadow:0 22px 48px rgba(0,0,0,.18)
}
.wk-page-templates .wk-tpl-hero::after{content:'';position:absolute;right:-5rem;bottom:-7rem;width:19rem;height:19rem;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 3.5rem rgba(255,255,255,.025),0 0 0 7rem rgba(255,255,255,.018);pointer-events:none}
.wk-page-templates .wk-tpl-hero-copy{position:relative;z-index:1;max-width:60rem}
.wk-page-templates .wk-tpl-kicker{display:block;margin-bottom:.8rem;color:color-mix(in srgb,var(--safety) 55%,white);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.wk-page-templates .wk-tpl-hero h1{max-width:14ch;margin:0;color:#fff;font-size:clamp(2.2rem,4vw,4.25rem);font-weight:760;line-height:.96;letter-spacing:-.055em}
.wk-page-templates .wk-tpl-hero p{max-width:52rem;margin:1.1rem 0 0;color:rgba(255,255,255,.7);font-size:clamp(.94rem,1.3vw,1.08rem);line-height:1.6}
.wk-page-templates .wk-tpl-section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin:0 0 1rem}
.wk-page-templates .wk-tpl-section-head>div>span{display:block;margin-bottom:.28rem;color:var(--safety);font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wk-page-templates .wk-tpl-section-head h2{margin:0;color:var(--ink);font-size:1.35rem;letter-spacing:-.025em}
.wk-page-templates .wk-tpl-section-head>p{max-width:42rem;margin:0;color:var(--slate);font-size:.82rem;line-height:1.5;text-align:right}
.wk-page-templates .wk-tpl-team-head{margin-top:3rem;padding-top:2.4rem;border-top:1px solid var(--hairline)}
.wk-page-templates .wk-tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.wk-page-templates .wk-tpl{
  position:relative;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;
  box-shadow:0 2px 3px rgba(0,0,0,.025),0 10px 30px rgba(0,0,0,.04);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.wk-page-templates .wk-tpl:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--safety) 28%,var(--hairline));box-shadow:0 16px 34px rgba(0,0,0,.09)}
.wk-page-templates .wk-tpl-card-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:1.1rem 1.1rem .6rem}
.wk-page-templates .wk-tpl-icon{display:grid;width:44px;height:44px;place-items:center;color:var(--safety);background:linear-gradient(145deg,var(--safety-wash),color-mix(in srgb,var(--surface) 82%,var(--safety-wash)));border:1px solid color-mix(in srgb,var(--safety) 24%,var(--hairline));border-radius:11px;font-size:1.25rem;box-shadow:inset 0 1px rgba(255,255,255,.45)}
.wk-page-templates .wk-tpl-title{min-width:0}
.wk-page-templates .wk-tpl-title>span{display:block;margin-bottom:.16rem;color:var(--slate);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wk-page-templates .wk-tpl-title h2{display:-webkit-box;overflow:hidden;margin:0;color:var(--ink);font-size:1rem;line-height:1.25;letter-spacing:-.02em;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.wk-page-templates .wk-tpl-version{align-self:start;padding:.3rem .46rem;background:var(--surface-sunk);border:1px solid var(--hairline);border-radius:999px;font:700 .75rem/1 var(--font-mono);white-space:nowrap}
.wk-page-templates .wk-tpl-desc{min-height:3.9rem;margin:0;padding:.3rem 1.1rem .9rem;color:var(--slate);font-size:.82rem;line-height:1.5}
.wk-page-templates .wk-tpl-flow{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem 0;margin:0 1.1rem 1rem;padding:.65rem;background:var(--surface-sunk);border-radius:8px}
.wk-page-templates .wk-tpl-flow span{position:relative;min-width:0;padding:0 .55rem;color:var(--graphite);font-size:.75rem;font-weight:700;line-height:1.3}
.wk-page-templates .wk-tpl-flow span:first-child{padding-left:.15rem}
.wk-page-templates .wk-tpl-flow span+span::before{content:'›';position:absolute;left:-.12rem;color:var(--slate)}
.wk-page-templates .wk-tpl-flow .wk-tpl-more{flex:none;color:var(--safety)}
.wk-page-templates .wk-tpl-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 1.1rem 1rem;border:1px solid var(--hairline);border-radius:8px}
.wk-page-templates .wk-tpl-metrics span{display:grid;gap:.2rem;min-width:0;padding:.68rem .45rem;color:var(--slate);font-size:.75rem;font-weight:750;line-height:1.25;text-align:center;text-transform:uppercase}
.wk-page-templates .wk-tpl-metrics span+span{border-left:1px solid var(--hairline)}
.wk-page-templates .wk-tpl-metrics b{color:var(--ink);font:750 .9rem/1 var(--font-mono)}
.wk-page-templates .wk-tpl-inspect{border-top:1px solid var(--hairline)}
.wk-page-templates .wk-tpl-inspect>summary{position:relative;display:grid;gap:.08rem;padding:.78rem 2.3rem .78rem 1.1rem;cursor:pointer;list-style:none}
.wk-page-templates .wk-tpl-inspect>summary::-webkit-details-marker{display:none}
.wk-page-templates .wk-tpl-inspect>summary::after{content:'＋';position:absolute;right:1.1rem;top:50%;color:var(--safety);font-size:1rem;transform:translateY(-50%)}
.wk-page-templates .wk-tpl-inspect[open]>summary::after{content:'−'}
.wk-page-templates .wk-tpl-inspect>summary:hover{background:var(--surface-sunk)}
.wk-page-templates .wk-tpl-inspect>summary>span{color:var(--graphite);font-size:.75rem;font-weight:750}
.wk-page-templates .wk-tpl-inspect>summary>small{color:var(--slate);font-size:.75rem}
.wk-page-templates .wk-tpl-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;padding:.9rem 1.1rem 1.1rem;background:var(--surface-sunk);border-top:1px solid var(--hairline)}
.wk-page-templates .wk-tpl-part{min-width:0}
.wk-page-templates .wk-tpl-part h4{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .35rem;color:var(--slate);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.wk-page-templates .wk-tpl-part h4 b{font:700 .75rem/1 var(--font-mono)}
.wk-page-templates .wk-tpl-list{display:grid;gap:.22rem;margin:0;padding:0;list-style:none}
.wk-page-templates .wk-tpl-list li{min-width:0;overflow:hidden;color:var(--graphite);font-size:.8125rem;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.wk-page-templates .wk-tpl-list .tag{padding:.1rem .34rem;font-size:.75rem}
.wk-page-templates .wk-tpl-uses{margin:0;padding:.75rem 1.1rem;border-top:1px solid var(--hairline);font-size:.8125rem;line-height:1.45}
.wk-page-templates .wk-tpl-actions{display:grid;gap:.6rem;padding:1rem 1.1rem 1.1rem;background:color-mix(in srgb,var(--surface) 94%,var(--surface-sunk));border-top:1px solid var(--hairline)}
.wk-page-templates .wk-tpl-install{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.55rem}
.wk-page-templates .wk-tpl-install label{min-width:0;margin:0}
.wk-page-templates .wk-tpl-install label>span{display:block;margin-bottom:.3rem;color:var(--slate);font-size:.75rem;font-weight:700}
.wk-page-templates .wk-tpl-install input{width:100%;min-width:0;min-height:38px;padding:.48rem .6rem}
.wk-page-templates .wk-tpl-install .btn{min-height:38px;padding-inline:.85rem;white-space:nowrap}
.wk-page-templates .wk-tpl-secondary{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-height:30px}
.wk-page-templates .wk-tpl-team{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(18rem,.7fr);gap:1rem;align-items:start}
.wk-page-templates .wk-tpl-own{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-page-templates .wk-tpl-empty{display:grid;grid-column:1/-1;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:1rem;min-height:13rem;padding:1.4rem;color:var(--slate);background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface-sunk) 78%,var(--surface)));border:1px dashed var(--rule);border-radius:14px}
.wk-page-templates .wk-tpl-empty>span{display:grid;width:48px;height:48px;place-items:center;color:var(--safety);background:var(--safety-wash);border-radius:12px;font-size:1.35rem}
.wk-page-templates .wk-tpl-empty h3{margin:0 0 .35rem;color:var(--ink);font-size:1rem}
.wk-page-templates .wk-tpl-empty p{max-width:42rem;margin:0;font-size:.8rem;line-height:1.5}
.wk-page-templates .wk-tpl-publish{position:sticky;top:1rem;display:grid;gap:.85rem;padding:1.25rem;background:var(--surface);border:1px solid color-mix(in srgb,var(--safety) 24%,var(--hairline));border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.065)}
.wk-page-templates .wk-tpl-publish-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:.7rem}
.wk-page-templates .wk-tpl-publish-head>span{display:grid;width:40px;height:40px;place-items:center;color:#fff;background:linear-gradient(145deg,var(--safety),var(--safety-press));border-radius:10px;box-shadow:0 8px 16px color-mix(in srgb,var(--safety) 25%,transparent)}
.wk-page-templates .wk-tpl-publish-head p{margin:0;color:var(--safety);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wk-page-templates .wk-tpl-publish-head h3{margin:.12rem 0 0;font-size:1rem}
.wk-page-templates .wk-tpl-publish>p{margin:0;color:var(--slate);font-size:.76rem;line-height:1.5}
.wk-page-templates .wk-tpl-publish-fields{display:grid;gap:.7rem}
.wk-page-templates .wk-tpl-publish-fields label{font-size:.75rem}
.wk-page-templates .wk-tpl-publish-fields select,.wk-page-templates .wk-tpl-publish-fields input,.wk-page-templates .wk-tpl-publish-fields textarea{width:100%;min-width:0;margin-top:.28rem}
.wk-page-templates .wk-tpl-publish-fields textarea{resize:vertical}
.wk-page-templates .wk-tpl-publish>.btn{width:100%;justify-content:center;min-height:42px}
.wk-page-templates .wk-tpl-publish>small{color:var(--slate);font-size:.75rem;line-height:1.4;text-align:center}
@media(max-width:1500px){.wk-page-templates .wk-tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-page-templates .wk-tpl-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:980px){.wk-page-templates .wk-tpl-team{grid-template-columns:minmax(0,1fr)}.wk-page-templates .wk-tpl-publish{position:static}.wk-page-templates .wk-tpl-section-head{align-items:start;flex-direction:column;gap:.4rem}.wk-page-templates .wk-tpl-section-head>p{text-align:left}}
@media(max-width:700px){.wk-page-templates .wk-tpl-hero{margin-inline:-.25rem;padding:1.4rem;border-radius:13px}.wk-page-templates .wk-tpl-hero h1{font-size:2.35rem}.wk-page-templates .wk-tpl-grid,.wk-page-templates .wk-tpl-own{grid-template-columns:minmax(0,1fr)}.wk-page-templates .wk-tpl-install{grid-template-columns:minmax(0,1fr)}.wk-page-templates .wk-tpl-install .btn{justify-content:center}.wk-page-templates .wk-tpl-body{grid-template-columns:minmax(0,1fr)}}