/* SparkQuote — Stacked Out brand: charcoal ground, electric yellow #ffdd33 (action/money),
   cyan #3fe3ff (incoming/new), signature gradient on hero moments only */
/* Brand type — self-hosted (ITF Free Font Licence via Fontshare) */
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root{
  --bg:#08090b; --bg2:#0d0f13; --panel:#14161c; --panel2:#1c1f27;
  --line:#272b33; --text:#f5f6f8; --muted:#9aa1ab;
  --amber:#ffdd33; --amber-dk:#c7a70a; --yel:#ffdd33; --yel-ink:#0b0c0e; --green:#34d399; --red:#f87171; --cyan:#3fe3ff; --fab:54px;
  /* v563 notification categories — FILL colours (rails, dots, key swatches).
     Deliberately separate from --amber, which is a text-on-white token and
     renders brown when used as a fill on the paper theme. */
  --nf-money:#34d399; --nf-comms:#3fe3ff; --nf-job:#ffdd33; --nf-sys:#9aa1ab;
  --red-ink:#f87171;   /* red as TEXT (--red is the fill/border colour) */
  --radius:12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font:14px/1.5 'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
}
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:22px; margin:0; letter-spacing:-.3px; }
h2{ font-size:17px; } h3{ font-size:14px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.muted{ color:var(--muted); } .small{ font-size:12px; text-transform:none; letter-spacing:0; }

.shell{ display:flex; min-height:100vh; }

/* soChoose options. Both answers are legitimate, so both must READ as buttons:
   the secondary was .btn (white) on a white modal card with a .14 grey border,
   which looked like a paragraph of text rather than a thing you can press. */
/* Neutral grey at low alpha, NOT var(--panel): under theme-light --panel resolves
   to white, so the secondary option came out white on a white modal card and read
   as a paragraph. A translucent grey darkens a light card and lightens a dark one,
   so both options look pressable in either theme without per-theme overrides. */
.so-choice{ display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  padding:10px 12px; border-radius:9px; border:1px solid rgba(127,127,127,.30);
  background:rgba(127,127,127,.07); color:var(--text); }
.so-choice:hover{ border-color:var(--yel); background:rgba(127,127,127,.15); }
.so-choice:focus-visible{ outline:2px solid var(--teal, #3fe3ff); outline-offset:2px; }
.so-choice .so-choice-t{ font-weight:700; }
.so-choice .so-choice-h{ font-size:11px; opacity:.75; margin-top:2px; }
/* the first option is the safer one, so it carries the brand edge — but only an
   edge, never a fill, so it does not outrank the other by shouting */
.so-choice.primary{ border-color:var(--yel); box-shadow:inset 3px 0 0 var(--yel); }
/* AN IRREVERSIBLE CHOICE MUST NOT WEAR THE SAME CLOTHES AS THE RECOVERABLE ONE.
   MEASURED in the pre-issue dialogue, light theme, before this rule: "Go back and sort
   them" and "Issue it anyway" — the second of which BURNS A STATUTORY CERTIFICATE
   NUMBER — shared background rgba(127,127,127,.07), colour rgb(26,29,35) and 14px/700,
   and the SAFE one carried the stronger border (rgb(22,24,29) against rgb(95,103,116)).
   The emphasis was backwards: the only differentiated option was the one you can undo.
   Sizes were already fine (62.7px and 79.8px, both over the 44px floor), so this is
   about weight, not touch area.

   --c-bad-* are the product's EXISTING destructive tokens and they are theme-aware, so
   no hue is invented and dark is not an afterthought. Deliberately a tinted ground and
   a coloured edge rather than a red FILL: a filled button reads as the recommended
   action, and this one never is. It is opt-in per choice — js/certs.js adds the class
   after soChoose has rendered, the same "decorate what the generator produced" move
   cpvWrapPages makes — so no other dialogue in the product changes. */
.so-choice.danger{
  background:var(--c-bad-bg); color:var(--c-bad-ink);
  box-shadow:inset 3px 0 0 var(--c-bad-dot);
}
.so-choice.danger .so-choice-h{ color:var(--c-ink); opacity:.85; }
/* ⚠ THE BORDER NEEDS THE LONG SELECTOR AND THE SHORT ONE MEASURED AS A SILENT NO-OP.
   The ground, the text and the inset bar above land from (0,2,0), but css/design-c.css
   loads AFTER this file and owns the edge at
   `#so-prompt .so-choice:not(.primary):not(#solar-studio *)` — which is (2,2,0),
   because an #id inside :not() counts (CLAUDE.md §7). Written short, this rule computed,
   applied, and was overruled: measured after the first attempt, the irreversible option
   still reported borderColor rgb(95,103,116) — --c-mut, the WEAKER of the two edges,
   with the recoverable option on rgb(22,24,29). The emphasis stayed backwards on the
   one axis the audit named, while everything else looked fixed.
   :not(.primary) is what buys the third class and takes this to (2,3,0). It is also
   true — the irreversible branch is never the primary — so it is a real condition, not
   a specificity trick wearing one. No !important: source order plus specificity is the
   sanctioned route in this project, and design-c.css's own rules are written this way.
   The hover is matched for the same reason: design-c sends every hovered choice to
   --c-ink, which would flash the destructive edge back to the neutral one under a
   thumb. #B3372E on its own composited ground is 5.41:1 light and 5.64:1 dark. */
#so-prompt .so-choice.danger:not(.primary):not(#solar-studio *),
#so-prompt .so-choice.danger:not(.primary):hover:not(#solar-studio *){
  border-color:var(--c-bad-ink);
}

/* ---------- sidebar ---------- */
.sidebar{
  width:210px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--line);
  padding:20px 12px; display:flex; flex-direction:column; gap:14px;
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
}
.sidebar .logo-row2{ flex-shrink:0; }
/* only the nav list scrolls — logo up top and account/sign-out at the foot stay put */
.sidebar nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
/* 21 menu items do not fit a laptop sidebar once the account card is at the foot,
   so this list scrolls. It always did. What it never did was SAY so: the thumb was
   rgba(255,255,255,.14) on near black, which is invisible, and the account card
   below reads as the end of the page. Jamie reported it as being "locked out" of
   the eight screens that live under the fold — Conversations, Marketing, Social,
   Journeys, Compliance, Money, Business Costs, Settings. Nothing was locked.
   So: fade the last row while there is more below, and make the thumb visible. */
.sidebar nav{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
              mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
.sidebar nav.nav-end{ -webkit-mask-image:none; mask-image:none; }
.sidebar nav::-webkit-scrollbar{ width:7px; }
.sidebar nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.34); border-radius:4px; }
.sidebar nav:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.5); }
.sidebar nav::-webkit-scrollbar-track{ background:transparent; }
@media (prefers-reduced-motion: reduce){ .sidebar nav{ scroll-behavior:auto; } }
.sidebar-foot{ flex-shrink:0; }
.logo{ font-size:19px; font-weight:800; letter-spacing:-.5px; padding:0 8px; }
.logo em{ color:var(--amber); font-style:normal; }
.bolt{ }
.bolt.big{ font-size:34px; }
nav{ display:flex; flex-direction:column; gap:3px; }
.nav-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; color:var(--muted); font:inherit; font-weight:600;
  /* 8px not 10px: 21 buttons, so every 2px is 42px of menu back above the fold.
     Still a 38px target, over the 36px floor the audit set for pointer rows. */
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
.nav-btn:hover{ background:var(--panel); color:var(--text); }
.nav-btn.active{ background:var(--panel2); color:var(--amber); }
.sidebar-foot{ margin-top:auto; font-size:11px; color:var(--muted); padding:8px 4px 4px; line-height:1.6; }
.acct-card{ border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:9px; margin-bottom:10px;
  background:rgba(255,255,255,.03); display:flex; flex-direction:column; gap:7px; }
.acct-who{ display:flex; align-items:center; gap:8px; min-width:0; }
.acct-avatar{ width:26px; height:26px; flex-shrink:0; border-radius:50%; background:var(--amber); color:#08090b;
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.acct-meta{ display:flex; flex-direction:column; min-width:0; }
.acct-email{ font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acct-role{ font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.acct-btn{ width:100%; }
.acct-signout{ width:100%; color:#f87171 !important; border-color:rgba(248,113,113,.4) !important; }
.acct-signout:hover{ background:rgba(248,113,113,.12) !important; }

/* ---------- mobile menu ---------- */
.menu-btn{
  display:none; position:fixed; top:12px; left:12px; z-index:120;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; font-size:20px; padding:8px 13px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.menu-backdrop{
  display:none; position:fixed; inset:0; background:rgba(4,5,7,.6); z-index:98;
}
@media (max-width: 860px){
  .menu-btn{ display:block; }
  .menu-backdrop.open{ display:block; }
  .sidebar{
    position:fixed; left:0; top:0; z-index:99; height:100vh; height:100dvh;
    transform:translateX(-110%); transition:transform .22s ease;
    box-shadow:8px 0 32px rgba(0,0,0,.5); width:240px;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar .logo{ padding-left:60px; }
  main{ padding:16px 14px 90px; }
  .view-head{ padding-left:60px; min-height:44px; }
  .view-head h1{ font-size:19px; }
  .head-actions .btn{ padding:7px 10px; font-size:12px; }
  .job-row{ flex-direction:column; }
  .job-btns{ flex-direction:row; }
  .job-btns .btn{ flex:1; }
  .line{ flex-direction:column; }
  .line-figures{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; text-align:left; }
  .room-actions{ flex-direction:column; align-items:stretch; }
  .ai-panel{ right:10px; left:10px; width:auto; bottom:76px; }
  .ai-fab{ right:14px; bottom:14px; }
  .cq-doc{ padding:20px 16px; }
  .modal{ padding:10px; }
  table.mats th:nth-child(2), table.mats td:nth-child(2){ display:none; } /* hide brand col on phones */
}

/* ---------- main / views ---------- */
main{ flex:1; padding:24px 28px 60px; min-width:0; }
.view{ display:none; } .view.active{ display:block; }
.view-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.lead{ color:var(--muted); max-width:720px; margin-top:-6px; }
.section-h{ margin:22px 0 10px; }

/* ---------- buttons & inputs ---------- */
.btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  font:inherit; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer;
}
.btn:hover{ border-color:var(--amber); }
.btn-amber{ background:var(--amber); border-color:var(--amber); color:#08090b; }
.btn-amber:hover{ background:#ffe566; }
.btn.small{ padding:4px 10px; font-size:12px; }
.btn.full{ width:100%; margin-top:14px; }
.btn.tall{ align-self:stretch; }
.icon-btn{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:4px 6px; border-radius:6px;
}
.icon-btn:hover{ color:var(--red); background:rgba(248,113,113,.1); }
input,select,textarea{
  background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--amber); }
input[type=number]{ width:80px; }
input[type=checkbox]{ width:auto; accent-color:var(--amber); transform:scale(1.2); }
label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:600; }
.suffix{ display:flex; align-items:center; gap:6px; }
.suffix span{ color:var(--muted); }
.suffix.tight input{ width:75px; }
.vat-toggle{ flex-direction:row; align-items:center; gap:10px; }

/* ---------- describe job ---------- */
.job-box{
  background:linear-gradient(135deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px;
}
.job-label{ margin-bottom:8px; color:var(--amber); font-size:13px; }
.job-row{ display:flex; gap:10px; }
.job-row textarea{ flex:1; resize:vertical; }
.job-note{ margin-top:10px; padding:10px 12px; border-radius:8px; font-size:13px; }
.job-note.ok{ background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); }
.job-note.warn{ background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.3); }

/* ---------- quick add ---------- */
.quick-add{ position:relative; margin-bottom:16px; }
.quick-add input{ padding:11px 14px; font-size:14px; }
.quick-results{
  display:none; position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  max-height:380px; overflow:auto; box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.quick-results.open{ display:block; }
.qr-head{ padding:8px 14px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
.qr-item{ padding:9px 14px; cursor:pointer; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.qr-item:hover{ background:var(--panel); }
.qr-badge{ font-size:10px; font-weight:800; background:var(--line); border-radius:4px; padding:2px 5px; color:var(--muted); }
.qr-badge.kit{ background:var(--amber); color:#08090b; }
.qr-sub{ font-size:12px; color:var(--muted); }
.qr-none{ padding:14px; color:var(--muted); }

/* ---------- quote layout ---------- */
.quote-layout{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
@media (max-width:1000px){ .quote-layout{ grid-template-columns:1fr; } }
.quote-lines{ display:flex; flex-direction:column; gap:10px; }
.empty{
  border:2px dashed var(--line); border-radius:var(--radius); text-align:center;
  padding:44px 20px; color:var(--muted);
}
.empty-icon{ font-size:34px; margin-bottom:6px; }

.line{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; display:flex; justify-content:space-between; gap:14px;
}
.line-main{ flex:1; min-width:0; }
.line-title{ font-weight:700; margin-bottom:8px; }
.chip{ font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:1px 7px; border-radius:20px; margin-left:6px; }
.chip-cat{ color:var(--amber); }
.line-controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.line-controls select{ width:auto; max-width:300px; }
.line-unit{ font-size:12px; color:var(--muted); padding-bottom:8px; }
.line-figures{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0;
  font-size:12px; color:var(--muted); text-align:right;
}
.line-figures strong{ color:var(--text); font-size:14px; }
.line-mats{ margin-top:10px; font-size:12px; }
.line-mats summary{ cursor:pointer; color:var(--muted); }
.line-mats table{ width:100%; border-collapse:collapse; margin-top:8px; }
.line-mats th,.line-mats td{ text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); }
.line-mats th{ color:var(--muted); font-size:11px; text-transform:uppercase; }

/* ---------- side panels ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.rates-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tot-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.tot-row.muted{ color:var(--muted); }
.tot-row.small{ font-size:12px; }
.tot-row.subtotal{ border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-weight:700; }
.tot-row.grand{ font-size:17px; font-weight:800; color:var(--amber); border-top:2px solid var(--amber); margin-top:6px; padding-top:10px; }

/* ---------- kits ---------- */
.kit-cat{ margin:26px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--amber); }
.kit-count{ background:var(--panel2); color:var(--muted); border-radius:20px; padding:1px 9px; font-size:11px; margin-left:6px; letter-spacing:0; }
.kit-ico{ margin-right:7px; }
.kit-card{ transition:border-color .12s ease, transform .12s ease; }
.kit-card:hover{ border-color:var(--amber-dk); transform:translateY(-1px); }
.kit-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.kit-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.kit-card.bundle{ border-color:var(--amber-dk); }
.kit-name{ font-weight:700; }
.kit-desc{ font-size:12px; color:var(--muted); flex:1; }
.kit-actions{ display:flex; gap:8px; align-items:center; }
.kit-actions input{ width:64px; }

/* ---------- materials ---------- */
.mat-tools input{ padding:11px 14px; margin-bottom:12px; }
.mat-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.chip-btn{
  background:var(--panel); color:var(--muted); border:1px solid var(--line);
  border-radius:20px; padding:5px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.chip-btn.on{ background:var(--amber); color:#08090b; border-color:var(--amber); }
.chip-btn.tiny{ padding:3px 9px; font-size:11px; border-radius:14px; }   /* v646: compact type-tag chips */
.kit-types{ display:inline-flex; gap:5px; flex-wrap:wrap; }

/* v652: star-a-material-from-anywhere button */
.mat-star{ border:none; background:transparent; cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; color:var(--muted); flex-shrink:0; }
.mat-star:hover{ color:#e8b923; }
.mat-star.on{ color:#f4c518; }

/* v652: material + Build photo capture (add/edit modal, build editor) */
.mn-media, .be-media{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px; }
.be-media{ margin-top:8px; }
.mn-ph, .be-ph{ position:relative; display:inline-block; }
.mn-ph img, .be-ph img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; }
.mn-ph .icon-btn, .be-ph .icon-btn{ position:absolute; top:-6px; right:-6px; background:var(--panel); border:1px solid var(--line); border-radius:50%; width:20px; height:20px; line-height:1; padding:0; }
.mn-ph-load, .be-ph-load{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:8px; border:1px dashed var(--line); color:var(--muted); }
.lm-optin{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-left:4px; }
.lm-optin select{ font:inherit; padding:3px 6px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--text); }
/* the customer-facing showcase photo on the quote document */
.cq-showcase{ max-width:180px; max-height:140px; border-radius:8px; border:1px solid rgba(0,0,0,.08); object-fit:cover; }

/* ===== v648: the Builds library as a big-font list ===== */
.kit-list{ display:flex; flex-direction:column; gap:8px; }
.kit-lrow{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; transition:border-color .12s, transform .05s; }
.kit-lrow:hover{ border-color:var(--amber); }
.kit-lrow:active{ transform:scale(.997); }
.kit-lrow-main{ flex:1; min-width:0; }
.kit-lrow-name{ font-size:19px; font-weight:700; line-height:1.2; }
.kit-lrow-sub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.kit-lrow-meta{ font-size:12px; color:var(--muted); }
.kit-lrow-acts{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
@media (max-width:560px){
  .kit-lrow{ flex-direction:column; align-items:stretch; }
  .kit-lrow-acts{ justify-content:flex-end; }
  .kit-lrow-name{ font-size:18px; }
}

/* ===== v647: the full-screen Build editor (desktop + mobile) ===== */
.be-screen{ position:fixed; inset:0; z-index:1200; background:var(--bg,#08090b); display:none; }
.be-screen.open{ display:block; }
body.be-lock{ overflow:hidden; }
.be-shell{ display:flex; flex-direction:column; height:100%; max-width:820px; margin:0 auto; }
.be-top{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; }
.be-top-title{ font-weight:700; font-size:15px; flex:1; text-align:center; }
.be-back{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:15px; cursor:pointer; }
.be-done{ min-width:74px; }
.be-body{ flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
.be-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.be-name{ width:100%; box-sizing:border-box; font-size:20px; font-weight:700; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); }
.be-head-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.be-lbl{ font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.be-types{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.be-desc{ width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); font:inherit; resize:vertical; }
.be-sel{ padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); font:inherit; }
.be-vars{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:14px; }
.be-vars-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.be-vtab{ padding:6px 12px; border:1px solid var(--line); border-radius:16px; background:var(--bg,#0e0f12); color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.be-vtab.on{ background:var(--amber); color:#08090b; border-color:var(--amber); }
.be-vadd{ border-style:dashed; }
.be-var-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
.be-hours{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.be-suf{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:8px; padding:2px 8px; background:var(--bg,#0e0f12); }
.be-suf input{ border:none; background:transparent; color:var(--text); font:inherit; width:64px; }
.be-mini{ width:74px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg,#0e0f12); color:var(--text); font:inherit; }
.be-matwrap-h{ font-weight:700; margin-bottom:8px; }
.be-mats{ width:100%; border-collapse:collapse; }
.be-mats th{ text-align:left; font-size:11px; color:var(--muted); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line); }
.be-mats td{ padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.be-mat-name{ font-weight:600; }
.be-mat-sub{ display:block; font-size:11px; color:var(--muted); font-weight:400; }
.be-mat-zero{ opacity:.5; }
.be-opt-chip{ font-size:10px; font-weight:600; padding:1px 6px; border-radius:8px; background:var(--line); color:var(--muted); }
.be-optsep td{ font-size:12px; color:var(--muted); background:var(--panel); font-weight:600; }
.be-empty-row{ color:var(--muted); padding:14px 6px; }
.be-addmat{ margin-top:10px; }
.be-picker{ margin-top:10px; border:1px solid var(--line); border-radius:11px; padding:10px; background:var(--panel); }
.be-picker-ctrl{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; align-items:center; }
.be-search{ width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--bg,#0e0f12); color:var(--text); font:inherit; }
.be-picker-list{ max-height:300px; overflow-y:auto; margin-top:8px; }
.be-prow{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 10px; border:none; border-bottom:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; }
.be-prow:hover{ background:var(--bg,#0e0f12); }
.be-prow-main{ flex:1; display:flex; flex-direction:column; }
.be-prow-main span{ font-size:11px; color:var(--muted); }
.be-prow-add{ font-size:16px; color:var(--amber); }
body.theme-light .be-screen{ background:#f7f7f4; }
body.theme-light .be-name, body.theme-light .be-desc, body.theme-light .be-sel, body.theme-light .be-mini, body.theme-light .be-suf, body.theme-light .be-search, body.theme-light .be-vtab{ background:#fff; color:#16181d; }
table.mats{ width:100%; border-collapse:collapse; background:var(--panel); border-radius:var(--radius); overflow:hidden; }
table.mats th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel2);
}
table.mats td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.mats td.links a{ margin-right:8px; font-size:12px; }
.ov-reset{ background:none; border:none; color:var(--amber); cursor:pointer; font-size:14px; }

/* ---------- saved ---------- */
.saved-row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; flex-wrap:wrap;
}
.saved-actions{ display:flex; gap:10px; align-items:center; }
.saved-total{ font-weight:800; color:var(--amber); }

/* ---------- settings ---------- */
.settings-form{ max-width:760px; }
.settings-form h3{ margin-top:26px; }
.set-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:14px; }
label.wide{ margin-bottom:14px; }
.set-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- modals ---------- */
.modal{
  display:none; position:fixed; inset:0; background:rgba(4,5,7,.75); z-index:100;
  padding:24px; overflow:auto;
}
.modal.open{ display:flex; align-items:flex-start; justify-content:center; }
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px; width:100%; max-width:440px; margin-top:4vh;
  display:flex; flex-direction:column; gap:12px;
}
.modal-card.wide{ max-width:820px; background:var(--bg2); }
/* ---------- certificate Preview popout — full A4, actions on the bar ---------- */
.modal-card.cert-preview{ max-width:1000px; width:96vw; height:94vh; margin-top:3vh; padding:16px 16px 10px; }
.modal-card.cert-preview .cpv-head{ align-items:center; flex-wrap:nowrap; gap:14px; }
.modal-card.cert-preview .cpv-head h2{ font-size:18px; white-space:nowrap; }
.cpv-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1; }
.cpv-badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
  padding:5px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--muted); }
/* v820 · MEASURED AT 2.88:1 IN THE LIGHT THEME AND IT IS THE "✓ Issued" BADGE.
   #1fa855 is a saturated green on a near-white chip; composited against the ground it
   actually renders on (rgb(247,247,244)) it came out 2.88:1 at 12px/700, which is not
   WCAG large text, so the threshold is 4.5:1 and it missed by a mile. Dark was fine at
   6.44:1. --c-ok-ink is the closed palette's TEXT green and it already carries a
   correct value in both themes (#04785C light, #3ECF8E dark) — this is the drift §7
   warns about, an older literal sitting next to a token that exists. The dot colour
   --c-ok-dot stays the saturated one for the border, where contrast is not the test. */
.cpv-badge.ok{ color:var(--c-ok-ink); border-color:color-mix(in srgb,var(--c-ok-dot) 40%,var(--line)); }
.modal-card.cert-preview #certprint-doc{ flex:1; min-height:0; overflow:auto; margin-top:4px;
  background:var(--bg); border-radius:12px; padding:16px 0; }
#cpv-status{ font-weight:600; }
#cpv-status:empty{ display:none; }
@media (max-width:640px){
  .modal-card.cert-preview{ width:100vw; height:100vh; margin-top:0; border-radius:0; }
  .modal-card.cert-preview .cpv-head{ flex-wrap:wrap; gap:8px; }
  .cpv-actions{ justify-content:flex-start; }
}
.ob-head{ text-align:center; }
.ob-head h2{ margin:8px 0 4px; }
.ob-head p{ color:var(--muted); margin:0; font-size:13px; }
.ob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-toolbar{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.cq-fields{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; }
.cq-fields input{ width:200px; }

/* ---------- customer quote document ---------- */
.cq-doc{
  background:#fff; color:#16181d; border-radius:10px; padding:36px 40px;
  font-size:13px; line-height:1.55;
}
/* v799: this border-bottom was #ffdd33 — ours. It is DEAD as the sheet stands
   (the v313 block far below sets border-bottom:none !important on the same
   selector, verified in a browser: computed border-bottom is "none 0px"), but a
   dead declaration is one deleted !important away from being live, and it was
   our brand sitting in the customer document's own stylesheet. Same tokens as
   the live rule so the two can never disagree again. */
.cq-head{ display:flex; justify-content:space-between; gap:20px; border-bottom:3px solid var(--cqa2,var(--cqa,#16181d)); padding-bottom:16px; margin-bottom:16px; }
.cq-biz{ font-size:21px; font-weight:800; letter-spacing:-.3px; }
.cq-contact{ color:#5c636d; font-size:12px; margin-top:4px; }
.cq-meta{ text-align:right; color:#5c636d; font-size:12px; }
.cq-meta strong{ color:#16181d; font-size:14px; letter-spacing:2px; }
.cq-customer{ margin-bottom:16px; }
.cq-lab{ color:#5c636d; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.cq-addr{ color:#5c636d; white-space:pre-line; }
.cq-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.cq-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#5c636d; border-bottom:2px solid #e6e8eb; padding:8px 6px; }
.cq-table td{ padding:9px 6px; border-bottom:1px solid #eef0f2; vertical-align:top; }
.cq-table .r{ text-align:right; }
.cq-sub{ font-size:11px; color:#9aa1ab; }
.cq-totals{ margin-left:auto; width:260px; }
.cq-totals > div{ display:flex; justify-content:space-between; padding:4px 0; }
.cq-grand{ font-weight:800; font-size:16px; border-top:2px solid #16181d; margin-top:6px; padding-top:8px !important; }
.cq-terms{ margin-top:26px; padding-top:14px; border-top:1px solid #e6e8eb; color:#9aa1ab; font-size:11px; }

/* ---------- rooms ---------- */
.btn-select{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  font:inherit; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer; width:auto;
}
.btn-select:hover{ border-color:var(--amber); }
.room-empty{
  border:1px dashed var(--line); border-radius:10px; padding:14px 16px;
  color:var(--muted); font-size:13px; margin:6px 0;
}
.room-block{ border-radius:12px; }
.room-block.drag-over{ outline:2px dashed var(--amber); outline-offset:4px; }
.drag-handle{ cursor:grab; color:var(--muted); margin-right:2px; user-select:none; }
.room-head[draggable]{ cursor:grab; }
.room-head[draggable]:active{ cursor:grabbing; }
.room-tots .icon-btn{ margin-left:2px; }
.add-room-row.top{ margin:0 0 12px; }
.room-actions{ display:flex; gap:10px; align-items:center; margin:6px 0 4px; }
.room-actions .btn{ flex-shrink:0; }
.room-actions .quick-add{ flex:1; margin:0; }
.add-room-row{ margin-top:16px; }
.room-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.fin-opt{ font-size:14px; padding:10px 16px; }
.room-custom{ display:flex; gap:8px; }
.bp-list{ max-height:62vh; overflow:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.bp-cat{ margin:10px 0 2px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--amber); font-weight:800; }
.bp-row{
  display:grid; grid-template-columns:1fr 230px 60px auto; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 12px;
}
@media (max-width:760px){ .bp-row{ grid-template-columns:1fr; } }
.bp-name{ font-weight:700; font-size:13px; }
.bp-desc{ font-weight:400; font-size:11px; color:var(--muted); }
.bp-row input{ width:60px; }
.btn.added{ background:var(--green); border-color:var(--green); color:#06281c; }
.room-qa{ margin:6px 0 4px; }
.room-qa input{ padding:8px 12px; font-size:13px; border-style:dashed; background:transparent; }
.room-qa input:focus{ background:var(--bg); border-style:solid; }
.room-tots .icon-btn{ margin-left:6px; }
.room-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin:26px 0 6px; padding:11px 14px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--amber) 16%, var(--panel2)), var(--panel2) 65%);
  border-left:5px solid var(--amber); border-radius:8px;
  border-top:1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
}
.room-head:first-child{ margin-top:0; }
.room-name{ font-weight:800; font-size:17px; letter-spacing:.4px; color:var(--amber); }
.room-tots{ font-size:12px; color:var(--muted); }
.room-sel{ max-width:160px; }
.cq-room td{
  background:#f4f5f7; font-weight:800; font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color:#16181d; padding:7px 6px !important;
}

/* ---------- voice note ---------- */
.job-btns{ display:flex; flex-direction:column; gap:8px; justify-content:stretch; }
.job-btns .btn{ white-space:nowrap; }
.btn.mic.rec{
  background:rgba(248,113,113,.15); border-color:var(--red); color:var(--red);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(248,113,113,.35);} 50%{ box-shadow:0 0 0 7px rgba(248,113,113,0);} }

/* ---------- optional (qty 0) materials ---------- */
tr.zero-row td{ opacity:.5; }
tr.zero-row input.mini{ border-style:dashed; opacity:1; }
.chip-opt{ color:var(--amber); border-color:var(--amber-dk); }
.line-desc{ margin-top:10px; }
.line-desc label{ margin-bottom:5px; }
.line-desc textarea{ font-size:12px; }

/* ---------- category separators (materials) ---------- */
tr.cat-sep td{
  background:var(--panel2); border-top:2px solid var(--amber-dk); border-bottom:1px solid var(--line);
  padding:9px 12px !important;
}
tr.cat-sep span{
  color:var(--amber); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:1.2px;
}
tr.cat-sep em{ float:right; font-style:normal; font-size:11px; color:var(--muted); }

/* ---------- editable recipes ---------- */
input.mini{ width:70px; padding:4px 8px; font-size:12px; }
.kit-edit{ font-size:12px; }
.kit-edit summary{ cursor:pointer; color:var(--muted); font-weight:600; }
.kit-edit summary:hover{ color:var(--amber); }
.ke-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.ke-table th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); padding:4px 6px; border-bottom:1px solid var(--line); }
.ke-table td{ padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ke-foot{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ke-hours{ flex-direction:row; align-items:center; gap:8px; }
.ke-edited{ color:var(--amber); font-size:11px; font-weight:700; }
tr.add-row td{ padding:6px; }
tr.add-row input{ font-size:12px; padding:6px 10px; border-style:dashed; }
tr.add-row input::placeholder{ color:var(--muted); }
.line-mats td .suffix.tight input{ width:70px; }

/* ---------- essentials batch ---------- */
.test-block{
  margin-top:14px; padding:12px; border:1px dashed var(--amber-dk); border-radius:10px;
}
.test-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--amber); margin-bottom:10px; }
.more-rates{ margin-top:12px; font-size:12px; }
.more-rates summary{ cursor:pointer; color:var(--muted); font-weight:700; margin-bottom:10px; }
.more-rates summary:hover{ color:var(--amber); }
tr.cert-row td{ background:rgba(255,221,51,.04); }
.chip-cert{ color:var(--green); border-color:rgba(52,211,153,.4); }
.status-sel{ width:auto; font-size:12px; padding:4px 8px; font-weight:700; }
.status-sel.st-accepted{ color:var(--green); border-color:rgba(52,211,153,.5); }
.status-sel.st-sent{ color:var(--amber); border-color:var(--amber-dk); }
.status-sel.st-declined{ color:var(--red); border-color:rgba(248,113,113,.4); }
.logo-row{ display:flex; align-items:center; gap:12px; margin:10px 0 14px; }
.logo-prev{ max-height:56px; max-width:200px; background:#fff; border-radius:8px; padding:6px; }
.cq-head-left{ display:flex; align-items:center; gap:16px; }
.cq-logo{ max-height:64px; max-width:180px; }
.cq-section{ margin-top:14px; font-size:12px; color:#3f444d; }
.cq-section .cq-lab{ display:block; margin-bottom:2px; }

/* ---------- business costs ---------- */
.cost-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:24px; }
.cost-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.cost-card.amber{ border-color:var(--amber-dk); }
.cost-card.green{ border-color:rgba(52,211,153,.5); }
.cc-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.cc-label input.mini{ width:52px; padding:2px 6px; }
.cc-val{ font-size:22px; font-weight:800; letter-spacing:-.4px; }
.cost-card.amber .cc-val{ color:var(--amber); }
.cost-card.green .cc-val{ color:var(--green); }
.cc-sub{ font-size:11px; color:var(--muted); margin-top:4px; }
.cc-sub .ok{ color:var(--green); } .cc-sub .warn{ color:var(--amber); } .cc-sub .bad{ color:var(--red); }
.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-bottom:10px; }
.staff-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.staff-head{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.staff-name{ font-weight:800; width:auto; flex:1; }
.staff-head select{ width:auto; }
.staff-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.staff-result{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.staff-result strong{ color:var(--amber); }
.add-staff{ align-self:start; }
.ovh-cat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px 14px; margin-bottom:12px; }
.ovh-cat-head{ display:flex; justify-content:space-between; font-weight:800; margin-bottom:8px; }
.ovh-cat-head span:last-child{ color:var(--amber); }
.ovh-table{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.ovh-table td{ padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ovh-name{ font-size:13px; }
.ovh-table select{ width:auto; font-size:12px; padding:5px 8px; }
.profit-panel{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.profit-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:6px; }
.profit-title a{ text-transform:none; letter-spacing:0; font-weight:600; }
.profit-row{ font-weight:800; }
.profit-row.ok span:last-child{ color:var(--green); }
.profit-row.warn span:last-child{ color:var(--amber); }
.profit-row.bad span:last-child{ color:var(--red); }
.profit-alert{ margin-top:8px; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:700;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color:var(--red); }
.profit-alert.warn{ background:rgba(255,221,51,.08); border-color:var(--amber-dk); color:var(--amber); }

/* ---------- autosave / undo ---------- */
.autosave{
  font-size:11px; font-weight:700; color:var(--green); align-self:center;
  padding:4px 10px; border:1px solid rgba(52,211,153,.3); border-radius:20px; opacity:.75;
}
.autosave.pulse{ animation:aspulse .8s ease; }
@keyframes aspulse{ 0%{ background:rgba(52,211,153,.25); opacity:1; } 100%{ background:transparent; opacity:.75; } }
.undo-btn{ padding:8px 11px; font-size:15px; }
.undo-btn:disabled{ opacity:.3; cursor:default; }
.line-save-bundle{ margin-top:10px; color:var(--muted); }
.line-save-bundle:hover{ color:var(--amber); }

/* ---------- jobs & documents ---------- */
.job-chip{ display:flex; align-items:center; gap:10px; margin:-6px 0 14px; flex-wrap:wrap; }
.job-chip-badge{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:13px; }
/* v371: live "who's on this job" avatars */
.rt-onjob{ display:inline-flex; align-items:center; padding-left:6px; }
.rt-av{ width:23px; height:23px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff; border:2px solid var(--bg); margin-left:-6px; letter-spacing:.02em;
  box-shadow:0 1px 3px rgba(0,0,0,.25); }
.status-pill{
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px;
  color:var(--pc,#9aa1ab); border:1px solid; background:transparent;
}
.dash-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
/* ---------- certificate editor top bar — one premium, uniform action row ---------- */
.cert-topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px 16px; flex-wrap:wrap; margin-bottom:16px; }
.ct-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.ct-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* every control in the bar is the exact same height, padding and shape */
.cert-topbar .btn{ height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 16px; font-size:13px; font-weight:600; border-radius:10px; white-space:nowrap; }
.cert-topbar .btn-amber{ font-weight:700; }
.ct-id{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; font-size:13px; }
.ct-id-ico{ font-size:15px; line-height:1; }
.ct-id strong{ font-weight:800; }
.ct-id-name{ color:var(--muted); font-weight:500; }
/* status + flags sit at the same height but read as status, not buttons */
.cert-topbar .autosave{ border:none; background:none; padding:0 4px; margin:0; opacity:.75;
  height:40px; display:inline-flex; align-items:center; font-size:12px; }
.ct-flag{ display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; }
@media (max-width:820px){
  .ct-id-name{ display:none; }   /* keep the number, drop the long title when space is tight */
  .cert-topbar .autosave{ display:none; }
}
.actions-panel{ background:var(--panel); border:1px solid var(--amber-dk); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; }
.ap-title{ font-weight:800; color:var(--amber); font-size:13px; margin-bottom:8px; }
.ap-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
.ap-row span:last-child{ display:flex; gap:6px; }
.job-row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:8px; flex-wrap:wrap;
}
.job-main{ display:flex; align-items:center; gap:12px; cursor:pointer; flex:1; min-width:220px; }
.job-ico{ font-size:22px; }
.job-side{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.job-val{ font-weight:800; color:var(--amber); min-width:80px; text-align:right; }
.nj-types{ display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:8px; margin:8px 0 4px; }
.nj-type{
  background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--text);
  font:inherit; font-size:12px; font-weight:600; padding:10px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.nj-type span{ text-align:center; line-height:1.2; }
.nj-type:hover{ border-color:var(--amber-dk); }
.nj-type.on{ border-color:var(--amber); background:rgba(255,221,51,.08); }
/* The certificate picker is a decision, not just a list of abbreviations. Keep
   this scoped: .nj-type is also used by the job-type and quote builders. */
.cert-type-picker{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.cert-type-picker .nj-type{ align-items:flex-start; min-height:122px; padding:12px; text-align:left; }
.cert-type-picker .cert-type-name{ font-weight:700; text-align:left; }
.cert-type-picker .cert-type-use{ color:var(--muted); font-size:12px; font-weight:500; line-height:1.4; text-align:left; }
#doc-extras{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.doc-extra-field{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:600; flex-wrap:wrap; }
.doc-extra-field.wide{ flex-direction:column; align-items:stretch; }
.doc-extra-field textarea{ font-size:12px; }
.photo-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.photo-thumb{ position:relative; }
.photo-thumb img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
/* video tiles ride the same grids as photos (remote-survey walkthroughs) */
video.ph-vid{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#000; cursor:pointer; }
.pt-photo video.ph-vid{ width:100%; height:auto; aspect-ratio:1; border-radius:10px; display:block; }
video.ph-vid:fullscreen{ object-fit:contain; }
.photo-thumb button{
  position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; border:none;
  border-radius:50%; width:20px; height:20px; font-size:11px; cursor:pointer;
}
.photo-add{
  width:72px; height:72px; border:2px dashed var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--muted); cursor:pointer;
}
.photo-add:hover{ border-color:var(--amber); color:var(--amber); }
.cq-summary{ font-size:13px; line-height:1.7; margin:6px 0 16px; color:#2b2f38; }
.cq-deposit{
  margin-top:16px; padding:12px 14px; background:#fdf6e3; border:1px solid #f0d48a;
  border-radius:8px; font-size:13px; color:#5a4a12;
}
.cq-photo-grid{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cq-photo-grid img{ width:150px; height:112px; object-fit:cover; border-radius:6px; border:1px solid #e6e8eb; }

/* ---------- AI assistant ---------- */
.ai-fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:var(--fab); height:var(--fab); border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(13,15,20,.82); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  color:var(--amber); cursor:pointer; font:inherit;
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ai-fab svg{ width:24px; height:24px; }
.ai-fab:hover{ background:rgba(13,15,20,1); transform:translateY(-2px); border-color:rgba(255,255,255,.26); box-shadow:0 6px 22px rgba(255,221,51,.34); }
.ai-panel{
  display:none; position:fixed; right:22px; bottom:84px; z-index:95;
  width:400px; max-width:calc(100vw - 44px); height:560px; max-height:calc(100vh - 120px);
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.55); overflow:hidden;
}
.ai-panel.open{ display:flex; }
.ai-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line); font-weight:800; background:var(--panel2);
}
.ai-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.ai-msg{ max-width:88%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; }
.ai-user{ align-self:flex-end; background:var(--amber); color:#08090b; border-bottom-right-radius:4px; }
.ai-assistant{ align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px; }
.ai-chip{
  align-self:flex-start; background:none; border:1px dashed var(--line);
  color:var(--muted); font-size:11px; padding:4px 10px; border-radius:20px;
}
.ai-note{ align-self:center; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
.ai-note.warn{ border-color:rgba(248,113,113,.4); color:var(--red); }
.ai-note a{ color:var(--amber); }
.ai-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--panel2); }
.ai-input textarea{ flex:1; resize:none; font-size:13px; }
.ai-dots::after{ content:'…'; animation:aidots 1.2s steps(4) infinite; }
@keyframes aidots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
@media print{ .ai-fab, .ai-panel{ display:none !important; } }

/* ---------- print: customer quote only ---------- */
@media print{
  body *{ visibility:hidden; }
  .modal.open, .modal.open *{ visibility:visible; }
  .no-print, .no-print *{ visibility:hidden !important; display:none !important; }
  .modal{ position:static; padding:0; background:#fff; overflow:visible; }
  .modal-card{ border:none; background:#fff; padding:0; max-width:none; margin:0; }
  .cq-doc{ border-radius:0; padding:10mm 8mm; }
  @page{ size:A4; margin:12mm; }
}

/* markup override — item or line no longer following the quote-wide % */
input.mk-ov{ border-color:var(--amber); color:var(--amber); font-weight:600; }

/* ---------- calendar view ---------- */
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.cal-dow div{ padding:0 6px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{ background:var(--panel); border:1px solid var(--line); border-radius:8px;
  min-height:86px; padding:4px 5px; overflow:hidden; }
.cal-cell.cal-out{ opacity:.38; }
.cal-cell.cal-today{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.cal-daynum{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.cal-today .cal-daynum{ color:var(--amber); font-weight:700; }
.cal-ev{ font-size:11px; line-height:1.25; background:color-mix(in srgb, var(--pc, #34d399) 22%, var(--panel));
  border-left:3px solid var(--pc, #34d399); border-radius:4px; padding:2px 5px; margin-bottom:3px;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev:hover{ background:color-mix(in srgb, var(--pc, #34d399) 38%, var(--panel)); }
.cal-ev-soft{ opacity:.6; border-left-style:dashed; }
@media (max-width:720px){
  .cal-grid, .cal-dow{ gap:3px; }
  .cal-cell{ min-height:64px; padding:3px 3px; }
}

/* ---------- customers view ---------- */
.cust-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; }
.cust-card summary{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; cursor:pointer; list-style:none; }
.cust-card summary::-webkit-details-marker{ display:none; }
.cust-card[open] summary{ border-bottom:1px solid var(--line); }
.cust-body{ padding:12px 14px; }
.cust-site{ display:flex; gap:8px; margin-bottom:6px; }
.cust-site .cs-label{ width:180px; flex-shrink:0; }
.cust-site .cs-addr{ flex:1; }
.site-sel{ max-width:220px; }
#nj-cust-badge:empty, #nj-site-wrap:empty{ display:none; }

/* customer details card on the open job */
.job-chip{ display:block; }
.job-chip-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.job-cust{ display:grid; grid-template-columns:repeat(4, minmax(140px,1fr)); gap:10px; align-items:end;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-top:10px; }
.job-cust.hide{ display:none; }
.job-cust label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.job-cust input, .job-cust select{ width:100%; }
.job-cust .jc-addr{ grid-column:span 2; }
.job-cust a.btn{ justify-self:start; }
@media (max-width:900px){ .job-cust{ grid-template-columns:1fr 1fr; } .job-cust .jc-addr{ grid-column:1/-1; } }

/* kit management + AI kit builder */
.kit-name{ display:flex; align-items:center; gap:6px; }
.kit-name .kit-tools{ margin-left:auto; display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.kit-card:hover .kit-tools{ opacity:1; }
.kit-card.kit-mine{ border-color:var(--amber-dk); }
#kb-desc{ width:100%; margin-top:6px; }
#kb-mic.rec{ border-color:var(--red); color:var(--red); }
@media (hover:none){ .kit-name .kit-tools{ opacity:1; } }

/* ---------- certificates ---------- */
.cert-sec{ margin-bottom:14px; }
.cert-sec label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.cert-sec textarea{ width:100%; }
/* v821 — A LIMIT, UNDER THE BOX, IN WORDS. The Ze field carried its typical
   maximum as PLACEHOLDER text, which put the pass mark inside the box that holds
   the meter reading (see zeLimitNote in js/certs.js). The figure stays, out here,
   where it cannot be mistaken for an answer.
   ⚠ NO BORDER AND NO POINTER, DELIBERATELY. .ckt-lim next door is a dashed,
   clickable control because filling the Max Zs DESIGN column with the tabulated
   limit is usually the right record. This is a measured value, so there is
   nothing to fill and nothing here may look pressable — a control that appears
   must work (DESIGN_SPEC §8), and the honest way to satisfy that is not to
   appear to be one. 11px against .cert-sec label's 12px keeps it subordinate to
   the field's own name while staying legible; --muted is the label's own ink, so
   it is the same reading contrast as the word "Ze" above it, not ghost text. */
.cert-lim{ display:block; margin-top:2px; font-size:11px; line-height:1.35; color:var(--muted); }
/* The circuit schedule scrolls sideways (it's a wide legal grid), but must NOT
   trap vertical scroll: setting only overflow-x:auto makes the browser compute
   overflow-y:auto too, turning the table into a nested scroll container that eats
   an up-swipe on a phone — so tapping into a circuit dumped you at the bottom of
   a long cert and you could not scroll back up. overflow-y:clip keeps the sideways
   scroll while letting the PAGE own vertical scroll (hidden fallback for old kit). */
.cert-tbl-wrap{ overflow-x:auto; overflow-y:hidden; overflow-y:clip; }
.cert-table{ width:100%; border-collapse:collapse; font-size:12px; }
.cert-table th{ text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:4px 4px; white-space:nowrap; }
.cert-table td{ padding:2px 3px; }
.cert-table input, .cert-table select{ padding:4px 6px; font-size:12px; }
.c-xs{ width:46px; } .c-s{ width:70px; } .c-desc{ min-width:150px; width:100%; }
.mini-sel{ font-size:12px; padding:6px 8px; }
.obs-row{ display:flex; gap:6px; margin-bottom:6px; align-items:center; flex-wrap:wrap; }
.obs-code{ width:66px; font-weight:700; }
.obs-C1{ color:#f87171; border-color:#f87171; } .obs-C2{ color:#f97316; border-color:#f97316; }
.obs-C3{ color:#ffdd33; } .obs-FI{ color:#3fe3ff; }
.obs-txt{ flex:2; min-width:200px; } .obs-loc{ flex:1; min-width:110px; } .obs-reg{ width:90px; }
.cert-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cp-wrap{ position:relative; } .cp-wrap img{ width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.cp-wrap .icon-btn{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,.55); }
/* v622: a photo not yet on this device (synced from another, or captured offline) */
.cp-missing{ display:inline-flex; align-items:center; justify-content:center; min-width:96px; min-height:96px; padding:8px; text-align:center; font-size:11px; line-height:1.3; color:var(--muted); background:var(--bg-soft,rgba(127,127,127,.08)); border:1px dashed var(--line); border-radius:8px; }

/* v624: quote templates hub (modal + cards) + template-edit banner */
.qtpl-modal{ position:fixed; inset:0; z-index:9000; background:rgba(10,12,16,.55); backdrop-filter:blur(3px);
  display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.qtpl-modal.open{ display:flex; }
.qtpl-sheet{ background:var(--card,#fff); color:var(--ink,#1b2027); border:1px solid var(--line); border-radius:16px;
  width:min(920px,100%); box-shadow:0 24px 60px -20px rgba(0,0,0,.5); padding:22px 24px 26px; }
.qtpl-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.qtpl-title{ margin:0; font-size:22px; font-weight:750; letter-spacing:-.01em; }
.qtpl-sub{ margin:4px 0 0; color:var(--muted); font-size:13.5px; max-width:60ch; }
.qtpl-x{ margin-left:auto; }
.qtpl-toolbar{ display:flex; align-items:center; gap:10px; margin:6px 0 16px; flex-wrap:wrap; }
.qtpl-search{ flex:1; min-width:180px; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg-soft,rgba(127,127,127,.06)); color:inherit; font-size:14px; }
.qtpl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.qtpl-card{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--bg-soft,rgba(127,127,127,.04));
  display:flex; flex-direction:column; gap:8px; }
.qtpl-card-top{ display:flex; align-items:center; gap:8px; }
.qtpl-card-name{ font-size:15px; line-height:1.25; flex:1; }
.qtpl-chip{ font-size:10.5px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted);
  background:var(--line); padding:2px 7px; border-radius:20px; white-space:nowrap; }
.qtpl-card-meta{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.qtpl-card-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.qtpl-card-acts .btn.small{ padding:5px 9px; }
.qtpl-del{ margin-left:auto; color:#d1483f; }
.qtpl-empty{ grid-column:1/-1; padding:34px 20px; text-align:center; color:var(--muted); font-size:14px; line-height:1.5;
  border:1px dashed var(--line); border-radius:12px; }
.qtpl-foot{ margin:16px 0 0; }
.qtpl-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px;
  border:1px solid var(--amber,#e8920c); border-left:4px solid var(--amber,#e8920c);
  background:var(--amber-soft,rgba(232,146,12,.1)); border-radius:10px; font-size:14px; }
.qtpl-banner-tag{ font-weight:700; color:var(--amber-ink,#8a5406); font-size:12.5px; letter-spacing:.02em; }
@media (max-width:560px){ .qtpl-sheet{ padding:18px 16px 22px; } .qtpl-grid{ grid-template-columns:1fr; } }
/* v632: the Quote page's template-library HOMEPAGE (reuses .qtpl-grid / .qtpl-card).
   When #view-quote has .lib-on, the library shows and the builder chrome is hidden. */
#quote-lib{ display:none; }
#view-quote.lib-on #quote-lib{ display:block; }
#view-quote.lib-on #job-rail,
#view-quote.lib-on #job-chip,
#view-quote.lib-on #job-sheet,
#view-quote.lib-on .view-head{ display:none !important; }
.qlib{ max-width:1100px; margin:0 auto; padding:8px 4px 40px; }
.qlib-head{ margin:6px 2px 16px; }
.qlib-title{ margin:0 0 4px; }
.qlib-sub{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; max-width:60ch; }
.qlib-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 2px 18px; }
.qlib-actions .qtpl-search{ min-width:180px; }
@media (max-width:560px){ .qlib-actions .qtpl-search{ width:100%; } }
/* v626: hub tabs + attachments library + customer-doc attachments */
.qtpl-tabs{ display:flex; gap:6px; margin:0 0 14px; border-bottom:1px solid var(--line); }
.qtpl-tab{ appearance:none; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:8px 14px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border-radius:8px 8px 0 0; }
.qtpl-tab:hover{ color:var(--ink); }
.qtpl-tab.active{ color:var(--ink); border-bottom-color:var(--amber,#e8920c); }
.qa-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.qa-card{ border:1px solid var(--line); border-radius:12px; padding:8px; background:var(--bg-soft,rgba(127,127,127,.04)); display:flex; flex-direction:column; gap:6px; }
.qa-card a{ display:block; }
.qa-thumb{ width:100%; height:104px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:var(--card); display:flex; align-items:center; justify-content:center; }
.qa-thumb-doc, .qa-thumb-link{ font-size:22px; color:var(--muted); }
.qa-card-name{ font-size:12.5px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qa-card-acts{ display:flex; flex-wrap:wrap; gap:5px; }
.qa-card-acts .btn.small{ padding:4px 8px; font-size:11.5px; }
@media (max-width:560px){ .qa-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } }
.cq-atts-grid{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.cq-att-fig{ margin:0; display:flex; flex-direction:column; gap:4px; max-width:180px; }
.cq-att-img{ width:180px; max-width:100%; height:auto; border-radius:8px; border:1px solid var(--line); }
.cq-att-fig figcaption{ font-size:11px; color:var(--muted); }
.cq-att-link{ display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:13px; }
/* v627: AI price-check review panel */
.ai-rows{ display:flex; flex-direction:column; gap:2px; max-height:56vh; overflow:auto; margin:4px 0 14px; }
.ai-row{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-top:1px solid var(--line-2,rgba(127,127,127,.12)); }
.ai-row:first-child{ border-top:none; }
.ai-row.off{ opacity:.42; }
.ai-row-tick{ display:flex; align-items:center; }
.ai-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.ai-row-name{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-src{ font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.ai-src-book{ background:var(--green-soft,rgba(46,158,107,.14)); color:var(--green-ink,#1c6b47); }
.ai-src-ai{ background:var(--amber-soft,rgba(232,146,12,.14)); color:var(--amber-ink,#8a5406); }
.ai-src-warn{ background:var(--red-soft,rgba(209,72,63,.12)); color:var(--red-ink,#96271f); }
.ai-range{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ai-row-links{ display:flex; gap:6px; flex-wrap:wrap; }
.ai-merch{ font-size:11.5px; padding:2px 8px; border:1px solid var(--line); border-radius:20px; text-decoration:none; color:var(--muted); }
.ai-merch:hover{ color:var(--ink); border-color:var(--muted); }
.ai-row-price{ display:flex; align-items:center; gap:3px; }
.ai-row-price input{ width:76px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; background:var(--bg-soft,rgba(127,127,127,.06)); color:inherit; text-align:right; font-variant-numeric:tabular-nums; }
.ai-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--line); }
/* the saved board-scan reference photos, and their tap-to-view lightbox */
.ckt-scan-photos{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:2px 0 8px; }
.ckt-scan-photos .cp-wrap img{ cursor:zoom-in; }
.cert-img-ov{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
.cert-img-ov img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.cert-img-x{ position:absolute; top:14px; right:16px; font-size:22px; line-height:1; color:#fff; background:rgba(0,0,0,.5); border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; }
/* cert print */
.cp-table{ width:100%; border-collapse:collapse; font-size:10.5px; margin-top:4px; }
.cp-table th, .cp-table td{ border:1px solid #ccc; padding:3px 5px; text-align:left; }
.cp-table th{ background:#f2f2f2; font-size:9.5px; text-transform:uppercase; }
.cp-outcome{ font-size:15px; padding:10px; border-radius:6px; }
.cp-outcome.ok{ background:#e8f8f0; } .cp-outcome.bad{ background:#fdecea; }
.cp-sig{ font-family:'Snell Roundhand','Segoe Script',cursive; font-size:16px; }
.cp-photos{ display:flex; gap:6px; flex-wrap:wrap; } .cp-photos img{ width:110px; height:110px; object-fit:cover; border:1px solid #ddd; }

/* ---------- certificates v2: section nav, inspection schedule, cover page ---------- */
.cert-nav{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; position:sticky; top:0; z-index:5;
  background:var(--bg); padding:8px 0; }
.cn-badge{ background:var(--panel2); border-radius:10px; padding:1px 7px; font-size:10px; color:var(--muted); }
.cn-badge.done{ color:var(--green); } .cn-badge.warn{ color:var(--amber); }
/* v619: page-by-page stepper — the cert-nav chips become numbered steps */
.cert-step-chip{ display:inline-flex; align-items:center; gap:7px; }
.cert-step-chip .cn-step{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--panel2); color:var(--muted); font-size:10.5px; font-weight:800; font-style:normal; flex:0 0 auto; }
.cert-step-chip.on{ background:var(--amber); color:#08090b; border-color:var(--amber); }
.cert-step-chip.on .cn-step{ background:#08090b; color:var(--amber); }
.cert-step-chip.done .cn-step{ background:var(--green,#059669); color:#fff; }
.cert-viewtgl{ margin-left:auto; }
/* sticky action footer — Back · progress · Next / Check, always in reach */
/* The horizontal margin was -4px, a bleed meant to reach past a container's own
   padding. MEASURED: #certs-body has 0px padding-left and 0px padding-right in BOTH
   desktop and phone mode, so there was nothing to bleed into -- the bar simply hung 4px
   off each side, making it 1288px wide in a 1280px viewport and giving the document a
   horizontal scrollbar (documentElement.scrollWidth 1284 > innerWidth 1280). The 4px
   side padding below keeps the controls inset exactly as before. */
.cert-step-foot{ position:sticky; bottom:0; z-index:6; display:flex; align-items:center; gap:12px;
  margin:16px 0 0; padding:12px 4px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top, var(--bg) 70%, transparent); border-top:1px solid var(--line); }
.cert-step-foot .cs-progress{ flex:1; text-align:center; font-weight:600; }
.cert-step-foot .btn{ min-width:96px; }
.insp-sec{ border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--bg2); }
.insp-sec summary{ padding:9px 12px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.insp-sec summary::-webkit-details-marker{ display:none; }
.insp-quick{ margin-left:auto; display:flex; gap:4px; }
.insp-items{ border-top:1px solid var(--line); padding:6px 10px; }
.insp-row{ display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed var(--line); font-size:12px; }
.insp-row:last-child{ border-bottom:none; }
.insp-id{ width:44px; flex-shrink:0; color:var(--muted); font-size:11px; }
.insp-desc{ flex:1; min-width:180px; }
.insp-loc{ width:110px; padding:4px 6px; font-size:11px; }
.insp-out{ width:64px; padding:4px 4px; font-weight:700; }
.insp-out.code{ color:var(--red); border-color:var(--red); }
/* print: modern certification — soft rounded cards, hairline rules, brand dots */
.cp-page{ background:#fff; color:#1a1d24; width:194mm; min-height:266mm; margin:0 auto 14px;
  padding:7mm 8mm; display:flex; flex-direction:column; position:relative;
  box-shadow:0 8px 30px rgba(0,0,0,.14); border:1px solid #e0e2e8; border-radius:3px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; font-size:9.5px; line-height:1.45;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --cacc-mid:color-mix(in srgb, var(--cacc,#16181d) 55%, #fff);
  --cacc-soft:color-mix(in srgb, var(--cacc,#16181d) 24%, #fff); }
.cp-page.cp-land{ width:277mm; min-height:183mm; page:certland; }
@media screen{
  .cp-page.cp-land{ zoom:.7; position:relative; }
  .cp-page.cp-land::before{ content:'LANDSCAPE SHEET — prints sideways, full width on paper';
    position:absolute; top:-0mm; right:0; transform:translateY(-120%);
    background:var(--cacc,#16181d); color:#fff; font-size:10px; font-weight:800;
    letter-spacing:.06em; padding:4px 12px; border-radius:999px; }
}
#certprint-doc{ background:transparent; padding:14px 0; overflow-x:auto; }
.cp-body{ flex:1; }
.cp-foot{ display:flex; justify-content:space-between; gap:6mm; margin-top:3mm; padding-top:1.8mm;
  border-top:.3mm solid #e8eaf0; font-size:7px; color:#9096a4; flex:none; }
/* every grid lives in a soft rounded card — no hard spreadsheet borders */
.cpx-card{ border:.3mm solid #e2e5eb; border-radius:2.6mm; overflow:hidden; background:#fff; }
.cpx-t{ width:100%; border-collapse:collapse; }
.cpx-t td, .cpx-t th{ border:none; border-bottom:.25mm solid #eef0f5; padding:1.3mm 2.4mm;
  vertical-align:top; font-size:9px; }
.cpx-t td + td, .cpx-t th + th{ border-left:.25mm solid #f2f4f8; }
.cpx-t tr:last-child td{ border-bottom:none; }
.cpx-t th{ background:var(--cbar,#16181d); color:#fff; font-weight:700; text-align:left; }
.cpx-t th + th{ border-left-color:rgba(255,255,255,.16); }
.cpx-l{ background:#f6f8fb; font-weight:700; color:#454b58; }
.cpx-tick{ width:6%; text-align:center; font-weight:800; color:var(--cacc,#1a1d24); }
.cpx-longtext{ min-height:8mm; }
.cpx-note{ font-size:7.8px; line-height:1.5; color:#565d6b; font-weight:400; }
.cpx-ok{ color:#0e7a48; font-weight:800; }
.cpx-bad{ color:#c62828; font-weight:800; }
.cpx-verdict{ display:inline-block; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:1.2mm 4.5mm; border-radius:999px; font-size:10px; }
.cpx-verdict.ok{ background:#0e7a48; color:#fff; }
.cpx-verdict.bad{ background:#c62828; color:#fff; }
/* bands + bars — rounded, with the three-dot brand motif under the big titles */
.cpx-band{ background:var(--cbar,#16181d); color:#fff; text-align:center; font-weight:800;
  padding:2.2mm 4mm; border-radius:2.6mm; position:relative; }
.cpx-band-title{ font-size:15px; margin:0 0 5mm; }
.cpx-band-title::after{ content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-3.2mm; width:1.8mm; height:1.8mm; border-radius:50%; background:var(--cacc,#16181d);
  box-shadow:-3.6mm 0 0 var(--cacc-mid), -7.2mm 0 0 var(--cacc-soft); }
.cpx-bar{ background:var(--cbar,#16181d); color:#fff; font-weight:800; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.05em; padding:1.7mm 3mm 1.7mm 5.6mm;
  margin:2.6mm 0 1.4mm; border-radius:2mm; position:relative; }
.cpx-bar::before{ content:''; position:absolute; left:2.5mm; top:50%; transform:translateY(-50%);
  width:1.7mm; height:1.7mm; border-radius:50%; background:var(--cacc,#fff); }
.cpx-sub{ font-weight:800; font-size:9.5px; padding:1.6mm 0 .8mm; color:#2a2f3a; }
.cpx-secrow td{ background:#eef1f6 !important; color:#242936; font-weight:800; }
.cpx-sched th{ font-size:8.5px; } .cpx-sched td{ font-size:8.5px; }
.cpx-sched tbody tr:nth-child(even) td{ background:#fafbfd; }
.cpx-sum td{ font-size:8.5px; }
/* page header */
.cpx-head{ display:flex; gap:3mm; align-items:stretch; }
.cpx-head-logo{ width:24mm; height:15mm; object-fit:contain; border:.3mm solid #e2e5eb; border-radius:2mm; flex:none; background:#fff; }
.cpx-head-scheme{ width:22mm; height:15mm; object-fit:contain; border:.3mm solid #e2e5eb; border-radius:2mm; flex:none; background:#fff; align-self:center; }
/* v799: this carried font-family:'Clash Display' — OUR display face, on the
   firm's own name, at the head of every continuation sheet of the customer's
   certificate. Same defect as the yellow masthead one shade quieter: the PDF
   painter substitutes Helvetica so the paper was clean, but the screen and the
   browser print path both carried it. Dropped, so the name inherits the
   document face — which is the one the firm chooses on Branding (Modern /
   Classic / Clean), not one we impose. */
.cpx-head-biz{ width:30mm; flex:none; font-weight:800; font-size:10.5px; display:flex; align-items:center;
  border:.3mm solid #e2e5eb; border-radius:2mm; padding:1mm 2mm; }
.cpx-head-mid{ flex:1; }
.cpx-head-no{ font-size:9.5px; padding:0 0 1mm 1mm; color:#565d6b; }
.cpx-head-no strong{ color:#1a1d24; }
.cpx-band-head{ font-size:12px; text-transform:uppercase; padding:1.9mm 3mm; }
.cpx-band-head::after{ content:''; position:absolute; left:32%; right:32%; bottom:-1.5mm; height:.9mm;
  border-radius:.6mm; background:linear-gradient(90deg, var(--cacc-soft), var(--cacc,#16181d)); }
.cpx-head-sub{ display:flex; justify-content:space-between; gap:4mm; font-size:6.8px; color:#7a808f;
  margin:2.8mm 0 1mm; }
/* cover — bold editorial masthead, all colour from --cbar/--cacc (the doc presets) */
.cpx-cover{ padding-top:0; display:flex; flex-direction:column; min-height:252mm; position:relative; }
.cpx-cover-scheme{ position:absolute; top:5mm; right:2mm; z-index:2; height:15mm; max-width:44mm;
  object-fit:contain; background:#fff; border-radius:2.4mm; padding:2mm 3mm; box-shadow:0 1mm 4mm rgba(0,0,0,.18); }
.cpx-mast{ background:var(--cbar,#16181d); color:#fff; margin:-7mm -8mm 13mm; padding:22mm 12mm 15mm; }
.cpx-mast-eyebrow{ font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.7; margin-bottom:6mm; }
/* v799: font-family:inherit is the whole point of this line and it is not tidy-up.
   certPrintHTML writes this as a bare <h1>, and css/style.css:1315 is a GLOBAL
   h1{font-family:var(--font-display)} meant for app chrome — so OUR Clash Display
   was setting the largest words on the cover of every customer certificate.
   Measured, not read: every element under #certprint-doc reported its resolved
   face and this was the only one answering "Clash Display". Same finding as
   .cpx-head-biz above, one rule further out and much louder. It now inherits the
   document's own face, so the certificate is set in one typeface throughout.
   (The PDF was never affected either way — normaliseFonts substitutes Helvetica
   before painting — but the screen and the browser print path both carried it.) */
.cpx-mast-title{ font-family:inherit; font-size:29px; font-weight:800; line-height:1.06; letter-spacing:-.015em; margin:0;
  white-space:normal; overflow-wrap:break-word; text-wrap:balance; max-width:150mm; }
.cpx-mast-rule{ width:26mm; height:1.7mm; border-radius:1mm; background:var(--cacc,#fff); margin:7mm 0 6mm; }
.cpx-mast-std{ font-size:9.5px; line-height:1.65; opacity:.82; }
.cpx-cover-grid{ display:flex; gap:9mm; align-items:flex-start; }
.cpx-cover-addrbox{ flex:1; }
.cpx-cover-lbl{ font-size:8px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--cacc,#565d6b); margin-bottom:3mm; }
.cpx-cover-addr{ font-size:14px; line-height:1.5; }
.cpx-cover-addr strong{ font-size:18px; font-weight:800; display:inline-block; margin-bottom:1mm; }
.cpx-covercard{ flex:0 0 76mm; }
.cpx-cover-meta{ width:100%; border-collapse:collapse; }
.cpx-cover-meta td{ padding:2.6mm 4mm; font-size:10px; border-bottom:.25mm solid #eef0f5; }
.cpx-cover-meta tr:last-child td{ border-bottom:none; }
.cpx-cover-meta td:first-child{ color:#565d6b; font-weight:700; width:44%; background:#f6f8fb; }
.cpx-cover-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:8mm;
  font-size:9.5px; line-height:1.6; margin-top:auto; padding-top:7mm; border-top:.3mm solid #e8eaf0; }
.cpx-cover-foot strong{ font-size:12.5px; }
.cpx-cover-logo{ width:26mm; height:26mm; object-fit:contain; }
/* contents */
.cpx-contents{ width:100%; border-collapse:collapse; }
.cpx-contents td{ border-bottom:.25mm solid #eef0f5; padding:4mm 3.4mm; font-size:11px; font-weight:600; }
.cpx-contents tr:last-child td{ border-bottom:none; }
.cpx-contents td.cpx-l{ text-align:center; }
/* landscape board sheets */
.cpx-boardmeta td{ font-size:8px; }
.cpx-boardmeta .cpx-l{ background:var(--cbar,#16181d); color:#fff; font-weight:700; }
.cpx-ckt th{ font-size:6.6px; padding:.9mm .7mm; text-align:center; vertical-align:middle;
  background:var(--cbar,#16181d); color:#fff; }
.cpx-ckt .cpx-gr th{ background:color-mix(in srgb, var(--cbar,#16181d) 84%, #fff); }
.cpx-ckt td{ font-size:7.6px; padding:1mm .7mm; text-align:center; }
.cpx-ckt td.dsc, .cpx-ckt th.dsc{ text-align:left; min-width:24mm; }
.cpx-ckt tbody tr:nth-child(even) td{ background:#f7f9fc; }
.cp-sig{ font-family:'Snell Roundhand','Segoe Script',cursive; font-size:13px; }
.cp-guide p{ font-size:9.5px; line-height:1.7; margin:0 0 3.5mm; }
.cp-photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3mm; margin-top:3mm; }
.cp-photo-grid figure{ margin:0; }
.cp-photo-grid img{ width:100%; height:52mm; object-fit:cover; border:.3mm solid #e2e5eb; border-radius:2mm; }
.cp-photo-grid figcaption{ font-size:7.5px; color:#565d6b; margin-top:1mm; }
@page{ size:A4; margin:12mm; }
@page certland{ size:A4 landscape; margin:9mm; }
@media print{
  .cert-nav{ display:none; }
  .cp-page{ box-shadow:none; border:none; border-radius:0; margin:0; width:auto; min-height:266mm;
    padding:0; page-break-after:always; }
  .cp-page.cp-land{ min-height:180mm; width:auto; }
  .cp-page:last-child{ page-break-after:auto; }
  #certprint-doc{ overflow:visible; padding:0; }
}
/* There was a second, stray `}` here. A stray closing brace at the top level puts
   the CSS parser into error recovery and it discards THE NEXT RULE — so .same-addr
   below has never once applied: it computed 14px/block instead of 12px inline-flex
   muted. Nothing errors, nothing logs, no build gate notices. Found by TS-026. */
.same-addr{ font-size:12px; color:var(--muted); text-transform:none; letter-spacing:0; margin-left:12px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.cert-sec input:disabled{ opacity:.55; cursor:not-allowed; }
.doc-certs{ display:flex; flex-direction:column; gap:6px; }
.doc-cert-tick{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
/* certificate pages inside the invoice doc print on white like the invoice */
.cq-doc .cp-cover{ padding-top:20mm; }

/* ---------- team & engineer view ---------- */
.staff-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.staff-row .st-name{ width:170px; }
.staff-row .st-c{ width:150px; }
.staff-dot{ width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; cursor:pointer; border:2px solid rgba(255,255,255,.25); }
.cal-leave{ font-style:italic; }
/* engineer view preview: hide internal money */
body.eng-view .quote-side{ display:none !important; }
/* v681: .eng-noprice, not .eng-view — engHidesMoney() lets a canQuote engineer keep
   prices and this rule took them back off him. Same rule in both places now. */
body.eng-noprice .line-figures span[title="Materials at cost"]{ display:none !important; }
body.eng-view .line-controls label:has(input[onchange*="'mk'"]){ display:none !important; }
body.eng-view .line-mats td:nth-child(3), body.eng-view .line-mats td:nth-child(4),
body.eng-view .line-mats th:nth-child(3), body.eng-view .line-mats th:nth-child(4){ display:none; }
body.eng-view .quote-layout{ grid-template-columns:1fr; }
body.eng-view::after{ content:'👁 Engineer view preview — costs & margins hidden (turn off in Team)'; position:fixed; bottom:10px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:#111; font-size:12px; font-weight:700; padding:6px 14px; border-radius:16px; z-index:99; }

/* timesheets, diary, capacity, availability */
.job-diary{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-top:10px; }
.job-diary summary{ padding:10px 14px; cursor:pointer; list-style:none; font-size:13px; }
.job-diary summary::-webkit-details-marker{ display:none; }
.jd-body{ padding:0 14px 12px; max-width:660px; } /* checklists & notes read as a left-hand clipboard, not a page-wide sprawl */
.jd-note{ padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; display:flex; gap:8px; align-items:baseline; }
.jd-note .icon-btn{ margin-left:auto; }
.jd-add{ display:flex; gap:8px; margin-top:8px; }
.jd-add input{ flex:1; }
.cap-table td{ text-align:center; padding:6px 4px; }
.cap-table td:first-child{ text-align:left; white-space:nowrap; }
.cap-free{ color:var(--muted); }
.cap-part{ color:var(--green); font-weight:700; }
.cap-full{ color:var(--amber); font-weight:700; }
.cap-leave{ opacity:.8; }
.bk-avail{ display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.bk-av{ display:inline-flex; gap:5px; align-items:center; }
/* engineer view: lock price editing (visible prices stay, editing blocked) */
body.eng-view #rates-panel input, body.eng-view #rates-panel select,
body.eng-noprice .line-mats input[onchange*="setPrice"],
body.eng-noprice input[onchange*="setPrice"]{ pointer-events:none; opacity:.6; }   /* v681: was .eng-view — it disabled the price box for the one engineer allowed to quote */

/* photo report + RAMS */
.pr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pr-grid img{ width:100%; border:1px solid #ddd; border-radius:4px; }
.pr-grid figure{ margin:0; } .pr-grid figcaption{ font-size:9px; color:#666; padding:2px 0; }
.rams-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.rams-row .rams-h{ width:230px; font-size:12px; }
.rams-row .rams-r{ width:56px; }
.rams-row .rams-c{ flex:1; min-width:220px; font-size:12px; }
.cs-role{ width:130px; flex-shrink:0; }

/* finish picker: option rows with live price deltas */
.fin-grid{ display:flex; flex-direction:column; gap:6px; margin:12px 0 8px; }
.fin-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; color:var(--text); font:inherit; cursor:pointer; }
.fin-opt:hover:not(:disabled){ border-color:var(--amber); }
.fin-opt:disabled{ opacity:.45; cursor:not-allowed; }
.fin-opt .fo-ico{ font-size:18px; }
.fin-opt .fo-name{ flex:1; font-weight:600; }
.fin-opt .fo-delta{ font-weight:700; }
.fin-opt .fo-delta.up{ color:var(--amber); }
.fin-opt .fo-delta.down{ color:var(--green); }
.tot-row.hours-row{ background:var(--panel2); border-radius:8px; padding:8px 10px; margin-bottom:6px; }

/* quote options on the job */
.opt-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.opt-chip{ display:inline-flex; align-items:center; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:3px 6px 3px 4px; }
.opt-chip.on{ border-color:var(--amber); background:var(--panel2); }
.opt-chip .opt-name{ background:none; border:none; color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:3px 8px; }
.opt-chip:not(.on) .opt-name{ color:var(--muted); font-weight:500; }
.chip-fin{ border:1px solid var(--amber-dk); color:var(--amber); background:none; cursor:pointer; font:inherit; font-size:11px; border-radius:10px; padding:2px 8px; }
.chip-fin:hover{ border-color:var(--amber); }

/* engineer job log */
.jd-note{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.jd-note .jd-main{ flex:1; display:flex; flex-direction:column; gap:2px; }
.jd-note.jd-issue{ border-left:3px solid var(--red); padding-left:8px; }
.jd-note.jd-done > .jd-main > span:first-child{ text-decoration:line-through; opacity:.6; }
.jd-ico{ font-size:14px; }
.jd-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.jd-ph{ position:relative; }
.jd-ph img{ width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; }
.jd-ph .icon-btn{ position:absolute; top:-6px; right:-6px; background:var(--bg); padding:0 4px; }
.jd-add{ display:flex; gap:8px; margin-top:10px; align-items:center; }
.jd-add .jd-type{ width:110px; flex-shrink:0; }
.jd-add input[type=text], .jd-add input:not([type]){ flex:1; }

/* ============================================================
   VISUAL HIERARCHY v2 — depth, prominence & rhythm
   Principles: aesthetic-usability, Gestalt common-region,
   size = importance, colour = meaning, motion = feedback.
   ============================================================ */

/* 1 · Depth: the page is no longer one flat sheet */
body{
  background: radial-gradient(1200px 600px at 75% -10%, #16181d 0%, var(--bg) 55%) fixed, var(--bg);
}
.panel, .line, .job-row, .cost-card, .kit-card, .cust-card, .staff-card,
.insp-sec, .job-diary, .job-cust, .cal-cell, .job-box{
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.25);
}
.line, .job-row, .kit-card, .cost-card, .cust-card{
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.line:hover, .job-row:hover, .kit-card:hover, .cust-card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.38);
}

/* 2 · Section identity: page titles anchor each view */
.view-head{ border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:22px; position:relative; }
.view-head::after{ content:''; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:var(--amber); border-radius:2px; }
.view-head h1{ font-size:26px; }

/* 3 · Panels announce themselves: brighter titles with a keyline */
.panel h3, .cert-sec h3{
  color:var(--text); display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px;
}
.panel h3::before, .cert-sec h3::before{ content:''; width:4px; height:14px; background:var(--amber); border-radius:2px; flex-shrink:0; }

/* 4 · Money leads: key figures are the biggest thing in their card */
.cost-card{ background:linear-gradient(180deg, var(--panel2), var(--panel)); }
.cost-card .cc-val{ font-size:27px; letter-spacing:-.5px; }
.cost-card.green{ border-top:3px solid var(--green); }
.cost-card.amber{ border-top:3px solid var(--amber); }
.line-figures strong{ font-size:16px; color:var(--amber); }
.tot-row.subtotal{ font-size:16px; }
.tot-row.subtotal span:last-child{ color:var(--amber); font-weight:800; }
.job-val{ font-size:15px; font-weight:800; color:var(--amber); }

/* 5 · Cards read as cards: titles up a size */
.line-title{ font-size:15px; }
.job-row .job-main strong{ font-size:15px; }

/* 6 · Primary actions glow, everything responds */
.btn, .chip-btn, .icon-btn, .nav-btn, .fin-opt, .nj-type{ transition: all .13s ease; }
.btn-amber{ box-shadow: 0 2px 12px rgba(255,221,51,.25); }
.btn-amber:hover{ box-shadow: 0 4px 18px rgba(255,221,51,.4); transform: translateY(-1px); }
.chip-btn.on{ box-shadow: 0 2px 10px rgba(255,221,51,.3); }

/* 7 · Navigation: the active place is unmistakable */
.nav-btn{ border-left:3px solid transparent; border-radius:0 8px 8px 0; }
.nav-btn.active{ border-left-color:var(--amber); background:linear-gradient(90deg, rgba(255,221,51,.12), var(--panel2)); }
.nav-btn:hover{ padding-left:16px; }
.nav-group{ font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  padding:8px 12px 2px; opacity:.7; }

/* 8 · Tables breathe: zebra rows for long schedules */
.cert-table tbody tr:nth-child(even) td, .ovh-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); }
.cert-table tbody tr:hover td{ background:rgba(255,221,51,.05); }

/* 9 · Modals float above a hushed page */
.modal{ backdrop-filter: blur(6px); background:rgba(4,5,7,.72); }
.modal-card{ box-shadow: 0 24px 80px rgba(0,0,0,.6); border:1px solid color-mix(in srgb, var(--amber) 18%, var(--line)); }

/* 10 · Focus & polish */
:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--amber-dk); }
::-webkit-scrollbar-track{ background:transparent; }

/* keep print clean — none of the above decorates paper */
@media print{
  body{ background:#fff; }
  .modal{ backdrop-filter:none; }
  .modal-card{ box-shadow:none; border:none; }
}

/* ============================================================
   DESIGN SYSTEM v3 — typography, colour temperature, surfaces
   Display: Clash Display (headings, money) · UI: Satoshi (body)
   ============================================================ */
:root{
  --bg:#08090b; --bg2:#0d0f13; --panel:#14161c; --panel2:#1c1f27;
  --line:rgba(154,161,171,.17); --text:#f5f6f8; --muted:#9aa1ab;
  --ink:#08090b; --radius:14px;
  --font-ui:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Clash Display','Space Grotesk',-apple-system,sans-serif;
}
body{ font:14px/1.55 var(--font-ui); letter-spacing:.005em; }
h1{ font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-.5px; }
h2{ font-family:var(--font-display); font-weight:600; }
.logo{ font-family:var(--font-display); font-size:21px; }
.kit-name, .line-title, .cq-biz{ font-family:var(--font-display); font-weight:600; letter-spacing:-.2px; }

/* money & data: display face + tabular figures so columns line up */
.cc-val, .job-val, .line-figures strong, .tot-row.subtotal span:last-child, .cq-grand{
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
}
.tot-row, .cert-table, .ovh-table, .cp-table, .line-figures, .cq-totals{ font-variant-numeric:tabular-nums; }

/* labels whisper, values speak: lighter labels, stronger input text */
label{ font-weight:500; }
input, select, textarea{ font-weight:500; border-radius:9px; background:rgba(8,9,11,.65); }
input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(255,221,51,.15); }
.cc-label, .test-title, .cq-lab{ font-size:10.5px; letter-spacing:1.1px; opacity:.85; }

/* consistent radius scale: 9 controls · 14 cards · 18 modals */
.btn, .chip-btn{ border-radius:9px; }
.modal-card{ border-radius:18px; }
.line, .panel, .job-row, .cost-card, .kit-card, .cust-card, .staff-card, .job-box, .job-cust, .job-diary{ border-radius:var(--radius); }

/* buttons: neutral ones look pressable, primary looks golden */
.btn{ background:linear-gradient(180deg, #20242e, var(--panel2)); border-color:rgba(154,161,171,.22); }
.btn:hover{ border-color:var(--amber); }
.btn-amber{ background:linear-gradient(180deg, #ffe566, var(--amber)); color:var(--ink); border-color:transparent; font-weight:700; }
.btn-amber:hover{ background:linear-gradient(180deg, #fff099, #ffe566); }

/* cards: soft borders, let elevation do the separating */
.panel, .line, .job-row, .cost-card, .kit-card, .cust-card, .staff-card, .job-box, .insp-sec{
  border-color:rgba(154,161,171,.13);
}
/* KPI numbers get the display face at full size */
.cost-card .cc-val{ font-size:28px; font-weight:700; }

/* status pills: consistent, quiet capsule */
.status-pill{ font-weight:700; letter-spacing:.3px; }

/* sidebar: brand presence + breathing room */
.sidebar{ background:linear-gradient(180deg, #0e1013, #08090b); }
.bolt{ filter:drop-shadow(0 0 10px rgba(255,221,51,.8)); }

@media print{ body{ font-family:var(--font-ui); } }

/* ============ the "add" visual language ============ */
/* tiles that CREATE something: dashed amber frame + corner plus badge */
.nj-add{ position:relative; border-style:dashed; border-color:rgba(255,221,51,.45); padding-right:34px; }
.nj-add::after{
  content:'＋'; position:absolute; top:8px; right:8px;
  width:22px; height:22px; line-height:22px; text-align:center;
  background:var(--amber); color:var(--ink); font-weight:800; font-size:14px;
  border-radius:50%; box-shadow:0 2px 8px rgba(255,221,51,.35);
}
.nj-add:hover{ border-color:var(--amber); background:rgba(255,221,51,.07); }
/* buttons that ADD to a list: dashed amber capsule, distinct from normal actions */
button.btn-add{
  background:rgba(255,221,51,.06); border:1px dashed rgba(255,221,51,.5);
  color:var(--amber); font-weight:600;
}
button.btn-add:hover{ background:rgba(255,221,51,.14); border-color:var(--amber); border-style:solid; transform:none; }
/* the photo "＋" tile joins the family */
.photo-add{ border:1px dashed rgba(255,221,51,.5) !important; color:var(--amber) !important; }

/* job card upgrades: priority, engineer, staleness */
.eng-dot{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; font-size:9px; font-weight:800; color:#08090b; vertical-align:middle; margin:0 4px; }
.days-chip{ font-size:10.5px; color:var(--muted); background:var(--panel2); border-radius:9px; padding:2px 8px; vertical-align:middle; }
.days-chip.stale{ color:#f87171; border:1px solid rgba(248,113,113,.4); font-weight:700; }
.job-side .icon-btn{ font-size:14px; }
.job-side a.icon-btn{ text-decoration:none; }
.line-sup{ border-left:4px solid #3fe3ff; }
.mat-cat-row td{ padding:9px 4px 3px !important; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.9px; color:var(--amber); border-bottom:1px solid var(--line); background:none !important; }
.mat-cat-row.mat-cat-opt td{ color:var(--muted); }

/* ---------- operations: inbox drawer, queues, tasks ---------- */
.ops-badge{ background:var(--red); color:#08090b; /* v537 audit A11: white ink was 2.77:1 */ font-size:10px; font-weight:800; border-radius:9px;
  padding:1px 6px; margin-left:auto; }
#ops-drawer{ position:fixed; top:0; right:-400px; width:380px; max-width:92vw; height:100vh; z-index:130;
  background:var(--bg2); border-left:1px solid var(--line); box-shadow:-16px 0 48px rgba(0,0,0,.5);
  transition:right .22s ease; display:flex; flex-direction:column; }
#ops-drawer.open{ right:0; }
.ops-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
#ops-drawer-body{ overflow:auto; padding:10px 12px; flex:1; }
#ops-drawer-body .test-title{ margin:10px 0 6px; }
.ops-notif{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; margin-bottom:4px; }
.ops-notif:hover{ background:var(--panel); }
.ops-notif.unread{ background:var(--panel); border-color:rgba(255,221,51,.25); }
.ops-notif .on-ico{ font-size:16px; }
.ops-notif .on-main{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.ops-notif .on-dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); margin-top:6px; }
.queue-sel{ max-width:150px; color:var(--muted) !important; border-color:var(--line) !important; }
.ops-log{ margin-top:8px; border-top:1px solid var(--line); padding-top:6px; max-height:320px; overflow:auto; }

/* ---------- job card sections: each one has its own colour identity ---------- */
.job-cust{ --sec:#3fe3ff; }          /* customer = cyan (incoming/new) */
.job-diary.jd-log{ --sec:#34d399; }  /* job log = green */
.job-diary.jd-exp{ --sec:#ffdd33; }  /* expenses = yellow (money) */
.job-diary.jd-act{ --sec:#9aa1ab; }  /* activity = muted */
.job-cust, .job-diary{ border-left:4px solid var(--sec, var(--line)); }
.sec-head{
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--sec, var(--text));
  margin:-12px -14px 8px; padding:10px 14px; border-radius:14px 14px 0 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, var(--panel)), var(--panel) 65%);
  border-bottom:1px solid color-mix(in srgb, var(--sec) 30%, var(--line));
}
.job-diary summary{
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--sec, var(--text));
  background:linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, var(--panel)), var(--panel) 65%);
  border-radius:14px;
}
.job-diary[open] summary{ border-radius:14px 14px 0 0; border-bottom:1px solid color-mix(in srgb, var(--sec) 30%, var(--line)); }
.job-diary summary .muted, .job-diary summary .small{ text-transform:none; letter-spacing:0; font-family:var(--font-ui); font-weight:500; }
.job-diary summary strong{ color:inherit; }
.opt-bar{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:14px; padding:10px 14px; }

/* proposal lines in the builder */
.chip-sale{ border:1px solid var(--green); color:var(--green); font-size:10px; border-radius:10px; padding:2px 8px; }
.chip-sale.chip-choice{ border-color:#3fe3ff; color:#3fe3ff; }
.line.sale-off{ opacity:.6; border-style:dashed; }
.line-media{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; padding:8px 10px;
  background:var(--bg2); border-radius:10px; border:1px dashed var(--line); }
.lm-ph{ position:relative; } .lm-ph img{ width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer; }
.lm-ph .icon-btn{ position:absolute; top:-8px; right:-8px; background:var(--bg); padding:0 4px; }
/* proposal sections on the customer document */
.cq-choice{ border:2px solid #c7a70a33; border-radius:12px; padding:12px 14px; margin-top:14px; }
.cq-opt{ display:flex; gap:12px; align-items:flex-start; padding:10px 8px; border-radius:10px; border:1px solid #e5e7eb;
  margin-top:8px; cursor:pointer; color:#111; }
.cq-opt.sel{ border-color:#c7a70a; background:#fffbeb; }
.cq-opt-main{ flex:1; }
.cq-opt-price{ font-weight:800; white-space:nowrap; }
.cq-inc{ font-size:11px; color:#166534; background:#dcfce7; border-radius:8px; padding:1px 8px; }
/* v415 — customer-facing dropdown choices inside a quote option (Colour, Cable…) */
.cq-menus{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:9px; }
.cq-menu{ display:inline-flex; align-items:center; gap:6px; }
.cq-menu-lab{ font-size:11.5px; font-weight:700; color:#4b5563; }
.cq-menu-sel{ font:inherit; font-size:13px; padding:5px 26px 5px 9px; border:1px solid #cbd2dc; border-radius:8px;
  background:#fff; color:#16181d; cursor:pointer; max-width:200px; }
.cq-menu-sel:focus{ outline:none; border-color:#c7a70a; }
.cq-media{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.cq-line-ph{ width:86px; height:86px; object-fit:cover; border-radius:8px; border:1px solid #ddd; }
.cq-attach{ font-size:12px; border:1px solid #d1d5db; border-radius:8px; padding:3px 10px; text-decoration:none; color:#1d4ed8 !important; }
@media print{ .cq-opt input{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border:2px solid #333; border-radius:3px; }
  .cq-opt input[type=radio]{ border-radius:50%; } .cq-opt input:checked{ background:#333; } }

/* ============================================================
   STACKED OUT BRAND — signature gradient, hero moments only
   (logo + primary CTA glow). Never on body text.
   ============================================================ */
.logo em{
  background:linear-gradient(100deg, #ffdd33, #3fe3ff);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.bolt{ filter:drop-shadow(0 0 10px rgba(255,221,51,.8)); }
.view-head::after{ background:linear-gradient(100deg, #ffdd33, #3fe3ff); }
@media print{ .logo em{ -webkit-text-fill-color:initial; color:#16181d; background:none; } }

/* ============================================================
   v410 — BRAND CARRY-THROUGH: the quote-bar theme, site-wide.
   The page-header accent GLIDES like the money bar's strip (both
   themes); standout money figures wear the gradient; empty-state
   and hero surfaces get the Stacked Out mark. Tasteful, not everywhere.
   ============================================================ */
.view-head::after{ background:linear-gradient(100deg,#ffdd33,#3fe3ff,#ffdd33) !important;
  background-size:220% 100%; width:92px; height:3px; animation:qbGlide 9s linear infinite; }
body.theme-light .view-head::after{ display:block !important; }
@media (prefers-reduced-motion: reduce){ .view-head::after{ animation:none; } }
/* standout money numbers wear the brand gradient, like the quote total */
.brand-num, .cost-card.amber .cc-val{
  background:linear-gradient(100deg,#ffe873,#8ce7ff); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }
body.theme-light .brand-num, body.theme-light .cost-card.amber .cc-val{
  background:linear-gradient(100deg,#c99400,#0a94bd); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }
/* the Stacked Out mark, dropped into hero/empty surfaces */
.so-mark{ display:inline-flex; align-items:center; vertical-align:middle; }
.so-mark svg{ display:block; }
.brand-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:38px 20px; color:var(--muted); }
.brand-empty .so-mark{ opacity:.9; filter:drop-shadow(0 4px 16px rgba(63,227,255,.18)); }
.brand-empty h3{ margin:0; font-size:16px; color:var(--text); }
.brand-empty p{ margin:0; font-size:13px; max-width:42ch; }
/* section headers carry a small gradient tick — a quiet, repeating brand beat */
.hb-sec::before, .section-h::before{ content:''; display:inline-block; width:14px; height:3px; border-radius:2px;
  margin-right:9px; vertical-align:middle; background:linear-gradient(100deg,#ffdd33,#3fe3ff); }

/* ============================================================
   CERTIFICATES v2 — every section wears its colour
   paperwork = cyan · electrical data = yellow · testing = green
   observations = red · declaration = muted
   ============================================================ */
.cert-sec{ border-left:4px solid var(--csec, var(--line)); }
#csec-details, #csec-install{ --csec:#3fe3ff; }
#csec-supply{ --csec:#ffdd33; }
#csec-inspection{ --csec:#34d399; }
.cert-sec.sec-board{ --csec:#ffdd33; }
#csec-obs{ --csec:#f87171; }
#csec-pat, #csec-eml{ --csec:#34d399; }
#csec-fire{ --csec:#f87171; }
#csec-summary{ --csec:#3fe3ff; }
#csec-sign{ --csec:#9aa1ab; }
.cert-check{ --csec:#34d399; border-left:4px solid var(--csec); }
/* section headers announce themselves like the job card sections */
.cert-sec > h3:first-child, .cert-check > h3:first-child{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--csec, var(--text));
  margin:-14px -16px 14px; padding:12px 16px; border-radius:0 14px 0 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--csec, #9aa1ab) 13%, var(--panel)), var(--panel) 65%);
  border-bottom:1px solid color-mix(in srgb, var(--csec, #9aa1ab) 30%, var(--line));
}
.cert-sec > h3:first-child::before, .cert-check > h3:first-child::before{ background:var(--csec, var(--line)); }
.cert-sec > h3:first-child .muted{ text-transform:none; letter-spacing:0; font-family:var(--font-ui); font-weight:500; }
/* the sticky section nav gets matching colour dots */
.cn-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.cert-nav{ border-bottom:1px solid var(--line); }
/* live test-result flags */
input.zs-bad{ border-color:var(--red) !important; color:var(--red); font-weight:800; background:rgba(248,113,113,.08); }
input.ir-bad{ border-color:var(--red) !important; color:var(--red); font-weight:800; background:rgba(248,113,113,.08); }
input.ir-warn{ border-color:#f97316 !important; color:#f97316; font-weight:700; }
/* certificate check panel */
.cchk-row{ display:flex; gap:10px; align-items:center; padding:7px 10px; border-radius:8px;
  font-size:13px; margin-bottom:4px; border:1px solid var(--line); background:var(--bg2); }
.cchk-bad{ border-color:rgba(248,113,113,.45); }
.cchk-warn{ border-color:rgba(255,221,51,.35); }
/* remedial banner: the money moment on an unsatisfactory EICR */
.remedial-banner{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,221,51,.5);
  background:linear-gradient(90deg, rgba(255,221,51,.12), rgba(63,227,255,.06));
}
.remedial-banner > div{ flex:1; min-width:240px; }
.remedial-banner .btn{ flex-shrink:0; }
@media print{ .cert-nav, #cert-check-panel, .remedial-banner{ display:none !important; } }

/* inspection schedule: coded items open a write-up box that feeds the observation sheet */
.insp-write{ margin:2px 0 10px 44px; padding:10px 12px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--muted);
  display:flex; flex-direction:column; gap:8px; }
.insp-write.obs-C1{ border-left-color:#f87171; } .insp-write.obs-C2{ border-left-color:#f97316; }
.insp-write.obs-C3{ border-left-color:#ffdd33; } .insp-write.obs-FI{ border-left-color:#3fe3ff; }
.iw-head{ font-size:12px; color:var(--muted); }
.iw-head strong{ color:var(--text); }
.insp-write textarea{ font-size:13px; }
.iw-lib{ font-size:12px; color:var(--muted); }
.iw-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iw-photos{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.iw-photos img{ width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.iw-photos .lm-ph .icon-btn{ top:-8px; right:-8px; }
.obs-num{ font-weight:800; color:var(--muted); min-width:18px; text-align:right; }
.obs-row{ align-items:flex-start; }
/* print: observation photo blocks */
.cp-obs-ph{ margin-top:6px; page-break-inside:avoid; }
.cp-obs-ph .cp-photos img{ width:150px; height:112px; object-fit:cover; }
@media (max-width:860px){ .insp-write{ margin-left:8px; } }

/* library v2: NC code + BPG4 myth warnings */
.obs-NC{ color:var(--muted); border-color:var(--line); }
.insp-write.obs-NC{ border-left-color:var(--muted); }
.iw-myth{ font-size:12px; color:var(--muted); padding:6px 10px; border:1px dashed rgba(255,221,51,.4);
  border-radius:8px; background:rgba(255,221,51,.05); }

/* job P&L (actuals) on the job card */
.jd-pl{ margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--bg2); border:1px solid var(--line); }
.jd-pl .profit-row span:last-child{ font-weight:800; }

/* ============================================================
   LIST VIEWS v2 — status tabs + data tables
   (the Tradify clarity, in the Stacked Out skin)
   ============================================================ */
.tabs{ display:flex; gap:2px; flex-wrap:wrap; align-items:flex-end; padding:0 4px; }
.tab{ background:transparent; border:1px solid transparent; border-bottom:none; color:var(--muted);
  font:inherit; font-size:13px; font-weight:600; padding:9px 14px; cursor:pointer;
  border-radius:10px 10px 0 0; transition:all .12s; position:relative; }
.tab:hover{ color:var(--text); background:var(--panel2); }
.tab.active{ color:var(--text); background:var(--panel); border-color:var(--line); font-weight:700; }
/* active tab wears the signature gradient — the working line of colour on every tabbed page */
.tab.active::after{ content:''; position:absolute; left:2px; right:2px; bottom:-1px; height:3px;
  border-radius:2px; background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.tab.tab-action::after{ display:none; }
.tab-ct{ display:inline-block; background:var(--panel2); color:var(--muted); border-radius:12px;
  padding:1px 8px; font-size:11px; font-weight:800; margin-left:6px; }
.tab.active .tab-ct{ background:var(--amber); color:#08090b; }
.table-card{ background:var(--panel); border:1px solid var(--line); border-radius:0 14px 14px 14px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.25); }
.table-toolbar{ display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; align-items:center; background:var(--panel2); }
.table-toolbar input[type=search]{ background:var(--bg); }
/* same trap as .cert-tbl-wrap: sideways scroll only, never capture the page's
   vertical scroll (the jobs/customers tables can be taller than the screen). */
.dt-wrap{ overflow-x:auto; overflow-y:hidden; overflow-y:clip; }
table.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr{ cursor:pointer; transition:background .1s ease; }
.data-table tbody tr:hover{ background:rgba(63,227,255,.05); }
.data-table .r{ text-align:right; }
.dt-link{ color:#3fe3ff; font-weight:700; }
tr:hover .dt-link{ text-decoration:underline; }
.dt-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.dt-actions{ white-space:nowrap; text-align:right; }
.dt-actions .icon-btn{ font-size:14px; }
.dt-empty{ padding:36px 20px; text-align:center; color:var(--muted); }
.data-table .status-sel{ font-size:11.5px; padding:3px 6px; max-width:150px; }
.data-table .queue-sel{ max-width:110px; }
@media (max-width:900px){
  .hide-m{ display:none !important; }
  .data-table td, .data-table th{ padding:8px 8px; }
  .tab{ padding:8px 10px; font-size:12px; }
}
.table-toolbar select{ width:auto; max-width:220px; }
.table-toolbar .btn{ margin-left:auto; }

/* ============================================================
   THEME: DAYLIGHT — light content, charcoal sidebar
   "Less is more": flat surfaces, soft shadows, one accent.
   Toggle: 🌓 in the sidebar. Dark theme = remove body class.
   ============================================================ */
body.theme-light{
  --bg:#f7f7f4; --bg2:#f0f0ec; --panel:#ffffff; --panel2:#f4f4f0;
  --line:#e5e4dc; --text:#1a1d23; --muted:#5f6774; --ink:#16181d;
  --amber:#8a6800; --amber-dk:#715600; --yel:#ffdd33; --yel-ink:#0b0c0e; /* --yel is the BRAND fill; --amber is text-on-white only */ /* v297: was #a87e00 — 3.72:1 on white; money is read all day (audit fix 1) */
  --green:#059669; --red:#dc2626;
  /* the same four, re-tuned to stay legible as fills on paper: brand yellow
     goes deeper gold (never brown), cyan goes teal — both still read as the
     same colour family as the dark theme */
  --nf-money:#059669; --nf-comms:#0d8fae; --nf-job:#e8a300; --nf-sys:#8b93a1;
  --red-ink:#b3161c;   /* deeper than --red so red WORDING clears 4.5:1 on its own pale tint */
  background:var(--bg);
}
body.theme-light{ background:#f7f7f4; } /* kill the dark radial */
/* the charcoal rail — flat Stacked Out panel, no gradients */
body.theme-light .sidebar{ background:#0d0f13; color:#f5f6f8; border-right:none; }
body.theme-light .sidebar .nav-btn{ color:#9aa1ab; }
body.theme-light .sidebar .nav-btn:hover{ background:#16181d; color:#f5f6f8; }
body.theme-light .sidebar .nav-btn.active{ background:#16181d; color:#ffdd33; border-left-color:#ffdd33; }
body.theme-light .sidebar-foot{ color:#7c8592; }
body.theme-light .nav-group{ color:#7c8592; }
body.theme-light .menu-btn{ background:#16181d; color:#f5f6f8; border-color:#2a2e37; }
/* buttons: white, bordered, obviously pressable; primary = the one yellow thing */
body.theme-light .btn{ background:#fff; border:1px solid #d6dae1; color:var(--text); box-shadow:0 1px 2px rgba(16,24,40,.05); }
body.theme-light .btn:hover{ border-color:#b9c0ca; background:#fafbfc; }
body.theme-light .btn-amber{ background:#16181d; border-color:#16181d; color:#ffdd33; box-shadow:0 1px 2px rgba(16,24,40,.1); }
body.theme-light .btn-amber:hover{ background:#23262e; box-shadow:0 2px 6px rgba(16,24,40,.12); }
body.theme-light .chip-btn{ background:#fff; border-color:#d6dae1; color:var(--muted); }
body.theme-light .chip-btn.on{ background:#ffdd33; border-color:#e8c400; color:#16181d; box-shadow:none; }
body.theme-light button.btn-add{ background:rgba(168,126,0,.05); border-color:rgba(168,126,0,.45); color:#8a6800; }
/* inputs */
body.theme-light input, body.theme-light select, body.theme-light textarea{
  background:#fff; border-color:#d6dae1; color:var(--text); }
body.theme-light input:focus, body.theme-light select:focus, body.theme-light textarea:focus{
  border-color:#e8c400; box-shadow:0 0 0 3px rgba(255,221,51,.25); }
body.theme-light input[type=checkbox]{ accent-color:#d9a900; }
/* cards: flat white, one soft shadow, no glow-lines */
body.theme-light .panel, body.theme-light .line, body.theme-light .job-row, body.theme-light .cost-card,
body.theme-light .kit-card, body.theme-light .cust-card, body.theme-light .staff-card, body.theme-light .insp-sec,
body.theme-light .job-diary, body.theme-light .job-cust, body.theme-light .cal-cell, body.theme-light .job-box,
body.theme-light .table-card, body.theme-light .modal-card, body.theme-light .saved-row, body.theme-light .ovh-cat{
  box-shadow:0 1px 3px rgba(16,24,40,.07); border-color:var(--line); background:var(--panel); }
body.theme-light .line:hover, body.theme-light .job-row:hover, body.theme-light .kit-card:hover, body.theme-light .cust-card:hover{
  box-shadow:0 3px 10px rgba(16,24,40,.1); border-color:#cdd3db; }
body.theme-light .job-box{ background:var(--panel); }
body.theme-light .cost-card{ background:var(--panel); }
body.theme-light .btn:hover{ transform:none; }
/* modals */
body.theme-light .modal{ background:rgba(23,27,34,.45); }
body.theme-light .modal-card{ box-shadow:0 20px 60px rgba(16,24,40,.25); border-color:var(--line); }
body.theme-light .quick-results{ background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.15); }
/* tables & tabs */
body.theme-light .data-table tbody tr:hover{ background:rgba(2,132,199,.05); }
body.theme-light .dt-link{ color:#0369a1; }
body.theme-light .table-toolbar{ background:var(--panel2); }
body.theme-light .tab.active{ background:var(--panel); box-shadow:0 -2px 0 #e8c400 inset; }
body.theme-light .tab:hover{ background:#eceef2; }
body.theme-light .tab.active .tab-ct{ background:none; color:var(--text); }
body.theme-light .cert-table tbody tr:nth-child(even) td, body.theme-light .ovh-table tbody tr:nth-child(even) td{ background:rgba(16,24,40,.02); }
body.theme-light .cert-table tbody tr:hover td{ background:rgba(255,221,51,.08); }
body.theme-light table.mats th{ background:var(--panel2); }
/* headers & identity colours tuned for white */
body.theme-light .view-head h1{ color:#16181d; }
body.theme-light .job-cust{ --sec:#0e7490; }
body.theme-light .job-diary.jd-log{ --sec:#059669; }
body.theme-light .job-diary.jd-exp{ --sec:#a87e00; }
body.theme-light .job-diary.jd-act{ --sec:#64748b; }
body.theme-light #csec-details, body.theme-light #csec-install, body.theme-light #csec-summary{ --csec:#0e7490; }
body.theme-light #csec-supply, body.theme-light .cert-sec.sec-board{ --csec:#a87e00; }
body.theme-light #csec-inspection, body.theme-light #csec-pat, body.theme-light #csec-eml{ --csec:#059669; }
body.theme-light #csec-obs, body.theme-light #csec-fire{ --csec:#dc2626; }
body.theme-light #csec-sign{ --csec:#64748b; }
body.theme-light .insp-write.obs-C3{ border-left-color:#d97706; }
body.theme-light .insp-write.obs-C2{ border-left-color:#ea580c; }
body.theme-light .insp-write.obs-FI{ border-left-color:#0e7490; }
body.theme-light .obs-C3{ color:#b45309; }
body.theme-light .remedial-banner{ border-color:#e8c400; background:linear-gradient(90deg, rgba(255,221,51,.15), rgba(14,116,144,.05)); }
body.theme-light .iw-myth{ border-color:#e0c34d; background:rgba(255,221,51,.08); color:#6b5d20; }
/* amber-background elements keep the true yellow with dark text */
body.theme-light .qr-badge.kit{ background:#ffdd33; color:#16181d; }
body.theme-light .ai-user{ background:#ffdd33; color:#16181d; }
body.theme-light .ai-fab{ border-color:rgba(0,0,0,.12); }
body.theme-light .nj-add::after{ background:#ffdd33; color:#16181d; }
body.theme-light .room-head{ background:linear-gradient(90deg, rgba(168,126,0,.1), var(--panel2) 65%); border-left-color:#d9a900; }
body.theme-light .room-name{ color:#8a6800; }
/* scrollbars & backdrops */
body.theme-light ::-webkit-scrollbar-thumb{ background:#c9cfd8; }
body.theme-light ::-webkit-scrollbar-thumb:hover{ background:#aeb6c2; }
body.theme-light .menu-backdrop{ background:rgba(23,27,34,.4); }
/* breathing room — less is more */
body.theme-light main{ padding:28px 36px 70px; }
body.theme-light .view-head{ border-bottom-color:var(--line); }
@media (max-width:860px){ body.theme-light main{ padding:16px 14px 90px; } }

/* dashboard folds (queues / tasks tucked away until needed) */
.dash-fold{ background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.dash-fold summary{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer;
  list-style:none; font-weight:700; font-size:13px; }
.dash-fold summary::-webkit-details-marker{ display:none; }
.dash-fold summary::before{ content:'▸'; color:var(--muted); transition:transform .15s; }
.dash-fold[open] summary::before{ transform:rotate(90deg); }
.dash-fold > *:not(summary){ padding:0 14px 12px; }
body.theme-light .dash-fold{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.dash-kpis{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ============================================================
   TRADIFY-MATCH PASS (Daylight) — breadcrumb bar, block tabs,
   solid pills, sortable headers, dashboard grid & tiles
   ============================================================ */
/* editorial page headers — headline on the canvas, no chrome around it */
body.theme-light .view-head{ background:none; border:none; border-radius:0;
  padding:0 0 4px; margin:0 0 18px; box-shadow:none; }
body.theme-light .view-head::after{ display:none; }
body.theme-light .view-head h1{ font-size:24px; font-weight:600; letter-spacing:-.4px; }
body.theme-light .lead{ display:none; }
body.theme-light .section-h{ font-size:14px; }
/* tabs: quiet underline — text on the canvas, one yellow rule under the active one */
body.theme-light .tabs{ border-bottom:1px solid var(--line); gap:0; padding:0 2px; }
body.theme-light .tab{ background:none; border:none; color:var(--muted);
  border-radius:0; margin-right:16px; padding:9px 2px; }
body.theme-light .tab:hover{ background:none; color:var(--text); }
body.theme-light .tab.active{ background:none; color:var(--text); box-shadow:none; position:relative; z-index:2; }
body.theme-light .tab .tab-ct{ background:none; color:var(--muted); padding:1px 2px; }
body.theme-light .tab.active .tab-ct{ background:none; color:var(--text); }
body.theme-light .table-card{ position:relative; z-index:1; margin-top:12px; border-radius:14px; }
/* status pills & selects: solid fill, white text */
body.theme-light .status-pill{ background:var(--pc,#6b7280); color:#fff !important; border:none; padding:4px 12px; }
body.theme-light .data-table .status-sel{ background:var(--pc,#6b7280); color:#fff !important; border:none;
  font-weight:700; border-radius:14px; padding:4px 10px; }
body.theme-light .data-table .status-sel option{ background:#fff; color:#1a1d23; }
body.theme-light .data-table .queue-sel{ background:#fff; color:var(--muted) !important; border:1px solid #d6dae1; }
/* sortable headers */
.th-sort{ cursor:pointer; user-select:none; }
.th-arr{ font-size:9px; opacity:.45; }
.th-sort.on .th-arr{ opacity:1; color:var(--amber); }
.th-sort:hover{ color:var(--text); }
.th-ck{ width:34px; text-align:center; }
.th-ck input{ transform:scale(1.15); accent-color:#0ea5e9; }
/* dashboard grid: today's jobs + solid tiles + module cards */
.tf-grid{ display:grid; grid-template-columns:1fr 300px; gap:14px; margin-bottom:14px; }
@media (max-width:1000px){ .tf-grid{ grid-template-columns:1fr; } }
.tf-today{ min-height:170px; margin-bottom:0; }
.tf-jobrow{ display:flex; gap:12px; align-items:center; padding:9px 6px; border-bottom:1px solid var(--line);
  cursor:pointer; border-radius:6px; }
.tf-jobrow:hover{ background:rgba(2,132,199,.05); }
.tf-jobrow:last-child{ border-bottom:none; }
.tf-tiles{ display:flex; flex-direction:column; gap:14px; }
.tf-tile{ flex:1; border-radius:12px; padding:18px 20px; color:#fff; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 2px 8px rgba(16,24,40,.15); }
.tf-blue{ background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.tf-green{ background:linear-gradient(135deg,#10b981,#059669); }
.tf-tile-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; opacity:.9; }
.tf-tile-val{ font-family:var(--font-display); font-size:30px; font-weight:700; }
.tf-tile-sub{ font-size:12px; opacity:.85; }
.tf-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:14px; }
.tf-card{ margin-bottom:0; padding:14px 16px 8px; }
.tf-card-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:6px; }
.tf-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 2px; font-size:13px;
  border-top:1px solid var(--line); cursor:pointer; }
.tf-row:first-of-type{ border-top:none; }
.tf-row:hover{ color:var(--text); background:rgba(2,132,199,.03); }
.tf-ct{ background:none; color:var(--pc,var(--muted)); border-radius:0; padding:0 2px; font-size:13px; font-weight:700; min-width:24px; text-align:right; font-variant-numeric:tabular-nums; }
/* dark theme fallbacks so the new dash reads there too */
body:not(.theme-light) .tf-tile{ box-shadow:none; }
body:not(.theme-light) .tab .tab-ct{ background:var(--panel2); }

/* ============================================================
   OUR SPIN — same bones, Stacked Out colours only.
   Tiles = the diary logo: gold slot (booked today), charcoal
   slot with the signature gradient (tomorrow's enquiries).
   ============================================================ */
.tf-gold{ background:linear-gradient(135deg,#ffe566,#ffd60a); color:#16181d; }
.tf-gold .tf-tile-label{ color:#5c4d00; opacity:1; }
.tf-gold .tf-tile-sub{ color:#5c4d00; opacity:1; }
.tf-ink{ background:linear-gradient(135deg,#1c1f27,#0e1013); color:#f5f6f8; }
.tf-ink .tf-tile-val{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.tf-ink .tf-tile-label{ color:#9aa1ab; }
.tf-ink .tf-tile-sub{ color:#9aa1ab; }
/* links, hovers, focus — cyan family, not Tradify blue */
body.theme-light .dt-link{ color:#0e7490; }
body.theme-light .data-table tbody tr:hover{ background:rgba(14,116,144,.05); }
.tf-jobrow:hover{ background:rgba(14,116,144,.05); }
.tf-row:hover{ background:rgba(14,116,144,.04); }
.th-ck input{ accent-color:#d9a900; }
/* module cards: quiet titles, no keylines */
.tf-card-title{ display:flex; align-items:center; gap:8px; }
body.theme-light .table-toolbar .tab-ct{ background:none; color:#8a6800; }

/* every-page pass: customers table expansion, calendar card, settings nav */
.cust-caret{ color:var(--muted); font-size:12px; }
tr.cust-exp{ cursor:default; }
tr.cust-exp:hover{ background:transparent !important; }
tr.cust-exp > td{ background:var(--panel2); padding:16px 18px; }
body.theme-light tr.cust-exp > td{ background:#fafbfc; }
.cust-exp .cust-body{ padding:0; }
/* calendar reads as one clean card */
#cal-body{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }
body.theme-light #cal-body{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
body.theme-light .cal-cell{ box-shadow:none; border-color:var(--line); }
/* materials/kits tabs sit flush over their card */
#mat-cats .tabs{ padding:0 4px; }
.set-nav{ position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; margin-bottom:12px; }

/* job card tabs: the sections live behind tabs, page stays clean */
.job-tabs{ margin:10px 0 0; }
.job-pane{ border-radius:0 14px 14px 14px; margin-top:-1px; }
.job-pane .sec-head{ border-radius:0 14px 0 0; }
#job-cust.job-pane{ margin-top:-1px; }

/* ============================================================
   ONE-SHEET JOB CARD — the tabs are pages of the same card
   ============================================================ */
#job-sheet{ background:var(--panel); border:1px solid var(--line);
  border-radius:0 14px 14px 14px; padding:16px 16px 20px; margin-top:-1px; }
body.theme-light #job-sheet{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
/* inner blocks sit flat on the sheet — no card-on-card */
#job-sheet .job-box{ background:var(--panel2); border-color:var(--line); box-shadow:none; margin-bottom:12px; }
#job-sheet .quote-side .panel{ box-shadow:none; }
body.theme-light #job-sheet .quote-side .panel{ background:#fafbfc; }
#job-sheet .quick-add input{ background:var(--panel2); }
body.theme-light #job-sheet .quick-add input{ background:#fafbfc; }
/* the panes are the same sheet, different page */
.job-pane{ background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:0 14px 14px 14px !important; margin-top:-1px !important; padding:16px !important; }
body.theme-light .job-pane{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.job-pane .sec-head{ display:none; }  /* the active tab IS the heading */
.job-tabs{ margin-top:12px; }
.job-tabs .tab.active{ font-weight:700; }

/* ============================================================
   QUOTE GRID — one row per line, expandable detail
   ============================================================ */
.qg-card{ border-radius:14px; margin-bottom:4px; }
.quote-grid td{ padding:9px 10px; }
.quote-grid input.mini{ width:64px; }
/* v431: the Spec column holds the variant dropdown — give it a real min-width so
   the greedy Item column (width:100%) can't squash the <select> to unreadable */
.quote-grid .qg-variant{ min-width:150px; width:100%; max-width:240px; font-size:12.5px; padding:6px 9px; }
.quote-grid tr.qg-row > td:nth-child(2), .quote-grid thead th:nth-child(2){ min-width:164px; }
.quote-grid .qg-margin{ color:var(--green); font-weight:600; }
.quote-grid tbody tr.qg-row{ cursor:default; }
.qg-caret{ font-size:13px; width:24px; }
tr.qg-room td{ background:linear-gradient(90deg, color-mix(in srgb, #ffd60a 12%, var(--panel2)), var(--panel2) 65%) !important;
  border-left:4px solid #ffd60a; font-weight:800; padding:9px 12px; }
tr.qg-room .room-name{ font-family:var(--font-display); font-size:14px; }
tr.qg-room .room-tots{ float:right; font-weight:500; font-size:12px; color:var(--muted); }
tr.qg-exp > td{ background:var(--panel2); padding:14px 16px; }
body.theme-light tr.qg-exp > td{ background:#fafbfc; }
tr.qg-exp:hover{ background:transparent !important; }
.qg-exp-grid{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
table.qg-mats{ width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
.qg-mats th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--line); }
.qg-mats td{ padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.qg-qa td{ padding:8px 10px !important; }
.qg-qa .quick-add input{ padding:9px 12px; border-style:dashed; background:transparent; }
.qg-qa .quick-add input:focus{ border-style:solid; background:var(--panel); }
.qg-empty-room td{ padding:14px; font-size:12.5px; }
.qg-add{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.quote-grid .dt-sub{ margin-top:1px; }
@media (max-width:900px){ .quote-grid input.mini{ width:54px; } .quote-grid td{ padding:8px 6px; } }

/* quote grid: every line reads as its own band — clear grooves between rows */
.quote-grid{ border-collapse:separate; border-spacing:0; }
.quote-grid thead th{ border-bottom:1px solid var(--line); }
.quote-grid tbody tr.qg-row > td,
.quote-grid tbody tr.qg-room > td,
.quote-grid tbody tr.qg-qa > td,
.quote-grid tbody tr.qg-empty-room > td{
  border-top:8px solid var(--bg); border-bottom:none; background:var(--panel);
}
.quote-grid tbody tr:first-child > td{ border-top:none; }
/* the expansion stays glued to its line — a quiet dashed join, no groove */
.quote-grid tbody tr.qg-exp > td{ border-top:1px dashed var(--line); border-bottom:none; }
/* rows breathe and centre */
.quote-grid tbody tr.qg-row > td{ padding-top:10px; padding-bottom:10px; vertical-align:middle; font-variant-numeric:tabular-nums; }
/* the item name LEADS — bigger, bolder, easy to scan; its column takes the slack
   so the numbers cluster tight on the right (short eye-travel), not spread out */
.quote-grid tbody tr.qg-row td:first-child{ min-width:210px; width:100%; font-size:15px; }
.quote-grid thead th:first-child{ width:100%; }
.quote-grid .qg-title{ font-size:15px; font-weight:700; letter-spacing:-.012em; }
/* the money reads clearly — bold, aligned, tabular figures */
.quote-grid .job-val{ font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
.quote-grid tr.qg-row > td.r{ white-space:nowrap; }
.quote-grid input.mini{ font-size:13px; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#eef0f4; }
body.theme-light .quote-grid tbody tr.qg-room > td,
body.theme-light .quote-grid tbody tr.qg-qa > td,
body.theme-light .quote-grid tbody tr.qg-empty-room > td{ border-top-color:#eef0f4; }

/* the open/close control: obvious, labelled, at the FRONT of the row */
.qg-open{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .12s ease; line-height:1; }
.qg-open:hover{ border-color:#d9a900; color:var(--text); background:rgba(255,221,51,.15); transform:scale(1.08); }
.qg-open.on{ background:#ffd60a; border-color:#e8c400; color:#16181d; }
.qg-title{ cursor:pointer; }
.qg-title:hover{ text-decoration:underline; text-decoration-color:#d9a900; text-underline-offset:3px; }
.qg-sub{ cursor:pointer; color:var(--amber-dk); /* v537 audit A15: hard-coded light amber leaked into dark */ font-weight:600; }
.qg-sub:hover{ text-decoration:underline; }
body:not(.theme-light) .qg-sub{ color:#d9a900; }

/* action tabs: same strip, same shape — icon-led, live clock goes gold */
.tab-gap{ margin-left:auto; }
.tab-action{ color:var(--muted); }
.tab-action:hover{ color:var(--text); }
.tab.tab-live{ background:#ffd60a; color:#16181d; border-color:#e8c400; font-weight:800; }
@media (max-width:900px){ .tab-gap{ margin-left:0; flex-basis:100%; height:0; } }

/* expand chevron: small, subtle, unmistakable */
.qg-chev{ display:inline-block; width:16px; margin-right:4px; cursor:pointer;
  color:#b08900; font-size:11px; transition:transform .12s ease; user-select:none; }
.qg-chev:hover{ transform:scale(1.3); }
.qg-chev.on{ color:var(--amber-dk); }
body:not(.theme-light) .qg-chev{ color:#d9a900; }
/* retire the old fat button style */
.qg-open{ display:none; }

/* ============================================================
   SCHEDULER — dispatch board (day / week / month)
   ============================================================ */
.sched-bar{ display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sched-title{ font-family:var(--font-display); font-size:15px; }
/* Two groups so the toolbar wraps cleanly on a phone: the view tabs sit on the
   first row, and the date title + ← Today → nav travel together on the next —
   title left, nav right, no empty gap. Desktop is unchanged (both on one row,
   nav far right). Fixes "the select-date toggle doesn't fit" across day/week/month. */
.sched-left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sched-right{ display:flex; gap:10px; align-items:center; flex:1 1 auto; }
.sched-nav{ display:flex; gap:6px; align-items:center; margin-left:auto; }
.sched-wrap{ display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:start; }
@media (max-width:900px){ .sched-wrap{ grid-template-columns:1fr; } }
.sched-tray{ background:var(--panel); border:1px dashed rgba(176,137,0,.5); border-radius:12px; padding:12px; min-height:120px; }
.sched-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:1100px){ .sched-week{ grid-template-columns:repeat(2,1fr); } }
.sched-col{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; min-height:150px; }
body.theme-light .sched-col{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.sched-col.sched-today{ border-color:#e8c400; box-shadow:0 0 0 1px #e8c400 inset, 0 1px 3px rgba(16,24,40,.07); }
.sched-col-head{ font-weight:800; font-size:12.5px; padding:2px 4px 8px; display:flex; align-items:center; gap:6px; }
.sched-today .sched-col-head{ color:#8a6800; }
.sb{ background:var(--panel2); border:1px solid var(--line); border-left:4px solid var(--sc,#9aa1ab);
  border-radius:9px; padding:7px 9px; margin-bottom:6px; font-size:12.5px; cursor:pointer; transition:all .12s; }
body.theme-light .sb{ background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.08); }
.sb:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(16,24,40,.14); }
.sb-top{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.sb-win{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--sc,#9aa1ab);
  background:color-mix(in srgb, var(--sc,#9aa1ab) 12%, transparent); border-radius:6px; padding:1px 6px; }
.sb-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.sb-warn{ margin-left:auto; }
.sb-conf{ border-color:#dc2626; box-shadow:0 0 0 1px #dc2626 inset; }
.sb-leave{ opacity:.75; border-style:dashed; cursor:default; }
.sb-tray{ border-left-color:#b08900; }
.sb-over{ outline:2px dashed #d9a900; outline-offset:2px; }
.sched-drop-hint{ border:1px dashed var(--line); border-radius:8px; padding:12px; text-align:center;
  color:var(--muted); font-size:11px; opacity:.7; }
.sched-day{ display:grid; gap:4px 6px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px; }
.sched-hour{ font-size:10.5px; color:var(--muted); text-align:right; padding-top:6px; }
.sched-cell{ border:1px dashed color-mix(in srgb, var(--line) 60%, transparent); border-radius:8px; min-height:40px; padding:2px; }
.sched-cell .sb{ margin-bottom:2px; }
.msg-panel{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;
  padding:10px 12px; border-radius:10px; border:1px solid rgba(176,137,0,.4); background:rgba(255,221,51,.07); }

/* arming: booking a job from the board */
.arm-banner{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px;
  padding:12px 14px; border-radius:12px; border:1px solid #e8c400;
  background:linear-gradient(90deg, rgba(255,221,51,.15), rgba(63,227,255,.05)); font-size:13px; }
.sched-armable{ cursor:copy; outline:1px dashed rgba(217,169,0,.5); outline-offset:-3px; }
.sched-armable:hover{ background:rgba(255,221,51,.08); }

/* ============================================================
   🚐 MY DAY — the engineer's screens (mobile-first, big targets)
   ============================================================ */
.eng-topbar{ display:flex; gap:10px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap; }
.eng-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
body.theme-light .eng-card{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.eng-card.eng-live{ border-color:#e8c400; box-shadow:0 0 0 1px #e8c400 inset, 0 1px 3px rgba(16,24,40,.1); }
.eng-card.eng-dim{ opacity:.75; }
.eng-head{ display:flex; gap:12px; align-items:center; padding:13px 14px; cursor:pointer; }
.eng-when{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#8a6800;
  background:rgba(255,221,51,.15); border-radius:8px; padding:6px 10px; white-space:nowrap; }
.eng-who{ flex:1; font-size:14px; }
.eng-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; padding:0 14px 13px; }
.eng-btn{ text-align:center; padding:12px 8px !important; font-size:13.5px !important; }
.eng-body{ border-top:1px dashed var(--line); padding:12px 14px; background:var(--panel2); }
body.theme-light .eng-body{ background:#fafbfc; }
.eng-check{ display:flex; gap:10px; align-items:center; padding:9px 4px; font-size:14px; border-bottom:1px dashed var(--line); cursor:pointer; }
.eng-check.done{ opacity:.55; text-decoration:line-through; }
.eng-check input{ transform:scale(1.3); accent-color:#d9a900; }
@media (max-width:600px){ .eng-actions{ grid-template-columns:1fr 1fr; } }

/* My Day v2 — SM8-pattern week strip, day timeline, bottom bar, actions sheet */
.eng-week{ display:flex; gap:6px; margin-bottom:10px; }
.eng-wd{ flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:7px 2px;
  font:inherit; cursor:pointer; text-align:center; color:var(--muted); position:relative; }
.eng-wd span{ display:block; font-size:10px; font-weight:700; }
.eng-wd strong{ font-size:15px; color:var(--text); }
.eng-wd.on{ border-color:#e8c400; background:rgba(255,221,51,.14); }
.eng-wd.today strong{ color:var(--amber); }   /* v564 A15: was hardcoded #8a6800, the paper-theme token, 3.85:1 on charcoal */
.eng-wd i{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#d9a900; }
.eng-selday{ font-family:var(--font-display); font-weight:700; font-size:15px; margin:4px 0 8px; }
.eng-tl{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  margin-bottom:14px; overflow:hidden; }
body.theme-light .eng-tl{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.eng-tl-hr{ position:absolute; left:0; right:0; border-top:1px solid var(--line); opacity:.6; }
.eng-tl-hr span{ position:absolute; left:6px; top:2px; font-size:9.5px; color:var(--muted); }
.eng-tl-blk{ position:absolute; left:56px; right:8px; border-radius:9px; padding:6px 10px; cursor:pointer;
  background:color-mix(in srgb, var(--sc,#9aa1ab) 14%, var(--panel)); border-left:4px solid var(--sc,#9aa1ab);
  overflow:hidden; font-size:12.5px; }
.eng-tl-blk:hover{ background:color-mix(in srgb, var(--sc,#9aa1ab) 22%, var(--panel)); }
.eng-now{ position:absolute; left:0; right:0; border-top:2px solid #dc2626; z-index:2; }
.eng-now i{ position:absolute; left:50px; top:-4px; width:7px; height:7px; border-radius:50%; background:#dc2626; }
.eng-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:96;
  display:flex; gap:4px; align-items:center; padding:8px 12px; border-radius:26px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 28px rgba(16,24,40,.25); }
.eng-bar .icon-btn{ font-size:19px; padding:8px 10px; }
.eng-bar-job{ font-weight:800; font-size:12px; color:#8a6800; padding:0 4px; }
body:not(.theme-light) .eng-bar{ background:var(--panel2); }
.eng-sheet{ max-width:420px; }
.eng-sheet-list{ display:flex; flex-direction:column; }
.eng-act{ display:flex; gap:10px; align-items:center; padding:13px 6px; border-top:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-bottom:none; font:inherit; font-size:14.5px;
  color:var(--text); cursor:pointer; text-align:left; text-decoration:none; }
.eng-act:hover{ background:rgba(14,116,144,.05); }
.eng-act select{ margin-left:auto; width:auto; max-width:170px; }
@media (max-width:600px){ .eng-bar{ bottom:10px; } .ai-fab{ bottom:74px; } }

/* 👷 engineer mode: delivery only — the office stays at the office.
   v795 — THE TEN data-view NAMES THAT WERE LISTED HERE ARE GONE, and the deletion
   IS the fix, not a tidy-up. They were a second answer to a question ENG_VIEWS
   (js/engineer.js) already answers, a stylesheet cannot ask a function, and the two
   had drifted: `convos` was hidden here while the router allowed it, and `social` —
   never in this list — was offered while the router refused it. engNavSync() now
   resolves every one of these from the routing predicate itself and marks the
   refused ones .nav-off (css/design-c.css). Do NOT put a data-view name back into
   this file: it would silently out-vote the router again and nothing would fail. */
body.eng-mode #setup-card{ display:none !important; }
body.eng-mode .nav-group{ display:none; }
body.eng-noprice .job-val{ display:none !important; }   /* v681: was .eng-mode, which is broader than engHidesMoney() */
/* last belt under the render guard in finhome.js: Home is turnover, debtors and
   margin, so nothing of it renders on an engineer's phone even if a future
   caller reaches renderHome() some way this file cannot see */
body.eng-mode #home-body{ display:none !important; }
body.eng-mode .ai-fab, body.eng-mode .ai-panel{ display:none !important; }
body.eng-mode .head-actions .btn-amber[onclick*="openCustomerQuote"]{ display:none; }
/* the old preview banner reads wrong in real engineer mode */
body.eng-mode.eng-view::after{ content:'👷 Engineer mode — prices & office admin hidden'; }
body.eng-noprice .tf-money{ display:none; }   /* v681: as above */
/* engineer mode: jobs = information about THEIR jobs, nothing else */
body.eng-mode #jobs-dash{ display:none; }
body.eng-mode #view-jobs .head-actions,
body.eng-mode .table-toolbar .btn-amber{ display:none; }
body.eng-mode .th-ck, body.eng-mode .data-table .queue-sel{ display:none; }

/* engineer job card */
.ej-start{ width:100%; padding:20px; font:inherit; font-family:var(--font-display); font-size:19px; font-weight:800;
  letter-spacing:.5px; border:none; border-radius:16px; cursor:pointer; margin:2px 0 14px;
  background:linear-gradient(135deg,#ffe566,#ffd60a); color:#16181d; box-shadow:0 3px 12px rgba(16,24,40,.15); }
.ej-start:active{ transform:scale(.99); }
.ej-start.ej-running{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.ej-elapsed{ font-size:13px; font-weight:600; opacity:.9; }
.ej-sec{ margin-bottom:12px; }
.ej-addr{ margin:0 0 10px; font-size:14px; }
.ej-line{ padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.ej-line:last-child{ border-bottom:none; }
/* engineer-mode badge: small corner chip, off the action bar */
body.eng-mode.eng-view::after{ top:10px; bottom:auto; left:auto; right:10px; transform:none;
  font-size:9.5px; padding:4px 10px; opacity:.9; }

/* engineer mode on the scheduler: their diary, read-friendly */
body.eng-mode .sched-tray{ display:none; }
body.eng-mode .sched-wrap{ grid-template-columns:1fr; }

/* ============================================================
   MOBILE CERTIFICATES — the app fills EICRs on a phone
   (the editor's grids carry inline column counts; on narrow
   screens we overrule them so every box lines up)
   ============================================================ */
@media (max-width:700px){
  .cert-sec .set-grid, #view-certs .set-grid{ grid-template-columns:1fr 1fr !important; gap:10px; }
  .cert-sec .set-grid label[style*="grid-column"], #view-certs .set-grid label[style*="grid-column"]{ grid-column:1/-1 !important; }
  .cert-nav{ position:static; }
  .insp-row{ flex-wrap:wrap; }
  .insp-desc{ min-width:0; flex-basis:100%; }
  .insp-loc{ flex:1; width:auto; }
  .obs-row .obs-txt{ flex-basis:100%; }
  .insp-write{ margin-left:0; }
  .iw-row input{ flex:1; min-width:100px; }
  .cchk-row{ flex-wrap:wrap; }
}
@media (max-width:430px){
  .cert-sec .set-grid, #view-certs .set-grid{ grid-template-columns:1fr !important; }
  .cert-sec > h3:first-child{ font-size:12.5px; }
  .dash-bar .job-chip-badge{ font-size:12px; }
}

/* ============================================================
   CALM PASS v104 — less ink, one accent, quiet type
   ============================================================ */
/* collapsible sidebar: « docks it away, ☰ brings it back as an overlay */
.logo-row2{ display:flex; align-items:center; justify-content:space-between; padding-right:4px; }
.nav-collapse{ background:none; border:1px solid transparent; color:#7c8592; font:inherit; font-size:16px;
  border-radius:8px; padding:2px 9px; cursor:pointer; }
.nav-collapse:hover{ color:#f5f6f8; border-color:#2a2e37; }
body.nav-min .sidebar{ position:fixed; left:0; top:0; z-index:99; height:100vh; height:100dvh;
  transform:translateX(-110%); transition:transform .22s ease; box-shadow:8px 0 32px rgba(0,0,0,.5); width:240px; }
body.nav-min .sidebar.open{ transform:translateX(0); }
body.nav-min .menu-btn{ display:block; }
body.nav-min .menu-backdrop.open{ display:block; }
body.nav-min main{ padding-left:36px; }
@media (max-width:860px){ body.nav-min main{ padding-left:14px; } }

/* quiet headings: sentence case, charcoal, no bars, no gradients */
.panel h3, .cert-sec h3, .cert-sec > h3:first-child, .cert-check > h3:first-child{
  font-family:var(--font-ui) !important; font-size:13px !important; font-weight:650 !important;
  text-transform:none !important; letter-spacing:0 !important; color:var(--text) !important;
  background:none !important; border-bottom:1px solid var(--line); margin:-2px 0 12px !important;
  padding:0 0 8px !important; border-radius:0 !important;
}
.panel h3::before, .cert-sec h3::before, .cert-sec > h3:first-child::before, .cert-check > h3:first-child::before{ display:none !important; }
.cert-sec{ border-left:1px solid var(--line) !important; }
.tf-card-title{ text-transform:none; letter-spacing:0; font-size:13px; color:var(--text); font-weight:650; }
.tf-card-title::before{ display:none; }
.test-title{ text-transform:none !important; letter-spacing:0 !important; color:var(--muted) !important; font-size:12px !important; }
.sec-head{ background:none !important; border-bottom:1px solid var(--line) !important; color:var(--text) !important;
  text-transform:none !important; letter-spacing:0 !important; font-family:var(--font-ui) !important; }
/* explainer sentences off the screen (they live on in tooltips where set) */
.panel h3 .muted, .cert-sec h3 .muted, summary .muted.small, .tf-card-title .muted,
.view-head .lead, .sched-col-head .muted{ display:none !important; }
/* tables: lowercase quiet headers, grey badges */
.data-table th, table.mats th, .qg-mats th, .cert-table th{ text-transform:none; letter-spacing:.2px; font-size:11px; }
.tab-ct{ background:none !important; color:var(--muted) !important; border-radius:0 !important; padding:1px 2px !important; }
.tab.active .tab-ct{ background:none !important; color:var(--text) !important; }
/* flatter cards: border OR shadow, not both */
body.theme-light .panel, body.theme-light .cost-card, body.theme-light .kit-card,
body.theme-light .staff-card, body.theme-light .job-diary, body.theme-light .job-cust,
body.theme-light .insp-sec, body.theme-light .eng-card, body.theme-light .sched-col{ box-shadow:none; }
/* add-language: dashed but quiet */
button.btn-add, .nj-add{ border-color:#cfd4db !important; color:var(--text) !important; background:transparent !important; }
.nj-add::after{ background:#e5e7eb !important; color:#4b5563 !important; box-shadow:none !important; }
/* quote grid room band: grey, one gold tick */
tr.qg-room td{ background:var(--panel2) !important; border-left:3px solid #ffd60a; }
tr.qg-room .room-name{ font-family:var(--font-ui); font-size:13px; color:var(--text); }
.room-head{ background:var(--panel2) !important; border-left:3px solid #ffd60a !important; border-top:none !important; }
.room-name{ color:var(--text) !important; font-size:14px !important; }
/* gold hints under quote lines: grey until hover */
.qg-sub{ color:var(--muted); font-weight:500; }
.qg-sub:hover{ color:#8a6800; }
.qg-chev{ color:#a9b0ba; }
.qg-chev:hover, .qg-chev.on{ color:#8a6800; }
/* cert nav dots + cn-dots: gone (colour was decoration there) */
.cn-dot{ display:none; }
/* scheduler block window chips: quiet */
.sb-win{ background:var(--panel2); color:var(--muted); }

/* job description: one quiet box, AI behind the corner button (the SM8 pattern) */
.jd-box{ position:relative; margin-bottom:12px; }
.jd-box textarea{ resize:none; overflow:hidden; padding-right:52px; min-height:58px; }
.jd-ai{ position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%;
  border:1px solid #e8c400; background:#fff; color:#8a6800; font-size:15px; cursor:pointer;
  box-shadow:0 1px 3px rgba(16,24,40,.12); transition:all .12s; }
.jd-ai:hover{ background:#ffd60a; color:#16181d; transform:scale(1.06); }
body:not(.theme-light) .jd-ai{ background:var(--panel2); }
.jd-menu{ position:absolute; right:8px; bottom:48px; z-index:40; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.16);
  display:flex; flex-direction:column; min-width:230px; overflow:hidden; }
.jd-menu button{ background:none; border:none; font:inherit; font-size:13.5px; color:var(--text);
  text-align:left; padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--line); }
.jd-menu button:last-child{ border-bottom:none; }
.jd-menu button:hover{ background:rgba(255,221,51,.12); }
.jd-status{ font-size:12px; color:var(--muted); margin-top:4px; min-height:0; }

/* the one job description box: grows, collapses, builds quotes */
.jd-box textarea.jd-collapsed{ overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); }
.jd-more{ display:block; margin:2px auto 0; background:none; border:none; font:inherit; font-size:12px;
  color:var(--muted); cursor:pointer; }
.jd-more:hover{ color:#8a6800; }
.jd-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* corner button while dictating: red, pulsing, tap to stop */
.jd-ai.rec{ background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important;
  animation:pulse 1.2s ease-in-out infinite; }
.jd-menu .jd-primary{ font-weight:700; background:rgba(255,221,51,.12); }
/* description tools: one quiet row, no popovers to fight the phone */
.jd-box textarea{ padding-right:14px; }
.jd-tools{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jd-tools .btn.small{ padding:5px 11px; font-size:12px; }
.jd-ai, .jd-menu{ display:none !important; }
/* description box: one shell — the tools visibly belong to it */
.jd-shell{ border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
body.theme-light .jd-shell{ box-shadow:0 1px 3px rgba(16,24,40,.07); border-color:#d6dae1; }
.jd-shell textarea{ border:none !important; box-shadow:none !important; background:transparent !important;
  border-radius:0; min-height:96px; padding:12px 14px; }
.jd-shell textarea:focus{ box-shadow:none !important; }
.jd-shell .jd-tools{ margin:0; padding:8px 10px; border-top:1px solid var(--line); background:var(--panel2); }
body.theme-light .jd-shell .jd-tools{ background:#f7f8fa; }
.jd-more{ display:none !important; }

/* rich description editor */
.jd-fmt{ display:flex; gap:2px; flex-wrap:wrap; align-items:center; padding:6px 8px;
  border-bottom:1px solid var(--line); background:var(--panel2); }
body.theme-light .jd-fmt{ background:#f7f8fa; }
.jd-fmt button{ background:none; border:1px solid transparent; border-radius:6px; font:inherit; font-size:13px;
  width:30px; height:28px; cursor:pointer; color:var(--text); }
.jd-fmt button:hover{ background:#fff; border-color:#d6dae1; }
body:not(.theme-light) .jd-fmt button:hover{ background:var(--panel); border-color:var(--line); }
.jd-sel{ width:auto !important; font-size:12px; padding:3px 6px; border:1px solid transparent !important; background:none !important; }
.jd-sel:hover{ border-color:#d6dae1 !important; background:#fff !important; }
.jd-sep{ width:1px; height:18px; background:var(--line); margin:0 5px; }
.jd-hl{ background:#fff3b0; padding:0 3px; border-radius:3px; }
.jd-editor{ min-height:96px; padding:12px 14px; font:inherit; line-height:1.55; outline:none; }
.jd-editor:empty::before{ content:attr(data-ph); color:var(--muted); pointer-events:none; }
.jd-editor ul, .jd-editor ol{ margin:6px 0 6px 22px; }
.jd-editor a{ color:#0e7490; text-decoration:underline; }
.ej-desc{ margin:0 0 10px; font-size:14px; line-height:1.55; }
.ej-desc ul, .ej-desc ol{ margin:6px 0 6px 22px; }

/* the ☰ gets its own headroom — content starts below it, nothing overlaps */
body.nav-min main{ padding-top:64px; }
@media (max-width:860px){
  /* R8: same retirement as the 56px rule below — headroom for the floating ☰,
     which the certificate workspace does not show. `body:not(.bw-world)` keeps
     it for every surface that does. */
  body:not(.bw-world) main{ padding-top:64px !important; }
  .view-head{ padding-left:16px; min-height:0; }   /* old left-shunt hack retired */
}
.menu-btn{ top:10px; left:10px; font-size:17px; padding:7px 12px; }
body.nav-min main{ padding-top:64px !important; }

/* the job header breathes: bigger row, bigger tabs, proper spacing */
.job-chip-row{ gap:12px; row-gap:10px; padding:6px 0 2px; }
.job-chip-row .btn.small{ padding:9px 16px; font-size:13.5px; }
.job-chip-badge{ font-size:15px; padding:8px 18px; }
.job-chip-row .status-pill{ font-size:12.5px; padding:6px 15px; }
.job-chip-row .queue-sel{ font-size:13px; padding:8px 12px; max-width:200px; }
.job-chip-row .autosave{ padding:6px 12px; }
/* job-card tabs: PAGES of the job card — folder tabs planted on a baseline.
   Curved tops, flat bottoms on the line, neighbours shingle behind; the one
   you're on sits proud in ink + yellow and punches through the line. */
.job-tabs{ margin-top:16px; display:flex; flex-wrap:wrap; gap:0; align-items:flex-end;
  background:none; border:none; border-radius:0; padding:0 6px;
  border-bottom:1px solid var(--line); }
.job-tabs .tab{ background:var(--panel2); border:1px solid var(--line); border-radius:14px 14px 0 0;
  padding:10px 18px 11px; font-size:13.5px; color:var(--muted);
  margin:0 0 -1px -9px; position:relative; z-index:1;
  box-shadow:none; transition:background .12s, color .12s; }
.job-tabs .tab:first-child{ margin-left:0; }
body.theme-light .job-tabs .tab{ background:#f0f0ea; border:1px solid #d6dae1; border-radius:14px 14px 0 0;
  margin-right:0; padding:10px 18px 11px; }
.job-tabs .tab:hover, body.theme-light .job-tabs .tab:hover{
  background:var(--panel); color:var(--text); z-index:2; transform:none; box-shadow:none; border-color:#b9c0ca; }
.job-tabs .tab:hover::after{ display:none; }
.job-tabs .tab.active, body.theme-light .job-tabs .tab.active{
  background:#16181d; border-color:#16181d; color:#ffdd33; font-weight:700;
  z-index:3; padding-top:12px; box-shadow:0 -2px 8px rgba(16,24,40,.15); }
.job-tabs .tab.active:hover{ background:#16181d; color:#ffdd33; }
.job-tabs .tab.active::after{ display:none; }
.job-tabs .tab-ct, .job-tabs .tab.active .tab-ct{
  background:#ffdd33 !important; color:#16181d !important; border-radius:10px !important;
  padding:1px 7px !important; min-width:19px; text-align:center !important; font-size:11.5px; margin-left:7px; }
.job-tabs .tab-ct.tab-ct-warn{ background:#e24b4a !important; color:#fff !important; }
.job-tabs .tab-action, body.theme-light .job-tabs .tab-action{
  border:1px dashed #b9c0ca; border-radius:16px; background:transparent; box-shadow:none;
  margin:0 0 7px 6px; padding:7px 14px; z-index:1; }
.job-tabs .tab-action:first-of-type{ margin-left:14px; }
.job-tabs .tab-action:hover{ background:var(--panel); z-index:1; }
/* panes no longer join onto block tabs — full radius, a little air */
.job-pane, #job-sheet{ border-radius:14px !important; margin-top:12px !important; }
.job-pane .sec-head{ border-radius:14px 14px 0 0 !important; }
.opt-bar{ margin-top:14px; padding:12px 16px; }
#job-sheet, .job-pane{ padding-top:20px !important; }

/* the job number is the headline (the Tradify lesson, our type) */
.job-crumb{ margin-bottom:10px; }
.job-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 6px; }
.job-title{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.job-title h1{ font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.5px; margin:0; }
.job-who{ font-size:15px; color:var(--muted); font-weight:600; }
.job-status{ font-size:13px !important; padding:7px 12px !important; font-weight:700; }
.job-head-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.job-tabs{ margin-top:20px; }
@media (max-width:700px){ .job-title h1{ font-size:24px; } .job-head{ gap:10px; } }

/* Overview: the job's front door — calm, four clear bands */
.ov-pane{ margin-bottom:12px; }
.ov-facts{ display:flex; gap:26px; flex-wrap:wrap; padding:4px 2px 14px; border-bottom:1px solid var(--line); }
.ov-facts span{ font-size:14.5px; font-weight:650; }
.ov-facts em{ display:block; font-style:normal; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.ov-comms{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.ov-comms .btn{ padding:9px 18px; }
.ov-comms .mini-sel{ min-width:170px; }
#jd-host-over{ padding:14px 0 2px; }
#jd-host-over .jd-box{ margin-bottom:0; }
.ov-timeline{ padding-top:12px; }
@media (max-width:700px){ .ov-facts{ gap:16px; } .ov-comms .btn{ flex:1; text-align:center; } }

/* rooms read as sections: deep groove before each, subtotal underlining each */
.quote-grid tbody tr.qg-room > td{ border-top:18px solid var(--bg) !important; }
.quote-grid tbody tr:first-child.qg-room > td{ border-top:none !important; }
tr.qg-subtotal > td{ border-top:1px solid var(--line); padding:10px 12px; font-size:13px;
  color:var(--muted); background:var(--panel); }
tr.qg-subtotal strong{ color:var(--text); font-family:var(--font-display); font-size:14.5px; }
tr.qg-subtotal:hover{ background:transparent !important; }
body.theme-light .quote-grid tbody tr.qg-room > td{ border-top-color:#eef0f4 !important; }
/* engineers do not get the office Home — v795: said twice, here and at the block
   above, and now said once, by engNavSync() asking the router. The Home BODY guard
   (body.eng-mode #home-body) is a different rule and stays: it is about markup
   already painted, not about the button. */

/* ============================================================
   HOME BRIEFING — the front door reads like a morning brief,
   not a widget grid. One gradient moment per page, here only.
   ============================================================ */
.hb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin:6px 0 24px; flex-wrap:wrap; }
.hb-kicker{ font-size:12px; color:var(--muted); letter-spacing:.04em; margin-bottom:6px; }
.hb-greet{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.5px; margin:0; }
.hb-sum{ color:var(--muted); font-size:14px; margin:7px 0 0; max-width:560px; }
.hb-grad{ width:110px; height:3px; margin-top:14px; border-radius:2px;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.hb-sec{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase;
  margin:26px 0 4px; }
.hb-row{ display:flex; align-items:center; gap:16px; padding:13px 2px; border-top:1px solid var(--line); cursor:pointer; }
.hb-row:hover{ background:rgba(14,116,144,.04); }
.hb-time{ font-family:var(--font-display); font-weight:500; font-size:15px; width:52px; flex-shrink:0; }
.hb-job{ font-weight:600; font-size:14px; }
.hb-val{ font-family:var(--font-display); font-weight:600; font-size:16px; }
.hb-empty{ color:var(--muted); padding:14px 2px; border-top:1px solid var(--line); font-size:13.5px; }
.hb-need{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid var(--line); font-size:13.5px; flex-wrap:wrap; }
.hb-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hb-need-txt{ flex:1; min-width:200px; }
.hb-need-act{ display:flex; gap:6px; flex-wrap:wrap; }
.hb-links{ display:flex; gap:8px 22px; flex-wrap:wrap; margin-top:26px; padding:12px 2px 0; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); }
.hb-links span{ cursor:pointer; }
.hb-links span:hover{ color:var(--text); text-decoration:underline; }
.hb-links .hb-alert{ color:var(--red); font-weight:600; }
.hb-stats{ display:flex; gap:34px; align-items:flex-end; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.hb-stat{ cursor:pointer; }
.hb-fig{ font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.hb-fig.hb-warm{ color:#b45309; }
.hb-lbl{ font-size:12px; color:var(--muted); margin-top:2px; }
.hb-periods{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-self:center; }
@media (max-width:860px){
  .hb-head{ margin-top:34px; }
  .hb-greet{ font-size:24px; }
  .hb-stats{ gap:22px; }
  .hb-periods{ margin-left:0; }
}

/* ---------- home v2: stat drop-downs, money chart, tasks fold ---------- */
.hb-chev{ display:inline-block; font-size:9px; transition:transform .15s; opacity:.6; }
.hb-stat.on .hb-chev{ transform:rotate(180deg); }
.hb-stat.on .hb-fig{ color:#8a6800; }
body:not(.theme-light) .hb-stat.on .hb-fig{ color:var(--amber); }
.hb-expand{ margin-top:10px; padding:2px 14px 8px; background:var(--panel2); border-radius:12px; }
.hb-expand-cap{ font-size:12px; color:var(--muted); padding:10px 2px 2px; }
.hb-expand .hb-row{ border-top-color:var(--line); }
.hb-expand .hb-row:first-of-type{ border-top:none; }
.hb-mini{ padding:9px 2px; }
.hb-expand-foot{ font-size:12.5px; color:var(--muted); padding:8px 2px 4px; }
.hb-expand-foot span{ cursor:pointer; }
.hb-expand-foot span:hover{ color:var(--text); text-decoration:underline; }
.hb-chart svg{ width:100%; height:auto; display:block; margin-top:6px; }
.hbc-won{ fill:#16181d; } body:not(.theme-light) .hbc-won{ fill:#f5f6f8; }
.hbc-paid{ fill:#ffd60a; }
.hbc-axis{ stroke:var(--line); stroke-width:1; }
.hbc-lbl{ fill:var(--muted); font-size:11px; font-family:inherit; }
.hb-legend{ display:flex; gap:18px; align-items:center; font-size:12px; color:var(--muted); margin-top:4px; }
.hb-legend .hbl{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.hbl-won{ background:#16181d; } body:not(.theme-light) .hbl-won{ background:#f5f6f8; }
.hbl-paid{ background:#ffd60a; }
.hb-sec-note{ text-transform:none; letter-spacing:0; font-weight:500; margin-left:10px; }
.hb-fold{ margin-top:26px; }
.hb-fold summary{ cursor:pointer; list-style:none; font-size:12px; font-weight:700; color:var(--muted);
  letter-spacing:.05em; text-transform:uppercase; padding-bottom:4px; }
.hb-fold summary::-webkit-details-marker{ display:none; }
.hb-fold summary::before{ content:'▸'; display:inline-block; margin-right:7px; transition:transform .15s; }
.hb-fold[open] summary::before{ transform:rotate(90deg); }
.hb-count{ text-transform:none; letter-spacing:0; font-weight:500; margin-left:6px; }
.hb-tick{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--muted); font-size:11px; cursor:pointer; flex-shrink:0; line-height:1; }
.hb-tick:hover{ border-color:#059669; color:#059669; background:rgba(5,150,105,.08); }
.hb-late{ color:var(--red); font-weight:600; }
.hb-tlink{ color:#0e7490; font-weight:600; cursor:pointer; }
.hb-tlink:hover{ text-decoration:underline; }
.hb-taskadd{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 2px 2px; align-items:center; }
.hb-taskadd input[type=date], .hb-taskadd select{ width:auto; }
.hb-taskadd input:first-child{ flex:1; min-width:200px; }
@media (max-width:860px){ .hb-taskadd input:first-child{ min-width:100%; } }

/* ============================================================
   CALM SWEEP — the Home cleanness, everywhere. In-flow cards
   keep their hairline but lose the drop shadow; floating things
   (modals, menus, FAB) keep theirs. Section headings whisper.
   ============================================================ */
body.theme-light .panel, body.theme-light .line, body.theme-light .job-row, body.theme-light .cost-card,
body.theme-light .kit-card, body.theme-light .cust-card, body.theme-light .staff-card, body.theme-light .insp-sec,
body.theme-light .job-diary, body.theme-light .job-cust, body.theme-light .cal-cell, body.theme-light .job-box,
body.theme-light .table-card, body.theme-light .saved-row, body.theme-light .ovh-cat, body.theme-light .dash-fold,
body.theme-light #cal-body, body.theme-light #job-sheet, body.theme-light .eng-card, body.theme-light .sched-col{
  box-shadow:none; }
body.theme-light .line:hover, body.theme-light .job-row:hover, body.theme-light .kit-card:hover,
body.theme-light .cust-card:hover{ box-shadow:none; border-color:#cdd3db; }
body.theme-light .btn{ box-shadow:none; }
body.theme-light .btn-amber{ box-shadow:none; }
body.theme-light .btn-amber:hover{ box-shadow:none; }
/* section headings match the Home briefing voice */
body.theme-light .section-h, body.theme-light .panel > h3, body.theme-light .cert-sec > h3:first-child{
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-family:var(--font-ui); }
/* job card + panes take the full-radius editorial shape (tabs are underlines now, nothing to join to) */
body.theme-light #job-sheet, body.theme-light .job-pane{ border-radius:14px; margin-top:10px; }
body.theme-light .job-pane .sec-head{ border-radius:14px 14px 0 0; }
/* chart chips + cyan leads bar */
.hb-chart-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px; }
.hbc-cyan{ fill:#12b7d8; }
.hbl-cyan{ background:#12b7d8; }
.hbc-val{ fill:var(--muted); font-size:10.5px; font-family:inherit; }

/* ---------- job card: customer messages panel ---------- */
.ov-msgs{ margin-top:16px; border:1px solid var(--line); border-radius:14px; padding:14px 16px 16px; background:var(--panel); }
.ov-msgs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ov-msgs-title{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.ov-msgs-title .muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.ov-chans{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 0; }
.ov-chan{ background:none; border:1px solid var(--line); border-radius:20px; padding:6px 14px;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.ov-chan:hover{ border-color:var(--cc); color:var(--text); }
.ov-chan.on{ color:var(--cc); border-color:var(--cc);
  background:color-mix(in srgb, var(--cc) 10%, transparent); }
.ov-thread{ margin-top:12px; border-top:1px solid var(--line); padding-top:12px; min-height:64px;
  max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.ov-none{ color:var(--muted); font-size:13px; margin:14px 4px; }
.ov-when{ color:var(--muted); font-size:11px; white-space:nowrap; }
/* phone: a call log */
.ov-call{ display:flex; align-items:baseline; gap:10px; padding:7px 4px; border-bottom:1px dashed var(--line); font-size:13.5px; }
.ov-call:last-child{ border-bottom:none; }
.ov-call-txt{ flex:1; min-width:0; }
/* text & whatsapp: a conversation, ours on the right */
.ov-thread-chat{ align-items:flex-end; }
.ov-bub-row{ max-width:78%; }
.ov-bub{ background:color-mix(in srgb, var(--cc) 14%, var(--panel)); border:1px solid color-mix(in srgb, var(--cc) 30%, transparent);
  border-radius:14px 14px 4px 14px; padding:8px 12px; font-size:13.5px; }
.ov-bub .ov-when{ display:block; text-align:right; margin-top:3px; }
/* email: an outbox */
.ov-mail{ border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.ov-mail-top{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; }
.ov-mail-snip{ color:var(--muted); font-size:12.5px; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* compose */
.ov-compose{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.ov-compose input{ flex:1; min-width:180px; }
.ov-compose-col{ flex-direction:column; align-items:stretch; }
.ov-compose-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ov-compose-row select{ width:auto; }
.ov-compose-row input{ flex:1; min-width:180px; }
.ov-compose-row textarea{ flex:1; min-width:200px; resize:vertical; }
.ov-compose-row .btn-amber{ align-self:flex-end; }
@media (max-width:860px){ .ov-bub-row{ max-width:92%; } }

/* ============================================================
   PAPER TRAIL — the whole job at a glance, floating on the right.
   Collapsed: a pill on the right edge that follows the scroll.
   Open: a floating panel over the page. Works on the phone too.
   ============================================================ */
.job-rail{ display:none; }
#view-quote.active .job-rail{ display:contents; }
.pt-fab{ position:fixed; right:0; top:38%; z-index:96; display:flex; align-items:center; gap:6px;
  background:#16181d; color:#ffdd33; border:none; border-radius:12px 0 0 12px;
  font:inherit; font-size:15px; font-weight:700; padding:10px 10px 10px 12px; cursor:pointer;
  box-shadow:-4px 4px 18px rgba(0,0,0,.22); }
.pt-lab{ font-size:13px; max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .18s ease, opacity .15s ease; }
.pt-fab:hover .pt-lab{ max-width:90px; opacity:1; }
.pt-fab.hidden{ display:none; }
.pt-ct{ background:#ffdd33; color:#16181d; border-radius:10px; padding:0 7px; font-size:11px; font-weight:700; }
.pt-panel{ position:fixed; right:0; top:0; bottom:0; width:390px; max-width:94%; z-index:97;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-16px 0 48px rgba(8,9,11,.25);
  transform:translateX(105%); transition:transform .22s ease;
  padding:14px 16px 60px; overflow-y:auto; }
.pt-panel.open{ transform:none; }
.pt-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  position:sticky; top:-14px; background:var(--panel); padding:6px 0; z-index:3; }
.pt-close{ font-size:18px; color:var(--muted); }
.pt-close:hover{ color:var(--text); background:var(--panel2); }
.pt-panel .jr-day{ background:var(--panel); }
.jr-head{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin:6px 0 10px; }
.jr-head .muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.jr-add{ display:flex; gap:6px; margin-bottom:10px; }
.jr-add input[type=text], .jr-add input:not([type]){ flex:1; font-size:13px; }
.jr-add .btn{ flex-shrink:0; }
.jr-files{ margin-bottom:12px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.jr-files summary{ cursor:pointer; list-style:none; font-size:12.5px; font-weight:600; color:var(--muted); }
.jr-files summary::-webkit-details-marker{ display:none; }
.jr-file-grid{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jr-thumb img{ width:52px; height:52px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--line); }
.jr-att{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:16px;
  padding:3px 10px; font-size:11.5px; color:var(--text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jr-att:hover{ border-color:#6d6ae8; text-decoration:none; }
.jr-day{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase;
  margin:14px 0 6px; position:sticky; top:0; background:var(--bg); padding:4px 0; z-index:2; }
/* SM8-style rhythm: open rows, hairline separators, tinted icon medallions */
.jr-ev{ display:flex; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); }
.jr-ev:last-child{ border-bottom:none; }
.jr-ico{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; background:color-mix(in srgb, var(--tt,#8a8f98) 14%, transparent); }
.jr-main{ flex:1; min-width:0; }
.jr-title{ font-size:13.5px; font-weight:600; line-height:1.45; }
.jr-meta{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.jr-body{ font-size:12.5px; color:var(--text); opacity:.85; margin-top:6px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.jr-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jr-photos img{ width:58px; height:58px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--line); }
.jr-atts{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
/* panel views: All / Photos / Files */
.pt-views{ display:flex; gap:6px; margin:2px 0 6px; }
.pt-photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.pt-photo{ position:relative; }
.pt-photo img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--line); display:block; }
.pt-photo-d{ position:absolute; left:6px; bottom:6px; background:rgba(8,9,11,.65); color:#f5f6f8;
  font-size:10px; padding:1px 7px; border-radius:8px; }
.pt-file-list{ margin-top:6px; }
.pt-file{ display:flex; gap:12px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--line); color:var(--text); }
.pt-file:last-child{ border-bottom:none; }
.pt-file:hover{ text-decoration:none; background:rgba(109,106,232,.05); }
.pt-file-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pt-file-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-file-dl{ color:var(--muted); font-size:15px; }
/* the Activity tab shares the feed */
.job-diary .jr-feed{ margin-top:8px; }
/* email attachment picker */
.ov-attach{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ov-attach-lab{ font-size:12px; color:var(--muted); }
.ov-att{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:16px;
  padding:4px 11px; font-size:12px; color:var(--muted); cursor:pointer; }
.ov-att:hover{ border-color:#6d6ae8; }
.ov-att.on{ color:#6d6ae8; border-color:#6d6ae8; background:color-mix(in srgb, #6d6ae8 10%, transparent); }

/* ---------- the bell: notifications on every page, top right ---------- */
/* quiet when there's nothing; electric and pulsing when there is.
   The lane is part of the page layout — content starts below it, so the
   bell owns the top-right of every page without overlapping a thing. */
.bell-lane{ position:sticky; top:calc(56px + env(safe-area-inset-top, 0px)); z-index:95; height:0; display:flex; justify-content:flex-end; }
/* v826 — Jamie, 9 Aug: "working on a certificate and the hamburger blocks part of
   the screen." Root cause: .menu-btn's top DOES add env(safe-area-inset-top) (css/
   style.css:8102, the notched-phone fix) but this reserved top offset didn't, so on
   any notch/Dynamic-Island phone the hamburger sits LOWER than the space content
   was given and floats over the first ~15-55px of whatever is directly under it —
   for the certificate editor that's .fa-topbar2's own Back button and title
   (js/facerts.js), which is exactly what "blocks part of the screen" describes.
   Fix: give main the same safe-area addition the hamburger already gets, so the
   two stay in sync on every device instead of only on ones with no notch. */
/* R8 — RETIRED INSIDE THE CERTIFICATE WORKSPACE (`body.bw-world`).
   This is the rule that actually owned the gap above the first board: 56px of
   !important padding on every `main`, to clear a FIXED top bar that this
   workspace does not have. The certificate workspace supplies its own chrome
   in normal document flow, so the reservation is dead space there and pushed
   the first board 56px further down a 390x844 screen. It is unchanged for
   every other surface, which still has the fixed bar it was written for. */
body:not(.bw-world) main{ padding-top:calc(56px + env(safe-area-inset-top, 0px)) !important; }
.bell-btn{ position:relative; margin-top:-46px; width:38px; height:38px;
  border-radius:50%; background:var(--panel); color:var(--muted); border:1px solid var(--line);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  filter:grayscale(1) opacity(.75); transition:all .15s; }
.bell-btn:hover{ border-color:var(--muted); filter:grayscale(1) opacity(1); }
.bell-btn.has-new{ background:#ffdd33; border-color:#e8c400; filter:none;
  box-shadow:0 2px 10px rgba(232,196,0,.4); animation:bell-pulse 2.2s ease-out infinite; }
@keyframes bell-pulse{
  0%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 0 rgba(255,221,51,.55); }
  70%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 11px rgba(255,221,51,0); }
  100%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 0 rgba(255,221,51,0); }
}
.bell-btn .ops-badge{ position:absolute; top:-7px; right:-7px; background:#16181d; color:#ffdd33;
  border:2px solid var(--bg); border-radius:11px; min-width:21px; height:21px; padding:0 5px;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ops-notif .hb-tick{ align-self:center; }
.ops-notif.is-done{ opacity:.5; }
.ops-notif.is-done .on-main span:first-child{ text-decoration:line-through; }

/* ---------- quote grid, calm mode ---------- */
.qg-bar{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; }
/* £ Workings off: Hrs/Buy/Mk%/Margin tuck away — the customer-shaped view stays */
.qg-simple thead th:nth-child(n+4):nth-child(-n+7),
.qg-simple tr.qg-row > td:nth-child(n+4):nth-child(-n+7){ display:none; }
/* inputs sit quiet as text until you reach for them */
.quote-grid input.mini, .quote-grid select{ background:transparent; border-color:transparent; box-shadow:none; }
.quote-grid tr:hover input.mini, .quote-grid tr:hover select{ border-color:var(--line); background:var(--panel); }
.quote-grid input.mini:focus, .quote-grid select:focus{ border-color:#e8c400; background:var(--panel); }
body.theme-light .quote-grid input.mini, body.theme-light .quote-grid select{ background:transparent; border-color:transparent; box-shadow:none; }
body.theme-light .quote-grid tr:hover input.mini, body.theme-light .quote-grid tr:hover select{ border-color:#d6dae1; background:#fff; }
body.theme-light .quote-grid input.mini:focus, body.theme-light .quote-grid select:focus{ border-color:#e8c400; background:#fff; }
/* room bar: tools appear when you're there, not before */
@media (hover:hover){
  tr.qg-room .btn, tr.qg-room .icon-btn{ opacity:0; transition:opacity .12s; }
  tr.qg-room:hover .btn, tr.qg-room:hover .icon-btn,
  tr.qg-room:focus-within .btn, tr.qg-room:focus-within .icon-btn{ opacity:1; }
}
/* a touch more air between lines */
.quote-grid tr.qg-row > td{ padding-top:12px; padding-bottom:12px; }

/* booking summary on the Overview + the Bookings pane */
.ov-booked{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 14px;
  border:1px solid var(--line); border-radius:12px; font-size:13.5px; background:var(--panel); }
.ov-booked .btn{ margin-left:auto; }
.bk-rows{ max-width:520px; }
.bk-row{ display:flex; gap:14px; padding:9px 2px; border-bottom:1px dashed var(--line); font-size:13.5px; align-items:center; }
.bk-row:last-child{ border-bottom:none; }
.bk-row em{ font-style:normal; color:var(--muted); font-size:12px; width:74px; flex-shrink:0; }

/* ---------- purchase orders ---------- */
.po-new{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.po-or{ font-size:12px; color:var(--muted); }
.po-card{ border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--panel); }
.po-head{ display:flex; gap:12px; align-items:center; padding:11px 14px; cursor:pointer; flex-wrap:wrap; }
.po-head:hover{ background:var(--panel2); border-radius:12px; }
.po-no{ font-family:var(--font-display); font-size:14.5px; letter-spacing:-.2px; }
.po-sup{ color:var(--muted); font-size:13px; flex:1; min-width:120px; }
.po-tot{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.po-edit{ padding:2px 14px 14px; border-top:1px solid var(--line); }
.po-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:12px 0; }
.po-table input.mini{ width:100%; }
.po-table .po-code{ font-variant-numeric:tabular-nums; }
.po-table .po-nocode{ border-style:dashed; }
.po-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px; }

/* ---------- journeys settings editor ---------- */
.jset-rows{ margin:10px 0 8px; }
.jset-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.jset-row input:not([type=number]){ flex:1; min-width:160px; }
.jset-row select{ width:auto; max-width:220px; }
.jset-seq{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
#journey-panel h3{ margin-bottom:4px; }

/* ---------- marketing ---------- */
.mk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
.mk-src{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; }
.mk-src-name{ width:130px; flex-shrink:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-bar{ flex:1; height:10px; background:var(--panel2); border-radius:6px; overflow:hidden; }
.mk-bar i{ display:block; height:100%; background:linear-gradient(100deg,#ffdd33,#3fe3ff); border-radius:6px; }
.mk-src-n{ font-size:12px; color:var(--muted); white-space:nowrap; }
.mk-status{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.mk-int{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); }
.mk-int:last-of-type{ border-bottom:none; }
.mk-int strong{ width:170px; flex-shrink:0; }
.mk-int .muted{ flex:1; }
.mk-grid .panel label{ margin-top:8px; }
/* inbound texts sit on the left, grey — like a real thread */
.ov-bub-row-in{ align-self:flex-start; }
.ov-bub-in{ background:var(--panel2); border-color:var(--line); border-radius:14px 14px 14px 4px; }
.ov-bub-in .ov-when{ text-align:left; }

/* ---------- conversations inbox ---------- */
.cv-layout{ display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .cv-layout{ grid-template-columns:1fr; } .cv-thread{ order:-1; } }
.cv-list{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; max-height:72vh; overflow-y:auto; }
.cv-row{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.cv-row:last-child{ border-bottom:none; }
.cv-row:hover{ background:var(--panel2); }
.cv-row.cv-on{ background:var(--panel2); box-shadow:inset 3px 0 0 #ffd60a; }
.cv-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cv-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cv-name{ font-size:13.5px; font-weight:600; }
.cv-prev{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-needs .cv-prev{ color:var(--text); font-weight:600; }
.cv-when{ font-size:11px; color:var(--muted); flex-shrink:0; }
.cv-thread{ border:1px solid var(--line); border-radius:14px; background:var(--panel); display:flex; flex-direction:column; max-height:72vh; }
.cv-empty{ display:flex; align-items:center; justify-content:center; min-height:200px; border:1px dashed var(--line); border-radius:14px; }
.cv-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cv-msgs{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-height:180px; }
.cv-draft{ padding:10px 16px; border-top:1px dashed var(--line); font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:color-mix(in srgb,#6d6ae8 6%,transparent); }
.cv-compose{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.cv-compose textarea{ flex:1; resize:none; }

/* ---------- command palette (⌘K) ---------- */
#pal-wrap{ display:none; position:fixed; inset:0; background:rgba(8,9,11,.5); z-index:200; padding:10vh 16px 0; }
#pal-wrap.open{ display:flex; justify-content:center; align-items:flex-start; }
#pal-box{ width:640px; max-width:100%; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 80px rgba(8,9,11,.4); overflow:hidden; }
#pal-input{ width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0;
  padding:16px 18px; font-size:15px; background:var(--panel); }
#pal-input:focus{ outline:none; box-shadow:none; border-color:var(--line); }
#pal-results{ max-height:52vh; overflow-y:auto; padding:6px; }
.pal-sec{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:10px 12px 4px; }
.pal-row{ display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:14px; }
.pal-row:hover, .pal-row.on{ background:var(--panel2); box-shadow:inset 3px 0 0 #ffd60a; }
.pal-sub{ font-size:12px; color:var(--muted); }
.pal-hint{ color:var(--muted); font-size:13px; padding:16px 14px; margin:0; }
.pal-btn{ background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.pal-btn:hover{ background:var(--panel2); color:var(--text); }
/* ---------- doc accents + tax blocks ---------- */
.cq-creds{ display:flex; gap:8px 18px; flex-wrap:wrap; margin:12px 0 4px; padding:10px 14px;
  border:1px solid var(--cqa,#16181d); border-radius:10px; font-size:12.5px; font-weight:600; }
.cq-creds-note{ color:#666; font-weight:400; }
.cq-cis span:last-child{ color:#b45309; font-weight:700; }
.cq-reverse{ border:2px solid var(--cqa,#16181d); border-radius:10px; padding:10px 14px !important; }
.cq-doc .cq-lab{ color:var(--cqa,#16181d); }
.cq-doc .cq-grand{ border-color:var(--cqa,#16181d); }
.cq-doc .cq-room td{ color:var(--cqa,#16181d); }

/* ---------- setup guide (bottom-left) + stages ---------- */
#setup-card{ position:fixed; left:226px; bottom:16px; z-index:92; width:min(330px,calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(8,9,11,.25); padding:14px 14px 10px; }
/* clear the sticky money bar / desk dock / certificate step-wizard Back-Next bar
   so the tour chip never covers their buttons. v835: the cert step-wizard's
   #cert-step-foot (css above) is position:sticky and moves with scroll, while
   this chip is position:fixed — at the top of a step (scrollY 0) their rects
   land on almost the same bottom-left coordinates, and the chip's z-index:92
   sits above the footer's z-index:6, so the chip visually buries the Back
   button and eats its clicks. Reusing the exact 74px clearance already proven
   for view-quote/view-desk, whose sticky footers are the same rough height. */
#view-quote.active ~ #setup-card, body:has(#view-quote.active) #setup-card,
body:has(#view-desk.active) #setup-card,
body:has(#view-certs.active) #setup-card{ bottom:74px; }
#setup-card.hidden{ display:none; }
#setup-card.collapsed{ background:none; border:none; box-shadow:none; padding:0; width:auto; }
.setup-chip{ background:#16181d; color:#ffdd33; border:none; border-radius:20px; padding:9px 16px;
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.setup-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.setup-prog{ height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-bottom:8px; }
.setup-prog i{ display:block; height:100%; background:linear-gradient(100deg,#ffdd33,#3fe3ff); border-radius:3px; transition:width .3s; }
.setup-list{ max-height:290px; overflow-y:auto; }
.setup-row{ display:flex; gap:9px; align-items:flex-start; padding:6px 0; border-top:1px dashed var(--line); }
.setup-row .hb-tick.on, .setup-row.done .hb-tick{ border-color:#059669; color:#059669; background:rgba(5,150,105,.1); }
.setup-txt{ display:flex; flex-direction:column; cursor:pointer; font-size:12.5px; line-height:1.35; }
.setup-row.done .setup-txt strong{ text-decoration:line-through; opacity:.6; }
.setup-txt:hover strong{ text-decoration:underline; }
@media (max-width:980px){ #setup-card{ left:16px; } }
body.nav-min #setup-card{ left:16px; }   /* sidebar hidden → chip hugs the edge */
@media (max-width:860px){ #setup-card{ bottom:70px; left:12px; } }
.stage-bar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0; }
.stage-row{ display:flex; gap:8px; align-items:center; margin-bottom:5px; }
.stage-row input:first-child{ flex:1; }
.cq-stages td{ padding:6px 8px; }

/* ---------- never trapped in the document again ---------- */
#customer-modal .modal-card{ position:relative; }
.doc-close{ position:sticky; top:8px; float:right; margin:0 0 -40px; z-index:30;
  width:38px; height:38px; border-radius:50%; background:#16181d; color:#f5f6f8;
  border:none; font-size:15px; cursor:pointer; box-shadow:0 4px 14px rgba(8,9,11,.3); }
.doc-close:hover{ background:#e24b4a; }
#customer-modal .modal-toolbar{ position:sticky; top:0; z-index:20; background:var(--panel);
  padding-top:8px; padding-bottom:8px; }

/* document typefaces + brand in the sidebar */
.cq-doc.cq-font-classic, .cq-doc.cq-font-classic .cq-biz{ font-family:Georgia,'Times New Roman',serif; }
.cq-doc.cq-font-clean, .cq-doc.cq-font-clean .cq-biz{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.cq-doc.cq-logo-large .cq-logo{ max-height:110px; max-width:280px; }
#side-brand{ display:flex; align-items:center; gap:8px; margin-bottom:10px; min-height:0; }
#side-brand:empty{ display:none; }
#side-brand img{ max-height:30px; max-width:110px; background:#fff; border-radius:6px; padding:2px 5px; }
#side-brand span{ font-size:11.5px; color:#c8cdd5; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* setup ticks tell the truth: empty until done */
.setup-row .hb-tick{ color:transparent; }
.setup-row .hb-tick:hover{ color:var(--muted); }
.setup-row.done .hb-tick, .setup-row .hb-tick.on{ color:#059669; }

/* ---------- cloud login gate ---------- */
#cloud-gate{ position:fixed; inset:0; z-index:300; background:#0d0f13;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cg-card{ width:min(400px,100%); background:#14161c; border:1px solid #272b33; border-radius:20px;
  padding:34px 30px 22px; display:flex; flex-direction:column; gap:10px; }
.cg-logo{ font-family:var(--font-display); font-size:26px; font-weight:700; color:#f5f6f8; text-align:center; }
.cg-logo em{ color:#ffdd33; font-style:normal; }
.cg-sub{ color:#9aa1ab; text-align:center; margin:0 0 10px; font-size:14px; }
#cloud-gate input{ background:#0d0f13; border:1px solid #272b33; color:#f5f6f8; border-radius:10px;
  padding:12px 14px; font:inherit; }
#cloud-gate input:focus{ outline:none; border-color:#ffdd33; }
.cg-btn{ width:100%; padding:12px !important; font-size:14px !important; }
.cg-msg{ min-height:18px; color:#3fe3ff; font-size:13px; text-align:center; margin:0; }
.cg-foot{ color:#5f6570; font-size:11px; text-align:center; margin:14px 0 0; }
.cg-link{ background:none; border:none; color:#9aa1ab; font:inherit; font-size:12.5px; cursor:pointer;
  text-align:center; width:100%; padding:2px; text-decoration:underline; }
.cg-link:hover{ color:#f5f6f8; }
.cg-trust{ display:flex; align-items:center; gap:8px; color:#9aa1ab; font-size:13px; justify-content:center; }
.cg-trust input{ width:auto; accent-color:#ffdd33; }
.cg-orgs{ display:flex; flex-direction:column; gap:6px; max-height:44vh; overflow:auto; margin:4px 0 8px; }
.cg-org{ display:flex; align-items:center; gap:10px; background:#0d0f13; border:1px solid #272b33;
  border-radius:10px; padding:10px 12px; color:#f5f6f8; }
.cg-org .muted{ color:#9aa1ab; }
#cloud-badge{ display:block; font-size:11px; margin-bottom:6px; }
#cloud-acct{ margin-bottom:4px; }

/* ---------- job type on the card + new-job category step + journeys design ---------- */
.cat-sel{ max-width:210px; color:#6d6ae8 !important; border-color:#6d6ae855 !important; font-weight:700; }
.nj-cat-block{ grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:2px; }
.nj-cat-lab{ font-size:12px; color:var(--muted); font-weight:600; }
.nj-side{ display:flex; gap:6px; }
#nj-cat{ width:auto; min-width:220px; }
.jny-cats{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.jny-cat-group{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.jny-cat-lab{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; width:86px; flex-shrink:0; }
.jny-ct{ background:#ffdd33; color:#16181d; border-radius:8px; padding:0 5px; font-size:10px; font-weight:700; }
.jny-ai-card{ border:1px dashed #6d6ae8; border-radius:14px; padding:14px 16px; background:color-mix(in srgb,#6d6ae8 5%,transparent); }
.jny-ai-head{ font-size:13px; font-weight:700; margin-bottom:8px; }
.jny-ai-card textarea{ width:100%; }
.jny-ai-row{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.jny-steps{ margin:8px 0; }
.jny-step{ display:flex; gap:9px; align-items:center; margin-bottom:6px; }
.jny-step input{ flex:1; min-width:140px; }
.jny-step select{ width:auto; max-width:210px; }
.jny-n{ width:24px; height:24px; border-radius:50%; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.jny-then{ font-size:11.5px; color:var(--muted); white-space:nowrap; }

/* ===== v356: Job Templates editor ===== */
.jt-head{ display:flex; align-items:center; gap:12px; margin:16px 0 6px; flex-wrap:wrap; }
.jt-head h4{ margin:0; font-size:15px; }
.jt-copy{ margin-left:auto; font:inherit; font-size:12px; padding:6px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel2); color:var(--fg); cursor:pointer; max-width:230px; }
.jt-sec{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:10px 0; background:var(--panel); }
.jt-sec-h{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.jt-sec-h > span:first-child{ font-weight:700; font-size:13.5px; }
.jt-row{ display:flex; gap:9px; align-items:center; margin-bottom:6px; }
.jt-row input{ flex:1; min-width:120px; }
.jt-row select{ width:auto; max-width:200px; }
.jt-ico{ width:24px; text-align:center; flex-shrink:0; }
.jt-n{ width:22px; height:22px; border-radius:50%; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.jt-nm{ flex:1; font-weight:600; font-size:13px; }
.jt-then{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.jt-meta{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.jt-empty{ color:var(--muted); font-size:12.5px; margin:2px 0 8px; }
.jt-add{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.jt-add select{ font:inherit; font-size:12.5px; padding:6px 8px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel2); color:var(--fg); max-width:230px; }
.jny-seq-card{ display:flex; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; }
.jny-day{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.jny-day span{ font-size:10px; color:var(--muted); text-transform:uppercase; }
.jny-day input{ width:52px; text-align:center; font-weight:700; }
.jny-seq-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* v578 "who is using this phone?" — a device that does not know is useless */
.fc-whoami{ border:1px solid var(--yel); border-radius:16px; padding:14px 16px; margin:0 0 12px;
  background:color-mix(in srgb, var(--yel) 12%, transparent); }
.fc-whoami b{ display:block; font-size:15px; }
.fc-whoami > span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.5; margin:3px 0 10px; }
.fc-whoami-list{ display:grid; gap:7px; }
.fc-whoami-list button{ display:flex; align-items:center; gap:11px; text-align:left; font:inherit; cursor:pointer;
  min-height:56px; padding:9px 12px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); }
.fc-whoami-list i{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-style:normal; font-weight:800; font-size:12.5px; color:#08090b; }
.fc-whoami-list span{ display:flex; flex-direction:column; font-weight:700; font-size:14px; }
.fc-whoami-list em{ font-style:normal; font-weight:500; font-size:11.5px; color:var(--muted); }

/* v575 the update bar — a device can never be silently stranded on an old build */
#sq-updbar{ position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(78px + env(safe-area-inset-bottom,0px)); z-index:1400;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:52px; padding:9px 22px; border:0; border-radius:999px; cursor:pointer;
  background:var(--yel); color:var(--yel-ink); font:inherit; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28); animation:sqUpdIn .3s ease; }
#sq-updbar b{ font-size:14px; font-weight:800; }
#sq-updbar span{ font-size:11.5px; font-weight:600; opacity:.8; }
@keyframes sqUpdIn{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion:reduce){ #sq-updbar{ animation:none; } }

/* v568 certificates, built for the app — the anti-Excel */
.fc-shell{ padding-bottom:20px; }
.fc-status{ margin-left:auto; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.fc-status-awaiting-qs{ color:var(--amber); border-color:var(--amber); }
.fc-status-issued{ color:var(--green); border-color:var(--green); }
.fc-rail{ display:flex; gap:6px; overflow-x:auto; padding:8px 2px 10px; -webkit-overflow-scrolling:touch; }
.fc-railstep{ flex:0 0 auto; display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:var(--panel); color:var(--muted); font:inherit; font-size:12.5px; font-weight:700;
  padding:9px 13px; min-height:44px; border-radius:999px; cursor:pointer; }
.fc-railstep i{ font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel2); font-size:11px; }
.fc-railstep.part i{ background:color-mix(in srgb, var(--yel) 40%, transparent); }
.fc-railstep.done i{ background:var(--green); color:#08090b; }
.fc-railstep.on{ background:var(--yel); border-color:var(--yel); color:var(--yel-ink); }
.fc-railstep.on i{ background:rgba(0,0,0,.15); color:var(--yel-ink); }
.fc-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:15px 16px; margin:0 0 12px; }
.fc-card h4{ margin:0 0 10px; font-size:15px; display:flex; align-items:center; gap:8px; }
.fc-count{ margin-left:auto; font-size:11.5px; font-weight:800; color:var(--muted); }
.fc-hint{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0 0 10px; }
.fc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fc-f{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; }
.fc-f span i{ font-style:normal; font-weight:600; color:var(--muted); }
.fc-f input, .fc-f select, .fc-f textarea{ min-height:48px; border-radius:12px; font-size:16px; padding:10px 12px; width:100%; min-width:0; }
.fc-f textarea{ min-height:72px; }
.fc-f-wide{ grid-column:1 / -1; }
.fc-seg{ display:flex; gap:5px; flex-wrap:wrap; }
.fc-seg button{ min-height:44px; min-width:56px; padding:8px 14px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font:inherit; font-weight:700; cursor:pointer; }
.fc-seg button.on{ background:var(--yel); border-color:var(--yel); color:var(--yel-ink); }
.fc-seg-sm button{ min-width:48px; }
.fc-more{ margin-top:10px; }
.fc-more summary{ cursor:pointer; font-weight:700; font-size:12.5px; color:var(--muted); padding:8px 0; min-height:44px; display:flex; align-items:center; }
.fc-more .fc-grid{ margin-top:8px; }
.fc-insp{ display:flex; gap:10px; align-items:center; padding:10px 2px; border-top:1px solid var(--line); }
.fc-insp-t{ flex:1; font-size:13px; line-height:1.4; }
.fc-insp-t b{ color:var(--muted); font-size:11.5px; margin-right:4px; }
.fc-insp-head{ display:flex; gap:10px; align-items:center; margin:14px 0 4px; font-weight:800; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.fc-insp-head .btn{ margin-left:auto; }
.fc-outcome{ flex:0 0 auto; min-width:64px; min-height:44px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); font:inherit; font-weight:800; cursor:pointer; }
.fc-o-none{ }
.fc-outcome.fc-o-, .fc-outbtn.fc-o-{ }
.fc-o-C1{ color:#fff !important; background:var(--red) !important; border-color:var(--red) !important; }
.fc-o-C2{ color:var(--red-ink) !important; background:color-mix(in srgb, var(--red) 14%, transparent) !important; border-color:var(--red) !important; }
.fc-o-C3{ color:var(--yel-ink) !important; background:var(--yel) !important; border-color:var(--yel) !important; }
.fc-o-FI{ color:var(--text) !important; border-color:var(--amber) !important; }
.fc-outgrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 8px; }
.fc-outbtn{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
  min-height:60px; padding:10px 13px; border-radius:13px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font:inherit; cursor:pointer; }
.fc-outbtn b{ font-size:16px; }
.fc-outbtn span{ font-size:11.5px; color:var(--muted); }
.fc-outbtn.on{ outline:2.5px solid var(--yel); }
.fc-board-h{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.fc-board-h h4{ margin:0; }
.fc-board-ico{ flex:0 0 auto; color:var(--muted); display:flex; }
.fc-board-name{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
/* R5: fc-board-ico/fc-board-name are now buttons (open the board hub) — reset to look unstyled, inheriting text alignment/colour from their content. */
button.fc-board-open{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; min-height:44px; }
.fc-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:8px 0; border:1px solid var(--line); border-radius:10px; }
.fc-board-meta{ font-size:12px; color:var(--muted); font-weight:600; }
.fc-icon-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.fc-board-group h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 8px; }
.fc-ckt{ display:flex; width:100%; gap:10px; align-items:center; text-align:left; font:inherit; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:13px; padding:11px 13px; margin-bottom:7px;
  min-height:56px; color:var(--text); }
.fc-ckt-no{ width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--line);
  display:grid; place-items:center; font-weight:800; font-size:13px; flex:0 0 auto; }
.fc-ckt-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fc-ckt-main b{ font-size:13.5px; }
.fc-ckt-main span{ font-size:11.5px; color:var(--muted); }
.fc-ckt-ok{ color:var(--green); font-weight:800; }
.fc-ckt-flag{ font-size:11px; font-weight:800; color:var(--red-ink); background:color-mix(in srgb, var(--red) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent); padding:4px 8px; border-radius:999px; flex:0 0 auto; }
.fc-ckt-warn{ border-color:color-mix(in srgb, var(--red) 40%, var(--line)); }
.fc-ckt-danger{ border-color:var(--red); }
.fc-obscode{ width:40px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800; flex:0 0 auto;
  border:1px solid var(--line); background:var(--panel); }
.fc-flag{ display:block; width:100%; text-align:left; font:inherit; font-size:12.5px; font-weight:600; line-height:1.45;
  padding:9px 12px; border-radius:10px; margin-bottom:6px; }
.fc-flag-bad{ color:var(--red-ink); background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.fc-flag-warn{ color:var(--text); background:color-mix(in srgb, var(--yel) 12%, transparent); border:1px solid color-mix(in srgb, var(--yel) 45%, transparent); }
.fc-flag-ok{ color:var(--green); background:color-mix(in srgb, var(--green) 9%, transparent); border:1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.fc-flag-btn{ cursor:pointer; min-height:48px; }
.fc-sheet-h2{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:12px 0 6px; }
.fc-footbar{ position:fixed; left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom,0px)); z-index:890;
  display:flex; justify-content:space-between; gap:10px; padding:10px 14px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
.fc-footbar .btn{ min-height:48px; }
.fc-sent-note{ font-weight:700; color:var(--muted); align-self:center; }
@media (max-width:420px){ .fc-grid{ grid-template-columns:1fr 1fr; } }

/* v567 quote & invoice, built for the app */
#faq-screen{ position:fixed; inset:0; z-index:1100; background:var(--bg); overflow:auto;
  transform:translateY(12px); opacity:0; pointer-events:none; transition:.2s ease; }
#faq-screen.open{ transform:none; opacity:1; pointer-events:auto; }
.faq-shell{ padding-bottom:24px; }
.faq-tabs{ display:flex; gap:4px; margin-left:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:3px; }
.faq-tab{ border:0; background:none; color:var(--muted); font:inherit; font-weight:700; font-size:13px;
  padding:8px 14px; min-height:44px; border-radius:8px; cursor:pointer; }
.faq-tab.on{ background:var(--yel); color:var(--yel-ink); }
.faq-body{ padding:4px 2px; }
.faq-total{ border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:8px 0 12px; background:var(--panel); }
.faq-total-big{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.faq-total-due{ font-size:14px; font-weight:600; color:var(--muted); }
.faq-total-rows{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; font-size:12.5px; color:var(--muted); }
.faq-opts{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.faq-room{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); margin:14px 2px 6px; }
.faq-room .fa-ico{ width:14px; height:14px; }
.faq-line{ display:flex; width:100%; gap:10px; align-items:center; text-align:left; cursor:pointer; font:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:7px;
  min-height:52px; color:var(--text); }
.faq-line-off{ opacity:.55; }
.faq-line-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.faq-line-t{ font-weight:700; font-size:14px; }
.faq-line-sub{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.faq-line-amt{ font-weight:800; font-variant-numeric:tabular-nums; }
.faq-addbar{ margin:12px 0; }
.faq-addbar input{ width:100%; min-height:48px; border-radius:12px; }
#faq-hits{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.faq-hit{ text-align:left; font:inherit; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 13px; min-height:48px; cursor:pointer; display:flex; flex-direction:column; gap:1px; }
.faq-hit span{ font-size:11.5px; color:var(--muted); }
.faq-addrow{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.faq-actions{ display:flex; flex-direction:column; gap:8px; margin:16px 0 6px; }
.faq-send{ width:100%; min-height:52px; font-size:15px; display:flex; align-items:center; justify-content:center; gap:9px; }
.faq-payrow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 10px; }
.faq-paid-flag{ font-weight:700; color:var(--green); }
.faq-payments{ margin-bottom:10px; }
.faq-pay{ display:flex; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line); font-size:13px; }
.faq-pay b{ margin-left:auto; font-variant-numeric:tabular-nums; }
.faq-ed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.faq-stepper{ display:flex; gap:0; align-items:center; border:1px solid var(--line); border-radius:11px; overflow:hidden; width:max-content; }
.faq-stepper button{ width:48px; height:44px; border:0; background:var(--panel2); color:var(--text); font-size:20px; font-weight:800; cursor:pointer; }
.faq-stepper b{ min-width:44px; text-align:center; font-size:16px; }
.faq-mats{ margin-top:10px; font-size:12.5px; }
.faq-mats b{ display:block; margin-bottom:4px; }
.faq-mat{ display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px dashed var(--line); color:var(--muted); }
.faq-entry{ display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }

/* v561 the bell, rebuilt — colour rails, bold headlines, the options menu */
.ops-notif{ position:relative; border-left:3px solid transparent; }
.ops-notif .on-title{ font-weight:700; font-size:13.5px; line-height:1.35; }
.ops-notif .on-sub{ font-size:12.5px; line-height:1.4; color:var(--muted); }
.ops-notif .on-meta{ font-size:11.5px; color:var(--muted); }
.ops-notif .on-meta b{ color:var(--text); }
.ops-notif.nf-money{ --nf:var(--nf-money); }
.ops-notif.nf-comms{ --nf:var(--nf-comms); }
.ops-notif.nf-job{ --nf:var(--nf-job); }
.ops-notif.nf-sys{ --nf:var(--nf-sys); }
.ops-notif[class*="nf-"]{ border-left-color:var(--nf); }
/* the unread dot wears its own category colour too, so the rail and the dot
   always agree and the brown mystery-dot is gone */
.ops-notif[class*="nf-"] .on-dot{ background:var(--nf); }
.ops-notif.is-pin{ background:color-mix(in srgb, var(--yel) 10%, transparent); }
.on-filters{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; align-items:center; }
/* each chip carries its category's colour as a swatch, so the row doubles as
   the legend for the rails: swatch here == rail there */
.on-filters .chip-btn{ display:inline-flex; align-items:center; gap:6px; }
.nfk-dot{ width:9px; height:9px; border-radius:50%; background:var(--nf); flex:0 0 auto;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--nf) 45%, transparent); }
.on-filters .chip-btn.nfk-money{ --nf:var(--nf-money); }
.on-filters .chip-btn.nfk-comms{ --nf:var(--nf-comms); }
.on-filters .chip-btn.nfk-job{   --nf:var(--nf-job); }
.on-filters .chip-btn.nfk-sys{   --nf:var(--nf-sys); }
/* selected: tinted in its OWN colour rather than the generic yellow, so the
   chip you picked still tells you which colour you are looking at */
.on-filters .chip-btn[class*="nfk-"].on{
  background:color-mix(in srgb, var(--nf) 20%, transparent);
  border-color:var(--nf); color:var(--text); }
.on-menu{ position:relative; }
.on-menu summary{ list-style:none; cursor:pointer; width:24px; height:24px; display:grid; place-items:center;
  border-radius:7px; border:1px solid var(--line); font-weight:800; color:var(--muted); }
.on-menu summary::-webkit-details-marker{ display:none; }
.on-menu[open] summary{ background:var(--panel); color:var(--text); }
.on-pop{ position:absolute; right:0; top:28px; z-index:40; min-width:210px; padding:6px;
  background:var(--bg); border:1px solid var(--line); border-radius:11px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px; }
.on-pop button{ text-align:left; background:none; border:0; color:var(--text); font-size:12.5px;
  padding:7px 9px; border-radius:7px; cursor:pointer; }
.on-pop button:hover{ background:var(--panel); }
.on-pop-h{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:6px 9px 2px; }
.on-pop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }

/* v561 For me — the list your teammates write on your desk */
.todo-row{ display:flex; gap:10px; align-items:center; padding:9px 8px; border-bottom:1px solid var(--line); }
.todo-row.is-late{ border-left:3px solid var(--red); padding-left:5px; }
.todo-main{ flex:1; min-width:0; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.todo-title{ font-weight:700; font-size:13.5px; }
.todo-meta{ font-size:11.5px; color:var(--muted); }
.todo-meta b{ color:var(--text); }
.todo-new{ border:1px dashed var(--line); border-radius:11px; padding:9px 12px; margin:0 0 10px;
  background:color-mix(in srgb, var(--amber) 4%, transparent); }
.todo-new summary{ cursor:pointer; font-weight:700; font-size:13px; }
.todo-new-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:9px; margin-top:10px; }
.todo-new-grid label{ display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; }
#todo-new-err{ color:var(--red); font-weight:600; }

/* v559 the pulls-jobs-in-when picker */
.stk-col-list{ display:grid; gap:2px; }
.stk-col-row{ display:flex; gap:10px; align-items:baseline; padding:8px 6px; border-radius:8px; cursor:pointer; }
.stk-col-row:hover{ background:color-mix(in srgb, var(--amber) 7%, transparent); }
.stk-col-row input{ flex:0 0 auto; transform:translateY(1px); }
.stk-col-row > span:first-of-type{ font-weight:600; font-size:13.5px; }

/* v558 the connections board */
.conn-board{ display:grid; gap:8px; margin:10px 0 12px; }
.conn-row{ display:flex; gap:12px; align-items:flex-start; padding:11px 13px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); }
.conn-row.conn-on{ border-color:color-mix(in srgb, var(--green) 45%, var(--line)); }
.conn-row.conn-soon{ opacity:.72; }
.conn-ico{ font-size:19px; line-height:1.2; flex:0 0 auto; }
.conn-main{ flex:1; min-width:0; }
.conn-name{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.conn-note{ font-size:12.5px; line-height:1.5; margin-top:3px; }
.conn-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; border:1px solid currentColor; }
.conn-pill-on{ color:var(--green); }
.conn-pill-part{ color:var(--amber,#b08900); }
.conn-pill-off{ color:var(--muted); }
.conn-pill-soon{ color:var(--muted); }
@media (max-width:620px){ .conn-row{ flex-wrap:wrap; } .conn-row .btn{ margin-left:31px; } }

/* v615: usage & provider-limit panel (Task #25 quota early-warning) */
.q-list{ display:grid; gap:8px; margin:8px 0 4px; }
.q-row{ display:flex; gap:12px; align-items:center; padding:10px 13px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); }
.q-row.q-warn{ border-color:color-mix(in srgb, var(--amber,#b08900) 55%, var(--line)); }
.q-row.q-over{ border-color:color-mix(in srgb, var(--red,#dc2626) 55%, var(--line)); }
.q-ico{ font-size:18px; line-height:1.2; flex:0 0 auto; }
.q-main{ flex:1; min-width:0; }
.q-name{ font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.q-bar{ height:7px; border-radius:999px; background:color-mix(in srgb, var(--line) 60%, transparent);
  margin:5px 0 4px; overflow:hidden; }
.q-fill{ display:block; height:100%; border-radius:999px; transition:width .3s ease; }
.q-fill.q-ok{ background:var(--green,#059669); }
.q-fill.q-warn{ background:var(--amber,#d1a000); }
.q-fill.q-over{ background:var(--red,#dc2626); }
.q-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; border:1px solid currentColor; }
.q-pill-warn{ color:var(--amber,#b08900); }
.q-pill-over{ color:var(--red,#dc2626); }
.q-cap{ flex:0 0 auto; display:flex; flex-direction:column; font-size:10.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; font-weight:700; gap:3px; text-align:right; }
.q-cap input{ width:88px; font-size:13px; padding:6px 8px; text-align:right; }
.set-inline{ display:inline-flex; align-items:center; gap:7px; font-size:13px; }
@media (max-width:620px){ .q-row{ flex-wrap:wrap; } .q-cap{ margin-left:30px; text-align:left; } }

/* v558 test-a-message-on-yourself bar */
.msg-testbar{ border:1px dashed var(--line); border-radius:12px; padding:12px 15px; margin:0 0 14px;
  background:color-mix(in srgb, var(--amber) 5%, transparent); }
.msg-testbar b{ font-size:13.5px; }
.msg-testbar .cv-compose{ max-width:420px; }

/* v558 the readiness panel — the honest state of the automation machine */
.au-ready{ border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin:0 0 16px; background:var(--panel); }
.au-ready-h{ display:flex; align-items:baseline; gap:10px; }
.au-ready-h b{ font-size:14px; }
.au-ready-h .muted{ margin-left:auto; }
.au-ready-row{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-top:1px solid var(--line); }
.au-ready-tick{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  font-size:11px; font-weight:800; margin-top:1px; }
.au-ready-row.ok .au-ready-tick{ background:var(--green); color:#08090b; }
.au-ready-row.no .au-ready-tick{ background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); border:1px solid var(--red); }
.au-ready-row.no strong{ color:var(--text); }
.au-ready-verdict{ margin:12px 0 0; padding:10px 13px; border-radius:10px; font-size:13px; line-height:1.5; font-weight:600; }
.au-ready-verdict.go{ background:color-mix(in srgb, var(--green) 14%, transparent); border:1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.au-ready-verdict.wait{ background:color-mix(in srgb, var(--amber) 14%, transparent); border:1px solid color-mix(in srgb, var(--amber) 45%, transparent); }

/* v558 the help layer: the ⓘ button and its explanation card */
.sq-i{ display:inline-grid; place-items:center; width:17px; height:17px; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--muted); background:none; color:var(--muted);
  font:700 11px/1 Georgia,serif; font-style:italic; cursor:pointer; padding:0; margin-left:6px;
  vertical-align:middle; transition:.15s; }
.sq-i:hover, .sq-i:focus-visible{ border-color:var(--yel); color:var(--yel-ink); background:var(--yel); }
.sqh-card{ max-width:560px; }
.sqh-body{ padding:2px 2px 6px; }
.sqh-row{ display:grid; grid-template-columns:132px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--line); }
.sqh-row:first-child{ border-top:0; }
.sqh-lab{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding-top:2px; }
.sqh-txt{ font-size:13.5px; line-height:1.55; }
.sqh-next{ margin-top:12px; padding:10px 13px; border-radius:10px; font-size:13.5px; line-height:1.55;
  background:color-mix(in srgb, var(--amber) 12%, transparent); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
@media (max-width:560px){ .sqh-row{ grid-template-columns:1fr; gap:2px; } }

/* v557 Settings rebuild: scrollable tab rail, section blurbs, the wizard */
.set-tabs{ margin-bottom:16px; display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.set-tabs .tab{ flex:0 0 auto; white-space:nowrap; }
.set-tabwrap > h3:first-child{ margin-top:4px; }
.set-sec-blurb{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px;
  padding:10px 14px; border-left:3px solid var(--amber); background:color-mix(in srgb, var(--amber) 6%, transparent);
  border-radius:0 10px 10px 0; }
.set-wiz{ border:1px solid var(--line); border-radius:12px; background:var(--panel); margin:0 0 14px; }
.set-wiz-head{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; background:none;
  border:0; color:var(--text); cursor:pointer; font:inherit; text-align:left; }
.set-wiz-title{ font-weight:700; font-size:14px; }
.set-wiz-count{ font-size:12px; color:var(--muted); flex:0 0 auto; }
.set-wiz-bar{ flex:1; height:6px; border-radius:999px; background:color-mix(in srgb, var(--line) 60%, transparent);
  overflow:hidden; min-width:60px; }
.set-wiz-bar i{ display:block; height:100%; border-radius:999px; background:var(--amber); transition:width .3s; }
.set-wiz-chev{ color:var(--muted); flex:0 0 auto; }
.set-wiz-body{ padding:0 14px 12px; }
.set-wiz-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.set-wiz-step{ display:flex; align-items:center; gap:10px; }
.set-wiz-n{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); font-size:11.5px; font-weight:700;
  display:grid; place-items:center; flex:0 0 auto; color:var(--muted); }
.set-wiz-step.done .set-wiz-n{ background:var(--green); border-color:var(--green); color:#08090b; }
.set-wiz-go{ display:flex; flex-direction:column; align-items:flex-start; gap:0; background:none; border:0;
  color:var(--text); cursor:pointer; font:inherit; padding:6px 8px; border-radius:8px; text-align:left; flex:1; }
.set-wiz-go:hover{ background:color-mix(in srgb, var(--line) 40%, transparent); }
.set-wiz-step.done .set-wiz-go strong{ color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
/* opening hours + bank holidays (Business) */
.hrs-days{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 10px; }
.bh-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.bh-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 6px 5px 10px;
  border:1px solid var(--line); border-radius:999px; color:var(--text); background:var(--panel); }
.bh-chip.custom{ border-color:var(--amber); }
.bh-x{ border:0; background:none; color:var(--muted); cursor:pointer; font-size:11px; padding:2px 4px; }
.bh-x:hover{ color:var(--red); }

/* labour is the top line of every kit — where the pricing thinking happens */
.qg-labrow td{ background:color-mix(in srgb, #ffdd33 7%, transparent); border-bottom:2px solid var(--line) !important; }
.qg-labrow .suffix input{ font-weight:700; }

/* inline doc pane + send modal */
.doc-pane #cq-doc{ margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:26px 30px; background:#fff; }
#send-modal .modal-card{ max-width:640px; }
#send-modal label{ margin-top:10px; }
#send-modal textarea{ font-size:13.5px; line-height:1.5; }

/* proposal template + section modes */
.room-mode{ font-size:11px; max-width:190px; margin-left:8px; }
.room-mode-on{ color:#6d6ae8 !important; border-color:#6d6ae855 !important; font-weight:700; }
.cqp-sec{ margin:18px 0 6px; }
.cqp-title{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--cqa,#16181d);
  border-bottom:2px solid var(--cqa,#16181d); padding-bottom:5px; margin-bottom:8px; }
.cqp-mode{ font-family:var(--font-ui); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#666; margin-left:8px; }
.cqp-intro{ font-size:13px; color:#444; margin:4px 0 10px; }
.cqp-subonly{ display:flex; justify-content:space-between; gap:14px; padding:9px 2px; font-size:13.5px; }

/* the customer document rides as a slim bar under the builder */
.doc-slim{ margin-top:14px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); }
.doc-slim-bar{ cursor:pointer; border-radius:0 !important; margin:0 !important; }
.doc-slim-bar:hover{ background:var(--panel2) !important; }
.doc-slim-chev{ font-size:11px; color:var(--muted); }
#doc-inline-quote #cq-doc{ max-height:70vh; overflow-y:auto; }

/* every quote line is its own thing — give them a proper break */
.quote-grid tbody tr.qg-row > td{ border-top:10px solid var(--bg) !important; }
.quote-grid tbody tr:first-child.qg-row > td{ border-top:none !important; }
.quote-grid tbody tr.qg-room + tr.qg-row > td{ border-top-width:6px !important; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#f7f7f4 !important; }
body:not(.theme-light) .quote-grid tbody tr.qg-row > td{ border-top-color:var(--bg) !important; }
/* the expanded details stay glued to their line */
.quote-grid tr.qg-exp > td{ border-top:none !important; }

/* ============================================================
   COMPLETE line separation: every quote line is its own card.
   The grid table goes transparent; each row carries its own
   border + corners; spacer rows let the page show through.
   ============================================================ */
.quote-grid{ border-collapse:separate !important; border-spacing:0 !important; }
body.theme-light .qg-card, .qg-card{ background:transparent !important; border:none !important; box-shadow:none !important; overflow:visible; }
.qg-card .dt-wrap{ overflow-x:auto; }
.quote-grid thead th{ background:transparent !important; border-bottom:none !important; }
.qg-gap > td{ height:14px !important; background:transparent !important; border:none !important; padding:0 !important; }
.qg-gap-lg > td{ height:22px !important; }
/* the line card */
.quote-grid tbody tr.qg-row > td{ background:var(--panel) !important;
  border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; }
.quote-grid tbody tr.qg-row > td:first-child{ border-left:1px solid var(--line) !important; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.quote-grid tbody tr.qg-row > td:last-child{ border-right:1px solid var(--line) !important; border-top-right-radius:12px; border-bottom-right-radius:12px; }
/* an open line hands its bottom edge to the expansion — one card, line + details */
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td{ border-bottom:none !important; }
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td:first-child{ border-bottom-left-radius:0; }
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td:last-child{ border-bottom-right-radius:0; }
.quote-grid tr.qg-exp > td{ background:var(--panel) !important; border:1px solid var(--line) !important; border-top:none !important; border-radius:0 0 12px 12px; }
/* section bands + subtotals sit on the page, not in cards */
.quote-grid tr.qg-room > td{ background:transparent !important; border:none !important; padding-left:2px; }
.quote-grid tr.qg-subtotal > td{ background:transparent !important; border:none !important; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#d6dae1 !important; border-bottom-color:#d6dae1 !important; }
body.theme-light .quote-grid tbody tr.qg-row > td:first-child{ border-left-color:#d6dae1 !important; }
body.theme-light .quote-grid tbody tr.qg-row > td:last-child{ border-right-color:#d6dae1 !important; }
body.theme-light .quote-grid tr.qg-exp > td{ border-color:#d6dae1 !important; border-top:none !important; }

/* choice dots sit LEFT of the text, never centred above it */
.cq-opt input[type=radio], .cq-opt input[type=checkbox]{
  width:18px !important; height:18px; flex:0 0 18px; margin:2px 0 0; accent-color:var(--cqa,#16181d); }
.cq-opt{ flex-direction:row !important; align-items:flex-start !important; }

/* the customer document lives in the LEFT column, under the lines, beside the totals */
.quote-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
/* choice dot: vertically centred in the card, text pushed right */
.cq-opt{ align-items:center !important; gap:16px !important; }
.cq-opt input[type=radio], .cq-opt input[type=checkbox]{ margin:0 !important; }

/* ===== v179: the guide rail — one quiet next step under the builder ===== */
.qg-next{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 16px;
  border:1px solid var(--line); border-left:4px solid #ffd60a; border-radius:10px; background:var(--panel); }
.qg-next-txt{ flex:1; font-size:13.5px; }
body.theme-light .qg-next{ border-left-color:#e8c400; }

/* ===== v179: rates rail folds to a summary line ===== */
.rates-fold > summary{ cursor:pointer; list-style:none; }
.rates-fold > summary::-webkit-details-marker{ display:none; }
.rates-fold > summary::after{ content:'▸'; float:right; color:var(--muted); font-size:12px; }
.rates-fold[open] > summary::after{ content:'▾'; }
.rates-fold #rates-panel{ margin-top:12px; }

/* ===== v179: mobile — the quote grid fits, the toolbar calms down, floaters dock ===== */
@media (max-width:640px){
  .quote-grid tbody tr.qg-row td:first-child{ min-width:110px; font-size:13px; }
  .quote-grid input.mini{ width:42px; padding:6px 4px; }
  .quote-grid td{ padding:7px 4px; }
  .quote-grid .qg-variant{ max-width:120px; }
  /* description box: two-line toolbar only while you're actually writing */
  .jd-fmt{ display:none; }
  .jd-shell:focus-within .jd-fmt{ display:flex; flex-wrap:wrap; }
  /* paper trail chip drops to the bottom corner — clear of £ Workings */
  .pt-fab{ top:auto !important; bottom:84px; }
}

/* ===== v180: the one-storyline quote page (quotebar.js) ===== */
body.qb-new .qb-hidden{ display:none !important; }
body.qb-new #view-quote .doc-slim-bar{ display:none; }         /* preview/send ride the money bar now */
body.qb-new #view-quote .qg-bar{ display:none; }               /* line count + workings chip → drawer */
body.qb-new #view-quote .qg-next{ }                            /* restyled inside the bar */
.qb-desc{ display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line); border-radius:12px;
  padding:10px 16px; margin:0 0 14px; color:var(--muted); font-size:13.5px; cursor:pointer; background:var(--panel); }
.qb-desc:hover{ border-color:#d9a900; }
.qb-desc-t{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.qb-desc-go{ font-size:12px; font-weight:700; }
.qb-desc-close{ margin-top:8px; }
.qb-addbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1.5px dashed var(--line);
  border-radius:12px; padding:9px 14px; margin:14px 0 10px; background:var(--panel); }
.qb-plus{ font-size:19px; font-weight:800; color:#d9a900; }
.qb-addbar input{ width:100%; border:none; background:transparent; font-size:14px; padding:6px 2px; }
.qb-addbar input:focus{ outline:none; }
.qb-results{ position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.16); overflow:hidden; }
.qb-hit{ display:flex; gap:10px; align-items:baseline; padding:9px 14px; cursor:pointer; font-size:13.5px; }
.qb-hit span{ color:var(--muted); font-size:11.5px; margin-left:auto; }
.qb-hit:hover, .qb-hit.top{ background:color-mix(in srgb, #ffd60a 10%, var(--panel)); }
.qb-more{ display:none; position:absolute; right:0; top:110%; z-index:61; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.16); min-width:210px; overflow:hidden; }
.qb-more.open{ display:block; }
.qb-more div{ padding:9px 14px; font-size:13px; cursor:pointer; }
.qb-more div:hover{ background:var(--panel2); }
/* ---------- v405 section cards: build the quote in tidy, premium sections ---------- */
#qb-sections{ display:flex; flex-direction:column; gap:16px; margin:6px 0 4px; }
.qb-sec{ background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.14); transition:border-color .12s ease, box-shadow .12s ease; }
.qb-sec.qb-drop-into{ border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 26%, transparent); }
.qb-sec-bar{ display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--amber) 9%, var(--panel2)), var(--panel2));
  border-bottom:1px solid var(--line); }
.qb-sec-grip{ cursor:grab; color:var(--muted); font-size:15px; line-height:1; user-select:none; padding:2px; }
.qb-sec-grip:active{ cursor:grabbing; }
.qb-sec-name{ font-size:15px; font-weight:800; color:var(--text); background:transparent; border:1px solid transparent;
  border-radius:8px; padding:5px 9px; min-width:120px; max-width:340px; letter-spacing:-.01em; }
.qb-sec-name:hover{ border-color:var(--line); }
.qb-sec-name:focus{ outline:none; border-color:var(--amber); background:var(--bg); }
.qb-sec-meta{ font-size:11.5px; color:var(--muted); font-weight:600; white-space:nowrap; }
/* v416 — rename any line (kit / material / custom) to what the customer should see */
.line-name-edit{ display:flex; flex-direction:column; gap:4px; margin:0 0 12px; }
.line-name-edit span{ font-size:11px; color:var(--muted); font-weight:600; }
.line-name-edit input{ font-size:15px; font-weight:700; padding:8px 11px; border:1px solid var(--line); border-radius:9px; }
.line-name-edit input:focus{ outline:none; border-color:var(--amber); }
/* v415 — the line's "dropdown choices" editor (Colour / Cable etc.) */
.lm-editor{ margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.lm-menu{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:var(--panel); }
.lm-menu-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.lm-name{ flex:1; font-weight:700; }
.lm-opt{ display:flex; align-items:center; gap:8px; margin:6px 0; }
.lm-opt-lab{ flex:1; min-width:110px; }
.lm-add{ flex:none; }
.lm-add input{ width:66px; }
.lm-def{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--muted); cursor:pointer; }
.lm-def input{ margin:0; }
.lm-addmenu{ margin-top:4px; }
/* the per-section subtotal — a clear money figure on the right of the section bar */
.qb-sec-sub{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.05; margin-right:6px; }
.qb-sec-sub i{ font-style:normal; font-size:8.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.qb-sec-sub b{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--text); }
.qb-sec-act{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--line); background:var(--panel); border-radius:9px; color:var(--muted); cursor:pointer; font-size:14px; }
.qb-sec-act:hover{ border-color:var(--amber); color:var(--text); }
.qb-sec-del:hover{ border-color:var(--red,#f87171); color:var(--red,#f87171); }
.qb-sec-body{ overflow-x:auto; padding:2px 4px 0; }
.qb-sec-table{ margin:0 !important; }
.qb-sec-table thead th{ position:static; }
.qb-sec-empty td{ padding:16px 14px; font-size:13px; }
/* line drag handle + copy, injected into each row */
.qb-grip{ cursor:grab; color:var(--muted); font-size:13px; margin-right:7px; user-select:none; opacity:.55; }
.qb-grip:hover{ opacity:1; color:var(--amber); }
tr.qg-row.qb-dragging{ opacity:.4; }
tr.qg-row.qb-drop-row td{ box-shadow:inset 0 2px 0 var(--amber); }
.qb-copy{ margin-right:2px; }
/* the per-section add bar: action boxes on the left, search right after them */
.qb-addbar-sec{ margin:8px 10px 12px; border-style:solid; border-color:var(--line); background:var(--panel2);
  border-radius:12px; }
.qb-addbar-sec .chip-btn{ height:34px; }
.qb-more-wrap{ position:relative; display:inline-flex; }
.qb-secsearch{ position:relative; display:flex; align-items:center; gap:5px; flex:1 1 220px; min-width:180px;
  border:1px solid var(--line); border-radius:9px; padding:0 10px; background:var(--bg); }
.qb-secsearch .qb-plus{ font-size:17px; }
.qb-addbar-sec .qb-secinput{ flex:1; width:auto; border:none; background:transparent; font-size:13.5px; padding:7px 0; }
.qb-addbar-sec .qb-secinput:focus{ outline:none; }
/* add-section footer */
.qb-sec-add{ display:flex; justify-content:center; padding:2px 0 4px; }
.qb-addsec{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px; border-style:dashed;
  border-color:var(--line); background:var(--panel); font-weight:700; border-radius:12px; }
.qb-addsec span{ font-size:18px; color:#d9a900; font-weight:800; }
.qb-addsec:hover{ border-color:var(--amber); border-style:solid; }
/* copy / move a line to another section — the ⧉ menu + Alt-drag copy cue */
.qb-linemenu{ position:absolute; z-index:120; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.3); min-width:196px; max-height:60vh; overflow:auto; padding:5px; }
.qb-lm-item{ display:flex; align-items:center; gap:9px; padding:8px 11px; font-size:13px; cursor:pointer; border-radius:8px; }
.qb-lm-item span{ width:16px; text-align:center; color:var(--muted); font-weight:800; flex:none; }
.qb-lm-item:hover{ background:var(--panel2); }
.qb-lm-head{ padding:9px 11px 3px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; }
tr.qg-row.qb-drop-copy td{ box-shadow:inset 0 2px 0 var(--green,#34d399) !important; }
.qb-sec.qb-drop-into.qb-drop-copy{ border-color:var(--green,#34d399); box-shadow:0 0 0 3px color-mix(in srgb,var(--green,#34d399) 26%, transparent); }
/* ---------- v412 money bar: extreme-premium, branded — top line + a financial strip ----------
   .sq-moneybar is the shared skin (quote AND invoice use it) ------------------------------ */
#qb-money, .sq-moneybar{ position:sticky; bottom:10px; z-index:55; display:flex; flex-direction:column; gap:9px;
  color:#f5f6f8; border-radius:14px; padding:11px 15px 10px; margin-top:14px; overflow:hidden;
  background:linear-gradient(180deg,#171a21,#0e1015);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); }
.qb-money-top{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
/* the financial strip — everything a spark wants at a glance, never the customer's view */
.qb-money-strip{ display:flex; align-items:stretch; flex-wrap:wrap; gap:6px 0;
  border-top:1px solid rgba(255,255,255,.09); padding-top:9px; }
.qb-fin{ display:flex; flex-direction:column; gap:1px; padding:0 15px; border-right:1px solid rgba(255,255,255,.08); }
.qb-fin:first-child{ padding-left:2px; }
.qb-fin:last-child{ border-right:none; }
.qb-fin i{ font-style:normal; font-size:9px; text-transform:uppercase; letter-spacing:.09em; opacity:.55; font-weight:700; }
.qb-fin b{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.qb-fin-good b{ color:#8ce7ff; }
@media (max-width:560px){ .qb-fin{ padding:0 11px; } .qb-fin b{ font-size:12.5px; } }
/* the yellow→blue brand strip that glides across the top */
.qb-money-accent{ position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff,#ffdd33); background-size:220% 100%;
  animation:qbGlide 7s linear infinite; }
@keyframes qbGlide{ to{ background-position:220% 0; } }
.qb-brandmark{ display:inline-flex; align-items:center; opacity:.95; flex:none; }
.qb-brandmark em{ font-style:normal; font-weight:800; }
/* label · total · subline all on one baseline — keeps the box short */
.qb-pays{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.qb-pays-l{ font-size:9.5px; text-transform:uppercase; letter-spacing:.11em; opacity:.55; font-weight:700; }
.qb-total{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;
  background:linear-gradient(100deg,#ffe873,#8ce7ff); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; }
.qb-subline{ font-size:11px; opacity:.68; }
.qb-money-spacer{ flex:1 1 10px; }
/* the action group — every button the exact same height, shape and gap */
.qb-money-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qb-mbtn{ height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 13px;
  font:inherit; font-size:12.5px; font-weight:700; border-radius:9px; cursor:pointer; white-space:nowrap;
  background:rgba(255,255,255,.05); color:#f5f6f8; border:1px solid rgba(255,255,255,.2); transition:all .13s ease; }
.qb-mbtn:hover{ border-color:#ffdd33; background:rgba(255,255,255,.09); }
.qb-mbtn-ok:hover{ border-color:var(--green,#34d399); color:#eafff7; }
.qb-mbtn-ok.is-done{ background:color-mix(in srgb,var(--green,#34d399) 22%, transparent); border-color:var(--green,#34d399); color:#d6ffef; }
.qb-mbtn-send{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); color:#0b0c0e; border-color:transparent; font-weight:800;
  box-shadow:0 3px 14px rgba(63,227,255,.26); }
.qb-mbtn-send:hover{ filter:brightness(1.05); box-shadow:0 5px 18px rgba(63,227,255,.4); transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .qb-money-accent{ animation:none; } .qb-mbtn-send:hover{ transform:none; } }
#qb-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(430px, 92vw); z-index:130; background:var(--bg);
  border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(0,0,0,.22); transform:translateX(102%);
  transition:transform .22s ease; overflow-y:auto; padding:16px 18px 30px; }
#qb-drawer.open{ transform:none; }
.qb-drawer-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.qb-drawer-opt{ display:flex; gap:8px; align-items:center; font-size:13px; margin:6px 0 12px; }
.qb-drawer-opt input{ width:auto !important; }
#qb-drawer .quote-side{ display:flex; flex-direction:column; gap:14px; }
body.qb-new #view-quote .quote-side{ }
body.qb-new .quote-layout{ display:block; }                     /* builder takes the full width */
body.qb-new.job-open .ai-fab{ bottom:92px; }                    /* assistant clears the money bar */
body.qb-new #view-quote .jd-fmt{ display:none; }                /* toolbar only while writing */
body.qb-new #view-quote .jd-shell:focus-within .jd-fmt{ display:flex; flex-wrap:wrap; }
@media (max-width:640px){ #qb-money{ bottom:0; border-radius:14px 14px 0 0; margin-left:-10px; margin-right:-10px; } }
body.qb-new #view-quote .qg-add.qb-replaced{ display:none; }   /* the eight buttons → one smart bar */
body.qb-new.job-open .ai-fab{ bottom:160px; }   /* clear of the money bar, whatever it wraps to */

/* ===== v181: feedback round — floats out of the way, drawer stable, doc panel on-theme ===== */
body.qb-new.job-open .pt-fab{ top:auto; bottom:232px; right:12px; border-radius:50%; width:48px; height:48px;
  justify-content:center; padding:0; }
body.qb-new.job-open .pt-fab .pt-lab{ display:none; }
body.qb-new.job-open .ai-fab{ bottom:172px; right:12px; }
.qb-desc-close{ position:absolute; top:8px; right:8px; width:30px; height:30px; font-size:15px; }
.jd-shell{ position:relative; }
.qb-pinned > summary{ pointer-events:none; }
.qb-pinned > summary::after{ display:none; }
.qstyle-cards{ display:flex; gap:10px; flex-wrap:wrap; }
.qstyle-card{ flex:1; min-width:180px; text-align:left; background:var(--panel); border:1.5px solid var(--line);
  border-radius:12px; padding:11px 14px; cursor:pointer; font:inherit; color:var(--text); }
.qstyle-card strong{ display:block; font-size:14px; }
.qstyle-card em{ font-style:normal; font-size:12px; color:var(--muted); }
.qstyle-card.on{ border-color:#d9a900; background:color-mix(in srgb, #ffd60a 8%, var(--panel)); }
.qstyle-card:hover{ border-color:#d9a900; }
/* the expanded customer-document panel: one calm grid, on-theme */
#doc-extras{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
#doc-extras .doc-extra-field{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
#doc-extras .doc-extra-field.wide{ grid-column:1/-1; }
#doc-extras .doc-extra-field > span:first-child{ display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:8px; }
@media (max-width:760px){ #doc-extras{ grid-template-columns:1fr; } }
body.qb-new #view-quote .room-mode{ display:none; }   /* the section select retired — the line decides */
.qb-sale{ margin-left:10px; font-size:11px; max-width:170px; color:var(--muted); border:none; background:transparent; cursor:pointer; }
.qb-sale.qb-sale-on{ color:var(--cyan, #0e7c96); font-weight:700; }

/* ===== v183: line card tidy — no stray carets, labelled pill, everything on one edge ===== */
body.qb-new #view-quote .qg-bar{ display:flex; }               /* numbers toggle back beside the lines */
body.qb-new #view-quote .qg-caret{ display:none; }             /* the mystery caret goes; title + items open the line */
body.qb-new #view-quote .qg-row td:first-child{ padding-left:16px; }
body.qb-new #view-quote .dt-sub.qg-sub{ display:inline-block; margin:3px 0 0; color:var(--muted); font-size:12.5px; }
.qb-sale-pill{ display:inline-flex; align-items:center; gap:5px; margin:4px 0 0 12px; padding:2px 4px 2px 10px;
  border:1px solid var(--line); border-radius:99px; font-size:11px; color:var(--muted); cursor:pointer;
  flex-direction:row !important; width:auto !important; }
.qb-sale-pill select{ border:none; background:transparent; font-size:11px; color:inherit; font-weight:700;
  cursor:pointer; width:auto !important; padding:2px 0; }
.qb-sale-pill.qb-sale-on{ border-color:var(--cyan,#0e7c96); color:var(--cyan,#0e7c96); }

/* ===== v185: The Desk + louder stack on the job card ===== */
.desk-search{ width:100%; padding:13px 18px; font-size:15px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--panel); margin-bottom:14px; }
.desk-stacks{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:8px; }
.desk-stack{ display:flex; align-items:center; gap:7px; white-space:nowrap; border:1px solid var(--line);
  border-radius:99px; background:var(--panel); padding:7px 13px; font:inherit; font-size:12.5px; cursor:pointer; }
.desk-stack.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 10%,var(--panel)); font-weight:700; }
.desk-stack .ds-ct{ font-weight:800; font-variant-numeric:tabular-nums; }
.desk-stack .ds-late{ background:#e24b4a; color:#fff; border-radius:99px; font-size:10.5px; font-weight:800; padding:1px 7px; }
.desk-row{ display:flex; gap:10px; align-items:center; padding:8px 14px; cursor:pointer; font-size:13.5px; }
.desk-row:hover{ background:var(--panel2); }
.desk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
@media (max-width:800px){ .desk-cols{ grid-template-columns:1fr; } }
.stk-wrap{ display:inline-flex !important; flex-direction:row !important; align-items:center; gap:6px; width:auto !important;
  font-size:11.5px; font-weight:700; color:var(--muted); border:1.5px dashed var(--line); border-radius:99px; padding:3px 6px 3px 12px; }
.stk-wrap.on{ border-style:solid; border-color:#d9a900; color:var(--text); background:color-mix(in srgb,#ffd60a 10%,var(--panel)); }
.stk-wrap select{ width:auto !important; border:none; background:transparent; font-weight:700; }
/* v187: desk v2 — stacks wrap in rows; rich job cards; status colours */
.desk-stacks{ flex-wrap:wrap; overflow-x:visible; }
.desk-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.desk-job{ display:flex; gap:14px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:11px 16px; margin-bottom:8px; cursor:pointer; }
.desk-job:hover{ border-color:#d9a900; }
.dj-status{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:99px;
  background:var(--panel2); color:var(--muted); white-space:nowrap; }
.st-quoting,.st-lead{ background:#fff4c2; color:#8a6d00; } .st-sent{ background:#dff3f7; color:#0e7c96; }
.st-accepted{ background:#e6f2eb; color:#2e7d4f; } .st-completed{ background:#e6f2eb; color:#2e7d4f; }
.st-invoiced{ background:#fbf1df; color:#b06a00; } .st-paid{ background:#e6f2eb; color:#2e7d4f; }
.st-lost{ background:#fbeaea; color:#c23b3b; }
.dj-main{ flex:1; display:flex; flex-direction:column; }
.dj-right{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; }
.desk-eng{ margin:8px 0; } .desk-eng > strong{ font-size:13px; }
.desk-fold > summary{ list-style:none; display:flex; align-items:center; padding:12px 16px; }
.desk-fold > summary::-webkit-details-marker{ display:none; }
/* v188: THE DESK = dispatch board — KPI strip, tile queues, three dense zones */
.desk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.desk-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.desk-kpi span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.desk-kpi strong{ font-size:20px; font-variant-numeric:tabular-nums; }
.desk-kpi em{ display:block; font-style:normal; font-size:11px; color:var(--muted); }
.desk-kpi.good strong{ color:#2e7d4f; } .desk-kpi.warn strong{ color:#b06a00; } .desk-kpi.bad strong{ color:#e24b4a; }
.desk-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:12px; align-items:start; }
@media (max-width:1000px){ .desk-grid{ grid-template-columns:1fr; } .desk-kpis{ grid-template-columns:repeat(2,1fr); } }
.desk-zone{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.dz-head{ display:flex; align-items:center; gap:8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); font-weight:800; margin-bottom:8px; }
.desk-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; }
.desk-tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent;
  border:1px solid transparent; border-radius:10px; padding:8px 4px 6px; font:inherit; cursor:pointer; }
.desk-tile:hover{ border-color:var(--line); background:var(--panel2); }
.desk-tile.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
.dt-lab{ font-size:10.5px; line-height:1.2; text-align:center; color:var(--text); max-width:92px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dt-badge{ position:absolute; top:2px; right:8px; background:#d9a900; color:#111; font-size:10px; font-weight:800;
  border-radius:99px; padding:1px 6px; }
.dt-badge.late{ background:#e24b4a; color:#fff; }
.dj-act{ display:flex; gap:4px; }
/* v189: THE DESK final form — split board + persistent jobs panel */
.desk-split{ display:grid; grid-template-columns:1fr 340px; gap:12px; align-items:start; }
@media (max-width:980px){ .desk-split{ grid-template-columns:1fr; } }
.desk-main{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:420px; }
.desk-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.desk-jobs{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; }
.djp-filter,.djp-search{ width:100%; margin-bottom:8px; padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg); font:inherit; font-size:13px; }
.djp-list{ overflow-y:auto; max-height:calc(100vh - 320px); min-height:300px; }
.djp-row{ display:flex; gap:10px; padding:9px 8px; border-bottom:1px solid var(--line); cursor:pointer; align-items:flex-start; }
.djp-row:hover{ background:var(--panel2); }
.djp-av{ width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:0 0 30px; }
.djp-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.djp-top{ display:flex; gap:8px; align-items:baseline; } .djp-top em{ font-style:normal; font-size:11px; color:var(--muted); margin-left:auto; }
.djp-meta{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.djp-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:0 0 9px; }
.desk-lanes{ display:flex; gap:10px; overflow-x:auto; align-items:flex-start; padding-bottom:6px; }
.desk-lane{ min-width:230px; max-width:230px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; }
.desk-lane.lane-empty{ border-style:dashed; opacity:.7; }
.lane-drop{ text-align:center; padding:14px 0; opacity:.7; }
.lane-head{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.lane-head .dt-badge{ position:static; margin-left:auto; }
.lane-card{ display:flex; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:6px; cursor:pointer; font-size:12.5px; }
.lane-card:hover{ border-color:#d9a900; }
.lane-card em{ font-style:normal; font-size:10.5px; color:var(--muted); }
.lane-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
/* v192: On my desk — always visible, four columns of unfinished work */
.desk-onmy{ margin-bottom:12px; }
.onmy-grid{ column-count:4; column-gap:18px; font-size:12.5px; }
.onmy-grid .dz-head{ break-after:avoid; margin-top:0; }
.onmy-grid .dz-head:first-child{ margin-top:0; }
.onmy-grid .desk-row, .onmy-grid .hb-need{ break-inside:avoid; }
@media (max-width:1100px){ .onmy-grid{ column-count:2; } }
@media (max-width:640px){ .onmy-grid{ column-count:1; } }
/* v193: On my desk — five distinct cards, clear at a glance */
.onmy-grid{ column-count:unset; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.onmy-card{ background:var(--bg); border:1px solid var(--line); border-left:3px solid #d9a900; border-radius:10px;
  padding:9px 11px; min-height:74px; }
.onmy-card.is-clear{ border-left-color:var(--line); opacity:.65; }
.onmy-head{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:4px; }
.onmy-ct{ margin-left:auto; background:#d9a900; color:#111; border-radius:99px; font-size:10.5px; font-weight:800; padding:1px 8px; }
.onmy-none{ font-size:12px; color:var(--muted); margin:4px 0 0; }
.onmy-card .desk-row{ padding:5px 2px; font-size:12.5px; border-bottom:1px dashed var(--line); }
.onmy-card .desk-row:last-child{ border-bottom:none; }
.onmy-card .hb-need{ font-size:12.5px; padding:5px 2px; }

/* ===== v194: MY DESK = SM8 dispatch board, like-for-like ===== */
.dsk-top{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; margin-bottom:8px; }
.dsk-panel{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dsk-panel-h{ background:var(--panel2); border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700;
  color:var(--muted); text-align:center; padding:5px 12px; }
.dsk-panel-b{ padding:8px 10px; }
.dsk-actions .dsk-panel-b{ display:flex; gap:12px; }
.dsk-action{ display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:1px solid transparent;
  border-radius:8px; padding:6px 10px; font:inherit; font-size:11px; cursor:pointer; color:var(--text); max-width:92px; text-align:center; }
.dsk-action:hover{ border-color:var(--line); background:var(--panel2); }
.dsk-action-ico{ font-size:22px; position:relative; }
.dsk-action-ico i{ position:absolute; right:-7px; bottom:-2px; font-style:normal; font-size:12px; font-weight:800;
  background:#2e9e5b; color:#fff; border-radius:50%; width:15px; height:15px; line-height:15px; }
.dsk-q-grid{ display:flex; flex-wrap:wrap; gap:2px 6px; justify-content:flex-start; }
.dsk-q{ position:relative; display:flex; flex-direction:column; align-items:center; width:86px; padding:5px 2px 3px;
  background:none; border:1px solid transparent; border-radius:8px; font:inherit; cursor:pointer; }
.dsk-q:hover{ border-color:var(--line); background:var(--panel2); }
.dsk-q.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
.dsk-q-lab{ font-size:10px; line-height:1.25; text-align:center; color:var(--text); max-width:84px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dsk-q-ct{ position:absolute; top:0; right:14px; background:#e02b2b; color:#fff; font-size:10px; font-weight:800;
  border-radius:99px; padding:0 5px; min-width:16px; line-height:15px; z-index:2; }
.dsk-q-ct.late{ box-shadow:0 0 0 2px #fff; }
.dsk-staff-chip{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:1px solid transparent;
  border-radius:8px; padding:5px 8px; font:inherit; font-size:10.5px; cursor:pointer; color:var(--text); }
.dsk-staff-chip:hover{ border-color:var(--line); } .dsk-staff-chip.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
/* v251: the importance flag is a BUTTON with levels — tap to step it up */
.jc-flag{ background:none; border:none; cursor:pointer; font:inherit; font-weight:800;
  padding:0 3px; color:var(--muted); opacity:.4; }
.jc-flag:hover{ opacity:1; }
.jc-flag.high{ color:#d9a900; opacity:1; }
.jc-flag.urgent{ color:#dc2626; opacity:1; animation:sp-pulse 1.6s infinite; }
/* v251: My day, admin edition */
.ad-sec{ margin:10px 0 0; }
.ad-sec h3{ display:flex; align-items:baseline; gap:8px; margin:0 0 6px; }
.ad-row{ cursor:default; align-items:center; gap:8px; }
.ad-main{ display:flex; flex-direction:column; line-height:1.35; min-width:0; flex:1; }
.ad-fu{ font-size:15px; }
.jc-task-edit{ border:1px solid #d9a900; border-radius:10px; padding:8px 10px; margin:4px 0; background:color-mix(in srgb,#ffd60a 6%,var(--panel)); }
.jc-task-edit input[id='jce-title']{ width:100%; margin-bottom:6px; }
.jc-task-edit-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dsk-staff-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.dsk-staff-row .dsk-staff-chip{ flex-direction:row; padding:4px 10px; gap:6px; font-size:12px; border-color:var(--line); }
.dsk-staff-row .dsk-staff-chip.on{ border-color:#d9a900; }
.dsk-init{ width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; }
.dsk-split{ display:grid; grid-template-columns:1fr 330px; gap:8px; align-items:start; }
@media (max-width:980px){ .dsk-split{ grid-template-columns:1fr; } .dsk-top{ grid-template-columns:1fr; } }
.dsk-main{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dsk-tabs{ display:flex; gap:0; background:var(--panel2); border-bottom:1px solid var(--line); overflow-x:auto; }
.dsk-tab{ font:inherit; font-size:12px; padding:8px 13px; background:none; border:none; border-right:1px solid var(--line);
  cursor:pointer; color:var(--muted); white-space:nowrap; }
.dsk-tab.on{ background:var(--panel); color:var(--text); font-weight:700; box-shadow:inset 0 2px 0 #d9a900; }
.dsk-tabbody{ padding:10px 12px; min-height:430px; }
#desk-map{ height:460px; border-radius:6px; }
/* v614: live engineer pin on the dispatch map (Task #53) */
.deng{ position:relative; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.deng-v{ font-size:26px; line-height:1; }
.deng-i{ position:absolute; right:-3px; bottom:-2px; background:var(--accent,#ffdd33); color:#08090b;
  font-size:9.5px; font-weight:800; line-height:1; padding:2px 3px; border-radius:5px; border:1.5px solid #fff;
  letter-spacing:.02em; }
.dsk-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.dsk-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border-bottom:2px solid var(--line); padding:7px 8px; background:var(--panel2); }
.dsk-table td{ padding:8px; border-bottom:1px solid var(--line); }
.dsk-tick{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:none; cursor:pointer; font-size:0; }
.dsk-tick:hover{ border-color:#2e9e5b; background:#2e9e5b22; }
.dsk-datebar{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sch-grid{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.sch-row{ display:grid; grid-template-columns:120px 1fr; border-bottom:1px solid var(--line); min-height:56px; position:relative; }
.sch-row:last-child{ border-bottom:none; }
.sch-head{ min-height:30px; background:var(--panel2); font-size:10px; color:var(--muted);
  grid-template-columns:120px repeat(12,1fr); }
.sch-head .sch-cell{ border-left:1px solid var(--line); padding:6px 4px; white-space:nowrap; overflow:hidden; }
.sch-staff{ display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; font-weight:600;
  border-right:1px solid var(--line); background:var(--panel2); }
.sch-lane{ position:relative; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), var(--line) calc(100%/12 - 1px), var(--line) calc(100%/12)); }
.sch-block{ position:absolute; top:5px; bottom:5px; background:color-mix(in srgb, #3b7dd8 12%, var(--panel));
  border:1px solid var(--line); border-left:4px solid #3b7dd8; border-radius:4px; padding:4px 8px; font-size:11px;
  overflow:hidden; cursor:pointer; }
.sch-block span{ color:var(--muted); font-size:10px; }
.dsk-cal{ display:grid; grid-template-columns:130px 1fr; gap:10px; }
.dsk-cal-staff{ font-size:12px; padding:6px 10px; border-radius:4px; margin-bottom:4px; }
.dsk-cal-hour{ display:flex; gap:8px; align-items:flex-start; border-top:1px solid var(--line); padding:4px 0; min-height:30px; }
.dsk-cal-hour > span{ font-size:10px; color:var(--muted); width:38px; flex:0 0 38px; }
.dsk-cal-blk{ flex:1; border-radius:4px; padding:5px 10px; font-size:12px; cursor:pointer; margin-bottom:3px; }
.dsk-rec-add{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; font-size:12px; }
.dsk-rec-add input{ padding:7px 10px; font-size:12.5px; }
.dsk-rec-add label{ display:flex; align-items:center; gap:5px; flex-direction:row; width:auto; }
.dsk-jobs{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px; }
.djp-chip{ font-size:10.5px; background:var(--panel2); border-radius:4px; padding:2px 7px; margin-top:3px;
  display:inline-block; width:fit-content; color:var(--muted); }
.djp-chip.exp{ color:#c23b3b; font-weight:600; }
/* the job-panel sort control sits alongside the search box */
.djp-search-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.djp-search-row .djp-search{ flex:1 1 170px; min-width:170px; margin-bottom:0; }
.djp-sort{ flex:0 1 auto; max-width:150px; text-overflow:ellipsis; font:inherit; font-size:12px; padding:6px 8px; border-radius:8px;
  border:1px solid var(--line,#2a2f37); background:var(--card,#12151a); color:var(--fg,#e7e9ee); cursor:pointer; }

/* ===== v355: global floating recent-jobs switcher ===== */
/* the Assistant FAB (.ai-fab) rises to ~160–172px once any job has been opened
   (the job-open class lingers), so anchor the switcher clear of its top edge */
#recent-switcher{ position:fixed; right:18px; bottom:226px; z-index:88; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.rsw-fab{ width:var(--fab); height:var(--fab); border-radius:50%; position:relative; cursor:pointer; font:inherit;
  display:flex; align-items:center; justify-content:center; color:var(--cyan);
  background:rgba(13,15,20,.82); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.rsw-fab:hover{ background:rgba(13,15,20,1); transform:translateY(-2px); border-color:rgba(255,255,255,.26); box-shadow:0 6px 22px rgba(63,227,255,.34); }
.recent-switcher.open .rsw-fab{ background:rgba(16,18,24,.95); }
.ai-fab, .rsw-fab{ box-shadow:0 4px 14px rgba(0,0,0,.18); }
body.theme-light .rsw-fab{ border-color:rgba(0,0,0,.12); }
.rsw-ic{ font-size:20px; line-height:1; }
svg.rsw-ic{ width:24px; height:24px; }
.rsw-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--cyan); color:#052833; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }
.rsw-list{ background:var(--card,#161a20); border:1px solid var(--line,#2a2f37); border-radius:14px; padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.4); width:250px; max-width:78vw; animation:rswIn .14s ease; }
@keyframes rswIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.rsw-head{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#8b93a0); padding:6px 8px 4px; }
.rsw-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font:inherit; color:var(--fg,#e7e9ee); padding:8px; border-radius:9px; }
.rsw-item:hover{ background:var(--hover,rgba(255,255,255,.06)); }
.rsw-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }
.rsw-nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:13px; }
.rsw-item em{ font-style:normal; font-size:11px; font-weight:700; color:var(--muted,#8b93a0); }
@media (max-width:640px){ :root{ --fab:50px; } #recent-switcher{ bottom:232px; right:12px; } }

/* ===== v195: My Desk in OUR skin — home-page warmth on the dispatch bones ===== */
#view-desk .view-head{ display:none; }                     /* the greeting is the header now */
.dsk-q-emoji{ font-size:22px; line-height:1; }
.dsk-q-emoji.late{ filter:drop-shadow(0 0 3px #e24b4a); }
.dsk-panel{ border-radius:12px; }
.dsk-panel-h{ background:transparent; border-bottom:1px solid var(--line); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; font-weight:800; text-align:left; padding:7px 12px 5px; }
.dsk-main,.dsk-jobs{ border-radius:12px; }
.dsk-tab.on{ box-shadow:inset 0 2px 0 0 #ffdd33; }
.dsk-tabs{ background:transparent; }
.desk-lane .lane-head{ text-transform:none; letter-spacing:0; font-size:12px; }
/* v196: assign popup + owner views */
#stack-modal .modal-card label{ margin-bottom:10px; }
/* the assign button shows when you're on the row, not before. Wrapped in
   hover:hover so a tablet — which never hovers — gets it permanently instead of
   a transparent button that still swallows the tap, and focus-within so it is
   reachable by keyboard. Same shape as the quote-grid room bar above. */
.djp-assign{ align-self:center; font-size:14px; }
@media (hover:hover){
  .djp-assign{ opacity:0; transition:opacity .12s; }
  .djp-row:hover .djp-assign, .djp-row:focus-within .djp-assign{ opacity:1; }
}
.stk-wrap{ cursor:pointer; font:inherit; }

/* v197: desk layout v3 — on-my-desk up top, slim toolbar, stacks dock, peek */
.dsk-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width:420px; }
.dsk-dock{ margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px 6px; }
.dsk-dock-tiles{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.dsk-q.drop{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 18%,var(--panel)); transform:scale(1.06); }
.peek-card{ max-width:560px; }
.peek-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:6px 0 12px; font-size:13.5px; }
.peek-lab{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; margin-bottom:2px; }
.peek-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px; }
.djp-row{ cursor:grab; }
.djp-row:active{ cursor:grabbing; }
.onmy-clear{ background:var(--panel); border:1px dashed var(--line); border-radius:10px; padding:14px 18px; font-size:13.5px; color:var(--muted); }
.onmy-clear strong{ color:var(--text); }

/* ===== v199: MY DESK fills the screen — one page, no scrolling, every inch working ===== */
body.desk-lock{ overflow:hidden; }
body.desk-lock main{ overflow:hidden; height:100vh; }
#view-desk.active{ display:flex; flex-direction:column; height:calc(100vh - 24px); overflow:hidden; }
#desk-body{ display:flex; flex-direction:column; flex:1; min-height:0; gap:0; }
.dsk-hb{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.dsk-hb-l{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.dsk-greet{ font-size:21px !important; margin:0 !important; white-space:nowrap; }
.dsk-sum{ font-size:12.5px; margin:0; color:var(--muted); }
.dsk-hb .dsk-toolbar{ margin-left:auto; max-width:none; flex-wrap:nowrap; }
.dsk-hb .dsk-staff-chip{ flex-direction:row; padding:3px 8px; gap:5px; }
.dsk-hb .dsk-init{ width:22px; height:22px; font-size:10px; }
#desk-body .desk-onmy{ flex:0 0 auto; margin-bottom:8px !important; }
#desk-body .onmy-grid{ grid-auto-rows:minmax(64px, 108px); }
#desk-body .onmy-card{ max-height:108px; overflow-y:auto; }
#desk-body .dsk-split{ flex:1 1 auto; min-height:0; }
#desk-body .dsk-main{ display:flex; flex-direction:column; min-height:0; height:100%; }
#desk-body .dsk-tabbody{ flex:1; min-height:0; overflow-y:auto; }
#desk-body .dsk-jobs{ display:flex; flex-direction:column; min-height:0; height:100%; }
#desk-body .djp-list{ flex:1; min-height:0; max-height:none; }
#desk-map{ height:100%; min-height:280px; }
#desk-body .dsk-dock{ flex:0 0 auto; margin-top:8px; padding:6px 10px 4px; }
#desk-body .dsk-dock .dz-head{ margin-bottom:2px; }
#desk-body .dsk-dock .dsk-q{ width:64px; padding:3px 2px 2px; }
#desk-body .dsk-dock .dsk-q-emoji{ font-size:16px; }
#desk-body .dsk-dock .dsk-q-lab{ font-size:8.5px; max-width:62px; -webkit-line-clamp:2; }
#desk-body .dsk-dock .dsk-q-ct{ right:6px; font-size:9px; line-height:13px; }
@media (max-width:980px){ body.desk-lock{ overflow:auto; } #view-desk.active{ height:auto; overflow:visible; } }
/* phones: the header stacks, the greeting wraps, the toolbar stops crushing the summary */
@media (max-width:760px){
  .dsk-hb{ flex-direction:column; align-items:stretch; gap:8px; }
  .dsk-hb-l{ padding-right:52px; }
  .dsk-greet{ white-space:normal; font-size:18px !important; }
  .dsk-hb .dsk-toolbar{ margin-left:0; flex-wrap:wrap; justify-content:flex-start; padding-right:0; }
  .onmy-card{ min-width:0; }
  .onmy-head{ white-space:normal; }
}
/* v199b: account for main's 56px top pad — and trim it on the desk so nothing scrolls */
body.desk-lock main{ padding-top:14px !important; padding-bottom:10px !important; }
#view-desk.active{ height:calc(100vh - 26px); }
html:has(body.desk-lock){ overflow:hidden; }
body.desk-lock main{ box-sizing:border-box; }

/* ============================================================
   v200 · MY DESK REDESIGN — "papers on a desk, charcoal console"
   Same functions, our species: paper triage slips up top, a dark
   console for the work surface, a paper filing rail on the right,
   and a charcoal dock of stack pills along the bottom. One gradient,
   gold only where your hand goes next. Nothing boxed-and-grey.
   ============================================================ */
/* the console — charcoal, like the rail and the money bar */
#desk-body .dsk-main{ background:#16181d; border:none; border-radius:16px; color:#eceded; }
#desk-body .dsk-tabs{ background:transparent; border-bottom:1px solid rgba(255,255,255,.08); padding:8px 10px 0; gap:4px; }
#desk-body .dsk-tab{ border:none; border-radius:8px 8px 0 0; color:#9aa1ab; font-size:12px; padding:8px 14px; }
#desk-body .dsk-tab:hover{ color:#eceded; background:rgba(255,255,255,.05); }
#desk-body .dsk-tab.on{ background:#f7f7f4; color:#16181d; font-weight:800; box-shadow:none; }
#desk-body .dsk-tabbody{ background:#f7f7f4; color:var(--text); margin:0 10px 10px; border-radius:0 10px 10px 10px; padding:12px; }
body:not(.theme-light) #desk-body .dsk-tabbody{ background:var(--panel); }
/* the filing rail — paper cards on the canvas, no box around them */
#desk-body .dsk-jobs{ background:transparent; border:none; padding:0 0 0 2px; }
#desk-body .dsk-jobs .dsk-panel-h{ border:none; padding:2px 4px 6px; }
.djp-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-bottom:6px;
  padding:9px 10px 9px 12px; position:relative; border-left-width:4px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.djp-card:hover{ border-color:#d9a900; background:var(--panel); }
.djp-row.djp-card{ border-bottom:1px solid var(--line); }
.djp-top .dj-status{ font-size:9px; padding:2px 7px; }
.djp-filter,.djp-search{ background:var(--panel); border-radius:10px; }
/* the dock — charcoal strip, stack pills, gold where you drop */
#desk-body .dsk-dock{ background:#111318; border:none; border-radius:14px; color:#eceded; padding:8px 12px 8px; }
#desk-body .dsk-dock .dz-head{ color:#9aa1ab; }
#desk-body .dsk-dock .dsk-q{ flex-direction:row; width:auto; gap:6px; padding:4px 10px; border-radius:99px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
#desk-body .dsk-dock .dsk-q-lab{ color:#eceded; font-size:10.5px; max-width:none; -webkit-line-clamp:1; white-space:nowrap; }
#desk-body .dsk-dock .dsk-q-ct{ position:static; margin-left:2px; background:#ffdd33; color:#111; }
#desk-body .dsk-dock .dsk-q-ct.late{ background:#e24b4a; color:#fff; box-shadow:none; }
#desk-body .dsk-dock .dsk-q.has-late{ border-color:rgba(226,75,74,.5); }
#desk-body .dsk-dock .dsk-q:hover{ border-color:#ffdd33; background:rgba(255,221,51,.08); }
#desk-body .dsk-dock .dsk-q.on{ border-color:#ffdd33; background:rgba(255,221,51,.14); }
#desk-body .dsk-dock .dsk-q.drop{ border-color:#ffdd33; background:rgba(255,221,51,.22); transform:scale(1.05); }
/* triage slips — paper on the desktop, gold edge only when they hold work */
#desk-body .onmy-card{ border:none; box-shadow:0 1px 4px rgba(0,0,0,.08); background:var(--panel); border-left:3px solid #d9a900; }
#desk-body .onmy-card.is-clear{ box-shadow:none; background:transparent; border:1px dashed var(--line); }
/* console-dark inner furniture: tables, schedules, calendar, lanes */
#desk-body .dsk-table th{ background:transparent; }
#desk-body .desk-lane{ background:var(--panel2); }
/* map frame */
#desk-map{ border-radius:8px; }
@media (max-width:980px){ #desk-body .dsk-tabbody{ margin:0 6px 6px; } }

/* v201: drawer spines, compact map + expand, task rows, day-end */
#desk-body .dsk-main{ display:grid; grid-template-columns:60px 1fr; }
.dsk-drawers{ display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-right:1px solid rgba(255,255,255,.08); }
.dsk-drawer{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; background:none;
  border:none; border-radius:10px; padding:8px 2px 6px; font:inherit; cursor:pointer; color:#9aa1ab; }
.dsk-drawer:hover{ background:rgba(255,255,255,.06); color:#eceded; }
.dsk-drawer.open{ background:#f7f7f4; color:#16181d; }
body:not(.theme-light) .dsk-drawer.open{ background:var(--panel); color:var(--text); }
.dd-ico{ font-size:17px; line-height:1; }
.dd-lab{ font-size:8.5px; font-weight:700; letter-spacing:.03em; }
.dd-ct{ position:absolute; top:2px; right:6px; background:#ffdd33; color:#111; border-radius:99px;
  font-size:9px; font-weight:800; padding:0 5px; line-height:13px; }
#desk-body .dsk-tabbody{ margin:10px 10px 10px 0; border-radius:10px; }
.dsk-map-wrap{ position:relative; }
#desk-map{ height:250px; min-height:0; }
.dsk-map-expand{ position:absolute; top:8px; right:8px; z-index:800; background:#16181d; color:#ffdd33;
  border:none; border-radius:8px; width:34px; height:34px; font-size:16px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dsk-map-expand:hover{ background:#000; }
.dsk-task{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; margin-bottom:6px; cursor:pointer; }
.dsk-task:hover{ border-color:#d9a900; }
.dsk-task-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dsk-task-main strong{ font-size:13px; }
.dsk-task-meta{ font-size:11px; color:var(--muted); } .dsk-task-meta em{ font-style:normal; color:var(--cyan,#0e7c96); font-weight:700; }
.due-late{ color:#e24b4a; font-weight:700; } .due-today{ color:#b06a00; font-weight:700; }
.dsk-task .dsk-tick{ margin-left:auto; flex:0 0 auto; }
.dsk-tick.is-done{ border-color:#2e9e5b; background:#2e9e5b; color:#fff; font-size:12px; }
/* v202: the console gives ground — On my desk gets the room for real lists */
#desk-body .desk-onmy{ flex:1 1 36%; min-height:170px; display:flex; flex-direction:column; }
#desk-body .desk-onmy .onmy-grid{ flex:1; min-height:0; grid-auto-rows:1fr; }
#desk-body .onmy-card{ max-height:none; height:100%; overflow-y:auto; }
#desk-body .dsk-split{ flex:1.4 1 50%; min-height:290px; }
#desk-map{ height:210px; }
.dj-status{ text-transform:none; letter-spacing:.02em; font-size:9.5px; }
/* v204: the map fills its drawer, filtered by stage + job type */
.dsk-map-full{ display:flex; flex-direction:column; height:100%; min-height:0; gap:8px; }
.dsk-map-bar{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.dsk-map-bar select{ width:auto; font-size:12px; padding:6px 10px; border-radius:8px; }
.dsk-map-full .dsk-map-wrap{ flex:1; min-height:0; }
.dsk-map-full #desk-map{ height:100%; min-height:220px; }
#desk-body .dsk-tabbody{ display:flex; flex-direction:column; }
#desk-body .dsk-tabbody > *:only-child{ flex:1; min-height:0; }
/* v205: leaflet stays UNDER every popup — the container caps its own stacking context */
#desk-map, #desk-map-big{ position:relative; z-index:0; }
/* v207: bell card retired; jobs rail runs the full height beside cards+console */
.dsk-left{ display:flex; flex-direction:column; min-height:0; gap:8px; }
.dsk-left .desk-onmy{ flex:1 1 40%; min-height:170px; display:flex; flex-direction:column; margin:0 !important; }
.dsk-left .dsk-main{ flex:1.3 1 55%; min-height:280px; }
#desk-body .desk-onmy .onmy-grid{ grid-template-columns:repeat(4,1fr); }
#desk-body .dsk-split{ flex:1 1 auto; }
/* v207b: the assistant tucks into a circle above the dock — no more overlap */
body.desk-lock .ai-fab{ bottom:148px; right:14px; }
#desk-body .dsk-dock{ padding-right:20px; }
/* v208: dock lifts off the floor, assistant below it; on-my-desk grows, console sits lower */
#desk-body .dsk-dock{ margin-bottom:46px; }
body.desk-lock .ai-fab{ bottom:6px; right:14px; }
.dsk-left .desk-onmy{ flex:1.5 1 52%; }
.dsk-left .dsk-main{ flex:1 1 42%; min-height:250px; }
.dsk-map-full #desk-map{ min-height:180px; }
#desk-body .dsk-split{ align-items:stretch; }
.dsk-left{ height:100%; min-height:0; }
/* v209: the toolbar earns its corner — aligned, useful, clear of the bell */
.dsk-hb .dsk-toolbar{ padding-right:56px; gap:6px; }
.dsk-toolbar .btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12.5px; padding:8px 12px; }

/* v228: Messages tab + concierge — teaser row on Overview, day-picker chips,
   sim thread, phone-call blocks on the scheduler. All var()-based so both
   themes get them for free. */
.ov-teas{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel2); cursor:pointer; }
.ov-teas:hover{ border-color:#12b7d8; }
.ov-teas-txt{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
.ov-msgs-teaser{ padding-bottom:12px; }
.mk-days{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; }
.mk-day{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; cursor:pointer;
  color:var(--muted); user-select:none; }
.mk-day.on{ color:var(--text); border-color:var(--amber); background:color-mix(in srgb, var(--amber) 14%, transparent); }
.mk-sim-thread{ max-height:260px; overflow-y:auto; }
.sb-call{ border-style:dashed; }
.sb-survey{ border-style:dashed; }
/* booking type picker in the booking modal */
.bk-kinds{ display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 12px; }
.bk-kind{ flex:1 1 auto; min-width:110px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 12px; border-radius:10px; border:1.5px solid var(--line); background:var(--bg2); color:var(--fg);
  font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .12s, background .12s; }
.bk-kind:hover{ border-color:var(--kc); }
.bk-kind.on{ border-color:var(--kc); background:color-mix(in srgb, var(--kc) 15%, var(--bg2)); box-shadow:inset 0 0 0 1px var(--kc); }

/* v230: Twilio setup walkthrough */
.tw-step{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.tw-n{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--amber); color:#08090b;
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tw-copy{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:4px 0 10px 32px; }
.tw-copy code{ padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel2);
  font-size:12.5px; word-break:break-all; }

/* v232: desk staff switcher + calendar sync */
.dsk-user{ width:auto; font-size:12.5px; padding:8px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); }

/* v241: the Leads desk + texting that feels like texting + custom-value chips */
.ld-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.ld-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; }
.ld-tile{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.ld-tile em{ font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ld-tile strong{ font-size:19px; font-family:'Clash Display',sans-serif; }
.ld-board{ display:flex; gap:10px; overflow-x:auto; align-items:flex-start; padding-bottom:8px; }
.ld-col{ flex:0 0 236px; min-width:236px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; }
.ld-col.ld-over{ border-color:var(--amber); }
.ld-col-head{ display:flex; align-items:center; gap:6px; padding:2px 2px 8px; }
.ld-col-name{ font-size:12px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ld-col-meta{ font-size:11px; color:var(--muted); white-space:nowrap; }
.ld-chase-chip{ font-size:10.5px; padding:2px 7px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.ld-chase-chip.on{ border-color:var(--amber); color:var(--text); }
.ld-chase-edit{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:8px; }
.ld-cards{ display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto; }
.ld-card{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; cursor:pointer; }
.ld-card:hover{ border-color:#12b7d8; }
.ld-card-top{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; }
.ld-age{ font-size:11px; color:var(--muted); flex:none; }
.ld-card-sub{ font-size:12px; margin-top:1px; }
.ld-card-src{ font-size:10.5px; color:var(--muted); margin-top:1px; }
.ld-wait{ font-size:11px; margin-top:4px; color:var(--muted); }
.ld-wait.lw-them{ color:#12b7d8; font-weight:700; }
.ld-empty{ font-size:12px; color:var(--muted); text-align:center; padding:14px 0; }
/* v393: desk Leads tab — one day at a time, untouched flagged loud */
.cn-badge.dnx-newbadge{ background:var(--red); color:#fff; font-weight:800; }
.dnx-leadbar{ display:flex; align-items:center; gap:8px; padding:4px 2px 10px; flex-wrap:wrap; }
.dnx-daynav{ font-size:19px; line-height:1; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; }
.dnx-leaddate{ font-size:13.5px; }
.dnx-leadcount{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.dnx-untouched{ color:var(--red); }
.dnx-leadlist{ display:flex; flex-direction:column; gap:8px; }
.dnx-lead{ background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; cursor:pointer; }
.dnx-lead:hover{ border-color:var(--sgc,#12b7d8); }
.dnx-lead.dnx-lead-new{ border-color:var(--red); box-shadow:inset 3px 0 0 var(--red); }
.dnx-lead-top{ display:flex; align-items:center; gap:8px; }
.dnx-lead-top strong{ font-size:15px; }
.dnx-newtag{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--red); padding:2px 8px; border-radius:999px; }
.dnx-lead-time{ margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
.dnx-lead-meta{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.dnx-lead-line{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.dnx-lead-line .ld-wait{ margin-top:0; }
.dnx-lead-stack{ font-size:11.5px; font-weight:600; background:var(--panel2); color:var(--muted); padding:2px 9px; border-radius:6px; }
.dnx-lead-done{ font-size:12.5px; margin-top:7px; color:var(--text); }
.dnx-lead-done.dnx-lead-none{ color:var(--muted); font-style:italic; }
.dnx-lead-acts{ display:flex; gap:6px; margin-top:9px; }
.ld-wait.lw-new{ color:var(--red); font-weight:700; }
/* v398: photo checklist steps — a camera link on the job + the editor toggle */
.chk-cam{ cursor:pointer; font-size:15px; line-height:1; padding:4px 7px; border-radius:9px; background:var(--panel2); border:1px solid var(--line); flex:none; }
.chk-cam:hover{ border-color:var(--amber); background:rgba(255,221,51,.14); }
.eng-check-row{ display:flex; align-items:center; gap:8px; }
.eng-check-row .eng-check{ flex:1; }
.jt-photo-tog{ opacity:.4; }
.jt-photo-tog.on{ opacity:1; background:rgba(255,221,51,.2); border-radius:8px; }
.ld-spend{ width:92px; }
/* chat: day chips, grouped runs, tails, stamps */
.ov-thread-chat{ background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.ov-day{ text-align:center; margin:12px 0 6px; }
.ov-day span{ font-size:10.5px; font-weight:700; color:var(--muted); background:var(--panel); border:1px solid var(--line); padding:2px 10px; border-radius:999px; }
.ov-thread-chat .ov-bub-row{ display:flex; justify-content:flex-end; margin:1px 0; }
.ov-thread-chat .ov-bub-row-in{ justify-content:flex-start; }
.ov-thread-chat .ov-bub-row.run-start{ margin-top:7px; }
.ov-thread-chat .ov-bub{ max-width:74%; padding:8px 13px; font-size:14px; line-height:1.35; border-radius:18px;
  background:var(--cc,#12b7d8); color:#fff; box-shadow:none; border:none; }
.ov-thread-chat .ov-bub-row.run-end .ov-bub{ border-bottom-right-radius:5px; }
.ov-thread-chat .ov-bub-row-in .ov-bub{ background:var(--panel); color:var(--text); border:1px solid var(--line); }
.ov-thread-chat .ov-bub-row-in.run-end .ov-bub{ border-bottom-right-radius:18px; border-bottom-left-radius:5px; }
.ov-stamp{ text-align:right; font-size:10.5px; color:var(--muted); margin:2px 6px 0; }
.ov-stamp-in{ text-align:left; }
/* custom values reference */
.mv-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px; }
.mv-chip{ display:flex; align-items:center; gap:8px; text-align:left; padding:7px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel); cursor:pointer; }
.mv-chip code{ font-size:12px; color:#0369a1; flex:none; }
.mv-chip span{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-chip.copied{ border-color:var(--green); }
body.theme-light .ov-thread-chat{ background:#eef0f3; }

/* v242: leads tile pop-out */
.ld-tile-click{ cursor:pointer; }
.ld-tile-click:hover{ border-color:#12b7d8; }
.ld-pop-scrim{ position:fixed; inset:0; background:rgba(8,9,11,.45); z-index:90; }
.ld-pop{ position:fixed; top:0; right:0; bottom:0; width:min(440px,92vw); background:var(--bg); border-left:1px solid var(--line);
  z-index:91; display:flex; flex-direction:column; box-shadow:-18px 0 40px rgba(0,0,0,.25); }
.ld-pop-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.ld-pop-list{ overflow-y:auto; padding:8px; }
.ld-pop-row{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:6px; cursor:pointer; background:var(--panel); }
.ld-pop-row:hover{ border-color:#12b7d8; }
.ld-pop-sub{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.ld-pop-val{ text-align:right; flex:none; display:flex; flex-direction:column; }

/* v243: self-booking modal */
.sbm{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(430px,94vw); background:var(--bg);
  border:1px solid var(--line); border-radius:14px; z-index:92; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.sbm-body{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:10px; }

/* v244: the big-four stage — coloured select + card ring */
.stage-sel{ font-weight:800; letter-spacing:.02em; color:var(--sgt,#0b0c0e) !important; background:var(--sgc) !important;
  border-color:var(--sgc) !important; border-radius:999px; padding:6px 12px; }
#job-chip{ transition: box-shadow .25s ease;
  background:var(--panel2); border:1.5px solid transparent;
  padding:15px 20px 5px; }   /* room to breathe; radius comes from the inline stage-glow style (18px) */
@media (max-width:700px){ #job-chip{ padding:13px 15px 4px; } }

/* ============================================================
   v421 — the Stacked Out BRAND EDGE. A gradient outline that wraps a
   rounded card's corners seamlessly (masked ring, not a floating strip).
   Reusable: add class="brand-edge" to any relatively-positioned, rounded,
   transparent-bordered box. Also lives on the job card + every modal.
   ============================================================ */
#job-chip, .modal-card, .brand-edge{ position:relative; }
#job-chip::before, .modal-card::before, .brand-edge::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:0;
  background:linear-gradient(120deg,#ffdd33,#3fe3ff,#ffdd33); background-size:240% 100%; animation:qbGlide 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@media (prefers-reduced-motion: reduce){ #job-chip::before, .modal-card::before, .brand-edge::before{ animation:none; } }

/* v247: the desk phone call bar */
#sp-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:1200;
  display:none; align-items:center; gap:12px; background:#0d0f13; border:1px solid #272b33;
  border-radius:14px; padding:10px 16px; box-shadow:0 18px 48px rgba(0,0,0,.45);
  color:#f5f6f8; font-size:14px; min-width:340px; }
#sp-bar.open{ display:flex; }
#sp-bar .sp-dot{ width:9px; height:9px; border-radius:50%; background:#b08900; flex:none; }
#sp-bar.live .sp-dot{ background:#3fe3ff; animation:sp-pulse 1.4s infinite; }
#sp-bar .sp-who{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
#sp-bar .sp-who strong{ font-size:14px; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sp-bar .sp-who span{ color:#9aa1ab; font-size:12px; }
#sp-bar .sp-state{ color:#3fe3ff; font-weight:700; font-variant-numeric:tabular-nums; min-width:70px; text-align:center; }
#sp-bar .btn.small{ background:#1a1e26; border-color:#2e333d; color:#f5f6f8; }
#sp-bar .btn.small.on{ background:#ffdd33; border-color:#ffdd33; color:#0b0c0e; }
#sp-hang{ background:#e24b4a; border:1px solid #e24b4a; color:#fff; border-radius:9px;
  padding:7px 14px; font-weight:700; cursor:pointer; font-size:13.5px; }
#sp-hang:hover{ filter:brightness(1.08); }
@keyframes sp-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.ov-tx{ display:inline-block; margin-left:6px; }
.ov-tx summary{ cursor:pointer; color:#0369a1; font-size:12.5px; }
.ov-tx pre{ white-space:pre-wrap; font:12px/1.5 inherit; font-family:inherit; background:var(--panel,#f2f3f5);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; max-height:220px; overflow:auto; margin:6px 0 0; }

/* v248: the job card's option pills wear the working line when active */
.opt-chip.on{ position:relative; }
/* the active option is marked by its amber border + panel fill — no floating underline */

/* v248: linked jobs — remedials ride under their EICR */
tr.dt-child td:first-of-type{ padding-left:26px; }
tr.dt-child{ background:color-mix(in srgb, var(--panel2) 55%, transparent); }
.dt-kid-arm{ color:var(--muted); font-weight:700; }
.ov-linked{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 0;
  padding:8px 10px; background:var(--panel2); border-radius:10px; font-size:13px; }
.ov-linked em{ font-style:normal; color:var(--muted); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; }

/* v248: invoice attachments — one tight row */
.doc-att-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.doc-att-row .doc-cert-tick{ margin:0; }
.doc-att-fold{ display:inline-block; }
.doc-att-fold summary{ list-style:none; cursor:pointer; }
.doc-att-fold summary::-webkit-details-marker{ display:none; }
.doc-att-fold[open]{ width:100%; }
.doc-att-fold[open] .photo-grid{ margin-top:8px; }

/* v248: the working line of colour, worked in quietly */
.nav-btn.active{ position:relative; }
.nav-btn.active::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:2px; background:linear-gradient(180deg,#ffdd33,#3fe3ff); }
/* modals now wear the wrapped brand edge (see the v421 brand-edge rule above) */
@media print{ .modal-card::before{ display:none; } }

/* v265: attachment chips — one aligned language everywhere */
.att-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.att-lab{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); flex:none; min-width:150px; }
.att-chip{ display:inline-flex; flex-direction:row; align-items:center; gap:8px; width:auto;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px;
  font-weight:600; line-height:1; background:var(--panel); color:var(--text); cursor:pointer;
  text-transform:none; letter-spacing:0; white-space:nowrap; }
summary.att-chip{ text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--text); }
.att-chip input[type=checkbox]{ margin:0; width:15px; height:15px; accent-color:var(--amber); flex:none; }
.att-chip a{ color:var(--link, #0369a1); text-decoration:none; }
.att-chip.att-fixed{ cursor:default; color:var(--muted); }
.att-chip.att-add{ border-style:dashed; color:var(--muted); }
.att-chip.att-add:hover, .att-chip.att-ghost:hover{ border-color:var(--amber); color:var(--text); }
.att-chip.att-ghost{ border-style:dashed; color:var(--muted); font:inherit; font-size:13px; font-weight:600; }
.att-chip:has(input:checked){ border-color:var(--amber); background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--text); }
.att-mini{ font-size:10px; font-weight:800; border:1px solid #b08900; color:#b08900;
  padding:1px 7px; border-radius:999px; line-height:1.3; }
.att-x{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px;
  padding:0 0 0 2px; line-height:1; }
.att-x:hover{ color:var(--red, #dc2626); }
.att-caret{ color:var(--muted); font-size:11px; }
.att-fold{ display:inline-block; }
.att-fold summary{ list-style:none; }
.att-fold summary::-webkit-details-marker{ display:none; }
.att-fold[open]{ width:100%; }
.att-fold-body{ padding:10px 2px 0; }

/* OZEV grant jobs — loud on the job card and the list, unmissable */
.ozev-pill{ display:inline-flex; align-items:center; background:#12b76a; color:#fff;
  font-weight:800; font-size:11px; letter-spacing:.08em; border-radius:6px;
  padding:2px 8px; text-transform:none; vertical-align:middle; }

/* ═══════════ DESK 2.0 — the one brain ═══════════ */
.dsk-more-wrap{ position:relative; display:inline-block; }
.dsk-more-menu{ display:none; position:absolute; right:0; top:calc(100% + 4px); z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; min-width:180px; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.dsk-more-wrap.open .dsk-more-menu{ display:block; }
.dsk-more-menu button{ display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
  font:inherit; font-size:13px; padding:8px 10px; border-radius:7px; cursor:pointer; }
.dsk-more-menu button:hover{ background:var(--panel2); }

/* Next up — the spine */
.dnx-wrap{ margin:2px 0 14px; }
.dnx-head{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px; flex-wrap:wrap; }
.dnx-count{ background:var(--panel2); color:var(--text); border-radius:999px; padding:1px 9px; font-size:12px; letter-spacing:0; }
.dnx-list{ display:flex; flex-direction:column; gap:6px; }
.dnx-row{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:11px 14px; cursor:pointer; transition:border-color .12s, transform .12s; }
.dnx-row:hover{ border-color:var(--muted); }
.dnx-sev{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dnx-critical{ background:#e24b4a; box-shadow:0 0 0 4px rgba(226,75,74,.16); }
.dnx-warn{ background:#e0a800; box-shadow:0 0 0 4px rgba(224,168,0,.14); }
.dnx-info{ background:#12b7d8; box-shadow:0 0 0 4px rgba(18,183,216,.14); }
.dnx-ico{ font-size:17px; flex-shrink:0; width:22px; text-align:center; }
.dnx-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.dnx-txt{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dnx-sub{ color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dnx-acts{ display:flex; gap:6px; flex-shrink:0; }
/* v612 — Next-up differentiation: a category-coloured left bar + a soft-tinted icon
   chip so each task TYPE reads at a glance, plus quiet urgency bands to chunk a long
   list. Muted tones on purpose (calm, not shouty); only the critical band gets a red
   whisper. Category hues: adrift=red · money=amber · book=blue · task=violet ·
   cert=teal · message=green — all AA-legal on the paper theme. */
.dnx-list .dnx-row{ border-left-width:4px; }
.dnx-row.dnx-cat-adrift{ border-left-color:#c0392b; }
.dnx-row.dnx-cat-money{ border-left-color:#8a6800; }
.dnx-row.dnx-cat-book{ border-left-color:#2563eb; }
.dnx-row.dnx-cat-task{ border-left-color:#6d5bd0; }
.dnx-row.dnx-cat-cert{ border-left-color:#0d9cbc; }
.dnx-row.dnx-cat-msg{ border-left-color:#0e9a58; }
.dnx-row.dnx-sev-critical{ background:linear-gradient(0deg,rgba(192,57,43,.045),rgba(192,57,43,.045)),var(--panel); }
.dnx-chip{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; }
.dnx-chip.dnx-cat-adrift{ background:rgba(192,57,43,.12); }
.dnx-chip.dnx-cat-money{ background:rgba(138,104,0,.14); }
.dnx-chip.dnx-cat-book{ background:rgba(37,99,235,.12); }
.dnx-chip.dnx-cat-task{ background:rgba(109,91,208,.13); }
.dnx-chip.dnx-cat-cert{ background:rgba(13,156,188,.13); }
.dnx-chip.dnx-cat-msg{ background:rgba(14,154,88,.13); }
.dnx-band{ display:flex; align-items:center; gap:8px; margin:14px 2px 5px; }
.dnx-band:first-child{ margin-top:2px; }
.dnx-band-lab{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dnx-band-critical{ color:#c0392b; } .dnx-band-warn{ color:#8a6800; } .dnx-band-info{ color:var(--muted); }
.dnx-band-n{ font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:0 7px; font-weight:700; line-height:17px; }
.dnx-more{ margin-top:8px; }
.dnx-clear{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 20px;
  text-align:center; color:var(--muted); font-size:14px; }
.dnx-clear strong{ color:var(--text); }
/* assistant cards */
.dnx-ai-card{ position:relative; background:linear-gradient(180deg,rgba(255,221,51,.08),rgba(63,227,255,.05));
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; font-size:13.5px; }
.dnx-ai-h{ font-weight:700; margin-bottom:8px; }
.dnx-ai-row{ display:flex; gap:10px; align-items:flex-start; padding:5px 0; }
.dnx-ai-row .dnx-sub{ display:block; white-space:normal; }
.dnx-ai-n{ background:var(--amber); color:#16181d; font-weight:800; width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center; font-size:13px; flex-shrink:0; }
.dnx-ai-x{ position:absolute; top:8px; right:8px; }
.dnx-ask-ans{ margin-top:10px; font-size:13.5px; line-height:1.5; }
/* today strip */
.dsk-today{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:11px; padding:9px 12px; margin-bottom:14px; }
.dsk-today-h{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.dsk-today-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px 4px 8px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--text); }
.dsk-today-chip:hover{ border-color:var(--muted); }
.dsk-today-t{ font-variant-numeric:tabular-nums; font-weight:700; }
.dsk-today .eng-dot{ width:18px; height:18px; font-size:9px; }
/* demoted tools */
.dsk-tools{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; }
.dsk-tools .dsk-drawers{ display:flex; flex-direction:row; gap:4px; align-items:center; padding:0; border-right:none; flex-wrap:wrap; }
.dsk-tools .dsk-drawer{ flex-direction:row; gap:6px; padding:7px 12px; }
.dsk-find{ margin-left:auto; max-width:220px; }
.dsk-findlist{ margin-top:8px; max-height:340px; overflow-y:auto; }

/* Desk 2.1 — the cockpit */
.dsk-bigfind{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
.dsk-bigfind-in{ flex:1; max-width:560px; font-size:15px; padding:11px 16px; border-radius:11px; }
.dsk-results{ margin-bottom:14px; max-height:520px; overflow-y:auto; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:8px; }
.dsk-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:14px; align-items:start; margin-bottom:12px; }
@media (max-width:1100px){ .dsk-grid{ grid-template-columns:1fr; } }
.dsk-board{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.dsk-board .dsk-datebar{ margin:0 0 6px; }
.dsk-board .sch-grid{ max-height:430px; overflow-y:auto; }

/* Desk 2.2 — grouped tasks in the brain */
.dnx-jobgrp{ background:var(--panel); border:1px solid var(--line); border-radius:11px; margin-bottom:6px; }
.dnx-jobgrp summary{ display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer;
  list-style:none; font-size:14px; text-transform:none; letter-spacing:0; }
.dnx-jobgrp summary::-webkit-details-marker{ display:none; }
.dnx-jobgrp summary::before{ content:'▸'; color:var(--muted); transition:transform .12s; }
.dnx-jobgrp[open] summary::before{ transform:rotate(90deg); }
.dnx-jobgrp summary em{ color:var(--muted); font-style:normal; font-size:12px; }
.dnx-jobgrp summary .dnx-sub{ white-space:nowrap; }
.dnx-trow{ display:flex; align-items:center; gap:8px; padding:7px 14px 7px 30px; border-top:1px solid var(--line); font-size:13.5px; }
.dnx-trow .dnx-body{ flex:1; }

/* Desk 2.3 — the folder, not the console. Same tab language as the job card. */
.dsk-folder{ display:flex; flex-direction:column; min-height:0; flex:1; }
.dsk-sheet{ background:var(--panel); border:1px solid var(--line); border-radius:0 14px 14px 14px;
  padding:12px; min-height:430px; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.10); }
.dsk-sheet > *:only-child{ flex:1; min-height:0; }
.dsk-sheet .dsk-map-full{ display:flex; flex-direction:column; flex:1; min-height:0; gap:8px; }
.dsk-sheet #desk-map{ height:100%; min-height:360px; border-radius:10px; }
.dsk-sheet .dsk-map-bar select{ background:var(--panel2); border-color:var(--line); }
body.theme-light .dsk-sheet{ box-shadow:0 6px 18px rgba(22,24,29,.07); }

/* Settings → Automations: the journey builder */
.au-cta{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.au-lab{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.au-cats{ gap:5px; align-items:center; }
.au-catgrp{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 4px 0 6px; }
.au-journey{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.au-stage{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.au-stage-quiet{ background:transparent; border-style:dashed; }
.au-stage-h{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:10px; flex-wrap:wrap; }
.au-stage-h .muted{ font-weight:400; }
.au-stage-n{ width:22px; height:22px; border-radius:7px; background:var(--amber); color:#16181d; font-weight:800; font-size:12px; display:grid; place-items:center; flex:0 0 auto; }
.au-step{ display:flex; gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.au-step:first-of-type{ border-top:none; }
.au-step-t{ flex:1; min-width:180px; }
.au-move{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.au-move select{ width:auto; font-size:12px; padding:5px 8px; }
.au-empty{ padding:6px 2px; }
.au-rule{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); }
.au-rule:first-of-type{ border-top:none; }
.au-rule.off{ opacity:.5; }
.au-rule-body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.au-when{ font-weight:600; font-size:13.5px; }
.au-then{ font-size:13px; color:var(--muted); }
.au-rule-acts{ display:flex; gap:4px; align-items:center; flex:0 0 auto; }
.au-seqgrp{ border-top:1px solid var(--line); padding-top:10px; margin-top:10px; }
.au-seqgrp:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.au-seq-h{ font-weight:600; font-size:13px; margin-bottom:6px; }
.au-seq{ display:grid; grid-template-columns:auto auto 1fr auto; gap:6px; align-items:start; padding:6px 0; }
.au-seq-day{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); white-space:nowrap; }
.au-seq-day input{ width:52px; }
.au-seq-name{ font-size:12px; }
.au-seq-body{ grid-column:1/-1; font-size:13px; }
.jai-prompts{ margin:6px 0 10px 18px; color:var(--muted); font-size:13px; }
.jai-prompts li{ margin:3px 0; }
#jai-text{ width:100%; font-size:14px; }
.jai-plan{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-top:10px; }
.jai-sec{ margin:8px 0; } .jai-sec ul{ margin:4px 0 0 18px; } .jai-sec li{ margin:2px 0; font-size:13.5px; }
@media (max-width:640px){ .au-seq{ grid-template-columns:1fr; } }

/* rule builder v2 — the step stack */
.au-act-row{ display:flex; gap:10px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin:6px 0; }
.au-act-n{ width:20px; height:20px; border-radius:6px; background:var(--amber); color:#16181d; font-weight:800;
  font-size:11px; display:grid; place-items:center; flex:0 0 auto; margin-top:2px; }
.au-act-main{ flex:1; min-width:0; }
.au-act-main strong{ font-size:13px; }
.au-act-fields{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; align-items:center; }
.au-act-fields textarea{ width:100%; font-size:13px; }
.au-act-fields input, .au-act-fields select{ font-size:13px; }

/* Automations — the inline if-this-then-that editor */
.au-editor{ background:var(--panel2); border:2px solid var(--amber); border-radius:12px; padding:14px 16px; margin:8px 0 12px; }
.au-ed-h{ display:flex; align-items:center; font-weight:700; font-size:14px; margin-bottom:10px; }
.au-ed-line{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.au-ed-tag{ font-size:11px; font-weight:800; letter-spacing:.08em; background:var(--amber); color:#16181d; border-radius:6px; padding:3px 9px; flex:0 0 auto; }
.au-ed-tag.amber{ background:var(--amber); } .au-ed-tag.ghost{ background:var(--line); color:var(--muted); }
.au-ed-det{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.au-ed-det input, .au-ed-det select{ font-size:13px; }
.au-big-sel{ font-size:14px; font-weight:600; max-width:340px; }
.au-ed-steps{ margin:4px 0; }
.au-rule-body{ border-radius:6px; padding:2px 4px; }
.au-rule-body:hover{ background:var(--panel2); }
.au-seq-addstack{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:4px; max-width:340px; }
.au-bc-controls{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.au-bc{ border:1px solid var(--line); border-radius:9px; margin:6px 0; background:var(--panel); }
.au-bc summary{ padding:9px 12px; cursor:pointer; font-weight:600; font-size:13.5px; list-style:none; }
.au-bc summary::-webkit-details-marker{ display:none; }
.au-bc summary::before{ content:'▸ '; color:var(--muted); }
.au-bc[open] summary::before{ content:'▾ '; }
.au-bc-l{ display:block; padding:0 12px 10px; font-size:12px; color:var(--muted); }
.au-bc-l textarea, .au-bc-l input{ width:100%; font-size:13px; margin-top:3px; color:var(--text); }

/* ============================================================
   v297 — PRE-LAUNCH AUDIT FIXES (11 Jul 2026 audit, fixes 1/2/5)
   Late in the file on purpose: these win the cascade over the
   older component rules above.
   ============================================================ */

/* ---- fix 1 · contrast (measured pairs in the audit artifact) ---- */
/* the command-palette / rail buttons sit on the charcoal rail even in the
   paper theme — the paper --muted (#5f6774) only manages 3.36:1 there */
.pal-btn{ color:#9aa1ab; }
/* grey count on the lit yellow bell was 4.25:1 — charcoal reads at 14:1 */
.bell-btn.has-new{ color:#0b0c0e !important; }
/* stale-days red was 2.51:1 on paper */
body.theme-light .days-chip.stale{ color:#c2362b; border-color:rgba(194,54,43,.45); }
/* autosave tick: green + .75 opacity landed 3.51:1 on paper */
body.theme-light .autosave{ color:#1d7a4f; border-color:rgba(29,122,79,.35); opacity:1; }
/* solid status pills on paper: white text needs the colour ~25% deeper */
body.theme-light .status-pill{ background:color-mix(in srgb, var(--pc,#6b7280) 75%, #000); }
/* links inside muted copy (e.g. "open the diary →") were 3.46:1 */
body.theme-light .muted a{ color:#0a6c80; }
/* staff-initial circles: every staff colour is a light shade — dark ink */
.dsk-init{ color:#08090b; }

/* ---- fix 5 · minimum data-text size: 9-10px data → 12px ---- */
.days-chip, .dj-status, .djp-top .dj-status, .cn-badge, .ops-badge, .qr-badge,
.chip-sale, .desk-stack .ds-late, .dt-badge, .lane-card em, .djp-chip,
.sb-win, .sched-hour, .eng-wd span, .hbc-val, .jny-ct, .pt-photo-d,
.eng-tl-hr span{ font-size:12px; }
.cal-ev{ font-size:11px; padding:1px 4px; } /* month cells clip at 12 — 11 clears the ≤10px bucket */
.eng-dot{ font-size:10.5px; width:26px; height:26px; } /* initials; circle grows with the type */

/* ---- fix 2 · tap targets: 40px key admin controls on touch ---- */
@media (pointer:coarse), (max-width:820px){
  .btn{ min-height:40px; }
  .icon-btn{ min-height:40px; min-width:40px; }
  .chip-btn{ min-height:40px; }
  select.status-sel, select.stage-sel, select.mini-sel{ min-height:40px; }
  .jc-flag, .dsk-tick{ min-height:40px; min-width:40px; }
  .pal-btn, .bell-btn{ min-height:40px; min-width:40px; }
  input[type=checkbox], input[type=radio]{ width:20px; height:20px; }
  /* Business Costs is almost entirely number fields and month/year selects, and it is
     the part of that view users touch most. These sat at 26-27px and were missed by the
     list above. 44px, not the 40px floor: raising that floor globally is a wider call. */
  input.mini, .ovh-table input, .ovh-table select,
  .staff-fields input[type=number], .staff-fields select, .staff-name{ min-height:44px; }
}
/* engineer mode is field use — gloves, one hand, van: 44px everywhere */
body.eng-mode .btn, body.eng-mode a.btn{ min-height:44px; }
body.eng-mode .icon-btn{ min-height:44px; min-width:44px; }
body.eng-mode .dsk-tick, body.eng-mode .jc-flag{ min-height:44px; min-width:44px; }
body.eng-mode .chip-btn{ min-height:44px; }
body.eng-mode input[type=checkbox], body.eng-mode input[type=radio]{ width:22px; height:22px; }
/* …but the redesigned field app's own controls carry none of those classes, so
   the floor above never reached them. These are the .fa-* controls, declared
   26-40px, and they are the ones actually being tapped in gloves. Scoped to
   body.eng-mode so it beats the later .fa-* declarations on specificity rather
   than on source order. */
body.eng-mode .fa-tick{ width:44px; height:44px; }
body.eng-mode .fa-check-who{ min-width:44px; height:44px; }
body.eng-mode .fa-van-seg button{ min-width:44px; min-height:44px; }
body.eng-mode .fa-cam{ width:44px; height:44px; }
body.eng-mode .fa-visrow-x{ min-width:44px; min-height:44px; }
body.eng-mode .fa-stagebtn{ min-height:44px; }
body.eng-mode .fa-iconbtn{ width:44px; height:44px; }
body.eng-mode .fa-themebtn{ min-height:44px; }
body.eng-mode .fa-logadd-mic, body.eng-mode .fa-logadd-go{ width:44px; height:44px; }
/* v564 — the rest of them, found by MEASURING engineer mode at 390x844 (an
   iPhone 12/13/14/15) rather than reading the stylesheet. The audit register
   carried "Engineer mode at 390x844" as an unticked item since 19 Jul; nobody
   had ever run it, so these had never surfaced. Every one below was under the
   44px floor on a real handset:
     .lanes-toggle 28 · .fa-morephone 32 · select 36 · .tab 36 · input 38
     · .fa-routebtn 40 · .fa-chip2 40 · .fa-tx-chip 40 · .mini-sel/.status-sel 40
     · .fa-statebtn 42
   Inputs and selects get the floor too: a 38px text field is the thing an
   engineer misses most with a glove on, and it is where the job log is written. */
body.eng-mode .fa-statebtn{ min-height:44px; }
body.eng-mode .fa-chip2{ min-height:44px; }
body.eng-mode .fa-tx-chip{ min-height:44px; }
body.eng-mode .fa-routebtn{ min-height:44px; }
body.eng-mode .lanes-toggle{ min-height:44px; }
body.eng-mode .tabs .tab, body.eng-mode .job-tabs .tab{ min-height:44px; }
body.eng-mode .fa-morephone{ min-height:44px; }
body.eng-mode .mini-sel, body.eng-mode .status-sel, body.eng-mode .stage-sel{ min-height:44px; }
body.eng-mode input[type=text], body.eng-mode input[type=search], body.eng-mode input[type=tel],
body.eng-mode input[type=email], body.eng-mode input[type=number], body.eng-mode input[type=date],
body.eng-mode input:not([type]), body.eng-mode select, body.eng-mode textarea,
body.eng-mode .fa-sheet input, body.eng-mode .fa-sheet select{ min-height:44px; }
/* v728 — THREE MORE, and they are the ones a DRIVER uses. Measured the same way
   as the sweep above (rendered rectangles, engineer mode, 390x844, not computed
   styles), so they should have been on the v564 list and simply were not:
     .fa-drive2 button  19.8px tall — the button that launches the satnav, between
       two job rows, tapped from the driver's seat. The smallest control on the
       screen was the one with the highest cost of missing.
     .eng-wd            42.6 x 57.8 — the seven week days, which are the ENTIRE
       navigation of My Day. 1.4px under on a 390px iPhone and worse on a 375px SE.
     .menu-btn          41 x 36, and position:fixed over scrolling content.
   The week strip is 7 cells in a fixed-width row, so the floor cannot come from
   min-height alone: the gap tightens to 3px and each cell takes min-width:44px,
   which blocks flex-shrink. 7x44 + 6x3 = 326 fits the 390px shell; on a narrower
   handset the row scrolls rather than shrinking a target below the floor, because
   a day you cannot hit is worse than a day you have to nudge into view. */
body.eng-mode .fa-drive2 button{ min-height:44px; min-width:44px; padding:0 4px; }
body.eng-mode .eng-week{ gap:3px; overflow-x:auto; scrollbar-width:none; }
body.eng-mode .eng-week::-webkit-scrollbar{ display:none; }
body.eng-mode .eng-wd{ min-width:44px; min-height:44px; }
/* v834 — Jamie, 9 Aug: "it does not need to be on the engineers or a user's
   mobile app." The line above (v728) made the hamburger a proper 44px tap
   target IN eng-mode; nobody revisited it when v833 gave the field app its own
   tab bar + settings gear. Net result: BOTH an owner and an engineer, on the
   phone, could tap the hamburger and land in the full desktop sidebar — every
   view, including the ones the v833 strip-down was written specifically to
   take away. The field shell has its own front door now (faTabBar/
   faSettingsSheet); the desktop drawer is not part of it for ANYONE on a
   phone, owner included — mirrors "engineer cannot reach desktop at all" the
   other way round. Retired rather than deleted, per this file's own convention.

   v837 — Jamie, 10 Aug: SCOPED TO THE APP SURFACE ONLY. v834 hid the
   hamburger in eng-mode with no viewport / no surface gate, so on a DESKTOP
   browser that had .nav-min set (Jamie's own collapsible-sidebar preference,
   applyNavMin in js/extras.js:1262 — position:fixed; translateX(-110%)) OR at
   the base ≤860px mobile breakpoint, the sidebar was slid off-screen AND its
   only entry point (the hamburger) was display:none — trapping the master
   account in mobile engineer mode on desktop with no visible escape. The
   #eng-toggle-btn escape lives in .sidebar-foot, which is unreachable while
   the sidebar itself is off-screen. v834's intent was the FIELD APP — the
   installed store build or a claimed phone — not the desktop browser: those
   are what sqIsAppSurface() names and what applyEngMode() writes as
   body.app-surface. Adding .app-surface to the selector keeps v834's rule
   exactly on the surface it was written for, and restores the desktop escape
   hatch that the eng-view preview flow was always meant to have.
   Reproduced at 1440 on master account with body class list
   "theme-light nav-min eng-mode eng-admin": #eng-toggle-btn.getBoundingClientRect
   was 0×0 (sidebar off-screen), .menu-btn was display:none (this rule) — no
   visible escape existed. */
body.eng-mode.app-surface .menu-btn,
body.eng-mode.app-surface .menu-backdrop{ display:none !important; }
/* the recent-jobs switcher is a desk affordance. router.js only suppresses it
   on view-quote, so it floated over the job card's action grid — and the field
   app already has a tab bar and a back button. .ai-fab was hidden in eng mode
   by the same sweep that missed this one. */
body.eng-mode #recent-switcher{ display:none !important; }

/* ---- v298 · review-pass closes (independent reviewer over the v297 diff) ---- */
/* the jobs-table status SELECT kept raw status colours under white text (3.27:1 on Sent) */
body.theme-light .data-table .status-sel{ background:color-mix(in srgb, var(--pc,#6b7280) 75%, #000); }
/* pills whose source colour is light (leave: yellow/green/red) carry dark ink instead */
.status-pill.pill-ink{ background:var(--pc,#9aa1ab); color:#0b0c0e !important; border:none; padding:4px 12px; }
body.theme-light .status-pill.pill-ink{ color:#0b0c0e !important; }
/* the compact desk-today engineer dot still forced 9px (higher specificity than fix 5) */
.dsk-today .eng-dot{ font-size:10.5px; width:24px; height:24px; }
/* Team capacity figures wore the raw status green as text (3.77:1) */
body.theme-light .cap-part{ color:#047857; }
/* stack pickers (queue-sel) had muted-on-grey text in the light theme (1.3:1,
   found the moment the scanner learned to read selects) — quiet but readable */
body.theme-light .data-table .status-sel.queue-sel{ background:#f0f0ec; color:#41454c !important; border:1px solid #e5e4dc; }

/* ============================================================
   v301 — THE QUALITY FLOOR (differential audit item 6)
   Keyboard focus you can actually see, motion that respects the
   visitor's setting. The old ring was 2px amber and five
   `outline:none` :focus rules erased it on every input.
   ============================================================ */
:focus-visible{ outline:3px solid #0d9cbc; outline-offset:2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid #0d9cbc; outline-offset:1px; }
#pal-input:focus-visible, #cloud-gate input:focus-visible{ outline:3px solid #0d9cbc; outline-offset:1px; }
.qb-addbar input:focus-visible, .jd-editor:focus-visible{ outline:3px solid #0d9cbc; outline-offset:1px; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto !important; }
}

/* ---- v304 · the stage glow follows the job (Jamie: same treatment everywhere
   a job shows as a card; stronger on the desk panel). --sgc is set inline by
   the renderer from the big-four stage colour — the old per-status st-edge
   palettes (v203, pre-brand) are retired. ---- */
/* v305: packed cards merge outer halos (Jamie) — the glow moves INSIDE the
   card, washing in from its own edges; the lone big job card keeps its halo */
/* v310 · glow stronger + even weight (Jamie: only the red stood out). Light
   stage colours — yellow especially — wash out on the pale card, so the glow
   colour is deepened ~18% toward the panel first, THEN given its alpha: yellow
   reads as a gold wash, red/teal/green stay rich, all four carry now. */
.stage-glow{ box-shadow:inset 0 0 17px 3px color-mix(in srgb, color-mix(in srgb, var(--sgc,#9aa1ab) 84%, #0d0f13) 60%, transparent); }
.stage-glow-strong{ box-shadow:inset 0 0 27px 6px color-mix(in srgb, color-mix(in srgb, var(--sgc,#9aa1ab) 82%, #0d0f13) 74%, transparent); }
.djp-row.stage-glow-strong, .lane-card.stage-glow, .ld-card.stage-glow{ border-left:none; }

/* ---- v306 · the folder strip wears the job card's tab buttons ---- */
.dsk-folder .job-tabs{ margin:0; padding:0 4px; }

/* ---- v309 · "More room" = the WORKBENCH takes over (Jamie: the button just
   resized the map / did nowt on the other tabs). Big mode now (1) tucks the
   Next Up list into a capped scroller so it can't squash the box, (2) gives
   the whole tabbed box the column's height, and (3) fills EVERY tab — the
   stacks lanes stand tall, the team day and task list fill and scroll, the
   map fills. Not a map resize any more. ---- */
.dsk-left-big{ min-height:calc(100vh - 150px); }
.dsk-left-big .dnx-wrap{ max-height:190px; overflow-y:auto; flex:0 0 auto; }
.dsk-left-big .dsk-folder{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.dsk-folder-big .dsk-sheet{ flex:1 1 auto; min-height:0; overflow:auto; }
.dsk-folder-big .dsk-map-full{ height:100%; }
.dsk-folder-big #desk-map{ height:100%; min-height:340px; }
.dsk-folder-big .desk-lanes{ min-height:calc(100vh - 360px); align-items:stretch; }
.dsk-folder-big .desk-lane{ align-self:flex-start; }
.dsk-folder-big .dsk-cal{ min-height:calc(100vh - 380px); }

/* ---- v307 · stacks lanes actually scroll (Jamie: no way left/right) —
   grid/flex children default to min-width:auto, so the workspace column was
   stretching to fit every lane and the page clipped the rest ---- */
.dsk-split > div, .dsk-folder, .dsk-sheet{ min-width:0; }
.desk-lanes{ max-width:100%; scrollbar-width:thin; }
.desk-lanes::-webkit-scrollbar{ height:10px; }
.desk-lanes::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.desk-lanes::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

/* ---- v308 · the workspace sheet's bottom corners read square at a glance
   (14px on a box that big) — bottom gets the 18px modal-tier curve ---- */
.dsk-sheet{ border-radius:0 14px 18px 18px; }

/* v310 · the ☰ shares the top-left corner with the desk greeting on collapsed
   / narrow layouts (the desk locks main to padding-top:14px, so the greeting
   can't drop below the button) — indent the greeting block clear of it */
body.nav-min .dsk-hb-l{ padding-left:52px; }
@media (max-width:860px){ .dsk-hb-l{ padding-left:52px; } }

/* ============================================================
   v313 · THE CUSTOMER QUOTE, ELEVATED (Jamie: make it visually
   outstanding, descriptive, interactive). Wears the business's own
   TWO colours — --cqa is their main, --cqa2 their pop. Print-safe:
   backgrounds forced to print.
   ============================================================ */
.cq-doc{ color:#242a33; font-size:13.5px; line-height:1.62;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
/* masthead — big confident name, a 64/36 rule in the firm's own two colours,
   QUOTATION as a bordered eyebrow.
   v799: THE TAIL WAS #ffdd33, HARD-CODED — OUR brand on THEIR paper. Measured
   in pixels, not read off the declaration: exactly 36.0% of the widest element
   on every quote and every invoice was Electric Yellow, sitting next to the
   firm's own colour. DESIGN_SPEC §0.3 — "customer-facing paper wears the
   customer's electrician's brand, never ours" — and it is the first thing on
   the page. It now reads the firm's POP colour, the one they already set on
   Branding, and falls back to their MAIN colour so a firm that has only ever
   chosen one gets a solid rule in it. Never yellow, whatever they have set.
   The PDF needs no change: js/pdf.js reads whatever the browser resolved. */
.cq-head{ align-items:flex-start; border-bottom:none !important; padding-bottom:18px; margin-bottom:24px; position:relative; }
.cq-head::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--cqa,#16181d) 0 64%, var(--cqa2,var(--cqa,#16181d)) 64% 100%); }
.cq-biz{ font-size:28px; font-weight:700; letter-spacing:-.6px; line-height:1.04; color:var(--cqa,#16181d); }
.cq-logo{ max-height:58px; max-width:190px; }
.cq-meta strong{ display:inline-block; color:var(--cqa,#16181d); font-size:11px; letter-spacing:2.5px; font-weight:800;
  border:1.5px solid var(--cqa,#16181d); border-radius:7px; padding:4px 11px; margin-bottom:8px; }
/* customer + the warm one-line intro */
.cq-customer{ background:#f6f7f9; border-radius:12px; padding:12px 16px; margin-bottom:20px; }
.cq-summary{ font-size:15px !important; line-height:1.62 !important; color:#2a2f38 !important;
  margin:0 0 22px !important; padding:2px 0 2px 16px; border-left:3px solid var(--cqa,#16181d); }
/* line items — descriptions promoted from tiny grey to readable copy */
.cq-table th{ border-bottom:2px solid var(--cqa,#16181d) !important; padding-bottom:9px !important; }
.cq-table td{ padding:13px 6px !important; }
.cq-table td strong{ font-size:14.5px; letter-spacing:-.1px; font-family:var(--font-display,inherit); font-weight:600; }
.cq-sub{ font-size:12.5px !important; color:#5a6069 !important; line-height:1.5 !important; margin-top:4px; }
.cq-room td{ background:color-mix(in srgb, var(--cqa,#16181d) 8%, #fff) !important; color:var(--cqa,#16181d) !important;
  border-radius:7px; letter-spacing:1.4px !important; padding:8px 10px !important; }
/* total — bold, accent-framed */
.cq-totals{ width:300px; }
.cq-totals > div{ padding:6px 0; font-size:13.5px; }
.cq-grand{ font-weight:800 !important; font-size:19px !important; color:var(--cqa,#16181d);
  border-top:2.5px solid var(--cqa,#16181d) !important; padding-top:11px !important; margin-top:8px; }
/* trust badges */
.cq-creds{ border:none !important; background:color-mix(in srgb, var(--cqa,#16181d) 6%, #fff); border-radius:12px !important;
  padding:12px 16px !important; gap:10px 22px !important; }
/* interactive: pick-one / optional-extra cards — premium, selectable */
.cq-choice{ border:1.5px solid color-mix(in srgb, var(--cqa,#16181d) 22%, #fff) !important; border-radius:14px !important;
  padding:14px 16px !important; margin-top:18px !important; background:#fcfcfd; }
.cq-choice .cq-lab{ font-size:12px !important; margin-bottom:6px; }
.cq-opt{ border:1.5px solid #e5e7eb !important; border-radius:12px !important; padding:13px 14px !important;
  margin-top:10px !important; transition:border-color .12s, background .12s, box-shadow .12s; min-height:44px; }
.cq-opt:hover{ border-color:color-mix(in srgb, var(--cqa,#16181d) 45%, #fff) !important; }
.cq-opt.sel{ border-color:var(--cqa,#16181d) !important; background:color-mix(in srgb, var(--cqa,#16181d) 5%, #fff) !important;
  box-shadow:0 2px 10px color-mix(in srgb, var(--cqa,#16181d) 14%, transparent); }
.cq-opt input{ accent-color:var(--cqa,#16181d) !important; }
.cq-opt strong{ font-size:14px; }
.cq-opt-price{ font-size:14.5px; color:var(--cqa,#16181d); }
/* payment schedule — cleaner rows */
.cq-stages td{ padding:9px 10px !important; border-bottom:1px solid #edeff2; }
.cq-terms{ margin-top:28px; padding-top:16px; color:#8a909a; font-size:11px; line-height:1.6; }

/* ============================================================
   v316 · THE SEND FLOW RETHOUGHT (Jamie: SM8's flow works — same
   steps, our language). One action menu where every item says
   what it does; the email screen wears real email anatomy.
   ============================================================ */
/* the described action menu — the app's ONE way to offer actions */
.act-wrap{ position:relative; display:inline-block; }
.act-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:80; width:min(360px, 86vw);
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.30); text-align:left; }
body.theme-light .act-menu{ background:#fff; box-shadow:0 18px 50px rgba(22,24,29,.22); }
.act-menu.open{ display:block; }
.act-menu > button{ display:block; width:100%; text-align:left; background:none; border:none; font:inherit;
  color:var(--text); padding:11px 12px; border-radius:10px; cursor:pointer; min-height:44px; }
.act-menu > button:hover{ background:var(--panel2); }
body.theme-light .act-menu > button:hover{ background:#f4f4f0; }
.act-menu strong{ display:block; font-size:14px; }
.act-menu span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:2px; }
.act-sep{ height:1px; background:var(--line); margin:6px 10px; }
.act-menu.inv .cq-quote-only{ display:none; }
/* the composer — reads like writing a proper email */
.modal-card.cmp{ max-width:720px; }
.cmp-lab{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.cmp-row{ display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:center;
  padding:8px 2px; border-bottom:1px solid var(--line); }
.cmp-row input{ border:none !important; background:transparent !important; padding:7px 4px; font:inherit; width:100%; border-radius:8px; }
.cmp-row input:focus{ box-shadow:none !important; background:var(--panel2) !important; }
body.theme-light .cmp-row input:focus{ background:#f4f4f0 !important; }
.cmp-atts{ display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:start;
  padding:11px 2px; border-bottom:1px solid var(--line); }
.cmp-fold{ margin-top:8px; }
.cmp-fold summary{ font-size:12px; color:var(--muted); cursor:pointer; text-transform:none; letter-spacing:0; }
.cmp-body-bar{ display:flex; gap:10px; align-items:center; padding:11px 2px 4px; }
.cmp-body textarea{ width:100%; border:none; background:transparent; min-height:200px;
  padding:8px 4px; font:inherit; line-height:1.6; }
.cmp-foot{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center; }
.att-chip.att-doc{ border-style:solid; font-weight:700; }
@media (max-width:640px){ .cmp-row, .cmp-atts{ grid-template-columns:1fr; gap:2px; } }

/* the composer always stacks above the quote desk it was opened from */
#send-modal{ z-index:210; }

/* ============================================================
   v319 · SCHEDULER PASS 1 — surface strays + a "wants it sooner"
   priority rail so nothing slips and earlier-slot jobs stay in view.
   ============================================================ */
.tray-sec{ margin-bottom:14px; }
.tray-h{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; }
.tray-note{ font-size:11.5px; color:var(--muted); margin:0 0 8px; line-height:1.45; }
.tray-sooner .tray-h{ color:#8a6d00; } /* v537 audit A10: 2.6:1 on white */
.tray-risk .tray-h{ color:#c14e24; } /* v537 audit A10: was 3.35 */
/* Measured in the browser at 18x16 — 1.8% of a block that opens the job on its
   own tap, so a near miss opened the wrong thing. The glyph stays 12px; only
   the hit area grows, to the 44px floor. min-height:0 was actively defeating it. */
.sb-star{ background:none; border:none; cursor:pointer; font-size:12px; line-height:1; padding:2px 3px;
  opacity:.35; filter:grayscale(1); margin-left:auto; border-radius:6px;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.sb-star:hover{ opacity:.8; background:rgba(224,160,0,.15); }
.sb-star.on{ opacity:1; filter:none; }
.sb-tray{ position:relative; }
/* centred on the right edge so the taller box stays inside the card */
.sb-tray .sb-star{ position:absolute; top:50%; right:0; transform:translateY(-50%); margin:0; }
.sb-sooner{ box-shadow:inset 0 0 0 1.5px rgba(224,160,0,.55); }
.sb-wants{ box-shadow:0 0 0 2px rgba(224,160,0,.7), 0 0 12px 1px rgba(224,160,0,.35); }

/* ============================================================
   v320 · ONE SCHEDULER — the calendar now uses the desk's board
   (engineers=rows, hours horizontal). Week = day-bands stacked.
   ============================================================ */
.board-stack{ display:flex; flex-direction:column; gap:12px; flex:1; min-width:0; }
.board-band{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
body.theme-light .board-band{ box-shadow:0 4px 16px rgba(22,24,29,.05); }
.board-band-head{ display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:13.5px;
  background:var(--panel2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.board-band-head strong{ font-size:14px; }
.board-band-n{ font-size:12px; color:var(--muted); }
.board-today{ box-shadow:0 0 0 2px color-mix(in srgb,var(--amber,#ffdd33) 60%, transparent); }
.board-today .board-band-head{ background:color-mix(in srgb,var(--amber,#ffdd33) 12%, var(--panel2)); }
.board-leave{ font-size:11.5px; color:var(--muted); background:color-mix(in srgb,var(--sc,#9aa1ab) 14%, transparent);
  border-radius:20px; padding:2px 9px; }
.board-band .sch-grid{ border:none; border-radius:0; max-height:none; overflow-x:auto; }
.board-day .sch-grid{ max-height:none; }
/* the board scrolls horizontally as a whole on narrow screens / many hours */
.board-band .sch-row{ min-width:640px; }
.sch-empty{ color:var(--line); font-size:11px; padding-left:8px; align-self:center; }
/* a dead .sch-block-sooner stood here, and a second one further down; both lost to the live !important copy below and were deleted with the contrast fix */
.sch-lane.sb-over{ background:color-mix(in srgb,var(--amber,#ffdd33) 16%, transparent); }

/* ============================================================
   v321 · THE BOARD GOES PREMIUM (Jamie: "looks a bit like excel").
   Gridlines out; breathing room, soft cards, staff-colour tints,
   faint hour ticks, a live now-line. Same bones, better suit.
   ============================================================ */
.sch-grid{ border:none !important; border-radius:14px; background:var(--panel); padding:4px 6px 8px; }
.sch-row{ display:grid; grid-template-columns:138px 1fr; border-bottom:none !important; min-height:64px; position:relative; align-items:stretch; }
.sch-row + .sch-row .sch-lane, .sch-row + .sch-row .sch-staff{ border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
/* `background:transparent !important` stood here and was written when this header
   did NOT scroll. css/design-c.css:493 later made .sch-head position:sticky, and a
   sticky bar with no ground lets the work scroll straight through it — measured
   three blocks overlapping the header by 40.1px, its full height, and the first job
   of the day reading "08:00 Sar8AM 9AM 10AMh Millns". Removed rather than
   over-declared: the ground now comes from :3635 here and is restated beside the
   sticky in design-c.css, so the header is opaque even if only one of the two
   stylesheets loads. */
.sch-head{ min-height:34px !important; }
.sch-head .sch-staff{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:800; }
.sch-hours{ display:grid; grid-template-columns:repeat(12,1fr); align-items:end; }
.sch-head .sch-cell{ border:none !important; padding:6px 0 5px 7px !important; font-size:10.5px; color:var(--muted);
  letter-spacing:.04em; white-space:nowrap; overflow:hidden; }
.sch-staff{ border:none; display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:13px; font-weight:700; }
.sch-lane{ position:relative; border-radius:0; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px),
    color-mix(in srgb, var(--line) 45%, transparent) calc(100%/12 - 1px), color-mix(in srgb, var(--line) 45%, transparent) calc(100%/12)); }
.sch-block{ position:absolute; top:7px; bottom:7px; border:none; border-left:none !important; border-radius:11px;
  background:color-mix(in srgb, var(--sc,#9aa1ab) 16%, var(--panel));
  box-shadow:inset 3px 0 0 var(--sc,#9aa1ab), 0 3px 10px rgba(8,9,11,.10);
  padding:7px 11px 6px; font-size:12px; line-height:1.35; cursor:pointer; overflow:hidden;
  transition:box-shadow .12s, transform .12s; }
.sch-block:hover{ box-shadow:inset 3px 0 0 var(--sc,#9aa1ab), 0 6px 18px rgba(8,9,11,.16); transform:translateY(-1px); }
.sch-block strong{ font-variant-numeric:tabular-nums; margin-right:4px; }
.sch-block-sub{ display:block; color:var(--muted); font-size:11px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the second dead .sch-block-sooner — see the note further up, above .sch-lane.sb-over */
.sch-now{ position:absolute; top:0; bottom:0; width:2px; background:#e0453b; border-radius:2px; z-index:5; pointer-events:none;
  box-shadow:0 0 6px rgba(224,69,59,.5); }
.sch-unassigned .sch-staff{ color:var(--muted); font-weight:600; }
.sch-unassigned{ background:color-mix(in srgb, #e0a000 4%, transparent); border-radius:10px; }
.board-band{ border-radius:16px; }
.board-band-head{ padding:11px 16px; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* the repeats fold */
.tray-repeats summary{ cursor:pointer; list-style:none; }
.tray-repeats summary::-webkit-details-marker{ display:none; }
.tray-repeats summary::after{ content:'▸'; margin-left:6px; opacity:.5; }
.tray-repeats[open] summary::after{ content:'▾'; }
.rr-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; margin-bottom:6px; font-size:12.5px; }
.rr-row > div{ flex:1; min-width:0; }
.rr-meta{ display:block; color:var(--muted); font-size:11.5px; margin-top:1px; }
.rr-add{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.rr-add input, .rr-add select{ font-size:12.5px; padding:8px 10px; }
.rr-cad{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.rr-cad input{ width:58px; } .rr-cad select{ flex:1; }

/* ============================================================
   v323 · CONTRACTS (Pass 1) — the recurring/FM engine's UI.
   ============================================================ */
.con-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.con-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px 16px; cursor:pointer;
  transition:box-shadow .12s, transform .12s; }
.con-card:hover{ box-shadow:0 8px 24px rgba(8,9,11,.10); transform:translateY(-1px); border-color:var(--amber); }
.con-paused{ opacity:.62; }
.con-top{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.con-top strong{ font-family:var(--font-display); font-size:16px; flex:1; }
.con-pill{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:20px;
  background:var(--panel2); color:var(--muted); }
.con-pill.con-live{ background:color-mix(in srgb,#0e9a58 16%,var(--panel)); color:#0e9a58; }
.con-cust{ color:var(--muted); font-size:13px; }
.con-sched{ font-size:12.5px; margin:8px 0; color:var(--text); }
.con-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:8px; margin-top:4px; }
.con-bill{ font-weight:800; color:var(--amber); }
.con-empty{ text-align:center; padding:44px 20px; border:1px dashed var(--line); border-radius:16px; }
.con-empty p{ max-width:44ch; margin:6px auto 16px; }
/* the contract form */
.cf-wrap{ display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; }
@media (max-width:900px){ .cf-wrap{ grid-template-columns:1fr; } }
.cf-main{ display:flex; flex-direction:column; gap:14px; }
.cf-pat{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:var(--panel2); }
.cf-pat-top{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.cf-pat-top select{ flex:1; }
.cf-dow{ display:flex; gap:6px; flex-wrap:wrap; margin:4px 0; }
/* 44px, not 38: these seven sit in a row and decide when an engineer turns up */
.cf-day{ width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--panel); cursor:pointer;
  font-weight:700; font-size:13px; color:var(--muted); }
.cf-day.on{ background:var(--char); color:#fff; border-color:var(--char); }
body.theme-light .cf-day.on{ background:#16181d; color:#fff; }
.cf-inline{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); margin-top:4px; }
.cf-inline input, .cf-inline select{ width:auto; }
.cf-cyc-week{ display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.cf-cyc-lab{ font-size:12px; font-weight:700; color:var(--muted); min-width:52px; }
.cf-pat-sum{ font-size:12px; color:var(--amber); font-weight:600; margin-top:8px; }
.cf-prev{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:5px; }
.cf-prev li{ font-size:13px; padding:6px 10px; background:var(--panel2); border-radius:8px; font-variant-numeric:tabular-nums; }
.cf-side .panel{ position:sticky; top:56px; }
/* The `.sch-visit` pair that stood here — the tint, the inset spine and the dashed
   border meant to mark a repeating visit apart from a one-off job — was DEAD. It is
   (0,1,0), and the Direction-C board block at :7346 sets .sch-block's background and
   border at the same (0,1,0) with !important further down THIS file, so it won on
   source order every time. Measured: the block painted rgb(240,240,236) in light and
   rgb(13,15,19) in dark, identical to a booking, with a solid border.
   The live treatment is now `.sch-block.sch-visit` in css/design-c.css, at (0,2,0)
   so it is decided by specificity and not by which board block comes last. */

/* v324 · contract-in-a-job tab */
.jc-grid{ display:grid; grid-template-columns:1fr 260px; gap:14px; align-items:start; }
@media (max-width:820px){ .jc-grid{ grid-template-columns:1fr; } }
.jc-grid .panel{ margin:0 0 12px; }
.jc-bill-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.jc-hist{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
.jc-hist h4{ margin:0 0 6px; font-size:13px; }
.jc-hist-t{ width:100%; border-collapse:collapse; font-size:13px; }
.jc-hist-t td{ padding:4px 0; border-bottom:1px solid var(--line); }
.jc-hist-t td.r{ text-align:right; padding-left:10px; white-space:nowrap; }
.jc-hist-t tr:last-child td{ border-bottom:0; }
.con-off{ text-align:left; padding:6px 2px 14px; } .con-off p{ max-width:56ch; margin:6px 0 14px; }

/* ---- Custom-values floating panel + on-site checklist editor (Journeys) ---- */
.jny-values{ position:fixed; top:104px; right:22px; width:236px; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:12px 12px 10px; box-shadow:0 12px 34px rgba(20,22,28,.12); }
.jny-values-h{ display:flex; justify-content:space-between; align-items:baseline;
  font-weight:700; font-size:13px; color:var(--text); margin-bottom:9px; }
.jny-values-h span{ font-weight:500; font-size:10.5px; color:var(--muted); text-transform:none; letter-spacing:0; }
.jny-val{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%;
  text-align:left; background:var(--bg2); border:1px solid var(--line); border-radius:9px;
  padding:7px 10px; margin-bottom:6px; cursor:pointer; transition:border-color .12s, background .12s; }
.jny-val:hover{ border-color:#0d9cbc; }
.jny-val.copied{ border-color:var(--green); background:rgba(5,150,105,.09); }
.jny-val code{ font-size:12.5px; font-weight:700; color:#0d9cbc; font-family:'Satoshi',monospace; }
.jny-val.copied code{ color:var(--green); }
.jny-val span{ font-size:10.5px; color:var(--muted); }
.jny-values-note{ font-size:10.5px; color:var(--muted); margin:7px 2px 0; line-height:1.35; }
@media (max-width:1200px){ .jny-values{ display:none; } }

/* ================= Journey Planner (v333) ================= */
.pj-head-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pj-canvas{ margin-top:10px; border:1px solid var(--line); border-radius:16px;
  background:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0/22px 22px,
    var(--bg2);
  padding:28px 18px 30px; overflow-x:auto; }
.pj-flow{ display:flex; flex-direction:column; align-items:center; gap:0; min-width:300px; }
.pj-node{ width:340px; max-width:88vw; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 4px 14px rgba(20,22,28,.07); display:flex; align-items:stretch; overflow:hidden; }
.pj-node-main{ display:flex; gap:11px; align-items:flex-start; padding:12px 6px 12px 14px; flex:1; cursor:pointer; min-width:0; }
.pj-node-main:hover{ background:var(--bg2); }
.pj-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; flex:0 0 auto; background:var(--bg2); }
.pj-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pj-t{ font-weight:700; font-size:13.5px; line-height:1.25; }
.pj-d{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px; }
.pj-node-acts{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:4px 6px; border-left:1px solid var(--line); }
.pj-ib{ border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; width:22px; height:20px; border-radius:5px; }
.pj-ib:hover{ background:var(--bg2); color:var(--text); }
.pj-trigger{ border-color:#0d9cbc; }
.pj-trigger .pj-ico{ background:color-mix(in srgb,#0d9cbc 16%,transparent); color:#0d9cbc; }
.pj-action .pj-ico{ background:color-mix(in srgb,var(--amber) 22%,transparent); color:var(--amber); }
.pj-wait{ border-style:dashed; }
.pj-wait .pj-ico{ background:color-mix(in srgb,#8b5cf6 18%,transparent); color:#8b5cf6; }
.pj-branch{ border-color:color-mix(in srgb,var(--green) 50%,var(--line)); }
.pj-branch .pj-ico{ background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green); }
.pj-conn{ width:2px; height:20px; background:var(--line); }
.pj-plus{ width:24px; height:24px; border-radius:50%; border:1px dashed var(--muted); background:var(--panel);
  color:var(--muted); font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.pj-plus:hover{ border-color:#0d9cbc; color:#0d9cbc; }
.pj-add{ border:1px dashed var(--line); background:var(--panel); color:var(--muted); border-radius:9px;
  padding:8px 14px; font-size:12.5px; cursor:pointer; }
.pj-add:hover{ border-color:#0d9cbc; color:#0d9cbc; }
.pj-add.sm{ padding:5px 10px; font-size:11.5px; margin-top:6px; }
.pj-branches{ display:flex; gap:22px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.pj-lane{ display:flex; flex-direction:column; align-items:center; gap:0;
  border:1px dashed var(--line); border-radius:12px; padding:12px 12px 14px; min-width:210px; background:color-mix(in srgb,var(--panel) 55%,transparent); }
.pj-lab{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 11px; border-radius:20px; margin-bottom:10px; }
.pj-lab.yes{ color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent); }
.pj-lab.no{ color:var(--muted); background:var(--bg2); }
/* the "it never happened" lane on a wait. Amber, not red: giving up on a wait is
   a normal thing a journey does, not a failure, and it must not read as an error
   on the canvas. Dashed edge matches the other lanes so it is obviously a lane. */
.pj-lab.tmo{ color:var(--amber); background:color-mix(in srgb,var(--yel) 26%,transparent); }
.pj-lane-timeout{ border-color:color-mix(in srgb,var(--yel) 60%,var(--line)); }
.pj-lane-empty{ min-width:230px; }
.pj-unit{ font-size:12px; color:var(--muted); align-self:center; white-space:nowrap; }
.pj-lane-hint{ font-size:11px; line-height:1.45; color:var(--muted); text-align:center;
  max-width:210px; margin-top:9px; }
.pj-lane .pj-node{ width:200px; }
.pj-lane .pj-d{ max-width:120px; }
.pj-end{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--muted);
  background:var(--bg2); border:1px solid var(--line); border-radius:20px; padding:4px 14px; }
/* the add-step picker + node editor */
.pj-pick{ display:flex; flex-direction:column; gap:7px; }
.pj-pick-h{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.pj-pick-b{ display:flex; align-items:center; gap:11px; text-align:left; width:100%; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px; cursor:pointer; color:var(--text); }
.pj-pick-b:hover{ border-color:#0d9cbc; }
.pj-pick-b span{ font-size:16px; width:22px; text-align:center; }
.pj-edit{ display:flex; flex-direction:column; gap:12px; }
.pj-edit label{ display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:500; color:var(--muted); }
.pj-edit input, .pj-edit select, .pj-edit textarea{ font-size:14px; }
@media (max-width:560px){ .pj-node{ width:100%; } }

/* ---- Journey planner: live toggle, test run ---- */
.pj-live{ display:inline-flex; align-items:center; gap:7px; }
.pj-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); }
.pj-live.on{ background:var(--green); color:#fff; border-color:var(--green); }
.pj-live.on .pj-live-dot{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
.pj-livebar{ margin:10px 0 0; padding:9px 14px; border-radius:9px; font-size:12.5px; font-weight:500;
  color:var(--green); background:color-mix(in srgb,var(--green) 10%,transparent); border:1px solid color-mix(in srgb,var(--green) 34%,transparent); }
.pj-tr{ display:flex; flex-direction:column; gap:0; max-height:60vh; overflow-y:auto; }
.pj-tr-step{ display:flex; gap:11px; align-items:flex-start; padding:11px 4px; border-bottom:1px dashed var(--line); }
.pj-tr-step.wait{ opacity:.85; }
.pj-tr-ic{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:14px; background:var(--bg2); flex:0 0 auto; }
.pj-tr-step b{ font-size:13.5px; }
.pj-tr-msg{ font-size:12.5px; color:var(--muted); margin-top:3px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.pj-tr-end{ text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.06em; color:var(--green); margin-top:14px; }

/* ---- Journeys: package archive banner + upsell ---- */
.au-archived{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:color-mix(in srgb,var(--amber) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line)); border-radius:11px; padding:12px 16px; margin:0 0 14px; font-size:13.5px; }
.au-archived .btn{ margin-left:auto; }
.pj-upsell{ max-width:520px; margin:40px auto; text-align:center; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:38px 30px; }
.pj-upsell-ic{ font-size:40px; }
.pj-upsell h2{ font-family:var(--font-display); margin:12px 0 8px; }
.pj-upsell p{ color:var(--muted); margin:0 auto 10px; max-width:400px; }

/* ---- Journey wait node: chase-while-waiting nudges ---- */
.pj-nudges{ margin-top:6px; border-top:1px dashed var(--line); padding-top:10px; }
.pj-nudges-h{ font-size:12px; font-weight:700; margin-bottom:8px; }
.pj-nudge{ background:var(--bg2); border:1px solid var(--line); border-radius:9px; padding:9px 10px; margin-bottom:7px; }
.pj-nudge-top{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.pj-nudge-d{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.pj-nudge-d input{ width:46px; }
.pj-nudge-top select{ flex:1; }
.pj-nudge textarea, .pj-nudge input[type=text], .pj-nudge > input{ width:100%; font-size:13px; }

/* ---- Journey AI builder preview ---- */
.pj-ai-list{ border:1px solid var(--line); border-radius:10px; background:var(--bg2); padding:10px 12px; margin-top:8px; max-height:44vh; overflow-y:auto; }
.pj-ai-row{ font-size:13px; padding:5px 2px; border-bottom:1px dashed var(--line); }
.pj-ai-row:last-child{ border-bottom:none; }

/* ---- Journey editor: message composer, merge values, richer fields ---- */
.pj-msg{ display:flex; flex-direction:column; gap:7px; }
.pj-msg-top{ display:flex; gap:6px; align-items:center; }
.pj-msg-top select{ flex:1; }
.pj-msg-vals{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.pj-msg-lab{ font-size:11px; color:var(--muted); font-weight:600; }
.pj-val-chip{ font-size:11.5px; font-weight:600; color:#0d9cbc; background:var(--bg2); border:1px solid var(--line);
  border-radius:6px; padding:3px 7px; cursor:pointer; font-family:'Satoshi',monospace; }
.pj-val-chip:hover{ border-color:#0d9cbc; background:color-mix(in srgb,#0d9cbc 8%,var(--bg2)); }
.pj-msg textarea, .pj-edit textarea{ width:100%; font-size:14px; }
.pj-branch-help{ font-size:13px; background:color-mix(in srgb,var(--green) 8%,var(--panel)); border:1px solid color-mix(in srgb,var(--green) 26%,var(--line));
  border-radius:9px; padding:11px 13px; margin-bottom:6px; line-height:1.45; }
.pj-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pj-tpls{ display:flex; flex-direction:column; gap:10px; max-height:52vh; overflow-y:auto; }
.pj-tpl{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--bg2); }
.pj-tpl-h{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.pj-tpl-h input{ flex:1; font-weight:600; }
.pj-tpl textarea{ width:100%; font-size:13px; }

/* ---- Journey branch: multiple conditions ---- */
.pj-conds{ display:flex; flex-direction:column; gap:8px; margin:4px 0 8px; }
.pj-cond{ background:var(--bg2); border:1px solid var(--line); border-radius:9px; padding:9px 10px; display:flex; flex-direction:column; gap:6px; }
.pj-cond-top{ display:flex; gap:6px; align-items:center; }
.pj-cond-top select{ flex:1; }
.pj-cond select, .pj-cond input{ font-size:13.5px; }

/* ===== Compliance & Fleet ===== */
.cmp-sec{ margin-top:14px; }
.cmp-sec h3, .cmp-remind h3{ display:flex; align-items:center; gap:8px; }
.cmp-remind{ border-left:3px solid #ffdd33; }
.cmp-remind.has-exp{ border-left-color:#f87171; }
.cmp-count{ background:var(--bg2); border:1px solid var(--line); border-radius:20px; padding:1px 9px; font-size:12px; }
.cmp-remind-list{ display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.cmp-remind-row{ display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--bg2); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:13.5px; }
.cmp-remind-row.cmp-exp{ border-color:rgba(248,113,113,.5); }
.cmp-remind-row.cmp-soon{ border-color:rgba(255,168,0,.45); }
.cmp-pill{ font-size:12px; padding:2px 9px; border-radius:20px; white-space:nowrap; border:1px solid var(--line); }
.cmp-ok{ color:#34d399; } .cmp-pill.cmp-ok{ border-color:rgba(52,211,153,.4); }
.cmp-pill.cmp-watch{ border-color:rgba(255,221,51,.5); color:#e6c93a; }
.cmp-pill.cmp-soon{ border-color:rgba(255,168,0,.6); color:#ffab00; background:rgba(255,168,0,.08); }
.cmp-pill.cmp-exp{ border-color:rgba(248,113,113,.7); color:#f87171; background:rgba(248,113,113,.1); font-weight:600; }
.cmp-staff{ border:1px solid var(--line); border-radius:11px; padding:11px; margin-top:10px; background:var(--bg2); }
.cmp-staff-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.cmp-cert-row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:7px 0; border-top:1px dashed var(--line); }
.cmp-cert-row:first-of-type{ border-top:0; }
.cmp-in{ background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 9px; font-size:13.5px; color:var(--fg); }
.cmp-in-name{ flex:1; min-width:150px; } .cmp-in-sm{ flex:0 1 130px; min-width:100px; }
.cmp-in-full{ width:100%; margin-bottom:5px; }
.cmp-datelab{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.cmp-datelab input, .cmp-datelab select{ background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 7px; font-size:13px; color:var(--fg); }
.cmp-up{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--accent); border:1px dashed var(--line); border-radius:8px; padding:6px 10px; cursor:pointer; white-space:nowrap; }
.cmp-up:hover{ border-color:var(--accent); }
.cmp-doc-view{ font-size:12px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:5px 9px; cursor:pointer; color:var(--fg); }
.cmp-doc-view:hover{ border-color:var(--accent); }
.cmp-doc{ display:inline-flex; align-items:center; gap:5px; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:3px 6px; font-size:12px; }
.cmp-doc-x{ border:0; background:none; color:var(--muted); cursor:pointer; padding:0 2px; }
.cmp-veh{ border:1px solid var(--line); border-radius:11px; padding:11px; margin-top:10px; background:var(--bg2); }
.cmp-veh-head{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:9px; }
.cmp-reg{ font-weight:700; letter-spacing:1px; text-transform:uppercase; flex:0 1 130px; }
.cmp-veh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; }
.cmp-veh-cell{ border:1px solid var(--line); border-radius:9px; padding:9px; background:var(--bg); display:flex; flex-direction:column; gap:5px; }
.cmp-veh-cell.cmp-exp{ border-color:rgba(248,113,113,.55); }
.cmp-veh-cell.cmp-soon{ border-color:rgba(255,168,0,.5); }
.cmp-cell-h{ font-weight:600; font-size:13px; margin-bottom:2px; }
.cmp-veh-docs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; padding-top:8px; border-top:1px dashed var(--line); }
@media(max-width:640px){ .cmp-in-sm{ flex:1 1 45%; } .cmp-veh-grid{ grid-template-columns:1fr; } }
.ops-badge.badge-red{ background:#f87171; color:#fff; }
/* nothing recorded is not a pass, so the nav badge shows a mark rather than hiding */
.ops-badge.badge-amber{ background:#ffdd33; color:#16181d; }

/* An item with no renewal date is not being monitored. It used to render as
   class cmp- (matching no rule) and look identical to a healthy one. */
.cmp-pill.cmp-nodate{ border-color:rgba(255,221,51,.55); color:#e6c93a; border-style:dashed; }
.cmp-remind-row.cmp-nodate{ border-color:rgba(255,221,51,.4); border-style:dashed; }
.cmp-veh-cell.cmp-nodate{ border-color:rgba(255,221,51,.4); border-style:dashed; }
.cmp-remind.is-empty{ border-left-color:#ffab00; }
.cmp-nothing{ margin:8px 0 0; font-size:13.5px; }
.cmp-note{ margin:9px 0 0; padding-top:8px; border-top:1px dashed var(--line); }

/* A 44px floor on every control that destroys or replaces a document. These are
   reachable in engineer mode, where the user is wearing gloves in a van, and a
   mis-tap here permanently loses what may be the only copy of an insurance
   certificate. None of them are .btn, so body.eng-mode never raised them, and
   .icon-btn only reached 40px under the mobile query. */
.cmp-sec .cmp-up, .cmp-sec .cmp-doc-view, .cmp-sec .cmp-doc-x, .cmp-sec .icon-btn,
.cmp-remind .cmp-up, .cmp-remind .cmp-doc-view{
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center;
}
.cmp-sec .cmp-doc-x{ padding:0 10px; }
.cmp-doc{ padding:3px 4px 3px 8px; }

/* ===== Job history on the job card ===== */
.job-hist{ background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:11px 12px; margin-top:12px; }
.job-hist .sec-head{ margin-bottom:8px; }
.hist-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 9px; border-radius:9px; cursor:pointer; border:1px solid transparent; }
.hist-row:hover{ background:var(--bg); border-color:var(--line); }
.hist-main{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-val{ display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* v424 — the native AI training test chat (Settings → AI & data) */
.ai-testchat{ padding:14px 16px; }
.ai-test-log{ display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; margin-bottom:10px; }
.ai-test-log:empty{ display:none; }
.ai-test-u, .ai-test-b{ max-width:78%; padding:8px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; white-space:pre-wrap; }
.ai-test-u{ align-self:flex-end; background:var(--amber); color:#0b0c0e; border-bottom-right-radius:5px; }
.ai-test-b{ align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.ai-test-wait{ opacity:.55; }
.ai-test-row{ display:flex; gap:8px; align-items:center; }
.ai-test-row input{ flex:1; }
/* v425 — rate her replies: 👍/👎 + a coaching note per answer */
.ai-fb{ display:flex; gap:6px; align-items:center; align-self:flex-start; margin:-2px 0 2px 6px; }
.ai-fb-btn{ background:none; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  font-size:13px; padding:2px 8px; height:26px; display:inline-flex; align-items:center; opacity:.75; }
.ai-fb-btn:hover{ opacity:1; border-color:var(--amber); }
.ai-fb-note{ width:min(420px, 60vw); font-size:12.5px; }
.ai-fb-done{ font-size:11.5px; color:var(--green); font-weight:600; }

/* Desk "Next up" feed — long All-tasks / Priority lists scroll instead of pushing the page */
.dnx-scroll{ max-height:62vh; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px; }
.dnx-scroll::-webkit-scrollbar{ width:8px; } .dnx-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

/* ============================================================
   v423 — THE CONTROL SYSTEM. One size law for every interactive
   control on the site. Heights are FIXED per tier (not padding-
   derived), so a ✓, an emoji or a longer label can never change a
   button's height again — everything on a row lines up, everywhere.
     Tier 1 · .btn            38px — standard actions
     Tier 2 · .btn.small      30px — inline/row actions
     Tier 2 · .chip-btn       30px — filter/toggle pills
     Tier 3 · .icon-btn       26px — glyph buttons
   Bars keep their own deliberate sizes (.cert-topbar 40, .qb-mbtn 34).
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px; font-size:13.5px; line-height:1; white-space:nowrap; }
.btn.small{ height:30px; padding:0 12px; font-size:12.5px; }
.btn.full{ width:100%; white-space:normal; height:auto; min-height:38px; }
.btn.tall{ height:auto; align-self:stretch; }
.btn{ max-width:100%; }
.chip-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 13px; font-size:12.5px; line-height:1; white-space:nowrap; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 5px; line-height:1; }
/* selects that sit beside buttons follow the same tiers */
.mini-sel{ height:30px; }
.status-sel{ height:30px; padding-top:0; padding-bottom:0; }
/* the desk feed's action pairs sit on one straight line */
.dnx-acts{ display:inline-flex; align-items:center; gap:8px; }
.hb-need-act{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* generic tabs center their contents; folder tabs (.job-tabs) keep their own look */
.tab{ display:inline-flex; align-items:center; gap:6px; min-height:36px; line-height:1; }
/* photo-overlay ✕ buttons opt back out of the fixed footprint */
.cp-wrap .icon-btn, .jd-ph .icon-btn, .lm-ph .icon-btn{ min-width:0; height:auto; }

/* ============================================================
   v427 — THE FINANCIAL COCKPIT (Home). A slim today strip, then
   the numbers: KPI cards, canvas charts, aged debt. Both themes.
   ============================================================ */
.fo-strip{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; margin:4px 0 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.fo-strip-main{ flex:1; min-width:200px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:14px; }
.fo-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.fo-title{ font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.4px; margin:0; }
.fo-periods{ display:flex; gap:6px; flex-wrap:wrap; }
.fo-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:10px; }
.fo-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 15px 11px; position:relative; overflow:hidden; }
.fo-kpi::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:.75;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.fo-kpi-lab{ font-size:11px; /* v537 audit A12 */ text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; margin-bottom:4px; }
.fo-kpi-big{ font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums; line-height:1.05; }
.fo-kpi-sub{ font-size:11px; color:var(--muted); margin-top:3px; }
.fo-kpi-warn::before{ background:#facc15; } .fo-kpi-bad::before{ background:#f87171; }
.fo-warn{ color:#d97706; font-weight:700; } .fo-good{ color:var(--green); }
.fo-today{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:13px; color:var(--muted);
  padding:9px 15px; background:var(--panel2); border:1px dashed var(--line); border-radius:12px; margin-bottom:14px; }
.fo-today b{ color:var(--text); font-variant-numeric:tabular-nums; }
.fo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.fo-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px 10px; min-width:0; }
.fo-span2{ grid-column:span 2; }
@media (max-width:760px){ .fo-span2{ grid-column:span 1; } }
.fo-card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:13px; font-weight:700; margin-bottom:8px; }
.fo-basis{ display:flex; gap:5px; }
.fo-basis .chip-btn{ height:24px; padding:0 10px; font-size:11px; }
.fo-none{ color:var(--muted); font-size:12.5px; padding:20px 0; text-align:center; }
.fo-back{ margin-top:14px; }

/* ============================================================
   v428 — THE SALES DESK (Leads). Pipeline board, deal cards that
   write themselves, KPI strip. Fast at volume, both themes.
   ============================================================ */
.crm-kpis{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; margin-bottom:12px; }
.crm-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:10px 15px 9px;
  display:flex; flex-direction:column; gap:1px; min-width:130px; position:relative; overflow:hidden; }
.crm-kpi::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:.7;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.crm-kpi-warn::before{ background:#f87171; }
.crm-kpi-lab{ font-size:11px; /* v537 audit A9: was 9.5 */ text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.crm-kpi-big{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.crm-kpi-sub{ font-size:10.5px; color:var(--muted); }
.crm-per{ display:flex; gap:5px; align-items:center; margin-left:auto; }
.crm-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.crm-search{ flex:1 1 200px; min-width:170px; }
.crm-bar select{ max-width:170px; }
.crm-board{ display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:10px; align-items:start;
  overflow-x:auto; padding-bottom:6px; }
@media (max-width:1100px){ .crm-board{ grid-template-columns:repeat(5,240px); } }
.crm-col{ background:var(--panel2); border:1px solid var(--line); border-radius:14px; min-height:200px;
  display:flex; flex-direction:column; transition:border-color .12s, box-shadow .12s; }
.crm-col.crm-drop{ border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 25%, transparent); }
.crm-col-h{ display:flex; align-items:center; gap:7px; padding:10px 12px; font-size:12px; font-weight:800;
  border-bottom:1px solid var(--line); }
.crm-col-h i{ width:9px; height:9px; border-radius:50%; background:var(--cc,#9aa1ab); flex:none; }
.crm-col-n{ background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:0 7px; font-size:10.5px; }
.crm-col-t{ margin-left:auto; color:var(--muted); font-weight:700; font-size:11px; font-variant-numeric:tabular-nums; }
.crm-col-body{ padding:8px; display:flex; flex-direction:column; gap:8px; max-height:62vh; overflow-y:auto; }
.crm-col-empty{ border:1.5px dashed var(--line); border-radius:10px; padding:18px 10px; text-align:center;
  color:var(--muted); font-size:11.5px; }
.crm-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 11px 7px;
  cursor:grab; transition:border-color .12s, transform .12s, box-shadow .12s; }
.crm-card:hover{ border-color:var(--amber); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.14); }
.crm-card-top{ display:flex; align-items:center; gap:6px; }
.crm-card-no{ font-size:10.5px; color:var(--muted); font-weight:700; }
.crm-quiet{ font-size:9.5px; background:rgba(248,113,113,.14); color:#dc2626; border-radius:8px; padding:1px 7px; font-weight:700; }
.crm-own{ margin-left:auto; width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel2); font-size:9.5px; font-weight:800; cursor:pointer; color:var(--text); }
.crm-own:hover{ border-color:var(--amber); }
.crm-card-name{ font-size:13.5px; font-weight:700; margin:3px 0 2px; letter-spacing:-.01em; }
.crm-card-meta{ display:flex; gap:5px; flex-wrap:wrap; font-size:10px; color:var(--muted); }
.crm-card-meta span{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:1px 7px; }
.crm-card-foot{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.crm-card-val{ font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.crm-next{ margin-left:auto; font-size:11.5px; color:var(--muted); }
.crm-next.warn{ color:#d97706; font-weight:700; }
.crm-card-acts{ display:flex; align-items:center; gap:2px; border-top:1px dashed var(--line); margin-top:7px; padding-top:4px; }
.crm-touch{ font-size:10px; color:var(--muted); }
.crm-pill{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:10px;
  background:color-mix(in srgb, var(--cc,#9aa1ab) 16%, transparent); color:var(--cc,#9aa1ab); border:1px solid color-mix(in srgb, var(--cc,#9aa1ab) 38%, transparent); }

/* ============================================================
   v429 — MONEY (the books). Inbox rows, bill cards, bank rows.
   ============================================================ */
/* v435: engineers DO get Money — as their receipts/expenses screen only
   (renderMoney's eng-mode branch); the books stay office-side */
.mny-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.mny-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:9px 13px; margin-bottom:8px; }
.mny-row.mny-in{ border-left:3px solid var(--green); }
.mny-row.mny-out{ border-left:3px solid #f87171; }
.mny-row.mny-done{ opacity:.6; }
.mny-new{ border-style:dashed; }
.mny-src{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800;
  background:var(--panel2); border-radius:8px; padding:2px 8px; }
.mny-lab{ flex:1; min-width:160px; font-size:13px; }
.mny-date{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; width:44px; }
.mny-amt{ font-variant-numeric:tabular-nums; font-size:14px; }
.mny-bill{ display:flex; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:11px 13px; margin-bottom:9px; }
.mny-thumb{ width:58px; height:58px; border-radius:10px; object-fit:cover; border:1px solid var(--line);
  cursor:pointer; flex:none; }
.mny-snap{ display:flex; align-items:center; justify-content:center; background:var(--panel2);
  border-style:dashed; font-size:20px; }
.mny-bill-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:7px; }
.mny-bill-r1, .mny-bill-r2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mny-sup{ flex:1 1 150px; min-width:130px; font-weight:600; }
.mny-bill-r2 select{ max-width:220px; font-size:12px; }
.mny-paid{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }

/* ============================================================
   v430 — MONEY upgrade: the reconcile screen + dashboard extras.
   ============================================================ */
.mny-legend{ display:flex; gap:16px; margin-top:4px; font-size:11px; color:var(--muted); }
.mny-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.mny-mini{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:12.5px; }
.mny-mini:last-child{ border-bottom:none; }
.mny-mini:hover{ color:var(--amber); }
.mny-mini-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mny-mini b{ font-variant-numeric:tabular-nums; }
.mny-age{ font-size:10.5px; color:var(--muted); background:var(--panel2); border-radius:7px; padding:1px 6px; }
.mny-age.over{ color:#dc2626; background:rgba(248,113,113,.12); font-weight:700; }
.mny-prog{ height:9px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.mny-prog-bar{ height:100%; background:linear-gradient(100deg,#ffdd33,#34d399); transition:width .3s ease; }
.mny-empty{ text-align:center; padding:40px 20px; background:var(--panel); border:1px dashed var(--line); border-radius:14px; }
.mny-empty-ic{ font-size:34px; margin-bottom:8px; }
.mny-empty strong{ font-size:16px; }
.mny-empty p{ max-width:420px; margin:6px auto 0; }
/* the reconcile line — statement (left) ⇆ suggestion/actions (right), Xero-style */
.mny-rec-head{ display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:700; padding:0 4px 6px; }
.mny-rec{ background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden;
  border-left:3px solid var(--line); }
.mny-rec.is-in{ border-left-color:var(--green); }
.mny-rec.is-out{ border-left-color:#f87171; }
.mny-rec.open{ border-color:var(--amber); }
.mny-rec-top{ display:flex; align-items:center; gap:10px; padding:9px 12px; flex-wrap:wrap; }
.mny-rec-l{ display:flex; align-items:center; gap:10px; flex:1 1 260px; min-width:0; }
.mny-rec-desc{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.mny-rec-l .mny-amt{ font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.mny-rec.is-in .mny-amt{ color:var(--green); }
.mny-rec-arrow{ color:var(--muted); flex:none; }
.mny-rec-r{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mny-sugg{ font-size:12px; font-weight:600; background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:3px 9px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mny-rec-panel{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:9px 12px; border-top:1px dashed var(--line);
  background:var(--panel2); }
.mny-rec-panel select{ font-size:12px; max-width:180px; }
@media (max-width:820px){ .mny-rec-arrow{ display:none; } .mny-rec-l{ flex-basis:100%; } }

/* ============================================================
   v432 — PAYMENTS: the ledger chips on the invoice bar + PIN.
   ============================================================ */
.pay-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 14px 2px; }
.pay-list{ display:flex; gap:6px; flex-wrap:wrap; }
.pay-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  background:rgba(52,211,153,.12); color:var(--green); border:1px solid rgba(52,211,153,.35);
  border-radius:9px; padding:2px 8px; font-variant-numeric:tabular-nums; }
.pay-chip.pay-cis{ background:rgba(167,139,250,.12); color:#8b5cf6; border-color:rgba(167,139,250,.4); }
.pay-x{ background:none; border:none; color:inherit; opacity:.55; cursor:pointer; font-size:10px; padding:0 1px; }
.pay-x:hover{ opacity:1; }
.pay-cistog{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); cursor:pointer; }
#inv-money .pay-tools:empty{ display:none; }

/* ============================================================
   v433 — flow fixes: doc controls on the quote bar + convo composer.
   ============================================================ */
.qb-docrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:8px 14px 0;
  font-size:12px; color:var(--muted); }
.qb-docrow-l{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.qb-docrow select{ font-size:12px; padding:4px 8px; height:28px; max-width:220px; }
.qb-docrow .mini{ height:28px; }
.cv-new{ padding:0 0 10px; }
.cv-new select{ width:100%; font-size:13px; }

/* ============================================================
   v435 — THE FIELD APP. Engineer mode, rebuilt for the van:
   route-day home, gloves-first job card, sheets, live pills.
   ============================================================ */
/* nav trim: the field app shows ONLY what an engineer needs.
   v795 — the four names that were here (desk, leads, contracts, journeys) are the
   ones the block at the top of this file did NOT carry, which is how a reader
   checking "the eng-mode nav list" against ENG_VIEWS found five blocks instead of
   one and graded the wrong four. engNavSync() (js/engineer.js) owns it now. */
/* the hero strip */
.fa-hero{ display:flex; align-items:center; gap:11px; padding:13px 15px; margin-bottom:12px;
  background:var(--panel); border:1.5px solid transparent; border-radius:16px; position:relative; }
.fa-hero::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(120deg,#ffdd33,#3fe3ff,#ffdd33); background-size:240% 100%; animation:qbGlide 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@media (prefers-reduced-motion: reduce){ .fa-hero::before{ animation:none; } }
.fa-hero-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; font-size:14.5px; }
.fa-hero-main .muted{ font-size:12px; }
/* notification ask + live strips */
.fa-notif-ask{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--panel2); border:1px dashed var(--line); border-radius:13px; padding:10px 13px; font-size:12.5px; margin-bottom:10px; }
.fa-notif-ask span{ display:flex; gap:6px; }
.fa-live-strip{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; cursor:pointer;
  background:linear-gradient(100deg,#ffdd33,#ffe566); color:#0b0c0e; font:inherit; font-weight:800; font-size:13px;
  border-radius:13px; padding:11px 14px; margin-bottom:10px; }
.fa-live-strip span{ margin-left:auto; font-weight:700; }
.fa-share-pill{ display:flex; align-items:center; gap:8px; width:100%; border:none; cursor:pointer; font:inherit;
  background:rgba(63,227,255,.14); color:var(--cyan,#0e7c96); border:1px solid rgba(63,227,255,.4);
  font-weight:700; font-size:12.5px; border-radius:12px; padding:9px 13px; margin-bottom:10px; }
/* drive chips between route cards */
.fa-drive{ display:flex; align-items:center; gap:9px; margin:2px 0 2px 20px; padding:5px 0; font-size:11.5px; color:var(--muted); position:relative; }
.fa-drive-line{ position:absolute; left:-9px; top:-6px; bottom:-6px; width:2px; border-left:2px dashed var(--line); }
.fa-drive .chip-btn{ height:24px; padding:0 10px; font-size:11px; }
/* the empty day */
.fa-empty{ text-align:center; padding:36px 16px; background:var(--panel); border:1px dashed var(--line); border-radius:16px; font-size:15px; }
/* my tasks */
.fa-tasks{ display:flex; flex-direction:column; gap:7px; }
.fa-task{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px 12px; }
.fa-task.over{ border-left:3px solid #f87171; }
.fa-task-t{ flex:1; min-width:0; font-size:13.5px; cursor:pointer; }
.fa-task-due{ font-size:10.5px; background:var(--panel2); border-radius:8px; padding:1px 7px; color:var(--muted); }
.fa-tick{ width:26px; height:26px; flex:none; border-radius:50%; border:2px solid var(--line); background:var(--panel2);
  cursor:pointer; font-size:13px; font-weight:900; color:#0b0c0e; display:inline-flex; align-items:center; justify-content:center; }
.fa-tick.on, .fa-tick:active{ background:var(--green); border-color:var(--green); }
/* footer quick links */
.fa-foot-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.fa-devsel{ margin-left:auto; font-size:12px; max-width:150px; }
/* ---------- the job card ---------- */
.fa-job-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.ej-start-sub{ display:block; font-size:10.5px; font-weight:600; opacity:.75; margin-top:3px; letter-spacing:.02em; }
.fa-time-line{ font-size:12px; color:var(--muted); text-align:center; margin:-4px 0 10px; }
.fa-act4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.fa-act{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none;
  background:var(--panel2); border:1px solid var(--line); border-radius:13px; padding:11px 4px 9px; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700; color:var(--text); min-height:60px; }
.fa-act span{ font-size:20px; line-height:1; }
.fa-act:active{ transform:scale(.97); }
.fa-act[disabled]{ opacity:.35; pointer-events:none; }
.fa-act-go{ background:rgba(63,227,255,.12); border-color:rgba(63,227,255,.4); }
/* checklist v2 */
.fa-check-prog{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.fa-check-bar{ flex:1; height:7px; background:var(--panel2); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.fa-check-bar i{ display:block; height:100%; background:linear-gradient(100deg,#ffdd33,#34d399); transition:width .25s ease; }
.fa-check-row{ display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); }
.fa-check-row:last-of-type{ border-bottom:none; }
.fa-check-row.done .fa-check-t{ text-decoration:line-through; opacity:.5; }
.fa-check-t{ flex:1; min-width:0; font-size:14px; cursor:pointer; }
.fa-check-who{ flex:none; min-width:34px; height:28px; border-radius:9px; border:1px dashed var(--line); background:none;
  cursor:pointer; font-size:10.5px; font-weight:800; color:var(--muted); }
.fa-check-who.has{ border-style:solid; background:var(--panel2); color:var(--text); }
.fa-check-add input{ width:100%; margin-top:8px; }
/* comms trail */
.fa-comms{ display:flex; flex-direction:column; gap:8px; }
.fa-bub{ max-width:88%; align-self:flex-end; background:var(--panel2); border:1px solid var(--line);
  border-radius:13px 13px 4px 13px; padding:8px 12px; }
.fa-bub.in{ align-self:flex-start; border-radius:13px 13px 13px 4px; background:rgba(63,227,255,.09); border-color:rgba(63,227,255,.25); }
.fa-bub-t{ display:block; font-size:13px; line-height:1.45; }
.fa-bub-m{ display:block; font-size:10px; color:var(--muted); margin-top:3px; }
/* bottom sheet */
.fa-sheet-wrap{ position:fixed; inset:0; background:rgba(8,9,11,.55); z-index:1200; display:flex; align-items:flex-end;
  opacity:0; pointer-events:none; transition:opacity .18s ease; }
.fa-sheet-wrap.open{ opacity:1; pointer-events:auto; }
.fa-sheet{ width:100%; max-width:560px; margin:0 auto; background:var(--panel); border-radius:20px 20px 0 0;
  border:1px solid var(--line); border-bottom:none; padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px)); position:relative;
  transform:translateY(24px); transition:transform .18s ease;
  /* A sheet taller than the screen (a full circuit's test fields, an observation
     with photos) MUST scroll INSIDE itself. Without this the sheet just overran the
     viewport with no scroll — on the engineer's phone, tapping a circuit opened the
     sheet with the top (or bottom) of the form and its Done button unreachable, so
     you literally could not fill a circuit in. Cap it to the screen and scroll it. */
  max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.fa-sheet-wrap.open .fa-sheet{ transform:none; }
.fa-sheet-grab{ display:block; width:40px; height:4px; border-radius:3px; background:var(--line); margin:2px auto 10px; }
.fa-sheet-h{ margin:0 0 10px; font-size:16px; }
.fa-sheet-close{ position:absolute; top:8px; right:8px; width:44px; height:44px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--text); font:inherit; font-size:28px; line-height:1; cursor:pointer; }
.fa-sheet-close:hover{ background:var(--panel2); }
/* circuit-sheet conveniences (v607): jump-tabs, quick-fill presets, copy/paste/template */
.fc-ckt-tools{ display:flex; flex-direction:column; gap:6px; margin:2px 0 10px; }
.fc-ckt-jump{ display:flex; gap:6px; overflow-x:auto; overflow-y:clip; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.fc-ckt-jump button{ flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--text); min-height:34px; }
.fc-ckt-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.fc-ckt-row button, .fc-ckt-row select{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font-size:12.5px; color:var(--text); min-height:38px; }
.fc-ckt-lab{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-right:2px; }
/* R5: Circuit details / Test results tabs, and the swipeable quick-fill
   row moved into the separate Circuit tools destination. */
.fc-ckt-tabbar{ display:flex; gap:6px; align-items:center; margin:2px 0 10px; flex-wrap:wrap; }
.fc-ckt-tabbtn{ flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:700; color:var(--text); min-height:40px; }
.fc-ckt-tabbtn.on{ background:var(--yel); border-color:var(--yel); color:var(--yel-ink); }
.fc-ckt-toolsbtn{ margin-left:auto; }
.fc-ckt-swipe{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scroll-snap-type:x proximity; }
.fc-ckt-swipe button{ flex:0 0 auto; scroll-snap-align:start; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:600; color:var(--text); min-height:40px; }
.fc-scan-btn{ background:none; border:none; padding:0 0 0 6px; font-size:14px; line-height:1; cursor:pointer; }
/* v615: the circuit sheet's Done bar. It used to be the last thing in a tall,
   scrolling sheet, sat right on the phone's home indicator — so it read as "too
   low" and taps landed on the OS bar as often as the button. Now it STICKS to the
   foot of the sheet (always reachable without scrolling to the very end), sits on a
   solid bar the content scrolls under, and its own padding lifts it clear of the
   home bar. margin bleeds it to the sheet edges (the sheet has 16px side padding). */
.fc-ckt-foot{ position:sticky; bottom:0; z-index:2; display:flex; gap:8px;
  margin:12px -16px 0; padding:11px 16px calc(14px + env(safe-area-inset-bottom,0px));
  background:var(--panel); border-top:1px solid var(--line); }
body.eng-mode .fc-ckt-foot .btn{ min-height:48px; }
/* the on-site BS 7671 testing assistant chat */
/* v615: the Ask button lives in the cert wizard top bar now, so it is on EVERY
   step, not just the boards page. Compact amber-outlined pill, pushed to the right. */
.fc-ask-top{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  background:color-mix(in srgb, var(--amber) 14%, transparent); border:1px solid var(--amber);
  color:var(--text); font:inherit; font-weight:700; font-size:12.5px; border-radius:999px;
  padding:6px 13px; min-height:34px; cursor:pointer; }
.fc-ask-top:hover{ background:color-mix(in srgb, var(--amber) 26%, transparent); }
body.eng-mode .fc-ask-top{ min-height:40px; padding:7px 15px; font-size:13.5px; }
/* v615: the chat sheet now sits as a proper column — the message log grows/scrolls,
   the input bar sticks to the foot clear of the phone's home bar, so it reads like a
   real messenger instead of a cramped popup hugging the bottom edge. */
.fc-ask-sheet{ display:flex; flex-direction:column; min-height:0; max-height:calc(80vh - 24px); max-height:calc(80dvh - 24px); }
.fc-ask-log{ flex:1 1 auto; min-height:180px; max-height:none; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding:6px 0 10px; }
.fc-ask-user{ align-self:flex-end; background:var(--amber); color:#1b1d22; border-radius:14px 14px 4px 14px; padding:8px 12px; max-width:85%; font-size:14px; }
.fc-ask-ai{ align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:8px 12px; max-width:92%; font-size:14px; white-space:pre-wrap; }
/* v821: while she is typing, the whole bubble is the skip target, and a quiet
   caption inside it says so. Both are removed the instant she finishes, so a
   settled answer carries no dead control and nothing to tap. The caption is
   underlined rather than coloured because status here is a word, not a hue. */
.fc-ask-ai.fc-ask-typing{ cursor:pointer; }
.fc-ask-skip{ display:block; margin:6px 0 0; padding:4px 0; min-height:30px;
  background:none; border:0; font:inherit; font-size:12px; line-height:1.5;
  color:var(--muted); text-align:left; white-space:normal; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.fc-ask-skip:hover{ color:var(--text); }
.fc-ask-skip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }
.fc-ask-bar{ display:flex; gap:8px; align-items:center; position:sticky; bottom:0;
  background:var(--panel); padding:10px 0 calc(6px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }
.fc-ask-bar input{ flex:1; }

/* ---------- v529: the TEXT composer ----------
   Deliberately the same handset the marketing site shows on the van-app section,
   so what an engineer sees on site is the thing that was sold to them. Black
   bezel, charcoal screen, our bubbles. Everything else on this sheet is quiet. */
.fa-tx{ display:flex; flex-direction:column; gap:12px; }
.fa-tx-phone{ background:#000; border:1px solid #1c1f26; border-radius:34px; padding:9px;
  box-shadow:0 18px 40px rgba(0,0,0,.35); max-width:330px; width:100%; margin:0 auto; }
.fa-tx-screen{ background:#0d0f13; border-radius:26px; overflow:hidden; }
.fa-tx-head{ display:flex; flex-direction:column; gap:1px; padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.fa-tx-who{ font-family:var(--display); font-weight:700; font-size:15px; color:#f5f6f8; letter-spacing:-.2px; }
.fa-tx-num{ font-size:11px; color:#9aa1ab; }
.fa-tx-thread{ padding:12px; min-height:132px; max-height:230px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  scrollbar-width:none; }                          /* a real handset has no scrollbar */
.fa-tx-thread::-webkit-scrollbar{ display:none; }
.fa-tx-empty{ color:#9aa1ab; font-size:12px; text-align:center; margin:26px 6px; line-height:1.6; }
.fa-tx-row{ display:flex; }
.fa-tx-row.out{ justify-content:flex-end; }
.fa-tx-row.in { justify-content:flex-start; }
.fa-tx-bub{ max-width:82%; padding:9px 12px 7px; border-radius:15px; font-size:13px; line-height:1.45;
  position:relative; word-break:break-word; }
.fa-tx-row.out .fa-tx-bub{ background:#ffdd33; color:#08090b; border-bottom-right-radius:5px; }
.fa-tx-row.in  .fa-tx-bub{ background:#1c1f27; color:#f5f6f8; border-bottom-left-radius:5px; }
.fa-tx-t{ display:block; font-size:9.5px; opacity:.6; margin-top:3px; text-align:right; }

.fa-tx-quick{ display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.fa-tx-quick::-webkit-scrollbar{ display:none; }   /* the chips scroll; the bar is just noise on a phone */
.fa-tx-chip{ flex:0 0 auto; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:999px; padding:10px 14px; font-size:13px; font-weight:600; min-height:40px; cursor:pointer;
  text-transform:none; letter-spacing:0; }
.fa-tx-chip:active{ transform:scale(.97); }

.fa-tx-compose{ display:flex; gap:8px; align-items:flex-end; }
.fa-tx-compose textarea{ flex:1; resize:none; border-radius:14px; padding:12px 13px; font-size:15px;
  min-height:48px; line-height:1.4; }
/* brand yellow, not the paper theme's derived --amber: this component wears the
   dark brand on purpose, and the icon must match the outgoing bubbles above it */
.fa-tx-send{ flex:0 0 auto; width:48px; height:48px; border:0; border-radius:14px; cursor:pointer;
  background:#ffdd33; color:#08090b; display:flex; align-items:center; justify-content:center; }
.fa-tx-send:disabled{ opacity:.5; cursor:default; }
.fa-tx-send.sending{ opacity:.6; }
.fa-tx-send .fa-ico{ width:21px; height:21px; }
.fa-tx-note{ margin:0; font-size:12px; color:var(--muted); line-height:1.5; }
.fa-tx-note.fa-tx-warn{ color:#b4432f; }
body.theme-light .fa-tx-note.fa-tx-warn{ color:#a8371f; }

/* light / dark segment in the More sheet — 44px tall, thumb-sized either side */
.fa-themeseg{ display:flex; gap:4px; margin-top:6px; background:var(--panel2);
  border:1px solid var(--line); border-radius:11px; padding:3px; width:max-content; }
.fa-themebtn{ border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:600 13px/1 'Satoshi',ui-sans-serif,system-ui,sans-serif; letter-spacing:0;
  text-transform:none; padding:0 16px; min-height:38px; min-width:78px; border-radius:8px; }
.fa-themebtn.on{ background:var(--amber); color:#08090b; font-weight:700; }
.fa-themebtn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.fa-row{ display:flex; align-items:center; gap:12px; width:100%; background:var(--panel2); border:1px solid var(--line);
  border-radius:13px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font:inherit; color:var(--text); text-align:left; }
.fa-row-ico{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.fa-row-l{ flex:1; font-size:14.5px; font-weight:700; }
.fa-row-r{ font-size:11.5px; color:var(--green); font-weight:700; }
.fa-eta-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:10px; }
.fa-eta{ background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:13px 4px; cursor:pointer;
  font:inherit; font-size:21px; font-weight:800; color:var(--text); display:flex; flex-direction:column; align-items:center; }
.fa-eta span{ font-size:10.5px; font-weight:700; color:var(--muted); }
.fa-eta:active{ background:var(--amber); color:#0b0c0e; }
.fa-share-tog{ display:flex; align-items:center; gap:9px; font-size:13px; padding:4px 2px; }
/* the office's logged-time chip on the desktop job */
.fa-logged{ font-size:11px; color:var(--muted); background:var(--panel2); border:1px solid var(--line);
  border-radius:9px; padding:2px 9px; font-variant-numeric:tabular-nums; }
/* v435 polish: the eng-mode banner tucks bottom-left on phones (clear of the bell) */
@media (max-width:700px){
  body.eng-mode.eng-view::after{ top:auto !important; bottom:74px; left:10px; right:auto; font-size:10px; opacity:.85; }
}
/* v436 — receipts, problem button, van checks, draft armour */
.fa-snap-big{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; cursor:pointer;
  background:linear-gradient(115deg,#ffdd33,#ffe566); color:#0b0c0e; font-weight:800; font-size:17px;
  border-radius:16px; padding:22px 14px; margin-bottom:10px; box-shadow:0 8px 22px rgba(255,221,51,.18); }
.fa-snap-big:active{ transform:scale(.98); }
.fa-problem{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; cursor:pointer;
  background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.35); color:#dc2626; font:inherit; font-weight:800;
  font-size:13.5px; border-radius:13px; padding:11px 14px; margin:0 0 12px; }
.fa-problem span{ font-size:10.5px; font-weight:600; color:var(--muted); }
.fa-van-seg{ display:inline-flex; gap:5px; }
.fa-van-seg button{ width:38px; height:32px; border-radius:9px; border:1px solid var(--line); background:var(--panel2);
  font:inherit; font-size:14px; font-weight:800; cursor:pointer; color:var(--muted); }
.fa-van-seg .fa-van-ok.on{ background:var(--green); border-color:var(--green); color:#fff; }
.fa-van-seg .fa-van-bad.on{ background:#dc2626; border-color:#dc2626; color:#fff; }
.fa-restored{ box-shadow:0 0 0 2px rgba(63,227,255,.35); }
/* v437 — signature, day-done, nudges, parts */
.fa-sign-wrap{ position:fixed; inset:0; background:rgba(8,9,11,.6); z-index:1250; display:none; align-items:center; justify-content:center; padding:18px; }
.fa-sign-wrap.open{ display:flex; }
.fa-sign-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px; width:100%; max-width:560px; }
#fa-sign-cv{ display:block; border-radius:12px; border:1.5px dashed var(--line); touch-action:none; background:#fff; }
.fa-dd-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.fa-dd{ background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; }
.fa-dd b{ display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.fa-dd span{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.fa-dd.warn{ border-color:rgba(248,113,113,.5); }
.fa-nudge{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:rgba(63,227,255,.1); border:1px solid rgba(63,227,255,.35); border-radius:13px; padding:10px 13px;
  font-size:13px; margin-bottom:10px; }
.fa-nudge span{ display:flex; gap:6px; }
.fa-pt-custom{ display:flex; gap:8px; align-items:center; margin-top:8px; }
/* v438 — offline banner
   v728 — IT WAS HIDING BEHIND THE TAB BAR ON AN INSTALLED PHONE. `bottom:64px` was
   a hard constant while #fa-tabbar's height GROWS with env(safe-area-inset-bottom)
   (:5604 — `padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px))`). Measured:
   2px of overlap at inset 0, and 36 of the banner's 59 pixels covered at a 34px
   inset — i.e. any notched iPhone added to the Home Screen, which the app's own
   welcome sheet tells people to do. The one reassurance an engineer needs the
   moment the signal drops was the one that got hidden. The correct idiom is already
   in this file 340 lines away (#qb-money), so this is that expression, not a new
   one, and the day list's tail spacer (js/fielddesign.js) now matches it. */
.fa-offline{ position:fixed; left:10px; right:10px; bottom:calc(74px + env(safe-area-inset-bottom,0px)); z-index:1300; text-align:center;
  background:#1a1e26; color:#e8eaee; border:1px solid #2a2f3a; border-radius:12px; padding:9px 14px; font-size:12.5px; }
/* v439 — the checklist camera lives ON the row; the photo is the tick */
.fa-cam{ flex:none; width:44px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px dashed color-mix(in srgb, var(--amber) 55%, var(--line)); border-radius:10px; cursor:pointer;
  background:color-mix(in srgb, var(--amber) 9%, transparent); font-size:16px; }
.fa-cam:active{ transform:scale(.94); }
.fa-cam.done{ display:none; }
.fa-check-row .fa-check-who{ min-width:34px; }
/* kill the old grey slab wherever legacy renderers still emit it in eng mode */
body.eng-mode .chk-cam{ width:44px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px dashed color-mix(in srgb, var(--amber) 55%, var(--line)); border-radius:10px;
  background:color-mix(in srgb, var(--amber) 9%, transparent); font-size:16px; margin:4px 0; }

/* ============================================================
   v440 — ENTITLEMENTS: locked-module teasers (premium, on brand).
   ============================================================ */
.view.sq-locked > *:not(.sq-teaser){ display:none !important; }
.sq-teaser{ display:flex; align-items:center; justify-content:center; min-height:70vh; padding:24px; }
.sq-teaser-card{ max-width:460px; text-align:center; background:var(--panel); border:1.5px solid transparent;
  border-radius:20px; padding:34px 28px; position:relative; }
.sq-teaser-card::before{ content:''; position:absolute; inset:0; border-radius:20px; padding:1.5px; pointer-events:none;
  background:linear-gradient(120deg,#ffdd33,#3fe3ff,#ffdd33); background-size:240% 100%; animation:qbGlide 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@media (prefers-reduced-motion: reduce){ .sq-teaser-card::before{ animation:none; } }
.sq-teaser-lock{ font-size:34px; margin-bottom:6px; }
.sq-teaser-card h2{ font-family:var(--font-display); font-size:24px; letter-spacing:-.4px; margin:0 0 10px; }
.sq-teaser-card p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0 0 16px; }
.sq-teaser-price{ font-size:14px; margin-bottom:16px; }
.sq-teaser-price strong{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Apple-safe note — no price, no purchase CTA */
.sq-teaser-note{ font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
/* locked nav item: visible but dimmed, with a small padlock — an upsell, not a dead end */
.nav-btn.nav-locked{ opacity:.55; }
.nav-btn.nav-locked::after{ content:'🔒'; font-size:10px; margin-left:6px; opacity:.75; vertical-align:1px; }
.nav-btn.nav-locked.active{ opacity:.85; }

/* ============================================================
   v443 — FIELD APP REDESIGN. A native-feeling mobile app in the
   Stacked Out dark brand: SVG icons, a bottom tab bar, a job card
   with real flow. The field surfaces stay dark whatever theme the
   office side runs, so the brand reads premium and consistent.
   ============================================================ */
body.eng-mode #view-engday, body.eng-mode #view-engjob{ background:var(--bg); padding:0; }
body.eng-mode #engday-body, body.eng-mode #engjob-body{ margin:0; }
.fa-shell{ background:var(--bg); color:var(--text); padding:14px 14px 0; min-height:100vh; font-family:var(--font-body,'Satoshi',system-ui,sans-serif); }
.fa-ico{ width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle; }
/* the icons carry the brand tint only where it means something (actions=yellow, info=cyan) */

/* ---- day hero + timeline ---- */
.fa-hero2{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fa-hero2-l{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fa-hero2-greet{ font-family:var(--font-display,'Clash Display'); font-weight:700; font-size:23px; letter-spacing:-.02em; }
.fa-hero2-sub{ font-size:13px; color:var(--muted); margin-top:1px; }
.fa-routebtn{ display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:9px 14px; font-weight:700; font-size:13px; text-decoration:none; }
.fa-routebtn .fa-ico{ width:16px; height:16px; color:#3fe3ff; }
.fa-onclock{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; cursor:pointer;
  background:linear-gradient(105deg,#ffdd33,#ffe873); color:#0b0c0e; font-weight:800; font-size:13.5px;
  border-radius:14px; padding:12px 15px; margin-bottom:12px; font-family:inherit; }
.fa-onclock .fa-ico{ width:18px; height:18px; }
.fa-onclock span{ margin-left:auto; font-variant-numeric:tabular-nums; }
.fa-dayhead{ font-size:12.5px; color:var(--muted); font-weight:600; margin:14px 2px 10px; }
.fa-jobrow{ display:flex; align-items:stretch; gap:12px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:14px 14px 14px 0; margin-bottom:9px; color:var(--text);
  overflow:hidden; position:relative; }
.fa-jobrow:active{ background:var(--panel2); }
.fa-jobrow-rail{ width:4px; border-radius:0 4px 4px 0; background:var(--c,#3fe3ff); flex:none; }
.fa-jobrow-time{ font-family:var(--font-display,'Clash Display'); font-weight:700; font-size:16px; min-width:52px; padding-top:1px; }
.fa-jobrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fa-jobrow-name{ font-weight:700; font-size:16px; letter-spacing:-.01em; }
.fa-jobrow-addr{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-jobrow-no{ font-size:11px; color:var(--muted); padding:2px 4px 0 0; }
.fa-drive2{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); margin:0 0 9px 16px; }
.fa-drive2 .fa-ico{ width:15px; height:15px; color:var(--muted); }
.fa-drive2 button{ margin-left:auto; display:inline-flex; align-items:center; gap:2px; background:none; border:none;
  color:#3fe3ff; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.fa-drive2 button .fa-ico{ width:13px; height:13px; color:inherit; }
.fa-empty2{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:44px 20px; color:var(--muted); }
.fa-empty2 .fa-ico{ width:38px; height:38px; color:var(--muted); margin-bottom:4px; }
.fa-empty2 strong{ color:var(--text); font-size:16px; }

/* ---- job card ---- */
.fa-topbar2{ display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.fa-iconbtn{ width:38px; height:38px; border-radius:11px; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.fa-topjob{ font-family:var(--font-display,'Clash Display'); font-weight:700; font-size:18px; }
.fa-topstatus{ font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:9px; color:#fff;
  background:color-mix(in srgb, var(--c,#3fe3ff) 26%, var(--panel)); border:1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.fa-topbook{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); margin-left:auto; }
.fa-topbook .fa-ico{ width:14px; height:14px; }
.fa-start2{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:linear-gradient(115deg,#ffdd33,#ffe873); color:#0b0c0e; border:none; border-radius:18px; padding:17px 18px;
  margin-bottom:8px; box-shadow:0 10px 30px rgba(255,221,51,.18); }
.fa-start2.is-run{ background:linear-gradient(115deg,#f87171,#fca5a5); box-shadow:0 10px 30px rgba(248,113,113,.2); }
.fa-start2-ic{ width:44px; height:44px; border-radius:50%; background:rgba(8,9,11,.14); display:flex; align-items:center; justify-content:center; flex:none; }
.fa-start2-ic .fa-ico{ width:22px; height:22px; }
.fa-start2-txt b{ font-family:var(--font-display,'Clash Display'); font-size:20px; display:block; line-height:1.1; }
.fa-start2-txt span{ font-size:11px; font-weight:600; opacity:.8; }
.fa-timelog{ display:flex; align-items:center; gap:7px; justify-content:center; font-size:12px; color:var(--muted); margin:2px 0 12px; }
.fa-timelog .fa-ico{ width:14px; height:14px; }

.fa-card2{ background:var(--panel); border:1px solid var(--line); border-radius:17px; padding:16px; margin-bottom:11px; }
.fa-card2-h{ display:flex; align-items:center; gap:8px; font-family:var(--font-display,'Clash Display'); font-weight:700;
  font-size:15px; margin-bottom:12px; }
.fa-card2-h .fa-ico{ width:17px; height:17px; color:var(--muted); }
.fa-card2-sub{ margin-left:auto; font-family:var(--font-body,'Satoshi'); font-size:12px; color:var(--muted); font-weight:500; }
.fa-cust2-name{ font-family:var(--font-display,'Clash Display'); font-weight:700; font-size:21px; letter-spacing:-.02em; }
.fa-cust2-addr{ display:flex; align-items:flex-start; gap:6px; font-size:13.5px; color:var(--text); margin-top:5px; }
.fa-cust2-addr .fa-ico{ width:15px; height:15px; color:#3fe3ff; margin-top:2px; }
.fa-cust2-with{ font-size:12px; color:var(--muted); margin-top:5px; }
.fa-actgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.fa-actgrid-2{ margin-top:8px; }
.fa-act2{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-decoration:none;
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 4px 10px; cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:700; color:var(--text); min-height:66px; }
.fa-act2:active{ transform:scale(.96); }
.fa-act2[disabled]{ opacity:.32; pointer-events:none; }
.fa-act2-ic{ width:38px; height:38px; border-radius:11px; background:var(--panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; }
.fa-act2-ic .fa-ico{ width:20px; height:20px; color:#ffdd33; }
.fa-act2-go .fa-act2-ic{ background:rgba(63,227,255,.1); border-color:rgba(63,227,255,.35); }
.fa-act2-go .fa-act2-ic .fa-ico{ color:#3fe3ff; }
.fa-problem2{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:color-mix(in srgb, var(--red) 9%, transparent); border:1px solid color-mix(in srgb, var(--red) 30%, transparent);
  color:var(--red-ink); border-radius:15px;   /* v564: was hardcoded #f87171, the dark-theme red, 2.58:1 on paper */
  padding:13px 15px; margin-bottom:11px; }
.fa-problem2 .fa-ico{ width:22px; height:22px; flex:none; }
.fa-problem2 span{ display:flex; flex-direction:column; }
.fa-problem2 b{ font-size:14px; }
.fa-problem2 span span, .fa-problem2 span b + *{ font-size:11px; color:var(--muted); font-weight:500; }
.fa-work{ padding:7px 0; border-bottom:1px solid var(--line); }
.fa-work:last-child{ border-bottom:none; }
.fa-work b{ font-size:14px; }
.fa-work span{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.fa-work-room{ display:flex; align-items:center; gap:6px; font-size:12px; color:#3fe3ff; font-weight:700; margin:8px 0 4px; }
.fa-work-room .fa-ico{ width:14px; height:14px; }
.fa-desc2{ font-size:13.5px; color:var(--text); line-height:1.5; margin-bottom:8px; }
.fa-quiet{ font-size:12.5px; color:var(--muted); margin:2px 0; }
.fa-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fa-chip2{ display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:9px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.fa-chip2 .fa-ico{ width:15px; height:15px; color:var(--muted); }
.fa-listitem{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; margin-top:8px; cursor:pointer; color:var(--text); font-family:inherit; }
.fa-listitem-ic .fa-ico{ width:20px; height:20px; color:var(--muted); }
.fa-listitem-l{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fa-listitem-l b{ font-size:13.5px; } .fa-listitem-l span{ font-size:11.5px; color:var(--muted); }
.fa-lognote{ padding:8px 0; border-bottom:1px solid var(--line); }
.fa-lognote:last-of-type{ border-bottom:none; }
.fa-lognote-t{ font-size:13.5px; display:block; }
.fa-lognote-m{ font-size:11px; color:var(--muted); }
.fa-logadd{ display:flex; align-items:center; gap:7px; margin-top:10px; }
.fa-logadd input{ flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:11px; padding:11px 13px; font:inherit; font-size:13.5px; }
.fa-logadd-mic{ width:40px; height:40px; }
.fa-logadd-mic .fa-ico{ color:var(--muted); }
.fa-logadd-go{ width:40px; height:40px; border-radius:11px; background:#ffdd33; border:none; color:#0b0c0e; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.fa-logadd-go .fa-ico{ width:20px; height:20px; }
.fa-photogrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.fa-photo img, .fa-photo{ width:100%; aspect-ratio:1; border-radius:11px; object-fit:cover; display:block; border:1px solid var(--line); }
.fa-photo-add{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:11px;
  background:var(--panel2); border:1.5px dashed var(--line); cursor:pointer; }
.fa-photo-add .fa-ico{ width:22px; height:22px; color:var(--muted); }

/* ---- the reused components go dark inside the shell + on the sheets ---- */
.fa-shell .fa-check-row{ border-color:var(--line); }
.fa-shell .fa-check-t{ color:var(--text); }
.fa-shell .fa-bub{ background:var(--panel2); border-color:var(--line); }
.fa-shell .fa-bub.in{ background:rgba(63,227,255,.08); }
.fa-shell .fa-task{ background:var(--panel); border-color:var(--line); }
.fa-shell .section-h{ color:var(--text); }
.fa-shell .fa-tasks + *, .fa-shell h2.section-h{ color:var(--text); }


/* ---- the bottom tab bar ---- */
#fa-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:flex; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px)); }
/* v845 — THE SMALLEST TYPE IN THE PRODUCT WAS THE MOST-READ LABEL ON THE VAN'S PHONE.
   Jamie, 11 Aug 2026, on the engineer tab bar: "certs and costs looked the same - why
   is the copy brown? is the copy too small?" He is right about the size. It was
   10.5px, and DESIGN_SPEC's own floor is "body text never drops below 13px on desktop
   or 12px on the phone" - so the four words an engineer navigates by sat BELOW the
   spec's phone floor while every row of body copy around them cleared it. 12.5px is
   not a new step: it is the approved `secondary` step (Satoshi, 12.5-13px) and the
   exact value css/design-c.css gave `.fa-jobrow-no` when the same argument was made
   about the same surface. The 10px all-caps label step does not cover this - these
   labels are sentence case, not caps.
   ⚠ css/design-c.css's "MEASURED AND ACCEPTED, so the next pass does not re-open
   them" note names `.fa-tab` 10.5px and predates Jamie's message (1 Aug vs 11 Aug),
   and its stated reason - that lifting it "inside a 334px row would cost the
   customer's name its width" - is about the job row's chip, not about a bottom nav
   that has no row to share. His word supersedes it; the note is not being ignored.
   ⚠ AND THE COLOUR IS NOT A DEFECT - DO NOT "FIX" IT. He is wrong about the brown.
   The selected label is --c-pipe-ink (#8A6800 light / #FFDD33 dark), set in
   css/design-c.css, and that file records the pixel measurements: the old pale yellow
   sampled 3.07:1 against a 4.5 requirement and the brown sampled 5.17:1. Reverting it
   re-breaks a measured accessibility repair. The selected state is also not colour
   alone - it carries a 24x3px bar, weight 800 and aria-current="page".
   THE COST, MEASURED AT THREE WIDTHS RATHER THAN ASSUMED (four tabs, the admin case,
   which is the tightest): the widest label is "Compliance", whose ink goes 58.83px ->
   70.04px, inside a tab that is 87px at 360, 94.5px at 390 and 104.5px at 430. Nothing
   wraps - #fa-tabbar .fa-tab > span:last-child is white-space:nowrap in design-c.css,
   so an overrun would clip rather than wrap, and the measured overrun is zero at all
   three. Each tab goes 49px -> 51px tall and the bar 66px -> 68px, both still well
   over the 44px touch floor. #fa-alertbell below is NOT moved: at bottom:72px its
   clearance above the bar measures 6px -> 4px, which is tighter than v833's recorded
   intent but still clear, and lifting it to 74px would push it into the offline
   banner. Measured at 360, 390 and 430, admin and locked engineer: gap never negative.
   This is the ONLY declaration of .fa-tab's font-size anywhere in css/, so it holds in
   dark as well as light - design-c.css touches only this selector's position, colour,
   weight and white-space. */
.fa-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:none; cursor:pointer;
  font-family:var(--font-body,'Satoshi'); font-size:12.5px; font-weight:700; color:var(--muted); padding:4px 0; }
.fa-tab .fa-ico{ width:23px; height:23px; }
.fa-tab.on{ color:#ffdd33; }
.fa-tab-ic{ position:relative; display:inline-flex; }
.fa-tab-badge{ position:absolute; top:-5px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:#f87171; color:#fff; font-size:9.5px; font-weight:800; font-style:normal; display:flex; align-items:center; justify-content:center; }
/* v833 — the floating alert bell. Replaces the old 4th 'Alerts' tab now that the
   engineer tab bar is down to Certs + Compliance (+Costs for admin) + Settings.
   Fixed clear of the bar itself (bar is ~8+23+3+10.5+8=52.5px content + its own
   safe-area padding), positioned so it can never sit under a notch or a home
   indicator, and never overlaps the tab bar's own tap targets (best-practice-web-
   design §6: plan floating chrome as one system, not an independent float). */
#fa-alertbell{ position:fixed; right:14px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:901;
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(16px); border:1px solid var(--line);
  color:var(--muted); cursor:pointer; padding:0; }
#fa-alertbell .fa-ico{ width:20px; height:20px; }
#fa-alertbell .ops-badge{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:#f87171; color:#fff; font-size:9.5px; font-weight:800; font-style:normal; display:flex; align-items:center; justify-content:center; }
body:has(.modal.open) #fa-alertbell{ display:none; }   /* mirrors #fa-tabbar's own modal rule, line ~925 css/design-c.css */

/* the more sheet rows */
.fa-morerow{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:var(--panel2); border:1px solid var(--line);
  border-radius:13px; padding:13px 15px; margin-bottom:8px; cursor:pointer; color:var(--text); font-family:inherit; }
.fa-morerow-ic .fa-ico{ width:22px; height:22px; color:#ffdd33; }
.fa-morerow-l{ flex:1; font-size:14.5px; font-weight:700; display:flex; flex-direction:column; }
.fa-morerow-l span{ font-size:11.5px; color:var(--muted); font-weight:500; }
.fa-morerow-chev{ width:18px; height:18px; color:var(--muted); }
.fa-morephone{ margin-top:6px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:6px 9px; font-size:12.5px; }
/* the old per-job action bar is retired by the redesign */
body.eng-mode .eng-bar{ display:none; }
/* v443 field redesign — retire the floating bell + preview banner (the tab bar + dark skin say it all) */
body.eng-mode .bell-btn{ display:none !important; }
body.eng-mode.eng-view::after{ content:none !important; }
body.eng-mode .fa-notif-ask{ background:var(--panel); border-color:var(--line); color:var(--text); }
body.eng-mode .fa-notif-ask .fa-ico{ width:18px; height:18px; color:#ffdd33; vertical-align:-3px; }
body.eng-mode .fa-notif-ask .btn.small.btn-amber{ background:var(--yel); color:var(--yel-ink); }   /* v564: was color:var(--bg) — white-on-yellow at 1.25:1 on the paper theme */
body.eng-mode .fa-notif-ask .btn.small:not(.btn-amber){ background:var(--panel2); border-color:var(--line); color:var(--text); }
/* v444 — checklist camera + assign icons as SVG */
.fa-cam .fa-ico{ width:18px; height:18px; color:#ffdd33; }
.fa-check-who .fa-ico{ width:16px; height:16px; color:var(--muted); }

/* v445 — theme-follow polish: menu above the tab bar, tab bar hides when the menu is open */
body.menu-open #fa-tabbar{ display:none; }
#sidebar{ z-index:1000; }
body.eng-mode #sidebar{ padding-bottom:24px; }
/* time-on-job sections */
.fa-timecard-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.fa-timecard-row:last-of-type{ border-bottom:none; }
.fa-timecard-who{ width:30px; height:30px; border-radius:50%; background:var(--panel2); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; flex:none; }
.fa-timecard-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fa-timecard-main span{ font-size:11px; color:var(--muted); }
.fa-timecard-dur{ font-variant-numeric:tabular-nums; font-weight:700; }
.fa-timecard-run{ font-size:10px; font-weight:800; color:#0b0c0e; background:#ffdd33; border-radius:7px; padding:1px 7px; }
.fa-logged-row{ display:flex; align-items:center; gap:9px; width:100%; margin-top:8px; padding:8px 12px;
  background:var(--panel2); border:1px dashed var(--line); border-radius:11px; font-size:12.5px; }
.fa-logged-row b{ font-variant-numeric:tabular-nums; }
.fa-logged-row .muted{ margin-left:auto; }
/* collapsible checklist */
.fa-check-head{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer;
  font:inherit; color:var(--text); padding:2px 0 8px; text-align:left; }
.fa-check-head .fa-check-bar{ flex:1; }
.fa-check-head-ct{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.fa-check-more{ width:100%; margin-top:8px; background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:10px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
/* v446 — admins quote from the field job card */
.fa-quotejob{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:var(--panel); border:1.5px solid transparent; border-radius:15px; padding:13px 15px; margin-bottom:11px;
  color:var(--text); position:relative; }
.fa-quotejob::before{ content:''; position:absolute; inset:0; border-radius:15px; padding:1.5px; pointer-events:none;
  background:linear-gradient(120deg,#ffdd33,#3fe3ff,#ffdd33); background-size:240% 100%; animation:qbGlide 12s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
@media (prefers-reduced-motion: reduce){ .fa-quotejob::before{ animation:none; } }
.fa-quotejob .fa-ico{ width:22px; height:22px; color:#ffdd33; flex:none; }
.fa-quotejob span{ display:flex; flex-direction:column; flex:1; }
.fa-quotejob b{ font-size:14px; }
.fa-quotejob span span{ font-size:11px; color:var(--muted); font-weight:500; }
/* admin field accounts see the quote nav too — v795: moved to ENG_ADMIN_EXTRA in
   js/engineer.js, beside the predicate it is an exception to. It had to move with
   the hides: a re-show that survived the deletion of the rules it was re-showing
   against would have FORCED these three visible over an entitlement padlock. */
/* v567 THE APP IS THE APP: on the app surface (store build, or a claimed
   phone) nobody switches to the office system and no office nav exists —
   owner included. The eng-admin re-shows above are a DESKTOP courtesy for an
   admin previewing the field view; the installed app overrides them. The
   app's own quote and invoice live on the job card, not in desktop views.

   v795 — the four data-view names that were in this selector list are gone for the
   same reason as the eng-mode ones: the app surface refuses SIXTEEN destinations,
   not four, and listing four of them meant nine dead buttons on the store build at
   834 and at 1440. engNavSync() asks appViewAllowed(). What stays below is
   everything that is NOT a destination — the group headings and the Office view
   button, which really are chrome the app does not have. */
body.app-surface .nav-group,
body.app-surface .eng-toggle,
body.app-surface [onclick*="engModeToggle"]{ display:none !important; }

/* ============================================================
   v447 — MOBILE QUOTE BUILDER. Slim collapsible money bar, one-line
   add chips, no sideways scrolling on the line rows. Phone-first.
   ============================================================ */
.qb-collapse{ display:none; }
@media (max-width:700px){
  /* --- 1. the money bar starts SLIM: total + buttons only. ⌃ expands it --- */
  .qb-collapse{ display:flex; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    width:44px; height:22px; border-radius:11px; background:var(--panel2); border:1px solid var(--line);
    color:var(--muted); align-items:center; justify-content:center; cursor:pointer; font-size:12px; z-index:2; }
  #qb-money{ position:relative; }
  #qb-money:not(.qb-open) .qb-docrow,
  #qb-money:not(.qb-open) .qb-money-strip,
  #qb-money:not(.qb-open) .qb-subline,
  #qb-money:not(.qb-open) .qb-brandmark{ display:none; }
  #qb-money.qb-open .qb-collapse{ transform:translateX(-50%) rotate(180deg); }
  #qb-money:not(.qb-open){ padding-top:6px; padding-bottom:6px; }
  #qb-money:not(.qb-open) .qb-money-top{ gap:8px; }
  #qb-money:not(.qb-open) .qb-total{ font-size:19px; }
  #qb-money:not(.qb-open) .qb-pays-l{ font-size:8.5px; }
  #qb-money .qb-mbtn{ height:32px; padding:0 10px; font-size:11.5px; }
  /* --- 2. the add chips fit ONE line --- */
  .qb-addbar-sec{ gap:5px; }
  .qb-addbar-sec .chip-btn{ height:27px !important; padding:0 9px !important; font-size:11px !important; white-space:nowrap; }
  .qb-secsearch{ flex-basis:100%; }   /* search takes its own clean row below */
  /* --- 3. line rows: title + total + ⋯ only — nothing to scroll sideways --- */
  .qb-sec-table thead th:nth-child(3), .qb-sec-table tr.qg-row > td:nth-child(3),   /* Qty */
  .qb-sec-table thead th:nth-child(6), .qb-sec-table tr.qg-row > td:nth-child(6){  /* Mk % */
    display:none; }
  .qb-sec-table tr.qg-row td:first-child{ min-width:0; font-size:14px; }
  .quote-grid td{ padding:8px 6px; }
  .quote-grid .qg-title{ font-size:14px; }
  .quote-grid .job-val{ font-size:14px; }
  .qb-sec-body{ overflow-x:hidden; }
  /* the Sold-as pill sits tighter */
  .qg-sale-pill select, .qg-row .status-sel{ font-size:11px; max-width:120px; }
}
/* v447b — specificity fixes for the phone quote builder */
@media (max-width:700px){
  /* the desktop 210px title minimum loses on phones (it forced sideways scroll) */
  .quote-grid tbody tr.qg-row td:first-child{ min-width:0 !important; }
  /* row actions tuck in tight */
  .qb-sec-table .dt-actions{ white-space:nowrap; padding-left:2px !important; padding-right:4px !important; }
  .qb-sec-table .dt-actions .icon-btn{ min-width:24px !important; width:24px; padding:0 2px !important; }
  /* the 40px tap floor gives way to the one-line add bar (32px still tappable) */
  .qb-addbar-sec .chip-btn{ min-height:32px !important; height:32px !important; padding:0 7px !important; font-size:10.5px !important; }
  .qb-addbar-sec{ flex-wrap:wrap; }
  .qb-addbar-sec .qb-more-wrap .chip-btn{ padding:0 9px !important; }
}
/* v448b — deterministic phone table: fixed layout, title wraps, money stays whole */
@media (max-width:700px){
  .qb-sec-table{ table-layout:fixed; width:100%; }
  .qb-sec-table thead th:nth-child(8), .qb-sec-table tr.qg-row > td:nth-child(8){ width:96px; }
  .qb-sec-table thead th:nth-child(9), .qb-sec-table tr.qg-row > td:nth-child(9){ width:56px; }
  .qb-sec-table tr.qg-row td:first-child .qg-title{ white-space:normal; overflow-wrap:anywhere; }
  .qb-sec-table tr.qg-row > td.r .dt-sub{ white-space:nowrap; }
  /* expanded editors span the row and wrap freely */
  .qb-sec-table tr.qg-exp > td{ width:auto; }
  .qb-sec-table tr.qg-exp .qg-mats{ display:block; overflow-x:auto; }
}
/* v449b — the ⋯ joins line one */
@media (max-width:700px){
  .qb-addbar-sec{ gap:4px; padding-left:10px; padding-right:10px; }
  .qb-addbar-sec .chip-btn{ padding:0 6px !important; font-size:10px !important; letter-spacing:0; }
  .qb-more-wrap{ flex:none; }
}

/* ============================================================
   v452 — FLOATING MONEY BARS (mobile) + THE BRAND-LIFE PASS.
   Yellow = action. Cyan = information. The diary mark on every
   field surface. Nothing vanilla.
   ============================================================ */
/* ---- 1. the price bar FLOATS on phones (quote + invoice alike) ---- */
@media (max-width:700px){
  #qb-money, #inv-money{ position:fixed; left:8px; right:8px; z-index:850;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -6px 30px rgba(0,0,0,.35); }
  body.eng-mode #qb-money, body.eng-mode #inv-money{ bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
  /* room so the last content never hides behind the floating bar */
  #view-quote .quote-main{ padding-bottom:170px; }
  .inv-pane{ padding-bottom:170px; }
}
/* ---- 2. the mark, everywhere the field app lives ---- */
.fa-mark{ display:inline-flex; flex:none; }
.fa-mark-top{ margin-left:2px; }
.fa-hero2 .fa-mark{ margin-right:2px; }
/* ---- 3. brand life: chips, headers, icons ---- */
.fa-card2-h .fa-ico{ color:var(--cyan,#0e7c96); }
body:not(.theme-light) .fa-card2-h .fa-ico{ color:#3fe3ff; }
.fa-chip2{ border-color:color-mix(in srgb, var(--amber,#ffdd33) 45%, var(--line)); }
.fa-chip2 .fa-ico{ color:var(--amber-deep,#b08900); }
body:not(.theme-light) .fa-chip2 .fa-ico{ color:#ffdd33; }
.fa-chip2:first-child{ background:color-mix(in srgb, #ffdd33 14%, var(--panel2)); }  /* the primary chip pops */
.fa-listitem-ic .fa-ico{ color:var(--cyan,#0e7c96); }
body:not(.theme-light) .fa-listitem-ic .fa-ico{ color:#3fe3ff; }
.fa-logadd-mic .fa-ico{ color:var(--amber-deep,#b08900); }
body:not(.theme-light) .fa-logadd-mic .fa-ico{ color:#ffdd33; }
/* light theme: the action tiles keep their punch */
body.theme-light .fa-act2-ic .fa-ico{ color:#b08900; }
body.theme-light .fa-act2-go .fa-act2-ic .fa-ico{ color:#0e7c96; }
/* v728: was #b08900 — PIXEL-SAMPLED at 3.07:1 on this bar's own ground
   (rgb(176,137,0) on rgb(248,248,244)) at 10.5px/700, against a 4.5 requirement.
   The SELECTED tab — the one that tells a man where he is — was the palest text on
   the bar and the only failure on it. --c-pipe-ink is the amber TEXT token and is
   #8A6800 in light, the value this file already uses for the time column at
   5.17:1, and #FFDD33 in dark. Fixed at source rather than layered over in
   design-c.css, because two spellings of one colour is how they stop agreeing.
   Do NOT measure this with the repo's composited-contrast helper: #fa-tabbar's
   ground is authored as color(srgb 0.968627 …/0.88) and that parser reads
   0.968627 as an 8-bit channel, inventing a near-black background — it passed
   this failure and failed the three tabs that were fine. */
body.theme-light .fa-tab.on{ color:var(--c-pipe-ink, #8A6800); }
/* the day rows: time wears the working yellow, the rail stays status-coloured */
.fa-jobrow-time{ color:var(--amber-deep,#b08900); }
body:not(.theme-light) .fa-jobrow-time{ color:#ffdd33; }
/* checklist ticks land green (semantic), the add-input focus ring teal */
.fa-check-add input:focus, .fa-logadd input:focus{ outline:2px solid rgba(63,227,255,.4); outline-offset:1px; }
/* empty states get the mark's warmth */
.fa-empty2 .fa-ico{ color:color-mix(in srgb, var(--amber,#ffdd33) 50%, var(--muted)); }
/* More-sheet icons stay yellow in light too */
body.theme-light .fa-morerow-ic .fa-ico{ color:#b08900; }
/* week strip: today's dot + selected day wear the brand */
.eng-wd.on{ border-color:var(--amber,#ffdd33) !important; }
.eng-wd i{ background:var(--amber,#ffdd33) !important; }
/* v452b — the last two sideways offenders (office on a phone) */
@media (max-width:700px){
  .dsk-split{ display:block !important; }
  .dsk-left, .dsk-right{ width:100% !important; min-width:0 !important; max-width:100%; }
  .dsk-folder{ min-width:0 !important; max-width:100%; }
  #view-settings select, #view-settings input:not([type=checkbox]):not([type=radio]),
  .au-step-t, .au-seq-name{ max-width:100% !important; min-width:0 !important; box-sizing:border-box; }
  .au-seq-name{ width:100% !important; }
}
/* v452c — desk workbench panes contain their own width on phones */
@media (max-width:700px){
  .dsk-split, .dsk-left, .dsk-right, .dsk-folder{ overflow-x:auto; }
}
/* v452d — the stragglers: costs staff grid, desk next-up header, journey node text */
@media (max-width:700px){
  .staff-grid{ grid-template-columns:1fr !important; min-width:0; }
  .staff-card{ min-width:0 !important; max-width:100%; overflow-x:hidden; }
  .dnx-wrap, .dsk-sheet{ overflow-x:hidden; }
  .dnx-head{ flex-wrap:wrap; min-width:0; }
  .pj-txt, .pj-t{ overflow-wrap:anywhere; min-width:0; max-width:100%; }
}
/* v452e — final two */
@media (max-width:700px){
  .staff-head, .ovh-cat{ flex-wrap:wrap !important; min-width:0; overflow-x:hidden; }
  .dnx-head{ overflow-x:hidden; }
  .dsk-map-full, .dsk-map-bar{ overflow-x:hidden; min-width:0; max-width:100%; }
}
/* v452f — the invoice bar collapses exactly like the quote bar on phones */
@media (max-width:700px){
  #inv-money{ position:relative; }
  #inv-money:not(.qb-open) .qb-money-strip,
  #inv-money:not(.qb-open) .pay-tools,
  #inv-money:not(.qb-open) .qb-subline,
  #inv-money:not(.qb-open) .qb-brandmark{ display:none; }
  #inv-money.qb-open .qb-collapse{ transform:translateX(-50%) rotate(180deg); }
  #inv-money:not(.qb-open){ padding-top:6px; padding-bottom:6px; }
  #inv-money:not(.qb-open) .qb-total{ font-size:19px; }
  /* fixed positioning still wins (set in v452) */
  #inv-money{ position:fixed; }
}

/* ============================================================
   v454 — job control from the field: stage button + glow,
   booking sheet up top, return visits, deep dive on the phone
   ============================================================ */
/* the stage button sits in the topbar next to the status tag —
   it WEARS the stage colour, exactly like the desk */
.fa-stagebtn{ display:inline-flex; align-items:center; gap:4px; border:none; cursor:pointer;
  background:var(--c,#9aa1ab); color:var(--t,#0b0c0e); font:inherit; font-size:12px; font-weight:800;
  padding:5px 9px; border-radius:999px; min-height:30px; white-space:nowrap;
  box-shadow:0 1px 6px color-mix(in srgb, var(--c,#9aa1ab) 45%, transparent); }
.fa-stagebtn .fa-ico{ width:13px; height:13px; }
/* the state row — booking + deep dive, right under the topbar */
.fa-staterow{ display:flex; gap:8px; margin:8px 0 2px; }
.fa-statebtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:8px 10px; border-radius:12px; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  background:var(--panel2,var(--panel,#f4f5f7)); color:var(--text); border:1px solid var(--line,#d8dbe0); }   /* v564: was var(--ink) — which is #08090b in dark, i.e. near-black on a dark panel */
.fa-statebtn .fa-ico{ width:16px; height:16px; color:var(--stage-teal,#0d9cbc); }
.fa-statebtn i{ font-style:normal; font-weight:800; color:var(--money,#8a6800); }
.fa-statebtn-dd{ flex:0 0 auto; }
.fa-statebtn-dd .fa-ico{ color:var(--money,#8a6800); }
/* deep dive paints into #ov-dd with the desk classes — just give it air */
#engjob-body #ov-dd .job-note{ margin:8px 0 2px; }
/* stage sheet rows */
.fa-stagerow{ position:relative; }
.fa-stagerow.on{ background:color-mix(in srgb, var(--panel,#fff) 88%, #ffdd33); }
.fa-stagedot{ width:16px; height:16px; border-radius:50%; flex:0 0 16px; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.fa-stagecur{ font-size:11px; font-weight:800; color:var(--muted,#6a7078); white-space:nowrap; }
/* booking sheet */
.fa-bknow{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; margin:0 0 10px;
  background:var(--panel2,var(--panel,#f4f5f7)); border:1px solid var(--line,#d8dbe0); }
.fa-bknow-ic .fa-ico, .fa-bknow .fa-ico{ width:18px; height:18px; color:var(--stage-teal,#0d9cbc); }
.fa-bknow-l{ display:flex; flex-direction:column; gap:1px; font-size:14px; }
.fa-bknow-l span{ font-size:12px; color:var(--muted,#6a7078); }
.fa-vishead{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#6a7078); margin:8px 4px 4px; }
.fa-visrow{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; margin-bottom:6px;
  background:var(--panel2,var(--panel,#f4f5f7)); border:1px dashed var(--line,#c9cdd3); }
.fa-visrow-l{ display:flex; flex-direction:column; gap:1px; flex:1; font-size:13px; }
.fa-visrow-l span{ font-size:11px; color:var(--muted,#6a7078); }
.fa-visrow-x{ border:none; background:none; cursor:pointer; color:var(--muted,#6a7078); font-size:14px; min-width:34px; min-height:34px; }
/* return-visit form */
.fa-visform{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.fa-visform label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:var(--muted,#6a7078); }
.fa-visform input, .fa-visform select{ min-height:40px; font-size:14px; }
.fa-visgo{ width:100%; min-height:46px; border:none; border-radius:12px; cursor:pointer; font:inherit; font-size:15px; font-weight:800;
  background:#ffdd33; color:#0b0c0e; }
/* return-visit blocks on the boards — dashed, badged, not draggable */
.sb-visit{ border-style:dashed; opacity:.92; }
.sch-block-visit{ border:1px dashed color-mix(in srgb, var(--sc,#9aa1ab) 70%, transparent); opacity:.92; }
/* v454b — the topbar never wraps: the granular tag gives way gracefully so
   the stage button and the diary mark keep their line on a 375px phone */
.fa-topbar2{ flex-wrap:nowrap; }
.fa-topjob{ flex:0 0 auto; }
.fa-topstatus{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-stagebtn{ flex:0 0 auto; margin-left:auto; }
.fa-mark-top{ flex:0 0 auto; }
@media (max-width:420px){ .fa-topbar2 .fa-topstatus{ display:none; } }  /* the stage button IS the status on a phone */
/* v455 — return visits in the desktop booking modal */
.bk-visits{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line,#d8dbe0); }
.bk-visits-h{ font-weight:800; font-size:13px; margin-bottom:6px; }
.bk-visrow{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px dashed var(--line,#c9cdd3);
  border-radius:9px; margin-bottom:6px; font-size:13px; flex-wrap:wrap; }
.bk-visrow-sp{ flex:1; }

/* ============================================================
   v456 — THE PHONE & THE INBOX. Texts look like texting (a real
   phone, blue messages), emails look like a mail app. Universal:
   job card, Conversations, Maisie's training chat, field app.
   ============================================================ */
/* ---- the phone frame ---- */
.ph-wrap{ display:flex; justify-content:center; padding:4px 0 8px; }
.ph-frame{ position:relative; width:100%; max-width:400px; display:flex; flex-direction:column;
  background:var(--panel,#fff); border:9px solid #101114; border-radius:44px; overflow:hidden;
  box-shadow:0 16px 44px rgba(8,9,11,.30), 0 0 0 1.5px #33363d; }
.ph-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:108px; height:23px;
  background:#101114; border-radius:13px; z-index:6; }
.ph-contact{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:40px 12px 8px;
  border-bottom:1px solid var(--line,#e2e4e8); }
.ph-ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#a7adb6,#6a7078); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em; }
.ph-contact b{ font-size:13px; margin-top:3px; }
.ph-contact span{ font-size:11px; color:var(--muted,#6a7078); }
.ph-screen{ min-height:200px; max-height:400px; overflow-y:auto; padding:12px 10px; }
.ph-screen.ov-thread-chat, .ph-screen.ov-thread{ background:transparent; border:none; border-radius:0; margin:0; }
.ph-dock{ border-top:1px solid var(--line,#e2e4e8); background:var(--bg2,var(--panel,#f4f5f7));
  padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.ph-homebar{ display:block; height:18px; position:relative; background:var(--bg2,var(--panel,#f4f5f7)); }
.ph-homebar::after{ content:''; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:104px; height:4.5px; border-radius:3px; background:#101114; opacity:.75; }
.ph-mini .ph-frame{ max-width:330px; border-width:7px; border-radius:36px; }
.ph-mini .ph-screen{ min-height:150px; max-height:300px; }
@media (max-width:700px){
  .ph-frame{ max-width:100%; border-width:6px; border-radius:30px; }
  .ph-notch{ width:88px; height:18px; top:7px; } .ph-contact{ padding-top:30px; }
}
/* ---- the bubbles: blue like a real phone (WhatsApp thread goes green) ---- */
.ph-screen .ov-bub{ background:#0a84ff; border:none; color:#fff; border-radius:17px;
  padding:7px 12px; font-size:13.5px; line-height:1.42; }
.ph-screen .run-end .ov-bub:not(.ov-bub-in){ border-bottom-right-radius:5px; }
.ph-screen .ov-bub-in{ background:#e9e9eb; color:#111318; }
.ph-screen .run-end .ov-bub-in{ border-bottom-left-radius:5px; border-bottom-right-radius:17px; }
.ph-wa .ph-screen .ov-bub{ background:#d9fdd3; color:#0b1b0e; }
.ph-wa .ph-screen .ov-bub-in{ background:#f0f1f3; color:#111318; }
.ph-screen .ov-day span{ font-size:10.5px; }
.ph-screen .ov-stamp{ font-size:10px; }
/* the dock compose: rounded like the real thing, brand-yellow send */
.ph-dock .ov-compose, .ph-dock .cv-compose{ margin:0; display:flex; gap:6px; align-items:flex-end; }
.ph-dock textarea{ flex:1; border-radius:17px; padding:8px 12px; min-height:38px; resize:none; }
.ph-dock .btn{ border-radius:999px; }
.ph-dock .ov-compose-col{ flex-direction:column; align-items:stretch; }
.ph-dock .ov-compose-row{ display:flex; gap:6px; align-items:flex-end; }
.ph-dock select{ border-radius:10px; font-size:12px; }
.ph-dock .cv-draft{ margin:0 0 2px; }
/* ---- the email inbox ---- */
.em-inbox{ border:1px solid var(--line,#e2e4e8); border-radius:14px; background:var(--panel,#fff);
  overflow:hidden; margin:2px 0 8px; }
.em-row{ border-bottom:1px solid var(--line,#eceef1); }
.em-row:last-child{ border-bottom:none; }
.em-row summary{ list-style:none; display:flex; gap:9px; padding:10px 13px; cursor:pointer; align-items:flex-start; }
.em-row summary::-webkit-details-marker{ display:none; }
.em-row summary:hover{ background:color-mix(in srgb, #0a84ff 4%, transparent); }
.em-dot{ flex:0 0 9px; width:9px; height:9px; border-radius:50%; margin-top:6px; background:transparent; }
.em-in .em-dot{ background:#0a84ff; }
.em-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.em-top{ display:flex; justify-content:space-between; gap:8px; }
.em-from{ font-size:13px; }
.em-when{ font-size:11px; color:var(--muted,#6a7078); white-space:nowrap; }
.em-subj{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.em-snip{ font-size:12px; color:var(--muted,#6a7078); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.em-row[open] summary{ background:color-mix(in srgb, #0a84ff 7%, var(--panel,#fff)); }
.em-open{ padding:10px 14px 13px; border-top:1px dashed var(--line,#e2e4e8); }
.em-open-h{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted,#6a7078); margin-bottom:8px; }
.em-open-b{ font-size:13.5px; line-height:1.55; }
.em-sec-h{ font-weight:800; font-size:13px; margin:10px 2px 6px; }
.cv-mailsec{ margin-top:4px; }
/* ---- the field app thread joins the look (no bezel — it's already a phone) ---- */
.fa-comms{ gap:2px; }
.fa-bub{ max-width:84%; background:#0a84ff; border:none; border-radius:16px 16px 5px 16px; padding:7px 11px; }
.fa-bub .fa-bub-t{ color:#fff; }
.fa-bub .fa-bub-m{ color:rgba(255,255,255,.72); }
.fa-bub.in{ background:#e9e9eb; border:none; border-radius:16px 16px 16px 5px; }
.fa-bub.in .fa-bub-t{ color:#111318; }
.fa-bub.in .fa-bub-m{ color:#6a7078; }
.fa-shell .fa-bub{ background:#0a84ff; border-color:transparent; }
.fa-shell .fa-bub.in{ background:var(--panel2,#e9e9eb); }
.fa-shell .fa-bub.in .fa-bub-t{ color:var(--ink,#111318); }
/* v456b — outgun the older 3-class chat rules so the phone's grey inbound wins */
.ph-screen.ov-thread-chat .ov-bub{ background:#0a84ff; color:#fff; }
.ph-screen.ov-thread-chat .ov-bub-row-in .ov-bub{ background:#e9e9eb; color:#111318; border:none; }
.ph-wa .ph-screen.ov-thread-chat .ov-bub{ background:#d9fdd3; color:#0b1b0e; }
.ph-wa .ph-screen.ov-thread-chat .ov-bub-row-in .ov-bub{ background:#f0f1f3; color:#111318; }
/* v456c — the frame can never outgrow its column (flex min-width:auto trap) */
.ph-wrap{ width:100%; min-width:0; }
.ph-frame{ min-width:0; max-width:min(400px,100%); }
.ph-screen, .ph-dock{ min-width:0; }
.ph-dock textarea{ min-width:0; }
.ph-dock .cv-draft{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ph-screen .ov-bub{ overflow-wrap:anywhere; }
/* v456d — grid/flex blowout guards on the Conversations layout */
.cv-layout > *{ min-width:0; }
.cv-thread{ min-width:0; max-width:100%; }
.cv-list{ min-width:0; }
.cv-head{ flex-wrap:wrap; }

/* ============================================================
   v457 — ONE PHONE, ONE SIZE. The frame is identical on the job
   card and Conversations (the mobile proportions Jamie liked:
   slim bezel, tight radius), short threads sit at the BOTTOM of
   the screen like a real phone, and the dead space around the
   phone gets used — the email inbox docks beside it.
   ============================================================ */
.ph-frame{ width:375px; max-width:100%; border-width:7px; border-radius:34px; }
.ph-screen{ height:400px; max-height:none; min-height:0; }
.ph-screen > :first-child{ margin-top:auto; }   /* short threads bottom-anchor, like the real thing */
.ph-mini .ph-frame{ width:330px; border-width:7px; border-radius:34px; }
.ph-mini .ph-screen{ height:300px; }
@media (max-width:700px){
  .ph-frame{ width:100%; border-width:6px; border-radius:30px; }
  .ph-screen{ height:48vh; min-height:250px; }
}
/* Conversations: phone + email inbox share the row; the thread pane stops
   forcing its own inner scroll now the phone is a fixed shape */
.cv-thread{ max-height:none; }
.cv-duo{ display:flex; gap:18px; align-items:flex-start; justify-content:center; flex-wrap:wrap; padding:14px 12px 18px; }
.cv-duo .ph-wrap{ width:auto; flex:0 0 auto; padding:0; }
.cv-duo .cv-mailsec{ flex:1 1 300px; min-width:260px; max-width:520px; margin-top:2px; }
/* job card: everything in the Messages tab lines up on the phone's axis */
.ov-chans{ justify-content:center; }
.ov-msgs .em-inbox{ max-width:640px; margin-left:auto; margin-right:auto; }
.ov-msgs > .ov-compose, .ov-msgs .ov-compose-col{ max-width:640px; margin-left:auto; margin-right:auto; width:100%; }
.ov-msgs .ov-thread:not(.ph-screen){ max-width:640px; margin-left:auto; margin-right:auto; }  /* the phone-call log keeps step */
/* v457b — the inbox docks beside the phone whenever there's room */
.cv-duo{ gap:14px; padding:14px 8px 18px; }
.cv-duo .cv-mailsec{ flex:1 1 230px; min-width:230px; }
/* v457c — give the thread column the width the duo needs */
.cv-layout{ grid-template-columns:minmax(250px,300px) minmax(0,1fr); }
.cv-duo{ gap:12px; padding:14px 4px 18px; }
.cv-duo .cv-mailsec{ flex:1 1 210px; min-width:210px; }

/* ============================================================
   v458 — THE MAIL APP: a real little inbox per customer.
   Threads, reading view, reply/forward, rich composer.
   ============================================================ */
.ma-app{ border:1px solid var(--line,#e2e4e8); border-radius:14px; background:var(--panel,#fff);
  overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.ma-head{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--line,#e2e4e8);
  background:var(--bg2,var(--panel,#f7f8fa)); flex-wrap:wrap; }
.ma-title{ font-weight:800; font-size:13.5px; min-width:0; }
.ma-title-thread{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-sub{ font-weight:500; font-size:11px; color:var(--muted,#6a7078); }
.ma-head .btn-amber{ margin-left:auto; }
.ma-head .btn + .ma-title{ margin-left:2px; }
.ma-empty{ padding:22px 16px; font-size:12.5px; color:var(--muted,#6a7078); }
/* inbox rows */
.ma-row{ display:flex; gap:9px; width:100%; text-align:left; padding:10px 12px; border:none; cursor:pointer;
  background:none; border-bottom:1px solid var(--line,#eceef1); font:inherit; align-items:flex-start; }
.ma-row:last-child{ border-bottom:none; }
.ma-row:hover{ background:color-mix(in srgb, #0a84ff 5%, transparent); }
.ma-dot{ flex:0 0 9px; width:9px; height:9px; border-radius:50%; margin-top:6px; background:transparent; }
.ma-unread .ma-dot{ background:#0a84ff; }
.ma-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ma-row-top{ display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.ma-when{ font-size:11px; color:var(--muted,#6a7078); white-space:nowrap; }
.ma-row-subj{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-count{ font-style:normal; font-size:10.5px; font-weight:800; color:var(--muted,#6a7078);
  border:1px solid var(--line,#d8dbe0); border-radius:999px; padding:0 6px; }
.ma-row-snip{ font-size:12px; color:var(--muted,#6a7078); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* the chain */
.ma-chain{ padding:6px 8px; display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; }
.ma-msg{ border:1px solid var(--line,#e2e4e8); border-radius:11px; background:var(--panel,#fff); }
.ma-msg.ma-mine{ background:color-mix(in srgb, #0a84ff 4%, var(--panel,#fff)); }
.ma-msg summary{ list-style:none; display:flex; gap:9px; align-items:center; padding:8px 11px; cursor:pointer; }
.ma-msg summary::-webkit-details-marker{ display:none; }
.ma-ava{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#a7adb6,#6a7078); color:#fff; font-weight:800; font-size:10.5px; }
.ma-mine .ma-ava{ background:linear-gradient(135deg,#0a84ff,#0866c4); }
.ma-msg-who{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:12.5px; }
.ma-msg-who span{ font-size:11px; color:var(--muted,#6a7078); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ma-msg-body{ padding:2px 13px 12px 50px; font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; }
.ma-msg-body blockquote, .ma-quote blockquote{ border-left:3px solid var(--line,#d8dbe0); margin:6px 0 0; padding:2px 0 2px 10px; color:var(--muted,#4a5058); }
.ma-actions{ display:flex; gap:7px; padding:9px 11px; border-top:1px solid var(--line,#e2e4e8); flex-wrap:wrap; }
/* the composer */
.ma-compose{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:7px; }
.ma-field{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--muted,#6a7078); }
.ma-field input{ flex:1; min-width:0; }
.ma-toolbar{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; padding:5px 6px;
  border:1px solid var(--line,#e2e4e8); border-radius:10px; background:var(--bg2,#f7f8fa); }
.ma-tb{ min-width:30px; min-height:30px; border:none; background:none; border-radius:7px; cursor:pointer;
  font-size:13px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink,#1c1e22); }
.ma-tb:hover{ background:color-mix(in srgb, #0a84ff 10%, transparent); }
.ma-tb-sep{ width:1px; height:18px; background:var(--line,#d8dbe0); margin:0 3px; }
.ma-tb-size{ font-size:11.5px; border-radius:7px; min-height:30px; }
.ma-editor{ min-height:130px; max-height:300px; overflow-y:auto; border:1px solid var(--line,#d8dbe0);
  border-radius:11px; padding:10px 12px; font-size:13.5px; line-height:1.55; background:var(--panel,#fff); }
.ma-editor:focus{ outline:2px solid color-mix(in srgb, #0a84ff 45%, transparent); outline-offset:1px; }
.ma-editor ul, .ma-editor ol{ padding-left:22px; margin:4px 0; }
.ma-attach{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ma-attach-lab{ font-size:11px; font-weight:700; color:var(--muted,#6a7078); }
.ma-note{ font-size:10.5px; color:var(--muted,#8a9098); margin:0; }
/* it lives happily in the narrow Conversations dock and the 640px job-card column */
.cv-mailsec .ma-app{ width:100%; }
.ov-msgs .ma-app{ max-width:640px; margin:0 auto; width:100%; }
/* v459 — mail headers read like a mail app: label LEFT of its box
   (the global label{flex-direction:column} was stacking them) */
label.ma-field{ display:flex; flex-direction:row; align-items:center; gap:10px; }
.ma-field-l{ flex:0 0 52px; text-align:right; font-size:11.5px; font-weight:700; color:var(--muted,#6a7078); }
label.ma-field input{ flex:1; min-width:0; }
/* v460 — the composer grows up: From row, colour wells, importance, file chips */
.ma-from{ font-size:12px; }
.ma-from-v{ color:var(--muted,#6a7078); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-imp{ flex:0 0 auto; font-size:12px; opacity:.65; }
.ma-imp.on{ opacity:1; background:color-mix(in srgb, #dc2626 12%, transparent); }
.ma-tb-col{ position:relative; gap:2px; padding:0 4px; cursor:pointer; }
.ma-tb-col .ma-col-a{ font-weight:800; font-size:12.5px; }
.ma-tb-col input[type=color]{ width:16px; height:16px; padding:0; border:none; background:none; cursor:pointer; }
.ma-filechips{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.ma-filex{ border:none; background:none; cursor:pointer; font-size:11px; color:inherit; padding:0 1px; }
.ma-toolbar .ma-tb{ min-width:28px; min-height:28px; font-size:12.5px; }
.ma-tb-size{ max-width:96px; }
/* v461 — attach pickers: this job / the business shelf */
.ma-pick{ border:1px solid var(--line,#d8dbe0); border-radius:11px; background:var(--bg2,#f7f8fa);
  margin-top:2px; overflow:hidden; }
.ma-pick-head{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--line,#e2e4e8); }
.ma-pick-t{ font-size:12px; font-weight:800; }
.ma-pick-sec{ font-size:12px; border-radius:8px; min-height:30px; flex:1; min-width:0; }
.ma-pick-row{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px;
  border:none; border-bottom:1px solid var(--line,#eceef1); background:none; cursor:pointer; font:inherit; font-size:12.5px; }
.ma-pick-row:last-child{ border-bottom:none; }
.ma-pick-row:hover{ background:color-mix(in srgb, #0a84ff 6%, transparent); }
.ma-pick-row.on{ opacity:.55; cursor:default; }
.ma-pick-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ma-pick-go{ font-size:11px; font-weight:800; color:var(--stage-teal,#0d9cbc); white-space:nowrap; }
.ma-attach button.ov-att{ font:inherit; cursor:pointer; }

/* ============================================================
   SOLAR STUDIO — the full-screen roof designer
   ============================================================ */
#solar-studio{ display:none; position:fixed; inset:0; z-index:2000; background:var(--bg,#0d0f13); }
#solar-studio.open{ display:flex; flex-direction:column; }
body.ss-open{ overflow:hidden; }
.ss-top{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--panel,#0d0f13);
  border-bottom:1px solid var(--line,#23262c); flex-wrap:wrap; }
.ss-title{ font-size:13.5px; min-width:0; } .ss-title b{ font-family:var(--font-display,'Clash Display'); }
.ss-addr{ color:var(--muted,#9aa1ab); font-size:12px; }
.ss-tools{ display:flex; gap:5px; margin-left:6px; }
.ss-tool{ font:inherit; font-size:12px; font-weight:700; padding:6px 10px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line,#2a2d33); background:var(--panel,#14161b); color:var(--ink,#f5f6f8); min-height:34px; }
.ss-tool.on{ background:#ffdd33; color:#0b0c0e; border-color:#ffdd33; }
.ss-hud{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.ss-chip{ font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; border:1px solid var(--line,#2a2d33); }
.ss-chip-y{ background:#ffdd33; color:#0b0c0e; border-color:#ffdd33; }
.ss-chip-c{ border-color:#3fe3ff; color:#3fe3ff; }
.ss-body{ flex:1; display:flex; min-height:0; }
#ss-map{ flex:1; min-width:0; position:relative; }
.ss-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted,#9aa1ab); font-size:14px; }
#ss-svg{ position:absolute; pointer-events:auto; }
.ss-side{ width:320px; flex:0 0 320px; overflow-y:auto; border-left:1px solid var(--line,#23262c);
  background:var(--panel,#101216); padding:12px; display:flex; flex-direction:column; gap:12px; }
.ss-sec{ border:1px solid var(--line,#23262c); border-radius:12px; padding:10px 12px; }
.ss-sec-h{ font-weight:800; font-size:13px; margin-bottom:8px; }
.ss-sec-sub{ font-weight:500; font-size:11px; color:var(--muted,#9aa1ab); }
.ss-sec label{ font-size:11.5px; margin-bottom:7px; }
.ss-sec select, .ss-sec input[type=number]{ width:100%; min-height:34px; font-size:12.5px; }
.ss-gtog{ display:flex !important; flex-direction:row !important; align-items:center; gap:8px; font-size:12.5px !important; }
.ss-gline{ font-size:11.5px; color:var(--muted,#9aa1ab); margin-top:4px; }
.ss-note{ font-size:11.5px; color:var(--muted,#9aa1ab); margin:2px 0; }
.ss-facetrow{ display:flex; align-items:flex-end; gap:6px; padding:7px 8px; border:1px solid var(--line,#23262c);
  border-radius:9px; margin-bottom:6px; flex-wrap:wrap; }
.ss-facetrow.on{ border-color:#3fe3ff; }
.ss-facetrow label{ flex:1; margin:0; font-size:10.5px !important; }
.ss-facetrow input{ min-height:30px !important; }
.ss-frow-l{ font-weight:800; font-size:12px; cursor:pointer; align-self:center; }
.ss-arrbtns{ display:flex; gap:6px; flex-wrap:wrap; }
.ss-send{ margin-top:auto; min-height:48px; border:none; border-radius:12px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:800; background:#ffdd33; color:#0b0c0e; }
/* the shapes */
.ss-facet{ fill:rgba(63,227,255,.10); stroke:#3fe3ff; stroke-width:1.5; cursor:pointer; }
.ss-facet.sel{ fill:rgba(63,227,255,.18); stroke-width:2.5; }
.ss-tracing{ fill:rgba(255,221,51,.12); stroke:#ffdd33; stroke-width:1.5; stroke-dasharray:5 4; }
.ss-vert{ fill:#ffdd33; stroke:#0b0c0e; stroke-width:1; }
.ss-panel{ fill:rgba(13,20,34,.92); stroke:#9fd8ff; stroke-width:.8; cursor:grab; }
.ss-panel.sel{ stroke:#ffdd33; stroke-width:1.6; }
.ss-gpanel{ fill:rgba(20,40,70,.55); stroke:#3fe3ff; stroke-width:.9; stroke-dasharray:3 2; cursor:pointer; }
.ss-obst{ fill:rgba(220,38,38,.25); stroke:#dc2626; stroke-width:1.2; cursor:pointer; }
/* the key card */
.ss-keycard{ max-width:560px; margin:8vh auto; background:var(--panel,#101216); border:1px solid var(--line,#23262c);
  border-radius:16px; padding:26px 28px; }
.ss-keycard h2{ font-family:var(--font-display,'Clash Display'); margin:0 0 8px; }
.ss-keycard ol{ padding-left:20px; font-size:13.5px; } .ss-keycard li{ margin:5px 0; }
.ss-keyrow{ display:flex; gap:8px; margin-top:12px; }
.ss-keyrow input{ flex:1; min-height:42px; }
@media (max-width:820px){
  .ss-body{ flex-direction:column; }
  .ss-side{ width:100%; flex:0 0 44%; border-left:none; border-top:1px solid var(--line,#23262c); }
}
/* v463 — Solar Studio grows up: sun map, rotate handle, money panel */
.ss-tool.busy{ opacity:.6; pointer-events:none; }
.ss-tool#ss-fluxbtn.on{ background:#3fe3ff; color:#0b0c0e; border-color:#3fe3ff; }
.ss-rot{ fill:#ffdd33; stroke:#0b0c0e; stroke-width:1.5; cursor:grab; }
.ss-rotline{ stroke:#ffdd33; stroke-width:1.5; stroke-dasharray:4 3; }
.ss-rott{ font-size:11px; text-anchor:middle; pointer-events:none; fill:#0b0c0e; font-weight:800; }
.ss-money-in{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ss-money-in label{ display:flex !important; flex-direction:row !important; align-items:center; gap:5px; font-size:10.5px !important; white-space:nowrap; }
.ss-money-in input{ width:100%; min-width:0; min-height:32px !important; font-size:12px; }
.ss-mchart{ display:flex; gap:2px; align-items:flex-end; height:44px; margin:10px 0 6px; }
.ss-mbar{ flex:1; height:100%; display:flex; align-items:flex-end; }
.ss-mbar i{ display:block; width:100%; background:linear-gradient(180deg,#ffdd33,#e8b800); border-radius:2px 2px 0 0; min-height:2px; }
.ss-mrows{ display:flex; flex-direction:column; gap:4px; font-size:12px; }
.ss-mrows > div{ display:flex; justify-content:space-between; gap:8px; }
.ss-mrows .ss-mtot{ border-top:1px solid var(--line,#23262c); padding-top:5px; font-weight:800; }
.ss-mrows .ss-mtot b{ color:#e8b800; }
/* v464 — the studio answers Jamie: full-screen event surface, drag-paint,
   2D/3D toggle, ghost preview */
.ss-ghost{ fill:rgba(255,221,51,.35); stroke:#ffdd33; }
.ss-bg{ cursor:crosshair; }
#ss-3d{ position:absolute; inset:0; z-index:5; display:none; background:#0d0f13; }
#ss-3d canvas{ display:block; width:100%; height:100%; }
.ss-viewpill{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; border:1px solid var(--line,#2a2d33); border-radius:999px; overflow:hidden;
  background:var(--panel,#101216); box-shadow:0 4px 18px rgba(0,0,0,.35); }
.ss-viewpill button{ font:inherit; font-size:13px; font-weight:800; padding:9px 22px; border:none;
  background:none; color:var(--ink,#f5f6f8); cursor:pointer; min-height:40px; }
.ss-viewpill button.on{ background:#ffdd33; color:#0b0c0e; }
.ss-viewpill button.busy{ opacity:.6; pointer-events:none; }
/* v468 — OpenSolar-grade placement: cursor ghost + grow-slots */
.ss-cursorghost{ fill:rgba(13,20,34,.60); stroke:#ffdd33; stroke-width:1.6; pointer-events:none; }
.ss-slot{ fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.8); stroke-width:1.1; cursor:copy; }
.ss-slot:hover{ fill:rgba(255,221,51,.35); stroke:#ffdd33; stroke-width:1.6; }

/* ============================================================
   v471 — SOLAR STUDIO, THE OPENSOLAR ANATOMY IN OUR SKIN.
   Full-bleed map; everything floats: the system card top-left
   with its step rail, ＋PANELS on the map, a fill toolbar
   bottom-left, the 2D/3D/Earth pill bottom-centre. Charcoal
   cards, yellow actions, cyan accents, Clash Display headers.
   ============================================================ */
.ss-stage{ position:relative; flex:1; min-height:0; display:flex; }
.ss-stage #ss-map{ position:absolute; inset:0; }
/* the floating system card */
.ss-syscard{ position:absolute; top:14px; left:14px; z-index:8; width:340px; max-height:calc(100% - 90px);
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(13,15,19,.94); backdrop-filter:blur(10px); border:1px solid #23262c;
  border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,.45); color:#f5f6f8; }
.ss-syscard.ss-shut .ss-stats, .ss-syscard.ss-shut .ss-cardmain{ display:none; }
.ss-cardhead{ display:flex; align-items:center; gap:9px; padding:11px 12px 9px; }
.ss-cardhead b{ font-family:var(--font-display,'Clash Display'); font-size:16.5px; flex:1; }
.ss-mini{ min-width:30px; min-height:30px; border:1px solid #2a2d33; background:#14161b; color:#f5f6f8;
  border-radius:8px; cursor:pointer; font-size:14px; }
.ss-stats{ display:flex; gap:12px; padding:0 14px 10px; font-size:11px; color:#9aa1ab;
  border-bottom:1px solid #23262c; flex-wrap:wrap; }
.ss-stats b{ color:#ffdd33; font-size:13px; font-variant-numeric:tabular-nums; }
.ss-cardmain{ display:flex; min-height:0; flex:1; }
.ss-rail{ display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-right:1px solid #23262c; }
.ss-railbtn{ position:relative; width:42px; height:42px; border:none; background:none; color:#9aa1ab;
  border-radius:10px; cursor:pointer; font-size:16px; }
.ss-railbtn.on{ background:#1b1e24; color:#ffdd33; box-shadow:inset 0 0 0 1px #2a2d33; }
.ss-railbtn em{ position:absolute; right:2px; top:2px; font-style:normal; font-size:9px; color:#3fe3ff; }
.ss-cardbody{ flex:1; min-width:0; padding:12px 14px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.ss-grouph{ font-family:var(--font-display,'Clash Display'); font-size:15px; margin:0; }
.ss-dims{ font-size:11.5px; color:#9aa1ab; margin:0; }
.ss-f{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#9aa1ab; }
.ss-f select, .ss-f input{ min-height:36px; font-size:12.5px; background:#14161b; color:#f5f6f8;
  border:1px solid #2a2d33; border-radius:9px; padding:0 9px; }
.ss-lab{ font-size:11px; font-weight:700; color:#9aa1ab; margin-top:2px; }
.ss-rack{ display:flex; gap:6px; }
.ss-rack button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px;
  border:1px solid #2a2d33; border-radius:10px; background:#14161b; color:#f5f6f8; cursor:pointer; font-size:15px; }
.ss-rack button span{ font-size:10px; color:#9aa1ab; }
.ss-rack button.on{ border-color:#ffdd33; box-shadow:inset 0 0 0 1px #ffdd33; }
.ss-rack button:disabled{ opacity:.4; cursor:default; }
.ss-two{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ss-radio{ display:flex; gap:14px; font-size:12.5px; }
.ss-radio label{ display:flex; flex-direction:row; align-items:center; gap:6px; }
.ss-shade{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:#9aa1ab;
  border:1px dashed #2a2d33; border-radius:9px; padding:7px 9px; }
.ss-shade b{ color:#3fe3ff; }
.ss-hint{ font-size:11px; color:#8a9098; margin:0; line-height:1.5; }
.ss-backrow{ display:block; width:100%; text-align:left; padding:11px 14px; border:none; background:none;
  color:#3fe3ff; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.ss-groups{ display:flex; gap:6px; flex-wrap:wrap; }
.ss-gchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #2a2d33;
  border-radius:999px; font-size:12px; cursor:pointer; background:#14161b; }
.ss-gchip.on{ border-color:#ffdd33; }
.ss-gchip button{ border:none; background:none; color:#9aa1ab; cursor:pointer; font-size:11px; }
.ss-auto{ border-top:1px dashed #2a2d33; padding-top:8px; display:flex; flex-direction:column; gap:6px; }
.ss-auto i{ font-style:normal; font-size:9.5px; color:#9aa1ab; border:1px solid #2a2d33; border-radius:999px; padding:1px 6px; }
.ss-next{ margin-top:auto; min-height:42px; border:none; border-radius:11px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:800; background:#ffdd33; color:#0b0c0e; }
/* ＋PANELS on the map (their signature, our yellow) */
.ss-addbar{ position:absolute; top:14px; left:370px; z-index:7; display:flex; gap:8px; align-items:center; }
.ss-addpanels{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:58px; height:58px; border:none; border-radius:12px; cursor:pointer;
  background:#ffdd33; color:#0b0c0e; font-weight:800; font-size:20px; line-height:1;
  box-shadow:0 8px 22px rgba(255,221,51,.25); }
.ss-addpanels span{ font-size:8.5px; letter-spacing:.08em; }
.ss-modchip{ background:rgba(13,15,19,.92); border:1px solid #23262c; color:#f5f6f8;
  border-radius:10px; padding:9px 12px; font-size:12px; font-weight:700; }
.ss-orient{ background:rgba(13,15,19,.92); border:1px solid #23262c; color:#f5f6f8;
  border-radius:10px; padding:9px 12px; font-size:12px; cursor:pointer; }
/* tools popover top-right */
.ss-topright{ position:absolute; top:14px; right:14px; z-index:8; }
.ss-mapbtn{ background:rgba(13,15,19,.92); border:1px solid #23262c; color:#f5f6f8;
  border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
.ss-toolpop{ position:absolute; right:0; top:46px; background:rgba(13,15,19,.96); border:1px solid #23262c;
  border-radius:12px; padding:6px; display:flex; flex-direction:column; gap:2px; min-width:180px;
  box-shadow:0 14px 36px rgba(0,0,0,.5); }
.ss-toolpop button{ text-align:left; border:none; background:none; color:#f5f6f8; font:inherit;
  font-size:12.5px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.ss-toolpop button:hover{ background:#1b1e24; }
/* fill toolbar bottom-left (their Fill Rectangle / Fill Facet / Duplicate) */
.ss-fillbar{ position:absolute; left:14px; bottom:18px; z-index:7; display:flex; gap:6px; }
.ss-fillbar button{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:74px;
  padding:9px 8px; border:1px solid #23262c; border-radius:12px; cursor:pointer;
  background:rgba(13,15,19,.92); color:#f5f6f8; font-size:15px; }
.ss-fillbar button span{ font-size:9.5px; color:#9aa1ab; letter-spacing:.02em; }
.ss-fillbar button:hover{ border-color:#ffdd33; }
#ss-earth{ position:absolute; inset:0; z-index:5; display:none; background:#0d0f13; }
@media (max-width:860px){
  .ss-syscard{ width:min(320px, calc(100% - 28px)); }
  .ss-addbar{ top:auto; bottom:78px; left:14px; }
  .ss-fillbar{ display:none; }
}
/* v473 — ＋PANELS at full volume (an app-level button rule was washing it out) */
.ss-stage .ss-addpanels{ background:#ffdd33 !important; color:#0b0c0e !important; border:none !important;
  opacity:1 !important; box-shadow:0 8px 22px rgba(255,221,51,.35) !important; z-index:9; }
.ss-stage .ss-addpanels span{ color:#0b0c0e !important; }
.ss-addbar{ z-index:9; }

/* ===== v477 — SOLAR AI: the analyse surveyor + the datasheet library ===== */
.ss-aibtn{ background:linear-gradient(100deg,#ffdd33,#3fe3ff)!important; color:#08090b!important; font-weight:800!important; border:none!important; }
#sai-overlay{ position:absolute; inset:0; z-index:60; background:rgba(8,9,11,.55); display:flex; align-items:center; justify-content:center; padding:18px; }
.sai-card{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:16px; width:min(560px,94vw); max-height:82vh; overflow:auto; padding:16px 18px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.sai-card .ss-hint{ color:#9aa1ab; font-size:12.5px; line-height:1.45; }
.sai-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.sai-head b{ font-family:'Clash Display',Inter,sans-serif; font-size:17px; }
.sai-upload{ display:flex; flex-direction:row!important; align-items:center; justify-content:center; gap:8px; background:#ffdd33; color:#08090b; font-weight:800; border-radius:12px; padding:12px; cursor:pointer; margin:10px 0 6px; min-height:44px; }
.sai-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.sai-row{ display:flex; align-items:center; gap:10px; background:#12151b; border:1px solid #23262d; border-radius:10px; padding:8px 10px; }
.sai-row-l{ display:flex; flex-direction:column; min-width:0; flex:1; }
.sai-row-l b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sai-row-l span:last-child{ color:#9aa1ab; font-size:11.5px; }
.sai-report{ font-size:13.5px; line-height:1.55; }
.sai-report .sai-h{ display:block; margin-top:12px; color:#ffdd33; font-family:'Clash Display',Inter,sans-serif; letter-spacing:.4px; }
.sai-report .sai-h:first-child{ margin-top:2px; }
.sai-shadechips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
#sai-overlay .ma-filex{ min-width:32px; }

/* ===== v478 — mounting BOM + strings + sun path ===== */
.ss-bom{ display:flex; flex-direction:column; gap:2px; margin:8px 0 4px; max-height:180px; overflow:auto; }
.ss-bomrow{ display:flex; align-items:baseline; gap:8px; font-size:12px; padding:3px 2px; border-bottom:1px dashed rgba(255,255,255,.08); }
.ss-bomrow span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-bomrow i{ font-style:normal; color:#9aa1ab; }
.ss-bomrow b{ font-variant-numeric:tabular-nums; }
.ss-strings{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ss-warn{ color:#ffb24d!important; }

/* ===== v479 — shade table + tariffs + proposal ===== */
.shd-headline{ display:flex; align-items:baseline; gap:10px; margin:4px 0 10px; }
.shd-headline b{ font-family:'Clash Display',Inter,sans-serif; font-size:30px; color:#ffdd33; }
.shd-headline span{ color:#9aa1ab; font-size:12px; }
#sai-overlay .shd-wrap{ overflow-x:auto; }
#sai-overlay .shd-table{ border-collapse:collapse; font-size:10.5px; width:100%; color:#f5f6f8; }
#sai-overlay .shd-table th{ padding:3px 4px; color:#9aa1ab; font-weight:600; text-align:center; }
#sai-overlay .shd-table td{ padding:3px 4px; text-align:center; border:1px solid rgba(255,255,255,.06); min-width:21px; font-variant-numeric:tabular-nums; }
#sai-overlay .shd-night{ color:#3a3f47; }
#sai-overlay .shd-sum{ font-weight:700; background:rgba(255,255,255,.05); }
.ss-tarif{ margin-top:8px; border-top:1px dashed rgba(255,255,255,.14); padding-top:6px; }
.ss-tarif-save b{ color:#ffdd33; }
.ss-tarif i{ font-style:normal; font-size:10.5px; color:#9aa1ab; }
.ss-proposal{ margin-top:8px; background:linear-gradient(100deg,#ffdd33,#3fe3ff)!important; color:#08090b!important; }

/* ===== v480 — the pro layer: inline prices, SLD, structural, compare, rotate ===== */
.ss-inprice{ display:flex; align-items:center; gap:5px; margin:2px 0 8px; }
.ss-inprice span{ color:#9aa1ab; font-weight:700; }
.ss-inprice input{ width:84px; background:#12151b; border:1px solid #23262d; border-radius:8px; color:#f5f6f8; padding:6px 8px; font-size:13px; }
.ss-inprice button{ background:none; border:1px solid #23262d; border-radius:8px; color:#5a616c; min-width:34px; min-height:32px; cursor:pointer; font-size:15px; }
.ss-inprice button.on{ color:#ffdd33; border-color:#ffdd33; }
.ss-rotpill{ display:inline-flex; background:rgba(13,15,19,.92); border:1px solid #23262d; border-radius:12px; overflow:hidden; }
.ss-rotpill button{ background:none; border:0; color:#f5f6f8; min-width:38px; min-height:40px; cursor:pointer; font-size:15px; }
.ss-rotpill button:hover{ background:rgba(255,255,255,.08); }
#ss-north{ font-size:11px; font-weight:800; }
.ss-mile{ display:flex; gap:6px; align-items:center; margin:3px 0; }
.ss-mile input[type=number]{ width:58px; background:#12151b; border:1px solid #23262d; border-radius:8px; color:#f5f6f8; padding:6px; }
.ss-mile input[type=text]{ flex:1; background:#12151b; border:1px solid #23262d; border-radius:8px; color:#f5f6f8; padding:6px 8px; font-size:12px; }
.ss-mile span{ color:#9aa1ab; }
.ss-sld svg{ width:100%; height:auto; color:#f5f6f8; }
.ss-struct{ width:100%; border-collapse:collapse; font-size:12.5px; color:#f5f6f8; }
.ss-struct td{ padding:7px 6px; border-bottom:1px solid rgba(255,255,255,.09); }
.ss-struct td.ok{ color:#35d07f; font-weight:800; } .ss-struct td.bad{ color:#ff8080; font-weight:800; }
.ss-cmp{ overflow-x:auto; } .ss-cmp table{ border-collapse:collapse; font-size:12.5px; color:#f5f6f8; min-width:100%; }
.ss-cmp th, .ss-cmp td{ padding:7px 9px; border-bottom:1px solid rgba(255,255,255,.09); text-align:left; white-space:nowrap; }
.ss-cmp th{ color:#ffdd33; font-family:'Clash Display',Inter,sans-serif; }
.ss-proprow{ display:flex; gap:6px; margin-top:6px; }
.ss-proprow button{ flex:1; background:#12151b; border:1px solid #23262d; border-radius:10px; color:#f5f6f8; min-height:38px; cursor:pointer; font-size:12px; }
.ss-proprow button:hover{ border-color:#3fe3ff; }

/* ===== v482 — property intake + roof vision ===== */
.si-q{ margin:8px 0; } .si-q>span{ display:block; font-size:11.5px; color:#9aa1ab; margin-bottom:4px; }
.si-q>span i{ font-style:normal; opacity:.7; } .si-q>div{ display:flex; flex-wrap:wrap; gap:6px; }
.si-chip{ background:#12151b; border:1px solid #23262d; border-radius:999px; color:#f5f6f8; padding:8px 13px; font-size:12.5px; cursor:pointer; min-height:36px; }
.si-chip.on{ background:#ffdd33; color:#08090b; border-color:#ffdd33; font-weight:800; }

/* ===== v546 — whose roof is it: per-face theirs/not-theirs on the measure ===== */
.sm-warn{ background:rgba(255,128,128,.10); border:1px solid rgba(255,128,128,.45); border-left:3px solid #ff8080;
  border-radius:10px; padding:10px 12px; margin:2px 0 10px; font-size:12.5px; line-height:1.5; color:#f5f6f8; }
.sm-warn b{ display:block; color:#ff8080; font-family:'Clash Display',Inter,sans-serif; font-size:13.5px; margin-bottom:3px; }
.sm-drop{ margin:-6px 0 8px; color:#9aa1ab; }
.sm-tog{ background:#12151b; border:1px solid #3a3f47; border-radius:999px; color:#9aa1ab;
  padding:6px 11px; font-size:11.5px; font-weight:700; cursor:pointer; min-height:30px; white-space:nowrap; }
.sm-tog.on{ background:rgba(53,208,127,.14); border-color:rgba(53,208,127,.55); color:#35d07f; }
.sm-tog:hover{ border-color:#3fe3ff; }
.ss-cmp tr.sm-off td{ opacity:.42; } .ss-cmp tr.sm-off td:first-child{ opacity:1; }

/* ===== v485 — locate-first ===== */
.ss-locating .ss-syscard, .ss-locating .ss-addbar, .ss-locating .ss-fillbar,
.ss-locating .ss-topright, .ss-locating .ss-viewpill{ display:none!important; }
#ss-locate{ position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:30;
  background:rgba(13,15,19,.94); border:1px solid #23262d; border-radius:14px; padding:12px 16px;
  display:flex; flex-direction:column; gap:6px; max-width:min(440px,92%); color:#f5f6f8; box-shadow:0 14px 40px rgba(0,0,0,.45); }
#ss-locate b{ font-family:'Clash Display',Inter,sans-serif; font-size:15px; }
#ss-locate span{ font-size:12px; color:#9aa1ab; line-height:1.45; }
#ss-locate button{ border:0; border-radius:10px; min-height:40px; cursor:pointer; font-weight:700; font-size:13px; }
#ss-locate .sl-yes{ background:#ffdd33; color:#08090b; }
#ss-locate .sl-skip{ background:#12151b; color:#f5f6f8; border:1px solid #3a3f47; }

/* ===== v488 — HQ desk, upsell wall (desktop only), account switcher polish ===== */
#sq-wall{ position:fixed; inset:0; z-index:10001; background:rgba(8,9,11,.7); display:flex; align-items:center; justify-content:center; padding:20px; }
.sqw-card{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:20px; padding:34px 36px; max-width:420px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.sqw-badge{ font-size:34px; margin-bottom:10px; }
.sqw-card h2{ font-family:'Clash Display',Inter,sans-serif; font-size:21px; margin-bottom:8px; }
.sqw-card p{ color:#9aa1ab; font-size:13.5px; }
.sqw-price{ font-family:'Clash Display',Inter,sans-serif; font-size:32px; color:#ffdd33!important; margin:12px 0 2px; }
.sqw-sub{ margin-bottom:16px; }
.sqw-card button{ background:#12151b; border:1px solid #3a3f47; border-radius:12px; color:#f5f6f8; min-height:44px; padding:0 22px; cursor:pointer; font-weight:700; }
#hq-desk{ position:fixed; inset:0; z-index:10000; background:rgba(8,9,11,.72); display:flex; align-items:center; justify-content:center; padding:18px; }
.hq-card{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:20px; width:min(640px,96vw); max-height:88vh; overflow:auto; padding:18px 20px; box-shadow:0 30px 70px rgba(0,0,0,.55); }
.hq-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hq-logo{ font-family:'Clash Display',Inter,sans-serif; font-weight:700; letter-spacing:.5px; }
.hq-logo em{ font-style:normal; color:#ffdd33; } .hq-logo span{ font-size:11px; color:#3fe3ff; letter-spacing:.3em; margin-left:6px; }
.hq-back{ background:none; border:1px solid #3a3f47; border-radius:10px; color:#f5f6f8; min-height:38px; padding:0 14px; cursor:pointer; }
.hq-tabs{ display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.hq-tabs button{ background:#12151b; border:1px solid #23262d; border-radius:999px; color:#9aa1ab; min-height:38px; padding:0 15px; cursor:pointer; font-size:12.5px; font-weight:700; }
.hq-tabs button.on{ background:#ffdd33; color:#08090b; border-color:#ffdd33; }
.hq-hint{ color:#9aa1ab; font-size:12.5px; line-height:1.5; margin:6px 0 10px; }
.hq-row{ display:flex; align-items:center; gap:10px; background:#12151b; border:1px solid #23262d; border-radius:12px; padding:10px 12px; margin:6px 0; }
.hq-row span i{ font-style:normal; color:#9aa1ab; font-size:11.5px; } .hq-row>span:first-child{ flex:1; min-width:0; }
.hq-row input{ background:#0d0f13; border:1px solid #23262d; border-radius:10px; color:#f5f6f8; padding:10px 12px; }
.hq-acts{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.hq-acts button{ background:#0d0f13; border:1px solid #3a3f47; border-radius:9px; color:#f5f6f8; min-height:36px; padding:0 12px; cursor:pointer; font-size:12px; }
.hq-acts .hq-arch{ color:#ff8080; border-color:#5a2a2a; }
.hq-cta{ display:block; width:100%; margin-top:10px; background:#ffdd33; border:0; border-radius:12px; color:#08090b; min-height:44px; cursor:pointer; font-weight:800; }

/* ===== v491 — HQ as a full dashboard + the ⇄ switch + the dock ===== */
#hq-desk{ position:fixed; inset:0; z-index:10000; background:#08090b; display:block; padding:0; }
.hq-page{ width:100%; height:100%; overflow:auto; padding:22px clamp(16px,4vw,48px) 48px; }
.hq-page .hq-head{ max-width:1060px; margin:0 auto 6px; display:flex; align-items:center; justify-content:space-between; }
.hq-page .hq-logo{ font-size:22px; }
.hq-headr{ display:flex; gap:8px; }
.hq-switch{ background:#ffdd33; border:0; border-radius:11px; color:#08090b; min-height:40px; padding:0 16px; cursor:pointer; font-weight:800; font-size:13px; }
.hq-page .hq-tabs{ max-width:1060px; margin:14px auto 18px; }
.hq-page .hq-tabs button{ min-height:44px; padding:0 20px; font-size:13.5px; }
.hq-page .hq-body{ max-width:1060px; margin:0 auto; }
.hq-page .hq-row{ padding:13px 16px; border-radius:14px; }
#hq-dock{ position:fixed; right:18px; bottom:18px; z-index:9999; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); border:0; font-size:22px; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.45); }

/* ===== v493 — HQ org wears a CRM, not a job manager ===== */
body.hq-org [data-view="jobs"], body.hq-org [data-view="calendar"], body.hq-org [data-view="certs"],
body.hq-org [data-view="compliance"], body.hq-org [data-view="contracts"], body.hq-org [data-view="costs"],
body.hq-org [data-view="desk"], body.hq-org [data-view="engday"], body.hq-org [data-view="kits"],
body.hq-org [data-view="materials"], body.hq-org [data-view="quote"], body.hq-org [data-view="team"]{ display:none!important; }

/* ===== v495 — HQ desk as real pages + the sales pipeline ===== */
#view-hqdesk .hq-back{ display:none; }
#view-hqdesk .hq-page{ height:auto; padding:6px 0 40px; background:none; }
#view-hqdesk .hq-head .hq-logo{ font-size:19px; }
.hql{ max-width:1060px; margin:0 auto; padding:6px 0 40px; }
.hql-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.hql-top h1{ font-family:'Clash Display',Inter,sans-serif; font-size:24px; }
.hql-new{ background:#ffdd33; border:0; border-radius:12px; color:#08090b; min-height:44px; padding:0 20px; font-weight:800; cursor:pointer; }
.hql-due{ background:rgba(255,221,51,.12); border:1px solid #ffdd33; border-radius:12px; padding:10px 14px; font-size:13px; margin-bottom:10px; }
.hql-stages{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.hql-stages button{ background:var(--panel,#12151b); border:1px solid #23262d; border-radius:999px; color:inherit; min-height:38px; padding:0 13px; cursor:pointer; font-size:12px; font-weight:700; opacity:.85; }
.hql-stages button b{ opacity:.6; margin-left:3px; }
.hql-stages button.on{ background:#ffdd33; color:#08090b; border-color:#ffdd33; opacity:1; }
.hql-card{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.18); border-radius:14px; margin:7px 0; overflow:hidden; }
.hql-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; }
.hql-who{ flex:1 1 auto; min-width:100px; display:flex; flex-direction:column; }
.hql-who span{ font-size:12px; opacity:.65; }
.hql-chips{ display:flex; gap:5px; flex-wrap:wrap; }
.hql-chips i{ font-style:normal; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(63,227,255,.14); }
.hql-chips .hql-demo{ background:rgba(14,154,88,.16); }
.hql-chips .hql-dnd{ background:rgba(255,92,92,.16); }
.hql-chips .hql-fu.due{ background:rgba(255,221,51,.3); }
.hql-stage{ flex:0 0 auto; width:150px; max-width:42%; min-height:38px; border-radius:10px; border:1px solid rgba(127,127,127,.3); padding:0 8px; font-size:12px; background:inherit; color:inherit; }
.hql-detail{ padding:4px 14px 14px; border-top:1px dashed rgba(127,127,127,.25); }
.hql-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 12px; margin:10px 0; }
.hql-grid label, .hql-notes{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; opacity:.9; }
.hql-grid .wide{ grid-column:1/-1; }
.hql-grid input, .hql-grid select, .hql-notes textarea{ min-height:38px; border-radius:9px; border:1px solid rgba(127,127,127,.3); padding:6px 9px; font:inherit; font-size:13px; background:inherit; color:inherit; }
.hql-notes{ margin:8px 0; }
.hql-flags{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; }
.hql-flags label{ display:flex; align-items:center; gap:6px; flex-direction:row; cursor:pointer; }
.hql-act{ text-decoration:none; font-weight:700; padding:8px 12px; border-radius:9px; border:1px solid rgba(127,127,127,.3); color:inherit; }
.hql-del{ background:none; border:1px solid rgba(255,92,92,.5); color:#c33; border-radius:9px; min-height:36px; padding:0 12px; cursor:pointer; }
.hql-empty{ opacity:.6; padding:26px; text-align:center; }

/* ===== v496 — leads vs customers: two machines, filters, mass email ===== */
.hql-tabs{ display:flex; gap:6px; }
.hql-tabs button{ background:var(--panel,#12151b); border:1px solid rgba(127,127,127,.25); border-radius:12px; color:inherit; min-height:44px; padding:0 18px; cursor:pointer; font-weight:800; font-size:13.5px; }
.hql-tabs button.on{ background:#ffdd33; color:#08090b; border-color:#ffdd33; }
.hql-tabs button b{ opacity:.6; }
.hql-filters{ display:flex; gap:7px; flex-wrap:wrap; margin:4px 0 12px; }
.hql-filters input, .hql-filters select{ min-height:40px; border-radius:10px; border:1px solid rgba(127,127,127,.3); padding:0 10px; font:inherit; font-size:13px; background:inherit; color:inherit; }
.hql-filters input:first-child{ flex:1; min-width:180px; }
.hql-mass{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); border:0; border-radius:10px; color:#08090b; min-height:40px; padding:0 15px; font-weight:800; cursor:pointer; }
.hql-mrrbar{ display:flex; align-items:baseline; gap:8px; margin:2px 0 10px; }
.hql-mrrbar b{ font-family:'Clash Display',Inter,sans-serif; font-size:28px; color:#0d9c6b; }
.hql-mrrbar span{ font-size:12px; opacity:.65; }
.hql-chips .hql-plan{ background:rgba(255,221,51,.25); }
.hql-chips .hql-mrr{ background:rgba(13,156,107,.16); }
.hql-chips .hql-stat.paused{ background:rgba(255,178,77,.25); }
.hql-chips .hql-stat.cancelled{ background:rgba(255,92,92,.2); }
.hql-win{ background:#0d9c6b; border:0; border-radius:9px; color:#fff; min-height:36px; padding:0 14px; font-weight:800; cursor:pointer; }

/* ===== v497 — HQ: zero job traces; AI runs from the master worker ===== */
body.hq-org #jobtemplates-panel, body.hq-org #jobtemplates-settings{ display:none!important; }

/* ===== v500 — HQ purge complete + dashboard ===== */
body.hq-org [data-view="customers"], body.hq-org [data-view="money"]{ display:none!important; }
.hqd-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:10px 0 14px; }
.hqd-stats button{ background:var(--panel,#12151b); border:1px solid rgba(127,127,127,.2); border-radius:16px; padding:18px 14px; cursor:pointer; text-align:left; color:inherit; }
.hqd-stats b{ display:block; font-family:'Clash Display',Inter,sans-serif; font-size:30px; color:#ffdd33; }
.hqd-stats span{ font-size:11.5px; opacity:.65; }
.hqd-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.hqd-quick button{ background:var(--panel,#12151b); border:1px solid rgba(127,127,127,.25); border-radius:12px; color:inherit; min-height:46px; padding:0 18px; cursor:pointer; font-weight:700; font-size:13px; }
.hqd-quick button:hover{ border-color:#3fe3ff; }

/* ===== v501 — punch list: contrast, page chrome, stages ===== */
#view-hqdesk .hq-page{ background:#0d0f13; color:#f5f6f8; border-radius:20px; margin:10px auto; max-width:1080px; padding:20px clamp(14px,3vw,34px) 34px; height:auto; }
#view-hqdesk .hq-tabs, #view-hqdesk .hq-back{ display:none!important; }
#view-hqdesk .hq-row, #view-hqdesk .hq-row strong{ color:#f5f6f8; }
#view-hqdesk .hq-hint{ color:#9aa1ab; }
#view-hqdesk .hq-row input, #view-hqdesk .hq-row select{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:9px; padding:8px 10px; }
body.hq-org [data-view="journeys"], body.hq-org [data-view="convos"]{ display:none!important; }
.hql-stages button[title]{ user-select:none; }

/* ===== v503 — Outlook-shaped HQ inbox + rich composer ===== */
.hqi-wrap{ display:grid; grid-template-columns:300px 1fr; gap:12px; align-items:start; }
.hqi-list{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.18); border-radius:14px; overflow:hidden; max-height:72vh; overflow-y:auto; }
.hqi-item{ display:flex; gap:10px; align-items:center; padding:11px 12px; cursor:pointer; border-bottom:1px solid rgba(127,127,127,.12); }
.hqi-item.on{ box-shadow:inset 3px 0 0 #ffdd33; background:rgba(255,221,51,.07); }
.hqi-item.unread strong{ font-weight:800; }
.hqi-item.unread .hqi-ava{ box-shadow:0 0 0 2px #3fe3ff; }
.hqi-ava{ width:34px; height:34px; border-radius:50%; background:#16181d; color:#ffdd33; display:flex; align-items:center; justify-content:center; font-weight:800; flex:none; }
.hqi-mid{ flex:1; min-width:0; display:flex; flex-direction:column; }
.hqi-mid span{ font-size:11.5px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hqi-item time{ font-size:10.5px; opacity:.55; }
.hqi-pane{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.18); border-radius:14px; padding:14px 16px; min-height:420px; }
.hqi-th-head{ display:flex; gap:10px; align-items:baseline; border-bottom:1px solid rgba(127,127,127,.15); padding-bottom:9px; margin-bottom:10px; }
.hqi-th-head span{ font-size:12px; opacity:.55; flex:1; }
.hqi-msgs{ display:flex; flex-direction:column; gap:10px; max-height:52vh; overflow-y:auto; }
.hqi-msg{ border:1px solid rgba(127,127,127,.16); border-radius:12px; padding:10px 12px; }
.hqi-msg.out{ border-color:rgba(255,221,51,.5); background:rgba(255,221,51,.06); }
.hqi-msg-head{ display:flex; gap:8px; align-items:baseline; font-size:12px; margin-bottom:6px; }
.hqi-msg-head span{ flex:1; opacity:.6; } .hqi-msg-head time{ opacity:.5; font-size:10.5px; }
.hqi-msg pre{ white-space:pre-wrap; font:inherit; margin:0; }
.hqi-replybar{ margin-top:10px; }
.hqc-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.hqc-row{ display:flex; gap:10px; align-items:center; border-bottom:1px solid rgba(127,127,127,.14); padding:6px 0; }
.hqc-row span{ width:52px; font-size:12px; opacity:.6; text-align:right; }
.hqc-row b{ font-size:13px; }
.hqc-row input{ flex:1; border:0; background:none; font:inherit; color:inherit; outline:none; padding:4px 6px; }
.hqc-bar{ display:flex; gap:3px; flex-wrap:wrap; padding:8px 0 6px; }
.hqc-bar button, .hqc-bar select{ min-width:30px; min-height:30px; border:1px solid rgba(127,127,127,.25); background:none; border-radius:7px; cursor:pointer; font-size:12.5px; color:inherit; display:inline-flex; align-items:center; justify-content:center; }
.hqc-editor{ min-height:220px; border:1.5px solid #3fe3ff; border-radius:12px; padding:12px 14px; margin-top:4px; outline:none; background:#fff; color:#16181d; }
@media (max-width:900px){ .hqi-wrap{ grid-template-columns:1fr; } }

/* ===== v504 — contrast + lead fab ===== */
#view-hqdesk .hq-cta{ color:#08090b!important; }
#hq-leadfab{ position:fixed; right:20px; bottom:20px; z-index:9998; width:56px; height:56px; border-radius:50%;
  background:#ffdd33; color:#08090b; border:0; font-size:26px; font-weight:800; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.35); }

/* ===== v505 — THE SALES MACHINE: board, agents, automations ===== */
.hqb-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:6px 0 12px; }
.hqb-stats>div{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.18); border-radius:14px; padding:12px 14px; border-top:3px solid #3fe3ff; }
.hqb-stats>div.warn{ border-top-color:#ff5c5c; }
.hqb-stats span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.12em; opacity:.55; }
.hqb-stats b{ font-family:'Clash Display',Inter,sans-serif; font-size:24px; }
.hqb-stats i{ font-style:normal; font-size:10.5px; opacity:.5; margin-left:4px; }
.hqb-board{ display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding-bottom:14px; }
.hqb-col{ min-width:270px; width:270px; background:rgba(127,127,127,.06); border:1px solid rgba(127,127,127,.14); border-radius:14px; padding:8px; }
.hqb-colhead{ display:flex; align-items:baseline; gap:7px; padding:4px 6px 8px; cursor:default; user-select:none; }
.hqb-colhead b{ font-size:13px; } .hqb-colhead span{ background:rgba(127,127,127,.18); border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800; }
.hqb-colhead i{ font-style:normal; margin-left:auto; font-size:11px; opacity:.55; font-variant-numeric:tabular-nums; }
.hqb-cards{ display:flex; flex-direction:column; gap:8px; min-height:60px; }
.hqb-card{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.2); border-radius:12px; padding:10px 11px; cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.hqb-card:active{ cursor:grabbing; }
.hqb-card strong{ font-size:13px; display:block; }
.hqb-co{ font-size:11px; opacity:.6; display:block; }
.hqb-chips{ display:flex; gap:4px; flex-wrap:wrap; margin:5px 0; }
.hqb-chips i{ font-style:normal; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(63,227,255,.14); }
.hqb-chips i.ok{ background:rgba(14,154,88,.16); } .hqb-chips i.bad{ background:rgba(255,92,92,.18); }
.hqb-foot{ display:flex; align-items:center; gap:7px; font-size:11px; }
.hqb-foot b{ font-variant-numeric:tabular-nums; }
.hqb-foot i{ font-style:normal; opacity:.7; } .hqb-foot i.due{ color:#c77700; font-weight:800; opacity:1; }
.hqb-qa{ margin-left:auto; display:flex; gap:6px; } .hqb-qa a{ text-decoration:none; opacity:.75; } .hqb-qa a:hover{ opacity:1; }
.hqb-auto{ font-size:10px; opacity:.55; margin-top:4px; }
.hqb-empty{ font-size:11px; opacity:.4; text-align:center; padding:16px 0; }
.hqb-addstage{ min-width:44px; height:44px; border-radius:12px; border:1.5px dashed rgba(127,127,127,.4); background:none; font-size:19px; cursor:pointer; color:inherit; }
.hqa-chat{ max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.hqa-m{ padding:9px 12px; border-radius:12px; font-size:13px; white-space:pre-wrap; max-width:85%; }
.hqa-m.you{ align-self:flex-end; background:#ffdd33; color:#08090b; }
.hqa-m.bot{ align-self:flex-start; background:rgba(127,127,127,.12); }

/* ===== v506 — overlap fixes + nuclear button contrast ===== */
#hq-dock{ bottom:20px; }
#hq-leadfab{ bottom:88px; }   /* the two floaters stack, never overlap */
.hqb-board{ position:relative; z-index:1; margin-top:4px; }
.hqb-stats{ position:relative; z-index:2; }
.hql-filters{ position:relative; z-index:2; }
.hql{ overflow:visible; }
#view-hqdesk .hq-cta, .hq-cta{ background:#ffdd33!important; color:#08090b!important; border:0!important; }
.hq-cta.cyan{ background:#3fe3ff!important; }
.hq-cta.paper{ background:#f5f6f8!important; }
body.hq-org [data-view="marketing"]{ display:none!important; }  /* old trade marketing page — its gw settings live in HQ Settings now */

/* ===== v506 — the texts lane ===== */
.hqt-phone{ background:#f4f4f6; border-radius:18px; padding:14px; min-height:420px; display:flex; flex-direction:column; }
.hqt-msgs{ flex:1; display:flex; flex-direction:column; gap:8px; justify-content:flex-end; overflow-y:auto; max-height:52vh; }
.hqt-bub{ align-self:flex-end; max-width:75%; background:#1d84ff; color:#fff; border-radius:16px 16px 4px 16px; padding:9px 13px; }
.hqt-bub p{ margin:0; font-size:13.5px; line-height:1.4; }
.hqt-bub span{ display:block; font-size:9.5px; opacity:.75; margin-top:3px; text-align:right; }
.hqt-bar{ display:flex; gap:7px; margin-top:12px; }
.hqt-bar input, .hqt-bar select{ min-height:42px; border-radius:12px; border:1px solid rgba(127,127,127,.3); padding:0 11px; font:inherit; background:#fff; color:#16181d; }

/* ===== v507 — HOME: the command centre ===== */
.hqd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:12px; margin:8px 0 14px; }
.hqd-card{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.16); border-radius:16px; padding:14px 16px; }
.hqd-card:hover{ border-color:#3fe3ff; }
.hqd-cardh{ font-size:10.5px; font-weight:800; letter-spacing:.14em; opacity:.55; margin-bottom:8px; }
.hqd-bigrow{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:8px; }
.hqd-big b{ display:block; font-family:'Clash Display',Inter,sans-serif; font-size:26px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.hqd-big.gold b{ color:#c79a00; } .hqd-big.green b{ color:#0d9c6b; } .hqd-big.red b{ color:#c0392b; }
.hqd-big span{ font-size:10.5px; opacity:.55; }
.hqd-plans{ display:flex; gap:8px; flex-wrap:wrap; font-size:11.5px; opacity:.85; }
.hqd-plans span{ background:rgba(127,127,127,.1); border-radius:999px; padding:4px 10px; }
.hqd-plans b{ font-weight:800; }
.hqd-alert{ margin-top:8px; font-size:11.5px; font-weight:700; color:#c0392b; }
.hqd-ok{ margin-top:8px; font-size:11.5px; color:#0d9c6b; }
.hqd-bars{ display:flex; gap:6px; align-items:flex-end; margin-top:6px; }
.hqd-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; }
.hqd-bar i{ display:block; width:100%; max-width:34px; background:#ffdd33; border-radius:5px 5px 0 0; }
.hqd-bar span{ font-weight:800; } .hqd-bar em{ font-style:normal; opacity:.5; font-size:8.5px; white-space:nowrap; }
.hqd-fun{ display:flex; align-items:center; gap:8px; margin:3px 0; font-size:11px; }
.hqd-fun span{ width:110px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hqd-fun i{ display:block; height:12px; background:linear-gradient(90deg,#ffdd33,#3fe3ff); border-radius:6px; min-width:4px; }
.hqd-fun b{ font-variant-numeric:tabular-nums; }

/* ===== v508 — account intelligence + managing mode ===== */
.hq-acct{ align-items:flex-start; }
.hq-acctchips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.hq-acctchips em{ font-style:normal; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:#c9cdd4; }
.hq-acctchips em.gold{ background:rgba(255,221,51,.18); color:#ffdd33; }
/* v829 -- health score badges. Colour AND the word ('healthy'/'at risk'/
   'critical') together, never colour alone -- same rule as .gold above.
   Reuses the Direction C status tokens so a green/amber/red badge here
   matches every other ok/pipe/bad chip in the app instead of inventing a
   fourth palette. */
.hq-acctchips em.health-green{ background:var(--c-ok-bg,rgba(5,150,105,.10)); color:var(--c-ok-ink,#04785C); }
.hq-acctchips em.health-amber{ background:var(--c-pipe-bg,rgba(232,163,0,.16)); color:var(--c-pipe-ink,#8A6800); }
.hq-acctchips em.health-red{ background:var(--c-bad-bg,rgba(179,55,46,.09)); color:var(--c-bad-ink,#B3372E); }
.hqd-plans em.health-green, .hqd-plans em.health-amber, .hqd-plans em.health-red{ font-style:normal; font-weight:800; padding:2px 8px; border-radius:999px; }
.hqd-plans em.health-green{ background:var(--c-ok-bg,rgba(5,150,105,.10)); color:var(--c-ok-ink,#04785C); }
.hqd-plans em.health-amber{ background:var(--c-pipe-bg,rgba(232,163,0,.16)); color:var(--c-pipe-ink,#8A6800); }
.hqd-plans em.health-red{ background:var(--c-bad-bg,rgba(179,55,46,.09)); color:var(--c-bad-ink,#B3372E); }
#hq-manage-bar{ position:fixed; top:0; left:0; right:0; z-index:9990; background:linear-gradient(100deg,#ffdd33,#3fe3ff); color:#08090b;
  display:flex; align-items:center; justify-content:center; gap:14px; padding:7px 12px; font-size:12.5px; font-weight:800; }
#hq-manage-bar button{ background:#08090b; color:#fff; border:0; border-radius:9px; min-height:30px; padding:0 14px; cursor:pointer; font-weight:800; font-size:12px; }
body.hq-managing{ padding-top:44px; }
#hq-helper-fab{ position:fixed; right:20px; bottom:20px; z-index:9995; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); border:0; font-size:24px; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.4); }
#hq-helper{ position:fixed; right:20px; bottom:86px; z-index:9996; width:min(400px,92vw); }
.hqh-card{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:18px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.hqh-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.hqh-head button{ background:none; border:0; color:#9aa1ab; font-size:15px; cursor:pointer; }
.hqh-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:8px; }
.hqh-chips button{ background:#12151b; border:1px solid #23262d; border-radius:999px; color:#f5f6f8; padding:6px 11px; font-size:11px; cursor:pointer; }
.hqh-bar{ display:flex; gap:6px; margin-top:8px; }
.hqh-bar input{ flex:1; min-height:38px; border-radius:10px; border:1px solid #23262d; background:#12151b; color:#f5f6f8; padding:0 11px; font:inherit; }
.hqh-bar button{ background:#ffdd33; border:0; border-radius:10px; color:#08090b; padding:0 16px; font-weight:800; cursor:pointer; }
.hqh-foot{ font-size:9.5px; opacity:.45; margin-top:6px; }

/* ===== v511 — client profile: dark cards on the charcoal HQ page (was white-on-white) ===== */
#view-hqdesk .hqd-card{ background:#12151b; border:1px solid #23262d; color:#f5f6f8; }
#view-hqdesk .hqd-cardh{ color:#3fe3ff; opacity:1; }
#view-hqdesk .hqd-card p{ color:#f5f6f8; }
#view-hqdesk .hqd-big b{ color:#ffdd33; }
#view-hqdesk .hqd-big span{ color:#9aa1ab; opacity:1; }
#view-hqdesk .hqd-plans span{ background:rgba(255,255,255,.07); color:#c9cdd4; }
#view-hqdesk .hqd-plans b{ color:#f5f6f8; }
#view-hqdesk .hqd-card pre{ color:#f5f6f8; }
#view-hqdesk .hq-hint{ color:#9aa1ab; }

/* ===== v512 — THE EMAIL STUDIO ===== */
.hqb{ max-width:1280px; margin:0 auto; }
.hqb-top{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.hqb-name{ font-family:'Clash Display',Inter,sans-serif; font-size:18px; font-weight:700; border:0; background:none; color:inherit; min-width:200px; }
.hqb-bars{ display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.hqb-subj{ flex:1; min-width:220px; min-height:40px; border-radius:10px; border:1px solid rgba(127,127,127,.3); padding:0 12px; font:inherit; font-size:14px; background:inherit; color:inherit; }
.hqb-bars select{ min-height:40px; border-radius:10px; border:1px solid rgba(127,127,127,.3); padding:0 10px; font:inherit; background:inherit; color:inherit; }
.hqb-ab{ display:flex; align-items:center; gap:5px; font-size:12.5px; }
.hqb-ai{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); border:0; border-radius:9px; color:#08090b; padding:8px 12px; font-weight:800; font-size:12px; cursor:pointer; }
.hqb-work{ display:grid; grid-template-columns:210px 1fr 260px; gap:12px; align-items:start; }
.hqb-palette{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.16); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; position:sticky; top:8px; }
.hqb-palh{ font-size:10px; font-weight:800; letter-spacing:.12em; opacity:.5; }
.hqb-palette>button{ text-align:left; background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.14); border-radius:9px; padding:8px 10px; cursor:pointer; font-size:12.5px; color:inherit; }
.hqb-palette>button:hover{ border-color:#3fe3ff; }
.hqb-f{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; opacity:.9; }
.hqb-f input, .hqb-f select, .hqb-f textarea{ min-height:34px; border-radius:8px; border:1px solid rgba(127,127,127,.3); padding:5px 8px; font:inherit; font-size:12.5px; background:inherit; color:inherit; }
.hqb-tags{ display:flex; gap:5px; flex-wrap:wrap; } .hqb-tags code{ background:rgba(63,227,255,.15); border-radius:6px; padding:3px 7px; font-size:11px; cursor:pointer; }
.hqb-spam{ margin-top:8px; border-radius:10px; padding:8px 10px; font-size:11px; display:flex; flex-direction:column; gap:2px; }
.hqb-spam.ok{ background:rgba(14,154,88,.12); } .hqb-spam.warn{ background:rgba(255,178,77,.15); } .hqb-spam.bad{ background:rgba(255,92,92,.15); }
.hqb-spam b{ font-size:11.5px; }
.hqb-canvas{ background:rgba(127,127,127,.06); border-radius:14px; padding:12px; }
.hqb-prevtog{ display:flex; gap:4px; justify-content:center; margin-bottom:8px; }
.hqb-prevtog button{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.2); border-radius:8px; padding:5px 12px; font-size:11.5px; cursor:pointer; color:inherit; }
.hqb-prevtog button.on{ background:#ffdd33; color:#08090b; }
.hqb-list{ background:#fff; border-radius:10px; max-width:600px; margin:0 auto; padding:20px; }
.hqb-canvas.mobile .hqb-list{ max-width:340px; }
.hqb-blk{ border:2px solid transparent; border-radius:8px; cursor:pointer; }
.hqb-blk:hover{ border-color:rgba(63,227,255,.4); }
.hqb-blk.sel{ border-color:#3fe3ff; }
.hqb-render{ pointer-events:none; }
.hqb-side{ position:sticky; top:8px; }
.hqb-insp{ background:var(--panel,#fff); border:1px solid rgba(127,127,127,.16); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.hqb-insph{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.hqb-blkops{ display:flex; gap:5px; margin-top:4px; }
.hqb-blkops button{ flex:1; background:rgba(127,127,127,.1); border:1px solid rgba(127,127,127,.2); border-radius:8px; min-height:34px; cursor:pointer; color:inherit; }
.hqb-blkops .del{ color:#c33; }
.hqb-pick{ display:block; width:100%; text-align:left; background:rgba(127,127,127,.08); border:1px solid rgba(127,127,127,.16); border-radius:10px; padding:11px 13px; margin:5px 0; cursor:pointer; color:inherit; font-size:14px; }
.hqb-pick:hover{ border-color:#ffdd33; }
@media (max-width:1000px){ .hqb-work{ grid-template-columns:1fr; } .hqb-palette,.hqb-side{ position:static; } }


/* ============================================================
   v515 — STACKED OUT HQ · the design language (theme-aware).
   Same premium treatment as Home & Leads on EVERY HQ page —
   command header, Clash Display, gradient rule, eyebrows, tiles.
   Built on the app's theme tokens so the light/dark toggle wins.
   ============================================================ */
body{ --hq-eye:#3fe3ff; }               /* eyebrow accent — dark default */
body.theme-light{ --hq-eye:#0c8fa8; }   /* deeper teal for the paper theme */

/* command header — a Clash title over the signature gradient rule */
body.hq-org .hql{ padding:26px clamp(16px,3vw,40px) 60px; }
body.hq-org .hql-top{ align-items:flex-end; margin-bottom:16px; position:relative; padding-bottom:14px; }
body.hq-org .hql-top::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:3px; border-radius:3px;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
body.hq-org .hql-top h1{ font-family:'Clash Display',Inter,sans-serif!important; font-weight:700; font-size:30px!important;
  letter-spacing:-.6px; line-height:1; color:var(--text); }
body.hq-org h2{ font-family:'Clash Display',Inter,sans-serif; letter-spacing:-.3px; color:var(--text); }

/* eyebrows + big numbers */
body.hq-org .hqd-cardh, body.hq-org .hqb-palh{ color:var(--hq-eye); opacity:1; letter-spacing:.16em; font-weight:800; }
body.hq-org .hqd-big b, body.hq-org .hqb-stats b, body.hq-org .hqd-plans b, body.hq-org .hql-mrrbar b, body.hq-org .hqd-big span+b{
  font-family:'Clash Display',Inter,sans-serif; font-variant-numeric:tabular-nums; }
body.hq-org .hqd-big.gold b{ color:var(--amber); } body.hq-org .hqd-big.green b{ color:var(--green,#0e9a58); } body.hq-org .hqd-big.red b{ color:var(--red,#c0392b); }

/* tabs — refined pills, theme-aware */
body.hq-org .hql-tabs button, body.hq-org .hqb-prevtog button{
  background:var(--panel2); border:1px solid var(--line); color:var(--muted);
  border-radius:11px; min-height:42px; padding:0 18px; font-weight:700; font-size:13px; transition:.15s; }
body.hq-org .hql-tabs button:hover{ color:var(--text); }
body.hq-org .hql-tabs button.on{ background:var(--amber); color:#08090b; border-color:var(--amber); box-shadow:0 6px 18px -9px var(--amber); }
body.hq-org .hql-tabs button.on b{ color:#08090b; opacity:.7; }

/* cards + tiles — soft depth, theme-aware, gradient top-edge */
body.hq-org .hql-card, body.hq-org .hqd-card, body.hq-org .hqb-stats>div{
  border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 30px -24px rgba(0,0,0,.6); transition:.15s; }
body.hq-org .hql-card:hover, body.hq-org .hqd-card:hover{ border-color:color-mix(in srgb,var(--hq-eye) 40%,var(--line)); }
body.hq-org .hqd-grid .hqd-card{ position:relative; overflow:hidden; }
body.hq-org .hqd-grid .hqd-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); opacity:.55; }
body.hq-org .hqb-stats>div{ border-top:2px solid var(--hq-eye); }
body.hq-org .hqb-stats>div:hover{ transform:translateY(-2px); }
body.hq-org .hqb-stats>div.warn{ border-top-color:var(--red,#e5484d); }

/* stat chips */
body.hq-org .hqd-plans span{ background:color-mix(in srgb,var(--text) 6%,transparent); border:1px solid var(--line); }

/* buttons — yellow primary, ghost, gradient hero */
body.hq-org .hql-new, body.hq-org .hql-win{ background:var(--amber); color:#08090b; border:0; border-radius:12px; font-weight:800;
  box-shadow:0 8px 22px -11px var(--amber); transition:.15s; }
body.hq-org .hql-new:hover, body.hq-org .hql-win:hover{ transform:translateY(-1px); }
body.hq-org .hql-act{ background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:11px; font-weight:700; }
body.hq-org .hql-act:hover{ border-color:var(--hq-eye); }
body.hq-org .hql-mass, body.hq-org .hqb-ai{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); color:#08090b; border:0; font-weight:800; }
body.hq-org .hqd-quick button{ background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:12px; font-weight:700; transition:.15s; }
body.hq-org .hqd-quick button:hover{ border-color:var(--hq-eye); transform:translateY(-1px); }

/* inputs — theme-aware with a cyan focus ring */
body.hq-org .hql-filters input, body.hq-org .hql-filters select, body.hq-org .hqb-subj, body.hq-org .hqb-bars select,
body.hq-org .hql-grid input, body.hq-org .hql-grid select, body.hq-org .hql-notes textarea, body.hq-org #hqa-in, body.hq-org #hqs-in,
body.hq-org .hqi-list input, body.hq-org .hql-stage{
  background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:10px; }
body.hq-org .hql-filters input:focus, body.hq-org .hqb-subj:focus, body.hq-org #hqa-in:focus{
  outline:none; border-color:var(--hq-eye); box-shadow:0 0 0 3px color-mix(in srgb,var(--hq-eye) 18%,transparent); }

/* pipeline board */
body.hq-org .hqb-card{ transition:.12s; }
body.hq-org .hqb-card:hover{ border-color:color-mix(in srgb,var(--hq-eye) 45%,var(--line)); transform:translateY(-1px); }
body.hq-org .hqb-colhead i{ color:var(--amber); }

/* agent + helper chat bubbles */
body.hq-org .hqa-m.you{ background:var(--amber); color:#08090b; }
body.hq-org .hqa-acts span{ display:inline-block; background:color-mix(in srgb,var(--hq-eye) 16%,transparent); color:var(--hq-eye); border-radius:999px; padding:2px 9px; font-size:10.5px; margin:3px 4px 0 0; }

/* desk pages inherit the same header treatment */
body.hq-org #view-hqdesk .hq-logo{ font-family:'Clash Display',Inter,sans-serif; font-size:22px; }

/* ===== v516 — premium agent selector cards ===== */
body.hq-org .hqag-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
body.hq-org .hqag-card{ display:flex; align-items:flex-start; gap:11px; text-align:left; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:14px 15px; cursor:pointer; transition:.15s; position:relative; overflow:hidden; color:var(--text); }
body.hq-org .hqag-card:hover{ border-color:color-mix(in srgb,var(--hq-eye) 45%,var(--line)); transform:translateY(-2px); }
body.hq-org .hqag-card.on{ border-color:transparent; box-shadow:0 0 0 2px transparent; background:
  linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(120deg,#ffdd33,#3fe3ff) border-box; border:2px solid transparent; }
body.hq-org .hqag-card.on::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
body.hq-org .hqag-ico{ font-size:22px; width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--hq-eye) 12%,transparent); border-radius:12px; }
body.hq-org .hqag-card.on .hqag-ico{ background:linear-gradient(120deg,rgba(255,221,51,.22),rgba(63,227,255,.22)); }
body.hq-org .hqag-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.hq-org .hqag-txt strong{ font-family:'Clash Display',Inter,sans-serif; font-size:14.5px; }
body.hq-org .hqag-txt em{ font-style:normal; font-size:11px; color:var(--muted); line-height:1.4; }
body.hq-org .hqag-live{ position:absolute; top:12px; right:13px; font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--green,#0e9a58); }
@media (max-width:820px){ body.hq-org .hqag-pick{ grid-template-columns:1fr; } }

/* ===== v520 — onboarding wizard + billing premium/contrast ===== */
#hq-onb{ position:fixed; inset:0; z-index:10004; background:rgba(8,9,11,.78); display:flex; align-items:center; justify-content:center; padding:16px; }
.onb-card{ background:#0d0f13; color:#f5f6f8; border:1px solid #23262d; border-radius:20px; width:min(620px,96vw); max-height:90vh; overflow:auto; padding:20px 22px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.onb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.onb-logo{ font-family:'Clash Display',Inter,sans-serif; font-weight:700; letter-spacing:.5px; font-size:15px; }
.onb-logo span{ font-size:11px; color:#3fe3ff; letter-spacing:.12em; margin-left:6px; }
.onb-x{ background:none; border:0; color:#9aa1ab; font-size:16px; cursor:pointer; }
.onb-prog{ display:flex; gap:5px; margin:10px 0 14px; }
.onb-prog span{ flex:1; height:4px; border-radius:3px; background:#23262d; transition:.2s; }
.onb-prog span.on{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.onb-t{ font-family:'Clash Display',Inter,sans-serif; font-size:22px; margin:0; }
.onb-sub{ color:#9aa1ab; font-size:12.5px; margin:4px 0 14px; line-height:1.5; }
.onb-hint{ color:#9aa1ab; font-size:12px; margin:0 0 10px; }
.onb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.onb-f{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; }
.onb-f.wide{ grid-column:1/-1; }
.onb-f span{ color:#c9cdd4; }
.onb-f input, .onb-f select, .onb-f textarea{ min-height:38px; border-radius:9px; border:1px solid #23262d; background:#14171d; color:#f5f6f8; padding:7px 10px; font:inherit; font-size:13px; }
.onb-f input:focus, .onb-f select:focus, .onb-f textarea:focus{ outline:none; border-color:#3fe3ff; }
.onb-bolts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.onb-bolt{ display:flex; flex-direction:column; gap:2px; background:#14171d; border:1px solid #23262d; border-radius:11px; padding:10px 12px; cursor:pointer; position:relative; }
.onb-bolt.on{ border-color:#ffdd33; background:rgba(255,221,51,.08); }
.onb-bolt input{ position:absolute; top:10px; right:10px; }
.onb-bolt b{ font-size:12.5px; } .onb-bolt span{ font-size:11px; color:#9aa1ab; }
.onb-total{ margin-top:14px; font-size:13px; } .onb-total b{ font-family:'Clash Display',Inter,sans-serif; font-size:22px; color:#ffdd33; }
.onb-total span{ color:#9aa1ab; font-size:11px; margin-left:6px; }
.onb-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; }
.onb-back{ background:#14171d; border:1px solid #23262d; border-radius:11px; color:#f5f6f8; min-height:42px; padding:0 18px; cursor:pointer; font-weight:700; }
.onb-go{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); border:0; border-radius:12px; color:#08090b; min-height:44px; padding:0 22px; cursor:pointer; font-weight:800; }
@media (max-width:560px){ .onb-grid{ grid-template-columns:1fr; } }

/* billing page — premium, readable (fixes white-on-white on the dark desk) */
body.hq-org #view-hqdesk .hq-page{ padding:26px clamp(16px,3vw,40px) 60px; }
body.hq-org #view-hqdesk .hq-head .hq-logo{ font-family:'Clash Display',Inter,sans-serif; font-size:22px; color:#f5f6f8; }
body.hq-org #view-hqdesk .hq-row{ background:#12151b; border:1px solid #23262d; color:#f5f6f8; }
body.hq-org #view-hqdesk .hq-row strong{ color:#f5f6f8; }
body.hq-org #view-hqdesk .hq-row i{ color:#9aa1ab; }
body.hq-org #view-hqdesk .hq-row input{ background:#0d0f13!important; color:#f5f6f8!important; border:1px solid #23262d!important; border-radius:9px; padding:8px 10px; }
body.hq-org #view-hqdesk .hq-hint{ color:#9aa1ab; }
body.hq-org #view-hqdesk .hqb-stats>div{ background:#12151b; border:1px solid #23262d; border-top:2px solid #3fe3ff; }
body.hq-org #view-hqdesk .hqb-stats b{ color:#ffdd33; }
body.hq-org #view-hqdesk .hqb-stats span, body.hq-org #view-hqdesk .hqb-stats i{ color:#9aa1ab; }
body.hq-org #view-hqdesk .hq-acts button{ background:#0d0f13; border:1px solid #23262d; color:#f5f6f8; }

/* ═══ v537 — audit fixes (docs/AUDIT-2026-07-19.md) ═══ */
/* A2: light theme paints .status-sel with the status colour behind white text —
   the amber statuses fail 4.5:1. Amber gets dark ink; darker statuses keep white. */
body.theme-light .data-table .status-sel.st-sent{ color:#231c00 !important; }
/* A8/B4: the light palette derives --amber down to #8a6800 for text-on-white, but
   these are CHIPS — brand yellow ground with dark ink reads 10:1 in both themes. */
body.theme-light .tw-n, body.theme-light .au-stage-n{ background:#ffdd33; color:#08090b; }
/* A7: journeys merge-field code samples were stage-teal on beige, 2.83 */
body.theme-light #view-journeys code{ color:#066a85; }
/* A4: My Day desktop — booked-time amber on white was 3.27 */
body.theme-light .fa-jobrow-time{ color:#8a6800; }
/* A3: My Day desktop — the unclassed navigate button in the drive strip, cyan on white 1.43 */
body.theme-light .fa-drive2 button{ color:#066a85; }
/* A10: calendar board band numerals sat at 4.45 on the colour-mixed beige */
.board-band-n{ color:#4c535e; }

/* ============================================================
   SOCIAL PUBLISHER (v538) — one composer, live previews, calendar
   ============================================================ */
.so-wrap{ max-width:1160px; }
.so-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.so-title{ font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0; color:var(--text);
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.so-sub{ color:var(--muted); margin:6px 0 0; font-size:14px; max-width:52ch; }
.so-conn{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.so-pill{ font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--line); }
.so-pill.on{ color:#0a1a12; background:var(--green); border-color:var(--green); }
.so-pill.off{ color:var(--muted); }
.so-pill.loading{ color:var(--muted); }

/* buttons this module needs */
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text); font:inherit; font-weight:600;
  padding:9px 15px; border-radius:10px; cursor:pointer; font-size:13px; min-height:44px; }
.btn-ghost:hover{ border-color:var(--amber); }
.btn-ghost.sm{ padding:4px 10px; font-size:12px; min-height:44px; }
.btn-amber.lg{ padding:12px 22px; font-size:15px; border-radius:12px; font-weight:700; }

/* connect banner */
.so-connect{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:24px 26px; margin-bottom:24px;
  position:relative; overflow:hidden; }
.so-connect::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 200px at 90% -20%, rgba(63,227,255,.12), transparent 70%),
             radial-gradient(600px 200px at 10% 120%, rgba(255,221,51,.10), transparent 70%); }
.so-connect-txt{ position:relative; max-width:60ch; }
.so-connect h2{ font-size:19px; margin:0 0 6px; color:var(--text); }
.so-connect p{ color:var(--muted); font-size:13.5px; margin:0; line-height:1.5; }
.so-connect .btn-amber{ position:relative; }

/* two-column layout */
.so-grid{ display:grid; grid-template-columns:1fr 420px; gap:22px; align-items:start; }
.so-grid > *{ min-width:0; }   /* let both columns shrink so content wraps / scrolls instead of overflowing the viewport */
.so-compose{ background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.so-preview{ position:sticky; top:16px; }
.so-preview-head{ font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin:4px 0 12px; }

.so-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; color:var(--muted); margin:18px 0 8px; }
.so-compose > .so-label:first-child{ margin-top:0; }
.so-caption{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:12px; color:var(--text);
  font:inherit; font-size:15px; line-height:1.5; padding:14px; resize:vertical; min-height:120px; }
.so-caption:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(63,227,255,.15); }
.so-count{ font-size:11.5px; color:var(--muted); margin-top:6px; text-align:right; }

/* platform chips */
.so-plats{ display:flex; gap:10px; flex-wrap:wrap; }
.so-plat{ display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; cursor:pointer; color:var(--text); font:inherit; font-weight:600; font-size:13.5px;
  position:relative; transition:border-color .12s, background .12s; min-height:44px; }
.so-plat:hover{ border-color:var(--muted); }
.so-plat.on{ border-color:var(--amber); background:rgba(255,221,51,.06); }
.so-plat-ico{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#fff; background:var(--pc,#555); }
.so-plat.on .so-plat-ico{ box-shadow:0 0 0 2px rgba(255,221,51,.3); }
.so-plat-note{ font-size:10px; color:var(--red); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.so-plat.unconn{ opacity:.72; }

/* media */
.so-media{ display:flex; gap:10px; flex-wrap:wrap; }
.so-media-empty{ font-size:13px; color:var(--muted); background:var(--bg); border:1px dashed var(--line); border-radius:12px; padding:16px; width:100%; text-align:center; }
.so-media-item{ position:relative; width:88px; height:88px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.so-media-item img{ width:100%; height:100%; object-fit:cover; }
.so-media-rm{ position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:50%; border:none;
  background:rgba(8,9,11,.75); color:#fff; cursor:pointer; font-size:12px; line-height:1; }
/* deleting a photo is the hardest target to hit one-handed in a van and the
   costliest to hit by accident, so the tappable area is 44px even though the
   circle stays 26px and the layout does not move. */
.so-media-rm::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; }
.so-media-add{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* when */
.so-when{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.so-when-btn{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 16px; cursor:pointer;
  color:var(--text); font:inherit; font-weight:600; font-size:13.5px; min-height:44px; }
.so-when-btn.on{ border-color:var(--amber); background:rgba(255,221,51,.06); }
.so-when-input{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:9px 12px; color:var(--text); font:inherit; font-size:13.5px; color-scheme:dark; }

.so-actions{ display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:wrap; }
.so-go-note{ font-size:13px; color:var(--muted); }
.so-go-note.ok{ color:var(--green); font-weight:700; }
.so-go-note.err{ color:var(--red); font-weight:600; }

/* ---- phone previews (deliberately LIGHT — they mimic the real feeds) ---- */
.so-phones{ display:flex; flex-direction:column; gap:16px; }
.so-noplat{ font-size:13px; color:var(--muted); padding:20px; text-align:center; border:1px dashed var(--line); border-radius:12px; }
.so-phone{ border-radius:16px; overflow:hidden; background:#fff; color:#111; box-shadow:0 8px 30px rgba(0,0,0,.35);
  font-size:13px; border:1px solid rgba(0,0,0,.08); }
.so-ph-top{ padding:7px 12px; border-bottom:1px solid #eee; }
.so-ph-net{ font-size:10px; text-transform:uppercase; letter-spacing:1px; font-weight:800; color:#565656; }
.so-ph-row{ display:flex; align-items:center; gap:9px; padding:10px 12px; }
.so-ph-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#ffdd33,#3fe3ff); flex:0 0 auto; }
.so-ph-name{ font-weight:700; font-size:13px; color:#111; display:flex; flex-direction:column; line-height:1.25; }
.so-ph-name small{ font-weight:400; color:#65676b; font-size:11px; }
.so-ph-more{ margin-left:auto; color:#6b6b6b; letter-spacing:1px; }
.so-ph-media{ background:#f2f2f2; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.so-ph-media img{ width:100%; height:100%; object-fit:cover; }
.so-ph-noimg{ color:#bbb; font-size:12px; }
.so-ph-acts{ display:flex; gap:14px; padding:9px 12px; font-size:17px; }
.so-ph-acts .so-ph-save{ margin-left:auto; }
.so-ph-acts.fbacts{ font-size:12px; color:#666; font-weight:600; border-top:1px solid #eee; }
.so-ph-cap{ padding:2px 12px 14px; line-height:1.45; color:#222; }
.so-ph-cap.fbtext{ padding:2px 12px 10px; }
.so-ph-cap b{ color:#111; }
.so-ph-muted{ color:#bbb; }
/* facebook variant */
.so-phone.fb .so-ph-av{ background:#1877F2; }
/* tiktok variant — dark, full bleed */
.so-phone.tt{ background:#000; color:#fff; }
.so-phone.tt .so-ph-top{ border-bottom:1px solid #222; }
.so-ph-ttmedia{ position:relative; aspect-ratio:9/16; max-height:460px; background:#111; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.so-ph-ttmedia img{ width:100%; height:100%; object-fit:cover; }
.so-tt-rail{ position:absolute; right:10px; bottom:70px; display:flex; flex-direction:column; gap:16px; font-size:22px; }
.so-tt-cap{ position:absolute; left:12px; right:56px; bottom:14px; font-size:12.5px; line-height:1.4; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.so-tt-cap b{ font-weight:700; }

/* queue */
.so-queue{ margin-top:30px; background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:20px 24px; }
.so-queue-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.so-queue-head h2{ font-size:16px; margin:0; color:var(--text); }
.so-queue-empty{ color:var(--muted); font-size:13px; padding:14px 0; }
.so-qrow{ display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.so-qthumb{ width:48px; height:48px; border-radius:10px; overflow:hidden; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); flex:0 0 auto; }
.so-qthumb img{ width:100%; height:100%; object-fit:cover; }
.so-qmain{ flex:1; min-width:0; }
.so-qtitle{ font-size:14px; color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.so-qmeta{ font-size:12px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:8px; }
.so-chip{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:6px; }
.so-chip.scheduled{ background:rgba(63,227,255,.16); color:#0d9cbc; }
.so-chip.posted{ background:rgba(52,211,153,.16); color:#0e9a58; }
.so-qcancel{ width:44px; height:44px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; flex:0 0 auto; }
.so-qcancel:hover{ border-color:var(--red); color:var(--red); }

/* settings key panel */
.so-key-row{ display:flex; gap:10px; margin:12px 0 10px; flex-wrap:wrap; }
.so-key-input{ flex:1; min-width:220px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--text); font:inherit; font-size:13.5px; }
.so-key-status{ display:flex; align-items:center; gap:10px; font-size:13px; }
.so-key-state{ font-weight:700; padding:4px 10px; border-radius:6px; font-size:12px; }
.so-key-state.on{ background:rgba(52,211,153,.16); color:#0e9a58; }
.so-key-state.off{ background:rgba(248,113,113,.14); color:#c23b3b; }
.so-key-state.checking{ color:var(--muted); }

/* toast + sheet */
/* v788 — pointer-events:none is LOAD-BEARING here, do not drop it.
   soToast() creates this node once and never removes it; its 3200ms timer only
   takes the .show class off. So after the first toast of a session an invisible
   195x89 rectangle sits at z-index 9000 over the bottom centre of the viewport
   for ever, and at opacity:0 it still hit-tests. Driven at 390 in engineer mode
   it owned 200px of the 390px field tab bar and silently swallowed every tap on
   Jobs, Certs and Alerts — three of the five tabs, with no visual reason why.
   Unconditional, rather than the hidden-none / .show-auto pattern its two
   siblings use (#faq-screen, .fa-sheet-wrap), because those are interactive
   overlays and this is not: soToast writes textContent and binds no handler, so
   a toast has nothing to click at any point in its life and must never take a
   tap — not while showing, and not for the rest of the session afterwards. */
.so-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:9000;
  background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px 20px;
  pointer-events:none;
  font-size:13.5px; max-width:90vw; opacity:0; transition:opacity .2s, transform .2s; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.so-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.so-sheet-wrap{ position:fixed; inset:0; z-index:8500; background:rgba(8,9,11,.6); display:flex; align-items:center; justify-content:center; padding:20px; }
.so-sheet{ background:var(--bg2); border:1px solid var(--line); border-radius:16px; max-width:460px; width:100%; max-height:80vh; overflow:auto; }
.so-sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg2); }
.so-sheet-head h3{ margin:0; font-size:15px; color:var(--text); text-transform:none; letter-spacing:0; }
.so-sheet-x{ background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer;
  min-width:44px; min-height:44px; }
.so-sheet-body{ padding:18px 22px; }
.so-sheet-sub{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.so-joblist{ display:flex; flex-direction:column; gap:8px; }
.so-jobrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; cursor:pointer; color:var(--text); font:inherit; font-size:14px; font-weight:600; text-align:left; }
.so-jobrow:hover{ border-color:var(--amber); }
.so-jobrow-n{ font-size:12px; color:var(--muted); font-weight:500; flex:0 0 auto; }

@media (max-width:900px){
  .so-grid{ grid-template-columns:1fr; }
  .so-preview{ position:static; }
  .so-phones{ flex-direction:row; overflow-x:auto; }
  .so-phone{ min-width:280px; }
}

/* v545: video in the social composer */
.so-media-video{ position:relative; display:flex; gap:14px; align-items:center; width:100%;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.so-media-video video{ width:84px; height:105px; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.so-media-video-meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.so-media-video-meta b{ font-size:13.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.so-media-video-meta span{ font-size:12px; color:var(--muted); }
.so-media-video .so-media-rm{ position:static; margin-left:auto; }
.so-ph-media video, .so-ph-ttmedia video{ width:100%; height:100%; object-fit:cover; }

/* Building control fee ticked on but never set — prompt for the real figure
   rather than quietly adding nothing to the quote. */
.bc-unset{ color:var(--amber-dk); }

/* ---------- the journey Coach panel ---------- */
/* Docked beside the canvas, never over it: a panel that covers the thing it is
   talking about is worse than no panel. */
.pj-stage{ display:flex; gap:18px; align-items:flex-start; }
.pj-stage .pj-canvas{ flex:1 1 auto; min-width:0; }
.pjc{ flex:0 0 306px; position:sticky; top:12px; max-height:calc(100vh - 130px); overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 14px 12px; }
.pjc-h{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; }
.pjc-h-ic{ margin-right:7px; }
.pjc-sub{ margin:8px 0 12px; font-size:12px; line-height:1.5; color:var(--muted); }
.pjc-body{ display:flex; flex-direction:column; gap:10px; }
.pjc-item{ border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:10px 11px; background:var(--bg2); }
.pjc-item.blocker{ border-left-color:var(--red); }
.pjc-item.warn{ border-left-color:var(--amber); }
.pjc-item.tip{ border-left-color:var(--cyan,#0d9cbc); }
.pjc-it-h{ display:flex; gap:8px; align-items:flex-start; }
.pjc-it-ic{ flex:0 0 auto; font-size:13px; line-height:1.35; }
.pjc-it-t{ font-weight:700; font-size:12.5px; line-height:1.35; }
.pjc-why{ margin:7px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.pjc-fix{ margin:7px 0 0; font-size:12px; line-height:1.5; }
.pjc-fix b{ color:var(--text); }
.pjc-clear{ text-align:center; padding:16px 8px; color:var(--muted); }
.pjc-clear span{ display:block; font-size:26px; color:var(--green); margin-bottom:6px; }
.pjc-clear p{ margin:0; font-size:12px; line-height:1.5; }
.pjc-foot{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line);
  font-size:11px; line-height:1.5; color:var(--muted); }
/* collapsed: a slim tab that still shows the count, so hiding it never hides a blocker */
.pjc-tab{ flex:0 0 auto; position:sticky; top:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px 11px; cursor:pointer; font-size:17px; line-height:1; color:var(--text); }
.pjc-tab:hover{ border-color:var(--amber); }
.pjc-badge{ display:inline-block; min-width:17px; margin-left:5px; padding:1px 5px; border-radius:9px;
  font-size:10.5px; font-weight:700; vertical-align:top; }
.pjc-badge.b{ background:var(--red); color:#fff; }
.pjc-badge.w{ background:var(--yel); color:var(--yel-ink); }
.pjc-badge.t{ background:var(--bg2); color:var(--muted); }
@media (max-width:1180px){
  .pj-stage{ flex-direction:column; }
  .pjc{ flex:1 1 auto; width:100%; position:static; max-height:none; }
  .pjc-tab{ position:static; align-self:flex-start; }
}

/* the hoverable (i). Small, quiet, and never in the way of the control it sits
   beside. 24px hit area even though the dot is 16px, so a thumb can find it. */
.pj-i{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; border:1px solid var(--line); background:var(--bg2); color:var(--muted);
  font-size:10.5px; font-weight:700; font-style:italic; font-family:Georgia,serif;
  cursor:help; padding:0; margin-left:5px; vertical-align:middle; position:relative; }
.pj-i::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:24px; height:24px; }
.pj-i:hover, .pj-i:focus-visible{ border-color:var(--amber); color:var(--amber); outline:none; }

/* ---------- the supplier catalogue ---------- */
.cf-load{ padding:34px 18px; text-align:center; color:var(--muted); }
.cf-bar{ margin-bottom:10px; }
.cf-q{ width:100%; padding:13px 15px; font-size:15px; border-radius:12px;
  border:1px solid var(--line); background:var(--bg2); color:var(--text); min-height:48px; }
.cf-q:focus{ border-color:var(--amber); outline:none; }

/* the row of multi-select dropdowns */
.cf-drops{ display:flex; gap:9px; flex-wrap:wrap; align-items:flex-start; margin-bottom:12px; position:relative; z-index:5; }
.cf-drops-r{ display:flex; gap:8px; margin-left:auto; align-items:center; }
.cd{ position:relative; }
.cd-btn{ display:flex; align-items:center; gap:9px; min-height:40px; padding:8px 13px;
  border-radius:10px; border:1px solid var(--line); background:var(--bg2); color:var(--text);
  font:inherit; font-size:13.5px; cursor:pointer; }
.cd-btn:hover{ border-color:var(--muted); }
.cd-btn.has{ border-color:var(--yel); background:color-mix(in srgb,var(--yel) 18%,var(--bg2)); }
.cd-caret{ font-size:9px; color:var(--muted); }
.cd-panel{ position:absolute; top:calc(100% + 5px); left:0; z-index:20; width:280px; max-width:88vw;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.34); }
.cd-find{ width:100%; padding:8px 10px; font-size:13px; border-radius:8px; margin-bottom:7px;
  border:1px solid var(--line); background:var(--bg); color:var(--text); }
.cd-clear{ display:block; width:100%; text-align:left; background:none; border:none; color:var(--amber);
  font:inherit; font-size:12px; cursor:pointer; padding:2px 4px 7px; }
.cd-opts{ display:flex; flex-direction:column; gap:1px; max-height:320px; overflow:auto; }
.cd-opt{ display:flex; flex-direction:row; align-items:center; gap:9px; padding:7px 6px; border-radius:7px; cursor:pointer; min-height:36px; font-weight:500; }
.cd-opt:hover{ background:var(--bg2); }
.cd-opt.on{ background:color-mix(in srgb,var(--yel) 22%,transparent); }
.cd-tick{ flex:0 0 16px; width:16px; height:16px; border:1px solid var(--line); border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:var(--amber); }
.cd-opt.on .cd-tick{ border-color:var(--yel); background:var(--yel); color:var(--yel-ink); }
.cd-opt-t{ flex:1 1 auto; font-size:13px; line-height:1.35; }
.cd-opt-n{ flex:0 0 auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cd-none{ font-size:12.5px; color:var(--muted); margin:6px 4px; }

/* results */
.cf-count{ font-size:12px; color:var(--muted); margin-bottom:9px; font-variant-numeric:tabular-nums; }
.cf-rows{ display:flex; flex-direction:column; gap:7px; }
.cf-row{ display:flex; gap:12px; align-items:center; background:var(--panel);
  border:1px solid var(--line); border-radius:11px; padding:11px 13px; cursor:pointer; }
.cf-row:hover{ border-color:var(--muted); }
.cf-row.picked{ border-color:color-mix(in srgb,var(--yel) 70%,var(--line)); }
.cf-r-main{ flex:1 1 auto; min-width:0; }
.cf-r-desc{ font-size:13.5px; line-height:1.4; }
.cf-r-edited{ font-size:10px; color:var(--amber); border:1px solid var(--amber); border-radius:5px; padding:0 5px; margin-left:5px; vertical-align:middle; }
.cf-r-meta{ font-size:11px; color:var(--muted); margin-top:3px; }
.cf-r-tree{ display:block; margin-top:2px; opacity:.8; }
.cf-r-syn{ font-size:11px; color:var(--amber); margin-top:3px; }
.cf-r-price{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; }
.cf-r-sell{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.cf-r-per{ font-size:10px; color:var(--muted); }
.cf-r-buy{ font-size:10.5px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.cf-pick{ flex:0 0 auto; width:44px; height:40px; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; }
.cf-pick.on{ color:var(--amber); border-color:var(--amber); }
.cf-pick:hover{ border-color:var(--amber); color:var(--amber); }
.cf-loadmore{ width:100%; margin-top:11px; min-height:44px; }
.cf-empty{ text-align:center; padding:34px 16px; color:var(--muted); }

/* the item editor */
.ce-desc{ font-size:14.5px; font-weight:600; margin:2px 0 3px; }
.ce-meta{ font-size:11.5px; color:var(--muted); margin:0 0 14px; }
.ce-lab{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.ce-lab input{ display:block; width:100%; margin-top:5px; padding:10px 12px; font-size:14px;
  border-radius:9px; border:1px solid var(--line); background:var(--bg2); color:var(--text); min-height:44px; }
.ce-lab input:focus{ border-color:var(--amber); outline:none; }
.ce-hint{ display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.ce-prices{ display:flex; gap:12px; }
.ce-prices .ce-lab{ flex:1; }
.ce-sell{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:14px; margin-bottom:16px; }
.ce-sell b{ font-size:20px; }
.ce-foot{ display:flex; gap:8px; align-items:center; }
@media (max-width:640px){
  .cf-row{ flex-wrap:wrap; }
  .cf-r-main{ flex:1 1 100%; }
  .cf-r-price{ text-align:left; flex-direction:row; gap:10px; align-items:baseline; }
}
/* Same stray `}` as at :1095, same consequence: .cs-wrap below was being eaten by
   the parser's error recovery and its margin-bottom computed 0px. Found by TS-026. */

/* materials & price lists, in Settings */
.cs-wrap{ margin-bottom:6px; }
.cs-sups{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.cs-sup{ display:flex; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:10px 13px; }
.cs-sup-main{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.cs-up{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.cs-name{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:600; }
.cs-name input{ padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg2); color:var(--text); min-height:42px; min-width:200px; }
.cs-file{ cursor:pointer; min-height:42px; display:inline-flex; align-items:center; }
.cs-status{ flex:1 1 100%; margin-top:4px; font-size:12.5px; }
.cs-ok{ color:var(--green); }
.cs-err{ color:var(--red); }
/* first-run empty state on the Materials screen */
.cf-empty-first{ max-width:520px; margin:20px auto; }
.cf-empty-first .cf-empty-ic{ font-size:40px; margin-bottom:6px; }
.cf-empty-first h2{ margin:6px 0 8px; }
.cf-empty-first p{ line-height:1.55; }
.cf-empty-first .btn{ margin-top:14px; }

/* material picker: scope + supplier controls */
.mp-scope{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.mp-empty{ text-align:center; padding:26px 16px; color:var(--muted); }
.mp-empty .btn{ margin-top:10px; }
.bp-desc em{ font-style:normal; font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:0 5px; margin-left:4px; }
/* bulk add-to-list on the Materials screen */
.cf-count{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cf-bulk{ background:color-mix(in srgb,var(--yel) 26%,transparent); border:1px solid var(--yel);
  color:var(--text); border-radius:8px; padding:5px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; min-height:32px; }
.cf-bulk:hover{ background:color-mix(in srgb,var(--yel) 40%,transparent); }
.cf-hint-tap{ margin-left:auto; }

/* ============================================================
   SCHEDULER v550 — the dispatch board, rebuilt
   The lanes moved from a side rail to a shelf along the top, so the board gets
   the full width. The board itself was the least brand-like surface in the
   product: round initial badges, hard grid lines, flat blue blocks. It is now
   charcoal-first with a colour spine per engineer, electric yellow for booked
   work and cyan for anything still being arranged.
   ============================================================ */

/* ---- the shelf: to book / priority / don't lose ---- */
.sched-lanes{ margin:0 0 14px; }
.lanes-toggle{ background:none; border:none; color:var(--muted); font:inherit; font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em; cursor:pointer; padding:2px 0 8px;
  display:inline-flex; align-items:center; gap:6px; }
.lanes-toggle:hover{ color:var(--amber); }
/* v615: a caret so it reads as a real show/hide control, not just a label */
.lanes-caret{ display:inline-block; font-size:10px; line-height:1; transition:transform .15s ease; }
.lanes-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:start; }
.lane{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:11px 12px 12px; min-width:0; }
.lane-h{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.lane-h h3{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.01em; }
.lane-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.lane-n{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted);
  background:var(--bg2); border-radius:20px; padding:2px 9px; font-variant-numeric:tabular-nums; }
.lane-book .lane-dot{ background:var(--yel); }
.lane-prio .lane-dot{ background:#f0730a; }
.lane-risk .lane-dot{ background:var(--red,#dc2626); }
.lane-empty{ margin:0; font-size:11.5px; line-height:1.5; color:var(--muted); }
.lane-strip{ display:flex; gap:9px; overflow-x:auto; padding-bottom:3px; scrollbar-width:thin; }
/* a job card on the shelf */
.lc{ flex:0 0 178px; background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:10px; padding:9px 10px; cursor:grab; transition:border-color .12s, transform .08s; }
.lc:hover{ border-color:var(--muted); transform:translateY(-1px); }
.lc:active{ cursor:grabbing; }
.lane-book .lc{ border-left-color:var(--yel); }
.lc-prio{ border-left-color:#f0730a !important; }
.lc-risk{ border-left-color:var(--red,#dc2626) !important; }
.lc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lc-top strong{ font-size:12px; letter-spacing:.02em; }
.lc-val{ font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.lc-name{ font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-sub{ font-size:10.5px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- the board gets the whole width now ---- */
.sched-wrap{ display:block !important; }

/* ---- the board ---- */
.board-band{ border-radius:14px; border:1px solid var(--line); background:var(--panel); }
.board-band-head{ padding:10px 15px; border-bottom:1px solid var(--line); }
.sch-grid{ padding:2px 0 4px; }
/* hour header: quiet, tabular, no heavy rules */
.sch-head{ min-height:30px !important; }
.sch-head .sch-cell{ border-left:1px solid color-mix(in srgb,var(--line) 45%,transparent) !important;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums; padding:7px 6px !important; }
/* engineer rail: a colour spine and a name. The round initial badges are gone. */
.sch-row{ min-height:66px; }
.sch-staff{ gap:10px !important; font-size:13px !important; font-weight:600 !important; padding:10px 12px !important; }
.sch-staff .dsk-init{ width:4px !important; height:26px !important; border-radius:3px !important;
  font-size:0 !important; color:transparent !important; flex:0 0 4px; }
/* the lane a block sits in */
.sch-lane{ background:
  repeating-linear-gradient(to right, transparent 0, transparent calc(100%/12 - 1px),
  color-mix(in srgb,var(--line) 40%,transparent) calc(100%/12 - 1px), color-mix(in srgb,var(--line) 40%,transparent) calc(100%/12)) !important; }
.sch-lane.sb-over{ background:color-mix(in srgb,var(--yel) 30%, transparent) !important;
  box-shadow:inset 0 0 0 2px var(--yel); }
/* a booked block: spine + two lines, no gradients, no shouty fills */
.sch-block{ top:7px !important; bottom:7px !important; border-radius:9px !important;
  background:var(--bg2) !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--sc,#ffdd33) !important; padding:7px 9px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.14); cursor:grab;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s; overflow:hidden; }
.sch-block:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(0,0,0,.2); border-color:var(--muted) !important; }
.sch-block:active{ cursor:grabbing; }
.sch-block strong{ font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.sch-block-sub{ display:block; font-size:10px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sch-block-sooner{ box-shadow:0 0 0 2px var(--c-bad-dot,#B3372E), 0 1px 2px rgba(0,0,0,.14) !important; }  /* the ONLY live .sch-block-sooner — two dead ones were deleted at :4627/:4655. #f0730a was 2.57:1 on the light --bg2 this block is filled with; --c-bad-dot is 5.25:1 light / 6.99:1 dark. Full working, and why not the amber tokens, in audit/page-specs/desk-board-tool1-vs-tool2-ring.md */
.sch-block-visit{ border-style:dashed !important; }
/* the now line: cyan, with a head, so it reads as "you are here" */
.sch-now{ width:2px !important; background:var(--cyan,#3fe3ff) !important; opacity:.9; z-index:3; }
.sch-now::before{ content:''; position:absolute; top:-3px; left:-3px; width:8px; height:8px;
  border-radius:50%; background:var(--cyan,#3fe3ff); }
/* the thing being dragged */
.sch-block.sb-dragging, .lc.sb-dragging{ opacity:.4; }
@media (max-width:900px){ .lanes-row{ grid-template-columns:1fr; } }

/* ============================================================
   BOOKING SHEET v550 — rebuilt
   The old sheet was a flat form with browser-default controls and two calendar
   export buttons nobody uses. This is grouped into cards, on palette, with the
   primary action carrying the weight.
   ============================================================ */
.bk-lede{ margin:2px 0 14px; font-size:13px; color:var(--muted); }
.bk-lede strong{ color:var(--text); font-size:14px; }

/* the job / survey / call segmented control */
.bk-seg{ display:flex; gap:6px; background:var(--bg2); border:1px solid var(--line);
  border-radius:12px; padding:4px; margin-bottom:14px; }
.bk-seg-b{ flex:1; min-height:40px; border:none; background:transparent; color:var(--muted);
  font:inherit; font-size:13px; font-weight:600; border-radius:9px; cursor:pointer; transition:background .12s,color .12s; }
.bk-seg-b:hover{ color:var(--text); }
.bk-seg-b.on{ background:var(--yel); color:var(--yel-ink); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.16); }

/* grouped cards */
.bk-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px; margin-bottom:11px; }
.bk-card-h{ display:flex; align-items:baseline; gap:10px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:10px; }
.bk-card-say{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:600;
  font-size:12px; color:var(--amber); }
.bk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.bk-grid-rep{ grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.bk-f{ display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:600;
  color:var(--muted); text-transform:none; letter-spacing:0; }
.bk-f input, .bk-f select{ min-height:44px; padding:10px 12px; font-size:14px; font-weight:500;
  border-radius:10px; border:1px solid var(--line); background:var(--bg2); color:var(--text); width:100%; }
.bk-f input:focus, .bk-f select:focus{ border-color:var(--yel); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--yel) 40%,transparent); }
.bk-hint{ font-size:11px; color:var(--amber); font-weight:600; }
.bk-note{ margin:9px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted); }

/* who is going — tickboxes, multiple */
.bk-staff{ display:flex; flex-direction:column; gap:5px; }
.bk-who{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg2); cursor:pointer; min-height:46px;
  font-weight:500; flex-direction:row; transition:border-color .12s, background .12s; }
.bk-who:hover{ border-color:var(--muted); }
.bk-who.on{ border-color:var(--yel); background:color-mix(in srgb,var(--yel) 16%,var(--bg2)); }
.bk-tick{ flex:0 0 18px; width:18px; height:18px; border:1.5px solid var(--line); border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#0b0c0e; font-weight:800; }
.bk-who.on .bk-tick{ background:var(--yel); border-color:var(--yel); }
.bk-who-bar{ flex:0 0 3px; width:3px; height:22px; border-radius:2px; }
.bk-who-n{ flex:1 1 auto; font-size:13.5px; color:var(--text); }
.bk-who-s{ flex:0 0 auto; font-size:11px; color:var(--muted); }

/* tell the customer */
.bk-notify{ display:flex; flex-direction:row; align-items:center; gap:10px; font-size:13.5px;
  font-weight:600; color:var(--text); cursor:pointer; min-height:44px; }
.bk-notify input{ width:18px; height:18px; accent-color:var(--yel); }
.bk-msg{ width:100%; margin-top:10px; padding:11px 12px; font:inherit; font-size:13px; line-height:1.5;
  border-radius:10px; border:1px solid var(--line); background:var(--bg2); color:var(--text); resize:vertical; }
.bk-msg:focus{ border-color:var(--yel); outline:none; }
.bk-msg-acts{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.bk-tpl-row{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; margin-bottom:7px;
  padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg2);
  color:var(--text); font:inherit; cursor:pointer; }
.bk-tpl-row:hover{ border-color:var(--yel); }
.bk-tpl-row span{ font-size:11.5px; color:var(--muted); }

.bk-addr{ margin:2px 0 12px; font-size:12px; color:var(--muted); }
.bk-actions{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.bk-go{ min-height:48px; padding:0 22px; font-size:14.5px; font-weight:700; }

/* ---- WEEK BOARD: one grid, engineers as rows, days across ---- */
.wk-grid{ overflow-x:auto; }
.wk-row{ display:grid; grid-template-columns:104px repeat(7,minmax(96px,1fr)); min-width:760px; }
.wk-row + .wk-row .wk-cell, .wk-row + .wk-row .wk-staff{ border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.wk-head .wk-cell{ min-height:34px; align-items:center; justify-content:center; flex-direction:row; gap:6px;
  background:transparent; padding:6px; }
.wk-dow{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; }
.wk-dom{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.wk-staff{ display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:13px; font-weight:600;
  border-right:1px solid var(--line); }
.wk-head .wk-staff{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:800; }
.wk-bar{ width:4px; height:24px; border-radius:3px; flex:0 0 4px; }
.wk-cell{ position:relative; display:flex; flex-direction:column; gap:4px; padding:7px 6px; min-height:74px;
  border-left:1px solid color-mix(in srgb,var(--line) 45%,transparent); }
.wk-today{ background:color-mix(in srgb,var(--yel) 14%,transparent); }
.wk-cell.sb-over{ background:color-mix(in srgb,var(--yel) 30%,transparent); box-shadow:inset 0 0 0 2px var(--yel); }
.wk-leave{ background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--muted) 12%,transparent) 6px 12px); }
.wk-leave-tag{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.wk-b{ display:flex; flex-direction:column; gap:1px; background:var(--bg2); border:1px solid var(--line);
  border-left:3px solid var(--sc,#ffdd33); border-radius:8px; padding:5px 7px; cursor:grab;
  transition:transform .08s, box-shadow .12s, border-color .12s; }
.wk-b:hover{ transform:translateY(-1px); box-shadow:0 4px 11px rgba(0,0,0,.18); border-color:var(--muted); }
.wk-b:active{ cursor:grabbing; }
.wk-b-t{ font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.wk-b-n{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-b-prio{ box-shadow:0 0 0 2px #f0730a; }
.wk-h{ margin-top:auto; align-self:flex-end; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---- VERTICAL MODE: engineers become columns, the day runs down ---- */
/* Same blocks, same data. The row grid is re-laid as columns and each block is
   positioned on the vertical axis instead of the horizontal one. */
.sched-wrap.is-vert .sch-grid{ display:flex; gap:0; overflow-x:auto; }
.sched-wrap.is-vert .sch-row{ display:flex; flex-direction:column; flex:1 1 0; min-width:132px;
  border-right:1px solid color-mix(in srgb,var(--line) 55%,transparent); border-top:none !important; }
.sched-wrap.is-vert .sch-row:last-child{ border-right:none; }
.sched-wrap.is-vert .sch-staff{ border-right:none; border-bottom:1px solid var(--line);
  justify-content:center; padding:9px 6px !important; }
.sched-wrap.is-vert .sch-staff .dsk-init{ width:22px !important; height:4px !important; }
.sched-wrap.is-vert .sch-head{ display:none; }             /* the hour rail is drawn per column */
.sched-wrap.is-vert .sch-lane{ min-height:620px; background:
  repeating-linear-gradient(to bottom, transparent 0, transparent calc(100%/12 - 1px),
  color-mix(in srgb,var(--line) 40%,transparent) calc(100%/12 - 1px), color-mix(in srgb,var(--line) 40%,transparent) calc(100%/12)) !important; }
/* a block now spans top→bottom instead of left→right */
.sched-wrap.is-vert .sch-block{ left:5px !important; right:5px !important; width:auto !important;
  top:var(--vtop,0) !important; bottom:auto !important; height:var(--vh,40px); }
.sched-wrap.is-vert .sch-now{ width:100% !important; height:2px !important; left:0 !important; top:var(--nowtop,0); }

/* ---- VERTICAL: the shelf moves beside the board, so nothing scrolls ---- */
/* Jamie's point: turning the board on its side but leaving the job shelf across
   the top just means scrolling up and down instead of left and right. In
   vertical the shelf becomes a narrow column next to the board and the two sit
   side by side on one screen. */
.sched-page.is-vert{ display:flex; gap:14px; align-items:flex-start; }
.sched-page.is-vert .sched-lanes{ flex:0 0 232px; margin:0; }
.sched-page.is-vert .lanes-row{ grid-template-columns:1fr; gap:10px; }
.sched-page.is-vert .lane-strip{ flex-direction:column; overflow-x:visible; overflow-y:auto; max-height:190px; }
.sched-page.is-vert .lc{ flex:0 0 auto; }
.sched-page.is-vert .sched-wrap{ flex:1 1 auto; min-width:0; }

/* thinner blocks in vertical: a job is a slim bar, not a fat card */
.sched-wrap.is-vert .sch-block{ padding:4px 7px !important; border-radius:7px !important;
  border-left-width:3px !important; display:flex; align-items:baseline; gap:6px; }
.sched-wrap.is-vert .sch-block strong{ font-size:11px; }
.sched-wrap.is-vert .sch-block-sub{ display:inline; margin-top:0; font-size:10px; }
.sched-wrap.is-vert .sch-lane{ min-height:560px; }

/* thinner shelf cards everywhere */
.lc{ flex:0 0 164px; padding:7px 9px; }
.lc-name{ font-size:12.5px; }
.lc-sub{ font-size:10px; }
.lc-top strong{ font-size:11.5px; }

@media (max-width:1100px){
  .sched-page.is-vert{ flex-direction:column; }
  .sched-page.is-vert .sched-lanes{ flex:1 1 auto; width:100%; }
  .sched-page.is-vert .lanes-row{ grid-template-columns:repeat(3,1fr); }
  .sched-page.is-vert .lane-strip{ flex-direction:row; max-height:none; }
}

/* ---- BOOKING SHEET: two columns, and the frame holds still ---- */
/* It was a single tall column, so everything below "who is going" needed a
   scroll. It is two columns on anything desktop-width: the booking details and
   repeat on the left, who is going and the customer message on the right.
   CORRECTED 27 Jul (tool 2, S12). This comment used to open "fits one screen,
   no scrolling" and end "with the actions pinned across the bottom", and
   NEITHER was true. Measured at 1440x900 with the repeat card and the crew
   picker open, the card was 1084.6px tall in a 900px viewport and "Book it in"
   sat 140px below the fold; .bk-actions is position:static and always has been.
   What is true now: css/design-c.css caps the card and scrolls #bk-body, so the
   title and Close never leave the screen and the form scrolls under them. The
   actions are still in normal flow and must stay there — js/visits.js:490
   appends the return-visit block AFTER .bk-actions, so a pinned footer would
   bury a live control. A comment describing behaviour the code does not have is
   how the next session reasons wrongly, so it is written as it is, not as it
   was meant to be. */
.bk-card-shell{ max-width:840px; width:min(840px,94vw); }
.bk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:11px; align-items:start; }
.bk-card{ margin-bottom:0; }
.bk-col{ display:flex; flex-direction:column; gap:11px; min-width:0; }
.bk-staff{ max-height:186px; overflow-y:auto; }
.bk-msg{ min-height:70px; }
.bk-actions{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width:820px){
  .bk-cols{ grid-template-columns:1fr; }
  .bk-card-shell{ max-height:88vh; overflow-y:auto; }
}

/* ---- REPEATS: presets first, full control underneath ---- */
.rp-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px; }
.rp-chip{ border:1px solid var(--line); background:var(--bg2); color:var(--text);
  border-radius:20px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600;
  cursor:pointer; min-height:34px; transition:border-color .12s, background .12s; }
.rp-chip:hover{ border-color:var(--muted); }
.rp-chip.on{ background:var(--yel); border-color:var(--yel); color:var(--yel-ink); font-weight:700; }
.rp-custom{ margin-left:auto; }
.rp-custom-body{ margin-top:11px; padding-top:11px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:9px; }
.rp-line{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.rp-line input[type=number]{ width:66px; }
.rp-line input, .rp-line select{ min-height:38px; padding:7px 10px; font-size:13px;
  border-radius:8px; border:1px solid var(--line); background:var(--bg2); color:var(--text); }
.rp-line input:focus, .rp-line select:focus{ border-color:var(--yel); outline:none; }
/* the weekday picker: M T W T F S S */
.rp-day{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg2); color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.rp-day:hover{ border-color:var(--muted); color:var(--text); }
.rp-day.on{ background:var(--yel); border-color:var(--yel); color:var(--yel-ink); }
.rp-hint{ font-size:11.5px; color:var(--muted); }
.rp-radio{ display:flex; flex-direction:row; align-items:center; gap:7px; font-size:12.5px;
  color:var(--text); font-weight:500; cursor:pointer; }
.rp-radio input{ width:16px; height:16px; accent-color:var(--yel); min-height:0; }
/* what you are actually going to get */
.rp-preview{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:11px;
  padding-top:10px; border-top:1px solid var(--line); }
.rp-preview-h{ font-size:11.5px; font-weight:700; color:var(--text); margin-right:2px; }
.rp-date{ font-size:11px; color:var(--muted); background:var(--bg2); border:1px solid var(--line);
  border-radius:6px; padding:3px 8px; white-space:nowrap; }
.rp-more{ font-size:11px; color:var(--muted); }

/* repeat card folds away: most jobs are one-offs, but the header always states
   whether a repeat is set, so collapsing it can never hide a surprise */
.bk-fold-h{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
  padding:0; font:inherit; color:var(--muted); cursor:pointer; text-align:left;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.bk-card-fold .bk-card-say{ margin-left:auto; }
.bk-card-fold .bk-card-say.is-set{ color:var(--amber); }
.bk-fold-x{ font-size:9px; color:var(--muted); }
.bk-card-fold.is-open .bk-fold-h{ margin-bottom:10px; }
/* the move-notify prompt */
.mv-when{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:12px; }
.mv-row{ display:flex; gap:10px; align-items:baseline; font-size:13px; }
.mv-row span{ flex:0 0 42px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.mv-row s{ color:var(--muted); }
.mv-new strong{ font-size:15px; }
.bk-who-travel{ display:block; font-size:10.5px; color:#c2410c; font-weight:600; margin-top:1px; }
.bk-who.is-tight{ border-color:color-mix(in srgb,#f0730a 55%,var(--line)); }
.jny-staff-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px 14px; margin-bottom:12px; }
.jny-staff-h{ display:flex; align-items:baseline; gap:10px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:8px; }
.jny-staff-h .muted{ margin-left:auto; text-transform:none; letter-spacing:0; }
.jny-staff-row{ display:flex; flex-wrap:wrap; gap:7px; }

/* who is going: a dropdown, so 25 engineers is still one line when shut */
.bk-who-dd{ position:relative; }
.bk-who-btn{ display:flex; align-items:center; gap:9px; width:100%; min-height:46px;
  padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg2);
  color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; text-align:left; }
.bk-who-btn:hover{ border-color:var(--muted); }
.bk-who-btn.has{ border-color:var(--yel); background:color-mix(in srgb,var(--yel) 14%,var(--bg2)); }
.bk-who-btn-t{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-who-caret{ font-size:9px; color:var(--muted); }
.bk-who-panel{ position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.32); }
.bk-who-find{ width:100%; padding:8px 10px; font-size:13px; border-radius:8px; margin-bottom:7px;
  border:1px solid var(--line); background:var(--bg2); color:var(--text); }
.bk-who-find:focus{ border-color:var(--yel); outline:none; }
.bk-who-opts{ display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; }
/* the ends control sits outside Custom now */
.rp-ends{ margin-top:10px; }

/* ============ v581 — the phone cert flow grows up ============ */
/* the invisible-preview fix: the app quote/invoice skin (#faq-screen) is an
   opaque fixed layer at z-index 1100, so the customer/send modals (100/210)
   opened UNDERNEATH it and read as dead buttons. .over-app lifts them into
   the gap below the bottom sheets (1200) while the skin is open. */
.modal.over-app{ z-index:1150; }
#send-modal.over-app{ z-index:1150; }
.qtpl-modal.over-app{ z-index:1150; }   /* v636: AI Price-check modal above the app quote screen */
/* v636: the app's filterable material picker (parity with the desktop) */
.fmb-ctrl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:2px 0 8px; }
.fmb-scope{ display:flex; gap:6px; }
.fmb-sup{ margin-left:auto; max-width:52%; }
.fmb-search{ width:100%; margin:0 0 8px; }
.fmb-list{ max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.fmb-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); cursor:pointer; }
.fmb-row-main{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.fmb-row-main b{ font-size:14px; }
.fmb-row-main span{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fmb-row-add{ font-size:20px; font-weight:700; color:var(--amber-ink,#8a5406); flex:0 0 auto; }

/* v581 audit: #so-prompt (the shared confirm/prompt/choose dialog, a plain
   .modal at z 100) opened UNDERNEATH the field bottom sheets (1200) and the
   app quote skin (1100) — so every soConfirm called from inside a cert sheet
   (delete a circuit, replace with a template, un-code an item, replace the
   board scan) was invisible: the tap did nothing you could see. It is a leaf
   dialog nothing legitimate covers, so lift it above the whole app-surface
   ladder, below only the error-trap/toast layers. */
#so-prompt{ z-index:1350; }

/* sheet header: a title and a guaranteed way out — full-height sheets hid the
   backdrop, and backdrop-tap was the only exit */
.fc-sheet-head{ position:sticky; top:-14px; margin:-14px -14px 10px; padding:12px 14px 8px;
  background:var(--bg2, var(--bg)); display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--line); z-index:3; border-radius:14px 14px 0 0; }
.fc-sheet-head .fa-sheet-h{ margin:0; }
.fc-sheet-x{ min-width:44px; min-height:44px; font-size:17px; flex:0 0 auto; }

/* N/A · LIM quick-fills on test cells */
.fc-f{ position:relative; }
.fc-qf{ display:flex; gap:4px; margin-top:4px; }
.fc-qf button{ min-height:32px; padding:2px 10px; font-size:11.5px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg2); color:var(--muted); }
.fc-qf button:active{ background:var(--yel); color:#111; }

/* the canned-defect library rows in the finding sheet */
.fc-lib{ display:flex; gap:8px; align-items:flex-start; width:100%; text-align:left;
  padding:10px; margin:4px 0; border-radius:10px; border:1px solid var(--line);
  background:var(--bg2); color:var(--text); font-size:12.5px; line-height:1.35; min-height:44px; }
.fc-lib .fc-obscode{ flex:0 0 auto; }
.fc-lib:active{ border-color:var(--yel); }

/* photo thumbnails with a working remove */
.fc-photorow{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.fc-photothumb{ position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; flex:0 0 auto; }
.fc-photothumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fc-photothumb button{ position:absolute; top:0; right:0; width:24px; height:24px; border:0;
  background:rgba(0,0,0,.65); color:#fff; font-size:12px; border-radius:0 0 0 8px; }

/* a finding that still needs its words */
.fc-ckt-todo{ border-style:dashed; }

/* scan status host (per board) */
.cert-scan-status{ margin:6px 0; }

/* the preview scale fit leaves the page block-level — keep it from spilling */
#certprint-doc{ overflow-x:hidden; }

/* ════════ v657 — THE TEAM PORTFOLIO ════════
   The Team page as a list of people, and one full-screen record per person that works
   the same on a desk and in a van. Modelled on the v647 Build editor (.be-screen) so
   there is one full-screen idiom in the app, not two. */

/* --- the people list --- */
.tm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-top:4px; }
.tm-card{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg2); cursor:pointer; text-align:left; }
.tm-card:hover{ border-color:var(--yel); }
.tm-av{ width:46px; height:46px; border-radius:50%; flex:0 0 auto; object-fit:cover; display:block; }
.tm-av-i{ display:grid; place-items:center; font-weight:800; font-size:15px; color:#08090b; letter-spacing:.5px; }
.tm-card-l{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-card-n{ font-weight:700; font-size:15px; }
.tm-card-r{ font-size:12px; color:var(--muted); }
.tm-card-go{ color:var(--muted); font-size:20px; flex:0 0 auto; }
.tm-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.tm-chip{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:14px;
  border:1px solid var(--line); background:var(--panel); font-size:11.5px; color:var(--muted);
  text-transform:none; letter-spacing:0; white-space:nowrap; }
.tm-chip-green{ color:#34d399; border-color:#34d39955; }
.tm-chip-amber{ color:#f0a020; border-color:#f0a02055; }
.tm-chip-red{ color:#f87171; border-color:#f8717155; }
.tm-chip-none{ opacity:.75; border-style:dashed; }
.tm-chip-link{ text-decoration:none; }

/* --- the approval queue --- */
.tm-req{ border:1px solid var(--line); border-radius:12px; padding:12px; margin:8px 0; background:var(--bg2); }
.tm-req-h{ font-size:14px; margin-bottom:4px; }
.tm-req-a{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tm-clash{ margin-top:8px; padding:8px 10px; border-radius:9px; background:var(--panel);
  border:1px solid #f0a02044; font-size:12.5px; color:var(--muted); }
.tm-clash-j{ padding-left:10px; }

/* --- the portfolio overlay --- */
.sp-screen{ position:fixed; inset:0; z-index:1200; background:var(--bg,#08090b); display:none; }
.sp-screen.open{ display:block; }
body.sp-lock{ overflow:hidden; }
.sp-shell{ display:flex; flex-direction:column; height:100%; max-width:880px; margin:0 auto; }
.sp-top{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line);
  background:var(--panel); position:sticky; top:0; z-index:2; }
.sp-top-title{ font-weight:700; font-size:15px; flex:1; text-align:center; }
.sp-back{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); font-size:15px; cursor:pointer; flex:0 0 auto; }
.sp-done{ min-width:74px; }
.sp-body{ flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }

.sp-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.sp-av-wrap{ position:relative; cursor:pointer; flex:0 0 auto; }
.sp-av{ width:62px; height:62px; border-radius:50%; object-fit:cover; display:block; }
.sp-av-i{ display:grid; place-items:center; font-weight:800; font-size:20px; color:#08090b; }
.sp-head-l{ flex:1; min-width:0; }
.sp-name{ width:100%; box-sizing:border-box; font-size:19px; font-weight:700; padding:8px 10px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); }
.sp-head-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }

.sp-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.sp-tab{ padding:7px 13px; border:1px solid var(--line); border-radius:16px; background:var(--bg2);
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  text-transform:none; letter-spacing:0; }
/* --yel is the BRAND fill; --amber is redefined as text-on-white in the light theme
   (style.css:1609), so filling with it gives dark-on-dark. Same trap the money chips hit. */
.sp-tab.on{ background:var(--yel,#ffdd33); color:var(--yel-ink,#0b0c0e); border-color:var(--yel,#ffdd33); }
.sp-tabdot{ display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; font-size:10px; font-style:normal; font-weight:800; color:#08090b; margin-left:4px; }
.sp-tabdot.red{ background:#f87171; } .sp-tabdot.amber{ background:#f0a020; }

.sp-sec{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:12px; }
.sp-sec h4{ margin:0 0 10px; font-size:14px; display:flex; align-items:center; gap:8px; }
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; }
.sp-f{ display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.sp-f input, .sp-f select{ padding:8px 10px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg2); color:var(--text); font:inherit; font-size:13px; width:100%; box-sizing:border-box; }
.sp-ta{ width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid var(--line);
  border-radius:9px; background:var(--bg2); color:var(--text); font:inherit; resize:vertical; }

.sp-row{ border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; background:var(--bg2); }
.sp-row-main{ display:flex; gap:8px; flex-wrap:wrap; }
.sp-row-dates{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.sp-in{ padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel);
  color:var(--text); font:inherit; font-size:13px; flex:1 1 130px; min-width:0; }
.sp-in-name{ flex:2 1 210px; }
.sp-datelab{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted);
  flex-direction:row; text-transform:none; letter-spacing:0; width:auto; }
.sp-datelab input{ padding:6px 8px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel); color:var(--text); font:inherit; font-size:12.5px; }
.sp-hint{ margin-top:6px; font-size:11.5px; color:var(--muted); font-style:italic; }
.sp-quickwrap{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0; }
.sp-quick{ padding:5px 10px; border:1px dashed var(--line); border-radius:14px; background:var(--bg2);
  color:var(--muted); font:inherit; font-size:11.5px; cursor:pointer; }
.sp-quick:hover{ border-color:var(--yel); color:var(--text); }

.sp-bal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; }
.sp-bal-c{ border:1px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; background:var(--bg2); }
.sp-bal-c b{ display:block; font-size:20px; line-height:1.1; }
.sp-bal-c span{ font-size:11px; color:var(--muted); }
.sp-bal-c.is-green b{ color:#34d399; } .sp-bal-c.is-amber b{ color:#f0a020; } .sp-bal-c.is-red b{ color:#f87171; }

.sp-ticks{ display:flex; flex-wrap:wrap; gap:8px; }
.sp-tick{ display:flex; flex-direction:row; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg2); font-size:12.5px;
  text-transform:none; letter-spacing:0; width:auto; }

/* a phone holds one column of everything */
@media (max-width:600px){
  .tm-grid{ grid-template-columns:1fr; }
  .sp-body{ padding:12px; }
  .sp-row-main, .sp-row-dates{ flex-direction:column; align-items:stretch; }
  .sp-in{ flex:1 1 auto; }
}

/* the Compliance roll-up that replaced the per-person edit rows */
.cmp-rollup{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:6px; background:var(--bg2); }
.cmp-rollup-l{ flex:1; min-width:0; }

/* .status-pill is display:flex app-wide, so inside a block <span> it stretches to the
   full row. Keep it a pill on the Team page and in the portfolio. */
#staff-portfolio .status-pill, #team-body .ap-row .status-pill, .tm-req .status-pill{
  display:inline-flex; width:auto; vertical-align:middle; }

/* v658 — book time off from the van (the More tab sheet) */
.fa-lv-types{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fa-lv-type{ padding:8px 13px; border:1px solid var(--line); border-radius:16px; background:var(--panel2);
  color:var(--muted); font:inherit; font-size:12.5px; font-weight:700; min-height:36px;
  text-transform:none; letter-spacing:0; }
.fa-lv-type.on{ background:var(--yel,#ffdd33); color:var(--yel-ink,#0b0c0e); border-color:var(--yel,#ffdd33); }
.fa-lv-dates{ display:flex; gap:8px; }
.fa-lv-dates label{ flex:1; display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted);
  text-transform:none; letter-spacing:0; }
.fa-lv-dates input{ width:100%; box-sizing:border-box; min-height:44px; }
.fa-lv-half{ display:flex; flex-direction:row; align-items:center; gap:8px; margin:9px 0 2px;
  font-size:13px; min-height:44px; text-transform:none; letter-spacing:0; width:auto; }
.fa-lv-sum{ margin:2px 0 10px; }
.fa-lv-sumline{ font-size:14px; }
.fa-lv-warns{ margin-top:7px; padding:8px 10px; border-radius:9px; background:var(--panel2);
  border:1px solid #f0a02055; font-size:12.5px; color:var(--muted); }
.fa-lv-warn{ color:#f87171; font-weight:700; }
.fa-lv-hist{ margin-top:12px; border-top:1px solid var(--line); padding-top:9px; }
.fa-lv-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:12.5px; padding:5px 0; }
.fa-lv-row em{ color:var(--muted); font-size:11.5px; width:100%; }
.fa-lv-pill{ padding:1px 8px; border-radius:12px; font-size:10.5px; font-weight:800; color:#08090b; }
.fa-lv-requested{ background:#ffdd33; } .fa-lv-approved{ background:#34d399; } .fa-lv-declined{ background:#f87171; }

/* ════════ v660 — THE INSPECTION PACKS (Compliance & Fleet) ════════ */
.insp-pack{ border-left:3px solid var(--yel,#ffdd33); }
.insp-setup{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0 14px; }
.insp-scopes{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:10px; }
.insp-bar{ height:8px; border-radius:5px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; margin:2px 0 6px; }
.insp-bar-f{ height:100%; background:var(--green,#34d399); transition:width .25s ease; }
.insp-count{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.insp-left{ color:#f0a020; font-weight:700; }

/* ⚠ v851 — `overflow:hidden` HERE MADE THE FOCUS RING ON THE PACK'S PRIMARY CONTROL
   COMPLETELY INVISIBLE, and it was invisible before this change too. The ring is an
   OUTLINE with `outline-offset:2px` (css/design-c.css:120), so it is painted outside
   the button's border box — and the button fills this group's content box exactly.
   Measured at 1440 with the header focused: button top 424.9 / left 264, group top
   423.9 / left 263, ring reaching 420.9 / 260 — outside the clip on three sides, and a
   screenshot of the focused header showed no ring at all. WCAG 2.4.7.
   It mattered little while focus fell to <body> on every toggle; now that inspOpen()
   hands focus back, this IS the keyboard user's only feedback. The clip only existed
   to round the header's corners, so the radius moves onto the header and the body,
   which does the same job and clips nothing. */
.insp-group{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; }
.insp-group-h{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 13px; background:var(--bg2);
  border:0; color:var(--text); font:inherit; font-size:15.5px; font-weight:700; cursor:pointer; text-align:left;
  text-transform:none; letter-spacing:0; min-height:48px; border-radius:9px; }
.insp-group.open .insp-group-h{ border-bottom:1px solid var(--line); border-radius:9px 9px 0 0; }
.insp-chev{ color:var(--muted); font-size:12px; }
.insp-group-t{ flex:1; }
.insp-group-n{ font-size:11.5px; font-weight:800; color:var(--muted); border:1px solid var(--line);
  border-radius:12px; padding:1px 9px; }
.insp-group-n.all{ color:#34d399; border-color:#34d39955; }
.insp-group-b{ padding:12px; border-radius:0 0 9px 9px; }

/* ⚠ v851 — THE ROW FAMILY IS `.ipk-*` AND MUST NOT GO BACK TO `.insp-row*`.
   `.insp-row` is ALSO declared at :1037 above, for the EICR Schedule of Inspections
   inside the CERTIFICATE EDITOR (js/certs.js:3291) — a different component, seven
   thousand lines up, same class name. Both rules are (0,1,0) with no !important, so
   the cascade split them PER PROPERTY: this block won `display`, `padding` and
   `border-top`, and :1037's `border-bottom:1px dashed` and `font-size:12px` came
   through UNCONTESTED. Every middle row painted two hairlines 1px apart, one solid and
   one dashed, at 1.45:1 light / 1.30:1 dark. The comment that used to sit here blamed
   "something up the tree" for flexing the row; the something was line 1037.
   Renaming is the only fix that closes an UNCONTESTED leak — scoping or out-specifying
   raises the specificity only of properties this block actually sets, and :1037 would
   keep both of those. `.insp-row` was the only class the two families genuinely shared;
   `.insp-defer`/`.insp-defer-tick` are shared deliberately (js/certs.js:2170).

   AND THE ROW IS A CARD, because no line in the closed palette can do this job:
   composited against the panel, `--c-line` is 1.45:1 light / 1.30:1 dark and
   `--c-line-strong` is 2.09 / 1.89, while every ground step available is about 1.1:1.
   Nothing but `--c-mut` reaches WCAG 1.4.11's 3:1, and twenty-two dark grey rules
   would be worse than the problem. So SPACE separates and the card carries the ground:
   the gap between rows is the boundary, and the hairline is refinement rather than the
   only cue. The 22px of dead vertical padding this block used to spend becomes a real
   8px gutter. */
.ipk-row{ display:block; padding:10px 12px; margin:0 0 7px; border-radius:10px;
  border:1px solid var(--line); font-size:13px; }
.ipk-row:last-child{ margin-bottom:0; }
/* NOTE FOR ANYONE ADDING A STATE HERE: `.insp-row.is-na` used to carry `opacity:.5`,
   and opacity multiplies EVERY contrast in the subtree — the 12.5px help text
   composited to 2.11:1 against white, a real WCAG 1.4.3 failure that four contrast
   sweeps missed because none of their fixtures had a row marked not-for-us. A row set
   aside is still a row somebody reads back before the assessment (§4a: it is an ANSWER,
   not an absence). Both answered states are marked with a GROUND and keep their ink —
   see css/design-c.css block 12a, which carries the measured numbers. Do not reach for
   opacity to de-emphasise a row. */
.ipk-row-h{ display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap; }
/* `flex:1 1 0`, NOT `1 1 auto`, and the difference is visible. With an `auto` basis the
   title's hypothetical size is its max-content width, so a long one ("Public liability
   insurance — at least £2 million") does not fit beside the state dot and flex wraps it
   to the next line — leaving the dot stranded on a line of its own at 390. A zero basis
   lets it sit next to the dot and then grow, which is what the original `flex:1` did.
   Caught in a screenshot of a row with a document on it, not by any measurement. */
.ipk-row-t{ font-weight:600; font-size:13.5px; flex:1 1 0; min-width:150px; }
/* `when` used to be concatenated into the grade badge, which turned a pill into a
   232px sentence at 390 and pushed the title onto three lines. Same words, own line. */
.ipk-when{ font-size:12px; margin:5px 0 0; padding-left:26px; }
.ipk-help{ font-size:12.5px; line-height:1.5; margin:4px 0 0; padding-left:26px; }
.insp-note{ font-size:12px; margin:6px 0 0 26px; padding:7px 10px; border-radius:8px;
  background:var(--panel); border:1px solid #f0a02055; color:var(--muted); }
.ipk-row-a{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:9px 0 0 26px; }
/* "Not for us" sits in the row HEAD now (js/inspection.js), pushed to the far end so it
   reads as the row's own switch rather than as another control in the strip. */
.ipk-na{ margin-left:auto; }
.insp-noteinput{ flex:1 1 180px; min-width:120px; padding:6px 9px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg2); color:var(--text); font:inherit; font-size:12.5px; }
.insp-tick{ display:flex; flex-direction:row; align-items:center; gap:6px; font-size:12px; color:var(--muted);
  text-transform:none; letter-spacing:0; width:auto; white-space:nowrap; }
.insp-src{ font-size:11.5px; color:var(--muted); }
.insp-dot{ width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); flex:0 0 auto;
  display:inline-grid; place-items:center; font-size:11px; font-weight:800; margin-top:1px; }
.insp-dot-ok{ background:#34d399; border-color:#34d399; color:#08090b; }
.insp-dot-na{ color:var(--muted); }
.insp-dot-red{ border-color:#f8717188; }
.insp-badge{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:12px; border:1px solid var(--line);
  color:var(--muted); white-space:normal; }
.insp-must{ color:#f87171; border-color:#f8717155; }
.insp-expect{ color:#f0a020; border-color:#f0a02055; }
.insp-if{ color:var(--muted); }
.insp-law{ color:#8aa; border-style:dashed; }

/* ⚠ v851 — THE THREE RULES THAT USED TO BE HERE COST 106px A ROW AND ONE OF THEM WAS A
   UNIT BUG.

   1. `.insp-row-a{ flex-direction:column }` turned the control strip on its side, and
      `.insp-noteinput{ flex:1 1 150px }` then applied its basis to the VERTICAL main
      axis. flex-basis in a column container is a HEIGHT. A single-line "Your note
      (optional)" field rendered 300 x 150px at 390 and looked like a broken textarea.
      Proved with a paired control at 390: as shipped 300x150 in a 539px row; forced
      back to `row`, 228x44 in a 329px row; kept column with `flex:0 0 auto`, 300x44 in
      a 433px row. Eight rows in one section, 848px of nothing, 22% of the open section.
      At 1440 the same declaration behaves, because there the axis is horizontal —
      which is exactly why reading the declaration never found it.
   2. Removing the 26px hanging indent left the help text and the controls sitting
      26px to the LEFT of the title they belong to: measured at 390, title x=71 while
      help and actions were both x=45. The indent is the only thing saying those lines
      belong to that row, and it was being dropped on the one screen where they are
      furthest apart. 26px of 300 is a cheap price; it is halved rather than removed.
   3. `width:100%` was fighting the flex basis rather than fixing it.

   So the strip WRAPS instead of stacking: the ticks and the source link share a line
   and the note takes the next, every control keeping the 44px it already had. */
@media (max-width:600px){
  /* THE INDENT IS KEPT AT ITS FULL 26px, not halved and not dropped. It is exactly the
     state dot (17px) plus the head's gap (9px), so the help, the `when` clause and the
     controls line up UNDER THE TITLE they belong to. Dropping it was measured at 390
     as title x=71 with help and actions both at x=45 — the supporting content hanging
     26px to the LEFT of the thing it supports, on the one screen where they are
     furthest apart. Halving it was my own first attempt and it was worse than either:
     the text lined up with nothing at all. */
  .ipk-when, .ipk-help, .insp-note, .ipk-row-a{ margin-left:0; padding-left:26px; }
  .ipk-row-a{ flex-wrap:wrap; align-items:center; }
  /* min-width:0 as well as the 100% basis: the base rule's `min-width:120px` was the
     last thing pushing the page wider than its own viewport at 195px — 200% zoom on a
     390 handset, below WCAG's 320px reference so never an AA failure, but free to fix
     once the field takes the full row anyway. */
  .insp-noteinput{ flex:1 1 100%; min-width:0; }
  /* the head wraps here, and `margin-left:auto` then throws "Not for us" to the far
     right of a line of its own, reading as though it belonged to nothing. On a phone it
     wraps under the title with the rest of the row. */
  .ipk-row-h{ row-gap:6px; }
  .ipk-na{ margin-left:26px; }
}
/* iOS zooms the page whenever a focused input is under 16px and never zooms back out.
   The global rule for that (v661, below) is `input, select, textarea{ font-size:16px }`
   at <=820px — an ELEMENT selector, so `.insp-noteinput`'s own class beat it and the
   note field stayed 12.5px on a phone. PRODUCT.md makes 16px inputs a hard constraint
   on this product, so the pack's own controls restate it at their own specificity.
   `.sp-f` and `.sp-tick` are NOT touched here: they are shared with the staff
   portfolio, which another lane owns. */
@media (max-width:820px){
  .insp-noteinput{ font-size:16px; }
  .insp-setup select, .insp-setup input[type=text], .insp-setup input:not([type]){ font-size:16px; }
}


/* ════════ v661 — PHONE INPUT ZOOM, AND THE NATIVE FEEL ════════
   iOS zooms the page whenever a focused input's font is under 16px and never zooms back
   out. Body font here is 14px and inputs are font:inherit, so every field in the engineer
   app — receipt amount, mileage, parts search, job note, signature name, checklist — pulled
   the page in and left it there. Certificate fields were already exempted at 16px; this is
   the same rule for the rest of the field surface. Desktop is untouched.
   The brief for the phone app was that it should never need pinching. This is that. */
@media (max-width:820px){
  input, select, textarea,
  .fa-sheet input, .fa-sheet select, .fa-sheet textarea,
  #view-engday input, #view-engjob input,
  #view-engday select, #view-engjob select,
  #view-engday textarea, #view-engjob textarea{ font-size:16px; }
}

/* The WKWebView tells: long-press pops the iOS Copy/Look Up/Share callout on any job text,
   photos offer "Save Image", every tap flashes the grey web highlight and the page
   rubber-bands at the top like a browser. Each one reads to an App Store reviewer as
   "this is a website in a frame" (Guideline 4.2). Text you might genuinely want to copy —
   an address, a phone number, a note — keeps selection deliberately. */
body.eng-mode, body.eng-mode *{
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
body.eng-mode input, body.eng-mode textarea,
body.eng-mode .fa-jobrow-addr, body.eng-mode .fa-jobrow-name,
body.eng-mode [data-selectable]{
  -webkit-touch-callout:default; -webkit-user-select:text; user-select:text;
}
body.eng-mode{ overscroll-behavior-y:contain; }

/* ═══════════════════════════════════════════════════════════════════════════
   v663 — ONE identity, ONE switcher. js/acctbar.js
   Jamie: "I dont really understand which account i am in, how to switch between
   and what is going on. this needs to be very, very simple."
   ═══════════════════════════════════════════════════════════════════════════ */

/* the chip replaces the wordmark at the TOP of the sidebar — above the nav, which is a
   20-item scroller that does not fit (see the note at style.css:62), so anything that
   lives below it can scroll out of sight exactly when you need it. */
/* ⚠️ color:inherit, NOT var(--text). The sidebar is a DARK rail in BOTH themes, while
   --text is near-black in the light theme (which is the default for the office desk —
   js/extras.js:757). Setting var(--text) here rendered the account name black on charcoal:
   caught in the browser, not by a gate. Inherit the rail's own light colour instead. */
.acct-chip{
  display:flex; align-items:center; gap:8px; width:100%; min-width:0;
  background:none; border:0; padding:2px 0 2px 4px; margin:0; cursor:pointer;
  color:inherit; font:inherit; text-align:left; border-radius:8px;
}
.acct-chip:hover{ background:rgba(255,255,255,.06); }
.acct-chip-static{ cursor:default; }
.acct-chip-static:hover{ background:none; }
.acct-chip .ac-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.acct-chip .ac-name{
  font-size:14px; font-weight:800; letter-spacing:-.2px; color:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
/* explicit light values, not var(--muted) — same dark-rail reason as above */
.acct-chip .ac-kind{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:rgba(255,255,255,.55);
}
.acct-chip .ac-caret{ margin-left:auto; color:rgba(255,255,255,.5); font-size:12px; flex-shrink:0; }
.ac-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px rgba(0,0,0,.25); }

/* the peripheral signal — 3px, not 44px. The old managing bar took 6.6% of a 667px
   viewport; this takes 0.45% and is visible without being read. */
#acct-hair{ position:fixed; top:0; left:0; right:0; height:3px; z-index:130; pointer-events:none; }

/* ---------- the phone pill ----------
   At <=860px the sidebar is off-canvas, so identity cannot live in it. Sits BESIDE the
   ☰ button (which is top:12px left:12px z-120) and deliberately BELOW it in z-order, so
   it can never bury the menu — the old bar was z-9990, opaque and full-width, and did. */
#acct-pill{ display:none; }
@media (max-width: 860px){
  #acct-pill{
    display:flex; align-items:center; gap:7px;
    position:fixed; top:calc(12px + env(safe-area-inset-top, 0px)); left:64px; z-index:110;
    max-width:calc(100vw - 150px);
    background:var(--panel2); color:var(--text); border:1px solid var(--line);
    border-radius:10px; padding:8px 11px; font-size:12.5px; font-weight:700;
    box-shadow:0 4px 16px rgba(0,0,0,.4); cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-height:44px;            /* glove-friendly — measured at 33px before this */
  }
  #acct-pill.is-client{ border-color:var(--acct-col,#3fe3ff); }
  .menu-btn{ top:calc(12px + env(safe-area-inset-top, 0px)); }
  #acct-hair{ height:3px; }
}

/* ---------- the switcher ---------- */
#acct-panel{ position:fixed; inset:0; z-index:10050; background:rgba(8,9,11,.72);
  display:flex; align-items:flex-start; justify-content:flex-start; padding:0; }
.ap-sheet{
  width:min(360px,92vw); max-height:100vh; max-height:100dvh; overflow:auto;
  background:var(--panel); border-right:1px solid var(--line);
  padding:14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  box-shadow:12px 0 40px rgba(0,0,0,.5);
}
.ap-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ap-head strong{ font-size:15px; }
.ap-x{ background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; min-height:44px; min-width:44px; }
.ap-row{
  display:flex; align-items:center; gap:10px; width:100%; min-height:56px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:9px 12px; margin-bottom:7px; cursor:pointer; color:var(--text);
  font:inherit; text-align:left;
}
.ap-row:hover:not(:disabled){ border-color:var(--acct-col,#3fe3ff); }
.ap-row:disabled{ cursor:default; opacity:.72; }
.ap-txt{ display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2; }
.ap-name{ font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-sub{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-go{ color:var(--muted); font-size:12px; flex-shrink:0; }
.ap-home{ border-color:rgba(255,221,51,.5); background:rgba(255,221,51,.08); }
.ap-div{ height:1px; background:var(--line); margin:10px 2px 12px; }
.ap-here{ border-style:dashed; }

/* ---------- the "you are in a client's account" bar, fixed ----------
   Was z-9990 (over the hamburger), no safe-area inset, and a hardcoded
   body{padding-top:44px} reserve that a 90-character sentence overflows at 375px. */
#hq-manage-bar{ z-index:108; padding-top:calc(7px + env(safe-area-inset-top, 0px)); flex-wrap:wrap; }

/* On a phone the bar is GONE and the pill carries the warning instead. Two indicators
   competing for the top-left corner is what buried the ☰ button, and the menu is where
   every escape hatch lives. One loud pill = one indicator, no fixed-height reserve to
   overflow, no z-index race, and it is already the thing you tap to switch. */
@media (max-width: 860px){
  #hq-manage-bar{ display:none; }
  body.hq-managing{ padding-top:0; }
  body.hq-managing #acct-pill{
    background:linear-gradient(100deg,#ffdd33,#3fe3ff); color:#08090b;
    border-color:transparent; font-weight:800;
  }
  body.hq-managing #acct-pill .ac-dot{ box-shadow:0 0 0 2px rgba(0,0,0,.35); }
  body.hq-managing #acct-pill .ac-caret{ color:#08090b; }
}

/* v664 — Job history on the job card: a real heading, and it folds.
   Its old `.sec-head` was hidden by `.job-pane .sec-head{display:none}` (style.css:1830 —
   "the active tab IS the heading"), which is right for a tab's own title but also killed
   every nested sub-heading in the pane. Own class, so it never collides with that rule. */
.job-hist > .jh-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; cursor:pointer;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; letter-spacing:-.1px;
  color:var(--text); padding:8px 2px; margin:0 0 8px; list-style:none;
  border-bottom:1px solid var(--line);
}
.job-hist > .jh-head::-webkit-details-marker{ display:none; }
.job-hist > .jh-head::after{
  content:'⌄'; margin-left:auto; color:var(--muted); font-size:13px;
  transition:transform .18s ease;
}
.job-hist[open] > .jh-head::after{ transform:rotate(180deg); }
.job-hist > .jh-head:hover{ color:var(--yel); }
/* ⚠️ A closed <details> hides its children via a UA rule that ANY explicit `display`
   declaration beats — and `.hist-row{display:flex}` does exactly that, so the fold changed
   the height but left every row on screen. Caught by measuring in a browser; a gate that only
   checked for `<details>` would have called this done. Specificity here (0,3,0) beats
   `.hist-row` (0,1,0) without needing !important. */
.job-hist:not([open]) > *:not(.jh-head){ display:none; }
/* ⚠️ NOT `muted small` — there is a global `summary .muted.small{display:none!important}`
   (it stops sub-labels showing in fold headers elsewhere), so the count and lifetime value
   silently vanished the moment this heading became a <summary>. Own class, own rule. */
.job-hist > .jh-head .jh-sub{
  font-size:11.5px; font-weight:500; color:var(--muted);
  text-transform:none; letter-spacing:0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   v668 — THE JOB CARD FACELIFT
   Jamie: "there is just something that doesnt feel nice to look at or nice to work on
   - i dont feel its completely on brand with the rest of the site ... the whole look
   and feel to the page is lacking something. i do not want a full redesign, but i
   would like you to give it a face lift. its all a bit overwhelming at the moment."
   A FACELIFT: no restructuring, no new layout system. Appended at the end ON PURPOSE —
   .job-tabs and .job-pane are each declared four or five times mid-file, so source
   order is the safe lever rather than a specificity arms race.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* #2 · The nine nested pane headings, un-hidden — additively.
   css/style.css:1830 says `.job-pane .sec-head{display:none}` with the note "the active
   tab IS the heading" - right for a pane's OWN title, wrong for every sub-heading
   inside it. Nine were being rendered and thrown away, including their counts:
   "Job log — 3 notes · 1 to-do open · 6h logged / 8h quoted", "Actual costs — £812",
   and the three separators that make the Activity tab readable instead of three
   unlabelled lists run together. Opted in per heading with .jp-sub so :1830 keeps
   doing its job everywhere else. */
.job-pane .sec-head.jp-sub{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  /* !important on the face and the tracking ONLY because .sec-head at style.css:2131 sets
     `font-family:var(--font-ui) !important` — an !important can only be answered with one.
     Everything else here wins on specificity alone. */
  font-family:var(--font-display) !important; letter-spacing:-.1px !important;
  font-size:13.5px; font-weight:600;
  color:var(--text); background:none; border:0; border-bottom:1px solid var(--line);
  padding:0 0 7px; margin:2px 0 12px; border-radius:0; text-transform:none;
}
.job-pane .sec-head.jp-sub .muted{ font-weight:500; }

/* #4 · Make the lines visible. Every hairline was --line #e5e4dc on #ffffff, which is
   1.28:1 — the card edges were very nearly invisible, and that is a big part of why the
   accents had to shout to give the page any structure.
   HONEST NOTE ON THE NUMBERS: WCAG 1.4.11 wants 3:1 for a component boundary and this
   does NOT reach it. 3:1 on white needs about #949086, which on every card edge reads
   heavy and stops being a hairline. So: the general hairline goes to #d8d7cc (1.45:1)
   and structural card edges to #b5b4a6 (2.09:1) — a 63% improvement on 1.28 that still
   reads as a hairline. Do not let anyone record this as WCAG-compliant; it is a
   deliberate, measured compromise for a facelift. Raising it further is a design call. */
body.theme-light{ --line:#d8d7cc; }
body.theme-light .job-pane,
body.theme-light .ov-msgs,
body.theme-light .job-hist,
body.theme-light #jc-tasks{ border-color:#b5b4a6; }
.jd-note{ border-bottom-style:solid; }

/* #5 · Clash Display on the money, and give it size. The job's value was the same
   14.5px/650 as the words "not yet" beside it, and not one £ inside #job-chip carried
   the display face that the Jobs list, Leads and the Desk all use. Also retires the
   invented 650/800 weights — Satoshi ships 400/500/700. */
.ov-facts span, .hist-val strong, .bk-row span, .jd-note strong, .tot-row span:last-child{
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
}
.ov-facts span{ font-size:19px; font-weight:600; }

/* #6 · The tab strip becomes the app's own pill row (.sp-tab / .be-vtab idiom).
   The shingled-folder look breaks the moment it wraps — the expanded strip is ~1380px
   against ~1118px of content at 1440px, and only :first-child clears the -9px margin,
   so row two's lead tab hung outside the padding. And the active tab was #16181d on
   --panel #14161c in dark: invisible. This also brings brand yellow back as a real
   FILL, which the light theme had none of. */
/* The light theme carries its OWN higher-specificity copies of these
   (`body.theme-light .job-tabs .tab.active` = 0,3,1 against a bare `.job-tabs .tab.active`
   = 0,2,1), and they live in a comma list, so each selector is weighed separately and being
   later in the file does not help. Matched selector-for-selector rather than reached for
   !important. */
.job-tabs{ gap:6px; border-bottom:none; padding:0; }
.job-tabs .tab,
body.theme-light .job-tabs .tab{ margin:0; border-radius:16px; }
.job-tabs .tab.active,
body.theme-light .job-tabs .tab.active{
  background:var(--yel); border-color:var(--yel); color:var(--yel-ink);
  box-shadow:none; padding-top:10px;
}
.job-tabs .tab-action,
body.theme-light .job-tabs .tab-action{ border-radius:16px; }

/* #7 · Quieten the counters. Up to EIGHT yellow pills at once turned the action colour
   into wallpaper. Grey by default, inverted on the one active tab, and genuinely urgent
   counts stay red. */
.job-tabs .tab-ct{ background:rgba(127,127,127,.14) !important; color:var(--muted) !important; }
.job-tabs .tab.active .tab-ct{ background:rgba(0,0,0,.16) !important; color:var(--yel-ink) !important; }
.job-tabs .tab-ct.tab-ct-warn{ background:rgba(248,113,113,.18) !important; color:#dc2626 !important; }

/* #8 · The four --amber-as-fill sites he actually touches. --amber is #8a6800 BROWN in
   the light theme (style.css:1609 says so in its own comment: "--yel is the BRAND fill;
   --amber is text-on-white only"), so the SELECTED quote option was ringed in brown and
   read as disabled. --yel is #ffdd33 in both themes, so the risk is nil. */
.opt-bar{ border-left-color:var(--yel); }
.opt-chip.on{ border-color:var(--yel); }
.att-chip input[type=checkbox]{ accent-color:#d9a900; }
.att-chip:has(input:checked){ border-color:var(--yel); background:color-mix(in srgb, var(--yel) 18%, transparent); }

/* #9 · Retire one nesting level. Overview was four nested surfaces deep — main #f7f7f4
   -> #job-chip #f4f4f0 -> .ov-pane #fff -> .job-hist #f0f0ec -> .hist-row — separated by
   1.28:1 borders. The panes become the surface, exactly as .sp-sec and .fo-card already
   do elsewhere. Scoped to #job-chip only: #job-chip::before is shared with .modal-card. */
#job-chip{ background:transparent; border:none; padding:0 0 4px; }

/* #10 · Loosen Customer & contact. repeat(4, minmax(140px,1fr)) plus the global
   `label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}` gave
   twelve boxed cells with ten grey micro-labels and no title — the most spreadsheet-like
   thing on the card. Already minmax, so nothing reflows badly. */
.job-cust{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }

/* #11 · Let the panes breathe. Costs, Activity, Timesheets and Certs were rendering into
   the left 60% of a full-width white card. Prose keeps a measure; tables do not. */
.jd-body{ max-width:none; }
.jd-log .jd-body{ max-width:76ch; }

/* ═══ v819 · THE DEAD END: A DRAWER THAT WOULD NOT CLOSE OVER A MODAL ═══════════════
   Jamie, v818: "you cant actually back out of the preview and i have opened the
   hamburger trying to back out and now it wont close the hamburger menu."

   MEASURED, not reasoned: #menu-backdrop is 98, .modal is 100, #menu-btn is 120,
   #sidebar is 1000 (an ID, so it beats both .sidebar class rules) and .modal.over-app
   is 1150. toggleMenu has exactly two call sites in the product — the hamburger and
   the scrim — and with any modal open BOTH are buried. elementFromPoint over the scrim
   returned a SPAN inside #certprint-doc; elementFromPoint on the hamburger returned the
   open drawer's own logo. It is not a certificate defect: it reproduces on #kit-modal,
   and all sixteen .modal elements carry it.

   TWO RULES, BOTH SCOPED TO body.menu-open — the drawer only takes this layer while it
   is actually open, so nothing changes for any other screen. It clears .modal.over-app
   (1150), which is the highest modal in the tree, and stays well under #solar-studio
   (2000) and #cloud-gate (10060) — neither of which may be walked over. */
body.menu-open #menu-backdrop.open{ z-index:1160; }
body.menu-open #sidebar{ z-index:1170; }

/* And the hamburger. The stylesheet ALREADY says it belongs on top of the open drawer —
   .sidebar .logo and .view-head each reserve a 60px left gutter for it — and #sidebar's
   z-index:1000, added at v445 to clear #fa-tabbar, buried it without that being noticed.
   Over an open modal with the drawer SHUT it goes the other way and is hidden: it is a
   41x36 control floating exactly where every other full-screen surface in this app puts
   Back (.fa-iconbtn in .fa-topbar2), it overlapped the preview's own title by 37x15px,
   and elementFromPoint on that title returned the hamburger — which is precisely how a
   man trying to leave a preview ended up in a menu he could not shut. `display:none` is
   the idiom already chosen for this exact situation: css/design-c.css does the same to
   #fa-tabbar over an open modal. Once the drawer IS open the hamburger comes back, on
   top, in the gutter that was always reserved for it. The control is only ever hidden
   while something is covering it anyway; it is never offered and dead.

   ⚠ THE HIDE CARRIES :not(.menu-open) AND THAT IS NOT TIDINESS — IT WAS MEASURED.
   The first version of this pair was `body:has(.modal.open) #menu-btn{display:none}`
   then `body.menu-open #menu-btn{display:block}`, written on the assumption that equal
   specificity plus source order would let the second win. It does not: :has() takes the
   specificity of its most specific argument, so `.modal.open` lends the first rule
   (0,2,0) and it resolves to (1,2,1) against the second's (1,1,1). Driven, the
   hamburger was display:none with the drawer open over a modal — getBoundingClientRect
   all zeros — so the drawer had one dismissal, not two. This is exactly the
   :not(#solar-studio *) lesson in CLAUDE.md §7, one pseudo-class along. Written as a
   condition rather than a fight: the hide simply does not apply while the drawer is
   open, and display is left to whatever already sets it. */
body:has(.modal.open):not(.menu-open) #menu-btn{ display:none; }
body.menu-open #menu-btn{ z-index:1180; }

/* The static way out of the preview (index.html #certprint-exit). It is first in the
   toolbar, top-left, where Back lives everywhere else in this app — free to sit there
   only because of the rule above. Comfortably over the 44px touch floor: it is the
   escape from a dead end, and a mis-tap on it costs one tap. */
.cpv-exit{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  min-height:38px; padding:8px 14px; border-radius:10px; cursor:pointer;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  font-size:14px; font-weight:700; line-height:1;
}
.cpv-exit:hover{ background:var(--panel); border-color:var(--muted); }
@media (pointer: coarse){ .cpv-exit{ min-height:44px; padding:10px 16px; } }

/* ═══ v820 · THE PREVIEW IS THE REVIEW STEP, AND ON A PHONE IT COULD NOT BE READ ═══
   Jamie, v819 live: "The preview of the certificate is still unreadable. the preview
   needs to pop out so its full screen, this is where people will check over the full
   certificate as the customer sees it for the first time."

   MEASURED: .cp-page is 194mm/9.5px because THAT IS THE PAPER — the same markup goes to
   the print window, the archive copy and js/pdf.js — so fitting it into a 356px pane
   multiplied every glyph down to 4.61 rendered px and a Schedule of Test Results cell to
   1.90. Full screen alone buys 0.44 of a pixel. The chrome was never the defect; the
   RATIO is. So the paper does not move and the viewport does: pan and zoom over the real
   document, never a reflow. Reflowing an A4 certificate into phone cards would destroy
   the thing being asked for — a spark reads a cert as a page, and the adjacency of
   "Circuit 6 / 32A / B / 1.09Ω" IS the check.

   EVERY RULE BELOW IS GATED ON #certprint-modal.cpv-phone, WHICH js/certs.js SETS FROM
   sqIsHandset() — the role-not-the-screen reader (CLAUDE.md 7 Aug: a phone is not a
   role). Not a bare media query, so a touchscreen laptop at 1440 keeps the desktop bar
   it has today. With the class absent this whole block is inert and 1440 is the page it
   already was.

   AND THE FIVE-PRODUCER TRAP: #certprint-modal is shared by certPreview, jobPhotoReport,
   printRams, the job-form print and poDoc. The doc-level rules additionally require
   .cpv-sizer to exist INSIDE the doc — a wrapper only certPreview builds — so the moment
   one of the other four writes innerHTML the reading mode evaporates by construction. A
   purchase order can never inherit it. */

/* Off by default, on every screen. These four elements simply are not in the desktop
   layout, and .cpv-sheet is display:contents so its children sit exactly where they
   always have — the 1440 toolbar is unchanged, not re-created. */
.cpv-sheet{ display:contents; }
.cpv-pager, .cpv-more, .cpv-tools, .cpv-tag{ display:none; }
.cpv-desk{ display:inline-flex; }

@media print{
  /* THE OLD FIT LEAKED ONTO PAPER. css/style.css deliberately makes an open .modal the
     print target, and the inline transform was never scoped to screen — so an OS print
     (iOS share sheet, Cmd-P) with the preview open put the certificate at ~17% of the
     paper in the top-left with the pages stacked by -533px of margin. The app's own
     Print button always opened a clean window and was safe; this is the route nobody
     had looked at. Neutralised at the wrapper AND at the page, so it holds whichever
     of the two shapes is on screen. */
  #certprint-doc .cpv-sizer{ width:auto !important; height:auto !important; display:block; }
  #certprint-doc .cp-page{ transform:none !important; margin-bottom:0 !important; }
  /* ⚠ position:static IS THE HALF THAT MATTERS, AND THE GATE CAUGHT ME WITHOUT IT.
     On screen the page is absolutely positioned inside its sizer, which is what lets the
     sizer's width/height BE the scaled size. Clear the sizer's dimensions for print and
     leave the page absolute, and the wrapper collapses to 0px high with every sheet
     stacked at its top-left corner — a fifteen-page certificate printed as one page.
     That is a worse version of the leak this block was written to fix, introduced by
     fixing it. Back in flow, and page-break-after works again. */
  #certprint-doc .cpv-sizer > .cp-page{ position:static !important; }
  #certprint-doc .cpv-tag, #certprint-doc .cpv-tools{ display:none !important; }
  /* ⚠ AND THE READING SURFACE'S OWN DECORATIONS, FOR EXACTLY THE SAME REASON AS THE
     TRANSFORM ABOVE — this is that leak's second face and it would have shipped with
     the fix for the first. certPrintHTML's string is untouched and the app's own Print
     button opens a clean window, but an OS print (iOS share sheet, Cmd-P) taken with
     the preview OPEN prints THIS DOM. The pinned identity columns carry an inline
     `left` in screen pixels that only means anything at the reading zoom, and that
     zoom is neutralised three lines up — so on paper every No. and Description would
     be shoved bodily to the right, across the columns beside them, on a statutory
     document. The raised header type is screen-only for the same reason: 6.6px is the
     size 31 columns of A3 landscape were fitted to.
     Everything the reading mode adds is undone here, in one place, so the paper is the
     paper. Neutralised at the cells rather than at the class, because a class is
     something somebody has to remember to remove. */
  #certprint-doc .cpx-ckt th, #certprint-doc .cpx-ckt td{
    position:static !important; left:auto !important;
  }
  #certprint-doc .cpx-ckt th{ font-size:6.6px !important; }
  #certprint-doc .cpx-ckt th:nth-child(1), #certprint-doc .cpx-ckt td:nth-child(1){
    width:auto !important; min-width:0 !important; max-width:none !important;
  }
  /* and the two rules that make the sheet FIT the reading pane, for the same reason as
     the font size: .7mm of gutter and the .dsc column's 24mm are the numbers 31 columns
     of A4 landscape were fitted to. Leave the screen's tighter gutter on paper and every
     column on a statutory schedule shifts. */
  #certprint-doc .cpx-ckt th, #certprint-doc .cpx-ckt td{
    padding-left:.7mm !important; padding-right:.7mm !important;
  }
  #certprint-doc .cpx-ckt td.dsc{ min-width:24mm !important; }
  #certprint-doc .cpx-card{ overflow:hidden !important; }
}

/* The sizer IS the layout box: transform never affects layout, so without a sized
   wrapper the scroll area is a lie in both axes and the old code had to fake the
   vertical half with a negative margin. Width/height are written by certFitPreview. */
.cpv-sizer{ position:relative; margin:0 auto 14px; }
.cpv-sizer > .cp-page{ position:absolute; top:0; left:0; margin:0; }

/* FULL SCREEN MEANS FULL SCREEN. `.modal{padding:24px}` is what left the card starting
   at y=24 with height:100vh, so the whole thing ran 24px off the bottom of the phone and
   the primary action hung half over the edge. It is also the "24px scrim strip" the v819
   diagnosis recorded as the only tappable backdrop — and that dismissal is NOT lost:
   Escape and the static ‹ Back both still close it, and both are driven. He asked for
   the document to get the glass, so the document gets all of it. */
#certprint-modal.cpv-phone{ padding:0; }
/* position:relative IS LOAD BEARING AND IT WAS FOUND BY LOOKING AT THE SCREENSHOT, NOT
   BY MEASURING. Without it the two floating controls resolve against .modal (fixed) and
   both hung PAST the bottom of the glass — the zoom pill at y 809+46=855 and the primary
   at 801+56=857, on an 844 screen. Every rect I had read said 44px and looked fine; the
   picture is what showed the button was half off the phone. */
#certprint-modal.cpv-phone .modal-card.cert-preview{
  padding:0; gap:0; border-radius:0; position:relative;
}
/* ONE ROW, 52px. It was 223px of wrapping toolbar plus a 97px paragraph = 320px of 844
   before the document started. The paragraph is print plumbing and moves into the ⋯
   sheet next to the buttons it describes; the h2 said "Certificate preview" (nobody
   calls it that, and it carried white-space:nowrap at 390) and gives its room to the
   thing that actually helps — which sheet you are on. */
#certprint-modal.cpv-phone .cpv-head{
  flex-wrap:nowrap; gap:8px; align-items:center; padding:6px 10px;
  min-height:52px; border-bottom:1px solid var(--c-line, var(--line));
}
#certprint-modal.cpv-phone .cpv-head h2{ display:none; }
#certprint-modal.cpv-phone .cpv-pager{
  display:flex; align-items:center; gap:2px; flex:1; min-width:0; justify-content:center;
}
#certprint-modal.cpv-phone .cpv-more{ display:inline-flex; }
.cpv-pagelbl{
  font-size:13px; font-weight:600; color:var(--c-ink, var(--text));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.cpv-pagebtn, .cpv-more{
  align-items:center; justify-content:center; flex:0 0 auto;
  min-width:44px; min-height:44px; padding:0; cursor:pointer;
  background:transparent; border:0; border-radius:10px;
  color:var(--c-ink, var(--text)); font-size:20px; line-height:1;
}
.cpv-pagebtn:disabled{ opacity:.3; cursor:default; }
.cpv-pagebtn:hover:not(:disabled), .cpv-more:hover{ background:var(--c-panel, var(--panel)); }

/* THE DRAFT SIGNAL, IN THE CHROME, because at no zoom can the paper carry it: the
   masthead's own "DRAFT — numbered when issued" is 9px at opacity .7 on page one only
   (4.4px once fitted) and the footer's is 7px. Fitted they cannot be read; zoomed to
   read they are scrolled off. It never scrolls and it never prints. Colour AND a word,
   never colour alone. --c-pipe-ink is a TEXT token (used as a fill it renders as a
   brown blob) so it is used as text over its own tinted ground. */
/* ⚠ THE :has() IS NOT DECORATION — IT WAS A MEASURED LEAK. Driven: after a certificate
   preview was closed, jobPhotoReport reopened the same modal and #certprint-tag STILL
   READ "DRAFT — not issued". Only certPreview writes that node and none of the other
   four producers clears it, exactly as they never clear #certprint-actions. So the
   strip is made structurally unable to show for anybody but a certificate: it requires
   a .cpv-sizer inside the doc, and only certPreview builds one. The class alone was
   not enough, because a class is something somebody has to remember to remove. */
#certprint-modal.cpv-phone .modal-card:has(#certprint-doc .cpv-sizer) .cpv-tag{
  display:block; flex:none; padding:5px 12px;
  font-size:12px; font-weight:800; letter-spacing:.04em;
  background:var(--c-pipe-bg); color:var(--c-pipe-ink);
  border-bottom:1px solid var(--c-line, var(--line));
}
#certprint-modal.cpv-phone .cpv-tag.issued{ background:var(--c-ok-bg); color:var(--c-ok-ink); }
#certprint-modal.cpv-phone .cpv-tag.qs{ background:transparent; color:var(--c-mut, var(--muted)); }
#certprint-modal.cpv-phone .cpv-tag:empty{ display:none; }

/* The document owns the glass: 468 -> ~700px of 844. overflow-x:hidden further up this
   file is what made panning impossible, and it is REPLACED here rather than fought —
   (1,1,0) against its (1,0,0). touch-action leaves single-finger pan to the browser so
   native scrolling and its momentum are kept; js/certs.js preventDefaults only while
   two fingers are down, which is the pinch. */
#certprint-modal.cpv-phone .modal-card.cert-preview #certprint-doc{
  margin:0; padding:0; border-radius:0; background:var(--c-bg, var(--bg));
}
#certprint-doc.cpv-reading{
  overflow:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y; overscroll-behavior:contain;
}
#certprint-doc.cpv-reading .cpv-sizer{ margin:0 auto 10px; }
/* The floating controls overlay the document, which is what makes them free — but
   without this the last rows of the last sheet sit under them for ever and cannot be
   scrolled clear. The declaration is on the paper: it is the bottom of the last page.
   90px is the 56px primary plus its 10px gutter plus the safe area. */
#certprint-doc.cpv-reading{ padding-bottom:calc(90px + env(safe-area-inset-bottom)); }

/* The two floating controls OVERLAY the document rather than reserve space, so they
   cost the reading glass nothing. Zoom is bottom-LEFT on purpose: it is the
   low-frequency, reversible, non-destructive control, and the committing action gets
   the easy thumb zone. */
#certprint-modal.cpv-phone .cpv-tools{
  display:flex; position:absolute; left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:3; pointer-events:none;
}
.cpv-zoom{
  display:inline-flex; pointer-events:auto; border-radius:12px; overflow:hidden;
  border:1px solid var(--c-line-strong, var(--line));
  background:var(--c-panel, var(--panel)); box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.cpv-zoombtn{
  min-width:58px; min-height:44px; padding:0 12px; border:0; cursor:pointer;
  background:transparent; color:var(--c-mut, var(--muted));
  font-size:14px; font-weight:700; line-height:1;
}
.cpv-zoombtn.on{ background:var(--c-pipe-bg); color:var(--c-pipe-ink); }

/* THE SHEET. Closed, it is a bottom bar carrying exactly ONE control — the action this
   certificate's status is actually waiting for — plus any status message, because a
   send that reports its result into a hidden panel reports it to nobody. Open, it is
   the whole bar: print, save, file, archive, and the bypass, with its own sentence.
   Progressive disclosure is exactly right for a bypass: available, honest, and never
   sitting next to the primary. */
/* CLOSED, the action bar is a bottom bar carrying exactly ONE control — the action this
   certificate's status is actually waiting for — floating over the document in the thumb
   zone. OPEN, it grows into the whole bar: print, save, file, archive and the bypass with
   its own sentence. Progressive disclosure is exactly right for a bypass: available,
   honest, and never sitting next to the primary. It is positioned, never re-parented, so
   the desktop DOM is untouched. */
#certprint-modal.cpv-phone .cpv-actions{
  position:absolute; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  left:auto; z-index:4; width:auto; max-width:216px;
  display:flex; flex-direction:column; gap:8px; align-items:stretch; justify-content:flex-start;
}
/* Closed: everything except the one primary is folded away. :has() so the primary is
   found whether it is a bare button or wrapped in a .cpv-hold (Email certificate is). */
#certprint-modal.cpv-phone:not(.cpv-sheet-open) .cpv-actions > *:not(.cpv-primary):not(:has(.cpv-primary)){
  display:none;
}
#certprint-modal.cpv-phone .cpv-actions .btn.cpv-primary{
  min-height:56px; width:100%; font-size:16px; font-weight:700;
  background:var(--yel); color:var(--yel-ink); border-color:transparent;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
#certprint-modal.cpv-phone .cpv-actions .btn.cpv-primary:disabled{
  background:var(--c-panel, var(--panel)); color:var(--c-mut, var(--muted));
  border:1px solid var(--c-line, var(--line)); box-shadow:none;
}
#certprint-modal.cpv-phone .cpv-desk{ display:none; }   /* ‹ Back is the exit; Close is its twin */
#certprint-modal.cpv-phone.cpv-sheet-open .cpv-actions{
  left:0; right:0; bottom:0; max-width:none; padding:14px 12px calc(96px + env(safe-area-inset-bottom));
  max-height:76%; overflow:auto;
  background:var(--c-panel, var(--panel));
  border-top:1px solid var(--c-line, var(--line)); border-radius:16px 16px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.34);
}
#certprint-modal.cpv-phone.cpv-sheet-open .cpv-hold{ max-width:none; }
/* THE STATUS LINE STAYS VISIBLE WHETHER THE SHEET IS OPEN OR SHUT. It is where every
   send reports what actually happened ("Sent to ...", "Nothing has been sent"), and a
   result delivered into a hidden panel is a result delivered to nobody — which is this
   project's own §7 defect wearing a different hat. It is :empty{display:none} already,
   so it costs nothing until there is something to say. */
#certprint-modal.cpv-phone .cpv-sheet{
  display:block; position:absolute; left:12px; right:12px;
  bottom:calc(76px + env(safe-area-inset-bottom)); z-index:5; pointer-events:none;
}
#certprint-modal.cpv-phone .cpv-sheet > *{ pointer-events:auto; }
#certprint-modal.cpv-phone:not(.cpv-sheet-open) #certprint-name{ display:none; }
#certprint-modal.cpv-phone .cpv-sheet #cpv-status{
  background:var(--c-panel, var(--panel)); border:1px solid var(--c-line, var(--line));
  border-radius:12px; padding:8px 12px !important; font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
#certprint-modal.cpv-phone.cpv-sheet-open .cpv-sheet{
  bottom:auto; top:auto; left:12px; right:12px;
  bottom:calc(78% + 8px);
}

/* THE TOUCH FLOOR ON THE IRREVERSIBLE ONES. #certprint-actions .btn is pinned to
   --c-tap (34px) in design-c.css with no coarse-pointer bump, while --c-tap-touch
   (44px) exists in the same file and every other phone rule in it uses it. The controls
   at 34px include "Email certificate" — a statutory document to a customer — and
   "Issue without review". That is not the settled 30px-chip ruling; these are exactly
   the controls the 44px floor was written for. (1,2,0) beats design-c's (1,1,0), so
   this holds regardless of source order. */
@media (pointer: coarse){
  .cert-preview #certprint-actions .btn{ min-height:44px; }
}

/* ══ THE SCHEDULE OF TEST RESULTS: A READING YOU CANNOT TIE TO A CIRCUIT ══════════
   MEASURED at 390 in Read mode before this block: the board sheet is 1515px wide in a
   388px pane — 3.90 screens — with th.position and td.position both `static`. Panned
   45% right the reader sees `r1 · rn · r2 · R1+R2 · R2 · Test V` and the No. and
   Description columns are OFF SCREEN entirely (measured: their right edge at -1051px,
   i.e. 1051px past the left of the pane). Identical scrollWidth at 360, 390 and 430 —
   the read zoom is width-independent, so a bigger phone buys nothing.

   That is v820's complaint RELOCATED, not solved: no longer "too small to read", now
   "impossible to relate a value to its circuit". An electrician is trained to read
   ACROSS A ROW; strip the row's identity and the review step does not work.

   ⚠ SCREEN ONLY, AND THE MECHANISM IS THE POINT. Every selector here is gated on
   #certprint-doc.cpv-reading — a class js/certs.js puts on the VIEWER, never on the
   document. certPrintHTML's string is what the customer receives, what the archive
   copy saves and what the job attachment carries, and nothing below can reach it: it
   is CSS, it is not in that string, and the print window has no #certprint-doc at all.
   This is cpvWrapPages' discipline expressed in the cascade instead of the DOM.

   ⚠⚠ position:sticky IS THE OBVIOUS ANSWER AND IT IS THE WRONG ONE HERE. IT WAS
   BUILT, DRIVEN AND THROWN AWAY — do not "simplify" this back to it. The sheet sits
   under `transform:scale()` (certFitPreview's reading zoom, on .cp-page) and Chrome
   resolves the sticky shift in the element's OWN pre-transform coordinate space while
   taking the scroll distance from the scrollport in SCREEN pixels — so the shift is
   then scaled again on the way out and overshoots by exactly the scale factor.
   Measured, at 390, with sticky in place: scrollLeft 0 -> the No. cell at x=48.9
   (correct); scrollLeft 313 -> x=335.2 (it should be 1). It travelled +647 for a 313px
   scroll, a ratio of 2.067, which is `s` — cpvReadZoom's own number — to three decimal
   places. At full pan the pair clamped against the far edge of the row and the columns
   sat on TOP of each other at the RIGHT of the pane. It does not merely fail; it makes
   the sheet worse, and it fails quietly because every computed style reads `sticky`.

   So the pin is done in js/certs.js (cpvPinIdentity), in numbers certFitPreview
   already holds, and these cells are only `position:relative` here. That ordering is
   deliberate: with the JS absent or refusing, relative+left:0 means NOTHING MOVES —
   the sheet is exactly the sheet it is today. A degradation that shows the wrong
   circuit's identity would be worse than no pin at all, on a document somebody signs.

   ⚠ overflow:hidden ON .cpx-card WOULD CLIP THE PINNED CELLS AWAY. The card clips its
   own rounded corners, and a cell offset to the right of its natural place is outside
   that box. Released in reading mode only; on paper and on the desktop it clips
   exactly as it always has. */
#certprint-doc.cpv-reading .cpx-card{ overflow:visible; }

/* The identity pair. Column 1 is pinned to a fixed 7mm so the pair's width is a
   CONSTANT in the page's own coordinate space rather than a table-layout:auto guess
   that moves with the longest circuit number. 7mm is what the No. column already
   resolved to (26.4px measured at 390), so nothing shifts. Column 2 keeps its natural
   width: narrowing the Description to buy back pan distance would truncate the one
   field that says WHICH circuit, which is the defect this fixes. */
#certprint-doc.cpv-reading .cpx-ckt th:nth-child(1),
#certprint-doc.cpv-reading .cpx-ckt td:nth-child(1){
  position:relative; left:0; z-index:3; width:7mm; min-width:7mm; max-width:7mm;
}
#certprint-doc.cpv-reading .cpx-ckt tbody td:nth-child(2),
#certprint-doc.cpv-reading .cpx-ckt thead tr:nth-child(2) th:nth-child(2){
  position:relative; left:0; z-index:3;
}
/* The group band's first cell spans both identity columns (colspan=2), so it is
   carried along too and "Circuit" stays over the pair it labels. */
#certprint-doc.cpv-reading .cpx-ckt thead tr:nth-child(1) th:nth-child(1){
  position:relative; left:0; z-index:4;
}
#certprint-doc.cpv-reading .cpx-ckt thead th:nth-child(1),
#certprint-doc.cpv-reading .cpx-ckt thead tr:nth-child(2) th:nth-child(2){ z-index:4; }
/* A STICKY CELL WITH NO BACKGROUND SHOWS THE PANNED ROW THROUGH IT. The headers are
   already opaque (var(--cbar)); the body cells are not — they inherit the card's white
   and the even-row wash. Both are the sheet's OWN paper colours, taken from the two
   rules a few thousand lines up this file; no new tint is invented. DESIGN_SPEC §1. */
#certprint-doc.cpv-reading .cpx-ckt tbody td:nth-child(1),
#certprint-doc.cpv-reading .cpx-ckt tbody td:nth-child(2){ background:#fff; }
#certprint-doc.cpv-reading .cpx-ckt tbody tr:nth-child(even) td:nth-child(1),
#certprint-doc.cpv-reading .cpx-ckt tbody tr:nth-child(even) td:nth-child(2){ background:#f7f9fc; }
/* and the pinned edge is drawn, so the reader can see where the frozen part ends —
   #e2e5eb is the card's own border colour, already in this file. */
#certprint-doc.cpv-reading .cpx-ckt tbody td:nth-child(2),
#certprint-doc.cpv-reading .cpx-ckt thead th:nth-child(2),
#certprint-doc.cpv-reading .cpx-ckt thead tr:nth-child(1) th:nth-child(1){
  border-right:.5mm solid #e2e5eb;
}

/* ══ THE HEADERS WERE THE SMALLEST TYPE ON THE SHEET ══════════════════════════════
   MEASURED at 390 in Read mode: data cells painted 11.00px, column headers 9.55px —
   the label smaller than the value it labels, and under the 11px CPV_READ_PX floor
   js/certs.js aims the reading zoom at. On a certificate the header IS the meaning:
   r1 or r2, L-N or L-E, Op. time or Max permitted Zs. Read them wrong and you have
   checked the wrong number against the wrong limit.

   Raised to the data cells' own 7.6px, so they land on exactly the reading floor the
   values do. SCREEN ONLY: 6.6px is the PAPER size and 31 columns of A3 landscape were
   fitted to it — changing the printed size would re-flow a statutory document. And
   cpvReadZoom still takes its number from `.cpx-ckt td`, deliberately: aiming the
   floor at the headers would zoom a board sheet to ~4.5 screens wide, which is the
   trade js/certs.js's own comment records making. */
#certprint-doc.cpv-reading .cpx-ckt th{ font-size:7.6px; }

/* ══ AND THE SHEET HAS TO STILL FIT ON ITS OWN BIT OF PAPER ═══════════════════════
   JAMIE, ON v821 LIVE: "landscape boards dont look right on the preview."

   WHAT HE WAS LOOKING AT, MEASURED at 390 in engineer phone mode. The Schedule of Test
   Results TABLE was wider than the LANDSCAPE PAGE IT SITS ON, and the two rules above
   are what pushed it over the edge:

     tree            table (local px)   over the card   past the paper's right edge
     pre-v821            1016                35             read  -2.9 / page  -0.7
     v821                1100               119             read +124.7 / page +31.9

   The page's content box is 261mm — 986.5px — and the card inside it is 981px. So a
   1,100px table hangs 119px out of its own rounded card, and because the pin needed
   .cpx-card{overflow:visible} three rules up, that overhang is no longer CLIPPED: it is
   DRAWN, outside the white sheet, over the viewer's grey backdrop. On the Page stop —
   the one whose whole promise is "show me the sheet" — the pane's scrollWidth went 388
   to 420, so the sheet stopped fitting and the reader got a sideways scroll on a page
   that is meant to be whole. That is the thing that "doesn't look right".

   ⚠ THE HEADER RAISE IS NOT THE BUG AND IS NOT BEING REVERTED. Measured with only the
   font-size put back to 6.6px, the table is still 1016px and still 35px out of its card
   — the overflow PRE-DATES v821 and was merely invisible while the card clipped it. Put
   the type back and the sheet is illegible again with the defect still there. The cause
   is the table's intrinsic minimum width, so that is what is fixed.

   TWO LEVERS, BOTH MEASURED, AND NEITHER IS THE DESCRIPTION COLUMN:
   1. The horizontal cell padding. .7mm each side across 31 columns is 164px of the
      table's minimum. Halved on screen it gives back 72px and the columns are still
      separated by the hairline rule .cpx-t already draws between them.
   2. The REMARKS column's 24mm minimum. `.cpx-ckt .dsc` sets 24mm and it is worn by TWO
      columns — Description and Remarks. Description's 24mm is exactly what must not be
      touched (it is the field that says WHICH circuit, and the rule above depends on the
      pinned pair's width being stable), but Remarks is the LAST column, nothing is read
      across from it, and a minimum on it buys nothing. Released, it gives back 49px.

   Together: 981px, which is the card's content width to the pixel — the table now ends
   exactly where its own rounded card ends, NOTHING is clipped (the Remarks column stops
   being truncated, which it was before v821 too), the sheet is back inside the paper
   (-47.9px in Read, -12.3px on Page) and the Page stop fits again at 388/388. The pinned
   pair is unchanged at 169.5px and the header glyph is unchanged at 12.41px painted.

   ⚠ SCREEN ONLY. Both rules are gated on #certprint-doc.cpv-reading, and both are undone
   explicitly in the @media print block up this file beside the other reading-mode
   decorations — for the same reason the header size is: .7mm and 24mm are the numbers 31
   columns of A4 landscape were fitted to, and the printed sheet must not re-flow.
   certPrintHTML's string is untouched: this is CSS, it is not in that string, and the
   print window has no #certprint-doc at all. */
#certprint-doc.cpv-reading .cpx-ckt th,
#certprint-doc.cpv-reading .cpx-ckt td{ padding-left:.35mm; padding-right:.35mm; }
#certprint-doc.cpv-reading .cpx-ckt td.dsc:last-child{ min-width:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   v821 — THE CERTIFICATE SHEET: GHOST TEXT THAT CANNOT PASS FOR INK,
          AND THE PHONE TAP FLOOR THE SURFACE NEVER FOLLOWED
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ::placeholder on a field that becomes a signed record ────────────────
   CLAUDE.md §4a at the VISUAL layer. Measured on the running circuit sheet at
   390px: placeholder ink resolved to 5.71:1 light / 7.43:1 dark against the
   field, real typed ink to 16.88:1 / 17.91:1. 5.71:1 is not a hint, it is
   READABLE TEXT — so a blank insulation-resistance box carrying ">999" read as
   a recorded pass on a document somebody signs.

   The four dangerous placeholders are gone from js/facerts.js (">999" became a
   quick-fill CHIP that actually writes; the exemplars gained an "e.g."), but
   the class comes back the moment anyone adds a field, so the ghost text itself
   is now DELIBERATELY BELOW 3:1 on this surface. Measured after: ~2.1:1 light,
   ~2.7:1 dark. That is under the AA floor ON PURPOSE and it costs nothing to a
   screen reader — every one of these inputs is wrapped in its own <label>, so
   the accessible name comes from the label text, never from the placeholder.
   Nothing is lost; a hint stops being able to impersonate an answer.

   SCOPED, not global. Dimming every placeholder in the product would make
   search boxes and message composers worse for no safety gain. .fc-f is the
   phone certificate field, .au-bc-l the observation sheet. The class selector
   also beats design-c.css's element-level input::placeholder (0,1,1 vs 0,0,1),
   so this wins on specificity rather than on source order — style.css loads
   FIRST and could not have won on order.

   The colour is --muted at 50% over whatever the field is, so it is derived
   from the closed palette rather than a new hue (DESIGN_SPEC §1), and it tracks
   both themes without a second rule. */
.fc-f input::placeholder, .fc-f textarea::placeholder,
.au-bc-l input::placeholder, .au-bc-l textarea::placeholder{
  color:color-mix(in srgb, var(--muted) 50%, transparent);
  opacity:1;
}

/* helper text under a certificate field. The one sentence explaining how to
   record an UNTESTED circuit used to be ghost text in a 166px box and rendered
   as "N/A or LIM here ma" — the instruction was physically unreadable, and it
   was competing with the engineer's own typing for the same pixels. It wraps
   here, and it is still on screen once the box has something in it. */
.fc-fhelp{ display:block; margin-top:5px; font-size:12px; line-height:1.4; color:var(--muted); }
.fc-fhelp strong{ font-weight:700; color:var(--text); }

/* ── 2. THE PHONE TAP FLOOR ──────────────────────────────────────────────────
   DESIGN_SPEC §3: 34px minimum on desktop, 44px minimum on the phone, "no
   exceptions on the phone - it gets used with cold and gloved hands."

   .fc-ckt-jump button carried a hardcoded min-height:34px. That is the DESKTOP
   half of that one sentence, written into a sheet that only ever opens on a
   phone — so the number was not drift, the RULE was missing its second half.
   It is restored here rather than overwritten: 34px stays as the desktop floor
   above, and every control in the circuit sheet is lifted to 44px wherever the
   pointer is coarse or the field app is on. The step rail and the schedule tick
   buttons on this same sheet were already exactly 44, so this matches what the
   product already does instead of inventing a size.

   Keyed on POINTER, never on width: CLAUDE.md's 7 Aug rule is "ask the role,
   never the screen", and the touch equivalent is to ask the input device. */
@media (pointer:coarse){
  .fc-ckt-jump button,
  .fc-ckt-row button, .fc-ckt-row select,
  .fc-qf button,
  .fc-ask-top,
  .pal-btn{ min-height:var(--c-tap-touch,44px); }
  .pal-btn{ min-width:var(--c-tap-touch,44px); }
}
body.eng-mode .fc-ckt-jump button,
body.eng-mode .fc-ckt-row button, body.eng-mode .fc-ckt-row select,
body.eng-mode .fc-qf button,
body.eng-mode .fc-ask-top,
body.eng-mode .pal-btn{ min-height:var(--c-tap-touch,44px); }
body.eng-mode .pal-btn{ min-width:var(--c-tap-touch,44px); }

/* DESIGN_SPEC §2: body text never drops below 12px on the phone. The quick-fill
   chips were 11.5px, and they are the control that writes N/A or LIM onto a
   schedule of test results — the smallest type on the sheet doing one of the
   most consequential things on it. */
.fc-qf button{ font-size:12px; }
/* and the floor is BOTH axes, not just height - 42px wide is still a miss with a
   glove on. Three chips at 44 plus two 4px gaps is 140px inside a 173px column,
   so N/A, LIM and >999 still sit on one line and nothing wraps. */
@media (pointer:coarse){ .fc-qf button{ min-width:var(--c-tap-touch,44px); } }
body.eng-mode .fc-qf button{ min-width:var(--c-tap-touch,44px); }

/* The scan button: 24x14 measured, under a third of the floor in BOTH axes, and
   it is the control CLAUDE.md §4a instance 3 records fabricating five device
   characteristics onto a signed schedule. Smallest target on the sheet, worst
   consequence when it is hit by accident.

   It is lifted to 44x44 by taking it OUT of the label's text flow and floating
   it over the right-hand end of the field instead. Two reasons that beats
   bolting min-height onto it where it sat: a 44px inline button inside a <span>
   of 12px label text would have pushed every one of the nine field headers
   taller, on a sheet already 2,255px of scroll; and a camera sitting IN the box
   it fills is where a person looks for it. The input gains matching padding so
   a long reading can never run underneath it. .fc-f is already position:relative
   (line ~7721), which is what makes the anchor free. */
.fc-inwrap{ position:relative; display:block; width:100%; }
.fc-inwrap > input{ width:100%; }
.fc-inwrap > .fc-scan-btn{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:var(--c-tap-touch,44px); height:var(--c-tap-touch,44px);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; font-size:18px; line-height:1; border-radius:10px;
  color:var(--text); background:none; border:none; cursor:pointer;
}
.fc-inwrap > .fc-scan-btn:active{ background:var(--panel2); }
/* a long reading can never run underneath the camera */
.fc-inwrap:has(> .fc-scan-btn) > input{ padding-right:calc(var(--c-tap-touch,44px) + 4px); }