:root {
  --ink: #142017;
  --muted: #5a685c;
  --line: #d7ddd6;
  --paper: #f7f6f2;
  --white: #fff;
  --green: #2a5a28;
  --green-dark: #1b3d1c;
  --warn: #8a3b12;
  --warn-bg: #f6e6d8;
  --ok-bg: #e5efe4;
  --sidebar: #142017;
  --aside-fg: #e8efe6;
  --aside-link: #d5e0d3;
  --aside-muted: #9aab98;
  --nav-hover: #243226;
  --secondary-bg: #e8ece6;
  --th-bg: #eef2ee;
  --card-hover: #eef5ec;
  --banner-border: #c5d6c3;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --aside-width: 13.5rem;
  --aside-pad-y: 0.75rem;
  --aside-pad-x: 0.7rem;
  --sem-hot-bg: var(--th-bg);
  --sem-hot-fg: var(--ink);
  --sem-hot-bar: var(--ink);
  --sem-ok-bg: var(--th-bg);
  --sem-chip-open-bg: #f8e3b0;
  --sem-chip-open-fg: #6a4308;
  --sem-chip-done-bg: #cfe8e6;
  --sem-chip-done-fg: #0d3d38;
  --sem-chip-urgent-bg: #f6d5c4;
  --sem-chip-urgent-fg: #8a3b12;
  --sem-chip-info-bg: #d4e4f6;
  --sem-chip-info-fg: #163a5f;
  --sem-chip-neutral-bg: #e8ece6;
  --sem-chip-neutral-fg: #4e5b49;
  /* Danger / decline (stronger than urgent amber). */
  --sem-chip-danger-bg: #f8d0d0;
  --sem-chip-danger-fg: #8a1212;
  /* Bright lifecycle OK (Approved / Paid / Accepted) — not job green. */
  --ok-bright-bg: #e6f8ee;
  --ok-bright-fg: #0f8f4d;
  --ok-bright-border: #8fd9b0;
  /* Draft / pending approval amber. */
  --ok-draft-bg: #fff1e0;
  --ok-draft-fg: #b85a00;
  --ok-draft-border: #f0c089;
  --warn-border: #e4c4aa;
  /* Quiet inset panels (notes, board cards). */
  --surface-soft: #fbfcfa;
  /* Document types — Job (ACE green), Quote (amber/gold), Invoice (blue).
     Always paired with labels/text; never purple for invoice. */
  --doc-job: #2a5a28;
  --doc-job-fg: #1b3d1c;
  --doc-job-bg: #d4ead2;
  --doc-job-soft: #e5efe4;
  --doc-quote: #a67c12;
  --doc-quote-fg: #6a4308;
  --doc-quote-bg: #f8e3b0;
  --doc-quote-soft: #faf0d2;
  --doc-invoice: #2f6fbd;
  --doc-invoice-fg: #163a5f;
  --doc-invoice-bg: #d4e4f6;
  --doc-invoice-soft: #e8f0fa;
  /* Customer record hub — steel teal (distinct from job/quote/invoice). */
  --doc-customer: #2f6a7a;
  --doc-customer-fg: #163a45;
  --doc-customer-bg: #d4e8ee;
  --doc-customer-soft: #e6f1f4;
  /* Settings submenu group accents — restrained, ACE-green family; not purple.
     Labels stay primary; colour is a left-rail hint (colourblind-safe with text). */
  --settings-company: #2a5a28;
  --settings-look: #9a3412;
  --settings-documents: #2f6fbd;
  --settings-work: #a67c12;
  --settings-defaults: #4a6670;
  --settings-integrations: #0f766e;
  --settings-users: #6b4f3a;
  --settings-user: #3d5a4c;
}

/* FlodiTRADE mark palette — navy / white / orange (not purple). */
html.ops-chrome, body.ops-chrome {
  --ink: #0f253e;
  --muted: #5a6a7d;
  --line: #d4dbe4;
  --paper: #f6f7f9;
  --green: #f9a825;
  --green-dark: #0f253e;
  --ok-bg: #fff6e8;
  --sidebar: #0f253e;
  --aside-fg: #ffffff;
  --aside-link: #f4f7fb;
  --aside-muted: #c5d0dc;
  --nav-hover: #1a3554;
  --secondary-bg: #eef2f6;
  --th-bg: #eef2f6;
  --card-hover: #fff8ee;
  --banner-border: #f9a825;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); }
/* App-wide text links — ink, no forever underline (same idea as Quote/Invoice contact links). */
a {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
a:visited { color: var(--ink); }
a:hover,
a:focus-visible {
  text-decoration: underline;
}
/* Chrome / control links keep their own hover (no text underline). */
a.btn:hover,
a.btn:focus-visible,
a.list-scope-chip:hover,
a.list-scope-chip:focus-visible,
a.card:hover,
a.card:focus-visible,
a.card-btn:hover,
a.card-btn:focus-visible,
a.icon-btn:hover,
a.icon-btn:focus-visible,
a.job-block:hover,
a.job-block:focus-visible,
.job-block-hit:hover,
.job-block-hit:focus-visible,
.sched-chip-hit:hover,
.sched-chip-hit:focus-visible,
.board-card:hover,
.board-card-hit:focus-visible,
a.board-col-head:hover,
a.board-col-head:focus-visible,
a.phone-row:hover,
a.phone-row:focus-visible,
a.phone-row-main:hover,
a.phone-row-main:focus-visible,
a.doc-row:hover,
a.doc-row:focus-visible,
a.stat-card:hover,
a.stat-card:focus-visible,
a.work-filter:hover,
a.work-filter:focus-visible,
a.kpi-compact:hover,
a.kpi-compact:focus-visible,
a.today-item:hover,
a.today-item:focus-visible,
a.flodiphone-dial-icon:hover,
a.flodiphone-dial-icon:focus-visible,
a.panel-id-logo-link:hover,
a.panel-id-logo-link:focus-visible,
a.ft-wordmark:hover,
a.ft-wordmark:focus-visible,
a.user-chip-link:hover,
a.user-chip-link:focus-visible,
a.brand-lockup:hover,
a.brand-lockup:focus-visible,
a.phone-nav-item:hover,
a.phone-nav-item:focus-visible,
a.phone-brand:hover,
a.phone-brand:focus-visible,
.phone-more-nav a:hover,
.phone-more-nav a:focus-visible,
.tenant-aside a:hover,
.tenant-aside a:focus-visible {
  text-decoration: none;
}
.app { min-height: 100vh; }
.tenant-aside {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--aside-width);
  background: var(--sidebar);
  color: var(--aside-fg);
  padding: var(--aside-pad-y) var(--aside-pad-x);
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0 0 1rem;
  border-radius: 10px;
}
.brand-lockup:hover { background: transparent; color: #fff; }
.brand-ft, .brand-wren {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 0.15rem;
  flex-shrink: 0;
}
.brand-lockup.ft-only { justify-content: center; margin-bottom: 1.15rem; }
.panel-id { margin: 0 0 0.55rem; }
.panel-id-logo-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.panel-id-logo-link:hover,
.panel-id-logo-link:focus-visible {
  outline: none;
}
.tenant-aside a.panel-id-logo-link,
.tenant-aside a.panel-id-logo-link:hover {
  background: transparent;
  padding: 0;
  color: inherit;
}
/*
 * Guest identity mobile — bold, larger; glyphs ~90% of white logo plate
 * (plate is 92% of panel). Size + tracking fill that width — not just the box.
 */
.tenant-aside .panel-id-row:has(> .panel-id-phone) {
  margin-top: 0.4rem;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
}
.tenant-aside a.panel-id-phone,
.tenant-aside a.panel-id-phone:hover,
.tenant-aside a.panel-id-phone:focus-visible {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--aside-fg);
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
}
.tenant-aside a.panel-id-phone:hover,
.tenant-aside a.panel-id-phone:focus-visible {
  text-decoration: underline;
  color: var(--aside-fg);
}
/*
 * White logo plate on dark asides — mark almost fills the box.
 * Inset ≈ gap between the E bars in ACE (~0.3rem), not a padded island.
 */
.panel-id-logo-plate {
  width: 92%;
  margin: 0 auto 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.3rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.panel-id-logo-plate.is-ace-chrome,
.panel-id-logo-plate.is-ace-wordmark {
  background: #fff;
}
.panel-id-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
/* ACE wordmark already spells the company name — hide duplicate title. */
.panel-id:has(.panel-id-logo-plate.is-ace-wordmark) > .panel-id-name {
  display: none;
}
.panel-id-name {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  color: var(--aside-fg);
}
.panel-id-row, .panel-id-date {
  margin: 0.12rem 0 0;
  font-size: 0.72rem;
  color: var(--aside-muted);
  line-height: 1.3;
}
.panel-id:has(.panel-id-logo-plate) .panel-id-name,
.panel-id:has(.panel-id-logo-plate) .panel-id-row,
.panel-id:has(.panel-id-logo-plate) .panel-id-date {
  text-align: center;
}
.panel-id:has(.panel-id-logo-plate) .panel-id-user {
  justify-content: center;
}
.panel-id-date { color: var(--aside-muted); }
.ft-wordmark {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0 0;
  margin: 0.15rem 0 0;
  color: inherit;
  text-decoration: none;
}
.tenant-aside a.ft-wordmark, .tenant-aside a.ft-wordmark:hover {
  background: transparent;
  padding: 0.45rem 0 0;
  color: inherit;
}
.ft-wordmark img {
  display: block;
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.ft-wordmark-text {
  display: inline-flex;
  align-items: baseline;
  /* ~2/3 of default FT mark height (see .ops-chrome / .tenant-chrome overrides). */
  font-size: calc(3rem * 2 / 3);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.ft-wordmark-flodi { color: var(--aside-fg, #fff); font-weight: 600; }
.ft-wordmark-trade { color: #f9a825; font-weight: 800; }
.tenant-chrome .tenant-aside a.ft-wordmark {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--aside-pad-x));
  max-width: none;
  margin: 0.15rem calc(var(--aside-pad-x) * -1) calc(var(--aside-pad-y) * -1);
  padding: 0.4rem 0.55rem;
  opacity: 1;
  /* Match FT mark plate (#0f2a45 from flodine-ft.png) — not darkened green sidebar. */
  background: #0f2a45;
}
.tenant-chrome .tenant-aside a.ft-wordmark:hover {
  padding: 0.4rem 0.55rem;
  background: #153555;
}
.tenant-chrome .ft-wordmark img {
  display: block;
  width: auto;
  max-width: 2.35rem;
  max-height: 2.35rem;
  margin: 0;
  object-fit: contain;
  opacity: 1;
  border-radius: 0.4rem;
}
.tenant-chrome .tenant-aside a.ft-wordmark:hover img {
  opacity: 1;
  filter: brightness(1.06);
}
.tenant-chrome .ft-wordmark-text {
  /* Match FT mark max-height above — label ~2/3 of logo height. */
  font-size: calc(2.35rem * 2 / 3);
  line-height: 1;
}
.ops-chrome .ops-aside a.ft-wordmark,
.ops-chrome .ops-aside a.ft-wordmark:hover {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--aside-pad-x));
  max-width: none;
  margin: 0.15rem calc(var(--aside-pad-x) * -1) calc(var(--aside-pad-y) * -1);
  padding: 0.3rem 0.55rem;
  background: color-mix(in srgb, #000 18%, var(--sidebar));
}
.ops-chrome .ft-wordmark img {
  display: block;
  width: auto;
  max-width: 3rem;
  max-height: 3rem;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0.45rem;
}
.ops-chrome .ft-wordmark-text {
  font-size: calc(3rem * 2 / 3);
  line-height: 1;
}
/* OPS panel identity: square FT mark on the mark plate (not a white box). */
.ops-chrome .panel-id-logo {
  max-height: 4.25rem;
  max-width: 4.25rem;
  width: auto;
  border-radius: 0.55rem;
}
.ops-chrome .panel-id-logo-plate {
  padding: 0.55rem;
  width: auto;
  max-width: 92%;
  /* Same navy as FT mark plate / tenant footer strip — sampled from flodine-ft.png. */
  background: #0f2a45;
}
.ops-chrome .panel-id-name .ft-wordmark-flodi {
  color: #fff; /* white F on the mark */
}
.ops-chrome .panel-id-name .ft-wordmark-trade {
  color: #f4a740; /* T on the new mark (not Ops gold #f9a825) */
}
.ops-chrome .brand-ft { box-shadow: 0 0 0 2px var(--green); }
.ops-chrome button, .ops-chrome .btn { color: var(--ink); background: var(--green); }
.ops-chrome button.secondary, .ops-chrome .btn.secondary { background: var(--white); color: var(--ink); }
.ops-chrome button.danger, .ops-chrome .btn.danger { background: var(--warn); color: var(--white); }
/* Ops gold CTAs: keep dark label on yellow when the control is an <a class="btn">. */
.ops-chrome a.btn,
.ops-chrome a.btn:link,
.ops-chrome a.btn:visited,
.ops-chrome a.btn:hover,
.ops-chrome a.btn:focus-visible {
  color: var(--ink);
  text-decoration: none;
}
.ops-chrome a.btn.secondary,
.ops-chrome a.btn.secondary:link,
.ops-chrome a.btn.secondary:visited,
.ops-chrome a.btn.secondary:hover,
.ops-chrome a.btn.secondary:focus-visible {
  color: var(--ink);
  text-decoration: none;
}
.ops-chrome a.btn.danger,
.ops-chrome a.btn.danger:link,
.ops-chrome a.btn.danger:visited,
.ops-chrome a.btn.danger:hover,
.ops-chrome a.btn.danger:focus-visible {
  color: var(--white);
  text-decoration: none;
}
.ops-chrome .tenant-aside a.active { box-shadow: inset 3px 0 0 var(--green); }
.ops-chrome .tenant-aside a.nav-doc-job.active { box-shadow: inset 3px 0 0 var(--doc-job); }
.ops-chrome .tenant-aside a.nav-doc-quote.active { box-shadow: inset 3px 0 0 var(--doc-quote); }
.ops-chrome .tenant-aside a.nav-doc-invoice.active { box-shadow: inset 3px 0 0 var(--doc-invoice); }
/* Soft secondary doc buttons stay borderless in ops (global secondaries add a border). */
.ops-chrome .btn.btn-doc-job.secondary, .ops-chrome a.btn.btn-doc-job.secondary {
  background: var(--doc-job-soft); color: var(--doc-job-fg); border: 0;
}
.ops-chrome .btn.btn-doc-quote.secondary, .ops-chrome a.btn.btn-doc-quote.secondary {
  background: var(--doc-quote-soft); color: var(--doc-quote-fg); border: 0;
}
.ops-chrome .btn.btn-doc-invoice.secondary, .ops-chrome a.btn.btn-doc-invoice.secondary {
  background: var(--doc-invoice-soft); color: var(--doc-invoice-fg); border: 0;
}
.brand-logo {
  width: auto;
  max-width: 8.6rem;
  max-height: 3.2rem;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 0.2rem;
  flex-shrink: 0;
}
.brand { margin: 0; font-weight: 700; letter-spacing: 0.04em; }
.brand-sub { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--aside-muted); }
.tenant-aside nav { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; font-size: 0.9rem; }
.ops-chrome aside nav.ops-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  gap: 0.08rem;
  align-items: stretch;
}
.ops-chrome .ops-nav a {
  padding: 0.2rem 0.5rem;
  line-height: 1.25;
  border-radius: 6px;
}
.ops-chrome .ops-nav a.active {
  padding: 0.2rem 0.5rem;
  box-shadow: inset 3px 0 0 #f9a825;
}
.nav-label {
  margin: 0.7rem 0 0.22rem;
  padding: 0.12rem 0.45rem 0.32rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--aside-fg) 82%, var(--aside-muted));
  border-bottom: 1px solid color-mix(in srgb, var(--aside-fg) 16%, transparent);
}
.nav-group { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.nav-group:first-child .nav-label { margin-top: 0; }
.nav-group a { margin-left: 0.45rem; display: block; }
/* Flat sibling indent (e.g. Q Templates under Quotes) — same offset as nest children, no dropdown. */
.nav-group a.nav-indent { margin-left: 1.05rem; }
.nav-drop {
  display: block;
  margin: 0.2rem 0 0;
  min-width: 0;
}
.nav-drop-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.nav-drop[open]::details-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.nav-drop > summary.nav-label {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0.12rem 0.45rem 0.32rem;
  border-radius: 0;
  user-select: none;
}
.nav-drop > summary.nav-label::-webkit-details-marker { display: none; }
.nav-drop > summary.nav-label::after {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid color-mix(in srgb, var(--aside-fg) 55%, var(--aside-muted));
  border-bottom: 1.5px solid color-mix(in srgb, var(--aside-fg) 55%, var(--aside-muted));
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.nav-drop[open] > summary.nav-label::after { transform: rotate(45deg); }
.nav-drop > summary.nav-label:hover {
  background: transparent;
  color: #fff;
}
.nav-nest {
  margin: 0;
}
.nav-nest > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-left: 0.45rem;
  padding: 0.28rem 0.45rem;
  border-radius: 5px;
  color: var(--aside-link);
  user-select: none;
  font-weight: 600;
}
.nav-nest > summary::-webkit-details-marker { display: none; }
.nav-nest > summary::after {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid color-mix(in srgb, var(--aside-fg) 55%, var(--aside-muted));
  border-bottom: 1.5px solid color-mix(in srgb, var(--aside-fg) 55%, var(--aside-muted));
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.nav-nest[open] > summary::after { transform: rotate(45deg); }
.nav-nest > summary:hover,
.nav-nest[open] > summary {
  background: var(--nav-hover);
  color: #fff;
}
.nav-nest .nav-drop-body a { margin-left: 1.05rem; }
.tenant-aside a { display: block; color: var(--aside-link); text-decoration: none; padding: 0.28rem 0.45rem; border-radius: 5px; }
.tenant-aside a.active, .tenant-aside a:hover { background: var(--nav-hover); color: #fff; }
.tenant-aside a.nav-doc-job.active { box-shadow: inset 3px 0 0 var(--doc-job); }
.tenant-aside a.nav-doc-quote.active { box-shadow: inset 3px 0 0 var(--doc-quote); }
.tenant-aside a.nav-doc-invoice.active { box-shadow: inset 3px 0 0 var(--doc-invoice); }
.tenant-aside a.ops-home-link { font-weight: 700; }
.tenant-aside a.panel-id-user { display: flex; align-items: center; }
.main { margin-left: var(--aside-width); padding: 1.25rem 1.5rem 2.5rem; min-width: 0; position: relative; z-index: 1; }
header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.tenant-banner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.15rem;
  padding: 0.85rem 1rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tenant-banner-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.banner-logo {
  width: auto;
  max-width: 11rem;
  max-height: 3.6rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.3rem 0.45rem;
  flex-shrink: 0;
}
.banner-company { margin: 0; font-size: 1.15rem; font-weight: 700; }
h1 { margin: 0 0 0.15rem; font-size: 1.45rem; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
/* header is flex; force title-row full width so margin-left:auto / space-between pin actions hard right. */
.main > header > .title-row {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.title-row h1 { margin: 0; }
.page-subtitle { margin: 0.2rem 0 0; font-size: 1rem; font-weight: 500; color: var(--muted); }
.title-row form { margin: 0; }
/*
 * Shared control kit (visual uniformity Phase 2):
 * - Column visibility: .col-vis-panel + .col-vis-trigger (grid icon) + eyeball toggles
 *   via src/lib/column-visibility.ts — Quotes, Customers, Price book, phone ⋮ menus.
 * - Danger delete: ICON_TRASH_BIN + .icon-btn-danger for row/line removes;
 *   admin list hard-delete = .list-permanent-delete / .pb-danger-red (#d92d20).
 * - Status chips: existing .bulk-status-chip / semantic status-* tokens.
 */
/* Invoices admin: Void beside New invoice — pale pastel orange (not danger red). */
.list-invoice-void-btn,
button.list-invoice-void-btn,
.list-job-cancel-btn,
button.list-job-cancel-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 2.55rem;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid var(--ok-draft-border, #f0c089);
  background: var(--ok-draft-bg, #fff1e0);
  color: var(--ok-draft-fg, #b85a00);
}
.list-invoice-void-btn:hover,
.list-invoice-void-btn:focus-visible,
button.list-invoice-void-btn:hover,
button.list-invoice-void-btn:focus-visible,
.list-job-cancel-btn:hover,
.list-job-cancel-btn:focus-visible,
button.list-job-cancel-btn:hover,
button.list-job-cancel-btn:focus-visible {
  background: #ffe4c4;
  border-color: #e8b57a;
  color: #9a4a00;
  filter: none;
}
/* Jobs admin: Completed beside Cancel — soft job green (not danger red). */
.list-job-complete-btn,
button.list-job-complete-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 2.55rem;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--doc-job, #1f7a4d) 35%, #fff);
  background: color-mix(in srgb, var(--doc-job, #1f7a4d) 12%, #fff);
  color: var(--doc-job, #1f7a4d);
}
.list-job-complete-btn:hover,
.list-job-complete-btn:focus-visible,
button.list-job-complete-btn:hover,
button.list-job-complete-btn:focus-visible {
  background: color-mix(in srgb, var(--doc-job, #1f7a4d) 20%, #fff);
  border-color: color-mix(in srgb, var(--doc-job, #1f7a4d) 50%, #fff);
  color: color-mix(in srgb, var(--doc-job, #1f7a4d) 85%, #000);
  filter: none;
}

/* Admin list: Delete / DELETE hard-right (title row or beside New quote). */
.list-permanent-delete {
  position: relative;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  align-self: flex-start;
}
.list-permanent-delete > summary.list-permanent-delete-btn,
.list-permanent-delete > button.list-permanent-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  min-height: 2.55rem;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  box-sizing: border-box;
  border: none;
  /* Catalogue danger red — not brown --warn. */
  background: #d92d20;
  color: #fff;
}
.list-permanent-delete > summary.list-permanent-delete-btn:hover,
.list-permanent-delete > summary.list-permanent-delete-btn:focus-visible,
.list-permanent-delete[open] > summary.list-permanent-delete-btn,
.list-permanent-delete > button.list-permanent-delete-btn:hover,
.list-permanent-delete > button.list-permanent-delete-btn:focus-visible {
  background: #b42318;
  color: #fff;
  filter: none;
}
.list-permanent-delete > summary.list-permanent-delete-btn::-webkit-details-marker { display: none; }
.list-permanent-delete > summary.list-permanent-delete-btn::marker { content: ""; }
.list-permanent-delete > summary.list-permanent-delete-btn svg,
.list-permanent-delete > button.list-permanent-delete-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
.list-permanent-delete-body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
  min-width: min(22rem, 92vw);
  max-width: 26rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line, #d9dee5);
  border-radius: 10px;
  background: var(--white, #fff);
  box-shadow: 0 8px 24px rgba(20, 28, 36, 0.12);
}
.muted { color: var(--muted); font-size: 0.92rem; }
.tenant-switch { width: 100%; }
.tenant-switch label { font-size: 0.78rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.2rem; }
.tenant-switch select { width: 100%; min-width: 0; max-width: 100%; }
select, input, textarea, button { font: inherit; }
select, input, textarea { border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.5rem; background: var(--white); }
button, .btn { background: var(--green); color: #fff; border: 0; border-radius: 6px; padding: 0.4rem 0.75rem; cursor: pointer; text-decoration: none; display: inline-block; }
button.secondary, .btn.secondary { background: var(--secondary-bg); color: var(--ink); }
button.danger, .btn.danger { background: var(--warn); color: #fff; }
/* Button-styled links: beat global a / a:visited ink so primary CTAs stay white on green. */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus-visible {
  color: #fff;
  text-decoration: none;
}
a.btn.secondary,
a.btn.secondary:link,
a.btn.secondary:visited,
a.btn.secondary:hover,
a.btn.secondary:focus-visible {
  color: var(--ink);
  text-decoration: none;
}
a.btn.danger,
a.btn.danger:link,
a.btn.danger:visited,
a.btn.danger:hover,
a.btn.danger:focus-visible {
  color: #fff;
  text-decoration: none;
}
button.row-mini { padding: 0.2rem 0.45rem; font-size: 0.78rem; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.22rem 0.4rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  line-height: 1;
  font-size: 0.82rem;
}
.icon-btn .enq-icon { width: 1.05rem; height: 1.05rem; display: block; flex-shrink: 0; }
.icon-btn.enq-unread, .icon-btn.enq-unread.is-on, .icon-btn.enq-read { color: #00c853; }
.icon-btn.enq-unread:hover, .icon-btn.enq-read:hover { background: #e8f8ee; }
.ops-chrome .icon-btn.enq-unread, .ops-chrome .icon-btn.enq-unread.is-on, .ops-chrome .icon-btn.enq-read { color: #00c853; background: transparent; }
.enq-done-check {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  margin: 0.15rem 0 0;
  border: 1.5px solid #7a8b7c;
  border-radius: 3px;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
.enq-done-check.is-on { background: #00c853; border-color: #00a844; }
.enq-done-check.is-on::after {
  content: "";
  position: absolute;
  left: 0.22rem;
  top: 0.02rem;
  width: 0.32rem;
  height: 0.58rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.enq-done-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--ink); }
.banner { background: var(--ok-bg); border: 1px solid var(--banner-border); padding: 0.6rem 0.75rem; border-radius: 8px; }
.banner-warn { background: var(--warn-bg); border-color: var(--warn-border); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--green); box-shadow: 0 1px 4px rgba(20, 32, 23, 0.12); }
.card strong { display: block; font-size: 1.6rem; }
a.card-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
a.card-btn:hover,
a.card-btn:focus-visible {
  background: var(--card-hover);
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(20, 32, 23, 0.14);
  outline: none;
}
a.card-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 28%, transparent); }
a.card-btn:active { background: var(--ok-bg); }
.card-go {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}
a.card-btn:hover .card-go,
a.card-btn:focus-visible .card-go { background: var(--green-dark); }
table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* Price-list typeahead sits in an add-next table row; clipping hides the dropdown. */
table:has(tr.add-next-row) {
  overflow: visible;
  position: relative;
  z-index: 6;
}
tr.add-next-row { position: relative; z-index: 7; }
tr.add-next-row td { overflow: visible; }
th, td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--th-bg); }
/* Customers list: column picker + horizontal scroll on wide tables.
   Contain width so the page never spills past the main column. */
body.doc-area-customer .main {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
body.doc-area-customer .job-card-head,
body.doc-area-customer .job-tabs,
body.doc-area-customer .cust-form,
body.doc-area-customer .panel {
  max-width: 100%;
  min-width: 0;
}
.cust-list {
  margin: 0.75rem 0 1.25rem;
  max-width: 100%;
  min-width: 0;
}
.cust-list-toolbar {
  margin: 0 0 0.55rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.cust-list .table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/* Fit all columns in the main column — fixed layout + sensible widths.
   Do NOT use overflow-wrap:anywhere / word-break:break-word on cells:
   that (#138) crushed Preferred/Phone into one letter per line. */
.cust-list .table-scroll table.cust-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.cust-list .table-scroll th,
.cust-list .table-scroll td {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  vertical-align: top;
}
.cust-table th {
  white-space: nowrap;
}
.cust-table th[data-col="name"],
.cust-table td[data-col="name"] { width: 20%; }
.cust-table th[data-col="preferred"],
.cust-table td[data-col="preferred"] { width: 12%; }
.cust-table th[data-col="phone"],
.cust-table td[data-col="phone"] { width: 14%; }
.cust-table th[data-col="email"],
.cust-table td[data-col="email"] { width: 18%; }
.cust-table th[data-col="address"],
.cust-table td[data-col="address"] { width: 22%; }
.cust-table th[data-col="legal"],
.cust-table td[data-col="legal"] { width: 14%; }
.cust-table th[data-col="abn"],
.cust-table td[data-col="abn"] { width: 12%; }
.cust-table th[data-col="sites"],
.cust-table td[data-col="sites"] { width: 6%; }
.cust-table th[data-col="kind"],
.cust-table td[data-col="kind"] { width: 8%; }
/* Quote# + Job# stay narrow so Description can breathe. */
.quotes-table th[data-col="number"],
.quotes-table td[data-col="number"] {
  width: 5.5rem;
  max-width: 6.25rem;
  white-space: nowrap;
}
.quotes-table th[data-col="job"],
.quotes-table td[data-col="job"] {
  width: 5rem;
  max-width: 5.75rem;
  white-space: nowrap;
}
.quotes-table td[data-col="job"] a.quote-job-num {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.quotes-table th[data-col="customer"],
.quotes-table td[data-col="customer"] {
  width: 18%;
  min-width: 10rem;
}
.quotes-table th[data-col="description"],
.quotes-table td[data-col="description"] {
  width: 32%;
  min-width: 12rem;
}
.quotes-table td[data-col="description"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quotes-table th[data-col="value"],
.quotes-table td[data-col="value"] {
  width: 6.75rem;
  white-space: nowrap;
  text-align: right;
}
/* Invoices desk: Invoice # · tight Customer · wide Description · right Total. */
.invoices-table th[data-col="number"],
.invoices-table td[data-col="number"] {
  width: 6.5rem;
  max-width: 7.5rem;
  white-space: nowrap;
}
.invoices-table th[data-col="customer"],
.invoices-table td[data-col="customer"] {
  width: 12%;
  max-width: 11rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invoices-table th[data-col="description"],
.invoices-table td[data-col="description"] {
  /* Fixed layout: claim leftover so Job# sits on the table’s right edge. */
  width: 42%;
  min-width: 14rem;
}
body[data-list-chrome="invoices"] .invoices-list .invoices-table .row-actions,
body[data-list-chrome="invoices"] .invoices-list .invoices-table th:not([data-col]):not(.col-check) {
  display: none;
}
body[data-list-chrome="invoices"] .phone-list-content > .bulk-bar > p.muted,
body[data-list-chrome="quotes"] .phone-list-content > .bulk-bar > p.muted,
body[data-list-chrome="jobs"] .phone-list-content > .bulk-bar > p.muted,
body[data-list-chrome="tasks"] .phone-list-content > .bulk-bar > p.muted,
body[data-list-chrome="kits"] .phone-list-content > .bulk-bar > p.muted,
body[data-list-chrome="customers"] .phone-list-content > .bulk-bar > p.muted {
  display: none !important;
}
/* Admin wraps the table in form.panel.bulk-bar — neutralize panel inset so the
 * list box edges match Demo Owner / non-admin (flush table composition). */
body[data-list-chrome="invoices"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="quotes"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="tasks"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="kits"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="customers"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="catalogue"] .phone-list-content > form.bulk-bar.panel {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.invoices-table td[data-col="description"] a.invoice-list-desc {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.invoices-table th[data-col="total"],
.invoices-table td[data-col="total"] {
  width: 7rem;
  white-space: nowrap;
  text-align: right;
}
.invoices-table th[data-col="total"] .cust-th {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.invoices-table th[data-col="total"] .cust-th-sort-link {
  justify-content: flex-end;
}
.invoices-table th[data-col="status"],
.invoices-table td[data-col="status"] {
  width: 7.5rem;
  white-space: nowrap;
}
.invoices-table th[data-col="date"],
.invoices-table td[data-col="date"] {
  width: 6.5rem;
  white-space: nowrap;
}
.invoices-table th[data-col="job"],
.invoices-table td[data-col="job"] {
  width: 5rem;
  max-width: 5.75rem;
  white-space: nowrap;
}
.quotes-table th[data-col="date"],
.quotes-table td[data-col="date"] {
  width: 6.5rem;
  white-space: nowrap;
}
.quotes-table th[data-col="address"],
.quotes-table td[data-col="address"] { width: 18%; }
.quotes-table th[data-col="status"],
.quotes-table td[data-col="status"] { width: 10%; }
.quotes-table th[data-col="source"],
.quotes-table td[data-col="source"] { width: 10%; }
/* Quiet uniform column headers (don’t paint each th differently). */
body[data-list-chrome="quotes"] .quotes-table thead th,
body[data-list-chrome="quotes"] .quotes-table thead th .cust-th-label,
body[data-list-chrome="quotes"] .quotes-table thead th .cust-th-sort-link,
body[data-list-chrome="jobs"] .jobs-table thead th,
body[data-list-chrome="jobs"] .jobs-table thead th .cust-th-label,
body[data-list-chrome="jobs"] .jobs-table thead th .cust-th-sort-link,
body[data-list-chrome="jobs"] .jobs-table thead th .cust-sort-btn,
body[data-list-chrome="enquiries"] .enquiries-table thead th,
body[data-list-chrome="enquiries"] .enquiries-table thead th .cust-th-label,
body[data-list-chrome="enquiries"] .enquiries-table thead th .cust-th-sort-link {
  color: var(--muted, #5a6a7d);
  background: var(--th-bg, #eef2f6);
}
body[data-list-chrome="quotes"] .quotes-table thead th .cust-th-sort-link:hover .cust-th-label,
body[data-list-chrome="quotes"] .quotes-table thead th .cust-th-sort-link.active .cust-th-label,
body[data-list-chrome="jobs"] .jobs-table thead th .cust-sort-btn:hover,
body[data-list-chrome="jobs"] .jobs-table thead th .cust-sort-btn.active,
body[data-list-chrome="enquiries"] .enquiries-table thead th .cust-th-sort-link:hover .cust-th-label,
body[data-list-chrome="enquiries"] .enquiries-table thead th .cust-th-sort-link.active .cust-th-label {
  color: var(--ink, #0f253e);
}
/* Draft Date urgency bands (thresholds from Settings → Defaults; stock 7 / 14 / 21). */
.quote-list-date {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  white-space: nowrap;
}
.quote-list-date.quote-date-urg-warn {
  background: var(--ok-draft-bg);
  color: var(--ok-draft-fg);
}
.quote-list-date.quote-date-urg-strong {
  background: var(--sem-chip-urgent-bg);
  color: var(--sem-chip-urgent-fg);
}
.quote-list-date.quote-date-urg-critical {
  background: var(--sem-chip-danger-bg);
  color: var(--sem-chip-danger-fg);
  font-weight: 700;
}
/* Draft Date bands — quiet wash on the widget (toolbar mid, after Search). */
.quote-draft-urg-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  margin: 0 0.1rem;
  padding: 0.12rem 0.4rem 0.18rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok-draft-fg, #a65b1f) 9%, transparent);
  box-shadow: none;
}
.quote-draft-urg-widget {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.45rem 0.65rem;
  margin: 0;
  padding: 0.12rem 0.45rem 0.18rem;
  border: 0;
  border-radius: 6px;
  /* Subtle group wash — not a loud card. */
  background: color-mix(in srgb, var(--ok-draft-fg, #a65b1f) 9%, transparent);
  box-shadow: none;
}
/* Admin toolbar: phone ⋮ lives beside Draft Date mid (desk-hidden). */
.list-chrome-band-phone-menu {
  display: none;
}
.quote-draft-urg-band {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.15rem;
  margin: 0;
  padding: 0.1rem 0.15rem 0.2rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  /* Count first (urgency colour); unit label smaller default ink. */
  color: var(--ink, #0f253e);
}
.quote-draft-urg-band:hover,
.quote-draft-urg-band:focus-visible {
  filter: none;
  outline: none;
  opacity: 1;
}
.quote-draft-urg-band.is-active {
  font-weight: 700;
  border-bottom-color: var(--ink, #0f253e);
}
.quote-draft-urg-band.is-empty {
  opacity: 0.45;
}
.quote-draft-urg-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 1;
}
.quote-draft-urg-unit {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink, #0f253e);
  opacity: 0.85;
}
.quote-draft-urg-band.quote-draft-urg-warn .quote-draft-urg-count {
  color: var(--ok-draft-fg);
}
.quote-draft-urg-band.quote-draft-urg-strong .quote-draft-urg-count {
  color: var(--sem-chip-urgent-fg);
}
.quote-draft-urg-band.quote-draft-urg-critical .quote-draft-urg-count {
  color: var(--sem-chip-danger-fg);
}
/* Quotes + Invoices + Jobs + Incoming + Kits + Catalogue + Inbox: text + coloured underline (not filled pills).
 * NOTE: this selector list must close with a property block — do not insert rules mid-list. */
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-draft,
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-accepted,
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-approved,
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-declined,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-draft,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-approved,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-sent,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-sent_to_xero,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-authorised,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_quote,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-customer_follow_up,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-supplier_parts,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-admin_applications,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_schedule,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-scheduled,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_invoice,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-unread,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-local,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-website,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-sms,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-voicemail,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-email,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-phone,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-facebook,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-pylon_solar,
.list-status-filter[data-status-filter="kits"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="kits"] .bulk-status-chip.pill[class*="status-"],
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.pill.status-personal,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.pill.status-commercial,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill.status-active,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill.status-inactive,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-current,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-history,
body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill,
body[data-list-chrome="tasks"] .task-filter-desk .list-scope-chip {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  background: transparent !important;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  padding: 0.1rem 0.45rem 0.2rem;
  gap: 0.35rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
  text-align: left;
}
/* Catalogue tabs + sortable list headers */
.catalogue-page-tabs { margin-bottom: 0.85rem; }
body[data-list-chrome="catalogue"] .catalogue-page-tabs { margin: 0 0 0.55rem; }
body[data-list-chrome="catalogue"] .pb-table thead th .cust-th-sort-link,
body[data-list-chrome="catalogue"] .phone-list-content table thead th .cust-th-sort-link {
  color: inherit;
  text-decoration: none;
}
body[data-list-chrome="catalogue"] .pb-table thead th .cust-th-sort-link:hover .cust-th-label,
body[data-list-chrome="catalogue"] .pb-table thead th .cust-th-sort-link.active .cust-th-label,
body[data-list-chrome="catalogue"] .phone-list-content table thead th .cust-th-sort-link:hover .cust-th-label,
body[data-list-chrome="catalogue"] .phone-list-content table thead th .cust-th-sort-link.active .cust-th-label {
  text-decoration: underline;
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-draft,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-draft {
  color: var(--ok-draft-fg);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-accepted {
  color: var(--doc-job-fg);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-approved,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-approved,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-authorised {
  color: var(--ok-bright-fg);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill.status-declined {
  color: var(--sem-chip-danger-fg);
}
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-sent,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill.status-sent_to_xero {
  color: var(--sem-chip-info-fg);
}
/* Jobs short labels — accent text only (underline when active). */
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_quote {
  color: var(--doc-quote-fg, #8a5a00);
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-customer_follow_up {
  color: var(--warn, #b85c00);
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-supplier_parts {
  color: #a12828;
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-admin_applications {
  color: var(--sem-chip-info-fg, #3a4f8a);
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_schedule {
  color: #163a6b;
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-scheduled {
  color: var(--doc-job-fg, #1a5c2e);
}
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill.status-need_to_invoice {
  color: var(--doc-invoice-fg, #0a5a60);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill:not([class*="status-"]),
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill:not([class*="status-"]) {
  color: var(--muted, #5a6a7d);
}
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill.status-active {
  color: var(--ok-bright-fg, #1a7a3c);
}
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill.status-inactive {
  color: var(--muted, #5a6a7d);
}
/* Inbox Current/History: muted until active; active gets colour + underline. */
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-current,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-history {
  color: var(--muted, #5a6a7d);
}
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-current.is-active {
  color: var(--ok-bright-fg, #1a7a3c);
}
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill.status-history.is-active {
  color: var(--ink, #0f253e);
}
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill.status-unread {
  color: var(--ok-bright-fg, #1a7a3c);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip .bulk-status-chip-label,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip .bulk-status-chip-label {
  border-bottom: 0;
  padding-bottom: 0;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  font-weight: inherit;
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.is-active,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.is-active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-weight: 700;
  border-bottom: 2px solid currentColor !important;
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip.pill:not([class*="status-"]).is-active,
.list-status-filter[data-status-filter="inbox"] .bulk-status-chip.pill:not([class*="status-"]).is-active {
  color: var(--ink, #0f253e);
}
.list-status-filter[data-status-filter="quotes"] .bulk-status-chip .bulk-status-count,
.list-status-filter[data-status-filter="invoices"] .bulk-status-chip .bulk-status-count,
.list-status-filter[data-status-filter="jobs"] .bulk-status-chip .bulk-status-count,
.list-status-filter[data-status-filter="enquiries"] .bulk-status-chip .bulk-status-count,
.list-status-filter[data-status-filter="customers"] .bulk-status-chip .bulk-status-count,
.list-status-filter[data-status-filter="catalogue"] .bulk-status-chip .bulk-status-count {
  order: 0;
  opacity: 0.8;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}
/* Kill solid Scheduled fill on Jobs list-chrome filters (underline language above wins). */
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-scheduled.is-active,
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-need_to_schedule {
  background: transparent !important;
  color: inherit;
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-need_to_schedule {
  color: #163a6b;
}
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-scheduled,
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-scheduled.is-active {
  color: var(--doc-job-fg, #1a5c2e);
}
.phone-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}
/* Quiet Quotes list pager — smaller type, footer weight. */
.list-pager.quotes-list-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0;
  padding: 0.4rem 0.75rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #5a6a7d);
  background: var(--white, #fff);
  border: 1px solid var(--line, #d9dee5);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}
.list-pager-showing {
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.list-pager-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-left: auto;
}
.list-pager-per-group {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.list-pager-per {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  font-size: inherit;
}
.list-pager-per:hover {
  background: var(--secondary-bg, #eef2f6);
  color: var(--ink, #0f253e);
}
.list-pager-per.is-active {
  background: var(--th-bg, #eef2f6);
  color: var(--ink, #0f253e);
  font-weight: 600;
}
.list-pager-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.list-pager-nav {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  padding: 0.1rem 0.2rem;
}
.list-pager-nav:hover {
  color: var(--ink, #0f253e);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.list-pager-nav.is-disabled {
  opacity: 0.45;
  cursor: default;
}
.list-pager-sep {
  opacity: 0.55;
}
/* Outer chrome band: ROUND top corners (Search/filters container). */
body[data-list-chrome] .list-chrome-band,
body[data-list-chrome] .list-chrome-band.list-chrome-band--toolbar {
  border-radius: 12px 12px 0 0;
}
/* Table scroll + table: no radius — sage header strip must be SQUARE / flush. */
body.ops-chrome[data-list-chrome="quotes"] .quotes-list > .table-scroll,
body[data-list-chrome="quotes"] .quotes-list > .table-scroll,
body[data-list-chrome="invoices"] .invoices-list > .table-scroll,
body[data-list-chrome="jobs"] .jobs-list > .table-scroll,
body[data-list-chrome="kits"] .kits-list > .table-scroll,
body[data-list-chrome="enquiries"] .enquiries-list > .table-scroll,
body[data-list-chrome="inbox"] .inbox-list > .table-scroll,
body[data-list-chrome="catalogue"] .cust-list > .table-scroll,
body[data-list-chrome="catalogue"] .pb-list > .table-scroll,
body.ops-chrome[data-list-chrome="catalogue"] .cust-list > .table-scroll,
body.ops-chrome[data-list-chrome="catalogue"] .pb-list > .table-scroll {
  border-radius: 0 !important;
  border-bottom: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto;
}
body[data-list-chrome="quotes"] .quotes-list table.quotes-table,
body[data-list-chrome="quotes"] .quotes-list .quotes-table.cust-table,
body[data-list-chrome="invoices"] .invoices-list table,
body[data-list-chrome="jobs"] .jobs-list .jobs-table,
body[data-list-chrome="kits"] .kits-list table,
body[data-list-chrome="enquiries"] .enquiries-list table.enquiries-table,
body[data-list-chrome="inbox"] .inbox-list table.inbox-table,
body[data-list-chrome="catalogue"] .pb-list table.pb-table,
body[data-list-chrome="catalogue"] .pb-list table.cust-table {
  /* Beat global `table { border-radius; overflow; border; background }` — white
     crescents at rounded corners read as L/R padding beside the sage thead. */
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
/* Kill generic .ops-chrome .table-scroll radius — Pricebook header must be edge-to-edge. */
body[data-list-chrome="catalogue"] .table-scroll,
body.ops-chrome[data-list-chrome="catalogue"] .table-scroll,
body[data-list-chrome="catalogue"] .pb-list > .table-scroll,
body.ops-chrome[data-list-chrome="catalogue"] .pb-list > .table-scroll {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* No horizontal inset — sage paints to the scroll content edge (Quotes parity). */
  border-left: 1px solid var(--line, #d9dee5);
  border-right: 1px solid var(--line, #d9dee5);
  background-color: var(--white, #fff);
  /* Top of scroll = sage so subpixel / overflow never flashes paper white L/R of thead. */
  background-image: linear-gradient(var(--th-bg, #eef2ee), var(--th-bg, #eef2ee));
  background-size: 100% 2.85rem;
  background-repeat: no-repeat;
  background-position: top left;
  box-sizing: border-box;
}
/* Thead row fill — same edge as .table-scroll content box (not an inset bar). */
body[data-list-chrome="catalogue"] .pb-list > .table-scroll thead,
body[data-list-chrome="catalogue"] .pb-list > .table-scroll thead tr,
body[data-list-chrome="catalogue"] .pb-table thead,
body[data-list-chrome="catalogue"] .pb-table thead tr {
  background: var(--th-bg, #eef2ee) !important;
}
body[data-list-chrome="inbox"] .inbox-list table.inbox-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
/* Column header fill is square / full-bleed with the table edge (not a rounded inset). */
body[data-list-chrome="quotes"] .quotes-table thead th,
body[data-list-chrome="quotes"] .quotes-table thead th:first-child,
body[data-list-chrome="quotes"] .quotes-table thead th:last-child,
body[data-list-chrome="invoices"] .invoices-list table thead th,
body[data-list-chrome="jobs"] .jobs-list .jobs-table thead th,
body[data-list-chrome="kits"] .kits-list table thead th,
body[data-list-chrome="enquiries"] .enquiries-list table thead th,
body[data-list-chrome="inbox"] .inbox-list table.inbox-table thead th,
body[data-list-chrome="catalogue"] .pb-table thead th,
body[data-list-chrome="catalogue"] .pb-table thead th:first-child,
body[data-list-chrome="catalogue"] .pb-table thead th:last-child,
body[data-list-chrome="catalogue"] .cust-table.pb-table thead th,
body[data-list-chrome="catalogue"] .cust-table.pb-table thead th:first-child,
body[data-list-chrome="catalogue"] .cust-table.pb-table thead th:last-child {
  border-radius: 0 !important;
}
/* Keep action cells as table-cells — never put .row-actions (display:flex) on the <td>. */
body[data-list-chrome="inbox"] .inbox-table th[data-col],
body[data-list-chrome="inbox"] .inbox-table td[data-col] {
  vertical-align: top;
}
body[data-list-chrome="inbox"] .inbox-table th.col-check,
body[data-list-chrome="inbox"] .inbox-table td.col-check {
  width: 2.25rem;
  text-align: center;
  vertical-align: middle;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="received"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="received"] {
  width: 7.25rem;
  white-space: nowrap;
}
/* Drop = pale danger (chip tokens) — secondary look, not solid .danger red. */
body[data-list-chrome="inbox"] .inbox-drop-btn,
button.inbox-drop-btn {
  background: var(--sem-chip-danger-bg);
  color: var(--sem-chip-danger-fg);
  border: 1px solid color-mix(in srgb, var(--sem-chip-danger-fg) 28%, #ffffff);
}
body[data-list-chrome="inbox"] .inbox-drop-btn:hover,
body[data-list-chrome="inbox"] .inbox-drop-btn:focus-visible,
button.inbox-drop-btn:hover,
button.inbox-drop-btn:focus-visible {
  background: color-mix(in srgb, var(--sem-chip-danger-bg) 72%, #ffffff);
  color: var(--sem-chip-danger-fg);
  border-color: color-mix(in srgb, var(--sem-chip-danger-fg) 42%, #ffffff);
  filter: none;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="from"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="from"] {
  width: 14%;
  overflow-wrap: anywhere;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="subject"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="subject"] {
  width: 22%;
  overflow-wrap: break-word;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="match"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="match"] {
  width: 12%;
  overflow-wrap: anywhere;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="status"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="status"] {
  width: 6.75rem;
  white-space: nowrap;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="preview"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="preview"] {
  width: auto;
  white-space: normal;
  overflow-wrap: break-word;
}
body[data-list-chrome="inbox"] .inbox-table th[data-col="actions"],
body[data-list-chrome="inbox"] .inbox-table td[data-col="actions"] {
  /* Import draft + Drop side-by-side on queued rows (#243) */
  width: 13.5rem;
  white-space: nowrap;
  text-align: right;
}
body[data-list-chrome="inbox"] .inbox-table td[data-col="actions"] .row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  gap: 0.35rem;
}
body[data-list-chrome="inbox"] .inbox-table .inbox-import-form {
  display: inline;
  margin: 0;
}
body[data-list-chrome="inbox"] .list-chrome-inline-form {
  display: inline;
  margin: 0;
}
body[data-list-chrome="inbox"] .list-chrome-inline-form button {
  margin: 0;
}
body[data-list-chrome="inbox"] .list-more-note {
  margin: 0.35rem 0.55rem 0.45rem;
  max-width: 18rem;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
}
body[data-list-chrome="quotes"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="invoices"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="jobs"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="tasks"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="kits"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="kits"] .kits-list .list-pager.kits-list-pager,
body[data-list-chrome="customers"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="enquiries"] .phone-list-content > .list-pager.quotes-list-pager,
/* Incoming always ships the Quotes pager */
body[data-list-chrome="enquiries"] .enquiries-bulk-form > .list-pager.quotes-list-pager,
body[data-list-chrome="inbox"] .phone-list-content > .list-pager.quotes-list-pager,
body[data-list-chrome="inbox"] .inbox-bulk-form > .list-pager.quotes-list-pager,
body[data-list-chrome="catalogue"] .phone-list-content .list-pager.pb-list-pager--footer,
body[data-list-chrome="catalogue"] .phone-list-content .list-pager.quotes-list-pager.pb-list-pager--footer {
  border-radius: 0 0 12px 12px;
}
.list-chrome-band-links {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  white-space: nowrap;
  font-size: 0.85rem;
}
/* Quiet status on Quote# (filter strip still has loud chips). */
a.quote-num-status,
.phone-row-top .quote-num-status {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.35;
  color: inherit;
}
a.quote-num-status:hover,
a.quote-num-status:focus-visible {
  filter: brightness(0.97);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
/* Quote status tints — Draft/Accepted/Approved/Declined distinct;
   Sent/Viewed/Expired/Cancelled share Viewed (“other/in-flight”) teal. */
a.quote-num-status.status-draft,
.phone-row-top .quote-num-status.status-draft,
.quote-status-plain.status-draft { background: var(--ok-draft-bg); color: var(--ok-draft-fg); }
a.quote-num-status.status-approved,
.phone-row-top .quote-num-status.status-approved,
.quote-status-plain.status-approved { background: var(--ok-bright-bg); color: var(--ok-bright-fg); }
a.quote-num-status.status-accepted,
.phone-row-top .quote-num-status.status-accepted,
.quote-status-plain.status-accepted { background: var(--doc-job-bg); color: var(--doc-job-fg); }
a.quote-num-status.status-declined,
.phone-row-top .quote-num-status.status-declined,
.quote-status-plain.status-declined { background: var(--sem-chip-danger-bg); color: var(--sem-chip-danger-fg); }
a.quote-num-status.status-sent,
a.quote-num-status.status-viewed,
a.quote-num-status.status-expired,
a.quote-num-status.status-cancelled,
.phone-row-top .quote-num-status.status-sent,
.phone-row-top .quote-num-status.status-viewed,
.phone-row-top .quote-num-status.status-expired,
.phone-row-top .quote-num-status.status-cancelled,
.quote-status-plain.status-sent,
.quote-status-plain.status-viewed,
.quote-status-plain.status-expired,
.quote-status-plain.status-cancelled { background: var(--sem-chip-done-bg); color: var(--sem-chip-done-fg); }
/* One-line ellipsis — parity with invoice/job list Description (not 2-line clamp). */
.quotes-table td[data-col="description"] .quote-list-desc,
.quote-list-desc,
.doc-tab-desc {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink, #1a2e24);
}
.quote-status-plain {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
}
.quote-job-pill {
  white-space: nowrap !important;
  flex: 0 0 auto;
}
/* Jobs Active list — tight Job# after check/dot; Status column wide enough for pills
   so they don’t bleed into Site (table-layout:fixed otherwise equal-splits columns). */
.jobs-table th.col-urg,
.jobs-table td.col-urg { width: 1.35rem; }
.jobs-table th[data-col="number"],
.jobs-table td[data-col="number"] {
  width: 5.75rem;
  max-width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-table th[data-col="customer"],
.jobs-table td[data-col="customer"] { width: 12%; }
.jobs-table th[data-col="description"],
.jobs-table td[data-col="description"] { width: 18%; }
.jobs-table td[data-col="description"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-table td[data-col="description"] .job-list-desc,
.job-list-desc {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-for-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.task-for-line > a {
  overflow: visible;
}
.task-for-line .job-list-desc {
  display: inline;
  overflow: visible;
  text-overflow: unset;
  white-space: inherit;
  min-width: 0;
  color: var(--muted, #5a6570);
}
.jobs-table th[data-col="site"],
.jobs-table td[data-col="site"] { width: 16%; }
.jobs-table td[data-col="site"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jobs-table td[data-col="site"] .cust-addr {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-row .doc-desc {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jobs-table th[data-col="status"],
.jobs-table td[data-col="status"] {
  width: 14rem;
  white-space: nowrap;
  overflow: hidden;
}
.jobs-table td[data-col="status"] .pill {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.jobs-table .job-list-status-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
.jobs-table .job-uncancel-btn,
.jobs-table .job-reopen-btn {
  flex: 0 0 auto;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.2;
}
.jobs-table th[data-col="task"],
.jobs-table td[data-col="task"] { width: 16%; }
.jobs-table th[data-col="due"],
.jobs-table td[data-col="due"] {
  width: 4.25rem;
  white-space: nowrap;
}
.jobs-table th[data-col="owner"],
.jobs-table td[data-col="owner"] { width: 10%; }
.cust-table td[data-col="address"] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cust-table td[data-col="address"] .cust-addr {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-table td[data-col="phone"],
.cust-table td[data-col="abn"],
.cust-table td[data-col="sites"] {
  overflow-wrap: normal;
  word-break: keep-all;
}
.cust-th {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
.cust-th-label { min-width: 0; }
.cust-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
a.cust-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  min-height: 1.35rem;
  padding: 0.05rem 0.2rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
}
a.cust-sort-btn:hover,
a.cust-sort-btn:focus-visible {
  color: var(--green-dark);
  border-color: color-mix(in srgb, var(--green-dark) 35%, var(--line));
  background: var(--th-bg);
}
a.cust-sort-btn.active {
  color: var(--green-dark);
  border-color: color-mix(in srgb, var(--green-dark) 45%, var(--line));
  background: color-mix(in srgb, var(--green-dark) 10%, var(--white));
}
button.is-faded,
.btn.is-faded {
  opacity: 0.45;
  cursor: default;
}
.icon-btn.icon-btn-edit {
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 8px;
  min-width: 2.35rem;
  min-height: 2.35rem;
}
.icon-btn.icon-btn-edit:hover,
.icon-btn.icon-btn-edit:focus-visible {
  border-color: color-mix(in srgb, var(--green-dark) 40%, var(--line));
  background: var(--th-bg);
  color: var(--green-dark);
}
.site-edit-actions { margin-top: 0.35rem; }
.cust-sort-bar {
  display: none;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  min-width: 0;
}
.cust-sort-bar-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
}
.cust-sort-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--ink);
}
.cust-table .flodiphone-with-dial {
  flex-wrap: wrap;
  max-width: 100%;
}
.cust-form.grid-form {
  max-width: 100%;
  min-width: 0;
}
.col-vis-panel,
.cust-cols-panel,
.pb-cols-panel {
  position: relative;
  display: inline-block;
}
.col-vis-panel > summary,
.cust-cols-panel > summary,
.pb-cols-panel > summary {
  list-style: none;
  cursor: pointer;
}
.col-vis-panel > summary::-webkit-details-marker,
.cust-cols-panel > summary::-webkit-details-marker,
.pb-cols-panel > summary::-webkit-details-marker { display: none; }
/* Shared column-selector trigger — large enough to read at a glance. */
.col-vis-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink, #1a2a1e);
  line-height: 0;
}
.col-vis-trigger:hover,
.col-vis-trigger:focus-visible {
  background: var(--th-bg, #eef1ec);
  color: var(--green-dark, #14301c);
  outline: none;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green, #1f6b3a) 40%, transparent);
}
.col-vis-panel[open] > .col-vis-trigger {
  background: var(--th-bg, #eef1ec);
  color: var(--green-dark, #14301c);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green, #1f6b3a) 45%, transparent);
}
.col-vis-trigger-svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}
.col-vis-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.9rem;
  position: relative;
}
.col-vis-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.col-vis-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--green-dark, #14301c);
}
.col-vis-eye-svg { display: none; }
.col-vis-check:checked ~ .col-vis-eye .col-vis-eye-on { display: block; }
.col-vis-check:not(:checked) ~ .col-vis-eye .col-vis-eye-off { display: block; }
.col-vis-check:not(:checked) ~ .col-vis-eye {
  color: #8a9690;
}
.col-vis-check:disabled ~ .col-vis-eye {
  opacity: 0.55;
}
.col-vis-check:disabled ~ .col-vis-label-text {
  color: var(--muted);
}
.col-vis-label-text {
  min-width: 0;
  line-height: 1.25;
}
.list-phone-menu-toggle .col-vis-toggle {
  width: 100%;
  padding: 0.2rem 0;
}
.cust-cols-body,
.pb-cols-body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  min-width: 14.5rem;
  padding: 0.65rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
}
.cust-cols-hint,
.pb-cols-hint { margin: 0 0 0.45rem; font-size: 0.78rem; }
.cust-col-list,
.pb-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cust-col-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.3rem;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
}
.pb-col-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.3rem;
  border-radius: 6px;
  user-select: none;
}
.cust-col-item:hover,
.pb-col-item:hover { background: var(--th-bg); }
.cust-col-item.is-dragging { opacity: 0.45; }
.cust-col-grip {
  color: var(--muted);
  letter-spacing: -0.15em;
  font-size: 0.85rem;
  line-height: 1;
  min-width: 1.1rem;
}
.cust-col-label,
.pb-col-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.9rem;
}
.cust-cols-actions,
.pb-cols-actions { margin: 0.5rem 0 0; }
.pb-list { margin: 0 0 0.75rem; }
.pb-list-toolbar { margin: 0 0 0.55rem; justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; }
.pb-list-toolbar .pb-cols-panel { margin-left: auto; }
/* Park/Delete selected live beside Columns — only when a row is ticked. */
form[data-bulk="pricebook"]:not(:has(input.pb-pick:checked)) .pb-bulk-selected {
  display: none;
}
.pb-band-count {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.35;
}
.pb-band-count .pb-band-pill {
  font-size: 1.05em;
  vertical-align: baseline;
}
.pb-band-label { margin: 0 0 0.55rem; }
.pb-junk-hints { margin: 0.35rem 0 0.75rem; }
.pb-junk-hints a { margin: 0 0.1rem; }
.similar-group h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.pb-list .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pb-list .table-scroll table { min-width: max(100%, 36rem); }
.cust-table th[hidden],
.cust-table td[hidden],
.pb-table th[hidden],
.pb-table td[hidden] { display: none !important; }
@media (max-width: 48rem) {
  .cust-list .table-scroll table,
  .pb-list .table-scroll table { min-width: 0; width: 100%; }
  .cust-cols-body,
  .pb-cols-body { left: 0; right: auto; min-width: min(16rem, calc(100vw - 2rem)); }
  body.doc-area-customer .job-tabs {
    max-width: 100%;
  }
}
/* Phone ⋮ menu (Quotes / Invoices dense rows) — hidden on desktop. */
.list-phone-menu { display: none; position: relative; }
.list-phone-menu-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.list-phone-menu-btn::-webkit-details-marker { display: none; }
.list-phone-menu-btn:hover,
.list-phone-menu-btn:focus-visible {
  border-color: color-mix(in srgb, var(--green-dark) 40%, var(--line));
  background: var(--th-bg);
  color: var(--green-dark);
}
.list-phone-menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 45;
  /* Stay in-viewport: never spill past screen edges (§5 overflow). */
  min-width: min(16.5rem, calc(100vw - 1.25rem));
  max-width: min(18rem, calc(100vw - 1.25rem));
  max-height: min(22rem, calc(100dvh - 7.5rem - env(safe-area-inset-bottom, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.65rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
  box-sizing: border-box;
}
.list-phone-menu-section {
  margin: 0.45rem 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.list-phone-menu-section:first-child { margin-top: 0; }
.list-phone-menu-sort {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
a.list-phone-menu-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.35rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 0.92rem;
}
a.list-phone-menu-link:hover,
a.list-phone-menu-link:focus-visible { background: var(--th-bg); }
a.list-phone-menu-link.is-active { font-weight: 700; color: var(--green-dark); }
.list-phone-menu-check {
  min-width: 0.9rem;
  color: var(--green-dark);
  font-size: 0.85rem;
}
.list-phone-menu-dir {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.list-phone-menu-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.list-phone-menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.list-phone-menu-actions { margin: 0.5rem 0 0; }
.list-phone-rows { display: none; }
.list-phone-toolbar-only { display: none; }
.phone-row-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}
.phone-row-amount {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.phone-row-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.phone-row-meta [data-phone-field][hidden],
.phone-row-meta .phone-row-sep[hidden] { display: none !important; }
.phone-row [data-phone-field][hidden] { display: none !important; }

/* Narrow: ops-chrome stacks .table-scroll into cards (thead hidden).
   Show a sort strip in the toolbar; drop fixed column widths so cards fill.
   Quotes/Invoices with .list-phone-rows use dense phone-row + ⋮ instead. */
@media (max-width: 56rem) {
  .cust-list-toolbar { justify-content: flex-start; }
  .cust-list .cust-cols-panel { margin-left: auto; }
  .cust-sort-bar { display: flex; }
  .cust-list .table-scroll th[data-col],
  .cust-list .table-scroll td[data-col] {
    width: auto;
  }
  .cust-list .table-scroll table.cust-table {
    table-layout: auto;
  }
  /* Dense multi-line rows (Jobs model) — hide labelled card table + chip/Columns chrome. */
  .cust-list:has(.list-phone-rows) .cust-sort-bar,
  .cust-list:has(.list-phone-rows) .cust-cols-panel,
  .cust-list:has(.list-phone-rows) .cust-list-toolbar:not(:has(.list-phone-menu)) {
    display: none !important;
  }
  .cust-list:has(.list-phone-rows) .list-phone-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1rem;
  }
  .cust-list:has(.list-phone-rows) > .table-scroll {
    display: none !important;
  }
  /* Tasks: same dense phone stack as Quotes/Invoices (hide table + sort heads). */
  .task-list > .list-phone-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 1rem;
  }
  .task-list > .table-scroll {
    display: none !important;
  }
  .task-phone-card {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .task-phone-card .phone-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
  }
  .task-phone-card strong { font-size: 1.02rem; }
  .task-phone-due {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
  }
  .task-phone-card .task-defer-n {
    padding: 0.12rem 0.4rem;
    min-height: 0;
    font-size: 0.8rem;
  }
  .task-phone-group,
  .task-phone-month {
    margin: 0.35rem 0 0.1rem;
  }
}
.num { font-variant-numeric: tabular-nums; }
td:has(> .num),
th.num,
td.num { text-align: right; }
input.num { text-align: right; }
.unit-money { text-align: right; margin: 0.45rem 0 0; font-weight: 600; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ops-chrome .main { min-width: 0; }
.ops-chrome .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.ops-chrome .table-scroll table {
  width: max-content;
  min-width: max(100%, 58rem);
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ops-chrome .table-scroll th,
.ops-chrome .table-scroll td {
  white-space: nowrap;
}
.ops-chrome .table-scroll td.cell-note {
  white-space: normal;
  min-width: 16rem;
  max-width: 22rem;
}
.ops-chrome .table-scroll td.cell-actions,
.ops-chrome .table-scroll td:has(.grid-form) {
  white-space: normal;
  min-width: 16rem;
  vertical-align: top;
}
.ops-chrome .cell-actions .row-actions {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 15rem;
}
.ops-chrome .cell-actions .row-actions input {
  width: 100%;
  min-width: 0;
}
.ops-chrome .cell-actions .row-actions button,
.ops-chrome button,
.ops-chrome .btn {
  white-space: nowrap;
}
.ops-chrome .table-scroll td:has(.grid-form) .grid-form {
  grid-template-columns: 1fr;
  min-width: 16rem;
}
@media (max-width: 56rem) {
  html.ops-chrome .ops-aside.tenant-aside {
    position: relative;
    width: 100%;
    height: auto;
    bottom: auto;
  }
  html.ops-chrome .main { margin-left: 0; }
  html.ops-chrome .ops-nav { flex: 0 0 auto; min-height: 0; }
  html.ops-chrome .table-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  html.ops-chrome .table-scroll table,
  html.ops-chrome .table-scroll thead,
  html.ops-chrome .table-scroll tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  html.ops-chrome .table-scroll thead { display: none; }
  html.ops-chrome .table-scroll tr {
    display: block;
    margin: 0 0 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }
  html.ops-chrome .table-scroll td {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    white-space: normal;
    padding: 0.3rem 0;
    border: 0;
  }
  html.ops-chrome .table-scroll td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.12rem;
  }
  html.ops-chrome .table-scroll td.cell-actions {
    min-width: 0;
    padding-top: 0.55rem;
  }
  html.ops-chrome .cell-actions .row-actions { min-width: 0; width: 100%; }
}
.filter-bar {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
  gap: 0.65rem 0.85rem;
  align-items: end;
}
/* Price book facets: Brand · Supplier · Type · Filter / Clear. */
.pb-filter-bar {
  grid-template-columns: repeat(3, minmax(7rem, 1fr)) auto;
}
/* Meta strip: square, flush into full-bleed table header (no inset rounded card). */
.pb-list-topstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.85rem;
  margin: 0;
  padding: 0.35rem 0.65rem 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #5a6a7d);
  background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
  border: 1px solid var(--line, #d9dee5);
  border-bottom: 0;
  border-radius: 0;
}
.pb-list-topstrip-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}
.pb-list-topstrip .pb-list-meta {
  margin: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.pb-list-meta .pb-band-pill {
  margin-right: 0.15rem;
}
.pb-list-meta strong {
  color: var(--ink, #0f253e);
  font-weight: 650;
}
.pb-list-topstrip .list-pager.pb-list-pager--strip {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 10rem;
  justify-content: flex-end;
}
.pb-list-topstrip .pb-bulk-selected {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.2;
  min-height: 1.85rem;
  white-space: nowrap;
}
.pb-list-topstrip .pb-cols-panel {
  flex: 0 0 auto;
  margin: 0;
}
.pb-list-topstrip .col-vis-trigger {
  width: 1.85rem;
  height: 1.85rem;
}
.pb-bulk-match-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line, #d9dee5);
  border-bottom: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
}
.pb-list-pager--footer {
  margin: 0;
}
/* Pricebook facets: flush under chrome band (same side edges as table-scroll). */
body[data-list-chrome="catalogue"] .phone-list-content > .pb-filter-bar,
body[data-list-chrome="catalogue"] .list-chrome-surface .pb-filter-bar {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line, #d9dee5);
  border-bottom: 0;
  border-radius: 0;
  background: var(--white, #fff);
  width: 100%;
  box-sizing: border-box;
}
/* Unwrap admin form / non-admin wrap — same flush composition as Quotes/Jobs.
   Quotes bulk-bar.panel is padding:0 / border:none — catalogue must match (no 1rem .panel inset). */
body[data-list-chrome="catalogue"] .phone-list-content > form.bulk-bar.panel,
body[data-list-chrome="catalogue"] .phone-list-content > .pb-list-wrap,
body[data-list-chrome="catalogue"] .list-chrome-surface > form.bulk-bar.panel,
body[data-list-chrome="catalogue"] .list-chrome-surface form.bulk-bar.panel,
body[data-list-chrome="catalogue"] .list-chrome-surface .pb-list-wrap,
body[data-list-chrome="catalogue"] form.bulk-bar.panel {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
/* Meta strip + list share one edge-to-edge column (no inset card). */
body[data-list-chrome="catalogue"] .cust-list.pb-list,
body[data-list-chrome="catalogue"] .pb-list {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
body[data-list-chrome="catalogue"] .pb-list-topstrip {
  border-radius: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 70rem) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .pb-filter-bar { grid-template-columns: 1fr 1fr; }
}
.stack { display: flex; flex-direction: column; gap: 1rem; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; }
/* Same surface as .card — keep class name for existing markup. */
.unit { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; }
.unit h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; align-items: end; }
.mfa-setup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  max-width: min(36rem, 100%);
  min-width: 0;
}
.mfa-setup > * { min-width: 0; max-width: 100%; }
/* Bare tenant MFA challenge/setup: no sidebar chrome — centre the card. */
.mfa-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
}
.mfa-page-shell {
  box-sizing: border-box;
  width: min(28rem, 100%);
  margin: 0 auto;
  padding: 1.5rem 1.15rem 2rem;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}
.mfa-page-shell > h1 { margin: 0; }
.mfa-page .mfa-setup {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.mfa-page .mfa-code-form {
  max-width: none;
  width: 100%;
}
.mfa-qr {
  margin: 0;
  max-width: 13.5rem;
}
.mfa-qr svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.mfa-qr figcaption { margin-top: 0.35rem; font-size: 0.82rem; }
.mfa-label { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 650; color: var(--muted); }
.mfa-box {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--th-bg, #f4f6f5);
}
.mfa-break {
  display: block;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.mfa-code-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  max-width: 16rem;
}
.mfa-recovery {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--th-bg, #f4f6f5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .mfa-setup { max-width: 100%; }
  .mfa-qr { max-width: 12rem; }
  .mfa-code-form { max-width: 100%; }
  .mfa-page-shell {
    width: min(100%, 26rem);
    justify-content: center;
    padding: max(1.25rem, 5vh) 1rem 1.75rem;
  }
  .mfa-page .mfa-setup {
    padding: 1.2rem 1.15rem;
  }
}
label.field,
.rich-field-block.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
/* Author display:flex must not keep conditional schedule fields on screen. */
label.field[hidden],
.sched-weekend-field[hidden],
.sched-holiday-field[hidden] {
  display: none !important;
}
label.field input, label.field textarea, label.field select { color: var(--ink); font-weight: 500; }
.totals { display: flex; gap: 1.25rem; flex-wrap: wrap; font-weight: 600; }
.totals-stack { max-width: 24rem; margin: 0.75rem 0 1rem auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.totals-stack table { border: 0; margin: 0; }
.totals-stack th { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); width: 62%; background: transparent; }
.totals-stack td { text-align: right; font-weight: 600; }
.totals-stack tr.is-total th, .totals-stack tr.is-total td { color: var(--ink); background: var(--th-bg); font-size: 1.05rem; }
.totals-stack tr.is-profit { background: var(--th-bg); }
.totals-stack tr.is-profit th, .totals-stack tr.is-profit td { border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
.totals-stack tr.is-profit .num { color: var(--ink); }
.totals-stack tr.is-profit-neg { box-shadow: inset 4px 0 0 var(--ink); }
.ops-flag { display: inline-block; margin-left: 0.35rem; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--secondary-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.4rem; font-weight: 700; }
.profit-state { display: inline-block; margin-left: 0.28rem; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 800; color: var(--ink); }
.pill { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--secondary-bg); border-radius: 999px; padding: 0.15rem 0.55rem; border: 0; color: inherit; }
.pill-btn { cursor: pointer; font: inherit; }
/* Quotes scope filters (All / Solar Quotes / Needs match) — same shape as Match queue .btn,
   not tall stadium .pill. Label vertically centred; sentence case. Desktop + phone. */
.list-scope-bar { align-items: center; }
/* Tasks Board: Show ALL / Show DUE and (on Due) My tasks / All stay one row. */
.tasks-board-scope { flex-wrap: nowrap; }
.tasks-who-split {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0.2rem 0.15rem;
  flex: 0 0 auto;
}
a.list-scope-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--ink);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
a.list-scope-chip:link,
a.list-scope-chip:visited,
a.list-scope-chip:hover,
a.list-scope-chip:focus-visible {
  color: var(--ink);
  text-decoration: none;
}
a.list-scope-chip.is-active {
  background: var(--sem-chip-done-bg);
  color: var(--sem-chip-done-fg);
}
a.list-scope-chip.is-active:link,
a.list-scope-chip.is-active:visited,
a.list-scope-chip.is-active:hover,
a.list-scope-chip.is-active:focus-visible {
  color: var(--sem-chip-done-fg);
}
@media (max-width: 55.99rem) {
  a.list-scope-chip {
    min-height: 2.75rem;
  }
}
/* Status / source / urgency chips — one token map (no hex re-overrides below). */
.status-open, .status-on_the_way, .urgency-soon, .source-sms {
  background: var(--sem-chip-open-bg); color: var(--sem-chip-open-fg);
}
.status-done, .status-complete, .status-on_site, .source-email, .status-converted {
  background: var(--sem-chip-done-bg); color: var(--sem-chip-done-fg);
}
.status-contacted { background: var(--ok-bg); color: var(--doc-job-fg); }
.urgency-urgent, .status-waiting_parts, .status-new {
  background: var(--sem-chip-urgent-bg); color: var(--sem-chip-urgent-fg);
}
.urgency-normal, .status-unscheduled, .status-lost, .status-read, .source-local {
  background: var(--sem-chip-neutral-bg); color: var(--sem-chip-neutral-fg);
}
.status-scheduled, .source-website, .status-qualified {
  background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg);
}
/* Sources that are not on the shared chip map (keep distinct). */
.source-voicemail { background: #e6d8f2; color: #3d2a55; }
.source-phone { background: var(--doc-job-bg); color: var(--doc-job-fg); }
.source-facebook { background: #d6e0f7; color: #1c2f6a; }
/* Pylon: warmer amber than open-chip gold so solar leads stay recognisable. */
.source-pylon_solar, .source-pylon { background: #f3e2c6; color: #6a4308; }
/* Fixed layout keeps Kind + other heads in place when the filter body is empty. */
.task-table {
  width: 100%;
  table-layout: fixed;
}
/* Job Details claims leftover; Assigned / Due / Done / Urgency stay rem-tight on the right. */
.task-table col.task-col-title { width: 16%; }
.task-table col.task-col-for { width: 34%; }
.task-table col.task-col-kind { width: 4.5rem; }
.task-table col.task-col-stage { width: 6.25rem; }
.task-table col.task-col-assigned { width: 6.25rem; }
.task-table col.task-col-due { width: 10.25rem; }
.task-table col.task-col-status { width: 4.75rem; }
.task-table col.task-col-urgency { width: 6.75rem; }
.task-table-compact col.task-col-title { width: 34%; }
.task-table-compact col.task-col-for { width: 40%; }
.task-table-compact col.task-col-due { width: 10.25rem; }
.task-table-compact col.task-col-status { width: 4.75rem; }
.task-table tr.task-month-band th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  padding-top: 0.65rem;
  border-bottom: 1px solid var(--line);
}
.task-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.task-table tr.task-group th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  color: var(--ink);
  background: #dfe8dc;
}
.task-inline { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; }
.task-inline select { min-width: 7rem; max-width: 100%; }
.task-table .task-inline select { min-width: 5.5rem; }
.task-done-form { justify-content: center; width: 100%; }
.task-done-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}
.task-done-tick input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--green, #2a5a28);
}
.task-filters { margin: 0 0 0.65rem; }
.task-filter-desk {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.task-filter-desk .task-chip-strip,
.task-filter-desk .list-scope-bar {
  margin: 0;
  gap: 0.28rem;
}
/* .bulk-status-strip defaults to display:none (Quotes list-status-filter turns it on).
 * Tasks Open/Done + due-window rows use the same markup — show them on desk. */
.task-filter-desk .task-chip-strip[aria-label="Open or done"],
.task-filter-desk .task-chip-strip[aria-label="Due date window"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
}
.task-filter-desk .bulk-status-strip-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  margin-right: 0.2rem;
  flex: 0 0 auto;
}
.task-filter-desk .bulk-status-chip {
  padding: 0.22rem 0.5rem;
}
.task-filter-phone { display: none; }
/* Portrait-only chip row — hidden on desk. */
.task-filter-phone-chips { display: none; }
.task-date-range {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
}
.task-date-range .field { margin: 0; min-width: 10rem; }
.task-phone-group,
.task-phone-month {
  margin: 0.55rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* Match Quotes/Invoices phone breakpoint (56rem), not 55.99rem. */
@media (max-width: 56rem) {
  /* Portrait: one scrollable chip row only — no Status/Kind/Stage/Team selects. */
  .task-filter-desk { display: none !important; }
  .task-filter-phone { display: none !important; }
  .task-filter-phone-chips {
    display: block;
    margin: 0;
    padding: 0.1rem 0 0.2rem;
    max-width: 100%;
    min-width: 0;
  }
  .task-filter-phone-chips .task-chip-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.28rem;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 0.1rem 0 0.2rem;
  }
  .task-filter-phone-chips .bulk-status-strip-label:empty,
  .task-filter-phone-chips .bulk-status-strip-label {
    display: none;
  }
  .task-filter-phone-chips .bulk-status-chip.pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.2rem 0.48rem;
    min-height: 1.9rem;
    font-size: 0.78rem;
    line-height: 1.15;
    border-radius: 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }
  .task-filter-phone-chips .bulk-status-count {
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.15rem;
  }
  .task-filter-phone-chips .task-date-range {
    margin: 0.25rem 0 0;
    gap: 0.35rem;
  }
}
.task-due-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.task-defer { flex-wrap: wrap; }
button.task-defer-date {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
button.task-defer-n { padding: 0.12rem 0.4rem; font-size: 0.8rem; min-height: 0; }
.task-remind { font-size: 0.82rem; }
.task-remind-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: end; margin-top: 0.35rem; }
.task-remind-form .field { margin: 0; min-width: 7rem; }
.task-remind-note { font-size: 0.78rem; margin-top: 0.15rem; }
/* Doc-type pills + aliases (home KPI / hist meta / task cats share the same tones). */
.pill.dtype-job,
.pill.doc-pill-job,
.hist-meta-status,
.cat-need_to_schedule,
.cat-scheduled {
  background: var(--doc-job-bg); color: var(--doc-job-fg);
}
.pill.dtype-quote,
.pill.doc-pill-quote,
.hist-meta-quote,
.status-need_to_quote,
.cat-need_to_quote {
  background: var(--doc-quote-bg); color: var(--doc-quote-fg);
}
.pill.dtype-invoice,
.pill.doc-pill-invoice,
.hist-meta-invoice,
.status-need_to_invoice,
.cat-need_to_invoice,
.status-invoiced {
  background: var(--doc-invoice-bg); color: var(--doc-invoice-fg);
}
/* Quote / invoice lifecycle — after dtype so Draft ≠ Paid within the same doc type.
   On Quotes list Quote# tint: Sent/Viewed/Expired/Cancelled share Viewed teal. */
.pill.status-draft { background: var(--ok-draft-bg); color: var(--ok-draft-fg); }
.pill.status-approved { background: var(--ok-bright-bg); color: var(--ok-bright-fg); }
.pill.status-sent,
.pill.status-sent_to_xero { background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg); }
.pill.status-viewed { background: var(--sem-chip-done-bg); color: var(--sem-chip-done-fg); }
.pill.status-accepted { background: var(--doc-job-bg); color: var(--doc-job-fg); }
.pill.status-authorised,
.pill.status-paid { background: var(--ok-bright-bg); color: var(--ok-bright-fg); }
.pill.status-declined { background: var(--sem-chip-danger-bg); color: var(--sem-chip-danger-fg); }
.pill.status-expired { background: var(--sem-chip-urgent-bg); color: var(--sem-chip-urgent-fg); }
.pill.status-cancelled { background: var(--sem-chip-neutral-bg); color: var(--sem-chip-neutral-fg); }
.pill.status-void { background: var(--sem-chip-neutral-bg); color: var(--sem-chip-neutral-fg); opacity: 0.85; }
/* Quote detail / bulk pills for secondary statuses — same Viewed “other” colour. */
body[data-list-chrome="quotes"] .pill.status-sent,
body[data-list-chrome="quotes"] .pill.status-viewed,
body[data-list-chrome="quotes"] .pill.status-expired,
body[data-list-chrome="quotes"] .pill.status-cancelled,
.quotes-list .pill.status-sent,
.quotes-list .pill.status-viewed,
.quotes-list .pill.status-expired,
.quotes-list .pill.status-cancelled {
  background: var(--sem-chip-done-bg);
  color: var(--sem-chip-done-fg);
}
.btn.btn-doc-job, a.btn.btn-doc-job, button.btn-doc-job { background: var(--doc-job); color: var(--white); }
.btn.btn-doc-quote, a.btn.btn-doc-quote, button.btn-doc-quote { background: var(--doc-quote); color: var(--white); }
.btn.btn-doc-invoice, a.btn.btn-doc-invoice, button.btn-doc-invoice { background: var(--doc-invoice); color: var(--white); }
.btn.btn-doc-job.secondary, a.btn.btn-doc-job.secondary {
  background: var(--doc-job-soft); color: var(--doc-job-fg); border: 1px solid color-mix(in srgb, var(--doc-job) 35%, var(--line));
}
.btn.btn-doc-quote.secondary, a.btn.btn-doc-quote.secondary {
  background: var(--doc-quote-soft); color: var(--doc-quote-fg); border: 1px solid color-mix(in srgb, var(--doc-quote) 35%, var(--line));
}
.btn.btn-doc-invoice.secondary, a.btn.btn-doc-invoice.secondary {
  background: var(--doc-invoice-soft); color: var(--doc-invoice-fg); border: 1px solid color-mix(in srgb, var(--doc-invoice) 35%, var(--line));
}
tr.enquiry-unread,
.enquiry-phone-row.enquiry-unread { background: #f1faf3; }
tr.enquiry-unread td[data-col="name"] a { font-weight: 700; }
.col-check { width: 2rem; }
/* Incoming desk: centre Read / Done; Name then optional Property; Phone/Date tight; Address + Enquiry breathe. */
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="read"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="read"],
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="done"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="done"] {
  width: 2.75rem;
  max-width: 3rem;
  text-align: center;
  vertical-align: middle;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="read"] .cust-th,
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="done"] .cust-th {
  justify-content: center;
  width: 100%;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="read"] .cust-th-label,
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="done"] .cust-th-label {
  text-align: center;
  width: 100%;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="name"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="name"] {
  width: 8rem;
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="property"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="property"] {
  width: 7.5rem;
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="phone"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="phone"] {
  width: 5.75rem;
  max-width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="date"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="date"] {
  width: 4.75rem;
  max-width: 5.25rem;
  white-space: nowrap;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="detail"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="detail"],
body[data-list-chrome="enquiries"] .enquiries-table .enquiry-detail-cell {
  width: 32%;
  min-width: 12rem;
  max-width: none;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="address"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="address"] {
  width: 22%;
  min-width: 11rem;
}
body[data-list-chrome="enquiries"] .enquiries-table th[data-col="job"],
body[data-list-chrome="enquiries"] .enquiries-table td[data-col="job"] {
  width: 4.6rem;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
a.enq-line-job {
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}
.enquiry-phone-row .enq-line-job { margin-left: auto; }
button.list-enquiry-archive-btn,
button.list-quote-archive-btn { white-space: nowrap; }
/* Incoming / Quotes Archive action — pale red (not solid DELETE red). Unarchive stays .secondary. */
.list-enquiry-archive-action,
button.list-enquiry-archive-action {
  border: 1px solid color-mix(in srgb, var(--sem-chip-danger-fg) 28%, #ffffff);
  background: var(--sem-chip-danger-bg);
  color: var(--sem-chip-danger-fg);
}
.list-enquiry-archive-action:hover,
.list-enquiry-archive-action:focus-visible,
button.list-enquiry-archive-action:hover,
button.list-enquiry-archive-action:focus-visible {
  background: color-mix(in srgb, var(--sem-chip-danger-bg) 72%, #ffffff);
  color: var(--sem-chip-danger-fg);
  border-color: color-mix(in srgb, var(--sem-chip-danger-fg) 42%, #ffffff);
  filter: none;
}
button.list-enquiry-read-btn,
button.list-enquiry-done-btn { white-space: nowrap; }
.enquiry-multi-box,
.enquiry-filters-box,
.kits-toolbar-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--secondary-bg) 72%, var(--white));
}
.enquiry-multi-title,
.enquiry-filters-title {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
/* Kits list: Create · Active chips · Category chips (link chips — no Filter). */
.kits-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
}
.enquiry-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.enquiry-filters-box .enquiries-filters {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.enquiries-phone { display: none; }
.enquiry-detail-cell { color: var(--muted); font-size: 0.92em; }
.enquiry-detail-cell a.enquiry-detail-link {
  color: inherit;
  text-decoration: none;
}
.enquiry-detail-cell a.enquiry-detail-link:hover,
.enquiry-detail-cell a.enquiry-detail-link:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.enq-bulk-done {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--secondary-bg);
  color: var(--ink);
  cursor: pointer;
}
.enq-bulk-done:hover { border-color: var(--green); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 1rem; }
.enquiries-filters {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
}
.enquiries-filters .pill { flex: 0 0 auto; white-space: nowrap; }
.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0;
  padding: 0.22rem;
  width: fit-content;
  max-width: 100%;
  background: var(--th-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.work-filters:not(.work-type-filters) {
  gap: 0;
  overflow: hidden;
}
.work-filters:not(.work-type-filters) a.work-filter {
  position: relative;
  z-index: 0;
  border-radius: 0;
}
.work-filters:not(.work-type-filters) a.work-filter + a.work-filter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transform: skewX(-22deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 2;
}
.work-filters:not(.work-type-filters) a.work-filter.is-active + a.work-filter::before,
.work-filters:not(.work-type-filters) a.work-filter.is-active::before {
  opacity: 0;
}
.work-filters:not(.work-type-filters) a.work-filter::after {
  content: "";
  position: absolute;
  inset: 0.14rem 0.3rem;
  background: transparent;
  transform: skewX(-22deg);
  transform-origin: center;
  border-radius: 7px;
  z-index: -1;
  pointer-events: none;
}
.work-filters:not(.work-type-filters) a.work-filter:hover::after,
.work-filters:not(.work-type-filters) a.work-filter.is-active::after {
  background: var(--white);
}
.work-filters:not(.work-type-filters) a.work-filter.is-active {
  z-index: 1;
}
.work-filters:not(.work-type-filters) a.work-filter:hover,
.work-filters:not(.work-type-filters) a.work-filter.is-active,
.main .work-filters:not(.work-type-filters) a.work-filter:hover,
.main .work-filters:not(.work-type-filters) a.work-filter.is-active {
  background: transparent;
  box-shadow: none;
}
.work-filter-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem;
  align-items: flex-start;
}
.work-type-filters {
  background: var(--white);
}
.work-type-filters a.work-filter {
  flex-direction: row;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.32rem 0.62rem;
}
a.work-filter,
.main a.work-filter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.12rem;
  margin: 0;
  padding: 0.38rem 0.62rem 0.32rem;
  min-width: 4.1rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}
.work-filter-label {
  line-height: 1.15;
  text-align: center;
}
a.work-filter:hover,
.main a.work-filter:hover {
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
}
a.work-filter.is-active,
.main a.work-filter.is-active {
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--ink);
}
.work-filter-count {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  color: inherit;
}
a.work-filter.is-active .work-filter-count,
.main a.work-filter.is-active .work-filter-count {
  font-weight: 400;
  color: var(--ink);
}
.transcript { white-space: pre-wrap; background: #eef1ec; border-radius: 8px; padding: 0.75rem 1rem; }
/* Week / month / team: Previous · This · Next only (no month banner or range stack). */
.week-nav-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  padding: 0.4rem 0.75rem;
  background: #d4e0ef;
  color: #163a5f;
  border-bottom: 1px solid var(--line);
}
.week-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 1.55rem;
  flex-wrap: wrap;
  justify-content: center;
}
.week-nav-link {
  color: #163a5f;
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.15rem 0.2rem;
}
.week-nav-link:hover, .week-nav-link:focus-visible {
  text-decoration: underline;
  color: #0f2a45;
}
/*
 * Schedule chrome — header + Status + week/month grid as one block (Jobs/Tasks list-chrome join):
 * rounded outer card; square flush seams at header→Status and Status→grid;
 * bottom of grid inherits the card’s bottom radius via overflow:hidden (no beige bleed).
 */
.schedule-chrome {
  margin: 0 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.schedule-chrome-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-radius: 0;
  background: var(--white);
}
.schedule-chrome-head > .title-row {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.schedule-chrome-head h1 {
  margin: 0;
}
/* Schedule Status row — pale bar + label left + compact pills on one line (Jobs/Tasks strip pattern). */
.week-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 70%, #fff);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Inside schedule-chrome: square joins (header above, grid below); no own radius/gap. */
.schedule-chrome > .week-legend {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
/*
 * Schedule body: calendar ~80% + Need-to-schedule ~20% side-by-side (desktop/tablet).
 * Narrow phone stacks NTS under the grid (see max-width: 48rem below).
 */
.schedule-body {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid var(--line);
}
.schedule-body > .week,
.schedule-body > .sched-month {
  flex: 1 1 80%;
  width: 80%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.schedule-body > .unscheduled-list {
  flex: 0 0 20%;
  width: 20%;
  max-width: 20%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.55rem 0.65rem 0.75rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 45%, #fff);
  overflow: auto;
  max-height: min(36rem, 70vh);
}
.schedule-body > .unscheduled-list[hidden] {
  display: none;
}
.schedule-body > .unscheduled-list h3 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Legacy: grid was a direct chrome child before schedule-body — keep flush join if used. */
.schedule-chrome > .week,
.schedule-chrome > .sched-month {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
@media (max-width: 48rem) {
  .schedule-body {
    flex-direction: column;
  }
  .schedule-body > .week,
  .schedule-body > .sched-month {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
  .schedule-body > .unscheduled-list {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--line);
    max-height: none;
  }
}
.week-legend-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5a6a7d);
  margin-right: 0.1rem;
}
.week-legend-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.week-legend .week-status-filter {
  flex: 0 0 auto;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: opacity 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.week-legend .week-status-filter:hover,
.week-legend .week-status-filter:focus-visible {
  text-decoration: none;
  filter: brightness(0.97);
  outline: none;
}
/* Soft selected pill — keep status colour, no double black ring */
.week-legend .week-status-filter.is-active {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 55%, #14301c);
  font-weight: 700;
}
.week-legend:has(.week-status-filter.is-active) .week-status-filter:not(.is-active) {
  opacity: 0.55;
}
/* All — light grey / white (Robert named sheet). */
.week-legend .week-status-filter:not([class*="status-"]) {
  background: #f2f2f2;
  color: #3d3d3d;
}
.week-legend .week-status-filter:not([class*="status-"]).is-active {
  background: #ffffff;
  color: #1a1a1a;
  border-color: #c8c8c8;
  box-shadow: inset 0 -2px 0 #6a6a6a;
}
/*
 * Schedule legend + week blocks + month/team chips — one shared pastel palette.
 * Same named hues as Robert’s sheet, muted fills + dark readable text (not neon).
 * All grey · Quote yellow · Follow-Up orange · Parts red · Admin purple ·
 * +Schedule blue · Booked green · +Invoice cyan.
 */
.week-legend .status-need_to_quote,
.job-block.status-need_to_quote,
.sched-chip.status-need_to_quote {
  background: #ffe9a0;
  color: #6a4f00;
}
.week-legend .status-customer_follow_up,
.job-block.status-customer_follow_up,
.sched-chip.status-customer_follow_up {
  background: #ffd0a8;
  color: #8a3d00;
}
.week-legend .status-supplier_parts,
.job-block.status-supplier_parts,
.sched-chip.status-supplier_parts {
  background: #f5c4c4;
  color: #8a1212;
}
.week-legend .status-admin_applications,
.job-block.status-admin_applications,
.sched-chip.status-admin_applications {
  background: #e4d4f5;
  color: #4a2870;
}
.week-legend .status-need_to_schedule,
.job-block.status-need_to_schedule,
.sched-chip.status-need_to_schedule {
  background: #cfe0fa;
  color: #163a6b;
}
.week-legend .status-scheduled,
.job-block.status-scheduled,
.sched-chip.status-scheduled {
  background: #cfe8d4;
  color: #1b4d28;
}
.week-legend .status-need_to_invoice,
.job-block.status-need_to_invoice,
.sched-chip.status-need_to_invoice {
  background: #c5eef2;
  color: #0a4a50;
}
/* Columns set inline (empty Sat/Sun omitted; booked weekend adds a column). Rows: month, nav, day heads, tracks */
/* Track row = 10 hours × --sched-hour-px (SCHEDULE_HOUR_START..END) so clicks match block tops. */
.week {
  --sched-hour-px: 48px; /* inline / JS may override; matches SCHEDULE_HOUR_PX */
  display: grid;
  grid-template-columns: 3.2rem repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto 480px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
/* Single-day view: one wide track so job # / customer / description stay readable (esp. phones). */
.week[data-sched-view="day"] .job-block {
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  line-height: 1.3;
}
.week[data-sched-view="day"] .job-block .pill.sched-status-pill {
  font-size: 0.65rem;
  max-width: 40%;
}
.week[data-sched-view="day"] .job-block-who {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.week[data-sched-view="day"] .week-day-label {
  font-size: 0.95rem;
  font-weight: 700;
}
/* Top-right Schedule view icons (Today / Day / Week / Month) — Robert zip SVGs, inlined + currentColor */
.sched-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 65%, #fff);
}
.sched-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 8px;
  color: var(--muted, #5a6b5e);
  text-decoration: none;
  line-height: 0;
}
.sched-view-btn:hover,
.sched-view-btn:focus-visible {
  background: #fff;
  color: var(--green-dark, #14301c);
  outline: none;
}
.sched-view-btn.is-active {
  background: #fff;
  color: var(--green-dark, #14301c);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green, #1f6b3a) 45%, transparent);
}
.sched-view-btn .sched-view-svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
.sched-view-stub {
  margin: 0.75rem 0 1.25rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 40%, #fff);
}
.sched-view-stub h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.sched-view-stub p { margin: 0.35rem 0; }
.sched-view-stub .btn { margin-top: 0.35rem; }
/* Month view */
.sched-month { margin: 0.35rem 0 1rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
/* Month period nav: keep Previous · This month · Next centred (same as week-nav-bar). */
.sched-month-nav {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.week-nav-bar.sched-month-nav,
.week-nav-bar.sched-matrix-nav {
  justify-content: center;
}
.sched-month-head, .sched-month-row { display: grid; gap: 0; }
.sched-month-dow { padding: 0.4rem 0.35rem; font-size: 0.78rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: #eef1ec; }
.sched-month-dow:first-child { border-left: 0; }
.sched-month-dow.is-weekend { background: #e5e5e5; color: #5a5a5a; }
.sched-month-cell {
  min-height: 6.25rem;
  padding: 0.3rem 0.3rem 0.4rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #fff;
}
.sched-month-row .sched-month-cell:first-child { border-left: 0; }
.sched-month-cell.is-outside { background: #f6f7f5; color: var(--muted); }
.sched-month-cell.is-weekend { background: #f0f0f0; }
.sched-month-cell.is-today { background: color-mix(in srgb, var(--green, #1f6b3a) 8%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green, #1f6b3a) 35%, transparent); }
.sched-month-cell:hover { background: color-mix(in srgb, var(--green, #1f6b3a) 6%, #fff); }
.sched-month-day {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
  border-radius: 4px;
  padding: 0.05rem 0.2rem;
}
.sched-month-day:hover,
.sched-month-day:focus-visible {
  background: color-mix(in srgb, var(--green, #1f6b3a) 12%, #fff);
  outline: none;
}
/* Empty day: day link fills the cell so tap → Week still works. */
.sched-month-cell.is-empty .sched-month-day {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.sched-month-chips { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.sched-month-more { font-size: 0.7rem; color: var(--muted); }
/* Multi-line chips (Month + Team) — job #, customer, 2-line Job description. v3 */
.sched-chip {
  display: block;
  border-radius: 4px;
  padding: 0.18rem 0.3rem;
  font-size: 0.68rem;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 1px 1px rgba(20, 32, 23, 0.1);
}
.sched-chip-hit,
.job-block-hit {
  display: block;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  /* Let the outer chip/block own HTML5 drag (native link drag broke Week move). */
  -webkit-user-drag: none;
  user-select: none;
}
/* Top row: Job # + customer (left) · status pill (top right). */
.sched-chip-head,
.job-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
  min-width: 0;
}
.sched-chip-title,
.job-block-title {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.sched-chip .pill.sched-status-pill,
.job-block .pill.sched-status-pill {
  flex: 0 0 auto;
  margin: 0;
  max-width: 46%;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.32rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Readable on the pastel chip fill; inherit chip status text colour. */
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(0 0 0 / 12%);
  box-shadow: none;
  color: inherit;
}
.sched-chip strong,
.job-block-title strong {
  display: inline;
  flex: 0 0 auto;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.sched-chip-who,
.job-block-who {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-chip-desc,
.job-block-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  opacity: 0.88;
  margin-top: 0.1rem;
  word-break: break-word;
}
.sched-chip.is-desc-open .sched-chip-desc,
.job-block.is-desc-open .job-block-desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}
.sched-desc-more {
  display: inline-block;
  margin-top: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.85;
}
.sched-desc-more:hover,
.sched-desc-more:focus-visible {
  opacity: 1;
}
/* Visit ⋯ — discoverable remove (desktop + phone); right-click / long-press also open menu.
   Inline under chip body so it does not cover the status pill. */
.sched-visit-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.05rem 0 0 0.15rem;
  min-width: 1.2rem;
  min-height: 1.05rem;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 4px;
  background: rgb(255 255 255 / 72%);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  vertical-align: middle;
}
.sched-visit-more:hover,
.sched-visit-more:focus-visible {
  opacity: 1;
  background: #fff;
  outline: 2px solid color-mix(in srgb, var(--green, #1f6b3a) 45%, transparent);
  outline-offset: 0;
}
.sched-chip-menu {
  position: fixed;
  z-index: 80;
  min-width: 11.5rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 32, 23, 0.18);
}
.sched-chip-menu-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #142017);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sched-chip-menu-item:hover,
.sched-chip-menu-item:focus-visible {
  background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 80%, #fff);
  outline: none;
}
button.sched-chip-menu-item[data-sched-menu-remove] {
  color: #8a1f1f;
}
.job-booking-remove,
.sched-dialog-delete {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
}
/* Team people / crews matrix */
.sched-matrix { margin: 0.35rem 0 1rem; border: 1px solid var(--line); border-radius: 10px; overflow: auto; background: var(--white); }
.sched-matrix-nav { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.sched-matrix-nav .week-nav-group { margin-left: auto; }
.sched-team-layout { display: inline-flex; gap: 0.15rem; padding: 0.12rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--secondary-bg, #eef1ec) 65%, #fff); }
.sched-team-layout-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
}
.sched-team-layout-btn.is-active {
  background: #fff;
  color: var(--green-dark, #14301c);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--green, #1f6b3a) 40%, transparent);
}
.sched-matrix-head, .sched-matrix-row { display: grid; gap: 0; min-width: 36rem; }
.sched-matrix-day-head, .sched-matrix-corner, .sched-matrix-who {
  padding: 0.4rem 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #eef1ec;
}
.sched-matrix-corner { border-left: 0; }
.sched-matrix-day-head.today { background: color-mix(in srgb, var(--green, #1f6b3a) 14%, #fff); }
.sched-matrix-day-head.is-weekend { background: #e5e5e5; color: #5a5a5a; }
.sched-matrix-who { position: sticky; left: 0; z-index: 1; background: #f4f6f3; font-weight: 600; border-bottom: 1px solid var(--line); border-left: 0; }
.sched-matrix-row.is-unassigned .sched-matrix-who { font-style: italic; color: var(--muted); }
.sched-matrix-cell {
  min-height: 3.4rem;
  padding: 0.25rem;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: #fff;
}
.sched-matrix-cell.is-weekend { background: #f3f3f3; }
.sched-matrix-cell.is-today { background: color-mix(in srgb, var(--green, #1f6b3a) 6%, #fff); }
.sched-matrix-none { padding: 0.75rem 0.9rem; }
@media (max-width: 720px) {
  .sched-month-cell { min-height: 4.2rem; }
  .sched-matrix-nav .week-nav-group { margin-left: 0; width: 100%; }
}
.week-hours { background: #eef1ec; }
.week-hours span, .week-slot {
  display: block;
  position: relative;
  height: var(--sched-hour-px);
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--muted);
  padding: 0.1rem 0.25rem;
}
/* Half-hour tick in the hour gutter */
.week-hours span::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.2rem;
  top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  pointer-events: none;
}
/* Day view: Taller / Normal toggles 1× ↔ 2× hour rows */
button.week-hour-scale-btn {
  appearance: none;
  background: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid color-mix(in srgb, #163a5f 28%, transparent);
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  margin: 0;
  padding: 0.15rem 0.45rem;
}
button.week-hour-scale-btn:hover,
button.week-hour-scale-btn:focus-visible {
  background: #fff;
  outline: none;
  text-decoration: none;
}
button.week-hour-scale-btn[aria-pressed="true"] {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #163a5f 35%, transparent);
}
.week-month { padding: 0.5rem 0.55rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.week-month.month-odd { background: #c9d8c6; color: #1b3d1c; }
.week-month.month-even { background: #d4e0ef; color: #163a5f; }
.week-month.is-current { box-shadow: inset 0 -3px 0 var(--green); }
/* Left stubs in the time gutter — paint to match chrome, not empty white */
.week-month.week-corner {
  border-left: 0;
  padding: 0;
}
.week-day-head.week-corner {
  border-left: 0;
  background: #eef1ec;
  padding: 0;
}
.week-day-head { padding: 0.45rem 0.4rem; font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.week-day-head.month-odd { background: #dfe8dc; }
.week-day-head.month-even { background: #e4ebf5; }
.week-day-head.today {
  background: color-mix(in srgb, var(--green, #1f6b3a) 16%, #fff);
  box-shadow: inset 0 -2px 0 var(--green-dark, #14301c);
  font-weight: 700;
  color: var(--green-dark, #14301c);
}
.week-day-head.today.month-odd {
  background: color-mix(in srgb, var(--green, #1f6b3a) 14%, #dfe8dc);
}
.week-day-head.today.month-even {
  background: color-mix(in srgb, var(--green, #1f6b3a) 14%, #e4ebf5);
}
.week-day-head.is-weekend {
  background: #e5e5e5;
  color: #5a5a5a;
}
.week-day-head.is-weekend.today {
  background: color-mix(in srgb, var(--green, #1f6b3a) 12%, #e5e5e5);
  color: var(--green-dark, #14301c);
}
.week-day-head.is-weekend-narrow {
  padding: 0.35rem 0.15rem;
  font-size: 0.72rem;
  text-align: center;
  overflow: hidden;
}
/* Hour lines + lighter half-hour lines — --sched-hour-px matches SCHEDULE_HOUR_PX (not rem). */
.week-track {
  position: relative;
  height: 100%;
  border-left: 1px solid var(--line);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--sched-hour-px) / 2 - 1px),
      color-mix(in srgb, var(--line) 45%, transparent) calc(var(--sched-hour-px) / 2 - 1px),
      color-mix(in srgb, var(--line) 45%, transparent) calc(var(--sched-hour-px) / 2),
      transparent calc(var(--sched-hour-px) / 2),
      transparent calc(var(--sched-hour-px) - 1px),
      var(--line) calc(var(--sched-hour-px) - 1px),
      var(--line) var(--sched-hour-px)
    );
  cursor: cell;
}
.week-track.is-weekend {
  background-color: #ececec;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--sched-hour-px) / 2 - 1px),
      color-mix(in srgb, #9a9a9a 35%, transparent) calc(var(--sched-hour-px) / 2 - 1px),
      color-mix(in srgb, #9a9a9a 35%, transparent) calc(var(--sched-hour-px) / 2),
      transparent calc(var(--sched-hour-px) / 2),
      transparent calc(var(--sched-hour-px) - 1px),
      #b0b0b0 calc(var(--sched-hour-px) - 1px),
      #b0b0b0 var(--sched-hour-px)
    );
  cursor: cell;
}
/* Soft today column wash (keeps hour / half-hour lines) */
.week-track.is-today {
  background-color: color-mix(in srgb, var(--green, #1f6b3a) 7%, #fff);
}
.week-track.is-weekend.is-today {
  background-color: color-mix(in srgb, var(--green, #1f6b3a) 8%, #ececec);
}
/* Drag feedback is chip-only (dotted border) — do not wash / outline the whole day. */
.week-track.is-weekend-narrow .job-block { font-size: 0.65rem; }
/* Subtle time-aim line under cursor while dragging (not a day-column highlight). */
.sched-drop-slot {
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  height: 0;
  border-top: 2px solid color-mix(in srgb, var(--green, #1f6b3a) 55%, transparent);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 50%, transparent);
}
.week.sched-drag-on .job-block.sched-draggable {
  cursor: grab;
  /* Desktop pick→drag: avoid browser pan stealing the gesture on hybrids. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.week.sched-drag-on .job-block.sched-draggable.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
  /* So drop target resolution can see the day column under the chip. */
  pointer-events: none;
  /* Primary drag highlight: this chip only (not the day column). */
  outline: 2px dotted var(--green, #1f6b3a);
  outline-offset: 1px;
  z-index: 4;
}
.week.sched-drag-on .job-block.sched-draggable .job-block-hit {
  /* Outer chip owns pointer drag; link still receives click when not dragged. */
  -webkit-user-drag: none;
}
.week.sched-drag-on .job-block.sched-draggable .sched-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  z-index: 3;
  cursor: ns-resize;
  touch-action: none;
}
.week.sched-drag-on .job-block.sched-draggable .sched-resize-n { top: 0; }
.week.sched-drag-on .job-block.sched-draggable .sched-resize-s { bottom: 0; }
.week.sched-drag-on .job-block.sched-draggable .sched-resize-handle::after {
  content: "";
  display: block;
  width: 28%;
  height: 3px;
  margin: 2px auto 0;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 42%, transparent);
}
.week.sched-drag-on .job-block.sched-draggable .sched-resize-s::after { margin-top: 3px; }
.week.sched-drag-on .job-block.sched-draggable.is-resizing {
  opacity: 0.92;
  outline: 2px solid var(--green, #1f6b3a);
  outline-offset: 1px;
  z-index: 5;
}
/* Leftover same-job same-day visits — soft warn outline (banner lists Remove extra). */
.job-block.is-duplicate-visit,
.sched-chip.is-duplicate-visit {
  outline: 2px dashed color-mix(in srgb, #b45309 70%, #000);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px color-mix(in srgb, #fbbf24 35%, transparent);
}
.sched-dup-banner { margin: 0 0 0.75rem; }
.sched-dup-banner p { margin: 0 0 0.45rem; }
.sched-dup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sched-dup-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.sched-dup-remove { display: inline; margin: 0; }
.sched-dup-remove-btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}
.sched-dialog {
  border: none;
  padding: 0;
  max-width: min(28rem, calc(100vw - 1.25rem));
  width: 100%;
  border-radius: 12px;
  background: transparent;
}
.sched-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.sched-sheet {
  background: var(--white, #fff);
  border: 1px solid var(--line, #d5d9e0);
  border-radius: 12px;
  padding: 1rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(90vh, 40rem);
  overflow: auto;
}
.sched-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.sched-head h2 { margin: 0; font-size: 1.2rem; }
.sched-head .muted { margin: 0.15rem 0 0; }
.sched-wait-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sched-wait-pick {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line, #d5d9e0);
  background: #f7f8f5;
  /* Global button { color:#fff } — force dark ink on pale chips (mobile Schedule sheet). */
  color: var(--ink, #142017);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.sched-wait-pick:hover, .sched-wait-pick:focus-visible {
  border-color: var(--green, #1f6b3a);
  background: color-mix(in srgb, var(--green, #1f6b3a) 10%, #fff);
  color: var(--ink, #142017);
}
.sched-weekend-warn {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #f0f0f0;
  border: 1px solid #c8c8c8;
  color: #333;
}
.sched-weekend-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.sched-weekend-check input { margin-top: 0.2rem; }
.sched-weekend-field { display: flex; align-items: flex-start; gap: 0.5rem; }
button:disabled, .btn:disabled, button[disabled], .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.coverage-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0.4rem 0 1rem; }
.doc-list { margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
.ops-only { background: #eef1ec; border: 1px dashed #b7c2b4; border-radius: 8px; padding: 0.45rem 0.7rem; }
th a.sort { color: inherit; text-decoration: none; cursor: pointer; }
th a.sort:hover, th a.sort.active { text-decoration: underline; color: var(--green-dark); }
.review-panel ul { margin: 0.4rem 0 0; }
.perm-grid { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.6rem; margin: 0.6rem 0; }
.photo-card { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.photo-card img { width: 100%; height: 8rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.photo-card figcaption { font-size: 0.8rem; color: var(--muted); }
.photo-card .entity-file-link {
  font-weight: 600;
  font-size: 0.85rem;
  word-break: break-word;
}
.photo-card .entity-file-title { margin: 0; }
.photo-card .entity-file-title .field { margin: 0; }
.photo-card .entity-file-title input {
  width: 100%;
  min-height: 2.25rem;
  font-size: 0.9rem;
}
.entity-file-list { margin-top: 0.75rem; }
.entity-file-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel, #fff);
}
.entity-file-card .entity-file-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
  flex: 1 1 8rem;
}
.entity-file-card .entity-file-link { font-weight: 600; min-width: 0; word-break: break-word; }
.entity-file-badge {
  font-size: 0.8rem;
  white-space: nowrap;
}
.entity-file-card .entity-file-title {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}
.entity-file-card .entity-file-title .field { margin: 0; }
.entity-file-card .entity-file-title input {
  width: 100%;
  min-height: 2.25rem;
  font-size: 0.95rem;
}
.entity-file-delete { margin: 0; flex: 0 0 auto; }
.entity-file-delete .danger {
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}
.entity-add-file { margin-top: 1rem; }
.entity-add-link { margin-top: 1rem; }
.entity-link-formats { margin: 0 0 0.75rem; }
.entity-file-formats { margin: 0 0 0.75rem; }
.entity-file-drop {
  border: 1.5px dashed var(--line, #c5cdc3);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  background: var(--surface-soft, #f4f6f2);
}
.entity-file-drop-hint { margin: 0 0 0.55rem; }
.entity-add-file.is-dragover .entity-file-drop {
  border-color: var(--green-dark, #1f6b3a);
  background: #eef6ef;
}
.entity-file-picked {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.entity-file-picked li { font-size: 0.9rem; }
.entity-file-picked li.is-rejected { color: #8a2b2b; }
.entity-file-pick-status { margin: 0.35rem 0 0; }
.note-card { border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 0.9rem; background: var(--surface-soft); }
.job-block { position: absolute; left: 0.2rem; right: 0.2rem; border-radius: 6px; padding: 0.25rem 0.35rem; font-size: 0.75rem; line-height: 1.25; text-decoration: none; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 32, 23, 0.12); color: inherit; box-sizing: border-box; }
/* Overlapping visits: inline left/width split the day column (right cleared). */
.job-block.is-overlap-lane { right: auto; min-width: 0; z-index: 1; }
.job-block.is-overlap-lane:hover,
.job-block.is-overlap-lane:focus-within { z-index: 2; }
.job-block.has-sched-desc { overflow: auto; }
.job-block strong { white-space: nowrap; }
/* .job-block-who / .job-block-title share top-row flex rules with .sched-chip-* above */
.unscheduled-list { margin-top: 0; }
.unscheduled-list ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.sched-nts-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--surface-soft, #f4f6f2);
}
.unscheduled-list.sched-nts-drag-on .sched-nts-item {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.unscheduled-list.sched-nts-drag-on .sched-nts-item.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
  outline: 2px dotted var(--green, #2f6b3a);
  outline-offset: 1px;
  pointer-events: none;
}
.sched-nts-book {
  margin-left: auto;
  cursor: pointer;
  border: 0;
  font: inherit;
  line-height: 1.2;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.unscheduled-list.sched-nts-drag-on .sched-nts-book {
  cursor: grab;
}
.unscheduled-list.sched-nts-drag-on .sched-nts-item.is-dragging .sched-nts-book {
  cursor: grabbing;
}
.sched-nts-item a[href] {
  -webkit-user-drag: none;
}
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }
.invoice-doc { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
.invoice-head, .invoice-parties { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.invoice-from, .invoice-parties p { margin: 0.15rem 0; }
.invoice-doc h2, .invoice-doc h3 { margin: 0.35rem 0; }
.invoice-ops-box {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8f5;
}
.invoice-kit {
  border: 0;
  border-radius: 0;
  padding: 0.35rem 0 0.85rem;
  margin: 0.35rem 0 0.85rem;
  background: transparent;
}
.quote-doc .add-next, .invoice-doc .add-next { margin: 0.5rem 0 0; }
.add-next-row td { background: #f7f8f5; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 0.14em;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.link-btn:hover,
.link-btn:focus-visible {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.inline-std { display: inline; }
.include-kit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.include-kit input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.kit-line-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.inline-del { display: inline; }
button.icon-btn-danger {
  color: var(--warn);
  background: transparent;
  border-radius: 6px;
  padding: 0.28rem;
  min-width: 2rem;
  min-height: 2rem;
}
button.icon-btn-danger:hover,
button.icon-btn-danger:focus-visible {
  background: var(--warn-bg);
  color: var(--warn);
}
a.icon-btn {
  text-decoration: none;
  border: 0;
  color: var(--green-dark);
}
a.icon-btn:hover,
a.icon-btn:focus-visible {
  background: var(--secondary-bg);
  color: var(--green-dark);
}
button.icon-btn-void,
.icon-btn.icon-btn-void {
  color: var(--muted);
  background: transparent;
  border-radius: 6px;
  padding: 0.28rem;
  min-width: 2rem;
  min-height: 2rem;
}
button.icon-btn-void:hover,
button.icon-btn-void:focus-visible,
.icon-btn.icon-btn-void:hover,
.icon-btn.icon-btn-void:focus-visible {
  background: var(--secondary-bg);
  color: var(--ink);
}
.icon-btn.icon-btn-open {
  color: var(--green-dark);
}
.kit-label { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: end; }
.inline-line { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.inline-line input { min-width: 4.5rem; }
.inline-line input[name="description"] { flex: 1; min-width: 10rem; }
.inline-line input.pct { min-width: 3.6rem; max-width: 4.4rem; }
/* Percent boxes: number then % inside the control chrome (not a lone % outside). */
.pct-field {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white, #fff);
  overflow: hidden;
}
.pct-field:focus-within {
  outline: 2px solid color-mix(in srgb, var(--green, #1f6b3a) 32%, transparent);
  outline-offset: 1px;
}
.pct-field input,
.pct-field input.num,
.pct-field input.pct {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  width: 3.2rem;
  max-width: 100%;
  padding: 0.28rem 0.15rem 0.28rem 0.45rem;
  text-align: right;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
.pct-field .pct-suffix {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.45rem 0 0.05rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
label.field > .pct-field {
  width: 100%;
}
label.field > .pct-field input {
  width: 100%;
}
.inline-line .pct-field {
  min-width: 4.2rem;
  max-width: 5.2rem;
}
.inline-line .pct-field input.pct {
  min-width: 0;
  max-width: none;
  width: auto;
}
table.ops-lines .pct-field {
  width: 100%;
  max-width: 4.8rem;
}
table.ops-lines .pct-field input.num {
  width: auto;
  min-width: 0;
}
.ops-lines-stack { width: 100%; }
.ops-lines-stack > h3 { margin: 0.85rem 0 0.4rem; }
.ops-lines-stack > h3:first-child { margin-top: 0; }
table.ops-lines {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
table.ops-lines col.col-item { width: auto; }
table.ops-lines col.col-part { width: 7.5rem; }
table.ops-lines col.col-qty { width: 5.4rem; }
table.ops-lines col.col-cost { width: 6.2rem; }
table.ops-lines col.col-pct { width: 4.8rem; }
table.ops-lines col.col-margin-amt { width: 5.6rem; }
table.ops-lines col.col-actions { width: 16.8rem; }
table.ops-lines col.col-unit { width: 7.6rem; }
table.ops-lines col.col-total { width: 7.2rem; }
/* Kit detail: Save + bin only (no Include-in-Kit slot) — keep bin inside Actions. */
table.ops-lines.kit-pricing-lines col.col-actions { width: 7.2rem; }
.kit-price-totals { margin: 0.35rem 0 0.5rem; }
.kit-price-totals strong { font-variant-numeric: tabular-nums; }
/* Below Items table; amounts sit in the Total (ex gst) column band (Actions is 7.2rem). */
.kit-totals-below {
  margin: 0.65rem 0 0.25rem;
  padding-right: 7.2rem; /* match kit-pricing-lines Actions col */
  box-sizing: border-box;
}
.kit-totals-below .kit-price-totals { text-align: right; }
.kit-financial-summary {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}
.kit-financial-summary .totals-stack {
  margin: 0;
  width: min(22rem, 100%);
  max-width: 100%;
}
.kit-financial-summary .totals-stack th { width: auto; }
.kit-financial-summary .totals-stack td {
  width: 7.2rem; /* match col-total */
  min-width: 7.2rem;
  box-sizing: border-box;
}
.kit-meta-edit { margin-bottom: 0.85rem; }
/* Line 1: Title ~2/3 · Category+Active ~1/3 · Line 2: Description full · Line 3: Save Kit */
.kit-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(18rem, 1.2fr);
  gap: 0.55rem 0.85rem;
  align-items: end;
}
.kit-meta-title,
.kit-meta-side,
.kit-meta-category,
.kit-meta-type,
.kit-meta-active,
.kit-meta-desc { margin: 0; min-width: 0; }
.kit-meta-title input,
.kit-meta-category select,
.kit-meta-category .kit-category-input,
.kit-meta-type .kit-type-input { width: 100%; }
.kit-category-field,
.kit-type-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.kit-category-picker,
.kit-type-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.kit-category-picker .kit-category-input,
.kit-type-picker .kit-type-input {
  flex: 1 1 8rem;
  min-width: 0;
  width: auto;
  color: var(--ink);
  font-weight: 500;
}
.kit-category-add,
.kit-type-add {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}
.kit-meta-side {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}
.kit-meta-category,
.kit-meta-type { flex: 1 1 7.5rem; }
.kit-meta-active {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-bottom: 0.4rem;
}
.kit-draft-money {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.kit-draft-money input {
  width: 5.5rem;
  min-width: 0;
}
.kit-meta-desc { margin-top: 0.65rem; }
.kit-meta-desc .rich-notes { min-height: 3.2rem; }
.kit-meta-desc .rich-editor {
  min-height: 3rem;
  max-height: 10rem;
  overflow: auto;
}
.kit-meta-actions { margin-top: 0.75rem; }
.kit-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.kit-detail-pills { margin: 0; }
.kit-duplicate-form { margin: 0; display: inline-flex; }
.kit-duplicate-form button {
  margin: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
}
.kit-list-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}
.kit-list-dup button {
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid var(--border, #c9d0d8);
  color: var(--text, inherit);
  border-radius: 4px;
  cursor: pointer;
}
.kit-list-dup button:hover { background: var(--surface-2, #f3f5f7); }
.kit-duplicate-cue {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
  background: #fff6e0;
  border: 1px solid #e6d4a3;
  border-radius: 4px;
}
.kit-duplicate-cue.is-resolved { display: none; }
.kit-meta-identity-pending input,
.kit-meta-identity-pending .rich-editor {
  outline: 2px solid #d4a017;
  outline-offset: 1px;
}
.kit-meta-actions [data-kit-save].is-pristine {
  opacity: 0.55;
  filter: saturate(0.7);
}
.kit-meta-actions [data-kit-save].is-dirty {
  opacity: 1;
  filter: none;
}
@media (max-width: 640px) {
  .kit-meta-row { grid-template-columns: 1fr; }
  .kit-meta-active { padding-bottom: 0.2rem; }
  .kit-category-picker,
  .kit-type-picker { flex-wrap: wrap; }
  .kit-detail-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .kit-totals-below { padding-right: 0; }
  .kit-totals-below .kit-price-totals { text-align: left; }
  .kit-financial-summary .totals-stack td { width: auto; min-width: 0; }
}
table.ops-lines th,
table.ops-lines td { vertical-align: middle; }
table.ops-lines th.num,
table.ops-lines td.num { text-align: right; }
table.ops-lines th .th-sub {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  line-height: 1.1;
}
table.ops-lines td.col-qty input.num,
table.ops-lines td.col-cost input.num,
table.ops-lines td.col-pct input.num {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: right;
}
table.ops-lines th.col-actions,
table.ops-lines td.col-actions {
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
table.ops-lines td.col-actions .line-act {
  display: grid;
  grid-template-columns: 4.4rem minmax(6.6rem, 1fr) 2.1rem;
  align-items: center;
  column-gap: 0.35rem;
  width: 100%;
}
table.ops-lines.kit-pricing-lines td.col-actions {
  overflow: hidden;
}
table.ops-lines.kit-pricing-lines td.col-actions .line-act {
  grid-template-columns: 4.4rem 2.1rem;
}
table.ops-lines.kit-pricing-lines td.col-actions .line-act-include {
  display: none;
}
table.ops-lines td.col-actions .line-act-primary {
  justify-self: start;
}
table.ops-lines td.col-actions .line-act-include {
  min-width: 0;
  justify-self: start;
}
table.ops-lines td.col-actions .line-act-bin {
  justify-self: end;
}
table.ops-lines th.col-unit,
table.ops-lines td.col-unit,
table.ops-lines th.col-total,
table.ops-lines td.col-total {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
table.ops-lines td.col-unit input.num {
  width: 6.8rem;
  max-width: 100%;
  margin-left: auto;
  display: block;
  text-align: right;
}
table.ops-lines td.col-total {
  font-weight: 700;
}
button.line-save,
button.line-add {
  min-width: 4.4rem;
  min-height: 2.15rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.1;
  box-sizing: border-box;
}
button.line-save {
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
}
button.line-add {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: none;
}
button.line-add:hover,
button.line-add:focus-visible {
  background: var(--th-bg);
}
.ops-chrome button.line-save {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.ops-chrome button.line-add {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
}
.add-next {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(7.5rem, 8.6rem);
  gap: 0.5rem 0.75rem;
  align-items: end;
}
.add-next-main,
.add-next-main-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: end;
  min-width: 0;
}
.add-next-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.add-next-money {
  text-align: right;
}
.add-next-money input.num {
  width: 7.5rem;
  margin-left: auto;
  display: block;
}
@media (max-width: 48rem) {
  .add-next { grid-template-columns: 1fr; }
  .add-next-actions, .add-next-money { justify-content: flex-start; text-align: left; }
}
.form-section { margin: 1rem 0 1.5rem; }
.insp-block { border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 0.9rem; margin: 0.55rem 0; background: var(--white); }
.insp-block-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; }
.insp-job-section .insp-job-mode { margin-bottom: 0.75rem; }
.insp-job-section .db-job-picker { max-width: 28rem; }
.insp-job-section [data-insp-job-add][hidden],
.insp-job-section [data-insp-job-create][hidden] { display: none !important; }
.ssi-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
}
.ssi-step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
}
.ssi-step.is-active {
  border-color: var(--accent, #1a5f4a);
  background: color-mix(in srgb, var(--accent, #1a5f4a) 12%, white);
  font-weight: 700;
}
.ssi-step-n {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--line);
  font-size: 0.75rem;
  font-weight: 800;
}
.ssi-step.is-active .ssi-step-n {
  background: var(--accent, #1a5f4a);
  color: #fff;
}
.ssi-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.ssi-visual-hd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.4rem;
}
.ssi-visual-hd h3 { margin: 0; font-size: 0.98rem; }
.ssi-calc-out { margin: 0.35rem 0 0.5rem; }
.ssi-form .req { color: #b33; }
.ssi-find-lib { margin: 0 0 0.85rem; position: relative; }
.ssi-find-lib-list,
.ssi-kit-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  max-height: 14rem;
  overflow: auto;
  z-index: 5;
}
.ssi-find-lib-list li,
.ssi-kit-list li { margin: 0; border-bottom: 1px solid var(--line); }
.ssi-find-lib-list li:last-child,
.ssi-kit-list li:last-child { border-bottom: 0; }
.ssi-find-lib-pick,
.ssi-kit-list button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.7rem;
  font: inherit;
  cursor: pointer;
}
.ssi-find-lib-pick:hover,
.ssi-kit-list button:hover { background: color-mix(in srgb, var(--accent, #1a5f4a) 10%, white); }
.ssi-hist-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  min-height: 6rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.25rem;
}
.ssi-hist-bar { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 2.2rem; }
.ssi-hist-col {
  width: 1.4rem;
  background: color-mix(in srgb, var(--accent, #1a5f4a) 75%, #0a3);
  border-radius: 4px 4px 0 0;
}
.ssi-hist-bar span { font-size: 0.75rem; color: var(--muted, #666); }
.ssi-review-validation { margin: 0 0 0.85rem; }
.ssi-review-hard, .ssi-review-soft, .ssi-review-ok {
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  margin: 0 0 0.5rem;
}
.ssi-review-hard { background: #fde8e8; border: 1px solid #e8a0a0; }
.ssi-review-soft { background: #fff6e0; border: 1px solid #e6c97a; }
.ssi-review-ok { background: #e8f5ef; border: 1px solid #9bcbb3; }
.ssi-review-validation ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.ssi-front-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}
.ssi-status-badge {
  border: 1px solid var(--line, #ddd);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  min-width: 8rem;
  background: #f7faf8;
}
.ssi-status-badge span { display: block; font-size: 0.75rem; color: #666; }
.ssi-status-badge strong { font-size: 0.95rem; }
.page-break-before { break-before: page; page-break-before: always; }
@media print {
  .page-break-before { break-before: page; page-break-before: always; }
}
@media (max-width: 40rem) {
  .ssi-step-l { display: none; }
  .ssi-step.is-active .ssi-step-l { display: inline; }
}
.report-form .form-section {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.report-form .form-section:first-of-type { border-top: 0; padding-top: 0; }
.report-form .form-section h2 {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 800;
}
.report-form .grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
  align-items: start;
  max-width: 44rem;
}
.report-form label.field,
.report-form fieldset.field,
.report-form .job-link-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.report-form label.field.span-2,
.report-form .rich-field,
.report-form fieldset.field,
.report-form .job-link-field {
  grid-column: 1 / -1;
}
.report-form .field-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0 0.45rem;
  border-left: 2px solid var(--ink);
  line-height: 1.3;
}
.report-form legend.field-name { padding-left: 0.45rem; }
.report-form label.field input,
.report-form label.field textarea,
.report-form label.field select,
.report-form .job-link-field select {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  width: 100%;
  max-width: 100%;
  min-height: 2.15rem;
  box-sizing: border-box;
}
.report-form input[type="date"] { min-height: 2.3rem; max-width: 12.5rem; }
.report-form .job-link-field { max-width: 44rem; }
.cert-kinds { display: grid; gap: 0.55rem; margin: 0 0 0.35rem; }
.cert-kind {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.cert-kind input { margin-top: 0.2rem; }
.cert-kind-side { display: block; font-size: 0.82rem; font-weight: 650; }
.cert-kind-sub { display: block; font-size: 0.78rem; }
.cert-name-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.45rem;
}
.cert-legal p { font-size: 0.88rem; color: var(--muted); }
.ti-cert-kicker { font-weight: 700; margin: 0 0 0.5rem; }
.ti-cert-kicker span { font-weight: 500; color: #555; font-size: 0.88rem; }
.ti-cert-kinds p { margin: 0.35rem 0; }
.ti-cert-side { display: block; font-size: 0.82rem; }
.ti-cert-sub { display: block; font-size: 0.78rem; color: #555; }
.ti-cert-split { display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem; }
.ti-cert-split i, .ti-cert i { font-style: normal; color: #666; font-size: 0.78rem; display: block; }
.ti-cert-narrative { margin: 0 0 1rem; }
.ti-cert-legal { font-size: 0.86rem; color: #333; margin: 0.85rem 0; }
.ti-cert-legend { font-size: 0.8rem; color: #555; }
.job-link-field .field-hint { margin: 0; font-size: 0.85rem; }
.rich-notes {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  max-width: 44rem;
}
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.3rem;
  border-bottom: 1px solid var(--line);
  background: var(--th-bg);
  position: sticky;
  top: 0;
}
/* Long prose: toolbar while focused + has content; hide on blur. No Aa chip. */
.rich-field-block { min-width: 0; }
.rich-field-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
}
.rich-field-label {
  font: inherit;
  font-weight: inherit;
  color: inherit;
}
.job-desc-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  flex-wrap: wrap;
}
.job-desc-head h2 { margin: 0; flex-shrink: 0; }
.job-schedule-now {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex-wrap: wrap;
}
.job-schedule-now-date {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.job-schedule-now-date input[type="date"] {
  min-height: 2.1rem;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.job-schedule-now-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.job-schedule-now-pop {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  min-width: 23rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(15, 37, 62, 0.14);
}
.job-schedule-now-pop[hidden] { display: none !important; }
.job-schedule-now-pop-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
}
.job-schedule-now-form {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.job-schedule-now-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.job-schedule-now-field input[type="date"],
.job-schedule-now-field input[type="time"] {
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  min-height: 2.2rem;
  box-sizing: border-box;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}
.job-schedule-now-add {
  margin-top: 0.15rem;
  background: #1a56db;
  color: #fff;
  white-space: nowrap;
}
.job-schedule-now-add:hover,
.job-schedule-now-add:focus-visible {
  background: #1546b5;
  color: #fff;
}
.job-desc-save {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.job-desc-save-icon { display: none; }
@media (max-width: 48rem) {
  .job-desc-save {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem;
  }
  .job-desc-save-label { display: none; }
  .job-desc-save-icon { display: block; }
}
.rich-notes[data-rich-toolbar="focus-content"] .rich-toolbar,
.rich-notes[data-rich-toolbar="on-content"] .rich-toolbar {
  display: none;
}
.rich-notes[data-rich-toolbar="focus-content"].is-focused.has-content .rich-toolbar,
.rich-notes[data-rich-toolbar="on-content"].is-focused.has-content .rich-toolbar {
  display: flex;
}
.db-legal-block.rich-field-block .db-legal-head.rich-field-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.db-legal-block.rich-field-block .db-legal-head .db-text-btn { margin-left: auto; }
.rich-notes[data-rich-toolbar="focus-content"]:not(.has-content) .rich-editor,
.rich-notes[data-rich-toolbar="on-content"]:not(.has-content) .rich-editor,
.rich-notes[data-rich-toolbar="focus-content"].has-content:not(.is-focused) .rich-editor,
.rich-notes[data-rich-toolbar="on-content"].has-content:not(.is-focused) .rich-editor {
  border-top: 0;
}
.rich-editor[data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: var(--muted, #6b7280);
  pointer-events: none;
}
.doc-builder .rich-notes,
.job-desc .rich-notes,
.add-task-composer .rich-notes,
.job-tasks .rich-notes,
.add-note-form .rich-notes,
.note-card .rich-notes,
#notes .rich-notes {
  max-width: none;
  width: 100%;
}
.doc-builder .db-desc .rich-editor,
.doc-builder .db-note-field .rich-editor,
.add-task-composer .rich-editor,
.job-tasks .rich-editor,
.add-note-form .rich-editor,
#notes .rich-editor {
  min-height: 2.8rem;
}
.doc-builder .db-legal-edit .rich-editor,
.job-desc .rich-editor {
  min-height: 4.2rem;
}
.note-body,
.task-note-body {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.note-body :where(p, ul, ol) { margin: 0.25rem 0; }
.hist-details :where(p, ul, ol) { margin: 0.2rem 0; }
.rich-toolbar button {
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: 0.2rem 0.45rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 700;
}
/* A− / A+ sit with B/I/U; keep touch target width on narrow toolbars. */
.rich-toolbar button[data-cmd="fontSizeDown"],
.rich-toolbar button[data-cmd="fontSizeUp"] {
  min-width: 2.4rem;
  letter-spacing: -0.02em;
}
.rich-editor {
  min-height: 4.2rem;
  padding: 0.45rem 0.65rem;
  color: var(--ink);
  font-weight: 500;
  outline: none;
}
.rich-editor:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent); }
.rich-editor ul, .ti-rich ul { margin: 0.2rem 0 0.2rem 1.2rem; padding: 0; list-style: disc; }
.rich-editor ol, .ti-rich ol { margin: 0.2rem 0 0.2rem 1.2rem; padding: 0; list-style: decimal; }
.rich-editor li, .ti-rich li { margin: 0.1rem 0; }
.ti-rich p { margin: 0.2rem 0; }
.ti-doc-sub { margin: 0.2rem 0 0; font-size: 1.05rem; font-weight: 500; color: #444; }
@media (max-width: 48rem) {
  .report-form .grid-form { grid-template-columns: 1fr; max-width: none; }
  .report-form input[type="date"] { max-width: none; }
}
.dunblane-take5-list { margin: 0.4rem 0 0 1.2rem; padding: 0; }
.dunblane-take5-list li { margin: 0.25rem 0; }
.dunblane-saved-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.dunblane-photo {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.dunblane-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f3f3f3;
}
.dunblane-photo figcaption {
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  color: var(--muted);
}
.dunblane-form .photo-slot { margin: 0.65rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; }
.dunblane-form .file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dunblane-form .file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--green) 55%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, var(--white));
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
  user-select: none;
}
.dunblane-form .file-btn:active { transform: translateY(1px); }
.dunblane-form .local-preview {
  display: block;
  max-width: 16rem;
  margin-top: 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #f3f3f3;
}
/* Author display:block must not defeat the hidden attribute (was showing broken Overall img). */
.dunblane-form .local-preview[hidden] {
  display: none !important;
}
.dunblane-form .dunblane-overall-preview {
  width: 7.5rem;
  max-width: 7.5rem;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.dunblane-exterior-block {
  margin-top: 0.65rem;
}
.dunblane-photo-subhead { margin: 0.85rem 0 0.35rem; font-size: 1rem; }
.dunblane-site-photos-block { margin-top: 0.85rem; }
.dunblane-photo-frame { position: relative; }
.dunblane-photo-actions { position: absolute; top: 0.35rem; right: 0.35rem; }
.dunblane-photo-menu { position: relative; }
.dunblane-photo-more {
  list-style: none;
  cursor: pointer;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
}
.dunblane-photo-more::-webkit-details-marker { display: none; }
.dunblane-photo-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 8.5rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 6px 18px rgb(0 0 0 / 14%);
  z-index: 5;
  display: grid;
  gap: 0.2rem;
}
.dunblane-photo-act {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.dunblane-photo-act:hover,
.dunblane-photo-act:focus-visible { background: color-mix(in srgb, var(--green) 12%, var(--white)); }
.dunblane-photo-menu-note { margin: 0.35rem 0.45rem; font-size: 0.85rem; }
.dunblane-move-dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  max-width: 22rem;
  width: calc(100% - 2rem);
}
.dunblane-move-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.flodiphone-dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
}
.flodiphone-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.flodiphone-dialog-body h3 { margin: 0 0 0.4rem; }
.flodiphone-dialog-actions { margin-top: 0.75rem; }
.flodiphone-call { vertical-align: middle; }
a.flodiphone-call.btn { text-decoration: none; display: inline-block; }
a.flodiphone-phone-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.14em;
  cursor: pointer;
}
a.flodiphone-phone-link:hover,
a.flodiphone-phone-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.flodiphone-with-dial {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  vertical-align: middle;
  flex-wrap: wrap;
}
.flodiphone-number { user-select: text; }
a.flodiphone-dial-icon {
  flex-shrink: 0;
  color: var(--green-dark);
  padding: 0.15rem;
  min-width: 1.65rem;
  min-height: 1.65rem;
}
a.flodiphone-dial-icon:hover,
a.flodiphone-dial-icon:focus-visible {
  background: var(--secondary-bg);
  color: var(--green-dark);
}
.flodiphone-dial-svg { display: block; }
.customer-call-row { align-items: center; gap: 0.65rem; }
.db-customer-details .flodiphone-with-dial { gap: 0.15rem; }
.db-customer-details a.flodiphone-phone-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.14em;
}
.db-customer-details a.flodiphone-phone-link:hover,
.db-customer-details a.flodiphone-phone-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--db-ink, var(--ink)) 45%, transparent);
}
.choice-stack { display: flex; flex-direction: column; gap: 0.55rem; }
.choice-card {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: var(--white);
}
.choice-desc { display: block; margin-top: 0.25rem; color: var(--muted); font-weight: 400; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; }
/* Guest quote/invoice (+ public fill): wide centred sheet, not a left-biased 48rem column. */
.guest-app {
  max-width: min(72rem, 100%);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
  min-height: 100vh;
  box-sizing: border-box;
}
.guest-form .main {
  margin-left: 0;
  padding: 1.35rem 1.75rem 2.5rem;
  min-width: 0;
}
/* /f/enquire: First | Last | Preferred on one row (Phone | Email below). */
#website-enquire-form .enquire-names {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
}
/* Type radios in one horizontal row. */
#website-enquire-form .enquire-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.35rem;
  align-items: center;
}
/*
 * .stack { display: flex } can override the HTML hidden attribute.
 * Force conditional blocks off unless JS removes [hidden].
 */
#website-enquire-form .enquire-conditional[hidden] {
  display: none !important;
}
@media (max-width: 40rem) {
  #website-enquire-form .enquire-names {
    grid-template-columns: 1fr;
  }
}
/* Guest fill pages: match login / app dark forest-green aside (not light beige). */
.guest-form aside.tenant-aside {
  position: static;
  width: auto;
  height: auto;
  inset: auto;
  z-index: auto;
  padding: 1rem 0.85rem 1.25rem;
  border-right: none;
  background: var(--sidebar);
  color: var(--aside-fg);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.guest-form aside .panel-id-name {
  color: var(--aside-fg);
  font-weight: 700;
}
.guest-form aside .panel-id-row,
.guest-form aside .panel-id-date {
  color: var(--aside-muted);
}
.guest-form aside a.panel-id-phone {
  color: var(--aside-fg);
}
.guest-form .quote-guest-respond {
  margin: 0 0 0.85rem;
}
.guest-form .quote-guest-respond .quote-respond-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
}
.guest-form .tax-invoice {
  max-width: none;
  width: 100%;
}
.home-hero { margin: 0 0 1.35rem; }
.home-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(22rem, 100%);
  max-height: 12rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
}
.aside-bottom { margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--nav-hover); display: flex; flex-direction: column; gap: 0.35rem; }
.aside-bottom .tenant-switch select { min-width: 0; width: 100%; max-width: 100%; font-size: 0.8rem; }
.aside-bottom label { color: var(--aside-muted); }
.aside-bottom .aside-settings { font-weight: 600; font-size: 0.85rem; padding: 0.22rem 0.45rem; }
.aside-bottom button { padding: 0.28rem 0.55rem; font-size: 0.82rem; }
.aside-bottom .settings-drop { margin: 0; }
.aside-bottom .settings-drop > summary.nav-label { margin-top: 0; padding-left: 0.45rem; }
.aside-bottom .aside-settings.settings-nav-company,
.phone-more-account .aside-settings.settings-nav-company { box-shadow: inset 3px 0 0 var(--settings-company); }
.aside-bottom .aside-settings.settings-nav-look,
.phone-more-account .aside-settings.settings-nav-look { box-shadow: inset 3px 0 0 var(--settings-look); }
.aside-bottom .aside-settings.settings-nav-documents,
.phone-more-account .aside-settings.settings-nav-documents { box-shadow: inset 3px 0 0 var(--settings-documents); }
.aside-bottom .aside-settings.settings-nav-work,
.phone-more-account .aside-settings.settings-nav-work { box-shadow: inset 3px 0 0 var(--settings-work); }
.aside-bottom .aside-settings.settings-nav-defaults,
.phone-more-account .aside-settings.settings-nav-defaults { box-shadow: inset 3px 0 0 var(--settings-defaults); }
.aside-bottom .aside-settings.settings-nav-integrations,
.phone-more-account .aside-settings.settings-nav-integrations { box-shadow: inset 3px 0 0 var(--settings-integrations); }
.aside-bottom .aside-settings.settings-nav-users,
.phone-more-account .aside-settings.settings-nav-users { box-shadow: inset 3px 0 0 var(--settings-users); }
.aside-bottom .aside-settings.settings-nav-user,
.phone-more-account .aside-settings.settings-nav-user { box-shadow: inset 3px 0 0 var(--settings-user); }
.aside-bottom .aside-settings.settings-nav-company.active,
.phone-more-account .aside-settings.settings-nav-company.active { background: color-mix(in srgb, var(--settings-company) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-look.active,
.phone-more-account .aside-settings.settings-nav-look.active { background: color-mix(in srgb, var(--settings-look) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-documents.active,
.phone-more-account .aside-settings.settings-nav-documents.active { background: color-mix(in srgb, var(--settings-documents) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-work.active,
.phone-more-account .aside-settings.settings-nav-work.active { background: color-mix(in srgb, var(--settings-work) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-defaults.active,
.phone-more-account .aside-settings.settings-nav-defaults.active { background: color-mix(in srgb, var(--settings-defaults) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-integrations.active,
.phone-more-account .aside-settings.settings-nav-integrations.active { background: color-mix(in srgb, var(--settings-integrations) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-users.active,
.phone-more-account .aside-settings.settings-nav-users.active { background: color-mix(in srgb, var(--settings-users) 22%, transparent); }
.aside-bottom .aside-settings.settings-nav-user.active,
.phone-more-account .aside-settings.settings-nav-user.active { background: color-mix(in srgb, var(--settings-user) 22%, transparent); }
.settings-area-company .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-company); padding-left: 0.55rem; }
.settings-area-look .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-look); padding-left: 0.55rem; }
.settings-area-work .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-work); padding-left: 0.55rem; }
.settings-area-defaults .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-defaults); padding-left: 0.55rem; }
.settings-area-integrations .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-integrations); padding-left: 0.55rem; }
.settings-area-users .main > header h1 { box-shadow: inset 4px 0 0 var(--settings-users); padding-left: 0.55rem; }
/* Documents panels nested under Work setup — blue left hint on section headings */
.settings-area-work .settings-section-documents > h2 {
  box-shadow: inset 3px 0 0 var(--settings-documents);
  padding-left: 0.45rem;
}
.settings-area-look .settings-section-look > h2 {
  box-shadow: inset 3px 0 0 var(--settings-look);
  padding-left: 0.45rem;
}
.aside-hint { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--aside-muted); line-height: 1.3; }
.settings-jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 1rem; }
.settings-jump a { font-size: 0.9rem; }
.settings-hub-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.65rem; }
.settings-hub-item { margin: 0; }
.settings-hub-link {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--line);
  background: color-mix(in srgb, var(--th-bg) 70%, transparent);
}
.settings-hub-link:hover,
.settings-hub-link:focus-visible { background: var(--card-hover); }
.settings-hub-link.settings-nav-company { border-left-color: var(--settings-company); }
.settings-hub-link.settings-nav-look { border-left-color: var(--settings-look); }
.settings-hub-link.settings-nav-users { border-left-color: var(--settings-users); }
.settings-hub-link.settings-nav-work { border-left-color: var(--settings-work); }
.settings-hub-link.settings-nav-defaults { border-left-color: var(--settings-defaults); }
.settings-hub-link.settings-nav-integrations { border-left-color: var(--settings-integrations); }
.settings-hub-label { font-weight: 650; }
.settings-hub-blurb { font-size: 0.9rem; }
.theme-swatches { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.85rem; }
.theme-swatch {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: inline-block;
}
#theme-form input[type="color"] {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.15rem;
  cursor: pointer;
}
.logo-preview { max-height: 4.5rem; max-width: 12rem; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem; }
.logo-row { margin-bottom: 0.75rem; }
.span-2 { grid-column: 1 / -1; }
.email-doc-attachments {
  border: 1px solid var(--line, #d7d3cc);
  border-radius: 8px;
  padding: 0.75rem 1rem 0.25rem;
  margin: 0.25rem 0 0;
}
.email-doc-attachments legend { font-weight: 650; padding: 0 0.25rem; }
.email-attach-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0 0.75rem; }
.email-attach-list label { display: flex; gap: 0.45rem; align-items: flex-start; }
label.inline { flex-direction: row; align-items: center; gap: 0.4rem; }
.integration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0.85rem;
  align-items: stretch;
}
.integration-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: var(--surface-soft);
  min-width: 0;
  height: 100%;
  scroll-margin-top: 1.25rem;
}
.integration-card header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.6rem;
}
.integration-card h3 { margin: 0; font-size: 1.05rem; }
.integration-blurb {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.35;
  max-height: 2.8em;
  overflow: hidden;
}
.integration-card .xero-connect {
  flex: 0 0 auto;
}
.integration-card .integration-fields {
  flex: 1 1 auto;
}
.integration-card-save {
  margin: 0.15rem 0 0.25rem;
}
.integration-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(4.4rem, auto);
  gap: 0.55rem 0.75rem;
  align-items: start;
  align-content: start;
}
.integration-fields .field { min-width: 0; }
.integration-fields .field input { width: 100%; }
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 1.2rem;
}
.field-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  min-height: 1.1rem;
}
.field-hint {
  display: block;
  min-height: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}
#ops-user { width: 100%; min-height: 7rem; }
#ops-user-search { width: 100%; }
@media (max-width: 1100px) {
  .integration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .guest-app {
    display: block;
    max-width: 100%;
  }
  .ops-chrome aside,
  .guest-form aside {
    position: static;
    width: auto;
    height: auto;
    padding: 0.55rem 0.7rem 0.35rem;
    border-right: none;
    min-height: 0;
  }
  .ops-chrome .main,
  .guest-form .main { margin-left: 0; padding: 0.85rem 0.95rem 1.75rem; }
  .ops-chrome aside nav,
  .guest-form aside nav {
    flex-direction: row;
    flex-wrap: nowrap;
    flex: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.15rem;
    padding: 0.2rem 0 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .ops-chrome .nav-label,
  .guest-form .nav-label { display: none; }
  .ops-chrome aside nav .nav-group,
  .guest-form aside nav .nav-group { display: contents; }
  .ops-chrome aside nav details.nav-drop,
  .guest-form aside nav details.nav-drop { display: contents; }
  .ops-chrome aside nav details.nav-drop > summary,
  .guest-form aside nav details.nav-drop > summary { display: none; }
  .ops-chrome aside nav .nav-drop-body,
  .guest-form aside nav .nav-drop-body { display: contents; }
  .ops-chrome aside nav a,
  .guest-form aside nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    min-width: 2.75rem;
    padding: 0.4rem 0.65rem;
    white-space: nowrap;
    margin-left: 0;
  }
  .ops-chrome .aside-bottom,
  .guest-form .aside-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding-top: 0.35rem; }
  .integration-fields { grid-template-columns: 1fr; }
}
.suggest { position: relative; z-index: 4; flex: 1 1 14rem; min-width: 10rem; overflow: visible; }
.suggest-list {
  position: absolute;
  z-index: 40000;
  left: 0;
  right: 0;
  margin: 0.15rem 0 0;
  padding: 0.2rem 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-shadow: 0 8px 24px rgba(20, 32, 23, 0.12);
}
.suggest-list.is-fixed {
  position: fixed;
  z-index: 40000;
  margin: 0;
  right: auto;
  max-height: min(16rem, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
}
.suggest-list .muted { padding: 0.45rem 0.7rem; }
.suggest-list button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.7rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.suggest-list button:hover,
.suggest-list button.is-active { background: var(--card-hover); }
.suggest-list button.suggest-labour {
  font-weight: 650;
  color: var(--db-green, var(--accent, #1f6b4a));
  border-bottom: 1px solid var(--line);
}
.suggest-list button.suggest-labour.is-active {
  background: color-mix(in srgb, var(--db-green, #1f6b4a) 12%, var(--card-hover, #f3f4f6));
}

.topbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 1rem;
}
.topbar:has(+ .app-trail),
.topbar:has(+ .app-crumbs) { margin-bottom: 0.35rem; }
.app-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 1rem;
  min-width: 0;
}
.app-trail .app-crumbs { margin: 0; flex: 1; min-width: 0; }
.app-back {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--paper);
  overflow: visible;
}
.app-back-go,
.app-back-more {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.2rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.app-back-go:hover:not(:disabled),
.app-back-more:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--line) 35%, transparent); }
.app-back-go:disabled,
.app-back-more:disabled { opacity: 0.45; cursor: default; }
.app-back-more {
  border-left: 1px solid var(--line);
  padding-inline: 0.35rem;
  color: var(--muted);
}
.app-back-ico { display: block; flex-shrink: 0; }
.app-back-pop {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 40;
  min-width: 12rem;
  max-width: min(22rem, 85vw);
  max-height: min(18rem, 50vh);
  overflow: auto;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: var(--paper);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 12%, transparent);
}
.app-back-item {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 0.4rem 0.55rem;
  border-radius: 0.3rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-back-item:hover,
.app-back-item:focus-visible {
  background: color-mix(in srgb, var(--line) 45%, transparent);
  outline: none;
}
.app-back-empty {
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.app-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.2;
}
.app-crumbs a { color: var(--muted); text-decoration: none; }
.app-crumbs a:hover { text-decoration: underline; color: var(--ink); }
.app-crumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  color: var(--muted);
  position: relative;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
}
.app-crumb-home:hover { color: var(--ink); }
.app-crumb-home-ico { display: block; }
.app-crumb-sep { opacity: 0.7; user-select: none; }
.app-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.top-search { flex: 1; min-width: 0; }
.top-search input { width: 100%; border-radius: 999px; padding: 0.5rem 0.9rem; }
.top-new {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.top-new > summary.top-new-btn {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.top-new > summary.top-new-btn::-webkit-details-marker { display: none; }
.top-new-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 55;
  min-width: 10.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.top-new-item {
  display: block;
  padding: 0.48rem 0.7rem;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}
.top-new-item:hover,
.top-new-item:focus-visible {
  background: var(--card-hover, #f3f4f6);
  color: var(--ink);
  outline: none;
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.user-chip .avatar-face {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--secondary-bg);
}
.user-chip span { font-weight: 500; color: var(--muted); }
a.user-chip-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.12rem 0.35rem 0.12rem 0.12rem;
}
a.user-chip-link:hover, a.user-chip-link:focus-visible {
  background: var(--card-hover);
}
.panel-id-user {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0 0;
  color: inherit;
  text-decoration: none;
  padding: 0.28rem 0.35rem;
  border-radius: 8px;
  min-height: 2.4rem;
}
a.panel-id-user:hover, a.panel-id-user:focus-visible {
  background: var(--nav-hover);
  color: #fff;
}
.panel-id-user .panel-id-row { margin: 0; color: inherit; }
.panel-id-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
}

.board-toolbar { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.board-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  color: inherit;
}
.stat-card strong { display: block; font-size: 1.45rem; }
.stat-card span { color: var(--muted); font-size: 0.86rem; }
.board-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.board-col header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.4rem;
  color: #fff;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 0;
}
.board-col-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.4rem;
  align-items: baseline;
  padding: 0.55rem 0.65rem;
  color: #fff;
  text-decoration: none;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
/* Beat global a / a:visited ink so title, $ total, and count stay white on every status colour. */
.board-col-head:link,
.board-col-head:visited,
.board-col-head:hover,
.board-col-head:active,
.board-col-head:focus-visible {
  color: #fff;
  text-decoration: none;
}
.board-col-head:hover,
.board-col-head:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.board-col h2,
.board-col-head h2,
.board-col-head .board-count,
.board-col-head .board-sum {
  color: #fff;
}
.board-count {
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  justify-self: end;
}
.board-sum { grid-column: 1 / -1; font-size: 0.78rem; opacity: 0.9; }
.board-col-need_to_quote header { background: var(--doc-quote); }
.board-col-customer_follow_up header { background: #d46a26; }
.board-col-supplier_parts header { background: #6b5b95; }
.board-col-admin_applications header { background: #2f8f8a; }
.board-col-need_to_schedule header { background: var(--doc-invoice); }
.board-col-scheduled header { background: var(--doc-job); }
.board-col-need_to_invoice header { background: var(--doc-invoice); }
/* Job status accent on cards — same tokens as column headers / Jobs list status chips. */
.board-card.board-card-status-need_to_quote { border-left: 3px solid var(--doc-quote); }
.board-card.board-card-status-customer_follow_up { border-left: 3px solid #d46a26; }
.board-card.board-card-status-supplier_parts { border-left: 3px solid #6b5b95; }
.board-card.board-card-status-admin_applications { border-left: 3px solid #2f8f8a; }
.board-card.board-card-status-need_to_schedule { border-left: 3px solid var(--doc-invoice); }
.board-card.board-card-status-scheduled { border-left: 3px solid var(--doc-job); }
.board-card.board-card-status-need_to_invoice { border-left: 3px solid var(--doc-invoice); }
.board-who-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.board-who {
  font-size: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
/* Top-right Job # — Name stays left on board-who-row. */
.board-job-num {
  flex: 0 0 auto;
  margin-left: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1a1f24);
  text-decoration: none;
  white-space: nowrap;
}
.board-job-num:hover,
.board-job-num:focus-visible {
  color: var(--green, #2a5a28);
  text-decoration: underline;
}
/* Second line: Date (editable due when open task exists). */
.board-date-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  min-width: 0;
  margin: 0.05rem 0 0.1rem;
}
.board-location {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  margin: 0.1rem 0 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-card-due-form {
  flex: 0 0 auto;
  margin: 0;
}
.board-card-due-edit {
  display: block;
  margin: 0;
  cursor: pointer;
}
/* Date line — open task due_on (editable date when task exists). */
.board-card-due,
.board-sched-date,
.pill.board-sched-date.status-scheduled {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.board-card-due:not(.status-scheduled) {
  background: var(--secondary-bg, #e8ecef);
  color: var(--ink, #1a1f24);
}
.board-sched-date,
.pill.board-sched-date.status-scheduled,
.board-card-due.status-scheduled {
  /* Solid job green + white — pale green + dark green failed contrast on board cards */
  background: var(--doc-job);
  color: #fff;
}
.board-next { display: flex; align-items: center; gap: 0.35rem; }
.board-next em { font-style: normal; font-size: 0.75rem; font-weight: 700; }
/* Urgency dots — one definition for board, jobs list, Team Today, phone rows. */
.urg-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #888;
}
.urgency-urgent .urg-dot,
.urg-dot.urgency-urgent { background: #c0392b; }
.urgency-soon .urg-dot,
.urg-dot.urgency-soon { background: #d48b1a; }
.urgency-normal .urg-dot,
.urg-dot.urgency-normal { background: #6aa36a; }
.board-card-foot { display: flex; gap: 0.35rem; align-items: center; justify-content: space-between; margin-top: 0.25rem; }
.tag-pill {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--secondary-bg);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.job-card-head {
  display: block;
  margin-bottom: 0.35rem;
}
.job-card-head-stack { min-width: 0; }
.job-card-head h1 {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  font-size: 1.7rem;
  justify-self: start;
  min-width: 0;
}
.job-card-number { white-space: nowrap; }
/* Job header status: one pill only; date (when present) is inside the pill text. */
.job-card-head h1 .pill {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill.status-due_date {
  background: var(--sem-chip-info-bg);
  color: var(--sem-chip-info-fg);
}
.job-sub { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; color: var(--muted); }
.job-sub-who { min-width: 0; }
/* Header customer name: black text link only — no button, pill, or picker chrome. */
.job-sub a.job-sub-customer,
.job-sub a.job-sub-customer:visited {
  color: var(--ink);
  font-weight: inherit;
  text-decoration: none;
}
.job-sub a.job-sub-customer:hover,
.job-sub a.job-sub-customer:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.job-card-head-center {
  justify-self: center;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.job-card-title-trailing {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.job-card-head .onsite-in-header {
  position: static;
  top: auto;
  bottom: auto;
  margin: 0;
  pointer-events: auto;
  justify-content: center;
  background: none;
  padding: 0;
}
.job-card-head .onsite-in-header .onsite-cta {
  min-height: 2.35rem;
  min-width: 6.5rem;
  font-size: 0.98rem;
}
.job-head-actions { display: flex; gap: 0.35rem; align-items: stretch; }
/* Customer card: name left, Edit + Merge on the right (same row).
   Job header uses an inner grid; this row is only the customer card. */
/* Commercial list: primary contact under company/trading name (desktop table). */
.cust-list-primary-contact {
  display: block;
  margin-top: 0.12rem;
  font-weight: 400;
  line-height: 1.3;
}

.customer-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.customer-card-title-row > h1 { min-width: 0; flex: 1 1 12rem; }
.customer-card-title-row .job-card-title-trailing { flex: 0 0 auto; }
.customer-card-title-row .btn { white-space: nowrap; }
.job-more { position: relative; }
.job-more summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0.55rem;
}
.job-more summary.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
}
.job-more summary::-webkit-details-marker { display: none; }
.job-more-menu,
.task-more-menu {
  position: absolute;
  right: 0;
  z-index: 8;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem;
  min-width: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hist-toolbar { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.65rem; }
.add-note summary {
  list-style: none;
  cursor: pointer;
  background: var(--green);
  color: var(--white);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-weight: 600;
}
.add-note summary::-webkit-details-marker { display: none; }
.add-note-form {
  margin-top: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
/* Job History: always-open composer as first feed item (no + Add note click). */
.hist-note-composer {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}
.hist-note-composer-form {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
/* Type sits outside the pale band; only task actions get the soft background. */
.hist-note-top {
  display: grid;
  grid-template-columns: minmax(6rem, 7.5rem) minmax(0, 1fr);
  gap: 0.5rem 0.65rem;
  align-items: end;
}
.hist-note-top > .hist-note-type {
  margin: 0;
  min-width: 0;
}
.hist-note-top > .hist-note-type select {
  width: 100%;
}
.hist-note-task-row {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1.35fr) minmax(7.5rem, 10.5rem);
  gap: 0.45rem 0.65rem;
  align-items: end;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft, #eef1ec) 78%, #d9e0d6);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.hist-note-task-row .field {
  margin: 0;
  min-width: 0;
}
.hist-note-task-row .field input,
.hist-note-task-row .field select {
  width: 100%;
}
.hist-note-make-task {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding-bottom: 0.35rem;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--ink);
}
.hist-note-make-task input {
  margin: 0;
}
.hist-note-composer-form .rich-notes,
.hist-note-composer-form .rich-editor {
  max-width: none;
  width: 100%;
}
.hist-note-composer-form .rich-editor {
  min-height: 3.2rem;
}
.hist-note-composer-actions {
  display: flex;
  justify-content: flex-start;
  gap: 0.45rem;
  margin-top: 0;
}
.history-feed > .hist-note-composer + .hist-day,
.history-feed > .hist-note-composer + .muted {
  margin-top: 0.15rem;
}
@media (max-width: 52rem) {
  .hist-note-top {
    grid-template-columns: 1fr;
  }
  .hist-note-task-row {
    grid-template-columns: 1fr 1fr;
  }
  .hist-note-make-task {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
}
@media (max-width: 36rem) {
  .hist-note-task-row {
    grid-template-columns: 1fr;
  }
}
.hist-search input { min-width: 14rem; border-radius: 999px; padding: 0.4rem 0.85rem; }
.history-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.85rem; }
.hist-chip,
.view-tabs a {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.86rem;
}
.view-tabs a { color: var(--muted); padding: 0.25rem 0.7rem; }
.hist-chip.is-on,
.view-tabs a.active { background: var(--green); color: var(--white); border-color: var(--green); }
.hist-day { margin: 0 0 0.85rem; }
.hist-day h3 {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: #eef1ec;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
}
.hist-row {
  display: grid;
  grid-template-columns: 4.4rem 1.6rem minmax(0, 1fr) auto;
  gap: 0.55rem 0.7rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid #eef1ec;
  align-items: start;
}
.hist-row.is-quiet { color: var(--muted); }
.hist-when {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.hist-row time { color: var(--muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.hist-title { margin: 0; font-weight: 700; }
.hist-actor {
  margin: 0;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hist-edited {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hist-note-top-compact {
  grid-template-columns: minmax(6rem, 7.5rem);
}
.job-notes-quick {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.job-notes-quick-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: start;
}
.job-notes-quick-compose,
.job-notes-quick-history {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
.job-notes-quick-head,
.job-notes-quick-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.job-notes-quick-head h2,
.job-notes-quick-history-head h2 {
  margin: 0;
}
.job-notes-quick-all {
  font-size: 0.86rem;
  white-space: nowrap;
}
.job-notes-quick .hist-note-composer {
  margin: 0;
}
.job-notes-quick-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(22rem, 55vh);
  overflow: auto;
}
.job-notes-quick-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.job-notes-quick-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.job-notes-quick-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  font-size: 0.82rem;
}
.job-notes-quick-meta time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.job-notes-quick-actor {
  font-size: 0.8rem;
}
.job-notes-quick-type {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  line-height: 1.2;
}
.job-notes-quick-type-note {
  background: #f8e3b0;
  color: #6a4308;
}
.job-notes-quick-type-call {
  background: #d4ead2;
  color: #1b3d1c;
}
.job-notes-quick-type-sms {
  background: #f8e3b0;
  color: #6a4308;
}
.job-notes-quick-type-email {
  background: #d7e8f8;
  color: #163a5f;
}
.job-notes-quick-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.job-notes-quick-empty {
  margin: 0.15rem 0 0;
}
@media (max-width: 820px) {
  .job-notes-quick-split {
    grid-template-columns: 1fr;
  }
  .job-notes-quick-list {
    max-height: min(16rem, 40vh);
  }
}
.hist-body { min-width: 0; }
.hist-details {
  margin: 0.15rem 0 0;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hist-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0; }
.hist-meta { font-size: 0.75rem; border-radius: 999px; padding: 0.12rem 0.45rem; background: var(--th-bg); }
.hist-meta-who { background: var(--secondary-bg); }
.hist-meta-due { background: var(--warn-bg); }
.hist-meta-urg { background: var(--sem-chip-open-bg); }
/* hist-meta-status / quote / invoice colours live with dtype pill aliases above. */
.hist-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-size: 0.8rem; color: var(--muted); }
.hist-files { display: flex; gap: 0.25rem; align-items: center; }
.hist-files img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.hist-link { font-size: 0.78rem; }
.hist-more { position: relative; letter-spacing: 0.08em; }
.hist-more > summary.hist-more-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  color: var(--muted);
}
.hist-more > summary.hist-more-btn::-webkit-details-marker { display: none; }
.hist-more > summary.hist-more-btn::marker { content: ""; }
.hist-more[open] > summary.hist-more-btn { color: var(--ink); background: color-mix(in srgb, var(--line) 55%, transparent); }
.hist-more-menu {
  position: absolute;
  right: 0;
  z-index: 8;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem;
  min-width: 16rem;
  max-width: min(22rem, 90vw);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 12%, transparent);
}
.hist-more-menu .hist-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  color: inherit;
  background: var(--white);
}
.hist-more-menu form > button,
.hist-more-menu form .span-2 > button {
  width: 100%;
}
.hist-audio { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; }
.hist-audio button { border-radius: 999px; padding: 0.15rem 0.45rem; }
.hist-ico {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: inline-block;
  background: #e8ece6 center / 0.85rem no-repeat;
}
.hist-ico-email { background-color: #d7e8f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23163a5f'%3E%3Cpath d='M4 6h16v12H4z' fill='none' stroke='%23163a5f' stroke-width='2'/%3E%3Cpath d='M4 7l8 6 8-6' fill='none' stroke='%23163a5f' stroke-width='2'/%3E%3C/svg%3E"); }
.hist-ico-call { background-color: #d4ead2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b3d1c'%3E%3Cpath d='M7 4l3 4-2 2c2 3 5 6 8 8l2-2 4 3-2 3c-7 0-16-9-16-16z'/%3E%3C/svg%3E"); }
.hist-ico-sms { background-color: #f8e3b0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a4308'%3E%3Cpath d='M4 5h16v11H7l-3 3z'/%3E%3C/svg%3E"); }
.hist-ico-note { background-color: #f8e3b0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a4308'%3E%3Cpath d='M6 3h9l5 5v13H6z'/%3E%3C/svg%3E"); }
.hist-ico-task { background-color: #e6d8f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d2a55' stroke-width='2'%3E%3Crect x='5' y='5' width='14' height='14' rx='3'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E"); }
.hist-ico-system { background-color: #e8ece6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a685c'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3' stroke='%235a685c' stroke-width='2'/%3E%3C/svg%3E"); }
.hist-ico-file { background-color: #e4eef8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316355f'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3C/svg%3E"); }
.hist-ico-quote { background-color: var(--doc-quote-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a4308'%3E%3Cpath d='M6 3h9l5 5v13H6z'/%3E%3C/svg%3E"); }
.hist-ico-invoice { background-color: var(--doc-invoice-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23163a5f'%3E%3Cpath d='M6 3h9l5 5v13H6z'/%3E%3C/svg%3E"); }

.tax-invoice {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2.1rem 2.2rem 2.5rem;
  max-width: 54rem;
  color: #1a1a1a;
}
.ti-accent {
  position: absolute;
  width: 46%;
  height: 1.85rem;
  background: linear-gradient(90deg, var(--ti-accent) 58%, #b7bbb6 58%);
  transform: skewX(-38deg);
  z-index: 0;
}
.ti-accent-top { top: 0; right: -10%; }
.ti-accent-bottom { bottom: 0; left: -10%; transform: skewX(-38deg); }
.ti-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; position: relative; z-index: 1; margin-top: 0.6rem; }
.ti-brand img { max-height: 4.6rem; max-width: 14rem; object-fit: contain; }
.ti-co { margin: 0.25rem 0 0; font-weight: 700; color: var(--ti-accent); }
.ti-contact { text-align: left; min-width: 14rem; }
.ti-contact p { margin: 0.28rem 0; display: flex; gap: 0.45rem; align-items: center; }
.ti-ico { width: 1.35rem; height: 1.35rem; color: var(--ti-accent); flex-shrink: 0; }
.ti-licence { margin-left: 1.8rem; font-size: 0.88rem; color: #444; }
.ti-title-row { display: flex; justify-content: space-between; align-items: baseline; margin: 1.4rem 0 0.9rem; position: relative; z-index: 1; }
.ti-title-row h1 { margin: 0; font-size: 2rem; }
.ti-number { margin: 0; font-size: 1.35rem; font-weight: 700; }
.ti-summary {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 1rem;
  background: var(--ti-summary);
  padding: 0.85rem 1rem;
  position: relative;
  z-index: 1;
}
.ti-summary span { display: block; font-size: 0.78rem; color: #5a5a5a; }
.ti-summary p { margin: 0.15rem 0; display: flex; justify-content: space-between; gap: 0.75rem; }
/* Customer / billing address under Quote For / Bill To name. */
.ti-summary .ti-addr {
  display: block;
  margin: 0.28rem 0 0;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #333;
  white-space: pre-wrap;
}
.ti-work { margin: 1.1rem 0 0.25rem; font-size: 1.05rem; position: relative; z-index: 1; }
.ti-work-desc { margin: 0 0 1rem; color: #444; position: relative; z-index: 1; }
.ti-lines { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; position: relative; z-index: 1; }
.ti-lines th { background: var(--ti-header); text-align: left; padding: 0.55rem 0.65rem; font-weight: 700; }
.ti-lines th span { font-weight: 500; font-size: 0.78rem; color: #555; }
.ti-lines td { padding: 0.55rem 0.65rem; border-bottom: 1px solid #ececec; }
/* Quote/Invoice PDF line money columns — headers + cells share a right edge. */
.ti-lines.ti-doc-lines { table-layout: fixed; }
.ti-lines.ti-doc-lines col.ti-col-qty { width: 5.75rem; }
.ti-lines.ti-doc-lines col.ti-col-unit { width: 7.75rem; }
.ti-lines.ti-doc-lines col.ti-col-amt { width: 7.75rem; }
.ti-lines th.num,
.ti-lines td.num,
.ti-lines .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ti-lines.ti-doc-lines th.num,
.ti-lines.ti-doc-lines td.num { white-space: nowrap; }
/* Same ITEM | FINDING grid on every inspection-report section (print/PDF). */
.ti-kv { table-layout: fixed; width: 100%; }
.ti-kv col.ti-kv-item { width: 26%; }
.ti-kv col.ti-kv-finding { width: 74%; }
.ti-kv th, .ti-kv td { vertical-align: top; overflow-wrap: anywhere; }
.ti-kv th:first-child, .ti-kv td:first-child { width: 26%; }
.ti-kv td:first-child { font-weight: 700; font-size: 0.82rem; color: #444; }
.ti-kv td:last-child { font-weight: 500; color: #111; }
/* Totals share the lines table colgroup so Amount and Subtotal/GST/Total share one right edge. */
.ti-doc-totals {
  margin: 0.15rem 0 1rem;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.ti-doc-totals td {
  border-bottom: none;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.ti-doc-totals .ti-tot-label {
  text-align: right;
  font-weight: 500;
  color: #222;
}
.ti-doc-totals td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
}
/* `$` hangs left of digits so decimals line up with Amount (ex GST) plain numbers. */
.ti-aud {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.ti-aud-sym {
  position: absolute;
  right: 100%;
  padding-right: 0.08em;
}
.ti-doc-totals tr.ti-grand td {
  background: var(--ti-accent-dark);
  color: #fff;
  font-weight: 700;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.ti-doc-totals tr.ti-grand .ti-tot-label { color: #fff; }
.ti-doc-totals tr.ti-deposit td {
  padding-top: 0.45rem;
  color: #1f2933;
}
.ti-doc-totals tr.ti-deposit .ti-tot-label { font-weight: 600; }
.ti-doc-totals tr.ti-owing td {
  background: color-mix(in srgb, var(--ti-accent, #087a4b) 14%, #fff);
  font-weight: 700;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.ti-doc-totals tr.ti-owing .ti-tot-label { color: var(--ti-accent-dark, #065f3a); }
.ti-pay, .ti-terms { margin-top: 1.1rem; position: relative; z-index: 1; }
.ti-pay h2, .ti-terms h2 { margin: 0 0 0.3rem; color: var(--ti-accent); font-size: 1.15rem; }
/* Invoice Payment Terms — secondary fine print under payment box */
.ti-terms-fine {
  margin-top: 1.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid #d8ded6;
  color: #555;
  font-size: 0.68rem;
  line-height: 1.35;
}
.ti-terms-fine .ti-terms-prose {
  max-width: none;
  line-height: 1.35;
  font-size: inherit;
  color: inherit;
}
.ti-terms-fine .ti-terms-prose p { margin: 0.28rem 0; }
.ti-terms-fine .ti-terms-prose p:first-child { margin-top: 0; }
.ti-terms-fine .ti-terms-prose h1,
.ti-terms-fine .ti-terms-prose h2,
.ti-terms-fine .ti-terms-prose h3 {
  margin: 0.35rem 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #444;
  letter-spacing: 0.01em;
}
.ti-terms-fine .ti-terms-prose strong { font-weight: 700; color: #3a3a3a; }
.ti-terms-fine .ti-terms-prose a { color: #2a5a28; text-decoration: underline; }
.ti-terms-fine .ti-terms-prose ul {
  margin: 0.25rem 0 0.25rem 1rem;
  padding: 0;
}
/* Shared Payment Details columns (builder finish + customer/PDF). */
.pay-details,
.ti-pay dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.75rem;
  row-gap: 0.05rem;
  margin: 0;
  align-items: baseline;
}
.pay-details dt,
.ti-pay dt { color: #555; margin: 0; }
.pay-details dd,
.ti-pay dd { margin: 0; font-weight: 700; color: #1a1a1a; }
.pay-details-note {
  margin: 0.28rem 0 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
.pay-details-plain,
.ti-plain { margin: 0; white-space: pre-wrap; color: #333; font-size: 0.95rem; line-height: 1.45; }
.ti-foot { margin-top: 0.7rem; color: #444; font-size: 0.92rem; position: relative; z-index: 1; padding-bottom: 0.45rem; }
.ti-foot p { margin: 0.25rem 0 0; }
.ti-foot p:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .board-stats, .board-widgets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .topbar { flex-wrap: wrap; }
  .board-stats, .board-widgets { grid-template-columns: 1fr; }
  .hist-row { grid-template-columns: 3.5rem 1.4rem 1fr; }
  .hist-side { grid-column: 2 / -1; }
  .ti-head, .ti-summary { grid-template-columns: 1fr; display: grid; }
}

.job-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(11rem, 1fr));
  gap: 0.6rem;
  overflow-x: auto;
  align-items: start;
}
.board-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 11rem;
}
.board-col header {
  display: block;
  border-bottom: 1px solid var(--line);
}
.board-col h2 { margin: 0; font-size: 0.82rem; line-height: 1.25; }
.board-cards { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.5rem; min-height: 4rem; }
.board-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  background: var(--surface-soft);
}
.board-card:hover { border-color: var(--green); }
.board-card-hit {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.board-desc-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.35;
  margin: 0;
}
.board-card.is-desc-open .board-desc-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.board-desc-more {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.board-desc-more:hover,
.board-desc-more:focus-visible { color: var(--ink); }
.board-next { font-size: 0.88rem; }
.board-task-due { margin: 0.15rem 0 0; }
.board-task-due-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  cursor: pointer;
}
.board-task-due-row .board-next { flex: 1 1 8rem; min-width: 0; }
.board-due-input {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  max-width: 9.5rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
}
input.board-due-input.board-card-due {
  max-width: 8.6rem;
  margin-left: 0;
  padding: 0.1rem 0.25rem;
  font-size: 0.72rem;
  border-radius: 6px;
  background: var(--secondary-bg, #e8ecef);
  border-color: transparent;
}
input.board-due-input.board-card-due:hover,
input.board-due-input.board-card-due:focus {
  border-color: var(--line);
  background: var(--surface);
}
.job-list-due { font-weight: 700; }
.job-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
  margin: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--line);
  align-items: stretch;
}
.job-tabs a {
  padding: 0.4rem 0.7rem;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}
.job-tabs a.active { color: var(--ink); border-bottom-color: var(--green); font-weight: 600; }
.job-tabs a.tab-doc-job.active { color: var(--doc-job-fg); border-bottom-color: var(--doc-job); }
.job-tabs a.tab-doc-quote.active { color: var(--doc-quote-fg); border-bottom-color: var(--doc-quote); }
.job-tabs a.tab-doc-invoice.active { color: var(--doc-invoice-fg); border-bottom-color: var(--doc-invoice); }
/* Jobs page tabs: My Jobs · Board · List */
.jobs-page-tabs { margin-bottom: 0.85rem; }
.jobs-mine-surface .jobs-mine-create {
  margin: 0 0 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.jobs-mine-surface .board-stats { margin-bottom: 0.85rem; }
@media (min-width: 56rem) {
  .jobs-mine-surface .phone-list-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .jobs-mine-surface .jobs-page-tabs { margin: 0; flex: 1 1 auto; }
  .jobs-mine-surface .jobs-mine-create { margin: 0 0 0 auto; }
}
/* Primary + More: desktop keeps full strip; More control is phone-only. */
.job-tabs .phone-tabs-more { display: none; }
.phone-tabs-more {
  position: relative;
  flex: 0 0 auto;
}
.phone-tabs-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  user-select: none;
}
.phone-tabs-more > summary::-webkit-details-marker { display: none; }
.phone-tabs-more.is-active > summary {
  color: var(--ink);
  border-bottom-color: var(--green);
  font-weight: 600;
}
.phone-tabs-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 40;
  min-width: min(12.5rem, calc(100vw - 1.5rem));
  padding: 0.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, #000 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.phone-tabs-more-menu a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 0;
  border-radius: 8px;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}
.phone-tabs-more-menu a:hover,
.phone-tabs-more-menu a:focus-visible { background: var(--th-bg); }
.phone-tabs-more-menu a.active {
  font-weight: 700;
  color: var(--green-dark);
  border-bottom-color: transparent;
}
.history-tl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.history-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  background: var(--white);
}
.history-item.is-quiet { background: #f3f4f1; color: var(--muted); }
.history-meta { margin: 0 0 0.35rem; font-size: 0.85rem; }
.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: var(--white);
}
.task-row.is-done { opacity: 0.72; }
.task-move { display: flex; flex-direction: column; gap: 0.25rem; }
.kv { display: grid; grid-template-columns: 8rem 1fr; gap: 0.25rem 0.75rem; margin: 0.75rem 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
/* need_to_quote / need_to_invoice colours live with dtype pill aliases above.
   Need to Schedule: solid corporate job green + white (same token as btn-doc-job). */
.status-need_to_schedule,
.pill.status-need_to_schedule,
.bulk-status-chip.status-need_to_schedule {
  background: var(--doc-job);
  color: var(--white);
}
.status-customer_follow_up, .status-supplier_parts { background: var(--warn-bg); color: var(--warn); }
.status-admin_applications { background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg); }
.status-cancelled { background: var(--sem-chip-neutral-bg); color: var(--sem-chip-neutral-fg); }
/* Jobs List table pills — soft accents matching underline filter colours (not solid Schedule fill). */
body[data-list-chrome="jobs"] .jobs-list .pill.status-need_to_quote {
  background: color-mix(in srgb, var(--doc-quote-bg, #ffe9a0) 85%, #fff);
  color: var(--doc-quote-fg, #8a5a00);
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-customer_follow_up {
  background: #ffe4cc;
  color: #8a3d00;
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-supplier_parts {
  background: #f8d8d8;
  color: #8a1212;
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-admin_applications {
  background: #e8ddf6;
  color: #4a2870;
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-need_to_schedule {
  background: #d9e6fa;
  color: #163a6b;
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-scheduled {
  background: color-mix(in srgb, var(--doc-job-bg, #cfe8d4) 90%, #fff);
  color: var(--doc-job-fg, #1a5c2e);
}
body[data-list-chrome="jobs"] .jobs-list .pill.status-need_to_invoice {
  background: color-mix(in srgb, var(--doc-invoice-bg, #c5eef2) 85%, #fff);
  color: var(--doc-invoice-fg, #0a5a60);
}
@media (max-width: 900px) {
  .job-board { grid-template-columns: repeat(2, minmax(12rem, 1fr)); }
  .task-row { grid-template-columns: 1fr; }
}

.top-search { position: relative; flex: 1; }
/* Author `display:flex` must not defeat HTML [hidden] — empty bordered list
   otherwise paints a hairline under Jobs top-search (Quotes/Tasks have no list). */
.job-search-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08); max-height: 18rem; overflow: auto;
  display: flex; flex-direction: column;
}
.job-search-list[hidden] {
  display: none !important;
}
.job-search-hit { padding: 0.45rem 0.7rem; text-decoration: none; color: inherit; }
.job-search-hit:hover { background: var(--card-hover); }
.view-tabs { display: flex; gap: 0.4rem; }
/* .view-tabs a / .active shared with .hist-chip above. */
.jobs-widgets-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.jobs-left-stack { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.jobs-side-widgets { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.my-tasks-panel { min-height: 12rem; }
.my-tasks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.my-tasks-head h2 { margin: 0; }
.jobs-activity-panel .job-activity-group { margin: 0 0 0.55rem; }
.jobs-activity-panel .job-activity-job { margin: 0 0 0.15rem; }
.jobs-activity-panel .job-activity-events {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
}
.jobs-activity-panel .job-activity-events li { margin: 0.1rem 0; }
.jobs-activity-panel .job-activity-one { margin: 0 0 0.35rem; }
.quiet-panel h2 { font-size: 0.95rem; }
.col-default { padding: 0 0.55rem 0.4rem; }
.col-default select { font-size: 0.75rem; width: 100%; }
.pill-urgent { background: var(--sem-chip-danger-bg); color: var(--sem-chip-danger-fg); }
.job-main-layout { display: flex; flex-direction: column; gap: 0.85rem; }
.job-main-top, .job-main-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.job-form-map { width: 100%; font-size: 0.88rem; }
.job-form-map th, .job-form-map td { text-align: center; vertical-align: middle; }
.job-form-map th:first-child, .job-form-map td:first-child { text-align: left; }
.job-required-forms, .job-linked-forms { list-style: none; padding: 0; margin: 0.4rem 0 0.85rem; }
.job-required-forms li, .job-linked-forms li { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.job-add-form { max-width: 28rem; align-items: end; }
.table-wrap { overflow-x: auto; }
.job-desc textarea { width: 100%; min-height: 8rem; }
.job-dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.28rem 0.8rem; margin: 0; }
.job-dl dt { color: var(--muted); }
.job-dl dd { margin: 0; }
.enquiry-detail { max-width: 52rem; padding: 0.85rem 1rem 1rem; }
.enquiry-detail-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.45rem; }
.enquiry-detail-head .muted { margin: 0; }
.enquiry-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0; }
.enquiry-dl { margin: 0.15rem 0 0.65rem; }
.enquiry-notes { margin: 0.35rem 0 0.65rem; }
.enquiry-note { margin: 0 0 0.45rem; white-space: pre-wrap; line-height: 1.35; }
.enquiry-note-rich p { margin: 0 0 0.45rem; }
.enquiry-note-rich p:last-child { margin-bottom: 0; }
.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.55rem 0 0;
}
.enquiry-actions select { max-width: 9.5rem; }
.enquiry-actions .btn { padding: 0.32rem 0.7rem; }
.enquiry-suggest { margin: 0.75rem 0 0.35rem; }
.enquiry-suggest h2 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.enquiry-suggest-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.enquiry-suggest-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.enquiry-suggest-list form { display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; align-items: center; justify-content: space-between; }
.enquiry-suggest-list button { white-space: nowrap; }
.enquiry-from { margin: 0 0 0.5rem; }
.job-tasks header, .doc-summary header { display: flex; justify-content: space-between; align-items: center; }
.job-tasks-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.35rem;
}
.job-tasks-head h2 { margin: 0; grid-column: 1; grid-row: 1; }
.add-task {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem 0.75rem;
  pointer-events: none;
}
.add-task > summary.btn {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  list-style: none;
  cursor: pointer;
  pointer-events: auto;
}
.add-task > summary.btn::-webkit-details-marker { display: none; }
.add-task[open] > summary.btn { display: none; }
.add-task[open] {
  grid-template-columns: 1fr;
}
.add-task-composer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  padding: 0.7rem 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--white) 88%, var(--line));
  pointer-events: auto;
}
.add-task-heading {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}
.add-task-primary { display: flex; flex-direction: column; gap: 0.5rem; }
.add-task-primary .field, .add-task-primary input, .add-task-primary textarea { width: 100%; }
.add-task-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: end;
}
.add-task-people .assignee-picks { margin: 0; }
.add-task-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.count-pill { display: inline-block; min-width: 1.2rem; text-align: center; background: var(--secondary-bg); border-radius: 999px; font-size: 0.8rem; padding: 0 0.35rem; }
.main-task { display: grid; grid-template-columns: 1.1rem 1.4rem 0.7rem auto 1fr auto auto auto; gap: 0.45rem; align-items: center; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--line); }
.main-task.is-done { opacity: 0.65; background: #f4f5f3; }
.main-task-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.main-task-copy:hover strong,
.main-task-copy:focus-visible strong { text-decoration: underline; }
.main-task-copy:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.task-expand-hint { font-size: 0.75rem; }
.main-task.is-task-expanded { background: color-mix(in srgb, var(--surface-soft) 70%, var(--green) 8%); }
.main-task-history {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.main-task-history-title {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
}
.task-note-list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.task-note-item {
  padding: 0.35rem 0.45rem;
  border-left: 3px solid var(--line);
  background: var(--surface-soft);
  border-radius: 0 6px 6px 0;
}
.task-note-meta { display: block; font-size: 0.75rem; margin-bottom: 0.15rem; }
.task-comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: flex-end;
}
.task-comment-form .field { flex: 1 1 12rem; margin: 0; }
.task-due-label,
.task-due-date { font-weight: 700; }
.task-due-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.task-due-input {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  max-width: 9.5rem;
  padding: 0.1rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
}
.main-task.is-task-focus {
  background: color-mix(in srgb, var(--doc-job) 12%, var(--white));
  box-shadow: inset 3px 0 0 var(--doc-job);
  scroll-margin-block: 4rem;
}
#job-schedule-start.is-field-focus,
input.is-field-focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--doc-job) 35%, transparent);
  scroll-margin-block: 4rem;
}
.add-task-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0.35rem;
}
.add-task-presets[hidden] { display: none; }
.add-task-presets .secondary {
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
}
.drag-handle { cursor: grab; color: var(--muted); letter-spacing: -0.15em; }
.main-task.is-dragging { opacity: 0.45; }
.main-task.is-dragging .drag-handle { cursor: grabbing; }
.task-check { width: 1.15rem; height: 1.15rem; border: 1.5px solid #888; border-radius: 3px; background: #fff; padding: 0; }
.task-check.is-on { background: var(--green); border-color: var(--green); }
.cat-pill { font-size: 0.72rem; border-radius: 6px; padding: 0.1rem 0.4rem; background: var(--sem-chip-info-bg); }
.cat-admin_applications { background: #ead9f7; }
/* cat-need_to_* colours live with dtype pill aliases above. */
.assignee-chips { display: flex; gap: 0.2rem; }
.avatar-chip { display: inline-flex; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--secondary-bg); align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; overflow: hidden; padding: 0; }
.avatar-chip .avatar-face { width: 100%; height: 100%; object-fit: cover; display: block; }
.task-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.55rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}
.task-dates-main {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
}
.task-created {
  margin-left: auto;
  white-space: nowrap;
}
.task-note-kind {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.1rem;
}
.due-hot { color: #b42318; font-weight: 700; }
.job-schedule-panel .week { margin: 0.75rem 0 1rem; }
.job-bookings { margin: 0.75rem 0 1rem; }
.job-bookings h3 { margin: 0 0 0.45rem; font-size: 1rem; }
.job-booking {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 0.45rem;
  background: var(--surface);
}
.job-booking > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  cursor: pointer;
  padding: 0.55rem 0.7rem;
  list-style: none;
}
.job-booking > summary::-webkit-details-marker { display: none; }
.job-booking-jump { font-weight: 600; color: inherit; }
.job-booking-edit { padding: 0 0.7rem 0.75rem; }
.job-schedule-add { margin: 0.75rem 0; }
.job-schedule-add > summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.45rem;
}
.job-block.is-booking-focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  z-index: 2;
}
/* Deep-link / job Schedule tab focus (same green cue as booking focus). */
.job-block.is-job-focus,
.sched-chip.is-job-focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  z-index: 2;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 28%, transparent);
}
.sched-nts-item.is-job-focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-radius: 6px;
}
/* Job Details Schedule tab embeds full Schedule chrome (not the old mini week). */
.job-schedule-embed {
  margin: 0.5rem 0 1rem;
}
.job-schedule-embed .schedule-chrome.is-job-embed {
  margin-top: 0;
}
.job-schedule-embed .schedule-chrome-head h1 {
  font-size: 1.15rem;
}
.board-task-desc { margin: 0.25rem 0 0; }
.board-task-desc-label { display: block; margin: 0; }
.board-desc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  resize: vertical;
  min-height: 2.4rem;
}
.board-desc-input:focus {
  color: var(--ink);
  outline: 2px solid color-mix(in srgb, var(--green) 45%, transparent);
  outline-offset: 1px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.task-more { position: relative; }
.task-more summary { list-style: none; cursor: pointer; }
.assignee-picks { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.doc-rows { display: flex; flex-direction: column; }
.doc-row { display: grid; grid-template-columns: 1.4rem 5.5rem 1fr auto auto 1rem; gap: 0.45rem; align-items: center; padding: 0.5rem 0.15rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.doc-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; font-variant-numeric: tabular-nums; text-align: right; }
.doc-amt .doc-total { font-weight: 600; }
.doc-amt .doc-profit { font-size: 0.78rem; color: var(--muted, #5a6570); font-weight: 600; }
.doc-ico { width: 1.2rem; height: 1.2rem; border-radius: 4px; background: var(--doc-job-bg); }
.doc-ico.is-quote { background: var(--doc-quote-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-quote) 35%, transparent); }
.doc-ico.is-inv { background: var(--doc-invoice-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-invoice) 35%, transparent); }
.doc-summary.doc-summary-quote header h2 { color: var(--doc-quote-fg); }
.doc-summary.doc-summary-invoice header h2 { color: var(--doc-invoice-fg); }
.doc-summary.doc-summary-quote { border-top: 3px solid var(--doc-quote); }
.doc-summary.doc-summary-invoice { border-top: 3px solid var(--doc-invoice); }
.create-doc.create-doc-quote h2 { color: var(--doc-quote-fg); }
.create-doc.create-doc-invoice h2 { color: var(--doc-invoice-fg); }
.create-doc-form { gap: 0.55rem; }
.create-doc-choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink);
}
.create-doc-choice select { flex: 1 1 12rem; min-width: 0; }
.create-doc input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  flex: 0 0 auto;
  accent-color: var(--doc-quote);
}
.create-doc.create-doc-invoice input[type="radio"] { accent-color: var(--doc-invoice); }
.create-doc-reconnect { margin: 0.15rem 0 0; }
.panel.doc-panel-quote > h2 { color: var(--doc-quote-fg); }
.panel.doc-panel-invoice > h2 { color: var(--doc-invoice-fg); }
.panel.doc-panel-quote { border-top: 3px solid var(--doc-quote); }
.panel.doc-panel-invoice { border-top: 3px solid var(--doc-invoice); }
.doc-list-empty { border-left: 3px solid var(--line); padding-left: 0.65rem; }
.doc-area-quote .doc-list-empty { border-left-color: var(--doc-quote); }
.doc-area-invoice .doc-list-empty { border-left-color: var(--doc-invoice); }
.doc-area-job .doc-list-empty { border-left-color: var(--doc-job); }
.doc-area-customer .doc-list-empty { border-left-color: var(--doc-customer); }
body.doc-area-job .main > header h1::before,
body.doc-area-quote .main > header h1::before,
body.doc-area-invoice .main > header h1::before,
body.doc-area-customer .main > header h1::before {
  content: "";
  display: inline-block;
  width: 0.32rem;
  height: 0.95em;
  margin-right: 0.45rem;
  border-radius: 2px;
  vertical-align: -0.08em;
  background: var(--doc-job);
}
body.doc-area-quote .main > header h1::before { background: var(--doc-quote); }
body.doc-area-invoice .main > header h1::before { background: var(--doc-invoice); }
body.doc-area-customer .main > header h1::before { background: var(--doc-customer); }
.kpi-compact-cell.doc-kpi-job { box-shadow: inset 3px 0 0 var(--doc-job); }
.kpi-compact-cell.doc-kpi-quote { box-shadow: inset 3px 0 0 var(--doc-quote); }
.kpi-compact-cell.doc-kpi-invoice { box-shadow: inset 3px 0 0 var(--doc-invoice); }
.kpi-dash-cell.doc-kpi-job { box-shadow: inset 3px 0 0 var(--doc-job); }
.kpi-dash-cell.doc-kpi-quote { box-shadow: inset 3px 0 0 var(--doc-quote); }
.kpi-dash-cell.doc-kpi-invoice { box-shadow: inset 3px 0 0 var(--doc-invoice); }
/* doc-pill-* colours live with dtype pill aliases above. */
.billed-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.billed-dot.is-billed { background: var(--doc-job); }
.billed-dot.is-open { background: #c0392b; }
@media (max-width: 900px) {
  .jobs-widgets-top, .job-main-top, .job-main-docs { grid-template-columns: 1fr; }
  /* Recent Activity stays desktop right-rail only — hide when the widgets stack. */
  .jobs-widgets-top .jobs-side-widgets,
  .jobs-widgets-top .jobs-activity-panel { display: none; }
  .main-task, .doc-row { grid-template-columns: 1fr; }
  .job-tasks-head, .add-task { grid-template-columns: 1fr; }
  .add-task > summary.btn { grid-column: 1; justify-self: start; }
}

.phone-more-check,
.phone-top,
.phone-nav,
.phone-more-layer,
.jobs-phone { display: none; }

.home-desk {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(16rem, 18.5rem);
  gap: 1.15rem 1.35rem;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.home-day { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; grid-column: 1; }
.home-block h2 { margin: 0 0 0.45rem; font-size: 1.12rem; color: var(--ink); }
.home-next {
  background: color-mix(in srgb, var(--sem-chip-info-bg) 42%, var(--white));
  border-color: color-mix(in srgb, var(--sem-chip-info-fg) 22%, var(--line));
  box-shadow: inset 3px 0 0 var(--sem-chip-info-fg);
}
.home-urgent {
  background: color-mix(in srgb, var(--sem-chip-urgent-bg) 40%, var(--white));
  border-color: color-mix(in srgb, var(--sem-chip-urgent-fg) 22%, var(--line));
  box-shadow: inset 3px 0 0 var(--sem-chip-urgent-fg);
}
.home-h { color: inherit; text-decoration: none; }
.home-h:hover, .home-h:focus-visible { text-decoration: underline; color: inherit; }
.home-count {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}
.home-list { display: flex; flex-direction: column; gap: 0.4rem; }
.home-row { min-height: 2.75rem; }
.home-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.15rem 0 0; align-items: center; position: relative; z-index: 2; }
.home-h,
.home-work-link,
.home-links a,
.kpi-compact-cell,
.kpi-compact-go,
a.phone-brand {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.home-links .pill {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.42rem 0.72rem;
  text-decoration: none;
  min-height: 2.2rem;
  display: inline-flex;
  align-items: center;
}
/* Phone Home: Work menu visible on site-icon landing (desktop already has aside Work). */
.home-work-nav { display: none; }
.home-work-nav-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-work-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.home-work-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--sidebar) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--sidebar) 12%, var(--line));
}
.home-work-link:hover,
.home-work-link:focus-visible {
  background: color-mix(in srgb, var(--sidebar) 14%, var(--white));
}
.home-work-group-label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.15rem 0.2rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-work-nest { margin: 0; }
.home-work-nest > summary { display: none; }
.home-work-nest-body { display: contents; }
.home-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  width: fit-content;
}
.home-kpi-col {
  min-width: 0;
  grid-column: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.kpi-compact {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent);
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}
.kpi-compact:hover, .kpi-compact:focus-visible {
  border-color: var(--line);
  color: var(--ink);
  background: var(--white);
}
.kpi-compact-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-height: 1.5rem;
  flex: 0 0 auto;
}
.kpi-compact-kicker {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.kpi-team-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--th-bg);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.kpi-team-entry:hover,
.kpi-team-entry:focus-visible {
  background: var(--ok-bg);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
.kpi-team-glance {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ok-bg) 55%, var(--white));
  color: inherit;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.kpi-team-glance-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: 1.5rem;
  flex: 0 0 auto;
}
.kpi-team-glance-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-team-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.kpi-team-row {
  display: grid;
  grid-template-columns: minmax(0, 6.2rem) minmax(0, 1fr);
  gap: 0.4rem 0.55rem;
  align-items: center;
  min-width: 0;
}
.kpi-team-who {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}
.kpi-team-who:hover,
.kpi-team-who:focus-visible {
  text-decoration: underline;
  color: inherit;
}
.kpi-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-team-avatar {
  width: 1.55rem !important;
  height: 1.55rem !important;
  border-radius: 50%;
  border: 1px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
}
.kpi-team-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.kpi-team-row-meta {
  font-size: 0.72rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kpi-team-hot { color: var(--warn); font-weight: 700; }
.kpi-team-none { font-size: 0.78rem; padding: 0.15rem 0; }
.kpi-team-more-link {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kpi-day-bar { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.kpi-day-track {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, var(--th-bg));
  border: 1px solid var(--line);
  overflow: hidden;
}
.kpi-day-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  min-width: 3px;
  opacity: 0.92;
}
.kpi-day-fill.status-scheduled,
.kpi-day-fill.status-on_site,
.kpi-day-fill.status-need_to_schedule { background: var(--doc-job); }
.kpi-day-fill.status-quoted,
.kpi-day-fill.status-need_to_invoice { background: var(--doc-quote); }
.kpi-day-fill.status-complete,
.kpi-day-fill.status-invoiced { background: var(--settings-user); }
.kpi-day-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 600;
}
.kpi-day-hours {
  display: flex;
  justify-content: space-between;
  font-size: 0.58rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.kpi-compact-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  flex: 0 0 auto;
}
.kpi-compact-cell {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  position: relative;
  padding: 0.4rem 0.7rem 0.45rem 0.55rem;
  border-radius: 8px;
  background: var(--th-bg);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.kpi-compact-cell:hover, .kpi-compact-cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.kpi-compact-cell strong,
.kpi-compact-cell .num {
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.kpi-compact-label { font-size: 0.74rem; color: var(--muted); line-height: 1.25; font-weight: 600; }
.kpi-split {
  display: flex;
  align-items: baseline;
  gap: 0.18rem;
  font-size: 1.55rem;
}
.kpi-split-hot { font-weight: 800; color: var(--ink); }
.kpi-split-sep { font-weight: 500; font-size: 1.05rem; color: var(--muted); }
.kpi-split-total { font-weight: 500; font-size: 1.05rem; color: var(--muted); }
.kpi-mark {
  position: absolute;
  top: 0.28rem;
  right: 0.32rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.kpi-compact-cell.is-zero {
  background: var(--white);
}
.kpi-compact-cell.is-zero strong,
.kpi-compact-cell.is-zero .num,
.kpi-compact-cell.is-zero .kpi-split-hot { color: var(--muted); font-weight: 600; }
.kpi-compact-cell.is-hot {
  box-shadow: inset 4px 0 0 var(--sem-hot-bar);
  background: var(--sem-hot-bg);
}
.kpi-compact-cell.is-hot strong,
.kpi-compact-cell.is-hot .num,
.kpi-compact-cell.is-hot .kpi-split-hot { color: var(--sem-hot-fg); font-weight: 800; }
.kpi-compact-cell.is-ok {
  background: var(--th-bg);
}
.kpi-compact-cell.is-ok strong,
.kpi-compact-cell.is-ok .num,
.kpi-compact-cell.is-ok .kpi-split-hot { color: var(--ink); }
.kpi-compact-go {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  flex: 0 0 auto;
  margin-top: auto;
}
.kpi-dash {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 0.9fr);
  gap: 1rem;
  align-items: start;
}
.kpi-dash-main { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.kpi-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}
.kpi-dash-cell {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--white);
}
.kpi-dash-cell strong { font-size: 1.35rem; }
.kpi-dash-cell span { font-size: 0.78rem; color: var(--muted); }
.kpi-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.kpi-notes-list a { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; color: inherit; min-height: 2.75rem; }
.kpi-notes-list a span { font-size: 0.88rem; color: var(--muted); }

/* Phone shell: portrait ≤48rem, OR short landscape ≤64rem wide / ≤30rem tall.
   Many phones sideways exceed 48rem CSS width and used to flip to desktop aside. */
@media (max-width: 48rem), (max-width: 64rem) and (max-height: 30rem) {
  /* Clip page content only — not html/body. overflow-x:clip on body clips
     position:fixed phone-nav descendants in Chrome when the visual viewport
     changes (address bar), so tabs vanish / flicker. Keep clip on .app/.main. */
  html.tenant-chrome:not(.ops-chrome),
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form) {
    max-width: 100%;
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) {
    --phone-nav-h: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    --phone-top-h: calc(4.15rem + env(safe-area-inset-top, 0px));
    padding-top: var(--phone-top-h);
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .tenant-aside { display: none; }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form) .app,
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form) .main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .main {
    margin-left: 0;
    padding: 0.75rem 0.85rem calc(var(--phone-nav-h) + 0.85rem);
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .main {
    margin-left: 0;
    padding: 0.85rem 0.95rem 1.5rem;
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .topbar { display: none; }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .phone-top {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 30;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--phone-top-h);
    padding: env(safe-area-inset-top, 0px) 0.45rem 0.3rem;
    background: var(--sidebar);
    color: var(--aside-fg);
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .phone-nav {
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 40;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    min-height: var(--phone-nav-h);
    padding: 0.2rem 0.1rem env(safe-area-inset-bottom, 0px);
    background: var(--sidebar);
    color: var(--aside-fg);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
    overflow: visible;
  }
  /* Login / reset: keep dark brand strip with white ACE plate (same as desktop aside). */
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .tenant-aside {
    display: flex;
    position: static;
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0.55rem 0.55rem 0.4rem;
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .panel-id {
    margin: 0;
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .panel-id-logo-plate {
    width: 100%;
    max-width: 18rem;
    margin: 0 auto 0.35rem;
    padding: 0.3rem;
    overflow: hidden;
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .panel-id-logo-plate.is-ace-chrome .panel-id-logo,
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .panel-id-logo-plate.is-ace-wordmark .panel-id-logo {
    max-height: none;
    width: 100%;
    height: auto;
    transform: none;
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .panel-id-logo {
    max-height: none;
  }
  html.tenant-chrome:not(.ops-chrome) body.auth-shell .aside-bottom {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
  }
  .phone-brand {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    flex: 0 1 auto;
  }
  .phone-brand:has(.phone-top-logo-plate) .phone-brand-name,
  .phone-brand:has(.phone-top-logo) .phone-brand-name { display: none; }
  .phone-top-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.25rem;
    background: #fff;
    border: 2px solid #e8efe6;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    height: auto;
    max-height: 3.1rem;
  }
  .phone-top-logo-plate.is-ace-chrome,
  .phone-top-logo-plate.is-ace-wordmark {
    background: #fff;
    border-color: #e8efe6;
  }
  .phone-top-logo {
    display: block;
    height: 2.6rem;
    width: auto;
    max-width: 9.5rem;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    transform: none;
  }
  .phone-top-logo-plate.is-ace-chrome .phone-top-logo,
  .phone-top-logo-plate.is-ace-wordmark .phone-top-logo {
    height: 2.6rem;
    max-width: 9.5rem;
    transform: none;
  }
  .phone-brand-name {
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7.5rem;
  }
  .phone-search { flex: 1; min-width: 0; }
  .phone-search input {
    width: 100%;
    min-height: 2.75rem;
    font-size: 16px;
    border-radius: 999px;
  }
  .phone-top .top-new { flex-shrink: 0; }
  /* Portrait page create (Quotes/Invoices) — thumb-reachable, one CTA. */
  .phone-top .phone-page-create,
  .phone-top a.btn.phone-page-create {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    min-height: 2.35rem;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .phone-top .top-new > summary.top-new-btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
  }
  .phone-top .top-new-menu {
    right: 0;
    left: auto;
    min-width: 11rem;
  }
  .phone-nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 2.75rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.25rem 0.1rem;
    margin: 0;
    color: var(--aside-link);
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 700;
    background: transparent;
    cursor: pointer;
    overflow: visible;
  }
  /* Beat global a / a:visited ink — --ink matches --sidebar, so visited
     tab <a>s went invisible on the dark bar. Menu is a <label>, so it stayed. */
  a.phone-nav-item,
  a.phone-nav-item:link,
  a.phone-nav-item:visited {
    color: var(--aside-link);
    text-decoration: none;
  }
  .phone-nav-item.active,
  .phone-nav-item:hover,
  a.phone-nav-item.active,
  a.phone-nav-item:hover,
  a.phone-nav-item:focus-visible {
    color: #fff;
    background: var(--nav-hover);
    border-radius: 8px;
    text-decoration: none;
  }
  .phone-nav-item.nav-doc-job.active { box-shadow: inset 0 3px 0 var(--doc-job); }
  .phone-nav-item.nav-doc-quote.active { box-shadow: inset 0 3px 0 var(--doc-quote); }
  .phone-nav-item.nav-doc-invoice.active { box-shadow: inset 0 3px 0 var(--doc-invoice); }
  .phone-ico { display: block; flex-shrink: 0; }
  .phone-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
  }
  .phone-more-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
  }
  .phone-more-check:checked ~ .phone-more-layer { display: block; }
  .phone-more-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 12, 0.45);
  }
  .phone-more-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(78vh, 36rem);
    overflow: auto;
    background: var(--sidebar);
    color: var(--aside-fg);
    border-radius: 16px 16px 0 0;
    padding: 0.85rem 0.9rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .phone-more-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
  }
  .phone-more-close {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    cursor: pointer;
    color: var(--aside-link);
  }
  .phone-more-nav,
  .phone-more-account {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .phone-more-nav a,
  .phone-more-nav a:link,
  .phone-more-nav a:visited,
  .phone-more-account a,
  .phone-more-account a:link,
  .phone-more-account a:visited,
  .phone-more-account button {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    color: var(--aside-link);
    text-decoration: none;
  }
  .phone-more-nav a.active,
  .phone-more-nav a:hover,
  .phone-more-nav a:focus-visible { background: var(--nav-hover); color: #fff; text-decoration: none; }
  .phone-more-account { margin-top: 0.75rem; padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--aside-fg) 16%, transparent); }
  .phone-ft {
    margin-top: 0.85rem;
    padding: 0.35rem 0.5rem;
    /* Same FT plate navy as desktop tenant footer brand strip. */
    background: #0f2a45;
    border-radius: 8px;
    display: flex;
    justify-content: center;
  }
  .phone-ft .ft-wordmark {
    width: auto;
    margin: 0;
    padding: 0.2rem 0.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }
  .phone-ft .ft-wordmark img {
    max-height: 2rem;
    max-width: 2rem;
    width: auto;
    opacity: 1;
    border-radius: 0.35rem;
  }
  .phone-ft .ft-wordmark-text {
    /* Match phone FT mark max-height (2rem) — label ~2/3 of logo height. */
    font-size: calc(2rem * 2 / 3);
    line-height: 1;
  }
  .jobs-desk, .desk-table thead { }
  /* Board: card columns on desk, phone-row stack on small screens. */
  .phone-list-layout[data-view="board"] .jobs-desk { display: none; }
  .phone-list-layout[data-view="board"] .jobs-phone { display: flex; flex-direction: column; gap: 0.55rem; }
  /* Job list: keep desk (cust-list phone rows / column table live inside). */
  .phone-list-layout[data-view="list"] .jobs-desk { display: block; }
  .phone-list-layout[data-view="list"] .jobs-phone { display: none; }
  /* Incoming: never show the wide desktop table on phone — cards only. */
  .enquiries-page { max-width: 100%; overflow-x: clip; }
  .enquiries-help { display: none; }
  .enquiries-desk,
  .enquiries-desk table,
  .enquiries-list > .table-scroll,
  .enquiries-table { display: none !important; }
  .enquiries-phone,
  .enquiries-list > .list-phone-rows {
    display: flex !important;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 100%;
    min-width: 0;
  }
  .enquiries-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 0.75rem;
  }
  .enquiry-filters-box .enquiries-filters {
    margin-bottom: 0;
  }
  .enquiries-bulk-form > .bulk-bar {
    display: none !important;
  }
  .jobs-widgets-top { display: none; }
  .phone-row {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
  }
  /* Customers: body link + trailing edit pencil (siblings — no nested <a>). */
  .phone-row.phone-row-with-edit {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }
  .phone-row-with-edit .phone-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    text-decoration: none;
    color: inherit;
  }
  .phone-row-with-edit .icon-btn-edit {
    flex-shrink: 0;
    align-self: center;
  }
  .phone-row strong { font-size: 1.02rem; }
  .phone-row .muted { font-size: 0.85rem; }
  .enquiry-phone-row .phone-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
  }
  /* Compact select + Done — do not use the 2.75rem phone touch floor. */
  .enquiry-phone-row input.enq-pick[type="checkbox"],
  .enquiry-phone-row .enq-done-check {
    width: 1.05rem;
    height: 1.05rem;
    min-width: 1.05rem;
    min-height: 1.05rem;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .enquiry-phone-row .enq-done-check {
    padding: 0;
    border-radius: 3px;
  }
  .enquiry-phone-row .enq-done-check.is-on::after {
    left: 0.2rem;
    top: 0;
    width: 0.28rem;
    height: 0.52rem;
  }
  .enquiry-phone-row .enquiry-phone-who {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
  }
  .enquiry-phone-row.enquiry-unread .enquiry-phone-who { font-weight: 700; }
  .enquiry-phone-row .enquiry-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--muted);
    text-decoration: none;
  }
  .enquiry-phone-row .enquiry-preview.is-empty { font-style: italic; opacity: 0.85; }
  .enquiry-phone-row .enquiry-phone-meta {
    font-size: 0.74rem;
    line-height: 1.3;
  }
  .desk-table thead { display: none; }
  .desk-table, .desk-table tbody, .desk-table tr, .desk-table td { display: block; width: 100%; }
  .desk-table tr {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0 0 0.65rem;
    padding: 0.65rem 0.8rem;
    min-height: 3rem;
  }
  .desk-table td { border: 0; padding: 0.2rem 0; }
  .desk-table .col-check { display: inline-block; width: auto; margin-right: 0.45rem; }
  /* Job + Quote/Invoice detail heads: stick under green phone-top while body scrolls. */
  .job-card-head,
  .doc-window-head {
    position: sticky;
    top: var(--phone-top-h, 3.35rem);
    z-index: 12;
    background: var(--paper);
    padding-bottom: 0.35rem;
  }
  .job-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 0.05rem;
    margin: 0 0 0.75rem;
    max-width: 100%;
  }
  .job-tabs > a.phone-tab-overflow { display: none; }
  .job-tabs .phone-tabs-more { display: block; margin-left: auto; }
  .job-tabs > a {
    flex: 0 0 auto;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.55rem;
    font-size: 0.92rem;
  }
  .job-tabs .phone-tabs-more > summary {
    padding: 0.4rem 0.55rem;
    font-size: 0.92rem;
  }
  .job-call-row {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin: 0.35rem 0 0;
  }
  .job-call-row a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
  }
  button, .btn, .icon-btn { min-height: 2.75rem; min-width: 2.75rem; }
  /* Done tick stays compact (matches phone-card checkbox); not a 44px hit slab. */
  .enq-done-check { min-height: 0; min-width: 0; }
  .enq-line-job { min-height: 2rem; min-width: 0; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
  select, input, textarea { font-size: 16px; }
  .filter-bar { grid-template-columns: 1fr; }
  .grid-form { grid-template-columns: 1fr; }
  .board-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-widgets { grid-template-columns: 1fr; }
  .suggest { min-width: 0; flex: 1 1 auto; }
  .inline-line input,
  .inline-line input[name="description"] { min-width: 0; }
  .main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .week { max-width: 100%; overflow-x: auto; }
  .work-filters { width: 100%; }
  .pb-bulk-actions { display: none; }
  .suggest-list button { min-height: 2.75rem; }
  .home-desk, .kpi-dash {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }
  .home-work-nav {
    display: block;
    order: 0;
    margin: 0;
    padding: 0.4rem 0.55rem 0.45rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .home-work-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }
  .home-day { order: 1; grid-column: auto; }
  .home-kpi-col { order: 2; grid-column: auto; height: auto; }
  /* Work nav is the site nav on phone Home; pills duplicate bottom tabs / Work. */
  .home-links { display: none; }
  .kpi-compact { min-height: 2.75rem; height: auto; flex: none; }
  .kpi-team-glance { flex: none; }
  .kpi-compact-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-more-account .settings-drop { margin: 0; }
  .phone-more-account .settings-drop > summary.nav-label { min-height: 2.75rem; }
}

/* Portrait / desk: phone-list-layout wrappers are transparent (page order unchanged). */
.phone-list-layout {
  display: block;
}
.phone-list-controls,
.phone-list-content {
  display: contents;
}
/* Landscape used to put a duplicate title in the left column; title is now
   the real main header to the right of the left panel (under crumbs). */
.phone-list-page-title {
  display: none;
}
/* Jobs: Active/All (or board due) — desk/portrait keep order via contents wrapper;
   landscape swaps to .phone-list-land-scope above the list. */
.phone-list-desk-scope {
  display: contents;
}
.phone-list-land-scope {
  display: none;
}
.bulk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bulk-due-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3V2zm12 8H5v10h14V10zM5 8h14V6H5v2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  cursor: pointer;
}
.bulk-due-ico input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.bulk-ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  line-height: 0;
}
.bulk-ico-btn .bulk-ico { display: block; }
/* Jobs board: status chips are landscape-only (desk board unchanged). */
.phone-list-layout[data-list="jobs"][data-view="board"] .phone-list-filters {
  display: none;
}
@media (max-width: 48rem) {
  /* Phone portrait: Jobs never showed the status strip — keep that. */
  .phone-list-layout[data-list="jobs"] .phone-list-filters {
    display: none;
  }
}

/* Landscape phone only: primary tabs → slim right rail (portrait keeps bottom bar).
   Frees vertical content; top bar stays slim full-width above the rail. */
@media (max-width: 64rem) and (max-height: 30rem) {
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) {
    --phone-nav-w: calc(3.35rem + env(safe-area-inset-right, 0px));
    /* Bottom chrome gone — sticky CTAs can sit on the true bottom. */
    --phone-nav-h: env(safe-area-inset-bottom, 0px);
    /* Thin single-row top — shorter than a summary/number chip (~2.75rem+). */
    --phone-top-h: calc(2rem + env(safe-area-inset-top, 0px));
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .phone-top {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    min-height: var(--phone-top-h);
    height: var(--phone-top-h);
    max-height: var(--phone-top-h);
    padding: env(safe-area-inset-top, 0px) 0.35rem 0.12rem;
    box-sizing: border-box;
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .phone-nav {
    flex-direction: column;
    left: auto;
    right: 0;
    top: var(--phone-top-h);
    bottom: 0;
    width: var(--phone-nav-w);
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0.12rem calc(0.08rem + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) 0.08rem;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18);
    justify-content: space-between;
    align-items: stretch;
  }
  html.tenant-chrome:not(.ops-chrome) body:not(.guest-form):not(.auth-shell) .main {
    padding: 0.55rem calc(var(--phone-nav-w) + 0.55rem) calc(0.55rem + env(safe-area-inset-bottom, 0px)) 0.75rem;
  }
  .phone-brand { gap: 0.2rem; }
  .phone-top-logo-plate {
    max-height: 1.45rem;
    padding: 0.08rem;
    border-width: 1px;
  }
  .phone-top-logo,
  .phone-top-logo-plate.is-ace-chrome .phone-top-logo,
  .phone-top-logo-plate.is-ace-wordmark .phone-top-logo {
    height: 1.2rem;
    max-width: 5.5rem;
  }
  /* List pages: logo stays far-left in the green phone-top; pack search toward New. */
  html.tenant-chrome:not(.ops-chrome) body:has(.phone-list-layout[data-list="tasks"]) .phone-top .phone-search,
  html.tenant-chrome:not(.ops-chrome) body:has(.phone-list-layout[data-list="invoices"]) .phone-top .phone-search,
  html.tenant-chrome:not(.ops-chrome) body:has(.phone-list-layout[data-list="quotes"]) .phone-top .phone-search,
  html.tenant-chrome:not(.ops-chrome) body:has(.phone-list-layout[data-list="jobs"]) .phone-top .phone-search {
    margin-left: auto;
    flex: 0 1 18rem;
    max-width: min(18rem, 58vw);
  }
  .phone-search input {
    min-height: 1.65rem;
    height: 1.65rem;
    padding: 0.15rem 0.65rem;
    font-size: 16px; /* keep ≥16px — iOS input zoom */
    line-height: 1.2;
    border-radius: 999px;
  }
  .phone-top .top-new > summary.top-new-btn,
  .phone-top .top-new > summary.top-new-btn.btn {
    min-height: 1.65rem;
    min-width: 0;
    height: 1.65rem;
    padding: 0.12rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.2;
    box-sizing: border-box;
  }
  .phone-nav-item {
    flex: 1 1 0;
    min-height: 2.75rem;
    max-width: none;
    gap: 0.04rem;
    padding: 0.12rem 0.05rem;
    border-radius: 8px;
  }
  /* Accent on the content-facing edge (left), not the top. */
  .phone-nav-item.nav-doc-job.active { box-shadow: inset 3px 0 0 var(--doc-job); }
  .phone-nav-item.nav-doc-quote.active { box-shadow: inset 3px 0 0 var(--doc-quote); }
  .phone-nav-item.nav-doc-invoice.active { box-shadow: inset 3px 0 0 var(--doc-invoice); }
  .phone-nav-label { font-size: 0.52rem; }
  .phone-ico { width: 1.25rem; height: 1.25rem; }
  .phone-more-sheet {
    left: 0;
    right: var(--phone-nav-w, 3.35rem);
    max-height: min(88vh, 22rem);
    padding: 0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  }

  /* Quotes / Jobs: left control column + centre-right list (landscape only). */
  .phone-list-layout {
    display: grid;
    grid-template-columns: minmax(9.25rem, 11.5rem) minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
    align-items: start;
  }
  /* Quotes landscape: status chips only (no All / Solar / Needs match / Match queue). */
  .phone-list-layout[data-list="quotes"] .phone-list-controls .list-scope-bar {
    display: none !important;
  }
  .phone-list-controls,
  .phone-list-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
  }
  .phone-list-controls {
    position: sticky;
    top: var(--phone-top-h, 2rem);
    max-height: calc(100dvh - var(--phone-top-h, 2rem) - 0.75rem);
    overflow: auto;
    z-index: 7;
    background: var(--paper);
  }
  .phone-list-filters { display: flex; flex-direction: column; gap: 0.35rem; }
  .phone-list-controls .list-scope-bar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.28rem;
    margin: 0;
  }
  .phone-list-controls .tasks-who-split { display: none; }
  .phone-list-controls .list-scope-chip,
  .phone-list-controls .list-scope-bar > .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
  .phone-list-controls .job-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    border-bottom: 0;
    margin: 0;
  }
  .phone-list-controls .job-tabs > a {
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding: 0.35rem 0.45rem;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
  }
  .phone-list-controls .job-tabs > a.active {
    border-left-color: var(--doc-job);
    background: color-mix(in srgb, var(--doc-job) 12%, var(--white));
  }
  .phone-list-controls .list-status-filter {
    margin: 0;
    padding: 0.2rem 0.25rem;
  }
  .phone-list-controls .list-status-filter .bulk-status-strip {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0.12rem;
    align-items: stretch;
  }
  .phone-list-controls .list-status-filter .bulk-status-strip-label {
    font-size: 0.65rem;
    font-weight: 700;
    margin: 0 0 0.05rem;
  }
  .phone-list-controls .list-status-filter .bulk-status-chip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    /* Beat desk min-width:56rem flex:1 1 0 (that inflates chips in a column). */
    flex: 0 0 auto;
    min-height: 1.45rem;
    max-height: none;
    padding: 0.12rem 0.3rem;
    font-size: 0.68rem;
    border-radius: 0.4rem;
  }
  .phone-list-controls .list-status-filter .bulk-status-chip-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 0.65rem;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .phone-list-controls .list-status-filter .bulk-status-count {
    order: 2;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
  }
  /*
   * Jobs left status: Robert schedule pastels — unique soft colour per status
   * (desk pills keep solid/shared tokens; landscape column needs distinct rows).
   */
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip:not([class*="status-"]) {
    background: #e8ece6;
    color: #3a463c;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-need_to_quote {
    background: #ffe9a0;
    color: #6a4f00;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-customer_follow_up {
    background: #ffd0a8;
    color: #8a3d00;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-supplier_parts {
    background: #f5c4c4;
    color: #8a1212;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-admin_applications {
    background: #e4d4f5;
    color: #4a2870;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-need_to_schedule {
    background: #cfe0fa;
    color: #163a6b;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-scheduled {
    background: #cfe8d4;
    color: #142017;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-scheduled.is-active {
    background: var(--doc-job);
    color: #fff;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-need_to_invoice {
    background: #c5eef2;
    color: #0a4a50;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-complete {
    background: #d8e8d6;
    color: #2a5a28;
  }
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter .bulk-status-chip.status-cancelled {
    background: #e4e4e4;
    color: #4a4a4a;
  }
  .phone-list-controls .list-status-filter-mobile,
  .phone-list-controls .list-status-filter-mobile-row,
  .phone-list-controls .list-status-filter-hint,
  .phone-list-controls .list-status-filter-pills {
    display: none !important;
  }
  .phone-list-content > .muted { display: none; }
  .phone-list-content .list-phone-rows { min-width: 0; }
  /* Re-show Jobs status chips in landscape (hidden on portrait phone / board desk). */
  .phone-list-layout[data-list="jobs"] .phone-list-filters,
  .phone-list-layout[data-list="jobs"][data-view="board"] .phone-list-filters {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  /* Jobs summary cards: dense left rows — label left, count right, unique pastels. */
  .phone-list-controls .board-stats {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin: 0;
    grid-template-columns: none;
  }
  .phone-list-controls .stat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    min-height: 1.45rem;
    padding: 0.12rem 0.3rem;
    border-radius: 0.4rem;
    border-color: color-mix(in srgb, currentColor 22%, var(--line));
  }
  .phone-list-controls .stat-card strong {
    order: 2;
    display: inline;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
  }
  .phone-list-controls .stat-card span {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.65rem;
    line-height: 1.15;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .phone-list-controls .stat-card.status-overdue {
    background: var(--sem-chip-danger-bg);
    color: var(--sem-chip-danger-fg);
  }
  .phone-list-controls .stat-card.status-today {
    background: var(--sem-chip-info-bg);
    color: var(--sem-chip-info-fg);
  }
  .phone-list-controls .stat-card.status-unassigned {
    background: var(--sem-chip-neutral-bg);
    color: var(--sem-chip-neutral-fg);
  }
  .phone-list-controls .stat-card.status-need_to_invoice {
    background: #c5eef2;
    color: #0a4a50;
  }
  .phone-list-controls .stat-card.status-need_to_quote {
    background: #ffe9a0;
    color: #6a4f00;
  }

  /* Tasks landscape: left compact chips — not portrait phone-chips + selects. */
  .phone-list-controls .task-filters { margin: 0; }
  .phone-list-controls .task-filter-phone { display: none !important; }
  .phone-list-controls .task-filter-phone-chips { display: none !important; }
  .phone-list-controls .task-filter-desk {
    display: flex !important;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
  }
  .phone-list-controls .task-filter-desk .task-chip-strip,
  .phone-list-controls .task-filter-desk .list-scope-bar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.22rem;
    margin: 0;
  }
  .phone-list-controls .task-filter-desk .bulk-status-strip-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    letter-spacing: 0.02em;
  }
  .phone-list-controls .task-filter-desk .bulk-status-chip,
  .phone-list-controls .task-filter-desk .list-scope-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.72rem;
    border-radius: 8px;
  }
  .phone-list-controls .task-filter-desk .bulk-status-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.85rem;
  }
  /* Keep Status + Open/done (+ Team); Kind/Stage/Date stay portrait/desk. */
  .phone-list-controls .task-filter-desk .task-chip-strip[aria-label="Filter by kind"],
  .phone-list-controls .task-filter-desk .task-chip-strip[aria-label="Filter by stage"],
  .phone-list-controls .task-filter-desk .task-chip-strip[aria-label="Due date window"],
  .phone-list-controls .task-filter-desk .list-scope-bar[aria-label="Due date window"],
  .phone-list-controls .task-filter-desk .task-date-range {
    display: none !important;
  }

  /* Tasks list: dense phone rows even when width > 56rem (landscape phones). */
  .phone-list-layout[data-list="tasks"] .task-list > .list-phone-rows {
    display: flex !important;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    min-width: 0;
  }
  .phone-list-layout[data-list="tasks"] .task-list > .table-scroll {
    display: none !important;
  }
  .phone-list-layout[data-list="tasks"] .task-phone-card {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .phone-list-layout[data-list="tasks"] .task-phone-card .phone-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
  }
  .phone-list-layout[data-list="tasks"] .task-phone-card strong { font-size: 0.95rem; }
  .phone-list-layout[data-list="tasks"] .task-phone-check {
    display: inline-flex;
    align-items: center;
    margin: 0.15rem 0.15rem 0 0;
  }
  .phone-list-layout[data-list="tasks"] .task-phone-group,
  .phone-list-layout[data-list="tasks"] .task-phone-month {
    margin: 0.3rem 0 0.05rem;
    font-size: 0.72rem;
  }

  /* Tasks bulk: one compact row; hide the Wide-screen essay. */
  .phone-list-layout[data-list="tasks"] .bulk-bar {
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.4rem;
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar > p.muted {
    display: none !important;
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.28rem;
    overflow-x: auto;
    max-height: 2.4rem;
    -webkit-overflow-scrolling: touch;
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar .bulk-pick-all {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar .bulk-field {
    margin: 0;
    min-width: 0;
    max-width: 6.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--muted);
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar .bulk-field select,
  .phone-list-layout[data-list="tasks"] .bulk-bar .bulk-field input[type="date"] {
    min-width: 0;
    width: 100%;
    min-height: 1.85rem;
    height: 1.85rem;
    padding: 0.1rem 0.25rem;
    font-size: 16px;
    box-sizing: border-box;
  }
  .phone-list-layout[data-list="tasks"] .bulk-bar-actions > button,
  .phone-list-layout[data-list="tasks"] .bulk-bar-actions > .btn {
    flex: 0 0 auto;
    min-height: 1.85rem;
    min-width: 0;
    height: 1.85rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .phone-list-content .task-list,
  .phone-list-content .list-phone-rows { min-width: 0; }

  /* Jobs schedule/activity panels — hide in landscape; list + left chips own the lane. */
  .jobs-widgets-top { display: none; }

  /*
   * Home landscape: Overview / KPI status panel LEFT under logo + search;
   * crumbs / Home title / WORK / My day / Next up RIGHT — same chrome idea as
   * Jobs left-chip lists. Robert’s blue X meant the panel was missing/off-screen,
   * not “delete the left column.” Jobs/Quotes/Tasks/Invoices left-chip chrome
   * below is untouched.
   */
  html.tenant-chrome:not(.ops-chrome) body:has(.home-desk) .phone-top .phone-search {
    margin-left: auto;
    flex: 0 1 18rem;
    max-width: min(18rem, 58vw);
  }
  .main:has(.home-desk) {
    display: grid;
    grid-template-columns: minmax(9.25rem, 11.5rem) minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.25rem;
    align-items: start;
  }
  .main:has(.home-desk) > .app-trail,
  .main:has(.home-desk) > .app-crumbs {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    z-index: 8;
    background: var(--paper);
    padding: 0.15rem 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
  }
  .main:has(.home-desk) > header {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-width: 0;
  }
  /* Guest / no trail — pin title to the top of the right column. */
  .main:has(.home-desk):not(:has(> .app-trail)):not(:has(> .app-crumbs)) > header {
    grid-row: 1;
  }
  .main:has(.home-desk) > header .title-row {
    margin: 0;
    gap: 0.35rem;
    align-items: center;
  }
  .main:has(.home-desk) > header h1 {
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .main:has(.home-desk) > .banner {
    grid-column: 2;
  }
  .main:has(.home-desk) > .home-desk {
    display: contents;
  }
  .main:has(.home-desk) .home-kpi-col {
    grid-column: 1;
    grid-row: 1 / span 30;
    order: 0;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    max-height: calc(100dvh - var(--phone-top-h, 2rem) - 0.5rem);
    overflow: auto;
    z-index: 1;
    background: var(--paper);
  }
  .main:has(.home-desk) .home-work-nav {
    grid-column: 2;
    order: 0;
    width: auto;
  }
  .main:has(.home-desk) .home-day {
    grid-column: 2;
    order: 0;
    min-width: 0;
    width: auto;
    position: relative;
    z-index: 3;
  }
  .main:has(.home-desk) .kpi-compact {
    min-height: 0;
    height: auto;
    width: auto;
  }
  .main:has(.home-desk) .kpi-compact-cells {
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }
  .main:has(.home-desk) .kpi-compact-cell {
    min-height: 2.2rem;
    padding: 0.25rem 0.4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }
  .main:has(.home-desk) .kpi-compact-cell strong,
  .main:has(.home-desk) .kpi-compact-cell .num { font-size: 0.95rem; }
  .main:has(.home-desk) .kpi-compact-label { font-size: 0.72rem; }

  /*
   * List landscape chrome (Jobs / Quotes / Tasks / Invoices):
   * left = status/filter chips under logo; right = crumbs → page title → scope/filters → list.
   * Green phone-top: logo far left · search packed toward New.
   * phone-list-layout becomes contents so crumbs/header share the main grid with the left panel.
   */
  .main:has(.phone-list-layout[data-list="tasks"]),
  .main:has(.phone-list-layout[data-list="invoices"]),
  .main:has(.phone-list-layout[data-list="quotes"]),
  .main:has(.phone-list-layout[data-list="jobs"]) {
    display: grid;
    grid-template-columns: minmax(9.25rem, 11.5rem) minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.25rem;
    align-items: start;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > .app-trail,
  .main:has(.phone-list-layout[data-list="invoices"]) > .app-trail,
  .main:has(.phone-list-layout[data-list="quotes"]) > .app-trail,
  .main:has(.phone-list-layout[data-list="jobs"]) > .app-trail,
  .main:has(.phone-list-layout[data-list="tasks"]) > .app-crumbs,
  .main:has(.phone-list-layout[data-list="invoices"]) > .app-crumbs,
  .main:has(.phone-list-layout[data-list="quotes"]) > .app-crumbs,
  .main:has(.phone-list-layout[data-list="jobs"]) > .app-crumbs {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    z-index: 8;
    background: var(--paper);
    padding: 0.15rem 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
  }
  /* Page title to the right of the left panel, just under crumbs (not in the chip column). */
  .main:has(.phone-list-layout[data-list="tasks"]) > header,
  .main:has(.phone-list-layout[data-list="invoices"]) > header,
  .main:has(.phone-list-layout[data-list="quotes"]) > header,
  .main:has(.phone-list-layout[data-list="jobs"]) > header {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-width: 0;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > header .title-row,
  .main:has(.phone-list-layout[data-list="invoices"]) > header .title-row,
  .main:has(.phone-list-layout[data-list="quotes"]) > header .title-row,
  .main:has(.phone-list-layout[data-list="jobs"]) > header .title-row {
    margin: 0;
    gap: 0.35rem;
    align-items: center;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > header h1,
  .main:has(.phone-list-layout[data-list="invoices"]) > header h1,
  .main:has(.phone-list-layout[data-list="quotes"]) > header h1,
  .main:has(.phone-list-layout[data-list="jobs"]) > header h1 {
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > .banner,
  .main:has(.phone-list-layout[data-list="invoices"]) > .banner,
  .main:has(.phone-list-layout[data-list="quotes"]) > .banner,
  .main:has(.phone-list-layout[data-list="jobs"]) > .banner {
    grid-column: 2;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > .phone-list-desk-note,
  .main:has(.phone-list-layout[data-list="invoices"]) > .phone-list-desk-note,
  .main:has(.phone-list-layout[data-list="quotes"]) > .phone-list-desk-note,
  .main:has(.phone-list-layout[data-list="tasks"]) > .phone-list-desk-actions,
  .main:has(.phone-list-layout[data-list="invoices"]) > .phone-list-desk-actions,
  .main:has(.phone-list-layout[data-list="quotes"]) > .phone-list-desk-actions {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="tasks"]) > .phone-list-layout,
  .main:has(.phone-list-layout[data-list="invoices"]) > .phone-list-layout,
  .main:has(.phone-list-layout[data-list="quotes"]) > .phone-list-layout,
  .main:has(.phone-list-layout[data-list="jobs"]) > .phone-list-layout {
    display: contents;
  }
  /* Left chip column starts under the logo (same row as crumbs) — not below title. */
  .main:has(.phone-list-layout[data-list="tasks"]) .phone-list-controls,
  .main:has(.phone-list-layout[data-list="invoices"]) .phone-list-controls,
  .main:has(.phone-list-layout[data-list="quotes"]) .phone-list-controls,
  .main:has(.phone-list-layout[data-list="jobs"]) .phone-list-controls {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    max-height: calc(100dvh - var(--phone-top-h, 2rem) - 0.5rem);
    overflow: auto;
    z-index: 7;
    background: var(--paper);
  }
  .main:has(.phone-list-layout[data-list="tasks"]) .phone-list-content,
  .main:has(.phone-list-layout[data-list="invoices"]) .phone-list-content,
  .main:has(.phone-list-layout[data-list="quotes"]) .phone-list-content,
  .main:has(.phone-list-layout[data-list="jobs"]) .phone-list-content {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
  }
  /* No duplicate title in the left chip column — real header owns the title. */
  .phone-list-page-title {
    display: none !important;
  }
  /* Jobs: hide desk-order scope; show Active/All (or board due) above the list. */
  .phone-list-desk-scope {
    display: none !important;
  }
  .phone-list-land-scope {
    display: block;
    margin: 0 0 0.35rem;
  }
  .phone-list-land-scope .list-scope-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
  }
  .phone-list-land-scope .list-scope-chip,
  .phone-list-land-scope .list-scope-bar > .btn {
    width: auto;
    justify-content: center;
  }
  /* Search + New stay in the thin green phone-top — not duplicated in content.
   * Use :has(list) so we never emit a trailing-comma bulk-bar selector (#179). */
  .main:has(
    .phone-list-layout[data-list="tasks"],
    .phone-list-layout[data-list="invoices"],
    .phone-list-layout[data-list="quotes"],
    .phone-list-layout[data-list="jobs"]
  ) .phone-list-content > .bulk-bar {
    position: sticky;
    top: calc(var(--phone-top-h, 2rem) + 1.4rem);
    z-index: 5;
    background: var(--paper);
  }

  /* Invoices + Quotes: phone rows (not desk table) + compact bulk under sticky crumbs. */
  .main:has(.phone-list-layout[data-list="invoices"]) .list-phone-rows,
  .main:has(.phone-list-layout[data-list="quotes"]) .list-phone-rows {
    display: flex !important;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
  }
  .main:has(.phone-list-layout[data-list="invoices"]) .invoices-list > .table-scroll,
  .main:has(.phone-list-layout[data-list="quotes"]) .quotes-list > .table-scroll {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="quotes"]) .quotes-list > .cust-list-toolbar {
    display: none !important;
  }
  .main:has(
    .phone-list-layout[data-list="invoices"],
    .phone-list-layout[data-list="quotes"]
  ) .phone-list-content .bulk-bar {
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.4rem;
  }
  .main:has(.phone-list-layout[data-list="invoices"]) .phone-list-content .bulk-bar > p.muted,
  .main:has(.phone-list-layout[data-list="quotes"]) .phone-list-content .bulk-bar > p.muted {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="invoices"]) .phone-list-content .bulk-bar-actions,
  .main:has(.phone-list-layout[data-list="quotes"]) .phone-list-content .bulk-bar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.28rem;
    overflow-x: auto;
    max-height: 2.4rem;
  }

  .phone-list-layout[data-list="tasks"] .bulk-due-ico,
  .phone-list-layout[data-list="tasks"] .bulk-ico-btn {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
  }

  /* —— Phase 3: Customers + Price book landscape density —— */
  html.tenant-chrome:not(.ops-chrome) body:has(.phone-list-layout[data-list="customers"]) .phone-top .phone-search {
    margin-left: auto;
    flex: 0 1 18rem;
    max-width: min(18rem, 58vw);
  }
  .main:has(.phone-list-layout[data-list="customers"]) {
    display: grid;
    grid-template-columns: minmax(9.25rem, 11.5rem) minmax(0, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.25rem;
    align-items: start;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > .app-trail,
  .main:has(.phone-list-layout[data-list="customers"]) > .app-crumbs {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: center;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    z-index: 8;
    background: var(--paper);
    padding: 0.15rem 0;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent);
  }
  .main:has(.phone-list-layout[data-list="customers"]) > header {
    display: block !important;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-width: 0;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > header .title-row {
    margin: 0;
    gap: 0.35rem;
    align-items: center;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > header h1 {
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > .banner {
    grid-column: 2;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > .phone-list-desk-note,
  .main:has(.phone-list-layout[data-list="customers"]) > .phone-list-desk-actions {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="customers"]) > .phone-list-layout {
    display: contents;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .phone-list-controls {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: var(--phone-top-h, 2rem);
    max-height: calc(100dvh - var(--phone-top-h, 2rem) - 0.5rem);
    overflow: auto;
    z-index: 7;
    background: var(--paper);
  }
  .main:has(.phone-list-layout[data-list="customers"]) .phone-list-content {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .phone-list-content > .bulk-bar {
    position: sticky;
    top: calc(var(--phone-top-h, 2rem) + 1.4rem);
    z-index: 5;
    background: var(--paper);
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.4rem;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .phone-list-content .bulk-bar > p.muted {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .list-phone-rows {
    display: flex !important;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .cust-list > .table-scroll,
  .main:has(.phone-list-layout[data-list="customers"]) .cust-list .cust-sort-bar,
  .main:has(.phone-list-layout[data-list="customers"]) .cust-list .cust-cols-panel,
  .main:has(.phone-list-layout[data-list="customers"]) .cust-list .cust-list-toolbar:not(:has(.list-phone-menu)) {
    display: none !important;
  }
  .main:has(.phone-list-layout[data-list="customers"]) .cust-list:has(.list-phone-rows) .list-phone-rows {
    display: flex !important;
  }

  /* Price book: single-row toolbar + compact filter; table scrolls horizontally. */
  .main:has(.pb-list) > .app-crumbs {
    flex-wrap: wrap;
    gap: 0.1rem 0.25rem;
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
    max-height: 2.4rem;
    overflow: hidden;
  }
  .main:has(.pb-list) > .app-trail {
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
    max-height: none;
  }
  .main:has(.pb-list) > .app-trail .app-crumbs {
    max-height: 2.4rem;
    overflow: hidden;
  }
  .pb-list-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pb-list-toolbar .btn {
    flex: 0 0 auto;
    min-height: 1.85rem;
    height: 1.85rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .pb-list-toolbar .col-vis-trigger {
    width: 1.85rem;
    height: 1.85rem;
  }
  .pb-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    align-items: flex-end;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0.45rem;
    padding: 0.35rem 0;
  }
  .pb-filter-bar .field {
    flex: 0 0 auto;
    min-width: 7.5rem;
    margin: 0;
  }
  .pb-filter-bar .field:first-child { min-width: 10rem; }
  .pb-filter-bar input,
  .pb-filter-bar select {
    min-height: 1.85rem;
    height: 1.85rem;
    padding: 0.1rem 0.35rem;
    font-size: 16px;
  }
  .pb-filter-bar .field > button,
  .pb-filter-bar .field > .btn {
    min-height: 1.85rem;
    height: 1.85rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
  }
  .pb-junk-hints { display: none; }
  .pb-list .table-scroll {
    max-height: calc(100dvh - var(--phone-top-h, 2rem) - 7rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pb-list .table-scroll table { min-width: max(100%, 28rem); }
  .pb-band-count,
  .pb-band-label { margin: 0 0 0.3rem; font-size: 0.78rem; }

  /* —— Phase 4: Schedule landscape —— */
  .sched-view-switch {
    position: sticky;
    top: var(--phone-top-h, 2rem);
    z-index: 9;
    background: var(--paper);
    padding: 0.15rem 0;
    margin: 0 0 0.35rem;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sched-view-btn {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.2rem 0.35rem;
  }
  .week-nav-bar {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    align-items: center;
  }
  .week-nav-link { font-size: 0.72rem; padding: 0.15rem 0.35rem; }
  .sched-matrix-nav,
  .sched-month-nav {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0.3rem 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sched-matrix-nav .week-nav-group {
    margin-left: auto;
    width: auto;
    flex: 0 0 auto;
  }
  .sched-matrix-head,
  .sched-matrix-row { min-width: 28rem; }
  .sched-month-cell { min-height: 5rem; }
  .week { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .main:has(.week),
  .main:has(.sched-month),
  .main:has(.sched-matrix) {
    padding-top: 0.4rem;
  }
  /* Status filter row: one compact scroll line (label + pills). */
  .main:has(.week) .schedule-chrome > .week-legend,
  .main:has(.sched-month) .schedule-chrome > .week-legend {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0.32rem 0.5rem;
    max-height: 2.5rem;
    align-items: center;
  }
  .main:has(.week) .schedule-chrome > .week-legend .week-legend-label,
  .main:has(.sched-month) .schedule-chrome > .week-legend .week-legend-label {
    font-size: 0.68rem;
  }
  .main:has(.week) .schedule-chrome > .week-legend .week-status-filter,
  .main:has(.sched-month) .schedule-chrome > .week-legend .week-status-filter {
    flex: 0 0 auto;
    min-height: 1.7rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .main:has(.week) .schedule-chrome-head .title-row,
  .main:has(.sched-month) .schedule-chrome-head .title-row,
  .main:has(.sched-matrix) .schedule-chrome-head .title-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
  }
  .main:has(.week) .schedule-chrome-head h1,
  .main:has(.sched-month) .schedule-chrome-head h1,
  .main:has(.sched-matrix) .schedule-chrome-head h1 {
    font-size: 1.15rem;
    margin: 0;
  }
  .main:has(.week) .schedule-chrome,
  .main:has(.sched-month) .schedule-chrome {
    margin-bottom: 0.35rem;
  }
  .main:has(.week) .schedule-chrome-head,
  .main:has(.sched-month) .schedule-chrome-head {
    padding: 0.45rem 0.55rem;
  }

  /* —— Phase 5: Job / Quote / Invoice detail heads + crumbs polish —— */
  .job-card-head,
  .doc-window-head {
    position: sticky;
    top: var(--phone-top-h, 2rem);
    z-index: 12;
    background: var(--paper);
    padding-bottom: 0.15rem;
    margin-bottom: 0.2rem;
    gap: 0.45rem;
  }
  .job-card-head h1 { font-size: 1.2rem; gap: 0.3rem; }
  .job-head-actions .btn,
  .job-head-actions .icon-btn,
  .job-card-title-trailing .icon-btn {
    min-height: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.78rem;
  }
  .job-tabs {
    margin: 0 0 0.45rem;
    gap: 0;
  }
  .job-tabs > a,
  .job-tabs .phone-tabs-more > summary {
    min-height: 2.2rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
  }
  .job-call-row { margin: 0.2rem 0 0; gap: 0.3rem; }
  .job-call-row a {
    min-height: 2rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
  }
  .main > .app-crumbs {
    flex-wrap: wrap;
    gap: 0.1rem 0.2rem;
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
    max-height: 2.6rem;
    overflow: hidden;
    line-height: 1.25;
  }
  .main > .app-trail {
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
    /* no overflow:hidden — Back popover must not clip */
    line-height: 1.25;
    max-height: none;
  }
  .main > .app-trail .app-crumbs {
    margin: 0;
    max-height: 2.6rem;
    overflow: hidden;
  }
}


.users-table td { vertical-align: middle; }
.users-table th:last-child,
.users-table td.user-edit-cell { width: 1%; text-align: right; white-space: nowrap; }
.user-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.user-name-cell .avatar-face {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--secondary-bg);
}
.users-add, .users-roles {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.15rem 0.9rem 0.9rem;
  background: var(--paper);
}
.users-add > summary, .users-roles > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.65rem 0;
}
.role-card h3 { margin: 0; font-size: 1rem; }
.user-edit-page { max-width: 36rem; }
.user-edit-head { display: flex; align-items: center; gap: 0.6rem; }
.user-edit-head .avatar-face {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  object-fit: cover;
}
.user-danger { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.avatar-picker { border: 0; padding: 0; margin: 0 0 0.75rem; min-width: 0; }
.avatar-picker legend { font-weight: 700; margin: 0 0 0.45rem; padding: 0; }
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 28rem;
}
.avatar-pick { display: block; cursor: pointer; margin: 0; }
.avatar-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-pick .avatar-face {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--line);
}
.avatar-pick:has(input:checked) .avatar-face { box-shadow: 0 0 0 3px var(--green); }
.avatar-pick:focus-within .avatar-face { box-shadow: 0 0 0 3px var(--green); }
@media (max-width: 40rem) {
  .avatar-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.appearance-choice {
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}
.appearance-choice-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-weight: 700;
}
.user-details { display: grid; gap: 0.65rem; max-width: 40rem; }
.user-details .panel { padding: 0.7rem 0.85rem; }
.user-details h2 { margin: 0 0 0.4rem; font-size: 0.98rem; }
.user-details h3 { margin: 0.35rem 0 0; font-size: 0.88rem; }
.user-details .tight-form { gap: 0.4rem; }
.user-details .grid-form { margin: 0 0 0.55rem; }

/* Phase B: per-user semantic theme. !important beats tenant :root logo vars without replacing aside greens. */
html[data-ui-theme="high-contrast"] {
  --ink: #0a0a0a !important;
  --muted: #1a1a1a !important;
  --line: #111111 !important;
  --paper: #ffffff !important;
  --white: #ffffff !important;
  --th-bg: #ffffff !important;
  --secondary-bg: #f2f2f2 !important;
  --ok-bg: #ffffff !important;
  --warn-bg: #ffffff !important;
  --sem-hot-bg: #ffffff !important;
  --sem-hot-fg: #000000 !important;
  --sem-hot-bar: #000000 !important;
  --sem-chip-open-bg: #111111 !important;
  --sem-chip-open-fg: #ffffff !important;
  --sem-chip-done-bg: #ffffff !important;
  --sem-chip-done-fg: #000000 !important;
  --sem-chip-urgent-bg: #111111 !important;
  --sem-chip-urgent-fg: #ffffff !important;
  --sem-chip-info-bg: #ffffff !important;
  --sem-chip-info-fg: #000000 !important;
  --sem-chip-neutral-bg: #ffffff !important;
  --sem-chip-neutral-fg: #000000 !important;
  --doc-job: #0a0a0a !important;
  --doc-job-fg: #000000 !important;
  --doc-job-bg: #ffffff !important;
  --doc-job-soft: #f2f2f2 !important;
  --doc-quote: #5c3d00 !important;
  --doc-quote-fg: #000000 !important;
  --doc-quote-bg: #ffffff !important;
  --doc-quote-soft: #f2f2f2 !important;
  --doc-invoice: #0b3d91 !important;
  --doc-invoice-fg: #000000 !important;
  --doc-invoice-bg: #ffffff !important;
  --doc-invoice-soft: #f2f2f2 !important;
  --settings-company: #0a0a0a !important;
  --settings-look: #5c2208 !important;
  --settings-documents: #0b3d91 !important;
  --settings-work: #5c3d00 !important;
  --settings-defaults: #2a3a44 !important;
  --settings-integrations: #0d5c63 !important;
  --settings-users: #3a2a1a !important;
  --settings-user: #1a1a1a !important;
}
html[data-ui-theme="deuteranopia-friendly"] {
  --sem-hot-bg: #fff3cc !important;
  --sem-hot-fg: #0b3d91 !important;
  --sem-hot-bar: #0b3d91 !important;
  --sem-ok-bg: #d6e4f7 !important;
  --sem-chip-open-bg: #ffe08a !important;
  --sem-chip-open-fg: #5c3d00 !important;
  --sem-chip-done-bg: #d6e4f7 !important;
  --sem-chip-done-fg: #0b3d91 !important;
  --sem-chip-urgent-bg: #ffd27a !important;
  --sem-chip-urgent-fg: #5c3d00 !important;
  --sem-chip-info-bg: #d6e4f7 !important;
  --sem-chip-info-fg: #0b3d91 !important;
  /* Teal / amber / blue — separable when greens collide */
  --doc-job: #0d5c63 !important;
  --doc-job-fg: #063a3f !important;
  --doc-job-bg: #cfe8e6 !important;
  --doc-job-soft: #e0f0ef !important;
  --settings-company: #0d5c63 !important;
  --settings-look: #5c3d00 !important;
  --settings-documents: #0b3d91 !important;
  --settings-work: #a67c12 !important;
  --settings-defaults: #3d5460 !important;
  --settings-integrations: #5c3d00 !important;
  --settings-users: #4a3728 !important;
  --settings-user: #163a5f !important;
}

/* Equipment Tested capture (Certificate of Testing) — phone-first inspector flow */
.equip-capture {
  gap: 0.85rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
.equip-capture > *,
.equip-form,
.equip-scan,
.equip-extra-photos,
.equip-list,
.equip-list-head {
  min-width: 0;
  max-width: 100%;
}
.equip-back-wrap { margin: 0; }
.equip-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.15rem 0;
  font-size: 1rem;
  text-decoration: none;
}
.equip-list { display: flex; flex-direction: column; gap: 0.55rem; }
.equip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  min-height: 2.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line, #d5d9e0);
  border-radius: 0.55rem;
  text-decoration: none;
  color: inherit;
  background: var(--white, #fff);
}
.equip-row-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; }
.equip-row-main strong { overflow-wrap: anywhere; }
.equip-row-meta { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.equip-barcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.equip-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.equip-chip-pass {
  background: var(--sem-ok-bg, #e7f6ec);
  color: var(--sem-chip-done-fg, #0b5c2e);
  border-color: color-mix(in srgb, var(--sem-chip-done-fg, #0b5c2e) 25%, transparent);
}
.equip-chip-fail {
  background: var(--sem-hot-bg, #fde8e8);
  color: var(--sem-hot-fg, #8a1f1f);
  border-color: color-mix(in srgb, var(--sem-hot-fg, #8a1f1f) 25%, transparent);
}
.equip-sticky-add { position: sticky; bottom: 0.5rem; background: transparent; }
.equip-passfail {
  border: 1px solid var(--line, #d5d9e0);
  border-radius: 0.55rem;
  padding: 0.65rem 0.75rem;
  margin: 0;
  min-width: 0;
}
.equip-passfail legend { padding: 0 0.25rem; font-weight: 700; }
.equip-passfail-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.equip-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line, #d5d9e0);
  cursor: pointer;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.equip-seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.equip-seg:has(input:checked) {
  border-color: var(--accent, #1f6b3a);
  background: color-mix(in srgb, var(--accent, #1f6b3a) 10%, white);
  font-weight: 700;
}
.equip-seg:has(input[value="fail"]:checked) {
  border-color: var(--sem-hot-fg, #8a1f1f);
  background: color-mix(in srgb, var(--sem-hot-bg, #fde8e8) 70%, white);
}
.equip-seg:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent, #1f6b3a) 55%, transparent);
  outline-offset: 2px;
}
.equip-camera { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.equip-cam-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.equip-cam-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.equip-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 14rem;
  object-fit: contain;
  border-radius: 0.45rem;
  border: 1px solid var(--line, #d5d9e0);
  background: #111;
}
.equip-preview[hidden] { display: none !important; }
.equip-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.65rem;
}
.equip-photos li { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.equip-photos img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--line, #d5d9e0);
}
.equip-photos .inline-del { margin: 0; }
.equip-inline-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.equip-inline-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  min-height: 2.5rem;
}
.equip-extra { margin-top: 0.5rem; }
.equip-extra summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }
.equip-capture .field,
.equip-inline .field {
  min-width: 0;
  max-width: 100%;
}
.equip-capture .field input,
.equip-capture .field textarea,
.equip-inline .field input,
.equip-inline .field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  min-height: 2.75rem;
}
.equip-pdf-table { margin: 0.75rem 0 1rem; }

@media (max-width: 48rem) {
  .equip-capture.panel {
    padding: 0.85rem 0.8rem;
    border-radius: 0.65rem;
  }
  .equip-capture h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0;
  }
  .equip-capture h3 {
    font-size: 1.08rem;
    margin: 0;
  }
  .equip-list-head .muted,
  .equip-scan > .muted,
  .equip-capture [data-equip-scan-status] {
    font-size: 0.95rem;
    line-height: 1.35;
  }
  .equip-capture .field-name {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--ink);
  }
  .equip-capture .field input,
  .equip-capture .field textarea {
    min-height: 3.1rem;
    padding: 0.65rem 0.75rem;
  }
  .equip-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem 0.85rem;
    gap: 0.5rem;
    min-height: 3.25rem;
  }
  .equip-row-main { flex: 1 1 auto; }
  .equip-row-main strong { font-size: 1.05rem; }
  .equip-row-meta { justify-content: space-between; width: 100%; }
  .equip-chip { min-height: 2rem; padding: 0.25rem 0.65rem; font-size: 0.9rem; }
  .equip-passfail { padding: 0.75rem; }
  .equip-seg {
    min-height: 3.25rem;
    font-size: 1.08rem;
    padding: 0.55rem 0.65rem;
  }
  .equip-cam-btn {
    min-height: 3.25rem;
    font-size: 1.05rem;
    padding: 0.65rem 0.9rem;
  }
  .equip-preview { max-height: 12rem; }
  .equip-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .equip-photos .btn {
    width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .equip-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
  }
  .equip-actions .btn,
  .equip-actions button,
  .equip-actions a.btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.05rem;
  }
  .equip-sticky-add,
  .equip-form-actions {
    position: sticky;
    bottom: calc(var(--phone-nav-h, 3.6rem) + 0.35rem);
    z-index: 5;
    padding: 0.45rem 0 0.2rem;
    margin-bottom: 0;
    background: linear-gradient(to top, var(--bg, #f4f6f8) 72%, transparent);
  }
  .equip-delete { margin-top: 0.35rem; }
  .equip-delete button {
    width: 100%;
    min-height: 3.1rem;
  }
  .equip-inline .actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .equip-inline .actions .btn {
    width: 100%;
    min-height: 3.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media print {
  /*
   * Quote + Invoice customer Preview / Save PDF / guest /inv|/q print —
   * true A4 pages, not the app viewport / cream paper wash.
   */
  @page {
    size: A4;
    margin: 12mm;
  }
  /* Match on-screen Preview colours (Chrome/Safari otherwise strip backgrounds). */
  html, body, .tax-invoice, .ti-accent, .ti-summary, .ti-lines th,
  .ti-doc-totals tr.ti-grand td, .ti-ico {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /*
   * Kill app/guest cream (--paper #f7f6f2) bleed past the footer stripe.
   * Print surface is white A4 only — no webpage fill under or after the doc.
   */
  html, body, .app, .guest-app, .main, .stack, .panel {
    background: #fff !important;
    background-color: #fff !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
  }
  .tenant-aside,
  .phone-top,
  .phone-nav,
  .phone-more-layer,
  .phone-more-check,
  .topbar,
  .app-trail,
  .app-crumbs,
  .main > header,
  .doc-window-head,
  .doc-tabs,
  .actions.no-print,
  .no-print { display: none !important; }
  .app, .guest-app {
    display: block !important;
    width: 100% !important;
  }
  .main {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  /*
   * overflow:hidden on .tax-invoice clips everything past page 1 in print
   * (totals / terms never appear). Allow normal pagination like Preview length.
   * Full-bleed white document card — no rounded “webpage” chrome on A4.
   */
  .tax-invoice {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    background-color: #fff !important;
  }
  .ti-accent {
    background: linear-gradient(90deg, var(--ti-accent) 58%, #b7bbb6 58%) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .ti-summary {
    background: var(--ti-summary) !important;
  }
  .ti-lines th {
    background: var(--ti-header) !important;
  }
  .ti-doc-totals tr.ti-grand td {
    background: var(--ti-accent-dark) !important;
    color: #fff !important;
  }
  .ti-doc-totals tr.ti-grand .ti-tot-label,
  .ti-doc-totals tr.ti-grand .ti-aud,
  .ti-doc-totals tr.ti-grand .ti-aud-sym {
    color: #fff !important;
  }
  .ti-doc-totals tr.ti-owing td {
    background: color-mix(in srgb, var(--ti-accent, #087a4b) 14%, #fff) !important;
    color: #1f2933 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ti-doc-totals tr.ti-owing .ti-tot-label {
    color: var(--ti-accent-dark, #065f3a) !important;
  }
  /* Keep Preview branded header layout even if the print engine reports a narrow width. */
  .ti-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    grid-template-columns: unset !important;
  }
  .ti-summary {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1.1fr !important;
  }
  /* Totals + payment/terms travel together onto page 2 when needed. */
  .ti-doc-totals,
  .ti-pay,
  .ti-terms,
  .ti-customer-note,
  .ti-foot {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .ti-lines thead { display: table-header-group; }
  .ti-lines tr { break-inside: avoid; page-break-inside: avoid; }
  body:has(.dunblane-overall) .main { padding: 0 !important; }
  .dunblane-overall { page: dor-landscape; font-size: 8.5pt; }
  .dor-matrix { font-size: 7.5pt; }
  .dor-matrix th, .dor-matrix td { padding: 0.12rem 0.2rem; }
}
/* Chrome-free Save PDF / print view — document only on screen too (white A4 sheet). */
body[data-print-doc="1"],
body[data-print-doc="1"] .app,
body[data-print-doc="1"] .main {
  background: #fff !important;
  background-color: #fff !important;
  min-height: 0 !important;
}
body[data-print-doc="1"] .tenant-aside,
body[data-print-doc="1"] .phone-top,
body[data-print-doc="1"] .phone-nav,
body[data-print-doc="1"] .phone-more-layer,
body[data-print-doc="1"] .topbar {
  display: none !important;
}
body[data-print-doc="1"] .main {
  margin-left: 0 !important;
  padding: 0.75rem 1rem 1.5rem !important;
  max-width: 210mm;
}
body[data-print-doc="1"] .tax-invoice {
  border-radius: 0;
  max-width: none;
  box-shadow: none;
}
@page dor-landscape {
  size: A4 landscape;
  margin: 8mm;
}

/* Dunblane Overall Report (sfsurvey site.pdf landscape matrix) */
.dunblane-overall {
  --dor-ink: #142017;
  --dor-line: #cfd5d0;
  --dor-head: #e8eee9;
  max-width: 100%;
  color: var(--dor-ink);
  font-size: 0.82rem;
}
.dunblane-overall h1 { font-size: 1.35rem; margin: 0.75rem 0 0.2rem; }
.dunblane-overall h2 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.dor-cover { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.dor-brand { display: flex; gap: 0.85rem; align-items: flex-start; }
.dor-brand img { max-height: 3.6rem; max-width: 11rem; object-fit: contain; }
.dor-co p, .dor-job p { margin: 0.12rem 0; }
.dor-job span { display: inline-block; min-width: 5.5rem; color: #555; font-size: 0.78rem; }
.dor-sub { margin: 0; color: #555; }
.dor-section { margin: 0 0 0.55rem; font-weight: 650; }
.dor-table-wrap { overflow-x: auto; }
.dor-matrix { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.dor-matrix th, .dor-matrix td {
  border: 1px solid var(--dor-line);
  padding: 0.22rem 0.3rem;
  text-align: left;
  white-space: nowrap;
}
.dor-matrix th { background: var(--dor-head); font-weight: 700; }
.dor-matrix .dor-fail { font-weight: 700; }
.dor-matrix .dor-pass { color: #1b3d1c; }
.dor-matrix .dor-skip { color: #666; }
.dor-key ol, .dor-comments ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }
.dor-key li, .dor-comments li { margin: 0.2rem 0; }
.dor-note { margin-top: 1rem; font-size: 0.78rem; }


/* ACE invoice / quote document builder */
.main:has(.doc-window),
.main:has(.doc-builder) {
  background: #f7f8f8;
  padding: 24px 24px 2.5rem;
}
.doc-window {
  --db-green: #087a4b;
  --db-green-hover: #06653e;
  --db-pale: #edf7f2;
  --db-ink: #18212b;
  --db-muted: #667085;
  --db-faint: #98a2b3;
  --db-line: #d9dee5;
  --db-soft: #eaecf0;
  max-width: min(72rem, 100%);
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
  color: var(--db-ink);
}
/* Window chrome: doc number + lifecycle status + primary actions (outside builder card). */
.doc-window-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  padding: 0 0.15rem;
}
.doc-window-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-width: 0;
}
.doc-window-title-row:has(.db-status[open]) {
  position: relative;
  z-index: 40;
}
.doc-window-title-row .db-status[open] > .db-status-body {
  z-index: 41;
}
.job-card-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
@media (max-width: 48rem) {
  .job-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .job-card-head-center {
    order: 3;
    flex: 1 1 100%;
    justify-content: stretch;
  }
  .job-card-head-center .onsite-in-header .onsite-cta {
    width: 100%;
  }
  .job-card-title-trailing {
    margin-left: auto;
  }
}
.doc-list-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}
.doc-list-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--line, #d5d9dc);
  border-radius: 6px;
  background: var(--white, #fff);
  color: var(--ink, #1a1f24);
  text-decoration: none;
  white-space: nowrap;
}
a.doc-list-nav-btn:link,
a.doc-list-nav-btn:visited {
  color: var(--ink, #1a1f24);
  text-decoration: none;
}
a.doc-list-nav-btn:hover,
a.doc-list-nav-btn:focus-visible {
  background: var(--secondary-bg, #f1f3f4);
  border-color: color-mix(in srgb, var(--ink, #1a1f24) 22%, #ffffff);
  color: var(--ink, #1a1f24);
  text-decoration: none;
}
.doc-list-nav-btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--muted, #6b7280);
  background: var(--secondary-bg, #f1f3f4);
}
.doc-window-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--db-ink);
}
.doc-builder-shell {
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  background: #fff;
  color: var(--db-ink);
  padding: 1.25rem 1.35rem 1.15rem;
  border: 1px solid var(--db-soft);
  border-radius: 8px;
}
.doc-builder,
.db-section,
.doc-builder .db-desc-cell,
.db-search-slot {
  overflow: visible;
}
.db-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-builder {
  /* Card chrome lives on .doc-builder-shell so footer actions share the same padded surface. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--db-ink);
  max-width: none;
  min-width: 0;
}
/* +/- Extras trigger matches staff Margins & Allowances pale-green box. */
.db-extras-trigger {
  background: var(--db-pale, #edf7f2) !important;
  border: 1px solid color-mix(in srgb, var(--db-green, #087a4b) 22%, #ffffff) !important;
  border-radius: 6px !important;
  color: var(--db-ink) !important;
}
.db-extras-trigger:hover {
  background: color-mix(in srgb, var(--db-pale, #edf7f2) 72%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--db-green, #087a4b) 35%, #ffffff) !important;
}
.db-extras-standard-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem !important;
  margin: 0 0 0.25rem;
  border-radius: 6px;
  background: var(--db-pale, #edf7f2);
  border: 1px solid color-mix(in srgb, var(--db-green, #087a4b) 18%, #ffffff);
}
.db-extras-standard-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--db-ink);
}
.db-extras-named-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.2rem 0.15rem !important;
}
.db-extras-named-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--db-ink);
}
.db-extras-named-row .db-icon-btn {
  flex: 0 0 auto;
}
.db-extras-pct-inline {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.db-extras-pct-inline .pct-field {
  border-color: var(--db-line);
  border-radius: 5px;
  height: 28px;
}
.db-extras-pct-inline .pct-field input.num {
  width: 2.8rem;
  height: 100%;
  padding: 0 0.15rem 0 0.35rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--db-ink);
}
.db-extras-pct-inline .pct-suffix {
  font-size: 0.75rem;
  color: var(--db-muted);
}
/* Staff-only Margins & Allowances $ — right column with Totals; never on customer preview/PDF. */
.db-finish-right {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}
.db-extras-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: var(--db-pale, #edf7f2);
  border: 1px solid color-mix(in srgb, var(--db-green, #087a4b) 22%, #ffffff);
  font-size: 0.82rem;
  color: var(--db-muted);
  box-sizing: border-box;
  width: 100%;
}
.db-extras-foot[hidden] { display: none !important; }
.db-extras-foot-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-weight: 600;
  color: var(--db-ink);
  text-align: left;
  min-width: 0;
}
.db-extras-foot-pct {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--db-muted);
}
.db-extras-foot strong {
  font-variant-numeric: tabular-nums;
  color: var(--db-ink);
  font-weight: 600;
  text-align: right;
  margin-left: auto;
  flex: 0 0 auto;
}
.db-tot-discount { width: 100%; justify-content: space-between; }
.db-tot-discount input.num { width: 4.5rem; }
/* Type chrome on window (shell inherits --db-*; leave ⋮ / finish layout alone) */
.doc-window:has([data-doc-builder="quote"]),
.doc-window[data-doc-kind="quote"] {
  --db-green: var(--doc-quote);
  --db-green-hover: color-mix(in srgb, var(--doc-quote) 82%, #000);
  --db-pale: var(--doc-quote-soft);
}
.doc-window:has([data-doc-builder="invoice"]),
.doc-window[data-doc-kind="invoice"] {
  --db-green: var(--doc-invoice);
  --db-green-hover: color-mix(in srgb, var(--doc-invoice) 82%, #000);
  --db-pale: var(--doc-invoice-soft);
}
.doc-window:has([data-doc-builder="quote"]) .doc-builder-shell,
.doc-window[data-doc-kind="quote"] .doc-builder-shell {
  border-top: 3px solid var(--doc-quote);
}
.doc-window:has([data-doc-builder="invoice"]) .doc-builder-shell,
.doc-window[data-doc-kind="invoice"] .doc-builder-shell {
  border-top: 3px solid var(--doc-invoice);
}
.doc-window .doc-tabs {
  margin: 0 0 0.85rem;
  padding: 0 0.15rem;
}
.doc-window .db-btn.ghost.is-active {
  background: var(--db-pale);
  color: var(--db-green);
}
.doc-tab-panel { min-width: 0; }
.doc-tab-panel .tax-invoice { margin-top: 0.25rem; }
.hist-ico-pdf { background-color: #e4eef8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316355f'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3C/svg%3E"); }
.hist-ico-xero { background-color: #d4ead2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231b3d1c'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%231b3d1c' stroke-width='2'/%3E%3Cpath d='M8 12h8M12 8v8' stroke='%231b3d1c' stroke-width='2'/%3E%3C/svg%3E"); }
.hist-ico-status { background-color: #e8ece6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a685c'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3' stroke='%235a685c' stroke-width='2'/%3E%3C/svg%3E"); }
.db-head-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.db-approval-form { display: inline-flex; margin: 0; }
.db-approval {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.85rem; padding: 0.2rem 0.7rem; border-radius: 8px;
  border: 1px solid transparent; font: inherit; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em; line-height: 1.2; cursor: pointer;
}
.db-approval.is-static { cursor: default; }
.db-approval.is-draft {
  background: var(--ok-draft-bg); color: var(--ok-draft-fg); border-color: var(--ok-draft-border);
}
.db-approval.is-approved {
  /* Bright/pale green — not theme job green */
  background: var(--ok-bright-bg); color: var(--ok-bright-fg); border-color: var(--ok-bright-border);
}
.db-approval.is-other {
  background: #eef1f4; color: #3b4654; border-color: #cfd6de;
}
button.db-approval.is-draft:hover,
button.db-approval.is-draft:focus-visible { background: #ffe4c4; }
button.db-approval.is-approved:hover,
button.db-approval.is-approved:focus-visible { background: #d4f3e2; }
/* Quote header status menu (summary reuses .db-approval tones). */
.db-status { position: relative; display: inline-flex; margin: 0; }
.db-status > summary {
  list-style: none; cursor: pointer;
}
.db-status > summary::-webkit-details-marker { display: none; }
.db-status > summary.db-approval::after {
  content: "";
  display: inline-block;
  width: 0.45rem; height: 0.45rem; margin-left: 0.35rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem); opacity: 0.75;
}
.db-status-body { min-width: 9.5rem; }
.db-status-body .db-split-menu-item.is-current {
  font-weight: 700; color: var(--ink, #1a1f24); background: #f0f3f6; cursor: default;
}
.db-status-body .db-split-menu-item.is-approve-action {
  margin-top: 0.25rem;
  border-top: 1px solid var(--line, #d5dbe0);
  border-radius: 0;
  font-weight: 700;
}
summary.db-approval.is-draft:hover,
summary.db-approval.is-draft:focus-visible { background: #ffe4c4; }
summary.db-approval.is-approved:hover,
summary.db-approval.is-approved:focus-visible { background: #d4f3e2; }
summary.db-approval.is-other:hover,
summary.db-approval.is-other:focus-visible { background: #e4e9ef; }
.quote-respond-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.quote-respond-accept { background: var(--ok-bright-fg); border-color: var(--ok-bright-fg); color: var(--white); }
.quote-respond-accept:hover { background: #0c7a41; }
.quote-respond-options { width: 100%; margin: 0.5rem 0 0.25rem; }
.quote-respond-group {
  border: 1px solid var(--line, #d5dbe0);
  border-radius: 8px;
  padding: 0.55rem 0.75rem 0.65rem;
  margin: 0.55rem 0;
}
.quote-respond-group legend {
  font-weight: 700;
  padding: 0 0.25rem;
}
.quote-respond-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem 0.65rem;
  align-items: start;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line, #e8ecf0);
}
.quote-respond-opt:first-of-type { border-top: 0; }
.quote-respond-opt input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; }
.quote-respond-opt-desc { min-width: 0; word-break: break-word; }
.quote-respond-opt-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.db-options { position: relative; }
.db-options > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.db-options > summary::-webkit-details-marker { display: none; }
.db-options > summary .db-ico { width: 0.7rem; height: 0.7rem; opacity: 0.9; }
.db-options-body {
  right: 0; left: auto; min-width: 14rem; padding: 0.35rem 0;
}
.db-options-body .db-split-menu-item { width: 100%; }
.db-options-ack {
  display: block; padding: 0.45rem 0.85rem; font-size: 0.82rem; line-height: 1.35; color: var(--muted, #5b6470);
}
.db-options-ack input { margin-right: 0.4rem; vertical-align: middle; }
.db-options-delete {
  display: block; width: calc(100% - 0.7rem); margin: 0.35rem 0.35rem 0.2rem;
  padding: 0.7rem 0.85rem; border: 0; border-radius: 8px;
  background: #c62828; color: #fff; font: inherit; font-weight: 700; font-size: 1rem;
  text-align: center; cursor: pointer;
}
.db-options-delete:hover,
.db-options-delete:focus-visible { background: #a01f1f; }
.db-tot-row.is-deposit {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, var(--db-green, #087a4b) 35%, #d7dde5);
  font-size: 1.02rem;
}
.db-tot-row.is-deposit strong { color: var(--db-green, #087a4b); }
.db-tot-row.is-owing {
  font-size: 1.05rem;
  font-weight: 600;
}
.db-tot-row.is-owing strong { color: var(--db-ink); font-weight: 700; }
.db-solar-note {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--db-green, #087a4b) 10%, #fff);
  color: #1f2933;
  font-size: 0.9rem;
  line-height: 1.35;
}
.db-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 36px; padding: 0 0.85rem; border-radius: 6px;
  border: 1px solid var(--db-line); background: #fff; color: var(--db-ink);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.db-btn.compact { height: 32px; padding: 0 0.7rem; font-weight: 600; }
.db-btn.ghost { background: #fff; }
.db-btn.outline { color: var(--db-green); border-color: var(--db-green); background: #fff; }
.db-btn.primary { background: var(--db-green); border-color: var(--db-green); color: #fff; }
.db-btn.primary:hover { background: var(--db-green-hover); }
.db-split { display: inline-flex; position: relative; }
.db-split.has-menu .primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.db-split .chev { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid color-mix(in srgb, #fff 35%, var(--db-green)); padding: 0 0.45rem; }
.db-split-menu { position: relative; }
.db-split-menu > summary { list-style: none; cursor: pointer; }
.db-split-menu > summary::-webkit-details-marker { display: none; }
.db-split-menu-body {
  position: absolute; z-index: 40; top: calc(100% + 4px); right: 0;
  min-width: 14.5rem; padding: 0.3rem;
  background: #fff; border: 1px solid var(--db-line); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  display: grid; gap: 0.1rem;
}
.db-split-menu-item {
  display: block; width: 100%; box-sizing: border-box;
  border: 0; background: transparent; text-align: left;
  padding: 0.45rem 0.55rem; border-radius: 6px;
  font: inherit; font-size: 0.86rem; color: var(--db-ink);
  text-decoration: none; cursor: pointer;
}
.db-split-menu-item:hover,
.db-split-menu-item:focus-visible {
  background: color-mix(in srgb, var(--db-green) 10%, #fff);
  outline: none;
}
button.db-split-menu-item { color: var(--db-green); font-weight: 600; }
.db-details {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}
.db-details .db-wide { grid-column: span 1; }
.db-field { display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.75rem; font-weight: 500; color: var(--db-muted); }
.db-field input, .db-field select, .db-field textarea {
  height: 36px; border: 1px solid var(--db-line); border-radius: 6px; padding: 0 0.6rem;
  font: inherit; color: var(--db-ink); background: #fff;
}
.db-field textarea { height: auto; min-height: 40px; padding: 0.45rem 0.6rem; resize: vertical; }
.db-field input:focus, .db-field select:focus, .db-field textarea:focus {
  outline: none; border-color: var(--db-green);
}
.db-hint { font-size: 0.72rem; color: var(--db-faint); font-weight: 400; min-height: 1rem; }
.customer-picker-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.65rem;
}
.customer-picker-search-field { flex: 1 1 14rem; min-width: 0; margin: 0; }
.customer-picker-search-row .customer-picker-new {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-end;
  margin-bottom: 0.05rem;
  white-space: nowrap;
}
.db-customer-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.db-customer-search-row input[data-db-customer-q] { flex: 1 1 10rem; min-width: 0; }
.db-customer-search-row .db-btn { flex: 0 0 auto; white-space: nowrap; }
.db-customer-picker,
.db-job-picker { position: relative; display: flex; flex-direction: column; gap: 0.28rem; }
.db-customer-chosen,
.db-job-chosen {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 36px;
  flex-wrap: wrap;
}
.db-customer-chosen[hidden],
.db-customer-search[hidden],
.db-job-chosen[hidden],
.db-job-search[hidden] { display: none !important; }
a.db-customer-name-link,
a.db-job-name-link {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: var(--db-green, var(--link, #1f6b4a));
}
a.db-customer-name-link:hover,
a.db-customer-name-link:focus-visible,
a.db-job-name-link:hover,
a.db-job-name-link:focus-visible {
  color: var(--db-ink, var(--ink));
}
.db-customer-search,
.db-job-search { position: relative; }
.db-customer-picker input[data-db-customer-q],
.db-job-picker input[data-db-job-q] {
  height: 36px; border: 1px solid var(--db-line); border-radius: 6px; padding: 0 0.6rem;
  font: inherit; color: var(--db-ink); background: #fff; width: 100%;
}
.db-customer-picker input[data-db-customer-q]:focus,
.db-job-picker input[data-db-job-q]:focus {
  outline: none; border-color: var(--db-green);
}
.db-customer-list,
.db-job-list {
  position: absolute;
  z-index: 40000;
  left: 0;
  right: 0;
  top: calc(36px + 0.15rem);
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  background: var(--white, #fff);
  border: 1px solid var(--db-line, var(--line));
  border-radius: 6px;
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 0 8px 24px rgba(20, 32, 23, 0.12);
}
.db-customer-list .muted,
.db-job-list .muted { padding: 0.45rem 0.7rem; }
.db-customer-list button.db-customer-hit,
.db-job-list button.db-job-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.7rem;
  font: inherit;
  color: var(--db-ink, var(--ink));
  cursor: pointer;
}
.db-customer-list button.db-customer-hit:hover,
.db-customer-list button.db-customer-hit.is-selected,
.db-job-list button.db-job-hit:hover,
.db-job-list button.db-job-hit.is-selected { background: var(--card-hover, #f3f4f6); }
.db-customer-hit-name,
.db-job-hit-name { font-weight: 600; color: var(--db-ink, var(--ink)); }
.db-customer-hit-sub,
.db-job-hit-sub { font-size: 0.72rem; color: var(--db-faint, var(--muted)); font-weight: 400; }
.db-field-label { display: block; }
/* Desktop: one physical line — Contact Details : phone · email · address.
   Bold label only; middot (·) separators on wide. Full-bleed under Customer +
   Site (grid-column 1 / -1) so the line spills across the meta grid — never
   overflow-x: auto scrollbar, never ellipsis. Solid ink. Stack/wrap only on
   phone viewports (below); seps hidden when stacked. */
.db-customer-details {
  grid-column: 1 / -1;
  display: block;
  min-height: 1rem;
  margin: 0;
  max-width: none;
  min-width: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
  /* Match form-field / body ink — solid on cream builder paper. */
  color: var(--db-ink, var(--ink, #18212b));
  /* Outside <label> so taps do not steal focus to the search field. */
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.db-customer-details-label {
  display: inline;
  font-weight: 700;
  color: var(--db-ink, var(--ink, #18212b));
  white-space: nowrap;
}
.db-customer-details-values {
  display: inline;
  font-weight: 400;
  white-space: nowrap;
}
.db-customer-detail {
  display: inline;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.35;
  color: var(--db-ink, var(--ink, #18212b));
}
.db-customer-detail.is-empty { font-style: italic; display: inline; }
.db-customer-sep {
  display: inline;
  font-weight: 400;
  white-space: pre;
  color: var(--db-ink, var(--ink, #18212b));
  user-select: none;
}
/* Live contact links — solid ink (same as field text), not muted grey / browser blue. */
a.db-customer-link {
  color: var(--db-ink, var(--ink, #18212b));
  text-decoration: none;
  display: inline;
  padding: 0;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--db-green, #087a4b) 16%, transparent);
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
a.db-customer-link:visited {
  color: var(--db-ink, var(--ink, #18212b));
}
a.db-customer-link:hover {
  color: var(--db-ink, var(--ink, #18212b));
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--db-ink, #18212b) 45%, transparent);
}
a.db-customer-link:focus-visible {
  outline: 2px solid var(--db-green, #1b7a4e);
  outline-offset: 2px;
  color: var(--db-ink, var(--ink, #18212b));
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-color: color-mix(in srgb, var(--db-green, #1b7a4e) 55%, transparent);
}
/* Phone: allow wrap; very narrow stacks for tap targets. */
@media (max-width: 48rem) {
  .db-customer-details {
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
  }
  .db-customer-details-values,
  .db-customer-detail,
  a.db-customer-link {
    white-space: normal;
  }
}
@media (max-width: 22rem) {
  .db-customer-details {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 0.1rem;
    white-space: normal;
  }
  .db-customer-details-values {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 0;
  }
  .db-customer-sep { display: none; }
  a.db-customer-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 2.5rem;
    padding: 0.35rem 0.1rem;
    white-space: normal;
  }
}
.db-desc { display: flex; flex-direction: column; gap: 0.28rem; margin-bottom: 1rem; font-size: 0.75rem; font-weight: 500; color: var(--db-muted); }
.db-desc textarea { width: 100%; min-height: 40px; border: 1px solid var(--db-line); border-radius: 6px; padding: 0.45rem 0.6rem; font: inherit; color: var(--db-ink); }
.db-toolbar { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.85rem; }
.db-toolbar-left, .db-toolbar-right { display: flex; gap: 0.55rem; align-items: center; flex-wrap: wrap; }
.db-view-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.db-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--db-ink); }
.db-toggle input { width: 36px; height: 20px; accent-color: var(--db-green); }
.db-costing-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 2rem;
  padding: 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 500;
}
.db-costing-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--db-green);
}
.db-costing-label { line-height: 1; }
.db-sections-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  white-space: nowrap;
  min-height: 2rem;
  padding: 0 0.35rem 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.db-sections-toggle-text { line-height: 1; }
.db-sections-toggle .db-chev {
  display: inline-flex;
  align-items: center;
  color: var(--db-muted);
  transition: transform 0.15s ease;
}
.db-sections-toggle .db-chev .db-ico {
  width: 1.15rem;
  height: 1.15rem;
}
/* Collapsed → chevron flips up (ready to expand); expanded → down like section headers. */
.db-sections-toggle[aria-expanded="false"] .db-chev {
  transform: rotate(180deg);
}
.db-pop { position: relative; }
.db-pop > summary { list-style: none; }
.db-pop > summary::-webkit-details-marker { display: none; }
.db-pop-body {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-width: min(320px, calc(100vw - 1rem)); padding: 0.65rem 0.7rem;
  background: #fff; border: 1px solid var(--db-line); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  box-sizing: border-box;
}
/* Row ⋮ and margin pops sit on the right — open leftward so they stay on-screen. */
.db-row-menu .db-pop-body,
.db-margin-pop .db-pop-body {
  left: auto;
  right: 0;
}
.db-act { position: relative; overflow: visible; }
.db-row-menu { position: relative; }
.db-pop-title { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 700; }
.db-pop-hint { margin: 0 0 0.45rem; font-size: 0.72rem; line-height: 1.3; }
.db-view-menu { min-width: min(16.5rem, calc(100vw - 1.5rem)); }
.db-view-menu-split {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--db-soft, var(--line, #d9dee5));
}
.db-check { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; padding: 0.2rem 0; }
.db-check input { width: 16px; height: 16px; accent-color: var(--db-green); }
.db-allow-list { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.db-allow-list li { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.82rem; padding: 0.2rem 0; }
.db-allow-add { display: flex; gap: 0.3rem; align-items: center; position: relative; z-index: 1; }
.db-allow-add > input {
  height: 32px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  padding: 0 0.4rem;
  width: 7.5rem;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.db-allow-add .pct-field {
  height: 32px;
  width: 4.6rem;
  flex: 0 0 auto;
  border-color: var(--db-line);
  position: relative;
  z-index: 1;
}
.db-allow-add .pct-field input {
  height: 100%;
  width: auto;
  min-width: 0;
  border: 0;
  padding: 0 0.1rem 0 0.35rem;
}
.db-allow-add > .db-btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.db-section {
  border: 1px solid var(--db-soft); border-left: 3px solid var(--db-green); background: #fff; margin: 0 0 0.75rem;
}
.db-section-panel { margin: 0; border: 0; background: transparent; }
.db-section-head {
  list-style: none; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.65rem; background: #f5f7f8; cursor: pointer;
}
.db-section-head::-webkit-details-marker { display: none; }
/* Section move grip: match trash/chev row height + icon scale (was default 16px, sat high). */
.db-section-head > .db-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--db-muted);
  cursor: grab;
}
.db-section-head > .db-grip .db-ico {
  width: 1.5rem;
  height: 1.5rem;
}
.db-section-title { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; font-weight: 600; }
/* When collapsed with a description, share the header row: title + truncated desc. */
.db-section-panel:not([open]):has(.db-section-head-desc:not(:empty)) .db-section-title {
  flex: 0 1 auto;
  max-width: 42%;
}
.db-section-panel:not([open]):has(.db-section-head-desc:not(:empty)) .db-inline-title {
  width: auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-section-head-desc {
  display: none;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--db-muted);
  line-height: 1.25;
}
/* Keep header one line while preserving bold/italic/underline/list markers from sanitized HTML. */
.db-section-head-desc :is(p, ul, ol, li, div) {
  display: inline;
  margin: 0;
  padding: 0;
}
.db-section-head-desc ul,
.db-section-head-desc ol {
  list-style: none;
}
.db-section-head-desc li::before {
  content: "· ";
}
.db-section-head-desc br {
  display: none;
}
.db-section-head-desc :is(strong, b) {
  font-weight: 700;
  color: var(--db-ink, inherit);
}
.db-section-head-desc :is(em, i) {
  font-style: italic;
}
.db-section-head-desc u {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.db-section-panel:not([open]) .db-section-head-desc:not(:empty) {
  display: block;
}
.db-inline-title { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--db-ink); width: 100%; min-width: 8rem; }
.db-n { color: var(--db-muted); font-weight: 600; }
/* Collapsed: hide add-line row only; keep bottom-right Section Total outside <details>. */
.db-section:not(:has(> .db-section-panel[open])) .db-add-line { display: none; }
.db-section:not(:has(> .db-section-panel[open])) .db-section-foot {
  justify-content: flex-end;
  padding-top: 0.35rem;
  border-top: 0;
}
.db-section-tools {
  display: flex;
  align-items: center;
  gap: 1.15rem; /* clear gap between trash and chevron so delete is harder to hit by accident */
  flex-shrink: 0;
  margin-left: 0.25rem;
}
.db-section-del {
  color: var(--db-muted);
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}
.db-section-del .db-ico,
.db-section-tools .db-chev .db-ico {
  width: 1.5rem;
  height: 1.5rem;
}
.db-section-tools .db-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--db-muted);
  border-radius: 4px;
}
.db-section-del:hover,
.db-section-del:focus-visible { color: var(--warn, #d92d20); background: var(--warn-bg, #fef3f2); }
.db-section-desc { margin: 0; padding: 0.15rem 0.85rem 0.45rem; background: #f5f7f8; }
.db-section-desc .rich-notes {
  border: 0;
  background: transparent;
  border-radius: 0;
  max-width: none;
}
.db-section-desc .rich-editor {
  min-height: 1.6rem;
  padding: 0.2rem 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--db-muted);
  font-weight: 400;
}
.db-section-desc .rich-editor:focus {
  font-style: normal;
  color: var(--db-ink, var(--ink));
  box-shadow: none;
}
.db-section-desc .rich-toolbar {
  background: transparent;
  border-bottom-color: var(--db-soft, var(--line));
  padding: 0.15rem 0;
}
.db-lines { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.db-lines th { background: #fafafa; font-weight: 600; color: var(--db-muted); font-size: 0.72rem; padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--db-soft); }
.db-lines td { padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--db-soft); vertical-align: middle; min-height: 44px; }
.db-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.db-lines input.num { width: 5.2rem; text-align: right; height: 32px; border: 1px solid var(--db-line); border-radius: 6px; padding: 0 0.35rem; }
.db-lines .pct-field {
  width: 5.2rem;
  height: 32px;
  border-color: var(--db-line);
  border-radius: 6px;
  white-space: nowrap;
}
.db-lines .pct-field input.num {
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0 0.1rem 0 0.35rem;
}
.db-lines .pct-field .pct-suffix {
  color: var(--db-muted);
}
.db-desc-cell { min-width: 14rem; }
.db-desc-cell input { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 500; }
/* Line descriptions wrap (no ellipsis / single-line clip); grow with content. */
.db-desc-cell textarea[data-desc-wrap],
.db-desc-cell textarea[data-suggest-q] {
  display: block;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 500;
  color: inherit;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  field-sizing: content;
  min-height: calc(1.35em + 2px);
  padding: 0.15rem 0;
  box-sizing: border-box;
}
/* Keep kind icon + description (+ kit badge) on one dense row; full-width suggest used to wrap the ⏱ above Labour. */
.db-desc-main {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.db-desc-main .suggest { flex: 1 1 auto; min-width: 0; }
.db-desc-main .db-kind-ico,
.db-desc-main .db-kit { margin-top: 0.2rem; }
/* Misc-only tax class (GST vs GST-free) — compact, under description. */
.db-misc-tax {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--db-muted);
}
.db-misc-tax select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--db-ink);
  border: 1px solid var(--db-line, #d0d5dd);
  border-radius: 4px;
  background: #fff;
  padding: 0.1rem 0.35rem;
  max-width: 8.5rem;
}
.db-kind-ico {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--db-muted);
}
.db-kit {
  display: inline-block; flex: 0 0 auto; margin-left: 0; padding: 0.05rem 0.35rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  background: #eef0f2; color: #5d6a78; border-radius: 4px; vertical-align: middle;
}
.db-kit-title {
  font-weight: 600; color: var(--db-ink);
  width: 100%; min-width: 0; border: 1px solid transparent; background: transparent;
  padding: 0.15rem 0.25rem; border-radius: 4px; font: inherit;
}
.db-kit-title:hover, .db-kit-title:focus {
  border-color: var(--db-line, #d0d5dd); background: #fff; outline: none;
}
.db-line.is-kit-header .db-line-total { font-weight: 600; }
.db-kit-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--db-line, #d0d5dd);
  background: #fff;
  color: var(--db-ink);
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}
.db-kit-toggle:hover { background: var(--db-soft); border-color: var(--db-muted); }
.db-kit-toggle .db-kit-pm {
  display: block;
  width: 1em;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.db-drag .db-kit-toggle { margin: 0 auto; }
.db-line.is-kit-part .db-desc-main { padding-left: 1.1rem; }
.db-sub, .db-sub-input { display: block; font-size: 0.75rem; color: var(--db-faint); font-weight: 400; }
.db-sub-input { width: 100%; border: 0; background: transparent; }
/* Empty detail collapses on ordinary lines; Labour / Misc / ACE-MISC keep a visible detail row. */
.db-sub-input:placeholder-shown:not(:focus):not(.is-detail-open) {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
}
.db-sub-input.is-detail-open:placeholder-shown:not(:focus) {
  height: auto;
  min-height: 1.1em;
  opacity: 1;
  overflow: visible;
}
.db-drag { width: 1.6rem; color: var(--db-faint); }
.db-act { width: 2rem; }
.db-icon-btn { border: 0; background: transparent; color: var(--db-muted); cursor: pointer; padding: 0.15rem; border-radius: 4px; }
.db-icon-btn:hover { background: var(--db-soft); color: var(--db-ink); }
.db-ico { display: block; }
.db-section-foot { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding: 0.55rem 0.7rem 0.7rem; }
.db-add-line { display: flex; gap: 0.3rem; flex-wrap: wrap; }
/* Secondary to typeahead — keep available, stay small especially on mobile */
.db-add-line .db-btn,
.db-btn.quiet {
  height: 24px;
  padding: 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 5px;
}
@media (max-width: 640px) {
  .db-add-line { gap: 0.25rem; }
  .db-add-line .db-btn { height: 22px; padding: 0 0.38rem; font-size: 0.66rem; }
}
.db-compose-row td { background: #fafbfc; }
.db-compose-row .suggest { width: 100%; max-width: 36rem; }
.db-compose-row .suggest input[data-suggest-q] {
  width: 100%;
  min-height: 2.25rem;
  border: 1px dashed var(--line, #d9dee5);
  background: #fff;
}
.db-compose-row.is-kit-compose .db-desc-cell { padding-left: 1.1rem; }
.db-compose-row.is-kit-compose .db-act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}
.db-compose-hint { display: block; margin-top: 0.2rem; font-size: 0.75rem; }
/* Always pin to the foot’s right edge (bulk-kind is width:100%, so the total
   wraps onto its own flex row — space-between alone would leave it left-hanging). */
.db-section-total {
  margin: 0 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--db-muted);
}
.db-section-total strong {
  color: var(--db-ink);
  font-variant-numeric: tabular-nums;
}
.db-add-section {
  display: block; width: 100%; height: 32px; margin: 0.25rem 0 0.65rem;
  border: 1px dashed #b7d8c8; background: transparent; color: var(--db-green);
  border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer;
}
.db-empty { padding: 1.25rem 0.5rem; text-align: center; }
.db-search-slot { display: flex; gap: 0.45rem; align-items: end; padding: 0 0.7rem 0.7rem; }
.db-search-slot[hidden] { display: none; }
.db-finish {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 16.5rem);
  gap: 0.75rem 1.25rem;
  align-items: start;
  padding-top: 0.55rem;
  border-top: 1px solid var(--db-soft);
}
.db-legal { display: grid; gap: 0.55rem; min-width: 0; }
.db-legal-block { min-width: 0; }
.db-legal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
  margin: 0 0 0.15rem;
}
.db-legal-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--db-muted);
}
.db-legal-body { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--db-ink); }
/* Quote/invoice Terms — same fine-print density as customer PDF (.ti-terms-fine). */
.db-legal-body.db-terms-fine {
  max-height: 14rem;
  overflow: auto;
  color: #555;
  font-size: 0.72rem;
  line-height: 1.35;
}
.db-legal-body.db-terms-fine .privacy-prose,
.db-legal-body.db-terms-fine .ti-terms-prose {
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.db-legal-body.db-terms-fine .privacy-prose p,
.db-legal-body.db-terms-fine .ti-terms-prose p { margin: 0.28rem 0; }
.db-legal-body.db-terms-fine .privacy-prose p:first-child,
.db-legal-body.db-terms-fine .ti-terms-prose p:first-child { margin-top: 0; }
.db-legal-body.db-terms-fine .privacy-prose strong,
.db-legal-body.db-terms-fine .ti-terms-prose strong { font-weight: 700; color: #3a3a3a; }
.db-legal-body.db-terms-fine .privacy-prose a,
.db-legal-body.db-terms-fine .ti-terms-prose a { color: #2a5a28; text-decoration: underline; }
.db-legal-body .pay-details {
  grid-template-columns: max-content 1fr;
  column-gap: 0.75rem;
  row-gap: 0.06rem;
  font-size: 0.8rem;
}
.db-legal-body .pay-details dt { color: var(--db-muted); }
.db-legal-body .pay-details dd { color: var(--db-ink); font-weight: 700; }
.db-legal-body .pay-details-note {
  margin: 0.28rem 0 0;
  color: var(--db-muted);
  font-size: 0.78rem;
  line-height: 1.35;
  max-height: 4.5rem;
  overflow: auto;
}
.db-legal-body pre,
.db-legal-body .pay-details-plain {
  margin: 0; font: inherit; white-space: pre-wrap; color: var(--db-ink);
  font-size: 0.8rem; line-height: 1.35; max-height: 7.5rem; overflow: auto;
}
.db-legal-body.is-empty p { margin: 0; font-size: 0.8rem; }
.db-legal-edit {
  width: 100%; min-height: 4.5rem; margin: 0; padding: 0.4rem 0.5rem;
  border: 1px solid var(--db-line); border-radius: 6px; font: inherit; font-size: 0.82rem;
  color: var(--db-ink); resize: vertical;
}
.db-note-field { margin: 0; }
.db-note-field textarea {
  min-height: 2.5rem; border: 1px solid var(--db-line); border-radius: 6px;
  padding: 0.4rem 0.5rem; font: inherit; color: var(--db-ink);
}
.db-finish-links {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; align-items: center;
  min-height: 1.25rem;
  margin-top: 0.1rem;
}
.db-finish-links:empty { display: none; }
/* Compact optional finish adders — keep visible (not an Add ▾ under Terms). */
.db-finish-links .db-btn.quiet {
  height: 24px;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 5px;
}
@media (max-width: 640px) {
  .db-finish-links { gap: 0.25rem; }
  .db-finish-links .db-btn.quiet { height: 22px; padding: 0 0.4rem; font-size: 0.66rem; }
}
.db-text-btn {
  border: 0; background: transparent; color: var(--db-green);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0;
}
.db-text-btn:hover, .db-text-btn:focus-visible { text-decoration: underline; }
.db-unmatched-line { white-space: nowrap; }
.db-unmatched-line .db-text-btn { margin-left: 0.45rem; }
.db-pick-col {
  width: 1.6rem;
  text-align: center;
  vertical-align: middle;
}
.db-line-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.db-bulk-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
  padding-top: 0.35rem;
  border-top: 1px solid var(--db-line, #e5e7eb);
  margin-top: 0.25rem;
}
.db-bulk-kind-label { font-size: 0.8rem; }
.db-kit-name-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--db-muted);
}
.db-kit-name-field input {
  font: inherit;
  font-size: 0.8rem;
  min-width: 8rem;
  max-width: 12rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--db-line, #d0d5dd);
  border-radius: 4px;
  background: #fff;
  color: var(--db-ink);
}
.tradify-line-kind-pick {
  border: 0;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tradify-line-kind-pick legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.db-totals { font-size: 0.82rem; min-width: 0; }
.db-tot-row {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.12rem 0; color: var(--db-muted);
}
.db-tot-row strong { color: var(--db-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.db-tot-row.is-total {
  margin-top: 0.2rem; padding-top: 0.35rem;
  border-top: 1px solid var(--db-soft);
  color: var(--db-ink); font-weight: 700;
}
.db-tot-row.is-total strong { font-weight: 700; }
.db-tot-row.is-profit {
  color: var(--db-ink); font-weight: 700;
  padding-top: 0.2rem;
}
.db-tot-row.is-profit strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.db-tot-row.is-profit-neg { box-shadow: inset 3px 0 0 var(--db-ink); padding-left: 0.35rem; }
.db-tot-actions {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; align-items: center;
  margin-top: 0.4rem;
}
.db-tot-actions .db-tot-discount { width: 100%; }
.db-inline { display: inline-flex; gap: 0.25rem; align-items: center; font-size: 0.78rem; color: var(--db-muted); }
.db-inline input, .db-inline select {
  height: 28px; border: 1px solid var(--db-line); border-radius: 5px;
  font: inherit; font-size: 0.78rem; color: var(--db-ink);
}
.db-inline input.num { width: 4.25rem; }
.db-margin-btn { border: 0; background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--db-ink); }
.db-loose-label { font-size: 0.82rem; font-weight: 600; color: var(--db-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.db-section.is-loose { border-left-color: var(--db-line); }
.db-section.is-options { border-left-color: #3d6e8c; }
.db-options-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #25506a;
  background: #e8f2f7;
  border: 1px solid #c5dbe8;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  flex-shrink: 0;
}
.db-options-hint { margin: 0; padding: 0.35rem 0.85rem 0.15rem; font-size: 0.78rem; }
.db-opt-col { width: 4.5rem; text-align: center; white-space: nowrap; }
.db-opt-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--db-muted);
  cursor: pointer;
  user-select: none;
}
.db-opt-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--db-green, #2a5a28); }
.db-opt-check-label { font-weight: 600; }
/* Included Options lines match normal active quote/invoice rows; unticked stay muted. */
.db-line.is-option-line:not(.is-option-off) {
  background: #fff;
}
.db-line.is-option-line:not(.is-option-off) .db-opt-check {
  color: var(--db-ink);
}
.db-line.is-option-line:not(.is-option-off) td {
  opacity: 1;
}
.db-line.is-option-off {
  background: #f3f4f6;
}
.db-line.is-option-off td:not(.db-opt-col) {
  opacity: 0.55;
}
.db-line.is-option-off .db-opt-check {
  color: var(--db-muted);
}
.ti-opt-mark { font-size: 1.05em; margin-right: 0.15rem; }
.ti-option-off td { opacity: 0.55; }
.ti-section-row td { padding-top: 0.75rem; background: #f6f8f7; }
.ti-section-desc { margin: 0.35rem 0 0; font-weight: 400; color: #444; font-size: 0.92em; line-height: 1.45; }
.ti-section-desc p { margin: 0 0 0.35rem; }
.ti-section-desc p:last-child { margin-bottom: 0; }
.ti-line-detail { margin: 0.2rem 0 0; font-weight: 400; color: #555; font-size: 0.88em; line-height: 1.4; }
.ti-line-detail p { margin: 0 0 0.25rem; }
.ti-line-detail p:last-child { margin-bottom: 0; }
tr.ti-kit-part td:first-child { padding-left: 1.25rem; color: #333; }
.ti-customer-note { margin: 1rem 0; }
.ti-customer-note h2 { font-size: 0.95rem; margin: 0 0 0.35rem; }
.db-grip[data-drag-line] { cursor: grab; display: inline-flex; }
.db-line.is-dragging { opacity: 0.45; }
.db-line.drag-over { box-shadow: inset 0 2px 0 var(--db-green); background: var(--db-pale); }
.db-move { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--db-muted); margin-bottom: 0.35rem; }
.db-move select { height: 32px; border: 1px solid var(--db-line); border-radius: 6px; font: inherit; color: var(--db-ink); }
.db-margin-pop .db-pop-body { min-width: 14rem; z-index: 50; }
.db-row-menu .db-pop-body { z-index: 60; }
.db-row-menu .db-pop-body button { border: 0; background: transparent; text-align: left; padding: 0.3rem 0.2rem; font: inherit; cursor: pointer; }
.db-row-menu .danger-text { color: #d92d20; }
/* No-job tip: warm amber callout (distinct from ACE green chrome), compact under title. */
.db-top-tip {
  --db-tip-amber: #c67a14;
  --db-tip-amber-soft: #fff8eb;
  --db-tip-amber-line: #efd6a6;
  --db-tip-ink: #6b4a12;
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.7rem 0.45rem 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--db-tip-ink);
  background: var(--db-tip-amber-soft);
  border: 1px solid var(--db-tip-amber-line);
  border-left: 3px solid var(--db-tip-amber);
  border-radius: 6px;
}
.db-top-tip.muted { color: var(--db-tip-ink); font-size: 0.84rem; }
.db-top-tip-ico {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--db-tip-amber);
}
.db-top-tip .db-text-btn {
  font-weight: 700;
  color: var(--db-green, #087a4b);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.db-top-tip .db-text-btn:hover,
.db-top-tip .db-text-btn:focus-visible {
  color: var(--db-green-hover, #06653e);
}
.doc-builder-more { margin-top: 0.55rem; font-size: 0.88rem; }
.doc-builder-more .db-more-meta {
  margin: 0 0 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  align-items: center;
  font-size: 0.8rem;
  line-height: 1.3;
}
/* Three-zone footer: Back ← | primary (centered) | trash */
.db-more-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.35rem 0.65rem;
  align-items: center;
  padding: 0.4rem 0 0.45rem;
  border-top: 1px solid var(--db-soft, var(--line, #d9dee5));
  margin: 0 0 0.5rem;
}
.db-more-start {
  justify-self: start;
  min-width: 0;
}
.db-more-center {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.db-more-end,
.db-more-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.db-more-end {
  justify-self: end;
  justify-content: flex-end;
  min-width: 0;
}
.db-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.db-back-ico {
  font-size: 1.1em;
  line-height: 1;
  font-weight: 700;
}
.db-more-form { display: inline-flex; margin: 0; align-items: center; }
@media (max-width: 640px) {
  .db-more-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "back end"
      "center center";
  }
  .db-more-start { grid-area: back; }
  .db-more-center { grid-area: center; justify-self: stretch; }
  .db-more-end { grid-area: end; }
}
.db-more-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}
.db-more-status select {
  height: 32px;
  font-size: 0.82rem;
  min-width: 8rem;
}
.db-more-secondary {
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--db-soft, var(--line, #d9dee5));
}
.invoice-lifecycle { margin: 1rem 0; padding-top: 0.75rem; border-top: 1px solid var(--line, #d9dee5); }
.invoice-lifecycle h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.invoice-hard-delete { margin: 0; }
.invoice-hard-delete > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.invoice-hard-delete > summary::-webkit-details-marker { display: none; }
.invoice-hard-delete[open] > summary { margin-bottom: 0.5rem; }
.invoice-hard-delete form.stack { gap: 0.5rem; max-width: 28rem; }
/* .pill.status-void colour + opacity live with lifecycle pills above. */
@media (max-width: 64rem) {
  .db-details { grid-template-columns: 1fr 1fr; }
  .db-finish { grid-template-columns: 1fr; }
}

/* Phone-width quote/invoice builder — no page spill; lines stack; chrome stays usable. */
@media (max-width: 48rem) {
  .main:has(.doc-window),
  .main:has(.doc-builder) {
    padding: 0.65rem 0.55rem calc(var(--phone-nav-h, 3.6rem) + 0.85rem);
    overflow-x: clip;
  }
  /* Layout only — sticky top/z-index live with .job-card-head in the phone shell. */
  .doc-window-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0 0 0.65rem;
    padding: 0.35rem 0.15rem 0.55rem;
    border-bottom: 1px solid var(--db-soft);
  }
  .doc-window-head h1 { font-size: 1.2rem; }
  .doc-window-title-row { gap: 0.45rem; }
  .job-card-title-row { gap: 0.45rem; }
  .doc-list-nav-btn {
    min-height: 1.7rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.72rem;
  }
  .doc-builder-shell {
    padding: 0.75rem 0.65rem 0.85rem;
    border-radius: 6px;
    overflow-x: clip;
  }
  .app-crumbs {
    flex-wrap: wrap;
    gap: 0.15rem 0.2rem;
    font-size: 0.78rem;
    margin: 0 0 0.55rem;
    max-width: 100%;
  }
  .db-head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.4rem;
  }
  .db-head-actions > .db-btn.ghost { justify-content: center; min-width: 0; padding: 0 0.55rem; }
  .db-head-actions > .db-save { min-width: 4.5rem; justify-content: center; }
  .db-head-actions > .db-options { justify-self: stretch; }
  .db-head-actions > .db-options > summary {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .db-options-body {
    position: absolute;
    right: 0;
    left: auto;
    max-width: min(18rem, calc(100vw - 1.5rem));
  }
  .db-details { grid-template-columns: 1fr; gap: 0.55rem; }
  .db-details .db-wide { grid-column: auto; }
  /* One clean toolbar row: + Section · + Options · +/- Extras · View · Costing · ALL ▾ */
  .db-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    margin-bottom: 0.65rem;
    width: 100%;
    min-width: 0;
  }
  .db-toolbar-left,
  .db-toolbar-right {
    display: contents;
    width: auto;
  }
  .db-view-cluster {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    justify-content: flex-start;
    gap: 0.28rem;
  }
  .db-view-cluster .db-pop { flex: 0 0 auto; }
  .db-toolbar .db-btn.compact {
    height: 1.85rem;
    min-height: 0;
    padding: 0 0.38rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .db-sections-toggle {
    min-height: 1.85rem;
    padding: 0 0.28rem 0 0.35rem;
    font-size: 0.66rem;
  }
  .db-sections-toggle .db-chev .db-ico {
    width: 1.05rem;
    height: 1.05rem;
  }
  .db-costing-toggle {
    min-height: 1.85rem;
    font-size: 0.7rem;
    gap: 0.25rem;
    padding: 0;
  }
  .db-costing-toggle input[type="checkbox"] {
    width: 0.9rem;
    height: 0.9rem;
  }
  .db-pop-body {
    left: 0;
    right: auto;
    max-width: min(20rem, calc(100vw - 1rem));
  }
  .db-toolbar [data-db-view-menu] .db-pop-body,
  .db-view-cluster .db-pop-body { left: auto; right: 0; }
  .db-row-menu .db-pop-body,
  .db-margin-pop .db-pop-body {
    left: auto;
    right: 0;
    min-width: min(14rem, calc(100vw - 1rem));
    max-width: min(16rem, calc(100vw - 1rem));
  }

  /* Site send: hide costing columns on phone; Qty / Unit / Total stay editable. */
  .doc-builder .db-cost,
  .doc-builder .db-markup,
  .doc-builder .db-margin,
  .doc-builder .db-lines th.db-cost,
  .doc-builder .db-lines th.db-markup,
  .doc-builder .db-lines th.db-margin { display: none !important; }

  .doc-builder,
  .doc-builder-shell,
  .db-section,
  .db-table-wrap,
  .db-lines {
    max-width: 100%;
    min-width: 0;
  }
  .db-table-wrap {
    overflow-x: clip;
    margin: 0;
  }
  .db-lines { display: block; width: 100%; border: 0; background: transparent; table-layout: fixed; }
  .db-lines thead { display: none !important; }
  .db-lines tbody { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; }
  .db-lines tr.db-line,
  .db-lines tr.db-compose-row {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) minmax(4.25rem, 5.25rem) minmax(4.25rem, 5.25rem) 2rem;
    grid-template-areas:
      "drag desc desc desc act"
      "drag qty unit total total";
    gap: 0.35rem 0.4rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.55rem 0.45rem;
    border: 1px solid var(--db-soft);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }
  .db-lines tr.db-line.is-option-line,
  .db-section.is-options .db-lines tr.db-compose-row {
    grid-template-columns: 1.25rem 2.5rem minmax(0, 1fr) minmax(4.25rem, 5.25rem) minmax(4.25rem, 5.25rem) 2rem;
    grid-template-areas:
      "drag opt desc desc desc act"
      "drag opt qty unit total total";
  }
  .db-lines tr.db-line > .db-drag,
  .db-lines tr.db-compose-row > .db-drag { grid-area: drag; align-self: start; padding-top: 0.35rem; }
  .db-lines tr.db-line > .db-opt-col,
  .db-lines tr.db-compose-row > .db-opt-col {
    grid-area: opt;
    align-self: start;
    padding-top: 0.2rem;
    border: 0;
    width: auto;
    text-align: left;
  }
  .db-opt-check-label { display: none; }
  .db-lines tr.db-line > .db-desc-cell,
  .db-lines tr.db-compose-row > .db-desc-cell { grid-area: desc; min-width: 0; border: 0; padding: 0; }
  .db-lines tr.db-line > .db-qty,
  .db-lines tr.db-compose-row > .db-qty { grid-area: qty; border: 0; padding: 0; }
  .db-lines tr.db-line > .db-unit,
  .db-lines tr.db-compose-row > .db-unit { grid-area: unit; border: 0; padding: 0; }
  .db-lines tr.db-line > .db-line-total,
  .db-lines tr.db-compose-row > .db-line-total { grid-area: total; border: 0; padding: 0; text-align: right; font-weight: 600; }
  .db-lines tr.db-line > .db-act,
  .db-lines tr.db-compose-row > .db-act { grid-area: act; justify-self: end; border: 0; padding: 0; }
  .db-lines td { border: 0; }
  .db-desc-cell { min-width: 0; }
  .db-desc-main { width: 100%; }
  .db-desc-cell textarea[data-desc-wrap],
  .db-desc-cell textarea[data-suggest-q] {
    font-size: 16px; /* avoid iOS zoom */
    min-height: calc(1.35em + 4px);
  }
  .db-lines input.num {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* avoid iOS zoom */
  }
  .db-lines .pct-field {
    width: 100%;
    max-width: 100%;
  }
  .db-lines .pct-field input.num {
    width: auto;
    font-size: 16px;
  }
  .db-lines tr.db-line > .db-qty::before,
  .db-lines tr.db-compose-row > .db-qty::before {
    content: "Qty";
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--db-muted);
    margin-bottom: 0.1rem;
  }
  .db-lines tr.db-line > .db-unit::before,
  .db-lines tr.db-compose-row > .db-unit::before {
    content: "Unit";
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--db-muted);
    margin-bottom: 0.1rem;
  }
  .db-lines tr.db-line > .db-line-total::before {
    content: "Total";
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--db-muted);
    margin-bottom: 0.1rem;
  }
  .db-compose-row .suggest { max-width: none; }
  .db-compose-hint { display: none; }
  .db-section-foot { flex-direction: column; align-items: stretch; gap: 0.45rem; }
  .db-section:not(:has(> .db-section-panel[open])) .db-section-foot {
    flex-direction: row;
    justify-content: flex-end;
  }
  .db-section-total { text-align: right; }
  .db-lines tr.db-line.is-option-line:not(.is-option-off) {
    background: #fff;
  }
  .db-lines tr.db-line.is-option-off {
    background: #f3f4f6;
  }
  .db-finish {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .db-finish-right {
    order: -1;
  }
  .db-totals {
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--db-soft);
    border-radius: 8px;
    background: #fafbfc;
  }
  .db-tot-row { font-size: 0.9rem; padding: 0.2rem 0; }
  .db-tot-row.is-total { font-size: 1.05rem; }
  .db-tot-actions { width: 100%; }
  .db-inline { width: 100%; justify-content: space-between; }
  .db-btn, .db-approval { min-height: 2.5rem; }
  .db-btn.compact { min-height: 2.25rem; }
}

/* Open row / kit / margin menus paint above the section action bar, section total,
   and the next section. Phone line cards (overflow:hidden), the lines table
   (global table overflow:hidden), and .db-table-wrap (overflow-x:auto/clip, which
   also clips the block axis) were cutting .db-pop-body off at the card edge.
   Kept in the form — not portaled — so kit title/description and intent submits stay posted.
   Drag grips are unchanged; overflow stays clipped until a menu is open.

   Toolbar +/- Extras and finish pops are siblings of .db-section (not nested in one).
   They must lift to the same stack as an open section (z-index 25) — nesting them at
   z-index 2 trapped Margins & Allowances under the first section card so the Name /
   % / Add row looked broken (Rob’s “z error”) and Add clicks missed the button. */
.doc-builder .db-section:has(.db-pop[open]),
.doc-builder .db-toolbar:has(.db-pop[open]),
.doc-builder .db-head-actions:has(.db-options[open], .db-split-menu[open]),
.doc-builder .db-finish:has(.db-pop[open]) {
  position: relative;
  z-index: 25;
}
.doc-builder .db-section:has(.db-pop[open]) > .db-section-panel {
  position: relative;
  z-index: 2;
}
.doc-builder .db-table-wrap:has(.db-pop[open]),
.doc-builder table.db-lines:has(.db-pop[open]) {
  overflow: visible;
}
.doc-builder .db-lines tr.db-line:has(.db-pop[open]),
.doc-builder .db-lines tr.db-compose-row:has(.db-pop[open]),
.doc-builder .db-lines tr.db-line:has(.db-pop[open]) > td,
.doc-builder .db-lines tr.db-compose-row:has(.db-pop[open]) > td {
  overflow: visible;
  position: relative;
  z-index: 3;
}
.doc-builder .db-pop[open] {
  z-index: 30;
}
.doc-builder .db-pop[open] > .db-pop-body,
.doc-builder .db-options[open] > .db-options-body,
.doc-builder .db-split-menu[open] > .db-split-menu-body {
  z-index: 31;
}
/* Extras popover sits above sticky doc head (z=12) and section cards while open. */
.doc-builder .db-extras-pop[open] {
  z-index: 32;
}
.doc-builder .db-extras-pop[open] > .db-pop-body {
  z-index: 33;
  overflow: visible;
}

/* Team Today — full dispatch board (/today) */
.today-page { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.today-nav { flex-wrap: wrap; align-items: baseline; gap: 0.55rem 0.85rem; }
.today-nav h2 { margin: 0; font-size: 1.35rem; }
.today-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 0.85rem;
  align-items: start;
}
.today-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem 0.8rem 0.85rem;
}
.today-col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.today-col-counts { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.today-section h3 {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.today-list { display: flex; flex-direction: column; gap: 0.35rem; }
.today-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--th-bg);
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
}
.today-item:hover,
.today-item:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
  background: var(--white);
  color: inherit;
}
.today-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; }
.today-empty { margin: 0; font-size: 0.84rem; }
.today-worker-link {
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
}
.today-worker-link:hover,
.today-worker-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.today-worker-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin: 0;
}
.today-worker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.85rem;
  align-items: start;
}
@media (max-width: 48rem) {
  .today-board { grid-template-columns: 1fr; }
  .kpi-compact-chrome { gap: 0.35rem; }
  .kpi-team-entry { min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
}

/* home-work-chips 20261004072409 */

/* Email customer compose — merged placeholder preview (not a second card stack) */
.email-merge-preview {
  margin: 0.15rem 0 0;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--th-bg) 65%, var(--white));
  border-radius: 0 0 8px 8px;
}
.email-merge-preview-head {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
}
.email-merge-preview-subject {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
}
.email-merge-preview-subject [data-merge-subject] {
  font-weight: 600;
  color: var(--ink);
}
.email-merge-preview-body {
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  max-height: 16rem;
  overflow: auto;
}
.email-merge-preview-body p {
  margin: 0 0 0.65rem;
}
.email-merge-preview-body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 48rem) {
  .email-merge-preview-body { max-height: 12rem; }
}

/* Onsite Phase 1 — sticky CTA + phone sheet */
.onsite-sticky {
  position: sticky;
  top: 0.35rem;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.65rem;
  pointer-events: none;
}
.onsite-sticky .onsite-cta {
  pointer-events: auto;
  min-height: 2.75rem;
  min-width: 7.5rem;
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink, #1a1a1a) 8%, transparent);
}
.onsite-cta.is-running {
  background: color-mix(in srgb, var(--sem-chip-urgent-bg, #fde8e8) 55%, var(--accent, #1f6b3a));
  border-color: color-mix(in srgb, var(--sem-hot-fg, #8a1f1f) 35%, var(--accent, #1f6b3a));
}
.onsite-dialog {
  border: none;
  padding: 0;
  max-width: min(28rem, calc(100vw - 1.25rem));
  width: 100%;
  border-radius: 12px;
  background: transparent;
}
.onsite-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.onsite-sheet {
  background: var(--white, #fff);
  border: 1px solid var(--line, #d5d9e0);
  border-radius: 12px;
  padding: 1rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(90vh, 40rem);
  overflow: auto;
}
.onsite-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.onsite-head h2 { margin: 0; font-size: 1.35rem; }
.onsite-head .muted { margin: 0.15rem 0 0; }
.onsite-timer { display: flex; flex-direction: column; gap: 0.55rem; }
.onsite-elapsed-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #5c6570);
}
.onsite-elapsed {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.onsite-started { margin: 0; }
.onsite-start,
.onsite-stop {
  width: 100%;
  min-height: 3.35rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.onsite-stop-form,
.onsite-manual-form { display: flex; flex-direction: column; gap: 0.55rem; }
.onsite-manual { border-top: 1px solid var(--line, #d5d9e0); padding-top: 0.55rem; }
.onsite-manual > summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}
.onsite-manual[open] > summary { margin-bottom: 0.55rem; }
.onsite-footer { margin: 0; font-size: 0.86rem; }
.onsite-rate-hint { margin: 0; font-size: 0.86rem; }
.onsite-time-banner { margin: 0 0 0.75rem; }
.onsite-materials {
  border-top: 1px solid var(--line, #d5d9e0);
  padding-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.onsite-materials h3 {
  margin: 0;
  font-size: 1.05rem;
}
.onsite-mat-hint { margin: 0; font-size: 0.86rem; }
.onsite-materials-form.add-next {
  margin: 0;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
.onsite-materials-form .add-next-main {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7rem) 1fr minmax(3.25rem, 4.5rem);
  gap: 0.4rem;
  align-items: end;
}
.onsite-materials-form .line-kind { margin: 0; }
.onsite-materials-form .suggest { min-width: 0; }
.onsite-materials-form .add-next-actions {
  justify-content: stretch;
}
.onsite-materials-form .line-add {
  width: 100%;
  min-height: 2.75rem;
  font-weight: 800;
}
.onsite-mat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.onsite-mat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--line, #d5d9e0);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #f4f6f8) 65%, transparent);
}
.onsite-mat-row.is-billed { opacity: 0.72; }
.onsite-mat-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  min-width: 0;
}
.onsite-mat-qty { font-weight: 800; font-variant-numeric: tabular-nums; }
.onsite-mat-desc { font-weight: 600; word-break: break-word; }
.onsite-mat-kind { font-size: 0.8rem; }
.onsite-mat-empty { padding: 0.25rem 0; }
.onsite-mat-row .danger {
  min-height: 2.25rem;
  flex-shrink: 0;
}
.billed-dot.is-running {
  background: var(--sem-chip-info-fg, #1a5f8a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sem-chip-info-fg, #1a5f8a) 25%, transparent);
}
.time-row-open td { background: color-mix(in srgb, var(--sem-chip-info-bg, #e8f3fa) 55%, transparent); }
/* Office Approved ≠ billed dots — pale green badge, distinct from invoice circle */
.time-approval {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.time-approval.is-approved {
  background: var(--ok-bright-bg);
  color: var(--ok-bright-fg);
  border-color: var(--ok-bright-border);
}
.time-approve-form { margin: 0; display: inline-block; }
.time-approve-btn {
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
}
.time-row-unapproved td { background: color-mix(in srgb, #fff4e5 70%, transparent); }
.time-row-approved .time-approval-cell { vertical-align: middle; }
.time-approval-cell { white-space: nowrap; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: end;
  margin: 0;
}
.inline-form .field.tight { margin: 0; min-width: 7rem; }
.inline-form .field.tight input { min-height: 2.25rem; }

@media (max-width: 900px) {
  .onsite-sticky:not(.onsite-in-header) {
    position: sticky;
    bottom: calc(var(--phone-nav-h, 3.6rem) + 0.35rem);
    top: auto;
    justify-content: stretch;
    margin: 0.35rem 0 0.15rem;
    z-index: 6;
    padding: 0.35rem 0 0.15rem;
    background: linear-gradient(to top, var(--bg, #f4f6f8) 70%, transparent);
  }
  .onsite-sticky:not(.onsite-in-header) .onsite-cta {
    width: 100%;
    min-height: 3.25rem;
    font-size: 1.12rem;
  }
  .onsite-dialog {
    max-width: calc(100vw - 0.75rem);
    margin: auto 0.35rem 0.35rem;
  }
  .onsite-sheet {
    padding: 0.9rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 10px 10px;
  }
  .onsite-elapsed { font-size: 3rem; }
  .onsite-start,
  .onsite-stop { min-height: 3.5rem; font-size: 1.2rem; }
  .onsite-stop-form .field input,
  .onsite-manual-form .field input {
    min-height: 2.85rem;
    font-size: 1.05rem;
  }
  .onsite-materials-form .add-next-main {
    grid-template-columns: 1fr 1fr;
  }
  .onsite-materials-form .suggest {
    grid-column: 1 / -1;
  }
  .onsite-materials-form .line-add { min-height: 3.1rem; font-size: 1.05rem; }
}

/* Document themes — Settings list swatches */
.theme-swatches {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  vertical-align: middle;
}
.theme-swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.row-actions {
  white-space: nowrap;
}
.row-actions form {
  display: inline;
  margin: 0;
}
.row-actions button,
.row-actions .btn {
  margin-left: 0.25rem;
}

/* Tradify import — stitch summary + step-through inspector */
.stitch-summary {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  background: var(--ok-bg);
  border: 1px solid var(--banner-border);
}
.stitch-summary strong {
  display: block;
  font-size: 1.05rem;
  color: var(--ink);
}
.stitch-summary .muted {
  margin: 0.25rem 0 0;
}
.stitch-inspector {
  margin: 0.75rem 0 1rem;
}
.stitch-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
}
.stitch-nav select {
  min-width: min(100%, 18rem);
  max-width: 100%;
}
.stitch-nav .btn {
  margin: 0;
}
.stitch-meta {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.95rem;
}
.stitch-raw-sample {
  margin-top: 1rem;
}
.stitch-raw-sample summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.92rem;
}

.tradify-skips {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.tradify-skip-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--banner-border, #d8d2c8);
  background: var(--surface, transparent);
}
.tradify-skip-kind {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.tradify-skip-num {
  font-size: 1.02rem;
}
.tradify-skip-rows {
  color: var(--muted);
  font-size: 0.9rem;
}
.tradify-skip-reason {
  flex: 1 1 12rem;
}
.tradify-skip-detail {
  color: var(--muted);
  font-size: 0.9rem;
}
.tradify-solutions-form {
  margin: 0.75rem 0 0;
}
.tradify-solution-card select {
  flex: 1 1 18rem;
  min-width: min(100%, 16rem);
}

/* Data management / list bulk clean-up */
.reset-buckets {
  display: grid;
  gap: 0.45rem;
  margin: 0.75rem 0 1rem;
}
.reset-bucket { margin: 0; }
.bulk-bar { margin-bottom: 0.75rem; }
.bulk-bar .bulk-pick-all { display: none; }
.bulk-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}
.bulk-bar .bulk-status { margin: 0; min-width: 10rem; }
.bulk-bar .bulk-field {
  margin: 0;
  min-width: 8.5rem;
  max-width: 14rem;
}
.bulk-bar .bulk-field input[type="date"] {
  min-width: 9.5rem;
}
.task-col-check { width: 2rem; }
.bulk-status-strip {
  display: none;
  width: 100%;
  flex: 1 1 100%;
  align-items: stretch;
  gap: 0.4rem;
}
.bulk-status-strip-label {
  display: none;
  align-self: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.15rem;
  flex: 0 0 auto;
}
.bulk-status-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  margin: 0;
  min-width: 0;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 22%, var(--line));
  border-radius: 0.55rem;
  padding: 0.4rem 0.45rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.78rem;
  font-weight: 700;
}
.bulk-status-chip-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}
.bulk-status-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 800;
}
.bulk-status-chip:hover,
.bulk-status-chip:focus-visible {
  filter: brightness(0.97);
  outline: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  outline-offset: 1px;
}
.bulk-delete { margin-top: 0.35rem; }
.bulk-delete-body {
  margin-top: 0.5rem;
  max-width: 28rem;
}
/* Price book: three bulk controls on ONE horizontal row (never wrap).
   Use a div — <p> cannot hold <details>, so the browser closed the flex early. */
.pb-bulk-actions {
  position: relative;
  max-width: 100%;
}
.pb-bulk-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.75rem 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pb-bulk-toolbar > button,
.pb-bulk-toolbar > .pb-bulk-match {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
}
.pb-bulk-match {
  margin: 0;
  margin-top: 0;
  position: static;
  display: block;
  width: max-content;
}
/* Clear red for match-all destructive actions — not brown --warn (Delete selected stays .danger). */
.pb-danger-red,
button.pb-danger-red,
.btn.pb-danger-red,
.ops-chrome button.pb-danger-red,
.ops-chrome .btn.pb-danger-red {
  background: #d92d20;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.pb-danger-red:hover,
.pb-danger-red:focus-visible,
button.pb-danger-red:hover,
button.pb-danger-red:focus-visible,
.btn.pb-danger-red:hover,
.btn.pb-danger-red:focus-visible,
.ops-chrome button.pb-danger-red:hover,
.ops-chrome button.pb-danger-red:focus-visible,
.ops-chrome .btn.pb-danger-red:hover,
.ops-chrome .btn.pb-danger-red:focus-visible,
.pb-bulk-match[open] > summary.pb-danger-red {
  background: #b42318;
  color: #fff;
  filter: none;
}
.pb-bulk-match > summary.pb-bulk-match-btn {
  list-style: none;
}
.pb-bulk-match > summary.pb-bulk-match-btn::-webkit-details-marker { display: none; }
.pb-bulk-match > summary.pb-bulk-match-btn::marker { content: ""; }
.pb-bulk-match > .bulk-delete-body {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 0.25rem);
  z-index: 5;
  margin-top: 0;
  padding: 0.75rem;
  max-width: 28rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent);
}
.col-check { width: 2rem; text-align: center; }

/* Desktop-wide: status choices spread across the bar; mobile keeps the compact select. */
@media (min-width: 56rem) {
  .bulk-bar[data-bulk="quotes"] .bulk-status-strip,
  .bulk-bar[data-bulk="invoices"] .bulk-status-strip,
  .bulk-bar[data-bulk="jobs"] .bulk-status-strip {
    display: flex;
    flex-wrap: nowrap;
  }
  .bulk-bar[data-bulk="quotes"] .bulk-status-strip-label,
  .bulk-bar[data-bulk="invoices"] .bulk-status-strip-label,
  .bulk-bar[data-bulk="jobs"] .bulk-status-strip-label {
    display: inline-flex;
  }
  .bulk-bar[data-bulk="quotes"] .bulk-status-chip,
  .bulk-bar[data-bulk="invoices"] .bulk-status-chip,
  .bulk-bar[data-bulk="jobs"] .bulk-status-chip {
    flex: 1 1 0;
  }
  .bulk-bar[data-bulk="quotes"] .bulk-status-select,
  .bulk-bar[data-bulk="quotes"] .bulk-status-set,
  .bulk-bar[data-bulk="invoices"] .bulk-status-select,
  .bulk-bar[data-bulk="invoices"] .bulk-status-set,
  .bulk-bar[data-bulk="jobs"] .bulk-status-select,
  .bulk-bar[data-bulk="jobs"] .bulk-status-set {
    display: none;
  }
}
@media (min-width: 56rem) and (max-width: 72rem) {
  .bulk-bar[data-bulk="quotes"] .bulk-status-strip,
  .bulk-bar[data-bulk="invoices"] .bulk-status-strip,
  .bulk-bar[data-bulk="jobs"] .bulk-status-strip {
    flex-wrap: wrap;
  }
  .bulk-bar[data-bulk="quotes"] .bulk-status-chip,
  .bulk-bar[data-bulk="invoices"] .bulk-status-chip,
  .bulk-bar[data-bulk="jobs"] .bulk-status-chip {
    flex: 1 1 5.5rem;
  }
}

/* Status / Kind filter strip (GET links, not bulk apply). Always available — including admins. */
.list-status-filter { margin-bottom: 0.75rem; }
.list-status-filter .bulk-status-strip { display: flex; flex-wrap: wrap; }
.list-status-filter .bulk-status-strip-label { display: inline-flex; }
.list-status-filter .bulk-status-chip { text-decoration: none; color: inherit; }
.list-status-filter .bulk-status-chip.is-active {
  outline: 2px solid color-mix(in srgb, currentColor 55%, #142017);
  outline-offset: 1px;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, currentColor 50%, #142017);
  font-weight: 800;
}
/* Active Scheduled chip: solid green + white (board / non–list-chrome).
 * Jobs list-chrome filters override to underline accents above. */
.list-status-filter .bulk-status-chip.status-scheduled.is-active,
.bulk-status-chip.status-scheduled.is-active {
  background: var(--doc-job);
  color: #fff;
  border-color: color-mix(in srgb, var(--doc-job) 70%, #142017);
  outline-color: color-mix(in srgb, var(--doc-job) 55%, #142017);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #fff 35%, transparent);
}
body[data-list-chrome="jobs"] .list-status-filter .bulk-status-chip.status-scheduled.is-active {
  background: transparent !important;
  color: var(--doc-job-fg, #1a5c2e) !important;
  border-color: transparent;
  outline: none !important;
  box-shadow: none !important;
  border-bottom-color: currentColor;
}
.list-status-filter-hint { margin: 0.45rem 0 0; }
/*
 * Jobs admin desktop: hide the left filter when bulk-bar also carries status chips
 * (avoid duplicate strips). Quotes Phase 1 keeps All·Draft·Accepted·Approved·Declined
 * in the toolbar always — bulk-bar is selection/apply only, so never hide Quotes filters.
 * Landscape short lane re-shows Jobs filter and hides the bulk strip (below).
 */
@media (min-width: 56rem) {
  /* Legacy (non–list-chrome) Jobs: hide left filter when bulk also has status chips. */
  .phone-list-layout[data-list="jobs"]:not(.list-chrome-surface):has(.bulk-bar)
    .list-status-filter[data-status-filter="jobs"],
  .list-status-filter[data-status-filter="jobs"]:has(+ .bulk-bar) {
    display: none;
  }
  /* List-chrome pages: toolbar status stays visible; bulk chips are selection-only.
   * Must beat the Jobs :has(.bulk-bar) hide (Owner multi-select brings a bulk form). */
  body[data-list-chrome] .list-status-filter,
  body[data-list-chrome="jobs"] .list-status-filter[data-status-filter="jobs"] {
    display: block !important;
  }
  body[data-list-chrome] .bulk-bar .bulk-status-strip {
    display: none;
  }
}
.list-status-filter-pills { margin: 0; }
@media (min-width: 56rem) {
  .list-status-filter[data-status-filter="quotes"] .bulk-status-strip,
  .list-status-filter[data-status-filter="invoices"] .bulk-status-strip,
  .list-status-filter[data-status-filter="jobs"] .bulk-status-strip,
  .list-status-filter[data-status-filter="tasks"] .bulk-status-strip,
  .list-status-filter[data-status-filter="customers"] .bulk-status-strip {
    flex-wrap: nowrap;
  }
  .list-status-filter[data-status-filter="quotes"] .bulk-status-chip,
  .list-status-filter[data-status-filter="invoices"] .bulk-status-chip,
  .list-status-filter[data-status-filter="jobs"] .bulk-status-chip,
  .list-status-filter[data-status-filter="tasks"] .bulk-status-chip,
  .list-status-filter[data-status-filter="customers"] .bulk-status-chip {
    flex: 1 1 0;
  }
}

/* Landscape phone left column: re-assert compact chips after desk flex:1 rules above.
   Desk (≥56rem) hides Quotes/Jobs list-status-filter when a bulk-bar exists and shows the
   bulk strip instead — that leaves a fat top strip on landscape phones. Keep filter
   chips on the left only; hide the bulk status strip (and Quotes scope tabs). */
@media (max-width: 64rem) and (max-height: 30rem) {
  .phone-list-controls .list-status-filter .bulk-status-strip {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .phone-list-controls .list-status-filter .bulk-status-chip {
    flex: 0 0 auto;
  }
  .phone-list-layout[data-list="quotes"] .phone-list-controls .list-scope-bar {
    display: none !important;
  }
  .phone-list-layout[data-list="quotes"] .phone-list-controls .list-status-filter,
  .phone-list-layout[data-list="invoices"] .phone-list-controls .list-status-filter,
  .phone-list-layout[data-list="jobs"] .phone-list-controls .list-status-filter,
  .phone-list-layout[data-list="customers"] .phone-list-controls .list-status-filter {
    display: block !important;
  }
  .phone-list-content .bulk-bar .bulk-status-strip,
  .phone-list-content .bulk-bar .bulk-status-select,
  .phone-list-content .bulk-bar .bulk-status-set {
    display: none !important;
  }
}

/* Phone filter: one compact Status/Kind select (not chip grid, not side-scroll). */
.list-status-filter-mobile {
  display: none;
  margin: 0;
  max-width: none;
}
.list-status-filter-mobile select {
  width: 100%;
  max-width: 100%;
  font-size: 16px; /* iOS: avoid input zoom */
}
.list-status-filter-mobile-row {
  display: none;
  align-items: flex-end;
  gap: 0.5rem;
}
.list-status-filter-mobile-row .list-status-filter-mobile {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.list-status-filter-mobile-row .list-phone-menu {
  flex: 0 0 auto;
}
/* Desk-hidden; portrait shows Draft urgency (etc.) under Status select. */
.list-status-filter-mobile-extra {
  display: none;
  margin: 0.4rem 0 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Phone: show filter select; hide chip strip + mass-select / bulk entirely.
 * Inbox keeps Current/History chips (no View select). */
@media (max-width: 55.99rem) {
  .list-status-filter {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.65rem;
  }
  .list-status-filter .bulk-status-strip,
  .list-status-filter .list-status-filter-pills {
    display: none !important;
  }
  .list-status-filter[data-status-filter="inbox"] .bulk-status-strip {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
  }
  .list-status-filter-mobile {
    display: block;
  }
  .list-status-filter-mobile-row {
    display: flex;
  }
  .list-status-filter-mobile-row .list-status-filter-mobile {
    display: block;
  }
  .list-status-filter-mobile-row .list-phone-menu {
    display: inline-block;
  }
  .list-status-filter-mobile-extra {
    display: block;
  }
  .list-status-filter-mobile-extra .quote-draft-urg-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
  }
  .list-status-filter-hint {
    display: none;
  }
  /*
   * Hide bulk chrome only — not form.bulk-bar. Quotes/Invoices/Jobs/Customers
   * wrap the list table inside that form; display:none on .bulk-bar blanked
   * the whole list for company admins on phone (#179 regression).
   * DELETE (title-row) is desktop-only too — same phone breakpoint
   * as checkboxes / bulk actions (portrait + landscape phone chrome).
   */
  .bulk-bar-actions,
  .bulk-bar > p.muted,
  th.col-check,
  td.col-check,
  th.task-col-check,
  td.task-col-check,
  .list-permanent-delete,
  .list-invoice-void-btn,
  .list-job-cancel-btn,
  .list-job-complete-btn {
    display: none !important;
  }
  form.bulk-bar.panel {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
}

/* Customers Kind strip — Personal / Commercial coloured chips. */
.bulk-status-chip.status-personal,
.pill.status-personal {
  background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg);
}
.bulk-status-chip.status-commercial,
.pill.status-commercial {
  background: var(--doc-job); color: var(--white);
}

/* Tasks Status strip — same chip chrome as Quotes; solid tokens for contrast. */
.bulk-status-chip.status-overdue,
.pill.status-overdue {
  background: var(--sem-chip-danger-bg); color: var(--sem-chip-danger-fg);
}
.bulk-status-chip.status-today,
.pill.status-today {
  background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg);
}
.bulk-status-chip.status-upcoming,
.pill.status-upcoming {
  background: var(--doc-job); color: var(--white);
}
.bulk-status-chip.status-unassigned,
.pill.status-unassigned {
  background: var(--ok-draft-bg); color: var(--ok-draft-fg);
}
.bulk-status-chip.status-mine,
.pill.status-mine {
  background: var(--ok-bright-bg); color: var(--ok-bright-fg);
}
.bulk-status-chip.status-urgent,
.pill.status-urgent {
  background: var(--sem-chip-urgent-bg); color: var(--sem-chip-urgent-fg);
}
.bulk-status-chip.status-open,
.pill.status-open {
  background: var(--sem-chip-open-bg); color: var(--sem-chip-open-fg);
}
.bulk-status-chip.status-done,
.pill.status-done {
  background: var(--sem-chip-done-bg); color: var(--sem-chip-done-fg);
}
.bulk-status-chip.status-soon,
.pill.status-soon {
  background: var(--sem-chip-open-bg); color: var(--sem-chip-open-fg);
}
.bulk-status-chip.status-normal,
.pill.status-normal {
  background: var(--sem-chip-neutral-bg); color: var(--sem-chip-neutral-fg);
}
.bulk-status-chip.status-range,
.pill.status-range {
  background: var(--sem-chip-info-bg); color: var(--sem-chip-info-fg);
}
.bulk-status-chip.status-none,
.pill.status-none {
  background: var(--ok-draft-bg); color: var(--ok-draft-fg);
}
.task-kind-th-form {
  display: inline;
  margin: 0;
}
.task-kind-th-select {
  max-width: 7.5rem;
  min-width: 5.5rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--white);
  color: var(--ink);
}

/* Customer Details read panel — quiet rows, no card chrome. */
.cust-read { margin: 0.5rem 0 1rem; }
.cust-read-list {
  display: grid;
  gap: 0.85rem 1.25rem;
  margin: 0;
}
.cust-read-row {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}
.cust-read-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cust-read-value {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}
.cust-read-address { display: block; }
.cust-read-hint { margin: 0.85rem 0 0; }
body.doc-area-customer .cust-read {
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 40rem) {
  .cust-read-list {
    grid-template-columns: minmax(6rem, 8.5rem) minmax(0, 1fr);
    align-items: baseline;
  }
  .cust-read-row {
    display: contents;
  }
}

/* Primary + labelled extra phones/emails on Customer Details. */
.cust-channel-stack {
  display: grid;
  gap: 0.4rem;
}
.cust-channel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}
.cust-channel-value { min-width: 0; }
.cust-channel-tag {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.cust-extra-block {
  margin: 0.25rem 0 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, var(--muted) 28%, transparent);
}
.cust-extra-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem) auto;
  gap: 0.5rem 0.65rem;
  align-items: end;
  margin: 0.45rem 0;
}
.cust-extra-row .field { margin: 0; }
.cust-extra-row .field > span { display: block; font-size: 0.75rem; margin-bottom: 0.15rem; }
@media (max-width: 39.99rem) {
  .cust-extra-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .cust-extra-label { grid-column: 1 / -1; }
}

/* Tasks list note above shared list-status-filter strip (no Tasks-only strip sizing). */
.work-filter-note { margin: 0 0 0.55rem; }

/* Reports Phase 1 */
.reports-home { max-width: 56rem; }
.report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.5rem;
}
a.report-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, #f7f9fc 0%, #eef3f8 55%, #e8eef5 100%);
  border: 1px solid #d7e0ea;
  box-shadow: none;
}
a.report-card:hover,
a.report-card:focus-visible {
  border-color: #f9a825;
  background: linear-gradient(165deg, #fffdf7 0%, #f7f9fc 100%);
}
a.report-card strong { color: var(--ink); font-size: 1.02rem; }
.report-page { max-width: 64rem; }
.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 1rem;
}
.report-filters { margin-bottom: 0.75rem; }
.report-custom-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.report-custom-range .field { margin: 0; min-width: 9rem; }
.report-section { margin: 0 0 1rem; padding: 0.85rem 1rem 1rem; }
.report-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.report-kpi { margin: 0.35rem 0 0.75rem; font-size: 1.05rem; }
.report-kpi-label { color: var(--muted); font-weight: 650; margin-right: 0.35rem; }
.report-asof { margin: 0.35rem 0 0.75rem; }
.report-empty { margin: 0.5rem 0; }
.report-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.report-detail-list .task-table.report-detail-table {
  width: 100%;
}
.report-detail-list .quotes-list-pager {
  margin: 0;
}
.report-filters .work-filters {
  flex-wrap: wrap;
}
.report-vbar-fill.tone-catalogue,
.report-hbar-fill.tone-catalogue {
  background: color-mix(in srgb, var(--accent, #f9a825) 72%, #0f253e);
}

.report-vbar {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  min-height: 12rem;
  padding: 0.35rem 0.15rem 0;
  overflow-x: auto;
}
.report-vbar-col {
  flex: 1 1 3.2rem;
  min-width: 3rem;
  max-width: 5.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.report-vbar-track {
  width: 100%;
  height: 9.5rem;
  display: flex;
  align-items: flex-end;
  background: #e8eef5;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.report-vbar-fill {
  display: block;
  width: 100%;
  background: #2f6fbd;
  border-radius: 6px 6px 0 0;
  min-height: 4px;
}
.report-vbar-fill.tone-ok { background: #2a5a28; }
.report-vbar-fill.tone-warn { background: #a67c12; }
.report-vbar-fill.tone-muted { background: #8a96a5; }
.report-vbar-fill.tone-invoice { background: #2f6fbd; }
.report-vbar-fill.tone-quote { background: #a67c12; }
.report-vbar-fill.tone-job { background: #2a5a28; }
.report-vbar-fill.tone-customer { background: #2f6a7a; }
.report-vbar-val { font-size: 0.72rem; font-weight: 700; color: var(--ink); text-align: center; }
.report-vbar-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.report-hbar { display: flex; flex-direction: column; gap: 0.45rem; }
.report-hbar-row {
  display: grid;
  grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}
.report-hbar-label { font-size: 0.84rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-hbar-track {
  height: 0.85rem;
  background: #e8eef5;
  border-radius: 999px;
  overflow: hidden;
}
.report-hbar-fill {
  display: block;
  height: 100%;
  background: #0f253e;
  border-radius: 999px;
  min-width: 4px;
}
.report-hbar-fill.tone-job { background: #2a5a28; }
.report-hbar-fill.tone-customer { background: #2f6a7a; }
.report-hbar-fill.tone-ok { background: #2a5a28; }
.report-hbar-val { font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

.report-line-wrap { width: 100%; overflow-x: auto; }
.report-line-svg { display: block; max-width: 100%; }
.report-axis { stroke: #c5d0dc; stroke-width: 1; }
.report-line-path { stroke: #0f253e; stroke-width: 2.5; }
.report-line-dot { fill: #f9a825; stroke: #0f253e; stroke-width: 1; }
.report-line-label { fill: var(--muted); font-size: 11px; font-family: ui-sans-serif, system-ui, sans-serif; }

.privacy-md-input {
  width: 100%;
  min-height: 18rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.privacy-preview {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #d5dde6);
}
.privacy-preview h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.privacy-prose {
  max-width: 42rem;
  line-height: 1.55;
}
.privacy-prose > :first-child { margin-top: 0; }
.privacy-prose h1 {
  margin: 0 0 0.75rem;
  font-size: 1.55rem;
  line-height: 1.25;
}
.privacy-prose h2 {
  margin: 1.4rem 0 0.5rem;
  font-size: 1.2rem;
}
.privacy-prose h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 1.05rem;
}
.privacy-prose p { margin: 0.65rem 0; }
.privacy-prose ul {
  margin: 0.5rem 0 0.5rem 1.25rem;
  padding: 0;
  list-style: disc;
}
.privacy-prose li { margin: 0.25rem 0; }
.privacy-prose a { color: var(--green, #2a5a28); }

.settings-legal-tabs {
  margin: 0.75rem 0 1rem;
  flex-wrap: wrap;
  overflow-x: visible;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.settings-legal-tabs a {
  pointer-events: auto;
  cursor: pointer;
}
.settings-legal-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
[data-legal-panel][hidden] { display: none !important; }
@media (max-width: 52rem) {
  .settings-legal-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.supplier-picker-links {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
}
.supplier-picker-links li { margin: 0; }
[data-supplier-picker] select[size] { min-height: 7.5rem; }

.recycle-bin-bar {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.recycle-bin-table .row-actions {
  white-space: nowrap;
}

@media print {
  .report-actions,
  .report-filters,
  .no-print { display: none !important; }
  .report-section { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .report-page h1 { margin-top: 0; }
}

/* ── Shared list chrome (Quotes Phase 1 pilot; roll out Phase 2) ── */
.list-chrome-title-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
}
.list-more {
  position: relative;
  margin: 0;
}
.list-more > summary.list-more-btn {
  list-style: none;
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.7rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list-more > summary.list-more-btn::-webkit-details-marker { display: none; }
.list-more > summary.list-more-btn::marker { content: ""; }
.list-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 40;
  min-width: 12.5rem;
  max-width: min(20rem, 92vw);
  padding: 0.35rem;
  border: 1px solid var(--line, #d9dee5);
  border-radius: 10px;
  background: var(--white, #fff);
  box-shadow: 0 8px 24px rgba(15, 40, 30, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.list-more-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--ink, #1a2e24);
  text-decoration: none;
  font-weight: 560;
  font-size: 0.95rem;
}
.list-more-link:hover,
.list-more-link:focus-visible {
  background: var(--wash, #eef5f0);
}
.list-more-link.is-active {
  background: var(--brand-soft, #d7ebe0);
  color: var(--brand, #1b5e3b);
}
.list-more-delete {
  margin: 0.25rem 0 0;
  border-top: 1px solid var(--line, #d9dee5);
  padding-top: 0.25rem;
}
.list-more-delete-summary {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--muted, #5c6b63);
  list-style: none;
}
.list-more-delete-summary::-webkit-details-marker { display: none; }
.list-more-delete-summary::marker { content: ""; }
.list-more-delete-body {
  padding: 0.35rem 0.75rem 0.75rem;
}
.list-chrome-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.list-chrome-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: var(--white, #fff);
  border: 1px solid var(--line, #d9dee5);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.list-chrome-band-filters {
  flex: 1 1 16rem;
  min-width: 0;
}
.list-page-search {
  flex: 1 1 11rem;
  min-width: 9rem;
  max-width: 18rem;
  margin: 0;
}
/* Quotes toolbar: ~2× search field width (left cluster). */
body[data-list-chrome] .list-chrome-tools .list-page-search,
body[data-list-chrome] .list-chrome-band-main .list-page-search {
  flex: 1 1 22rem;
  min-width: 18rem;
  max-width: 36rem;
}
.list-page-search-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line, #d9dee5);
  border-radius: 999px;
  background: var(--white, #fff);
}
/* Pricebook: Brand sits in the search band (same GET form), not a second boxed panel. */
.list-page-search--with-facet {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  max-width: none;
}
.list-page-search--with-facet .list-page-search-field {
  flex: 1 1 12rem;
  min-width: 10rem;
}
.list-page-search-facet {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  flex: 0 1 10rem;
  min-width: 7.5rem;
  max-width: 14rem;
}
.list-page-search-facet-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, #5a6a7d);
  line-height: 1.1;
}
.list-page-search-facet select {
  width: 100%;
  min-height: 2.35rem;
  margin: 0;
  font-size: 0.92rem;
}
body[data-list-chrome="catalogue"] .list-chrome-band-main .list-page-search--with-facet {
  flex: 1 1 28rem;
  min-width: 18rem;
  max-width: 42rem;
}
.list-page-search-field:focus-within {
  border-color: var(--brand, #1b5e3b);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #1b5e3b) 22%, transparent);
}
.list-page-search-ico {
  color: var(--muted, #5c6b63);
  font-size: 0.95rem;
  line-height: 1;
  flex: 0 0 auto;
}
.list-page-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.35rem 0;
  font: inherit;
  outline: none;
}
.cust-th-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.cust-th-sort-link:hover .cust-th-label,
.cust-th-sort-link.active .cust-th-label {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.cust-th-sort-link .cust-th-sort {
  font-size: 0.85em;
  opacity: 0.7;
}
.cust-th-sort-link.active .cust-th-sort { opacity: 1; }

/*
 * Quotes pilot — one composition (Customers mockup density):
 * band (filters + Search · New · Columns) flush into the table surface.
 * Desk only here — landscape keeps existing phone-list display:contents rules.
 */
@media (min-width: 56rem) {
  body[data-list-chrome] .list-chrome-surface.phone-list-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 1rem;
  }
  body[data-list-chrome] .list-chrome-surface > .phone-list-controls,
  body[data-list-chrome] .list-chrome-surface > .phone-list-content {
    display: contents;
  }
  /* One toolbar row: Search + status (left) · New + Columns (right).
     Outer band ROUND; table header strip stays SQUARE (see rules above). */
  body[data-list-chrome] .list-chrome-band,
  body[data-list-chrome] .list-chrome-band.list-chrome-band--toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    border-radius: 12px 12px 0 0;
  }
  body[data-list-chrome] .list-chrome-band-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  body[data-list-chrome] .list-chrome-band-filters {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
  body[data-list-chrome] .list-chrome-band-mid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    margin-left: 0.35rem;
    margin-right: 0.15rem;
  }
  body[data-list-chrome] .list-chrome-band-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    flex: 0 0 auto;
    margin-left: auto;
  }
  body[data-list-chrome] .list-chrome-band-actions .list-permanent-delete {
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-list-chrome] .list-chrome-band-actions .list-permanent-delete-btn,
  body[data-list-chrome] .list-chrome-band-actions .list-invoice-void-btn,
  body[data-list-chrome] .list-chrome-band-actions .list-job-cancel-btn,
  body[data-list-chrome] .list-chrome-band-actions .list-job-complete-btn {
    min-height: 2.35rem;
    white-space: nowrap;
  }
  body[data-list-chrome] .list-chrome-band-actions .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.35rem;
    padding: 0.4rem 0.85rem;
  }
  body[data-list-chrome] .list-chrome-band-actions .col-vis-panel {
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-list-chrome] .list-chrome-band-actions .col-vis-trigger {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
  body[data-list-chrome] .list-chrome-band-main .list-page-search {
    flex: 0 1 22rem;
    min-width: 16rem;
    max-width: 36rem;
  }
  body[data-list-chrome] .list-chrome-band .list-status-filter {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  body[data-list-chrome] .list-chrome-band .list-status-filter .bulk-status-strip {
    margin: 0;
    flex-wrap: nowrap;
    gap: 0.45rem 0.75rem;
    align-items: baseline;
  }
  body[data-list-chrome] .list-chrome-band .list-status-filter .bulk-status-chip {
    flex: 0 0 auto;
  }
  body[data-list-chrome] .list-chrome-band .quote-draft-urg-cluster {
    flex: 0 0 auto;
  }
  body[data-list-chrome] .list-chrome-band .bulk-status-strip-label {
    display: none;
  }
  body[data-list-chrome] .list-chrome-band .list-status-filter-hint {
    display: none;
  }
  body[data-list-chrome] .list-chrome-tools .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.35rem;
    padding: 0.4rem 0.85rem;
  }
  body[data-list-chrome] .list-chrome-tools .col-vis-panel {
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-list-chrome] .list-chrome-tools .col-vis-trigger {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
  body[data-list-chrome="quotes"] .quotes-list,
  body[data-list-chrome="invoices"] .invoices-list,
  body[data-list-chrome="jobs"] .jobs-list,
  body[data-list-chrome="kits"] .kits-list,
  body[data-list-chrome="customers"] .cust-list,
  body[data-list-chrome="enquiries"] .enquiries-list,
  body[data-list-chrome="catalogue"] .cust-list,
  body[data-list-chrome="catalogue"] .pb-list {
    margin: 0;
  }
  body[data-list-chrome="quotes"] .quotes-list > .table-scroll,
  body[data-list-chrome="invoices"] .invoices-list > .table-scroll,
  body[data-list-chrome="jobs"] .jobs-list > .table-scroll,
  body[data-list-chrome="kits"] .kits-list > .table-scroll,
  body[data-list-chrome="customers"] .cust-list > .table-scroll,
  body[data-list-chrome="enquiries"] .enquiries-list > .table-scroll,
  body[data-list-chrome="catalogue"] .cust-list > .table-scroll,
  body[data-list-chrome="catalogue"] .pb-list > .table-scroll {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0 !important;
    background-color: var(--white, #fff);
    background-image: linear-gradient(var(--th-bg, #eef2ee), var(--th-bg, #eef2ee));
    background-size: 100% 2.85rem;
    background-repeat: no-repeat;
    background-position: top left;
    overflow: auto;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  /* Pricebook: ONE surface — tabs · band · facets · meta · full-bleed sage header. */
  body[data-list-chrome="catalogue"] .phone-list-content > form.bulk-bar,
  body[data-list-chrome="catalogue"] .phone-list-content > .pb-list-wrap,
  body[data-list-chrome="catalogue"] .list-chrome-surface form.bulk-bar {
    border: none !important;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  body[data-list-chrome="catalogue"] .pb-list > .pb-list-topstrip {
    border-left: 1px solid var(--line, #d9dee5);
    border-right: 1px solid var(--line, #d9dee5);
    border-top: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0 !important;
  }
  body[data-list-chrome="catalogue"] .pb-table thead th,
  body[data-list-chrome="catalogue"] .pb-table thead th .cust-th-label,
  body[data-list-chrome="catalogue"] .pb-table thead th .cust-th-sort-link,
  body[data-list-chrome="catalogue"] .cust-table.pb-table thead th,
  body[data-list-chrome="catalogue"] .cust-table.pb-table thead th .cust-th-label,
  body[data-list-chrome="catalogue"] .cust-table.pb-table thead th .cust-th-sort-link {
    color: var(--muted, #5a6a7d);
    background: var(--th-bg, #eef2f6);
    border-radius: 0 !important;
  }
  /* Catalogue tabs sit above the band inside the same surface (Jobs page-tabs pattern). */
  body[data-list-chrome="catalogue"] .list-chrome-surface > .phone-list-controls .catalogue-page-tabs,
  body[data-list-chrome="catalogue"] .catalogue-page-tabs {
    margin: 0 0 0.55rem;
    width: 100%;
  }
  /* Customers: Columns live in the toolbar band — hide the old in-table sort/cols row. */
  body[data-list-chrome="customers"] .cust-list > .cust-list-toolbar {
    display: none;
  }
  /* Jobs list chrome: Columns live in the toolbar band — hide the old in-table sort/cols row. */
  body[data-list-chrome="jobs"] .jobs-list > .cust-list-toolbar {
    display: none;
  }
  /* Unwrap jobs-desk so band → table is one composition (Quotes/Invoices parity). */
  body[data-list-chrome="jobs"] .jobs-desk {
    display: contents;
  }
  body[data-list-chrome="jobs"] .jobs-page-tabs,
  body[data-list-chrome="tasks"] .jobs-page-tabs,
  body[data-list-chrome="tasks"] .tasks-page-tabs {
    margin: 0 0 0.55rem;
    width: 100%;
  }
  /* Admin/Owner bulk form: no panel inset — table-scroll is the edge.
   * Status chips + Cancel/Completed/DELETE stay in the toolbar band;
   * Owner row carries New job + Columns (bulk-bar-trailing). */
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar.panel,
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar {
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > .bulk-bar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
  }
  /* New job + Columns share the Owner row (right cluster). */
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > .bulk-bar-actions > .bulk-bar-trailing {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    flex: 0 0 auto;
    margin-left: auto;
  }
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > .bulk-bar-actions > .bulk-bar-trailing .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.35rem;
    padding: 0.4rem 0.85rem;
  }
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > .bulk-bar-actions > .bulk-bar-trailing .col-vis-panel {
    flex: 0 0 auto;
    margin: 0;
  }
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > .bulk-bar-actions > .bulk-bar-trailing .col-vis-trigger {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
  body[data-list-chrome="jobs"] .phone-list-content > form.bulk-bar > p.muted {
    display: none !important;
  }
  body[data-list-chrome="quotes"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="invoices"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="jobs"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="tasks"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="kits"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="kits"] .kits-list .list-pager.kits-list-pager,
  body[data-list-chrome="customers"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="enquiries"] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome="enquiries"] .enquiries-bulk-form > .list-pager.quotes-list-pager {
    margin: 0;
    border-left: 1px solid var(--line, #d9dee5);
    border-right: 1px solid var(--line, #d9dee5);
    border-bottom: 1px solid var(--line, #d9dee5);
    border-radius: 0 0 12px 12px;
  }
  body[data-list-chrome="customers"] .cust-list .cust-table {
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  body[data-list-chrome="customers"] .cust-list .cust-table thead th {
    border-top: 0;
    border-radius: 0 !important;
  }
  /* Customers: idle bulk Type / Set type / Archive is a second overlapping row
   * at half-width. Hide until a row is ticked; then one clean apply strip. */
  body[data-list-chrome="customers"] .phone-list-content > form.bulk-bar > .bulk-bar-actions {
    display: none;
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
  }
  body[data-list-chrome="customers"] .phone-list-content > form.bulk-bar:has(.cust-pick:checked) > .bulk-bar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  body[data-list-chrome="customers"] .phone-list-content > form.bulk-bar:has(.cust-pick:checked) > .bulk-bar-actions .bulk-field {
    min-width: 7.5rem;
    max-width: 11rem;
  }
  /* Measure the list surface (not .phone-list-controls — that is display:contents). */
  body[data-list-chrome="customers"] .list-chrome-surface {
    container-type: inline-size;
    container-name: customers-list;
  }
  body[data-list-chrome="customers"] .list-chrome-band-main {
    min-width: 0;
  }
  body[data-list-chrome="customers"] .list-chrome-band-main .list-page-search {
    flex: 1 1 10rem;
    min-width: 8rem;
    max-width: 22rem;
  }
  body[data-list-chrome="customers"] .list-chrome-band-filters {
    flex: 0 1 auto;
    min-width: 0;
  }
  body[data-list-chrome="customers"] .list-chrome-band .list-status-filter .bulk-status-strip {
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  body[data-list-chrome="customers"] .list-chrome-band .list-status-filter .bulk-status-chip {
    flex: 0 0 auto;
  }
  body[data-list-chrome="customers"] .list-chrome-create-short {
    display: none;
  }
  /* label.field is more specific than .list-status-filter-mobile { display:none }. */
  body[data-list-chrome="customers"] .list-chrome-band .list-status-filter-mobile,
  body[data-list-chrome="customers"] .list-chrome-band .list-status-filter-mobile-row {
    display: none !important;
  }
  /* Tasks: flush table like Quotes; strip labels quiet in the band. */
  body[data-list-chrome="tasks"] .task-list {
    margin: 0;
  }
  body[data-list-chrome="tasks"] .task-list > .table-scroll {
    margin: 0;
    border: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0 !important;
    background: var(--white, #fff);
    overflow: auto;
  }
  body[data-list-chrome="tasks"] .task-list .task-table {
    margin: 0;
    border: 0;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  body[data-list-chrome="tasks"] .task-list .task-table thead th {
    border-top: 0;
    border-radius: 0 !important;
  }
  body[data-list-chrome="tasks"] .list-chrome-band .bulk-status-strip-label,
  body[data-list-chrome="tasks"] .list-chrome-band .task-filter-desk .bulk-status-strip-label {
    display: none;
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.is-active,
  body[data-list-chrome="tasks"] .task-filter-desk .list-scope-chip.is-active {
    font-weight: 700;
    border-bottom-color: currentColor;
  }
  /* Open / Done / Normal / Urgent 7d / Soon 30d / Range / No due date — accent text + count (underline band). */
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-open {
    color: var(--sem-chip-open-fg, #6a4308);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-done {
    color: var(--sem-chip-done-fg, #1a5c2e);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-urgent {
    color: var(--sem-chip-urgent-fg, #8a2a12);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-soon {
    color: var(--sem-chip-open-fg, #6a4308);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-normal {
    color: var(--sem-chip-neutral-fg, #4a5568);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-range {
    color: var(--sem-chip-info-fg, #3a4f8a);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip.pill.status-none {
    color: var(--ok-draft-fg, #5a6570);
  }
  body[data-list-chrome="tasks"] .task-filter-desk .bulk-status-chip .bulk-status-count {
    order: 0;
    opacity: 0.85;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
  }
  body[data-list-chrome="tasks"] .phone-list-content > form.bulk-bar > .bulk-bar-actions {
    margin: 0;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
  }
  body[data-list-chrome="quotes"] .quotes-list .quotes-table,
  body[data-list-chrome="invoices"] .invoices-list table,
  body[data-list-chrome="jobs"] .jobs-list .jobs-table,
  body[data-list-chrome="kits"] .kits-list table,
  body[data-list-chrome="enquiries"] .enquiries-list table.enquiries-table,
  body[data-list-chrome="catalogue"] .pb-list table.pb-table {
    margin: 0;
    border-radius: 0 !important;
    overflow: visible !important;
    border: 0;
  }
  body[data-list-chrome="quotes"] .quotes-list .quotes-table thead th,
  body[data-list-chrome="invoices"] .invoices-list table thead th,
  body[data-list-chrome="jobs"] .jobs-list .jobs-table thead th,
  body[data-list-chrome="kits"] .kits-list table thead th,
  body[data-list-chrome="enquiries"] .enquiries-list table thead th,
  body[data-list-chrome="catalogue"] .pb-list .pb-table thead th {
    border-top: 0;
    border-radius: 0 !important;
  }
  /* Close the composition when there is no pager under the table.
   * Quotes/Incoming/Jobs/Invoices/Tasks always ship the Quotes pager — exclude those. */
  body[data-list-chrome="kits"] .kits-list > .table-scroll:not(:has(+ .list-pager)) {
    border-bottom: 1px solid var(--line, #d9dee5);
    border-radius: 0 0 12px 12px !important;
  }
  body[data-list-chrome] .phone-list-content > .bulk-bar,
  body[data-list-chrome="enquiries"] .enquiries-bulk-form > .bulk-bar {
    margin: 0;
    border-radius: 0;
    border-left: 1px solid var(--line, #d9dee5);
    border-right: 1px solid var(--line, #d9dee5);
    border-bottom: 0;
  }
  /* Invoices / Quotes / Pricebook admin: no side frame / empty actions band — table-scroll is the edge. */
  body[data-list-chrome="invoices"] .phone-list-content > form.bulk-bar,
  body[data-list-chrome="quotes"] .phone-list-content > form.bulk-bar,
  body[data-list-chrome="catalogue"] .phone-list-content > form.bulk-bar {
    border: none !important;
    background: transparent;
    padding: 0;
  }
  body[data-list-chrome="invoices"] .phone-list-content > form.bulk-bar > .bulk-bar-actions {
    display: none;
  }
  /* Quotes bulk form: empty actions row — hide so header is flush under the band. */
  body[data-list-chrome="quotes"] .phone-list-content > form.bulk-bar > .bulk-bar-actions:empty {
    display: none;
  }
  body[data-list-chrome="enquiries"] .enquiries-bulk-form {
    margin: 0;
  }
  body[data-list-chrome="enquiries"] .enquiries-bulk-bar {
    padding: 0.45rem 0.65rem;
    border-top: 1px solid var(--line, #d9dee5);
    background: color-mix(in srgb, var(--secondary-bg, #f4f6f8) 55%, var(--white, #fff));
  }
  body[data-list-chrome="enquiries"] .enquiries-bulk-bar.panel,
  body[data-list-chrome="enquiries"] .enquiries-bulk-bar {
    box-shadow: none;
  }
  /* Kits / Tasks: scope chips sit calm inside the toolbar band. */
  body[data-list-chrome] .list-chrome-band .list-scope-bar {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    align-items: center;
  }
  body[data-list-chrome="tasks"] .list-chrome-band .task-filter-desk {
    margin: 0;
  }
  body[data-list-chrome="tasks"] .list-chrome-band .task-filter-desk > .list-status-filter,
  body[data-list-chrome="tasks"] .list-chrome-band .task-filter-desk > .panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 55.99rem) {
  /* Portrait list chrome: no horizontal page spill. */
  body[data-list-chrome] .phone-list-layout,
  body[data-list-chrome] .list-chrome-band,
  body[data-list-chrome] .phone-list-content,
  body[data-list-chrome] .list-phone-rows {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  body[data-list-chrome] .list-chrome-band,
  body[data-list-chrome] .list-chrome-band.list-chrome-band--toolbar {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 12px;
    border: 1px solid var(--line, #d9dee5);
    margin: 0 0 0.55rem;
    gap: 0.55rem;
  }
  /* Don't keep desk flex-basis 16rem — short phone filter strips leave a tall blank. */
  body[data-list-chrome] .list-chrome-band-filters {
    flex: 0 1 auto;
    width: 100%;
  }
  body[data-list-chrome] .list-chrome-band-main {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  body[data-list-chrome] .list-chrome-band-mid {
    width: 100%;
    margin: 0;
    justify-content: space-between;
    align-items: center;
  }
  body[data-list-chrome] .list-chrome-band-phone-menu {
    display: block;
    flex: 0 0 auto;
  }
  /*
   * Dual-chrome prohibition (§4): hide desk band actions on phone.
   * Create → phone-top .phone-page-create; Columns / Sort / fields → ⋮ only.
   * Never show New + Columns here alongside phone Status select / ⋮.
   */
  body[data-list-chrome] .list-chrome-band-actions {
    display: none !important;
  }
  body[data-list-chrome] .list-chrome-band .list-status-filter {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-list-chrome] .list-chrome-band .bulk-status-strip-label,
  body[data-list-chrome] .list-chrome-band .list-status-filter-hint {
    display: none;
  }
  body[data-list-chrome] .list-chrome-band-main .list-page-search,
  body[data-list-chrome] .list-chrome-tools .list-page-search {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
  body[data-list-chrome="quotes"] .quotes-list > .table-scroll,
  body[data-list-chrome="invoices"] .invoices-list > .table-scroll,
  body[data-list-chrome="jobs"] .jobs-list > .table-scroll,
  body[data-list-chrome="enquiries"] .enquiries-list > .table-scroll {
    display: none !important;
  }
  body[data-list-chrome="quotes"] .quotes-list > .list-phone-rows,
  body[data-list-chrome="invoices"] .invoices-list > .list-phone-rows,
  body[data-list-chrome="jobs"] .jobs-list > .list-phone-rows,
  body[data-list-chrome="enquiries"] .enquiries-list > .list-phone-rows {
    display: flex;
    margin: 0;
  }
  /*
   * NEVER display:none the list-wrapping form.bulk-bar — Owners/admins wrap
   * table + .list-phone-rows + pager inside it. Hiding the form blanks every
   * list on phone (P0 / #179-class regression). Bulk chrome is already stripped
   * via .bulk-bar-actions / checks / .list-permanent-delete above.
   * Incoming toolbar-only .enquiries-bulk-form > .bulk-bar stays hidden elsewhere.
   */
  body[data-list-chrome] .phone-list-content > form.bulk-bar,
  body[data-list-chrome] .phone-list-content > .bulk-bar {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }
  /* Quotes-style pager: wrap, never sideways-scroll the page. */
  body[data-list-chrome] .phone-list-content > .list-pager.quotes-list-pager,
  body[data-list-chrome] .phone-list-content > form.bulk-bar > .list-pager.quotes-list-pager {
    flex-wrap: wrap;
    max-width: 100%;
    overflow-x: clip;
    gap: 0.35rem 0.55rem;
  }
}

/* Customers list chrome: collapse cleanly when the list (not the window) is half-width. */
@container customers-list (max-width: 58rem) {
  .list-chrome-mid-secondary {
    display: none;
  }
  .list-chrome-band-main .list-page-search {
    flex: 1 1 8rem;
    min-width: 7rem;
    max-width: 14rem;
  }
}
@container customers-list (max-width: 44rem) {
  .list-chrome-create-full {
    display: none;
  }
  .list-chrome-create-short {
    display: inline;
  }
  .list-status-filter .bulk-status-count {
    display: none;
  }
}

/* Viewport fallback — split-screen ~900px is just inside desk chrome (56rem). */
@media (min-width: 56rem) and (max-width: 72rem) {
  body[data-list-chrome="customers"] .list-chrome-mid-secondary {
    display: none;
  }
  body[data-list-chrome="customers"] .list-chrome-band-main .list-page-search {
    flex: 1 1 8rem;
    min-width: 7rem;
    max-width: 14rem;
  }
}
@media (min-width: 56rem) and (max-width: 62rem) {
  body[data-list-chrome="customers"] .list-chrome-create-full {
    display: none;
  }
  body[data-list-chrome="customers"] .list-chrome-create-short {
    display: inline;
  }
  body[data-list-chrome="customers"] .list-chrome-band .bulk-status-count {
    display: none;
  }
}


/* Work Setup — public holiday day-top banners (not booking chips) */
.sched-holiday-banner {
  display: block;
  margin-top: 0.15rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
  color: #6b3a14;
  background: #f3e0c8;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.week-day-head.has-holiday,
.sched-matrix-day-head.has-holiday {
  align-self: stretch;
}
.week-day-head .week-day-label,
.sched-matrix-day-head .week-day-label { display: block; }
.sched-month-holiday {
  margin: 0.15rem 0.25rem 0.2rem;
  font-size: 0.62rem;
}
.sched-month-cell.has-holiday { box-shadow: inset 0 2px 0 #d4a574; }
.sched-holiday-warn,
.sched-weekend-warn { margin: 0 0 0.75rem; }
.sched-days-available { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; }
.sched-hours-override-row {
  display: grid;
  grid-template-columns: 3rem 1fr 1fr;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 0.5rem;
}
.sched-custom-holiday-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.sched-custom-holiday-list li {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.35rem 0; border-bottom: 1px solid var(--line, #ddd);
}

/* Work setup → Required documents: keep include ticks on one horizontal row. */
.doc-include-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
  align-items: center;
}
.doc-include-flags label.inline {
  margin: 0;
  white-space: nowrap;
}
.doc-policy-table .doc-include-flags {
  min-width: 16rem;
}
.doc-policy-table input.doc-exp-warn {
  outline: 1px solid var(--warn, #b45309);
}

/* Supplier-service tasks (network DNSP + job equipment) */
.supplier-network-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #dce8f5;
  color: #1a3a5c;
  vertical-align: middle;
}
.supplier-service-chip {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--green-dark);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--green) 50%, transparent);
}
.supplier-service-chip:hover { color: var(--green); }
.add-task-supplier-service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  grid-column: 1 / -1;
}
.add-task-supplier-hint { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; }
.job-equipment { margin-top: 1rem; }
.job-equip-table input[name="serial"] { min-width: 8rem; }
.job-equip-serial { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.job-nmi-form { margin-bottom: 0.75rem; }
.job-copy-pack { margin: 0.75rem 0 1rem; }
.job-copy-pack-body {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--th-bg);
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}
@media (max-width: 720px) {
  .add-task-supplier-service { grid-template-columns: 1fr; }
}

/* Solar commissioning form */
.scf-form .scf-sn {
  font: 600 1.15rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  border: 2px solid var(--accent, #1b3f8f);
}
.scf-unit-hd {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.scf-ph-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.scf-photo-slot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  background: var(--panel-bg, var(--th-bg, #fff));
}
.scf-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.scf-photo-tile {
  margin: 0;
  position: relative;
}
.scf-photo-frame {
  position: relative;
}
.scf-photo-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  background: #dfe6ec;
}
.scf-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: #dfe6ec;
  color: var(--muted, #51606d);
  font-size: 0.9rem;
}
.scf-photo-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: rgba(18, 32, 44, 0.72);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.scf-photo-tile:hover .scf-photo-x,
.scf-photo-tile:focus-within .scf-photo-x,
.scf-photo-x:focus {
  opacity: 1;
}
.scf-photo-rename {
  display: block;
  margin-top: 6px;
}
.scf-photo-rename input {
  width: 100%;
  font-size: 0.85rem;
}
.scf-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.scf-form .file-btn { cursor: pointer; }
.scf-form .file-btn input[type="file"] { display: none; }
.scf-ck {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.scf-ck-line { font-size: 0.95rem; }
.scf-ck-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: flex-end;
}
.scf-ck-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 2px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.92rem;
}
.scf-ck-opt input { margin: 0; }
.scf-add-units { display: flex; flex-wrap: wrap; gap: 8px; }
.scf-unit-body[hidden],
.scf-not-installed[hidden],
.scf-panels-body[hidden],
.scf-panels [data-scf-panels-not-installed][hidden] { display: none !important; }
.scf-unit-body { margin-top: 8px; }
.scf-strings-hd { margin: 12px 0 6px; font-size: 1rem; }
.scf-string-row {
  display: grid;
  grid-template-columns: auto 120px 1fr;
  gap: 8px 12px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.scf-string-label {
  font-weight: 600;
  padding-bottom: 10px;
  white-space: nowrap;
}
.job-forms-main-status { font-weight: 600; color: var(--ink, inherit); }
@media (max-width: 720px) {
  .scf-string-row { grid-template-columns: 1fr; }
  .scf-string-label { padding-bottom: 0; }
}
.ti-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.ti-photo { margin: 0; }
.ti-photo img { width: 100%; height: auto; border-radius: 4px; }
.ti-photo figcaption { font-size: 0.85rem; color: var(--muted, #51606d); }
@media (max-width: 720px) {
  .scf-ck { grid-template-columns: 1fr; }
  .scf-ck-choices { justify-content: flex-start; }
  .scf-photo-x { opacity: 1; }
}

/* Catalogue kit editor — shared section chrome, single-section mode */
.doc-builder.is-kit-editor .db-details {
  grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
  align-items: end;
}
.doc-builder.is-kit-editor .db-details .db-wide { grid-column: 1 / -1; }
.doc-builder.is-kit-editor .db-details .kit-category-picker,
.doc-builder.is-kit-editor .db-details .kit-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.doc-builder.is-kit-editor .db-details .kit-category-input,
.doc-builder.is-kit-editor .db-details .kit-type-input { flex: 1 1 6rem; min-width: 0; }
.doc-builder.is-kit-editor .db-inline-title.is-static {
  display: inline-block;
  font-weight: 600;
  padding: 0.15rem 0;
}
.doc-builder.is-kit-editor .db-finish { justify-content: flex-end; }
.doc-window[data-kit-editor="1"] .kit-duplicate-cue,
.doc-builder.is-kit-editor .kit-duplicate-cue {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.4rem;
  background: #fff7e6;
  border: 1px solid #f0d9a8;
}
@media (max-width: 720px) {
  .doc-builder.is-kit-editor .db-details {
    grid-template-columns: 1fr;
  }
}