/* ===== DESIGN TOKENS ===== */
:root {
  color-scheme: light;

  /* Canvas */
  --bg: #fdf8f6;
  --panel: #FFFFFF;
  --panel-soft: #f7f3f0;

  /* Typography */
  --ink: #1c1b1a;
  --ink-2: #65645F;
  --muted: #65645F;

  /* Borders */
  --line: rgba(28, 27, 26, 0.08);
  --line-strong: rgba(28, 27, 26, 0.16);

  /* Brand palette (unified design system) */
  --primary: #005ab3;
  --accent-deep: #0064E3;
  --surface: #fdf8f6;
  --ink-tertiary: #9A9994;
  --success: var(--mid-ok, #30D158);
  --warning: #FF9F0A;
  --danger-strong: var(--mid-danger, #FF453A);
  --outline-variant: #c0c6d6;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-card: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(40px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px -8px rgba(28, 27, 26, 0.10);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --field-bg: rgba(255, 255, 255, 0.9);

  /* Type scale (Inter) */
  --fs-display: 34px; --fs-title1: 28px; --fs-title2: 22px; --fs-title3: 18px;
  /* Legacy --fs-* scale, now ALIGNED to the --t-* scale below. These two token
     sets disagreed (12 vs 11.5 caption, 10 vs 11.5 micro), so the same role
     rendered at a different size depending on which token a rule happened to
     use — the single biggest source of the drift the owner reported 2026-08-13. */
  --fs-body-lg: 16px; --fs-body: 14px; --fs-body-sm: 13px; --fs-caption: 11.5px; --fs-micro: 11.5px;

  /* Aliases that were referenced throughout but never defined (15+ usages were
     silently invalid → text inherited the wrong color). Keep them pointed at the
     real tokens so every var(--ink-muted)/var(--ink-secondary) resolves. */
  --ink-muted: var(--muted);
  --ink-secondary: var(--ink-2);

  /* Icon scale (Material Symbols) */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;

  /* Motion — one shared system (used by the UI-polish layer at the end of file) */
  --dur-1: 120ms;   /* micro: press, hover, toggles */
  --dur-2: 200ms;   /* standard: popovers, fades, page-in */
  --dur-3: 320ms;   /* large: panels, modals, list entrances */
  --dur-4: 480ms;   /* hero: bar growth, count-up */
  /* The DEFAULT curve. 20 transition rules referenced `var(--ease)` (via a
     `var(--ease)` typo), and it was never defined — so the browser threw those
     whole declarations away and the elements snapped with no animation at all. Most
     visibly: the lime nav pill TELEPORTED between tabs on a phone instead of gliding.
     Defined here as the standard ease-out (audit, 2026-08-13). */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Status pastels */
  --pale-blue: #E1F3FE;
  --pale-blue-ink: #1F6C9F;
  --pale-green: #EDF3EC;
  --pale-green-ink: var(--mid-ok, #346538);
  --pale-red: #FDEBEC;
  --pale-red-ink: #9F2F2D;
  --pale-yellow: #FBF3DB;
  --pale-yellow-ink: #956400;

  /* Danger */
  --danger: #9F2F2D;

  /* Fonts — unified on Inter */
  /* ONE typeface app-wide (audit 2026-08-06): Schibsted is the base, Inter the
     fallback. The per-page overrides became no-ops and the Dashboard↔Chat font
     flip is gone. */
  /* Outfit — the geometric sans from the owner's reference (circular zeros, even
     strokes, a light 300 that carries the big numbers). One family app-wide, per
     the standing single-font rule; Schibsted stays as the immediate fallback so
     nothing reflows badly if Outfit fails to load. */
  --sans: "Outfit", "Schibsted Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* system mono — nothing custom is loaded */

  /* Elevation — ultra-diffuse only */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== BASE RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(135deg, #fdf8f6 0%, #eef6ff 100%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Soft drifting orbs behind everything (global) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 6% 4%, rgba(0,116,224,0.08) 0%, transparent 70%),
    radial-gradient(40% 40% at 98% 96%, rgba(255,159,10,0.07) 0%, transparent 70%);
}

button, input, select, textarea {
  font: inherit;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-family: var(--sans);
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ink);
}

h2 {
  font-family: var(--sans);
  font-size: var(--fs-title3);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ink);
}

/* ===== MATERIAL ICONS ===== */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ===== SIDEBAR ===== */
.app-sidebar {
  position: fixed;
  inset: 14px auto 14px 14px;
  z-index: 50;
  display: flex;
  width: 236px;
  flex-direction: column;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: var(--mid-surface-2, #ffffff);
  box-shadow: 0 32px 64px -16px rgba(28, 27, 26, 0.12);
  padding: 24px 16px 18px;
}

.brand-block {
  display: grid;
  gap: 3px;
  padding: 0 8px 22px;
  margin-bottom: 12px;
}

.brand-block strong {
  font-family: var(--sans);
  font-size: var(--fs-title3);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.brand-block span {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 4px;
  padding: 0;
}

.nav-item {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  color: var(--ink-secondary, #65645F);
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.nav-item .material-symbols-outlined {
  font-size: 23px;
  color: var(--ink-tertiary, #9A9994);
  transition: color 160ms var(--ease);
}

.nav-item:hover {
  background: var(--surface-container-lowest, #fff);
  color: var(--ink);
}
.nav-item:hover .material-symbols-outlined { color: var(--ink); }

.nav-item.active {
  background: var(--surface-container-low, #f7f3f0);
  color: var(--primary, #005ab3);
  font-weight: 700;
}
.nav-item.active .material-symbols-outlined { color: var(--primary, #005ab3); }
/* trailing dot indicator on the active item */
.nav-item.active::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--primary, #005ab3);
}

.sidebar-bottom {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--surface-container, #f2edeb);
}

/* ── "+" create menu (New Quote / New Deal / New Contact) ─────────────── */
.create-menu { position: relative; }
.create-fab {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #005ab3);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0, 90, 179, 0.45);
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}
.create-fab:hover { background: var(--accent-deep, #0064E3); }
.create-fab:active { transform: scale(0.94); }
.create-fab .material-symbols-outlined { font-size: 26px; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
.create-fab.is-open .material-symbols-outlined { transform: rotate(45deg); }

.create-menu-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--glass-border, rgba(28, 27, 26, 0.08));
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(28, 27, 26, 0.22);
  z-index: 60;
}
.create-menu-pop[hidden] { display: none; }
.create-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1c1b1a);
  cursor: pointer;
  text-align: left;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.create-menu-item:hover { background: var(--surface-container-low, #f7f3f0); color: var(--primary, #005ab3); }
.create-menu-item .material-symbols-outlined { font-size: 20px; color: var(--ink-tertiary, #9A9994); }
.create-menu-item:hover .material-symbols-outlined { color: var(--primary, #005ab3); }

.new-quote-link {
  justify-content: center;
  text-decoration: none;
}

.logout {
  width: 100%;
}

/* ===== TOPBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-left: 264px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: 0 32px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.search-shell {
  position: relative;
  width: min(100%, 380px);
}

.search-shell .material-symbols-outlined {
  position: absolute;
  left: 11px;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
  font-size: 18px;
}

.search-shell input {
  width: 100%;
  height: 35px;
  padding-left: 38px;
  border-radius: 6px;
  background: var(--panel-soft);
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--ink);
}

.search-shell input:focus {
  background: var(--panel);
  border-color: var(--line-strong);
  box-shadow: none;
}

/* ── Global top-bar search results dropdown (deals + contacts) ────────────────
   Dark to match the midnight app; wider than the (sometimes 160px) input so
   results stay readable on mobile. */
.global-search-results {
  position: fixed;            /* body-level; JS sets top/left/width from the input rect */
  top: 64px;
  left: 16px;
  width: min(440px, calc(100vw - 24px));
  z-index: 150;              /* above page content, FABs (72) & menus; below modals (200) */
  background: #1b2024;       /* fully opaque — never let the page show through */
  background: var(--mid-surface-2, #1b2024);
  border: 1px solid var(--mid-line, #3e484f);
  border-radius: 12px;
  box-shadow: 0 18px 48px -10px rgba(0,0,0,0.7);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 6px;
}
.global-search-results[hidden] { display: none; }
.gs-group-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mid-muted, #87929a); padding: 8px 10px 4px; }
.gs-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; color: var(--mid-text, #dee3e8); }
.gs-opt:hover, .gs-opt.active { background: var(--mid-surface-3, #252b2e); }
.gs-opt-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gs-opt-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mid-text, #dee3e8); }
.gs-opt-sub { font-size: 11.5px; color: var(--mid-muted, #87929a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-opt-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted, #87929a); flex: none; }
.gs-empty, .gs-hint { padding: 16px 12px; text-align: center; color: var(--mid-muted, #87929a); font-size: 13px; }

/* ── Mobile: the global top-bar search collapses to just the magnifier icon
   (it appears on every screen). Tapping it expands the field to type. No JS. */
@media (max-width: 960px) {
  /* At rest: a BARE magnifier — no box/enclosure at all (transparent shell + input,
     no border/shadow). `body` prefix + !important beat the dash-active search-shell
     background/width rules. Tapping expands it into a normal search field. */
  body .topbar .search-shell {
    width: 38px !important; max-width: none !important;
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    transition: width .22s var(--ease);
  }
  body .topbar .search-shell input {
    padding-left: 34px; cursor: pointer;
    background: transparent !important; border-color: transparent !important;
  }
  body .topbar .search-shell input::placeholder { color: transparent; }
  body .topbar .search-shell .material-symbols-outlined { left: 50%; transform: translate(-50%, -50%); transition: left var(--dur) var(--ease); pointer-events: none; }
  /* Tapped (expanded): restore the field enclosure + room to type. */
  body .topbar .search-shell:focus-within {
    width: auto !important; max-width: min(78vw, 340px) !important; flex: 1 1 auto;
    background: #252b2e !important; border: 1px solid #3e484f !important; border-radius: 9999px !important;
  }
  body .topbar .search-shell:focus-within input { cursor: text; background: transparent !important; }
  body .topbar .search-shell:focus-within input::placeholder { color: var(--mid-muted, #87929a); }
  body .topbar .search-shell:focus-within .material-symbols-outlined { left: 11px; transform: translate(0, -50%); }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
}

.topbar-actions .material-symbols-outlined {
  cursor: pointer;
  transition: color 140ms var(--ease);
}

.topbar-actions .material-symbols-outlined:hover {
  color: var(--ink);
}

.profile-dot {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: var(--primary, #005ab3);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.profile-dot:hover { box-shadow: 0 0 0 4px rgba(0, 90, 179, 0.12); }
.profile-dot:active { transform: scale(0.94); }

/* Top-right profile dropdown (Sign out) */
.profile-menu { position: relative; }
.profile-menu-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--glass-border, rgba(28, 27, 26, 0.08));
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(28, 27, 26, 0.22);
  z-index: 70;
}
.profile-menu-pop[hidden] { display: none; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1c1b1a);
  cursor: pointer;
  text-align: left;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.profile-menu-item:hover { background: var(--surface-container-low, #f7f3f0); color: inherit; }
.profile-menu-item .material-symbols-outlined { font-size: 19px; color: var(--ink-tertiary, #9A9994); }
.profile-menu-item:hover .material-symbols-outlined { color: var(--ink-tertiary, #9A9994); }

/* ===== SHELL ===== */
.shell {
  margin-left: 264px;
  padding: 36px 40px 72px;
}

/* ===== PAGE HEADING ===== */
.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== STATUS PANEL ===== */
.status-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 20px;
}

.status-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.status-row strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.status-row p,
.note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 9999px;
  background: var(--pale-yellow-ink);
  box-shadow: 0 0 0 4px rgba(149, 100, 0, 0.12);
}

.dot.ready {
  background: var(--pale-green-ink);
  box-shadow: 0 0 0 4px rgba(52, 101, 56, 0.12);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metric-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.metric-grid span {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.metric-grid small,
label small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===== GRID LAYOUTS ===== */
.dashboard-grid,
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr);
  gap: 20px;
  align-items: start;
}

.lower {
  margin-top: 20px;
}

.side-stack {
  display: grid;
  gap: 16px;
}

/* ===== PANELS ===== */
.panel,
.status-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel-heading.compact {
  align-items: center;
  margin-bottom: 16px;
}

/* ===== BUTTONS ===== */
.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 80ms var(--ease);
  -webkit-user-select: none;
  user-select: none;
}

.button:hover {
  background: var(--panel-soft);
  border-color: rgba(0, 0, 0, 0.14);
}

.button:active {
  transform: scale(0.98);
}

.button.primary {
  border-color: transparent;
  background: var(--ink);
  color: #ffffff;
}

.button.primary:hover {
  background: #333333;
}

.button.ghost {
  background: transparent;
  border-color: var(--line);
}

.button.ghost:hover {
  background: var(--panel-soft);
}

.button.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11.5px;
}

.button.danger {
  border-color: rgba(159, 47, 45, 0.22);
  color: var(--danger);
  background: var(--pale-red);
}

.button.danger:hover {
  border-color: rgba(159, 47, 45, 0.4);
  background: #fde0e0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ===== FORMS ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 6px;
  /* Pack to the top: grid cells stretch labels to the row height, and the default
     align-content:stretch pads the extra space BETWEEN the label's rows — so a
     field WITH help text sat at a different height than its hintless neighbour
     (owner 2026-08-11). */
  align-content: start;
}

label span,
.field-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.field-title {
  display: block;
  margin-bottom: 10px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  color: var(--ink);
  background: var(--panel-soft);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}

input,
select {
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.4;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  background: var(--panel);
}

.section-rule {
  height: 1px;
  margin: 24px 0;
  background: var(--line);
}

.toggle-row {
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  cursor: pointer;
}

.toggle-row input {
  width: 16px;
  height: 16px;
}

.codebox {
  min-height: 72px;
  margin: 0 0 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== CHECKLIST ===== */
.checklist {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.checklist li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ===== PILLS / BADGES ===== */
.pill {
  flex: 0 0 auto;
  border-radius: 9999px;
  padding: 3px 8px;
  background: var(--pale-yellow);
  color: var(--pale-yellow-ink);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pill.ready {
  background: var(--pale-green);
  color: var(--pale-green-ink);
}

/* ===== TEXTAREA ===== */
textarea {
  min-height: 360px;
  resize: vertical;
  padding: 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}

.quote-textarea {
  min-height: 120px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}

.quote-notes {
  margin-top: 16px;
}

/* ===== OPTION GRIDS ===== */
.option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.compact-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.choice-chip {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.choice-chip:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--panel);
}

.choice-chip input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.choice-chip span {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

/* ===== EVENT DETAILS ===== */
.event-detail-list {
  margin-top: 16px;
}

.event-detail-form {
  display: grid;
  gap: 6px;
}

.event-detail-head,
.event-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 72px 72px minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  gap: 8px;
  align-items: center;
}

.event-detail-head {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
}

.event-detail-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-soft);
}

.event-detail-row strong {
  font-size: 13px;
}

.field-row-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

/* ===== PACKAGES ===== */
.package-list,
.package-form {
  display: grid;
  gap: 12px;
}

.package-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel-soft);
}

.package-card-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(100px, 0.22fr) minmax(130px, 0.3fr) minmax(100px, 0.22fr) auto;
  gap: 10px;
  align-items: end;
}

.package-event-head,
.package-event-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(80px, 0.45fr) minmax(80px, 0.45fr) minmax(90px, 0.5fr) minmax(90px, 0.5fr) minmax(200px, 1.1fr);
  gap: 8px;
  align-items: center;
}

.package-event-head {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.package-event-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel);
}

.package-event-row strong {
  font-size: 13px;
}

.package-addons {
  display: grid;
  gap: 8px;
}

.inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--panel-soft);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.mini-check input {
  width: 14px;
  height: 14px;
}

/* ===== QUEUE & ACTIVITY LISTS ===== */
.queue-list,
.activity-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.empty {
  padding: 14px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.queue-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel-soft);
  transition: box-shadow 200ms var(--ease);
}

.queue-item:hover {
  box-shadow: var(--shadow-hover);
}

.queue-item strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 13px;
}

.queue-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ===== COMPACT CLICKABLE ACTIVITY CARDS ===== */
.activity-item {
  display: block;
  background: var(--panel);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.activity-item:last-child {
  border-bottom: none;
}

.card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 20px;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  transition: background 150ms var(--ease);
}

.activity-item:hover .card-row,
.activity-item:focus-visible .card-row {
  background: var(--panel-soft);
}

.activity-item:focus-visible {
  outline: 2px solid #1F6C9F;
  outline-offset: -2px;
}

.card-name strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.card-meta {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.activity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.card-next-action {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  font-style: italic;
}

.card-chevron {
  font-size: 18px;
  color: var(--muted);
  transition: transform 250ms var(--ease);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-item[aria-expanded="true"] .card-chevron {
  transform: rotate(180deg);
}

/* ===== EXPAND BODY ===== */
.activity-expand-body {
  border-top: 1px solid var(--line);
  padding: 14px 16px 12px;
  background: var(--panel-soft);
}

.expand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px 24px;
  margin-bottom: 10px;
}

.expand-section-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.expand-details p,
.expand-summary p {
  font-size: 13px;
  margin: 0 0 3px;
  color: var(--ink-2);
  line-height: 1.5;
}

.expand-label {
  color: var(--muted);
  font-size: 11.5px;
  margin-right: 4px;
}

.expand-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

/* Delete buttons in expand body — subtle */
.activity-expand-body .button.danger {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  min-height: 22px;
  padding: 0 6px;
}

.activity-expand-body .button.danger:hover {
  border-color: rgba(159, 47, 45, 0.25);
  color: var(--pale-red-ink);
  background: var(--pale-red);
}

/* ===== SECTION PANELS ===== */
.manual-quote-panel,
.setup-panel {
  margin-top: 20px;
}

/* ===== QUOTE RESULT ===== */
.quote-result {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-soft);
}

.quote-result strong {
  display: block;
  margin-bottom: 5px;
}

.quote-result p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pricing-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
}

.pricing-breakdown th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--line);
}

.pricing-breakdown td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pricing-breakdown tfoot td {
  border-top: 1px solid var(--line-strong);
  border-bottom: none;
  padding-top: 8px;
  font-weight: 700;
  color: var(--ink);
}

.crm-status {
  margin: 8px 0 0;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.crm-ok {
  background: var(--pale-green);
  color: var(--pale-green-ink);
}

.crm-error {
  background: var(--pale-red);
  color: var(--pale-red-ink);
}

.package-result-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.quote-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ===== WORKFLOW CARD ===== */
.workflow-card .switch-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.switch-list div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

.switch-list strong {
  color: var(--pale-green-ink);
  font-size: 11.5px;
  font-weight: 700;
}

/* ===== HYGIENE CARD ===== */
.hygiene-card {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}

.hygiene-card h2 {
  color: #fff;
}

.hygiene-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.hygiene-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
}

/* ===== BANNER ===== */
.banner {
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.banner.error {
  border-color: rgba(159, 47, 45, 0.24);
  background: var(--pale-red);
  color: var(--pale-red-ink);
}

/* ===== LOGIN PAGE ===== */
/* ── Login — sage card on the app canvas (matches dashboard look, both themes) ── */
/* Login canvas follows the APP canvas, not the legacy --mid-base bone. The
   inline block in login.html sets this too, but this rule is later in the
   cascade and was quietly winning. */
.login-body { background: var(--kb-canvas, #f4f4f2); }
.login-shell {
  display: grid; min-height: 100dvh; place-items: center; padding: 24px;
  background: var(--mid-base);
  font-family: var(--sans);
}
.login-panel {
  display: grid; width: min(100%, 408px); gap: 14px;
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  border-radius: 22px; padding: 32px 30px;
  box-shadow: var(--mid-shadow, 0 18px 50px -20px rgba(0,0,0,0.35));
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-mark {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
  display: grid; place-items: center; font-size: 24px;
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
}
.login-brand strong { display: block; font-size: 14px; font-weight: 600; color: var(--mid-text); line-height: 1.2; }
.login-brand > div span { font-size: 11.5px; color: var(--mid-muted); }
.login-title { margin: 4px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); }
.login-lede { margin: 0 0 6px; font-size: 13px; color: var(--mid-text-2); }
.login-field { display: grid; gap: 7px; }
.login-field > span { font-size: 13px; font-weight: 500; color: var(--mid-text-2); }
.login-field input {
  width: 100%; box-sizing: border-box; font-size: 16px; font-family: inherit;
  padding: 13px 15px; border-radius: 12px;
  /* Bone fill (visible on the white card) + NO border line. */
  background: var(--mid-base); border: 1px solid transparent; color: var(--mid-text);
}
.login-field input::placeholder { color: var(--mid-muted); }
.login-field input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)); }
/* Chrome autofill paints a pale blue/yellow fill + dark text that ignores our
   colours. Mask it: an inset shadow of our bone fill + force the text colour. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:active {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-text); border: 1px solid transparent !important;
  transition: background-color 9999s var(--ease) 0s;
}
.login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base), 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
.login-banner {
  font-size: 13px; padding: 10px 14px; border-radius: 12px;
  background: rgba(159,47,45,0.12); border: 1px solid rgba(159,47,45,0.3); color: #c75b59;
}
.login-banner[hidden] { display: none; }
.login-submit {
  margin-top: 6px; width: 100%; padding: 13px 18px; border: none; cursor: pointer;
  border-radius: 9999px; font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
  transition: filter var(--dur-1, var(--dur-fast)) var(--ease), transform var(--dur-1, var(--dur-fast)) var(--ease);
}
.login-submit:hover { filter: brightness(0.97); }
.login-submit:active { transform: scale(0.99); }

/* ===== CRM CONTACT LOOKUP ===== */
.crm-lookup-block {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.crm-lookup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.crm-lookup-header span:first-child {
  font-size: 16px;
  color: var(--muted);
}

.crm-lookup-header > span:nth-child(2) {
  flex: 1;
}

.crm-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.contact-results {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.contact-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}

.contact-result-item:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--panel-soft);
}

.contact-result-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.contact-result-item small {
  color: var(--muted);
  font-size: 11.5px;
}

.selected-contact-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  background: var(--panel);
  font-size: 13px;
}

.selected-contact-chip strong {
  flex: 1;
  font-size: 14px;
}

.selected-contact-chip small {
  color: var(--muted);
  font-size: 11.5px;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 1100px) {
  .dashboard-grid,
  .workspace,
  .page-heading {
    grid-template-columns: 1fr;
  }

  .option-grid,
  .compact-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .shell {
    padding: 28px 28px 72px;
  }
}

/* ===== RESPONSIVE — MOBILE + PORTRAIT TABLET (phone shell to 960: the
   769–960 band used to keep the desktop sidebar and overflowed sideways) ===== */
@media (max-width: 960px) {
  /* Sidebar becomes a floating glass pill at the bottom */
  .app-sidebar {
    position: fixed;
    inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    width: auto;
    height: 64px;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 32px;
    padding: 0 6px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 12px 32px -8px rgba(28, 27, 26, 0.18);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
  }

  .brand-block,
  .sidebar-bottom {
    display: none;
  }

  /* Mobile pill shows 4 daily tabs + a "More" menu. Tickets/Contacts live in
     More; Setup stays desktop-only. */
  /* MOBILE BOTTOM BAR = exactly 5 cells: Dashboard · Leads · Chat · Calendar · More.
     The grid is repeat(5,1fr); anything beyond 5 visible items wraps to a second row
     and the bar breaks (it was rendering 8 across 2 rows). Everything hidden here is
     reachable from the "More" sheet — never hide a page without a route to it. */
  .nav-item[data-page="setup"],
  .nav-item[data-page="tickets"],
  .nav-item[data-page="tasks"],
  .nav-item[data-page="projects"],
  .nav-item[data-page="finance"],
  .nav-item[data-page="quotes"],
  .nav-item[data-page="contacts"] { display: none; }
  .nav-more-btn { display: flex !important; }
  .nav-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    padding: 0;
    gap: 0;
    align-items: center;
  }

  .nav-item {
    flex-direction: column;
    min-height: 0;
    height: 52px;
    align-self: center;
    gap: 3px;
    border-radius: 16px;
    padding: 6px 2px;
    font-size: 11.5px;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--ink-secondary, #65645F);
  }

  .nav-item.active {
    background: rgba(0, 90, 179, 0.1);
    color: var(--primary, #005ab3);
    font-weight: 700;
  }
  .nav-item.active::after { display: none; }

  .nav-item .material-symbols-outlined {
    font-size: 24px;
    color: inherit;
  }
  .nav-item.active .material-symbols-outlined { color: var(--primary, #005ab3); }

  .topbar {
    margin-left: 0;
    padding: 0 20px;
    min-height: 52px;
  }

  /* THE MARK ON A PHONE (owner 2026-08-16: "on mobile ui i dont see the logo").
     .brand-block lives inside the sidebar, and the sidebar becomes the floating bottom
     nav at this width — so hiding it (just below) took the logo off the phone entirely.
     CSS cannot move an element to another parent, so the bar carries the mark itself.
     Masked, never drawn: a mask reads only the file's alpha and takes its colour from
     here, so the mark can never disappear because the artwork's own ink matches the bar —
     the same fault that hid it on the desktop app in August. */
  .topbar::before {
    content: ""; flex: 0 0 auto; display: block;
    width: 62px; height: 22px;
    background-color: var(--shellbar-text, var(--ink));
    -webkit-mask: url("assets/logo.png?v=20260826z") left center / contain no-repeat;
    mask: url("assets/logo.png?v=20260826z") left center / contain no-repeat;
  }
  /* Search gives up the width, so nothing else on the bar is squeezed out. */
  .topbar .search-shell { min-width: 0; flex: 1 1 auto; }

  .shell {
    margin-left: 0;
    padding: 20px 20px calc(104px + env(safe-area-inset-bottom)); /* room for floating bottom nav */
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .option-grid,
  .compact-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-head,
  .event-detail-row,
  .package-card-head,
  .package-event-head,
  .package-event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-head,
  .package-event-head {
    display: none;
  }

  .panel-heading,
  .quote-result {
    display: grid;
  }

  /* Activity card row — collapse to 2-col on mobile */
  .card-row {
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
  }

  .card-row .activity-pills {
    grid-column: 1;
    justify-content: flex-start;
  }

  .card-next-action {
    display: none;
  }

  .expand-grid {
    grid-template-columns: 1fr;
  }

  .activity-expand-body .button.danger {
    width: auto;
  }

  .quote-links {
    justify-content: flex-start;
  }

  /* Only widen primary action buttons on mobile, not every button */
  .panel-heading .button.primary,
  .manual-quote-panel > .panel-heading .button.primary,
  .setup-panel .button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .search-shell {
    max-width: 160px;
  }

  /* On very small screens hide nav text, show icons only */
  .nav-item {
    font-size: 0; /* hides text */
    gap: 0;
  }

  .nav-item .material-symbols-outlined {
    font-size: 24px;
  }
}

/* ===== PAGE SWITCHING ===== */
.page
[hidden] { display: none !important; }

/* ===== KANBAN BOARD ===== */
.kanban-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 24px;
  align-items: flex-start;
  /* Prevent columns from shrinking */
  min-height: 0;
}

.kanban-col {
  flex: 0 0 280px;
  min-width: 0;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.col-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.col-marker.new       { background: var(--pale-blue-ink); }
.col-marker.qualified { background: var(--pale-yellow-ink); }
.col-marker.proposal  { background: var(--pale-green-ink); }
.col-marker.hot       { background: #c05000; }
.col-marker.closed    { background: var(--muted); }

.col-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kcard-empty {
  font-size: 11.5px;
  color: var(--muted);
  padding: 16px 0;
  text-align: center;
}

/* ── Kanban card ── */
.kanban-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 200ms, border-color 200ms;
  user-select: none;
}

.kanban-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-hover);
}

.kanban-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kanban-card.is-won  { border-left: 3px solid var(--pale-green-ink); }
.kanban-card.is-lost { border-left: 3px solid var(--pale-red-ink); }

.kcard-body { pointer-events: none; }

.kcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.kcard-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.kcard-time {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.kcard-meta {
  font-size: 11.5px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kcard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

/* ── Card expand ── */
.kcard-expand {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.kcard-details {
  margin-bottom: 8px;
}

.kcard-details p {
  font-size: 11.5px;
  margin: 0 0 4px;
  color: var(--ink-2);
}

.kcard-summary {
  font-size: 11.5px;
  color: var(--muted);
  margin: 8px 0;
  font-style: italic;
  line-height: 1.5;
}

.kcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  pointer-events: all;
}

/* Won / Lost pills */
.pill.won  { background: var(--pale-green); color: var(--pale-green-ink); }
.pill.lost { background: var(--pale-red);  color: var(--pale-red-ink); }

/* ===== SETUP PAGE LAYOUT ===== */
.setup-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: flex-start;
}

.setup-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup-section {
  padding: 24px 28px;
}

.setup-section .eyebrow {
  margin-bottom: 2px;
}

.setup-section h2 {
  margin-bottom: 20px;
}

.setup-section .form-grid {
  margin-top: 0;
}

.setup-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

/* system prompt in setup */
#systemPrompt {
  width: 100%;
  min-height: 320px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  resize: vertical;
}

@media (max-width: 1100px) {
  .setup-layout {
    grid-template-columns: 1fr;
  }
  .setup-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .kanban-col {
    flex: 0 0 240px;
  }
}

/* ===== FLOATING GENERATE BUTTON ===== */
.fab-generate {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background 150ms, transform 120ms, box-shadow 150ms;
}

.fab-generate:hover {
  background: #333;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.fab-generate:active {
  transform: scale(0.97);
}

.fab-generate:disabled {
  background: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.fab-generate .material-symbols-outlined {
  font-size: 18px;
}

/* ===== DISCOUNT FIELD ===== */
.discount-field {
  margin-top: 16px;
}

.discount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.discount-row select {
  width: auto;
  min-width: 90px;
}

/* ===== PRICING BREAKDOWN — DISCOUNT ROWS ===== */
.pricing-breakdown .subtotal-row td {
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding-top: 8px;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 13px;
}

.pricing-breakdown .discount-row td {
  border-top: none;
  border-bottom: none;
  padding-top: 2px;
  font-weight: 400;
  color: var(--pale-green-ink, var(--mid-ok, #346538));
  font-size: 13px;
}

/* ===== TEAM MANAGEMENT PANEL ===== */
/* TWO ROWS: the three things you type, then the two you choose (owner 2026-08-16:
   "keep name, email and phone number in one row with role type and invite button in the
   next").

   The old track list was written for four cells and there are five now, so the fifth wrapped
   on its own — which is why Invite sat alone across a whole column while Email got 1.4fr of
   a very wide card and Mobile was squeezed into a fixed 140px. Three equal columns give the
   three text fields the same room; the role and the button take the second row. */
.team-invite-row {
  display: grid;
  /* 30 / 30 / 20 / 20 — name and email get the room they need, mobile and role are short
     and fixed-shape (owner 2026-08-16). minmax(0,…) so a long value shrinks the track
     instead of pushing the row wider than the card. */
  grid-template-columns: minmax(0, 30fr) minmax(0, 30fr) minmax(0, 20fr) minmax(0, 20fr);
  gap: 10px;
  margin: 12px 0 4px;
}
/* Invite sits directly under the role select — column 4, second row. */
.team-invite-row button { grid-column: 4; grid-row: 2; }
/* One column on a phone — three side by side would be unreadable at 375px. */
@media (max-width: 720px) {
  .team-invite-row { grid-template-columns: 1fr; }
  .team-invite-row select, .team-invite-row button { grid-column: 1; grid-row: auto; }
}
.team-invite-row input,
.team-invite-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.team-role-legend {
  margin: 4px 0 16px;
  font-size: 11.5px;
}
.table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.team-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-muted, #fafafa);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
.team-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.team-table tr:last-child td {
  border-bottom: none;
}
.team-table .actions-cell {
  text-align: right;
  white-space: nowrap;
}
.team-role-select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 11.5px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.team-role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.status-ok {
  /* Connected = the fluorescent lime accent, not a muted green — owner call
     2026-08-11 ("the green that I want is the fluorescent green"). */
  background: #d9ff5e;
  color: #1a2000;
  font-weight: var(--w-label, 500);
}
/* `hidden` loses to .button's own display:inline-flex (the recurring hidden-vs-
   display trap — same class as the go-live banner bug). Kill it for all buttons. */
.button[hidden] { display: none !important; }
.status-muted {
  background: #f0f0ed;
  color: #787774;
}
/* "On leave" — present on the team but out of the lead rotation. It needs its own
   state: Active/Inactive cannot express "here, but away", which is exactly what the
   round-robin now keys off (owner, 2026-08-14). Warm amber, the app's --mid-tertiary,
   so it reads as a temporary condition rather than a fault. */
.status-warn {
  background: #ffc176;
  color: #3a2a10;
  font-weight: var(--w-label, 500);
}
.banner-credentials {
  background: #fbf3db;
  border: 1px solid #f0e0a8;
  color: #6b4f00;
  padding: 12px 14px;
}
.banner-credentials .temp-password {
  display: inline-block;
  padding: 4px 10px;
  margin: 8px 8px 4px 0;
  background: rgba(255,255,255,0.7);
  border: 1px solid #d4be72;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.banner-success {
  background: #edf3ec;
  border: 1px solid #c6e0c1;
  color: var(--mid-ok, #346538);
}
.banner-error {
  background: #fdebec;
  border: 1px solid #f3c0c2;
  color: #9f2f2d;
}
/* Sizing lives in the single .button.small rule above; this later duplicate only
   keeps the table-row spacing it was (mis)used for. */
.button.small {
  margin-left: 6px;
}

/* ===== CRM: KANBAN BOARD ===== */
.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.search-shell.inline {
  padding: 4px 12px;
  min-width: 280px;
}
.search-shell.inline input {
  border: none;
  background: transparent;
  font: inherit;
  width: 100%;
  outline: none;
}
.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(260px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 30px;
}
.kanban-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
}
.kanban-col {
  background: var(--surface-muted, #fafafa);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.kanban-col-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.kanban-col-title {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink, #111);
}
.kanban-col-meta {
  font-size: 11.5px;
  color: var(--ink-muted);
}
.kanban-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-card {
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.kanban-card-title {
  font-weight: 600;
  font-size: 14px;
  /* Clamp long deal names to 2 lines so they can't shove the badge strip into an ugly wrap. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  color: var(--ink, #111);
  margin-bottom: 4px;
}
.kanban-card-amount {
  font-size: 13px;
  color: var(--ink, #111);
  margin-bottom: 8px;
}
.kanban-card-events {
  font-size: 11.5px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.source-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #E1F3FE;
  color: #1F6C9F;
}
.quote-icon {
  font-size: 14px !important;
  color: var(--mid-ok, #346538);
  margin-left: auto;
}
.kanban-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
}

/* Stage pills (shared) */
.stage-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: #f0f0ed;
  color: #555;
}
.stage-pill.stage-pending-qualification { background: #FBF3DB; color: #956400; }
.stage-pill.stage-qualified { background: #E1F3FE; color: #1F6C9F; }
.stage-pill.stage-hot-lead { background: #FDEBEC; color: #9F2F2D; }
.stage-pill.stage-cold-lead { background: #f0f0ed; color: #555; }
.stage-pill.stage-verbal-confirmation-awaiting-payment { background: #EDF3EC; color: var(--mid-ok, #346538); }
.stage-pill.stage-closed-won { background: var(--mid-ok, #346538); color: #fff; }
.stage-pill.stage-shoot-completed { background: #1F6C9F; color: #fff; }
.stage-pill.stage-closed-lost { background: #9F2F2D; color: #fff; }
.stage-pill.stage-disqualified-lead { background: #555; color: #fff; }

/* ===== CRM: CONTACTS TABLE ===== */
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.contacts-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-muted, #fafafa);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
.contacts-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.contacts-table tr:last-child td { border-bottom: none; }
.contacts-table tr.row-clickable:hover { background: #fafafa; cursor: pointer; }
.contacts-table code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* ===== CRM: DETAIL PANEL (slides in from right) ===== */
.detail-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.detail-panel:not([hidden]) { pointer-events: auto; }
.detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.detail-panel:not([hidden]) .detail-overlay { opacity: 1; }
.detail-content {
  position: relative;
  width: min(600px, 100vw);
  height: 100vh;
  background: var(--mid-surface-2, #fff);
  border-left: 1px solid var(--line);
  box-shadow: -2px 0 12px rgba(0,0,0,0.04);
  overflow-y: auto;
  transform: translateX(20px);
  opacity: 0;
  transition: transform var(--dur) cubic-bezier(0.16, 1, 0.3, 1), opacity var(--dur) var(--ease);
}
.detail-panel:not([hidden]) .detail-content {
  transform: translateX(0);
  opacity: 1;
}
.detail-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.detail-close {
  position: absolute !important;
  top: 14px;
  right: 14px;
}
.detail-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
}
.detail-amount {
  margin: 4px 0 6px;
  font-size: 16px;
  color: var(--ink, #111);
}
.detail-stage { margin: 6px 0 0; }
.detail-body {
  padding: 16px 24px 40px;
}
.detail-body section { margin-bottom: 24px; }
.detail-body h3 {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0 0 10px;
}
.detail-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
.detail-dl dt { color: var(--ink-muted); }
.detail-dl dd { margin: 0; color: var(--ink, #111); }
.event-list, .stage-history, .contact-deals {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.event-list li, .stage-history li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.event-list li:last-child, .stage-history li:last-child { border-bottom: none; }
.contact-deals li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact-deals li:last-child { border-bottom: none; }
.note-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.note-item:last-child { border-bottom: none; }
.note-body {
  white-space: pre-wrap;
  font-size: 13px;
  margin-top: 4px;
  color: var(--ink, #111);
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban-board {
    grid-template-columns: repeat(9, 280px);
  }
}

/* ===== CRM: EDITABLE DETAIL PANEL ===== */
.detail-head h2[contenteditable="true"] {
  outline: none;
  border-bottom: 2px dashed transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.detail-head h2[contenteditable="true"]:hover,
.detail-head h2[contenteditable="true"]:focus {
  border-bottom-color: var(--line);
}
.stage-select {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 11.5px;
  background: var(--mid-surface-2, #fff);
  cursor: pointer;
}
.detail-amount-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 14px;
}
.detail-amount-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
}
.detail-amount-row input {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  width: 120px;
}
.detail-save-hint {
  font-size: 11.5px;
  transition: color var(--dur-fast) var(--ease);
}
.save-hint-success { color: var(--mid-ok, #346538); }
.save-hint-error { color: #9F2F2D; }

.detail-dl input,
.detail-dl select,
.edit-textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  background: var(--mid-surface-2, #fff);
}
.detail-dl input:focus,
.detail-dl select:focus,
.edit-textarea:focus {
  outline: 1px solid #1F6C9F;
  border-color: #1F6C9F;
}
.edit-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
}

.note-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.note-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.note-form button {
  align-self: flex-end;
}

.danger-zone {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.button.danger {
  color: #9F2F2D !important;
}
.button.danger:hover {
  background: #fdebec;
}

/* ===== MODALS ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.modal-content {
  position: relative;
  background: var(--mid-surface-2, #fff);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  width: min(600px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.modal-body label > span {
  font-weight: 500;
  color: var(--ink-muted);
}
.modal-body input,
.modal-body select,
.modal-body textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--mid-surface-2, #fff);
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

/* ===== CRM: LINKED CONTACT CARD (in deal panel) ===== */
.linked-contact-card {
  background: #F7F6F3;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.linked-contact-empty {
  background: #fafafa;
}
.linked-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.linked-contact-head h3 {
  margin: 0 !important;
}
.linked-contact-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linked-contact-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111);
}
.linked-contact-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.linked-contact-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inline-icon {
  /* no !important — it was killing the larger .dlp/.dlp-new-quote sizes downstream */
  font-size: 14px;
  vertical-align: middle;
}
.linked-contact-meta code {
  font-family: var(--mono);
  font-size: 11.5px;
}
.deal-link {
  cursor: pointer;
  transition: background 0.1s var(--ease);
  padding-left: 6px;
  border-radius: 4px;
}
.deal-link:hover {
  background: #fafafa;
}

.modal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 6px;
}

/* ===== CRM: "New deal for contact" pre-link banner + section-with-action ===== */
.modal-prefilled-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #E1F3FE;
  border: 1px solid #b9dcf2;
  border-radius: 6px;
  color: #1F6C9F;
  font-size: 13px;
  margin-bottom: 4px;
}
.section-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.section-with-action h3 {
  margin: 0 !important;
}

/* ===== CRM: OPERATIONAL PILLS ON CARDS ===== */
.kanban-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.op-pill-live { background: #EDF3EC; color: var(--mid-ok, #346538); }
.op-pill-quote { background: #FBF3DB; color: #956400; }
.op-pill-crm { background: #E1F3FE; color: #1F6C9F; }
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mid-ok, #346538);
  border-radius: 50%;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===== CRM: WHATSAPP TRANSCRIPT IN DEAL PANEL ===== */
/* Deal-panel transcript. Three problems fixed 2026-08-09:
   1. SIDE-SCROLLING — `white-space: pre-wrap` with no word-breaking meant any
      long unbroken string (quote URLs, mostly) pushed the box wider than the
      panel, and the wrapper only scrolled on Y. Long words now wrap.
   2. It used the LIGHT :root tokens (--line, --ink, #fafafa, #E1F3FE) which,
      per the project's own rule, resolve light outside #page-dashboard — a
      white transcript box inside the dark deal panel.
   3. Hardcoded 11/13px instead of the type scale. */
.transcript-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;          /* nothing may scroll sideways here */
  padding: 8px 6px;
  border: 1px solid var(--kb-line);
  border-radius: var(--r-tile, 14px);
  background: var(--kb-tile);
}
.transcript-msg {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: var(--t-sm);
  max-width: 85%;
  min-width: 0;                /* a flex child defaults to min-width:auto and refuses to shrink */
}
.transcript-lead {
  align-self: flex-start;
  background: var(--kb-card);
  border: 1px solid var(--kb-line);
}
.transcript-agent {
  align-self: flex-end;
  background: #d9ff5e;
  color: #1a2000;
  border: 1px solid #d9ff5e;
}
.transcript-agent .transcript-meta,
.transcript-agent .transcript-meta strong,
.transcript-agent .transcript-body { color: #1a2000; }
.transcript-meta {
  font-size: var(--t-micro);
  margin-bottom: 4px;
  color: var(--kb-muted);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.transcript-meta strong { color: var(--kb-text); }
.transcript-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;     /* THE fix — break long URLs instead of overflowing */
  word-break: break-word;
  line-height: 1.45;
  color: var(--kb-text);
}

/* ===== CRM: DANGER ZONE — multiple delete options ===== */
.danger-zone-hint {
  margin: 0 0 8px;
}
.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.danger-actions .button {
  text-align: left;
  justify-content: flex-start;
}

/* ===== LIVE PRICING PREVIEW (manual quote builder) ===== */

/* On wide screens, push the Quote Generator page content away from the right edge
   so the sticky preview panel doesn't overlap form inputs. */
@media (min-width: 1101px) {
  #page-quotes {
    padding-right: 360px;  /* preview 320 + gap 24 + buffer */
  }
}

.pricing-preview {
  position: fixed;
  right: 24px;
  top: 96px;
  /* End above the Generate quote FAB instead of running into it.
     FAB sits at bottom 32 + ~44 tall + 16 gap = ends at ~92px from viewport bottom. */
  bottom: 92px;
  width: 320px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.08);
  z-index: 50;
  font-size: 13px;
  /* Only render the panel when its container (Quote Generator page) is the active page.
     Otherwise the fixed-position element would leak into other tabs. */
  display: none;
}
#page-quotes:not([hidden]) .pricing-preview {
  display: block;
}
/* Hidden after a successful quote generation — reappears on next form edit. */
.pricing-preview.post-generation-hidden {
  display: none !important;
}
.pricing-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink, #111);
}
.pricing-preview-head .material-symbols-outlined {
  font-size: 18px !important;
  color: var(--ink-muted);
}
.pricing-preview-state {
  margin-left: auto;
  font-weight: 400;
  font-size: 11.5px;
}
.pricing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.pricing-preview-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.pricing-preview-table td {
  padding: 5px 6px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.pricing-preview-table td.num,
.pricing-preview-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-preview-table tfoot td {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.pricing-preview-table tfoot tr.subtotal-row td {
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 11.5px;
}
.pricing-preview-table tfoot tr.discount-row td {
  border-top: none;
  padding-top: 2px;
  color: var(--mid-ok, #346538);
  font-size: 11.5px;
}
.pricing-preview-table tfoot tr.total-row td {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 14px;
}
.package-totals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
}
.package-totals > div {
  display: flex;
  justify-content: space-between;
  color: var(--ink-muted);
}

/* On narrow viewports, drop the sticky-right position and inline it after the form */
@media (max-width: 1100px) {
  .pricing-preview {
    position: static;
    width: 100%;
    margin: 16px 0;
    max-height: none;
    bottom: auto;
  }
}

/* ════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════
   QUOTE GENERATOR — MINIMALIST EDITORIAL (scoped to #page-quotes)
   Warm bone canvas, flat cards, 1px borders, no glassmorphism.
   ════════════════════════════════════════════════════════════ */

#page-quotes {
  /* Reconciled to the unified liquid-glass system (was a bespoke
     minimalist-editorial palette: bone canvas, flat white cards, black accent). */
  --qg-canvas: rgba(255, 255, 255, 0.5);
  --qg-surface: var(--glass-card, rgba(255, 255, 255, 0.85));
  --qg-line: var(--glass-border, rgba(28, 27, 26, 0.08));
  --qg-ink: var(--ink, #1c1b1a);
  --qg-muted: var(--muted, #65645F);
  --qg-muted-soft: var(--ink-tertiary, #9A9994);
  --qg-accent: var(--accent-deep, #0064E3);
  --qg-accent-on: #FFFFFF;
  --qg-rail-w: 360px;
  --qg-radius: 10px;
  --qg-radius-lg: 20px;
  --qg-gap: 32px;
  --qg-card-pad: 28px;
  --qg-ok-bg: rgba(48, 209, 88, 0.14);
  --qg-ok-fg: #1f7a37;
  --qg-warn-bg: rgba(255, 159, 10, 0.14);
  --qg-warn-fg: #956400;
  --qg-err-bg: rgba(255, 69, 58, 0.12);
  --qg-err-fg: #b3261e;
  --qg-info-bg: rgba(0, 90, 179, 0.10);
  --qg-info-fg: #005ab3;

  background: transparent;
  color: var(--qg-ink);
  padding: 32px 0 200px;
  position: relative;
}

/* Two-column shell — sticky right rail on desktop, stacked + bottom-drawer on mobile */
#page-quotes .qg-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--qg-gap);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (min-width: 1101px) {
  #page-quotes .qg-shell {
    grid-template-columns: minmax(0, 1fr) var(--qg-rail-w);
    gap: 40px;
  }
}

/* ── Heading ──────────────────────────────────────────────── */
#page-quotes .qg-heading {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: none;
}
#page-quotes .qg-heading .eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qg-muted);
  margin: 0 0 12px;
}
#page-quotes .qg-heading h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--qg-ink);
  margin: 0 0 10px;
}
#page-quotes .qg-heading p {
  color: var(--qg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}

/* ── Section / card primitive ─────────────────────────────── */
#page-quotes .qg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--qg-gap);
  min-width: 0;
}
#page-quotes .qg-card {
  background: var(--qg-surface);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
  border-radius: var(--qg-radius-lg);
  padding: var(--qg-card-pad);
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28, 27, 26, 0.10)),
              var(--glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.6));
  contain: layout paint style;
}
#page-quotes .qg-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .qg-card-head h3 {
  flex: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-card-head .material-symbols-outlined {
  font-size: 18px;
  color: var(--qg-muted);
  background: none;
  padding: 0;
}
#page-quotes .qg-card-head p.muted {
  margin: 0;
  font-size: 11.5px;
  color: var(--qg-muted);
}

/* ── Form fields ──────────────────────────────────────────── */
#page-quotes .qg-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
}
/* Contact identity fields locked because the quote is bound to an existing contact/deal. */
#page-quotes .qg-card input.is-locked {
  background: color-mix(in srgb, var(--mid-line, #d6d8c9) 28%, transparent);
  opacity: .8;
  cursor: not-allowed;
}
#page-quotes .qg-card label > span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-card input[type="text"],
#page-quotes .qg-card input[type="number"],
#page-quotes .qg-card input[type="tel"],
#page-quotes .qg-card input[type="date"],
#page-quotes .qg-card input:not([type]),
#page-quotes .qg-card select,
#page-quotes .qg-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  background: var(--qg-surface);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--qg-ink);
  line-height: 1.5;
  transition: border-color 120ms var(--ease);
}
#page-quotes .qg-card input:focus,
#page-quotes .qg-card select:focus,
#page-quotes .qg-card textarea:focus {
  outline: none;
  border-color: var(--mid-accent, #d9ff5e);
  box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28);
}
#page-quotes .qg-card input::placeholder,
#page-quotes .qg-card textarea::placeholder {
  color: var(--qg-muted-soft);
}

/* Form grid */
#page-quotes .qg-card .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ── Buttons ──────────────────────────────────────────────── */
#page-quotes .qg-card .button,
#page-quotes .qg-rail .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--qg-radius);
  border: 1px solid var(--qg-line);
  background: var(--qg-surface);
  color: var(--qg-ink);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), transform 100ms var(--ease);
}
#page-quotes .qg-card .button:hover,
#page-quotes .qg-rail .button:hover {
  background: rgba(0, 90, 179, 0.06);
  border-color: rgba(0, 90, 179, 0.25);
  color: var(--primary, #005ab3);
}
#page-quotes .qg-card .button:active,
#page-quotes .qg-rail .button:active {
  transform: scale(0.98);
}
#page-quotes .qg-card .button.small {
  font-size: 11.5px;
  padding: 7px 12px;
}
#page-quotes .qg-card .button.danger {
  color: var(--qg-err-fg);
  border-color: var(--qg-err-bg);
}
#page-quotes .qg-card .button.danger:hover {
  background: var(--qg-err-bg);
}
#page-quotes .qg-card .button .material-symbols-outlined {
  font-size: 16px;
}

/* ── Contact lookup ───────────────────────────────────────── */
#page-quotes .crm-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#page-quotes .crm-search-row input {
  flex: 1;
}
#page-quotes .contact-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--qg-line);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
#page-quotes .contact-result-item:last-child { border-bottom: none; }
#page-quotes .contact-result-item:hover { background: var(--qg-canvas); }
/* "+ Add new contact" row inside the search dropdown: icon + label grouped on the left. */
#page-quotes .contact-result-add { justify-content: flex-start; gap: 8px; font-weight: 600; }
#page-quotes .contact-result-add .material-symbols-outlined { font-size: 19px; }
#page-quotes .contact-result-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--qg-ink);
}
#page-quotes .contact-result-item small {
  display: block;
  font-size: 11.5px;
  color: var(--qg-muted);
  margin-top: 2px;
}
/* ── Package card ─────────────────────────────────────────── */
#page-quotes #manualPackageList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#page-quotes .package-card {
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  padding: 22px;
  background: var(--qg-canvas);
}
#page-quotes .package-card-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qg-line);
}
@media (min-width: 720px) {
  #page-quotes .package-card-head {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 80px)) auto;
  }
}
#page-quotes .package-card-head label > span {
  font-size: 11.5px;
}
#page-quotes .package-actions {
  display: flex;
  gap: 6px;
  align-items: end;
}

#page-quotes .package-section-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qg-muted);
  margin: 20px 0 10px;
}

/* ── Event chip grid (within a package) ──────────────────── */
#page-quotes .qg-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
#page-quotes .qg-event-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  background: var(--qg-surface);
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--qg-ink);
  transition: background 120ms var(--ease), color 120ms var(--ease), border-color 120ms var(--ease);
}
#page-quotes .qg-event-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
#page-quotes .qg-event-card:hover {
  background: var(--qg-canvas);
}
#page-quotes .qg-event-card.is-selected {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}
#page-quotes .qg-event-name { font-weight: 500; }

/* Custom event input row inside a package */
#page-quotes .package-events-section .custom-event-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#page-quotes .package-events-section .custom-event-row input { flex: 1; }

/* ── Per-event details table ─────────────────────────────── */
#page-quotes .event-detail-head,
#page-quotes .event-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 70px minmax(120px, 1fr) minmax(100px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
#page-quotes .event-detail-head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--qg-line);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qg-muted);
}
#page-quotes .event-detail-row { border-bottom: 1px solid var(--qg-line); }
#page-quotes .event-detail-row:last-child { border-bottom: none; }
#page-quotes .event-detail-row strong {
  font-weight: 500;
  font-size: var(--fs-body);
}
#page-quotes .event-detail-row .qty-input { text-align: center; }

/* ── Per-event team & add-ons matrix ─────────────────────── */
#page-quotes .package-event-head { display: none; }
#page-quotes .package-event-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) repeat(4, 80px) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .package-event-row:last-child { border-bottom: none; }
#page-quotes .package-event-row strong {
  font-weight: 500;
  font-size: 13px;
}
#page-quotes .team-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-quotes .team-field span {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--qg-muted);
  min-width: 20px;
}
#page-quotes .team-field input {
  width: 56px !important;
  text-align: center;
  padding: 6px 4px !important;
  font-family: var(--sans);
  font-size: 13px;
}
#page-quotes .inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#page-quotes .mini-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid var(--qg-line);
  border-radius: 9999px;
  font-size: 11.5px;
  cursor: pointer;
  background: var(--qg-surface);
  transition: background 120ms var(--ease);
}
#page-quotes .mini-check input { accent-color: var(--primary, #005ab3); width: 12px; height: 12px; }
#page-quotes .mini-check:has(input:checked) {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}

/* Stack on narrow viewports */
@media (max-width: 720px) {
  #page-quotes .event-detail-head { display: none; }
  #page-quotes .event-detail-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "qty date"
      "guest guest";
    row-gap: 6px;
  }
  #page-quotes .event-detail-row strong { grid-area: name; }
  #page-quotes .event-detail-row > input[name$="_quantity"] { grid-area: qty; }
  #page-quotes .event-detail-row > input[name$="_date"] { grid-area: date; }
  #page-quotes .event-detail-row > input[name$="_guestCount"] { grid-area: guest; }

  #page-quotes .package-event-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "name name name name"
      "cp cv tp tv"
      "addons addons addons addons";
    row-gap: 6px;
  }
  #page-quotes .package-event-row strong { grid-area: name; }
  #page-quotes .package-event-row .team-field:nth-of-type(1) { grid-area: cp; }
  #page-quotes .package-event-row .team-field:nth-of-type(2) { grid-area: cv; }
  #page-quotes .package-event-row .team-field:nth-of-type(3) { grid-area: tp; }
  #page-quotes .package-event-row .team-field:nth-of-type(4) { grid-area: tv; }
  #page-quotes .package-event-row .inline-options { grid-area: addons; }
}

/* ── Discount & notes ────────────────────────────────────── */
#page-quotes .discount-field .discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
#page-quotes .quote-notes textarea {
  min-height: 88px;
  resize: vertical;
}
#page-quotes .quote-notes small {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--qg-muted);
}

/* ── Live pricing rail (desktop) / drawer (mobile) ───────── */
#page-quotes .qg-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.55));
  border-radius: 24px;
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28, 27, 26, 0.12)),
              var(--glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.7));
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
  overflow: hidden;
}
@media (max-width: 1100px) {
  #page-quotes .qg-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    max-height: 78vh;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.04);
    z-index: 40;
    transform: translateY(calc(100% - 92px));
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #page-quotes .qg-rail.is-expanded {
    transform: translateY(0);
  }
  #page-quotes .qg-rail::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--qg-line);
    margin: 8px auto 0;
  }
}

/* Phone: the live-pricing drawer must float ABOVE the bottom-nav pill (which
   sits at bottom 16 + 64px). Lift it into a rounded floating card and tighten
   the page gutters so the builder isn't cramped. */
@media (max-width: 768px) {
  #page-quotes { padding: 24px 0 168px; }
  #page-quotes .qg-shell { padding: 0 16px; }
  #page-quotes .qg-card { padding: 18px 16px; border-radius: 16px; }
  #page-quotes .qg-heading h1 { font-size: 26px; }
  #page-quotes .qg-rail {
    left: 12px;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    border-radius: 20px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.55));
    max-height: 70vh;
    box-shadow: 0 16px 40px -12px rgba(28,27,26,0.22);
    /* collapsed: peek the header (~84px) above the nav pill */
    transform: translateY(calc(100% - 84px));
  }
  #page-quotes .qg-rail.is-expanded { transform: translateY(0); }
}

#page-quotes .qg-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--qg-line);
  cursor: pointer;
}
#page-quotes .qg-rail-head .qg-rail-label {
  flex: 1;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-head .qg-rail-state {
  font-size: 11.5px;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-head .qg-rail-toggle {
  font-size: 16px;
  color: var(--qg-muted);
  display: none;
}
@media (max-width: 1100px) {
  #page-quotes .qg-rail-head .qg-rail-toggle { display: inline-block; }
}

#page-quotes .qg-rail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
  min-height: 0;
}
#page-quotes .qg-rail-body .pricing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
#page-quotes .qg-rail-body .pricing-preview-table thead { display: none; }
#page-quotes .qg-rail-body .pricing-preview-table td {
  padding: 8px 0;
  font-size: 13px;
  vertical-align: top;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .qg-rail-body .pricing-preview-table td:first-child {
  font-weight: 500;
  color: var(--qg-ink);
}
#page-quotes .qg-rail-body .pricing-preview-table td.muted {
  color: var(--qg-muted);
  font-size: 11.5px;
}
#page-quotes .qg-rail-body .pricing-preview-table td.num {
  text-align: right;
  font-family: var(--sans);
  font-size: 13px;
  white-space: nowrap;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot td {
  border-bottom: none;
  padding-top: 12px;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.subtotal-row td {
  font-size: 11.5px;
  color: var(--qg-muted);
  padding-top: 16px;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.discount-row td {
  font-size: 11.5px;
  color: var(--qg-err-fg);
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td {
  border-top: 1px solid var(--qg-line);
  padding-top: 14px;
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.012em;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td.num {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary, #005ab3);
}
#page-quotes .qg-rail-body .package-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--qg-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-body .package-totals > div {
  display: flex;
  justify-content: space-between;
}

/* Empty state */
#page-quotes .qg-rail-body p.muted {
  font-size: 13px;
  color: var(--qg-muted);
  margin: 0;
  padding: 6px 0;
}

/* Footer of the rail — toggle + action buttons */
#page-quotes .qg-rail-footer {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--qg-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--qg-surface);
}
#page-quotes .qg-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--qg-ink);
}
#page-quotes .qg-toggle input { width: 14px; height: 14px; accent-color: var(--primary, #005ab3); }

#page-quotes .qg-generate {
  width: 100%;
  background: var(--primary, #005ab3);
  color: #fff;
  border: 1px solid var(--primary, #005ab3);
  box-shadow: 0 8px 20px -8px rgba(0, 90, 179, 0.45);
  border-radius: var(--qg-radius);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 120ms var(--ease), transform 100ms var(--ease);
}
#page-quotes .qg-generate:hover { background: var(--accent-deep, #0064E3); }
#page-quotes .qg-generate:active { transform: scale(0.99); }
#page-quotes .qg-generate:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondary (Clear) — reuses the .qg-generate box so its HEIGHT matches Generate
   exactly; only the colours change to a ghost/outline. */
#page-quotes .qg-generate.is-ghost {
  background: transparent;
  color: var(--muted, #6b7280);
  border: 1px solid var(--line, #e3e3e3);
  box-shadow: none;
  font-weight: 600;
  margin-top: 8px;
}
#page-quotes .qg-generate.is-ghost:hover { background: rgba(0, 0, 0, 0.04); }
#page-quotes .qg-generate.is-ghost .material-symbols-outlined { color: inherit; }

/* Post-generation action buttons */
#page-quotes .quote-links-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-quotes .qg-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--qg-radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms var(--ease), transform 100ms var(--ease);
  border: 1px solid var(--qg-line);
  background: var(--qg-surface);
  color: var(--qg-ink);
}
#page-quotes .qg-link-btn:hover { background: rgba(0, 90, 179, 0.06); border-color: rgba(0, 90, 179, 0.25); }
#page-quotes .qg-link-btn:active { transform: scale(0.98); }
#page-quotes .qg-link-btn .material-symbols-outlined { font-size: 16px; }
#page-quotes .qg-link-primary {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}
#page-quotes .qg-link-primary:hover { background: rgba(48, 209, 88, 0.22); }
#page-quotes .qg-link-ghost { /* uses default */ }
#page-quotes .qg-link-send {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}
#page-quotes .qg-link-send:hover { background: var(--accent-deep, #0064E3); }
#page-quotes .qg-link-sent {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}

/* CRM status pill */
#page-quotes .crm-status-inline {
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
#page-quotes .crm-status-inline.crm-ok {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
}
#page-quotes .crm-status-inline.crm-error {
  background: var(--qg-err-bg);
  color: var(--qg-err-fg);
}

/* Hide post-generation drawer when needed */
#page-quotes .qg-rail.post-generation-hidden { display: none; }

/* Banner */
#page-quotes .banner {
  padding: 10px 14px;
  border-radius: var(--qg-radius);
  border: 1px solid var(--qg-line);
  background: var(--qg-canvas);
  font-size: 13px;
  color: var(--qg-ink);
}
#page-quotes .banner.error {
  background: var(--qg-err-bg);
  color: var(--qg-err-fg);
  border-color: var(--qg-err-bg);
}
#page-quotes .banner.success {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}

/* Mobile spacing under the bottom drawer */
@media (max-width: 1100px) {
  #page-quotes { padding-bottom: 120px; }
}

/* ── P0: progressive disclosure additions ─────────────────────────────── */

/* (More details accordion removed — all couple-details fields are now visible) */

/* Package shell — always visible, in both single and multi-package modes.
   The only difference: multi-package shows the Remove button. */
#page-quotes .package-card {
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  padding: 22px;
  background: var(--qg-canvas);
}

/* Per-event collapsed team block */
#page-quotes .event-team-block {
  border-top: 1px solid var(--qg-line);
}
#page-quotes .event-team-block:first-child { border-top: none; }
#page-quotes .event-team-summary {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
#page-quotes .event-team-summary strong {
  font-weight: 500;
  font-size: var(--fs-body);
}
#page-quotes .event-team-summary-text {
  font-size: 11.5px;
  color: var(--qg-muted);
  font-family: var(--sans);
}
#page-quotes .edit-team-toggle {
  font-size: 11.5px;
  white-space: nowrap;
}
#page-quotes .edit-team-toggle .material-symbols-outlined {
  font-size: 14px;
}
#page-quotes .event-team-block.is-expanded .edit-team-toggle {
  background: var(--qg-canvas);
}
#page-quotes .event-team-edit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0 16px;
}
#page-quotes .event-team-edit .inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 720px) {
  #page-quotes .event-team-summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #page-quotes .event-team-summary strong { order: 1; }
  #page-quotes .event-team-summary-text { order: 2; }
  #page-quotes .edit-team-toggle { order: 3; justify-self: start; }
  #page-quotes .event-team-edit {
    grid-template-columns: repeat(2, 1fr);
  }
  #page-quotes .event-team-edit .inline-options {
    grid-column: 1 / -1;
  }
}

/* Remove the legacy package-section-label rendering (no longer used) */
#page-quotes .package-section-label { display: none; }

/* ── Conversation Inbox ─────────────────────────────────────────────── */
.inbox-shell { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; height: calc(100dvh - 180px); min-height: 480px; }
.inbox-list-pane, .inbox-thread-pane {
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg, rgba(255,255,255,0.62));
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.12)),
              var(--glass-inset, inset 0 1px 0 rgba(255,255,255,0.6));
}
.inbox-search { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.inbox-search .material-symbols-outlined { font-size: 20px; color: var(--ink-tertiary, #9A9994); }
.inbox-search input { border: none; outline: none; width: 100%; background: transparent; font-size: 14px; font-family: var(--sans); color: var(--ink, #1c1b1a); }
.inbox-list { overflow-y: auto; flex: 1; padding: 4px; }
.inbox-row { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid transparent; background: none; padding: 12px 12px; border-radius: 12px; cursor: pointer; transition: background 160ms var(--ease); }
.inbox-row:hover { background: rgba(255,255,255,0.55); }
.inbox-row.is-active { background: rgba(255,255,255,0.7); border-left-color: var(--primary, #005ab3); }
.inbox-row-top { display: flex; align-items: center; gap: 6px; }
.inbox-row-name { font-weight: 700; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #1c1b1a); }
.inbox-row-snippet { font-size: 11.5px; color: var(--muted, #65645F); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-time { font-size: 11.5px; color: var(--ink-tertiary, #9A9994); margin-top: 3px; }
.ch-badge { font-size: 11.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px; letter-spacing: 0.04em; }
.ch-badge.wa { background: rgba(48,209,88,0.14); color: #1f7a37; }
.ch-badge.ig { background: rgba(74,71,210,0.12); color: #4a47d2; }
.pill.manual { background: rgba(255,159,10,0.16); color: #956400; font-size: 11.5px; padding: 1px 6px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; }
.inbox-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted, #65645F); font-size: 14px; }
.inbox-thread { display: flex; flex-direction: column; height: 100%; }
/* The `hidden` attribute must win over the class display rules above. */
.inbox-thread[hidden], .inbox-empty[hidden], .inbox-banner[hidden] { display: none; }
/* Channel filter tabs — segmented control on a soft track */
.inbox-filter { display: flex; gap: 4px; margin: 0 16px 12px; padding: 4px; background: var(--panel-soft, #f7f3f0); border-radius: 12px; }
.inbox-filter button { flex: 1; border: none; background: none; border-radius: 9px; padding: 6px 0; font-size: 11.5px; font-weight: 500; font-family: var(--sans); color: var(--muted, #65645F); cursor: pointer; transition: all 160ms var(--ease); }
.inbox-filter button:hover { color: var(--ink, #1c1b1a); }
.inbox-filter button.is-active { background: var(--mid-surface-2, #fff); color: var(--primary, #005ab3); font-weight: 600; box-shadow: 0 1px 3px rgba(28,27,26,0.08); }
.inbox-thread-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border, rgba(28,27,26,0.06)); background: rgba(255,255,255,0.25); }
.inbox-thread-who strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.008em; color: var(--ink, #1c1b1a); }
.inbox-thread-who .muted { font-size: 11.5px; color: var(--muted, #65645F); }
.inbox-messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: transparent; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg.in .msg-bubble {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--ink, #1c1b1a);
  border-top-left-radius: 4px;
}
.msg.out .msg-bubble {
  background: var(--primary, #005ab3);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(0,90,179,0.4);
  border-top-right-radius: 4px;
}
.msg-media-img { max-width: 220px; max-height: 240px; border-radius: 12px; display: block; cursor: pointer; }
.msg-media-vid { max-width: 240px; border-radius: 12px; display: block; }
.msg-media-doc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: inherit; }
.msg-bubble .msg-text { margin-top: 6px; }
.msg-bubble .msg-media-img + .msg-text, .msg-bubble audio + .msg-text { margin-top: 8px; }
.msg-meta { font-size: 11.5px; color: var(--ink-tertiary, #9A9994); margin-top: 4px; letter-spacing: 0.04em; }
.msg-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #956400; }
.inbox-compose { border-top: 1px solid var(--glass-border, rgba(28,27,26,0.06)); padding: 14px 16px; flex: 0 0 auto; background: rgba(255,255,255,0.2); }
.inbox-banner { background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.22); color: #956400; font-size: 11.5px; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; }
.inbox-compose-row { display: flex; gap: 10px; align-items: flex-end; }
.inbox-compose-row textarea { flex: 1; resize: none; border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 16px; padding: 11px 14px; font-size: 14px; font-family: var(--sans); min-height: 44px; max-height: 120px; line-height: 1.4; background: rgba(255,255,255,0.9); color: var(--ink, #1c1b1a); }
.inbox-compose-row textarea:focus { outline: none; border-color: var(--mid-accent, #d9ff5e); box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28); }

/* ── Inbox: avatar chip + back button + robust heights ─────────────────── */
.inbox-shell { height: calc(100dvh - 210px); min-height: 460px; }
.inbox-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-areas: "av top time" "av snip snip"; column-gap: 12px; row-gap: 2px; align-items: center; }
.inbox-row-avatar { grid-area: av; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: rgba(0,90,179,0.1); color: var(--primary, #005ab3); }
.inbox-row-top { grid-area: top; }
.inbox-row-snippet { grid-area: snip; margin-top: 0; }
.inbox-row-time { grid-area: time; margin-top: 0; }
.inbox-back { display: none; border: none; background: none; cursor: pointer; padding: 4px 8px 4px 0; margin-right: 4px; align-items: center; color: var(--ink, #2f3437); }
.inbox-back .material-symbols-outlined { font-size: 22px; }

/* Mobile: single pane, tap a row → full-screen thread, Back returns to list */
@media (max-width: 900px) {
  .inbox-shell { grid-template-columns: 1fr; height: calc(100dvh - 170px); }
  .inbox-shell .inbox-thread-pane { display: none; }
  .inbox-shell.show-thread .inbox-list-pane { display: none; }
  .inbox-shell.show-thread .inbox-thread-pane { display: flex; flex-direction: column; }
  .inbox-back { display: inline-flex; }
}
@media (max-width: 768px) {
  /* leave room for the bottom nav (58px) */
  .inbox-shell { height: calc(100dvh - 156px); }
  .msg { max-width: 86%; }
}

/* ── Inbox thread header + shell hardening ─────────────────────────────── */
.inbox-thread-who { flex: 1; min-width: 0; }
.inbox-thread-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-thread-head { gap: 8px; }
/* clip (not hidden) prevents horizontal scroll WITHOUT creating a scroll
   container — so position:sticky (e.g. the QG live-pricing rail) still works. */
.shell { overflow-x: clip; }
.shell, .qg-shell, .inbox-shell { min-width: 0; }

/* Tablet band: keep sidebar but tighten content gutters so nothing crowds */
@media (min-width: 769px) and (max-width: 1024px) {
  .shell { padding: 24px clamp(16px, 3vw, 28px) 72px; }
}

/* ── Quote Generator: per-field labels (shown on mobile) + breathing room ── */
#page-quotes .qg-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#page-quotes .qg-cell-label { display: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qg-muted, #787774); }
#page-quotes .qg-cell input { width: 100%; }
@media (max-width: 768px) {
  #page-quotes .qg-cell-label { display: block; }
  /* Stack the per-event detail rows with labelled fields on mobile */
  #page-quotes .event-detail-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  #page-quotes .event-detail-row > strong { grid-column: 1 / -1; }
  #page-quotes .event-detail-row input,
  #page-quotes .qg-cell input,
  #page-quotes .package-card-head input,
  #page-quotes .package-card-head select { min-height: 44px; }
  #page-quotes .package-card-head { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   LEADS — "Liquid glass" restyle (scoped to #page-leads)
   ════════════════════════════════════════════════════════════════════ */
#page-leads { position: relative; }
/* (Global body gradient now provides the backdrop — leads-scoped one removed.) */

/* Glass columns */
:is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { grid-template-columns: repeat(9, minmax(300px, 1fr)); gap: 16px; }
:is(#page-leads, #page-projects) .kanban-col {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow: 0 8px 32px -10px rgba(28,27,26,0.10);
}
:is(#page-leads, #page-projects) .kanban-col-header { border-bottom: 1px solid rgba(28,27,26,0.06); }
:is(#page-leads, #page-projects) .kanban-col-title { color: #65645F; letter-spacing: 0.08em; }
:is(#page-leads, #page-projects) .kanban-col-meta { color: #9A9994; font-weight: 600; }
:is(#page-leads, #page-projects) .kanban-col-body { padding: 10px; gap: 12px; }

/* Glass cards */
:is(#page-leads, #page-projects) .kanban-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  box-shadow: 0 4px 12px -2px rgba(28,27,26,0.05);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:is(#page-leads, #page-projects) .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18); }
:is(#page-leads, #page-projects) .kanban-card-title { font-size: 14px; font-weight: 700; }
:is(#page-leads, #page-projects) .kanban-card-amount { font-weight: 700; color: #005ab3; }
:is(#page-leads, #page-projects) .kanban-card-footer { padding-top: 10px; border-top: 1px solid rgba(28,27,26,0.06); }
#page-leads .op-pill, #page-leads .source-pill { border-radius: 9999px; font-weight: 700; }

/* Desktop: fixed board height — columns stay put, cards scroll inside each column.
   (topbar 58 + shell padding 36 + heading ~64 + breathing room ≈ 200px) */
@media (min-width: 901px) {
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) {
    height: calc(100dvh - 200px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  :is(#page-leads, #page-projects) .kanban-col {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  :is(#page-leads, #page-projects) .kanban-col-header { flex: 0 0 auto; }
  :is(#page-leads, #page-projects) .kanban-col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  :is(#page-leads, #page-projects) .kanban-col-body::-webkit-scrollbar { width: 6px; }
  :is(#page-leads, #page-projects) .kanban-col-body::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
}

/* Stage pill nav — desktop hidden, mobile shown */
.leads-stage-nav { display: none; }

@media (max-width: 900px) {
  /* Single-column list with a horizontal stage selector */
  .leads-stage-nav {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .leads-stage-nav::-webkit-scrollbar { display: none; }
  .leads-stage-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 9999px; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    color: #1c1b1a; cursor: pointer; white-space: nowrap;
  }
  .leads-stage-pill .count {
    background: rgba(28,27,26,0.06); padding: 1px 7px; border-radius: 9999px; font-size: 11.5px; font-weight: 700;
  }
  .leads-stage-pill.is-active { background: #0064E3; color: #fff; border-color: #0064E3; }
  .leads-stage-pill.is-active .count { background: rgba(255,255,255,0.22); color: #fff; }

  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { display: block; overflow-x: hidden; padding: 0 0 90px; }
  :is(#page-leads, #page-projects) .kanban-col { display: none; min-height: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; }
  :is(#page-leads, #page-projects) .kanban-col.is-mobile-active { display: flex; }
  :is(#page-leads, #page-projects) .kanban-col .kanban-col-header { display: none; } /* the pill shows the stage */
  :is(#page-leads, #page-projects) .kanban-col-body { padding: 0; gap: 14px; }
  :is(#page-leads, #page-projects) .kanban-card { border-radius: 18px; padding: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   LEADS — Deal detail panel: liquid-glass restyle + mobile bottom-sheet
   ════════════════════════════════════════════════════════════════════ */
#page-leads .detail-overlay {
  background: rgba(10,10,12,0.18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#page-leads .detail-content {
  width: min(560px, 100vw);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,0.5);
  border-top-left-radius: 28px; border-bottom-left-radius: 0;
  box-shadow: -16px 0 48px -16px rgba(28,27,26,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
#page-leads .detail-head {
  border-bottom: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.25);
}
#page-leads .detail-head h2 { font-size: 24px; font-weight: 700; }
#page-leads .detail-amount-row input { background: rgba(255,255,255,0.6); }
/* Section sub-cards */
#page-leads .detail-body section { margin-bottom: 18px; }
#page-leads .linked-contact-card,
#page-leads .detail-body > section:not(.danger-zone) {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px -8px rgba(28,27,26,0.06);
  padding: 16px 18px;
}
#page-leads .detail-dl input,
#page-leads .detail-dl select,
#page-leads .note-form textarea,
#page-leads .edit-textarea { background: rgba(255,255,255,0.7); }
#page-leads .danger-zone { padding-top: 6px; }

/* Mobile: bottom sheet instead of right slide-in */
@media (max-width: 768px) {
  #page-leads .detail-panel { justify-content: stretch; align-items: flex-end; }
  #page-leads .detail-content {
    width: 100%; height: auto; max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    border-left: none; border-top: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 -12px 40px -12px rgba(28,27,26,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
    transform: translateY(24px);
  }
  #page-leads .detail-panel:not([hidden]) .detail-content { transform: translateY(0); }
  /* drag handle */
  #page-leads .detail-content::before {
    content: ""; position: sticky; top: 0; display: block;
    width: 36px; height: 5px; margin: 8px auto 0;
    background: rgba(0,0,0,0.12); border-radius: 9999px;
  }
  #page-leads .detail-head { padding-top: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM — global glass surfaces + Inter type scale.
   Appended last so it harmonises every page (Leads/Conversations/Quote/
   Contacts/Setup) onto one language. Layout media-queries above still win.
   ════════════════════════════════════════════════════════════════════ */

/* Headings + eyebrows: one consistent scale & placement everywhere */
.page-heading h1 { font-family: var(--sans); font-size: var(--fs-title1); font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; }
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); }

/* Major surface primitives → frosted glass card */
.panel,
.setup-panel,
.table-wrap,
#page-quotes .qg-card,
.glass-card {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* Deal/Contact detail panel → glass (generalised to both panels) */
.detail-overlay { background: rgba(10,10,12,0.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.detail-content {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border-left: 1px solid var(--glass-border);
  border-top-left-radius: 28px; border-bottom-left-radius: 0;
  box-shadow: -16px 0 48px -16px rgba(28,27,26,0.18), var(--glass-inset);
}
@media (max-width: 768px) {
  .detail-panel { justify-content: stretch; align-items: flex-end; }
  .detail-content {
    width: 100%; height: auto; max-height: 92dvh;
    border-radius: 24px 24px 0 0; border-left: none;
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -12px 40px -12px rgba(28,27,26,0.22), var(--glass-inset);
    transform: translateY(24px);
  }
  .detail-panel:not([hidden]) .detail-content { transform: translateY(0); }
}

/* Controls — calm, near-solid fields for legibility; consistent shape */
input, select, textarea {
  background: var(--field-bg);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  font-family: var(--sans);
}
/* Buttons don't inherit font by default — keep all of them on Inter so
   card-buttons (contacts, tickets, dashboard rows) match the rest of the UI. */
button { font-family: var(--sans); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28);
}

/* Buttons — accent-deep primary, consistent radius */
.button { border-radius: 8px; }
.button.primary { background: var(--accent-deep); border-color: transparent; }
.button.primary:hover { background: var(--primary); }

/* Reconcile Quote Generator's bespoke tokens to the global system */
#page-quotes {
  --qg-surface: var(--glass-card);
  --qg-line: var(--glass-border);
  --qg-ink: var(--ink);
  --qg-muted: var(--muted);
  --qg-muted-soft: var(--ink-tertiary);
}
#page-quotes .qg-heading h1 {
  font-family: var(--sans);
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════════
   CONTACTS — liquid-glass card grid (desktop) / card list (mobile)
   ════════════════════════════════════════════════════════════════════ */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  min-width: 0;
}
.contacts-empty { grid-column: 1 / -1; padding: 40px; text-align: center; }

.contact-card {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; min-width: 0; text-align: left; cursor: pointer;
  padding: 18px;
  /* It's a <button> — force Inter + the body scale, since buttons don't
     inherit font by default (that's what made the cards look "different"). */
  font-family: var(--sans);
  font-size: var(--fs-body);
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  color: var(--ink);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18), var(--glass-inset); }

.contact-card-head { display: flex; align-items: center; gap: 12px; }
.contact-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  color: var(--primary);
  background: linear-gradient(135deg, #d6e3ff 0%, #e2dfff 100%);
}
.contact-id { flex: 1; min-width: 0; }
.contact-name { font-size: var(--fs-title3); font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-sub { font-size: var(--fs-caption); color: var(--ink-tertiary); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-chev { color: var(--ink-tertiary); }

.contact-lines { display: flex; flex-direction: column; gap: 7px; }
.contact-lines > div { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-body); min-width: 0; }
.contact-lines .material-symbols-outlined { font-size: 18px; color: var(--ink-tertiary); flex: 0 0 auto; }
.contact-lines code { font-family: var(--sans); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; }
.contact-lines > div { overflow: hidden; }
.contact-lines > div:last-child { white-space: nowrap; text-overflow: ellipsis; }

.contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.contact-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill.open-deals { background: var(--pale-blue); color: var(--pale-blue-ink); font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

/* Quote Generator — drop decorative section-title icons (per design: no icons).
   Only the leading icon directly inside a card header is hidden; functional
   control icons inside buttons (search, refresh, close, add) are kept. */
#page-quotes .qg-card-head > .material-symbols-outlined { display: none; }
/* No icons in the Quote Generator (per spec) — hide every Material Symbol
   except the functional mobile rail-toggle chevron. */
#page-quotes .material-symbols-outlined { display: none; }
#page-quotes .qg-rail-head .qg-rail-toggle { display: none; }
@media (max-width: 1100px) {
  #page-quotes .qg-rail-head .qg-rail-toggle { display: inline-block; }
}

/* ════════════════════════════════════════════════════════════════════
   DETAIL PANEL (lead + contact) — align typography to the global Inter scale
   so the "more details" screen matches the rest of the app.
   ════════════════════════════════════════════════════════════════════ */
.detail-content,
.detail-content input,
.detail-content select,
.detail-content textarea,
.detail-content button { font-family: var(--sans); }
.detail-content { font-size: var(--fs-body); }
.detail-head h2 { font-size: var(--fs-title2); font-weight: 700; letter-spacing: -0.012em; }
.detail-amount { font-size: var(--fs-title3); }
.detail-body h3 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); }
.detail-dl,
.detail-dl input,
.detail-dl select,
.detail-dl dd,
.detail-dl dt,
.event-list, .stage-history, .contact-deals,
.note-body, .note-form textarea,
.detail-amount-row, .detail-amount-row input,
.linked-contact-meta { font-size: var(--fs-body); }
.linked-contact-name, .linked-contact-card h3 { font-size: var(--fs-title3); font-weight: 600; }
.detail-save-hint { font-size: var(--fs-caption); }
/* Phone numbers stay monospace (matches the contact cards) */
.linked-contact-meta code, .detail-dl code { font-family: var(--sans); font-size: var(--fs-body); }

/* ════════════════════════════════════════════════════════════════════
   MODALS (New deal / New contact) — liquid-glass to match the app
   ════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(10,10,12,0.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-content {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.modal-head { border-bottom: 1px solid var(--glass-border); }
.modal-head h2 { font-family: var(--sans); font-size: var(--fs-title3); font-weight: 600; letter-spacing: -0.008em; }
.modal-body { font-size: var(--fs-body); }
.modal-body label { font-size: var(--fs-caption); }
.modal-body label > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); }
.modal-body input, .modal-body select, .modal-body textarea {
  background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px;
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 12px;
  font-size: 14px; line-height: 1.4;
}
.modal-body textarea { padding: 9px 12px; min-height: 80px; line-height: 1.5; }
/* Selects: kill native chrome so their height/padding match text inputs exactly,
   then draw one consistent chevron. */
.modal-body select {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2387929a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* date / datetime / number inside modals: same box, no overflow, no spinner drift */
.modal-body input[type="date"],
.modal-body input[type="datetime-local"],
.modal-body input[type="time"],
.modal-body input[type="number"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
.modal-actions { border-top: 1px solid var(--glass-border); }
.modal-prefilled-contact, .modal-section-header { border-color: var(--glass-border); }

@media (max-width: 640px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-content { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  /* 16px font stops iOS from zooming on focus; 44px is the comfortable touch height.
     Extra .modal-content qualifier beats the later global `.modal-content input{font-size:14px}`. */
  .modal-content .modal-body input, .modal-content .modal-body select, .modal-content .modal-body textarea,
  .modal-content .task-lead-search input { font-size: 16px; min-height: 44px; }
  .modal-content .modal-body select { background-position: right 12px center; }
}

/* ════════════════════════════════════════════════════════════════════
   QUOTE GENERATOR — authoritative mobile layout (appended last, wins over
   earlier scattered/stale rules). Targets the real rendered DOM:
   package-card-head, event-detail-row (5 cells), event-team-summary/-edit.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Package header: stack everything full-width */
  #page-quotes .package-card-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
  #page-quotes .package-card-head label { width: 100%; }
  #page-quotes .package-card-head label > span { font-size: 11.5px; }
  #page-quotes .package-card-head input,
  #page-quotes .package-card-head select { width: 100%; min-height: 44px; }
  #page-quotes .package-actions { width: 100%; display: flex; gap: 8px; }
  #page-quotes .package-actions .button { flex: 1; justify-content: center; }

  /* Per-event details: header row hidden; each event is a labelled 2-col card */
  #page-quotes .event-detail-head { display: none; }
  #page-quotes .event-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
    gap: 14px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--qg-line);
    align-items: start;
  }
  #page-quotes .event-detail-row > strong {
    grid-row: 1;
    grid-column: 1 / -1 !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--qg-ink);
  }
  #page-quotes .event-detail-row .qg-cell {
    grid-column: auto !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  #page-quotes .qg-cell-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--qg-muted);
  }
  #page-quotes .event-detail-row input,
  #page-quotes .event-detail-row .qg-cell input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Event chips: compact 2-up grid (was falling back to the desktop auto-fill,
     which stacked them full-width with big gaps on phones). */
  #page-quotes .qg-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #page-quotes .qg-event-card {
    padding: 11px 10px;
    min-height: 0;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }
  #page-quotes .qg-event-name { font-weight: 600; }

  /* Card header (e.g. "Quote sections"): stack title + blurb + actions instead
     of cramming them into a single row. */
  #page-quotes .qg-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
  }
  #page-quotes .qg-card-head h3 { flex: none; }
  #page-quotes .qg-card-head p.muted { margin: 0; }
  #page-quotes .qg-card-head .button { width: 100%; justify-content: center; }

  /* Per-event team override: summary line + expandable inputs */
  #page-quotes .event-team-block { padding: 4px 0; }
  #page-quotes .event-team-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   edit"
      "detail detail";
    gap: 4px 10px;
    align-items: center;
    padding: 12px 0;
  }
  #page-quotes .event-team-summary > strong { grid-area: name; font-size: 14px; font-weight: 600; }
  #page-quotes .event-team-summary-text { grid-area: detail; font-size: 11.5px; color: var(--qg-muted); }
  #page-quotes .edit-team-toggle { grid-area: edit; justify-self: end; white-space: nowrap; }

  #page-quotes .event-team-edit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 6px 0 16px;
  }
  #page-quotes .event-team-edit .team-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 100%;
  }
  #page-quotes .event-team-edit .team-field > span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--qg-muted);
    min-width: 0;
  }
  #page-quotes .event-team-edit .team-field input {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    text-align: left;
    padding: 9px 12px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  #page-quotes .event-team-edit .inline-options {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Add-on chips: horizontal checkbox + label, left-aligned (not a centered column) */
  #page-quotes .mini-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: auto !important;
    padding: 9px 13px;
    font-size: 11.5px;
    text-align: left;
  }
  #page-quotes .mini-check input { flex: 0 0 auto; width: 16px !important; height: 16px !important; margin: 0; }
  #page-quotes .mini-check span { white-space: normal; }

  /* Custom "Add event" row: input above a full-width button */
  #page-quotes .package-events-section .custom-event-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #page-quotes .package-events-section .custom-event-row input { width: 100%; min-height: 44px; }
  #page-quotes .package-events-section .custom-event-row .button { width: 100%; justify-content: center; min-height: 44px; }

  /* Top-of-card sections: comfortable spacing */
  #page-quotes .qg-card-head { margin-bottom: 18px; }
  #page-quotes .qg-card .form-grid { grid-template-columns: 1fr; gap: 14px; }
  #page-quotes .package-section-label { margin: 16px 0 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — glass KPI cards, trend bars, activity lists
   ════════════════════════════════════════════════════════════════════ */
#page-dashboard .dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.dash-stat-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary); }
.dash-stat-value { font-family: var(--sans); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary, #005ab3); line-height: 1.1; }
.dash-stat-sub { font-size: var(--fs-caption); color: var(--muted); }

.dash-card {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 20px;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-card-head h3 { margin: 0; font-family: var(--sans); font-size: var(--fs-title3); font-weight: 600; letter-spacing: -0.008em; color: var(--ink); }
.dash-card-meta { font-size: var(--fs-caption); color: var(--muted); }

.dash-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 9999px; background: rgba(0,90,179,0.10); color: var(--primary, #005ab3); }
.dash-pill-good { background: rgba(48,209,88,0.16); color: #1f7a37; }
.dash-pill-warn { background: rgba(255,159,10,0.16); color: #956400; }

/* Trend bars */
.dash-trend { margin-bottom: 24px; }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }
.dash-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.dash-bar-fill { width: 70%; max-width: 28px; min-height: 4px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent-deep, #0064E3), var(--primary, #005ab3)); transition: height 240ms cubic-bezier(0.16,1,0.3,1); }
.dash-bar-val { font-size: 11.5px; font-weight: 700; color: var(--ink-secondary); height: 12px; }
.dash-bar-x { font-size: 11.5px; color: var(--ink-tertiary); white-space: nowrap; }

/* Activity lists — equal fixed-height cards, scroll inside each */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dash-grid .dash-card { display: flex; flex-direction: column; height: 380px; }
.dash-grid .dash-card .dash-card-head { flex: 0 0 auto; }
.dash-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.dash-list::-webkit-scrollbar { width: 6px; }
.dash-list::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
/* Dashboard heading: keep Refresh tidy on the right */
#page-dashboard .page-actions { display: flex; justify-content: flex-end; align-items: flex-start; }
/* Simple stacked list — no grid tracks, so it can never overflow the right padding. */
/* Leads bulk-select */
.leads-select-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--glass-card, rgba(255,255,255,0.9)); border: 1px solid var(--glass-border, rgba(255,255,255,0.5)); box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.1)); }
.leads-select-bar #leadsSelectCount { font-weight: 600; }
.leads-select-actions { display: flex; gap: 8px; }
#leadsSelectToggle.is-active { background: var(--accent-deep, #0064E3); color: #fff; }
.kanban-card.selectable { cursor: pointer; position: relative; padding-left: 34px; }
.kanban-card-check { position: absolute; left: 10px; top: 12px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--outline-variant, #c0c6d6); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--mid-surface-2, #fff); }
.kanban-card.is-selected { outline: 2px solid var(--accent-deep, #0064E3); outline-offset: -1px; }
.kanban-card.is-selected .kanban-card-check { background: var(--accent-deep, #0064E3); border-color: var(--accent-deep, #0064E3); }
.col-select-all { border: none; background: none; color: var(--primary, #005ab3); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.dash-period { display: flex; align-items: center; gap: 8px; }
.dash-month-label { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.9); border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 10px; padding: 6px 10px; }
.dash-month-label .material-symbols-outlined { font-size: 20px; color: var(--primary, #005ab3); }
.dash-month-label input[type="month"] { border: none; background: none; font: inherit; color: var(--ink, #1c1b1a); outline: none; min-width: 130px; }
.dash-range { display: inline-flex; align-items: center; gap: 6px; }
.dash-range input[type="date"] { background: rgba(255,255,255,0.9); border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 10px; padding: 6px 8px; font: inherit; color: var(--ink, #1c1b1a); }
.dash-range-sep { color: var(--muted, #65645F); }
@media (max-width: 768px) { .dash-period { flex-wrap: wrap; gap: 6px; } .dash-range input[type="date"] { min-width: 0; flex: 1; } }
/* 2×2 grid of category cards; each card has a fixed height and scrolls internally. */
.tasks-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; max-width: 980px; align-items: start; }
.tasks-cat {
  min-width: 0;
  display: flex; flex-direction: column;
  height: 420px;  /* fixed card height → internal scroll */
  background: var(--glass-card, rgba(255,255,255,0.85)); backdrop-filter: var(--glass-blur, blur(40px));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5)); border-radius: 18px;
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10)); padding: 16px 8px 12px 16px;
}
.tasks-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 8px; flex: 0 0 auto; }
.tasks-cat-head h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.tasks-cat-head .material-symbols-outlined { color: var(--primary, #005ab3); font-size: 22px; }
.tasks-cat-list { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-y: auto; padding-right: 8px; }
/* slim scrollbar inside cards */
.tasks-cat-list::-webkit-scrollbar { width: 7px; }
.tasks-cat-list::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.18); border-radius: 4px; }
@media (max-width: 760px) { .tasks-board { grid-template-columns: 1fr; } .tasks-cat { height: 360px; } }
.action-row { cursor: pointer; }
.action-row:hover { background: rgba(0,90,179,0.05); }
.action-done {
  border: none; background: none; cursor: pointer; color: var(--ink-tertiary, #9A9994);
  display: inline-flex; align-items: center; padding: 4px; border-radius: 8px; flex: none;
}
.action-done:hover { color: var(--success, var(--mid-ok, #30D158)); }
.action-done .material-symbols-outlined { font-size: 22px; }
.dash-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px 8px; border: none; background: none; border-radius: 12px;
  cursor: pointer; font-family: var(--sans); color: var(--ink);
  transition: background 140ms var(--ease);
}
button.dash-row:hover { background: rgba(255,255,255,0.55); }
.dash-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: rgba(0,90,179,0.1); color: var(--primary, #005ab3);
}
.dash-avatar .material-symbols-outlined { font-size: 20px; }
.dash-avatar.good { background: rgba(48,209,88,0.16); color: #1f7a37; }
.dash-avatar.warn { background: rgba(255,159,10,0.18); color: #956400; }
.dash-avatar.hot { background: rgba(255,69,58,0.14); color: var(--mid-danger, #c0392b); }
.dash-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-row-title { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dash-row-sub { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-amount { font-weight: 700; font-size: var(--fs-body); color: var(--primary, #005ab3); white-space: nowrap; }
.dash-row-time { font-size: 11.5px; color: var(--ink-tertiary); white-space: nowrap; }
.dash-flag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mid-danger, #c0392b); background: rgba(255,69,58,0.12); padding: 1px 6px; border-radius: 9999px; }
.dash-empty { padding: 18px 8px; font-size: var(--fs-body); color: var(--muted); text-align: center; }
.dash-loading { grid-column: 1 / -1; padding: 30px; text-align: center; }

@media (max-width: 900px) {
  #page-dashboard .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-bars { gap: 4px; height: 120px; }
  .dash-bar-x { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   TICKETS — customer-service queue (glass cards + slide-in detail)
   ════════════════════════════════════════════════════════════════════ */
.tickets-filter { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--panel-soft, #f7f3f0); border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tickets-filter button { border: none; background: none; border-radius: 9px; padding: 8px 16px; font-size: var(--fs-caption); font-weight: 500; font-family: var(--sans); color: var(--muted, #65645F); cursor: pointer; white-space: nowrap; transition: all 160ms var(--ease); }
.tickets-filter button:hover { color: var(--ink, #1c1b1a); }
.tickets-filter button.is-active { background: var(--mid-surface-2, #fff); color: var(--primary, #005ab3); font-weight: 600; box-shadow: 0 1px 3px rgba(28,27,26,0.08); }

.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tickets-empty { grid-column: 1 / -1; padding: 40px; text-align: center; }

/* Ticket card layout (glass comes from .kanban-card in the #page-tickets block) */
.ticket-card {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; position: relative;
  color: var(--ink);
}
.ticket-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-subject { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.ticket-prio-dot { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-danger, #c0392b); background: rgba(255,69,58,0.14); padding: 2px 7px; border-radius: 9999px; }
.ticket-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ticket-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-time { font-size: 11.5px; color: var(--ink-tertiary); white-space: nowrap; }

/* Category + status pills */
.ticket-cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; background: rgba(0,90,179,0.10); color: var(--primary, #005ab3); }
.ticket-cat-delivery { background: rgba(0,90,179,0.10); color: #005ab3; }
.ticket-cat-editing { background: rgba(74,71,210,0.12); color: #4a47d2; }
.ticket-cat-reschedule { background: rgba(255,159,10,0.16); color: #956400; }
.ticket-cat-complaint { background: rgba(255,69,58,0.14); color: var(--mid-danger, #c0392b); }
.ticket-cat-general { background: rgba(28,27,26,0.06); color: var(--ink-secondary); }
.ticket-cat-talent { background: rgba(48,209,88,0.16); color: #1f7a37; }
.ticket-status { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; }
.ticket-status-open { background: rgba(48,209,88,0.16); color: #1f7a37; }
.ticket-status-in_progress { background: rgba(255,159,10,0.16); color: #956400; }
.ticket-status-resolved { background: rgba(0,90,179,0.10); color: #005ab3; }
.ticket-status-closed { background: rgba(28,27,26,0.06); color: var(--ink-tertiary); }
.ticket-prio { position: absolute; top: 14px; right: 16px; display: none; } /* shown only if needed */
.ticket-card .ticket-prio { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-danger, #c0392b); }

/* Detail panel internals */
#ticketDetailContent .ticket-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
#ticketDetailContent .ticket-controls label { display: flex; flex-direction: column; gap: 5px; }
#ticketDetailContent .ticket-controls label > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); }
#ticketDetailContent .ticket-controls select { width: 100%; min-height: 40px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px; }
.ticket-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ticket-note { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.5); border: 1px solid var(--glass-border); }
.ticket-note-inbound { background: rgba(0,90,179,0.06); }
.ticket-note-meta { font-size: 11.5px; color: var(--ink-tertiary); margin-bottom: 4px; }
.ticket-note-text { font-size: var(--fs-body); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
#ticketDetailContent .note-form { display: flex; flex-direction: column; gap: 8px; }
#ticketDetailContent .note-form textarea { width: 100%; min-height: 56px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 10px 12px; font-family: var(--sans); resize: vertical; }

@media (max-width: 768px) {
  .tickets-grid { grid-template-columns: 1fr; }
  #ticketDetailContent .ticket-controls { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE NAV "More" menu + dashboard/QG mobile polish
   ════════════════════════════════════════════════════════════════════ */
/* Desktop: the More button + popup never show (full nav is in the sidebar). */
.nav-more-btn { display: none; }
.nav-more-pop { display: none; }

@media (max-width: 768px) {
  .nav-more-pop:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    min-width: 190px;
    padding: 6px;
    background: var(--mid-surface-2, #fff);
    border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(28,27,26,0.28);
    z-index: 120;
  }
  .nav-more-pop .more-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    border: none; background: none; border-radius: 12px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: var(--ink, #1c1b1a); cursor: pointer; text-align: left;
  }
  .nav-more-pop .more-item:hover { background: var(--surface-container-low, #f7f3f0); color: var(--primary, #005ab3); }
  .nav-more-pop .more-item .material-symbols-outlined { font-size: 22px; color: var(--ink-tertiary, #9A9994); }
  .nav-more-btn.is-open { color: var(--primary, #005ab3); }
  .nav-more-btn.is-open .material-symbols-outlined { color: var(--primary, #005ab3); }

  /* Dashboard: equal-width cards, no horizontal overflow (was pushing past the
     right edge because grid items default to min-width:auto). */
  #page-dashboard, #page-dashboard .dash-stats, #page-dashboard .dash-grid { min-width: 0; }
  #page-dashboard .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-stat { min-width: 0; overflow: hidden; }
  .dash-stat-value { font-size: 28px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .dash-card { height: 340px; min-width: 0; }
  /* Trend bars scroll inside the card instead of overflowing the page. */
  .dash-trend { overflow: hidden; }
  .dash-bars { overflow-x: auto; overflow-y: hidden; }
  .dash-bar { min-width: 16px; }
  .dash-bar-x { font-size: 11.5px; }

  /* Quote Generator: trim side padding so the builder uses the full width.
     (Was shell 20px + qg-shell 16px = 36px each side.) */
  #page-quotes .qg-shell { padding: 0; }
  #page-quotes .qg-card { padding: 16px 14px; }
}

/* ── Cross-link buttons (Chat ↔ Lead ↔ Contact) ──────────────────────── */
.inbox-thread-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* The `hidden` attribute must beat `.button { display: inline-flex }` — otherwise
   these appear even with no linked record and clicking them no-ops. */
#inboxViewLeadBtn[hidden], #inboxViewContactBtn[hidden] { display: none !important; }
/* Same hidden-attribute fix for these .button elements. */
#loadSavedQuoteBtn[hidden], #dealEditQuoteBtn[hidden] { display: none !important; }
.section-action-group { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-quick-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.detail-quick-actions .button { flex: 0 0 auto; }
@media (max-width: 560px) {
  /* Keep the chat header tidy on phones — icons only for the link buttons. */
  .inbox-thread-actions #inboxViewLeadBtn,
  .inbox-thread-actions #inboxViewContactBtn { font-size: 0; padding: 6px 8px; }
  .inbox-thread-actions #inboxViewLeadBtn .inline-icon,
  .inbox-thread-actions #inboxViewContactBtn .inline-icon { font-size: 20px; margin: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   TICKETS board — same liquid-glass kanban as Leads (scoped #page-tickets)
   ════════════════════════════════════════════════════════════════════ */
#page-tickets { position: relative; }
#page-tickets #ticketsBoard { grid-template-columns: repeat(4, minmax(280px, 1fr)); gap: 16px; }
#page-tickets .kanban-col {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow: 0 8px 32px -10px rgba(28,27,26,0.10);
}
#page-tickets .kanban-col-header { border-bottom: 1px solid rgba(28,27,26,0.06); }
#page-tickets .kanban-col-title { color: #65645F; letter-spacing: 0.08em; }
#page-tickets .kanban-col-meta { color: #9A9994; font-weight: 600; }
#page-tickets .kanban-col-body { padding: 10px; gap: 12px; }
#page-tickets .kanban-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 12px -2px rgba(28,27,26,0.05);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#page-tickets .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18); }

@media (min-width: 901px) {
  #page-tickets #ticketsBoard {
    height: calc(100dvh - 200px);
    overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
  }
  #page-tickets .kanban-col { height: 100%; min-height: 0; overflow: hidden; }
  #page-tickets .kanban-col-header { flex: 0 0 auto; }
  #page-tickets .kanban-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  #page-tickets .kanban-col-body::-webkit-scrollbar { width: 6px; }
  #page-tickets .kanban-col-body::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
}

@media (max-width: 900px) {
  #page-tickets #ticketsBoard { display: block; overflow-x: hidden; padding: 0 0 90px; }
  #page-tickets .kanban-col { display: none; min-height: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; }
  #page-tickets .kanban-col.is-mobile-active { display: flex; }
  #page-tickets .kanban-col .kanban-col-header { display: none; }
  #page-tickets .kanban-col-body { padding: 0; gap: 14px; }
  #page-tickets .kanban-card { border-radius: 18px; padding: 16px; }
}

/* ── Chat side panel (pops in over any page) ─────────────────────────── */
#chatDetailContent { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#chatDetailContent .chatpanel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.25);
}
#chatDetailContent .chatpanel-head h2 { margin: 0; font-size: var(--fs-title3); font-weight: 600; }
#chatDetailContent .chatpanel-head #chatPanelMeta { display: inline-flex; align-items: center; gap: 6px; }
#chatDetailContent .chatpanel-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.chatpanel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; margin: 0; }
#chatPanelMessages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.chatpanel-body .inbox-compose { flex: 0 0 auto; }
#chatPanelLeadBtn[hidden], #chatPanelContactBtn[hidden] { display: none !important; }
@media (max-width: 768px) {
  #chatDetailContent { height: 88dvh; }
  #chatDetailContent .chatpanel-actions { width: 100%; margin-left: 0; }
}

/* Compose attach button (chat composers) */
.compose-attach { flex: 0 0 auto; min-height: 44px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; }
.compose-attach .material-symbols-outlined { font-size: 20px; }
.compose-attach:disabled { opacity: 0.5; cursor: progress; }

/* ── Dashboard: conversion funnel + loss reasons ─────────────────────── */
.dash-funnel-card { margin-bottom: 24px; }
.dash-funnel { display: flex; flex-direction: column; gap: 10px; }
.dash-funnel-row { display: grid; grid-template-columns: 150px 1fr auto auto; align-items: center; gap: 12px; }
.dash-funnel-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-funnel-bar { height: 22px; background: rgba(28,27,26,0.05); border-radius: 8px; overflow: hidden; }
.dash-funnel-bar.small { height: 8px; border-radius: 6px; margin-top: 4px; }
.dash-funnel-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--primary, #005ab3), var(--accent-deep, #0064E3)); transition: width 280ms cubic-bezier(0.16,1,0.3,1); }
.dash-funnel-fill.warn { background: rgba(255,159,10,0.7); }
.dash-funnel-count { font-weight: 700; font-size: var(--fs-body); color: var(--ink); min-width: 28px; text-align: right; }
.dash-funnel-conv { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-tertiary); min-width: 44px; text-align: right; }
@media (max-width: 640px) {
  .dash-funnel-row { grid-template-columns: 96px 1fr auto; }
  .dash-funnel-conv { display: none; }
}

/* Deal panel: loss-reason dropdown */
.detail-loss-reason { margin: 6px 0 0; }
.detail-loss-reason .loss-reason-select { width: 100%; min-height: 38px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px; font-family: var(--sans); }

/* ─── Follow-ups (human-in-the-loop review & send queue) ─────────────────── */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:9999px; background:var(--danger,var(--mid-danger, #FF453A)); color:#fff; font-size:11.5px; font-weight:600; line-height:1; }
.followups-list { display:flex; flex-direction:column; gap:12px; max-width:720px; }
.fu-card { background:var(--glass-card,#fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:14px; padding:14px 16px; box-shadow:var(--glass-shadow,0 1px 3px rgba(0,0,0,0.05)); }
.fu-head { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.fu-who { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fu-name { font-weight:600; font-size:14px; color:var(--ink,#1c1b1a); }
.fu-stage { font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:9999px; background:var(--pale-blue,#E1F3FE); color:var(--blue-text,#1F6C9F); }
.fu-ctx { font-size:13px; color:var(--muted,#65645F); }
.fu-msg { width:100%; box-sizing:border-box; resize:vertical; min-height:60px; padding:10px 12px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; background:var(--field-bg,rgba(255,255,255,0.92)); font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink,#1c1b1a); }
.fu-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.fu-actions .fu-send { display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.fu-actions .material-symbols-outlined { font-size:18px; }
@media (max-width:560px){ .fu-actions .button { flex:1 1 auto; justify-content:center; } .followups-list { padding-bottom:84px; } }

/* ─── Pricing Catalog editor ─────────────────────────────────────────────── */
.pricing-editor { display:flex; flex-direction:column; gap:18px; max-width:1000px; padding-bottom:80px; }
.pc-section { background:var(--glass-card,#fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:14px; padding:16px; box-shadow:var(--glass-shadow,0 1px 3px rgba(0,0,0,0.05)); }
.pc-section > h3, .pc-sec-head h3 { margin:0 0 12px; font-size:14px; font-weight:600; }
.pc-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pc-svc-list { display:flex; flex-direction:column; gap:12px; }
.pc-svc { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:12px; background:rgba(255,255,255,0.5); }
.pc-svc-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.pc-svc-name { flex:1 1 auto; font-weight:600; }
.pc-svc-cat { width:130px; }
.pc-svc-pat { width:100%; margin-bottom:10px; font-size:11.5px; color:var(--muted); }
.pc-svc input { padding:7px 9px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:7px; background:var(--mid-surface-2, #fff); font-family:var(--sans); font-size:13px; }
.pc-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pc-tier { border:1px solid var(--line,rgba(0,0,0,0.07)); border-radius:9px; padding:10px; background:rgba(255,255,255,0.6); }
.pc-tier-name { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
.pc-mini { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.pc-mini > span { font-size:11.5px; color:var(--muted); }
.pc-mini input { width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:6px; background:var(--mid-surface-2, #fff); font-size:13px; font-family:var(--sans); }
.pc-price input { font-weight:600; }
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.pc-del { color:var(--danger,var(--mid-danger, #c0392b)); }
@media (max-width:680px){ .pc-tiers { grid-template-columns:1fr; } .pricing-editor { padding-bottom:96px; } }

/* ─── Pricing-page quote builder ─────────────────────────────────────────── */
.pc-builder { border:1px solid var(--accent-deep,#0064E3); }
.qb-services { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.qb-svc { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:9999px; background:var(--mid-surface-2, #fff); font-size:13px; cursor:pointer; }
.qb-svc input { margin:0; }
.qb-svc:has(input:checked) { background:var(--pale-blue,#E1F3FE); border-color:var(--accent-deep,#0064E3); font-weight:600; }
.pc-check { display:inline-flex; align-items:center; gap:7px; font-size:13px; margin:4px 0 10px; }
.qb-actions { display:flex; gap:8px; flex-wrap:wrap; }
.qb-result { margin-top:12px; font-size:13px; }
.qb-result .qb-pkg { padding:4px 0; }
.qb-ok { color:#1f7a37; font-weight:600; }
.qb-ok a { color:var(--accent-deep,#0064E3); }
.qb-err { color:var(--danger,var(--mid-danger, #c0392b)); }

/* ─── Quote Catalog (Services / Events / Packages) ───────────────────────── */
.qc-svc-list { display:flex; flex-direction:column; gap:8px; }
.qc-svc { display:flex; gap:8px; align-items:center; }
.qc-svc input[data-f="name"] { flex:1 1 auto; }
.qc-svc input[data-f="unitPrice"] { width:120px; }
.qc-svc select { width:170px; }
.qc-svc input, .qc-svc select, .qc-evt input, .qc-evt select, .qc-pkg input, .qc-pkg select { padding:7px 9px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:7px; background:var(--mid-surface-2, #fff); font-family:var(--sans); font-size:13px; }
.qc-x { border:none; background:none; color:var(--danger,var(--mid-danger, #c0392b)); cursor:pointer; font-size:14px; padding:4px 6px; }
.qc-evt-list, .qc-pkg-list { display:flex; flex-direction:column; gap:12px; }
.qc-evt, .qc-pkg { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:12px; background:rgba(255,255,255,0.55); }
.qc-evt-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.qc-evt-name { flex:1 1 auto; font-weight:600; }
.qc-lines { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.qc-line { display:flex; gap:8px; align-items:center; }
.qc-line select { flex:1 1 auto; }
.qc-line input[data-f="quantity"] { width:70px; }
.qc-evt-foot { display:flex; gap:16px; align-items:flex-end; margin-top:8px; flex-wrap:wrap; }
.qc-auto { font-size:13px; color:var(--muted); }
.qc-auto b { color:var(--ink,#1c1b1a); }
.qc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.qc-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:9999px; background:var(--mid-surface-2, #fff); font-size:13px; cursor:pointer; }
.qc-chip:has(input:checked) { background:var(--pale-blue,#E1F3FE); border-color:var(--accent-deep,#0064E3); font-weight:600; }
.qb2-pkg, .qc-pkg-evt { margin:0; }

/* ─── Builder: per-quote team tweak ──────────────────────────────────────── */
.qb2-pkglist { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.qb2-pkgblock { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:8px 10px; background:var(--mid-surface-2, #fff); }
.qb2-pkghead { border:none; padding:2px 0; background:none; }
.qb2-events { margin-top:8px; display:flex; flex-direction:column; gap:8px; padding-left:6px; border-left:2px solid var(--pale-blue,#E1F3FE); }
.qb2-ev-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:4px; }
.qb2-ev-price { color:var(--accent-deep,#0064E3); font-weight:600; }
.qb2-svcs { display:flex; flex-wrap:wrap; gap:8px; }
.qb2-q { display:flex; flex-direction:column; gap:2px; }
.qb2-q > span { font-size:11.5px; color:var(--muted,#65645F); }
.qb2-q input { width:72px; padding:5px 7px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:6px; font-size:13px; font-family:var(--sans); }

.tasks-cat-empty { padding: 14px 4px; color: var(--muted,#65645F); }

/* ─── Stage Suggestions page ─────────────────────────────────────────────── */
.suggestions-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.suggestion-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--glass-card, rgba(255,255,255,0.85));
  border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10));
  cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.suggestion-card:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -10px rgba(28,27,26,0.16); }
.suggestion-main { min-width: 0; flex: 1; }
.suggestion-head { display: flex; align-items: baseline; gap: 10px; }
.suggestion-name { font-weight: 600; font-size: 14px; color: var(--ink,#1c1b1a); }
.suggestion-conf { font-size: 11.5px; color: var(--muted,#65645F); }
.suggestion-move { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.suggestion-move .material-symbols-outlined { font-size: 18px; color: var(--muted,#9A9994); }
.stage-pill {
  display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.stage-pill.from { background: rgba(28,27,26,0.06); color: var(--muted,#65645F); }
.stage-pill.to { background: rgba(0,100,227,0.12); color: var(--accent-deep,#0064E3); }
.suggestion-reason { margin: 0; }
.suggestion-actions { display: flex; gap: 8px; flex-shrink: 0; }
.suggestion-actions .button { display: inline-flex; align-items: center; gap: 4px; }
.suggestion-actions .material-symbols-outlined { font-size: 18px; }
@media (max-width: 560px) {
  .suggestion-card { flex-direction: column; align-items: stretch; }
  .suggestion-actions { justify-content: stretch; }
  .suggestion-actions .button { flex: 1; justify-content: center; }
}

.recency-chip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(28,27,26,0.06); color: var(--muted,#65645F); }
.recency-chip.ghost { background: rgba(255,69,58,0.12); color: var(--danger,var(--mid-danger, #FF453A)); }
.recency-chip.owe { background: rgba(0,100,227,0.10); color: var(--accent-deep,#0064E3); }
.recency-chip.parked { background: rgba(255,159,10,0.14); color: var(--warning,#FF9F0A); }

/* ─── Ask Gia concierge card ─────────────────────────────────────────────── */
.askgia-card {
  margin-bottom: 20px; padding: 16px 18px; border-radius: 18px;
  background: var(--glass-card, rgba(255,255,255,0.85));
  border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10));
}
.askgia-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.askgia-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #0064E3, #00b3ff); color: #fff; flex-shrink: 0; }
.askgia-avatar .material-symbols-outlined { font-size: 20px; }
.askgia-title { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.askgia-thread { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.askgia-thread:empty { display: none; }
.askgia-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: normal; }
.askgia-msg.me { align-self: flex-end; background: var(--accent-deep, #0064E3); color: #fff; border-bottom-right-radius: 4px; }
.askgia-msg.gia { align-self: flex-start; background: rgba(28,27,26,0.05); color: var(--ink,#1c1b1a); border-bottom-left-radius: 4px; }
.askgia-msg.pending { opacity: 0.6; font-style: italic; }
.askgia-tag { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep,#0064E3); margin-bottom: 2px; }
.askgia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.askgia-chip { font-size: 11.5px; padding: 5px 11px; border-radius: 9999px; border: 1px solid var(--outline-variant,#d8dbe3);
  background: rgba(255,255,255,0.7); color: var(--muted,#65645F); cursor: pointer; }
.askgia-chip:hover { border-color: var(--accent-deep,#0064E3); color: var(--accent-deep,#0064E3); }
.askgia-input { display: flex; gap: 8px; align-items: center; }
.askgia-input input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--outline-variant,#d8dbe3);
  background: rgba(255,255,255,0.92); font-size: 14px; font-family: var(--sans); }
.askgia-input .button.primary { padding: 10px 14px; }
.askgia-input .material-symbols-outlined { font-size: 18px; }

/* ─── Quote catalog: resource costing cards ──────────────────────────────── */
.qc-svc.cost-card { display:block; padding:12px 14px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:12px; background:rgba(255,255,255,0.6); margin-bottom:10px; }
.qc-svc-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.qc-svc-top .qc-svc-name { flex:1; min-width:170px; }
.qc-svc-top select { padding:6px 8px; border-radius:8px; border:1px solid var(--outline-variant,#d8dbe3); background:var(--mid-surface-2, #fff); font-size:13px; }
.qc-cost-grid { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.qc-cost-grid .pc-mini { min-width:96px; }
.qc-svc.perShift .unit-fields { display:none; }
.qc-svc.perUnit .shift-fields { display:none; }
.qc-margin { font-size:11.5px; display:inline-flex; gap:6px; align-items:center; color:var(--muted,#65645F); padding-bottom:6px; }
.qc-mtag { font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:9999px; background:rgba(28,27,26,0.06); }
.qc-mtag.ok { background:rgba(48,209,88,0.16); color:#1f8a3b; }
.qc-mtag.warn { background:rgba(255,159,10,0.16); color:#b5740a; }
.qc-mtag.bad { background:rgba(255,69,58,0.14); color:#d23b30; }
.qc-evt-shift { padding:5px 9px; border-radius:8px; border:1px solid var(--outline-variant,#d8dbe3); background:var(--mid-surface-2, #fff); font-size:13px; }

/* ─── Quote catalog: package builder (redesigned) ────────────────────────── */
.qc-pkg { padding:14px 16px; }
.qc-pkg-head { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.qc-pkg-name { flex:1; font-weight:600; font-size:13px; }
.qc-pkg-head .qc-del-pkg { display:inline-flex; align-items:center; padding:6px 9px; }
.qc-pkg-head .qc-del-pkg .material-symbols-outlined { font-size:18px; }
.qc-pkg-grid { display:flex; flex-direction:column; gap:12px; }
.qc-block { background:rgba(0,0,0,0.025); border:1px solid var(--line,rgba(0,0,0,0.07)); border-radius:10px; padding:12px 14px; }
.qc-block-title { margin:0 0 10px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#65645F); }
.qc-block-title .qc-block-hint { font-weight:500; text-transform:none; letter-spacing:0; opacity:.7; }
.qc-addons { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.qc-addon-line { display:flex; gap:8px; align-items:center; }
.qc-addon-line select { flex:1; min-width:0; }
.qc-addon-line .qc-x-times { color:var(--muted); }
.qc-addon-line input[data-f="addonQty"] { width:64px; flex:none; }
.qc-deliv-checks { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; }
.qc-deliv-checks .pc-check { margin:0; }
.qc-empty { margin:0 0 4px; }

/* ─── Quote page: package header with name / film / BTS+interviews ────────── */
.package-card-head { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.package-card-head .pkg-name-field { grid-column: 1 / -1; }
.package-card-head .pkg-film-field { grid-column: 1 / -1; }
.package-card-head .pkg-deliv-toggles { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding-top:2px; }
.package-card-head .pkg-deliv-toggles .mini-check { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.package-card-head .package-actions { grid-column: 1 / -1; display:flex; justify-content:flex-end; gap:8px; }

/* ─── Quote page: Add-event dialog ───────────────────────────────────────── */
.custom-event-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.ae-overlay { position:fixed; inset:0; background:rgba(20,20,25,0.45); display:grid; place-items:center; z-index:1000; }
.ae-dialog { width:min(460px,92vw); background:var(--mid-surface-2, #fff); border-radius:16px; padding:18px 20px; box-shadow:0 24px 64px -12px rgba(0,0,0,0.35); }
.ae-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ae-head h3 { margin:0; font-size:16px; }
.ae-field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.ae-field > span { font-size:11.5px; color:var(--muted,#65645F); }
.ae-field input, .ae-field select, .ae-row select, .ae-row input { padding:8px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:8px; font-size:14px; font-family:var(--sans); }
.ae-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ae-row select { flex:1; min-width:0; }
.ae-row .ae-qty { width:64px; }
.ae-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.ae-err { color:var(--danger,#d23b30); font-size:13px; margin:8px 0 0; min-height:16px; }

/* ═══ Ask Gia — floating popup (midnight) ═══ */
.askgia-bubble { position:fixed; bottom:24px; right:24px; z-index:60; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,#0064E3,#00b3ff); color:#fff; box-shadow:0 8px 28px rgba(0,90,200,0.45); display:grid; place-items:center; transition:transform var(--dur-fast); }
.askgia-bubble:hover { transform:scale(1.08); }
.askgia-bubble.hidden { display:none; }
.askgia-bubble .material-symbols-outlined { font-size:26px; }
.askgia-panel { position:fixed; bottom:24px; right:24px; z-index:61; width:min(420px, calc(100vw - 32px)); height:min(620px, calc(100dvh - 48px)); display:flex; flex-direction:column; overflow:hidden; background:var(--mid-surface-2); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:18px; box-shadow:0 24px 64px -12px rgba(0,0,0,0.6); transform:translateY(16px) scale(.98); opacity:0; transition:transform var(--dur) cubic-bezier(.16,1,.3,1), opacity var(--dur); }
.askgia-panel.open { transform:translateY(0) scale(1); opacity:1; }
.askgia-panel-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--mid-line); background:var(--mid-surface-3); }
.askgia-panel .askgia-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0064E3,#00b3ff); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.askgia-panel .askgia-avatar .material-symbols-outlined { font-size:19px; }
.askgia-panel .askgia-title { display:flex; flex-direction:column; flex:1; line-height:1.2; min-width:0; }
.askgia-panel .askgia-title strong { color:var(--mid-text); font-size:14px; }
.askgia-status { font-size:11.5px; color:var(--mid-primary); }
.askgia-iconbtn { background:none; border:none; color:var(--mid-text-2); cursor:pointer; padding:4px; border-radius:6px; display:grid; place-items:center; }
.askgia-iconbtn:hover { background:var(--mid-surface-4); color:var(--mid-text); }
.askgia-panel .askgia-thread { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.askgia-panel .askgia-msg { max-width:85%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:normal; }
.askgia-panel .askgia-msg.me { align-self:flex-end; background:var(--mid-accent); color:var(--mid-on-accent); border-bottom-right-radius:4px; }
.askgia-panel .askgia-msg.gia { align-self:flex-start; background:var(--mid-surface-4); color:var(--mid-text); border-bottom-left-radius:4px; }
.askgia-panel .askgia-msg.pending { opacity:.6; font-style:italic; }
.askgia-panel .askgia-tag { display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mid-primary); margin-bottom:2px; }
.askgia-panel .askgia-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 8px; }
.askgia-panel .askgia-chip { font-size:11.5px; padding:5px 11px; border-radius:9999px; border:1px solid var(--mid-line); background:var(--mid-surface-3); color:var(--mid-text-2); cursor:pointer; }
.askgia-panel .askgia-chip:hover { border-color:var(--mid-accent); color:var(--mid-primary); }
.askgia-panel .askgia-input { display:flex; gap:8px; align-items:center; padding:12px 14px; border-top:1px solid var(--mid-line); background:var(--mid-surface); }
.askgia-panel .askgia-input input { flex:1; padding:11px 14px; border-radius:12px; border:1px solid var(--mid-line); background:var(--mid-base); color:var(--mid-text); font-size:14px; font-family:var(--sans); }
.askgia-panel .askgia-send { width:40px; height:40px; border:none; border-radius:10px; background:var(--mid-accent); color:var(--mid-on-accent); cursor:pointer; display:grid; place-items:center; }
.askgia-panel .askgia-send .material-symbols-outlined { font-size:18px; }
@media (max-width:560px) { .askgia-panel { inset:0; width:100vw; height:100dvh; border-radius:0; } .askgia-bubble { bottom:84px; } }

/* ═══ Dashboard — midnight theme (scoped; re-defines tokens only here) ═══ */
#page-dashboard {
  --ink:var(--mid-text); --ink-secondary:var(--mid-text-2); --ink-tertiary:var(--mid-muted); --muted:var(--mid-text-2);
  --primary:var(--mid-primary); --accent-deep:var(--mid-accent); --line:rgba(255,255,255,0.08); --surface:var(--mid-base);
  background:var(--mid-base); color:var(--mid-text); border-radius:16px; padding:20px;
}
#page-dashboard h1, #page-dashboard h2, #page-dashboard h3 { color:var(--mid-text); }
#page-dashboard .eyebrow { color:var(--mid-primary); }
#page-dashboard .muted, #page-dashboard .small { color:var(--mid-text-2); }
#page-dashboard .dash-stat,
#page-dashboard .dash-card,
#page-dashboard .dash-funnel-card { background:var(--mid-surface-2) !important; border-color:var(--mid-line) !important; }
#page-dashboard .dash-card:hover { background:var(--mid-surface-2) !important; }
#page-dashboard .dash-stat-value { color:var(--mid-primary); }
#page-dashboard .dash-funnel-bar { background:var(--mid-surface-4); }
#page-dashboard .dash-row:hover { background:var(--mid-surface-3); }
#page-dashboard .dash-empty { color:var(--mid-text-2); }
#page-dashboard .dash-avatar.good { background:rgba(48,209,88,0.18); color:#7ee29a; }
#page-dashboard .dash-avatar.warn { background:rgba(255,193,118,0.18); color:var(--mid-tertiary); }
#page-dashboard .dash-avatar { background:var(--mid-surface-4); color:var(--mid-text-2); }
#page-dashboard .button.ghost { background:var(--mid-surface-3); color:var(--mid-text); border:1px solid var(--mid-line); }
#page-dashboard .button.ghost:hover { background:var(--mid-surface-4); }
#page-dashboard .button.primary { background:var(--mid-accent); color:var(--mid-on-accent); }
#page-dashboard input[type="month"], #page-dashboard input[type="date"] { background:var(--mid-surface); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:8px; padding:6px 8px; }
#page-dashboard .dash-month-label { color:var(--mid-text-2); }

/* ═══ Midnight SHELL — only while Dashboard is active ═══ */
body.dash-active { background:var(--mid-base); }
body.dash-active .shell { background:var(--mid-base); }
body.dash-active .app-sidebar { background:var(--mid-surface); border-right-color:var(--mid-line); }
body.dash-active .brand-block strong { color:var(--mid-text); }
body.dash-active .brand-block span { color:var(--mid-muted); }
body.dash-active .nav-item { color:var(--mid-text-2); }
body.dash-active .nav-item:hover { background:var(--mid-surface-3); }
body.dash-active .nav-item.active { background:var(--mid-badge); color:var(--mid-primary); }
body.dash-active .topbar { background:var(--mid-surface-2); border-bottom-color:var(--mid-line); }
body.dash-active .search-shell { background:var(--mid-surface-3); border-color:var(--mid-line); }
body.dash-active .search-shell input { color:var(--mid-text); }
body.dash-active .search-shell input::placeholder { color:var(--mid-muted); }
body.dash-active .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.dash-active .topbar-actions > .material-symbols-outlined { color:var(--mid-text-2); }
body.dash-active .profile-dot { background:var(--mid-badge); color:var(--mid-text); }
body.dash-active .nav-more-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .more-item { color:var(--mid-text-2); }
/* Seamless: drop the inner dark panel's frame so it blends with the dark shell */
body.dash-active #page-dashboard { background:transparent; border-radius:0; padding:0; }

/* Period controls inside the dark dashboard */
#page-dashboard .dash-month-label,
#page-dashboard .dash-range input[type="date"] { background:var(--mid-surface) !important; border-color:var(--mid-line) !important; color:var(--mid-text) !important; }
#page-dashboard .dash-month-label input[type="month"] { color:var(--mid-text); background:transparent; }
#page-dashboard .dash-range-sep { color:var(--mid-text-2); }

/* ═══ Dashboard — Nexus/midnight components (new layout) ═══ */
/* Today — proactive action queue */
.today-queue { background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
/* Inside the Sage dashboard: match sg-card geometry + spacing rhythm */
#sageDash .today-queue { border-radius: 18px; padding: 18px 20px; margin: 14px 0 18px; }
#sageDash .today-head strong { font-size: 16px; }
.today-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.today-head .material-symbols-outlined { color: var(--mid-accent-ink); }
.today-head strong { font-size: 14px; color: var(--mid-text); }
.today-count { background: var(--mid-accent); color: var(--mid-on-accent, #00354a); font-size: 11.5px; font-weight: 700; border-radius: 9999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; }
.today-head .today-sub { margin-left: auto; }
/* Fixed-height card: rows scroll inside, like .sg-list */
.today-list { display: flex; flex-direction: column; gap: 8px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
/* Same idiom as the dashboard's .sg-row lists: borderless soft-tint rows */
.today-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: rgba(42,51,37,0.04); border: none; border-radius: 12px; transition: background var(--dur-1, var(--dur-fast)) var(--ease); }
.today-item:hover { background: rgba(42,51,37,0.08); }
.today-item .today-ico { flex: 0 0 auto; display: grid; place-items: center; }
.today-item .today-ico .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
.today-body { flex: 1 1 auto; min-width: 0; }
.today-title { font-weight: 600; color: var(--mid-text); font-size: 14px; }
.today-kind { font-weight: 600; color: var(--mid-text-2); }
.today-do { flex: 0 0 auto; }
.today-dismiss { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
.today-dismiss:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
.today-dismiss .material-symbols-outlined { font-size: 16px; }
/* #1 ranked item: same inset accent stripe the dashboard uses for nudges (.sg-row-nudge) */
.today-item.today-top { box-shadow: inset 3px 0 0 var(--mid-accent); }
.today-item.today-top .today-title { font-weight: 700; }
.today-item.today-top .today-ico .material-symbols-outlined { color: var(--mid-accent-ink); }
.today-item { flex-wrap: wrap; }
.today-draft { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.today-draft-text { width: 100%; min-height: 74px; resize: vertical; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px 11px; font-size: 13px; line-height: 1.45; }
/* Section mini-headers inside the queue */
.today-sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 0; }
.today-sec:first-child { margin-top: 0; }
.today-sec-title { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-text-2); }
.today-sec-sub { font-size: 11.5px; }
/* Autopilot settings */
.today-gear { margin-left: 4px; width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
.today-gear:hover { color: var(--mid-text); background: rgba(42,51,37,0.08); }
.today-gear .material-symbols-outlined { font-size: 18px; }
.today-auto-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 10px; background: rgba(42,51,37,0.04); border-radius: 12px; }
.today-auto-panel[hidden] { display: none; } /* display:flex would otherwise defeat the hidden attribute */
.today-auto-title { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-text-2); }
.today-auto-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mid-text); }
.today-auto-rec { display: block; color: var(--mid-muted); }
.today-auto-mode { flex: 0 0 auto; width: 150px; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.today-auto-panel .muted { line-height: 1.4; }
/* Autopilot ledger */
.today-ledger { margin-top: 10px; }
.today-ledger-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: rgba(42,51,37,0.04); border: none; border-radius: 12px; padding: 9px 12px; color: var(--mid-text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.today-ledger-toggle:hover { background: rgba(42,51,37,0.08); }
.today-ledger-toggle .material-symbols-outlined { font-size: 18px; color: var(--mid-accent-ink); }
.today-ledger-chev { margin-left: auto; transition: transform var(--dur-fast) var(--ease); }
.today-ledger-toggle.is-open .today-ledger-chev { transform: rotate(180deg); }
.today-ledger-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px 2px; }
.today-ledger-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; }
.today-ledger-row b { font-size: 13px; font-weight: 600; color: var(--mid-text); }
.today-draft-actions { display: flex; align-items: center; gap: 10px; }
.today-draft-actions .muted { margin-right: auto; }
@media (max-width: 560px) { .today-body { flex-basis: 100%; order: -1; } }

#page-dashboard .nx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
@media (max-width:900px){ #page-dashboard .nx-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ #page-dashboard .nx-kpis { grid-template-columns:1fr 1fr; } }
.nx-kpi { background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:16px; padding:16px 18px; }
.nx-kpi-top { display:flex; justify-content:space-between; margin-bottom:12px; }
.nx-kpi-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(56,189,248,0.12); color:var(--mid-accent-ink); }
.nx-kpi-icon .material-symbols-outlined { font-size:20px; }
.nx-kpi-label { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-text-2); }
.nx-kpi-value { margin:4px 0 2px; font-size:26px; font-weight:700; color:var(--mid-text); letter-spacing:-0.01em; }
.nx-kpi-sub { font-size:11.5px; color:var(--mid-muted); }

.nx-card { background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.nx-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.nx-card-head h3 { margin:0; font-size:16px; font-weight:600; color:var(--mid-text); display:flex; align-items:center; gap:8px; }
.nx-head-icon { font-size:18px; } .nx-head-icon.warn { color:var(--mid-tertiary); }
.nx-sub { margin:2px 0 0; font-size:13px; color:var(--mid-muted); }
.nx-meta { font-size:11.5px; color:var(--mid-text-2); }
.nx-pill { font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:9999px; background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-pill.good { background:rgba(48,209,88,0.18); color:#7ee29a; }
.nx-pill.warn { background:rgba(255,193,118,0.18); color:var(--mid-tertiary); }

/* Chart */
.nx-chart { display:flex; align-items:flex-end; gap:8px; height:200px; }
.nx-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; min-width:0; }
.nx-bar-val { font-size:11.5px; font-weight:700; color:var(--mid-primary); height:12px; }
.nx-bar-track { flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; background:rgba(57,72,90,0.30); border-radius:4px 4px 0 0; overflow:hidden; }
.nx-bar-fill { width:100%; min-height:3px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#7bd0ff,var(--mid-accent)); transition:height var(--dur) cubic-bezier(.16,1,.3,1); }
.nx-bar:hover .nx-bar-fill { background:linear-gradient(180deg,#a6dcff,#5cc7ff); }
.nx-bar-x { font-size:11.5px; color:var(--mid-muted); white-space:nowrap; }

/* Split layout */
.nx-split { display:block; }
/* 3 / 2 / 1 taper on a 6-column grid: 3 cards at span 2, then 2 at span 3, then 1 at span 6.
   Size follows POSITION, so dragging a card to the end makes it full-width for free. */
.nx-stack { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; align-items:stretch; }
.nx-stack > .nx-card { grid-column:span 2; margin-bottom:0; min-width:0; }   /* row 1 — three across */
.nx-stack > .nx-card:nth-child(n+4) { grid-column:span 3; }     /* row 2 — two across  */
.nx-stack > .nx-card:nth-child(n+6) { grid-column:span 6; }     /* row 3 — full width  */
/* Below 1024px the taper stops earning its keep: two across, then full width. */
@media (max-width:1024px){
  .nx-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nx-stack > .nx-card,
  .nx-stack > .nx-card:nth-child(n+4) { grid-column:span 1; }
  .nx-stack > .nx-card:nth-child(n+6) { grid-column:span 2; }
}
@media (max-width:720px){
  .nx-stack { grid-template-columns:minmax(0,1fr); }
  .nx-stack > .nx-card,
  .nx-stack > .nx-card:nth-child(n+4),
  .nx-stack > .nx-card:nth-child(n+6) { grid-column:span 1; }
}

/* Funnel */
.nx-funnel { display:flex; flex-direction:column; gap:14px; }
.nx-funnel-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13px; color:var(--mid-text-2); }
.nx-funnel-head span { flex:1; }
.nx-funnel-head strong { color:var(--mid-text); font-weight:700; }
.nx-funnel-conv { font-size:11.5px; color:var(--mid-muted); }
.nx-funnel-track { height:38px; background:var(--mid-surface-4); border-radius:10px; overflow:hidden; }
.nx-funnel-fill { height:100%; border-radius:10px; background:var(--mid-accent); transition:width var(--dur) cubic-bezier(.16,1,.3,1); }
.nx-funnel-fill.is-won { background:linear-gradient(90deg,var(--mid-accent),#7bd0ff); box-shadow:0 0 22px rgba(56,189,248,0.45); }

/* Win rate by source */
.nx-srcs { display:flex; flex-direction:column; gap:14px; }
.nx-src-row { display:flex; align-items:center; gap:12px; }
.nx-src-name { width:74px; font-size:13px; color:var(--mid-text-2); }
.nx-src-track { flex:1; height:8px; background:var(--mid-surface-4); border-radius:9999px; overflow:hidden; }
.nx-src-fill { display:block; height:100%; border-radius:9999px; background:var(--mid-accent); }
.nx-src-pct { width:40px; text-align:right; font-size:13px; color:var(--mid-text); }

/* Lists (attention / positive / calls / loss) — dark rows */
.nx-list .dash-row { background:transparent; border:1px solid transparent; border-radius:10px; }
.nx-list .dash-row:hover { background:var(--mid-surface-3); border-color:var(--mid-line); }
.nx-list .dash-row-title { color:var(--mid-text); }
.nx-list .dash-row-sub, .nx-list .dash-row-time { color:var(--mid-muted); }
/* Positive-leads note: wrap to next row, keep card width unchanged */
.nx-list .dash-row { align-items:flex-start; }
.nx-list .dash-row-sub { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; }
.nx-list .dash-row-title { white-space:normal; }
.nx-list .dash-row-amount { color:var(--mid-primary); }
.nx-list .dash-avatar { background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-list .dash-empty { color:var(--mid-muted); }

/* ═══ Dashboard fixes round 2 ═══ */
/* Funnel: gradient fill (not solid) */
.nx-funnel-fill { background:linear-gradient(90deg,#1f7fc4,#7bd0ff); }
.nx-funnel-fill.is-won { background:linear-gradient(90deg,var(--mid-accent),#a6e3ff); box-shadow:0 0 22px rgba(56,189,248,0.5); }
/* Clickable rows feel interactive */
#page-dashboard .dash-row[data-deal], #page-dashboard .dash-row[data-channel] { cursor:pointer; }
/* Kill the black gap: cap list heights so columns stay balanced + scroll */
.nx-list { max-height:300px; overflow-y:auto; }
.nx-srcs { max-height:300px; overflow-y:auto; }

/* Floating FABs: + on the right BELOW Gia's icon (both bottom-right) */
.app-sidebar .create-menu { position:fixed; bottom:24px; right:24px; left:auto; z-index:62; }
.create-menu-pop { position:absolute; bottom:calc(100% + 10px); right:0; left:auto; }
.askgia-bubble { bottom:92px; }   /* sits just above the + */
@media (max-width:560px){ .askgia-bubble { bottom:152px; } .app-sidebar .create-menu { bottom:84px; } }

/* Topbar search: compact like the mockup while on Dashboard */
body.dash-active .search-shell { max-width:360px; }
/* Create (+) menu popup — midnight on dashboard */
body.dash-active .create-menu-pop { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.dash-active .create-menu-item { color:var(--mid-text); }
body.dash-active .create-menu-item:hover { background:var(--mid-surface-3); }

/* ═══ Dashboard fixes round 3 ═══ */
/* Compact dark search to match the mockup (only on Dashboard) */
body.dash-active .topbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
body.dash-active .search-shell { width:min(100%,300px); }
body.dash-active .search-shell input { background:var(--mid-surface-3); color:var(--mid-text); border:1px solid var(--mid-line); height:36px; }
body.dash-active .search-shell input::placeholder { color:var(--mid-muted); }
body.dash-active .search-shell .material-symbols-outlined { color:var(--mid-muted); }
/* Date range filter (dark) */
#page-dashboard .dash-period { display:flex; align-items:center; gap:10px; }
#page-dashboard .dash-range { display:inline-flex; align-items:center; gap:8px; }
#page-dashboard .dash-range input[type="date"] { background:var(--mid-surface); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:8px; padding:6px 10px; }
#page-dashboard #dashLive { display:inline-flex; align-items:center; gap:4px; background:var(--mid-surface-3); color:var(--mid-primary); border:1px solid var(--mid-line); }
#page-dashboard #dashLive .material-symbols-outlined { font-size:16px; }

/* ═══ Dashboard fixes round 4 — perf + view-all ═══ */
/* Kill GPU-heavy backdrop blur on the dashboard (major lag source) */
body.dash-active .app-sidebar, body.dash-active .topbar { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* Lists now show a few + View all — no inner scroll needed */
.nx-list { max-height:none; overflow:visible; }
.nx-viewall { display:block; width:100%; text-align:left; margin-top:6px; padding:8px 10px; background:transparent; border:none; border-top:1px solid var(--mid-line); color:var(--mid-primary); font-size:13px; font-weight:600; cursor:pointer; }
.nx-viewall:hover { color:#a6e3ff; }

/* ═══ Dashboard fixes round 5 ═══ */
/* CRITICAL: when hidden, the Gia panel must NOT be laid out (it was an invisible
   overlay covering the Gia bubble + the create (+) button). */
.askgia-panel[hidden] { display:none !important; }
.askgia-panel { z-index:70; }
.askgia-bubble { z-index:71; }
.app-sidebar .create-menu { z-index:72; }
/* Back-to-live: icon-only button, inline with the date range */
#page-dashboard #dashLive { padding:6px 8px; }

/* ═══ Dashboard fixes round 6 — full scrollable lists ═══ */
/* Re-enable in-card scroll (round 4 had disabled it for the view-all variant). */
.nx-list { max-height:360px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
.nx-srcs { max-height:360px; overflow-y:auto; }
/* Visible dark scrollbar so it's obvious the card scrolls */
.nx-list::-webkit-scrollbar, .nx-srcs::-webkit-scrollbar { width:8px; }
.nx-list::-webkit-scrollbar-thumb, .nx-srcs::-webkit-scrollbar-thumb { background:var(--mid-line); border-radius:8px; }
.nx-list::-webkit-scrollbar-track, .nx-srcs::-webkit-scrollbar-track { background:transparent; }
.nx-list, .nx-srcs { scrollbar-width:thin; scrollbar-color:var(--mid-line) transparent; }

/* ═══ Hide page titles on all pages (keep action controls) ═══ */
.page-heading .eyebrow, .page-heading h1 { display: none; }

/* ═══ Hide page meta line (e.g. "Updated just now") — paragraphs only, NOT small buttons ═══ */
.page-heading > div p.small, .page-heading > div p.muted { display: none; }
#page-dashboard .dash-period { margin-right: 6px; }        /* nudge the group left */

/* ═══ Topbar: notifications bell + help button + dropdowns ═══ */
.topbar-iconbtn { background:none; border:none; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; padding:6px; border-radius:8px; position:relative; }
.topbar-iconbtn:hover { color:var(--primary); background:rgba(0,0,0,0.04); }
.notif-menu { position:relative; display:inline-flex; }
.notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--mid-danger, #FF453A); }
.notif-pop { position:absolute; top:calc(100% + 8px); right:0; width:260px; background:var(--mid-surface-2, #fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.25); padding:6px; z-index:80; }
.notif-pop[hidden] { display:none; }
.notif-head { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }
.notif-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer; padding:9px 10px; border-radius:8px; font-size:14px; color:var(--ink); text-align:left; }
.notif-item:hover { background:var(--panel-soft,#f7f3f0); }
.notif-item .material-symbols-outlined { font-size:18px; color:var(--muted); }
.notif-label { flex:1; }
.notif-count { font-size:11.5px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:9999px; background:rgba(0,100,227,0.12); color:var(--accent-deep,#0064E3); display:inline-flex; align-items:center; justify-content:center; }
.notif-chev { margin-left:auto; }

/* Dark dropdowns on the Dashboard (notif + profile) */
body.dash-active .topbar-iconbtn { color:var(--mid-text-2); }
body.dash-active .topbar-iconbtn:hover { color:var(--mid-primary); background:var(--mid-surface-3); }
body.dash-active .notif-pop, body.dash-active .profile-menu-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .notif-head { color:var(--mid-muted); }
body.dash-active .notif-item { color:var(--mid-text); }
body.dash-active .notif-item:hover { background:var(--mid-surface-3); }
body.dash-active .notif-item .material-symbols-outlined { color:var(--mid-muted); }
body.dash-active .profile-menu-item { color:var(--mid-text); }
body.dash-active .profile-menu-item:hover { background:var(--mid-surface-3); color:var(--mid-text); }

/* ═══ Dashboard filter dropdown (presets + custom range) ═══ */
#page-dashboard .dash-period { display:flex; align-items:center; gap:10px; }
.dash-filter { position:relative; display:inline-flex; }
.dash-filter-btn { display:inline-flex; align-items:center; gap:6px; }
.dash-filter-btn .dash-filter-caret { font-size:18px; margin-left:2px; }
.dash-filter-btn .material-symbols-outlined { font-size:18px; }
.dash-filter-pop { position:absolute; top:calc(100% + 8px); right:0; width:240px; background:var(--mid-surface-2, #fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.25); padding:6px; z-index:80; }
.dash-filter-pop[hidden] { display:none; }
.dash-filter-opt { display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--ink,#1c1b1a); }
.dash-filter-opt:hover { background:var(--panel-soft,#f7f3f0); }
.dash-filter-custom { border-top:1px solid var(--line,rgba(0,0,0,0.08)); margin-top:6px; padding:10px 12px 8px; display:flex; flex-direction:column; gap:8px; }
.dash-filter-custom-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#65645F); }
.dash-filter-custom .dash-range { display:flex; align-items:center; gap:6px; }
.dash-filter-custom input[type="date"] { flex:1; min-width:0; padding:6px 8px; border-radius:8px; border:1px solid var(--outline-variant,#c0c6d6); background:var(--mid-surface-2, #fff); font:inherit; }

/* Dark on the Dashboard */
body.dash-active .dash-filter-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .dash-filter-opt { color:var(--mid-text); }
body.dash-active .dash-filter-opt:hover { background:var(--mid-surface-3); }
body.dash-active .dash-filter-custom { border-top-color:var(--mid-line); }
body.dash-active .dash-filter-custom-label { color:var(--mid-muted); }
body.dash-active .dash-filter-custom input[type="date"] { background:var(--mid-base); color:var(--mid-text); border-color:var(--mid-line); }

/* ═══ Create (+) FAB — circular, same size as the Gia bubble ═══ */
.app-sidebar .create-fab { width:56px; height:56px; border-radius:50%; }
.app-sidebar .create-fab .material-symbols-outlined { font-size:26px; }
/* Open the + menu upward, clearing the area; Gia bubble hides while it's open. */
.app-sidebar .create-menu-pop { bottom:calc(100% + 12px); right:0; left:auto; }

/* ═══ Sidebar polish (dashboard) to match the Nexus mockup ═══ */
body.dash-active .brand-block strong { color:var(--mid-primary); }                 /* blue brand */
body.dash-active .nav-item { border-radius:10px; }
body.dash-active .nav-item.active { background:rgba(56,189,248,0.14); color:var(--mid-primary); }   /* subtle blue fill */
body.dash-active .nav-item.active .material-symbols-outlined { color:var(--mid-primary); }
body.dash-active .nav-item:hover:not(.active) { background:#222a30; }

/* ═══ Create (+) FAB — subtle blue glow ═══ */
.app-sidebar .create-fab { box-shadow:0 8px 26px rgba(0,90,200,0.45); animation:fabGlow 3.2s ease-in-out infinite; }
@keyframes fabGlow {
  0%, 100% { box-shadow:0 8px 26px rgba(0,90,200,0.40), 0 0 0 rgba(56,189,248,0); }
  50%      { box-shadow:0 8px 30px rgba(0,90,200,0.55), 0 0 22px rgba(56,189,248,0.45); }
}

/* ═══ Sidebar: flush panel (not a card) + correct midnight blues on the shell ═══ */
/* The shell (sidebar/topbar) sits OUTSIDE #page-dashboard, so it was using the
   light theme's navy --primary. Redefine the midnight tokens at body level. */
body.dash-active {
  --primary:var(--mid-accent); --accent-deep:var(--mid-accent); --primary-container:var(--mid-accent);
  --ink:var(--mid-text); --ink-secondary:var(--mid-text-2); --ink-tertiary:var(--mid-muted); --muted:var(--mid-text-2);
  --line:rgba(255,255,255,0.08);
}
@media (min-width: 961px) {
  body.dash-active .app-sidebar {
    inset:0 auto 0 0; width:248px;
    border:none; border-right:1px solid var(--mid-line); border-radius:0;
    background:var(--mid-surface); box-shadow:none; padding:22px 14px 16px;
  }
}
body.dash-active .brand-block strong { color:var(--mid-accent-ink); }
body.dash-active .nav-item.active { background:rgba(56,189,248,0.12); color:var(--mid-primary); }
body.dash-active .nav-item.active .material-symbols-outlined { color:var(--mid-primary); }

/* ═══ Uniform font everywhere — buttons/inputs don't inherit font-family by default ═══ */
button, input, select, textarea, optgroup, .nav-item, .more-item, .create-menu-item {
  font-family: var(--sans);
}
/* ═══ Topbar search — pill (rounded sides) like the reference ═══ */
.search-shell input { border-radius: 9999px; padding-right: 16px; }

/* ═══ Positive leads — AI score badge ═══ */
.nx-score { min-width:34px; height:24px; padding:0 8px; border-radius:9999px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-score.hot  { background:rgba(48,209,88,0.18);  color:#7ee29a; }
.nx-score.warm { background:rgba(56,189,248,0.16); color:var(--mid-primary); }
.nx-score.cold { background:rgba(255,159,10,0.16); color:var(--mid-tertiary); }

/* ═══ Dashboard card drag-to-rearrange ═══ */
.nx-card-head { position:relative; }
.nx-drag { cursor:grab; display:inline-flex; align-items:center; color:var(--mid-text-3); margin:-2px 2px -2px -4px; opacity:.55; transition:opacity var(--dur-fast); touch-action:none; }
.nx-card-head:hover .nx-drag { opacity:1; }
.nx-drag:active { cursor:grabbing; }
.nx-drag .material-symbols-outlined { font-size:18px; }
.nx-card.nx-dragging { opacity:.45; outline:2px dashed var(--mid-accent); outline-offset:-2px; }
.nx-card.nx-drop-before { box-shadow:0 -3px 0 0 var(--mid-accent); }
.nx-card.nx-drop-after  { box-shadow:0 3px 0 0 var(--mid-accent); }
.nx-stack.nx-drop-target { outline:2px dashed rgba(56,189,248,0.4); outline-offset:4px; border-radius:18px; }

/* ═══════════════════════════════════════════════════════════════
   LEADS — Midnight theme (Nexus/Kanban mockup). Scoped to body.leads-active
   so it overrides the earlier light "liquid glass" #page-leads block.
   The dark shell (sidebar/topbar) is shared via body.dash-active.
   ═══════════════════════════════════════════════════════════════ */
body.leads-active #page-leads { background:transparent; }
body.leads-active #page-leads::before { display:none; } /* kill light gradient orbs */
body.leads-active #page-leads .page-heading h1 { color:var(--mid-text); }
body.leads-active #page-leads .page-heading .eyebrow { color:var(--mid-primary); }

/* Search + filter controls */
body.leads-active #page-leads .search-shell { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.leads-active #page-leads .search-shell input { color:var(--mid-text); background:transparent; }
body.leads-active #page-leads .search-shell input::placeholder { color:var(--mid-muted); }
body.leads-active #page-leads .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.leads-active #page-leads .filter-select { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:10px; }
body.leads-active #page-leads .button.ghost { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.leads-active #page-leads .button.ghost:hover { background:var(--mid-surface-3); color:var(--mid-primary); }

/* View toggle (Kanban / List) */
.leads-view-toggle { display:inline-flex; gap:2px; background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:10px; padding:2px; }
.leads-view-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; border:none; background:transparent; color:var(--mid-muted); border-radius:8px; cursor:pointer; transition:all var(--dur-fast); }
.leads-view-btn:hover { color:var(--mid-text-2); }
.leads-view-btn.is-active { background:var(--mid-accent); color:var(--mid-on-accent); }
.leads-view-btn .material-symbols-outlined { font-size:20px; }
body:not(.leads-active) .leads-view-toggle { background:var(--glass-card,#fff); border:1px solid var(--line,#e5e5e5); }
body:not(.leads-active) .leads-view-btn.is-active { background:var(--accent-deep,#0064E3); color:#fff; }

/* Kanban columns + cards (midnight) */
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:14px; }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-header { border-bottom:1px solid var(--mid-line); }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-title { color:var(--mid-text); letter-spacing:.02em; font-weight:600; }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-meta { color:var(--mid-muted); }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-empty { color:var(--mid-text-3); }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card {
  background:var(--mid-surface-2); backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--mid-line); border-radius:14px; color:var(--mid-text);
}
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card:hover { border-color:var(--mid-accent); transform:translateY(-2px); box-shadow:0 10px 25px -5px rgba(56,189,248,0.12); }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card.is-selected { border-color:var(--mid-primary); box-shadow:0 0 0 1px var(--mid-primary) inset; }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-title { color:var(--mid-text); font-weight:600; }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-amount { color:var(--mid-primary); font-weight:700; }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-events { color:var(--mid-muted); }
body.leads-active #page-leads .source-pill { background:var(--mid-surface-3); color:var(--mid-text-2); border:1px solid var(--mid-line); }
body.leads-active #page-leads .op-pill { border-radius:9999px; }
body.leads-active #page-leads .op-pill-live { background:rgba(56,189,248,0.15); color:var(--mid-primary); }
body.leads-active #page-leads .op-pill-quote { background:rgba(48,209,88,0.16); color:#7ee29a; }
body.leads-active #page-leads .op-pill-crm { background:var(--mid-surface-3); color:var(--mid-text-2); }
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-check { border-color:var(--mid-line); color:var(--mid-primary); }

/* Mobile stage pills */
body.leads-active #page-leads .leads-stage-pill { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.leads-active #page-leads .leads-stage-pill.is-active { background:var(--mid-accent); color:var(--mid-on-accent); border-color:var(--mid-accent); }
body.leads-active #page-leads .leads-stage-pill .count { color:var(--mid-muted); }

/* Selection bar */
body.leads-active #page-leads .leads-select-bar { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); }

/* ── List / table view ── */
.leads-list { width:100%; overflow-x:auto; }
.leads-table { width:100%; border-collapse:collapse; }
.leads-table thead th { text-align:left; font-size:11.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:12px 16px; }
.leads-table tbody td { padding:14px 16px; font-size:14px; }
.leads-table .ll-name { font-weight:600; display:flex; flex-direction:column; gap:2px; }
.leads-table .ll-name .ll-sub { font-weight:400; font-size:11.5px; opacity:.7; }
.leads-table .ll-value { font-weight:700; }
.leads-table .ll-chev { text-align:right; }
.leads-table .ll-stage { display:inline-block; padding:3px 10px; border-radius:9999px; font-size:11.5px; font-weight:600; }
/* Midnight list */
body.leads-active .leads-list { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:14px; overflow:hidden; }
body.leads-active .leads-table thead { background:var(--mid-surface-3); }
body.leads-active .leads-table thead th { color:var(--mid-text-2); border-bottom:1px solid var(--mid-line); }
body.leads-active .leads-table tbody tr { border-bottom:1px solid var(--mid-surface-3); cursor:pointer; transition:background var(--dur-fast); }
body.leads-active .leads-table tbody tr:hover { background:var(--mid-surface-2); }
body.leads-active .leads-table td { color:var(--mid-text); }
body.leads-active .leads-table .ll-name .ll-sub, body.leads-active .leads-table .ll-source, body.leads-active .leads-table .ll-time { color:var(--mid-muted); }
body.leads-active .leads-table .ll-value { color:var(--mid-primary); }
body.leads-active .leads-table .ll-chev .material-symbols-outlined { color:var(--mid-text-3); font-size:20px; }
.leads-table .ll-stage.good { background:rgba(48,209,88,0.16); color:#7ee29a; }
.leads-table .ll-stage.bad { background:rgba(255,69,58,0.16); color:#ff9f96; }
.leads-table .ll-stage.hot { background:rgba(255,159,10,0.18); color:var(--mid-tertiary); }
.leads-table .ll-stage.info { background:rgba(56,189,248,0.16); color:var(--mid-primary); }
.leads-table .ll-stage.muted { background:var(--mid-surface-4); color:var(--mid-text-2); }

/* ── Lead detail drawer (midnight) — applies when opened over a dark page ── */
body.dash-active .detail-content { background:var(--mid-surface-2); border-left:1px solid var(--mid-line); color:var(--mid-text); }
body.dash-active .detail-panel { color:var(--mid-text); }
body.dash-active .detail-panel h2, body.dash-active .detail-panel h3 { color:var(--mid-text); }
body.dash-active .detail-panel .muted, body.dash-active .detail-panel .detail-stage { color:var(--mid-muted); }
body.dash-active .detail-panel .detail-head { border-bottom:1px solid var(--mid-line); }
body.dash-active .detail-panel input,
body.dash-active .detail-panel select,
body.dash-active .detail-panel textarea {
  background:var(--mid-base); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:8px;
}
body.dash-active .detail-panel input::placeholder, body.dash-active .detail-panel textarea::placeholder { color:var(--mid-text-3); }
body.dash-active .detail-panel .stage-select { background:var(--mid-base); color:var(--mid-text); }
body.dash-active .detail-panel .detail-close,
body.dash-active .detail-panel .button.ghost { background:var(--mid-surface-3); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.dash-active .detail-panel .button.ghost:hover { background:var(--mid-surface-4); color:var(--mid-primary); }
body.dash-active .detail-panel .linked-contact-card,
body.dash-active .detail-panel section.panel,
body.dash-active .detail-panel .note-item { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:12px; }
body.dash-active .detail-panel code { background:var(--mid-base); color:var(--mid-primary); }
body.dash-active .detail-panel .button.primary { background:var(--mid-accent); color:var(--mid-on-accent); border:none; }
body.dash-active .detail-panel .button.danger { background:var(--mid-danger, #93000a); color:#ffdad6; border:none; }
body.dash-active .detail-panel .expand-label { color:var(--mid-muted); }

/* Leads toolbar — keep view toggle + filter + sort on one line */
#page-leads .page-actions { flex-wrap:nowrap; align-items:center; }

/* Leads filter/sort dropdowns — keep panel within the viewport, right-anchored */
#page-leads .page-actions { justify-content:flex-end; }
#page-leads .dash-filter-pop { right:0; left:auto; width:max-content; min-width:200px; max-width:min(260px, calc(100vw - 24px)); }
#page-leads .dash-filter-opt { white-space:nowrap; }

/* Leads view switch — [hidden] must win over the board's explicit display:grid/flex */
#crmKanbanBoard[hidden], #crmLeadsList[hidden] { display:none !important; }

/* Leads filter/sort → icon-only buttons (popup opens on click) */
#leadsFilterLabel, #leadsSortLabel,
#leadsFilter .dash-filter-caret, #leadsSort .dash-filter-caret { display:none; }
#leadsFilter .dash-filter-btn, #leadsSort .dash-filter-btn {
  width:36px; height:32px; padding:0; justify-content:center;
}
#leadsFilter .dash-filter-btn .material-symbols-outlined,
#leadsSort .dash-filter-btn .material-symbols-outlined { margin:0; }

/* Mobile: list view rows wrap to two lines (name + value / stage + time) */
@media (max-width: 768px) {
  .leads-table thead { display:none; }
  .leads-table, .leads-table tbody { display:block; width:100%; }
  .leads-table tr {
    display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
    padding:12px 14px; border-bottom:1px solid var(--mid-surface-3);
  }
  .leads-table td { display:block; padding:0; border:none; }
  .leads-table td.ll-name { grid-column:1; grid-row:1; }
  .leads-table td:nth-child(2) { grid-column:1; grid-row:2; }   /* stage chip */
  .leads-table td.ll-value { grid-column:2; grid-row:1; text-align:right; }
  .leads-table td.ll-time { grid-column:2; grid-row:2; text-align:right; }
  .leads-table td.ll-source, .leads-table td.ll-chev { display:none; } /* source shown in sub-line */
  .leads-table td.ll-name .ll-sub { display:block; }
}

/* Mobile: LOCK the leads page to the viewport — only the board / list scrolls,
   so the toolbar + stage pills stay fixed and the bottom nav never overlaps. */
@media (max-width: 900px) {
  body.leads-active { overflow: hidden; }
  body.leads-active .shell {
    height: calc(100dvh - 52px - 96px - env(safe-area-inset-bottom));
    overflow: hidden; padding-top: 8px; padding-bottom: 0;
  }
  #page-leads { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  /* Toolbar row sits a touch higher with more breathing room before the stage pills. */
  #page-leads .page-heading { flex: 0 0 auto; margin-bottom: 20px; }
  #page-leads .leads-stage-nav { flex: 0 0 auto; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 0; }
  :is(#page-leads, #page-projects) .kanban-col.is-mobile-active { display: flex; flex-direction: column; height: 100%; min-height: 0; max-height: none; }
  :is(#page-leads, #page-projects) .kanban-col-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  #page-leads .leads-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
}/* ═══ Lead detail drawer — mockup layout (header / scroll body / pinned footer) ═══ */
#dealDetailContent, #contactDetailContent, /* ═══ Lead detail drawer — mockup layout (header / scroll body / pinned footer) ═══ */
#contactDetailContent{ display:flex; flex-direction:column; overflow:hidden; }
.dl-head { flex:0 0 auto; padding:18px 20px 14px; border-bottom:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-head-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dl-head-top h2 { margin:0; font-size:22px; font-weight:600; line-height:1.2; outline:none; }
.dl-close { background:none; border:none; cursor:pointer; color:inherit; padding:4px; border-radius:8px; display:inline-flex; }
.dl-close:hover { background:rgba(0,0,0,0.06); }
.dl-head-row { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.dl-head-row .stage-select { border-radius:9999px; padding:6px 14px; font-size:13px; width:auto; }
.dl-amount { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted,#65645F); }
.dl-amount input { width:96px; }
.dl-body { flex:1 1 auto; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:20px; }
.dl-section { display:flex; flex-direction:column; gap:8px; }
.dl-label { margin:0; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#65645F); }
.dl-fields { display:flex; flex-direction:column; gap:10px; }
.dl-field { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dl-field > label { font-size:14px; color:var(--muted,#65645F); flex:0 0 auto; }
.dl-field > input, .dl-field > select { width:64%; }
.dl-meta { display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-meta-row { display:flex; justify-content:space-between; font-size:13px; color:var(--muted,#65645F); }
.dl-meta-row span:last-child { color:var(--ink,#1c1b1a); }
.dl-advanced { border-top:1px solid var(--line, rgba(0,0,0,0.08)); padding-top:6px; }
.dl-advanced > summary { cursor:pointer; font-size:13px; color:var(--muted,#65645F); padding:6px 0; list-style:none; }
.dl-advanced > summary::-webkit-details-marker { display:none; }
.dl-advanced > summary::before { content:"⌄ "; }
.dl-advanced[open] > summary::before { content:"⌃ "; }
.dl-advanced-body { display:flex; flex-direction:column; gap:18px; margin-top:10px; }
.dl-foot { flex:0 0 auto; display:flex; gap:10px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-foot .dl-save { flex:1; padding:12px; font-size:14px; border-radius:12px; }
.dl-del { width:48px; flex:0 0 auto; border:none; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:#fdecea; color:var(--mid-danger, #c0392b); }
.dl-del:hover { filter:brightness(0.96); }

/* Midnight overrides (drawer opened over a dark page) */
body.dash-active .dl-head, body.dash-active .dl-meta,
body.dash-active .dl-advanced, body.dash-active .dl-foot { border-color:var(--mid-line); }
body.dash-active .dl-close:hover { background:var(--mid-surface-3); }
body.dash-active .dl-foot .dl-save { background:var(--mid-primary); color:var(--mid-on-accent); border:none; }
body.dash-active .dl-del { background:var(--mid-danger, #93000a); color:#ffdad6; }

/* Kanban card footer: source + status pills inline, wrap if needed */
.kanban-card-footer { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kanban-card-footer .kanban-card-pills { display:inline-flex; gap:6px; flex-wrap:wrap; margin:0; }/* ═══ Lead drawer — match mockup: card radius + generous padding ═══ */
#dealDetailContent .dl-body, /* ═══ Lead drawer — match mockup: card radius + generous padding ═══ */
#contactDetailContent .dl-body{ padding: 18px 20px 24px; gap: 22px; }/* CONTACT card */
#dealDetailContent .linked-contact-card, /* CONTACT card */
#contactDetailContent .linked-contact-card{
  border-radius: 14px; padding: 18px 20px; margin-bottom: 0;
}#dealDetailContent .linked-contact-head, #contactDetailContent .linked-contact-head{ margin-bottom: 10px; }#dealDetailContent .linked-contact-head h3, #contactDetailContent .linked-contact-head h3{
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #65645F);
}#dealDetailContent .linked-contact-name, #contactDetailContent .linked-contact-name{ font-size: 16px; line-height: 1.25; }#dealDetailContent .linked-contact-body, #contactDetailContent .linked-contact-body{ gap: 8px; }#dealDetailContent .linked-contact-meta, #contactDetailContent .linked-contact-meta{ font-size: 13px; gap: 14px; }/* EVENTS textarea */
#dealDetailContent .edit-textarea, /* EVENTS textarea */
#contactDetailContent .edit-textarea{
  padding: 14px 16px; border-radius: 12px; min-height: 92px; line-height: 1.5;
}/* DETAILS fields */
#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, /* DETAILS fields */
#contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select{ padding: 9px 12px; border-radius: 10px; }#dealDetailContent .dl-head-row .stage-select, #contactDetailContent .dl-head-row .stage-select{ padding: 7px 14px; }#dealDetailContent .dl-amount input, #contactDetailContent .dl-amount input{ padding: 7px 10px; border-radius: 8px; }

/* ═══ Deal drawer mockup fixes ═══ */
/* Square top-left corner on desktop (was a 28px curve) */
@media (min-width: 769px) { #page-leads .detail-content { border-top-left-radius: 0; } }

/* EVENTS / DETAILS / META are plain label+control blocks, not glass sub-cards
   (only CONTACT and the inner controls are boxed, per the mockup) */
#page-leads .detail-body > section.dl-section,
#page-leads .detail-body > section.dl-meta {
  background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; margin-bottom: 0;
}/* Notes / conversation-summary boxes — give the text real padding */
#dealDetailContent .note-item, /* Notes / conversation-summary boxes — give the text real padding */
#contactDetailContent .note-item{
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; border-bottom: none;
}#dealDetailContent .note-head, #contactDetailContent .note-head{ margin-bottom: 6px; }#dealDetailContent .note-body, #contactDetailContent .note-body{ line-height: 1.5; white-space: pre-wrap; }

/* Mobile kanban: tighter, less hollow cards */
@media (max-width: 900px) {
  :is(#page-leads, #page-projects) .kanban-col-body { gap: 10px; }
  :is(#page-leads, #page-projects) .kanban-card { padding: 14px 16px; }
  :is(#page-leads, #page-projects) .kanban-card-footer { padding-top: 8px; }
}

/* ═══ Deal drawer → floating fully-rounded card (desktop) ═══ */
@media (min-width: 769px) {#dealDetailPanel, #contactDetailPanel{ padding: 18px; align-items: stretch; }#dealDetailPanel .detail-content, #contactDetailPanel .detail-content{
    height: calc(100dvh - 36px);
    width: min(560px, calc(100vw - 36px));
    border-radius: 22px;
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35);
  }
}body.dash-active #dealDetailPanel .detail-content, body.dash-active #contactDetailPanel .detail-content{ border-color: var(--mid-line); }

/* ═══ Kanban drag-to-move ═══ */
:is(#page-leads, #page-projects) .kanban-card[draggable="true"] { cursor: grab; }
:is(#page-leads, #page-projects) .kanban-card.kb-dragging { opacity: .45; cursor: grabbing; }
:is(#page-leads, #page-projects) .kanban-col.kb-drop { outline: 2px dashed var(--mid-accent); outline-offset: -4px; border-radius: 14px; }

/* ═══ List stage chip → clickable + change-stage menu ═══ */
.ll-stage[data-stage-chip] { border: none; cursor: pointer; }
.ll-stage[data-stage-chip]:hover { filter: brightness(1.08); }
.stage-menu {
  position: fixed; z-index: 200; background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.stage-menu-opt {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--mid-text);
}
.stage-menu-opt:hover { background: var(--mid-surface-3); }
.stage-menu-opt.is-current { color: var(--mid-primary); font-weight: 600; }/* ═══ Contact card phone → call + WhatsApp links ═══ */
#dealDetailContent .contact-phone-row, /* ═══ Contact card phone → call + WhatsApp links ═══ */
#contactDetailContent .contact-phone-row{ display: inline-flex; align-items: center; gap: 12px; }#dealDetailContent .contact-phone-link, #contactDetailContent .contact-phone-link{ display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }#dealDetailContent .contact-phone-link:hover, #contactDetailContent .contact-phone-link:hover{ color: var(--mid-primary); text-decoration: underline; }#dealDetailContent .contact-wa-link, #contactDetailContent .contact-wa-link{
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: rgba(37,211,102,0.16); color: #25d366; text-decoration: none;
}#dealDetailContent .contact-wa-link:hover, #contactDetailContent .contact-wa-link:hover{ background: rgba(37,211,102,0.28); }

/* Mobile: 2× the gap between the stage pills and the first lead */
@media (max-width: 900px) {
  #page-leads .leads-stage-nav { padding-bottom: 28px; }
}

/* Filter popup group labels (Source / Stage) */
.dash-filter-group-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F); padding: 8px 12px 4px;
}
body.dash-active .dash-filter-group-label { color: var(--mid-muted); }

/* List view: only the name is the clickable link to open the lead */
.leads-table tbody tr { cursor: default; }
.ll-name-link { cursor: pointer; }
.ll-name-link:hover { text-decoration: underline; }
body.leads-active .ll-name-link:hover { color: var(--mid-primary); }

/* 2× the gap between the filter toolbar and the leads list */
#crmLeadsList { margin-top: 20px; }

/* Filter popup accordion (Source / Stage) */
.filter-acc + .filter-acc { border-top: 1px solid var(--line, rgba(0,0,0,0.08)); }
.filter-acc-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; padding: 10px 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F);
}
.filter-acc-caret { font-size: 18px; transition: transform var(--dur-fast); }
.filter-acc.is-open .filter-acc-caret { transform: rotate(180deg); }
.filter-acc-body { display: none; padding-bottom: 4px; }
.filter-acc.is-open .filter-acc-body { display: block; }
/* Custom date range inside the Leads filter popover. Body-level popover → midnight
   tokens only, and the date inputs need the same !important fight as other wells. */
.leads-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 4px 4px; margin-top: 6px; border-top: 1px solid var(--mid-line); }
.leads-range label { flex: 1 1 110px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--mid-muted); }
.leads-range input[type="date"] { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; }
html[data-theme] .leads-range input[type="date"] {
  background: var(--mid-lowest) !important; color: var(--mid-text) !important; border: 1px solid var(--mid-line) !important;
}
.leads-range #leadsRangeApply { flex: 1 1 100%; }
body.dash-active .filter-acc + .filter-acc { border-color: var(--mid-line); }
body.dash-active .filter-acc-head { color: var(--mid-muted); }
body.dash-active .filter-acc-head:hover { color: var(--mid-text); }

/* (Removed 2026-08-08) The old model made the INPUT the pill and forced the
   wrapper transparent with !important — which silently defeated the newer
   shell-as-pill bar (the magnifier sat outside a white input). The shellbar
   block now owns the search's look; nothing here should fight it. */
body.dash-active .search-shell input { border-radius: 9999px; }

/* Mobile: the + create FAB lives inside .sidebar-bottom (hidden on mobile) — keep it
   floating. display:contents renders the fixed FAB without showing the wrapper box. */
@media (max-width: 768px) {
  .app-sidebar .sidebar-bottom { display: contents; }
  .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)); right: 16px; left: auto; }
  .askgia-bubble { bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* Glowing X close buttons — same pulse as the + FAB */
.dl-close, .detail-close, #askGiaClose {
  border-radius: 50%;
  animation: fabGlow 3.2s ease-in-out infinite;
}

/* Mobile: stack Gia bubble above the create FAB in one column (like desktop) */
@media (max-width: 768px) {
  .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)); right: 16px; left: auto; }
  .askgia-bubble { bottom: calc(160px + env(safe-area-inset-bottom)); right: 16px; }
}/* Deal drawer — manual task form */
#dealDetailContent .task-form, /* Deal drawer — manual task form */
#contactDetailContent .task-form{ display: flex; flex-direction: column; gap: 10px; }/* Stack Category + Due full-width with visible labels. Side-by-side jammed the
   native datetime control into a sliver at the panel's right edge, so its picker
   opened off-screen; full-width fields give the picker room and label both. */
#dealDetailContent .task-form-row, so its picker
   opened off-screen; full-width fields give the picker room and label both. */
#contactDetailContent .task-form-row{ display: flex; flex-direction: column; gap: 10px; }#dealDetailContent .task-form-field, #contactDetailContent .task-form-field{
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F);
}#dealDetailContent .task-form-field select, #dealDetailContent .task-form-field input, #contactDetailContent .task-form-field select, #contactDetailContent .task-form-field input{
  width: 100%; min-width: 0; box-sizing: border-box;
  font-weight: 400; letter-spacing: 0; text-transform: none;
}#dealDetailContent .task-form button, #contactDetailContent .task-form button{ align-self: flex-start; }/* ═══ Deal panel form controls must never overflow the sheet ═══
   Native date / datetime inputs have an intrinsic min-width on iOS Safari and
   refuse to shrink, which (in the label|input:64% rows) forced the whole bottom
   sheet to overflow sideways — clipping the left-edge labels + padding. Cap every
   control to its container and, on mobile, stack each Detail field label-over-
   control at full width with the date input's native intrinsic width neutralized. */
#dealDetailContent input, #dealDetailContent select, #dealDetailContent textarea, stack each Detail field label-over-
   control at full width with the date input's native intrinsic width neutralized. */
#contactDetailContent input, #contactDetailContent select, #contactDetailContent textarea{ box-sizing: border-box; max-width: 100%; min-width: 0; }#dealDetailContent .dl-body, #contactDetailContent .dl-body{ overflow-x: hidden; }

@media (max-width: 768px) {#dealDetailContent .dl-field, #contactDetailContent .dl-field{ flex-direction: column; align-items: stretch; gap: 6px; }#dealDetailContent .dl-field > label, #contactDetailContent .dl-field > label{ flex: none; }#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select{ width: 100%; }#dealDetailContent input[type="date"], #dealDetailContent input[type="datetime-local"], #dealDetailContent input[type="time"], #contactDetailContent input[type="date"], #contactDetailContent input[type="datetime-local"], #contactDetailContent input[type="time"]{ -webkit-appearance: none; appearance: none; }
}

/* ═══ Deal / Contact panel — quote history list (always-dark midnight surfaces) ═══ */
.deal-quotes-list { display: flex; flex-direction: column; gap: 8px; }
.quote-row {
  background: var(--mid-surface, var(--mid-surface-2)); border: 1px solid var(--mid-line, var(--mid-line));
  border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.quote-row-top { display: flex; align-items: center; gap: 10px; }
.quote-ver {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--mid-on-accent, var(--mid-on-accent)); background: var(--mid-accent, var(--mid-primary));
  border-radius: 9999px; padding: 2px 8px; flex: 0 0 auto;
}
.quote-total { font-size: 14px; font-weight: 600; color: var(--mid-text, var(--mid-text)); }
.quote-src {
  margin-left: auto; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 9999px; flex: 0 0 auto;
}
.quote-src-gia { background: rgba(142,213,255,0.16); color: var(--mid-primary); }
.quote-src-manual { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
.quote-row .quote-sub { color: var(--mid-muted, var(--mid-muted)) !important; line-height: 1.4; }
.quote-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ════════ FULL-PAGE deal / contact detail (was slide-in panel) ════════ */
.detail-fullpage .detail-overlay { display: none !important; }
.detail-fullpage:not([hidden]) {
  position: fixed !important; top: 58px !important; right: 0 !important; bottom: 0 !important; left: 264px !important; z-index: 38;
  background: var(--mid-base); pointer-events: auto;
}
@media (max-width: 768px) { .detail-fullpage:not([hidden]) { left: 0 !important; bottom: calc(88px + env(safe-area-inset-bottom)) !important; } }
.detail-fullpage .detail-content {
  position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important;
  height: 100% !important; transform: none !important; border-radius: 0 !important;
  box-shadow: none !important; border: none !important; background: var(--mid-base) !important;
  display: flex; flex-direction: column; overflow: hidden;
}
.dlp { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; color: var(--mid-text); font-family: var(--sans, "Inter", sans-serif); }

/* Top action bar */
.dlp-topbar { flex: 0 0 auto; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; background: var(--mid-surface-2); border-bottom: 1px solid var(--mid-line); }
.dlp-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlp-back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--mid-text-2); }
.dlp-back:hover { background: var(--mid-surface-3); color: var(--mid-primary); }
.dlp-title { font-size: var(--fs-title3); font-weight: 600; color: var(--mid-primary); margin: 0; outline: none; border-radius: 6px; padding: 2px 6px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlp-title:focus { background: var(--mid-lowest); box-shadow: 0 0 0 1px var(--mid-line); }
.dlp-badge { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--mid-badge); color: #a7b6cc; white-space: nowrap; flex: 0 0 auto; }
.dlp-badge.danger { background: var(--mid-danger, #93000a); color: #ffdad6; }
.dlp-topbar-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.dlp-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-text); }
.dlp-action:hover { background: var(--mid-surface-3); }
.dlp-action.primary { background: var(--mid-accent); color: var(--mid-on-accent); border-color: transparent; }
.dlp-action.primary:hover { filter: brightness(1.06); background: var(--mid-accent); }
.dlp-action.ghost { padding: 6px 12px; font-size: 13px; }
.dlp-action.icon-danger { padding: 8px; width: 40px; justify-content: center; background: var(--mid-danger, #93000a); color: #ffdad6; border-color: transparent; }

/* Scroll body — centered max-width column like the mockup */
.dlp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 36px 40px 72px; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dlp-stage-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dlp-card { background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px; padding: 16px 18px; flex: 0 0 auto; }
.dlp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dlp-card-head h3 { margin: 0; font-size: var(--fs-title3); font-weight: 600; color: var(--mid-text); }
.dlp-stage-select { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; }
.dlp-stage-select select { background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0; }

/* Pipeline stepper.
   The connector line is pixel-positioned by JS (repaintDealStepper): --dlp-track-l
   = first dot centre, --dlp-track-r = inset to last dot centre, --dlp-fill = px from
   first dot centre to the ACTIVE dot centre. The line lives inside .dlp-stepper (which
   is sized to its content), so it scrolls together with the dots and always terminates
   exactly under the current stage icon — on desktop AND on the mobile scrolling view. */
.dlp-stepper-scroll { overflow-x: auto; }
.dlp-stepper { position: relative; display: flex; justify-content: space-between; gap: 8px; min-width: 100%; }
.dlp-stepper::before { content: ""; position: absolute; top: 18px; left: var(--dlp-track-l, 0px); right: var(--dlp-track-r, 0px); height: 2px; background: var(--mid-line); }
.dlp-stepper::after { content: ""; position: absolute; top: 18px; left: var(--dlp-track-l, 0px); width: var(--dlp-fill, 0px); height: 2px; background: var(--mid-primary); transition: width .4s var(--ease); }
.dlp-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; background: none; border: none; cursor: pointer; font: inherit; padding: 2px 0; }
.dlp-step:hover .dlp-step-dot { border-color: var(--mid-primary); }
.dlp-step:hover .dlp-step-label { color: var(--mid-text); }
.dlp-step-dot { width: 32px; height: 32px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--mid-surface-3); border: 2px solid var(--mid-line); color: var(--mid-muted); }
.dlp-step-dot .material-symbols-outlined { font-size: 18px; }
.dlp-step-done .dlp-step-dot { background: var(--mid-primary); border-color: var(--mid-primary); color: var(--mid-on-accent); }
.dlp-step-current .dlp-step-dot { background: var(--mid-surface-3); border-color: var(--mid-primary); color: var(--mid-primary); box-shadow: 0 0 15px rgba(56,189,248,0.3); }
.dlp-step-label { font-size: 11.5px; color: var(--mid-muted); text-align: center; line-height: 1.3; }
.dlp-step-current .dlp-step-label { color: var(--mid-text); font-weight: 600; }
.dlp-step-done .dlp-step-label { color: var(--mid-primary); }

/* Profile summary */
.dlp-profile { display: flex; align-items: stretch; gap: 0; }
.dlp-profile-id { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 36%; }
.dlp-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; background: rgba(142,213,255,0.12); border: 1px solid rgba(142,213,255,0.25); color: var(--mid-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.dlp-profile-idtext { min-width: 0; }
.dlp-profile-name { font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); line-height: 1.25; }
.dlp-profile-role { font-size: 13px; line-height: 1.4; }
.dlp-profile-contact { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid-text-2); }
.dlp-chip .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
.dlp-profile-stats { flex: 0 0 auto; display: flex; gap: 40px; align-items: center; padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-stat { display: flex; flex-direction: column; gap: 6px; }
.deal-task-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px; }
.deal-task-row.done { opacity: 0.6; }
.deal-task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deal-task-top { display: flex; align-items: center; gap: 8px; }
.deal-task-cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-primary); background: rgba(142,213,255,0.12); padding: 2px 7px; border-radius: 9999px; flex: 0 0 auto; }
.deal-task-title { font-size: 14px; color: var(--mid-text); }
.deal-task-row.done .deal-task-title { text-decoration: line-through; }
.deal-task-done { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.deal-task-done:hover { color: var(--mid-primary); border-color: var(--mid-primary); }
.deal-task-check { color: var(--mid-ok, #30D158); flex: 0 0 auto; }
.deal-task-grp { margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.deal-tasks-list { display: flex; flex-direction: column; gap: 8px; }

/* Name → open contact (no separate button) */
.dlp-name-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); cursor: pointer; text-align: left; }
.dlp-name-link:hover { color: var(--mid-primary); text-decoration: underline; }

/* Back row + head card (deal name + contact + call/WA + amount/status + delete) */
.dlp-backrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: none; color: var(--mid-text-2); cursor: pointer; font: inherit; font-size: var(--fs-body); padding: 2px 0; }
.dlp-backrow:hover { color: var(--mid-primary); }
.dlp-headcard { display: flex; align-items: center; gap: 24px; }
.dlp-head-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.dlp-contact-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlp-contact-line .dlp-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
.dlp-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; padding-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-head-actions { display: flex; align-items: center; gap: 10px; }
.dlp-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.dlp-deal-name { font-size: var(--fs-title2); font-weight: 700; color: var(--mid-text); line-height: 1.2; outline: none; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.dlp-deal-name:focus { background: var(--mid-lowest); box-shadow: 0 0 0 1px var(--mid-line); }
.dlp-contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlp-contact-row .dlp-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
.dlp-name-plain { font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); }
.dlp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; text-decoration: none; flex: 0 0 auto; }
.dlp-call { background: rgba(142,213,255,0.14); color: var(--mid-primary); }
.dlp-call:hover { background: rgba(142,213,255,0.26); }
.dlp-wa { background: rgba(48,209,88,0.16); color: var(--mid-ok, #30D158); }
.dlp-wa:hover { background: rgba(48,209,88,0.28); }
.dlp-icon-btn .material-symbols-outlined { font-size: 18px; }
.dlp-head-sub { font-size: var(--fs-body); }
.dlp-head-stats { flex: 0 0 auto; display: flex; gap: 32px; align-items: center; padding-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-head-actions { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; }
.dlp-del-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: none; background: var(--mid-danger, #93000a); color: #ffdad6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dlp-del-icon:hover { filter: brightness(1.12); }
.dlp-del-icon .material-symbols-outlined { font-size: 18px; }

/* Hide the empty transcript box (white-on-dark); dark-theme it once loaded */
#dealTranscriptWrap:empty { display: none; }
#dealTranscriptWrap { background: var(--mid-surface) !important; border-color: var(--mid-line) !important; }/* Kill the outer enclosure border/shadow/radius on the whole detail page */
#dealDetailPanel, #dealDetailPanel .detail-content, #dealDetailContent .dlp, #dealDetailContent .dlp-scroll, /* Kill the outer enclosure border/shadow/radius on the whole detail page */
#contactDetailPanel, #contactDetailPanel .detail-content, #contactDetailContent .dlp, #contactDetailContent .dlp-scroll{
  border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important;
}#dealDetailPanel .detail-content, #contactDetailPanel .detail-content{ background: var(--mid-base) !important; }/* Uniform form-control + button heights on the detail page */
#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #dealDetailContent .task-form input, #dealDetailContent .task-form select, /* Uniform form-control + button heights on the detail page */
#contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select, #contactDetailContent .task-form input, #contactDetailContent .task-form select{ height: 40px; box-sizing: border-box; }#dealDetailContent .task-form, #contactDetailContent .task-form{ gap: 12px; }#dealDetailContent .dlp-addtask-btn, #contactDetailContent .dlp-addtask-btn{ height: 40px; box-sizing: border-box; margin-top: 6px; align-self: flex-start; padding: 0 18px; }

/* Read-only timeline (Activity + Pipeline History) */
.dlp-timeline { display: flex; flex-direction: column; position: relative; }
.dlp-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 10px; width: 2px; background: var(--mid-line); }
.dlp-tl-item { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.dlp-tl-item:last-child { padding-bottom: 0; }
.dlp-tl-dot { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 9999px; background: var(--mid-surface-3); border: 2px solid var(--mid-line); color: var(--mid-muted); display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.dlp-tl-dot .material-symbols-outlined { font-size: 15px; }
.dlp-tl-dot-start { background: rgba(142,213,255,0.14); border-color: var(--mid-primary); }
.dlp-tl-body { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.dlp-tl-title { font-size: var(--fs-body); font-weight: 600; color: var(--mid-text); }
.dlp-tl-text { font-size: var(--fs-body); color: var(--mid-text-2); margin-top: 2px; line-height: 1.5; white-space: pre-wrap; }
.dlp-tl-meta { font-size: var(--fs-caption); color: var(--mid-muted); margin-top: 3px; }
.dlp-activity-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Quotes table */
.dlp-quotes-tablewrap { overflow-x: auto; border: 1px solid var(--mid-line); border-radius: 10px; }
.dlp-quotes-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dlp-quotes-table thead { background: var(--mid-surface-3); }
.dlp-quotes-table th { text-align: left; padding: 8px 12px; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-muted); white-space: nowrap; }
.dlp-quotes-table td { padding: 10px 12px; border-top: 1px solid rgba(62,72,79,0.5); color: var(--mid-text); white-space: nowrap; }
.dlp-q-id { color: var(--mid-primary); font-weight: 600; }
.dlp-q-date { color: var(--mid-text-2); }
.dlp-q-deal { color: var(--mid-text-2); }
.dlp-q-total { font-weight: 600; }
.dlp-q-ta-right { text-align: right; }
.dlp-q-status { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dlp-q-status-gia, .dlp-q-status-sent { background: rgba(142,213,255,0.16); color: var(--mid-primary); }
.dlp-q-status-manual { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
.dlp-q-status-accepted { background: rgba(48,209,88,0.16); color: var(--mid-ok, #30D158); }
.dlp-q-status-rejected { background: rgba(255,180,171,0.16); color: #ffb4ab; }
.dlp-q-status-superseded { background: var(--mid-surface-3); color: var(--mid-muted); }
/* Consistent icon + text sizing inside the detail page */
.dlp .material-symbols-outlined { font-size: 20px; }
.dlp .inline-icon { font-size: 18px; }
.dlp-q-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlp-q-link { background: none; border: 1px solid transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--mid-primary); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.dlp-q-link:hover { text-decoration: none; background: rgba(142,213,255,0.12); border-color: rgba(142,213,255,0.28); }
.dlp-q-link-muted { color: var(--mid-muted); }
.dlp-q-link-muted:hover { background: rgba(135,146,154,0.14); border-color: rgba(135,146,154,0.3); }
.dlp-q-link-accept { color: #34d399; }
.dlp-q-link-accept:hover { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.dlp-q-link-delete { color: var(--mid-danger); }
.dlp-q-link-delete:hover { background: rgba(159,47,45,0.12); border-color: rgba(159,47,45,0.32); }
.dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dlp-pane-hrow .dlp-pane-h { margin: 0; }
.dlp-new-quote { display: inline-flex; align-items: center; gap: 4px; border-color: rgba(142,213,255,0.28); }
.dlp-new-quote .inline-icon { font-size: 18px; }
/* Hide the floating + / Gia buttons while a deal detail page is open */
body.detailpage-open .askgia-bubble { display: none !important; }
/* The "+" only hides where the panel COVERS the bar (mobile full-page). On
   desktop the bar is still there, so hiding it just left a hole. */
@media (max-width: 768px) { body.detailpage-open .create-menu { display: none !important; } }
.dlp-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mid-muted); }
.dlp-amount { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--mid-primary); }
.dlp-amount input { width: 130px; background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 8px; padding: 5px 8px; color: var(--mid-text); font: inherit; }
/* Read-only stat value (e.g. contact "Total Value") — matches the deal-amount accent. */
.dlp-amount-static { font-size: 16px; font-weight: 700; color: var(--mid-primary); white-space: nowrap; }
.dlp-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 600; color: var(--mid-tertiary); }
.dlp-status-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--mid-tertiary); }
.dlp-status.danger { color: #ffb4ab; } .dlp-status.danger .dlp-status-dot { background: #ffb4ab; }

/* Tabs */
.dlp-tabwrap { padding: 0; overflow: hidden; }
.dlp-tabs { display: flex; border-bottom: 1px solid var(--mid-line); overflow-x: auto; flex: 0 0 auto; }
.dlp-tab { padding: 12px 18px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--mid-text-2); white-space: nowrap; }
.dlp-tab:hover { color: var(--mid-text); }
.dlp-tab.active { color: var(--mid-primary); border-bottom-color: var(--mid-primary); background: rgba(142,213,255,0.05); }
.dlp-pane { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.dlp-pane[hidden] { display: none !important; }
.dlp-contact-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--mid-text); }
.dlp-contact-line .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
.dlp-contact-muted { color: var(--mid-text-2); }
.dlp-contact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--mid-text); text-decoration: none; }
.dlp-contact-link:hover { color: var(--mid-primary); }
.dlp-wa-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(48,209,88,0.16); color: var(--mid-ok, #30D158); text-decoration: none; }
.dlp-wa-link:hover { background: rgba(48,209,88,0.28); }
.dlp-wa-link .material-symbols-outlined { font-size: 17px; color: inherit; }
.dlp-open-contact { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-primary); cursor: pointer; font-size: var(--fs-caption); font-weight: 600; }
.dlp-open-contact:hover { background: var(--mid-surface-3); }
.dlp-open-contact .material-symbols-outlined { font-size: 16px; }
.dlp-pane-h { margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-muted); }
.dlp-quotes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Contact page: Overview as a left 1/3 card, the rest of the tabs as a right 2/3 card. */
.dlp-2col { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: start; }
.dlp-overview-card .dl-fields { display: flex; flex-direction: column; gap: 12px; }
/* In the narrow Overview card, stack each field (label over control) for readability. */
.dlp-overview-card .dl-field { flex-direction: column; align-items: stretch; gap: 6px; }
.dlp-overview-card .dl-field > label { flex: none; }
.dlp-overview-card .dl-field > input, .dlp-overview-card .dl-field > select { width: 100%; }
.dlp-overview-card .dl-meta { margin-top: 14px; }
/* Contact notes: compact 3-row input that sits BELOW the list (list is first in DOM). */
#contactDetailContent .note-form { margin: 0; }
#contactDetailContent .note-form textarea { min-height: 76px; max-height: 160px; box-sizing: border-box; }
#contactDetailContent .note-form button { align-self: flex-start; }
@media (max-width: 900px) { .dlp-2col { grid-template-columns: 1fr; } }

/* Overview: read as plain text until "Edit" is clicked (then fields become inputs). */
.dlp-overview-card:not(.editing) .dl-field > input,
.dlp-overview-card:not(.editing) .dl-field > select {
  border-color: transparent !important; background: transparent !important;
  padding-left: 0; padding-right: 0; color: var(--mid-text); pointer-events: none;
  -webkit-appearance: none; appearance: none; background-image: none !important;
}
.dlp-overview-card .dlp-card-head { margin-bottom: 14px; }
.dlp-overview-card.editing #contactEditBtn { color: var(--mid-primary); border-color: var(--mid-primary); }

/* Embedded live chat inside the Messages tab — full-bleed within the card. */
.dlp-pane-flush { padding: 0; }
.contact-chat { display: flex; flex-direction: column; height: min(70vh, 640px); }
.contact-chat .inbox-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; background: transparent; scrollbar-width: thin; }
.contact-chat .inbox-messages::-webkit-scrollbar { width: 0; }   /* overlay — no reserved right gutter */
/* Bubbles reach the card edge; tighter text-to-edge padding inside each bubble. */
.contact-chat .msg-bubble { padding: 8px 12px; }
.contact-chat .msg.out { align-self: flex-end; }
.contact-chat .msg.in { align-self: flex-start; }
.contact-chat .msg { max-width: 96%; }
.contact-chat .inbox-compose { flex: 0 0 auto; border-top: 1px solid var(--mid-line); padding: 10px 6px; background: var(--mid-surface); }
.contact-chat .inbox-compose-row { gap: 8px; align-items: flex-end; }
/* Bubbles run right up to the card edges. */
.contact-chat .msg { max-width: 94%; }
/* Send as a round blue icon button (same accent), with a clear disabled state. */
.cc-send-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer; background: var(--mid-accent); color: var(--mid-on-accent); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease); }
.cc-send-btn:hover { background: #5fc9fa; }
.cc-send-btn .material-symbols-outlined { font-size: 20px; }
.cc-send-btn:disabled { background: var(--mid-surface-3); color: var(--mid-text-3); cursor: not-allowed; }
.contact-chat .inbox-compose-row textarea { flex: 1 1 auto; min-width: 0; }
/* Window closed → composer visibly locked. */
.contact-chat .inbox-compose-row textarea:disabled,
.contact-chat .compose-attach:disabled { opacity: 0.45; cursor: not-allowed; }
/* Undelivered message (never reached WhatsApp) — red outline + "!" badge. */
.msg-failed .msg-bubble { background: rgba(255,69,58,0.12) !important; border: 1px solid rgba(255,69,58,0.5); color: #ffb4ab !important; }
.msg-failed .msg-meta { color: #ff8a80; }
.msg-fail { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--mid-danger, #FF453A); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; }
/* Clean status row: window text on the left, actions on the right (no dot, no pill). */
.contact-chat-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--mid-line); }
.cc-window-text { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--mid-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-window-text strong { color: var(--mid-text); }
.contact-chat-bar.is-open .cc-window-text { color: var(--mid-primary); }
.contact-chat-bar.is-closed .cc-window-text { color: var(--mid-tertiary); }
.cc-bar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cc-tpl-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 700; background: var(--mid-tertiary); color: #3a2600; white-space: nowrap; }
.cc-tpl-btn:hover { filter: brightness(1.06); }
.cc-tpl-btn .material-symbols-outlined { font-size: 16px; }
/* Banner: flush strip directly above the composer (not a floating rounded box). */
/* (generalised to `.contact-chat .inbox-banner` at the end of this file) */
#contactDetailContent .inbox-banner { color: var(--mid-tertiary); }
/* Narrow screens: stack the status row so the window text shows in full (no "Wind…"). */
@media (max-width: 600px) {
  .contact-chat-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .cc-window-text { white-space: normal; }
  .cc-bar-actions { justify-content: flex-end; }
  .contact-chat .inbox-messages { padding: 12px 2px; }
}
.dlp-quotes-head h3 { margin: 0; }
.dlp-quote-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .dlp-topbar { padding: 10px 16px; gap: 8px; }
  .dlp-title { max-width: 38vw; font-size: 16px; }
  .dlp-action.primary { padding: 8px 12px; }
  .dlp-action.primary span:not(.material-symbols-outlined) { display: none; }
  .dlp-topbar-actions .detail-save-hint { display: none; }
  .dlp-scroll { padding: 16px; gap: 16px; }
  .dlp-card { padding: 16px; }
  .dlp-card-head { margin-bottom: 16px; flex-wrap: wrap; }
  .dlp-stepper-scroll { padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .dlp-stepper { gap: 16px; }
  .dlp-step { min-width: 72px; }
  .dlp-profile { flex-direction: column; gap: 16px; }
  .dlp-profile-contact, .dlp-profile-stats { border-left: none; margin-left: 0; padding-left: 0; border-top: 1px solid var(--mid-line); padding-top: 16px; }
  .dlp-profile-stats { gap: 32px; }
  .dlp-tab { padding: 14px 16px; font-size: 14px; }
  .dlp-pane { padding: 16px; gap: 16px; }
  .dlp-pane-flush { padding: 0; }   /* keep the Messages chat edge-to-edge on mobile (beats the line above) */
  /* Mobile: compact padding (the overlay itself ends above the nav) + stack head card */
  .dlp-scroll { padding: 14px 6px 24px; }
  .dlp-headcard { flex-direction: column; align-items: stretch; gap: 14px; }
  .dlp-head-right { border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px solid var(--mid-line); }
  .dlp-head-actions { margin-left: auto; }
  /* Quotes → stacked cards on mobile (no horizontal scroll) */
  .dlp-quotes-tablewrap { overflow-x: visible; border: none; }
  .dlp-quotes-table, .dlp-quotes-table tbody { display: block; }
  .dlp-quotes-table thead { display: none; }
  .dlp-quotes-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; border: 1px solid var(--mid-line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--mid-surface-2); }
  .dlp-quotes-table td { display: block; border: none !important; padding: 0; white-space: normal; }
  .dlp-q-id { grid-column: 1; grid-row: 1; font-size: var(--fs-body-lg); }
  .dlp-q-status-cell { grid-column: 2; grid-row: 1; text-align: right; }
  .dlp-q-date { grid-column: 1 / -1; grid-row: 2; color: var(--mid-muted) !important; }
  .dlp-q-total { grid-column: 1 / -1; grid-row: 3; font-size: var(--fs-title3); }
  .dlp-q-actions { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start; gap: 8px; margin: 8px -4px 0; padding-top: 10px; border-top: 1px solid var(--mid-line); }
  .dlp-q-actions .dlp-q-link { padding: 8px 12px; }
  /* Contact quotes table has a Deal column (no Status) — reflow its mobile card so
     the deal name sits under the version, then date / amount / actions stack. */
  #contactDetailContent .dlp-q-deal { grid-column: 1 / -1; grid-row: 2; color: var(--mid-muted) !important; }
  #contactDetailContent .dlp-q-date { grid-row: 3; }
  #contactDetailContent .dlp-q-total { grid-row: 4; }
  #contactDetailContent .dlp-q-actions { grid-row: 5; }
}/* In-deal stage suggestion card */
#dealDetailContent .deal-suggestion, /* In-deal stage suggestion card */
#contactDetailContent .deal-suggestion{
  background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.35);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}#dealDetailContent .deal-suggestion-head, #contactDetailContent .deal-suggestion-head{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mid-primary); }#dealDetailContent .deal-suggestion-head .material-symbols-outlined, #contactDetailContent .deal-suggestion-head .material-symbols-outlined{ font-size:18px; }#dealDetailContent .deal-suggestion-move, #contactDetailContent .deal-suggestion-move{ display:flex; align-items:center; gap:8px; font-size:14px; }#dealDetailContent .deal-suggestion-move .material-symbols-outlined, #contactDetailContent .deal-suggestion-move .material-symbols-outlined{ font-size:18px; color:var(--mid-muted); }#dealDetailContent .deal-suggestion-move strong, #contactDetailContent .deal-suggestion-move strong{ color:var(--mid-primary); }#dealDetailContent .deal-suggestion-reason, #contactDetailContent .deal-suggestion-reason{ font-size:13px; color:var(--mid-text-2); line-height:1.45; }#dealDetailContent .deal-suggestion-actions, #contactDetailContent .deal-suggestion-actions{ display:flex; gap:8px; margin-top:2px; }

/* Lead score badge on cards/rows */
.kanban-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kanban-card-titlerow .kanban-card-title { flex: 1 1 auto; min-width: 0; }
.kanban-card-titlerow .nx-score { flex: 0 0 auto; }
.ll-name-row { display: inline-flex; align-items: center; gap: 8px; }

/* New Task modal — lead search */
.task-lead-search { position: relative; }
.task-lead-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--mid-surface-2, #fff); border: 1px solid var(--line, rgba(0,0,0,0.1)); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.25); max-height: 260px; overflow-y: auto; padding: 6px;
}
.task-lead-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 9px 12px; border-radius: 8px;
}
.task-lead-opt:hover { background: var(--panel-soft, #f4f4f5); }
.task-lead-opt-sub { font-size: 11.5px; color: var(--muted, #777); }
.task-lead-empty { padding: 10px 12px; }
.task-lead-chosen {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  background: var(--panel-soft, #f4f4f5); border-radius: 10px; padding: 8px 12px; font-size: 14px;
}
.task-lead-chosen button { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Midnight theming for ALL app modals (New deal / task / contact, …).
   These dialogs always overlay the dark app, so theme them with the always-dark
   --mid-* tokens UNCONDITIONALLY (not gated on body.dash-active) so they never
   fall back to the light base tokens — that was the "cream box in a dark modal"
   bug. One token per role → consistent colour, height, padding, spacing.
   ───────────────────────────────────────────────────────────────────────── */
.modal-content { background:var(--mid-surface-2, var(--mid-surface-2)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text, var(--mid-text)); }
.modal-head { border-bottom-color:var(--mid-line, var(--mid-line)); }
.modal-head h2 { color:var(--mid-text, var(--mid-text)); }
.modal-body label > span { color:var(--mid-text-2, var(--mid-text-2)); }
.modal-body input,
.modal-body select,
.modal-body textarea,
.modal .task-lead-search input {
  background-color:var(--mid-lowest, var(--mid-lowest)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text, var(--mid-text));
}
.modal-body input::placeholder,
.modal-body textarea::placeholder,
.modal .task-lead-search input::placeholder { color:var(--mid-muted, var(--mid-muted)); }
.modal-body select:focus,
.modal-body input:focus,
.modal-body textarea:focus,
.modal .task-lead-search input:focus { outline:none; border-color:var(--mid-accent, var(--mid-accent)); }
.modal .button.ghost { background:var(--mid-surface-3, var(--mid-surface-3)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text-2, var(--mid-text-2)); }
.modal .button.ghost:hover { background:var(--mid-surface-4); color:var(--mid-primary, var(--mid-primary)); }
.modal .button.primary { background:var(--mid-accent, var(--mid-accent)); color:var(--mid-on-accent, var(--mid-on-accent)); border:none; }
.modal .button.primary:hover { background:#5fc9fa; }
.modal .button.primary:disabled { background:var(--mid-surface-3, var(--mid-surface-3)); color:var(--mid-muted, var(--mid-muted)); opacity:1; cursor:not-allowed; }
.modal-section-header { border-top-color:var(--mid-line, var(--mid-line)); }
.modal-section-header strong { color:var(--mid-text, var(--mid-text)); }

/* ── Modal typography + spacing — SINGLE SOURCE OF TRUTH ─────────────────────
   Consolidates three earlier, conflicting label/size rules into one so every
   modal (deal / task / contact) shares the same font, label style, and vertical
   rhythm. Labels are now the only field guide (placeholders removed), so they
   read clearly. */
.modal-content, .modal-content h2, .modal-content label,
.modal-content input, .modal-content select, .modal-content textarea,
.modal-content button, .modal-content small, .modal-content strong { font-family: var(--sans); }
/* Never let the above touch the icon font — Material Symbols spans must keep their
   own family or the ligature renders as literal text ("close", "person_check", …). */
.modal-content .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
.modal-body { gap: 16px; }
.modal-body label { gap: 7px; font-size: var(--fs-caption, 12px); }
.modal-body label > span {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mid-text-2, var(--mid-text-2));
}
.modal-grid { gap: 14px; }
/* Section header (e.g. "Contact …"): stack title over helper so they never collide
   on narrow widths ("ContactIf a contact…"), with even spacing on every screen. */
.modal-section-header { flex-direction: column; align-items: flex-start; gap: 4px; }
.modal-section-header strong { font-size: 14px; }
.modal-section-header small { font-size: 11.5px; line-height: 1.45; color: var(--mid-muted, var(--mid-muted)); }
/* Number fields: remove the spinner so they match plain text inputs. */
.modal-body input[type="number"] { -moz-appearance: textfield; }
.modal-body input[type="number"]::-webkit-outer-spin-button,
.modal-body input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Info pills (prefilled-contact banner + chosen-lead chip): one shared dark style */
.modal-prefilled-contact, .task-lead-chosen {
  background:var(--mid-surface-3, var(--mid-surface-3)); border:1px solid var(--mid-line, var(--mid-line));
  color:var(--mid-text, var(--mid-text)); border-radius:10px; padding:10px 12px; font-size:13px;
}
/* `display:flex` on these banners was overriding the `hidden` attribute, so an
   EMPTY "Adding deal for" / "Task for" strip showed even when no contact was
   pre-linked (e.g. opening New Deal from the + button). Respect [hidden]. */
.modal-prefilled-contact[hidden], .task-lead-chosen[hidden] { display: none !important; }
.modal-prefilled-contact .inline-icon, .task-lead-chosen .inline-icon { color:var(--mid-primary, var(--mid-primary)); }
/* Task lead search results dropdown */
.task-lead-results { background:var(--mid-surface-2, var(--mid-surface-2)); border-color:var(--mid-line, var(--mid-line)); }
.task-lead-opt { color:var(--mid-text, var(--mid-text)); }
.task-lead-opt:hover { background:var(--mid-surface-3, var(--mid-surface-3)); }
.task-lead-opt-sub { color:var(--mid-muted, var(--mid-muted)); }

/* Glow on modal close (X) — same as the + FAB */
.modal-head button[data-close] { border-radius: 50%; animation: fabGlow 3.2s ease-in-out infinite; }

/* Consistent X close buttons everywhere: square with curved edges (not circle/oval) */
.dl-close, .detail-close, #askGiaClose, .modal-head button[data-close] {
  border-radius: 12px !important;
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Popups: consistent font + spacing/sizing across all modals */
.modal-content,
.modal-content h2,
.modal-content label,
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content button { font-family: var(--sans); }
.modal-content h2 { font-size: 16px; font-weight: 600; }
.modal-content label { font-size: 13px; }
.modal-content input,
.modal-content select,
.modal-content textarea { font-size: 14px; }
/* New Task form fields should stack with the same gap as other modal bodies */
#newTaskForm { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* ═══════════════ CONTACTS — Midnight theme ═══════════════ */
body.contacts-active #page-contacts .page-heading h1 { color:var(--mid-text); }
body.contacts-active #page-contacts .page-heading .eyebrow { color:var(--mid-primary); }
body.contacts-active #page-contacts .page-heading p.muted { color:var(--mid-muted); }
/* Search + filter */
body.contacts-active #page-contacts .search-shell { background:transparent; }
body.contacts-active #page-contacts .search-shell input { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:9999px; }
body.contacts-active #page-contacts .search-shell input::placeholder { color:var(--mid-muted); }
body.contacts-active #page-contacts .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.contacts-active #page-contacts .filter-select { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:10px; }
/* Cards */
body.contacts-active #page-contacts .contact-card {
  background:rgba(30,41,59,0.4); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--mid-line); color:var(--mid-text);
}
body.contacts-active #page-contacts .contact-card:hover { background:var(--mid-surface-3); border-color:var(--mid-primary); box-shadow:0 14px 26px -14px rgba(0,0,0,0.5); }
body.contacts-active #page-contacts .contact-name { color:var(--mid-text); }
body.contacts-active #page-contacts .contact-sub, body.contacts-active #page-contacts .contact-chev { color:var(--mid-muted); }
body.contacts-active #page-contacts .contact-lines > div { color:var(--mid-text-2); }
body.contacts-active #page-contacts .contact-lines code { background:var(--mid-base); color:var(--mid-primary); }
body.contacts-active #page-contacts .contact-avatar { background:var(--mid-badge); color:var(--mid-primary); }
body.contacts-active #page-contacts .contact-foot { border-top:1px solid var(--mid-line); }
body.contacts-active #page-contacts .source-pill { background:var(--mid-surface-3); color:var(--mid-text-2); border:1px solid var(--mid-line); }
body.contacts-active #page-contacts .pill.open-deals { background:rgba(56,189,248,0.18); color:var(--mid-primary); }
body.contacts-active #page-contacts .contacts-empty { color:var(--mid-muted); }

/* ═══ Contact drawer (reuses deal-drawer dl-* structure) ═══ */
#contactDetailContent .dl-body { padding:18px 20px 24px; gap:20px; }
#contactDetailContent .dl-field > input,
#contactDetailContent .dl-field > select { width:64%; padding:9px 12px; border-radius:10px; }
.dl-section-head { display:flex; align-items:center; justify-content:space-between; }
.dl-field-static { color:var(--muted,#65645F); font-size:14px; }
.dl-viewmsg { align-self:flex-start; }
#contactDetailContent .contact-deals { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
#contactDetailContent .contact-deals .deal-link { cursor:pointer; padding:10px 12px; border:1px solid var(--line,rgba(0,0,0,0.1)); border-radius:10px; display:flex; flex-direction:column; gap:4px; }
/* Contact phone call + WhatsApp links */
#contactDetailContent .contact-phone-row { display:inline-flex; align-items:center; gap:12px; }
#contactDetailContent .contact-phone-link { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
#contactDetailContent .contact-phone-link:hover { color:var(--mid-primary); text-decoration:underline; }
#contactDetailContent .contact-wa-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(37,211,102,0.16); color:#25d366; text-decoration:none; }
#contactDetailContent .contact-wa-link:hover { background:rgba(37,211,102,0.28); }
/* Midnight bits for the contact deals list */
body.dash-active #contactDetailContent .contact-deals .deal-link { background:var(--mid-surface); border-color:var(--mid-line); }
body.dash-active #contactDetailContent .contact-deals .deal-link:hover { background:var(--mid-surface-3); }
body.dash-active #contactDetailContent .dl-field-static { color:var(--mid-muted); }

/* Contacts cards — consistent type scale with leads/dashboard + phone/WhatsApp links */
#page-contacts .contact-name { font-size: 14px; font-weight: 600; }
#page-contacts .contact-sub { font-size: 11.5px; }
#page-contacts .contact-lines > div { font-size: 13px; }
#page-contacts .contact-foot .muted.small { font-size: 11.5px; }
#page-contacts .contact-lines { align-items: stretch; }
#page-contacts .contact-lines > div { display: flex; align-items: center; gap: 8px; }
.contact-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.contact-tel:hover code { text-decoration: underline; }
.contact-wa { width: 26px; height: 26px; border-radius: 7px; justify-content: center; background: rgba(37,211,102,0.16); color: #25d366; margin-left: auto; }
.contact-wa .material-symbols-outlined { font-size: 16px; }
.contact-wa:hover { background: rgba(37,211,102,0.28); }
body.contacts-active #page-contacts .contact-tel code { color: var(--mid-primary); background: transparent; }

/* Desktop: LOCK the leads page so the list/board is the ONLY scroller (single scroll
   context) — the toolbar stays fixed and the list header pins with cards vanishing under it. */
@media (min-width: 901px) {
  body.leads-active .shell { height: calc(100dvh - 58px); overflow: hidden; }
  #page-leads { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  #page-leads .page-heading { flex: 0 0 auto; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
  #page-leads .leads-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  #page-leads .leads-list { padding-top: 0; }   /* header flush at the very top */
  #page-leads .lead-rowhead { top: 0; }
}
/* Mobile: breathing room inside the scroll area so cards don't touch the edges/boundary */
@media (max-width: 900px) {
  :is(#page-leads, #page-projects) .kanban-col-body { padding: 6px 2px calc(96px + env(safe-area-inset-bottom)); }
}

/* List view: sticky column header (Name/Stage/… stays while rows scroll) + card depth */
.leads-table thead th { position: sticky; top: 0; z-index: 2; }
body.leads-active .leads-table thead th { background: var(--mid-surface-3); }
body.leads-active .leads-list { box-shadow: 0 10px 30px -14px rgba(0,0,0,0.55); }
/* keep the rounded card corners while the body scrolls */
#page-leads .leads-list { border-radius: 14px; }

/* ═══ Leads LIST view → borderless enclosure (boundary hidden, box kept) that the
   row-cards scroll within; header box + spaced row-cards (kanban-matched type) ═══ */
.leads-list, body.leads-active .leads-list {
  background: var(--mid-deep);                 /* subtle enclosure — distinct from page, no border */
  border: none !important; box-shadow: none !important;
  border-radius: 14px; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
}
.lead-rowhead, .lead-row {
  display: grid; grid-template-columns: 2.2fr 1.5fr 1fr 0.9fr 1fr; align-items: center; gap: 12px;
}
/* Active-filter chips row in the Leads header (date / stage), above both views.
   .sg-chips is hidden on Leads by a 1-ID !important rule (styles.css:9778); the
   2-ID `#page-leads #leadsChips.has-filters` override wins to show it when active. */
#leadsChips { flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
#page-leads #leadsChips.has-filters { display: flex !important; }
/* Active stage/date-filter chip (shown after a dashboard pill filters) — tap to clear. */
.leads-filter-clear {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 7px 10px 7px 14px;
  border-radius: 9999px; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600;
  background: var(--mid-surface-3); color: var(--mid-text);
  transition: background var(--dur-1, var(--dur-fast)) var(--var(--ease), var(--ease));
}
.leads-filter-clear .material-symbols-outlined { font-size: 16px; color: var(--mid-muted); }
.leads-filter-clear:hover { background: var(--mid-surface-4); }
.leads-filter-clear:hover .material-symbols-outlined { color: var(--mid-text); }
html[data-theme] .leads-filter-clear { background: var(--lime-tint, #eef3cf); color: var(--mid-primary); }
html[data-theme] .leads-filter-clear .material-symbols-outlined { color: var(--mid-primary); }
html[data-theme] .leads-filter-clear:hover { background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); }
html[data-theme] .leads-filter-clear:hover .material-symbols-outlined { color: var(--on-lime, #1a2000); }
/* "Needs first contact" — a TOGGLE, not a clear-chip, so it reads pressed when on. */
.lead-newchip { padding-right: 6px; }
.lead-newchip-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--mid-accent); color: var(--mid-on-accent, #00354a);
}
.lead-newchip.is-on, html[data-theme] .lead-newchip.is-on { background: var(--mid-accent); color: var(--mid-on-accent, #00354a); }
.lead-newchip.is-on .material-symbols-outlined, html[data-theme] .lead-newchip.is-on .material-symbols-outlined { color: var(--mid-on-accent, #00354a); }
.lead-newchip.is-on .lead-newchip-n { background: rgba(0,0,0,.18); color: inherit; }
/* Row / card badge: this lead is quoted but untouched by a human. */
.lr-new {
  height: 20px; padding: 0 8px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; letter-spacing: .02em;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  background: var(--mid-accent); color: var(--mid-on-accent, #00354a);
}
.lead-rowhead {
  position: sticky; top: 0; z-index: 5;
  background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px; padding: 11px 16px;
  margin-bottom: 0;
  /* solid enclosure-coloured strip below the header keeps the gap constant while scrolling,
     then a soft shadow under that */
  box-shadow: 0 10px 0 0 var(--mid-deep), 0 14px 10px -6px rgba(0,0,0,0.45);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted);
}
.lead-row {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 14px 16px;
  cursor: default; transition: border-color var(--dur-fast);
}
.lead-row:hover { border-color: var(--mid-primary); }
.lr-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-name .ll-name-link { font-size: 14px; font-weight: 700; color: var(--mid-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-name .ll-name-link:hover { color: var(--mid-primary); text-decoration: underline; }
.lr-src, .lr-time { color: var(--mid-muted); font-size: 13px; }
.lr-val { color: var(--mid-primary); font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
  .lead-rowhead { display: none; }
  .lead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .lr-name { flex: 1 1 100%; }
  .lr-time { margin-left: auto; }
}

/* Contacts filter — align right and keep popup within viewport (consistent with Leads) */
#page-contacts .page-actions { justify-content: flex-end; }
#page-contacts .dash-filter-pop { right: 0; left: auto; width: max-content; min-width: 200px; max-width: min(260px, calc(100vw - 24px)); }
#page-contacts .dash-filter-opt { white-space: nowrap; }

/* ═══ Fix: stage chip pill (was scoped to removed .leads-table) ═══ */
.ll-stage {
  display: inline-block; padding: 4px 12px; border-radius: 9999px;
  font-size: 11.5px; font-weight: 600; border: none; cursor: pointer; line-height: 1.4;
}
.ll-stage.good  { background: rgba(48,209,88,0.16);  color: #7ee29a; }
.ll-stage.bad   { background: rgba(255,69,58,0.16);  color: #ff9f96; }
.ll-stage.hot   { background: rgba(255,159,10,0.18); color: var(--mid-tertiary); }
.ll-stage.info  { background: rgba(56,189,248,0.16); color: var(--mid-primary); }
.ll-stage.muted { background: var(--mid-surface-4);               color: var(--mid-text-2); }
.ll-stage[data-stage-chip]:hover { filter: brightness(1.12); }

/* ═══ Kanban: hide the column enclosing box; keep a box only on the stage-name header ═══ */
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (min-width: 901px) {
  body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-header {
    background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 12px;
  }
  body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-title { color: var(--mid-text); }
  body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-meta { color: var(--mid-muted); }
}

/* ═══ Hide scrollbars everywhere (scroll still works) — all screens + popups ═══ */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ═══ Uniform bottom-nav clearance on ALL mobile screens ═══ */
@media (max-width: 768px) {
  :root { --nav-reserve: calc(96px + env(safe-area-inset-bottom)); }
  /* Window-scroll pages (dashboard, contacts, quotes, setup, …) end above the nav */
  .shell { padding-bottom: var(--nav-reserve) !important; }
  /* Conversations inbox is a fixed-height pane — subtract the nav so it ends above it */
  .inbox-shell { height: calc(100dvh - 120px - var(--nav-reserve)) !important; }
}

/* ═══ Mobile: bound shell scroll so content ends above the nav (all pages) ═══ */
@media (max-width: 768px) {
  .shell {
    height: calc(100dvh - 52px - var(--nav-reserve));
    overflow-y: auto; overflow-x: clip;
    padding-bottom: 8px !important;
  }
  /* Bottom-nav active indicator → pill matching the menu shape, inset from its borders */
  .app-sidebar .nav-item { height: 48px; margin: 8px 5px; border-radius: 9999px; padding: 4px 2px; }
  .app-sidebar .nav-item.active { border-radius: 9999px; }
}

/* Mobile bottom-nav pill — dark glass (was light border + white inset glow) */
@media (max-width: 768px) {
  .app-sidebar {
    background: rgba(27, 32, 36, 0.92) !important;
    border: 1px solid var(--mid-line) !important;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  }
}

/* Kanban stage-swipe slide animation */
@keyframes kbSlideNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes kbSlidePrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
:is(#page-leads, #page-projects) .kanban-col-body.kb-slide-next { animation: kbSlideNext .24s cubic-bezier(0.16,1,0.3,1); }
:is(#page-leads, #page-projects) .kanban-col-body.kb-slide-prev { animation: kbSlidePrev .24s cubic-bezier(0.16,1,0.3,1); }

/* Kanban finger-drag carousel: overlay the active + neighbouring column while dragging */
@media (max-width: 900px) {
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban).kb-dragging { position: relative; overflow: hidden; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban).kb-dragging .kanban-col.is-mobile-active,
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban).kb-dragging .kanban-col.kb-peek {
    display: flex !important; flex-direction: column;
    position: absolute; inset: 0; min-height: 0; will-change: transform;
  }
}

/* ═══ Uniform placement: Gia bubble stacked above the + FAB, same edge, all screens ═══ */
.app-sidebar .create-fab { width: 56px; height: 56px; border-radius: 50%; }
.askgia-bubble { width: 56px; height: 56px; }
/* Desktop / tablet — right:32px so the FAB's right edge lines up with the topbar's
   32px right padding (ends exactly where the profile button ends). */
.app-sidebar .create-menu { position: fixed; right: 32px; bottom: 24px; left: auto; }
.askgia-bubble { right: 24px; bottom: 94px; left: auto; }   /* 24 + 56 + 14 gap */
/* Mobile: clear the bottom nav, keep the same stack + alignment */
@media (max-width: 768px) {
  .app-sidebar .create-menu { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .askgia-bubble { right: 16px; bottom: calc(166px + env(safe-area-inset-bottom)); }
}

/* Subtle fade when swiping between kanban stages */
@keyframes kbFade { from { opacity: 0.25; } to { opacity: 1; } }

/* Contacts: desktop = sticky toolbar (window scroll) */
#page-contacts .page-heading {
  position: sticky; top: 58px; z-index: 30;
  background: var(--mid-base); padding: 10px 0;
}
/* Mobile: LOCK the page (heading fixed, the grid is the only scroller) so cards
   never scroll behind the toolbar — same model as Leads. */
@media (max-width: 768px) {
  body.contacts-active .shell {
    height: calc(100dvh - 52px - 96px - env(safe-area-inset-bottom));
    overflow: hidden; padding-top: 14px; padding-bottom: 0;
  }
  #page-contacts { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  #page-contacts .page-heading { position: static; flex: 0 0 auto; margin-bottom: 10px; padding: 0; }
  #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
}

/* Disable double-tap-to-zoom (keeps pinch-zoom + scrolling) */
html { touch-action: manipulation; }

/* Topbar: solid background (no translucent/blurred fade behind search/notifications) */
body.dash-active .topbar {
  background: var(--mid-base) !important;
  border-bottom: 1px solid var(--mid-surface-2);
  box-shadow: none;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Align content + topbar to the flush sidebar width (no gap strip beside the menu) */
@media (min-width: 961px) {
  body.dash-active .shell { margin-left: 248px; }
  body.dash-active .topbar { margin-left: 248px; }
}


/* ═══════════════ CHAT / CONVERSATIONS — Midnight theme ═══════════════ */
body.chat-active #page-conversations .page-heading h1 { color:var(--mid-text); }
body.chat-active #page-conversations .page-heading .eyebrow { color:var(--mid-primary); }
/* Panes */
body.chat-active .inbox-list-pane, body.chat-active .inbox-thread-pane {
  background:var(--mid-surface); border:1px solid var(--mid-line); -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.chat-active .inbox-thread-pane { background:var(--mid-base); }
/* Search */
body.chat-active .inbox-search input { color:var(--mid-text); background:transparent; }
body.chat-active .inbox-search input::placeholder { color:var(--mid-muted); }
body.chat-active .inbox-search .material-symbols-outlined { color:var(--mid-muted); }
body.chat-active .inbox-search { border-bottom:1px solid var(--mid-surface-3); }
/* Channel filter tabs */
body.chat-active .inbox-filter { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.chat-active .inbox-filter button { color:var(--mid-muted); }
body.chat-active .inbox-filter button:hover { color:var(--mid-text); }
body.chat-active .inbox-filter button.is-active { background:var(--mid-badge); color:var(--mid-primary); box-shadow:none; }
/* Conversation rows */
body.chat-active .inbox-row { border-left-color:transparent; }
body.chat-active .inbox-row:hover { background:var(--mid-surface-2); }
body.chat-active .inbox-row.is-active { background:var(--mid-badge); border-left-color:var(--mid-primary); }
body.chat-active .inbox-row-name { color:var(--mid-text); }
body.chat-active .inbox-row-snippet { color:var(--mid-muted); }
body.chat-active .inbox-row-time { color:var(--mid-muted); }
body.chat-active .inbox-row-avatar { background:var(--mid-badge); color:var(--mid-primary); }
body.chat-active .inbox-empty { color:var(--mid-muted); }
/* Thread header */
body.chat-active .inbox-thread-head { background:var(--mid-surface); border-bottom:1px solid var(--mid-line); }
body.chat-active .inbox-thread-who strong { color:var(--mid-text); }
body.chat-active .inbox-thread-who .muted { color:var(--mid-muted); }
body.chat-active .inbox-thread-head .button.ghost { background:var(--mid-surface-3); border:1px solid var(--mid-line); color:var(--mid-text-2); }
/* Messages canvas */
body.chat-active .inbox-messages { background:var(--mid-lowest); }
body.chat-active .msg.in .msg-bubble {
  background:var(--mid-surface-3); border:1px solid var(--mid-line); backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--mid-text);
}
body.chat-active .msg.out .msg-bubble { background:var(--mid-accent); color:var(--mid-on-accent); box-shadow:0 4px 14px -6px rgba(56,189,248,0.4); }
body.chat-active .msg-meta { color:var(--mid-muted); }
/* Composer */
body.chat-active .inbox-compose { background:var(--mid-surface); border-top:1px solid var(--mid-line); }
body.chat-active .inbox-compose-row textarea {
  background:var(--mid-base); border:1px solid var(--mid-line); color:var(--mid-text);
}
body.chat-active .inbox-compose-row textarea::placeholder { color:var(--mid-text-3); }
body.chat-active .inbox-compose-row textarea:focus { border-color:var(--mid-accent); box-shadow:0 0 0 3px rgba(217, 255, 94, 0.28); }
body.chat-active .inbox-banner { background:rgba(255,159,10,0.14); border-color:rgba(255,159,10,0.3); color:var(--mid-tertiary); }
/* Composer auto-grows up to 4 rows via JS (autoGrowComposer) then scrolls — drop
   the fixed max-height clamp and pin line-height so the 4-row math is right on
   desktop AND mobile (font differs by viewport). */
body.chat-active .inbox-compose-row textarea,
#chatDetailContent .inbox-compose-row textarea { max-height: none; line-height: 1.4; resize: none; }

/* ═══ Chat — rich conversation rows + thread header (match mockup) ═══ */
.inbox-row { display: flex !important; align-items: flex-start; gap: 12px; grid-template-columns: none !important; padding: 12px 14px; }
.inbox-row-avatar { position: relative; width: 48px; height: 48px; flex: 0 0 48px; font-size: 16px; }
.inbox-row-chbadge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mid-surface-2); display: grid; place-items: center; border: 2px solid var(--mid-surface); }
.inbox-row-chbadge .material-symbols-outlined { font-size: 11px; }
.inbox-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.inbox-row-time { font-size: 11.5px; flex: 0 0 auto; }
.inbox-row-snippet { font-size: 13px; }
.inbox-row-chline { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mid-muted); }
.inbox-row-chline .material-symbols-outlined { font-size: 14px; }
.inbox-row-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--mid-accent); box-shadow: 0 0 8px rgba(56,189,248,0.6); flex: 0 0 auto; align-self: center; }
.inbox-row.is-unread .inbox-row-name { font-weight: 700; color: #fff; }
.inbox-row.is-unread .inbox-row-snippet { color: var(--mid-text-2); }
/* Thread header avatar */
.inbox-thread-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mid-badge); color: var(--mid-primary); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; font-size: 15px; }
body.chat-active .inbox-thread-head { display: flex; align-items: center; gap: 12px; }
body.chat-active .inbox-thread-who { flex: 1 1 auto; min-width: 0; }
body.chat-active .inbox-thread-meta .inline-icon, body.chat-active #inboxThreadMeta .inline-icon { vertical-align: middle; }

/* ═══ Chat fixes — legible Take over + clear floating FABs ═══ */
body.chat-active #inboxTakeoverBtn { background:var(--mid-accent); color:var(--mid-on-accent); border:1px solid var(--mid-accent); font-weight:600; }
body.chat-active #inboxTakeoverBtn:hover { background:var(--mid-primary); border-color:var(--mid-primary); }
body.chat-active #inboxTakeoverBtn.danger { background:transparent; color:var(--mid-tertiary); border:1px solid rgba(255,159,10,0.5); }
/* Keep Send clear of the floating Gia + create FABs (bottom-right) */
@media (min-width: 901px) {
  body.chat-active .inbox-compose { padding-right: 84px; }
}

/* ═══ Chat — message layout to match reference (avatars, date sep, corners, pill composer) ═══ */
.inbox-messages { gap: 4px; }
.msg { flex-direction: row; align-items: flex-end; gap: 8px; max-width: 82%; margin-top: 10px; }
.msg.out { flex-direction: row; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg.out .msg-col { align-items: flex-end; }
.msg-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--mid-badge); color: var(--mid-primary); margin-bottom: 18px; }
.msg.in .msg-bubble { border-bottom-left-radius: 5px; }
.msg.out .msg-bubble { border-bottom-right-radius: 5px; }
.msg-meta { display: flex; align-items: center; gap: 4px; }
.msg-tick { font-size: 13px; font-variation-settings: 'FILL' 1; color: var(--mid-accent-ink); }
.msg-datesep { align-self: center; max-width: none; margin: 16px 0 6px; }
.msg-datesep span { display: inline-block; padding: 3px 12px; border-radius: 9999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--mid-surface-3); color: var(--mid-muted); }
/* Composer → rounded pill input + round send button */
body.chat-active .inbox-compose-row { align-items: center; gap: 8px; }
body.chat-active .inbox-compose-row textarea {
  border-radius: 22px; padding: 11px 18px; background: var(--mid-base) !important; border: 1px solid var(--mid-line);
}
body.chat-active #inboxAttachBtn { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); display: grid; place-items: center; padding: 0; }
body.chat-active #inboxSendBtn {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; padding: 0; font-size: 0;
  background: var(--mid-accent); color: var(--mid-on-accent); display: grid; place-items: center;
}
body.chat-active #inboxSendBtn::after { content: "send"; font-family: "Material Symbols Outlined"; font-size: 22px; font-variation-settings: 'FILL' 1; }
body.chat-active #inboxFollowUpBtn { border-radius: 9999px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-primary); font-size: 11.5px; padding: 8px 14px; white-space: nowrap; }

/* ═══ Chat composer — chips + icon toolbar (match reference) ═══ */
.inbox-compose-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.compose-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 9999px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.compose-chip:hover { background: #2f363a; color: var(--mid-text); }
.compose-chip .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
.compose-tool { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: none; color: var(--mid-muted); cursor: pointer; padding: 0; }
.compose-tool:hover { background: var(--mid-surface-3); color: var(--mid-primary); }
.compose-tool .material-symbols-outlined { font-size: 22px; }
/* Hide the FLOATING Gia bubble on the chat page — it sat over the composer.
   The "+" is NOT floating: #createFab lives inside .create-menu in the top bar
   (BUTTON#createFab › DIV#createMenu › .topbar-actions › HEADER.topbar, verified in the
   harness). Hiding it here removed quick-create from Chat and Quotes for no reason —
   it overlaps nothing up there (owner, 2026-08-13). */
body.chat-active #askGiaBubble, body.chat-active #askGiaPanel { display: none !important; }

/* ═══ Chat — thread header chip + Join Call, tighter bubbles ═══ */
.inbox-thread-nameline { display: flex; align-items: center; gap: 10px; }
.lead-temp-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 9999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lead-temp-chip.hot { background: rgba(255,69,58,0.18); color: #ff7a70; border: 1px solid rgba(255,69,58,0.35); }
.lead-temp-chip.warm { background: rgba(255,159,10,0.16); color: var(--mid-tertiary); border: 1px solid rgba(255,159,10,0.3); }
.lead-temp-chip.cold { background: rgba(142,213,255,0.14); color: var(--mid-primary); border: 1px solid rgba(142,213,255,0.3); }
body.chat-active .inbox-joincall { display: inline-flex; align-items: center; gap: 6px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-primary); text-decoration: none; }
body.chat-active .inbox-joincall:hover { background: #2f363a; }
/* Tighter, reference-width message bubbles */
.msg { max-width: 64%; }
@media (max-width: 900px) { .msg { max-width: 84%; } }
/* Hide bulk "Follow up all" on the chat page (not in the reference layout) */
body.chat-active #followUpAllBtn { display: none !important; }

/* ═══ Chat MOBILE — kanban-style list cards + fullscreen thread ═══ */
@media (max-width: 900px) {
  /* List pane: drop the glass enclosure so each chat reads as its own card */
  body.chat-active .inbox-list-pane {
    background: transparent !important; border: none !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0;
  }
  body.chat-active .inbox-search { padding: 0 2px 10px; }
  body.chat-active .inbox-filter { margin: 0 2px 12px; position: sticky; top: 0; z-index: 2; }
  body.chat-active .inbox-list { padding: 0 2px 12px; overflow-y: auto; }
  /* Each conversation = a standalone card, like the Kanban lead cards */
  body.chat-active .inbox-row {
    background: var(--mid-surface-2) !important; border: 1px solid var(--mid-surface-3); border-radius: 14px;
    margin-bottom: 10px; padding: 14px; border-left: 1px solid var(--mid-surface-3);
  }
  body.chat-active .inbox-row.is-active,
  body.chat-active .inbox-row:hover { background: #1f262b !important; border-color: var(--mid-accent); }
  body.chat-active .inbox-row.is-unread { border-color: var(--mid-accent); }

  /* Tap a chat → genuine fullscreen thread (covers topbar + bottom nav) */
  body.chat-active .inbox-shell.show-thread .inbox-thread-pane {
    position: fixed; inset: 0; z-index: 1200; height: 100dvh;
    border: none; border-radius: 0; background: var(--mid-base) !important;
  }
  /* Keep Lead/Contact off the compact mobile header — back + avatar + name + Take over */
  body.chat-active .inbox-shell.show-thread #inboxViewLeadBtn,
  body.chat-active .inbox-shell.show-thread #inboxViewContactBtn { display: none !important; }
}

/* ═══ Chat — kanban-style cards (name / phone / score+source+takeover), search FAB ═══ */
/* Remove the "Gia is active" warning entirely */
#inboxGiaBanner { display: none !important; }
/* Desktop keeps the rich row; phone + meta3 are mobile-only */
.inbox-row-phone, .inbox-row-meta3 { display: none; }

@media (max-width: 900px) {
  /* Card content per spec: row1 name, row2 phone (WA only), row3 score+icon+takeover */
  body.chat-active .inbox-row-avatar,
  body.chat-active .inbox-row-time,
  body.chat-active .inbox-row-snippet,
  body.chat-active .inbox-row-chline,
  body.chat-active .inbox-row-unread { display: none !important; }
  body.chat-active .inbox-row { padding: 16px !important; }
  body.chat-active .inbox-row-main { gap: 4px; width: 100%; }
  body.chat-active .inbox-row-name { white-space: normal; font-size: 16px; font-weight: 700; color: var(--mid-text); }
  body.chat-active .inbox-row-phone { display: block; color: var(--mid-muted); font-size: 13px; }
  body.chat-active .inbox-row-meta3 { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  body.chat-active .inbox-row-srcicon { font-size: 16px; }
  body.chat-active .inbox-card-takeover { margin-left: auto; background: var(--mid-accent); color: var(--mid-on-accent); font-weight: 600; font-size: 11.5px; padding: 7px 16px; border-radius: 9999px; }
  body.chat-active .inbox-row[data-paused="1"] .inbox-card-takeover { background: transparent; color: var(--mid-tertiary); border: 1px solid rgba(255,159,10,0.5); }

  /* Floating search FAB where the + used to be; top inline search hidden */
  body.chat-active .inbox-search { display: none !important; }
  body.chat-active .chat-search-fab {
    display: grid; place-items: center; position: fixed; right: 18px; bottom: 84px;
    width: 56px; height: 56px; border-radius: 50%; background: var(--mid-accent); color: var(--mid-on-accent);
    border: none; z-index: 900; box-shadow: 0 8px 22px -6px rgba(56,189,248,0.65);
  }
  body.chat-active .chat-search-pop:not([hidden]) {
    display: flex; align-items: center; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 84px;
    z-index: 901; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 10px 14px;
  }
  body.chat-active .chat-search-pop input { flex: 1; background: transparent; border: none; outline: none; color: var(--mid-text); font-size: 14px; font-family: var(--sans); }
  body.chat-active .chat-search-pop .material-symbols-outlined { color: var(--mid-muted); }
  body.chat-active .chat-search-pop button { background: none; border: none; cursor: pointer; display: grid; place-items: center; }
}
.chat-search-fab { display: none; }
.chat-search-pop[hidden] { display: none; }

/* ═══ Chat mobile v2 — FAB match, stage-pill tabs, tighter top, no header chip ═══ */
/* Thread-header temperature chip fully removed */
#inboxThreadChip { display: none !important; }

@media (max-width: 900px) {
  /* Search FAB sits EXACTLY where the + FAB used to be (48×48, radius 16, right/bottom 24) */
  body.chat-active .chat-search-fab {
    right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 16px;
    background: var(--mid-accent); color: var(--mid-on-accent); box-shadow: 0 8px 20px -8px rgba(56,189,248,0.55);
  }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: 84px; }

  /* Channel tabs styled like the Leads stage pills (rounded, scrollable, cyan active) */
  body.chat-active .inbox-filter {
    display: flex; gap: 8px; overflow: visible; flex-wrap: nowrap; padding: 6px 2px 24px; margin: 0;
    background: transparent; border: none; border-radius: 0;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  body.chat-active .inbox-filter::-webkit-scrollbar { display: none; }
  body.chat-active .inbox-filter button {
    flex: 0 0 auto; width: auto; padding: 8px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2);
  }
  body.chat-active .inbox-filter button.is-active { background: var(--mid-accent); color: var(--mid-on-accent); border-color: var(--mid-accent); box-shadow: none; }

  /* Close the gap: drop the page heading on mobile so the tabs sit just under the top bar */
  body.chat-active #page-conversations .page-heading { display: none !important; }
  /* No page heading on chat → let the list fill the space above the nav so cards
     aren't crammed against the tabs with a dead band at the bottom. */
  body.chat-active .inbox-shell { height: calc(100dvh - 64px - var(--nav-reserve)) !important; }
  body.chat-active .inbox-list-pane { padding-top: 6px; }
}
@media (max-width: 560px) {
  body.chat-active .chat-search-fab { bottom: 84px; }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: 144px; }
}

/* ═══ Chat composer v3 — inline AI star, centered send, lifted off the bottom ═══ */
/* AI Suggest is now a star inside the input, pinned right */
.inbox-input-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.inbox-input-wrap textarea { flex: 1; width: 100%; }
body.chat-active .inbox-input-wrap textarea { padding-right: 46px; }
.inbox-ai-inline {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; padding: 4px;
  display: grid; place-items: center; color: var(--mid-primary);
}
.inbox-ai-inline .material-symbols-outlined { font-size: 22px; }
.inbox-ai-inline:hover { color: #c4e7ff; }

/* Send button: real icon, perfectly centered */
body.chat-active #inboxSendBtn { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0; }
body.chat-active #inboxSendBtn::after { content: none !important; }
body.chat-active #inboxSendBtn .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; line-height: 1; }

/* FABs are gone on chat → reclaim the right padding I'd reserved on desktop */
@media (min-width: 901px) { body.chat-active .inbox-compose { padding-right: 16px; } }

/* Mobile: lift the whole composer off the screen edge */
@media (max-width: 900px) {
  body.chat-active .inbox-compose {
    padding-top: 14px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* ═══ Chat perf + composer v4 — no blur repaint, inline star (no wrapper box) ═══ */
/* LAG FIX: backdrop-filter on a fullscreen scrolling pane (and on every incoming
   bubble) repaints each frame. Kill all blur inside the chat thread. */
body.chat-active .inbox-list-pane,
body.chat-active .inbox-thread-pane,
body.chat-active .inbox-shell.show-thread .inbox-thread-pane,
body.chat-active .msg.in .msg-bubble {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.chat-active .msg.in .msg-bubble { background: var(--mid-surface-3); border-color: var(--mid-line); }
body.chat-active .inbox-messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* AI star: inline in the compose row, anchored over the input's right edge — no box */
.inbox-input-wrap { display: contents; }   /* neutralize any leftover wrapper */
body.chat-active .inbox-compose-row { position: relative; }
.inbox-ai-inline {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: transparent !important; border: none !important; box-shadow: none !important;
  cursor: pointer; padding: 4px; display: grid; place-items: center; color: var(--mid-primary); z-index: 2;
}
.inbox-ai-inline .material-symbols-outlined { font-size: 22px; }
.inbox-ai-inline:hover { color: #c4e7ff; }
body.chat-active .inbox-compose-row textarea { padding-right: 48px; }

/* ═══ Chat FAB + AI star — match the + FAB exactly, nudge star right ═══ */
/* The + FAB on mobile = 56×56 circle at right:24/bottom:24 (≤768 → right:16, bottom:96+safe).
   Mirror it precisely so the search FAB lands in the identical spot. */
body.chat-active .chat-search-fab {
  position: fixed; z-index: 900;
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  right: 24px; bottom: 24px; left: auto;
  display: grid; place-items: center; background: var(--mid-accent); color: var(--mid-on-accent);
  border: none; outline: none; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,90,200,0.45);
}
body.chat-active .chat-search-fab:focus,
body.chat-active .chat-search-fab:focus-visible { outline: 2px solid var(--mid-accent, #38bdf8); outline-offset: 2px; }
body.chat-active .chat-search-fab .material-symbols-outlined { font-size: 28px; }
body.chat-active .chat-search-pop:not([hidden]) { bottom: 96px; }
@media (max-width: 768px) {
  body.chat-active .chat-search-fab { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: calc(166px + env(safe-area-inset-bottom)); }
}
/* Nudge the AI star closer to the send button */
.inbox-ai-inline { right: 58px; padding: 2px; }
/* Reserve enough right padding that typed text never runs under the AI star. */
body.chat-active .inbox-compose-row textarea { padding-right: 54px; }
/* Mobile: 16px font stops iOS from auto-zooming the page when the box is focused. */
@media (max-width: 768px) {
  body.chat-active .inbox-compose-row textarea { font-size: 16px; }
}

/* ═══ Chat mobile — center the cards between the tabs and the bottom nav ═══ */
@media (max-width: 900px) {
  body.chat-active .inbox-list {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%;
  }
  /* When the list overflows, justify-content:center can hide the top — fall back
     to top-alignment so every card stays reachable. */
  body.chat-active .inbox-list { justify-content: safe center; }
}

/* Search FAB gets the same pulsing glow as the + FAB */
body.chat-active .chat-search-fab { animation: fabGlow 3.2s ease-in-out infinite; }

/* ═══ Chat desktop — channel tabs as left-aligned pills (match reference + mobile) ═══ */
@media (min-width: 901px) {
  body.chat-active .inbox-filter {
    display: flex; gap: 8px; background: transparent; border: none; border-radius: 0;
    padding: 0 0 14px; margin: 0 16px;
  }
  body.chat-active .inbox-filter button {
    flex: 0 0 auto; width: auto; padding: 7px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2);
  }
  body.chat-active .inbox-filter button:hover { color: var(--mid-text); }
  body.chat-active .inbox-filter button.is-active { background: var(--mid-accent); color: var(--mid-on-accent); border-color: var(--mid-accent); box-shadow: none; }
}

/* ═══ Chat search popup — desktop: float above the FAB (was opening at page top) ═══ */
@media (min-width: 901px) {
  body.chat-active .chat-search-pop:not([hidden]) {
    position: fixed; z-index: 901; right: 24px; bottom: 96px; left: auto; width: 340px;
    display: flex; align-items: center; gap: 8px;
    background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6);
  }
  body.chat-active .chat-search-pop input { flex: 1; background: transparent; border: none; outline: none; color: var(--mid-text); font-size: 14px; font-family: var(--sans); }
  body.chat-active .chat-search-pop .material-symbols-outlined { color: var(--mid-muted); }
  body.chat-active .chat-search-pop button { background: none; border: none; cursor: pointer; display: grid; place-items: center; }
}

/* ═══ Chat — drop the redundant search FAB (inline search bar already exists) ═══ */
.chat-search-fab, .chat-search-pop { display: none !important; }
/* Add space between the search box (and its divider) and the channel tabs */
body.chat-active .inbox-search { margin-bottom: 14px; border-bottom: 1px solid var(--mid-surface-3); padding-bottom: 12px; }
@media (max-width: 900px) {
  body.chat-active .inbox-search { margin-bottom: 16px; }
}

/* ═══ Chat desktop — taller panes, less empty space below ═══ */
@media (min-width: 901px) {
  body.chat-active .inbox-shell { height: calc(100dvh - 140px) !important; min-height: 520px; }
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE GENERATOR — MIDNIGHT THEME (body.quote-active)
   Recolours the whole page by flipping the --qg-* tokens, plus
   targeted overrides for fields, buttons and the summary rail.
   ═══════════════════════════════════════════════════════════════ */
body.quote-active #page-quotes {
  --qg-canvas: transparent;
  --qg-surface: var(--mid-surface-2);
  --qg-line: var(--mid-line);
  --qg-ink: var(--mid-text);
  --qg-muted: var(--mid-muted);
  --qg-muted-soft: var(--mid-text-3);
  --qg-accent: var(--mid-accent);
  --qg-accent-on: var(--mid-on-accent);
  --qg-ok-bg: rgba(48,209,88,0.16); --qg-ok-fg: #6ee7a0;
  --qg-warn-bg: rgba(255,159,10,0.16); --qg-warn-fg: var(--mid-tertiary);
  --qg-err-bg: rgba(255,69,58,0.16); --qg-err-fg: #ff7a70;
  --qg-info-bg: rgba(56,189,248,0.14); --qg-info-fg: var(--mid-primary);
  color: var(--mid-text);
}
/* Cards / sections */
body.quote-active #page-quotes .qg-card,
body.quote-active #page-quotes .package-card {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body.quote-active #page-quotes .qg-heading h1,
body.quote-active #page-quotes .qg-card-head h3 { color: var(--mid-text); }
body.quote-active #page-quotes .qg-card-head .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .qg-heading .eyebrow { color: var(--mid-primary); }
body.quote-active #page-quotes .muted,
body.quote-active #page-quotes label > span,
body.quote-active #page-quotes .qg-card-head p { color: var(--mid-muted); }

/* Form fields — dark inputs with cyan focus */
body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
body.quote-active #page-quotes select,
body.quote-active #page-quotes textarea {
  background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important;
}
body.quote-active #page-quotes input::placeholder,
body.quote-active #page-quotes textarea::placeholder { color: var(--mid-text-3) !important; }
body.quote-active #page-quotes input:focus,
body.quote-active #page-quotes select:focus,
body.quote-active #page-quotes textarea:focus {
  border-color: var(--mid-accent) !important; box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28) !important;
}
body.quote-active #page-quotes select option { background: var(--mid-surface-2); color: var(--mid-text); }

/* Buttons */
body.quote-active #page-quotes .button {
  background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
body.quote-active #page-quotes .button:hover { background: #2f363a; color: var(--mid-text); }
body.quote-active #page-quotes .button .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .button.primary,
body.quote-active #page-quotes .qg-generate {
  background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700;
}
body.quote-active #page-quotes .button.primary:hover,
body.quote-active #page-quotes .qg-generate:hover { background: var(--mid-primary); border-color: var(--mid-primary); }
body.quote-active #page-quotes .qg-generate .material-symbols-outlined,
body.quote-active #page-quotes .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.quote-active #page-quotes .button.danger { color: #ff7a70; border-color: rgba(255,69,58,0.4); background: transparent; }
/* Clear button: dark ghost matching the rest of the dark quote UI (same box as Generate). */
body.quote-active #page-quotes .qg-generate.is-ghost {
  background: transparent; color: var(--mid-muted); border: 1px solid var(--mid-line); box-shadow: none; font-weight: 600;
}
body.quote-active #page-quotes .qg-generate.is-ghost:hover { background: var(--mid-surface-3); border-color: var(--mid-line); }
body.quote-active #page-quotes .qg-generate.is-ghost .material-symbols-outlined { color: var(--mid-muted); }

/* Event chips / selectable cards */
body.quote-active #page-quotes .qg-event-card {
  background: var(--mid-base); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
body.quote-active #page-quotes .qg-event-card.is-selected {
  background: rgba(56,189,248,0.14); border-color: var(--mid-accent); color: var(--mid-primary);
}
body.quote-active #page-quotes .mini-check span,
body.quote-active #page-quotes .qg-event-name { color: inherit; }

/* Nested panels (event detail rows, team matrix, package head) */
body.quote-active #page-quotes .package-card-head,
body.quote-active #page-quotes .package-event-details,
body.quote-active #page-quotes .package-team-matrix,
body.quote-active #page-quotes .event-detail-row,
body.quote-active #page-quotes .qg-event-grid {
  background: transparent; border-color: var(--mid-line);
}
body.quote-active #page-quotes table th { color: var(--mid-muted); border-color: var(--mid-line); }
body.quote-active #page-quotes table td { border-color: var(--mid-surface-3); color: var(--mid-text); }

/* Live-pricing summary rail */
body.quote-active #page-quotes .qg-rail {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); box-shadow: none;
}
body.quote-active #page-quotes .qg-rail-head { background: rgba(56,189,248,0.10); border-bottom: 1px solid rgba(56,189,248,0.22); }
body.quote-active #page-quotes .qg-rail-label { color: var(--mid-primary); }
body.quote-active #page-quotes .qg-rail-state,
body.quote-active #page-quotes .qg-rail-toggle { color: var(--mid-muted); }
body.quote-active #page-quotes .qg-rail-body,
body.quote-active #page-quotes .qg-rail-footer { color: var(--mid-text); }
body.quote-active #page-quotes .qg-toggle span { color: var(--mid-text-2); }

/* Banner / contact chips */
body.quote-active #page-quotes .selected-contact-chip,
body.quote-active #page-quotes .contact-results { background: var(--mid-base); border: 1px solid var(--mid-line); color: var(--mid-text); }

/* ═══ Quote builder — mockup layout (.qgm-*) ═══ */
body.quote-active #page-quotes .qgm-pkg { padding: 22px; }
body.quote-active #page-quotes .qgm-pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body.quote-active #page-quotes .qgm-pkg-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-pkg-head .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-pkg-actions { display: flex; gap: 8px; }
body.quote-active #page-quotes .qgm-pkg-fields { display: flex; flex-direction: column; gap: 14px; }
body.quote-active #page-quotes .qgm-qty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body.quote-active #page-quotes .qgm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.quote-active #page-quotes .qgm-field > span { font-size: 11.5px; letter-spacing: 0.05em; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-field input { background: var(--mid-base) !important; border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px 12px; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-pkg-toggles { display: flex; gap: 18px; margin-top: 14px; }
body.quote-active #page-quotes .qgm-pkg-toggles .mini-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mid-text-2); }

/* Event timeline */
body.quote-active #page-quotes .qgm-timeline { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
body.quote-active #page-quotes .qgm-timeline-head { display: flex; align-items: center; gap: 14px; }
body.quote-active #page-quotes .qgm-timeline-head span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-timeline-rule { flex: 1; height: 1px; background: var(--mid-line); opacity: 0.5; }
body.quote-active #page-quotes .qgm-empty { color: var(--mid-muted); font-size: 13px; padding: 6px 0; }

body.quote-active #page-quotes .qgm-event { background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 14px; overflow: hidden; }
/* No fill on the event header — the card already IS the surface, and a second grey
   strip inside it read as a box within a box (owner 2026-08-13). The divider stays so
   the header still separates from the service table. */
body.quote-active #page-quotes .qgm-event-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border-bottom: 1px solid var(--mid-line); }
body.quote-active #page-quotes .qgm-event-ico { color: var(--mid-primary); font-size: 20px; }
/* Event name : date : city share the row in a 50:25:25 ratio (flex 2:1:1 of the space
   left after the icon + delete button). min-width:0 lets each shrink to keep the ratio. */
body.quote-active #page-quotes .qgm-event-type { flex: 2 1 0; min-width: 0; background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 7px 10px; color: var(--mid-primary) !important; font-weight: 600; }
body.quote-active #page-quotes .qgm-event-date { flex: 1 1 0; min-width: 0; background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 7px 10px; color: var(--mid-text) !important; }
/* Per-event city — each ceremony can be in a different city. Sits beside the date. */
body.quote-active #page-quotes .qgm-event-city { flex: 1 1 0; min-width: 0; background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 7px 10px; color: var(--mid-text) !important; }
body.quote-active #page-quotes .qgm-event-city::placeholder { color: var(--mid-muted); }
/* Remove-event button: an inline SVG trash (NOT the icon font — the ligature wasn't
   rendering here, leaving a blank box) in red on a neutral dark button = high contrast.
   Single base rule → applies to desktop + mobile. */
body.quote-active #page-quotes .qgm-event-del,
body.quote-active #page-quotes .qgm-event-del,
body.quote-active #page-quotes .qgm-del-remove { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--mid-surface); border: 1px solid var(--mid-line); cursor: pointer; color: #ff8a80; display: grid; place-items: center; padding: 0; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
body.quote-active #page-quotes .qgm-event-del:hover,
body.quote-active #page-quotes .qgm-del-remove { background: rgba(255,69,58,0.16); border-color: var(--mid-danger, #FF453A); color: var(--mid-danger, #FF453A); }
body.quote-active #page-quotes .qgm-event-del svg,
body.quote-active #page-quotes .qgm-event-del svg,
body.quote-active #page-quotes .qgm-del-remove svg { width: 17px; height: 17px; display: block; stroke: currentColor; }

/* Service table */
body.quote-active #page-quotes .qgm-svc-table { padding: 6px 14px 10px; }
body.quote-active #page-quotes .qgm-svc-headrow,
body.quote-active #page-quotes .qgm-svc-row { display: grid; grid-template-columns: 1fr 130px 120px; align-items: center; gap: 10px; }
body.quote-active #page-quotes .qgm-svc-headrow { padding: 8px 0; border-bottom: 1px solid var(--mid-surface-3); font-size: 11.5px; letter-spacing: 0.04em; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-svc-headrow span:nth-child(2) { text-align: center; }
body.quote-active #page-quotes .qgm-svc-headrow span:nth-child(3) { text-align: right; }
body.quote-active #page-quotes .qgm-svc-row { padding: 10px 0; border-bottom: 1px solid var(--mid-surface-2); }
body.quote-active #page-quotes .qgm-svc-row.is-empty { display: none; }
body.quote-active #page-quotes .qgm-svc-name { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-svc-name .material-symbols-outlined { color: var(--mid-primary); font-size: 18px; }
body.quote-active #page-quotes .qgm-step { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
body.quote-active #page-quotes .qgm-step-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--mid-line); background: var(--mid-surface); color: var(--mid-text); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; }
body.quote-active #page-quotes .qgm-step-btn:hover { background: var(--mid-surface-3); border-color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-step-val { min-width: 18px; text-align: center; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-svc-price { text-align: right; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-add-svc { margin: 4px 14px 12px; background: none !important; border: none !important; color: var(--mid-primary); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px; }
body.quote-active #page-quotes .qgm-add-svc .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-addons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
body.quote-active #page-quotes .qgm-addon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--mid-line); background: var(--mid-base); font-size: 11.5px; color: var(--mid-text-2); cursor: pointer; }
body.quote-active #page-quotes .qgm-addon-chip input { accent-color: var(--mid-accent); }

/* Add Event row — dashed call-to-action */
body.quote-active #page-quotes .qgm-add-event { display: flex; gap: 10px; align-items: center; padding: 14px; border: 2px dashed var(--mid-line); border-radius: 14px; }
body.quote-active #page-quotes .qgm-event-picker { flex: 1; min-width: 0; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 9px 12px; color: var(--mid-text) !important; }
body.quote-active #page-quotes .qgm-add-event-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--mid-accent); background: rgba(56,189,248,0.12); color: var(--mid-primary); font-weight: 700; cursor: pointer; white-space: nowrap; }
body.quote-active #page-quotes .qgm-add-event-btn:hover { background: rgba(56,189,248,0.2); }
body.quote-active #page-quotes .qgm-add-event-btn .material-symbols-outlined { font-size: 18px; }
body.quote-active #page-quotes .qgm-new-type { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2); font-size: 13px; cursor: pointer; white-space: nowrap; }
body.quote-active #page-quotes .qgm-new-type .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }

@media (max-width: 760px) {
  /* Package Name stays full-width (flex column); the 3 quantity fields keep their
     own row, just tighter gaps so they fit 3-up on a phone. */
  body.quote-active #page-quotes .qgm-qty-row { gap: 8px; }
  body.quote-active #page-quotes .qgm-field input { padding: 9px 8px; }
  /* Tighten the NESTED card padding on phones. The package card (22px) + each event
     card's own table padding (14px) stacked on the page shell over-indented the service
     rows — cramping the name column and leaving a double-border "sliver". Pull both in
     so the rows get their width back and the nesting reads as one clean step. */
  body.quote-active #page-quotes .qgm-pkg { padding: 14px 12px; }
  body.quote-active #page-quotes .qgm-event-head { padding: 10px 11px; gap: 8px; }
  body.quote-active #page-quotes .qgm-svc-table { padding: 4px 11px 8px; }
  body.quote-active #page-quotes .qgm-add-svc { margin: 2px 11px 10px; }
  body.quote-active #page-quotes .qgm-addons { padding: 0 11px 12px; }
  /* Event name : date : city keep their 50:25:25 flex ratio on mobile too (no fixed widths). */
  body.quote-active #page-quotes .qgm-svc-name { font-size: 13px; }
  body.quote-active #page-quotes .qgm-svc-name .material-symbols-outlined { font-size: 17px; }
  body.quote-active #page-quotes .qgm-svc-headrow, body.quote-active #page-quotes .qgm-svc-row { grid-template-columns: 1fr 92px 80px; gap: 6px; }
  body.quote-active #page-quotes .qgm-step { gap: 7px; }
  body.quote-active #page-quotes .qgm-step-btn { width: 24px; height: 24px; }
  body.quote-active #page-quotes .qgm-add-event { flex-wrap: wrap; }
}

/* ═══ Quote — unified card/typography consistency + merged lead card ═══ */
body.quote-active #page-quotes .qg-card { padding: 22px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 16px; }
body.quote-active #page-quotes .qg-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
body.quote-active #page-quotes .qg-card-head h3 { font-size: 16px; font-weight: 600; color: var(--mid-text); flex: 1; text-transform: none; letter-spacing: -0.008em; }
body.quote-active #page-quotes .qg-card-head > .material-symbols-outlined { color: var(--mid-primary); font-size: 20px; }
body.quote-active #page-quotes .qg-card-head p.muted { flex-basis: 100%; order: 9; font-size: 11.5px; color: var(--mid-muted); margin: 4px 0 0; }

/* Merged Lead & Client Identity card */
body.quote-active #page-quotes .crm-search-row { display: flex; gap: 10px; margin-bottom: 16px; }
body.quote-active #page-quotes .crm-search-row input { flex: 1; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 10px; padding: 11px 14px; color: var(--mid-text) !important; }
/* Only the couple's-names field lives here now, so a single full-width column makes it
   span the card — matching the contact-search field above it. */
body.quote-active #page-quotes .qgm-lead-fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.quote-active #page-quotes .qgm-lead-fields .qgm-field input { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 10px; padding: 11px 14px; color: var(--mid-text); width: 100%; }

/* De-nest the package list: the wrapper card is just a slim bar, each package is the card */
body.quote-active #page-quotes .qg-card:has(#manualPackageList) { background: transparent; border: none; padding: 0; }
body.quote-active #page-quotes .qg-card:has(#manualPackageList) > .qg-card-head { padding: 0 2px 12px; margin: 0; }
body.quote-active #page-quotes .qg-card:has(#manualPackageList) > .qg-card-head > .material-symbols-outlined { display: none; }
body.quote-active #page-quotes #manualPackageList .qgm-pkg + .qgm-pkg { margin-top: 18px; }
body.quote-active #page-quotes .package-form { display: flex; flex-direction: column; gap: 18px; }

/* Add-on service rows: identical look to crew rows (no chips) */
body.quote-active #page-quotes .qgm-svc-addon .qgm-svc-name .material-symbols-outlined { color: var(--mid-primary); }

@media (max-width: 760px) {
  body.quote-active #page-quotes .qgm-lead-fields { grid-template-columns: 1fr; }
  body.quote-active #page-quotes .crm-search-row { flex-wrap: wrap; }
}

/* ═══ Quote — hidden-element fix, add-package button, rail discount ═══ */
/* Stray "circles" were hidden buttons/chips whose display overrode [hidden]. */
body.quote-active #page-quotes [hidden] { display: none !important; }

/* Packages wrapper is chrome-less (each package is its own card) */
body.quote-active #page-quotes .qgm-packages-card { background: transparent; border: none; padding: 0; }

/* Add New Package button (in package header, beside Duplicate) */
body.quote-active #page-quotes .qgm-add-package { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--mid-accent); background: rgba(56,189,248,0.12); color: var(--mid-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
body.quote-active #page-quotes .qgm-add-package .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-add-package:hover { background: rgba(56,189,248,0.2); }
/* Remove-package is an icon button (was a wide "Remove" text button that broke the
   header padding / widened the card on mobile in multi-package mode). */
body.quote-active #page-quotes .qgm-remove-package {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,122,112,0.4); background: rgba(255,122,112,0.10); color: #ff7a70;
}
body.quote-active #page-quotes .qgm-remove-package:hover { background: rgba(255,122,112,0.2); }
body.quote-active #page-quotes .qgm-remove-package .material-symbols-outlined { font-size: 18px; color: #ff7a70; }
/* Keep the card from ever growing past its column. */
body.quote-active #page-quotes .qgm-pkg { max-width: 100%; box-sizing: border-box; }
body.quote-active #page-quotes .qgm-pkg-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Discount block inside the floating summary rail */
body.quote-active #page-quotes .qg-rail-discount { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 14px; }
/* "Discount" label sized like the summary sub-headlines (Subtotal / Taxes) */
body.quote-active #page-quotes .qg-rail-discount-label { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--mid-text-2); }
/* ₹ / % symbol toggle right next to the label */
body.quote-active #page-quotes .qg-disc-toggle { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--mid-line); border-radius: 8px; overflow: hidden; }
body.quote-active #page-quotes .qg-disc-opt { width: 30px; height: 30px; display: grid; place-items: center; background: var(--mid-base); color: var(--mid-muted); border: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 0; }
body.quote-active #page-quotes .qg-disc-opt + .qg-disc-opt { border-left: 1px solid var(--mid-line); }
body.quote-active #page-quotes .qg-disc-opt.is-active { background: var(--mid-accent); color: var(--mid-on-accent); }
body.quote-active #page-quotes .qg-rail-discount input,
body.quote-active #page-quotes .qg-rail-detail select { flex: 1 1 auto; min-width: 0; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 8px 10px; color: var(--mid-text) !important; text-align: right; }

/* The top-bar "+" stays on the Quote page too — see the chat note above. */

/* ═══ Quote MOBILE — Live Pricing as an inline card (not a fixed drawer) ═══ */
@media (max-width: 1100px) {
  body.quote-active #page-quotes .qg-rail {
    position: static !important; transform: none !important;
    left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
    max-height: none !important; margin-top: 18px; width: auto !important;
    border-radius: 16px !important; border: 1px solid var(--mid-line) !important;
    box-shadow: none !important; z-index: auto !important; overflow: visible !important;
  }
  body.quote-active #page-quotes .qg-rail::before { display: none !important; }   /* drag handle */
  body.quote-active #page-quotes .qg-rail-head { cursor: default; }
  body.quote-active #page-quotes .qg-rail-head .qg-rail-toggle { display: none !important; }
  /* Clear the bottom nav, like every other page */
  body.quote-active #page-quotes { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* Label spans (hidden on mobile to make icon-only buttons) — desktop shows them */
.qgm-btn-label { display: inline; }

/* ═══ Quote MOBILE — left-align Lead title + icon-only package-head buttons ═══ */
@media (max-width: 900px) {
  /* Force the card header to a left-aligned single row (a base mobile rule turns it
     into a centered column otherwise). */
  body.quote-active #page-quotes .qg-card-head {
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    text-align: left !important; flex-wrap: wrap;
  }
  body.quote-active #page-quotes .qg-card-head h3 { text-align: left !important; flex: 1 1 auto; }

  /* Package Details header on one line: title + Duplicate icon + (+) icon */
  body.quote-active #page-quotes .qgm-pkg-head { flex-wrap: nowrap; gap: 8px; }
  body.quote-active #page-quotes .qgm-pkg-head h3 { flex: 1; min-width: 0; white-space: nowrap; }
  body.quote-active #page-quotes .qgm-pkg-actions { flex: 0 0 auto; gap: 8px; }
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-btn-label { display: none; }
  body.quote-active #page-quotes .qgm-pkg-actions .duplicate-manual-package,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-add-package,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-remove-package {
    padding: 0; width: 40px; height: 40px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
  }
  body.quote-active #page-quotes .qgm-pkg-actions .duplicate-manual-package .material-symbols-outlined,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-add-package .material-symbols-outlined,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-remove-package .material-symbols-outlined { font-size: 20px; margin: 0; }
}

/* ═══ Quote pkg-action icons — force-render (override any cascade) ═══ */
@media (max-width: 900px) {
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-btn-label { display: none !important; }
  body.quote-active #page-quotes .qgm-pkg-actions button .material-symbols-outlined {
    display: inline-block !important;
    font-family: "Material Symbols Outlined" !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--mid-primary) !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SETUP — MIDNIGHT THEME (body.setup-active) — reskin, structure intact
   ═══════════════════════════════════════════════════════════════ */
body.setup-active #page-setup { color: var(--mid-text); }
body.setup-active #page-setup .page-heading h1 { color: var(--mid-text); }
body.setup-active #page-setup .page-heading .eyebrow,
body.setup-active #page-setup .eyebrow { color: var(--mid-primary); }

/* Cards / panels */
body.setup-active #page-setup .panel,
body.setup-active #page-setup .setup-section,
body.setup-active #page-setup .webhook-panel,
body.setup-active #page-setup .checklist-panel {
  background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.setup-active #page-setup h2,
body.setup-active #page-setup h3,
body.setup-active #page-setup h4,
body.setup-active #page-setup .panel-heading strong { color: var(--mid-text); }
body.setup-active #page-setup .muted,
body.setup-active #page-setup label > span,
body.setup-active #page-setup p.help,
body.setup-active #page-setup .help,
body.setup-active #page-setup small { color: var(--mid-muted); }
body.setup-active #page-setup .panel-heading { border-color: var(--mid-line); }

/* Form fields */
body.setup-active #page-setup input:not([type="checkbox"]):not([type="radio"]),
body.setup-active #page-setup select,
body.setup-active #page-setup textarea {
  background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important;
}
body.setup-active #page-setup input::placeholder,
body.setup-active #page-setup textarea::placeholder { color: var(--mid-text-3) !important; }
body.setup-active #page-setup input:focus,
body.setup-active #page-setup select:focus,
body.setup-active #page-setup textarea:focus {
  border-color: var(--mid-accent) !important; box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28) !important;
}
body.setup-active #page-setup select option { background: var(--mid-surface-2); color: var(--mid-text); }
body.setup-active #page-setup input[type="checkbox"], body.setup-active #page-setup input[type="radio"] { accent-color: var(--mid-accent); }

/* Buttons */
body.setup-active #page-setup .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
body.setup-active #page-setup .button:hover { background: #2f363a; color: var(--mid-text); }
body.setup-active #page-setup .button .material-symbols-outlined { color: var(--mid-primary); }
body.setup-active #page-setup .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active #page-setup .button.primary:hover { background: var(--mid-primary); border-color: var(--mid-primary); }
body.setup-active #page-setup .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.setup-active #page-setup .button.danger { color: #ff7a70; border-color: rgba(255,69,58,0.4); background: transparent; }

/* Tables (team / catalog) */
body.setup-active #page-setup .table-wrap { border: 1px solid var(--mid-line); border-radius: 12px; overflow: hidden; }
body.setup-active #page-setup table th { color: var(--mid-muted); border-color: var(--mid-line); }
body.setup-active #page-setup table td { color: var(--mid-text); border-color: var(--mid-surface-3); }
body.setup-active #page-setup tbody tr:hover td { background: var(--mid-surface); }

/* Code / system prompt / mono blocks */
body.setup-active #page-setup code,
body.setup-active #page-setup .mono,
body.setup-active #page-setup #systemPrompt {
  background: var(--mid-lowest) !important; color: var(--mid-text-2) !important; border-color: var(--mid-line) !important;
}

/* Misc chips / dividers / nested rows */
body.setup-active #page-setup .pill, body.setup-active #page-setup .tag { background: var(--mid-surface-3); color: var(--mid-text-2); }
body.setup-active #page-setup hr { border-color: var(--mid-line); }
body.setup-active #page-setup .toggle-row, body.setup-active #page-setup .setup-row { border-color: var(--mid-line); }

/* ═══ SETUP — tabbed layout + sticky save footer ═══ */
body.setup-active #page-setup .setup-tabs {
  display: flex; gap: 28px; border-bottom: 1px solid var(--mid-line); margin-bottom: 22px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
body.setup-active #page-setup .setup-tabs::-webkit-scrollbar { display: none; }
body.setup-active #page-setup .setup-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 2px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--mid-muted); font-size: 14px; font-weight: 600; font-family: var(--sans); cursor: pointer; white-space: nowrap;
}
body.setup-active #page-setup .setup-tab .material-symbols-outlined { font-size: 18px; color: inherit; }
body.setup-active #page-setup .setup-tab:hover { color: var(--mid-text-2); }
body.setup-active #page-setup .setup-tab.is-active { color: var(--mid-primary); border-bottom-color: var(--mid-accent); }

.setup-tab-hidden { display: none !important; }
/* Platform-admin-only Setup areas (webhook, admin creds, AI/LLM)
   are hidden for tenant sessions. body.is-tenant is set at boot from auth status.tenantId;
   prod single-tenant never sets it, so everything stays visible there. */
body.is-tenant [data-tenant-hide] { display: none !important; }
/* Main goes full-width when the sidebar is hidden (non-General tabs) */
body.setup-active .setup-layout:has(.setup-sidebar.setup-tab-hidden) { grid-template-columns: 1fr; }

/* Sticky save/discard footer */
body.setup-active #page-setup { padding-bottom: 84px; }
.setup-footer {
  position: fixed; bottom: 0; right: 0; left: 248px; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: rgba(15,20,24,0.94); border-top: 1px solid var(--mid-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.setup-footer-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mid-muted); }
.setup-footer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid-accent); box-shadow: 0 0 8px rgba(56,189,248,0.6); }
.setup-footer-actions { display: flex; gap: 10px; }
body.setup-active .setup-footer .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active .setup-footer .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.setup-active .setup-footer .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }

@media (max-width: 900px) {
  .setup-footer { left: 0; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 12px 16px; }
  body.setup-active #page-setup { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.setup-active #page-setup .setup-footer-status { display: none; }
  body.setup-active #page-setup .setup-footer-actions { width: 100%; }
  body.setup-active #page-setup .setup-footer-actions .button { flex: 1; justify-content: center; }
}

/* ═══ SETUP — top-right actions, dark catalog/toggle/team (kill white bgs) ═══ */
body.setup-active #page-setup .setup-head-actions { display: flex; gap: 10px; justify-content: flex-end; }
body.setup-active #page-setup .setup-head-actions .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active #page-setup .setup-head-actions .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
/* footer removed → reclaim bottom padding */
body.setup-active #page-setup { padding-bottom: 28px; }
@media (max-width: 900px) { body.setup-active #page-setup { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Library — quote catalog editor cards (were white) */
body.setup-active #page-setup .qc-block { background: var(--mid-surface) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .qc-block-title { color: var(--mid-muted) !important; }
body.setup-active #page-setup .qc-svc.cost-card,
body.setup-active #page-setup .qc-evt,
body.setup-active #page-setup .qc-pkg { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .qc-svc-name { color: var(--mid-text); }
body.setup-active #page-setup .qc-margin { color: var(--mid-muted); }
body.setup-active #page-setup .qc-chip { background: var(--mid-base) !important; border-color: var(--mid-line) !important; color: var(--mid-text-2) !important; }
body.setup-active #page-setup .qc-chip:has(input:checked) { background: rgba(56,189,248,0.16) !important; border-color: var(--mid-accent) !important; color: var(--mid-primary) !important; }
body.setup-active #page-setup .qc-svc-top select,
body.setup-active #page-setup .qc-svc input,
body.setup-active #page-setup .qc-svc select { background: var(--mid-base) !important; border-color: var(--mid-line) !important; color: var(--mid-text) !important; }

/* Integrations — checkbox/toggle cards (were cream) */
body.setup-active #page-setup .toggle-row { background: var(--mid-base) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .toggle-row span,
body.setup-active #page-setup .toggle-row strong,
body.setup-active #page-setup .toggle-row b { color: var(--mid-text) !important; }
body.setup-active #page-setup .toggle-row small,
body.setup-active #page-setup .toggle-row .muted { color: var(--mid-muted) !important; }

/* Team — table rows (were light) */
body.setup-active #page-setup .team-table th { color: var(--mid-muted) !important; border-color: var(--mid-line) !important; background: transparent !important; }
body.setup-active #page-setup .team-table td { color: var(--mid-text) !important; border-color: var(--mid-surface-3) !important; background: transparent !important; }
body.setup-active #page-setup .team-table tr:hover td { background: var(--mid-surface) !important; }

/* ═══ SETUP fix pass 2 — the wrappers I missed ═══ */
/* Quote catalog editor lives in TWO .pc-section cards (were white --glass-card) */
body.setup-active #page-setup .pc-section { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; box-shadow: none !important; }
body.setup-active #page-setup .pc-section > h3,
body.setup-active #page-setup .pc-sec-head h3 { color: var(--mid-text) !important; }
body.setup-active #page-setup .pc-check { color: var(--mid-text-2) !important; }
body.setup-active #page-setup .pc-check input { accent-color: var(--mid-accent); }

/* Team table — every surface explicitly dark */
body.setup-active #page-setup .table-wrap { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .team-table,
body.setup-active #page-setup .team-table tbody,
body.setup-active #page-setup .team-table tr { background: transparent !important; }
body.setup-active #page-setup .team-table th { background: var(--mid-surface) !important; color: var(--mid-muted) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .team-table td { background: transparent !important; color: var(--mid-text) !important; border-color: var(--mid-surface-3) !important; }
body.setup-active #page-setup .team-role-select { background: var(--mid-base) !important; color: var(--mid-text) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .status-pill.status-ok { background: #d9ff5e !important; color: #1a2000 !important; font-weight: var(--w-label, 500); }
body.setup-active #page-setup .status-pill.status-muted { background: var(--mid-surface-3) !important; color: var(--mid-muted) !important; }
body.setup-active #page-setup .status-pill.status-warn { background: var(--mid-tertiary) !important; color: #3a2a10 !important; font-weight: var(--w-label, 500); }
body.setup-active #page-setup .team-role-legend { color: var(--mid-muted) !important; }

/* ═══ LIBRARY — Services Catalog + Event Types cards (mockup) ═══ */
body.setup-active #page-setup .pricing-editor { padding: 0; }
.lib-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card { background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 16px; padding: 20px; }
.lib-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lib-card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--mid-text); }
.lib-card-title .material-symbols-outlined { color: var(--mid-primary); }
.lib-card-title .lib-evt-headico { color: var(--mid-tertiary); }
.lib-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--mid-badge); color: #a7b6cc; white-space: nowrap; }
.lib-add-btn .material-symbols-outlined { font-size: 18px; }
.lib-add-btn:hover { filter: brightness(1.12); }
.lib-add-btn.ghost { background: transparent; border: 1px solid var(--mid-line); color: var(--mid-text); }

/* Services table */
.lib-svc-headrow { display: grid; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--mid-line); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted); }
.lib-svc-headrow span:nth-child(n+2) { text-align: right; }
.lib-svc-row { display: grid; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 14px 0; border: none; border-bottom: 1px solid var(--mid-surface-3); background: none; cursor: pointer; }
.lib-svc-row:hover { background: var(--mid-surface); }
.lib-svc-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.lib-svc-sub { font-size: 11.5px; color: var(--mid-muted); display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lib-tag { font-size: 11.5px; padding: 1px 7px; border-radius: 9999px; background: var(--mid-surface-3); color: var(--mid-primary); }
.lib-svc-cost { text-align: right; font-size: 13px; color: var(--mid-text-2); }
.lib-svc-sell { text-align: right; font-size: 14px; font-weight: 700; color: var(--mid-primary); }
.lib-svc-margin { text-align: right; }
.lib-mpill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(56,189,248,0.12); color: var(--mid-primary); }
.lib-empty { color: var(--mid-muted); font-size: 13px; padding: 18px 0; text-align: center; }

/* Payment plan editor (Setup → quote catalog) */
.lib-plan-headrow { display: grid; grid-template-columns: 1fr 76px 150px 96px 34px; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--mid-line); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted); }
.lib-plan-list { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.lib-plan-row { display: grid; grid-template-columns: 1fr 76px 150px 96px 34px; gap: 10px; align-items: center; }
.lib-plan-row input, .lib-plan-row select { background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 8px 10px; font-size: 13px; width: 100%; }
.lib-plan-pct { display: flex; align-items: center; gap: 4px; }
.lib-plan-pct span { color: var(--mid-muted); font-size: 13px; }
.lib-plan-del { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--mid-line); background: var(--mid-surface-3); color: var(--mid-muted); border-radius: 8px; cursor: pointer; }
.lib-plan-del:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
.lib-plan-total { margin-top: 12px; font-size: 13px; color: var(--mid-muted); }
.lib-plan-total.is-warn { color: var(--mid-danger); }

/* Event Types list */
.lib-evt-list { display: flex; flex-direction: column; gap: 12px; }
.lib-evt-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--mid-line); border-radius: 12px; background: var(--mid-surface); cursor: pointer; }
.lib-evt-row:hover { border-color: rgba(255,193,118,0.5); }
.lib-evt-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,193,118,0.12); color: var(--mid-tertiary); }
.lib-evt-main { flex: 1; min-width: 0; }
.lib-evt-name { font-size: 14px; font-weight: 400; color: var(--mid-text); }
.lib-evt-sub { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; }
.lib-evt-edit { color: var(--mid-text-3); font-size: 16px; }
.lib-evt-row:hover .lib-evt-edit { color: var(--mid-text); }

/* ═══ LIBRARY MODAL ═══ */
.lib-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,6,23,0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lib-modal-overlay[hidden] { display: none; }
.lib-modal { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--mid-surface-3); border: 1px solid var(--mid-line); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6); }
.lib-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--mid-line); }
.lib-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--mid-text); }
.lib-modal-x { background: none; border: none; cursor: pointer; color: var(--mid-muted); display: grid; place-items: center; }
.lib-modal-x:hover { color: var(--mid-text); }
.lib-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.lib-field { display: flex; flex-direction: column; gap: 7px; }
.lib-field > span { font-size: 11.5px; color: var(--mid-text-2); }
.lib-field input, .lib-field select, .lib-field textarea { width: 100%; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 9px; padding: 11px 13px; color: var(--mid-text); font-family: var(--sans); font-size: 14px; }
.lib-field input:focus, .lib-field select:focus, .lib-field textarea:focus { outline: none; border-color: var(--mid-accent); box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28); }
.lib-field input::placeholder, .lib-field textarea::placeholder { color: var(--mid-text-3); }
.lib-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lib-sel { position: relative; }
.lib-sel select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.lib-sel .material-symbols-outlined { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--mid-muted); font-size: 20px; }
.lib-price-block { display: flex; flex-direction: column; gap: 14px; }
.lib-price-block[hidden] { display: none; }
.lib-margin-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 11px; background: var(--mid-lowest); border: 1px solid var(--mid-line); }
.lib-margin-label { font-size: 11.5px; color: var(--mid-text-2); display: block; }
.lib-margin-note { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--mid-muted); }
.lib-margin-val { font-size: 22px; font-weight: 700; color: var(--mid-primary); }
.lib-margin-val.neg { color: #ff7a70; }
.lib-evt-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lib-evt-line { display: flex; align-items: center; gap: 8px; }
.lib-evt-line .lib-sel { flex: 1; min-width: 0; }
.lib-evt-line .lib-x { color: var(--mid-muted); }
.lib-line-qty { width: 64px; flex: 0 0 64px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px; color: var(--mid-text); text-align: center; }
.lib-line-del { background: none; border: none; color: var(--mid-muted); cursor: pointer; font-size: 14px; }
.lib-line-del:hover { color: #ff7a70; }
.lib-add-line { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--mid-primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px; }
.lib-add-line .material-symbols-outlined { font-size: 17px; }
.lib-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--mid-line); background: var(--mid-surface-2); }
.lib-foot-spacer { flex: 1; }
.lib-modal-foot .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
.lib-modal-foot .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.lib-btn-del { background: none; border: 1px solid rgba(255,69,58,0.4); color: #ff7a70; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; }

/* ═══ SETUP — match mockup card aesthetic + cyan section titles ═══ */
body.setup-active #page-setup .panel,
body.setup-active #page-setup .setup-section {
  background: var(--mid-surface) !important; border: 1px solid var(--mid-line) !important; border-radius: 16px; padding: 24px;
}
/* Primary-coloured section titles (System Identity / Language Model / …) like the mockup */
body.setup-active #page-setup .setup-section > h2,
body.setup-active #page-setup .setup-section .panel-heading h2 { color: var(--mid-primary) !important; font-size: 20px; font-weight: 600; margin-bottom: 4px; }
body.setup-active #page-setup .setup-section .eyebrow { color: var(--mid-muted) !important; font-size: 11.5px; letter-spacing: 0.06em; }
body.setup-active #page-setup .setup-section h3,
body.setup-active #page-setup .setup-section h4 { color: var(--mid-text) !important; font-size: 13px; font-weight: 600; }

/* Setup Health (checklist) — primary-tinted card like the mockup */
body.setup-active #page-setup .checklist-panel { background: rgba(56,189,248,0.07) !important; border: 1px solid rgba(56,189,248,0.30) !important; }
body.setup-active #page-setup .checklist-panel h2 { color: var(--mid-primary) !important; }
body.setup-active #page-setup .checklist li { color: var(--mid-text-2); }
/* Webhook helper panels stay neutral-dark */
body.setup-active #page-setup .webhook-panel .codebox { background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text-2) !important; }

/* Inputs/selects use surface-container-high like the mockup's fields */
body.setup-active #page-setup input:not([type="checkbox"]):not([type="radio"]),
body.setup-active #page-setup select,
body.setup-active #page-setup textarea { background: var(--mid-surface-3) !important; }
body.setup-active #page-setup #systemPrompt { background: var(--mid-lowest) !important; }

/* Library/AI/Integrations/Team tabs hide the sidebar → main goes full width */
body.setup-active #page-setup .setup-layout.setup-no-sidebar { grid-template-columns: 1fr !important; }

/* ═══ SETUP — bulletproof full-width: sidebar column auto-collapses when hidden ═══ */
@media (min-width: 1101px) {
  body.setup-active #page-setup .setup-layout { grid-template-columns: minmax(0, 1fr) auto !important; }
  body.setup-active #page-setup .setup-sidebar { width: 300px; }
  /* when the sidebar is display:none (non-General tabs) the auto track is 0 → main fills */
}

/* ═══ Swap the + (create) and Gia (✦) FAB positions on all pages ═══ */
.app-sidebar .create-menu { bottom: 94px !important; }
.askgia-bubble { bottom: 24px !important; }
@media (max-width: 768px) {
  .app-sidebar .create-menu { bottom: calc(166px + env(safe-area-inset-bottom)) !important; }
  .askgia-bubble { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ═══ Library modal — consistent typography (fields, line inputs, buttons all 14px) ═══ */
#qcLibModalBox input, #qcLibModalBox select, #qcLibModalBox textarea { font-size: 14px !important; font-family: var(--sans); }
#qcLibModalBox .lib-modal-foot .button { font-size: 14px; }
#qcLibModalBox .lib-field > span { font-size: 11.5px; }
#qcLibModalBox .lib-btn-del { font-size: 14px; }

/* Ask Gia panel — let the thread fill so the composer sits at the bottom (no gap) */
.askgia-panel .askgia-thread { max-height: none !important; }
/* Chat conversation name matches the Leads card name size (15px), not 17px */
body.chat-active .inbox-row-name { font-size: 14px !important; }

/* ═══ Quote — dark contact search-result items (were white) ═══ */
body.quote-active #page-quotes .contact-result-item { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text); }
body.quote-active #page-quotes .contact-result-item:hover { background: var(--mid-surface) !important; border-color: var(--mid-accent) !important; }
body.quote-active #page-quotes .contact-result-item strong { color: var(--mid-text); }
body.quote-active #page-quotes .contact-result-item small { color: var(--mid-muted); }
body.quote-active #page-quotes .contact-result-add strong,
body.quote-active #page-quotes .contact-result-add .material-symbols-outlined { color: var(--mid-accent-ink); }
body.quote-active #page-quotes .contact-results .empty { color: var(--mid-muted); padding: 10px 12px; font-size: 13px; }
body.quote-active #page-quotes .selected-contact-chip { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; }
body.quote-active #page-quotes .selected-contact-chip strong { color: var(--mid-text); }
body.quote-active #page-quotes .selected-contact-chip small { color: var(--mid-muted); }
/* tighten the gap between the selected chip and the deal section */
body.quote-active #page-quotes #quoteDealSection { margin-top: 16px; }

/* ═══ SETUP — Content Drops: legible links + aligned icons ═══ */
body.setup-active #page-setup a { color: var(--mid-primary); }
body.setup-active #page-setup a:hover { color: #c4e7ff; }
body.setup-active #page-setup .content-drop-row { padding: 14px 0; border-bottom: 1px solid var(--mid-surface-3); }
body.setup-active #page-setup .content-drop-row:last-child { border-bottom: none; }
body.setup-active #page-setup .content-drop-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.setup-active #page-setup .content-drop-type { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-muted); }
body.setup-active #page-setup .content-drop-head strong { color: var(--mid-text); font-size: 13px; }
body.setup-active #page-setup .content-drop-toggle { margin-left: auto; }
body.setup-active #page-setup .content-drop-delete { width: 34px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.setup-active #page-setup .content-drop-delete .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
body.setup-active #page-setup .content-drop-delete:hover .material-symbols-outlined { color: #ff7a70; }
body.setup-active #page-setup .content-drop-content { color: var(--mid-text-2); margin: 8px 0; }
body.setup-active #page-setup .content-drop-media { display: inline-block; color: var(--mid-primary) !important; word-break: break-all; font-size: 13px; }
body.setup-active #page-setup .content-drop-media:hover { text-decoration: underline; }

/* ═══ Dashboard chat side-panel — midnight theme + fix X/Take-over overlap ═══ */
#chatDetailContent { background: var(--mid-base); }
#chatDetailContent .chatpanel-head { background: var(--mid-surface) !important; border-bottom: 1px solid var(--mid-line) !important; padding-right: 56px; }
#chatDetailContent .chatpanel-head h2 { color: var(--mid-text); }
#chatDetailContent .chatpanel-head .muted, #chatDetailContent #chatPanelMeta { color: var(--mid-muted); }
#chatDetailContent #chatPanelMessages { background: var(--mid-lowest); }
#chatDetailContent .msg.in .msg-bubble { background: var(--mid-surface-3) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#chatDetailContent .msg.out .msg-bubble { background: var(--mid-accent) !important; color: var(--mid-on-accent) !important; }
#chatDetailContent .msg-meta { color: var(--mid-muted); }
#chatDetailContent .msg-avatar { background: var(--mid-badge); color: var(--mid-primary); }
#chatDetailContent .msg-datesep span { background: var(--mid-surface-3); color: var(--mid-muted); }
/* composer */
#chatDetailContent .inbox-compose { background: var(--mid-surface); border-top: 1px solid var(--mid-line); }
#chatDetailContent .inbox-compose-row textarea { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important; }
#chatDetailContent .inbox-compose-row textarea::placeholder { color: var(--mid-text-3); }
#chatDetailContent .inbox-banner { background: rgba(255,159,10,0.14) !important; border-color: rgba(255,159,10,0.3) !important; color: var(--mid-tertiary) !important; }
/* buttons */
#chatDetailContent .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
#chatDetailContent .button .material-symbols-outlined { color: var(--mid-primary); }
#chatDetailContent .button.primary, #chatDetailContent #chatPanelSend, #chatDetailContent #chatPanelTakeover { background: var(--mid-accent) !important; border: 1px solid var(--mid-accent) !important; color: var(--mid-on-accent) !important; }
#chatDetailContent .button.primary .material-symbols-outlined, #chatDetailContent #chatPanelSend .material-symbols-outlined { color: var(--mid-on-accent); }
#chatDetailContent #chatPanelTakeover.danger { background: transparent !important; color: var(--mid-tertiary) !important; border: 1px solid rgba(255,159,10,0.5) !important; }
#chatDetailContent .detail-close { color: var(--mid-text-2); background: var(--mid-surface-3); border: 1px solid var(--mid-line); z-index: 2; }

/* Chat slide-in card matches the lead/contact drawer (uniform var(--mid-surface-2) chrome) */
#chatDetailContent { background: var(--mid-surface-2) !important; }
#chatDetailContent .chatpanel-head { background: var(--mid-surface-2) !important; }
#chatDetailContent .inbox-compose { background: var(--mid-surface-2) !important; }

/* Chat slide-in: uniform var(--mid-surface-2) like the lead/contact card (no darker message strip) */
#chatDetailContent #chatPanelMessages { background: transparent !important; }

/* ═══ Slide-in drawers (lead / contact / chat) = uniform FLOATING card ═══ */
@media (min-width: 769px) {
  body.dash-active .detail-content {
    height: calc(100dvh - 36px) !important;
    align-self: center;
    margin: 0 18px 0 0;
    border: 1px solid var(--mid-line) !important;
    border-left: 1px solid var(--mid-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 70px -16px rgba(0,0,0,0.6) !important;
  }
}

/* Chat card header — Lead / Contact / Take over on their own row under the name */
#chatDetailContent .chatpanel-head { align-items: flex-start; }
#chatDetailContent .chatpanel-actions { flex-basis: 100%; width: 100%; margin-left: 0 !important; margin-top: 10px; justify-content: flex-start; }

/* Quote — event picker matches the Add Event button height */
body.quote-active #page-quotes .qgm-add-event { align-items: stretch; }
body.quote-active #page-quotes .qgm-event-picker { min-height: 44px; }
body.quote-active #page-quotes .qgm-add-event-btn { min-height: 44px; }

/* ── WhatsApp Cloud API + Templates manager (Setup → Integrations) ─────────── */
.form-grid label.span-2 { grid-column: 1 / -1; }
.wa-cloud-webhook-head { margin-top: 14px; }
#waTemplatesPanel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wa-tpl-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px; }
.wa-tpl-row {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--outline, var(--mid-line));
  border-radius: 12px; background: var(--surface-container, var(--mid-surface-2));
}
.wa-tpl-main { min-width: 0; flex: 1 1 auto; }
.wa-tpl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-tpl-head strong { font-size: 14px; color: var(--text, var(--mid-text)); word-break: break-word; }
.wa-tpl-meta { font-size: 11.5px; color: var(--text-muted, var(--mid-muted)); }
.wa-tpl-body { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2, var(--mid-text-2)); white-space: pre-wrap; word-break: break-word; }
.wa-tpl-actions { display: flex; gap: 8px; flex-shrink: 0; }
.wa-tpl-create { border-top: 1px solid var(--outline, var(--mid-line)); padding-top: 16px; margin-top: 4px; }
.wa-tpl-create h3 { margin: 0 0 12px; font-size: 14px; color: var(--text, var(--mid-text)); }
@media (max-width: 560px) {
  .wa-tpl-row { flex-direction: column; }
  .wa-tpl-actions { width: 100%; }
  #waTemplatesPanel .panel-heading { flex-direction: column; }
}

/* ── Chat 24h-window bar (conversations composer) ──────────────────────────── */
.inbox-window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; margin: 0 0 8px; border-radius: 10px;
  font-size: 13px; line-height: 1.3;
  border: 1px solid var(--outline, var(--mid-line)); background: var(--surface-container, var(--mid-surface-2));
  color: var(--text-2, var(--mid-text-2));
}
.inbox-window-bar .iwb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted, var(--mid-muted)); }
.inbox-window-bar .iwb-text { flex: 1; min-width: 0; }
.inbox-window-bar .iwb-text strong { color: var(--text, var(--mid-text)); }
.inbox-window-bar.is-open { border-color: rgba(48,209,88,0.4); background: rgba(48,209,88,0.08); color: #9fe6b2; }
.inbox-window-bar.is-open .iwb-dot { background: var(--mid-ok, #30D158); --iwb-glow: rgba(48,209,88,0.55); animation: iwbPulse 2s ease-out infinite; }
.inbox-window-bar.is-closed { border-color: rgba(255,193,118,0.40); background: rgba(255,193,118,0.08); color: var(--mid-tertiary, #ffc176); }
.inbox-window-bar.is-closed .iwb-dot { background: var(--mid-tertiary, #ffc176); --iwb-glow: rgba(255,193,118,0.45); animation: iwbPulse 2s ease-out infinite; }
@keyframes iwbPulse {
  0% { box-shadow: 0 0 0 0 var(--iwb-glow, rgba(48,209,88,0.55)); }
  70% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.inbox-thread-who { cursor: pointer; }
.iwb-tpl-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; background: var(--tertiary, var(--mid-tertiary)); color: #3a2a00;
}
.iwb-tpl-btn .inline-icon { font-size: 16px; }
.inbox-compose textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Template picker modal ─────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Midnight tokens (single source of truth for ALL dark UI).
   The app's default :root theme is LIGHT (--surface / --ink / --muted / --bg /
   --panel are light, and only flip dark *inside #page-dashboard*). So body-level
   elements (modals, popovers, overlays) get the LIGHT tokens — that's why a
   dialog using var(--surface) renders cream on the dark app.
   RULE: every dialog / card / popover / overlay uses these ALWAYS-dark --mid-*
   tokens (or the matching hex). Never use var(--surface)/var(--ink)/var(--muted)
   for dark components. See CLAUDE.md.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --mid-base: #0f1418;        /* page base                */
  --mid-surface: #171c20;     /* sunken surface           */
  --mid-surface-2: #1b2024;   /* card                     */
  --mid-surface-3: #252b2e;   /* raised (modals/popovers) */
  --mid-surface-4: #303539;   /* deeper hover / track     */
  --mid-deep: #141a1f;        /* enclosure (leads list)   */
  --mid-badge: #39485a;       /* badge / chip-ish bg      */
  --mid-text-3: #828d96;      /* faint text / icons — AA on cards (4.85:1) */
  --mid-lowest: #0a0f12;      /* inputs / wells           */
  --mid-line: #3e484f;        /* outline                  */
  --mid-text: #dee3e8;        /* primary text             */
  --mid-text-2: #bdc8d1;      /* secondary text           */
  --mid-muted: #87929a;       /* tertiary / hints         */
  --mid-primary: #d9ff5e;     /* accent — house lime      */
  --mid-accent: #d9ff5e;      /* solid accent — house lime */
  --mid-on-accent: #1a2000;   /* ink on lime               */
  --mid-tertiary: #ffc176;    /* warm accent              */
  --mid-danger: #ff7a70; --mid-ok: #7ee29a;
  --mid-shadow: 0 24px 64px -16px rgba(0,0,0,0.6);
  --mid-radius: 16px;
}

/* Standard dark dialog (reference pattern for all popups) */
.tpl-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; }
.tpl-modal[hidden] { display: none; }
.tpl-modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,13,0.66); backdrop-filter: blur(2px); }
.tpl-modal-card {
  position: relative; z-index: 1; width: min(540px, 100%); max-height: 86dvh; overflow-y: auto;
  background: var(--mid-surface-3); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 18px; box-shadow: var(--mid-shadow); padding: 20px;
}
.tpl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tpl-modal-head h3 { margin: 0 0 2px; font-size: 16px; color: var(--mid-text); }
.tpl-modal-card p.muted, .tpl-modal-head p.muted { color: var(--mid-muted) !important; }
.tpl-modal-head .icon-btn { background: none; border: none; color: var(--mid-muted); cursor: pointer; padding: 4px; }

/* ── Support ("Need a hand?") — the app's own field language ─────────────────
   This dialog was raw <input>/<textarea> plus a stock button, so it read as a
   browser form dropped into a designed app. Everything here uses the always-dark
   --mid-* tokens (it renders at body level, where the :root tokens go light) and
   the same field shape as the rest of the modals. */
#supportModal .sup-lede { color: var(--mid-muted); font-size: var(--t-sm); margin: 0 0 16px; line-height: 1.5; }
#supportModal .sup-form { display: flex; flex-direction: column; gap: 14px; }
#supportModal .sup-field { display: flex; flex-direction: column; gap: 6px; }
#supportModal .sup-field > span { font-size: var(--t-sm); font-weight: 600; color: var(--mid-text-2); }
#supportModal .sup-field input,
#supportModal .sup-field textarea,
#supportModal .sup-reply input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); font-family: var(--sans); font-size: var(--t-body);
}
#supportModal .sup-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
#supportModal .sup-field input::placeholder,
#supportModal .sup-field textarea::placeholder,
#supportModal .sup-reply input::placeholder { color: var(--mid-muted); }
#supportModal .sup-field input:focus, #supportModal .sup-field textarea:focus,
#supportModal .sup-reply input:focus { outline: 2px solid var(--mid-accent); outline-offset: -1px; }
#supportModal .sup-actions { display: flex; justify-content: flex-end; }
#supportModal .sup-send {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; border: none;
  background: var(--mid-accent); color: var(--mid-on-accent);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 650;
}
#supportModal .sup-send.ghost {
  background: var(--mid-surface-2); color: var(--mid-text-2); border: 1px solid var(--mid-line);
}
#supportModal .sup-send:hover { filter: brightness(1.05); }
#supportModal .sup-empty { color: var(--mid-muted); font-size: var(--t-sm); margin: 18px 0 0; }
#supportModal .sup-list-head {
  margin: 22px 0 8px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted);
}
#supportModal .sup-thread {
  border: 1px solid var(--mid-line); border-radius: 12px; background: var(--mid-surface-2);
  padding: 10px 12px; margin-top: 8px;
}
#supportModal .sup-thread summary {
  cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--mid-text); list-style: none;
}
#supportModal .sup-thread summary::-webkit-details-marker { display: none; }
#supportModal .sup-thread-subj { font-weight: 600; flex: 1 1 auto; }
#supportModal .sup-thread-when { color: var(--mid-muted); font-size: var(--t-xs, 12px); }
#supportModal .sup-chip {
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650;
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
#supportModal .sup-chip.st-open { background: rgba(142, 213, 255, .18); color: var(--mid-accent-ink); }
#supportModal .sup-chip.st-resolved, #supportModal .sup-chip.st-closed { background: var(--mid-surface-3); color: var(--mid-muted); }
#supportModal .sup-notes { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
#supportModal .sup-note { padding-left: 10px; border-left: 2px solid var(--mid-line); }
#supportModal .sup-note.is-them { border-left-color: var(--mid-accent); }
#supportModal .sup-note-who { color: var(--mid-muted); font-size: 11.5px; }
#supportModal .sup-note-text { color: var(--mid-text-2); font-size: var(--t-sm); line-height: 1.5; }
#supportModal .sup-reply { display: flex; gap: 8px; margin-top: 10px; }
#supportModal .sup-reply input { flex: 1 1 auto; }

/* ── Quote builder: "other deliverables" (a pre-wedding film, a full-length video …) ──
   The three quantity boxes above cover images/albums/reels; this is the rest of the
   studio's catalogue, ticked per package with its own quantity. */
.qgm-dels { margin-top: 12px; border: 1px solid var(--mid-line); border-radius: 12px; background: var(--mid-surface-2); }
.qgm-dels > summary {
  cursor: pointer; padding: 10px 13px; font-size: var(--t-sm); font-weight: 600;
  color: var(--mid-text-2); list-style: none;
}
.qgm-dels > summary::-webkit-details-marker { display: none; }
.qgm-dels[open] > summary { border-bottom: 1px solid var(--mid-line); }
.qgm-dels-list { display: flex; flex-direction: column; }
.qgm-del-row {
  display: grid; grid-template-columns: 20px 1fr 110px; align-items: center; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid var(--mid-line);
}
.qgm-del-row:last-child { border-bottom: none; }
.qgm-del-name { font-size: var(--t-sm); color: var(--mid-text); display: flex; flex-direction: column; }
.qgm-del-name small { color: var(--mid-muted); font-size: 11.5px; }
.qgm-del-qty {
  width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 9px; text-align: center;
  background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); font-size: var(--t-sm);
}
.qgm-del-qty-none { color: var(--mid-muted); font-size: 11.5px; text-align: center; }

/* ── Deliverables: the SAME card, picker and delete button as the event timeline ──
   These were written unscoped while every quote-page rule is scoped to
   `body.quote-active #page-quotes`, so the deliverable rows lost the page's own type
   scale and colours and stacked instead of sitting in a row. Mirror the event rules
   exactly; the unscoped copies keep the deal panel's builder looking right too. */
.qgm-delivs { margin-top: 18px; }
/* The section heading is the same object in both sections — but every rule that styles
   it is scoped to the quote page, so in the deal panel's builder the two headings drifted
   apart. Unscoped copy keeps "Deliverables" identical to "Event timeline" everywhere. */
.qgm-timeline-head { display: flex; align-items: center; gap: 14px; margin: 16px 0 8px; }
.qgm-timeline-head > span {
  font-size: var(--t-micro, 11px); line-height: 16px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: var(--w-label, 600); color: var(--mid-muted); margin: 0;
}
.qgm-del-remove {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; padding: 0; cursor: pointer;
  background: var(--mid-surface); border: 1px solid var(--mid-line); color: #ff8a80;
  display: grid; place-items: center;
}
.qgm-del-remove svg { width: 17px; height: 17px; display: block; stroke: currentColor; }
.qgm-del-remove:hover { background: rgba(255,69,58,0.16); border-color: var(--mid-danger, #FF453A); color: var(--mid-danger, #FF453A); }
/* NO FILL. The event card is a plain row on the page with a divider under it; a filled
   grey slab here made the two read as different kinds of object (owner 2026-08-13). */
.qgm-del-card,
body.quote-active #page-quotes .qgm-del-card {
  display: grid; grid-template-columns: 1fr 130px 34px; align-items: center; gap: 12px;
  padding: 12px 2px; background: transparent; border: 0;
  border-bottom: 1px solid var(--mid-line);
}
.qgm-del-card:last-of-type,
body.quote-active #page-quotes .qgm-del-card:last-of-type { border-bottom: 0; }
.qgm-del-title,
body.quote-active #page-quotes .qgm-del-title { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.qgm-del-hint,
body.quote-active #page-quotes .qgm-del-hint { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; }
.qgm-del-qtyf,
body.quote-active #page-quotes .qgm-del-qtyf { display: block; }
.qgm-del-qtyf input,
body.quote-active #page-quotes .qgm-del-qtyf input {
  width: 100%; box-sizing: border-box; padding: 8px 9px; border-radius: 8px; text-align: center;
  background: var(--mid-base) !important; color: var(--mid-text) !important;
  border: 1px solid var(--mid-line) !important; font-family: var(--sans); font-size: 13px;
}
/* Picker + add button: byte-for-byte the event controls. */
body.quote-active #page-quotes .qgm-del-picker {
  flex: 1; min-width: 0; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important;
  border-radius: 8px; padding: 9px 12px; color: var(--mid-text) !important;
  font-family: var(--sans); font-size: 14px;
}
.qgm-del-picker { font-family: var(--sans); font-size: 14px; }
body.quote-active #page-quotes .qgm-add-del-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--mid-accent); background: rgba(56,189,248,0.12); color: var(--mid-primary);
  font-weight: 700; cursor: pointer; white-space: nowrap; font-size: 14px;
}
body.quote-active #page-quotes .qgm-add-del-btn:hover { background: rgba(56,189,248,0.2); }
body.quote-active #page-quotes .qgm-add-del-btn .material-symbols-outlined { font-size: 18px; }
.tpl-picker-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-pick-row {
  text-align: left; width: 100%; cursor: pointer;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--mid-line);
  background: var(--mid-surface-2); color: var(--mid-text-2);
}
.tpl-pick-row:hover { border-color: var(--mid-primary); background: #20262b; }
.tpl-pick-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-pick-head strong { color: var(--mid-text); font-size: 14px; }
.tpl-pick-body { margin: 5px 0 0; font-size: 13px; line-height: 1.4; color: var(--mid-muted); white-space: pre-wrap; word-break: break-word; }
.tpl-picker-form .tpl-picker-name { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; color: var(--mid-text); }
.tpl-picker-vars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tpl-var-row { display: flex; flex-direction: column; gap: 4px; }
.tpl-var-row span { font-size: 11.5px; color: var(--mid-muted); }
.tpl-var-row input {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--mid-line);
  background: var(--mid-lowest); color: var(--mid-text); font-size: 14px; min-height: 40px;
}
.tpl-var-row input::placeholder { color: var(--mid-muted); }
.tpl-picker-preview-wrap { margin-bottom: 16px; }
.tpl-picker-preview {
  margin-top: 6px; padding: 12px 14px; border-radius: 12px;
  background: rgba(48,209,88,0.10); border: 1px solid rgba(48,209,88,0.35);
  color: var(--mid-text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.tpl-picker-actions { display: flex; justify-content: flex-end; gap: 10px; }
#tplPickerBack { margin-bottom: 6px; }

/* ── Instagram → WhatsApp invite links (Setup → Integrations) ───────────────── */
.invite-form { margin-top: 6px; }
.invite-form #inviteGenerate { margin-top: 4px; }
.invite-result {
  margin: 16px 0; padding: 14px; border-radius: 12px;
  border: 1px solid rgba(48,209,88,0.3); background: rgba(48,209,88,0.07);
}
.invite-result .eyebrow { display: block; margin-bottom: 8px; }
.invite-link-row { display: flex; align-items: center; gap: 10px; }
.invite-link {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--surface-lowest, var(--mid-lowest)); border: 1px solid var(--outline, var(--mid-line));
  color: var(--text, var(--mid-text)); font-size: 13px; word-break: break-all; line-height: 1.4;
}
.invite-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.invite-list-head { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, var(--mid-muted)); margin-bottom: 2px; }
.invite-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--outline, var(--mid-line));
  background: var(--surface-container, var(--mid-surface-2));
}
.invite-row-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-row-main strong { color: var(--text, var(--mid-text)); font-size: 14px; }
.invite-ig { font-size: 11.5px; color: var(--primary, var(--mid-primary)); }
.invite-note { width: 100%; margin: 4px 0 0; font-size: 13px; color: var(--text-muted, var(--mid-muted)); }
.invite-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) {
  .invite-row { flex-direction: column; }
  .invite-row-actions { width: 100%; }
}

/* ── Ask Gia: full-screen overlay on mobile ─────────────────────────────────
   The panel was a bottom-right card (z-index 70), so the bottom nav, the (+)
   create FAB (z-index 72) and the suggestion chips showed through/over it.
   On mobile, make it a true full-screen overlay above EVERYTHING so all page
   content — including the menu bar — sits behind it. */
@media (max-width: 768px) {
  .askgia-panel {
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: 100vw !important; height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
    z-index: 1100 !important;
  }
  .askgia-panel.open { transform: none !important; }
  /* Clear the iOS home indicator under the composer. */
  .askgia-panel .askgia-input { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ── Mobile Setup: show ONLY the Services/Events catalog (edit events on the go) ─
   On phones, Setup collapses to just the Quote-catalog card so it can be used as a
   quick "add/edit event" tool. Everything else (tabs, settings sections, sidebar,
   the settings Discard/Save header) is hidden; the catalog has its own Save. */
@media (max-width: 768px) {
  body.setup-active #page-setup > .page-heading,
  body.setup-active #page-setup #setupTabs,
  body.setup-active #page-setup .setup-sidebar { display: none !important; }
  body.setup-active #page-setup .setup-section { display: none !important; }
  body.setup-active #page-setup #quoteCatalogPanel { display: block !important; }
}

/* ── Quote document modal (in-app View; Slides PDF stays the Download) ──────── */
.qdoc-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qdoc-bg { position: absolute; inset: 0; background: rgba(2,6,12,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qdoc-modal { position: relative; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); overflow: hidden; font-family: var(--sans); }
.qdoc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mid-line); }
.qdoc-h-title { font-size: 16px; font-weight: 700; color: var(--mid-text); }
.qdoc-h-sub { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; }
.qdoc-x { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--mid-surface-3); color: var(--mid-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qdoc-x:hover { color: var(--mid-primary); }
.qdoc-x .material-symbols-outlined { font-size: 20px; }
.qdoc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
.qdoc-body:has(.qd) { padding: 0; }
.qdoc-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--mid-line); }
.qdoc-doc { color: var(--mid-text); }
.qdoc-doc-head { margin-bottom: 16px; }
.qdoc-brand { font-size: 14px; font-weight: 700; color: var(--mid-primary); letter-spacing: 0.02em; }
.qdoc-meta { font-size: 13px; color: var(--mid-text-2); margin-top: 4px; }
.qdoc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qdoc-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid-muted); font-weight: 600; padding: 0 0 8px; border-bottom: 1px solid var(--mid-line); }
.qdoc-table td { padding: 10px 0; border-bottom: 1px solid rgba(62,72,79,0.5); vertical-align: top; }
.qdoc-table th.qdoc-pr, .qdoc-table td.qdoc-pr { text-align: right; white-space: nowrap; }
.qdoc-ev { font-weight: 600; color: var(--mid-text); }
.qdoc-tm { color: var(--mid-text-2); }
.qdoc-adds { font-size: 11.5px; color: var(--mid-tertiary); margin-top: 3px; }
.qdoc-extra td { color: var(--mid-muted); }
.qdoc-total-row td { border-bottom: none; padding-top: 12px; font-weight: 700; font-size: 14px; color: var(--mid-text); }
.qdoc-total-row .qdoc-pr { color: var(--mid-primary); }
.qdoc-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.qdoc-chip { font-size: 11.5px; padding: 4px 10px; border-radius: 9999px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.qdoc-total-big { font-size: 26px; font-weight: 700; color: var(--mid-primary); margin: 6px 0 10px; }
@media (max-width: 600px) { .qdoc-overlay { padding: 0; align-items: flex-end; } .qdoc-modal { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; } }

/* ── Quote document (.qd) — WedFlow-style client document, midnight palette ──── */
.qd { color: var(--mid-text); }
.qd .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
/* Hero band */
.qd-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; background: var(--mid-surface-2); border-bottom: 1px solid var(--mid-line); }
.qd-hero::before { content: ""; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; border-radius: 50%; background: rgba(56,189,248,0.06); filter: blur(40px); pointer-events: none; }
.qd-hero-l, .qd-hero-r { position: relative; z-index: 1; }
.qd-brand { font-size: 30px; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--mid-primary); }
.qd-tag { margin-top: 5px; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mid-text-2); }
.qd-hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.qd-qid { display: inline-block; padding: 4px 12px; border-radius: 9999px; background: rgba(56,189,248,0.12); border: 1px solid rgba(142,213,255,0.3); color: var(--mid-primary); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.qd-dates { font-size: 11.5px; color: var(--mid-text-2); line-height: 1.7; }
.qd-dates strong { color: var(--mid-text); font-weight: 600; }
/* Prepared For */
.qd-prepared { padding: 18px 24px; background: var(--mid-surface); border-bottom: 1px solid var(--mid-line); display: flex; flex-direction: column; gap: 5px; }
.qd-prep-lbl { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mid-primary); }
.qd-prep-name { font-size: 22px; font-weight: 600; color: var(--mid-text); line-height: 1.2; }
.qd-prep-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mid-text-2); }
.qd-prep-row .material-symbols-outlined { font-size: 16px; color: var(--mid-muted); }
/* Stat highlights */
.qd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 24px; background: var(--mid-lowest); border-bottom: 1px solid var(--mid-line); }
.qd-stat { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px; }
.qd-stat-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: rgba(142,213,255,0.10); color: var(--mid-primary); display: flex; align-items: center; justify-content: center; }
.qd-stat-ic .material-symbols-outlined { font-size: 22px; }
.qd-stat-val { font-size: 20px; font-weight: 700; color: var(--mid-text); line-height: 1.1; }
.qd-stat-lbl { font-size: 11.5px; color: var(--mid-text-2); margin-top: 2px; }
/* Line-item table */
.qd-table-wrap { padding: 6px 24px 2px; overflow-x: auto; }
.qd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qd-table th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid-muted); padding: 16px 0 10px; border-bottom: 1px solid var(--mid-line); }
.qd-table th.qd-date, .qd-table td.qd-date { text-align: center; white-space: nowrap; }
.qd-table th.qd-amt, .qd-table td.qd-amt { text-align: right; white-space: nowrap; }
.qd-table td { padding: 14px 0; border-bottom: 1px solid rgba(62,72,79,0.4); vertical-align: top; }
.qd-table tbody tr:last-child td { border-bottom: none; }
.qd-svc-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.qd-svc-desc { font-size: 11.5px; color: var(--mid-text-2); margin-top: 3px; line-height: 1.45; }
.qd-table td.qd-date { color: var(--mid-text); font-size: 13px; padding-left: 12px; padding-right: 12px; }
.qd-table td.qd-amt { color: var(--mid-text); font-weight: 600; }
/* Financial summary (two-column) */
.qd-fin { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mid-line); margin-top: 4px; }
.qd-sched { padding: 20px 24px; background: var(--mid-surface); border-right: 1px solid var(--mid-line); }
.qd-summary { padding: 20px 24px; background: var(--mid-surface-2); }
.qd-fin-h { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mid-primary); margin-bottom: 12px; }
.qd-sched-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; }
.qd-sched-row span { color: var(--mid-text-2); }
.qd-sched-row strong { color: var(--mid-text); font-weight: 600; }
.qd-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.qd-sum-row span:first-child { color: var(--mid-text-2); }
.qd-sum-row span:last-child { color: var(--mid-text); }
.qd-sum-row.qd-disc span { color: #ffb4ab; }
.qd-divider { height: 1px; background: var(--mid-line); margin: 12px 0; }
.qd-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qd-grand span:first-child { font-size: 16px; font-weight: 700; color: var(--mid-text); }
.qd-grand span:last-child { font-size: 16px; font-weight: 700; color: var(--mid-primary); }
/* Footer doc band */
.qd-footdoc { display: flex; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--mid-surface-3); border-top: 1px solid var(--mid-line); }
.qd-terms ul { list-style: disc; padding-left: 18px; margin: 0; }
.qd-terms li { font-size: 11.5px; color: var(--mid-text-2); line-height: 1.5; margin-bottom: 5px; }
.qd-studio { text-align: right; font-size: 11.5px; color: var(--mid-text-2); line-height: 1.6; flex: 0 0 auto; }
.qd-studio strong { display: block; font-size: 14px; font-weight: 600; color: var(--mid-text); margin-bottom: 3px; }
@media (max-width: 600px) {
  .qd-hero { flex-direction: column; gap: 12px; padding: 18px 16px; }
  .qd-hero-r { align-items: flex-start; text-align: left; }
  .qd-prepared { padding: 16px; }
  .qd-stats { grid-template-columns: 1fr; padding: 16px; gap: 10px; }
  .qd-table-wrap { padding: 4px 16px 0; }
  .qd-fin { grid-template-columns: 1fr; }
  .qd-sched { border-right: none; border-bottom: 1px solid var(--mid-line); padding: 18px 16px; }
  .qd-summary { padding: 18px 16px; }
  .qd-footdoc { flex-direction: column; gap: 16px; padding: 18px 16px; }
  .qd-studio { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT THEME. The approved app UI is the "midnight" layout; light mode is that SAME
   UI recoloured by swapping the --mid-* palette below. The *-active classes stay applied
   in both themes (see applyShellClasses in app.js) and every surface is --mid-* token
   driven — so dark stays byte-identical (each token == its original hex in dark) and light
   is a pure value swap. This block also patches the few theme-specific bits not on a token
   (a white-alpha border, a couple of hover shades, faint field outlines). CSS nesting.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] {
  /* SAGE palette — warm bone canvas, olive ink, chartreuse highlight.
     Lime (--lime) is a FILL-ONLY accent: always dark-olive ink on top, never lime text. */
  --mid-base:#edeee4;        /* page / body / content — warm bone */
  --mid-surface:#f7f8f2;     /* sidebar, cards — soft off-white */
  --mid-surface-2:#ffffff;   /* topbar, raised cards, modals */
  --mid-surface-3:#e7e9dc;   /* raised / hover / pipeline dots / table head */
  --mid-surface-4:#dcdfd0;   /* deeper hover / progress tracks */
  --mid-deep:#e3e5d8;        /* list enclosure */
  --mid-badge:#e7ebda;       /* badges / avatars */
  --mid-lowest:#ffffff;      /* input wells */
  --mid-line:#d6d8c9;        /* field outlines (cards/pills go borderless instead) */
  --mid-text:#232920;        /* primary text — deep olive-black */
  --mid-text-2:#4c5345;      /* secondary text */
  --mid-text-3:#646d5c;      /* faint text / icons — AA on bone (4.62:1) */
  --mid-muted:#646d5c;       /* muted sage-grey — AA on bone */
  --mid-primary:#56671f;     /* accent — links, active, values (deep olive, readable) */
  --mid-accent:#56671f;      /* solid accent (buttons) — olive; lime is the spot accent */
  --mid-on-accent:#f2f6da;   /* text on accent */
  --mid-tertiary:#9a6a00;    /* warm accent */
  --mid-danger:#b3422f; --mid-ok: #1f7a37;
  --mid-shadow:0 14px 34px -14px rgba(42,51,37,0.20);
  --lime:#d9ff5e;            /* signature chartreuse — fills only */
  --on-lime:#1a2000;         /* ink on lime */
  --lime-tint:#eef3cf;       /* soft lime wash (hot column, highlights) */

  /* The dark shell points the global --line at a white-alpha (invisible on white). */
  #page-dashboard, body.dash-active { --line: var(--mid-line); }

  /* Hover shades intentionally left off the token conversion (keeps dark pixel-perfect). */
  .compose-chip:hover,
  body.dash-active .nav-item:hover:not(.active),
  .tpl-pick-row:hover { background: var(--mid-surface-3); }

  /* Field outlines — the glass / --qg borders are ~invisible on white. */
  #page-quotes .qg-card input, #page-quotes .qg-card select, #page-quotes .qg-card textarea { border-color: var(--outline-variant, #c0c6d6); }
  :is(.dlp, .lib-field, .lib-modal, .modal-content, .setup-section, .dl-field, .note-form, .task-form) :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { border-color: var(--outline-variant, #c0c6d6); }

  /* Contact cards used a dark slate-glass fill (rgba(30,41,59,…)) → white card + border. */
  body.contacts-active #page-contacts .contact-card { background: var(--mid-surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(28,27,26,0.04); }
  body.contacts-active #page-contacts .contact-card:hover { background: var(--mid-surface-2); box-shadow: 0 10px 24px -14px rgba(28,27,26,0.20); }

  /* Inputs that were filled with a grey surface token → white-with-border (card colour). */
  body.quote-active #page-quotes input:not([type=checkbox]):not([type=radio]),
  body.quote-active #page-quotes select,
  body.quote-active #page-quotes textarea,
  body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
  body.setup-active #page-setup select,
  body.setup-active #page-setup textarea { background: var(--mid-surface-2) !important; }

  /* Setup save-bar used a dark translucent fill. */
  .setup-footer { background: var(--mid-surface-2); }

  /* Quote event card was page-grey → white card (matches the other cards + outline). */
  body.quote-active #page-quotes .qg-event-card { background: var(--mid-surface-2); }

  /* Send-template button: amber tile with dark text. (In light, --mid-tertiary is a dark
     amber, so amber-on-amber read as brown-on-brown.) */
  .iwb-tpl-btn { background: #f3a52b; color: #3a2400; }

  /* 24h-window status bar: text was a light (dark-theme) green/red, illegible on white. */
  .inbox-window-bar.is-open, .inbox-window-bar.is-open .iwb-text strong { color: #15672e; }
  .inbox-window-bar.is-closed, .inbox-window-bar.is-closed .iwb-text strong { color: #8a5a00; }

  /* Quote success buttons (Open PDF / saved) — darker green + a visible border. */
  #page-quotes { --qg-ok-fg: #15672e; }
  #page-quotes .qg-link-primary, #page-quotes .qg-link-sent { border-color: rgba(48,209,88,0.5); }

  /* Status text that used a LIGHT (dark-theme) colour → readable dark variants on white. */
  .nx-pill.good, .nx-score.hot, #page-dashboard .dash-avatar.good,
  .ll-stage.good, .leads-table .ll-stage.good,
  .dlp-q-link-accept, .dlp-q-status-accepted,
  body.leads-active #page-leads .op-pill-quote { color: #15672e !important; }
  /* status-pill.status-ok is solid green with white text now — keep it out of the
     dark-green-text readability list above or the white gets overridden. */
  .nx-pill.warn, .nx-score.cold { color: #8a5a00 !important; }
  .ll-stage.bad, .leads-table .ll-stage.bad,
  .dlp-q-status-rejected, .dlp-status.danger,
  .msg-failed .msg-bubble, .msg-failed .msg-meta,
  .qd-sum-row.qd-disc span,
  body.quote-active #page-quotes .qgm-event-del,
  body.quote-active #page-quotes .qgm-del-remove { color: #b3261e !important; }
  .inbox-ai-inline:hover, body.setup-active #page-setup a:hover { color: #005ab3 !important; }
  .dlp-badge, .lib-add-btn { color: var(--mid-text-2); }
}

/* Mobile bottom-nav pill used a dark glass fill (rgba(27,32,36,…)) → light pill in light theme. */
@media (max-width: 768px) {
  html[data-theme] .app-sidebar {
    background: var(--mid-surface) !important;
    box-shadow: 0 10px 30px -12px rgba(28,27,26,0.22) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — complete form-field audit. ROOT CAUSE: var(--mid-base) is overloaded —
   it is BOTH the page background (stays grey in light) AND the fill of ~15 input rules
   across quote / setup / detail / chat / askgia (must be a WHITE well). Every field
   selector that resolves to a grey token in light is listed here; the html[data-theme]
   prefix raises specificity above each source rule, so every one wins. Result: every
   input/select/textarea is the card colour (white) + outline, app-wide.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] {
  /* Broad sweep: all non-ID-scoped form controls in the shell + detail panels. */
  body.dash-active input:not([type=checkbox]):not([type=radio]),
  body.dash-active select,
  body.dash-active textarea,
  .askgia-panel .askgia-input input,
  .dl-field > input, .dl-field > select, .dl-field > textarea { background: var(--mid-surface-2) !important; border-color: var(--outline-variant, #c0c6d6) !important; }

  /* ID-scoped page field rules (need an ID-level override to win). */
  body.quote-active #page-quotes input:not([type=checkbox]):not([type=radio]),
  body.quote-active #page-quotes select,
  body.quote-active #page-quotes textarea,
  body.quote-active #page-quotes .qgm-field input,
  body.quote-active #page-quotes .qgm-lead-fields .qgm-field input,
  body.quote-active #page-quotes .crm-search-row input,
  body.quote-active #page-quotes .qg-rail-detail select,
  body.quote-active #page-quotes .qg-rail-discount input,
  body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
  body.setup-active #page-setup select,
  body.setup-active #page-setup textarea,
  body.setup-active #page-setup .qc-svc select,
  body.setup-active #page-setup .team-role-select,
  body.chat-active .inbox-compose-row textarea,
  #chatDetailContent .inbox-compose-row textarea,
  #dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #dealDetailContent .dl-field > textarea,
  #contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select, #contactDetailContent .dl-field > textarea { background: var(--mid-surface-2) !important; border-color: var(--outline-variant, #c0c6d6) !important; }

  body.quote-active #page-quotes .qgm-event-head { background: transparent; border-bottom-color: var(--mid-line); }
}

/* ════════════════════════════════════════════════════════════════════════════
   UI POLISH LAYER — motion system, consistency, mobile ergonomics (2026-06)
   Appended last so it wins the cascade in BOTH themes. All motion is
   transform/opacity-only; durations/easings come from the :root tokens.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes uiFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiRiseIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes uiPopIn    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes uiSheetIn  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes uiBarGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes uiBarGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes uiCheckPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes uiRowOut   { to { opacity: 0; transform: translateX(14px); } }
@keyframes uiToastIn  { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes uiSpin     { to { transform: rotate(360deg); } }

/* ── Page transitions — fade only (no transform: pages contain fixed-position
      FABs which a transformed ancestor would re-anchor mid-animation) ── */
.page:not([hidden]) { animation: uiRiseIn var(--dur-2) var(--ease-out); }

/* ── Detail full-pages (deal + contact): content rises in ── */
.detail-fullpage:not([hidden]) .dlp { animation: uiRiseIn var(--dur-3) var(--ease-out); }

/* ── Modals: backdrop fades, card pops ── */
.modal:not([hidden]) { animation: uiFadeIn var(--dur-2) ease; }
.modal:not([hidden]) .modal-content { animation: uiPopIn var(--dur-2) var(--ease-out); }
.tpl-modal:not([hidden]) { animation: uiFadeIn var(--dur-2) ease; }
.tpl-modal:not([hidden]) .tpl-modal-card { animation: uiPopIn var(--dur-2) var(--ease-out); }
.lib-modal-overlay { animation: uiFadeIn var(--dur-2) ease; }
.lib-modal-overlay .lib-modal { animation: uiPopIn var(--dur-2) var(--ease-out); }
.qdoc-overlay .qdoc-bg { animation: uiFadeIn var(--dur-2) ease; }
.qdoc-overlay .qdoc-modal { animation: uiPopIn var(--dur-3) var(--ease-out); }

/* ── Popovers: quick anchored pop ── */
.notif-pop:not([hidden]),
.profile-menu-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: top right; }
.create-menu-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: bottom right; }
.nav-more-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: bottom center; }

/* ── Dashboard: KPIs cascade in, charts grow ── */
.nx-kpi { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.nx-kpi:nth-child(1) { animation-delay: 0ms; }
.nx-kpi:nth-child(2) { animation-delay: 45ms; }
.nx-kpi:nth-child(3) { animation-delay: 90ms; }
.nx-kpi:nth-child(4) { animation-delay: 135ms; }
.nx-kpi:nth-child(5) { animation-delay: 180ms; }
.nx-kpi:nth-child(6) { animation-delay: 225ms; }
.nx-bar-fill { transform-origin: bottom; animation: uiBarGrowY var(--dur-4) var(--ease-out) backwards; }
.nx-bar:nth-child(2) .nx-bar-fill { animation-delay: 30ms; }
.nx-bar:nth-child(4) .nx-bar-fill { animation-delay: 60ms; }
.nx-bar:nth-child(6) .nx-bar-fill { animation-delay: 90ms; }
.nx-bar:nth-child(8) .nx-bar-fill { animation-delay: 120ms; }
.nx-bar:nth-child(10) .nx-bar-fill { animation-delay: 150ms; }
.nx-bar:nth-child(12) .nx-bar-fill { animation-delay: 180ms; }
.nx-funnel-fill { transform-origin: left; animation: uiBarGrowX var(--dur-4) var(--ease-out) backwards; }
.nx-card { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.nx-card:nth-child(2) { animation-delay: 60ms; }
.nx-card:nth-child(3) { animation-delay: 120ms; }
.nx-card:nth-child(4) { animation-delay: 180ms; }

/* ── Contacts grid: staggered entrance (nav-only render, never polled) ── */
.contact-card { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.contact-card:nth-child(2)  { animation-delay: 35ms; }
.contact-card:nth-child(3)  { animation-delay: 70ms; }
.contact-card:nth-child(4)  { animation-delay: 105ms; }
.contact-card:nth-child(5)  { animation-delay: 140ms; }
.contact-card:nth-child(6)  { animation-delay: 175ms; }
.contact-card:nth-child(7)  { animation-delay: 210ms; }
.contact-card:nth-child(8)  { animation-delay: 245ms; }
.contact-card:nth-child(n+9) { animation-delay: 280ms; }

/* ── Buttons: tactile press + visible focus + honest disabled ── */
.button, .topbar-iconbtn, .dlp-icon-btn, .dlp-del-icon, .cc-send-btn, .compose-tool,
.qdoc-x, .askgia-iconbtn, .leads-view-btn, .action-done, .lib-add-btn, .qgm-step-btn {
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.button:active, .topbar-iconbtn:active, .dlp-icon-btn:active, .dlp-del-icon:active,
.cc-send-btn:active, .compose-tool:active, .qdoc-x:active, .askgia-iconbtn:active,
.leads-view-btn:active, .action-done:active, .lib-add-btn:active, .qgm-step-btn:active {
  transform: scale(0.95);
}
/* Global focus-visible BASELINE (zero-specificity :where, so the named rules below
   still override). Was an opt-in allow-list → links, menu items, role=button divs,
   inputs had no visible keyboard focus. This makes every interactive element show one. */
:where(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--mid-accent, #38bdf8);
  outline-offset: 2px;
  border-radius: 4px;
}
.button:focus-visible, .topbar-iconbtn:focus-visible, .dlp-icon-btn:focus-visible,
.dlp-del-icon:focus-visible, .cc-send-btn:focus-visible, .compose-tool:focus-visible,
.qdoc-x:focus-visible, .askgia-iconbtn:focus-visible, .leads-view-btn:focus-visible,
.action-done:focus-visible, .nav-item:focus-visible, .create-fab:focus-visible,
.lib-add-btn:focus-visible, .qgm-step-btn:focus-visible {
  outline: 2px solid var(--mid-accent, #38bdf8);
  outline-offset: 2px;
}
.button:disabled, .topbar-iconbtn:disabled, .dlp-icon-btn:disabled, .cc-send-btn:disabled,
.compose-tool:disabled, .action-done:disabled, .lib-add-btn:disabled, .qgm-step-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── In-flight buttons: spinning progress glyph (replaces frozen hourglass) ── */
.material-symbols-outlined.icon-spin { animation: uiSpin 0.9s linear infinite; }

/* ── Task done: check pops, row slides out (JS adds .is-done then removes) ── */
.action-row.is-done { animation: uiRowOut 0.28s var(--ease-in) forwards; pointer-events: none; }
.action-row.is-done .action-done .material-symbols-outlined {
  animation: uiCheckPop 0.3s var(--ease-spring);
  color: var(--mid-ok, #30D158);
}

/* ── Kanban drag feedback ── */
.kanban-card.kb-dragging { opacity: 0.65; transform: scale(1.03) rotate(0.6deg); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.5); }
.kb-drop { transition: outline-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }

/* ── App toast (body-level; replaces page-embedded banners) ── */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 300;
  max-width: min(480px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--mid-surface-3, #252b2e);
  color: var(--mid-text, #dee3e8);
  border: 1px solid var(--mid-line, #3e484f);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.55);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.45;
  animation: uiToastIn var(--dur-2) var(--ease-out);
}
.app-toast.is-error { border-color: rgba(255, 122, 112, 0.5); color: #ffb4ab; }
.app-toast.is-hiding { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
@media (max-width: 768px) {
  .app-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* above the bottom nav */
}

/* ── Typography normalization: one size per semantic role ── */
.dash-card-head h3, .dlp-card-head h3, .lib-card-title, .pc-section > h3 { font-size: var(--fs-body-lg); font-weight: 600; }
.tpl-modal-head h3, .lib-modal-head h3 { font-size: var(--fs-title3); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-caption); }
/* …and on always-dark surfaces the muted grey must be the dark-theme one */
.tpl-modal-card .muted, .modal-content .muted, .detail-fullpage .muted, .askgia-panel .muted,
.lib-modal .muted, .qdoc-modal .muted, .notif-pop .muted, .create-menu-pop .muted, .nav-more-pop .muted {
  color: var(--mid-muted, #87929a);
}

/* ── Empty states: one consistent look (covers all 11 ad-hoc variants) ── */
.empty, .dash-empty, .kcard-empty, .kanban-empty, .inbox-empty, .contacts-empty,
.lib-empty, .gs-empty, .tasks-cat-empty, .qc-empty, .qgm-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--mid-muted, #87929a);
  animation: uiFadeIn var(--dur-3) ease;
}

/* ── Mobile ergonomics ── */
@media (max-width: 768px) {
  /* iOS zooms any focused input under 16px — keep every field at 16 on phones
     (replaces the removed user-scalable=no hack; also a readability win) */
  input, select, textarea { font-size: 16px !important; }

  /* 40px minimum hit areas on the small controls flagged in the audit */
  .dlp-icon-btn, .dlp-del-icon, .action-done, .dl-close, .leads-view-btn,
  .contact-wa-link, .tpl-modal-head .icon-btn, .dlp-step-dot, .qdoc-x {
    min-width: 40px;
    min-height: 40px;
  }
  .qgm-step-btn { min-width: 38px; min-height: 38px; }
  .button:not(.small) { min-height: 44px; }

  /* Template picker becomes a bottom sheet like every other mobile dialog */
  .tpl-modal { align-items: flex-end; padding: 0; }
  .tpl-modal .tpl-modal-card {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    animation: uiSheetIn var(--dur-3) var(--ease-out);
  }
}

/* ── Reduced motion: collapse all animation to near-zero (not none, so JS
      waiting on animationend still fires); kills the infinite glow loops ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE LIGHT THEME — Phase 1: Leads kanban (light mode only; midnight untouched)
   Borderless surfaces — separation comes from background contrast + soft olive
   shadows, never outlines. Lime = "act on this" (hot leads). Ghost numbers on
   stage headers carry the count as a design element.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ghost count lives in the DOM for both themes but only the light theme shows it. */
.kb-ghost { display: none; }

html[data-theme] body { background: var(--mid-base); }

/* ── Columns: flat bone panels, no border, no glass ── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col {
  background: #f3f4ea;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 18px;
  box-shadow: none;
}
/* Structural (no color) → applies in BOTH themes so the pill shape is identical;
   only the token colours differ between light/dark. */
body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-header {
  position: relative;
  border-bottom: none;
  padding-bottom: 4px;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-title {
  color: #6b7261;
  letter-spacing: 0.07em;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-meta { color: var(--mid-muted); }

/* Ghost stage count — large, translucent, top-right of the header */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kb-ghost {
  display: block;
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(42, 51, 37, 0.10);
  pointer-events: none;
  user-select: none;
}

/* ── Hot lead column: the lime "act now" tint ── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] { background: var(--lime-tint); }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: #5a661c; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kb-ghost { color: rgba(150, 170, 40, 0.45); }

/* ── Cards: white, borderless, soft olive shadow ── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card {
  background: var(--mid-surface-2, #ffffff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card:hover {
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 14px 28px -10px rgba(42,51,37,0.18);
}
html[data-theme] :is(#page-leads, #page-projects) .kanban-card-amount { color: var(--mid-primary); }

/* ── Stage pills (mobile nav) + chips: borderless, olive active, lime hot count ── */
html[data-theme] body.leads-active #page-leads .leads-stage-pill {
  background: var(--mid-surface-2, #ffffff);
  border: none;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  color: var(--mid-text-2);
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill .count {
  background: var(--mid-surface-3);
  color: var(--mid-text-2);
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill.is-active {
  background: #2a3325;
  border: none;
  color: #edeee4;
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill.is-active .count,
html[data-theme] body.leads-active #page-leads .leads-stage-pill[data-stage="Hot lead"] .count {
  background: var(--lime);
  color: var(--on-lime);
}

/* ── Leads list view: borderless white rows to match ── */
html[data-theme] body.leads-active #page-leads .lead-row {
  background: var(--mid-surface-2, #ffffff);
  border: none;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05);
}

/* ── Drag feedback in sage: lime drop target ── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kb-drop {
  outline: 2px dashed rgba(150,170,40,0.6);
  background: var(--lime-tint);
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE LIGHT THEME — Phase 2: Dashboard REBUILD (reference replica)
   The #sageDash layer is a full re-layout rendered from the same payload:
   display greeting → stat chips → summary card w/ segmented barcode chart →
   ghost-number focus cards → schedule rows → goal card w/ textures.
   Hidden in dark (midnight keeps its original dashboard untouched).
   ════════════════════════════════════════════════════════════════════════════ */

.sage-dash { display: none; }

/* Un-gated structure (display/position, no colour) → Sage dashboard shows + old
   nx hides in BOTH themes. Dark gets its colour from the dark token palette. */
body.dash-active .sage-dash { display: block; }
body.dash-active #page-dashboard :is(.nx-kpis, .nx-chart-card, .nx-split) { display: none; }
body.dash-active #page-dashboard .page-heading > div:first-of-type { display: none; }
body.dash-active #page-dashboard .page-heading { justify-content: flex-end; margin-bottom: 0; }

/* The reference typeface — applied in BOTH themes (structure, not colour) so dark
   renders identical metrics to light. (Was light-only → dark fell back to Inter,
   whose taller line-box made dark pills slightly taller. Rebuild step 1.) */
body,
body :is(input, select, textarea, button):not(.material-symbols-outlined) { font-family: var(--sans); }

/* ── Greeting + display heading ── */
.sg-hello { margin: 4px 0 2px; font-size: 14px; color: var(--mid-muted); }
.sg-display {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--mid-text);
}

/* ── Stat chips ── */
.sg-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sg-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px;
  padding: 10px 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--mid-text-2);
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sg-chip b { font-size: 16px; font-weight: 600; color: var(--mid-text); letter-spacing: -0.01em; }
.sg-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18); }
.sg-chip-lime { background: var(--lime); color: #4a5320; }
.sg-chip-lime b { color: var(--on-lime); }

/* ── Layout grid ── */
.sg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; align-items: start; }
.sg-grid > * { min-width: 0; }
.sg-grid > .sg-pipeline { grid-column: 1; }
.sg-grid > .sg-focus { grid-column: 2; grid-row: 1 / span 2; }
.sg-grid > .sg-trend { grid-column: 1; }
.sg-grid > .sg-schedule { grid-column: 1; }
.sg-grid > .sg-goal { grid-column: 2; }
@media (max-width: 900px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-grid > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ── Cards (borderless, near-white on bone) ── */
.sg-card {
  background: var(--sg-surface, #fdfdf8); border-radius: 24px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  animation: uiRiseIn var(--dur-3) var(--ease-out) backwards;
}
.sg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sg-card-head h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--mid-text); }
.sg-open {
  font-size: 16px; color: var(--mid-text-2); cursor: pointer;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mid-surface-3);
}
.sg-pipeline { cursor: pointer; }

/* Big number + legend */
.sg-big-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sg-big { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); line-height: 1.05; }
.sg-big-sub { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; }
.sg-legend { display: grid; grid-template-columns: auto auto; gap: 4px 14px; padding-top: 4px; }
.sg-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mid-text-2); white-space: nowrap; }
/* Legend + barcode are now buttons (click → filter Leads by stage): strip the
   default button chrome and show they're interactive. */
.sg-leg { background: none; border: none; padding: 2px 4px; margin: -2px -4px; border-radius: 7px; cursor: pointer; font-family: inherit; transition: background var(--dur-1) var(--ease); }
.sg-leg:hover { background: rgba(42,51,37,0.06); }
.sg-seg { cursor: pointer; border: none; padding: 0; }
.sg-barcode:hover .sg-seg { opacity: 0.6; }
.sg-barcode .sg-seg:hover { opacity: 1; }
.sg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Segmented barcode chart — the reference's signature texture */
.sg-barcode { display: flex; gap: 3px; height: 58px; margin-top: 16px; overflow: hidden; }
.sg-seg { height: 100%; border-radius: 2px; min-width: 8px; }
.sg-seg-a    { background: repeating-linear-gradient(90deg, #c9cdba 0 2px, transparent 2px 6px); }
.sg-seg-b    { background: repeating-linear-gradient(90deg, #aab89a 0 2px, transparent 2px 6px); }
.sg-seg-c    { background: repeating-linear-gradient(90deg, #e0b25c 0 2px, transparent 2px 6px); }
.sg-seg-d    { background: repeating-linear-gradient(90deg, #9aa68c 0 2px, transparent 2px 6px); }
.sg-seg-lime { background: repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 6px); }
.sg-seg-won  { background: repeating-linear-gradient(90deg, #2a3325 0 2px, transparent 2px 6px); }
.sg-dot.sg-seg-a { background: #c9cdba; } .sg-dot.sg-seg-b { background: #aab89a; }
.sg-dot.sg-seg-c { background: #e0b25c; } .sg-dot.sg-seg-d { background: #9aa68c; }
.sg-dot.sg-seg-lime { background: var(--lime); } .sg-dot.sg-seg-won { background: #2a3325; }
.sg-barcode-labels { display: flex; gap: 3px; margin-top: 6px; overflow: hidden; }
.sg-barcode-labels span { font-size: 11.5px; color: var(--mid-muted); min-width: 8px; }

/* ── Focus cards: big numerals + destinations (Recent Activity replica) ── */
.sg-focus { display: flex; flex-direction: column; gap: 10px; }
.sg-pri {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  position: relative; text-align: left;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 22px; padding: 22px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
  animation: uiRiseIn var(--dur-3) var(--ease-out) backwards;
}
.sg-focus .sg-pri:nth-child(2) { animation-delay: 60ms; }
.sg-focus .sg-pri:nth-child(3) { animation-delay: 120ms; }
.sg-pri:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(42,51,37,0.05), 0 16px 32px -14px rgba(42,51,37,0.22); }
.sg-pri-label { font-size: 13px; line-height: 1.25; color: var(--mid-text-2); }
.sg-pri-num {
  font-size: clamp(44px, 4.6vw, 56px); font-weight: 500; letter-spacing: -0.03em;
  color: #b9bfae; text-align: center; line-height: 1;
}
.sg-pri-dest { font-size: 13px; line-height: 1.25; color: var(--mid-text); text-align: right; }
.sg-pri-stat {
  position: absolute; top: 12px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #5a661c;
}
.sg-pri-stat small { font-size: 11.5px; color: #7c8454; }
.sg-ministripe { width: 22px; height: 12px; background: repeating-linear-gradient(90deg, #aab06a 0 2px, transparent 2px 5px); border-radius: 1px; }
.sg-pri-lime { background: var(--lime); }
.sg-pri-lime .sg-pri-label { color: #5a661c; }
.sg-pri-lime .sg-pri-num { color: #b9cb3f; }
.sg-pri-lime .sg-pri-dest { color: var(--on-lime); }
.sg-pri-grey { background: #d6d9ca; }
.sg-pri-grey .sg-pri-num { color: #b6baa7; }

/* ── Schedule rows (Monthly Tasks replica) ── */
.sg-day { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(42,51,37,0.07); }
.sg-day:first-of-type { border-top: none; padding-top: 0; }
.sg-day-num { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--mid-text); min-width: 44px; line-height: 1.1; }
.sg-day-meta { font-size: 11.5px; color: var(--mid-muted); margin-bottom: 6px; }
.sg-day-evts { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-evt {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mid-surface-3); border: none; border-radius: 9999px;
  padding: 5px 12px; font-family: inherit; font-size: 11.5px; color: var(--mid-text-2); cursor: pointer;
}
.sg-evt:hover { background: var(--mid-surface-4); }
.sg-evt-t { font-weight: 600; color: var(--mid-text); font-size: 11.5px; }
.sg-empty { padding: 18px 0 6px; font-size: 13px; color: var(--mid-muted); }

/* ── Goal card textures (Yearly Revenue Goal replica) ── */
.sg-goal-tiles { display: flex; gap: 10px; margin-top: 16px; }
.sg-tile {
  flex: 1; height: 64px; border-radius: 14px; padding: 10px 14px;
  font-size: 11.5px; color: var(--mid-text-2); display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
}
.sg-tile b { font-size: 16px; font-weight: 600; color: var(--mid-text); }
.sg-tile-stripe { background: repeating-linear-gradient(90deg, rgba(217,236,79,0.55) 0 3px, #f3f5e4 3px 7px); }
.sg-tile-dots { background-color: #eceee0; background-image: radial-gradient(rgba(42,51,37,0.22) 1.2px, transparent 1.4px); background-size: 9px 9px; }

/* Restyle the surviving period filter / refresh to float over the greeting */
html[data-theme] body.dash-active #page-dashboard .dash-period .button {
  background: var(--sg-surface, #fdfdf8); border: none; box-shadow: 0 1px 3px rgba(42,51,37,0.08); border-radius: 9999px;
}

/* ── Sage trend card (leads by day / period — driven by the top-right filter) ── */
.sg-trend-total { font-size: 11.5px; color: var(--mid-muted); }
.sg-cols { display: flex; align-items: flex-end; gap: 5px; height: 110px; overflow: hidden; }
.sg-colwrap { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.sg-col {
  width: 100%; border-radius: 3px; min-height: 4px;
  background: repeating-linear-gradient(90deg, #c2c7b2 0 2px, transparent 2px 5px);
  transform-origin: bottom; animation: uiBarGrowY var(--dur-4) var(--ease-out) backwards;
}
.sg-col.is-top { background: repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 6px); }
.sg-colwrap span { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; }
.sg-colwrap:nth-child(2) .sg-col { animation-delay: 40ms; }
.sg-colwrap:nth-child(4) .sg-col { animation-delay: 80ms; }
.sg-colwrap:nth-child(6) .sg-col { animation-delay: 120ms; }

/* ── Mobile padding / density pass for the sage dashboard ── */
@media (max-width: 768px) {
  html[data-theme] body.dash-active #page-dashboard .page-heading { margin: 0 0 2px; padding: 0; }
  .sg-hello { margin-top: 0; }
  .sg-display { font-size: 30px; margin-bottom: 12px; }
  .sg-chips { gap: 7px; margin-bottom: 12px; }
  .sg-chip { padding: 8px 13px; font-size: 11.5px; }
  .sg-chip b { font-size: 16px; }
  .sg-grid { gap: 10px; }
  .sg-card { padding: 16px; border-radius: 20px; }
  .sg-card-head { margin-bottom: 10px; }
  .sg-pri { padding: 15px 16px; border-radius: 18px; gap: 8px; }
  .sg-pri-num { font-size: 38px; }
  .sg-pri-label, .sg-pri-dest { font-size: 11.5px; }
  .sg-big { font-size: 26px; }
  .sg-barcode { height: 42px; margin-top: 12px; }
  .sg-barcode-labels span { font-size: 11.5px; }
  .sg-legend { grid-template-columns: auto; gap: 3px; }
  .sg-cols { height: 86px; }
  .sg-day-num { font-size: 24px; min-width: 36px; }
  .sg-goal-tiles { margin-top: 12px; }
  .sg-tile { height: 56px; padding: 8px 12px; }
  /* Hide every other trend label when buckets are dense (scoped ranges) */
  .sg-colwrap:nth-child(even) span { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE DASHBOARD v2 — feedback round (overrides earlier sage rules; later wins)
   Independent flex columns (kills the row-coupling gap), distinct stage colors,
   scrollable list cards (collapsible on mobile), restyled filter/refresh.
   ════════════════════════════════════════════════════════════════════════════ */

/* Two INDEPENDENT columns — cards stack with no cross-column row gaps. */
.sg-grid { display: flex; align-items: flex-start; gap: 14px; }
.sg-main { flex: 1.15; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sg-side { flex: 0.85; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sg-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg-display { margin: 2px 0 14px; }

/* ── Distinct stage colors (legend / segments / funnel share these) ──
   Pending = striped stone · Qualified = sage green · Hot = lime ·
   Verbal = amber · Cold = blue-grey · Won = deep olive. */
.sg-seg.sg-st-pending { background: repeating-linear-gradient(90deg, #b9bfae 0 2px, transparent 2px 5px); }
.sg-seg.sg-st-qual    { background: #9dba6e; }
.sg-seg.sg-st-hot     { background: var(--lime); }
.sg-seg.sg-st-verbal  { background: #e8b54a; }
.sg-seg.sg-st-cold    { background: #9fb4bd; }
.sg-dot.sg-st-pending { background: #b9bfae; }
.sg-dot.sg-st-qual    { background: #9dba6e; }
.sg-dot.sg-st-hot     { background: var(--lime); border: 1px solid #b9cb3f; }
.sg-dot.sg-st-verbal  { background: #e8b54a; }
.sg-dot.sg-st-cold    { background: #9fb4bd; }
.sg-leg b { font-weight: 600; color: var(--mid-text); }

/* ── Conversion funnel card ── */
.sg-fun-row { padding: 7px 0; }
.sg-fun-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--mid-text-2); margin-bottom: 5px; }
.sg-fun-head span { flex: 1; }
.sg-fun-head b { font-size: 13px; color: var(--mid-text); }
.sg-fun-conv { font-size: 11.5px; color: var(--mid-muted); }
.sg-fun-track { height: 10px; border-radius: 6px; background: var(--mid-surface-3); overflow: hidden; }
.sg-fun-fill { height: 100%; border-radius: 6px; transform-origin: left; animation: uiBarGrowX var(--dur-4) var(--ease-out) backwards; }
.sg-fun-fill.sg-st-pending { background: #b9bfae; }
.sg-fun-fill.sg-st-qual    { background: #9dba6e; }
.sg-fun-fill.sg-st-hot     { background: var(--lime); }
.sg-fun-fill.sg-st-verbal  { background: #e8b54a; }
.sg-fun-fill.sg-st-cold    { background: #9fb4bd; }
.sg-fun-fill.sg-st-won     { background: #2a3325; }

/* ── List cards (calls/follow-ups + pending quotes) ── */
.sg-listhead {
  width: 100%; background: none; border: none; padding: 0; cursor: default;
  font-family: inherit; text-align: left;
}
.sg-listmeta { display: inline-flex; align-items: center; gap: 6px; }
.sg-listmeta b { font-size: 16px; font-weight: 600; color: var(--mid-text); }
.sg-chev { display: none; font-size: 20px; color: var(--mid-muted); transition: transform var(--dur-2) var(--ease); }
.sg-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
.sg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; cursor: pointer;
  background: rgba(42,51,37,0.04); border-radius: 12px;
  margin-bottom: 8px;   /* gap that survives display:block (mobile + desktop) */
  transition: background var(--dur-1) var(--ease);
}
.sg-row:last-child { margin-bottom: 0; }
.sg-row:hover { background: rgba(42,51,37,0.08); }
.sg-row-ico { font-size: 16px; color: var(--mid-muted); flex: 0 0 auto; }
/* Pattern-driven nudge (from the leak monitor / learnings) — subtle accent. */
.sg-row-nudge { box-shadow: inset 3px 0 0 var(--mid-accent); }
.sg-row-nudge .sg-row-ico { color: var(--mid-accent-ink); }
.sg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-row-main b { font-size: 13px; font-weight: 500; color: var(--mid-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-row-main small { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-row-go { font-size: 16px; color: var(--mid-text-3); }
/* ✓ mark-done button on dashboard task rows — hollow check that fills lime on
   hover/tap. Separate hit target so the rest of the row still opens the deal. */
.sg-done {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; margin-right: -4px;
  border: none; border-radius: 50%; background: transparent;
  color: var(--mid-muted); cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.sg-done .material-symbols-outlined { font-size: 20px; }
.sg-done:hover { color: var(--on-lime, #1a2000); background: var(--lime, #d9ff5e); }
.sg-done:active { transform: scale(0.9); }
.sg-done:disabled { opacity: 0.5; pointer-events: none; }
.sg-row.is-done {
  opacity: 0; transform: translateX(8px); max-height: 0; margin-bottom: 0;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  overflow: hidden; pointer-events: none;
}

/* ── Filter + refresh controls: float beside the Dashboard title, reference style ── */
html[data-theme] body.dash-active #page-dashboard { position: relative; }
html[data-theme] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
}
html[data-theme] body.dash-active #page-dashboard .dash-period .button {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px; min-height: 38px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  right: 0; left: auto; width: min(300px, calc(100vw - 40px));
  padding: 8px;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt:hover { background: var(--mid-surface-3); }
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom { padding: 8px 12px 10px; }
html[data-theme] body.dash-active #page-dashboard .dash-range { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
html[data-theme] body.dash-active #page-dashboard .dash-range-sep { display: none; }
html[data-theme] body.dash-active #page-dashboard .dash-range input {
  width: 100%; background: var(--mid-surface-2, #ffffff); border: 1px solid var(--mid-line); border-radius: 10px;
  min-height: 38px; padding: 6px 10px; font-family: inherit;
}
html[data-theme] body.dash-active #page-dashboard #dashCustomApply {
  background: var(--lime); color: var(--on-lime); border: none; border-radius: 9999px; width: 100%;
}

/* ── Desktop/mobile behavior ── */
@media (min-width: 769px) {
  .sg-listcard .sg-list { display: block; }
}
@media (max-width: 768px) {
  /* single column; side cards interleave naturally after main via DOM order */
  .sg-grid { flex-direction: column; }
  .sg-main, .sg-side { width: 100%; flex: none; }
  /* collapsible list cards */
  .sg-listhead { cursor: pointer; }
  .sg-chev { display: inline-block; }
  .sg-listcard .sg-list { display: none; }
  .sg-listcard.is-open .sg-list { display: block; max-height: 320px; }
  .sg-listcard.is-open .sg-chev { transform: rotate(180deg); }
  .sg-listcard .sg-card-head { margin-bottom: 0; }
  .sg-listcard.is-open .sg-card-head { margin-bottom: 8px; }
  /* controls float right of the (short) Dashboard title */
  html[data-theme] body.dash-active #page-dashboard .page-heading { top: 2px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v3 — pri-style collapsible list cards, heading spacing, content
   flows under a redesigned glass nav pill (shrinks while scrolling), lime glow.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── List-card heads: desktop = compact title row; mobile = hot-leads style ── */
@media (min-width: 769px) {
  .sg-listhead { display: flex; align-items: center; gap: 10px; }
  .sg-listhead .sg-pri-label { display: none; }
  .sg-listhead .sg-pri-dest { order: -1; flex: 1; text-align: left; font-size: 14px; font-weight: 500; color: var(--mid-text); }
  .sg-listhead .sg-pri-dest br { display: none; }
  .sg-listhead .sg-pri-num { font-size: 16px; font-weight: 600; color: var(--mid-text); }
}
@media (max-width: 768px) {
  .sg-listcard { padding: 0; overflow: hidden; }
  .sg-listhead {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 20px 20px;
  }
  .sg-listhead .sg-pri-label { font-size: 13px; line-height: 1.25; color: var(--mid-text-2); text-align: left; }
  .sg-listhead .sg-pri-num { font-size: 42px; font-weight: 500; letter-spacing: -0.03em; color: #b9bfae; text-align: center; line-height: 1; }
  .sg-listhead .sg-pri-dest { font-size: 13px; line-height: 1.25; color: var(--mid-text); text-align: right; }
  .sg-listcard-grey { background: #d6d9ca; }
  .sg-listcard-grey .sg-pri-num { color: #b2b6a3; }
  .sg-listcard-grey .sg-row:hover { background: rgba(255,255,255,0.4); }
  .sg-listcard .sg-list { padding: 0 16px 14px; }
  .sg-listcard.is-open .sg-card-head { margin-bottom: 0; }

  /* ── Heading ↔ pills spacing ── */
  .sg-display { margin: 4px 0 18px; }
  .sg-chips { margin-bottom: 20px; row-gap: 8px; }
}

/* ── Content flows UNDER the floating nav (smaller reserve + glass pill) ── */
@media (max-width: 768px) {
  html[data-theme] .shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Sage glass nav pill — translucent deep olive, content visible through the blur */
  html[data-theme] .app-sidebar {
    background: rgba(42, 51, 37, 0.86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: none !important;
    border-radius: 9999px;
    box-shadow: 0 14px 38px -12px rgba(42, 51, 37, 0.5) !important;
  }
  html[data-theme] .app-sidebar .nav-item { color: #b9c2ab; border-radius: 9999px; }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined { color: inherit; }
  html[data-theme] .app-sidebar .nav-item.active {
    background: var(--lime) !important;
    color: #2a3325 !important;
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) { background: rgba(255,255,255,0.08); color: #e6ebda; }


}

/* ── FAB glow: lime, not blue (light theme) ── */
@keyframes sageFabGlow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(120, 140, 30, 0.55), 0 0 0 0 rgba(217, 236, 79, 0.30); }
  50%      { box-shadow: 0 8px 28px -6px rgba(120, 140, 30, 0.70), 0 0 18px 5px rgba(217, 236, 79, 0.45); }
}
html[data-theme] .create-fab,
html[data-theme] .chat-search-fab { animation: sageFabGlow 3.2s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v4 — feedback round 2
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Content flows under the menu: shrink the reserved bottom band. The old
        96px reserve (with !important at the .shell rule) kept a hard stop above
        the pill — override the VARIABLE instead, which that rule consumes. */
  html[data-theme] { --nav-reserve: calc(78px + env(safe-area-inset-bottom)); }

  /* 2. Scroll-shrink WITHOUT transform: animating inset+height never creates a
        containing block, so the fixed + button stays exactly where it is. */
  .app-sidebar { transition: inset 220ms var(--ease), height 220ms var(--ease); }
  .app-sidebar.nav-shrink { height: 56px; inset: auto 30px calc(19px + env(safe-area-inset-bottom)) 30px; }

  /* 3. Expand chevron: lower-center of BOTH list cards */
  .sg-listhead { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 2px; padding: 18px 20px 10px; }
  .sg-listhead .sg-pri-label { grid-column: 1; grid-row: 1; }
  .sg-listhead .sg-pri-num { grid-column: 2; grid-row: 1; }
  .sg-listhead .sg-pri-dest { grid-column: 3; grid-row: 1; }
  .sg-listhead .sg-chev { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

  /* 4. More breathing room after the page title */
  .sg-display { margin: 6px 0 26px; }

  /* 5. Active nav icon renders FILLED inside the lime circle */
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v5 — equal card heights, proportional nav shrink, true under-flow
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Hot leads / Calls & follow-ups / Quotes: identical collapsed height */
  .sg-pri { min-height: 152px; }
  .sg-listcard:not(.is-open) { min-height: 152px; }
  .sg-listhead { min-height: 152px; align-content: center; }

  /* 2. Content truly flows UNDER the pill: kill the reserved band entirely.
        (The reserve var stays at 78px for inner fixed-height surfaces like the
        chat compose, which must NOT slide under the nav.) */
  html[data-theme] .shell { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  /* …and remove the screen-height container on the Leads board so the page
        scrolls naturally (window scroll) instead of clipping above the menu. */
  html[data-theme] body.leads-active .shell {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; /* board's last card stays reachable above the pill */
  }

  /* 3. Nav selector shrinks in proportion AND shape: the lime disc lives on the
        ICON box (a real circle), and both pill + disc + glyph animate together. */
  html[data-theme] .app-sidebar .nav-item.active { background: transparent !important; }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
    transition: width 220ms var(--ease), height 220ms var(--ease), font-size 220ms var(--ease);
  }
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    background: var(--lime); color: #2a3325;
  }
  html[data-theme] .app-sidebar.nav-shrink .nav-item .material-symbols-outlined {
    width: 38px; height: 38px; font-size: 19px;
  }
  html[data-theme] .app-sidebar .nav-item { background: transparent !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v6 — remove the bounded scroller, 1/3 shorter cards, clean shrink
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* THE container: ".shell" was a fixed-height internal scroller (100dvh − 52px −
     nav-reserve, overflow:auto) that hard-clipped every page right above the menu.
     In light mode the page scrolls the window instead and content flows all the
     way to the bottom of the phone screen, under the frosted pill. */
  /* Pages scroll the window; content passes UNDER the pill mid-scroll, but the
     end-of-scroll padding clears the nav (pill top ≈ 80px + safe) plus a gap so
     the last card is always fully readable above it. */
  html[data-theme] .shell {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }

  /* Cards: 1/3 shorter (152 → 101) across all three */
  .sg-pri { min-height: 101px; padding: 14px 18px; }
  .sg-listcard:not(.is-open) { min-height: 101px; }
  .sg-listhead { min-height: 101px; padding: 10px 20px 8px; }
  .sg-pri-num, .sg-listhead .sg-pri-num { font-size: 34px; }

  /* Nav highlighter: the old indicator was a fixed 48px pill with 8px margins —
     taller than the shrunken 56px bar, so minimizing pushed it out of shape.
     Light mode: icon-only items, zero margins, and the lime disc (on the icon)
     scales in lockstep with the bar. */
  html[data-theme] .app-sidebar .nav-item {
    height: auto;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: 0; /* hides the text label; the disc centers perfectly */
    align-self: center;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v7 — true vertical centering on list cards; chevron at card foot;
   pipeline card no longer navigates (only its corner icon does).
   ════════════════════════════════════════════════════════════════════════════ */
.sg-pipeline { cursor: default; }
.sg-open { border: none; font-family: "Material Symbols Outlined"; cursor: pointer; }
.sg-open:hover { background: var(--mid-surface-4); }

@media (max-width: 768px) {
  /* The chevron leaves the grid: row 1 (label/number/dest) centers EXACTLY like
     the hot-leads card, and the chevron pins near the card's bottom edge. */
  .sg-listhead { position: relative; grid-template-rows: auto; align-content: center; padding: 10px 20px; }
  .sg-listhead .sg-chev {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    grid-area: auto;
  }
  .sg-listcard.is-open .sg-chev { transform: translateX(-50%) rotate(180deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE TOPBAR v8 — frosted bone bar, circular controls, Gia in the topbar,
   + button takes Gia's old floating spot, expanding icon-only search.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] .topbar {
  background: rgba(237, 238, 228, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: none;
  box-shadow: none;
}
html[data-theme] .topbar-iconbtn,
html[data-theme] .profile-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sg-surface, #fdfdf8);
  border: none;
  box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10);
  color: var(--mid-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme] .topbar-iconbtn:hover,
html[data-theme] .profile-dot:hover { background: var(--mid-surface-2, #ffffff); }
/* Gia gets the lime disc — the assistant lives in the topbar now */
html[data-theme] .topbar-gia { background: var(--lime); color: #2a3325; }
html[data-theme] .topbar-gia:hover { background: #e3f25a; }
/* …so the floating Gia bubble retires, and + moves DOWN into its spot */
html[data-theme] .askgia-bubble { display: none !important; }

/* ── Ask Gia panel — match the approved light chat UI (sage surfaces, dark-olive
   outgoing bubble, LIME sparkle avatar + LIME send button). The panel inherits
   --mid-* (sage) for most chrome; these fix the hardcoded blue + olive→lime. ── */
html[data-theme] .askgia-panel .askgia-avatar,
html[data-theme] .askgia-card .askgia-avatar {
  background: var(--lime) !important; color: var(--on-lime) !important;
}
html[data-theme] .askgia-panel .askgia-msg.me {
  background: #2a3325; color: #edeee4;            /* same as chat .msg.out bubble */
}
html[data-theme] .askgia-panel .askgia-msg.gia {
  background: var(--mid-surface-3); color: var(--mid-text);
}
html[data-theme] .askgia-panel .askgia-status,
html[data-theme] .askgia-panel .askgia-tag { color: var(--mid-primary); }
html[data-theme] .askgia-panel .askgia-input .button.primary {
  background: var(--lime); color: var(--on-lime); border: none;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] .askgia-panel .askgia-input .button.primary:hover { background: #e4ff85; }
html[data-theme] .askgia-panel .askgia-input .button.primary .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] .askgia-panel .askgia-chip {
  background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
html[data-theme] .askgia-panel .askgia-chip:hover { background: var(--mid-surface-4); color: var(--mid-text); border-color: var(--mid-line); }
/* Composer field: bone borderless well (beat the app-wide white-well !important). */
html[data-theme] .askgia-panel .askgia-input input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-base) !important; border: 1px solid transparent !important; color: var(--mid-text) !important;
}
html[data-theme] .askgia-panel .askgia-input input:focus {
  outline: none !important; border-color: transparent !important; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Close / new-chat icon buttons → round sage circle, like the quote-doc/modal X.
   `appearance:none` is the key fix for the hover-revert + glow: WITHOUT it Safari
   paints its NATIVE button chrome on hover/focus/active (the "old style" + glow).
   Shape + no-glow + appearance are forced in EVERY interaction state so nothing
   can revert on hover. */
.askgia-iconbtn { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
html[data-theme] .askgia-panel .askgia-iconbtn,
html[data-theme] .askgia-panel .askgia-iconbtn:hover,
html[data-theme] .askgia-panel .askgia-iconbtn:focus,
html[data-theme] .askgia-panel .askgia-iconbtn:focus-visible,
html[data-theme] .askgia-panel .askgia-iconbtn:active {
  -webkit-appearance: none !important; appearance: none !important;
  width: 36px !important; height: 36px !important; border-radius: 50% !important; padding: 0 !important;
  border: none !important; outline: none !important; box-shadow: none !important;
}
html[data-theme] .askgia-panel .askgia-iconbtn { background: var(--mid-surface-3); color: var(--mid-text-2); }
html[data-theme] .askgia-panel .askgia-iconbtn:hover { background: var(--mid-surface-4); color: var(--mid-text); }
/* THE real culprits: #askGiaClose is in the shared close-button group with
   `animation: fabGlow` (styles.css:5808 — the pulsing blue glow that box-shadow:none
   can't kill) and `border-radius: 12px !important` (6302 — the square "old style").
   Override by id (wins on source order) → round circle, glow gone, in every state. */
#askGiaClose, #askGiaClose:hover, #askGiaClose:focus, #askGiaClose:active {
  border-radius: 50% !important;
  animation: none !important;
  box-shadow: none !important;
}
/* Send button → identical to the chat send: lime 44px circle. */
html[data-theme] .askgia-panel .askgia-send {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lime); color: var(--on-lime);
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] .askgia-panel .askgia-send:hover { background: #e4ff85; }
html[data-theme] .askgia-panel .askgia-send .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] .app-sidebar .create-menu { bottom: 24px !important; }
@media (max-width: 768px) {
  html[data-theme] .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ── Search: round icon that expands into the field (desktop + mobile) ── */
html[data-theme] .search-shell {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: var(--sg-surface, #fdfdf8);
  box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10);
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: width 280ms var(--ease), min-width 280ms var(--ease), background 160ms var(--ease);
}
html[data-theme] .search-shell .material-symbols-outlined {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--mid-text-2);
}
html[data-theme] .search-shell input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  opacity: 0;
  padding: 0 14px 0 38px; /* clears the absolutely-positioned magnifier icon */
  transition: opacity 200ms var(--ease) 80ms;
}
html[data-theme] .search-shell input:focus { outline: none; box-shadow: none; }
html[data-theme] .search-shell.is-open {
  width: min(360px, calc(100vw - 200px));
  min-width: 220px;
  background: var(--mid-surface-2, #ffffff);
}
html[data-theme] .search-shell.is-open input { opacity: 1; }
@media (max-width: 768px) {
  html[data-theme] .search-shell.is-open { width: calc(100vw - 188px); min-width: 150px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE v9 — search colors (mobile expand was midnight-dark), desktop full-width
   search, slower/softer nav shrink that holds until back at the top.
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop: the search field is ALWAYS the full pill, no icon-collapse */
@media (min-width: 961px) {
  html[data-theme] .search-shell { width: 340px; min-width: 340px; }
  html[data-theme] .search-shell input { opacity: 1; }
  html[data-theme] .search-shell .material-symbols-outlined { cursor: default; }
}

/* Mobile: the legacy focus-within expansion hardcoded the MIDNIGHT field
   (#252b2e + dark border) — recolor every state to the sage palette. */
@media (max-width: 768px) {
  html[data-theme] body .topbar .search-shell {
    background: var(--sg-surface, #fdfdf8) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10) !important;
    width: 44px !important;
    height: 44px;
    border-radius: 9999px !important;
    transition: width 320ms var(--ease), max-width 320ms var(--ease);
  }
  html[data-theme] body .topbar .search-shell:focus-within,
  html[data-theme] body .topbar .search-shell.is-open {
    width: auto !important;
    max-width: min(78vw, 340px) !important;
    background: var(--mid-surface-2, #ffffff) !important;
    border: none !important;
    box-shadow: 0 2px 12px -2px rgba(42, 51, 37, 0.18) !important;
  }
  html[data-theme] body .topbar .search-shell input {
    color: var(--mid-text) !important;
    -webkit-text-fill-color: var(--mid-text) !important; /* beats any lingering midnight ink rule */
    caret-color: var(--mid-primary) !important;
  }
  html[data-theme] body .topbar .search-shell:focus-within input::placeholder { color: var(--mid-muted) !important; }
  html[data-theme] body .topbar .search-shell .material-symbols-outlined { color: var(--mid-text-2) !important; }

  /* Smoother nav shrink — longer, softer curve; disc + glyph ride the same curve */
  .app-sidebar { transition: inset 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1); }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1), font-size 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Search input ink — all widths, all states (text-fill beats any lingering
   midnight color rule; caret in accent so the cursor is easy to find) */
html[data-theme] .search-shell input {
  color: var(--mid-text) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-primary);
}
html[data-theme] .search-shell input::placeholder {
  color: var(--mid-muted);
  -webkit-text-fill-color: var(--mid-muted);
}

/* Search typed-text color — ID-scoped + literal hex so NOTHING out-specifies it.
   (var(--mid-text) rules above were being beaten / not resolving on mobile; the
   #id selector + !important + a real color is the definitive fix.) */
/* Was hardcoded #232920 for BOTH themes (a light-skin fix that was never
   theme-scoped) — near-black text on the dark pill, so you could barely read
   what you typed. Follows the bar's own text token now. */
html[data-theme] #globalSearch {
  color: var(--shellbar-text, #232920) !important;
  -webkit-text-fill-color: var(--shellbar-text, #232920) !important;
  caret-color: var(--shellbar-text, #56671f) !important;
}
/* The REAL cause of "can't see what I type": the input is opacity:0 until .is-open,
   but iOS expands the field via :focus-within without that class → transparent text.
   Force it visible whenever focused, by ID, so every expansion path is covered. */
html[data-theme] #globalSearch:focus,
html[data-theme] .search-shell:focus-within #globalSearch { opacity: 1 !important; }
html[data-theme] #globalSearch::placeholder {
  color: var(--shellbar-muted, #79816d) !important;
  -webkit-text-fill-color: var(--shellbar-muted, #79816d) !important;
}

/* Search placeholder + input text: smaller, matching the pipeline legend size (~13px) */
html[data-theme] #globalSearch { font-size: 13px; }
html[data-theme] #globalSearch::placeholder { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE BUILDER — SAGE SKIN (light theme only)
   Matches the dashboard's design language: borderless near-white cards on the
   bone canvas with soft sg shadows, the big Schibsted display title, lime as
   the fill-only spot accent (CTA, selected states, focus), bone nested wells.
   Dark theme is untouched — these rules only match html[data-theme].
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page title — same display type as "Dashboard" (hidden in dark: the midnight
   quote page never had a heading and stays byte-identical). */
.qg-sage-head { display: none; }
html[data-theme] body.quote-active .qg-sage-head {
  display: block; max-width: 1240px; margin: 0 auto; padding: 0 28px;
}
html[data-theme] body.quote-active .qg-sage-head .sg-display { margin: 2px 0 18px; }

/* Cards: borderless, dashboard surface + shadow, dashboard radius */
html[data-theme] body.quote-active #page-quotes .qg-card,
html[data-theme] body.quote-active #page-quotes .qgm-pkg {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
/* …except the de-nested package wrapper, which stays chrome-less */
html[data-theme] body.quote-active #page-quotes .qgm-packages-card,
html[data-theme] body.quote-active #page-quotes .qg-card:has(#manualPackageList) {
  background: transparent; box-shadow: none;
}
/* Card heads — sentence case, dashboard sizing; icon picks up olive */
html[data-theme] body.quote-active #page-quotes .qg-card-head h3,
html[data-theme] body.quote-active #page-quotes .qgm-pkg-head h3 {
  font-size: 14px; font-weight: 500; letter-spacing: 0;
}
html[data-theme] body.quote-active #page-quotes .qg-card-head { border-bottom: none; padding-bottom: 0; }

/* Nested event cards: bone wells inside the near-white card, borderless */
html[data-theme] body.quote-active #page-quotes .qgm-event {
  background: var(--mid-base); border: none; border-radius: 16px;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-head {
  background: transparent; border-bottom: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] body.quote-active #page-quotes .qgm-svc-headrow { border-bottom-color: rgba(42,51,37,0.10); }
html[data-theme] body.quote-active #page-quotes .qgm-svc-row { border-bottom-color: rgba(42,51,37,0.07); }
html[data-theme] body.quote-active #page-quotes .qgm-add-event { border-color: var(--mid-line); border-radius: 16px; }

/* Inputs: white wells (design-system rule), olive focus with a soft lime ring */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea,
html[data-theme] body.quote-active #page-quotes .qgm-field input,
html[data-theme] body.quote-active #page-quotes .qgm-del-qtyf input,
html[data-theme] body.quote-active #page-quotes .crm-search-row input,
html[data-theme] body.quote-active #page-quotes .qgm-event-picker,
html[data-theme] body.quote-active #page-quotes .qgm-del-picker,
html[data-theme] body.quote-active #page-quotes .qg-rail-detail select,
html[data-theme] body.quote-active #page-quotes .qg-rail-discount input {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
}
html[data-theme] body.quote-active #page-quotes input:focus,
html[data-theme] body.quote-active #page-quotes select:focus,
html[data-theme] body.quote-active #page-quotes textarea:focus {
  border-color: var(--mid-primary) !important;
  box-shadow: 0 0 0 3px rgba(120,140,30,0.16) !important;
}
/* Event-head selects sit on the tinted strip — keep them white too */
html[data-theme] body.quote-active #page-quotes .qgm-event-type,
html[data-theme] body.quote-active #page-quotes .qgm-event-date {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
}

/* Buttons: borderless soft-sage chips (dashboard treatment) */
html[data-theme] body.quote-active #page-quotes .button {
  background: var(--mid-surface-3); border: none; color: var(--mid-text-2); border-radius: 9999px;
}
html[data-theme] body.quote-active #page-quotes .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-step-btn {
  background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 8px;
}
html[data-theme] body.quote-active #page-quotes .qgm-step-btn:hover { background: var(--lime-tint); border-color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qgm-event-del,
html[data-theme] body.quote-active #page-quotes .qgm-del-remove {
  background: var(--mid-surface-3); border: none;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-del:hover,
html[data-theme] body.quote-active #page-quotes .qgm-del-remove { background: rgba(179,66,47,0.14); color: var(--mid-danger); }
html[data-theme] body.quote-active #page-quotes .qgm-remove-package {
  background: rgba(179,66,47,0.10); border: none; color: var(--mid-danger);
}
html[data-theme] body.quote-active #page-quotes .qgm-remove-package:hover { background: rgba(179,66,47,0.18); }
html[data-theme] body.quote-active #page-quotes .qgm-remove-package .material-symbols-outlined { color: var(--mid-danger); }

/* Lime spot accents — add buttons + discount toggle + selected chips */
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-package {
  background: var(--lime-tint); border: none; color: var(--mid-primary); border-radius: 9999px;
}
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover {
  background: var(--lime); color: var(--on-lime);
}
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover .material-symbols-outlined,
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] body.quote-active #page-quotes .qg-disc-toggle { border: none; background: var(--mid-surface-3); border-radius: 9999px; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt { background: transparent; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt + .qg-disc-opt { border-left: none; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt.is-active { background: var(--lime); color: var(--on-lime); border-radius: 9999px; }
html[data-theme] body.quote-active #page-quotes .qg-event-card.is-selected {
  background: var(--lime-tint); border-color: var(--mid-primary); color: var(--mid-primary);
}
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip { background: var(--mid-lowest); border: 1px solid var(--mid-line); }
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip input { accent-color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qg-toggle input { accent-color: var(--mid-primary); }

/* Live-pricing rail: dashboard card, lime-washed header, olive total */
html[data-theme] body.quote-active #page-quotes .qg-rail {
  background: var(--sg-surface, #fdfdf8); border: none;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-head {
  background: var(--lime-tint); border-bottom: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-label { color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table td { border-bottom-color: rgba(42,51,37,0.07); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td { border-top-color: rgba(42,51,37,0.12); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td.num { color: var(--mid-primary); }

/* Generate CTA — the lime moment (mirrors the dashboard's high-priority tile) */
html[data-theme] body.quote-active #page-quotes .qg-generate {
  background: var(--lime); border: none; color: var(--on-lime);
  font-weight: 600; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
html[data-theme] body.quote-active #page-quotes .qg-generate:hover {
  background: #e4ff85; border: none; box-shadow: 0 12px 26px -10px rgba(120,140,30,0.65);
}
html[data-theme] body.quote-active #page-quotes .qg-generate:active { transform: scale(0.98); }
html[data-theme] body.quote-active #page-quotes .qg-generate .material-symbols-outlined { color: var(--on-lime); }

/* Contact lookup results + selected chip: bone wells, borderless */
html[data-theme] body.quote-active #page-quotes .selected-contact-chip,
html[data-theme] body.quote-active #page-quotes .contact-results {
  background: var(--mid-base); border: none; border-radius: 14px;
}

/* Mobile: match the dashboard's tighter card radius + gutters */
@media (max-width: 768px) {
  html[data-theme] body.quote-active .qg-sage-head { padding: 0 16px; }
  html[data-theme] body.quote-active .qg-sage-head .sg-display { font-size: 30px; margin-bottom: 12px; }
  html[data-theme] body.quote-active #page-quotes .qg-card,
  html[data-theme] body.quote-active #page-quotes .qgm-pkg { border-radius: 20px; }
}

/* ── Sage STRUCTURAL rebuild bits (chips, ghost numbers, pricing card) ────── */

/* Header stat chips (filled live by the pricing preview) */
.qg-chips { margin-bottom: 18px; }
.qg-chip { cursor: default; }

/* Package ghost ordinal — the dashboard focus-card numeral, behind the head */
#page-quotes .qgm-pkg { position: relative; overflow: hidden; }
#page-quotes .qgm-ghost {
  position: absolute; top: -8px; right: 16px;
  font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--mid-text); opacity: 0.07; pointer-events: none; user-select: none;
}
@media (max-width: 768px) { #page-quotes .qgm-ghost { font-size: 68px; top: -4px; right: 12px; } }

/* Live-pricing card body — dashboard goal-card structure */
#page-quotes .qgp-total { margin-top: 2px; }
#page-quotes .qgp-bar { margin: 14px 0 4px; }
#page-quotes .qgp-rows, #page-quotes .qgp-math, #page-quotes .qgp-pkgs { margin-top: 8px; }
#page-quotes .qgp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-top: 1px solid rgba(42,51,37,0.07);
  font-size: 13px;
}
#page-quotes .qgp-rows .qgp-row:first-child { border-top: none; }
#page-quotes .qgp-row-name {
  color: var(--mid-text-2); min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-quotes .qgp-row b { margin-left: auto; font-weight: 600; color: var(--mid-text); white-space: nowrap; }
#page-quotes .qgp-dim .qgp-row-name, #page-quotes .qgp-dim b { color: var(--mid-muted); font-weight: 500; }
#page-quotes .qgp-disc b { color: var(--mid-danger); }
#page-quotes .qg-template-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: var(--mid-radius); }
#page-quotes .qg-template-bar .material-symbols-outlined { font-size: 18px; color: var(--mid-accent-ink); }
#page-quotes .qg-template-bar label { font-size: 13px; color: var(--mid-text-2); white-space: nowrap; }
#page-quotes .qg-template-bar select { margin-left: auto; min-width: 180px; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
#page-quotes .qgp-margin { border-top-style: dashed; }
#page-quotes .qgp-margin .qgp-row-name { color: var(--mid-muted); font-weight: 500; }
#page-quotes .qgp-margin b { color: var(--mid-accent-ink); }
#page-quotes .qgp-margin-note { font-size: 11.5px; opacity: 0.7; }
#page-quotes .qgp-margin-thin b { color: var(--mid-warm, #ffc176); }
#page-quotes .qgp-ord { font-size: 11.5px; font-weight: 600; color: var(--mid-muted); letter-spacing: 0.02em; }
#page-quotes .qgp-math { border-top: 1px dashed rgba(42,51,37,0.14); }
#page-quotes .qgp-pkgs { border-top: 1px dashed rgba(42,51,37,0.14); }

/* Rail head as a dashboard card head (light): plain surface, 15px sentence label */
html[data-theme] body.quote-active #page-quotes .qg-rail-head {
  background: transparent; border-bottom: none; padding: 18px 22px 4px;
}
html[data-theme] body.quote-active #page-quotes .qg-rail-label {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-state { font-size: 11.5px; color: var(--mid-muted); }

/* Dark theme fallbacks: --lime/--on-lime only exist in the light remap, so the
   reused sg primitives need midnight equivalents here (cyan accent family). */
html:not([data-theme]) #page-quotes .sg-seg.sg-st-hot { background: #d9ff5e; }
html:not([data-theme]) #page-quotes .sg-dot.sg-st-hot { background: #d9ff5e; border-color: #b8cc2e; }
html:not([data-theme]) #page-quotes .qgp-row { border-top-color: var(--mid-surface-3, rgba(255,255,255,0.08)); }
html:not([data-theme]) #page-quotes .qgp-math,
html:not([data-theme]) #page-quotes .qgp-pkgs { border-top-color: var(--mid-line, rgba(255,255,255,0.14)); }

/* Dashboard card heads carry no leading icon — drop them in light */
html[data-theme] body.quote-active #page-quotes .qg-card-head > .material-symbols-outlined,
html[data-theme] body.quote-active #page-quotes .qgm-pkg-head h3 > .material-symbols-outlined { display: none; }

/* ═══ QUOTE BUILDER — consistency pass (font / labels / fields / buttons) ═══
   The base qg rules pin font-family: var(--sans) (Inter) with #id specificity,
   which beat the light-theme Schibsted rule — so the page mixed typefaces.
   This layer forces ONE type ramp, sentence-case labels, ONE input style and
   ONE button system across the whole page. Light theme only. */

/* Font — everything on the page, including the var(--sans) holdouts */
html[data-theme] body.quote-active #page-quotes,
html[data-theme] body.quote-active #page-quotes :is(h1, h2, h3, label, input, select, textarea, button, table, td, th, p, span):not(.material-symbols-outlined) {
  font-family: var(--sans);
}
/* Icon spans inside those elements keep the icon font no matter what */
html[data-theme] body.quote-active #page-quotes .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

/* Labels — sentence case, dashboard small-label style (no uppercase/tracking) */
html[data-theme] body.quote-active #page-quotes .qg-card label > span,
html[data-theme] body.quote-active #page-quotes .qgm-field > span,
html[data-theme] body.quote-active #page-quotes .qgm-timeline-head span,
html[data-theme] body.quote-active #page-quotes .qg-cell-label,
html[data-theme] body.quote-active #page-quotes .qgm-svc-headrow span {
  text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 500; color: var(--mid-muted);
}

/* Inputs — ONE field style: white well, sage line, 12px radius, 14px text */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea {
  background: var(--mid-lowest) !important;
  border: 1px solid var(--mid-line) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--mid-text) !important;
  line-height: 1.45;
}
html[data-theme] body.quote-active #page-quotes input::placeholder,
html[data-theme] body.quote-active #page-quotes textarea::placeholder {
  color: var(--mid-text-3) !important; font-size: 13px;
}

/* Buttons — ONE system: 38px pills, 13px/500.
   Neutral = bone chip · Accent (add actions) = lime tint · CTA = lime fill. */
html[data-theme] body.quote-active #page-quotes .button,
html[data-theme] body.quote-active #page-quotes .qgm-add-package,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc,
html[data-theme] body.quote-active #page-quotes .qgm-new-type {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 9999px; border: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
/* Neutral */
html[data-theme] body.quote-active #page-quotes .button,
html[data-theme] body.quote-active #page-quotes .qgm-new-type {
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.quote-active #page-quotes .button:hover,
html[data-theme] body.quote-active #page-quotes .qgm-new-type:hover {
  background: var(--mid-surface-4); color: var(--mid-text); border: none;
}
/* Accent — add actions share the lime-tint chip */
html[data-theme] body.quote-active #page-quotes .qgm-add-package,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc {
  background: var(--lime-tint); color: var(--mid-primary); margin: 0;
  font-weight: 600;
}
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc:hover {
  background: var(--lime); color: var(--on-lime);
}
html[data-theme] body.quote-active #page-quotes .qgm-add-svc { margin: 4px 14px 12px; height: 32px; font-size: 11.5px; }
html[data-theme] body.quote-active #page-quotes :is(.button, .qgm-add-package, .qgm-add-event-btn, .qgm-add-svc, .qgm-new-type) .material-symbols-outlined {
  font-size: 16px; color: inherit;
}
html[data-theme] body.quote-active #page-quotes :is(.button, .qgm-add-package, .qgm-add-event-btn, .qgm-new-type):active { transform: scale(0.97); }
/* CTA — lime pill, matches the chips/dashboard accent exactly */
html[data-theme] body.quote-active #page-quotes .qg-generate {
  height: 48px; border-radius: 9999px; font-size: 14px; font-weight: 600;
}
/* Clear ghost in light theme — inherits the 48px pill above; only colours change. */
html[data-theme] body.quote-active #page-quotes .qg-generate.is-ghost {
  background: transparent; color: var(--mid-muted); border: 1px solid var(--mid-line); box-shadow: none;
}
html[data-theme] body.quote-active #page-quotes .qg-generate.is-ghost:hover { background: var(--mid-surface-3); }
/* Icon-only buttons — quiet circles */
html[data-theme] body.quote-active #page-quotes .qgm-event-del,
html[data-theme] body.quote-active #page-quotes .qgm-remove-package {
  width: 34px; height: 34px; border-radius: 50%; border: none;
}
/* Steppers — small circles, white well like inputs */
html[data-theme] body.quote-active #page-quotes .qgm-step-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qgm-step-btn:hover {
  background: var(--lime-tint); border-color: transparent; color: var(--mid-primary);
}

/* Type sizing harmony with dashboard rows (13px body rows, 600 numbers) */
html[data-theme] body.quote-active #page-quotes .qgm-svc-name { font-size: 13px; color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-svc-price { font-size: 13px; font-weight: 600; color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-step-val { font-size: 13px; font-weight: 600; }
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip { font-size: 13px; border-radius: 9999px; }
html[data-theme] body.quote-active #page-quotes .qg-toggle span,
html[data-theme] body.quote-active #page-quotes .qg-rail-discount-label { font-size: 13px; color: var(--mid-text-2); }

/* ═══ QUOTE BUILDER — alignment, rail overflow, borderless fields ═══ */

/* 1 ▸ Page-name placement: kill the page's OWN gutters/centering so the title
   and cards sit on the exact same shell grid as the Dashboard (36/40 desktop,
   20 mobile — from .shell). */
html[data-theme] body.quote-active #page-quotes { padding: 0 0 48px; }
html[data-theme] body.quote-active #page-quotes .qg-shell { max-width: none; padding: 0; }
html[data-theme] body.quote-active .qg-sage-head { max-width: none; padding: 0; }
html[data-theme] body.quote-active .qg-sage-head .sg-display { margin: 2px 0 14px; }
@media (max-width: 768px) {
  html[data-theme] body.quote-active #page-quotes { padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important; }
  html[data-theme] body.quote-active #page-quotes .qg-shell { padding: 0; }
  html[data-theme] body.quote-active .qg-sage-head { padding: 0; }
  html[data-theme] body.quote-active .qg-sage-head .sg-display { font-size: 30px; margin: 0 0 12px; }
}

/* 2 ▸ Live pricing: never clamp/clip — the card grows with its content and
   ends properly with the footer + rounded corners (desktop sticky kept). */
html[data-theme] body.quote-active #page-quotes .qg-rail {
  max-height: none; overflow: visible;
}
html[data-theme] body.quote-active #page-quotes .qg-rail-body { overflow: visible; padding-bottom: 6px; }
/* Mobile inline card: restore the sage card chrome the generic mobile block
   forces back to bordered/flat. */
@media (max-width: 1100px) {
  html[data-theme] body.quote-active #page-quotes .qg-rail {
    border: none !important; border-radius: 24px !important;
    box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12) !important;
  }
}

/* 3 ▸ Borderless inputs — UNIVERSAL (light theme): definition comes from the
   well contrast, not an outline. Border stays transparent (no layout shift);
   focus keeps the soft lime ring for usability. */
html[data-theme] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] select,
html[data-theme] textarea {
  border-color: transparent !important;
  outline: none;
}
html[data-theme] :is(input, select, textarea):focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(120,140,30,0.18) !important;
}
/* Quote page wells: bone fields on the white cards (like the dashboard's
   surfaces), white fields where they sit on a bone strip (event head). */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea {
  background: var(--mid-base) !important; border-color: transparent !important;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-head :is(input, select),
html[data-theme] body.quote-active #page-quotes .qgm-event :is(input, select) {
  background: var(--mid-lowest) !important; border-color: transparent !important;
}
/* Steppers lose their ring too */
html[data-theme] body.quote-active #page-quotes .qgm-step-btn { border-color: transparent; background: var(--mid-lowest); }

/* ═══ QUOTE BUILDER — rail bottom fix ═══
   overflow:visible stopped the card clipping its children, so the footer's
   opaque block painted over the rounded bottom corners → "chopped" bottom.
   Make the footer transparent with its own bottom radius, soften the divider,
   and style the new empty state. */
html[data-theme] body.quote-active #page-quotes .qg-rail-footer {
  background: transparent;
  border-top: 1px dashed rgba(42,51,37,0.14);
  border-radius: 0 0 24px 24px;
  padding: 16px 22px 24px;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 18px 30px; text-align: center;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty .material-symbols-outlined {
  font-size: 30px; color: var(--mid-text-3);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--mid-base); border-radius: 50%;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty p {
  margin: 0; font-size: 13px; color: var(--mid-muted); max-width: 24ch; line-height: 1.5;
}
/* Dark keeps the old internal-scroll layout; give the empty state a sane look there too */
html:not([data-theme]) #page-quotes .qgp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; }
html:not([data-theme]) #page-quotes .qgp-empty .material-symbols-outlined { font-size: 26px; color: var(--mid-muted, #888); }
html:not([data-theme]) #page-quotes .qgp-empty p { margin: 0; font-size: 13px; color: var(--mid-muted, #888); }

/* ═══ QUOTE BUILDER — dropdowns, per-package pricing blocks ═══ */

/* Selects: same well as every other field + a custom sage chevron (the native
   arrow/border made dropdowns look like a different system). */
html[data-theme] body.quote-active #page-quotes select {
  -webkit-appearance: none; appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%234c5345' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: var(--mid-text) !important;
}
/* …combined with the bone/white well backgrounds set earlier */
html[data-theme] body.quote-active #page-quotes select { background-color: var(--mid-base) !important; }
html[data-theme] body.quote-active #page-quotes .qgm-event select,
html[data-theme] body.quote-active #page-quotes .qgm-event-head select { background-color: var(--mid-lowest) !important; }

/* Per-package pricing blocks in the Live pricing card */
#page-quotes .qgp-pkgcard { margin-top: 14px; }
html[data-theme] body.quote-active #page-quotes .qgp-pkgcard {
  background: var(--mid-base); border-radius: 16px; padding: 12px 14px;
}
#page-quotes .qgp-pkghead {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 8px; font-size: 13px;
}
#page-quotes .qgp-pkghead .qgp-row-name { font-weight: 500; color: var(--mid-text); }
#page-quotes .qgp-pkghead b { margin-left: auto; font-weight: 600; color: var(--mid-text); }
#page-quotes .qgp-pkgcard .qgp-bar { margin: 6px 0 4px; }
#page-quotes .qgp-pkgcard .qgp-row { border-top-color: rgba(42,51,37,0.08); }

/* Per-package big totals (multi-package quotes show one per option) */
#page-quotes .qgp-pkgtotal { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 2px; }
#page-quotes .qgp-multinote { margin: 2px 0 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEADS / KANBAN — full sage treatment (light theme)
   Same structural language as the dashboard: display title + live stat chips,
   action controls floating top-right as white pills, borderless cards with
   the sage type ramp, olive amounts, tinted status pills, lime hot accents.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page head: dashboard pattern exactly ─────────────────────────────────
   Old eyebrow+h1 hidden; actions float top-right; sage title + chips below. */
.sg-leads-head { display: none; }
html[data-theme] body.leads-active .sg-leads-head { display: block; }
html[data-theme] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.leads-active #page-leads { position: relative; }
html[data-theme] body.leads-active #page-leads .page-heading { display: block; margin: 0; padding: 0; background: none; border: none; }
html[data-theme] body.leads-active #page-leads .page-heading > div:first-of-type { display: none; }
html[data-theme] body.leads-active #page-leads .page-actions {
  position: absolute; top: 6px; right: 0; z-index: 6;
  display: flex; gap: 8px; align-items: center;
}
html[data-theme] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }
html[data-theme] body.leads-active #page-leads .sg-chips .sg-chip { cursor: pointer; }
html[data-theme] body.leads-active #page-leads .sg-chip:not([data-stage-chip]) { cursor: default; }

/* ── Action controls: white pills, no borders (dashboard reference style) ── */
html[data-theme] body.leads-active #page-leads .page-actions .button,
html[data-theme] body.leads-active #page-leads .dash-filter-btn {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px; min-height: 38px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
html[data-theme] body.leads-active #page-leads .page-actions .button:hover,
html[data-theme] body.leads-active #page-leads .dash-filter-btn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text);
  box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.leads-active #page-leads .page-actions .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
/* View toggle: white pill track, dark-olive active segment */
html[data-theme] body.leads-active #page-leads .leads-view-toggle {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px; padding: 3px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); display: inline-flex; gap: 2px;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn {
  border: none; background: transparent; border-radius: 9999px;
  width: 34px; height: 32px; display: grid; place-items: center;
  color: var(--mid-text-3); cursor: pointer;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn.is-active {
  background: #2a3325; color: #edeee4;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn.is-active .material-symbols-outlined { color: #edeee4; }
/* Filter/sort popovers: sage sheets */
html[data-theme] body.leads-active #page-leads .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  padding: 8px;
}
html[data-theme] body.leads-active #page-leads .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit; font-size: 13px;
}
html[data-theme] body.leads-active #page-leads .dash-filter-opt:hover { background: var(--mid-surface-3); }

/* ── Board rhythm: dashboard gaps + paddings ───────────────────────────── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-board { gap: 14px; margin-top: 2px; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col { padding: 14px 12px 12px; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-body { gap: 10px; padding: 4px 2px 2px; }

/* ── Column heads: dashboard card-head type (sentence case, 15px/500) ───── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-title {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-text);
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: #4a5320; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-meta {
  font-size: 11.5px; color: var(--mid-muted); margin-top: 1px;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kb-ghost { font-size: 40px; top: -2px; }

/* ── Cards: dashboard row anatomy — 14px/500 name, olive 600 amount,
      12px muted meta, soft 16px radius, sage hover lift ─────────────────── */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card { padding: 13px 14px 12px; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-title {
  font-size: 13px; font-weight: 500; color: var(--mid-text); letter-spacing: 0;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-amount {
  font-size: 13px; font-weight: 600; color: var(--mid-primary); margin-top: 2px;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-events {
  font-size: 11.5px; color: var(--mid-muted); margin-top: 3px;
}
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card-footer { margin-top: 9px; gap: 6px; }

/* Source + status pills: tinted sage chips (no borders) */
html[data-theme] body.leads-active #page-leads .source-pill {
  background: var(--mid-badge); border: none; border-radius: 9999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--mid-text-2); padding: 3px 9px;
}
html[data-theme] body.leads-active #page-leads .op-pill {
  border: none; border-radius: 9999px; font-size: 11.5px; font-weight: 500;
  padding: 3px 9px; letter-spacing: 0.02em;
}
html[data-theme] body.leads-active #page-leads .op-pill-live { background: var(--lime-tint); color: #4a5320; }
html[data-theme] body.leads-active #page-leads .op-pill-live .live-dot { background: #7a8d23; }
html[data-theme] body.leads-active #page-leads .op-pill-quote { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.leads-active #page-leads .op-pill-crm { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* AI score badge in sage temps */
html[data-theme] body.leads-active #page-leads .nx-score { border: none; font-weight: 600; }
html[data-theme] body.leads-active #page-leads .nx-score.hot { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.leads-active #page-leads .nx-score.warm { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.leads-active #page-leads .nx-score.cold { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* Won/Lost edge markers in sage colors */
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card.is-won { border-left: 3px solid #7a8d23; }
html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card.is-lost { border-left: 3px solid var(--mid-danger); }

/* ── Mobile: title rhythm + actions row become a scrollable pill strip ──── */
@media (max-width: 768px) {
  html[data-theme] body.leads-active .sg-leads-head .sg-display { font-size: 30px; margin: 0 0 12px; }
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: static; margin: 0 0 10px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  html[data-theme] body.leads-active #page-leads .page-actions::-webkit-scrollbar { display: none; }
  html[data-theme] body.leads-active #page-leads .sg-chips { gap: 8px; margin-bottom: 14px; }
}

/* ═══ LEADS MOBILE (light) — restore the bounded scroller ═══
   The generic light rule makes .shell height:auto for window scroll, but the
   leads page keeps body overflow:hidden (base ≤900px lock) — so with the new
   sage header in the flex chain NOTHING could scroll. Re-pin the viewport
   chain: shell fixed height → #page-leads flex column → the column BODY is
   the scroller (title + chips + stage pills stay put, cards scroll). */
@media (max-width: 900px) {
  html[data-theme] body.leads-active { overflow: hidden; }
  html[data-theme] body.leads-active .shell {
    height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  html[data-theme] body.leads-active .sg-leads-head { flex: 0 0 auto; }
  html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* last card clears the floating nav pill */
    padding: 4px 2px calc(110px + env(safe-area-inset-bottom));
  }
  html[data-theme] body.leads-active #page-leads .leads-list {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}

/* ═══ LEADS — mobile combined menu + dashboard-exact title rhythm ═══ */

/* The combo control exists only on mobile; the three separate controls only
   on desktop. (Outside light/leads the combo is simply never shown.) */
.sg-combo { display: none; }
@media (max-width: 768px) {
  html[data-theme] body.leads-active #page-leads .sg-combo { display: block; position: relative; }
  html[data-theme] body.leads-active #page-leads .leads-view-toggle,
  html[data-theme] body.leads-active #page-leads #leadsFilter,
  html[data-theme] body.leads-active #page-leads #leadsSort { display: none; }
  /* Refresh: icon only */
  html[data-theme] body.leads-active #page-leads .leads-refresh-label { display: none; }
  html[data-theme] body.leads-active #page-leads #leadsComboBtn { padding: 0 10px 0 12px; }

  /* Title placement = dashboard: compact actions row right-aligned above the
     display title (no full-width scroll strip). */
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: static; display: flex; justify-content: flex-end; gap: 8px;
    margin: 0 0 2px; overflow: visible; padding: 0;
  }
}

/* Combo popover: right-anchored sage sheet holding the accordion cards */
html[data-theme] body.leads-active #page-leads .sg-combo-pop {
  position: absolute; right: 0; top: calc(100% + 8px); left: auto;
  width: min(320px, calc(100vw - 40px));
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  padding: 8px; z-index: 30;
}
/* Accordion cards — bone wells, mutually exclusive (JS), dashboard chevron flip */
.sgc-acc { border-radius: 12px; overflow: hidden; }
.sgc-acc + .sgc-acc { margin-top: 6px; }
html[data-theme] .sgc-acc { background: var(--mid-base); }
.sgc-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
}
html[data-theme] .sgc-head .sgc-label { color: var(--mid-muted); font-weight: 500; }
html[data-theme] .sgc-head .sgc-value {
  margin-left: auto; font-weight: 500; color: var(--mid-text);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme] .sgc-head .sgc-chev {
  font-size: 16px; color: var(--mid-text-3);
  transition: transform var(--dur-2) var(--ease);
}
.sgc-acc.is-open .sgc-chev { transform: rotate(180deg); }
.sgc-body { display: none; padding: 0 6px 6px; }
.sgc-acc.is-open .sgc-body { display: block; }
.sgc-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 10px; border: none; background: none; cursor: pointer;
  border-radius: 9px; font-family: inherit; font-size: 13px; text-align: left;
}
html[data-theme] .sgc-opt { color: var(--mid-text-2); }
html[data-theme] .sgc-opt:hover { background: rgba(255,255,255,0.7); }
html[data-theme] .sgc-opt.is-current { background: var(--mid-surface-2, #ffffff); color: var(--mid-text); font-weight: 500; }
html[data-theme] .sgc-opt .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }

/* ═══ Title → pills rhythm: identical on every sage page ═══
   Dashboard reference: desktop title margin 2px 0 14px; mobile 31px with
   margin 2px 0 12px; chips row margin-bottom 18px on both. */
html[data-theme] body.quote-active .qg-sage-head .sg-display,
html[data-theme] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.quote-active #page-quotes .qg-chips,
html[data-theme] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }
@media (max-width: 768px) {
  html[data-theme] body.quote-active .qg-sage-head .sg-display,
  html[data-theme] body.leads-active .sg-leads-head .sg-display { font-size: 30px; margin: 2px 0 12px; }
  html[data-theme] body.quote-active #page-quotes .qg-chips,
  html[data-theme] body.leads-active #page-leads .sg-chips { gap: 10px; margin-bottom: 18px; }
}

/* ═══ SAGE POLISH — title coordinates, leads chips removed, more-menu,
       topbar breathing room, desktop bottom gap ═══ */

/* 1 ▸ Leads chips OFF — the board needs the vertical space; stage pills and
   column ghosts already carry the counts. Title→stage-pills gap tuned to the
   dashboard's title→chips rhythm. */
html[data-theme] body.leads-active #page-leads .sg-chips { display: none !important; }
@media (max-width: 900px) {
  html[data-theme] body.leads-active #page-leads .leads-stage-nav { padding: 0 2px 12px; }
}

/* 2 ▸ Title coordinates = dashboard. The leads viewport-lock set the shell's
   padding-top to 8px while every other page (incl. dashboard) uses 20px on
   mobile — that's why "Leads" never lined up with "Dashboard". */
@media (max-width: 900px) {
  html[data-theme] body.leads-active .shell { padding-top: 20px !important; }
}

/* 3 ▸ Mobile nav "more" popover (Contacts, …): sage sheet like every menu */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
    box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
    padding: 8px; gap: 2px;
  }
  html[data-theme] .nav-more-pop .more-item {
    border-radius: 10px; color: var(--mid-text-2);
    font-family: inherit; font-size: 13px; font-weight: 500;
  }
  html[data-theme] .nav-more-pop .more-item:hover { background: var(--mid-surface-3); color: var(--mid-text); }
  html[data-theme] .nav-more-pop .more-item .material-symbols-outlined { font-size: 20px; color: var(--mid-text-3); }
}

/* 4 ▸ Topbar: real vertical padding around the circular controls (the frosted
   bar's bottom edge sat flush against the icons). The leads viewport lock
   below compensates for the taller bar. */
@media (max-width: 960px) {
  html[data-theme] .topbar { padding: 8px 20px 12px; min-height: 0; }
  html[data-theme] body.leads-active .shell { height: calc(100dvh - 64px) !important; }
}

/* 5 ▸ Desktop leads: the page kept the global 72px bottom shell padding under
   a viewport-locked board — dead space below the columns. Tighten it. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .shell { padding-bottom: 20px; }
  html[data-theme] body.leads-active :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { padding-bottom: 4px; }
}

/* ═══ FINAL — MOBILE TITLE RHYTHM = DASHBOARD, EXACT VALUES ═══
   The dashboard's mobile spacing is NOT the base 12px: the "breathing room"
   pass sets .sg-display margin 6px 0 26px and .sg-chips margin-bottom 20px
   (row-gap 8px) at ≤768px. Earlier leads/quote overrides pinned 12px with
   higher specificity — 14px tighter than the dashboard, which is the
   inconsistency that kept showing. This block (last in file, same selectors
   as those overrides) sets the dashboard's exact numbers everywhere. */
@media (max-width: 768px) {
  html[data-theme] body.leads-active .sg-leads-head .sg-display,
  html[data-theme] body.quote-active .qg-sage-head .sg-display {
    font-size: 30px; margin: 6px 0 26px;
  }
  html[data-theme] body.quote-active #page-quotes .qg-chips {
    gap: 7px; row-gap: 8px; margin-bottom: 20px;
  }
  /* Leads: the stage pills sit where the dashboard's chips sit — same 26px
     above (title margin), and the row ends 20px before the board like the
     chips' 20px margin. */
  html[data-theme] body.leads-active #page-leads .leads-stage-nav {
    padding: 0 2px 20px;
  }
}

/* ═══ LEADS MOBILE — actions float like the dashboard's ═══
   On the dashboard the period-filter is position:absolute top-right at ALL
   widths, so the title starts at the very top of the content area. Leads had
   the refresh/menu row IN FLOW on mobile — a 40px band pushing the title,
   pills and board down. Float it the same way: everything moves up. */
@media (max-width: 768px) {
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: absolute; top: 6px; right: 0; margin: 0; padding: 0;
    overflow: visible;
  }
}

/* ═══ Mobile "More" menu — EXACT tune-sheet look ═══
   The earlier pass only re-tinted it (old base was already white/rounded, so
   nothing visibly changed). Make it structurally the same as the tune menu:
   sage sheet + bone well rows. */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8) !important; border: none !important;
    border-radius: 18px !important; padding: 8px !important;
    box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35) !important;
    min-width: 220px; gap: 6px;
  }
  html[data-theme] .nav-more-pop .more-item {
    background: var(--mid-base) !important; border-radius: 12px !important;
    padding: 13px 14px !important; gap: 10px !important;
    font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important;
    color: var(--mid-text) !important;
  }
  html[data-theme] .nav-more-pop .more-item:hover,
  html[data-theme] .nav-more-pop .more-item:active {
    background: var(--mid-surface-4) !important; color: var(--mid-text) !important;
  }
  html[data-theme] .nav-more-pop .more-item .material-symbols-outlined {
    font-size: 18px !important; color: var(--mid-text-3) !important;
  }
}

/* ═══ Kanban card quote indicator — small icon, green = sent / red = missing ═══ */
.kanban-card-titlerow { display: flex; align-items: center; gap: 6px; }
.kanban-card-titlerow .kanban-card-title { flex: 1; min-width: 0; }
.kb-quote {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb-quote .material-symbols-outlined { font-size: 14px; }
.kb-quote.is-sent { background: rgba(122,141,35,0.16); color: #5f7a1d; }
.kb-quote.is-missing { background: rgba(179,66,47,0.14); color: #b3422f; }
/* Dark theme equivalents */
html:not([data-theme]) .kb-quote.is-sent { background: rgba(110,231,160,0.16); color: #6ee7a0; }
html:not([data-theme]) .kb-quote.is-missing { background: rgba(255,122,112,0.16); color: #ff7a70; }
/* Live indicator shrinks to just the pulsing dot in the title row */
.kanban-card-titlerow .op-pill-live { padding: 0; background: none; border: none; }

/* ═══ CONTROL PARITY — dashboard buttons/pops + global search = leads ═══ */

/* Dashboard refresh + filter: EXACT leads metrics (38px white pills) */
html[data-theme] body.dash-active #page-dashboard .dash-period .button,
html[data-theme] body.dash-active #page-dashboard .dash-filter-btn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.dash-active #page-dashboard .dash-period .material-symbols-outlined {
  font-size: 17px; color: var(--mid-text-3);
}
/* Mobile: filter goes icon-only like the leads tune button */
@media (max-width: 768px) {
  html[data-theme] body.dash-active #page-dashboard #dashFilterLabel { display: none; }
  html[data-theme] body.dash-active #page-dashboard #dashFilterBtn { padding: 0 10px 0 12px; }
}

/* Dashboard period pop: same type ramp as the leads sheets */
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt {
  font-size: 13px; padding: 9px 12px; font-weight: 500;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.dash-active #page-dashboard .dash-range input {
  font-size: 13px; padding: 9px 12px;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom .button {
  min-height: 36px; border-radius: 9999px; font-size: 13px; font-weight: 600;
  background: var(--lime); color: var(--on-lime); border: none; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Global search results: sage sheet like every other menu */
html[data-theme] .global-search-results {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] .gs-group-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted); padding: 8px 12px 4px;
}
html[data-theme] .gs-opt { border-radius: 10px; padding: 9px 12px; }
html[data-theme] .gs-opt:hover, html[data-theme] .gs-opt.active { background: var(--mid-surface-3); }
html[data-theme] .gs-opt-title { font-size: 13px; font-weight: 500; color: var(--mid-text); }
html[data-theme] .gs-opt-sub { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] .gs-opt-tag {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  background: var(--mid-badge); color: var(--mid-text-2);
  padding: 2px 8px; border-radius: 9999px;
}
html[data-theme] .gs-empty, html[data-theme] .gs-hint { color: var(--mid-muted); font-size: 13px; }

/* ═══ Dashboard controls — glyphs + coordinates EXACTLY like Leads ═══ */
/* The heading was still a GRID (1fr + 280-340px column) positioned absolute —
   that template offset the buttons from the right edge. Flex it like the
   leads actions row: same top 6 / right 0, same 8px gap, at all widths. */
html[data-theme] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; width: auto;
  grid-template-columns: none; gap: 0;
}
html[data-theme] body.dash-active #page-dashboard .dash-period {
  display: flex; gap: 8px; align-items: center; margin: 0; padding: 0;
}
/* Filter glyph: filter_list on desktop (like leads' filter), tune on mobile
   (like leads' combined menu) */
#dashFilterBtn .df-ico-mobile { display: none; }
@media (max-width: 768px) {
  #dashFilterBtn .df-ico-desktop { display: none; }
  #dashFilterBtn .df-ico-mobile { display: inline-flex; }
}

/* Leads refresh: icon-only circle at ALL widths (was icon+text on desktop) */
html[data-theme] body.leads-active #page-leads .leads-refresh-label { display: none; }

/* ═══ LEADS LIST VIEW — sage treatment (light theme) ═══
   Same anatomy as the kanban cards: borderless white rows on the bone
   enclosure, dashboard type ramp, sage stage pills, soft olive shadows. */
html[data-theme] body.leads-active .leads-list {
  background: var(--mid-deep); border-radius: 18px; padding: 10px; gap: 10px;
}
/* Header: white pill bar, sentence case (no uppercase tracking) */
html[data-theme] body.leads-active .lead-rowhead {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 14px; padding: 11px 16px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
  box-shadow: 0 10px 0 0 var(--mid-deep), 0 16px 14px -8px rgba(42,51,37,0.18);
}
/* Rows: borderless white cards with the kanban hover lift */
html[data-theme] body.leads-active .lead-row {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 16px; padding: 13px 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
html[data-theme] body.leads-active .lead-row:hover {
  border: none; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 12px 24px -10px rgba(42,51,37,0.16);
}
/* Type ramp = kanban cards */
html[data-theme] body.leads-active .lr-name .ll-name-link {
  font-size: 13px; font-weight: 500; color: var(--mid-text);
}
html[data-theme] body.leads-active .lr-name .ll-name-link:hover {
  color: var(--mid-primary); text-decoration: none;
}
html[data-theme] body.leads-active .lr-val { font-size: 13px; font-weight: 600; color: var(--mid-primary); }
html[data-theme] body.leads-active .lr-src,
html[data-theme] body.leads-active .lr-time { font-size: 11.5px; color: var(--mid-muted); }
/* Stage pills in sage temperatures */
html[data-theme] body.leads-active .ll-stage { font-weight: 500; font-size: 11.5px; padding: 4px 12px; }
html[data-theme] body.leads-active .ll-stage.good  { background: rgba(122,141,35,0.16); color: #5f7a1d; }
html[data-theme] body.leads-active .ll-stage.bad   { background: rgba(179,66,47,0.12);  color: #b3422f; }
html[data-theme] body.leads-active .ll-stage.hot   { background: var(--lime);           color: var(--on-lime); }
html[data-theme] body.leads-active .ll-stage.info  { background: rgba(157,186,110,0.28); color: #56671f; }
html[data-theme] body.leads-active .ll-stage.muted { background: var(--mid-surface-3);  color: var(--mid-text-2); }
html[data-theme] body.leads-active .ll-stage[data-stage-chip]:hover { filter: none; box-shadow: 0 2px 8px -2px rgba(42,51,37,0.25); }
/* Empty state */
html[data-theme] body.leads-active .leads-list .kanban-empty { color: var(--mid-muted); }

/* List view refinements: header as a PILL, and the grey enclosure tray
   removed — rows float directly on the bone page like the kanban cards. */
html[data-theme] body.leads-active .leads-list {
  background: transparent; padding: 0 2px 10px;
}
html[data-theme] body.leads-active .lead-rowhead {
  border-radius: 9999px; padding: 11px 18px;
  /* the solid strip under the sticky header now matches the PAGE bone,
     since there is no tray behind the rows anymore */
  box-shadow: 0 10px 0 0 var(--mid-base), 0 16px 14px -8px rgba(42,51,37,0.14);
}

/* List rows: 4 columns now (Source dropped); indicators inline with the name
   like the kanban title row. Row width untouched (same full-width grid). */
.lead-rowhead, .lead-row { grid-template-columns: 2.4fr 1.5fr 1fr 1fr; }
.lr-name .op-pill-live { padding: 0; background: none; border: none; flex: 0 0 auto; }
.lr-name .kb-quote { flex: 0 0 auto; }

/* Mobile list rows = kanban cards, exactly: same padding/radius, and the
   name stretches so the live/quote/score indicators sit at the card's right
   edge (like the kanban title row) instead of hugging the name. */
@media (max-width: 900px) {
  html[data-theme] body.leads-active .lead-row {
    border-radius: 18px; padding: 16px; gap: 10px;
  }
  html[data-theme] body.leads-active .lr-name { gap: 6px; }
  html[data-theme] body.leads-active .lr-name .ll-name-link { flex: 1; min-width: 0; }
}

/* ═══ MOBILE BOTTOM CLEARANCE — last card must fully clear the nav pill ═══
   The pill occupies ~100px of the viewport bottom (64px bar + 19px offset +
   safe area). An earlier rule clamped the light shell's end-of-scroll padding
   to 20px, so the final card on every window-scrolled page ended underneath
   the pill. Restore a clearance that shows the whole last card. */
@media (max-width: 768px) {
  html[data-theme] .shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  /* Leads keeps its bounded scroller (shell padding stays 0) — the clearance
     lives INSIDE the scrolling column/list instead. */
  html[data-theme] body.leads-active .shell { padding-bottom: 0 !important; }
  html[data-theme] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-body {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
  html[data-theme] body.leads-active #page-leads .leads-list {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
}

/* ═══ List header = kanban stage-header box (desktop) ═══
   Same box as the column headers: soft surface, hairline, 12px radius,
   10/14 padding, 14px/500 olive labels. The "second grey box" was the old
   masking trick — a hard 10px offset shadow that rendered as a second pill
   behind the header; replaced with an invisible page-bone strip (::after)
   that still hides rows sliding under the sticky header. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .lead-rowhead {
    background: var(--mid-surface); border: 1px solid var(--mid-line);
    border-radius: 12px; padding: 10px 14px;
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--mid-text);
    box-shadow: none;
  }
  html[data-theme] body.leads-active .lead-rowhead::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -11px; height: 11px;
    background: var(--mid-base);
  }
}

/* ═══ List header v2 — full-bleed sticky footprint ═══
   Previous approach floated a rounded pill over the rows: scrolled cards
   peeked out under its corners, and the bone masking strip painted over the
   white card read as a grey line. Now the header element itself is a SQUARE
   page-bone block spanning the full row width (rows scrolling under it are
   completely hidden, corners included), and the kanban-style surface box is
   drawn INSIDE via a pseudo-element. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .lead-rowhead {
    position: sticky; top: 0; z-index: 5;
    background: var(--mid-base);
    border: none; border-radius: 0; box-shadow: none;
    padding: 11px 14px 21px;       /* bottom 21 = 11 + the 10px row gap */
  }
  html[data-theme] body.leads-active .lead-rowhead::before {
    content: ""; position: absolute; inset: 0 0 10px 0; z-index: 0;
    background: var(--mid-surface);
    border: 1px solid var(--mid-line); border-radius: 12px;
  }
  html[data-theme] body.leads-active .lead-rowhead::after { content: none; }
  html[data-theme] body.leads-active .lead-rowhead > span { position: relative; z-index: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACTS — full sage treatment (light theme)
   Same structure as Dashboard/Leads: display title (+ meta), controls floating
   top-right as white pills, borderless white cards with the sage type ramp.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head — dashboard/leads pattern exactly */
.sg-contacts-head { display: none; }
html[data-theme] body.contacts-active .sg-contacts-head { display: block; }
html[data-theme] body.contacts-active .sg-contacts-head .sg-display { margin: 2px 0 6px; }
html[data-theme] body.contacts-active .sg-contacts-head .sg-meta {
  margin: 0 0 18px; font-size: 13px; color: var(--mid-muted);
}
html[data-theme] body.contacts-active #page-contacts { position: relative; }
html[data-theme] body.contacts-active #page-contacts .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.contacts-active #page-contacts .page-heading > div:first-of-type { display: none; }

/* Filter control + popover: identical to leads */
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
html[data-theme] body.contacts-active #page-contacts .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit; font-size: 13px; font-weight: 500;
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-opt:hover { background: var(--mid-surface-3); }
@media (max-width: 768px) {
  html[data-theme] body.contacts-active #page-contacts #contactsFilterLabel { display: none; }
  html[data-theme] body.contacts-active #page-contacts .dash-filter-btn { padding: 0 10px 0 12px; }
  html[data-theme] body.contacts-active .sg-contacts-head .sg-display { font-size: 30px; margin: 6px 0 6px; }
  html[data-theme] body.contacts-active .sg-contacts-head .sg-meta { margin-bottom: 20px; }
}

/* Cards: borderless white, sage shadow + hover lift (kanban-card language) */
html[data-theme] body.contacts-active #page-contacts .contact-card {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
html[data-theme] body.contacts-active #page-contacts .contact-card:hover {
  background: var(--mid-surface-2, #ffffff); border: none; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 14px 28px -10px rgba(42,51,37,0.18);
}
html[data-theme] body.contacts-active #page-contacts .contact-avatar {
  background: var(--mid-badge); color: var(--mid-primary); font-weight: 600;
}
html[data-theme] body.contacts-active #page-contacts .contact-name {
  font-size: 14px; font-weight: 500; color: var(--mid-text); letter-spacing: 0;
}
html[data-theme] body.contacts-active #page-contacts .contact-sub { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] body.contacts-active #page-contacts .contact-chev { color: var(--mid-text-3); }
/* Detail lines: sage icons, phone in Schibsted olive (no mono <code> look) */
html[data-theme] body.contacts-active #page-contacts .contact-lines { color: var(--mid-text-2); }
html[data-theme] body.contacts-active #page-contacts .contact-lines .material-symbols-outlined { font-size: 16px; color: var(--mid-text-3); }
html[data-theme] body.contacts-active #page-contacts .contact-lines code {
  font-family: inherit; font-size: 13px; font-weight: 500;
  background: none; color: var(--mid-primary); padding: 0;
}
html[data-theme] body.contacts-active #page-contacts .contact-wa {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--lime-tint); color: var(--mid-primary);
}
html[data-theme] body.contacts-active #page-contacts .contact-wa:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.contacts-active #page-contacts .contact-wa .material-symbols-outlined { font-size: 15px; color: inherit; }
/* Footer: bone source chip, lime open-deals pill, muted time */
html[data-theme] body.contacts-active #page-contacts .contact-foot { border-top: 1px solid rgba(42,51,37,0.07); }
html[data-theme] body.contacts-active #page-contacts .source-pill {
  background: var(--mid-badge); border: none; border-radius: 9999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--mid-text-2); padding: 3px 9px;
}
html[data-theme] body.contacts-active #page-contacts .pill.open-deals {
  background: var(--lime); border: none; border-radius: 9999px;
  font-size: 11.5px; font-weight: 600; color: var(--on-lime); padding: 3px 9px;
}
html[data-theme] body.contacts-active #page-contacts .contact-foot .muted { color: var(--mid-muted); font-size: 11.5px; }
html[data-theme] body.contacts-active #page-contacts .contacts-empty { color: var(--mid-muted); }

/* ═══ CONTACTS LIST VIEW — same component as the leads list ═══ */
/* The grid container becomes a flex column of rows (both themes) */
#page-contacts .contacts-grid {
  display: flex; flex-direction: column; gap: 10px; padding: 0 2px 10px;
}
#page-contacts .ct-rowhead,
#page-contacts .ct-row { grid-template-columns: 2.4fr 1.6fr 0.9fr 1fr; }
#page-contacts .ct-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600;
}
#page-contacts .ct-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#page-contacts .ct-sub { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-contacts .ct-phone { display: flex; align-items: center; gap: 8px; min-width: 0; }
#page-contacts .ct-phone code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-contacts .ct-dim { color: var(--mid-muted); }

/* Light: identical to the leads list rows/header */
html[data-theme] body.contacts-active #page-contacts .ct-row {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 16px; padding: 11px 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  cursor: pointer;
}
html[data-theme] body.contacts-active #page-contacts .ct-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 12px 24px -10px rgba(42,51,37,0.16);
}
html[data-theme] body.contacts-active #page-contacts .ct-row .ll-name-link {
  font-size: 13px; font-weight: 500; color: var(--mid-text);
}
html[data-theme] body.contacts-active #page-contacts .ct-ava { background: var(--mid-badge); color: var(--mid-primary); }
html[data-theme] body.contacts-active #page-contacts .ct-phone code {
  font-family: inherit; font-size: 13px; font-weight: 500;
  background: none; color: var(--mid-primary); padding: 0;
}
html[data-theme] body.contacts-active #page-contacts .lr-time { font-size: 11.5px; color: var(--mid-muted); }
/* Header: same full-bleed sticky footprint as the leads list (desktop) */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead {
    position: sticky; top: 0; z-index: 5;
    background: var(--mid-base); border: none; border-radius: 0; box-shadow: none;
    padding: 11px 14px 21px;
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--mid-text);
  }
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead::before {
    content: ""; position: absolute; inset: 0 0 10px 0; z-index: 0;
    background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px;
  }
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead > span { position: relative; z-index: 1; }
}
/* Dark: midnight list look (reuses the lead-row base styles) */
html:not([data-theme]) #page-contacts .ct-rowhead {
  background: var(--mid-surface, #1b2024); border: 1px solid var(--mid-line, #3e484f);
  border-radius: 12px; padding: 11px 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid-muted, #87929a);
}

/* Mobile: wrapped row-cards like the leads list */
@media (max-width: 900px) {
  #page-contacts .ct-rowhead { display: none; }
  #page-contacts .ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  #page-contacts .ct-row .lr-name { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  #page-contacts .ct-row .lr-time { margin-left: auto; }
  html[data-theme] body.contacts-active #page-contacts .ct-row { border-radius: 18px; padding: 14px 16px; }
}

/* Contacts list header: stick BELOW the sticky topbar (top:0 slid it
   underneath the frosted bar, so it looked like it wasn't sticking). */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead {
    top: 58px; z-index: 30;
  }
  /* keep the masking footprint tall enough that rows vanish cleanly */
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead::before { inset: 0 0 10px 0; }
}

/* Dashboard + Contacts filter: icon-only at ALL widths (desktop included),
   pinned at the leads coordinates (top 6 / right 0 of the page). */
html[data-theme] body.dash-active #page-dashboard #dashFilterLabel,
html[data-theme] body.contacts-active #page-contacts #contactsFilterLabel { display: none; }
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn { padding: 0 10px 0 12px; }
html[data-theme] body.dash-active #page-dashboard .page-heading,
html[data-theme] body.contacts-active #page-contacts .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0;
}

/* ═══ CONTACTS — bounded scroller like Leads ═══
   Title + controls + list header stay FIXED; only the rows scroll.
   (Window scroll let the title slide away while the sticky header stayed.) */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active .shell {
    height: calc(100dvh - 58px); overflow: hidden; padding-bottom: 20px;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  html[data-theme] body.contacts-active .sg-contacts-head { flex: 0 0 auto; }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 16px;
  }
  /* header sticks to the top of the INTERNAL scroller now (not the window) */
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead { top: 0; }
}
@media (max-width: 900px) {
  html[data-theme] body.contacts-active { overflow: hidden; }
  html[data-theme] body.contacts-active .shell {
    height: calc(100dvh - 64px) !important; overflow: hidden !important;
    padding-top: 20px !important; padding-bottom: 0 !important;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
}

/* Dashboard + Contacts filter: pure icon — no dropdown caret */
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn .dash-filter-caret,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn .dash-filter-caret { display: none; }
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn {
  width: 38px; padding: 0; justify-content: center;
}

/* ═══ Stage dropdown (leads list/kanban stage pill) — sage sheet ═══
   Was still midnight-styled (hairline border, black shadow); now identical
   to the filter/tune sheets, with sentence case enforced. */
html[data-theme] .stage-menu {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] .stage-menu-opt {
  border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--mid-text-2);
}
html[data-theme] .stage-menu-opt:hover { background: var(--mid-surface-3); }
html[data-theme] .stage-menu-opt.is-current { color: var(--mid-primary); font-weight: 600; }

/* Belt-and-braces: no dropdown option anywhere in light renders uppercase */
html[data-theme] :is(.dash-filter-opt, .sgc-opt, .stage-menu-opt, .more-item) {
  text-transform: none; letter-spacing: 0;
}

/* Contacts chips: dashboard placement/spacing on both breakpoints */
html[data-theme] body.contacts-active .sg-contacts-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.contacts-active #page-contacts .sg-chips { margin-bottom: 18px; flex: 0 0 auto; }
@media (max-width: 768px) {
  html[data-theme] body.contacts-active .sg-contacts-head .sg-display { font-size: 30px; margin: 6px 0 26px; }
  html[data-theme] body.contacts-active #page-contacts .sg-chips { gap: 7px; row-gap: 8px; margin-bottom: 20px; }
}

/* Leads controls — right-to-left order: filter, sort, view type */
html[data-theme] body.leads-active #page-leads .page-actions { display: flex; }
html[data-theme] body.leads-active #page-leads .leads-view-toggle { order: 1; }
html[data-theme] body.leads-active #page-leads #leadsSort { order: 2; }
html[data-theme] body.leads-active #page-leads #leadsFilter { order: 4; }
html[data-theme] body.leads-active #page-leads .sg-combo { order: 5; }

/* ═══ SYSTEM SURFACES IN APP UI — dialogs, toasts, native pickers ═══ */

/* Native widgets (date picker, selects) render in LIGHT system style */
html[data-theme] { color-scheme: light; }

/* Toast: dark-olive pill (matches the nav pill); errors get the sage red */
html[data-theme] .app-toast {
  background: #2a3325; color: #edeee4; border: none; border-radius: 9999px;
  box-shadow: 0 16px 40px -12px rgba(42,51,37,0.45);
  font-size: 13px; font-weight: 500;
}
html[data-theme] .app-toast.is-error { background: #b3422f; color: #fdf3f0; border: none; }

/* Sage confirm dialog */
.sg-dialog-veil {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(35,41,32,0.40);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: uiFadeIn var(--dur-1, 120ms) ease;
}
.sg-dialog {
  background: var(--sg-surface, #fdfdf8); border-radius: 22px; padding: 22px 22px 18px;
  max-width: 380px; width: 100%;
  box-shadow: 0 24px 64px -16px rgba(42,51,37,0.45);
}
.sg-dialog p {
  margin: 0 0 16px; font-size: 14px; line-height: 1.55;
  color: var(--mid-text, #232920); white-space: pre-line;
}
.sg-dialog-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  padding: 12px 14px; margin: 0 0 18px; border-radius: 12px;
  background: var(--mid-base, #edeee4); border: 1px solid transparent; color: var(--mid-text, #232920);
}
.sg-dialog-input::placeholder { color: var(--mid-muted, #87929a); }
/* Beat the app-wide white-well + grey-outline !important input rules (same fight
   as the modals/setup) so the prompt field is a bone borderless well. */
html[data-theme] .sg-dialog-veil .sg-dialog-input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-base) !important; border-color: transparent !important;
}
html[data-theme] .sg-dialog-veil .sg-dialog-input:focus {
  outline: none !important; border-color: transparent !important; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
.sg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sg-dialog-btn {
  height: 40px; padding: 0 18px; border: none; border-radius: 9999px;
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: var(--mid-surface-3, #e7e9dc); color: var(--mid-text-2, #4c5345);
}
.sg-dialog-btn:hover { background: var(--mid-surface-4, #dcdfd0); }
.sg-dialog-ok { background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); font-weight: 600; }
.sg-dialog-ok:hover { background: #e4ff85; }
.sg-dialog-ok.is-danger { background: #b3422f; color: #fdf3f0; }
.sg-dialog-ok.is-danger:hover { background: #a03a28; }
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Quote builder date fields: placeholder until a value is picked */
html[data-theme] body.quote-active #page-quotes .qgm-event-date { position: relative; }
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  content: attr(data-ph);
  color: var(--mid-text-3); font-size: 13px;
}

/* Mobile "more" menu: shrink-wrap to its items (it was stretching wide) */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    width: max-content !important; min-width: 0 !important; max-width: 260px !important;
    left: auto !important; right: 16px !important;
  }
  html[data-theme] .nav-more-pop .more-item { width: auto; min-width: 160px; }
}

/* Contacts pager — sage pills under the list */
#page-contacts .ct-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 0 4px;
}
#page-contacts .ct-pager-btn {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--sg-surface, #fdfdf8); box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
#page-contacts .ct-pager-btn:hover:not(:disabled) { background: var(--mid-surface-2, #ffffff); color: var(--mid-text); }
#page-contacts .ct-pager-btn:disabled { opacity: 0.4; cursor: default; }
#page-contacts .ct-pager-btn .material-symbols-outlined { font-size: 18px; }
#page-contacts .ct-pager-label { font-size: 13px; color: var(--mid-muted); }

/* Leads filter/sort buttons: SAME 38px footprint as dashboard/contacts
   (an old rule pinned them to 36×32). */
html[data-theme] body.leads-active #page-leads #leadsFilter .dash-filter-btn,
html[data-theme] body.leads-active #page-leads #leadsSort .dash-filter-btn,
html[data-theme] body.leads-active #page-leads #leadsComboBtn {
  width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center;
}
/* …and the leads combo loses its caret like the other icon-only controls */
html[data-theme] body.leads-active #page-leads #leadsComboBtn .dash-filter-caret { display: none; }

/* "Event date" placeholder must stay one line — it was wrapping inside the
   narrow date field and doubling the field's height. */
html[data-theme] body.quote-active #page-quotes .qgm-event-date {
  display: inline-flex; align-items: center; height: 38px; overflow: hidden;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; line-height: 1;
}

/* Toast text: centered (multi-line error messages were left-aligned) */
.app-toast { text-align: center; }

/* Date placeholder: only on MOBILE, and just "Date". Desktop shows the
   native greyed-out date format instead. */
@media (min-width: 769px) {
  html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before { content: none; }
}
@media (max-width: 768px) {
  html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before { content: "Date"; }
}

/* iOS squeezes the placeholder: the date input's internal (empty) value box
   still occupies the full width, leaving the ::before only a sliver ("D…").
   Hide the native value box until a date is actually picked. */
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::-webkit-date-and-time-value {
  display: none;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT / CONVERSATIONS — sage treatment (light theme)
   Standard page head (display title + floating action), sage channel pills,
   borderless pane cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head — same pattern as Dashboard/Leads/Contacts */
.sg-chat-head { display: none; }
html[data-theme] body.chat-active .sg-chat-head { display: block; }
html[data-theme] body.chat-active .sg-chat-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.chat-active #page-conversations { position: relative; }
html[data-theme] body.chat-active #page-conversations .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.chat-active #page-conversations .page-heading > div:first-of-type { display: none; }
html[data-theme] body.chat-active #page-conversations #followUpAllBtn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.chat-active #page-conversations #followUpAllBtn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.chat-active #page-conversations #followUpAllBtn .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
@media (max-width: 768px) {
  html[data-theme] body.chat-active .sg-chat-head .sg-display { font-size: 30px; margin: 6px 0 18px; }
}

/* Channel pills (All / WhatsApp / Instagram): the leads stage-pill language —
   white pills on the page, dark-olive active */
html[data-theme] body.chat-active .inbox-filter {
  background: transparent; padding: 0; margin: 0 16px 12px; gap: 8px;
}
html[data-theme] body.chat-active .inbox-filter button {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 9999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; font-family: inherit;
}
html[data-theme] body.chat-active .inbox-filter button:hover { color: var(--mid-text); background: var(--mid-surface-4); }
html[data-theme] body.chat-active .inbox-filter button.is-active {
  background: #2a3325; color: #edeee4; font-weight: 500; box-shadow: none;
}

/* Panes: borderless sage cards */
html[data-theme] body.chat-active .inbox-list-pane,
html[data-theme] body.chat-active .inbox-thread-pane {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Search well inside the list pane */
html[data-theme] body.chat-active .inbox-search {
  margin: 12px 16px 10px; padding: 9px 14px;
  background: var(--mid-base); border-radius: 9999px;
}
html[data-theme] body.chat-active .inbox-search .material-symbols-outlined { font-size: 18px; color: var(--mid-text-3); }
html[data-theme] body.chat-active .inbox-search input {
  font-family: inherit; font-size: 13px; color: var(--mid-text);
}
html[data-theme] body.chat-active .inbox-search input::placeholder { color: var(--mid-text-3); font-size: 13px; }

/* ═══ CHAT — STRUCTURAL sage rebuild ═══ */

/* Channel pills under the title: exact leads stage-pill component w/ counts */
html[data-theme] body.chat-active #inboxFilter {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 20px; margin: 0;
  background: transparent; scrollbar-width: none;
}
html[data-theme] body.chat-active #inboxFilter::-webkit-scrollbar { display: none; }
html[data-theme] body.chat-active #inboxFilter button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9999px; border: none;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text-2);
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
}
html[data-theme] body.chat-active #inboxFilter button .count {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  padding: 1px 7px; border-radius: 9999px; font-size: 11.5px; font-weight: 700;
}
html[data-theme] body.chat-active #inboxFilter button.is-active { background: #2a3325; color: #edeee4; }
html[data-theme] body.chat-active #inboxFilter button.is-active .count { background: var(--lime); color: var(--on-lime); }

/* List rows: contacts-list anatomy — borderless, bone hover, lime unread dot */
html[data-theme] body.chat-active .inbox-row {
  border: none; border-bottom: 1px solid rgba(42,51,37,0.06);
  padding: 12px 16px; background: transparent;
}
html[data-theme] body.chat-active .inbox-row:hover { background: var(--mid-base); }
html[data-theme] body.chat-active .inbox-row.is-active { background: var(--mid-surface-3); }
html[data-theme] body.chat-active .inbox-row-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--mid-badge); color: var(--mid-primary);
  font-size: 13px; font-weight: 600;
}
html[data-theme] body.chat-active .inbox-row-name { font-size: 13px; font-weight: 500; color: var(--mid-text); }
html[data-theme] body.chat-active .inbox-row.is-unread .inbox-row-name { font-weight: 600; }
html[data-theme] body.chat-active .inbox-row-time { font-size: 11.5px; color: var(--mid-muted); margin-left: auto; }
html[data-theme] body.chat-active .inbox-row-top { display: flex; align-items: center; gap: 6px; }
html[data-theme] body.chat-active .inbox-row-unread {
  position: static; width: 8px; height: 8px; border-radius: 50%;
  background: #aabf2e; flex: 0 0 auto;
}
html[data-theme] body.chat-active .inbox-row-snippet { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; }
html[data-theme] body.chat-active .inbox-row-meta3 { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
html[data-theme] body.chat-active .inbox-row-meta3 .lead-temp-chip {
  border: none; border-radius: 9999px; font-size: 11.5px; font-weight: 500; padding: 3px 9px;
}
html[data-theme] body.chat-active .lead-temp-chip.hot { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.chat-active .lead-temp-chip.warm { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.chat-active .lead-temp-chip.cold { background: var(--mid-surface-3); color: var(--mid-text-2); }
html[data-theme] body.chat-active .inbox-row-meta3 .pill.manual {
  background: var(--mid-badge); color: var(--mid-text-2); border: none;
  border-radius: 9999px; font-size: 11.5px; font-weight: 500; padding: 3px 9px;
}
html[data-theme] body.chat-active .inbox-card-takeover {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--mid-primary);
  background: var(--lime-tint); border: none; border-radius: 9999px; padding: 4px 11px;
}
html[data-theme] body.chat-active .inbox-card-takeover:hover { background: var(--lime); color: var(--on-lime); }

/* Thread: bubbles in the sage pairing — lead = white card, us = dark olive */
html[data-theme] body.chat-active .msg.in .msg-bubble {
  background: var(--mid-surface-2, #ffffff); border: none; color: var(--mid-text);
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.06), 0 4px 12px -6px rgba(42,51,37,0.10);
}
html[data-theme] body.chat-active .msg.out .msg-bubble {
  background: #2a3325; border: none; color: #edeee4;
  border-radius: 16px 16px 6px 16px;
}
html[data-theme] body.chat-active .msg-meta { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] body.chat-active .msg-datesep span,
html[data-theme] body.chat-active .inbox-datesep span {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  border: none; border-radius: 9999px; font-size: 11.5px; padding: 4px 12px;
}
/* Thread header buttons → standard pills; take-over rides the lime */
html[data-theme] body.chat-active .inbox-thread-actions .button {
  background: var(--mid-surface-3); border: none; border-radius: 9999px;
  height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500; color: var(--mid-text-2);
}
html[data-theme] body.chat-active #inboxTakeoverBtn {
  background: var(--lime); color: var(--on-lime); font-weight: 600;
}

/* Composer: bone pill input, circular tools, lime send disc */
html[data-theme] body.chat-active .inbox-compose { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] body.chat-active .inbox-compose-row { gap: 8px; align-items: flex-end; }
html[data-theme] body.chat-active #inboxComposeText {
  background: var(--mid-base) !important; border: none !important; border-radius: 22px !important;
  padding: 12px 16px !important; font-size: 14px !important; color: var(--mid-text) !important;
}
html[data-theme] body.chat-active #inboxComposeText::placeholder { color: var(--mid-text-3) !important; }
html[data-theme] body.chat-active .compose-tool,
html[data-theme] body.chat-active .inbox-ai-inline {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--mid-surface-3); color: var(--mid-text-2);
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] body.chat-active .compose-tool:hover,
html[data-theme] body.chat-active .inbox-ai-inline:hover { background: var(--lime-tint); color: var(--mid-primary); }
html[data-theme] body.chat-active #inboxSendBtn {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--lime); color: var(--on-lime); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] body.chat-active #inboxSendBtn:disabled { opacity: 0.45; box-shadow: none; }
html[data-theme] body.chat-active #inboxSendBtn .material-symbols-outlined { color: var(--on-lime); font-size: 20px; }

/* Dark theme: the relocated pills keep a sane margin above the shell */
html:not([data-theme]) #inboxFilter { margin: 0 0 12px; }

/* ═══ CHAT — consistency pass (7 fixes) ═══ */

/* 1 ▸ One type system on the whole page (kill var(--sans) holdouts) + all
   thread buttons sentence case 13/500 */
html[data-theme] body.chat-active #page-conversations,
html[data-theme] body.chat-active #page-conversations :is(button, input, textarea, span, strong, div):not(.material-symbols-outlined) {
  font-family: var(--sans);
}
html[data-theme] body.chat-active #page-conversations :is(.button, .iwb-tpl-btn) {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* 2 ▸ Fixed page height — bounded scroller like Leads/Contacts: the compose
   row is always on screen; messages + list scroll inside the cards. */
@media (min-width: 901px) {
  html[data-theme] body.chat-active .shell { height: calc(100dvh - 58px); overflow: hidden; padding-bottom: 20px; }
}
@media (max-width: 900px) {
  html[data-theme] body.chat-active { overflow: hidden; }
  html[data-theme] body.chat-active .shell {
    height: calc(100dvh - 64px) !important; overflow: hidden !important;
    padding-top: 20px !important; padding-bottom: 0 !important;
  }
}
html[data-theme] body.chat-active #page-conversations {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
}
html[data-theme] body.chat-active .sg-chat-head,
html[data-theme] body.chat-active #inboxFilter { flex: 0 0 auto; }
html[data-theme] body.chat-active .inbox-shell {
  flex: 1 1 auto; min-height: 0; height: auto !important;
  padding-bottom: 4px;
}
html[data-theme] body.chat-active .inbox-list-pane,
html[data-theme] body.chat-active .inbox-thread-pane {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
html[data-theme] body.chat-active .inbox-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html[data-theme] body.chat-active .inbox-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; }
html[data-theme] body.chat-active .inbox-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html[data-theme] body.chat-active .inbox-compose { flex: 0 0 auto; }
@media (max-width: 900px) {
  html[data-theme] body.chat-active .inbox-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* 3 ▸ Avatar: true circle (it was squashing into an oval) */
html[data-theme] body.chat-active .inbox-row-avatar {
  flex: 0 0 38px; min-width: 38px; aspect-ratio: 1 / 1;
}

/* 4 ▸ Pills: EXACT same metrics as the leads stage pills — fixed 36px */
html[data-theme] body.chat-active #inboxFilter button,
html[data-theme] body.leads-active #page-leads .leads-stage-pill {
  height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center;
}

/* 5 ▸ Search: standard field well (12px radius like every in-card input) */
html[data-theme] body.chat-active .inbox-search {
  border-radius: 12px; padding: 10px 14px; margin: 14px 16px 10px;
}

/* 6 ▸ Bubbles: bone for the lead, lime wash for us (black/white pair gone) */
html[data-theme] body.chat-active .msg.in .msg-bubble {
  background: var(--mid-base); color: var(--mid-text); box-shadow: none;
}
html[data-theme] body.chat-active .msg.out .msg-bubble {
  background: var(--lime-tint); color: #2a3325;
}

/* 7 ▸ Take-over (thread header only now): lime pill, no outline anywhere */
html[data-theme] body.chat-active #inboxTakeoverBtn {
  border: none !important; outline: none !important; box-shadow: none;
}

/* ═══ CHAT MOBILE — restore list-first flow + lean sage cards ═══
   The bounded-scroller pass forced the thread pane visible on mobile; back to:
   list only → tap → fullscreen thread (.show-thread). */
@media (max-width: 900px) {
  html[data-theme] body.chat-active .inbox-thread-pane { display: none; }
  html[data-theme] body.chat-active .inbox-shell.show-thread .inbox-thread-pane {
    display: flex; position: fixed; inset: 0; z-index: 1200; height: 100dvh;
    border-radius: 0; background: var(--mid-base) !important;
  }
  html[data-theme] body.chat-active .inbox-shell.show-thread .inbox-list-pane { display: none; }

  /* Rows = the lean sage card (the old mobile spec hid avatar/snippet/time) */
  html[data-theme] body.chat-active .inbox-row {
    background: var(--mid-surface-2, #ffffff) !important; border: none !important; border-radius: 16px;
    padding: 13px 14px !important; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
    display: flex; gap: 10px;
  }
  html[data-theme] body.chat-active .inbox-row:hover,
  html[data-theme] body.chat-active .inbox-row.is-active { background: var(--mid-surface-2, #ffffff) !important; }
  html[data-theme] body.chat-active .inbox-row-avatar { display: grid !important; }
  html[data-theme] body.chat-active .inbox-row-time { display: inline !important; }
  html[data-theme] body.chat-active .inbox-row-snippet { display: block !important; }
  html[data-theme] body.chat-active .inbox-row-unread { display: inline-block !important; }
  html[data-theme] body.chat-active .inbox-row-name {
    font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme] body.chat-active .inbox-row-meta3 { margin-top: 7px; }
  /* Search FAB + sheet in sage (they were cyan) */
  html[data-theme] body.chat-active .chat-search-fab {
    background: var(--lime); color: var(--on-lime);
    box-shadow: 0 8px 20px -8px rgba(120,140,30,0.55);
  }
  html[data-theme] body.chat-active .chat-search-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8); border: none; box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  }
}

/* Temp/Manual meta row shows on desktop too (old spec was mobile-only) */
html[data-theme] body.chat-active .inbox-row-meta3 { display: flex; }

/* Compose field: visible boundary (it was merging into the pane) */
html[data-theme] body.chat-active #inboxComposeText {
  border: 1px solid var(--mid-line) !important;
  background: var(--mid-lowest) !important;
}

/* ═══ FIXES — hidden window bar truly hidden + ONE pill height everywhere ═══ */

/* display:flex on the bar was beating the [hidden] attribute — Instagram
   threads showed the dot + "Send template" even though JS hid them. */
.inbox-window-bar[hidden] { display: none !important; }
.iwb-tpl-btn[hidden] { display: none !important; }

/* One pill metric across the app: dashboard chips, leads stage pills, chat
   channel pills — identical height by construction (desktop + mobile). */
html[data-theme] .sg-chip,
html[data-theme] body.leads-active #page-leads .leads-stage-pill,
html[data-theme] body.chat-active #inboxFilter button {
  height: 42px; padding: 0 18px;
  display: inline-flex; align-items: center;
  box-sizing: border-box;
}

/* ═══ CHAT — search field + type ramp consistency ═══ */

/* Search well: same field system as every other in-card input (white well,
   sage hairline, 12px radius) */
html[data-theme] body.chat-active .inbox-search {
  background: var(--mid-lowest); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: 9px 14px;
}

/* One type ramp for the page (sizes were drifting between components) */
html[data-theme] body.chat-active .inbox-row-name { font-size: 13px; font-weight: 500; }
html[data-theme] body.chat-active .inbox-row-snippet { font-size: 11.5px; }
html[data-theme] body.chat-active .inbox-row-time { font-size: 11.5px; }
html[data-theme] body.chat-active #inboxThreadName { font-size: 14px; font-weight: 600; color: var(--mid-text); }
html[data-theme] body.chat-active #inboxThreadMeta { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] body.chat-active .msg-bubble { font-size: 13px; line-height: 1.5; }
html[data-theme] body.chat-active .msg-meta { font-size: 11.5px; }
html[data-theme] body.chat-active .msg-tag { font-size: 11.5px; }
/* 16px (not 14) so iOS never auto-zooms the page when the composer is focused. */
html[data-theme] body.chat-active #inboxComposeText { font-size: 16px !important; }
html[data-theme] body.chat-active .inbox-window-bar { font-size: 11.5px; }
html[data-theme] body.chat-active .inbox-empty { font-size: 13px; color: var(--mid-muted); }

/* AI-suggest star: sit IN FLOW between the textarea and send button instead of
   floating over the input — so it can never cover typed text. (High specificity +
   late position to beat the earlier position:absolute rules.) */
body.chat-active .inbox-compose-row .inbox-ai-inline,
html[data-theme] body.chat-active .inbox-compose-row .inbox-ai-inline {
  position: static; transform: none; right: auto; top: auto;
  flex: 0 0 auto; order: 2; margin: 0;
}
body.chat-active .inbox-compose-row textarea { padding-right: 18px; order: 1; }
body.chat-active .inbox-compose-row #inboxSendBtn { order: 3; }
/* Focusing/typing in the composer hides the AI-suggest star so the input box
   grows to stay symmetric between the + (attach) and send buttons. */
body.chat-active .inbox-compose-row:focus-within .inbox-ai-inline,
#chatDetailContent .inbox-compose-row:focus-within .inbox-ai-inline { display: none; }

/* ═══ Sage light theme — create modals (new deal / task / contact / ticket) ═══
   They already use --mid-* tokens (sage in light), but two things kept them off
   the redesign: forced Inter font and a blue accent CTA with uppercase labels.
   Bring them onto the dashboard's language — Schibsted, lime pill CTA, sentence
   -case field labels, rounded white wells. */
html[data-theme] .modal-content {
  border-radius: 22px; border: 1px solid var(--mid-line);
  box-shadow: var(--mid-shadow, 0 18px 50px -20px rgba(0,0,0,0.18));
}
html[data-theme] .modal-content,
html[data-theme] .modal-content h2,
html[data-theme] .modal-content label,
html[data-theme] .modal-content input,
html[data-theme] .modal-content select,
html[data-theme] .modal-content textarea,
html[data-theme] .modal-content button,
html[data-theme] .modal-content small,
html[data-theme] .modal-content strong {
  font-family: var(--sans);
}
html[data-theme] .modal-content .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
html[data-theme] .modal-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); }
html[data-theme] .modal-body label > span {
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--mid-text-2);
}
/* Filled bone wells — IDENTICAL to the approved quote-builder fields.
   NOTE: a generic light-theme rule forces every input to a WHITE well with
   `background: var(--mid-lowest) !important` (selector ~specificity 0,4,3). A
   plain class-level rule here loses that !important war (only its border-radius,
   which has no competitor, applied — that was the tell). So we override with
   ID-level specificity + !important, exactly how the quote builder beats the same
   rule. :is(#ids) keeps the list short while contributing id-level specificity. */
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal, #resModal, #svcModal, #evtModal, #pkgModal, #delModal) :is(.modal-body, .task-lead-search) :is(input, select, textarea) {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;   /* bone fill, NO border line */
  border-radius: 12px !important;
  color: var(--mid-text) !important;
  padding: 12px 14px;
}
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal, #resModal, #svcModal, #evtModal, #pkgModal, #delModal) :is(.modal-body, .task-lead-search) :is(input, select, textarea):focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Mask Chrome's autofill blue/yellow fill in the modals too. */
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal, #resModal, #svcModal, #evtModal, #pkgModal, #delModal) input:-webkit-autofill,
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal, #resModal, #svcModal, #evtModal, #pkgModal, #delModal) input:-webkit-autofill:hover,
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal, #resModal, #svcModal, #evtModal, #pkgModal, #delModal) input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-text);
}
:is(#pkgModal,#svcModal,#evtModal,#delModal) :is(input[type=checkbox],input[type=radio]){ all:revert; width:18px; height:18px; accent-color:var(--mid-accent); }
html[data-theme] .modal .button.primary {
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); border: none;
  border-radius: 9999px; font-weight: 600;
}
html[data-theme] .modal .button.primary:hover { background: var(--lime, #d9ff5e); filter: brightness(0.97); }
html[data-theme] .modal .button.primary:disabled { background: var(--mid-surface-3); color: var(--mid-muted); filter: none; }
html[data-theme] .modal .button.ghost {
  background: transparent; border: 1px solid var(--mid-line); color: var(--mid-text-2); border-radius: 9999px;
}
html[data-theme] .modal .button.ghost:hover { background: var(--mid-surface-3); color: var(--mid-text); }
/* Prefilled-contact + section dividers read sage, not the old cream panel */
html[data-theme] .modal-prefilled-contact,
html[data-theme] .modal-section-header { border-color: var(--mid-line); }
html[data-theme] .modal-content small.muted,
html[data-theme] .modal-content .muted { color: var(--mid-muted); }

/* Close button → the quote card's round sage icon (.qdoc-x), NOT the blue-glow ghost.
   !important on radius/size to beat the generic light-theme button rules (same
   cascade fight as the inputs). */
html[data-theme] .modal-head .button.ghost.small,
html[data-theme] .modal-head button[data-close] {
  width: 36px !important; height: 36px !important; min-width: 0; padding: 0 !important; border-radius: 50% !important;
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* THE blue glow: .modal-head button[data-close] gets `animation: fabGlow`
     (a pulsing rgba(0,90,200) box-shadow). Kill it in light theme. */
  animation: none !important; box-shadow: none !important;
}
html[data-theme] .modal-head .button.ghost.small:hover { background: var(--mid-surface-4); color: var(--mid-text); }
/* Kill the blue focus glow on modal buttons (incl. the X). The soft blue halo is
   the browser's default :focus ring — remove it on tap, keep a sage ring only for
   keyboard :focus-visible. box-shadow nuked too in case anything sets a blue one. */
html[data-theme] .modal .button:focus,
html[data-theme] .modal .button.ghost.small:focus { outline: none; box-shadow: none; }
html[data-theme] .modal .button:focus-visible {
  outline: 2px solid var(--lime, #d9ff5e); outline-offset: 2px; box-shadow: none;
}
html[data-theme] .modal .button.ghost.small { -webkit-tap-highlight-color: transparent; }

/* ── Bottom-drawer behaviour to MATCH the quote card (grip + slide-up/down) ── */
@media (max-width: 600px) {
  /* slide up on open, slide down on close (beats the desktop uiPopIn) */
  .modal:not([hidden]) .modal-content { animation: uiSheetUp 0.34s cubic-bezier(0.22,1,0.36,1); }
  .modal .modal-content.is-closing { animation: uiSheetDown 0.24s cubic-bezier(0.4,0,1,1) forwards; }
  /* Fixed grip + header, scrolling body — same anatomy as the quote drawer. */
  .modal-content { display: flex; flex-direction: column; overflow: hidden; }
  .modal-head { flex: 0 0 auto; }
  .modal-content > .modal-body,
  .modal-content > form.modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .modal-content::before {
    content: ""; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 9999px;
    background: rgba(42,51,37,0.18); margin: 8px auto 2px;
  }
}

/* Sentence case everywhere in light — temperature chips were uppercase-tracked */
html[data-theme] .lead-temp-chip {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500;
}
html[data-theme] body.chat-active #page-conversations :is(.pill, .msg-tag, .lead-temp-chip) {
  text-transform: none; letter-spacing: 0;
}

/* ═══ CHAT MOBILE — natural window scroll (no fixed-height card) ═══
   The bounded scroller stays DESKTOP-only; on mobile the chat list flows and
   scrolls with the page exactly like the dashboard. */
@media (max-width: 900px) {
  html[data-theme] body.chat-active { overflow: visible; }
  html[data-theme] body.chat-active .shell {
    height: auto !important; overflow: visible !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.chat-active #page-conversations {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.chat-active .inbox-shell {
    display: block; height: auto !important; min-height: 0; overflow: visible;
    padding-bottom: 0;
  }
  html[data-theme] body.chat-active .inbox-list-pane {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.chat-active .inbox-list {
    overflow: visible; max-height: none;
  }
}

/* ═══ CONTACTS MOBILE — natural window scroll ═══
   The inner fixed-height scroller blocked iOS's tap-status-bar-to-top (that
   gesture only drives the WINDOW scroller). Desktop keeps the bounded layout;
   mobile scrolls the page like the dashboard/chat. */
@media (max-width: 900px) {
  html[data-theme] body.contacts-active { overflow: visible; }
  html[data-theme] body.contacts-active .shell {
    height: auto !important; overflow: visible !important;
    padding-top: 20px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    overflow: visible; min-height: 0; padding-bottom: 0;
  }
}

/* Contacts chips as filters: active chip gets the dark-olive "selected" state */
html[data-theme] body.contacts-active #page-contacts .sg-chip { cursor: pointer; }
html[data-theme] body.contacts-active #page-contacts .sg-chip.is-on {
  background: #2a3325; color: #edeee4;
}
html[data-theme] body.contacts-active #page-contacts .sg-chip.is-on b { color: var(--lime); }

/* ═══ LEADS LIST VIEW (mobile) — window scroll for tap-to-top ═══
   Only the LIST view unlocks (kanban keeps the fixed stage pills + inner
   column scroll). :has() scopes it to when the list is the visible mode. */
@media (max-width: 900px) {
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) { overflow: visible; }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) .shell {
    height: auto !important; overflow: visible !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) #page-leads {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { display: none; }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) #page-leads .leads-list {
    overflow: visible; min-height: 0; max-height: none;
    padding-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEAL DETAIL PAGE — full sage redesign (light theme)
   Big-amount display header · lime dot stepper · pill tabs · borderless cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* The page surface: bone canvas, generous gutters */
/* ONLY when open — the closed panel stays in the DOM as a transparent
   full-viewport layer; painting it bone blanked the whole app. */
html[data-theme] #dealDetailPanel:not([hidden]) { background: var(--mid-base) !important; border: none !important; }
html[data-theme] #dealDetailPanel[hidden] { display: none !important; background: transparent !important; }
/* (Deal-only scroll padding removed 2026-08-08 — deals inherits the shared 36px top, same start line as contacts.) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px 0 12px; margin-bottom: 0;  /* contacts has 0 — same card start line */
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10);
  font-size: 13px; font-weight: 500; color: var(--mid-text-2); cursor: pointer;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow .material-symbols-outlined { font-size: 17px; }

/* Cards: dashboard surface, 24px radius, no borders */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-card {
  /* kb tokens = the measured dashboard greys (2026-08-08); --sg-surface was the
     retired sage-dark #333333 that kept resurfacing over the v2 skin. */
  background: var(--kb-panel, #fdfdf8) !important; border: none !important; border-radius: var(--r-card);
  box-shadow: none;
  padding: 26px; margin-bottom: 14px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-card-head h3 {
  font-size: 14px; font-weight: 500; color: var(--mid-text);
  letter-spacing: 0; text-transform: none;
}

/* ── HEAD CARD: display-type name, bone avatar, BIG amount, action discs ── */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-deal-name {
  font-size: clamp(24px, 3vw, 31px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--mid-text); border: none; outline: none;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-deal-name:focus { box-shadow: 0 2px 0 var(--lime); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mid-badge); color: var(--mid-primary);
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-name-link,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-name-plain {
  /* Clickable names rest PLAIN and brighten on hover, like everywhere else —
     the accent rule keeps green for values/buttons/live markers only. */
  font-size: 14px; font-weight: 500; color: var(--kb-text);
  background: none; border: none; cursor: pointer; padding: 0;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-name-link:hover {
  color: var(--mid-primary); text-decoration: underline;
}
/* Amount = the dashboard big number; the input IS the display */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-stat-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount {
  font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em;
  color: var(--mid-text); display: inline-flex; align-items: baseline; gap: 4px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount input {
  background: transparent !important; border: none !important; outline: none;
  font-size: inherit !important; font-weight: inherit; letter-spacing: inherit;
  color: var(--mid-text) !important; padding: 0 !important; width: 7.5ch;
  border-radius: 0 !important;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount input:focus { box-shadow: 0 2px 0 var(--lime) !important; }
/* Action discs: call bone · WhatsApp lime · delete soft sage-red */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-icon-btn,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-del-icon {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); cursor: pointer;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-call { background: var(--kb-tile); color: var(--kb-text); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-wa { background: var(--lime); color: var(--on-lime); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-del-icon { background: rgba(179,66,47,0.12); color: #b3422f; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-del-icon:hover { background: rgba(179,66,47,0.2); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(.dlp-icon-btn, .dlp-del-icon) .material-symbols-outlined { font-size: 19px; color: inherit; }

/* ── DOT STEPPER: olive done → lime current → bone todo, hairline rail ── */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-dot {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-dot .material-symbols-outlined { font-size: 15px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-done .dlp-step-dot { background: #2a3325; color: #edeee4; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-current .dlp-step-dot {
  background: var(--lime); color: var(--on-lime);
  box-shadow: 0 0 0 5px var(--lime-tint);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-todo .dlp-step-dot { background: var(--mid-surface-3); color: var(--mid-text-3); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted); margin-top: 6px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step-current .dlp-step-label { color: var(--mid-text); font-weight: 600; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step { background: none; border: none; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step::before,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-step::after { background: var(--mid-surface-4) !important; height: 2px !important; }

/* ── PILL TABS: bone pills, dark-olive active (channel-pill component) ── */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px;
  border: none !important; scrollbar-width: none;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tabs::-webkit-scrollbar { display: none; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tab {
  flex: 0 0 auto; height: 38px; padding: 0 16px; border: none !important; border-radius: 9999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tab:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tab.active {
  background: #2a3325 !important; color: #edeee4 !important; box-shadow: none;
}

/* ── PANES: sentence-case labels, bone field wells, sage meta ── */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-label,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-field label,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form-field span,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-pane-h {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(input, select, textarea):not(.dlp-amount input) {
  /* kb-tile = the dashboard's raised-well grey (was --mid-base = sage #2a2a2a). */
  background: var(--kb-tile) !important; border: none !important; border-radius: var(--r-tile) !important;
  padding: 10px 14px !important; font-size: 13px !important; color: var(--kb-text) !important;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-meta-row { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-meta-row span:last-child { color: var(--mid-text-2); }

/* Timelines: lime first dot, olive rail */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tl-dot {
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tl-item:first-child .dlp-tl-dot { background: #d9ff5e; color: #1a2000; } /* literal lime — var(--lime) is the sage remap */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tl-title { font-size: 13px; font-weight: 500; color: var(--mid-text); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tl-meta { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tl-text { font-size: 13px; color: var(--mid-text-2); }

/* Task rows + buttons inside panes */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-task-done { border: none; background: transparent; color: var(--mid-muted); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-task-done:hover { color: var(--on-lime); background: var(--lime); border-radius: 50%; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .button.primary,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-addtask-btn {
  background: var(--lime) !important; color: var(--on-lime) !important; border: none !important;
  border-radius: 9999px; height: 42px; font-size: 13px; font-weight: 600;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 9999px;
}

/* ═══ DEAL PAGE — layout polish ═══ */

/* 1 ▸ Real right padding (cards were flush to the panel edge) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-scroll {
  padding: 18px 28px calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box; width: 100%;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp { max-width: 1180px; margin: 0 auto; }
@media (max-width: 768px) {
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-scroll { padding: 14px 16px calc(120px + env(safe-area-inset-bottom)); }
}

/* 2 ▸ Desktop: Overview card LEFT, tab card RIGHT */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols { display: block; }
@media (min-width: 901px) {
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols {
    display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
    gap: 14px; align-items: start;
  }
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols .dlp-card { margin-bottom: 0; }
}
@media (max-width: 900px) {
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-overviewcard { margin-bottom: 14px; }
}

/* 3 ▸ Back button = standard pill (42px like every pill) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow {
  height: 42px; padding: 0 18px 0 14px; font-size: 13px; font-weight: 500;
}

/* ═══ DEAL PAGE — spacing rhythm, icon back, sage quotes table ═══ */

/* Back: icon-only 42px disc (same scale as the pills) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow {
  width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0;
  border-radius: 50%;
}

/* Overview rhythm: consistent label→field and section→section spacing */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-section { margin: 0; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-section + .dl-section,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-section + .dl-meta { margin-top: 22px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-label { margin: 0 0 10px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-section .edit-textarea { margin: 0; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-fields { display: flex; flex-direction: column; gap: 14px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 0; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-meta {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(42,51,37,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-meta-row { display: flex; justify-content: space-between; }

/* Quotes tab — sage table: sentence-case header, soft rows, pill actions */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-quotes-tablewrap { background: transparent; border: none; overflow-x: auto; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-quotes-table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-quotes-table thead th {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500;
  color: var(--mid-muted); background: transparent;
  text-align: left; padding: 8px 10px; border: none;
  border-bottom: 1px solid rgba(42,51,37,0.10);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-quotes-table tbody td {
  padding: 12px 10px; border: none; border-bottom: 1px solid rgba(42,51,37,0.07);
  color: var(--mid-text); vertical-align: middle; background: transparent;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-id { font-weight: 600; color: var(--mid-text-2); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-total { font-weight: 600; color: var(--mid-primary); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-date { color: var(--mid-muted); font-size: 13px; }
/* Status pills in sage temps, sentence case */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-status {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; border: none;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-status-sent { background: rgba(157,186,110,0.28); color: #56671f; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-status-accepted { background: var(--lime); color: var(--on-lime); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-status-rejected { background: rgba(179,66,47,0.12); color: #b3422f; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-status-superseded { background: var(--mid-surface-3); color: var(--mid-text-2); }
/* Action links → small pill chips, right-aligned in one row */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-actions {
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-link {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border: none; border-radius: 9999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 11.5px; font-weight: 500; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-link:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-link-accept { background: var(--lime-tint); color: var(--mid-primary); font-weight: 600; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-link-accept:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-new-quote { background: var(--lime-tint); color: var(--mid-primary); font-weight: 600; height: 36px; padding: 0 14px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-new-quote:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Tasks group label ("Open · 1") joins the sentence-case ramp */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-task-grp {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500; color: var(--mid-muted);
}

/* ═══ DEAL PAGE — quote action icons, tasks rhythm; QUOTE BUILDER result row ═══ */

/* Quote actions: 34px icon discs in one tidy row (no wrapping text pills) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-ico,
html[data-theme] #contactDetailContent .dlp-q-ico {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  justify-content: center; flex: 0 0 auto;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-ico .material-symbols-outlined { font-size: 17px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-q-actions { flex-wrap: nowrap; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-quotes-table thead th { background: transparent; }

/* Tasks tab rhythm: consistent gaps between list, labels and fields */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-tasks-list { margin: 0 0 22px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form { display: flex; flex-direction: column; gap: 14px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0;
}
@media (max-width: 768px) {
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form-row { grid-template-columns: 1fr; }
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form-field { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .task-form input[name="title"] { margin: 0; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-addtask-btn { align-self: flex-start; padding: 0 22px; margin-top: 2px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-pane .muted.small { color: var(--mid-muted); }

/* Quote builder — post-generation block in the design language:
   status chip = lime tint · Send = lime CTA · PDF/Slides = bone pills */
html[data-theme] body.quote-active #page-quotes .crm-status-inline,
html[data-theme] body.quote-active #page-quotes .crm-status-inline.crm-ok {
  background: var(--lime-tint); border: none; border-radius: 9999px;
  color: var(--mid-primary); font-size: 13px; font-weight: 500;
  padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px;
}
html[data-theme] body.quote-active #page-quotes .crm-status-inline.crm-error {
  background: rgba(179,66,47,0.12); color: #b3422f; border: none;
}
html[data-theme] body.quote-active #page-quotes .qg-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; border: none; border-radius: 9999px;
  font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
html[data-theme] body.quote-active #page-quotes .qg-link-btn .material-symbols-outlined { font-size: 17px; color: inherit; }
html[data-theme] body.quote-active #page-quotes .qg-link-primary,
html[data-theme] body.quote-active #page-quotes .qg-link-ghost {
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.quote-active #page-quotes .qg-link-primary:hover,
html[data-theme] body.quote-active #page-quotes .qg-link-ghost:hover {
  background: var(--mid-surface-4); color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qg-link-send {
  background: var(--lime); color: var(--on-lime); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
}
html[data-theme] body.quote-active #page-quotes .qg-link-send:hover { background: #e4ff85; }

/* Chat search FAB: it was pinned at bottom 24px — directly BEHIND the floating
   nav pill (the "ghost card" peeking out). Lift it above the nav. */
@media (max-width: 900px) {
  html[data-theme] body.chat-active .chat-search-fab {
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    right: 20px !important;
  }
  html[data-theme] body.chat-active .chat-search-pop:not([hidden]) {
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══ DEAL/CONTACT PAGE (mobile) — true fullscreen ═══
   It was pinned top:58 / bottom:88px-above-nav, so the topbar and the leads
   board peeked around it and the content was squeezed. Now it covers the
   whole viewport (like the chat thread) and scrolls internally. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 100dvh; z-index: 1200;
  }
}
/* The scroll lives inside the page; last card clears the bottom edge */
html[data-theme] .detail-fullpage .dlp-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage .dlp-scroll {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

/* Deal/contact page: nav pill stays visible (page sits BELOW the nav, which
   is z-100), and the internal scroll already ends with nav clearance. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) { z-index: 60; }
}

/* Back button: bare arrow — no disc/oval chrome (mobile + desktop) */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow,
html[data-theme] #contactDetailContent .dlp-backrow {
  background: transparent; box-shadow: none; border: none; border-radius: 0;
  width: 42px; height: 42px; padding: 0; justify-content: flex-start;
  color: var(--mid-text);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow .material-symbols-outlined { font-size: 22px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-backrow:hover { color: var(--mid-primary); background: transparent; }

/* ═══ DEAL/CONTACT PAGE (mobile) — REAL in-flow page, window scroll ═══
   The fixed-overlay version always scrolled inside a container (no status-bar
   tap, height squeezed by the nav). On mobile the open panel now becomes a
   normal block in the document: the board hides underneath, the body unlocks,
   the WINDOW scrolls, and the nav pill floats above like every other page. */
@media (max-width: 768px) {
  /* unlock window scroll even on pages that lock the body (leads kanban) */
  html[data-theme] body.detailpage-open { overflow: visible !important; }
  html[data-theme] body.detailpage-open .shell { display: none !important; }
  html[data-theme] .detail-fullpage:not([hidden]) {
    position: static !important; inset: auto !important;
    height: auto !important; min-height: 100dvh; z-index: auto;
    display: block;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .detail-content {
    position: static !important; height: auto !important;
    display: block; overflow: visible;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp {
    position: static; display: block; min-height: 0;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-scroll {
    overflow: visible; height: auto; flex: none;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* In-flow deal page: clamp HORIZONTAL overflow (the 9-step pipeline strip was
   widening the whole document once ancestors went overflow:visible — cards
   bled past the right edge and the gutters vanished). Vertical stays window. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) {
    overflow-x: clip; max-width: 100vw;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-scroll {
    overflow-x: clip;
    padding: 14px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-stepper-scroll {
    overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-tabs,
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-quotes-tablewrap {
    overflow-x: auto; max-width: 100%;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-card { max-width: 100%; box-sizing: border-box; }
}

/* The content node is ALSO matched by an #id rule (display:flex/overflow:hidden)
   which outranked the class-based in-flow overrides — the .dlp flex item then
   sized itself to the stepper's intrinsic 852px and blew out the layout.
   Override at id strength. */
@media (max-width: 768px) {
  html[data-theme] #dealDetailContent,
  html[data-theme] #contactDetailContent {
    display: block !important; overflow: visible !important;
    position: static !important; height: auto !important;
    width: 100% !important; max-width: 100% !important;
  }
}

/* Deal head card (mobile): amount + the three action discs didn't fit the
   row (316px of content in a 308px card row) — the delete disc spilled past
   the card edge. Tighter gaps + 40px discs + wrap as a safety net. */
@media (max-width: 768px) {
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-head-right {
    gap: 12px; flex-wrap: wrap; min-width: 0; max-width: 100%;
  }
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-head-actions { gap: 8px; margin-left: auto; }
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-icon-btn,
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-del-icon {
    width: 40px; height: 40px;
  }
  html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount { font-size: 26px; }
}

/* ═══ CONTACT DETAIL — sage skin RETIRED 2026-08-06; the page now rides the
   STITCH DEAL block at file end (selectors widened to the contact ids).
   Only the functional layout rules from that era survive here. ═══ */
html[data-theme] #contactDetailPanel[hidden] { display: none !important; background: transparent !important; }
html[data-theme] #contactDetailContent .dlp-scroll { box-sizing: border-box; width: 100%; }
html[data-theme] #contactDetailContent .dl-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 0; }
html[data-theme] #contactDetailContent .dl-field-static { font-size: 13px; color: var(--kb-text); }
html[data-theme] #contactDetailContent .dl-meta { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--kb-line-soft); display: flex; flex-direction: column; gap: 8px; }
html[data-theme] #contactDetailContent .dl-meta-row { display: flex; justify-content: space-between; }
html[data-theme] #contactDetailContent .dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html[data-theme] #contactDetailContent .dl-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html[data-theme] #contactDetailContent .contact-deals { list-style: none; margin: 0; padding: 0; }
html[data-theme] #contactDetailContent .contact-deals .deal-link { padding: 12px 14px; margin-bottom: 10px; cursor: pointer; }
/* Mobile: gutters, head-row fit, in-flow window scroll (id override exists) */
@media (max-width: 768px) {
  html[data-theme] #contactDetailContent .dlp-scroll {
    overflow-x: clip;
    padding: 14px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] #contactDetailContent .dlp-head-right { gap: 12px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
  html[data-theme] #contactDetailContent .dlp-head-actions { gap: 8px; margin-left: auto; }
  html[data-theme] #contactDetailContent .dlp-icon-btn,
  html[data-theme] #contactDetailContent .dlp-del-icon { width: 40px; height: 40px; }
  html[data-theme] #contactDetailContent .dlp-amount-static { font-size: 26px; }
  html[data-theme] #contactDetailContent .dlp-tabs,
  html[data-theme] #contactDetailContent .dlp-quotes-tablewrap { overflow-x: auto; max-width: 100%; }
  html[data-theme] #contactDetailContent .dlp-card { max-width: 100%; box-sizing: border-box; }
}

/* ═══ THE MESSAGES TAB — same design wherever it is mounted ═══
   This block was scoped to #contactDetailContent and to contact-prefixed ids
   (#contactChatText, #contactChatSend…). The deal and project panels mount the SAME chat
   component, so once Messages became a tab on all three they rendered the same markup with
   none of this styling — a grey bordered box instead of the thread (owner 2026-08-20: "the
   messages UI looks very different in deals"). Scoped to all three panels now, and keyed on
   the classes every mount shares rather than on one prefix's ids. */

/* Bubbles: lead = bone, us = lime wash; sage meta */
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .msg.in .msg-bubble {
  background: var(--mid-base); border: none; color: var(--mid-text);
  border-radius: 16px 16px 16px 6px; box-shadow: none;
  font-size: 13px; line-height: 1.5;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .msg.out .msg-bubble {
  background: var(--lime-tint); border: none; color: #2a3325;
  border-radius: 16px 16px 6px 16px;
  font-size: 13px; line-height: 1.5;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .msg-meta { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .msg-tag { font-size: 11.5px; text-transform: none; letter-spacing: 0; }

/* Messages area sits in a quiet well inside the card */
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .inbox-messages { background: transparent; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat { border: none; background: transparent; }

/* Top bar: plain card-head style, Take over = lime pill, template = bone pill */
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat-bar {
  background: transparent; border: none; border-bottom: 1px solid rgba(42,51,37,0.07);
  padding: 0 0 12px; margin-bottom: 12px;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .cc-window-text {
  font-size: 13px; color: var(--mid-muted); text-transform: none; letter-spacing: 0;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .cc-takeover-btn {
  background: var(--lime) !important; color: var(--on-lime) !important;
  border: none !important; outline: none !important; border-radius: 9999px;
  height: 34px; padding: 0 14px; font-size: 13px; font-weight: 600; box-shadow: none;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .cc-tpl-btn {
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
  border-radius: 9999px; height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500; cursor: pointer;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .cc-tpl-btn:hover { background: var(--mid-surface-4); color: var(--mid-text); }

/* Composer: white well field + circular attach + lime send disc */
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .inbox-compose { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .inbox-compose-row { gap: 8px; align-items: flex-end; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .inbox-compose-row textarea {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
  border-radius: 22px !important; padding: 12px 16px !important;
  font-size: 14px !important; color: var(--mid-text) !important;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .inbox-compose-row textarea::placeholder { color: var(--mid-text-3) !important; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .compose-attach {
  width: 40px; height: 40px; border: none !important; border-radius: 50% !important;
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .compose-attach:hover { background: var(--lime-tint) !important; color: var(--mid-primary) !important; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .cc-send-btn {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--lime); color: var(--on-lime); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55); cursor: pointer;
}
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .cc-send-btn:disabled { opacity: 0.45; box-shadow: none; }
html[data-theme] :is(#contactDetailContent, #dealDetailContent, #projectDetailContent) .contact-chat .cc-send-btn .material-symbols-outlined { color: var(--on-lime); font-size: 20px; }

/* Window bar + date separators in sage; hidden means hidden */
html[data-theme] #contactDetailContent .inbox-banner { display: none !important; }
html[data-theme] #contactDetailContent .msg-datesep span,
html[data-theme] #contactDetailContent .inbox-datesep span {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  border: none; border-radius: 9999px; font-size: 11.5px; padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE VIEW (document modal) — sage design language
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] .qdoc-overlay { background: rgba(35,41,32,0.40); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme] .qdoc-modal {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(42,51,37,0.5);
}
html[data-theme] .qdoc-head { border-bottom: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] .qdoc-h-title { font-size: 14px; font-weight: 600; color: var(--mid-text); }
html[data-theme] .qdoc-h-sub { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] .qdoc-x {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--mid-surface-3); color: var(--mid-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
html[data-theme] .qdoc-x:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] .qdoc-body { background: transparent; }

/* Doc hero: olive brand, lime-tint quote chip */
html[data-theme] .qd-hero { background: transparent; border-bottom: 1px solid rgba(42,51,37,0.07); }
html[data-theme] .qd-brand { color: var(--mid-primary); font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qd-tag {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-qid {
  background: var(--lime-tint); border: none; border-radius: 9999px;
  color: var(--mid-primary); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 6px 14px;
}
html[data-theme] .qd-dates { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] .qd-dates strong { color: var(--mid-text); font-weight: 600; }

/* Prepared-for strip: bone band, display name */
html[data-theme] .qd-prepared { background: var(--mid-base); border: none; }
html[data-theme] .qd-prep-lbl {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-prep-name { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--mid-text); }
html[data-theme] .qd-prep-row { font-size: 13px; color: var(--mid-text-2); }
html[data-theme] .qd-prep-row .material-symbols-outlined { font-size: 15px; color: var(--mid-text-3); }

/* Deliverable stat tiles: bone wells, lime-tint icon discs */
html[data-theme] .qd-stat { background: var(--mid-base); border: none; border-radius: 16px; }
html[data-theme] .qd-stat-ic {
  background: var(--lime-tint); border: none; border-radius: 12px; color: var(--mid-primary);
}
html[data-theme] .qd-stat-ic .material-symbols-outlined { color: var(--mid-primary); }
html[data-theme] .qd-stat-val { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-stat-lbl { color: var(--mid-muted); font-size: 11.5px; }

/* Line-item table: sentence-case sage header, soft rows, olive totals */
html[data-theme] .qd-table thead th {
  text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500;
  color: var(--mid-muted); background: transparent;
  border-bottom: 1px solid rgba(42,51,37,0.10);
}
html[data-theme] .qd-table tbody td {
  border-bottom: 1px solid rgba(42,51,37,0.07); color: var(--mid-text);
}
html[data-theme] .qd-table .qd-amt { font-weight: 600; color: var(--mid-primary); }
html[data-theme] .qd-table .muted, html[data-theme] .qd-table small { color: var(--mid-muted); }

/* Payment schedule + summary */
html[data-theme] .qd-fin-h {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-sched-row { font-size: 13px; color: var(--mid-text-2); border-bottom: 1px solid rgba(42,51,37,0.06); }
html[data-theme] .qd-sched-row strong { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-sum-row { font-size: 13px; color: var(--mid-text-2); }
html[data-theme] .qd-disc span:last-child { color: #b3422f; }
html[data-theme] .qd-divider { border-top: 1px dashed rgba(42,51,37,0.16); background: none; }
html[data-theme] .qd-grand { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-grand span:last-child {
  color: var(--mid-primary); font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
html[data-theme] .qd-summary { background: var(--mid-base); border: none; border-radius: 16px; }

/* Terms + studio block */
html[data-theme] .qd-footdoc { border-top: 1px solid rgba(42,51,37,0.07); }
html[data-theme] .qd-terms ul, html[data-theme] .qd-terms li { color: var(--mid-muted); font-size: 11.5px; }
html[data-theme] .qd-studio { color: var(--mid-text-2); font-size: 11.5px; }
html[data-theme] .qd-studio strong { color: var(--mid-text); }

/* Footer actions: bone pill + lime CTA */
html[data-theme] .qdoc-foot { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] .qdoc-foot .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 9999px; height: 42px; font-size: 13px; font-weight: 500;
}
html[data-theme] .qdoc-foot .button.ghost:hover { background: var(--mid-surface-4) !important; color: var(--mid-text) !important; }
html[data-theme] .qdoc-foot .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important;
  border: none !important; border-radius: 9999px; height: 42px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
}
html[data-theme] .qdoc-foot .button.primary:hover { background: #e4ff85 !important; }
html[data-theme] .qdoc-foot .button .material-symbols-outlined { color: inherit; }

/* Basic (no line items) variant */
html[data-theme] .qdoc-chip { background: var(--mid-badge); border: none; border-radius: 9999px; color: var(--mid-text-2); font-size: 11.5px; padding: 4px 10px; }
html[data-theme] .qdoc-total-big { color: var(--mid-primary); font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qdoc-brand { color: var(--mid-primary); font-weight: 600; }

/* ═══ QUOTE DOC — metric consistency pass (app type ramp + spacing scale) ═══ */

/* Uniform section padding (22px like cards), no decorative glow */
html[data-theme] .qd-hero { padding: 20px 22px; }
html[data-theme] .qd-hero::before { display: none; }
html[data-theme] .qd-prepared { padding: 16px 22px; gap: 4px; }
html[data-theme] .qd-stats { padding: 16px 22px; gap: 12px; }
html[data-theme] .qd-table-wrap { padding: 4px 22px 14px; }
html[data-theme] .qd-fin { padding: 4px 22px 16px; gap: 14px; }
html[data-theme] .qd-footdoc { padding: 16px 22px 20px; }
html[data-theme] .qdoc-head { padding: 16px 22px; }
html[data-theme] .qdoc-foot { padding: 14px 22px; }

/* Type ramp: display brand, sentence-case 12px labels, 13.5 body, 11px metas */
html[data-theme] .qd-brand { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qd-tag { letter-spacing: 0; margin-top: 3px; font-size: 11.5px; }
html[data-theme] .qd-prep-name { font-size: clamp(20px, 2.4vw, 24px); }
html[data-theme] .qd-table { font-size: 13px; }
html[data-theme] .qd-table tbody td { padding: 12px 0; }
html[data-theme] .qd-table thead th { padding: 0 0 8px; }
html[data-theme] .qd-table td small,
html[data-theme] .qd-table .qd-sub { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] .qd-sched-row { padding: 9px 0; }
html[data-theme] .qd-sched-row:last-child { border-bottom: none; }
html[data-theme] .qd-summary { padding: 16px; }
html[data-theme] .qd-sum-row { padding: 4px 0; }
html[data-theme] .qd-grand { padding-top: 8px; font-size: 14px; }
html[data-theme] .qd-stat { padding: 12px 14px; gap: 10px; }
html[data-theme] .qd-stat-ic { width: 38px; height: 38px; }
html[data-theme] .qd-stat-ic .material-symbols-outlined { font-size: 18px; }
html[data-theme] .qd-stat-val { font-size: 14px; }
html[data-theme] .qd-terms li { line-height: 1.6; }
html[data-theme] .qdoc-h-title { font-size: 14px; }

/* Mobile: same 16px gutters as the rest of the app */
@media (max-width: 600px) {
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-fin,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 16px; padding-right: 16px; }
  html[data-theme] .qd-brand { font-size: 22px; }
  html[data-theme] .qd-prep-name { font-size: 20px; }
}

/* ═══ Deal-page stage suggestion — sage card (was the blue-tinted box) ═══ */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 18px 22px; margin-bottom: 14px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted); margin-bottom: 8px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-head .material-symbols-outlined {
  font-size: 16px; color: var(--mid-primary);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-move {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--mid-text-2); margin-bottom: 4px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-move strong { color: var(--mid-primary); font-weight: 600; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-move .material-symbols-outlined { font-size: 16px; color: var(--mid-text-3); }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-reason {
  font-size: 13px; line-height: 1.5; color: var(--mid-muted); margin-bottom: 14px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-actions { display: flex; gap: 8px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-actions .button {
  height: 38px; padding: 0 18px; border: none !important; border-radius: 9999px;
  font-size: 13px;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-actions .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .deal-suggestion-actions .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important; font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR — sage redesign (light theme, ≥769px)
   Soft sage panel · pill nav items · dark-olive active with lime filled icon
   (the inverse of the mobile pill: light panel, dark active pill)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 961px) {
  html[data-theme] .app-sidebar {
    background: var(--mid-surface); border: none;
    box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 24px 48px -24px rgba(42,51,37,0.18);
    padding: 26px 14px 18px;
  }
  /* Brand block: olive wordmark, sentence-case sub */
  html[data-theme] .brand-block { padding: 0 12px 20px; margin-bottom: 10px; border-bottom: 1px solid rgba(42,51,37,0.07); }
  html[data-theme] .brand-block strong {
    font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text);
  }
  html[data-theme] .brand-block span {
    font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    color: var(--mid-muted);
  }
  /* Items: 44px pills */
  html[data-theme] .nav-list { gap: 6px; }
  html[data-theme] .app-sidebar .nav-item {
    min-height: 44px; border: none; border-radius: 9999px; padding: 0 16px;
    font-size: 13px; font-weight: 500; color: var(--mid-text-2);
    background: transparent; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    font-size: 20px; color: var(--mid-text-3);
    transition: color var(--dur-1) var(--ease);
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) {
    background: var(--mid-base); color: var(--mid-text);
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) .material-symbols-outlined { color: var(--mid-text-2); }
  /* Active: dark-olive pill, bone text, lime FILLED icon */
  html[data-theme] .app-sidebar .nav-item.active {
    background: #2a3325 !important; color: #edeee4 !important;
    box-shadow: 0 8px 18px -8px rgba(42,51,37,0.45);
  }
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    color: var(--lime); font-variation-settings: 'FILL' 1;
  }
  /* Unread/active dots ride the lime */
  html[data-theme] .app-sidebar .nav-item .nav-dot,
  html[data-theme] .app-sidebar .nav-item.active::after { color: var(--lime); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETUP PAGE — sage treatment (light theme)
   Standard page head · pill tabs · borderless cards · app type ramp
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head: display title, actions float top-right (Discard bone, Save lime) */
.sg-setup-head { display: none; }
html[data-theme] body.setup-active .sg-setup-head { display: block; }
html[data-theme] body.setup-active .sg-setup-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.setup-active #page-setup { position: relative; }
html[data-theme] body.setup-active #page-setup .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.setup-active #page-setup .page-heading > div:first-of-type { display: none; }
html[data-theme] body.setup-active #page-setup .setup-head-actions { display: flex; gap: 8px; }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button {
  height: 38px; min-height: 38px; padding: 0 16px; border: none !important; border-radius: 9999px;
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
  background: var(--mid-surface-3); color: var(--mid-text-2); box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .setup-head-actions .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] body.setup-active #page-setup .setup-head-actions .button.primary:hover { background: #e4ff85 !important; }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button .material-symbols-outlined { font-size: 16px; color: inherit; }

/* Tabs: the channel-pill component */
html[data-theme] body.setup-active #page-setup .setup-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 20px; margin: 0;
  background: transparent; border: none; scrollbar-width: none;
}
html[data-theme] body.setup-active #page-setup .setup-tabs::-webkit-scrollbar { display: none; }
html[data-theme] body.setup-active #page-setup .setup-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px; border: none !important; border-radius: 9999px;
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  text-transform: none; letter-spacing: 0;
}
html[data-theme] body.setup-active #page-setup .setup-tab .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
html[data-theme] body.setup-active #page-setup .setup-tab:hover:not(.is-active) { color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-tab.is-active {
  background: #2a3325 !important; color: #edeee4 !important; box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .setup-tab.is-active .material-symbols-outlined { color: var(--lime); }

/* Section cards: borderless sage cards, sentence-case heads */
html[data-theme] body.setup-active #page-setup .panel.setup-section {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 20px 22px;
}
html[data-theme] body.setup-active #page-setup .setup-section .eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted); margin: 0 0 2px;
}
html[data-theme] body.setup-active #page-setup .setup-section h2 {
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mid-text);
  margin: 0 0 16px;
}
/* Field ramp: sentence-case 12px labels, 11.5px hints, 14px gaps */
html[data-theme] body.setup-active #page-setup .setup-section label > span {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.setup-active #page-setup .setup-section label > small {
  font-size: 11.5px; color: var(--mid-text-3); line-height: 1.5;
}
html[data-theme] body.setup-active #page-setup .form-grid { gap: 16px; }
html[data-theme] body.setup-active #page-setup .setup-section label { gap: 6px; }
/* Buttons inside sections: standard pills */
html[data-theme] body.setup-active #page-setup .setup-section .button {
  border: none !important; border-radius: 9999px; font-size: 13px; font-weight: 500;
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.setup-active #page-setup .setup-section .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-section .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
}

/* Mobile rhythm */
@media (max-width: 768px) {
  html[data-theme] body.setup-active .sg-setup-head .sg-display { font-size: 30px; margin: 6px 0 20px; }
  html[data-theme] body.setup-active #page-setup .panel.setup-section { border-radius: 20px; padding: 18px 16px; }
}

/* Setup right rail (webhook/info cards): same sage card language */
html[data-theme] body.setup-active #page-setup .setup-aside .panel,
html[data-theme] body.setup-active #page-setup .setup-layout > aside .panel,
html[data-theme] body.setup-active #page-setup .panel {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
html[data-theme] body.setup-active #page-setup .panel .eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.setup-active #page-setup .panel h3 {
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mid-text);
}
html[data-theme] body.setup-active #page-setup .panel .button {
  border: none !important; border-radius: 9999px; font-size: 12.5px; font-weight: 500;
  background: var(--mid-surface-3); color: var(--mid-text-2); box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .panel .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .panel code,
html[data-theme] body.setup-active #page-setup .panel pre {
  background: var(--mid-base); border: none; border-radius: 12px;
  color: var(--mid-text-2); font-size: 11.5px;
}
html[data-theme] body.setup-active #page-setup .panel .muted,
html[data-theme] body.setup-active #page-setup .panel small { color: var(--mid-muted); }

/* ═══ QUOTE DOC — FINAL spacing reconciliation ═══
   Root cause of the inconsistency: my earlier .qd-fin override added 22px
   padding to the 2-col WRAPPER while its children (.qd-sched/.qd-summary)
   kept their own 24px — doubling the gutter on the finance band (desktop AND
   mobile). Fix: wrapper holds ZERO padding; every section owns exactly one
   gutter — 22px desktop / 16px mobile — and the summary is a plain column
   (no rounded bone box), so the vertical divider runs the full band height. */
html[data-theme] .qd-fin {
  padding: 0; margin-top: 0;
  border-top: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] .qd-sched {
  padding: 20px 22px; background: transparent;
  border-right: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] .qd-summary {
  padding: 20px 22px; background: transparent; border-radius: 0;
}
html[data-theme] .qd-hero      { padding: 20px 22px; }
html[data-theme] .qd-prepared  { padding: 18px 22px; }
html[data-theme] .qd-stats     { padding: 18px 22px; }
html[data-theme] .qd-table-wrap{ padding: 8px 22px 16px; }
html[data-theme] .qd-footdoc   { padding: 20px 22px; }
html[data-theme] .qdoc-head    { padding: 16px 22px; }
html[data-theme] .qdoc-foot    { padding: 16px 22px; }

@media (max-width: 600px) {
  html[data-theme] .qdoc-modal { border-radius: 24px 24px 0 0; }
  html[data-theme] .qd-fin { border-top: 1px solid rgba(42,51,37,0.07); }
  html[data-theme] .qd-sched {
    padding: 18px 16px; border-right: none;
    border-bottom: 1px solid rgba(42,51,37,0.07);
  }
  html[data-theme] .qd-summary { padding: 18px 16px; }
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 16px; padding-right: 16px; }
}

/* ═══ QUOTE DOC v2 — line-per-resource, two-line date, wider gutters, centered
   mobile footer (these come last, so they win over the sage95 block) ═══ */

/* Wider, uniform gutters: 28px desktop / 20px mobile */
html[data-theme] .qd-hero      { padding: 22px 28px; }
html[data-theme] .qd-prepared  { padding: 18px 28px; }
html[data-theme] .qd-stats     { padding: 18px 28px; }
html[data-theme] .qd-table-wrap{ padding: 8px 28px 18px; }
html[data-theme] .qd-footdoc   { padding: 22px 28px; }
html[data-theme] .qd-sched     { padding: 20px 28px; }
html[data-theme] .qd-summary   { padding: 20px 28px; }
html[data-theme] .qdoc-head    { padding: 18px 28px; }
html[data-theme] .qdoc-foot    { padding: 16px 28px; }

/* Service description — one resource per line */
html[data-theme] .qd-svc-desc { margin-top: 5px; }
html[data-theme] .qd-svc-line { font-size: 11.5px; line-height: 1.6; color: var(--mid-muted); }
html[data-theme] .qd-svc-name { font-size: 14px; font-weight: 500; color: var(--mid-text); }

/* Date cell — main on line 1, time-of-day muted on line 2; clear gap to amount */
html[data-theme] .qd-table td.qd-date,
html[data-theme] .qd-table th.qd-date {
  text-align: left; padding-left: 16px; padding-right: 20px;
  white-space: nowrap; vertical-align: top;
}
html[data-theme] .qd-date-main { font-size: 13px; color: var(--mid-text); white-space: nowrap; }
html[data-theme] .qd-date-sub { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; white-space: nowrap; }
/* Amount shrinks to its content so it never collides with the date */
html[data-theme] .qd-table td.qd-amt,
html[data-theme] .qd-table th.qd-amt {
  width: 1%; padding-left: 16px; white-space: nowrap; vertical-align: top;
}
/* Service column takes the slack */
html[data-theme] .qd-table td.qd-svc,
html[data-theme] .qd-table th:first-child { width: auto; }

@media (max-width: 600px) {
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qd-sched,
  html[data-theme] .qd-summary,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 20px; padding-right: 20px; }
  /* Footer buttons centered, equal width */
  html[data-theme] .qdoc-foot { justify-content: center; gap: 10px; }
  html[data-theme] .qdoc-foot .button { flex: 1 1 0; max-width: 220px; justify-content: center; }
  /* Tighter date gap on small screens */
  html[data-theme] .qd-table td.qd-date,
  html[data-theme] .qd-table th.qd-date { padding-right: 14px; padding-left: 0; }
}

/* ═══ QUOTE MODAL — bottom-drawer (mobile): grip + slide-up/down ═══ */
.qdoc-grip { display: none; width: 40px; height: 4px; border-radius: 9999px;
  background: var(--mid-line); margin: 8px auto 2px; flex: 0 0 auto; }
html[data-theme] .qdoc-grip { background: rgba(42,51,37,0.18); }
@keyframes uiSheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes uiSheetDown { from { transform: translateY(0); }    to { transform: translateY(100%); } }
@media (max-width: 600px) {
  .qdoc-overlay { align-items: flex-end; }
  .qdoc-overlay .qdoc-modal { animation: uiSheetUp 0.34s cubic-bezier(0.22,1,0.36,1); }
  .qdoc-overlay .qdoc-modal.is-closing { animation: uiSheetDown 0.24s cubic-bezier(0.4,0,1,1) forwards; }
  .qdoc-grip { display: block; }
}

/* (Removed: an override that force-showed Contacts and hid the "More" button. It
   pushed the row to 8 visible items — wrapping the bar — and with Projects/Finance/
   Setup still hidden it left those pages with no mobile route at all.) */

/* ═══ MOBILE NAV — draggable lime "glider" selector ═══ */
.nav-glider { display: none; }
@media (max-width: 768px) {
  html[data-theme] .nav-glider {
    display: block; position: absolute; top: 50%; left: 0;
    width: 46px; height: 46px; border-radius: 9999px; background: var(--lime);
    transform: translate(-50%, -50%); transform-origin: center; z-index: 0; pointer-events: none;
    transition: left 0.24s cubic-bezier(0.34,1.2,0.5,1),
                transform var(--dur-fast) var(--ease),
                width var(--dur) var(--ease), height var(--dur) var(--ease);
  }
  html[data-theme] .app-sidebar.nav-shrink .nav-glider { width: 38px; height: 38px; }
  /* icons ride above the glider; active no longer paints its own lime disc */
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined { position: relative; z-index: 1; }
  /* At rest the glider sits on the ACTIVE item, so the active icon must be dark ink —
     it was grey (--mid-text-3) on lime, which read as an empty lime disc with the icon
     effectively invisible. `.nav-cur` (set by the drag JS) handles the dragging case;
     this covers rest state without depending on that class being applied. */
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    background: transparent; color: #2a3325; font-variation-settings: 'FILL' 1;
  }
  /* whichever item the glider is over (active at rest, or the drag target) = dark filled */
  html[data-theme] .app-sidebar .nav-item.nav-cur .material-symbols-outlined {
    color: #2a3325; font-variation-settings: 'FILL' 1;
  }
}

/* Glider lives inside the nav-list and is positioned by PERCENTAGE, so it
   tracks the pill's shrink/grow for free (no stale pixel coordinates). */
@media (max-width: 768px) {
  .nav-list { position: relative; }
}

/* Glider drag perf: GPU-isolate transform/width, and let JS own touches on the
   nav so the browser doesn't intercept the horizontal drag. */
@media (max-width: 768px) {
  html[data-theme] .nav-glider { will-change: transform, width; }
  html[data-theme] .app-sidebar { touch-action: none; }
}

/* ═══ Card reveal-on-scroll (Leads / Contacts / Chat) ═══
   Cards start hidden and slide up (large travel) as they enter the viewport —
   on load and while scrolling. IntersectionObserver-driven (.rv → .rv-in). */
:is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv { opacity: 0; }
:is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv-in {
  animation: cardReveal 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--rvd, 0ms);
}
@keyframes cardReveal { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  :is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv { opacity: 1; }
  :is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv-in { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SETUP PAGE — borderless bone wells (match the modals / quote / login).
   The app-wide "white-well + grey outline" design-system block (~styles.css:8079,
   html[data-theme]-prefixed, !important) forces every setup input to white +
   #c0c6d6 border. Appended LAST here with the SAME id-level specificity → wins on
   source order, flipping all setup fields (every tab) to bone + no border.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
html[data-theme] body.setup-active #page-setup select,
html[data-theme] body.setup-active #page-setup textarea,
html[data-theme] body.setup-active #page-setup .qc-svc input,
html[data-theme] body.setup-active #page-setup .qc-svc select,
html[data-theme] body.setup-active #page-setup .team-role-select {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--mid-text) !important;
}
html[data-theme] body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]):focus,
html[data-theme] body.setup-active #page-setup select:focus,
html[data-theme] body.setup-active #page-setup textarea:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Holdouts: the credential fields live in #setupForm and #systemPrompt has a
   2-ID white rule (styles.css:7534). Match those with 2 IDs to win outright. */
html[data-theme] #page-setup #setupForm input:not([type=checkbox]):not([type=radio]),
html[data-theme] #page-setup #setupForm select,
html[data-theme] #page-setup #setupForm textarea,
html[data-theme] #page-setup #systemPrompt {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--mid-text) !important;
}

/* Team table — the current user can't change their OWN role or deactivate
   themselves, so those controls are `disabled` and were rendering at opacity 0.5
   (greyed-out form boxes that look out of place). Render the disabled ones as
   clean static labels instead. Enabled controls (other users) keep the bone
   dropdown / sage pill. */
html[data-theme] body.setup-active #page-setup .team-table .team-role-select:disabled {
  opacity: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--mid-text-2) !important;
  -webkit-appearance: none !important; appearance: none !important;
  background-image: none !important;       /* drop the dropdown chevron */
  padding-left: 2px !important; cursor: default;
}
html[data-theme] body.setup-active #page-setup .team-table .button:disabled {
  opacity: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--mid-muted) !important;
  cursor: default;
}
/* Mask Chrome autofill blue on setup inputs too. */
html[data-theme] body.setup-active #page-setup input:-webkit-autofill,
html[data-theme] body.setup-active #page-setup input:-webkit-autofill:hover,
html[data-theme] body.setup-active #page-setup input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
}

/* ── WhatsApp softphone incoming-call card ──────────────────────────────────── */
#softphone {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999; width: 300px;
  display: none;
  background: var(--mid-surface-3, #252b2e); color: var(--mid-text, #dee3e8);
  border: 1px solid var(--mid-line, #3e484f); border-radius: 16px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.6); padding: 18px; font-family: inherit;
}
#softphone.is-open { display: block; animation: sp-slide-up 240ms cubic-bezier(.16,1,.3,1); }
.sp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mid-primary, #38bdf8); color: #00354a;
  display: flex; align-items: center; justify-content: center;
}
/* Pulsing ring while the call is ringing — draws the eye to a time-critical event. */
#softphone.is-ringing .sp-avatar { animation: sp-pulse 1.4s ease-out infinite; }
@keyframes sp-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56,189,248,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}
/* Mobile: bottom-center, full-width-ish so it can't hide behind a FAB. */
@media (max-width: 600px) {
  #softphone { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #softphone.is-open { animation: none; }
  #softphone.is-ringing .sp-avatar { animation: none; box-shadow: 0 0 0 3px rgba(56,189,248,.5); }
}

/* Light theme: --mid-danger is a darker brick (#b3422f), so the dark-tuned
   #3a0c08 label inline-styled on the Decline/Hang-up buttons drops to ~2:1.
   Force white text in light only (inline style needs !important to lose). */
html[data-theme] #sp-reject,
html[data-theme] #sp-hangup { color: #ffffff !important; }

/* Quote-builder field validation error ring. */
.field-error {
  outline: 2px solid var(--mid-danger, #ff7a70) !important;
  outline-offset: 1px;
  border-color: var(--mid-danger, #ff7a70) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROMOTE SAGE DASHBOARD TO DARK  (dual-tree merge, step 1 — dashboard)
   Goal: dark = the SAME Sage layout the user approved in light, just recolored.
   The Sage tree (.sage-dash / .sg-*) is token-driven (var(--mid-*)), so showing
   it under dark tokens recolors it for free. The old .nx-* dashboard stays in the
   DOM but hidden (dormant / reversible — delete this block to revert). Mirrors the
   light structural rules at styles.css ~8433-8438, 8722, 10047, 8769.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body.dash-active .sage-dash { display: block; }
html[data-theme="dark"] body.dash-active #page-dashboard :is(.nx-kpis, .nx-chart-card, .nx-split) { display: none; }
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading > div:first-of-type { display: none; }
html[data-theme="dark"] body.dash-active #page-dashboard { position: relative; }
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; width: auto; grid-template-columns: none; gap: 0;
}
@media (max-width: 768px) {
  html[data-theme="dark"] body.dash-active #page-dashboard .page-heading { top: 2px; }
}
/* Reference typeface for the dark Sage surface so it reads like light recolored. */
html[data-theme="dark"] body.dash-active .sage-dash,
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading,
html[data-theme="dark"] body.dash-active .sage-dash :is(input, select, textarea, button):not(.material-symbols-outlined) {
  font-family: var(--sans);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-SAGE PALETTE (dashboard scope, step 1)
   The Sage layout is now shown in dark, but it was inheriting the old midnight
   tokens (#0f1418 base / cyan accent). Redefine the --mid-* set on the dashboard
   container so every token-driven .sg-* card recolors at once: #2a2a2a base,
   cards stepped up, LIME (#d9ff5e) as the single accent (text + fill — lime on
   #2a2a2a is ~13:1, so unlike light it can be text here too). Scoped to the
   dashboard for now; we widen it to the whole app once it's approved.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] :is(#page-dashboard, #page-leads) {
  --mid-base: #2a2a2a;
  --sg-surface: #333333;       /* Sage card/pill white → dark */        /* page                       */
  --mid-surface: #333333;     /* cards / sidecards          */
  --mid-surface-2: #3c3c3c;   /* raised / heads             */
  --mid-surface-3: #444444;   /* hover / pipeline dots      */
  --mid-surface-4: #4f4f4f;   /* deeper hover / tracks      */
  --mid-deep: #2f2f2f;        /* list enclosure             */
  --mid-badge: #3f3f3f;       /* badge / avatar bg          */
  --mid-lowest: #242424;      /* input wells (below base)   */
  --mid-line: #4a4a4a;        /* outlines / dividers        */
  --mid-text: #ededed;        /* primary text               */
  --mid-text-2: #bcbcbc;      /* secondary text             */
  --mid-text-3: #8f8f8f;      /* faint text / icons         */
  --mid-muted: #9b9b9b;       /* muted / hints              */
  --mid-primary: #d9ff5e;     /* lime accent — links/values */
  --mid-accent: #d9ff5e;      /* lime — solid fills/buttons */
  --mid-on-accent: #2a3325;   /* dark ink on lime           */
  --mid-tertiary: #ffc176;    /* warm accent                */
  --mid-danger: #ff7a70; --mid-ok: #7ee29a;      /* readable red on dark       */
  --mid-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
  --lime: #d9ff5e;
  --on-lime: #1a2000;
  --lime-tint: rgba(217,236,79,0.14);
}

/* Dark-Sage: the Sage cards hardcode near-white backgrounds (var(--sg-surface, #fdfdf8), #d6d9ca)
   and white-tinted textures that the token palette can't reach. Re-point them at
   the dark surfaces in dark only (light keeps its exact hardcoded values). */
html[data-theme="dark"] #page-dashboard .sg-card { background: var(--mid-surface); }
html[data-theme="dark"] #page-dashboard .sg-pri-grey,
html[data-theme="dark"] #page-dashboard .sg-listcard-grey { background: var(--mid-surface-2); }
html[data-theme="dark"] #page-dashboard .sg-listcard-grey .sg-row:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] #page-dashboard .sg-tile-dots {
  background-color: var(--mid-surface-3);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.4px);
}
html[data-theme="dark"] #page-dashboard .sg-tile-stripe {
  background: repeating-linear-gradient(90deg, rgba(217,236,79,0.5) 0 3px, var(--mid-surface-3) 3px 7px);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-SAGE — LEADS (kanban + list), mirrors the light rules at ~8335-8388,
   9637-9733, 10093-10105. Palette tokens already extended to #page-leads above.
   ════════════════════════════════════════════════════════════════════════════ */
/* Promote the Sage leads header (old header hidden, same as light). */
html[data-theme="dark"] body.leads-active .sg-leads-head { display: block; }
html[data-theme="dark"] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme="dark"] body.leads-active #page-leads .page-heading { display: block; margin: 0; padding: 0; background: none; border: none; }
html[data-theme="dark"] body.leads-active #page-leads .page-heading > div:first-of-type { display: none; }
html[data-theme="dark"] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }

/* Kanban columns — flat dark panels, no glass. */
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 18px; box-shadow: none;
}
/* (Header pill shape now comes from the de-themed structural rule at ~8343 —
   identical in both themes. No dark-specific override needed.) */
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-title { color: var(--mid-muted); letter-spacing: 0.07em; }
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col-meta { color: var(--mid-muted); }
/* Ghost count: match light's exact geometry (font-size 40px, top -2px from rules
   ~8355/9704) so only the COLOUR differs between themes. */
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kb-ghost {
  display: block; position: absolute; top: -2px; right: 14px; font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.05); pointer-events: none; user-select: none;
}
/* Hot lead column — lime "act now" tint. */
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] { background: rgba(217,236,79,0.10); }
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: var(--lime); }
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kb-ghost { color: rgba(217,236,79,0.22); }

/* Cards — dark surface, borderless, soft shadow. */
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card {
  background: var(--sg-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 16px -8px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card:hover {
  border: none; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 14px 28px -10px rgba(0,0,0,0.55);
}
html[data-theme="dark"] :is(#page-leads, #page-projects) .kanban-card-amount { color: var(--mid-primary); }
/* Selection checkbox — was white-on-white. */
html[data-theme="dark"] :is(#page-leads, #page-projects) .kanban-card-check { background: var(--mid-lowest); border-color: var(--mid-line); color: var(--mid-on-accent); }
html[data-theme="dark"] :is(#page-leads, #page-projects) .kanban-card.is-checked .kanban-card-check { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
/* Inline edit fields on a card. */
html[data-theme="dark"] #page-leads .detail-amount-row input,
html[data-theme="dark"] #page-leads .edit-textarea { background: rgba(255,255,255,0.06); }

/* Origin pills (live / quote / crm). */
html[data-theme="dark"] body.leads-active #page-leads .op-pill-live { background: rgba(217,236,79,0.14); color: var(--lime); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-live .live-dot { background: var(--lime); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-quote { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-crm { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* List view stage pills — keep the dark base for bad/hot; add good. */
html[data-theme="dark"] body.leads-active .ll-stage.good { background: rgba(122,141,35,0.20); color: #b6d36a; }

/* Dark leads list: drop the solid enclosure box (bg/border/radius/shadow) so the
   rows sit flat on the page; the row dividers + thead strip carry the structure. */
html[data-theme="dark"] body.leads-active #page-leads .leads-list {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}

/* Dark leads list: the header's solid 10px "--mid-deep strip" spacer (a constant-gap
   trick for the enclosure box) reads as a phantom card now the box is transparent.
   Keep only the soft drop shadow. */
html[data-theme="dark"] body.leads-active #page-leads .lead-rowhead {
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME = the approved light (Sage) UI, recoloured. The entire light rule
   set is now un-gated ([data-theme] matches both), so dark renders the SAME
   structure; this block is the ONLY thing that differs — the colour tokens.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;
  --mid-base: #2a2a2a;        /* page                         */
  --mid-surface: #333333;     /* cards / sidebar              */
  --mid-surface-2: #3c3c3c;   /* raised / topbar / modals     */
  --mid-surface-3: #444444;   /* hover / table head / dots    */
  --mid-surface-4: #4f4f4f;   /* deeper hover / tracks        */
  --mid-deep: #2f2f2f;        /* list enclosure               */
  --mid-badge: #3f3f3f;       /* badge / avatar bg            */
  --mid-lowest: #242424;      /* input wells                  */
  --mid-line: #4a4a4a;        /* outlines / dividers          */
  --mid-text: #ededed;        /* primary text                 */
  --mid-text-2: #bcbcbc;      /* secondary text               */
  --mid-text-3: #8f8f8f;      /* faint text / icons           */
  --mid-muted: #9b9b9b;       /* muted / hints                */
  --mid-primary: #d9ff5e;     /* accent — links / values      */
  --mid-accent: #d9ff5e;      /* accent — fills / buttons      */
  --mid-on-accent: #2a3325;   /* ink on lime                  */
  --mid-tertiary: #ffc176;    /* warm accent                  */
  --mid-danger: #ff7a70; --mid-ok: #7ee29a;      /* readable red on dark         */
  --mid-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
  --sg-surface: #333333;      /* Sage card/pill white → dark  */
  --lime: #d9ff5e;
  --on-lime: #1a2000;
  --lime-tint: rgba(217,236,79,0.14);
  /* Old light-build aliases that some Sage rules still read — map to dark too. */
  --surface: #333333; --panel: #2f2f2f; --ink: #ededed; --ink-2: #bcbcbc;
  --muted: #9b9b9b; --bg: #2a2a2a; --line: #4a4a4a; --primary: #d9ff5e;
}

/* Dark chat: the "sent by us" bubble resolves to a faint lime-tint with DARK
   ink (built for a white page) → unreadable on dark. Give dark a readable bubble:
   subtle lime-tinted dark surface + light text. */
html[data-theme="dark"] body.chat-active .msg.out .msg-bubble,
html[data-theme="dark"] #chatDetailContent .msg.out .msg-bubble {
  background: rgba(217,236,79,0.16) !important;
  color: var(--mid-text) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — chat thread header: the contact NAME must stay readable. Secondary
   actions (Lead / Contact / Request-call) collapse to icon-only buttons; the
   primary "Take over" keeps its label; the avatar is dropped (the back button
   already gives context). Frees the row so the full name shows.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .inbox-thread-head { gap: 8px; padding: 12px 12px; }
  .inbox-thread-head #inboxThreadAvatar { display: none; }
  .inbox-thread-head .inbox-thread-who { flex: 1 1 auto; min-width: 0; }
  .inbox-thread-head .inbox-thread-who strong { font-size: 16px; }
  .inbox-thread-head .inbox-thread-actions { gap: 6px; flex: 0 0 auto; }
  /* icon-only: hide the text node via font-size:0, restore the icon */
  .inbox-thread-head .inbox-thread-actions .button.ghost.small {
    font-size: 0; width: 38px; min-width: 38px; height: 38px; padding: 0;
    justify-content: center; border-radius: 10px;
  }
  .inbox-thread-head .inbox-thread-actions .button.ghost.small .inline-icon { font-size: 20px; margin: 0; }
  .inbox-thread-head #inboxTakeoverBtn { padding: 8px 12px; flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
}

/* ════ Smart call button — icon-only, colour-coded by permission state ════
   red = no request / declined · orange = request pending · green = consent given */
button[data-call-status] {
  width: 38px; min-width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
button[data-call-status] .material-symbols-outlined { font-size: 21px; }
.call-state-none .material-symbols-outlined,
.call-state-rejected .material-symbols-outlined { color: var(--mid-danger); }   /* red */
.call-state-pending .material-symbols-outlined  { color: var(--mid-tertiary); } /* orange */
.call-state-granted .material-symbols-outlined  { color: #1f7a37; }             /* green (light) */
html[data-theme="dark"] .call-state-granted .material-symbols-outlined { color: #5dd07f; }

/* Chat thread header: secondary actions (Lead / Contact) are icons, not text,
   at all widths; "Take over" keeps its label. */
.inbox-thread-head .inbox-thread-actions .button.ghost.small {
  font-size: 0; width: 38px; min-width: 38px; height: 38px; padding: 0;
  justify-content: center; border-radius: 10px;
}
.inbox-thread-head .inbox-thread-actions .button.ghost.small .inline-icon { font-size: 20px; margin: 0; }

/* Circular icon buttons in the chat thread header (call + take over + lead/contact). */
button[data-call-status] { border-radius: 50%; }
.inbox-thread-head .inbox-thread-actions .button.ghost.small { border-radius: 50%; }
/* Take over → circular lime icon button (icon conveys state: support_agent ⇄ smart_toy). */
#inboxTakeoverBtn.inbox-takeover-icon {
  width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); border: none; box-shadow: none;
}
#inboxTakeoverBtn.inbox-takeover-icon .material-symbols-outlined { font-size: 22px; color: var(--on-lime); }

/* Web (desktop): drop the Lead / Contact jump buttons from the chat header —
   not needed there. (Still available on mobile where the row is the only nav.) */
@media (min-width: 769px) {
  .inbox-thread-head #inboxViewLeadBtn,
  .inbox-thread-head #inboxViewContactBtn { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE UX — P0 foundation (DESIGN.md §6): one easing token, touch press
   feedback, 44px tap targets. (Animate transform/opacity only.)
   ════════════════════════════════════════════════════════════════════════════ */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

@media (hover: none) and (pointer: coarse) {
  /* Tactile press feedback — touch devices only, so desktop hover is untouched. */
  button:not(:disabled):active,
  .button:not(:disabled):active,
  [role="button"]:active,
  .kanban-card:active, .lead-row:active, .contact-card:active,
  .inbox-row:active, .sg-chip:active, .sg-listcard:active, .nav-link:active, .nav-item:active {
    transform: scale(0.97);
    transition: transform 90ms var(--ease);
  }
  /* Minimum 44px hit area on icon-ish controls (visual can stay smaller via centering). */
  button[data-call-status],
  #inboxTakeoverBtn.inbox-takeover-icon,
  .inbox-back, .inbox-thread-actions .button.ghost.small,
  .leads-view-btn, .ct-pager-btn {
    min-width: 44px; min-height: 44px;
  }
}

/* P1 typography: align digits in money/counts (tabular figures). */
.kanban-card-amount, .lr-val, .sg-chip b, .sg-tile b, .nx-kpi-value,
.ll-val, .dash-kpi-value, .sg-stat-num { font-variant-numeric: tabular-nums; }

/* P1 motion — softphone ring urgency: the card breathes and Accept glows while ringing. */
@keyframes sp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes sp-accept-glow { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 9px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
#softphone.is-open.is-ringing { animation: sp-slide-up 240ms cubic-bezier(.16,1,.3,1), sp-breathe 1.9s ease-in-out 260ms infinite; }
#softphone.is-ringing #sp-accept { animation: sp-accept-glow 1.5s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #softphone.is-open.is-ringing { animation: none; }
  #softphone.is-ringing #sp-accept { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Detail panel (deal / contact) — UNIFORM field sizing. Overrides the scattered
   40px / unset / read-only rules so every input + select is the same height, and
   textareas share one consistent box. (id selector wins over the .editing rules.)
   ════════════════════════════════════════════════════════════════════════════ */
#dealDetailContent .dl-field > input,
#dealDetailContent .dl-field > select,
#contactDetailContent .dl-field > input,
#contactDetailContent .dl-field > select {
  height: 44px; min-height: 44px; box-sizing: border-box;
  padding: 0 12px; border-radius: 10px; line-height: normal;
}
#dealDetailContent .dl-field > textarea,
#contactDetailContent .dl-field > textarea {
  min-height: 88px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; line-height: 1.45;
}
@media (max-width: 768px) {
  #dealDetailContent .dl-field > :is(input, select, textarea),
  #contactDetailContent .dl-field > :is(input, select, textarea) { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Read-only info rows (contact Overview): a fixed LABEL column + a LEFT-aligned
   value, hairline divider, NO box. Overrides the form-field audit's !important
   input background (~8096). Edit mode keeps the boxed inputs.
   ════════════════════════════════════════════════════════════════════════════ */
.dlp-overview-card:not(.editing) .dl-field {
  flex-direction: row; align-items: baseline; justify-content: flex-start;
  gap: 12px; padding: 13px 0; border-bottom: 0;   /* space divides — no hairlines (2026-08-08) */
}
.dlp-overview-card:not(.editing) .dl-field > label {
  flex: 0 0 38%; max-width: 38%; color: var(--mid-muted); font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.dlp-overview-card:not(.editing) .dl-field > input,
.dlp-overview-card:not(.editing) .dl-field > select,
.dlp-overview-card:not(.editing) .dl-field > .dl-field-static {
  flex: 1 1 auto; width: auto !important; height: auto !important; min-height: 0 !important;
  padding: 0 !important; text-align: left !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--mid-text) !important; font-size: 14px;
}

/* Detail-panel "request call" (add_call) button → neutral mono circle, identical to
   the phone icon, so the action row reads as one system (kills the inherited blue).
   Call-state red/orange/green colours stay in the chat-thread header where you act on them. */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn) {
  background: var(--sg-surface, #fdfdf8) !important; box-shadow: none !important;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn) .material-symbols-outlined {
  color: var(--mid-text-2) !important;
}

/* Dark: the neutral call buttons (GSM phone + request-call) were a mid-grey icon on a
   near-bg circle → no separation. Lift the circle (surface-3) + brighten the icon. */
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(.dlp-call, #dealCallBtn, #contactCallBtn) {
  background: var(--mid-surface-3) !important;
}
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(.dlp-call, #dealCallBtn, #contactCallBtn) .material-symbols-outlined {
  color: var(--mid-text) !important;
}

/* Restore the WhatsApp call-permission STATUS colour on the detail-panel call button
   (red none/declined · orange pending · green granted). More specific than the mono
   overrides above, so only THIS button colours — the plain GSM phone stays neutral.
   Sits on the lifted --mid-surface-3 circle, so it still separates from the bg. */
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-none .material-symbols-outlined,
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-rejected .material-symbols-outlined { color: var(--mid-danger) !important; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-pending .material-symbols-outlined { color: var(--mid-tertiary) !important; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-granted .material-symbols-outlined { color: #1f7a37 !important; }
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-granted .material-symbols-outlined { color: #5dd07f !important; }

/* Chat thread header: force the WhatsApp-call + take-over buttons to true circles
   (equal width/height) — the .button padding was making the call button oval. */
.inbox-thread-head .inbox-thread-actions button[data-call-status],
.inbox-thread-head .inbox-thread-actions #inboxTakeoverBtn.inbox-takeover-icon {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
  padding: 0 !important; border-radius: 50% !important; flex: 0 0 auto; aspect-ratio: 1 / 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS page — closed-won delivery + payments (parity with iOS Projects tab).
   Theme-agnostic: uses --mid-* tokens so it recolors correctly in light mode.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-projects .projects-body { max-width: 860px; margin: 0 auto; padding: 6px 4px 120px; }
#page-projects .projects-empty { padding: 40px 8px; text-align: center; color: var(--mid-muted); }

/* Buttons: Projects/Finance had NO dark override, so .button resolved LIGHT tokens.
   Mirror the #page-dashboard .button.* pattern. */
:is(#page-projects,#finBand) .button { background: var(--mid-surface-3); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 9999px; }
:is(#page-projects,#finBand) .button:hover { background: var(--mid-surface-4, var(--mid-surface-2)); border-color: var(--mid-line); }
:is(#page-projects,#finBand) .button.ghost { background: transparent; color: var(--mid-text); border: 1px solid var(--mid-line); }
:is(#page-projects,#finBand) .button.ghost:hover { background: var(--mid-surface-2); border-color: var(--mid-accent); }
:is(#page-projects,#finBand) .button.primary { background: var(--mid-accent); color: var(--mid-on-accent); border: none; }
:is(#page-projects,#finBand) .button.primary:hover { background: var(--mid-accent); filter: brightness(1.06); }

/* Production stat cards — three bento cards (reference "Nexus" layout): eyebrow
   label, big light numeral, small note; middle card accent-tinted. */
:is(#page-projects, #page-dashboard) .proj-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
:is(#page-projects, #page-dashboard) .proj-stat-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 16px;
  transition: border-color var(--dur-fast) var(--ease);
}
:is(#page-projects, #page-dashboard) .proj-stat-card:hover { border-color: color-mix(in srgb, var(--mid-accent) 45%, var(--mid-line)); }
:is(#page-projects, #page-dashboard) .proj-stat-card.is-accent { background: color-mix(in srgb, var(--mid-accent) 12%, var(--mid-surface)); border-color: color-mix(in srgb, var(--mid-accent) 35%, var(--mid-line)); }
:is(#page-projects, #page-dashboard) .proj-stat-val { font-size: 36px; font-weight: 300; letter-spacing: -.02em; color: var(--mid-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
:is(#page-projects, #page-dashboard) .proj-stat-val.proj-warn { color: var(--mid-tertiary, #ffc176); }
:is(#page-projects, #page-dashboard) .proj-stat-lbl { font-size: 11.5px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--mid-muted); }
:is(#page-projects, #page-dashboard) .proj-stat-note { font-size: 11.5px; color: var(--mid-muted); }
:is(#page-projects, #page-dashboard) .proj-stat-note .proj-danger { color: var(--mid-danger, #ff7a70); }
@media (max-width: 700px) { :is(#page-projects, #page-dashboard) .proj-stat-cards { grid-template-columns: 1fr; gap: 10px; } }

/* Status filter pills — reference chip anatomy (rounded-full, label-md 12/500) */
#page-projects .proj-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
#page-projects .proj-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--mid-surface); border: 1px solid var(--mid-line); color: var(--mid-text-2);
  border-radius: 9999px; padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
#page-projects .proj-pill:hover { border-color: var(--mid-accent); color: var(--mid-text); }
#page-projects .proj-pill.is-active { background: var(--mid-accent); color: var(--mid-on-accent); border-color: var(--mid-accent); font-weight: 600; }
#page-projects .proj-pill-n { font-size: 11.5px; font-weight: 500; background: var(--mid-surface-3); color: var(--mid-muted); border-radius: 4px; padding: 1px 7px; }
#page-projects .proj-pill.is-active .proj-pill-n { background: rgba(0,0,0,.16); color: inherit; }

/* Project cards — reference card treatment: 12px radius, hairline border, hover accent */
#page-projects .proj-list { display: flex; flex-direction: column; gap: 12px; }
/* Borderless like the rest of the app's cards — soft shadow instead of an outline */
#page-projects .proj-card {
  background: var(--mid-surface); border: none; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  transition: box-shadow var(--dur-fast) var(--ease);
}
#page-projects .proj-card:hover, #page-projects .proj-card.is-open { box-shadow: 0 4px 14px -4px rgba(42,51,37,0.18); }
#page-projects .proj-card-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left; }
/* Monogram tile — 2-letter initials, no images */
#page-projects .proj-mono { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--mid-surface-2); color: var(--mid-accent-ink); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
#page-projects .proj-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
#page-projects .proj-card-title strong { font-size: 14px; font-weight: 600; color: var(--mid-text); }
#page-projects .proj-card-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-projects .proj-card-date { font-size: 11.5px; color: var(--mid-muted); }
/* Production progress on the collapsed card — scan health without expanding */
#page-projects .proj-card-progress { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; max-width: 360px; margin: 0 16px; }
#page-projects .proj-card-progress-lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#page-projects .proj-card-progress-lbl > span:first-child { font-size: 11.5px; color: var(--mid-muted); }
#page-projects .proj-card-progress-pct { font-size: 11.5px; font-weight: 600; color: var(--mid-accent-ink); flex: 0 0 auto; }
#page-projects .proj-card-progress-track { flex: 1 1 auto; height: 6px; border-radius: 9999px; background: var(--mid-lowest); overflow: hidden; }
#page-projects .proj-card-progress-fill { height: 100%; border-radius: 9999px; background: var(--mid-accent); }
@media (max-width: 700px) { #page-projects .proj-card-progress { display: none; } }
#page-projects .proj-card-value { font-size: 14px; font-weight: 600; color: var(--mid-accent-ink); }
#page-projects .proj-card-status { font-size: 11.5px; font-weight: 600; color: var(--mid-text-2); }
#page-projects .proj-card-data { font-size: 11.5px; color: var(--mid-muted); }
#page-projects .proj-view-payments { text-decoration: none; }
#page-projects .proj-card-bal { font-size: 11.5px; font-weight: 600; color: #ffc176; }
#page-projects .proj-card-bal.is-paid { color: var(--mid-accent-ink); }
#page-projects .proj-card-chev { color: var(--mid-muted); font-size: 20px; transition: transform var(--dur-fast) var(--ease); }
#page-projects .proj-card.is-open .proj-card-chev { transform: rotate(180deg); }

/* Status badge — reference pill anatomy: tinted bg + colored text, 12/500, rounded-full */
:is(#page-projects, #dealDetailPanel, #projectDetailPanel) .proj-badge {
  font-size: 11.5px; line-height: 1; font-weight: 500; border-radius: 9999px;
  padding: 0 10px; height: 24px; box-sizing: border-box; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
#page-projects .proj-st-pending { color: #ffc176; background: rgba(255,193,118,.16); }
#page-projects .proj-st-shot { color: var(--mid-accent-ink); background: rgba(142,213,255,.16); }
#page-projects .proj-st-done { color: var(--mid-on-accent); background: var(--mid-accent); }

/* Inline management panel — two-column grid after a full-width hairline */
#page-projects .proj-manage { padding: 18px 18px; border-top: 1px solid var(--mid-line); display: flex; flex-direction: column; gap: 14px; }
#page-projects .proj-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
#page-projects .proj-manage-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#page-projects .proj-eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--mid-text-2); }
@media (max-width: 900px) { #page-projects .proj-manage-grid { grid-template-columns: 1fr; } }
#page-projects .proj-manage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
:is(#page-projects,#finBand) .proj-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:is(#page-projects,#finBand) .proj-field > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; color: var(--mid-muted); }
:is(#page-projects,#finBand) .proj-field select,
:is(#page-projects,#finBand) .proj-field input,
:is(#page-projects,#finBand) .proj-pay-row input {
  background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text);
  border-radius: 8px; padding: 8px 12px; min-height: 38px; font-size: 14px; width: 100%;
}
/* Reference input focus spec: border flips to primary (global focus ring supplies the halo).
   !important so it also wins over the deal-evt !important border overrides. */
:is(#page-projects,#finBand) :is(input, select, textarea):focus { border-color: var(--mid-accent) !important; }
/* Reference button press affordance (active:scale-95) */
:is(#page-projects,#finBand) .button:active { transform: scale(.97); }
:is(#page-projects,#finBand) .proj-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11.5px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; color: var(--mid-muted); margin-top: 6px; }
:is(#page-projects,#finBand) .proj-pay-sum { color: var(--mid-text-2); letter-spacing: 0; font-weight: 600; }
:is(#page-projects,#finBand) .proj-pay-list { display: flex; flex-direction: column; gap: 8px; }
:is(#page-projects,#finBand) .proj-pay-empty { padding: 4px 0; }
:is(#page-projects,#finBand) .proj-pay-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
:is(#page-projects,#finBand) .proj-pay-del { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
:is(#page-projects,#finBand) .proj-pay-del:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
:is(#page-projects,#finBand) .proj-pay-del .material-symbols-outlined { font-size: 18px; }
:is(#page-projects,#finBand) .proj-add-pay { align-self: flex-start; }
:is(#page-projects,#finBand) .proj-manage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

@media (max-width: 640px) {
  #page-projects .proj-manage-row { grid-template-columns: 1fr; }
  #page-projects .proj-card-head { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT direct-costs rows (Projects page manage panel) — mirror payment rows.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#page-projects,#finBand) .proj-cost-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:6px; font-size:11.5px; line-height:16px; text-transform:uppercase; letter-spacing:.05em; font-weight:500; color:var(--mid-muted); }
:is(#page-projects,#finBand) .proj-cost-list { display:flex; flex-direction:column; gap:8px; }
:is(#page-projects,#finBand) .proj-cost-row { display:grid; grid-template-columns:auto 1fr 1fr auto; gap:8px; align-items:center; }
:is(#page-projects,#finBand) .proj-cost-row input, :is(#page-projects,#finBand) .proj-cost-row select { background:var(--mid-lowest); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:8px; padding:8px 10px; min-height:38px; font-size:13px; min-width:0; }
:is(#page-projects,#finBand) .proj-cost-del { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:8px; color:var(--mid-muted); cursor:pointer; padding:0; }
:is(#page-projects,#finBand) .proj-cost-del:hover { color:var(--mid-danger); border-color:var(--mid-danger); }
:is(#page-projects,#finBand) .proj-cost-del .material-symbols-outlined { font-size:18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT PLAN (installment schedule) — reuses the money-panel field styling.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#finBand, #page-projects) .proj-plan-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
:is(#finBand, #page-projects) .proj-plan-cta { display: flex; gap: 10px; flex-wrap: wrap; align-self: flex-start; }
:is(#finBand, #page-projects) .proj-plan-row { display: flex; flex-direction: column; gap: 8px; }
:is(#finBand, #page-projects) :is(.proj-plan-l1, .proj-plan-l2, .proj-plan-l3) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
:is(#finBand, #page-projects) .proj-plan-l1 .proj-plan-label { flex: 1 1 auto; min-width: 0; }
:is(#finBand, #page-projects) .proj-plan-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 120px; min-width: 0; }
:is(#finBand, #page-projects) .proj-plan-f > span { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--kb-muted, var(--mid-muted)); }
:is(#finBand, #page-projects) .proj-plan-f > input { width: 100%; min-width: 0; }
:is(#finBand, #page-projects) .proj-plan-warn { margin-top: 8px; font-size: 13px; font-weight: 600; color: #b3422f; }
html[data-theme="dark"] :is(#finBand, #page-projects) .proj-plan-warn { color: #ff7a70; }
/* Tap-to-pay: mint/copy a Razorpay link per installment. */
:is(#finBand, #page-projects) .proj-plan-paylink, :is(#finBand, #page-projects) .proj-plan-copylink { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-accent-ink); cursor: pointer; padding: 0; }
:is(#finBand, #page-projects) .proj-plan-paylink:hover, :is(#finBand, #page-projects) .proj-plan-copylink:hover { border-color: var(--mid-accent); }
:is(#finBand, #page-projects) .proj-plan-paylink .material-symbols-outlined, :is(#finBand, #page-projects) .proj-plan-copylink .material-symbols-outlined { font-size: 18px; }
:is(#finBand, #page-projects) .proj-plan-paidok { color: var(--mid-ok, #38bd78); background: rgba(56, 189, 120, 0.14); }
:is(#finBand, #page-projects) .proj-plan-payspacer { width: 34px; }
/* Delivery page block */
:is(#finBand, #page-projects) .proj-deliv-page { display: grid; gap: 8px; margin-top: 4px; }
:is(#finBand, #page-projects) .proj-deliv-page input { background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text); border-radius: 8px; padding: 8px 10px; min-height: 38px; font-size: 13px; }
:is(#finBand, #page-projects) .proj-delivpage-hint { color: var(--mid-muted); }
/* 12-month forecast — the cash brain */
#finBand .fin-f12-legend { margin: 2px 0 12px; }
#finBand .fin-f12-warn { color: #ffc176; font-weight: 700; }
#finBand .fin-f12-chart { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 150px; align-items: end; padding-bottom: 22px; }
#finBand .fin-f12-oh { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--mid-tertiary, #ffc176); opacity: .8; margin-bottom: 22px; }
#finBand .fin-f12-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#finBand .fin-f12-bars { position: relative; flex: 1; display: flex; align-items: flex-end; }
#finBand .fin-f12-solid, #finBand .fin-f12-soft { position: absolute; left: 15%; right: 15%; border-radius: 6px 6px 0 0; }
#finBand .fin-f12-solid { background: var(--mid-accent); }
#finBand .fin-f12-soft { background: var(--mid-accent); opacity: .25; }
#finBand .fin-f12-col.is-gap .fin-f12-solid { background: var(--mid-danger); }
#finBand .fin-f12-col.is-gap .fin-f12-soft { background: var(--mid-danger); opacity: .25; }
#finBand .fin-f12-m { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; }
#finBand .fin-f12-season { color: #ffc176; margin-left: 2px; }
:is(#finBand, #page-projects) .proj-plan-row input { background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text); border-radius: 8px; padding: 8px 10px; min-height: 38px; font-size: 13px; min-width: 0; }
:is(#finBand, #page-projects) .proj-plan-row input[hidden] { display: none; }
:is(#finBand, #page-projects) .proj-plan-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mid-text-2); white-space: nowrap; cursor: pointer; }
:is(#finBand, #page-projects) .proj-plan-mark input { min-height: 0; accent-color: var(--mid-accent); }
:is(#finBand, #page-projects) .proj-plan-del { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
:is(#finBand, #page-projects) .proj-plan-del:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
:is(#finBand, #page-projects) .proj-plan-del .material-symbols-outlined { font-size: 18px; }
/* Status pills — same color language as .fin-age-chip / .finproj-pl. */
:is(#finBand, #page-projects) .proj-plan-pill { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; white-space: nowrap; text-align: center; background: var(--mid-surface-3); color: var(--mid-text-2); }
:is(#finBand, #page-projects) .proj-plan-collected { color: var(--mid-ok, #38bd78); background: rgba(56, 189, 120, 0.14); }
:is(#finBand, #page-projects) .proj-plan-overdue { color: var(--mid-danger); background: rgba(255, 122, 112, 0.16); }
:is(#finBand, #page-projects) .proj-plan-due { color: #ffc176; background: rgba(255, 193, 118, 0.16); }
:is(#finBand, #page-projects) .proj-plan-upcoming { color: var(--mid-muted); background: var(--mid-surface-3); }
@media (max-width: 640px) {
  :is(#finBand, #page-projects) .proj-plan-row { grid-template-columns: 1fr 1fr; }
  :is(#finBand, #page-projects) .proj-plan-pill, :is(#finBand, #page-projects) .proj-plan-mark { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCE / Profitability page. Semantic hues: --mid-primary = profit,
   #ffc176 = cost, #e2953f = overhead, #ff7a70 = loss, #8ed5ff = info.
   ═══════════════════════════════════════════════════════════════════════════ */
#finBand .fin-body { max-width:1040px; margin:0 auto; padding:6px 4px 120px; }
#finBand .fin-empty { padding:40px 8px; text-align:center; color:var(--mid-muted); }
#finBand .num, #finBand .fin-table td, #finBand .fin-kpi-big { font-variant-numeric:tabular-nums; }

#finBand .fin-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
#finBand .fin-month { display:inline-flex; align-items:center; gap:6px; }
#finBand .fin-mnav { width:34px; height:34px; border-radius:9px; background:var(--mid-surface); border:1px solid var(--mid-line); color:var(--mid-text); font-size:16px; cursor:pointer; }
#finBand .fin-mnav:hover { border-color:var(--mid-accent); }
#finBand .fin-mlabel { font-size:16px; font-weight:650; min-width:130px; text-align:center; color:var(--mid-text); }
#finBand .fin-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#finBand .fin-seg { display:inline-flex; background:var(--mid-lowest); border:1px solid var(--mid-line); border-radius:10px; padding:3px; }
#finBand .fin-seg-btn { border:0; background:none; color:var(--mid-muted); font:inherit; font-size:13px; font-weight:600; padding:6px 15px; border-radius:8px; cursor:pointer; }
#finBand .fin-seg-btn.on { background:var(--mid-surface-2); color:var(--mid-text); }

/* Consolidated Finance filter popover — stacked labelled groups (dashboard aesthetic) */
#finBand .fin-fp { width:260px; }
#finBand .fin-fp-group { padding:8px 4px 10px; }
#finBand .fin-fp-group + .fin-fp-group { border-top:1px solid var(--mid-line); }
#finBand .fin-fp-lbl { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mid-muted); padding:0 8px 6px; }
#finBand .fin-fp-month { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 8px; }
#finBand .fin-fp-month span { font-size:14px; font-weight:600; color:var(--mid-text); }
#finBand .fin-fp .fin-seg { margin:0 6px; }

/* Overheads editor when hosted in Setup → Company (styles are otherwise scoped to #finBand) */
#page-setup #setupOverheads .fin-oh-editor { background:transparent; border:none; padding:0; margin:0; box-shadow:none; }
#page-setup #setupOverheads .fin-oh-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
#page-setup #setupOverheads .fin-oh-row { display:grid; grid-template-columns:1fr auto auto auto auto; gap:10px; align-items:center; padding:9px 12px; background:var(--mid-lowest); border:1px solid var(--mid-line); border-radius:9px; }
#page-setup #setupOverheads .fin-oh-row-label, #page-setup #setupOverheads .fin-oh-row-amt { color:var(--mid-text); font-size:13px; }
#page-setup #setupOverheads .fin-oh-row-amt { font-weight:600; }
#page-setup #setupOverheads .fin-oh-row-cat, #page-setup #setupOverheads .fin-oh-row-type { color:var(--mid-muted); font-size:11.5px; }
#page-setup #setupOverheads .fin-oh-del { background:none; border:0; color:var(--mid-muted); cursor:pointer; display:inline-flex; }
#page-setup #setupOverheads .fin-oh-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#page-setup #setupOverheads .fin-oh-in { background:var(--mid-lowest); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:8px; padding:8px 11px; min-height:38px; font-size:13px; }
#page-setup #setupOverheads .fin-oh-in[data-oh="label"] { flex:1 1 160px; }
#page-setup #setupOverheads .fin-oh-in[data-oh="amount"] { width:120px; }
#page-setup #setupOverheads .fin-sect { display:none; }
@media (max-width:640px) {
  #page-setup #setupOverheads .fin-oh-row { grid-template-columns:1fr auto auto; }
  #page-setup #setupOverheads .fin-oh-row-type { display:none; }
}

/* Borderless soft-shadow cards — same idiom as the Projects page (the app standard) */
#finBand .fin-card {
  background:var(--mid-surface); border:none; border-radius:18px; padding:20px 22px; margin-bottom:16px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
}
/* Cash forecast strip — borderless soft-tint month cells */
#finBand .fin-fc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#finBand .fin-fc-cell { background: var(--mid-surface); border: none !important; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(42,51,37,0.08); }
#finBand .fin-fc-month { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-muted); font-weight: 600; }
#finBand .fin-fc-net { font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--mid-text); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
#finBand .fin-fc-cell.is-neg .fin-fc-net, #finBand .fin-fc-net.is-neg { color: var(--mid-danger); }
#finBand .fin-fc-cell.is-neg .fin-fc-net { color: var(--mid-danger); }
/* Per-project Payments (moved from Projects) */
#finBand .finproj-list { display: flex; flex-direction: column; gap: 8px; }
#finBand .finproj-card { border: 1px solid var(--mid-line); border-radius: 10px; background: var(--mid-surface-2); overflow: hidden; transition: border-color var(--dur-fast) var(--ease); }
#finBand .finproj-card:hover { border-color: color-mix(in srgb, var(--mid-accent) 45%, var(--mid-line)); }
#finBand .finproj-card.is-open, #finBand .finproj-card.is-open:hover { border-color: var(--mid-accent); }
#finBand .finproj-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: transparent; border: 0; padding: 12px 14px; cursor: pointer; color: var(--mid-text); text-align: left; }
#finBand .finproj-name { font-weight: 600; }
#finBand .finproj-nums { display: flex; align-items: center; gap: 12px; }
#finBand .finproj-value { font-size: 14px; font-weight: 600; color: var(--mid-accent-ink); }
#finBand .finproj-bal { font-size: 11.5px; font-weight: 600; color: var(--mid-warm, #ffc176); }
#finBand .finproj-bal.is-paid { color: var(--mid-ok, #38bd78); }
/* Profit/loss to date pill (collected − costs) */
#finBand .finproj-pl { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 9999px; }
#finBand .finproj-pl.is-profit { color: var(--mid-ok, #38bd78); background: rgba(56, 189, 120, 0.12); }
#finBand .finproj-pl.is-loss { color: var(--mid-danger); background: rgba(255, 122, 112, 0.12); }
#finBand .finproj-chev { transition: transform var(--dur); color: var(--mid-muted); }
#finBand .finproj-card.is-open .finproj-chev { transform: rotate(180deg); }
:is(#finBand, #page-projects) .proj-money { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
:is(#finBand, #page-projects) .proj-money-value { max-width: 220px; }
#finBand .fin-sect { font-size:11.5px; line-height:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--mid-muted); margin-bottom:14px; font-weight:500; }

/* summary */
#finBand .fin-summary { display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:16px; margin-bottom:16px; }
#finBand .fin-kpi {
  background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:12px; padding:20px 22px;
}
#finBand .fin-kpi.active { border-color:color-mix(in srgb, var(--mid-primary) 45%, var(--mid-line)); }
#finBand .fin-kpi-lbl { font-size:11.5px; line-height:16px; text-transform:uppercase; letter-spacing:.05em; font-weight:500; color:var(--mid-muted); display:flex; align-items:center; gap:7px; }
#finBand .fin-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
#finBand .fin-kpi-big { font-size:30px; font-weight:600; letter-spacing:-.01em; margin-top:8px; line-height:1.1; }
#finBand .fin-kpi-big.pos { color:var(--mid-primary); }
#finBand .fin-kpi-big.neg { color:#ff7a70; }
#finBand .fin-kpi.active .fin-kpi-big.pos { color:var(--mid-primary); }
#finBand .fin-kpi-meta { font-size:13px; color:var(--mid-text-2); margin-top:8px; }
#finBand .fin-tag { font-size:11.5px; line-height:16px; font-weight:500; padding:2px 10px; border-radius:9999px; margin-left:6px; letter-spacing:0; text-transform:none; }
#finBand .fin-tag.up { color:var(--mid-primary); background:color-mix(in srgb, var(--mid-primary) 14%, transparent); }
#finBand .fin-tag.down { color:#ff7a70; background:rgba(255,122,112,.14); }
#finBand .fin-note {
  background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:12px; padding:18px 20px; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center;
}
#finBand .fin-note h3 { font-size:13px; color:var(--mid-text); font-weight:650; margin:0 0 6px; }
#finBand .fin-note p { font-size:13px; color:var(--mid-muted); line-height:1.55; margin:0; }
#finBand .fin-note b { color:var(--mid-text-2); font-weight:650; }

/* split bar */
#finBand .fin-splitbar { display:flex; height:44px; border-radius:10px; overflow:hidden; border:1px solid var(--mid-line); }
#finBand .fin-splitbar span { display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#0f1418; min-width:0; overflow:hidden; white-space:nowrap; }
#finBand .fin-splitbar small { opacity:.72; font-weight:600; margin-left:5px; }
#finBand .s-cost { background:#ffc176; } #finBand .s-over { background:#e2953f; } #finBand .s-net { background:var(--mid-primary); }
#finBand .fin-loss-chip { margin-top:12px; font-size:13px; color:#ff7a70; background:rgba(255,122,112,.12); border:1px solid rgba(255,122,112,.3); border-radius:8px; padding:8px 12px; }
#finBand .fin-flow { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 4px; margin-top:18px; padding-top:16px; border-top:1px solid var(--mid-line); }
#finBand .fin-step { display:flex; flex-direction:column; gap:3px; padding:2px; }
#finBand .fin-step span { font-size:11.5px; color:var(--mid-muted); }
#finBand .fin-step b { font-size:16px; font-weight:650; letter-spacing:-.01em; color:var(--mid-text); }
#finBand .fin-step.neg b { color:#ffc176; } #finBand .fin-step.fin b { color:var(--mid-primary); }
#finBand .fin-op { color:var(--mid-muted); font-size:16px; padding:0 8px; margin-bottom:4px; }

/* break-even */
#finBand .fin-be { display:grid; grid-template-columns:1.25fr 1fr; gap:22px; align-items:center; }
#finBand .fin-be-copy p { font-size:14px; color:var(--mid-text-2); line-height:1.6; margin:0; }
#finBand .fin-be-copy b { color:var(--mid-text); font-weight:650; }
#finBand .fin-be-copy .hi { color:var(--mid-primary); }
#finBand .fin-gbar { position:relative; height:32px; background:var(--mid-lowest); border:1px solid var(--mid-line); border-radius:9px; overflow:visible; }
#finBand .fin-gfill { position:absolute; inset:0 auto 0 0; background:var(--mid-primary); border-radius:8px 0 0 8px; }
#finBand .fin-gmark { position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--mid-text); }
#finBand .fin-gscale { display:flex; justify-content:space-between; font-size:11.5px; color:var(--mid-muted); margin-top:9px; }

/* two-col: overheads + contribution */
#finBand .fin-cols { display:grid; grid-template-columns:1fr 1.35fr; gap:16px; }
#finBand .fin-oh { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
#finBand .fin-oh li { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; }
#finBand .fin-oh-n { font-size:13px; color:var(--mid-text-2); }
#finBand .fin-oh-v { font-size:13px; font-weight:600; text-align:right; color:var(--mid-text); }
#finBand .fin-oh-track { grid-column:1/3; height:5px; background:var(--mid-lowest); border-radius:99px; overflow:hidden; }
#finBand .fin-oh-track i { display:block; height:100%; background:#e2953f; border-radius:99px; }
#finBand .fin-oh-total { display:flex; justify-content:space-between; margin-top:15px; padding-top:13px; border-top:1px solid var(--mid-line); font-weight:650; color:var(--mid-text); }
#finBand .fin-oh-total .num { color:#ffc176; }

#finBand .fin-table { width:100%; border-collapse:collapse; font-size:13px; }
#finBand .fin-table th { text-align:right; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--mid-muted); font-weight:500; padding:0 0 10px; }
#finBand .fin-table th:first-child { text-align:left; }
#finBand .fin-table td { padding:10px 0; border-top:1px solid var(--mid-line); text-align:right; color:var(--mid-text-2); }
#finBand .fin-table td:first-child { text-align:left; color:var(--mid-text); }
#finBand .fin-pos, #finBand .fin-table td.fin-pos { color:var(--mid-primary); }
#finBand .fin-negm, #finBand .fin-table td.fin-negm { color:#ff7a70; }
#finBand .fin-badge-loss { background:rgba(255,122,112,.16); color:#ff7a70; font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:9999px; margin-left:8px; }
#finBand .fin-uncosted td { color:var(--mid-muted); }
#finBand .fin-uncosted td:first-child { color:var(--mid-text-2); }
#finBand .fin-uncosted-cell { text-align:left !important; padding-left:14px !important; }
#finBand .fin-logbtn { font-size:11.5px; color:var(--mid-primary); border:1px solid color-mix(in srgb, var(--mid-primary) 40%, transparent); background:none; border-radius:7px; padding:3px 9px; cursor:pointer; }

/* caveat */
#finBand .fin-caveat { display:flex; gap:12px; align-items:flex-start; background:color-mix(in srgb,#ffc176 9%, var(--mid-surface)); border:1px solid rgba(255,193,118,.3); border-radius:12px; padding:14px 16px; }
#finBand .fin-caveat-i { color:#ffc176; font-size:16px; flex:0 0 auto; }
#finBand .fin-caveat p { font-size:13px; color:var(--mid-text-2); line-height:1.55; margin:0; }
#finBand .fin-caveat b { color:#ffc176; }

/* overhead editor */
#finBand .fin-oh-editor .fin-oh-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
#finBand .fin-oh-row { display:grid; grid-template-columns:1fr auto auto auto auto; gap:10px; align-items:center; padding:9px 12px; background:var(--mid-lowest); border:1px solid var(--mid-line); border-radius:9px; }
#finBand .fin-oh-row-label { color:var(--mid-text); font-size:13px; }
#finBand .fin-oh-row-cat, #finBand .fin-oh-row-type { color:var(--mid-muted); font-size:11.5px; }
#finBand .fin-oh-row-amt { color:var(--mid-text); font-weight:600; font-size:13px; }
#finBand .fin-oh-del { width:30px; height:30px; display:grid; place-items:center; background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:7px; color:var(--mid-muted); cursor:pointer; padding:0; }
#finBand .fin-oh-del:hover { color:var(--mid-danger); border-color:var(--mid-danger); }
#finBand .fin-oh-del .material-symbols-outlined { font-size:16px; }
#finBand .fin-oh-add { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#finBand .fin-oh-in { background:var(--mid-lowest); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:8px; padding:8px 11px; min-height:38px; font-size:13px; }
#finBand .fin-oh-in[data-oh="label"] { flex:1 1 160px; }
#finBand .fin-oh-in[data-oh="amount"] { width:120px; }

@media(max-width:760px){
  #finBand .fin-summary, #finBand .fin-cols, #finBand .fin-be { grid-template-columns:1fr; }
  #finBand .fin-oh-row { grid-template-columns:1fr auto auto; }
  #finBand .fin-oh-row-type { display:none; }
}

/* Overheads "Add / edit" affordance on the Monthly overheads card */
#finBand .fin-sect-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#finBand .fin-oh-editbtn { background:none; border:1px solid var(--mid-line); color:var(--mid-accent-ink); border-radius:7px; padding:3px 10px; font-size:11.5px; font-weight:600; cursor:pointer; letter-spacing:0; text-transform:none; }
#finBand .fin-oh-editbtn:hover { border-color:var(--mid-accent); }

/* ── KPI stat cards (colored left-accent border, light-weight numerals) ─────── */
#finBand .fin-kpi-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
#finBand .fin-kpi-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  background: var(--mid-surface); border: 1px solid var(--mid-line); border-left: 4px solid var(--kpi-accent, var(--mid-accent));
  border-radius: 14px; transition: border-color var(--dur-fast) var(--ease);
}
#finBand .fin-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#finBand .fin-kpi-card .fin-kpi-lbl { font-size: 11.5px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--mid-muted); }
#finBand .fin-kpi-ic { font-size: 16px; color: var(--kpi-accent, var(--mid-accent)); }
#finBand .fin-kpi-num { font-size: 34px; font-weight: 300; letter-spacing: -.02em; color: var(--mid-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
#finBand .fin-kpi-num.neg { color: var(--mid-danger, #ff7a70); }
#finBand .fin-kpi-sub { font-size: 11.5px; color: var(--mid-muted); }
@media (max-width: 900px) { #finBand .fin-kpi-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { #finBand .fin-kpi-cards { grid-template-columns: 1fr; gap: 10px; } }

/* ── Analytics row: profitability bars (2/3) + spend ring (1/3) ─────────────── */
#finBand .fin-analytics { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
#finBand .fin-analytics > .fin-card { margin-bottom: 0; }
#finBand .fin-trend .fin-tr-chart {
  background-image: repeating-linear-gradient(to top, var(--mid-line) 0, var(--mid-line) 1px, transparent 1px, transparent 25%);
  background-position: bottom; padding-bottom: 1px;
}
#finBand .fin-spend-body { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#finBand .fin-donut-wrap { flex: 0 0 auto; }
#finBand .fin-donut { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; }
#finBand .fin-donut.is-empty { background: var(--mid-lowest); border: 1px dashed var(--mid-line); }
#finBand .fin-donut-hole { width: 82px; height: 82px; border-radius: 50%; background: var(--mid-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#finBand .fin-donut-total { font-size: 16px; font-weight: 650; color: var(--mid-text); font-variant-numeric: tabular-nums; }
#finBand .fin-donut-cap { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mid-muted); }
#finBand .fin-legend { flex: 1 1 130px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#finBand .fin-leg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#finBand .fin-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
#finBand .fin-leg-lbl { color: var(--mid-text-2); flex: 1 1 auto; }
#finBand .fin-leg-amt { color: var(--mid-text); font-weight: 600; }
@media (max-width: 860px) { #finBand .fin-analytics { grid-template-columns: 1fr; } }

/* ── Search + filter bar ────────────────────────────────────────────────────── */
#finBand .fin-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
#finBand .fin-filter-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 9px; padding: 0 12px; min-height: 40px; }
#finBand .fin-filter-search .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
#finBand .fin-filter-search input { flex: 1 1 auto; background: none; border: 0; color: var(--mid-text); font: inherit; font-size: 13px; outline: none; min-width: 0; }
#finBand .fin-filter-sel { background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text); border-radius: 9px; padding: 9px 12px; min-height: 40px; font-size: 13px; }
#finBand .fin-export { flex: 0 0 auto; }
#finBand .fin-export .material-symbols-outlined { font-size: 17px; margin-right: 4px; }

/* ── Project finance ledger table ───────────────────────────────────────────── */
#finBand .fin-ledger-pill { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--mid-surface-3); color: var(--mid-text-2); border-radius: 9999px; padding: 3px 11px; }
#finBand .fin-ledger-scroll { overflow-x: auto; }
#finBand .fin-led-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#finBand .fin-led-table th { text-align: left; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-muted); font-weight: 500; padding: 0 14px 10px 0; white-space: nowrap; }
#finBand .fin-led-table th.num { text-align: right; }
#finBand .fin-led-table td { padding: 12px 14px 12px 0; border-top: 1px solid var(--mid-line); color: var(--mid-text-2); vertical-align: middle; }
#finBand .finled-row { cursor: pointer; }
#finBand .finled-row:hover td { background: var(--mid-surface-2); }
#finBand .finled-row.is-open td { background: var(--mid-surface-2); }
#finBand .finled-proj { display: flex; flex-direction: column; gap: 2px; }
#finBand .finled-name { color: var(--mid-text); font-weight: 600; }
#finBand .finled-date { font-size: 11.5px; color: var(--mid-muted); }
#finBand .finled-val { text-align: right; color: var(--mid-text); font-weight: 600; }
#finBand .finled-paid .num { color: var(--mid-text); font-weight: 600; }
#finBand .finled-sub { display: block; font-size: 11.5px; margin-top: 2px; color: var(--mid-muted); }
#finBand .finled-sub.is-paid { color: var(--mid-ok, #38bd78); }
#finBand .finled-sub.is-over { color: var(--mid-tertiary, #ffc176); }
#finBand .fin-cost-dots { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
#finBand .fin-cost-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#finBand .finled-act { white-space: nowrap; }
#finBand .fin-act-btn { font-size: 11.5px; font-weight: 600; color: var(--mid-text-2); background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 7px; padding: 4px 9px; margin-left: 5px; cursor: pointer; }
#finBand .fin-act-btn:first-child { margin-left: 0; }
#finBand .fin-act-btn:hover { border-color: var(--mid-accent); color: var(--mid-text); }
#finBand .finled-detail > td { padding: 0; background: var(--mid-surface-2); }
#finBand .finled-more td { text-align: center; }
#finBand .fin-more-btn { font-size: 13px; font-weight: 600; color: var(--mid-accent-ink); background: none; border: 0; padding: 6px 10px; cursor: pointer; }
#finBand .fin-led-empty { padding: 18px 0; }
@media (max-width: 700px) { #finBand .fin-led-table { font-size: 13px; } #finBand .fin-led-table th, #finBand .fin-led-table td { padding-right: 10px; } }

/* Dashboard "Financial health" card */
#page-dashboard .sg-fin { cursor: pointer; }
#page-dashboard .sg-fin .sg-big { color: var(--mid-primary); }
#page-dashboard .sg-fin .sg-big.sg-fin-loss { color: #ff7a70; }
#page-dashboard .sg-fin-empty { font-size: 13px; color: var(--mid-muted); line-height: 1.5; margin: 8px 0 12px; }
#page-dashboard .sg-fin-cta { font-size: 13px; font-weight: 600; color: var(--mid-accent-ink); }

/* ═══ CRM CALENDAR (month grid + agenda) — always-dark --mid-* tokens ═══════ */
#page-calendar .cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
#page-calendar .cal-main { min-width: 0; background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: var(--mid-radius); padding: 16px 18px 20px; }
#page-calendar .cal-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#page-calendar .cal-title { font-size: 16px; font-weight: 600; color: var(--mid-text); margin: 0; min-width: 190px; }
#page-calendar .cal-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text); cursor: pointer; }
#page-calendar .cal-nav-btn:hover { background: var(--mid-surface-3); }
#page-calendar .cal-today-btn { margin-left: auto; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text); font-size: 13px; font-weight: 600; cursor: pointer; }
#page-calendar .cal-today-btn:hover { background: var(--mid-surface-3); }
#page-calendar .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--mid-line); border: 1px solid var(--mid-line); border-radius: 10px; overflow: hidden; }
#page-calendar .cal-dow { background: var(--mid-surface-2); color: var(--mid-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 8px 0; }
#page-calendar .cal-cell { min-width: 0; background: var(--mid-base); min-height: 96px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; }
#page-calendar .cal-cell.cal-empty { background: var(--mid-surface); opacity: 0.4; }
#page-calendar .cal-daynum { font-size: 11.5px; color: var(--mid-muted); font-weight: 600; margin-bottom: 2px; }
#page-calendar .cal-cell.cal-today { background: color-mix(in srgb, var(--mid-accent) 12%, var(--mid-base)); }
#page-calendar .cal-cell.cal-today .cal-daynum { color: var(--mid-accent-ink); }
#page-calendar .cal-chip { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--mid-text); background: var(--mid-surface-2); border-left: 3px solid var(--mid-muted); border-radius: 4px; padding: 3px 6px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#page-calendar .cal-chip:hover { background: var(--mid-surface-3); }
#page-calendar .cal-chip-time { color: var(--mid-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
#page-calendar .cal-chip.cal-k-task { border-left-color: var(--mid-accent); }
#page-calendar .cal-chip.cal-k-followup { border-left-color: #ffc176; }
#page-calendar .cal-chip.cal-k-meeting { border-left-color: #c9a6ff; }
#page-calendar .cal-more { font-size: 11.5px; color: var(--mid-muted); padding-left: 4px; }
#page-calendar .cal-agenda { background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: var(--mid-radius); padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
#page-calendar .cal-agenda-head { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted); margin: 0 0 12px; }
#page-calendar .cal-agenda-day { font-size: 11.5px; font-weight: 700; color: var(--mid-text-2); margin: 14px 0 6px; }
#page-calendar .cal-agenda-day:first-child { margin-top: 0; }
#page-calendar .cal-ag-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-left: 3px solid var(--mid-muted); border-radius: 8px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; color: var(--mid-text); }
#page-calendar .cal-ag-item:hover { background: var(--mid-surface-3); }
#page-calendar .cal-ag-item.cal-k-task { border-left-color: var(--mid-accent); }
#page-calendar .cal-ag-item.cal-k-followup { border-left-color: #ffc176; }
#page-calendar .cal-ag-item.cal-k-meeting { border-left-color: #c9a6ff; }
#page-calendar .cal-ag-ic { font-size: 16px; color: var(--mid-muted); flex: none; }
#page-calendar .cal-ag-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#page-calendar .cal-ag-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-calendar .cal-ag-who { font-size: 11.5px; color: var(--mid-muted); }
#page-calendar .cal-ag-time { font-size: 11.5px; color: var(--mid-muted); font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 900px) {
  #page-calendar .cal-wrap { grid-template-columns: 1fr; }
  #page-calendar .cal-agenda { position: static; max-height: none; }
  #page-calendar .cal-cell { min-height: 70px; }
}

/* Google Calendar connect card (Setup) */
#page-setup .gcal-connect { display: flex; flex-direction: column; gap: 12px; }
#page-setup .gcal-status { display: flex; align-items: center; gap: 9px; }
#page-setup .gcal-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mid-muted); flex: none; }
#page-setup .gcal-dot.is-on { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.18); }
#page-setup .gcal-dot.is-off { background: #ff7a70; }
#page-setup .gcal-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Google Calendar events on the CRM calendar (pulled, read-only) */
#page-calendar .cal-chip.cal-k-gcal { border-left-color: #a78bfa; opacity: 0.92; }
#page-calendar .cal-ag-item.cal-k-gcal { border-left-color: #a78bfa; }
#page-calendar .cal-ag-item.cal-k-gcal .cal-ag-ic { color: #a78bfa; }

/* Calendar chip title truncates cleanly inside its cell (even columns) */
#page-calendar .cal-chip { white-space: nowrap; }
#page-calendar .cal-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 1180px) {
  #page-calendar .cal-wrap { grid-template-columns: 1fr; }
  #page-calendar .cal-agenda { position: static; max-height: none; }
}

/* Calendar event detail popup */
.cal-modal-veil { position: fixed; inset: 0; z-index: 1200; background: rgba(6,10,12,0.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: calVeilIn .16s ease; }
@keyframes calVeilIn { from { opacity: 0; } to { opacity: 1; } }
.cal-modal { position: relative; width: min(440px, 100%); background: var(--mid-surface-2, #252b2e); border: 1px solid var(--mid-line); border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: calModalIn .18s cubic-bezier(.2,.7,.3,1); }
@keyframes calModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.cal-modal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 16px 0 0 16px; background: var(--mid-muted); }
.cal-modal.cal-k-task::before { background: var(--mid-accent); }
.cal-modal.cal-k-followup::before { background: #ffc176; }
.cal-modal.cal-k-meeting::before { background: #c9a6ff; }
.cal-modal.cal-k-gcal::before { background: #a78bfa; }
.cal-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--mid-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.cal-modal-x:hover { color: var(--mid-text); background: var(--mid-surface-3); }
.cal-modal-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-muted); border: 1px solid var(--mid-line); border-radius: 9999px; padding: 4px 11px; margin-bottom: 12px; }
.cal-modal-badge.cal-k-task { color: var(--mid-accent-ink); border-color: color-mix(in srgb, var(--mid-accent) 45%, transparent); }
.cal-modal-badge.cal-k-followup { color: #ffc176; border-color: rgba(255,193,118,.4); }
.cal-modal-badge.cal-k-meeting { color: #c9a6ff; border-color: rgba(201,166,255,.4); }
.cal-modal-badge.cal-k-gcal { color: #a78bfa; border-color: rgba(167,139,250,.4); }
.cal-modal-title { font-size: 20px; font-weight: 650; color: var(--mid-text); margin: 0 0 16px; line-height: 1.25; padding-right: 20px; }
.cal-modal-rows { display: flex; flex-direction: column; gap: 10px; }
.cal-modal-row { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--mid-text-2); }
.cal-modal-row .material-symbols-outlined { font-size: 19px; color: var(--mid-muted); flex: none; }
.cal-modal-row.muted { color: var(--mid-muted); }
.cal-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.cal-modal-actions .button { display: inline-flex; align-items: center; gap: 7px; }
.cal-modal-actions .material-symbols-outlined { font-size: 18px; }

/* Calendar event popup — description/notes block */
.cal-modal-notes { margin-top: 14px; padding: 12px 14px; background: var(--mid-lowest, #0a0f12); border: 1px solid var(--mid-line); border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--mid-text-2); max-height: 180px; overflow-y: auto; white-space: normal; }
.cal-modal-row a { color: var(--mid-accent-ink); text-decoration: none; }
.cal-modal-row a:hover { text-decoration: underline; }

/* Multi-package in-app quote document (each package option) */
.qd-optnote { font-size: 11.5px; color: var(--mid-muted); padding: 2px 0 6px; }
.qd-pkgdoc { border: 1px solid var(--mid-line); border-radius: 12px; padding: 14px 16px; margin: 10px 0 16px; background: var(--mid-surface-2, #252b2e); }
.qd-pkgdoc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.qd-pkgdoc-name { font-size: 16px; font-weight: 700; color: var(--mid-text); }
.qd-pkgdoc-total { font-size: 16px; font-weight: 700; color: var(--mid-accent-ink); white-space: nowrap; }
.qd-pkgdoc-disc { text-align: right; font-size: 13px; color: #4ade80; margin-top: 8px; }

/* Proposal template customizer (Setup) — always-dark --mid-* tokens */
/* No rules between groups (owner, 2026-08-13): each group already carries its own
   subhead, so the lines only added noise inside a half-width card. */
#page-setup .tplc-group { margin: 18px 0 22px; padding-top: 0; border-top: 0; }
#page-setup .tplc-h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid-muted); margin: 0 0 10px; }
#page-setup .tplc-imgrow { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
#page-setup .tplc-imgslot { display: flex; gap: 12px; align-items: center; }
#page-setup .tplc-thumb { width: 64px; height: 64px; border-radius: 10px; border: 1px dashed var(--mid-line); background: var(--mid-lowest) center/contain no-repeat; display: flex; align-items: center; justify-content: center; color: var(--mid-muted); flex: none; }
#page-setup .tplc-thumb-wide { width: 104px; }
#page-setup .tplc-thumb.has-img span { display: none; }
#page-setup .tplc-imgmeta { display: flex; flex-direction: column; gap: 3px; }
#page-setup .tplc-imgmeta small { color: var(--mid-muted); }
#page-setup .tplc-imgbtns { display: flex; gap: 8px; margin-top: 4px; }
#page-setup .tplc-galhead { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
#page-setup .tplc-gallery { display: flex; gap: 10px; flex-wrap: wrap; }
#page-setup .tplc-galitem { position: relative; width: 92px; height: 68px; border-radius: 8px; background: var(--mid-lowest) center/cover no-repeat; border: 1px solid var(--mid-line); }
#page-setup .tplc-galx { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mid-line); background: var(--mid-surface-3); color: var(--mid-text); font-size: 13px; line-height: 1; cursor: pointer; }
#page-setup .tplc-sections { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
#page-setup .tplc-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; padding: 8px 12px; }
#page-setup .tplc-sec-tgl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--mid-text); }
#page-setup .tplc-sec-mv { display: flex; gap: 4px; }
#page-setup .tplc-sec-mv button { background: none; border: 1px solid var(--mid-line); border-radius: 6px; color: var(--mid-muted); cursor: pointer; padding: 2px 5px; display: flex; }
#page-setup .tplc-sec-mv button:disabled { opacity: 0.35; cursor: default; }
#page-setup .tplc-sec-mv .material-symbols-outlined { font-size: 16px; }
#page-setup .tplc-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { #page-setup .tplc-terms { grid-template-columns: 1fr; } }
#page-setup .tplc-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* ── Evolution per-user QR bridge (Setup → Integrations) ─────────────────────── */
.evo-bridge-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.evo-bridge-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: var(--mid-radius);
  color: var(--mid-text); font-size: 13px;
}
.evo-bridge-row .evo-b-num { font-weight: 600; }
.evo-bridge-row .evo-b-meta { color: var(--mid-muted); font-size: 11.5px; }
.evo-bridge-row .evo-b-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid-muted); flex: none; }
.evo-bridge-row.is-open .evo-b-dot { background: var(--mid-ok, #30D158); }
.evo-bridge-row .evo-b-spacer { margin-left: auto; }
.evo-modal-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); padding: 24px;
}
.evo-modal-overlay[hidden] { display: none; }
.evo-modal[role="dialog"], .evo-modal {
  position: relative; width: min(360px, 92vw); background: var(--mid-surface-3);
  border: 1px solid var(--mid-line); border-radius: 16px; padding: 24px; text-align: center;
  color: var(--mid-text); box-shadow: var(--mid-shadow);
}
.evo-modal h3 { margin: 0 0 6px; color: var(--mid-text); }
.evo-modal .muted, .evo-modal .small { color: var(--mid-muted); }
.evo-modal-x {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--mid-muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.evo-qr-wrap {
  width: 232px; height: 232px; margin: 14px auto; background: #fff; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.evo-qr-wrap img { width: 100%; height: 100%; object-fit: contain; }
#evoModalStatus { color: var(--mid-accent-ink); font-weight: 600; }

/* ── Integrations 2×2 connector grid ─────────────────────────────────────────── */
.integ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.integ-grid > .setup-section { margin: 0 !important; }
.integ-grid > .setup-section.setup-tab-hidden { display: none; }
@media (max-width: 760px) { .integ-grid { grid-template-columns: 1fr; } }

/* ── Setup → Quote: bound tall fields/cards to ~10 rows with internal scroll ──── */
/* Each proposal-section textarea: ~5 rows tall, scrolls within the field. */
body.setup-active #page-setup .tplc-group textarea,
body.setup-active #page-setup .tplc-terms textarea {
  height: 7.5rem; max-height: 7.5rem; overflow-y: auto; resize: vertical;
}
/* Quote catalog list cards: ~10 rows tall, scroll within the card. */
body.setup-active #page-setup .lib-svc-table,
body.setup-active #page-setup .lib-evt-list {
  max-height: 26rem; overflow-y: auto;
}

/* ── Lead card: next-action line ─────────────────────────────────────────────── */
.kanban-card .kb-next {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11.5px; color: var(--mid-muted); min-width: 0;
}
.kanban-card .kb-next .material-symbols-outlined { font-size: 14px; flex: none; }
.kanban-card .kb-next-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card .kb-next-due { flex: none; margin-left: auto; font-weight: 600; }
.kanban-card .kb-next.is-overdue { color: var(--mid-danger); }

/* ── Projects: contract snapshot (deliverables / team / extra billing / overdue) ── */
:is(#page-projects,#finBand) .proj-pay-row { grid-template-columns: auto 1fr 1.4fr auto; } /* date | amount | note | del */
:is(#page-projects,#finBand) .proj-cost-row { grid-template-columns: auto auto 1.4fr 1fr auto; } /* date | cat | memo | amount | del */
:is(#page-projects,#finBand) .proj-extra-row { display: grid; grid-template-columns: auto 1.6fr 1fr auto; gap: 8px; align-items: center; }
:is(#page-projects,#finBand) .proj-extra-list { display: flex; flex-direction: column; gap: 8px; }
:is(#page-projects,#finBand) .proj-extra-del { width: 34px; height: 34px; display: grid; place-items: center; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
:is(#page-projects,#finBand) .proj-extra-del:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-overdue { background: rgba(255,122,112,0.16); color: var(--mid-danger); }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-deliv { background: var(--mid-surface-3); color: var(--mid-text-2); }
/* Post-production glance badges — the pipeline read at list level. */
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-pp-live { background: color-mix(in srgb, var(--mid-primary) 16%, transparent); color: var(--mid-primary); }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-pp-risk { background: rgba(255,193,118,0.18); color: #ffc176; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-pp-done { background: rgba(56,189,120,0.16); color: var(--mid-ok, #38bd78); }
#page-projects .proj-card-margin { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; }
#page-projects .proj-team { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
#page-projects .proj-team .material-symbols-outlined { font-size: 16px; }
#page-projects .proj-deliv-list { display: flex; flex-direction: column; gap: 6px; }
/* One deliverable = one tracked job: what it is · its status · who's on it. */
#page-projects .proj-deliv-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1.1fr); gap: 10px;
  align-items: center; padding: 10px 12px;
  background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease);
}
#page-projects .proj-deliv-row:hover { border-color: color-mix(in srgb, var(--mid-accent) 45%, var(--mid-line)); }
#page-projects .proj-deliv-row.is-manual { display: flex; align-items: center; gap: 10px; }
#page-projects .proj-deliv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#page-projects .proj-deliv-row.is-done { border-color: rgba(56,189,120,.4); }
#page-projects .proj-deliv-row.is-done .proj-deliv-name { color: var(--mid-muted); }
#page-projects .proj-deliv-name { font-weight: 600; color: var(--mid-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-projects .proj-deliv-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-projects .proj-deliv-row select {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); color: var(--mid-text);
  border-radius: 8px; padding: 7px 9px; min-height: 36px; font-size: 13px; min-width: 0; max-width: 100%;
}
#page-projects .proj-deliv-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
#page-projects .proj-deliv-who select { flex: 1; min-width: 0; }
#page-projects .proj-deliv-suggest {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-accent-ink);
}
#page-projects .proj-deliv-suggest:hover { border-color: var(--mid-accent); }
#page-projects .proj-deliv-suggest .material-symbols-outlined { font-size: 17px; }
@media (max-width: 760px) {
  #page-projects .proj-deliv-row { grid-template-columns: 1fr 1fr; }
  #page-projects .proj-deliv-main { grid-column: 1 / -1; }
}
/* Mobile: stack every money row to a single column so inputs stay tappable. */
@media (max-width: 560px) {
  :is(#page-projects,#finBand) .proj-pay-row,
  :is(#page-projects,#finBand) .proj-cost-row,
  :is(#page-projects,#finBand) .proj-extra-row { grid-template-columns: 1fr 1fr; }
  #page-projects .proj-manage-row { grid-template-columns: 1fr; }
  #page-projects .proj-deliv-desc { white-space: normal; }
}
#page-projects .proj-sig { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
#page-projects .proj-sig .material-symbols-outlined { font-size: 15px; color: var(--mid-accent-ink); }
#page-projects .proj-deliv-name-inp { background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 7px 10px; min-height: 34px; font-size: 13px; }
#page-projects .proj-deliv-del { width: 30px; height: 30px; display: grid; place-items: center; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
#page-projects .proj-deliv-del:hover { color: var(--mid-danger); border-color: var(--mid-danger); }
#page-projects .proj-deliv-del .material-symbols-outlined { font-size: 16px; }

/* ── Finance: 12-month trend + receivables ───────────────────────────────────── */
#finBand .fin-trend .fin-tr-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 140px; margin-top: 10px; }
#finBand .fin-tr-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
#finBand .fin-tr-bars { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
#finBand .fin-tr-bar { width: 38%; min-height: 2px; border-radius: 3px 3px 0 0; }
#finBand .fin-tr-booked { background: var(--mid-accent); }
#finBand .fin-tr-cash { background: var(--mid-tertiary, #ffc176); }
#finBand .fin-tr-col.is-cur .fin-tr-lab { color: var(--mid-text); font-weight: 700; }
#finBand .fin-tr-lab { font-size: 11.5px; color: var(--mid-muted); }
#finBand .fin-tr-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mid-muted); }
#finBand .fin-tr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
#finBand .fin-age-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
#finBand .fin-age-chip { font-size: 11.5px; line-height: 16px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; background: var(--mid-surface-3); color: var(--mid-text-2); white-space: nowrap; }
#finBand .fin-age-chip.fin-age-61, #finBand .fin-age-chip.fin-age-90 { background: rgba(255,122,112,0.16); color: var(--mid-danger); }
#finBand .fin-rcv-row { cursor: pointer; }
#finBand .fin-rcv-row:hover td { background: var(--mid-surface-2); }
@media (max-width: 640px) { #finBand .fin-tr-chart { grid-template-columns: repeat(12, minmax(18px, 1fr)); overflow-x: auto; } }

/* ── Calendar: shoot days + delivery deadlines + double-booking flag ─────────── */
#page-calendar .cal-chip.cal-k-shoot { background: rgba(56,189,248,0.18); border-left: 3px solid var(--mid-accent); font-weight: 600; }
#page-calendar .cal-chip.cal-k-due { background: rgba(255,193,118,0.16); border-left: 3px solid var(--mid-tertiary, #ffc176); }
#page-calendar .cal-chip.cal-chip-conflict { background: rgba(255,122,112,0.2); border-left: 3px solid var(--mid-danger); }
#page-calendar .cal-ag-item.cal-k-shoot .cal-ag-ic { color: var(--mid-accent-ink); }
#page-calendar .cal-ag-item.cal-k-due .cal-ag-ic { color: var(--mid-tertiary, #ffc176); }

/* ── Calendar view toggle (All / Projects / Follow-ups) ──────────────────────── */
#page-calendar .cal-view-toggle { display: inline-flex; gap: 2px; margin-left: auto; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; padding: 2px; }
#page-calendar .cal-view-btn { border: 0; background: transparent; color: var(--mid-muted); font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
#page-calendar .cal-view-btn.is-active { background: var(--mid-surface-3); color: var(--mid-text); }
@media (max-width: 560px) { #page-calendar .cal-view-toggle { margin-left: 0; width: 100%; } #page-calendar .cal-view-btn { flex: 1; } }

/* ── Ask Gia: action confirm card ────────────────────────────────────────────── */
.askgia-confirm { margin: 6px 0 2px; padding: 12px 14px; background: var(--mid-surface-3); border: 1px solid var(--mid-accent); border-radius: 12px; }
.askgia-confirm-sum { font-size: 13px; color: var(--mid-text); margin-bottom: 10px; white-space: pre-wrap; }
.askgia-confirm-btns { display: flex; gap: 8px; }

/* ── Deal panel: events + per-event dates editor ─────────────────────────────── */
.deal-evt-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.deal-evt-row { display: flex; flex-direction: column; gap: 8px; }
/* Event name · date · delete on ONE line; From–To times on ONE line */
.deal-evt-main { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.deal-evt-main .deal-evt-name { flex: 1 1 auto; min-width: 0; }
.deal-evt-main .deal-evt-date { flex: 0 0 150px; }
.deal-evt-times { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.deal-evt-tlabel { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mid-muted); font-weight: 600; }
.deal-evt-start, .deal-evt-end { min-width: 110px; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 8px 10px; min-height: 36px; font-size: 13px; }
.deal-evt-tdash { color: var(--mid-muted); }
html[data-theme] [id^="projEvtList"] .deal-evt-start, html[data-theme] [id^="projEvtList"] .deal-evt-end { background: var(--mid-lowest) !important; color: var(--mid-text) !important; -webkit-text-fill-color: var(--mid-text); }
.deal-evt-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0 2px; }
.deal-evt-role-fld { display: flex; flex-direction: column; gap: 3px; }
.deal-evt-role-fld > span { font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--mid-muted); }
.deal-evt-role-fld > input { width: 100%; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 7px 8px; min-height: 36px; font-size: 13px; text-align: center; }
html[data-theme] [id^="projEvtList"] .deal-evt-role { background: var(--mid-lowest) !important; color: var(--mid-text) !important; -webkit-text-fill-color: var(--mid-text); }
@media (max-width: 560px) { .deal-evt-team { grid-template-columns: repeat(2, 1fr); } }

/* ── Setup: resource roster (Quote catalog → Resources) ── */
.lib-res-list { display: flex; flex-direction: column; gap: 12px; }
.lib-res-group { display: flex; flex-direction: column; gap: 4px; }
.lib-res-role { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mid-muted); font-weight: 600; }
.lib-res-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 10px; padding: 8px 12px; color: var(--mid-text); cursor: pointer; }
.lib-res-row:hover { border-color: var(--mid-accent); }
.lib-res-name { font-weight: 500; }
.lib-res-phone { margin-left: auto; }
.lib-res-row .lib-evt-edit { margin-left: auto; font-size: 16px; color: var(--mid-muted); }
.lib-res-row .lib-res-phone + .lib-evt-edit { margin-left: 8px; }

/* ── Projects: display-first expanded view (read summary; editor behind Edit) ── */
#page-projects .proj-view-evts, #page-projects .proj-view-crew, #page-projects .proj-view-delivs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#page-projects .proj-view-evt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(42,51,37,0.04); border-radius: 12px; }
#page-projects .proj-view-ico { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--mid-accent) 14%, var(--mid-surface-2)); }
#page-projects .proj-view-ico .material-symbols-outlined { font-size: 20px; color: var(--mid-accent-ink); }
#page-projects .proj-view-evt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#page-projects .proj-view-evt-main b { font-size: 14px; font-weight: 600; color: var(--mid-text); }
#page-projects .proj-view-crew-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.4fr) auto; gap: 10px; align-items: center; padding: 9px 12px; background: rgba(42,51,37,0.04); border-radius: 12px; }
#page-projects .proj-view-crew-name { font-size: 13px; font-weight: 500; color: var(--mid-text); }
#page-projects .proj-view-deliv { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: rgba(42,51,37,0.04); border-radius: 12px; }
#page-projects .proj-view-deliv .material-symbols-outlined { font-size: 19px; color: var(--mid-muted); }
#page-projects .proj-view-deliv.is-done .material-symbols-outlined { color: var(--mid-accent-ink); }
#page-projects .proj-view-deliv-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; color: var(--mid-text); }
#page-projects .proj-view-deliv.is-done .proj-view-deliv-name { text-decoration: line-through; color: var(--mid-text-2); }
#page-projects .proj-view-deliv-state { font-size: 11.5px; font-weight: 600; color: var(--mid-muted); }
#page-projects .proj-view-deliv.is-done .proj-view-deliv-state { color: var(--mid-accent-ink); }
#page-projects .proj-view-meta { margin: 2px 0 10px; }

/* ── Projects: unified per-event card (event + counts + crew/data in ONE card) ── */
.proj-evt-list { display: flex; flex-direction: column; gap: 14px; }
/* Borderless soft-tint inner card — matches the app's list-row idiom (rows elsewhere have no borders) */
.proj-evt-card { background: rgba(42,51,37,0.04); border: none; border-radius: 12px; padding: 0; }
/* Expandable event card: header always visible; body opens on click */
.proj-evt-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--mid-text); }
.proj-evt-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.proj-evt-head-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.proj-evt-head-data { flex: 0 0 auto; }
.proj-evt-chev { flex: 0 0 auto; color: var(--mid-muted); transition: transform var(--dur-fast) var(--ease); }
.proj-evt-card.is-open .proj-evt-chev { transform: rotate(180deg); }
.proj-evt-body { display: none; padding: 0 14px 14px; flex-direction: column; gap: 10px; }
.proj-evt-card.is-open .proj-evt-body { display: flex; }
.proj-evt-fixed-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--mid-text); align-self: center; }
.proj-evt-counts-fixed { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.proj-evt-count-chip { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 9999px; background: color-mix(in srgb, var(--mid-accent) 12%, transparent); color: var(--mid-accent-ink); white-space: nowrap; }
.proj-evt-resources { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mid-line); display: flex; flex-direction: column; gap: 8px; }
/* Post-production — a project section beside Deliverables: per event, the
   editing stage + who it's assigned to. */
#page-projects .proj-pp-head { margin-top: 18px; }
#page-projects .proj-pp-head .proj-pay-sum.is-risk { color: #ffc176; font-weight: 700; }
#page-projects .proj-pp-list { display: flex; flex-direction: column; gap: 8px; }
#page-projects .proj-pp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 12px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px; }
#page-projects .proj-pp-row.is-waiting { opacity: .55; }
#page-projects .proj-pp-row.is-done { border-color: rgba(56,189,120,.45); }
#page-projects .proj-pp-ev { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#page-projects .proj-pp-ev b { font-size: 13px; color: var(--mid-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-projects .proj-pp-row select { background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text); border-radius: 8px; padding: 7px 9px; min-height: 36px; font-size: 13px; min-width: 0; }
#page-projects .proj-pp-row select:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 700px) {
  #page-projects .proj-pp-row { grid-template-columns: 1fr 1fr; }
  #page-projects .proj-pp-ev { grid-column: 1 / -1; }
}
.proj-res-table { display: flex; flex-direction: column; gap: 6px; }
/* 4 cols: type | resource | data | delete */
.proj-res-thead, .proj-res-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(140px, 1.5fr) minmax(120px, 1.2fr); gap: 12px; align-items: center; }
.proj-res-thead { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-muted); font-weight: 600; padding: 0 2px; }
.proj-res-type { font-size: 13px; color: var(--mid-text-2); }
.proj-res-type-sel, .proj-res-sel { width: 100%; background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 7px 10px; min-height: 36px; font-size: 13px; }
/* Data pills — same borderless tinted rounded-full pattern as the rest of the UI */
.proj-res-status { border: none; border-radius: 9999px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.proj-res-status.is-pending { background: rgba(255,193,118,.14); color: var(--mid-warm, #ffc176); }
.proj-res-status.is-received { background: rgba(56,189,120,.14); color: var(--mid-ok, #38bd78); }
.proj-res-c-del { display: grid; place-items: center; }
.proj-res-del { width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
.proj-res-del:hover { color: var(--mid-danger); background: rgba(255,122,112,.12); }
.proj-res-del .material-symbols-outlined { font-size: 18px; }
.proj-res-empty { padding: 4px 2px; }
.proj-res-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.proj-res-warn { grid-column: 1 / -1; font-size: 11.5px; font-weight: 500; color: var(--mid-danger); padding: 1px 2px 0; }
.proj-res-warn[hidden] { display: none; }
.proj-res-nodate { color: var(--mid-warm, #ffc176); }
.proj-res-nodate[hidden] { display: none; }
.proj-badge.proj-drift { background: rgba(255,193,118,.16); color: var(--mid-warm, #ffc176); border: 1px solid var(--mid-warm, #ffc176); }
/* Closed out = settled and filed: quieter than the dormant warning. */
.proj-badge.proj-closedout { background: rgba(135,146,154,.16); color: var(--mid-muted, #87929a); border: 1px solid var(--mid-line, #3e484f); }
html[data-theme] [id^="projEvtList"] .deal-evt-role,
html[data-theme] .proj-res-sel, html[data-theme] .proj-res-type-sel { background: var(--mid-lowest) !important; color: var(--mid-text) !important; -webkit-text-fill-color: var(--mid-text); }
@media (max-width: 560px) {
  .proj-res-thead { display: none; }
  .proj-res-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .proj-res-c-type { grid-column: 1 / -1; }
  .proj-res-status { justify-self: start; }
}
.deal-evt-row .deal-evt-name, .deal-evt-row .deal-evt-date {
  /* !important + -webkit-text-fill-color beats the light-theme input cascade + the
     autofill flash that was turning the value white. */
  background: var(--mid-lowest) !important; color: var(--mid-text) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  border: 1px solid var(--mid-line) !important;
  border-radius: 8px; padding: 8px 10px; min-height: 36px; font-size: 13px;
}
.deal-evt-row .deal-evt-name::placeholder, .deal-evt-row .deal-evt-date::placeholder { color: var(--mid-muted); -webkit-text-fill-color: var(--mid-muted); }
.deal-evt-del { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: none; border-radius: 8px; color: var(--mid-muted); cursor: pointer; padding: 0; }
.deal-evt-del:hover { color: var(--mid-danger); background: rgba(255,122,112,.12); }
.deal-evt-del .material-symbols-outlined { font-size: 18px; }
@media (max-width: 560px) { .deal-evt-main .deal-evt-date { flex-basis: 128px; } }
#page-projects .proj-evt-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }

/* Event-row inputs: ID-scoped + text-fill so the light-theme input cascade can't
   turn the value white (matches the proven #globalSearch fix). var(--mid-text)
   keeps every theme correct: light #232920, dark #dee3e8, grey #ededed. */
html[data-theme] #dealEvtList .deal-evt-name,
html[data-theme] #dealEvtList .deal-evt-date,
html[data-theme] [id^="projEvtList"] .deal-evt-name,
html[data-theme] [id^="projEvtList"] .deal-evt-date {
  background: var(--mid-lowest) !important;
  color: var(--mid-text) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-primary) !important;
  border: 1px solid var(--mid-line) !important;
}
html[data-theme] #dealEvtList .deal-evt-name::placeholder,
html[data-theme] [id^="projEvtList"] .deal-evt-name::placeholder {
  color: var(--mid-muted) !important; -webkit-text-fill-color: var(--mid-muted) !important;
}

/* ── Event typeahead dropdown (custom — replaces the unstyleable native datalist) ── */
.evt-suggest {
  position: absolute; z-index: 60; max-height: 220px; overflow-y: auto;
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.28); padding: 4px;
}
.evt-suggest-opt {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--mid-text);
  -webkit-text-fill-color: var(--mid-text); cursor: pointer;
}
.evt-suggest-opt:hover { background: var(--mid-surface-3); }

/* ── Sidebar Chat unread badge ───────────────────────────────────────────────── */
.nav-item { position: relative; }
.nav-item .nav-unread {
  position: absolute; top: 6px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 9999px; font-size: 11.5px; font-weight: 700;
  background: var(--mid-danger); color: #fff;
}

/* ── Contacts: duplicate-merge modal ─────────────────────────────────────────── */
.dup-modal-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); padding: 20px; }
.dup-modal-overlay[hidden] { display: none; }
.dup-modal { width: min(560px, 100%); max-height: 82vh; overflow-y: auto; background: var(--mid-surface-3); border: 1px solid var(--mid-line); border-radius: var(--mid-radius, 14px); padding: 18px 20px; color: var(--mid-text); }
.dup-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dup-modal-head h3 { margin: 0; font-size: 16px; }
.dup-modal .qc-x { background: transparent; border: 0; color: var(--mid-muted); font-size: 20px; cursor: pointer; }
.dup-group { border: 1px solid var(--mid-line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.dup-members { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dup-member { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; cursor: pointer; }
.dup-member input { accent-color: var(--mid-accent); }
.dup-m-name { font-weight: 600; color: var(--mid-text); }
.btn-label-desktop { display: inline; }
@media (max-width: 640px) { .btn-label-desktop { display: none; } }

/* ═══ Projects/Finance — SAME control recipe as the deal panel (the app's real
   design language). Appended last so it wins over every older page-local rule:
   inputs = base-fill borderless 12px wells; labels = sentence-case 12/500 muted;
   primary = lime pill; ghost = surface-3 filled pill; bare trash icon buttons. ═══ */
:is(#page-projects, #finBand) :is(input, select, textarea) {
  background: var(--mid-base) !important; border: none !important; border-radius: 12px !important;
  padding: 10px 14px !important; font-size: 13px !important; color: var(--mid-text) !important;
  -webkit-text-fill-color: var(--mid-text); min-height: 0 !important; box-sizing: border-box;
}
:is(#page-projects, #finBand) :is(input, select, textarea)::placeholder { color: var(--mid-muted); -webkit-text-fill-color: var(--mid-muted); }
#page-projects .deal-evt-role-fld > input { text-align: center; padding: 10px 8px !important; }
/* Labels: sentence case like the deal panel ("Events & dates"), not shouty caps */
#page-projects .deal-evt-role-fld > span, #page-projects .deal-evt-tlabel,
#page-projects .proj-res-thead span, :is(#page-projects, #finBand) .proj-field > span {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mid-muted);
}
#page-projects .proj-eyebrow > span:first-child { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mid-muted); }
/* Buttons: identical to the deal panel */
:is(#page-projects, #finBand) .button {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 9999px !important; min-height: 40px !important;
  padding: 0 18px !important; font-size: 13px !important; font-weight: 600;
}
:is(#page-projects, #finBand) .button:hover { filter: brightness(1.04); }
:is(#page-projects, #finBand) .button.primary {
  background: var(--lime, var(--mid-accent)) !important; color: var(--on-lime, var(--mid-on-accent)) !important;
  min-height: 42px !important; font-size: 13px !important;
}
/* Bare trash icons — no boxes, like the deal panel */
#page-projects .deal-evt-del, #page-projects .proj-res-del {
  background: transparent !important; border: none !important; color: var(--mid-muted);
}
#page-projects :is(.deal-evt-del, .proj-res-del):hover { color: var(--mid-danger); background: transparent !important; }

/* ═══ Projects consistency round 2: uniform 42px controls, visible wells on both
   themes, left-aligned data pill, SOLID status pills with dark text. ═══ */
:is(#page-projects, #finBand) :is(input, select, textarea:not([rows])) { height: 42px !important; }
:is(#page-projects, #finBand) select { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Wells must stay visible on the tinted event-card body in BOTH themes: darken
   slightly relative to the base tone instead of matching it. */
:is(#page-projects, #finBand) :is(input, select, textarea) {
  background: color-mix(in srgb, var(--mid-text) 5%, var(--mid-base)) !important;
}
/* Data pill: left-aligned in its grid cell */
#page-projects .proj-res-status { justify-self: start; text-align: left; }
/* Status + data pills: SOLID fills, near-black text — legible on light and dark */
#page-projects .proj-res-status.is-pending { background: var(--mid-warm, #ffc176) !important; color: #1c1917 !important; }
#page-projects .proj-res-status.is-received { background: var(--mid-ok, #38bd78) !important; color: #101a12 !important; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-pending { background: var(--mid-warm, #ffc176) !important; color: #1c1917 !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-shot { background: var(--mid-accent) !important; color: #0d1a21 !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-done { background: var(--mid-ok, #38bd78) !important; color: #101a12 !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-overdue { background: #ff7a70 !important; color: #2a0f0c !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-drift { background: var(--mid-warm, #ffc176) !important; color: #1c1917 !important; border: none; }

/* Data pills: fixed width, one vocabulary; deliverable picker row */
#page-projects .proj-deliv-row.is-manual { display: flex; align-items: center; gap: 8px; }
#page-projects .proj-deliv-row.is-manual .proj-deliv-sel { flex: 1 1 auto; min-width: 0; }
#page-projects .proj-deliv-row.is-manual .proj-deliv-qty { flex: 0 0 76px; width: 76px; text-align: center; }
#page-projects .proj-deliv-row.is-manual .proj-deliv-name-inp { flex: 1 1 auto; min-width: 0; }
#page-projects .proj-deliv-row.is-manual [hidden] { display: none !important; }
#page-projects .proj-deliv-del { background: transparent !important; border: none !important; color: var(--mid-muted); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; padding: 0; }
#page-projects .proj-deliv-del:hover { color: var(--mid-danger); }

/* Recipe corrections: never style checkboxes/radios as text wells; make wells
   visible in DARK theme (use the input-well token, darker than the card). */
:is(#page-projects, #finBand) :is(input[type="checkbox"], input[type="radio"]) {
  all: revert; accent-color: var(--mid-accent); width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
}
html[data-theme="dark"] :is(#page-projects, #finBand) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-lowest) !important;
}

/* Deliverable picker & pill/header cleanups (final) */
/* Manual (composing) row: borderless — the inner select/qty already are wells */
#page-projects .proj-deliv-row.is-manual { background: transparent !important; border: none !important; padding: 0 !important; }
#page-projects .proj-deliv-row.is-manual:hover { border: none !important; }
/* Data pill: keep a gutter from the card's right edge */
/* Event delete moved onto the collapsed header — bare icon, red on hover, no toggle look */
#page-projects .proj-evt-head-del { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--mid-muted); cursor: pointer; background: transparent; }
#page-projects .proj-evt-head-del:hover { color: var(--mid-danger); }
#page-projects .proj-evt-head-del .material-symbols-outlined { font-size: 18px; }

/* Projects round 4: pill width/gutter, centered add buttons, date+time row,
   additional-resource highlight with client-charge/cost inputs. */
/* Data pill: compact, left-aligned, gutter from card edge */
/* Add resource + Auto-fill: centered */
/* Event: name on its own row; date + times together on the next */
#page-projects .deal-evt-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#page-projects .deal-evt-when .deal-evt-date { flex: 0 0 150px; }
#page-projects .deal-evt-when .deal-evt-start, #page-projects .deal-evt-when .deal-evt-end { flex: 0 0 120px; }
/* Additional (beyond-quote) crew row: tinted highlight + charge/cost line */
/* is-additional amber retired — extra crew is a quote matter now, not a warning tint. */
#page-projects .proj-res-extra { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
#page-projects .proj-res-addl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mid-warm, #ffc176); background: color-mix(in srgb, var(--mid-warm, #ffc176) 16%, transparent); padding: 3px 9px; border-radius: 9999px; }
#page-projects .proj-res-money { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mid-muted); }
#page-projects .proj-res-money input { width: 96px; }

/* Projects round 5: date+time one row, taller status badges, centered Data column */
/* Date, from, to on ONE row — no wrap, inputs shrink to fit the column */
#page-projects .deal-evt-when { flex-wrap: nowrap; }
#page-projects .deal-evt-when .deal-evt-date { flex: 1 1 130px; min-width: 0; }
#page-projects .deal-evt-when .deal-evt-start, #page-projects .deal-evt-when .deal-evt-end { flex: 1 1 96px; min-width: 0; }
#page-projects .deal-evt-when .deal-evt-tdash { flex: 0 0 auto; }
/* Status badges on the card header: match the app's pill height (like data pills) */
:is(#page-projects, #dealDetailPanel) .proj-badge { padding: 5px 12px; line-height: 1.35; }
/* Center the Data column: heading + pill share center alignment */

/* Round 6: Data column left-aligned (heading + pill) to match Type/Resource columns */

/* Round 7: Data column fills to the card's right edge; heading left, pill right
   so the pill's right edge lines up with the resource field / card field edges. */

/* Crew table — single authoritative rule (3 symmetric columns: Type · Resource · Data).
   Every column's heading and content are LEFT-aligned to the column's left edge, so
   Data heading, the pill, and the resource field all line up like a real table. */
#page-projects .proj-res-thead > span { text-align: left; }
#page-projects .proj-res-c-data { display: flex; align-items: center; gap: 8px; min-width: 0; }
#page-projects .proj-res-status { justify-self: start; min-width: 96px; text-align: center; }
#page-projects .proj-res-btns { justify-content: center; }

/* Center the "Data" heading over the pill: same 96px box at the column's left,
   centered text — so heading center lines up with the pill's center. */
#page-projects .proj-res-thead > span:nth-child(3) { justify-self: start; width: 96px; text-align: center; }

/* Stat cards + filter pills → match the app's borderless soft-shadow style (.sg-card / .sg-chip) */
:is(#page-projects, #page-dashboard) .proj-stat-card { border: none !important; box-shadow: 0 1px 3px rgba(42,51,37,0.08); border-radius: 18px; transition: box-shadow var(--dur-fast) var(--ease); }
:is(#page-projects, #page-dashboard) .proj-stat-card:hover { box-shadow: 0 4px 14px -4px rgba(42,51,37,0.18); }
:is(#page-projects, #page-dashboard) .proj-stat-card.is-accent { border: none !important; }
#page-projects .proj-pill {
  border: none !important; box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  padding: 10px 18px; font-size: 13px;
  transition: transform var(--dur-1, var(--dur-fast)) var(--ease), box-shadow var(--dur-1, var(--dur-fast)) var(--ease);
}
#page-projects .proj-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18); }
#page-projects .proj-pill.is-active { box-shadow: none; }

/* Active filter pill: the app's signature lime/sage (not olive --mid-accent), dark ink */
#page-projects .proj-pill.is-active { background: var(--lime, #d9ff5e) !important; color: var(--on-lime, #1a2000) !important; }
#page-projects .proj-pill.is-active .proj-pill-n { background: rgba(0,0,0,.12); color: var(--on-lime, #1a2000); }

/* Match the Dashboard's full content width (Dashboard has no max-width cap) */
#page-projects .projects-body { max-width: none; margin: 0; padding: 6px 0 120px; }
/* At the wider width, give the two-column expanded panel more breathing room */
#page-projects .proj-manage-grid { gap: 36px; }

/* Round 8: wider Type column (role on one line), narrower Data column, pill's right
   edge flush to the card edge, "Data" heading centered over the pill. */
#page-projects .proj-res-thead, #page-projects .proj-res-row {
  grid-template-columns: minmax(170px, 1.5fr) minmax(140px, 1.5fr) minmax(90px, 0.6fr) !important;
  gap: 14px;
}
#page-projects .proj-res-type { white-space: nowrap; }
/* Pill: right-aligned so its right edge sits on the card's right content edge */
#page-projects .proj-res-c-data { justify-content: flex-end; }
#page-projects .proj-res-status { justify-self: end; min-width: 92px; text-align: center; }
/* "Data" heading: same 92px box at the column's right, centered → over the pill */
#page-projects .proj-res-thead > span:nth-child(3) { justify-self: end; width: 92px; text-align: center; }

/* Round 9: additional-resource row — Bill client + Our cost + delete on ONE line;
   no text badge; amber tint marks it additional. */

#page-projects .proj-res-extra { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin-top: 8px; }
#page-projects .proj-res-money { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; }
#page-projects .proj-res-money input { width: 110px; }
#page-projects .proj-res-extra .proj-res-del { margin-left: auto; background: transparent !important; border: none !important; color: var(--mid-muted); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; }
#page-projects .proj-res-extra .proj-res-del:hover { color: var(--mid-danger); }

/* Round 10: Cost column for every crew row → 4 columns (Type · Resource · Cost · Data) */
#page-projects .proj-res-thead, #page-projects .proj-res-row {
  grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.4fr) minmax(96px, 0.7fr) minmax(84px, 0.6fr) !important;
  gap: 12px;
}
#page-projects .proj-res-c-cost { display: flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--mid-text) 5%, var(--mid-base)); border-radius: 8px; padding: 0 10px; height: 42px; }
html[data-theme="dark"] #page-projects .proj-res-c-cost { background: var(--mid-lowest); }
#page-projects .proj-res-cost-cur { color: var(--mid-muted); font-size: 13px; flex: 0 0 auto; }
#page-projects .proj-res-cost-inp { background: transparent !important; border: none !important; padding: 0 !important; height: auto !important; font-size: 13px; width: 100%; min-width: 0; }
/* "Cost" + "Data" headings sit over their columns */
#page-projects .proj-res-thead > span:nth-child(3) { justify-self: start; width: auto; text-align: left; }
#page-projects .proj-res-thead > span:nth-child(4) { justify-self: end; width: 84px; text-align: center; }
#page-projects .proj-res-status { justify-self: end; }

/* Resource modal: two cost fields side by side */
.qgm-field-row { display: flex; gap: 12px; }
.qgm-field-row .qgm-field { flex: 1 1 0; min-width: 0; }

/* Setup → Team → Resources roster (moved from Quote). App-standard rows + avatar. */
#page-setup .team-res-list { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
#page-setup .team-res-group { display: flex; flex-direction: column; gap: 6px; }
#page-setup .team-res-role { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-muted); }
#page-setup .team-res-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: rgba(42,51,37,0.04); border: none; border-radius: 12px; padding: 10px 14px; color: var(--mid-text); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
#page-setup .team-res-row:hover { background: rgba(42,51,37,0.08); }
#page-setup .team-res-av { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--mid-surface-2); color: var(--mid-accent-ink); font-weight: 700; font-size: 13px; }
#page-setup .team-res-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
#page-setup .team-res-name { font-size: 13px; font-weight: 600; color: var(--mid-text); }
#page-setup .team-res-edit { color: var(--mid-muted); font-size: 18px; flex: 0 0 auto; }
#page-setup .team-res-row:hover .team-res-edit { color: var(--mid-accent-ink); }

/* Catalog modals (Service / Event Type / Package) → match the New Deal modal:
   bone-fill borderless inputs, lime Save pill, circular ghost X, small checkboxes. */
html[data-theme] #qcLibModalBox :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-base) !important; border: 1px solid transparent !important; border-radius: 12px !important;
  color: var(--mid-text) !important; padding: 12px 14px !important;
}
html[data-theme] #qcLibModalBox :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: transparent !important; box-shadow: 0 0 0 3px rgba(217,236,79,0.45) !important;
}
#qcLibModalBox :is(input[type="checkbox"], input[type="radio"]) { all: revert !important; accent-color: var(--mid-accent); width: 18px !important; height: 18px !important; flex: 0 0 auto; }
#qcLibModalBox .qc-x { width: 32px !important; height: 32px !important; border-radius: 9999px !important; background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important; display: grid !important; place-items: center; font-size: 14px !important; padding: 0 !important; }
#qcLibModalBox .qc-x:hover { background: var(--mid-surface-2) !important; color: var(--mid-text) !important; }
#qcLibModalBox .button.primary, #qcLibModalBox .lib-modal-foot .button.primary, #qcLibModalBox .lib-modal-actions .button.primary {
  background: var(--lime, #d9ff5e) !important; color: var(--on-lime, #1a2000) !important; border: none !important; border-radius: 9999px !important; font-weight: 600;
}
#qcLibModalBox .button.ghost { background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important; border: none !important; border-radius: 9999px !important; }
#qcLibModalBox .qgm-field > span, #qcLibModalBox .lib-field > span { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--mid-text-2) !important; }

/* Package modal: "Events included" chips are plain checkbox + label, no pill outline */
#pkgModal .qc-chip { border: none !important; background: transparent !important; border-radius: 0 !important; padding: 4px 14px 4px 0 !important; font-weight: 500; }
#pkgModal .qc-chip:has(input:checked) { background: transparent !important; color: var(--mid-text) !important; }
#pkgModal .qc-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* Finance: normalized eyebrow to 11px (matches Projects), merged-ledger columns */
#finBand .fin-sect { font-size: 11.5px !important; }
#finBand .fin-sect.fin-sect-major {
  font-size: 16px !important; line-height: 22px; letter-spacing: 0; text-transform: none;
  color: var(--mid-text); font-weight: 600; margin-bottom: 12px;
}
#finBand .fin-ledger-meta { display: inline-flex; align-items: center; gap: 10px; }
#finBand .fin-ledger-owed { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#finBand .finled-bal .num { color: var(--mid-warm, #ffc176); font-weight: 600; }
#finBand .finled-bal .fin-age-chip { margin-left: 8px; }
#finBand .fin-led-table th:nth-child(4) { text-align: right; }
#finBand .finled-bal { text-align: right; white-space: nowrap; }

/* Cash outlook: drop the outer card — the 3 month cards float directly on the page */
#finBand .fin-forecast { background: transparent !important; box-shadow: none !important; border: none !important; padding: 4px 0 0 !important; }

/* ── Finance: per-project CARDS (replaces the ledger table) ──────────────────── */
#finBand .finproj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#finBand .finproj-card { background: rgba(42,51,37,0.04); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; transition: background var(--dur-fast) var(--ease); }
#finBand .finproj-card:hover { background: rgba(42,51,37,0.07); }
#finBand .finproj-card.is-open { grid-column: 1 / -1; background: var(--mid-surface); box-shadow: 0 1px 3px rgba(42,51,37,0.08); }
#finBand .finproj-cardhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
#finBand .finproj-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#finBand .finproj-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
#finBand .finproj-date { font-size: 11.5px; color: var(--mid-muted); }
#finBand .finproj-plpct { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 9999px; white-space: nowrap; }
#finBand .finproj-plpct.is-profit { color: #0f7a3d; background: rgba(56,189,120,0.16); }
#finBand .finproj-plpct.is-loss { color: var(--mid-danger, #ff7a70); background: rgba(255,122,112,0.14); }
#finBand .finproj-plpct.is-none { color: var(--mid-muted); background: var(--mid-surface-3); }
#finBand .finproj-cardstats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#finBand .finproj-stat { display: flex; flex-direction: column; gap: 3px; }
#finBand .finproj-stat-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-muted); font-weight: 600; }
#finBand .finproj-stat-val { font-size: 16px; font-weight: 500; color: var(--mid-text); font-variant-numeric: tabular-nums; }
#finBand .finproj-stat-val.is-owed { color: var(--mid-warm, #ffc176); }
#finBand .finproj-stat-val.is-clear { color: var(--mid-ok, #38bd78); font-size: 14px; }
#finBand .finproj-stat-val .fin-age-chip { margin-left: 8px; vertical-align: middle; }
#finBand .finproj-cardacts { display: flex; gap: 8px; flex-wrap: wrap; }
#finBand .finproj-cardacts .fin-act-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--mid-text-2); background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 11px; cursor: pointer; margin: 0; }
#finBand .finproj-card.is-open .finproj-cardacts .fin-act-btn { background: var(--mid-surface-2); }
#finBand .finproj-cardacts .fin-act-btn:hover { border-color: var(--mid-accent); color: var(--mid-text); }
#finBand .finproj-cardacts .fin-act-btn .material-symbols-outlined { font-size: 15px; }
#finBand .finproj-carddetail { border-top: 1px solid var(--mid-line); padding-top: 12px; }
#finBand .finled-more { text-align: center; margin-top: 14px; }

/* Finance width matches the Projects page (full content width, no centered cap) */
/* Inside the dashboard band the old page-level 120px tab-bar clearance is just a
   crater of empty space — the dashboard page provides its own bottom padding. */
#finBand .fin-body { max-width: none !important; margin: 0 !important; padding: 6px 0 12px !important; }

/* Project money = LIST rows (one project per row), like the Projects page cards */
#finBand .finproj-grid { display: flex; flex-direction: column; gap: 10px; }
#finBand .finproj-card { background: var(--mid-surface); border: none; border-radius: 16px; box-shadow: 0 1px 3px rgba(42,51,37,0.08); padding: 0; display: block; transition: box-shadow var(--dur-fast) var(--ease); }
#finBand .finproj-card:hover, #finBand .finproj-card.is-open { box-shadow: 0 4px 14px -4px rgba(42,51,37,0.18); }
#finBand .finproj-line { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap; }
#finBand .finproj-linebtn { flex: 1 1 auto; display: flex; align-items: center; gap: 24px; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
#finBand .finproj-cn { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#finBand .finproj-metric { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; min-width: 118px; }
#finBand .finproj-metric .finproj-stat-lbl { font-size: 11.5px; }
#finBand .finproj-metric .finproj-stat-val { font-size: 14px; }
#finBand .finproj-chev { color: var(--mid-muted); flex: 0 0 auto; margin-left: auto; transition: transform var(--dur-fast) var(--ease); }
#finBand .finproj-card.is-open .finproj-chev { transform: rotate(180deg); }
#finBand .finproj-line .finproj-cardacts { flex: 0 0 auto; }
#finBand .finproj-carddetail { border-top: 1px solid var(--mid-line); padding: 12px 18px 16px; }
@media (max-width: 760px) { #finBand .finproj-linebtn { flex-wrap: wrap; gap: 12px 20px; } #finBand .finproj-metric { min-width: 96px; } }

/* Finance cards: no white surface — transparent rows on the page, subtle hover/open tint */
#finBand .finproj-card { background: transparent !important; box-shadow: none !important; border-radius: 12px; }
#finBand .finproj-card:hover { background: rgba(42,51,37,0.04) !important; box-shadow: none !important; }
#finBand .finproj-card.is-open { background: rgba(42,51,37,0.04) !important; box-shadow: none !important; }

/* FINAL: section transparent, individual cards WHITE, list capped to ~5 rows + scroll */
#finBand .fin-ledger { background: transparent !important; box-shadow: none !important; border: none !important; padding: 4px 0 0 !important; }
#finBand #finLedgerGrid { padding: 2px 4px 2px 2px; }
#finBand .finproj-card { background: var(--mid-surface) !important; box-shadow: 0 1px 3px rgba(42,51,37,0.08) !important; border: none !important; border-radius: 14px; }
#finBand .finproj-card:hover { background: var(--mid-surface) !important; box-shadow: 0 4px 14px -4px rgba(42,51,37,0.18) !important; }
#finBand .finproj-card.is-open { background: var(--mid-surface) !important; box-shadow: 0 4px 14px -4px rgba(42,51,37,0.18) !important; }

/* Filter bar at top: compact inline row (transparent), not a big stacked card */
#finBand .fin-filterbar { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 0 4px !important; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#finBand .fin-filter-search { flex: 1 1 260px; min-height: 40px; }
#finBand .fin-filter-sel { flex: 0 0 auto; width: 172px; min-height: 40px; }
#finBand .fin-export { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 640px) { #finBand .fin-filter-sel { flex: 1 1 140px; width: auto; } #finBand .fin-export { margin-left: 0; } }
/* Dashboard-style trend chart sits in the analytics grid like the other card */
#finBand .fin-analytics > .sg-card { margin-bottom: 0; min-width: 0; }
#finBand .fin-analytics .sg-trend .sg-cols { height: 220px; }

/* Finance filter dropdowns (dashboard icon-button + popover style) */
#finBand .fin-filterbar .fin-drop { flex: 0 0 auto; }
#finBand .fin-filterbar .dash-filter-btn { min-height: 40px; }
#finBand .fin-drop .dash-filter-opt.is-active { background: var(--mid-surface-3); font-weight: 600; }
#finBand .fin-drop .dash-filter-pop { min-width: 180px; }

/* Categorical spend card matches the booked-revenue card height */
#finBand .fin-analytics { align-items: stretch; }
#finBand .fin-analytics > .fin-spend { display: flex; flex-direction: column; }
#finBand .fin-spend .fin-spend-body { flex: 1 1 auto; align-content: center; }

/* Dashboard weekly-health line under the glance KPIs (metrics reshape 2026-07-11) */
.dash-health-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:10px 2px 0; padding:10px 14px; border-radius:12px;
  background:var(--mid-surface); color:var(--mid-text-2); font-size:13px; font-weight:600;
  box-shadow:0 1px 3px rgba(42,51,37,0.08); }
.dash-health-line > span { display:inline-flex; align-items:center; gap:7px; }
.dash-health-line .material-symbols-outlined { font-size:17px; color:var(--mid-primary); }
.dash-health-line .dash-health-sep { width:1px; height:15px; background:var(--mid-line); }

/* Negotiation decision card — three stances inline under the assessment */
.today-decisions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.today-negotiation .today-ico { color: var(--mid-accent-ink); }

/* Crew recommendation panel (Projects event card) */
.proj-recommend-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.proj-rec-panel { border: 1px solid var(--mid-line); border-radius: 12px; padding: 12px; margin: 8px 0; display: grid; gap: 10px; background: var(--mid-lowest); }
.proj-rec-slot { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; align-items: center; }
.proj-rec-role { font-weight: 600; font-size: 13px; color: var(--mid-text-2); }
.proj-rec-why { grid-column: 2; }
.proj-rec-pick { background: var(--mid-surface); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 8px; }
.proj-rec-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* Sharpen Gia nudge — desktop-only dismissible dashboard card */

/* ── Plan gating (badge, read-only lock bar, upgrade dialog) ──────────────────
   Body-level elements: MUST use the always-dark --mid-* tokens. The :root tokens
   resolve LIGHT outside #page-dashboard and would render a cream card on the dark app. */
/* The badge sits at the top of the profile menu, so it reads with the items below it:
   same inset, same left alignment, same type size. It used to be a centred uppercase
   pill in a menu of left-aligned sentence-case rows — the odd one out. */
.plan-badge[hidden] { display: none; }   /* `display: block` below beats [hidden] on its own */
.plan-badge {
  display: block; margin: 4px 6px 6px; padding: 7px 12px;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
  font-size: var(--t-sm, 13px); font-weight: 600; letter-spacing: 0; text-transform: none;
  text-align: left; line-height: 1.35;
}
/* Red is reserved for money owed. A trial — running or lapsed — is a nudge, not an
   error, so it wears the app's lime accent with dark ink on top. */
.plan-badge.is-notice { background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); }
.plan-badge.is-locked {   /* money owed is the one state that isn't good news */
  background: var(--mid-surface-3); color: var(--mid-danger); border-color: var(--mid-danger);
}

.readonly-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px;
  background: var(--mid-surface-3); color: var(--mid-text);
  border-top: 1px solid var(--mid-danger);
  font-size: 13px; text-align: center;
}

.upg-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .55);
}
.upg-modal[hidden] { display: none; }
.upg-card {
  width: 100%; max-width: 420px; padding: 22px;
  background: var(--mid-surface-2); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: var(--mid-radius);
  box-shadow: var(--mid-shadow);
}
.upg-title { margin: 0 0 8px; font-size: 16px; color: var(--mid-text); }
.upg-body { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--mid-muted); }
.upg-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* .nav-item/.more-item set `display:flex`, which BEATS the UA stylesheet's
   [hidden]{display:none} — so plan-hidden nav entries stayed visible. */
.nav-item[hidden], .more-item[hidden] { display: none !important; }

/* Read-only lock: hide the create affordance rather than let someone fill a form
   and get refused at submit. The server 402 is still the real gate. */
body.is-readonly .create-fab { display: none; }
/* Keep content clear of the fixed lock bar. */
body.is-readonly { padding-bottom: 44px; }

/* ============================================================
   SETUP UX 2026-07-18 — Setup page normalization (CSS-only)
   Overrides only; scoped to #page-setup / new setup classes.
   ============================================================ */

/* 1. FADE FIX — instant reveal, no lingering dim state.
   .fade-in leaves sections at opacity:0 until JS adds .is-visible; on tab
   switches that read as seconds of dim content. Force final state visible
   and replace the 600ms transition with a 140ms one-shot animation. */
#page-setup .setup-section.fade-in,
#page-setup .setup-section {
  opacity: 1;
  transform: none;
  transition: none;
  animation: setup-reveal 140ms ease-out;
}
@keyframes setup-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* After the first reveal, display toggles (tab/page switches) must not replay
   the animation — JS stamps this class once the initial render has played. */
#page-setup.setup-anim-done .setup-section { animation: none; }

/* 2. HEADER SYSTEM — one hierarchy per card */
#page-setup .setup-section .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-muted);
  margin-bottom: 4px;
}
#page-setup .setup-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--mid-text);
  margin-bottom: 6px;
}
#page-setup .setup-section h2 + p,
body.setup-active #page-setup .setup-section h2 + p {
  font-size: 13px;
  color: var(--mid-text-2);
  max-width: 70ch;
  margin: 0 0 16px;
}
/* Replaces SHOUTY-CAPS inline sub-headers (markup pass applies the class) */
#page-setup .setup-subhead {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mid-text-2);
  margin: 20px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--mid-line);
}

/* 3. INPUT RHYTHM */
#page-setup input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#page-setup select {
  height: 38px;
}
#page-setup textarea:not(#systemPrompt) {
  min-height: 72px;
  max-height: 180px; /* caps the giant Studio-address / deck textareas; #systemPrompt keeps its own height + resize */
}
#page-setup label > span,
#page-setup label,
body.setup-active #page-setup label > span {
  font-size: 12px;
  color: var(--mid-text-2);
}
#page-setup .setup-section .muted,
#page-setup .setup-section small,
#page-setup .setup-section .help {
  font-size: 12px;
  color: var(--mid-muted);
}

/* 4. SWITCH COMPONENT — checkbox-based toggle */
/* Toggle BUTTON (owner call 2026-07-18: buttons, not dials) — a checkbox styled as a
   small On/Off button. Hard-locked dims: app-wide input rules add padding/min-height. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: auto !important;
  min-width: 52px;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--mid-lowest);
  border: 1px solid var(--mid-line);
  position: relative;
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.switch::after {
  content: "Off";
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mid-muted);
  position: static;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  transform: none;
}
.switch:hover { border-color: var(--mid-muted); }
.switch:checked {
  background: var(--mid-accent);
  border-color: var(--mid-accent);
}
.switch:checked::after {
  content: "On";
  transform: none;
  background: none;
  color: var(--mid-on-accent);
}
.switch:disabled { opacity: 0.45; cursor: default; }
.switch:focus-visible {
  outline: 2px solid var(--mid-accent);
  outline-offset: 2px;
}
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.switch-row .switch { margin-top: 1px; }
#page-setup .switch-row > span,
body.setup-active #page-setup .switch-row > span {
  font-size: 13px;
  color: var(--mid-text);
}
.switch-row small {
  display: block;
  font-size: 11.5px;
  color: var(--mid-muted);
}

/* 5. INTEGRATION CARDS — equal-height 2-col grid, actions pinned bottom */
.integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.integration-grid > .setup-section {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.integration-actions {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .integration-grid { grid-template-columns: 1fr; }
}

/* 6. (removed) overheads add-form compaction already handled by the
   #page-setup #setupOverheads .fin-oh-add / .fin-oh-in rules above. */

/* 7. USAGE METER — billing/usage bars (fill width set inline as %) */
.usage-meter {
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: var(--mid-lowest);
  overflow: hidden;
}
.usage-meter > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--mid-primary);
}
.usage-meter.warn > span { background: #ffc176; }
.usage-meter.over > span { background: var(--mid-danger); }

/* [hidden] must always win — the integration-card flex rules were overriding the
   UA's display:none, so "Disconnect" showed on never-connected channels. */
#page-setup [hidden] { display: none !important; }

/* Card rhythm: sections sit in a plain block <form> with zero margins — without
   this they butt together (Quote & proposal / Billing & data feedback 2026-07-18). */
#page-setup .setup-section { margin: 0 0 18px; }
#page-setup .integration-grid .setup-section { margin: 0; } /* grid gap handles these */

/* Catalog: .lib-grid ships fixed pixel columns (571px/408px) leaving dead space in
   the 1380px card — stretch to two equal fluid columns inside Setup. */
#page-setup .lib-grid {
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
/* The catalog editor was built for the narrow Pricing page and carries a 1000px cap —
   inside the full-width Setup card that stranded ~380px of dead space (Sri 2026-07-18). */
#page-setup .pricing-editor {
  max-width: none;
  width: 100%;
}
@media (max-width: 980px) { #page-setup .lib-grid { grid-template-columns: 1fr; } }
/* Go-live checklist strip */
.gs-strip {
  margin: 0 0 18px;
  border: 1px solid var(--mid-line);
  background: var(--mid-surface);
}
.gs-strip .gs-head h2 { font-size: 16px; margin-bottom: 4px; }
.gs-steps { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.gs-step {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--mid-line);
  background: var(--mid-surface-2);
  color: var(--mid-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms var(--ease), background 120ms var(--ease);
}
.gs-step:hover { border-color: var(--mid-accent); }
.gs-step .gs-num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mid-lowest);
  border: 1px solid var(--mid-line);
  color: var(--mid-text-2);
  font-weight: 700;
  font-size: 13px;
}
.gs-step.done { opacity: 0.75; cursor: default; }
.gs-step.done .gs-num { background: var(--mid-accent); border-color: var(--mid-accent); color: var(--mid-on-accent); }
.gs-step .gs-txt { display: flex; flex-direction: column; gap: 1px; }
.gs-step .gs-txt strong { font-size: 13px; }
.gs-step .gs-txt small { font-size: 11.5px; color: var(--mid-muted); }
/* Tab status dots */
.setup-tab { position: relative; }
.setup-tab .tab-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tab-dot.done { background: var(--mid-accent); }
.tab-dot.todo { background: #ffc176; }
/* Sample-data chip */
.sample-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(255, 193, 118, 0.12);
  color: #ffc176;
  border: 1px solid rgba(255, 193, 118, 0.35);
  margin-left: 10px;
  vertical-align: middle;
}
/* Get-started dashboard row */
.gs-dash {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--mid-line);
  background: var(--mid-surface);
}
.gs-dash strong { font-size: 14px; color: var(--mid-text); }
@media (max-width: 640px) { .gs-dash { flex-direction: column; } }
/* ===== end SETUP UX 2026-07-18 ===== */

/* ── Locked (upsell) nav items — visible but greyed with a plan pill ── */
.nav-item.nav-locked{opacity:.45;position:relative}
.nav-item.nav-locked:hover{opacity:.6}
.nav-lock-pill{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--mid-accent,#d9ff5e);color:var(--mid-on-accent,#1a2000);
  border-radius:9999px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.more-item.nav-locked{opacity:.45}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR — reskinned to the pixxl.app design language (cream/lime/ink), scoped
   to #page-calendar only. Light + dark, keyed to the app theme toggle. Overrides
   the --mid-* calendar styles above (same specificity, later in the cascade).
   ═══════════════════════════════════════════════════════════════════════════ */
#page-calendar {
  --px-cr:#EFEBE3; --px-card:#fff; --px-soft:#F6F3EC;
  --px-ink:#10151A; --px-ink2:#3A4048; --px-mut:#6E6A5E;
  --px-lime:#d9ff5e; --px-lime-deep:#B8CC2E; --px-line:rgba(16,21,26,.10);
  --px-shadow:0 34px 70px -44px rgba(16,21,26,.35);
  background:var(--px-cr); border-radius:22px; padding:20px 22px 26px;
}
html[data-theme="dark"] #page-calendar {
  --px-cr:#0f1418; --px-card:#1b2024; --px-soft:#232a2f;
  --px-ink:#eef2f5; --px-ink2:#c4ced6; --px-mut:#8a959d;
  --px-lime:#d9ff5e; --px-lime-deep:#c7dc3a; --px-line:#2c353b;
  --px-shadow:0 30px 60px -40px rgba(0,0,0,.6);
}
/* heading */
#page-calendar .page-heading .eyebrow,
#page-calendar .page-heading p.eyebrow { color:var(--px-lime-deep); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
html[data-theme="light"] #page-calendar .page-heading .eyebrow { color:#4c541f; }
#page-calendar .page-heading h1 { font-weight:900; letter-spacing:-.03em; color:var(--px-ink); }
#page-calendar #calendarMeta { color:var(--px-mut); }

/* main + agenda cards */
#page-calendar .cal-main,
#page-calendar .cal-agenda { background:var(--px-card); border:1px solid var(--px-line); border-radius:24px; box-shadow:var(--px-shadow); }
#page-calendar .cal-main { padding:22px 22px 24px; }
#page-calendar .cal-agenda { padding:20px; }

/* toolbar */
#page-calendar .cal-title { color:var(--px-ink); font-weight:900; letter-spacing:-.02em; font-size:20px; }
#page-calendar .cal-nav-btn { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--px-line); background:transparent; color:var(--px-ink); transition:transform var(--dur), background var(--dur); }
#page-calendar .cal-nav-btn:hover { background:var(--px-soft); transform:translateY(-1px); }
#page-calendar .cal-today-btn { border-radius:9999px; border:1.5px solid var(--px-line); background:transparent; color:var(--px-ink); font-weight:700; padding:8px 16px; transition:transform var(--dur), border-color var(--dur); }
#page-calendar .cal-today-btn:hover { transform:translateY(-1px); border-color:var(--px-ink); background:transparent; }
#page-calendar #calAddBtn { margin-left:0; background:var(--px-ink); color:var(--px-lime); border:0; font-weight:800; }
html[data-theme="dark"] #page-calendar #calAddBtn { background:var(--px-lime); color:#10151A; }
#page-calendar #calAddBtn:hover { transform:translateY(-2px); }
/* view toggle */
#page-calendar .cal-view-toggle { background:var(--px-soft); border:1px solid var(--px-line); border-radius:9999px; padding:3px; }
#page-calendar .cal-view-btn { border:0; background:transparent; color:var(--px-mut); font-weight:700; border-radius:9999px; padding:6px 14px; }
#page-calendar .cal-view-btn.is-active { background:var(--px-ink); color:var(--px-lime); }
html[data-theme="dark"] #page-calendar .cal-view-btn.is-active { background:var(--px-lime); color:#10151A; }

/* month grid */
#page-calendar .cal-grid { gap:6px; background:transparent; border:0; border-radius:0; }
#page-calendar .cal-dow { background:transparent; color:var(--px-mut); font-weight:800; letter-spacing:.1em; }
#page-calendar .cal-cell { background:var(--px-soft); border:1px solid var(--px-line); border-radius:14px; min-height:104px; }
#page-calendar .cal-cell.cal-empty { background:transparent; border-color:transparent; opacity:1; }
#page-calendar .cal-daynum { color:var(--px-ink2); font-weight:800; }
#page-calendar .cal-cell.cal-today { background:color-mix(in srgb, var(--px-lime) 30%, var(--px-card)); border-color:var(--px-lime-deep); }
#page-calendar .cal-cell.cal-today .cal-daynum { color:var(--px-ink); }
/* event chips */
#page-calendar .cal-chip { background:var(--px-card); border:1px solid var(--px-line); border-left:3px solid var(--px-mut); border-radius:8px; color:var(--px-ink); font-weight:600; }
#page-calendar .cal-chip:hover { background:var(--px-soft); }
#page-calendar .cal-chip-time { color:var(--px-mut); }
#page-calendar .cal-chip.cal-k-task { border-left-color:var(--px-lime-deep); }
#page-calendar .cal-chip.cal-k-followup { border-left-color:#e0a23c; }
#page-calendar .cal-chip.cal-k-meeting { border-left-color:#8b5cf6; }
#page-calendar .cal-more { color:var(--px-mut); font-weight:700; }

/* agenda list */
#page-calendar .cal-agenda-head { color:var(--px-mut); font-weight:800; letter-spacing:.14em; }
#page-calendar .cal-agenda-day { color:var(--px-ink2); font-weight:800; }
#page-calendar .cal-ag-item { background:var(--px-soft); border:1px solid var(--px-line); border-left:3px solid var(--px-mut); border-radius:12px; color:var(--px-ink); transition:transform var(--dur-fast); }
#page-calendar .cal-ag-item:hover { background:var(--px-card); transform:translateX(2px); }
#page-calendar .cal-ag-item.cal-k-task { border-left-color:var(--px-lime-deep); }
#page-calendar .cal-ag-item.cal-k-followup { border-left-color:#e0a23c; }
#page-calendar .cal-ag-item.cal-k-meeting { border-left-color:#8b5cf6; }
#page-calendar .cal-ag-ic { color:var(--px-lime-deep); }
#page-calendar .cal-ag-title { color:var(--px-ink); font-weight:700; }
#page-calendar .cal-ag-who,
#page-calendar .cal-ag-time { color:var(--px-mut); }

/* Pixxl-styled modal (calendar Add-entry, etc.) — light + dark, body-level. */
.px-modal-ov { position:fixed; inset:0; z-index:200; background:rgba(16,21,26,.45); display:grid; place-items:center; padding:20px; }
.px-modal {
  --pm-card:#fff; --pm-ink:#10151A; --pm-mut:#6E6A5E; --pm-line:rgba(16,21,26,.16); --pm-lime:#d9ff5e; --pm-well:#fff;
  background:var(--pm-card); color:var(--pm-ink); border:1px solid rgba(16,21,26,.08);
  border-radius:24px; padding:24px; width:min(400px,100%); box-shadow:0 46px 90px -40px rgba(16,21,26,.5);
}
html[data-theme="dark"] .px-modal { --pm-card:#1b2024; --pm-ink:#eef2f5; --pm-mut:#8a959d; --pm-line:#3e484f; --pm-well:#0f1418; }
.px-modal h3 { margin:0 0 16px; font-weight:900; font-size:20px; letter-spacing:-.02em; color:var(--pm-ink); }
.px-modal label { display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pm-mut); margin:12px 0 5px; }
.px-modal input { width:100%; box-sizing:border-box; background:var(--pm-well); color:var(--pm-ink); border:1.5px solid var(--pm-line); border-radius:14px; padding:12px 14px; font:inherit; font-size:14px; }
.px-modal input:focus { outline:none; border-color:var(--pm-ink); box-shadow:0 0 0 3px var(--pm-lime); }
.px-modal .px-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.px-modal .px-btn { border-radius:9999px; padding:11px 22px; font-weight:800; font-size:14px; cursor:pointer; border:0; font-family:inherit; transition:transform var(--dur); }
.px-modal .px-btn:hover { transform:translateY(-2px); }
.px-modal .px-btn.primary { background:var(--pm-ink); color:var(--pm-lime); }
html[data-theme="dark"] .px-modal .px-btn.primary { background:var(--pm-lime); color:#10151A; }
.px-modal .px-btn.ghost { background:transparent; border:1.5px solid var(--pm-line); color:var(--pm-ink); }

/* Calendar event-click modal — pixxl look (light + dark). Body-level, so keyed by theme. */
.cal-modal {
  --cm-ink:#10151A; --cm-mut:#6E6A5E; --cm-line:rgba(16,21,26,.12); --cm-well:#F6F3EC; --cm-lime:#d9ff5e;
  background:#fff !important; border:1px solid rgba(16,21,26,.08) !important; border-radius:24px !important;
  box-shadow:0 46px 90px -40px rgba(16,21,26,.5) !important;
}
html[data-theme="dark"] .cal-modal { --cm-ink:#eef2f5; --cm-mut:#8a959d; --cm-line:#3e484f; --cm-well:#0f1418; background:var(--kb-panel, #1b2024) !important; border-color:#3e484f !important; }
.cal-modal-veil { background:rgba(16,21,26,.45) !important; }
.cal-modal::before { background:var(--cm-mut) !important; border-radius:var(--r-card,30px) 0 0 var(--r-card,30px) !important; }
.cal-modal.cal-k-task::before { background:#B8CC2E !important; }
.cal-modal.cal-k-followup::before { background:#e0a23c !important; }
.cal-modal.cal-k-meeting::before { background:#8b5cf6 !important; }
.cal-modal-x { color:var(--cm-mut) !important; }
.cal-modal-x:hover { color:var(--cm-ink) !important; background:var(--cm-well) !important; }
.cal-modal-badge { color:#4c541f !important; border-color:var(--cm-line) !important; }
html[data-theme="dark"] .cal-modal-badge { color:#c7dc3a !important; }
.cal-modal-title { color:var(--cm-ink) !important; font-weight:900 !important; letter-spacing:-.02em; }
.cal-modal-row { color:var(--cm-ink) !important; }
.cal-modal-row .material-symbols-outlined { color:var(--cm-mut) !important; }
.cal-modal-row.muted { color:var(--cm-mut) !important; }
.cal-modal-notes { background:var(--cm-well) !important; border:1px solid var(--cm-line) !important; border-radius:14px !important; color:var(--cm-ink) !important; }
.cal-modal-row a { color:#4c541f !important; font-weight:700; }
.cal-modal-actions .button.primary { background:#10151A !important; color:var(--cm-lime) !important; border:0 !important; border-radius:9999px !important; }
html[data-theme="dark"] .cal-modal-actions .button.primary { background:var(--cm-lime) !important; color:#10151A !important; }
.cal-modal-actions .button.ghost { background:transparent !important; border:1.5px solid var(--cm-line) !important; color:var(--cm-ink) !important; border-radius:9999px !important; }

/* Agenda column is CAPPED to the calendar's height (JS sets the exact px) and its
   list scrolls inside — the calendar keeps its own natural height, never grows. */
#page-calendar .cal-wrap { align-items:start; }
#page-calendar .cal-agenda { position:static; min-height:0; overflow-y:auto; }
#page-calendar .cal-agenda-list { min-height:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — reskinned to the pixxl.app language. Every card/tile/chart is
   driven by --mid-* tokens, so we REMAP those tokens to the pixxl palette,
   scoped to #page-dashboard, for both themes — then a few polish overrides.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-dashboard {
  --mid-base:#EFEBE3; --mid-surface:#fff; --mid-surface-2:#fff; --mid-surface-3:#F6F3EC; --mid-surface-4:#EDE8DE; --mid-lowest:#fff;
  --mid-line:rgba(16,21,26,.10); --mid-text:#10151A; --mid-text-2:#3A4048; --mid-muted:#6E6A5E;
  --mid-accent:#d9ff5e; --mid-primary:#B8CC2E; --mid-on-accent:#1a2000; --mid-tertiary:#B8830B; --mid-radius:20px;
  --mid-shadow:0 30px 64px -44px rgba(16,21,26,.34);
  /* The cream page-box died with the board reskin (2026-08-08): same gutter
     and canvas as the Leads page, so the two boards start at the same x. */
  background:transparent; border-radius:0; padding:0;
}
html[data-theme="dark"] #page-dashboard {
  --mid-base:#0f1418; --mid-surface:#1b2024; --mid-surface-2:#1b2024; --mid-surface-3:#252b2e; --mid-surface-4:#2a3238; --mid-lowest:#0a0f12;
  --mid-line:#2c353b; --mid-text:#eef2f5; --mid-text-2:#c4ced6; --mid-muted:#8a959d;
  --mid-accent:#d9ff5e; --mid-primary:#d9ff5e; --mid-on-accent:#10151A; --mid-tertiary:#ffc176;
}
/* polish — rounder cards + soft shadow, bolder headings, lime accents */
#page-dashboard .page-heading .eyebrow { color:#4c541f; font-weight:800; letter-spacing:.16em; }
html[data-theme="dark"] #page-dashboard .page-heading .eyebrow { color:#c7dc3a; }
#page-dashboard .page-heading h1 { font-weight:900; letter-spacing:-.03em; }
#page-dashboard .nx-kpi,
#page-dashboard .nx-card,
#page-dashboard .sg-listcard,
#page-dashboard .sg-card { border-radius:20px; box-shadow:var(--mid-shadow); }
#page-dashboard .nx-kpi-value,
#page-dashboard .sg-big { font-weight:900; letter-spacing:-.02em; }
#page-dashboard .nx-kpi-icon { background:color-mix(in srgb, var(--mid-accent) 22%, transparent); color:#4c541f; }
html[data-theme="dark"] #page-dashboard .nx-kpi-icon { color:#c7dc3a; }
#page-dashboard .nx-card-head h3,
#page-dashboard .sg-h { font-weight:800; letter-spacing:-.01em; }
#page-dashboard .nx-funnel-fill.is-won { background:linear-gradient(90deg,var(--mid-accent),#e8f47a); box-shadow:0 0 22px rgba(217,236,79,.4); }
#page-dashboard .gs-dash { border-radius:20px; box-shadow:var(--mid-shadow); }
/* primary buttons on the dashboard → ink pill / lime (marketing) */
#page-dashboard .button.primary { background:#10151A; color:#d9ff5e; border:0; border-radius:9999px; }
html[data-theme="dark"] #page-dashboard .button.primary { background:#d9ff5e; color:#10151A; }

/* Dashboard reskin — follow-up fixes (2026-07-21) */
/* 1) Card colour consistency: sg cards use --sg-surface (cream); unify to white
      like the go-live / today / health cards → all white on the cream page. */
#page-dashboard { --sg-surface:#fff; }
html[data-theme="dark"] #page-dashboard { --sg-surface:#1b2024; }
/* 3) Go-live nudge moved OUT of the dashboard content into a slim topbar pill
      (#goLiveChip) in the search row — a temporary reminder until setup is done,
      so it no longer collides with anything on the dashboard. */
/* ── Action-first dashboard (default; profile menu → "Classic dashboard" rolls back).
   The Today queue is the hero; KPI cards demote to a compact glance strip. All rules
   scoped to .dash-action so removing the class restores the classic look 1:1. ── */
#page-dashboard.dash-action .today-queue.today-hero {
  border-color: color-mix(in srgb, #d9ff5e 45%, var(--mid-line));
  /* subtle ring only — shadow weight matches the rest of the cards */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9ff5e 16%, transparent), 0 1px 3px rgba(42,51,37,0.10);
  background: linear-gradient(180deg, color-mix(in srgb, #d9ff5e 5%, var(--mid-surface)), var(--mid-surface));
}
/* Today as the first card of the sage main column: rely on the column's own gap,
   and never let the old full-width margins reappear inside the grid. */
#page-dashboard.dash-action .sg-main .today-queue { margin: 0; }
#page-dashboard.dash-action .nx-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
#page-dashboard.dash-action .nx-kpi { padding: 10px 12px; border-radius: 12px; }
#page-dashboard.dash-action .nx-kpi-value { font-size: 16px; margin: 2px 0 0; }
#page-dashboard.dash-action .nx-kpi .nx-kpi-icon { display: none; } /* glance strip: no big icons */

/* ── Light-theme unification: Projects + Calendar painted their own pixxl CREAM
   (#EFEBE3 — red-leaning) panel over the SAGE bone shell (#edeee4 — green-leaning),
   which read as a "mild reddish" container next to every other page. The dashboard
   avoids this via background:transparent; give these two the same treatment and
   retint their warm wells (#F6F3EC/#EDE8DE) to the sage family. Dark untouched. ── */
html[data-theme="light"] #page-projects {
  background: transparent; border-radius: 0; padding: 0;
  --mid-base:#edeee4; --mid-surface-3:#e7e9dc; --mid-surface-4:#dcdfd0;
}
html[data-theme="light"] #page-calendar {
  background: transparent; border-radius: 0; padding: 0;
  --px-cr:#edeee4; --px-soft:#e7e9dc;
}
/* Calendar, matched to the app's card language (white cards floating on the bone
   page — exactly like Finance/Dashboard): NO giant container panel; white borderless
   date tiles + white Upcoming card, all with the standard soft shadow. */
html[data-theme="light"] #page-calendar .cal-main { background:transparent; border:none; box-shadow:none; padding:0; }
html[data-theme="light"] #page-calendar .cal-cell {
  background:#fff; border:none; border-radius:14px; box-shadow:0 1px 3px rgba(42,51,37,0.10);
}
html[data-theme="light"] #page-calendar .cal-cell.cal-empty { background:transparent; box-shadow:none; }
html[data-theme="light"] #page-calendar .cal-cell.cal-today {
  background:color-mix(in srgb, #d9ff5e 32%, #fff); border:none;
  box-shadow:0 1px 3px rgba(42,51,37,0.10);
}
html[data-theme="light"] #page-calendar .cal-grid { gap:8px; }
html[data-theme="light"] #page-calendar .cal-agenda {
  background:#fff; border:none; box-shadow:0 14px 34px -14px rgba(42,51,37,0.20);
}
html[data-theme="light"] #page-calendar .cal-ag-item { background:#F6F3EC; border:none; border-left:3px solid var(--px-mut); }
html[data-theme="light"] #page-calendar .cal-ag-item.cal-k-task { border-left-color:var(--px-lime-deep); }
html[data-theme="light"] #page-calendar .cal-ag-item.cal-k-followup { border-left-color:#e0a23c; }
html[data-theme="light"] #page-calendar .cal-ag-item.cal-k-meeting { border-left-color:#8b5cf6; }
html[data-theme="light"] #page-projects :is(.proj-evt-card,.proj-view-evt,.proj-view-crew-row,.proj-view-deliv) {
  background:#e7e9dc; /* was warm #F6F3EC */
}

/* "Gia's day" proof line inside the Today card. */
.today-gia { display:flex; align-items:center; gap:7px; padding:2px 2px 10px; font-size:13px; color:var(--mid-muted); }
.today-gia .material-symbols-outlined { font-size:15px; color:var(--mid-primary); }

/* ROOT FIX — refresh/filter controls now live INSIDE the sage title row (adopted by
   renderSageDash), not floating absolute over the first card. Static flow: nothing
   can render underneath them anymore. Higher specificity than the legacy float rule. */
html[data-theme] body.dash-active #page-dashboard .sg-headrow .page-heading {
  position: static; display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; z-index: auto; margin-left: auto; top: auto; right: auto;
}

/* FAB clearance: the floating create button (+) sat ON list rows / card corners on
   every page. Reserve its corner so content scrolls clear of it. */
.page { padding-bottom: 96px; }
/* Calendar toolbar: "+ Add entry" overlapped the All/Projects segmented control at
   narrower widths — let the row wrap instead of stacking on itself. */
#page-calendar .cal-toolbar { flex-wrap: wrap; row-gap: 8px; }

/* S3 fix — "empty" status pills: a light-theme readability override (#15672e
   !important, ~line 8150) also applies in DARK (its scope matches both themes) and
   is later in the cascade than the dark pill colours, so "Connected"/"Active" text
   became dark-green-on-dark = invisible. Re-assert readable dark colours LAST. */
html[data-theme="dark"] body.setup-active #page-setup .status-pill.status-ok { color: #1a2000 !important; }
html[data-theme="dark"] body.setup-active #page-setup .status-pill.status-muted { color: var(--mid-muted) !important; }
html[data-theme="dark"] .inbox-window-bar.is-closed,
html[data-theme="dark"] .inbox-window-bar.is-closed .iwb-text strong { color: var(--mid-tertiary, #ffc176); }

/* "Start from a wedding style" template picker (Setup → Services & pricing). */
.style-tpl-list { display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow-y:auto; margin-top:6px; }
.style-tpl-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; color:var(--mid-text); font-size:14px; }
.style-tpl-row:hover { background:var(--mid-surface-2); }
.style-tpl-row input { width:17px; height:17px; accent-color:var(--mid-primary); flex:0 0 auto; }
.style-tpl-row input:disabled { opacity:.5; cursor:default; }
.style-tpl-add { display:flex; gap:8px; margin-top:10px; }
.style-tpl-add input { flex:1; min-width:0; background:var(--mid-lowest); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:10px; padding:9px 12px; font-size:14px; }
.style-tpl-add input:focus { outline:none; border-color:var(--mid-primary); }
.style-tpl-add .lib-add-btn { flex:0 0 auto; }

/* Dashboard "Finish setup" banner — the single pre-launch nudge. --mid-* tokens so
   it reads dark-on-dark and light-on-light (never a white card on the dark app). */
.setup-banner {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; margin-bottom:16px;
  background:var(--mid-surface); border:1px solid var(--mid-line);
  border-radius:var(--mid-radius, 16px); box-shadow:var(--mid-shadow, 0 2px 10px rgba(0,0,0,.18));
  animation:pop .22s ease;
}
.setup-banner .sb-ring {
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  display:grid; place-items:center; font-size:11.5px; font-weight:800; color:var(--mid-text);
  background:
    radial-gradient(closest-side, var(--mid-surface) 73%, transparent 75% 100%),
    conic-gradient(var(--mid-primary) calc(var(--sb-pct, 0) * 1%), var(--mid-line) 0);
}
.setup-banner .sb-body { flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.setup-banner .sb-body strong { font-size:14px; color:var(--mid-text); }
.setup-banner .sb-next { font-size:13px; color:var(--mid-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.setup-banner .sb-later { background:none; border:0; cursor:pointer; font-size:11.5px; color:var(--mid-muted); padding:6px 4px; flex:0 0 auto; }
.setup-banner .sb-later:hover { color:var(--mid-text-2); text-decoration:underline; }
@media (max-width:560px) {
  .setup-banner { flex-wrap:wrap; }
  .setup-banner .sb-body { flex-basis:calc(100% - 58px); }
  .setup-banner .sb-next { white-space:normal; }
  .setup-banner .button { order:3; flex:1 1 auto; }
  .setup-banner .sb-later { order:4; }
}
/* Upgrade pill: topbar-native (neutral outlined), matches chip height/shape. */
.upgrade-chip {
  display:inline-flex; align-items:center; gap:6px;
  height:38px; padding:0 15px; border-radius:9999px; cursor:pointer;
  background:transparent; color:var(--mid-text-2,#3A4048);
  border:1px solid var(--mid-line,rgba(16,21,26,.14)); font-weight:700;
  font-size:13px; white-space:nowrap; transition:background var(--dur-fast), border-color var(--dur-fast);
}
.upgrade-chip:hover { background:rgba(16,21,26,.05); border-color:var(--mid-text-2,#3A4048); }
html[data-theme="dark"] .upgrade-chip:hover { background:rgba(255,255,255,.06); }
.upgrade-chip .material-symbols-outlined { font-size:18px; }
/* 2) Gia response/health line: now moved into the left column (sg-main) via JS —
      style it as a full card matching the funnel/pipeline cards it sits under. */
#page-dashboard .dash-health-line {
  width:auto; margin:0 0 16px; box-sizing:border-box;
  background:#fff; border:1px solid var(--mid-line); border-radius:24px;
  box-shadow:0 1px 2px rgba(42,51,37,.04),0 8px 24px -14px rgba(42,51,37,.12);
  padding:18px 22px;
}
html[data-theme="dark"] #page-dashboard .dash-health-line { background:#1b2024; }
#page-dashboard .dash-health-line .material-symbols-outlined { color:#B8CC2E; }
html[data-theme="dark"] #page-dashboard .dash-health-line .material-symbols-outlined { color:#d9ff5e; }

/* ═══════════ PROJECTS reskin → pixxl palette (2026-07-21) ═══════════ */
/* Page is fully --mid-* driven; remap those tokens scoped to #page-projects,
   keyed by theme, exactly like the dashboard. Light = Sage cream, dark = midnight. */
#page-projects {
  --mid-base:#EFEBE3; --mid-surface:#fff; --mid-surface-2:#fff; --mid-surface-3:#F6F3EC; --mid-surface-4:#EDE8DE; --mid-lowest:#fff;
  --mid-line:rgba(16,21,26,.10); --mid-text:#10151A; --mid-text-2:#3A4048; --mid-muted:#6E6A5E;
  --mid-accent:#d9ff5e; --mid-primary:#B8CC2E; --mid-on-accent:#1a2000; --mid-tertiary:#B8830B; --mid-warm:#B8830B; --mid-radius:20px;
  --mid-shadow:0 30px 64px -44px rgba(16,21,26,.34);
  --lime:#d9ff5e; --on-lime:#1a2000;   /* buttons/pills use brand lime, matching the topbar chip */
  /* The cream page-box died with the board reskin (2026-08-08): same gutter
     and canvas as the Leads page, so the two boards start at the same x. */
  background:transparent; border-radius:0; padding:0;
}
html[data-theme="dark"] #page-projects {
  --mid-base:#0f1418; --mid-surface:#1b2024; --mid-surface-2:#1b2024; --mid-surface-3:#252b2e; --mid-surface-4:#2a3238; --mid-lowest:#0a0f12;
  --mid-line:#2c353b; --mid-text:#eef2f5; --mid-text-2:#c4ced6; --mid-muted:#8a959d;
  --mid-accent:#d9ff5e; --mid-primary:#d9ff5e; --mid-on-accent:#10151A; --mid-tertiary:#ffc176; --mid-warm:#ffc176;
  --lime:#d9ff5e; --on-lime:#1a2000;
  background:transparent; padding:0;
}
/* Heading polish to match dashboard (bold, lime eyebrow); drop the duplicate title. */
#page-projects .page-heading .eyebrow { color:#4c541f; font-weight:800; letter-spacing:.16em; }
html[data-theme="dark"] #page-projects .page-heading .eyebrow { color:#c7dc3a; }
#page-projects .page-heading h1 { font-weight:900; letter-spacing:-.03em; color:var(--mid-text); }
#page-projects .sg-contacts-head { display:none; }   /* redundant second "Projects" heading */
/* Cards: rounder + soft layered shadow like the dashboard cards. */
#page-projects .proj-card,
:is(#page-projects, #page-dashboard) .proj-stat-card { border-radius:20px; box-shadow:var(--mid-shadow); }
#page-projects .proj-mono { background:color-mix(in srgb, var(--mid-accent) 20%, var(--mid-surface-3)); color:#4c541f; }
html[data-theme="dark"] #page-projects .proj-mono { color:var(--mid-accent-ink); background:var(--mid-surface-2); }
:is(#page-projects, #page-dashboard) .proj-stat-val { font-weight:800; }
/* Expanded panel sub-rows sit on a faint tint — keep it olive on cream, dark on midnight. */
html[data-theme="dark"] #page-projects .proj-view-evt,
html[data-theme="dark"] #page-projects .proj-view-crew-row,
html[data-theme="dark"] #page-projects .proj-view-deliv { background:var(--mid-surface-3); }

/* ─── Projects colour consistency (light theme) — appended last, wins ───
   The old rules computed wells/backgrounds from --mid-text mixed into the base,
   which was subtle on midnight but turns muddy tan on cream. Pin clean values. */
/* 1) Input / select / date wells: clean white with a hairline border. */
html[data-theme="light"] :is(#page-projects,#finBand) :is(input,select,textarea) {
  background:#fff !important; border:1px solid var(--mid-line) !important;
  color:var(--mid-text) !important; -webkit-text-fill-color:var(--mid-text);
}
html[data-theme="light"] :is(#page-projects,#finBand) :is(input,select,textarea):focus {
  border-color:#B8CC2E !important;
}
/* 2) Event / crew / deliverable sub-cards: soft cream, not olive tint. */
html[data-theme="light"] #page-projects :is(.proj-evt-card,.proj-view-evt,.proj-view-crew-row,.proj-view-deliv) {
  background:#F6F3EC; border:1px solid rgba(16,21,26,.05);
}
/* 3) Pills → one 3-tone system: lime = done, amber = attention, muted = info. */
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge { border:none; }
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-pending,
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-pp-risk,
html[data-theme="light"] #page-projects .proj-res-status.is-pending {
  background:#F5E4AE !important; color:#6b5200 !important;   /* amber — attention */
}
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-shot {
  background:rgba(217,236,79,.4) !important; color:#4c541f !important;  /* lime tint — shot, in post */
}
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-done,
html[data-theme="light"] #page-projects .proj-res-status.is-received {
  background:#d9ff5e !important; color:#10151A !important;   /* solid lime — complete */
}
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-drift {
  background:#E7E2D6 !important; color:#5b5648 !important;   /* muted — informational */
}
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-overdue {
  background:#F5CFC6 !important; color:#8a2a17 !important;   /* soft red — genuine problem */
}

/* ── Lead assignment + advanced-permissions UI (2026-07-22) ── */
.dlp-assign-slot:empty { display:none; }
/* Owner control lives inside the Overview card now — plain row, no nested-card chrome. */
.dlp-assign { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0;
  color:var(--mid-text-2); font-size:13px; }
.dlp-assign-sel { width:100%; max-width:280px; }
.dlp-assign .material-symbols-outlined { font-size:18px; color:var(--mid-muted); }
.dlp-assign-lbl { color:var(--mid-muted); font-weight:600; }
.dlp-assign-sel { background:var(--mid-lowest); color:var(--mid-text); border:1px solid var(--mid-line);
  border-radius:8px; padding:6px 10px; min-height:34px; font-size:13px; }
.dlp-redact-note { color:var(--mid-warm,#ffc176); font-size:11.5px; margin-left:auto; }
/* Advanced per-user permissions modal (body-level → always-dark tokens) */
.uperm-modal { max-width:560px; width:calc(100vw - 40px); max-height:86vh; display:flex; flex-direction:column; }
.uperm-body { overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:2px; }
.uperm-group-h { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--mid-muted); margin:0 0 6px; }
.uperm-row { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer;
  color:var(--mid-text); font-size:13px; }
.uperm-row:hover { background:var(--mid-surface-3); }
.uperm-row input { width:16px; height:16px; accent-color:var(--mid-accent); flex:0 0 auto; }
.uperm-tag { margin-left:auto; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--mid-muted); background:var(--mid-surface-3); padding:2px 7px; border-radius:9999px; }
/* Leads list: compact owner chip */
.lead-owner-chip { font-size:11.5px; font-weight:600; color:var(--mid-muted); background:var(--mid-surface-3);
  padding:1px 8px; border-radius:9999px; white-space:nowrap; }

/* Working hours & days editor (Setup → Calendar & automation) */
.work-hours-block { display:flex; flex-direction:column; gap:10px; padding:12px 14px; margin:4px 0;
  background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:12px; }
.work-hours-block .wh-head { font-size:13px; font-weight:600; color:var(--mid-text); }
.work-hours-block .wh-head small { font-weight:400; }
.wh-times { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--mid-text-2); font-size:13px; }
.wh-times select { background:var(--mid-lowest); color:var(--mid-text); border:1px solid var(--mid-line);
  border-radius:8px; padding:6px 10px; min-height:34px; font-size:13px; }
.wh-days { display:flex; gap:6px; flex-wrap:wrap; }
.wh-day { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--mid-text-2);
  background:var(--mid-lowest); border:1px solid var(--mid-line); border-radius:9999px; padding:5px 11px; cursor:pointer; }
.wh-day input { accent-color:var(--mid-accent); }

/* Team → department dropdown (round-robin Sales pool) */
.team-dept-select { margin-top:6px; display:block; background:var(--mid-lowest); color:var(--mid-text);
  border:1px solid var(--mid-line); border-radius:8px; padding:4px 8px; font-size:11.5px; min-height:30px; }

/* Re-run setup button (go-live strip) + profile-menu link parity */
a.profile-menu-item { text-decoration:none; }

/* ── Call outcome bar (body-level overlay → always-dark --mid-* tokens) ── */
.callbar { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:1200;
  width:min(480px, calc(100vw - 24px)); background:var(--mid-surface-3); color:var(--mid-text);
  border:1px solid var(--mid-line); border-radius:var(--mid-radius, 14px); box-shadow:var(--mid-shadow, 0 12px 32px rgba(0,0,0,.5));
  padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.callbar-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; }
.callbar-head strong { color:var(--mid-accent-ink); }
.callbar-x { background:none; border:0; color:var(--mid-muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }
.callbar-x:hover { color:var(--mid-text); }
.callbar-row { display:flex; flex-wrap:wrap; gap:8px; }
.callbar-row button { background:var(--mid-lowest); color:var(--mid-text-2); border:1px solid var(--mid-line);
  border-radius:9999px; padding:7px 13px; font-size:13px; cursor:pointer; min-height:34px; }
.callbar-row button:hover { border-color:var(--mid-accent); color:var(--mid-text); }

/* ── Deal-panel Overview + Activity form alignment (2026-07-28) ──
   The events row reserves 44px on the right for its delete button, so every
   other Overview field pads right by 44px to share the event-DATE right edge. */
#dealDetailContent .dlp-overviewcard .dl-fields { padding-right: 44px; }
#dealDetailContent .dlp-overviewcard .dl-field > label { flex: 0 0 84px; }
#dealDetailContent .dlp-overviewcard .dl-field > input,
#dealDetailContent .dlp-overviewcard .dl-field > select { flex: 1 1 auto; width: auto; min-width: 0; }
/* Owner select: same control height + right edge as the other Overview fields. */
#dealDetailContent .dlp-assign { padding-right: 44px; }
#dealDetailContent .dlp-assign-sel { max-width: none; flex: 1 1 auto; min-height: 44px; }
/* "Log activity" form: entry box capped at ~5 rows (a global `textarea { min-height:360px }`
   was stretching it to fill the pane).

   THE LAYOUT OVERRIDES THAT LIVED HERE ARE GONE (owner 2026-08-21: "match the deals page to
   look like the projects page"). They forced the deal's copy of this form into a different
   shape from every other copy: labels in a fixed 48px column to the LEFT of each control, one
   field per row (so Next step and Due stacked instead of sharing a line), and a textarea
   indented 58px to line up under it. The project page never had them, which is why the same
   form looked like two different forms. It now falls through to the shared .dlp-logform rules
   — labels above their fields, Next step and Due side by side. */
/* Every panel, not just the deal's. These two were written for the deal's copy of the form and
   the project's copy never got them, so the same form had a differently-sized box and select
   depending on which page you were on. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent, #projectDetailPanel) .dlp-logform .task-form-field > span { margin: 0; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent, #projectDetailPanel) .dlp-logform select { height: 44px; box-sizing: border-box; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent, #projectDetailPanel) :is(.dlp-logform, .note-form) textarea { min-height: 72px; max-height: 120px; }

/* Owner as a single label+control row, matching the Details rows; explicit
   height on panel selects (Safari ignores min-height/padding on native selects). */
#dealDetailContent .dlp-owner-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
#dealDetailContent .dlp-owner-row .dl-label { margin: 0; flex: 0 0 84px; font-weight: 500; }
#dealDetailContent .dlp-owner-row .dlp-assign-slot { flex: 1 1 auto; min-width: 0; }
#dealDetailContent .dlp-assign-sel,
#dealDetailContent .dlp-overviewcard .dl-field > select { height: 44px !important; box-sizing: border-box; }

/* Overview label column is one shared width (details labels render 110px);
   activity Type select stretches its row like every other panel dropdown. */
#dealDetailContent .dlp-overviewcard .dl-field > label,
#dealDetailContent .dlp-owner-row .dl-label { flex: 0 0 110px; }
#dealDetailContent #dealActivityForm .task-form-row { width: 100%; }

/* Panel selects: kill native chrome (Safari ignores border-radius on native
   selects → square corners on macOS) and draw the shared chevron instead. */
html[data-theme] body #dealDetailContent select:not(.no-chevron),
html[data-theme] body #contactDetailContent select:not(.no-chevron),
#dealDetailContent select,
#contactDetailContent select {
  -webkit-appearance: none !important; appearance: none !important;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27><path d=%27M2.5 4.5L6 8l3.5-3.5%27 fill=%27none%27 stroke=%27%2387929a%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
}

/* Activity form: "What happened?" box starts where the Type select starts
   (label column 48px + 10px gap = 58px indent). */

/* ── Manual Meta credentials card (Setup → Channels, owner-only) ── */
.mm-block { border-top: 1px solid var(--mid-line); padding-top: 14px; margin-top: 14px; }
.mm-block:first-of-type { border-top: 0; padding-top: 4px; margin-top: 8px; }
.mm-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; color: var(--mid-text); }
.mm-head .material-symbols-outlined { font-size: 19px; color: var(--mid-accent-ink); }
.mm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mm-field > span { font-size: 13px; color: var(--mid-text-2); }
.mm-field > span small { font-weight: 400; color: var(--mid-muted); }
.mm-field input { background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: 10px 14px; height: 44px; box-sizing: border-box; font-size: 13px; }
.mm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-actions .muted { color: var(--mid-muted); }
.mm-result { margin-top: 12px; background: var(--mid-lowest); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mm-result .muted, .mm-result .muted.small { color: var(--mid-muted); }
.mm-ok { margin: 0; color: var(--mid-accent-ink); font-weight: 600; font-size: 13px; }
.mm-pick { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.mm-pick:hover { background: var(--mid-surface-2); }
.mm-pick input { margin-top: 3px; }
.mm-pick span { display: flex; flex-direction: column; gap: 2px; color: var(--mid-text); font-size: 13px; }
.mm-pick small { color: var(--mid-muted); font-size: 11.5px; }
.mm-hooks { display: flex; flex-direction: column; gap: 12px; }
.mm-hook-label { font-size: 11.5px; color: var(--mid-muted); margin-bottom: 5px; }
.mm-hook-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mm-hook-row code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
  background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; color: var(--mid-text-2); }

/* Manual-credentials disclosure, folded into the WhatsApp / Instagram cards */
.mm-adv { margin-top: 14px; border-top: 1px solid var(--mid-line); padding-top: 12px; }
.mm-adv > summary { cursor: pointer; font-size: 13px; color: var(--mid-text-2); list-style: none;
  display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.mm-adv > summary::-webkit-details-marker { display: none; }
.mm-adv > summary::before { content: "chevron_right"; font-family: "Material Symbols Outlined";
  font-size: 16px; color: var(--mid-muted); transition: transform var(--dur-fast) var(--ease); }
.mm-adv[open] > summary::before { transform: rotate(90deg); }
.mm-adv > summary:hover { color: var(--mid-text); }
.mm-body { padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.mm-body .muted, .mm-body .muted.small { color: var(--mid-muted); }
.mm-hooks:not(:empty) { margin-top: 12px; border-top: 1px dashed var(--mid-line); padding-top: 12px; }
/* "Coming soon" chip on the one-click Meta connect buttons (manual setup is the live path) */
.status-pill.status-soon { background: var(--mid-surface-3); color: var(--mid-muted);
  border: 1px dashed var(--mid-line); }
.integration-actions .button[disabled] { opacity: .5; cursor: not-allowed; }
.status-pill.status-bad { background: rgba(255,122,112,.14); color: var(--mid-danger, #ff7a70); border: 1px solid rgba(255,122,112,.35); }
.chan-health { color: var(--mid-danger, #ff7a70) !important; }

/* Step-by-step guide inside the manual-credentials blocks */
.mm-steps { margin: 4px 0 12px; }
.mm-steps > summary { cursor: pointer; font-size: 13px; color: var(--mid-accent-ink); list-style: none;
  display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.mm-steps > summary::-webkit-details-marker { display: none; }
.mm-steps > summary::before { content: "help"; font-family: "Material Symbols Outlined"; font-size: 16px; }
.mm-steps ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.mm-steps li { font-size: 13px; line-height: 1.55; color: var(--mid-text-2); }
.mm-steps li strong { color: var(--mid-text); }
.mm-steps li em { color: var(--mid-muted); font-style: normal; }
.mm-steps code { background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 6px;
  padding: 1px 6px; font-size: 11.5px; color: var(--mid-accent-ink); }
.mm-steps a { color: var(--mid-accent-ink); }

/* Choice dialog — stacked options for "what changed?" style questions where a
   yes/no confirm can't express the branches. Midnight tokens: body-level element. */
.sg-dialog-choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.sg-dialog-choices .sg-choice {
  width: 100%; text-align: left; padding: 12px 14px; min-height: 44px;
  background: var(--mid-surface-2); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px; font: inherit; cursor: pointer;
}
.sg-dialog-choices .sg-choice:hover { background: var(--mid-surface-3); border-color: var(--mid-primary); }

/* Move-out-of-Won dialog: keep dormant vs close out, plus the refund/fee settlement.
   Body-level element → midnight tokens only. */
.wl-dialog { max-width: 460px; }
.wl-opt {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 12px 14px;
  background: var(--mid-surface-2); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px; cursor: pointer;
}
.wl-opt:has(input:checked) { border-color: var(--mid-primary); background: var(--mid-surface-3); }
/* Same fight as #qcLibModalBox: the app-wide input rules style every input as a text
   well, which stretches the radio to full width. Revert it back to a radio. */
.wl-opt input[type="radio"] { all: revert !important; accent-color: var(--mid-accent) !important; width: 16px !important; height: 16px !important; margin: 3px 0 0 !important; flex: 0 0 auto; }
.wl-opt > span { flex: 1 1 auto; min-width: 0; }
.wl-opt b { display: block; font-size: 13px; font-weight: 600; }
/* font-weight is spelled out: labels are 600 app-wide, which reads as a second heading. */
.wl-opt em { display: block; margin-top: 3px; font-style: normal; font-weight: 400; font-size: 11.5px; line-height: 1.45; color: var(--mid-muted); }
.wl-settle { margin: 4px 0 14px; }
.wl-settle[hidden] { display: none; }
.wl-settle-row { display: flex; gap: 10px; }
.wl-settle-row label { flex: 1; font-size: 11.5px; color: var(--mid-muted); }
.wl-settle-row .sg-dialog-input { margin: 4px 0 0; }
.wl-settle .wl-retain { opacity: .75; }
.wl-settle-note { margin: 8px 0 10px; color: var(--mid-muted); font-size: 11.5px; line-height: 1.45; }
.wl-settle .wl-reason { margin-bottom: 0; }

/* Sticky save bar for staged edits (deal + contact panels). Body-level element, so
   midnight tokens only — the :root tokens render cream here. */
.edit-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin: 16px -16px -16px; padding: 12px 16px;
  background: var(--mid-surface-2); border-top: 1px solid var(--mid-line);
  box-shadow: 0 -8px 20px var(--mid-shadow);
}
.edit-savebar[hidden] { display: none; }
.edit-savebar-msg { flex: 1; color: var(--mid-text-2); font-size: 13px; }
.edit-savebar .button { min-height: 36px; }

/* ═══ Dashboard bands — Sales / Finance / Production / Post-production ═══════
   One dashboard for every seat. Each band: a full-width header row (title +
   headline stat + chevron) over a collapsible body. Inside #page-dashboard →
   midnight tokens, same as the nx/sage cards around them. */
#page-dashboard .dash-band { margin: 18px 0 0; border: 1px solid var(--mid-line); border-radius: 18px; background: var(--mid-surface); overflow: clip; }
#page-dashboard .dash-band-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; text-align: left;
}
#page-dashboard .dash-band-head:hover { background: var(--mid-surface-2); }
#page-dashboard .dash-band-title { font-size: 14px; font-weight: 650; color: var(--mid-text); letter-spacing: .01em; }
#page-dashboard .dash-band-stat { font-size: 13px; color: var(--mid-muted); font-variant-numeric: tabular-nums; }
#page-dashboard .dash-band-chev { margin-left: auto; font-size: 20px; color: var(--mid-muted); transition: transform var(--dur-fast) var(--ease); }
#page-dashboard .dash-band.is-open .dash-band-chev { transform: rotate(180deg); }
/* 2-ACROSS card grid. Bands with a single card span both columns, so the page
   alternates full-width / paired / full-width / paired — the eye never meets three
   identical boxes in a row, which is what made the all-full-width version read flat.
   Per the design system every multi-column layout collapses to one below 900px. */
#page-dashboard .dash-band-body { display: none; padding: 4px 16px 16px; }
#page-dashboard .dash-band.is-open .dash-band-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
#page-dashboard .dash-band-body > .sg-card { margin: 0; min-width: 0; display: flex; flex-direction: column; }
/* Cards in a pair share a row, so their lists stretch to a common height instead of
   leaving one card short. */
#page-dashboard .dash-band-body > .sg-card > :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list) { flex: 1 1 auto; }
#page-dashboard .dash-card-wide { grid-column: 1 / -1; }
/* #financeBody is an extra wrapper between the band body and its two cards — make it
   the grid instead, or Money and Forecast would stack. */
#page-dashboard .dash-band.is-open .dash-band-body > #financeBody {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
#page-dashboard #financeBody > .sg-card { margin: 0; min-width: 0; }
@media (max-width: 900px) {
  #page-dashboard .dash-band.is-open .dash-band-body,
  #page-dashboard .dash-band.is-open .dash-band-body > #financeBody { grid-template-columns: minmax(0, 1fr); }
}

/* Sales band grid: the 3-across layout (this is the VISIBLE layer — the old
   nx-split taper below is display:none'd everywhere). Uniform cells wrap 3+3. */
#page-dashboard .sg-bandgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
#page-dashboard .sg-bandgrid > * { min-width: 0; margin: 0; }
@media (max-width: 1024px) { #page-dashboard .sg-bandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { #page-dashboard .sg-bandgrid { grid-template-columns: minmax(0, 1fr); } }

/* Post-production: four stat cards; the small name lists inside them. */
#page-dashboard .proj-stat-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { #page-dashboard .proj-stat-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { #page-dashboard .proj-stat-cards-4 { grid-template-columns: 1fr; } }
#page-dashboard .ppb-name { font-size: 11.5px; color: var(--mid-text-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-dashboard .proj-stat-card.is-risk { border-color: color-mix(in srgb, var(--mid-tertiary, #ffc176) 45%, var(--mid-line)); }
#page-dashboard .proj-stat-card[data-goto] { cursor: pointer; }

/* Project panel groups: Production / Post-production / Finance labels, so the
   three sections of a booking announce themselves (same order as the dashboard). */
:is(#page-projects, #finBand) .proj-group-h {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--mid-text);
  padding-bottom: 8px; border-bottom: 1px solid var(--mid-line);
}
:is(#page-projects, #finBand) .proj-group-h .material-symbols-outlined { font-size: 17px; color: var(--mid-accent-ink); }
#page-projects .proj-group-fin { margin-top: 18px; padding-top: 4px; }

/* "Money owed to you" — a READ-ONLY, aged list on the dashboard. Editing a booking's
   money happens in that project; these rows hand off there. */
#finBand .finowed-list { display: flex; flex-direction: column; gap: 8px; }
#finBand .finowed-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--mid-surface); border: 1px solid var(--mid-line); font-family: inherit;
}
#finBand .finowed-row:hover { border-color: var(--mid-accent); }
#finBand .finowed-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#finBand .finowed-bal { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#finBand .finowed-bal .num { font-weight: 650; color: var(--mid-warm, #ffc176); font-variant-numeric: tabular-nums; }
#finBand .finowed-go { font-size: 20px; color: var(--mid-muted); flex: 0 0 auto; }

/* ═══ The seven dashboard cards ═════════════════════════════════════════════
   Every card is full-width inside its band: these are LISTS you scan, not tiles
   you glance at, so a 3-across grid would just cramp them. */
#page-dashboard .dash-card-wide { grid-column: 1 / -1; }
/* Spacing now comes from the grid `gap` (both at band level and inside #financeBody),
   so the old stacking margin would double it. */

/* Month nav + segmented toggle + filter select, shared by the ops cards. */
#page-dashboard .dash-monthnav { display: inline-flex; align-items: center; gap: 6px; }
#page-dashboard .dash-mnav {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--mid-line);
  background: var(--mid-surface-2); color: var(--mid-text-2); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
}
#page-dashboard .dash-mnav:hover { border-color: var(--mid-accent); color: var(--mid-text); }
#page-dashboard .dash-mlabel { font-size: 13px; font-weight: 600; color: var(--mid-text-2); min-width: 96px; text-align: center; }
#page-dashboard .dash-seg { display: inline-flex; gap: 4px; }
#page-dashboard .dash-seg-btn {
  padding: 5px 10px; border-radius: 9999px; border: 1px solid var(--mid-line);
  background: transparent; color: var(--mid-muted); font: inherit; font-size: 11.5px; cursor: pointer;
}
#page-dashboard .dash-seg-btn.on { background: var(--mid-accent); color: var(--mid-on-accent); border-color: transparent; font-weight: 600; }
#page-dashboard .dash-filter-sel {
  font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 10px; max-width: 220px;
}
/* Specific enough to beat the generic `input, select, textarea` skin without
   !important — the old shorthand+!important also blocked the caret and the
   pill background set further down. */
html:is([data-theme], :not([data-theme])) body #page-dashboard select.dash-filter-sel {
  background-color: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line);
}

/* Shared row shell for the four list cards. */
/* Fixed-height lists: ~10 rows, then scroll INSIDE the card — a card must never
   grow the page as shoots/deliverables/leads pile up. The header count ("19 to
   work", "3 pending · 2 overdue") always states the true total, so rows below the
   fold are announced, not silently hidden. overscroll-containment stops the page
   yanking when a list's scroll bottoms out. */
#page-dashboard :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list) {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 705px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px;
}
#page-dashboard :is(.shoot-row, .datapend-row, .deliv-row, .hotlead-row) {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mid-line);
  background: var(--mid-surface); font-family: inherit; color: var(--mid-text);
}
#page-dashboard :is(.shoot-row, .datapend-row, .deliv-row, .hotlead-row) { cursor: pointer; }
#page-dashboard :is(.shoot-row, .datapend-row, .deliv-row):hover,
#page-dashboard .hotlead-row:hover { border-color: var(--mid-accent); }

/* Shoots */
#page-dashboard .shoot-date { display: flex; flex-direction: column; align-items: center; min-width: 34px; flex: 0 0 auto; }
#page-dashboard .shoot-date b { font-size: 16px; font-weight: 650; line-height: 1.1; }
#page-dashboard .shoot-date span { font-size: 11.5px; text-transform: uppercase; color: var(--mid-muted); letter-spacing: .04em; }
#page-dashboard .shoot-cn { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
#page-dashboard .shoot-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-dashboard .shoot-crew { font-size: 11.5px; color: var(--mid-text-2); flex: 0 0 auto; }
#page-dashboard .shoot-crew.is-none { color: var(--mid-tertiary, #ffc176); font-weight: 600; }
#page-dashboard .shoot-row.is-soon { border-color: color-mix(in srgb, var(--mid-accent) 55%, var(--mid-line)); background: color-mix(in srgb, var(--mid-accent) 7%, var(--mid-surface)); }
/* Colour, not opacity: opacity .55 composited the secondary line to 2.96:1 on the
   light dashboard and also washed out the border. Past shoots still have to be
   readable — they're the ones whose footage you're chasing. */
#page-dashboard .shoot-row.is-past .shoot-name,
#page-dashboard .shoot-row.is-past .shoot-date b { color: var(--mid-text-2); font-weight: 500; }
#page-dashboard .shoot-row.is-past { background: var(--mid-surface-2); }
#page-dashboard .shoot-soon-n { color: var(--mid-accent-ink); }

/* Data pending */
#page-dashboard .datapend-group { margin-bottom: 8px; }
#page-dashboard .datapend-key { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; color: var(--mid-text-2); margin: 4px 2px 6px; }
#page-dashboard .datapend-n { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: var(--mid-surface-3); color: var(--mid-text-2); }
#page-dashboard .datapend-what { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-dashboard .datapend-age { font-size: 11.5px; font-weight: 600; color: var(--mid-text-2); flex: 0 0 auto; }
#page-dashboard .datapend-age.is-late { color: var(--mid-danger, #ff7a70); }

/* Deliverables */
#page-dashboard .deliv-cn { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
#page-dashboard .deliv-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-dashboard .deliv-stage { font-size: 11.5px; padding: 2px 9px; border-radius: 9999px; background: var(--mid-surface-3); color: var(--mid-text-2); flex: 0 0 auto; }
#page-dashboard .deliv-due { font-size: 11.5px; color: var(--mid-text-2); flex: 0 0 auto; min-width: 68px; text-align: right; }
#page-dashboard .deliv-due.is-overdue, #page-dashboard .deliv-late-n { color: var(--mid-danger, #ff7a70); font-weight: 650; }
#page-dashboard .deliv-row.is-overdue { border-color: color-mix(in srgb, var(--mid-danger, #ff7a70) 45%, var(--mid-line)); }

/* Hot leads — the whole row is one button that opens the deal. */
#page-dashboard .hotlead-cn { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
#page-dashboard .hotlead-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-dashboard .hotlead-go { font-size: 20px; color: var(--mid-muted); flex: 0 0 auto; }

/* Money — one card, four figures. */
#page-dashboard .money-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { #page-dashboard .money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #page-dashboard .money-grid { grid-template-columns: 1fr; } }
#page-dashboard .money-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#page-dashboard .money-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--mid-muted); }
#page-dashboard .money-val { font-size: 26px; font-weight: 300; letter-spacing: -.02em; color: var(--mid-text); font-variant-numeric: tabular-nums; }
#page-dashboard .money-val.is-owed { color: var(--mid-tertiary, #ffc176); }
#page-dashboard .money-val.is-loss { color: var(--mid-danger, #ff7a70); }
#page-dashboard .money-val.is-thin { color: var(--mid-tertiary, #ffc176); }
/* Theme-safe: #7ee29a is invisible on the light dashboard (1.59:1 on white) — the
   same hex already needed a light override for .nx-score.hot. Use tokens. */
#page-dashboard .money-val.is-good { color: #1f7a43; }
html:not([data-theme]) #page-dashboard .money-val.is-good { color: #7ee29a; }
#page-dashboard .money-chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* Forecast drill-down */
#page-dashboard .fin-f12-col { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
#page-dashboard .fin-f12-col.is-picked .fin-f12-solid { outline: 2px solid var(--mid-accent); outline-offset: 1px; }
#page-dashboard .fc-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mid-line); }
#page-dashboard .fc-detail-h { font-size: 13px; font-weight: 650; color: var(--mid-text); margin-bottom: 8px; }
#page-dashboard .fc-gap-tag { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(255,122,112,.16); color: var(--mid-danger, #ff7a70); }
#page-dashboard .fc-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; font-size: 13px; color: var(--mid-text-2); }
#page-dashboard .fc-detail-grid b { color: var(--mid-text); font-weight: 650; }
#page-dashboard .fc-detail-season { margin-top: 8px; }

/* Card head tools (project filter + week nav) wrap together on narrow screens. */
/* Tools sit on ONE line beside the title on desktop; the select shrinks rather than
   pushing the week nav onto a second row. */
#page-dashboard .dash-headtools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
#page-dashboard .dash-headtools .dash-filter-sel { min-width: 0; flex: 0 1 auto; }
#page-dashboard .dash-headtools .dash-monthnav { flex: 0 0 auto; }
#page-dashboard .shoot-nocrew-n { color: var(--mid-tertiary, #ffc176); }
@media (max-width: 620px) {
  #page-dashboard .sg-card-head { flex-wrap: wrap; gap: 8px; }
  #page-dashboard .dash-headtools { flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  #page-dashboard .dash-filter-sel { max-width: 100%; }
}

/* Today, on a clear day: an explicit "all caught up" instead of the card vanishing. */
#page-dashboard .today-clear { display: flex; align-items: center; gap: 10px; }
#page-dashboard .today-clear-ico { color: var(--mid-accent-ink); font-size: 20px; }

/* ═══ Sage dashboard polish — per the APPROVED reference (sales.cognibee.in look):
   cards directly on the canvas in a main/side rhythm, the flat lime High-priority
   block crowning Hot leads, textured tiles on Money, coloured stage pills. This is
   the app's own §1–§8 design language applied to the seven cards — NOT the reverted
   Lumina treatment (no dark hero, no metric tiles, no donut). ═══ */

/* Bands lose their boxes: a slim cap row over cards on the canvas (the approved
   dashboard has no section boxes). Collapse + permission gating unchanged. */
#page-dashboard .dash-band { background: transparent; border: none; border-radius: 0; overflow: visible; margin: 22px 0 0; }
#page-dashboard .dash-band-head { padding: 0 2px 10px; }
#page-dashboard .dash-band-head:hover { background: transparent; }
#page-dashboard .dash-band-title { font-size: 14px; }
#page-dashboard .dash-band-body { padding: 0; }

/* Main/side asymmetry (~60/40, like the approved grid): the LIST or CHART card
   carries the row, the compact card rides beside it. One column below 900px. */
#page-dashboard .dash-band.is-open .dash-band-body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
#page-dashboard .dash-band.is-open .dash-band-body > #financeBody {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch;
}
@media (max-width: 900px) {
  #page-dashboard .dash-band.is-open .dash-band-body,
  #page-dashboard .dash-band.is-open .dash-band-body > #financeBody { grid-template-columns: minmax(0, 1fr); }
}

/* Hot leads crown: the signature flat lime block, full width above the list. */
#page-dashboard .hotlead-crown { width: 100%; margin-bottom: 14px; }

/* Money tiles: reuse the approved stripe/dot texture tiles; owed gets the amber wash. */
#page-dashboard .money-grid { gap: 10px; }
#page-dashboard .money-cell.sg-tile { align-items: flex-start; padding: 14px; border-radius: 14px; }
#page-dashboard .money-tile-owed { background: color-mix(in srgb, var(--mid-tertiary, #ffc176) 16%, var(--mid-surface-2)); }
#page-dashboard .money-cell .money-val { font-size: 22px; }

/* Deliverable stage pills in the sage palette: lime fill = moving, amber = waiting. */
#page-dashboard .deliv-stage.st-edit { background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); font-weight: 650; }
#page-dashboard .deliv-stage.st-review { background: rgba(255, 193, 118, .22); color: var(--mid-tertiary, #9a6a00); font-weight: 650; }

/* ═══ Headerless flow (2026-08-03): no section caps — cards flow one after the
   other. Bands stay in the DOM purely as permission gates. Long-value audit:
   Money stacks one figure per row; every other card's value column ellipsizes
   or right-aligns with tabular figures so real ₹ amounts never collide. ═══ */
#page-dashboard .dash-band-head { display: none; }
#page-dashboard .dash-band { margin: 16px 0 0; }

/* Money — stacked textured rows: label left, value right, room for any number. */
#page-dashboard .money-stack { display: flex; flex-direction: column; gap: 10px; }
#page-dashboard .money-tile {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-radius: 12px; min-width: 0;
}
#page-dashboard .money-tile .money-lbl { flex: 0 1 auto; }
#page-dashboard .money-tile .money-val {
  flex: 0 0 auto; font-size: 20px; font-weight: 650; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
#page-dashboard .money-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }

/* ═══ Today + Hot leads share one 2-across row (2026-08-03) ═══════════════════
   The sales grid drops from 3 columns to 2 and holds exactly two cells: the Today
   queue (placed by placeTodayQueue) and the hot-leads cell. Anything else the sales
   band adopts — e.g. the Gia health line — wraps onto the next row. */
/* The band body is itself a 3fr/2fr grid, so this nested grid is one of its cells —
   without the span it renders at 60% width and the row stops short of the page. */
#page-dashboard .dash-band.is-open .dash-band-body > .sg-bandgrid { grid-column: 1 / -1; }
#page-dashboard .sg-bandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1024px) { #page-dashboard .sg-bandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { #page-dashboard .sg-bandgrid { grid-template-columns: minmax(0, 1fr); } }

/* Both cells are columns so the pair matches height; each card fills its cell and
   its list takes the slack, so neither side ends short of the other. */
#page-dashboard .sg-bandgrid > :is(.today-queue, .hotlead-cell) {
  display: flex; flex-direction: column; min-width: 0; margin: 0;
}
#page-dashboard .hotlead-cell > .sg-card { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; }
#page-dashboard .hotlead-cell > .sg-card > .hotlead-list { flex: 1 1 auto; }
/* In-grid Today: the full-width hero margins would break the row. */
#page-dashboard .today-queue.today-cell,
#page-dashboard.dash-action .today-queue.today-cell { margin: 0; }
/* Paired with Hot leads, Today gets the same 10-row ceiling — an eventful morning
   must not stretch the row past its neighbour. */
#page-dashboard .today-queue.today-cell { max-height: 780px; overflow-y: auto; overscroll-behavior: contain; }

/* ── Chat-drafted catalog events (2026-08-06) ───────────────────────────────
   A ceremony a customer named that the studio had no entry for. It IS already
   being quoted (priced from the crew agreed in that chat), so the banner is a
   "confirm this price" prompt, not an error. Uses the always-dark --mid-* tokens:
   the Setup editor lives outside #page-dashboard, where the :root tokens resolve
   LIGHT and would paint a cream card on the dark app. */
.qc-evt.is-draft {
  border-color: color-mix(in srgb, var(--mid-tertiary, #ffc176) 55%, var(--mid-line));
  box-shadow: inset 3px 0 0 0 var(--mid-tertiary, #ffc176);
}
.qc-evt-draft {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--mid-tertiary, #ffc176) 14%, var(--mid-surface-2));
  color: var(--mid-text); font-size: 13px; line-height: 1.45;
}
.qc-evt-draft .material-symbols-outlined { font-size: 18px; color: var(--mid-tertiary, #ffc176); flex: 0 0 auto; }
.qc-evt-draft > span:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.qc-evt-draft b { color: var(--mid-text); }
.qc-evt-draft .qc-approve-evt { flex: 0 0 auto; }

/* ═══ 3-COLUMN DASHBOARD (Stitch-derived, owner-corrected 2026-08-06) ═══════
   TODAY centre stage (main column) with the data pipeline beneath it; financial
   overview + forecast + Likely-to-close left; shoots + deliverables right.
   Every colour rides the theme-mapped tokens (--mid-* / --lime), so the same
   rules render the LIGHT and DARK dashboards — no hardcoded palette.
   Owner's corrections vs the mock: lists keep their scroll caps, "likely to
   close" is a COUNT (never a percentage), data pipeline has exactly two states
   (pending/received), payables is OVERHEADS, currency comes from Setup. ═══ */
#page-dashboard .dash3 {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  gap: 16px; align-items: start; margin-top: 16px;
}
#page-dashboard .dash3-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#page-dashboard .dash3-col.is-empty { display: none; }
#page-dashboard .dash-cell { min-width: 0; }
#page-dashboard .dash-cell > .sg-card, #page-dashboard .dash3 .sg-card { margin: 0; }
#page-dashboard #financeBody, #page-dashboard #salesBandBody { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) {
  #page-dashboard .dash3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #page-dashboard .dash3-main { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 760px) { #page-dashboard .dash3 { grid-template-columns: minmax(0, 1fr); } }

/* Today, centre stage: the hero card scrolls INSIDE itself past ~10 items. */
#page-dashboard #todayCell .today-queue { margin: 0; }
#page-dashboard #todayCell .today-queue { max-height: 780px; overflow-y: auto; overscroll-behavior: contain; }

/* Financial overview: gross revenue is THE tile — flat lime, like the approved
   High-priority block. Owner: payables is overheads (already the data). */
#page-dashboard .money-tile-rev {
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
  border: none; border-radius: 12px;
}
#page-dashboard .money-tile-rev .money-lbl, #page-dashboard .money-tile-rev .money-val { color: inherit; }

/* Likely to close: real mini-stats + a count in the lime block + the lead list. */
#page-dashboard .likely-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
#page-dashboard .likely-stat {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
#page-dashboard .likely-stat-lbl { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-dashboard .likely-stat-num { font-size: 22px; font-weight: 700; color: var(--mid-text); font-variant-numeric: tabular-nums; }
#page-dashboard #likelyCard .hotlead-crown { margin: 0 0 12px; }
#page-dashboard .likely-stage {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--mid-surface-2); color: var(--mid-text-2); border: 1px solid var(--mid-line);
}
#page-dashboard .likely-stage.is-hot {
  background: color-mix(in srgb, var(--lime, #d9ff5e) 30%, var(--mid-surface-2));
  border-color: color-mix(in srgb, var(--lime, #d9ff5e) 50%, var(--mid-line));
  color: var(--mid-text);
}

/* Data pipeline: exactly two statuses, worn as pills. Late pending goes urgent. */
#page-dashboard .dp-status {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 7px; white-space: nowrap;
}
#page-dashboard .dp-status.is-pending {
  background: color-mix(in srgb, var(--mid-tertiary, #ffc176) 18%, transparent);
  color: var(--mid-tertiary, #9a6a00);
  border: 1px solid color-mix(in srgb, var(--mid-tertiary, #ffc176) 40%, transparent);
}
#page-dashboard .dp-status.is-pending.is-late {
  background: color-mix(in srgb, var(--mid-danger, var(--mid-danger, #e5484d)) 16%, transparent);
  color: var(--mid-danger, var(--mid-danger, #e5484d));
  border-color: color-mix(in srgb, var(--mid-danger, var(--mid-danger, #e5484d)) 40%, transparent);
}
#page-dashboard .dp-status.is-received-pill {
  background: color-mix(in srgb, var(--lime, #d9ff5e) 24%, transparent);
  color: var(--mid-text-2);
  border: 1px solid color-mix(in srgb, var(--lime, #d9ff5e) 45%, transparent);
}
#page-dashboard .datapend-row.is-received { opacity: .72; }

/* ═══ STITCH SKIN — the owner's exact CSS applied (2026-08-06) ═══════════════
   Values lifted verbatim from the approved Stitch mock: canvas #0b0b0b, cards
   #141414 with 1px #262626 borders and 1.5rem radius, inner tiles #1a1a1a,
   text #fff / #a3a3a3 / #555, accent lime #d9ff5e (hover #e0f878) with black
   text, error #ffb4ab on var(--mid-danger, #93000a), badge lime #d9ff5e on #3d4d00, Schibsted
   Grotesk, pill-shaped controls. The DARK block IS the mock; the light block
   is the same design language on paper-white (same geometry, same lime).
   Applied as a final token remap + chrome override, so every dashboard card
   inherits it without touching the other pages. ═══ */

/* ── Light: the mock's language in daylight ── */
#page-dashboard {
  font-family: var(--sans);
  background: #f4f4f2;
  --sg-surface: #ffffff;
  --mid-surface: #ffffff;
  --mid-surface-2: #f5f5f3;
  --mid-surface-3: #ececea;
  --mid-lowest: #ececea;
  --mid-line: #e6e6e3;
  --mid-text: #121212;
  --mid-text-2: #3d3d3d;
  --mid-muted: #6e6e6e;
  --mid-accent: #93a01e;
  --mid-tertiary: var(--mid-danger, #93000a);
  --mid-danger: #b3261e; --mid-ok: #1f7a37;
  --mid-warm: var(--mid-danger, #93000a);
  --lime: #d9ff5e;
  --on-lime: #1a2000;
  --mid-shadow: none;
}
/* ── Dark: the mock, verbatim ── */
html[data-theme="dark"] #page-dashboard {
  background: #0b0b0b;
  --sg-surface: #141414;
  --mid-surface: #141414;
  --mid-surface-2: #1a1a1a;
  --mid-surface-3: #202020;
  --mid-lowest: #1a1a1a;
  --mid-line: #262626;
  --mid-text: #ffffff;
  --mid-text-2: #d4d4d4;
  --mid-muted: #a3a3a3;
  --mid-accent: #d9ff5e;
  --mid-tertiary: #ffb4ab;
  --mid-danger: #ffb4ab; --mid-ok: #7ee29a;
  --mid-warm: #ffb4ab;
  --lime: #d9ff5e;
  --on-lime: #1a2000;
  --mid-shadow: none;
}

/* Card chrome: .crm-card from the mock — flat, bordered, 1.5rem radius. */
#page-dashboard .sg-card,
#page-dashboard .today-queue {
  background: var(--sg-surface);
  border: 1px solid var(--mid-line);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: none;
}
#page-dashboard.dash-action .today-queue.today-hero {
  background: var(--sg-surface);
  border-color: color-mix(in srgb, #d9ff5e 30%, var(--mid-line));
  box-shadow: none;
}
#page-dashboard .sg-card-head h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--mid-text);
}
#page-dashboard .sg-big-sub, #page-dashboard .sg-trend-total { color: var(--mid-muted); }

/* Inner tiles + list rows: #1a1a1a, 0.75rem radius, #262626 borders. */
#page-dashboard :is(.money-tile.sg-tile, .likely-stat, .shoot-row, .datapend-row, .deliv-row, .hotlead-row, .today-item) {
  background: var(--mid-surface-2);
  border: 1px solid var(--mid-line);
  border-radius: 0.75rem;
  background-image: none;
}
#page-dashboard :is(.shoot-row, .datapend-row, .deliv-row, .hotlead-row):hover {
  background: var(--mid-surface-3); border-color: #555555;
}
#page-dashboard .likely-stat-lbl, #page-dashboard .money-lbl {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted); font-weight: 600;
}

/* The lime: revenue tile + likely-to-close block, black text, hover #e0f878. */
#page-dashboard .money-tile-rev,
#page-dashboard .sg-pri.sg-pri-lime {
  background: #d9ff5e; color: var(--on-lime); border: none; border-radius: 0.75rem;
}
#page-dashboard .sg-pri.sg-pri-lime:hover { background: #e0f878; }
#page-dashboard .money-tile-rev :is(.money-lbl, .money-val) { color: inherit; }

/* Status badges, straight from the mock: lime on #3d4d00, red on var(--mid-danger, #93000a). */
#page-dashboard .dp-status { border-radius: 0.375rem; font-weight: 700; }
#page-dashboard .dp-status.is-pending {
  background: #3d4d00; color: #d9ff5e; border: 1px solid rgba(217, 255, 94, .3);
}
#page-dashboard .dp-status.is-pending.is-late,
#page-dashboard .deliv-due.is-overdue {
  color: var(--mid-danger);
}
#page-dashboard .dp-status.is-pending.is-late {
  background: color-mix(in srgb, var(--mid-danger, #93000a) 20%, transparent);
  border-color: color-mix(in srgb, var(--mid-danger) 30%, transparent);
}
#page-dashboard .dp-status.is-received-pill {
  background: var(--mid-surface-3); color: var(--mid-text-2); border: 1px solid #555555;
}
html[data-theme="dark"] #page-dashboard .dp-status.is-received-pill { background: #1c1b1b; }
#page-dashboard .deliv-stage.st-edit { background: #d9ff5e; color: #000000; }
#page-dashboard .deliv-stage.st-review { background: var(--mid-surface-3); color: var(--mid-text-2); border: 1px solid #555555; }
#page-dashboard .likely-stage.is-hot { background: #3d4d00; color: #d9ff5e; border-color: rgba(217, 255, 94, .3); }
/* Light needs its own badge take — #3d4d00 text on a lime wash, not lime-on-olive. */
html:not([data-theme="dark"]) #page-dashboard .dp-status.is-pending,
html:not([data-theme="dark"]) #page-dashboard .likely-stage.is-hot {
  background: #eef7c8; color: #3d4d00; border-color: #c9dd7a;
}
html:not([data-theme="dark"]) #page-dashboard .dp-status.is-pending.is-late {
  background: #fde7e9; color: var(--mid-danger, #93000a); border-color: #f2b8bd;
}

/* Controls: pills, like the mock's nav + segmented buttons. */
#page-dashboard :is(.dash-seg, .dash-monthnav) { gap: 4px; }
#page-dashboard .dash-seg-btn, #page-dashboard .dash-mnav, #page-dashboard .sg-chip {
  border-radius: 9999px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); color: var(--mid-muted);
}
#page-dashboard .dash-seg-btn.on { background: #d9ff5e; color: #000000; border-color: #d9ff5e; font-weight: 600; }
#page-dashboard .dash-seg-btn:hover:not(.on), #page-dashboard .dash-mnav:hover { color: var(--mid-text); background: var(--mid-surface-3); }
#page-dashboard .dash-filter-sel {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); color: var(--mid-text); border-radius: 0.5rem;
}

/* Forecast bars: lime for expected, #555/#d9d9d4 for pipeline — the mock's
   confirmed-vs-projected two-tone. */
#page-dashboard .fin-f12-solid { background: #d9ff5e; }
#page-dashboard .fin-f12-soft { background: #555555; }
html:not([data-theme="dark"]) #page-dashboard .fin-f12-soft { background: #d9d9d4; }

/* ═══ STITCH SHELL v2 — the mock's top navigation (2026-08-06, owner punch list)
   The mock's chrome: round lime logo, pill nav across the TOP, compact rounded
   search + lime "+" + avatar right, cards full-width below with page padding.
   Desktop only (min-width 961px); mobile keeps its current navigation.
   SPECIFICITY NOTE: the sage era styles this shell again under `body.dash-active`
   (a 248px full-height sidebar at (0,2,1) — it half-reverted the bar on the live
   dashboard). Every structural rule here uses body:is(.dash-active, :not(.dash-active))
   — always true, but carrying (0,2,x) so it beats those rules from file order. ═══ */
@media (min-width: 961px) {
  body:is(.dash-active, :not(.dash-active)) .app-sidebar {
    position: fixed; inset: 0 auto auto 0; height: 64px; width: auto;
    display: flex; flex-direction: row; align-items: center; gap: 34px;
    padding: 0 0 0 24px; margin: 0;
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    z-index: 61; overflow: visible;
  }
  .sidebar-bottom { display: none; }

  /* Brand → lime circle with the tenant's initial, centred on the bar line. */
  body:is(.dash-active, :not(.dash-active)) .brand-block {
    display: flex; align-items: center; padding: 0; margin: 0;
  }
  /* The Pixxl wordmark, not a monogram. MASKED, not drawn (owner, 2026-08-13: "still
     doesn't show on the desktop app"). This was the one place the logo was a plain
     background-image that assumed WHITE ink, with light mode inverting it to black — so
     the moment the file became the black mark it was invisible in BOTH themes: black on
     the dark bar, and inverted to white on the light one. Every other page already masks
     it. A mask reads only the alpha and takes its colour from here, so the file's own ink
     can never make it disappear again. */
  .brand-block::before {
    content: ""; display: block;
    width: 82px; height: 30px;
    background-color: var(--shellbar-text, #dee3e8);   /* the bar's own ink — exists in both themes */
    -webkit-mask: url("assets/logo.png?v=20260819t") left center / contain no-repeat;
    mask: url("assets/logo.png?v=20260819t") left center / contain no-repeat;
  }
  .brand-block #brandName, .brand-block #brandTagline { display: none; }

  /* Pill nav — 48px container, 40px pills, all controls on one 40px rhythm. */
  body:is(.dash-active, :not(.dash-active)) .nav-list {
    display: flex; flex-direction: row; align-items: center; gap: 2px;
    height: 48px; padding: 4px; margin: 0; border-radius: 9999px;
    background: var(--shellbar-panel); border: 1px solid var(--shellbar-line);
    overflow: visible;
  }
  body:is(.dash-active, :not(.dash-active)) .nav-item {
    display: inline-flex; align-items: center; height: 40px;
    padding: 0 20px; margin: 0; width: auto; border-radius: 9999px;
    background: transparent; border: none; box-shadow: none;
    font-size: 14px; font-weight: 500; color: var(--shellbar-muted);
    transition: all var(--dur);
  }
  .nav-item .material-symbols-outlined { display: none; }
  body:is(.dash-active, :not(.dash-active)) .nav-item:hover { color: var(--shellbar-text); background: var(--shellbar-hover); }
  .app-sidebar .nav-item.active,
  html[data-theme] .app-sidebar .nav-item.active,
  body.dash-active .app-sidebar .nav-item.active {
    background: var(--shellbar-active) !important;
    color: var(--shellbar-on-active) !important;
    font-weight: 600;
  }
  .app-sidebar .nav-item::after,
  html[data-theme] .app-sidebar .nav-item.active::after { display: none !important; content: none !important; }
  body:is(.dash-active, :not(.dash-active)) .nav-more-btn,
  body:is(.dash-active, :not(.dash-active)) .nav-more-pop { display: none !important; }

  /* The full-width strip behind the nav: search + actions right. */
  body:is(.dash-active, :not(.dash-active)) header.topbar,
  html[data-theme] body header.topbar {
    position: fixed; inset: 0 0 auto 0; height: 64px;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 0 24px; margin: 0;
    /* !important: the midnight era pins its own bar colour with !important. */
    background: var(--shellbar-bg) !important; border: none; border-bottom: 1px solid var(--shellbar-line) !important;
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0;
    z-index: 60;
  }
  /* Standalone bar controls match the NAV CONTAINER (48px), not the 40px pills
     inside it — the mismatched heights were what the owner saw. */
  body:is(.dash-active, :not(.dash-active)) .topbar .search-shell {
    flex: 0 1 260px; width: 260px; max-width: 260px; min-width: 160px; height: 48px;
    display: flex; align-items: center; gap: 8px;
    border-radius: 9999px; background: var(--shellbar-panel);
    border: 1px solid var(--shellbar-line); box-shadow: none;
    padding: 0 16px; margin: 0;
  }
  body:is(.dash-active, :not(.dash-active)) .topbar .search-shell input {
    background: transparent; border: none; height: 44px; color: var(--shellbar-text);
    padding-left: 0;   /* the icon sits in flow now — no reserved gutter */
    outline: none;
  }
  /* Focus lives on the SHELL: one pill, one ring. */
  body:is(.dash-active, :not(.dash-active)) .topbar .search-shell:focus-within {
    box-shadow: 0 0 0 3px rgba(120, 140, 30, .22);
  }
  /* The magnifier joins the flex flow instead of being pinned 11px from the
     edge of a box that has its own 16px padding — that pinning is why it sat
     touching the field's border. */
  body:is(.dash-active, :not(.dash-active)) .topbar .search-shell .material-symbols-outlined {
    position: static; transform: none; flex: 0 0 auto;
  }
  .topbar .search-shell input::placeholder { color: var(--shellbar-muted); }
  .topbar .search-shell .material-symbols-outlined { color: var(--shellbar-muted); }

  /* One control height for the whole bar: 40px, rounded-full. */
  body:is(.dash-active, :not(.dash-active)) .upgrade-chip {
    height: 48px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px; border-radius: 9999px; margin: 0;
    background: var(--shellbar-panel); border: 1px solid var(--shellbar-line); color: var(--shellbar-text);
    box-shadow: none;
  }
  .topbar-actions .create-fab {
    width: 48px; height: 48px; border-radius: 9999px;
    background: #d9ff5e; color: #000000; border: none; box-shadow: none;
  }
  .topbar-actions .create-fab:hover { background: #e0f878; }
  .topbar-actions .create-menu-pop { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; }
  body:is(.dash-active, :not(.dash-active)) .topbar-iconbtn {
    width: 48px; height: 48px; border-radius: 9999px;
    background: var(--shellbar-panel); border: 1px solid var(--shellbar-line); color: var(--shellbar-muted);
  }
  .topbar-iconbtn:hover { color: var(--shellbar-text); }
  body:is(.dash-active, :not(.dash-active)) .profile-dot { width: 48px; height: 48px; }
  /* The bell is retired — Today carries what needs you (owner call, 2026-08-06). */
  .notif-menu { display: none !important; }

  /* Content: FULL page width with padding, under the fixed bar. */
  body:is(.dash-active, :not(.dash-active)) .shell {
    margin-left: 0; padding: 84px 40px 72px; max-width: none;
  }
}

/* Shell-bar palette: dark = the mock, light = the same bar on paper. */
:root {
  --shellbar-bg: #fbfbfa;
  --shellbar-panel: #ffffff;  /* one surface for nav pill-bar, search, upgrade */
  --shellbar-hover: #e6e6e3;
  --shellbar-line: #e6e6e3;
  --shellbar-text: #121212;
  --shellbar-muted: #6e6e6e;
  --shellbar-active: #121212;
  --shellbar-on-active: #ffffff;
}
html[data-theme="dark"] {
  --shellbar-bg: #0b0b0b;
  --shellbar-panel: #141414;
  --shellbar-hover: #262626;
  --shellbar-line: #262626;
  --shellbar-text: #ffffff;
  --shellbar-muted: #a3a3a3;
  --shellbar-active: #ffffff;
  --shellbar-on-active: #000000;
}

/* ── Page title: compact, mock-card-sized — not the old display headline, and
   never missing (owner: "no page title" is a bug, not a feature). ── */
@media (min-width: 961px) {
  #sageDash .sg-display {
    display: block; font-size: 24px; font-weight: 700; letter-spacing: -.01em;
    margin: 0 0 4px;
  }
  #sageDash .sg-headrow { margin-bottom: 12px; }
  #sageDash .sg-chips { display: none !important; }
}

/* Every lime CTA is THE lime — Ask Gia, Finish setup, Sharpen Start, quick-add. */
.topbar-gia,
body:is(.dash-active, :not(.dash-active)) .topbar .topbar-gia,
#setupBanner .button.primary,
.topbar-gia:hover,
#setupBanner .button.primary:hover,

/* Banners take the card language. */
#page-dashboard .setup-banner {
  background: var(--sg-surface, #fff); border: 1px solid var(--mid-line);
  border-radius: 1.5rem; box-shadow: none;
}

/* (Card-head icons removed 2026-08-08 — they were ::before CONTENT, not markup,
   which is why the app-wide icon removal missed them.) */
#page-dashboard .sg-card-head h3::before { content: none !important; }
/* Today renders its own icon — take it lime, like the mock's sun. */
#page-dashboard .today-head > .material-symbols-outlined { color: var(--mid-accent-ink); }
#page-dashboard #moneyCard h3::before { content: "payments"; color: var(--mid-accent-ink); }
#page-dashboard #dataPendCard h3::before { content: "storage"; }
#page-dashboard #shootsCard h3::before { content: "photo_camera"; }
#page-dashboard #delivCard h3::before { content: "inventory_2"; }
#page-dashboard #likelyCard h3::before { content: "group"; }
#page-dashboard .fin-f12 h3::before { content: "monitoring"; }

/* Canvas: the dashboard floor follows the skin in BOTH themes. The midnight-era
   `body.dash-active` rules painted the shell dark even under the light skin
   (white cards on a black floor, title invisible) — same-specificity override. */
:root { --dash-canvas: #f4f4f2; }
html[data-theme="dark"] { --dash-canvas: #0b0b0b; }
body:is(.dash-active, :not(.dash-active)).dash-active { background: var(--dash-canvas); }
body:is(.dash-active, :not(.dash-active)) .shell { background: var(--dash-canvas); }
body:is(.dash-active, :not(.dash-active)) #page-dashboard { background: var(--dash-canvas); }

/* ═══ STITCH SALES — Leads/Contacts/Quotes clubbed + the kanban board skin
   (2026-08-06). One nav destination; Pipelines | Contacts | Quotes sub-tabs at
   the top of all three pages; the board takes the mock's layout — full-height
   340px columns with internal scroll, stage-dot headers, card anatomy (name,
   event w/ icon, source tag, value, age) — in the SHIPPED palette (#d9ff5e,
   Schibsted, white-active shell pills), not the mock's second dialect. ═══ */

/* Desktop: Contacts + Quote leave the top nav — they live inside Leads now. */
@media (min-width: 961px) {
  .nav-item[data-page="contacts"], .nav-item[data-page="quotes"] { display: none !important; }
}

/* Sub-tabs: lime active pill in a dark rounded container (the mock's switcher). */
:root {
  --kb-canvas: #f4f4f2; --kb-panel: #ffffff; --kb-col: #f7f7f5; --kb-card: #ffffff;
  --kb-line: #e6e6e3; --kb-line-soft: #ececea; --kb-tile: #f0f0ed;
  --kb-text: #121212; --kb-muted: #6e6e6e; --kb-value: #4d5c00;
  /* Account-health semantics. The lead card's ground is WHITE in this theme, so these
     are the darkened variants — the dark-theme block below carries the bright ones.
     Semantic only, deliberately never the accent: "needs attention" must not read as
     "selected". */
  --kb-health-ok: #16a34a; --kb-health-warn: #b45309; --kb-health-crit: #dc2626;
  --kb-health-warn-ink: #92400e; --kb-health-crit-ink: #b91c1c;
}
html[data-theme="dark"] {
  /* Aligned to the MIDNIGHT family (2026-08-08): the kb dark set was its own
     near-black palette, so kb consumers (boards, deal panel) sat visibly darker
     than the dashboard/contacts cards beside them. One dark palette app-wide. */
  --kb-canvas: #0b0b0b; --kb-panel: #141414; --kb-col: #141414; --kb-card: #1a1a1a;
  --kb-line: #262626; --kb-line-soft: rgba(38, 38, 38, .55); --kb-tile: #202020;
  --kb-text: #ffffff; --kb-muted: #a3a3a3; --kb-value: #d9ff5e;
  --kb-health-ok: #4ade80; --kb-health-warn: #ffb020; --kb-health-crit: #ff5d5d;
  --kb-health-warn-ink: #ffb020; --kb-health-crit-ink: #ff8f8f;
}
.sales-subnav,
.pf-subnav {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px; margin: 0 0 14px; border-radius: 9999px;
  background: var(--kb-panel); border: 1px solid var(--kb-line);
}
.sales-subtab,
.pf-subtab {
  padding: 7px 24px; border-radius: 9999px; border: none; background: transparent;
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--kb-muted);
  cursor: pointer; transition: all var(--dur);
}
.sales-subtab:hover,
.pf-subtab:hover { color: var(--kb-text); }
.sales-subtab.is-active,
.pf-subtab.is-active { background: #d9ff5e; color: #1a2000; }

/* The three clubbed pages ride the same canvas + face as the dashboard. */
body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-contacts, #page-quotes, #page-projects) {
  font-family: var(--sans);
}

/* ── The board (desktop): full-height columns, internal scroll ── */
@media (min-width: 961px) {
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) {
    display: flex; gap: 20px; align-items: stretch;
    grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden;
    height: calc(100dvh - 250px); min-height: 420px;
    padding-bottom: 10px;
  }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban)::-webkit-scrollbar { height: 8px; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban)::-webkit-scrollbar-track { background: transparent; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban)::-webkit-scrollbar-thumb { background: var(--kb-line); border-radius: 4px; }
  :is(#page-leads, #page-projects) .kanban-col {
    flex: 0 0 340px; width: 340px; display: flex; flex-direction: column;
    border-radius: 1rem; background: var(--kb-col);
    border: 1px solid var(--kb-line-soft); box-shadow: none;
  }
  :is(#page-leads, #page-projects) .kanban-col-body { flex: 1 1 auto; overflow-y: auto; }
}
:is(#page-leads, #page-projects) .kanban-col-header { padding: 14px 16px 10px; border-bottom: none; }
:is(#page-leads, #page-projects) .kb-ghost { display: none; }
:is(#page-leads, #page-projects) .kanban-col-title { font-size: 16px; font-weight: 650; color: var(--kb-text); display: flex; align-items: center; gap: 10px; }
:is(#page-leads, #page-projects) .kanban-col-title::before {
  content: ""; width: 10px; height: 10px; border-radius: 9999px; flex: 0 0 auto;
  background: var(--stage-dot, #94a3b8); box-shadow: 0 0 8px var(--stage-glow, transparent);
}
:is(#page-leads, #page-projects) .kanban-col[data-stage="Pending qualification"] { --stage-dot: #d9ff5e; --stage-glow: rgba(217,255,94,.5); }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Qualified"] { --stage-dot: #60a5fa; }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Call booked"] { --stage-dot: #c084fc; }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] { --stage-dot: #ffb4ab; --stage-glow: rgba(255,180,171,.5); }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Cold lead"] { --stage-dot: #94a3b8; }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Verbal confirmation/ Awaiting payment"] { --stage-dot: #ffc176; }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Closed Won"] { --stage-dot: #d9ff5e; }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Closed Lost"], 
:is(#page-leads, #page-projects) .kanban-col[data-stage="Disqualified lead"] { --stage-dot: #6b7280; }
:is(#page-leads, #page-projects) .kanban-col-meta { color: var(--kb-muted); font-variant-numeric: tabular-nums; }

/* Cards: the mock's anatomy on the shipped palette. */
:is(#page-leads, #page-projects) .kanban-card {
  background: var(--kb-card); border: 1px solid var(--kb-line-soft);
  border-radius: .625rem; padding: 16px; box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease);
}
:is(#page-leads, #page-projects) .kanban-card:hover { border-color: var(--kb-line); box-shadow: none; transform: none; }
:is(#page-leads, #page-projects) .kanban-card-title { font-size: 16px; font-weight: 650; color: var(--kb-text); }
:is(#page-leads, #page-projects) .kb-event {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 13px; color: var(--kb-muted);
}
:is(#page-leads, #page-projects) .kb-event .material-symbols-outlined { font-size: 16px; }
:is(#page-leads, #page-projects) .kb-event-more { color: var(--kb-muted); font-size: 11.5px; }
:is(#page-leads, #page-projects) .kb-metarow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
:is(#page-leads, #page-projects) .kb-source {
  padding: 3px 10px; border-radius: .375rem; font-size: 11.5px; font-weight: 550;
  background: var(--kb-tile); border: 1px solid var(--kb-line-soft); color: var(--kb-muted);
}
:is(#page-leads, #page-projects) .kb-age {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: .375rem;
  font-size: 11.5px; background: var(--kb-tile); color: var(--kb-muted); white-space: nowrap;
}
:is(#page-leads, #page-projects) .kb-age .material-symbols-outlined { font-size: 14px; }
:is(#page-leads, #page-projects) .kanban-card-amount {
  margin-top: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; font-weight: 600; color: var(--kb-value);
}
/* Hot leads wear the red accent: tinted border + folded corner. */
/* The old dog-eared corner + pink border on hot cards died with the boxed
   design — on borderless tiles it read as a rendering artifact (2026-08-08). */
/* Empty column: the mock's dashed inbox state. */
:is(#page-leads, #page-projects) .kanban-empty {
  margin: 10px; padding: 28px 12px; border-radius: .75rem;
  border: 1px dashed var(--kb-line); text-align: center; color: var(--kb-muted);
}
:is(#page-leads, #page-projects) .kanban-empty::before {
  content: "inbox"; font-family: "Material Symbols Outlined"; display: block;
  font-size: 34px; color: var(--kb-line); margin-bottom: 8px;
}

/* Board overrides vs the sage leads skin (it prefixes html[data-theme]
   body.leads-active — these carry the same weight, later in the file). */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col,
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] {
  background: var(--kb-col);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--kb-line-soft); box-shadow: none;
  height: 100%; align-self: stretch;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-header {
  background: transparent; border-bottom: none;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kb-ghost { display: none !important; }
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: var(--kb-text); }
@media (max-width: 960px) {
  /* Mobile keeps its single-column board: no forced heights there. */
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col { height: auto; }
}

/* Cards + anatomy, same counter-weight (the midnight leads skin styles
   body:is(.leads-active, .projects-active) :is(#page-leads, #page-projects) .kanban-card — dark cards and blue values were
   bleeding into the light board). */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card {
  background: var(--kb-card); border: 1px solid var(--kb-line-soft);
  border-radius: .625rem; padding: 16px; box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card:hover {
  border-color: var(--kb-line); transform: none; box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card-title { color: var(--kb-text); }
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card-amount {
  color: var(--kb-value); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-title {
  color: var(--kb-text); font-size: 16px; font-weight: 650;
  text-transform: none; letter-spacing: 0; opacity: 1;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) #page-leads :is(.kb-event, .kb-event-more) { color: var(--kb-muted); }
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) #page-leads :is(.kb-source, .kb-age) {
  background: var(--kb-tile); border-color: var(--kb-line-soft); color: var(--kb-muted);
}

/* ═══ Sales polish round (2026-08-06) ════════════════════════════════════════
   1. The board fills the screen EXACTLY: the page becomes a flex column and the
      board takes whatever height remains below the sub-tabs/heading — no more
      guessed 250px offset that under- or over-shot as the header stack changed.
   2. One page-title size everywhere: the dashboard's 24px/700 is THE title. */
@media (min-width: 961px) {
  body:is(.leads-active, :not(.leads-active)) #page-leads {
    display: flex; flex-direction: column;
    /* 84px bar offset + the shell's 16px bottom padding: the board's edge lands
       exactly on the fold, not 10px past it. */
    min-height: calc(100dvh - 100px);
    max-height: calc(100dvh - 100px);
  }
  /* The board is the flex remainder — auto-adjusts to any header height above it. */
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) {
    flex: 1 1 auto; height: auto; min-height: 380px;
  }
  /* The shell's 72px bottom padding would push the board past the fold — and the
     page carries its own 96px bottom padding (mobile-nav reserve) doing the same. */
  body.leads-active .shell { padding-bottom: 16px; }
  body:is(.leads-active, :not(.leads-active)) #page-leads { padding-bottom: 0; }
  :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) { margin-bottom: 0; }
  /* Elements between heading and board must not grow. */
  #page-leads > :not(#crmKanbanBoard) { flex: 0 0 auto; }

  /* Page titles: one size across the app (dashboard already speaks 24px/700). */
  .page-heading h1, .page h1, #sageDash .sg-display {
    font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  }
}

/* Sub-tab pill hugs its tabs — #page-leads is a flex COLUMN now, and flex
   children stretch by default, which ran the container on past Quotes to the
   page edge. Sits under the page title (renderSalesSubnav places it there). */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(.sales-subnav, .pf-subnav) {
  align-self: flex-start; width: auto; margin: 2px 0 14px;
}

/* Leads title obeys the unified 24px (a sage rule pinned it at 31px). */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) .sg-leads-head .sg-display {
    font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px;
  }
}

/* ═══ Contact CARDS (2026-08-06) — four per row: who, which booking, last touch. */
.ct-cardgrid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
  align-items: stretch;
}
@media (max-width: 1440px) { .ct-cardgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .ct-cardgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .ct-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ct-cardgrid { grid-template-columns: minmax(0, 1fr); } }
html:is([data-theme], :not([data-theme])) body:is(.contacts-active, :not(.contacts-active)) .ct-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--kb-panel); border: 1px solid var(--kb-line-soft);
  border-radius: var(--r-card); padding: 16px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
html:is([data-theme], :not([data-theme])) body:is(.contacts-active, :not(.contacts-active)) .ct-card:hover { border-color: var(--kb-line); }
.ct-card .ctc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-card .ctc-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.ct-card .ctc-name { font-size: 14px; font-weight: 650; color: var(--kb-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card .ct-sub { color: var(--kb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card .ctc-wa { flex: 0 0 auto; }
.ct-card .ctc-deal {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; color: var(--kb-muted);
}
.ct-card .ctc-deal .material-symbols-outlined { font-size: 16px; flex: 0 0 auto; }
.ct-card .ctc-deal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kb-text); }
.ct-card .ctc-deal-name.ctc-none { color: var(--kb-muted); font-style: italic; }
.ct-card .ctc-deal-more { flex: 0 0 auto; font-size: 11.5px; color: var(--kb-muted); }
.ct-card .ctc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.ct-card .ctc-stage {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: .375rem;
  background: var(--kb-tile); border: 1px solid var(--kb-line-soft); color: var(--kb-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-card .ctc-stage.is-open { background: #3d4d00; color: #d9ff5e; border-color: rgba(217, 255, 94, .3); }
html:not([data-theme="dark"]) .ct-card .ctc-stage.is-open { background: #eef7c8; color: #3d4d00; border-color: #c9dd7a; }
.ct-card .ctc-last {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 11.5px; color: var(--kb-muted);
}
.ct-card .ctc-last .material-symbols-outlined { font-size: 14px; }

/* ═══ Leads board height chain, done PROPERLY (2026-08-06) ═══════════════════
   The calc-guess approach left dead space below the columns AND made the last
   card in every column unreachable: flex children default to min-height:auto,
   so the column body grew taller than its column and the tail of its scroll
   range was clipped off-screen. Explicit chain instead — shell owns the
   viewport, every level passes height down, min-height:0 at every flex level
   so the ONLY scrolling happens inside the column bodies. ═══ */
@media (min-width: 961px) {
  body:is(.leads-active, :not(.leads-active)):is(.leads-active, .projects-active) .shell {
    height: 100dvh; box-sizing: border-box;
    padding: 84px 40px 16px; overflow: hidden;
  }
  body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) {
    height: 100%; min-height: 0; max-height: none;
    display: flex; flex-direction: column; overflow: hidden;
    padding-bottom: 0;
  }
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads #crmKanbanBoard, #page-projects #projKanban) {
    flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
    overflow-x: auto; overflow-y: hidden;
  }
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col {
    height: 100%; min-height: 0; display: flex; flex-direction: column;
  }
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-header { flex: 0 0 auto; }
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-bottom: 14px; overscroll-behavior: contain;
  }
}

/* Contacts: the chip pills (All contacts / With open deals / …) are gone —
   the filter dropdown already covers those cuts (owner call 2026-08-06). */
#contactsChips { display: none !important; }

/* ═══ Contacts: same viewport-height chain as the board (2026-08-06) — the card
   grid scrolls INSIDE the page, the page itself never scrolls. ═══ */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body:is(.contacts-active, :not(.contacts-active)).contacts-active .shell {
    height: 100dvh; box-sizing: border-box;
    padding: 84px 40px 16px; overflow: hidden;
  }
  html:is([data-theme], :not([data-theme])) body:is(.contacts-active, :not(.contacts-active)) #page-contacts {
    height: 100%; min-height: 0; max-height: none;
    display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
  }
  #page-contacts > :not(#contactsBody) { flex: 0 0 auto; }
  html:is([data-theme], :not([data-theme])) body:is(.contacts-active, :not(.contacts-active)) #page-contacts #contactsBody {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-bottom: 14px; overscroll-behavior: contain;
  }
  #leadsChips { margin: 0 0 12px; }
}

/* ═══ STITCH DEAL — the individual deal + contact pages in the Aether/obsidian language
   (2026-08-06). Skin over the EXISTING dlp structure (same sections as the mock:
   head card, Deal Pipeline tracker, Overview | Tasks/Activity/History/Quotes).
   Shipped dialect as always: Schibsted + #d9ff5e, light derived via --kb-*. ═══ */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .detail-content,
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-scroll {
  background: var(--kb-canvas);
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) { font-family: var(--sans); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-card {
  background: var(--kb-panel); border: 1px solid var(--kb-line-soft);
  border-radius: .75rem; padding: 24px; box-shadow: none; margin: 0 0 20px;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-card-head h3 { font-size: 20px; font-weight: 650; color: var(--kb-text); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-deal-name { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--kb-text); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-stat-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--kb-muted); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount {
  color: var(--kb-value); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 24px; font-weight: 650;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount input { color: inherit; font: inherit; background: transparent; border: none; }
/* Round action buttons: neutral call, LIME chat (the mock's glow button), red delete. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-icon-btn, .dlp-del-icon) {
  width: 40px; height: 40px; border-radius: 9999px;
  background: var(--kb-tile); border: 1px solid var(--kb-line); color: var(--kb-text);
  display: inline-flex; align-items: center; justify-content: center;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .call-state-granted {
  /* Beaten by `background: var(--kb-tile)` on .dlp-icon-btn above until this existed — that
     selector carries an id, so a bare .call-state-granted never stood a chance and the
     "green button" rendered white (owner 2026-08-20). */
  background: #25D366; border-color: #25D366; color: #06210f;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-wa {
  background: #d9ff5e; border-color: #d9ff5e; color: #1a2000;
  box-shadow: 0 0 15px rgba(217, 255, 94, .3);
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-del-icon { color: var(--mid-danger, var(--mid-danger, #e5484d)); }
/* Pipeline tracker: lime current dot with glow, lime done, muted future. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-dot {
  width: 24px; height: 24px; background: var(--kb-panel);
  border: 2px solid var(--kb-line); color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-current .dlp-step-dot {
  border-color: #d9ff5e; box-shadow: 0 0 8px rgba(217, 255, 94, .5);
}
/* The dot already renders a radio icon for the current step — take it lime
   rather than stacking a second indicator on top. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-current .dlp-step-dot { color: var(--mid-accent-ink); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-done .dlp-step-dot {
  background: #d9ff5e; border-color: #d9ff5e; color: #1a2000;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-current .dlp-step-label { color: var(--kb-value); font-weight: 700; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-step-label { color: var(--kb-muted); font-size: 11.5px; }
/* Tabs as pills, the mock's pattern. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-tab {
  padding: 7px 20px; border-radius: 9999px; border: none;
  background: transparent; color: var(--kb-muted); font-size: 14px; font-weight: 550;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-tab.active {
  background: var(--kb-tile); color: var(--kb-text);
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-tabs {
  border-bottom: 1px solid var(--kb-line-soft); padding-bottom: 14px; margin-bottom: 18px;
  background: transparent;
}
/* Micro-labels, fields, metadata — the OS look. */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--kb-muted); font-weight: 600; }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(input[type="text"], input[type="number"], input[type="datetime-local"], input[type="date"], select, textarea) {
  background: var(--kb-tile); border: 1px solid var(--kb-line); color: var(--kb-text);
  border-radius: .5rem;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--kb-muted); }
/* Sections divide by SPACE, not rules (owner: no separator lines anywhere). */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-section { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
/* Primary actions in the panel go lime. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .button.primary {
  background: #d9ff5e; color: #1a2000; border: none; border-radius: 9999px;
  box-shadow: 0 0 15px rgba(217, 255, 94, .2); font-weight: 700;
}
/* Columns: Overview 4 / Interactions 8 (the mock's proportions, sans the third
   reminders rail — tasks live in the first tab here). */
/* Three columns from desktop up — Overview 4 / Interactions 5 / Reminders 3
   (the rail is a COLUMN, not a stray card that wraps under Overview). */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-cols {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: 20px; align-items: start;
  }
  :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-cols > .dlp-card { margin-bottom: 0; }
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .button.primary { display: inline-flex; width: auto; align-self: flex-start; padding: 8px 24px; }

/* ═══ Deal page: Active Reminders rail + true full-page (2026-08-06) ═════════
   1. The panel was already "full page" — but pinned to the RETIRED chrome
      (top:58px for the old topbar, left:264px for the dead sidebar), which read
      as a floating overlay beside a phantom gutter. Re-pinned under the new bar.
   2. The mock's third column, built on REAL data: due-dated open tasks. ═══ */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body .detail-fullpage:not([hidden]) {
    top: 64px !important; left: 0 !important; bottom: 0 !important; right: 0 !important;
  }
  html:is([data-theme], :not([data-theme])) body .detail-fullpage .detail-content { background: var(--kb-canvas) !important; }
}
/* Full width: the sage-era 1180px centered cap made the page float in a gutter. */
html:is([data-theme], :not([data-theme])) :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp { max-width: none; margin: 0; }
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-scroll { padding: 24px 40px calc(48px + env(safe-area-inset-bottom)); }
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-ico { color: var(--mid-accent-ink); font-size: 16px; vertical-align: -3px; margin-right: 6px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-list { display: flex; flex-direction: column; gap: 12px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem {
  position: relative; overflow: hidden;
  background: var(--kb-tile); border: 1px solid var(--kb-line-soft);
  border-radius: .5rem; padding: 14px 14px 12px 18px;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #60a5fa;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem.is-overdue { border-color: color-mix(in srgb, var(--mid-danger, var(--mid-danger, #e5484d)) 30%, var(--kb-line-soft)); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem.is-overdue::before { background: var(--mid-danger, var(--mid-danger, #e5484d)); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  padding: 2px 8px; border-radius: .25rem;
  background: color-mix(in srgb, #60a5fa 12%, transparent); color: #60a5fa;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem.is-overdue .dlp-rem-badge {
  background: color-mix(in srgb, var(--mid-danger, var(--mid-danger, #e5484d)) 12%, transparent); color: var(--mid-danger, var(--mid-danger, #e5484d));
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-when { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--kb-muted); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-title { margin: 0; font-size: 13px; font-weight: 550; color: var(--kb-text); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-complete {
  font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: .375rem; border: none; cursor: pointer;
  background: color-mix(in srgb, #d9ff5e 20%, transparent); color: var(--kb-value);
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem.is-overdue .dlp-rem-complete {
  background: color-mix(in srgb, var(--mid-danger, var(--mid-danger, #e5484d)) 12%, transparent); color: var(--mid-danger, var(--mid-danger, #e5484d));
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-new {
  width: 100%; margin-top: 14px; padding: 10px; border-radius: .5rem; cursor: pointer;
  background: transparent; border: 1px dashed var(--kb-line);
  color: var(--kb-muted); font-size: 13px; font-weight: 550;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-new:hover { background: var(--kb-tile); color: var(--kb-text); }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-new .material-symbols-outlined { font-size: 16px; }

/* Contact-page leftovers from the cyan era, re-accented to match the deal page. */
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .dlp-avatar {
  background: color-mix(in srgb, #d9ff5e 12%, transparent);
  border: 1px solid color-mix(in srgb, #d9ff5e 30%, transparent); color: var(--kb-value);
  border-radius: 9999px;
}
/* An 8243-era rule paints these inputs mid-surface-2 !important — out-shout it. */
html:is([data-theme], :not([data-theme])) body #contactDetailContent .dl-field :is(input, select, textarea) {
  background: var(--kb-tile) !important; border: 1px solid var(--kb-line) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .dlp-amount-static {
  color: var(--kb-value); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 24px; font-weight: 650;
}
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .cc-send-btn {
  background: #d9ff5e; color: #1a2000; border-radius: 9999px;
  box-shadow: 0 0 15px rgba(217, 255, 94, .3);
}
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .cc-send-btn:hover { background: #ccf152; }
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .cc-send-btn:disabled {
  background: var(--kb-tile); color: var(--kb-muted); box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .contact-deals .deal-link {
  background: var(--kb-tile); border: 1px solid var(--kb-line-soft); border-radius: .5rem;
}
/* Same column proportions as the deal page (Overview 4 / tabs 8, no rail here). */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) #contactDetailContent .dlp-2col {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 20px; align-items: start;
  }
}

/* ═══ PROJECTS — 4-stage pipeline board + full-page project view (2026-08-06).
   Board = the Leads kanban dialect verbatim (selectors widened above); this
   block is only what differs: 4 columns, stage dot colors, the page's own
   heading spacing, and the detail page's three columns. ═══ */
#page-projects #projKanban { grid-template-columns: repeat(4, minmax(300px, 1fr)); } /* mobile grid; desktop board is flex */
#page-projects .kanban-col[data-stage="shoot_pending"] { --stage-dot: #c084fc; }
#page-projects .kanban-col[data-stage="in_production"] { --stage-dot: #38bdf8; }
#page-projects .kanban-col[data-stage="shoot_complete"] { --stage-dot: #ffc176; }
#page-projects .kanban-col[data-stage="project_complete"] { --stage-dot: #d9ff5e; }
#page-projects .kanban-col[data-stage="closed_out"] { --stage-dot: #6b7280; }
@media (min-width: 961px) {
  /* Closed-out view is a single column — don't stretch it across the viewport. */
  #page-projects #projKanban .kanban-col[data-stage="closed_out"] { max-width: 440px; }
  body:is(.leads-active, :not(.leads-active)) #page-projects > :not(#projectsBody) { flex: 0 0 auto; }
  html:is([data-theme], :not([data-theme])) body #page-projects #projectsBody {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  html:is([data-theme], :not([data-theme])) body #page-projects .proj-chips { flex: 0 0 auto; margin: 0 0 12px; }
  /* .projects-body ships a 120px bottom pad from the accordion era — it eats the
     board's height inside the viewport chain. */
  html:is([data-theme], :not([data-theme])) body #page-projects #projectsBody.projects-body { padding: 6px 0 0; }
  /* 4 columns share the full width (leads pins 340px for its 9-column scroll). */
  html:is([data-theme], :not([data-theme])) body #page-projects #projKanban .kanban-col { flex: 1 1 0; min-width: 280px; max-width: none; }
  html:is([data-theme], :not([data-theme])) body #page-projects #projKanban .kanban-col[data-stage="closed_out"] { flex: 0 1 440px; }
}
#page-projects .proj-kb-bal { color: var(--kb-muted); font-weight: 500; font-size: 11.5px; }
#page-projects .kanban-card .proj-card-progress-track { margin: 8px 0 2px; }
#page-projects .kanban-card .proj-badge { flex: 0 0 auto; }

/* Detail page: Deal+Contact | Production | Post-Production+Finance. */
#projectDetailPanel .proj-colstack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#projectDetailPanel .proj-colstack > .dlp-card { margin-bottom: 0; }
#projectDetailPanel .proj-head-badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#projectDetailPanel .proj-h-ico { color: var(--mid-accent-ink); font-size: 16px; vertical-align: -3px; margin-right: 4px; }
#projectDetailPanel .dlp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) #projectDetailPanel .dlp-cols {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; align-items: start;
  }
  html:is([data-theme], :not([data-theme])) #projectDetailPanel .dlp-cols > .dlp-card { margin-bottom: 0; }
}
/* Full-width Deal strip above the three columns: facts flow as a row. */
#projectDetailPanel .proj-deal-facts { display: flex; flex-wrap: wrap; gap: 16px 48px; }
#projectDetailPanel .proj-deal-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* The project-management internals were skinned for the midnight accordion —
   re-point their surfaces at the board tokens so light theme stays light. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel :is(.proj-evt-card, .proj-deliv-row, .proj-plan-row, .proj-pay-row, .proj-cost-row) {
  background: var(--kb-tile); border-color: var(--kb-line-soft); color: var(--kb-text);
}
/* Finance content sits ON the card, like every other card — the .proj-money
   wrapper was a second box painting the whole card a different colour. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-money {
  background: none; border: 0; padding: 0; color: var(--kb-text);
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel :is(.proj-eyebrow, .proj-cost-head, .proj-pay-head, .proj-pay-sum, .proj-field > span) { color: var(--kb-muted); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-sig { color: var(--kb-muted); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel :is(.contact-phone-link, .contact-wa-link, .dl-field-static a) { color: var(--kb-text); }
/* Stage badges re-tuned to the board dialect (out-shouts the cyan-era pair above). */
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-pending { background: rgba(192, 132, 252, .18) !important; color: #c084fc !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-prod { background: rgba(56, 189, 248, .18) !important; color: #38bdf8 !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-shot { background: rgba(255, 193, 118, .18) !important; color: #ffc176 !important; border: none; }
:is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-done { background: #d9ff5e !important; color: #1a2000 !important; border: none; }
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-pending { background: rgba(147, 51, 234, .12) !important; color: #7e22ce !important; }
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-prod { background: rgba(2, 132, 199, .12) !important; color: #0369a1 !important; }
html[data-theme="light"] :is(#page-projects, #dealDetailPanel) .proj-badge.proj-st-shot { background: rgba(217, 119, 6, .12) !important; color: #b45309 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 1 — DESIGN TOKENS (2026-08-06). Adopted from the dark-CRM reference.
   The problem this fixes: the app had 15 text sizes, 6 font weights and 10
   corner radii, so nothing read as more important than anything else. Six
   sizes, three weights, two radii. Every new rule below pulls from here.

   ACCENT RULE (write it down, follow it everywhere):
     lime is allowed on  →  ONE filled hero card per screen · data values
                            (money, counts, chart series, progress) · the ONE
                            primary button · the live/selected marker.
     lime is NOT allowed on → section icons, avatars, headings, borders,
                            decorative glows, secondary buttons.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Six sizes — nothing else. */
  --t-display: 30px;   /* page title */
  --t-num: 34px;       /* the one big number on a card */
  --t-h: 20px;         /* card / section heading */
  --t-body: 14px;   /* 14, not 15: every literal body size in the app was 14 */
  --t-sm: 13px;
  --t-micro: 11.5px;   /* small uppercase label */
  /* Three weights — headings stay LIGHT; only numbers and buttons go heavy.
     Heavy-at-large-size is what made the old screens read cheap. */
  --w-reg: 400;
  --w-label: 500;
  --w-num: 600;
  /* Two radii + pill. */
  /* 30, not 20 (owner, 2026-08-13). The Dashboard had carried a private 30px override
     since August while every other page used 20 or its own 16/18 — same tier of card,
     four different shapes as you moved between pages. The Dashboard's shape won, so the
     token now carries it and the override below is redundant. */
  --r-card: 30px;
  --r-tile: 14px;
  --r-pill: 9999px;
  --pad-card: 26px;
  --gap-card: 20px;
}
/* Scope: every screen built in the new language. Legacy pages are untouched
   until their own pass (Setup, Calendar, Chat). */
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes, #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) {
  /* Headings: large and LIGHT. */
}
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes, #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(h1, h2, h3, h4) {
  font-weight: var(--w-reg); letter-spacing: -.015em;
}
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes) :is(.sg-display, .page-heading h1) {
  font-size: var(--t-display); font-weight: var(--w-reg);
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-deal-name {
  font-size: var(--t-display); font-weight: var(--w-reg); letter-spacing: -.015em;
}
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes, #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-card-head h3, .sg-card-head h3, .kanban-col-title) {
  font-size: var(--t-h); font-weight: var(--w-reg);
}
/* The one big number per card, wherever it appears. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-amount, .dlp-amount-static) {
  font-size: var(--t-num); font-weight: var(--w-num); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* Small uppercase labels — one treatment everywhere. */
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes, #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dl-label, .dlp-stat-label, .proj-eyebrow, .dl-field label) {
  font-size: var(--t-micro); font-weight: var(--w-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--kb-muted);
}
/* One card radius, one tile radius. */
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes, #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-card, .sg-card, .kanban-col) {
  border-radius: var(--r-card);
}
html:is([data-theme], :not([data-theme])) body :is(#page-leads, #page-projects) .kanban-card { border-radius: var(--r-tile); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.proj-evt-card, .proj-deliv-row, .proj-plan-row, .proj-pay-row, .proj-cost-row, .dlp-rem, .contact-deals .deal-link) {
  border-radius: var(--r-tile);
}
/* ACCENT RULE enforcement — take lime OFF the things it never should have been
   on. Values, hero cards, primary buttons and live markers keep it. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.proj-h-ico, .dlp-rem-ico) { color: var(--kb-muted); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-avatar {
  background: var(--kb-tile); border-color: var(--kb-line); color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-wa { box-shadow: none; }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .button.primary { box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 2 — THE ONE CARD. Every glance-card in the app is this shape at one of
   two sizes: icon + label top-left, round "open" button top-right, big number
   bottom-left, quiet caption under it. Learn it once, read every screen.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Surfaces come from a --px-* chain so the card sits on whatever the host page
   uses: the dashboard remaps --mid-* to the mock's values, the board pages use
   --kb-*. One component, correct surface on both. */
#page-dashboard {
  --px-panel: var(--mid-surface); --px-line: var(--mid-line);
  --px-tile: var(--mid-surface-2); --px-text: var(--mid-text); --px-muted: var(--mid-muted);
}
.px-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 138px; padding: var(--pad-card); box-sizing: border-box;
  background: var(--px-panel, var(--kb-panel)); border: 1px solid var(--px-line, var(--kb-line-soft));
  border-radius: var(--r-card); color: var(--px-text, var(--kb-text)); text-align: left;
  font-family: var(--sans);
}
.px-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.px-card-label {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  font-size: var(--t-body); font-weight: var(--w-reg); color: var(--px-text, var(--kb-text));
}
.px-card-label > span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-card-label .material-symbols-outlined { font-size: 19px; color: var(--px-muted, var(--kb-muted)); flex: 0 0 auto; }
.px-open {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-pill);
  border: 1px solid var(--px-line, var(--kb-line)); background: transparent; color: var(--px-text, var(--kb-text));
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.px-open:hover { background: var(--px-tile, var(--kb-tile)); }
.px-open .material-symbols-outlined { font-size: 17px; }
.px-card-value {
  display: flex; align-items: baseline; gap: 7px;
  font-size: var(--t-num); font-weight: var(--w-num); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.px-delta { font-size: 13px; font-weight: var(--w-num); color: var(--kb-value); }
.px-card-caption { margin-top: 7px; font-size: var(--t-sm); color: var(--px-muted, var(--kb-muted)); }
/* Period switch inside a card head (30 / 60 / 90). Sits opposite the label in the
   .px-card-top flex row. Quiet until chosen — the numbers are the subject, not this. */
.px-days { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: var(--r-pill);
  border: 1px solid var(--px-line, var(--kb-line-soft)); }
.px-day {
  border: 0; background: transparent; cursor: pointer; padding: 2px 9px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: var(--t-micro); font-weight: var(--w-reg);
  font-variant-numeric: tabular-nums; color: var(--px-muted, var(--kb-muted));
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.px-day:hover { color: var(--px-text, var(--kb-text)); }
.px-day.is-on { background: var(--px-tile, var(--kb-tile)); color: var(--px-text, var(--kb-text)); }
/* The ONE filled card per screen. This is where the accent earns its keep. */
.px-card.is-hero { background: #d9ff5e; border-color: #d9ff5e; color: #1a2000; }
.px-card.is-hero :is(.px-card-label, .px-card-value) { color: #1a2000; }
.px-card.is-hero :is(.px-card-label .material-symbols-outlined, .px-card-caption, .px-delta) { color: rgba(26, 32, 0, .68); }
.px-card.is-hero .px-open { border-color: rgba(26, 32, 0, .28); color: #1a2000; }
.px-card.is-hero .px-open:hover { background: rgba(26, 32, 0, .08); }
/* Small variant — rail cards and tiles. */
.px-card.is-sm { min-height: 0; padding: 18px; gap: 14px; border-radius: var(--r-tile); }
.px-card.is-sm .px-card-value { font-size: 26px; }
.px-card.is-sm .px-card-label { font-size: var(--t-sm); color: var(--px-muted, var(--kb-muted)); }
.px-card.is-sm .px-open { width: 30px; height: 30px; }
.px-card.is-sm .px-card-caption { font-size: 13px; }
.px-cards { display: grid; gap: var(--gap-card); }

/* Small cards: names WRAP to two lines (the reference does this) rather than
   ellipsing — "Mounika & …" tells you nothing. */
.px-card.is-sm .px-card-label > span:not(.material-symbols-outlined) {
  white-space: normal; overflow: visible; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD — the reference mock replicated (2026-08-06).
   Left column: title · KPI row · Today · tab strip · panel.
   Right rail: Reminders (ringed-icon cards) · Top clients (2-up tiles).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Cap the reading width. Unbounded, the main column hit ~1500px on a wide
   screen and every row grew a lane of dead space between its text and its
   button. The rail sticks so the right side isn't a dead column once the left
   one runs long. */
/* The right rail (Reminders + Top clients) was removed 2026-08-06 — it didn't
   earn its column, so the cards take the full width instead. The cap stays:
   unbounded, rows grow a lane of dead space between text and buttons. */
#page-dashboard .dashx { max-width: 1560px; margin-inline: auto; }
#page-dashboard .dashx-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#page-dashboard .sage-dash { margin: 0; }

/* KPI row — four cards, the first one filled. */
#page-dashboard .dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
#page-dashboard .dash-kpis[hidden] { display: none; }
.px-card-foot { display: block; }
.px-delta { top: -.7em; position: relative; }
/* The overflow pins to the card's bottom-right (the mock's spot) instead of
   sharing a flex row with the caption, which was squeezing captions to 2 lines. */
.px-card { position: relative; }
.px-card .px-card-caption { padding-right: 30px; }
.px-more {
  position: absolute; right: 18px; bottom: 14px;
  border: none; background: transparent; cursor: pointer;
  color: var(--px-muted, var(--kb-muted)); font-size: 20px; line-height: 1;
  letter-spacing: .08em; padding: 2px 4px;
}
.px-card.is-hero .px-more { color: rgba(26, 32, 0, .55); }

/* The four business areas as SEPARATE CARDS, two-up (owner's call 2026-08-06 —
   a tab group hid three of the four behind a click). Each is a real card again;
   they were chrome-stripped while they lived inside the tabbed panel. */
/* Six tracks so the cards divide the row exactly: Leads and Finance take half
   each, the three project cards take a third each. Five cards, two full rows,
   no half-empty trailing row. `dense` backfills if a card is permission-hidden. */
#page-dashboard .dash-cards {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense; gap: var(--gap-card); align-items: start;
}
#page-dashboard .dash-cards > .dash-cell { min-width: 0; grid-column: span 3; }
#page-dashboard .dash-cards > :is(#shootsCell, #datapendCell, #delivCell) { grid-column: span 2; }
/* The sketch's two-column middle: Today over Leads on the left, and the finance
   column (Financial overview + Money forecast, both inside #finBand) spanning
   BOTH of those rows on the right, so the columns end level without either card
   having to guess the other's height. */
/* (Placements live in the authoritative desktop-only block further down.) */
/* The finance column fills its two-row span: Money forecast (the last card)
   takes the slack so the right column ends level with Leads on the left,
   instead of leaving a band of dead space under the chart. */
#page-dashboard .dash-cards > #finBand > #financeBody {
  height: 100%; display: flex; flex-direction: column; gap: var(--gap-card);
}
#page-dashboard .dash-cards > #finBand > #financeBody > .sg-card:last-child {
  flex: 1 1 auto; display: flex; flex-direction: column;
}
#page-dashboard .dash-cards > #finBand .fin-f12-chart { margin-top: auto; }
/* (Was: "Lead sources is a table — full width, and last." Superseded 2026-08-08 —
   it now sits LEFT beside Leads; placement lives with the other grid rules.) */
#page-dashboard .dash-cards > .dash-cell[hidden] { display: none; }
#page-dashboard .dash-cards .sg-card {
  background: var(--mid-surface); border: 1px solid var(--mid-line);
  border-radius: var(--r-card); padding: 22px 24px; margin: 0; box-shadow: none;
}

/* Rail headings. */

/* Reminder card — ringed icon, open button, big number, wrapped description. */

/* Client tiles — two per row, the mock's anatomy. */

@media (max-width: 1400px) { #page-dashboard .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #page-dashboard .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD CONTENTS — the cards INSIDE the new shell, rebuilt to match it
   (2026-08-06). The shell was right and the contents were still the old app:
   a page-sized Today list, a second lime hero, and two huge boxes spent to say
   zero. Compact rows, one accent, one "open" affordance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Today: a card, not a page ───────────────────────────────────────────── */
#page-dashboard #todayQueue.today-queue {
  background: var(--mid-surface); border: 1px solid var(--mid-line);
  border-radius: var(--r-card); padding: 22px 24px;
  max-height: 380px; overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
}
#page-dashboard .today-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: var(--t-h); font-weight: var(--w-reg); color: var(--mid-text);
}
#page-dashboard .today-head strong { font-weight: var(--w-reg); font-size: var(--t-h); }
#page-dashboard .today-head > .material-symbols-outlined { font-size: 19px; color: var(--mid-muted); }
#page-dashboard .today-count {
  font-size: 11.5px; font-weight: var(--w-num); padding: 1px 9px; border-radius: var(--r-pill);
  background: var(--mid-surface-3); color: var(--mid-text);
}
#page-dashboard .today-head .today-sub { margin-left: auto; font-size: var(--t-sm); }
#page-dashboard .today-list { display: flex; flex-direction: column; }
#page-dashboard .today-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border: none !important; background: transparent !important;
  border-radius: 0; box-shadow: none !important;
}
#page-dashboard .today-item + .today-item { border-top: 1px solid var(--mid-line) !important; }
#page-dashboard .today-item.today-top { background: transparent !important; }
#page-dashboard .today-ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-pill);
  background: var(--mid-surface-2); color: var(--mid-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
#page-dashboard .today-ico .material-symbols-outlined { font-size: 16px; }
#page-dashboard .today-body { min-width: 0; flex: 1 1 auto; }
#page-dashboard .today-title {
  font-size: var(--t-sm); font-weight: var(--w-label); color: var(--mid-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-dashboard .today-body .today-sub { font-size: 11.5px; color: var(--mid-muted); }
#page-dashboard .today-do {
  flex: 0 0 auto; height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: var(--w-label);
  background: var(--mid-surface-2) !important; color: var(--mid-text) !important;
  border: none !important; box-shadow: none !important;
}
#page-dashboard .today-do:hover { background: var(--mid-surface-3) !important; }
/* The recommended stance in a negotiation card is marked by an outline, not by
   a second lime block — the screen already has its one filled card. */
#page-dashboard .today-do.is-recommended { box-shadow: inset 0 0 0 1px #d9ff5e !important; }
#page-dashboard .today-dismiss { flex: 0 0 auto; width: 26px; height: 26px; color: var(--mid-muted); }
#page-dashboard .today-dismiss .material-symbols-outlined { font-size: 16px; }
#page-dashboard .today-sec { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; }
#page-dashboard .today-list > .today-sec:first-child { margin-top: 0; }
#page-dashboard .today-sec-title {
  font-size: var(--t-micro); font-weight: var(--w-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid-muted);
}
#page-dashboard .today-sec-sub { font-size: 11.5px; color: var(--mid-muted); }
#page-dashboard .today-sec + .today-item { border-top: none !important; }

/* ── Leads card in the panel: heading · quiet fact line · list ───────────── */
/* The fact row is shared by any card that leads with a few numbers (Leads,
   Lead sources) — scoping it to #likelyCard left it unstyled everywhere else. */
#page-dashboard .lead-facts {
  display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 6px; padding-bottom: 16px;
  border-bottom: 1px solid var(--mid-line);
}
#page-dashboard .lead-fact { display: flex; flex-direction: column; gap: 4px; }
/* The Leads card's three counts are .src-pill now — the same control as Today / This
   week / This month on Lead sources (owner, 2026-08-14: the bespoke tab underline "is
   not a part of the UI"). Nothing card-specific is needed: the pill already carries the
   selected state, the pointer and the accent. Only the count inside it is new. */
#page-dashboard .src-pill b { font-weight: var(--w-num); font-variant-numeric: tabular-nums; }

#page-dashboard .lead-fact-v {
  font-size: 24px; font-weight: var(--w-num); letter-spacing: -.02em;
  color: var(--mid-text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* "Likely to close" is the number that matters here, so it takes the accent —
   as TEXT. The full-width lime block it replaced was a second hero. */
#page-dashboard .lead-fact-v.is-key { color: var(--mid-accent-ink); }
html[data-theme="light"] #page-dashboard .lead-fact-v.is-key { color: #4d5c00; }
#page-dashboard #likelyCard .hotlead-list { display: flex; flex-direction: column; }
#page-dashboard .hotlead-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 0; background: transparent !important; border: none !important;
  border-radius: 0; cursor: pointer; text-align: left; box-shadow: none !important;
}
#page-dashboard .hotlead-row + .hotlead-row { border-top: 1px solid var(--mid-line) !important; }
#page-dashboard .hotlead-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#page-dashboard .hotlead-name {
  font-size: var(--t-sm); font-weight: var(--w-label); color: var(--mid-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-dashboard .hotlead-sub { font-size: 11.5px; color: var(--mid-muted); }
#page-dashboard .likely-stage {
  flex: 0 0 auto; font-size: 11.5px; font-weight: var(--w-num);
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--mid-surface-2); color: var(--mid-muted); border: none;
}
/* "Hot" is a live-state marker, which the accent rule does allow — as a tint. */
#page-dashboard .likely-stage.is-hot { background: rgba(217, 255, 94, .14); color: var(--mid-accent-ink); }
html[data-theme="light"] #page-dashboard .likely-stage.is-hot { background: rgba(77, 92, 0, .1); color: #4d5c00; }
#page-dashboard .hotlead-row .px-open {
  width: 30px; height: 30px; border-color: var(--mid-line); color: var(--mid-text); pointer-events: none;
}
#page-dashboard .hotlead-row .px-open .material-symbols-outlined { font-size: 15px; }
/* Retired with the lime block. */
#page-dashboard .likely-stats, #page-dashboard #likelyCard .sg-pri-lime { display: none !important; }

@media (max-width: 860px) { #page-dashboard .dash-cards { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1180px) {
  #page-dashboard .dash-cards > .dash-cell,
  #page-dashboard .dash-cards > :is(#shootsCell, #datapendCell, #delivCell) { grid-column: span 3; }
}
@media (max-width: 860px) {
  #page-dashboard .dash-cards > .dash-cell,
  #page-dashboard .dash-cards > :is(#shootsCell, #datapendCell, #delivCell) { grid-column: 1 / -1; }
}

/* ═══ Dashboard: Leads matches the finance column's height, and the money
   forecast gets a real keyed legend instead of a sentence explaining the
   graphics (2026-08-06). ═══ */
#page-dashboard .dash-cards > :is(#salesCell, #finBand) { align-self: stretch; }
#page-dashboard .dash-cards > #salesCell,
#page-dashboard #salesCell > #salesBandBody { height: 100%; min-height: 0; }
#page-dashboard #likelyCard { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; }
/* The list takes the slack, so a taller card shows more leads rather than
   growing a block of empty space under the last row. */
#page-dashboard #likelyCard .hotlead-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Keyed legend: a swatch per mark. */
#page-dashboard .fin-f12-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 2px 0 18px;
}
#page-dashboard .f12-key {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); color: var(--mid-muted);
}
#page-dashboard .f12-key.is-warn { color: var(--mid-danger, #b3261e); font-weight: var(--w-label); }
#page-dashboard .f12-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
/* Swatches take the SAME values the bars are painted with — a legend that
   doesn't match its marks is worse than no legend. */
#page-dashboard .f12-sw-solid { background: #d9ff5e; }
#page-dashboard .f12-sw-soft { background: #555555; }
html:not([data-theme="dark"]) #page-dashboard .f12-sw-soft { background: #d9d9d4; }
#page-dashboard .f12-sw-gap { background: var(--mid-danger, #b3261e); }
#page-dashboard .f12-sw-line {
  height: 0; border-radius: 0; border-top: 2px dashed var(--mid-tertiary, #ffc176);
}
/* The overheads line labels itself at its right end. */
#page-dashboard .fin-f12-oh { display: flex; justify-content: flex-end; }
#page-dashboard .fin-f12-oh-lbl {
  transform: translateY(-50%); padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--mid-surface); color: var(--mid-tertiary, #ffc176);
  font-size: 11.5px; font-weight: var(--w-num); white-space: nowrap;
}
/* A short month is named as short, on its own label. */
#page-dashboard .fin-f12-col.is-gap .fin-f12-m { color: var(--mid-danger, #b3261e); font-weight: var(--w-label); }
/* The finance cell must end exactly at the forecast card's edge, so the Leads
   card beside it lines up with the graphic and not with stray trailing space. */
/* A 12px !important tail on .fin-body (line ~13995) left the forecast card
   ending above its own cell, so Leads never lined up with the graphic. */
#page-dashboard #finBand > #financeBody.fin-body { padding-bottom: 0 !important; }
#page-dashboard #financeBody > :last-child { margin-bottom: 0; }
/* A stray margin on the Leads card pushed it 10px past its cell, so it ended
   below the finance column instead of level with it. */
#page-dashboard #salesCell > #salesBandBody > #likelyCard { margin: 0; }

/* ═══ Lead sources card — paid vs organic performance (2026-08-06) ═══ */
#page-dashboard .src-head { display: flex; gap: 8px; margin: 0 0 16px; }
#page-dashboard .src-pill {
  border: none; cursor: pointer; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--mid-surface-2); color: var(--mid-muted);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-label);
}
#page-dashboard .src-pill.is-active { background: #d9ff5e; color: #1a2000; }
#page-dashboard .src-tablewrap { overflow-x: auto; margin-top: 4px; }
#page-dashboard .src-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
#page-dashboard .src-table th {
  text-align: right; padding: 0 0 10px; font-size: var(--t-micro); font-weight: var(--w-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted); white-space: nowrap;
}
#page-dashboard .src-table th:first-child, #page-dashboard .src-table td:first-child { text-align: left; }
#page-dashboard .src-table td {
  text-align: right; padding: 12px 0; color: var(--mid-text);
  border-top: 1px solid var(--mid-line); font-variant-numeric: tabular-nums; white-space: nowrap;
}
#page-dashboard .src-table th + th, #page-dashboard .src-table td + td { padding-left: 18px; }
#page-dashboard .src-name { display: flex; flex-direction: column; gap: 2px; }
#page-dashboard .src-acq, #page-dashboard .src-sub { font-size: 11.5px; color: var(--mid-muted); font-weight: var(--w-reg); }
#page-dashboard .src-empty, #page-dashboard .src-note {
  margin: 8px 0 0; font-size: var(--t-sm); color: var(--mid-muted); line-height: 1.5;
}
#page-dashboard .src-camps { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mid-line); }
#page-dashboard .src-camp { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; }
#page-dashboard .src-camp + .src-camp { border-top: 1px solid var(--mid-line); }
#page-dashboard .src-camp-name { font-size: var(--t-sm); font-weight: var(--w-label); color: var(--mid-text); }
#page-dashboard .src-camp-n { font-size: 13px; color: var(--mid-muted); white-space: nowrap; }

/* Setup → Marketing: ad spend entry. */
#adSpendPanel .adspend-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0 18px; }
#adSpendPanel .adspend-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
#adSpendPanel .adspend-list { display: flex; flex-direction: column; }
#adSpendPanel .adspend-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
#adSpendPanel .adspend-row + .adspend-row { border-top: 1px solid var(--mid-line); }
#adSpendPanel .adspend-when { font-variant-numeric: tabular-nums; min-width: 84px; }
#adSpendPanel .adspend-ch { flex: 1 1 auto; min-width: 0; }
#adSpendPanel .adspend-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
#adSpendPanel .adspend-del { border: none; background: none; cursor: pointer; color: var(--mid-muted); display: inline-flex; }
#adSpendPanel .adspend-del .material-symbols-outlined { font-size: 18px; }
/* Four totals at a third of the row can't sit on one line, and left to wrap they broke
   3 + 1. A 2x2 block reads as one unit and costs the same height. */
#page-dashboard #sourcesBody .lead-facts {
  margin-bottom: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

/* KPI row: five cards, and the first two carry a breakdown rather than one
   number. Compact enough that five fit without the labels truncating. */
#page-dashboard .dash-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#page-dashboard .dash-kpis .px-card { padding: 20px; min-height: 150px; gap: 14px; }
#page-dashboard .dash-kpis .px-card-label { font-size: var(--t-sm); }
#page-dashboard .dash-kpis .px-card-label .material-symbols-outlined { font-size: 17px; }
#page-dashboard .dash-kpis .px-open { width: 30px; height: 30px; }
#page-dashboard .dash-kpis .px-open .material-symbols-outlined { font-size: 15px; }
#page-dashboard .dash-kpis .px-card-value { font-size: 30px; }
#page-dashboard .dash-kpis .px-card-caption { font-size: 11.5px; margin-top: 6px; padding-right: 0; }
.px-lines { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.px-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.px-line dt { margin: 0; font-size: 13px; color: var(--px-muted, var(--kb-muted)); }
.px-line dd {
  margin: 0; font-size: 14px; font-weight: var(--w-num);
  font-variant-numeric: tabular-nums; color: var(--px-text, var(--kb-text));
}
.px-line.is-strong dt { color: var(--px-text, var(--kb-text)); }
.px-line.is-strong dd { font-size: 22px; letter-spacing: -.02em; }
.px-card.is-hero .px-line dt { color: rgba(26, 32, 0, .68); }
.px-card.is-hero .px-line dd, .px-card.is-hero .px-line.is-strong dt { color: #1a2000; }

@media (max-width: 1500px) { #page-dashboard .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
  #page-dashboard .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Below the two-column breakpoint everything stacks in reading order. */
  #page-dashboard .dash-cards > :is(#todayCell, #salesCell, #finBand) {
    grid-column: 1 / -1; grid-row: auto;
  }
}
@media (max-width: 760px) { #page-dashboard .dash-kpis { grid-template-columns: minmax(0, 1fr); } }
/* Narrow column: the Today row was wrapping its button onto a second line
   instead of letting the (already ellipsised) title give up the space. */
#page-dashboard .today-item { flex-wrap: nowrap; }
#page-dashboard .today-item .today-do { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE GUTTER — 7% either side, every page, every resolution (owner, 2026-08-06).
   One value, declared once. It replaces the scattered fixed gutters that had
   drifted apart: the content shell used 40px, the fixed top bar used 24px, and
   the detail pages used 40px, so the nav never lined up with the cards under it.
   Set with !important because those older rules live inside their own media
   queries and several carry !important of their own.
   The dashboard's 1560px width cap is dropped here too — with a cap in place the
   gutter grows past 7% the moment the screen is wider than the cap, which is
   exactly what this rule exists to prevent.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --page-gutter: 3%;
  /* Motion (audit 2026-08-06): two speeds, one curve. */
  --dur-fast: .15s;
  --dur: .2s;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

html:is([data-theme], :not([data-theme])) body .shell {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
@media (min-width: 961px) {
  /* The bar is FIXED and outside the shell, so it needs the gutter itself —
     otherwise the logo and the search sit closer to the edge than the cards. */
  html:is([data-theme], :not([data-theme])) body:is(.dash-active, :not(.dash-active)) .app-sidebar {
    padding-left: var(--page-gutter) !important;
  }
  html:is([data-theme], :not([data-theme])) body header.topbar {
    /* Left padding also clears the fixed nav on compact desktops (961–1280),
       where the bar would otherwise lay the search underneath it. The compact
       block sets --bar-nav-clearance; everywhere else it is 0. */
    padding-left: max(var(--page-gutter), var(--bar-nav-clearance, 0px)) !important;
    padding-right: var(--page-gutter) !important;
  }
}
/* Full-page detail views (deal / contact / project) are pinned to the viewport,
   not nested in the shell, so they take the gutter directly. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-scroll {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
#page-dashboard .dashx { max-width: none; }

/* ═══ Skeleton loaders (audit 2026-08-06): grey blocks in the shape of the
   content, with one shared shimmer — replaces the bare "Loading…" strings on
   the high-traffic surfaces. Uses the mid tokens so it sits correctly on every
   page and both themes. ═══ */
.skel { position: relative; overflow: hidden; border-radius: 8px; background: var(--mid-surface-3, #ececea); }
.skel::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mid-surface, #fff) 55%, transparent), transparent);
  animation: skel-sweep 1.4s var(--ease) infinite;
}
@keyframes skel-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-row { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.skel-line { height: 13px; }
.skel-line.is-wide { width: 62%; }
.skel-line.is-mid { width: 44%; }
.skel-line.is-narrow { width: 28%; height: 11px; }
.skel-block { height: 76px; border-radius: 12px; }
.skel-card { border-radius: var(--r-tile, 14px); padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIX BATCH (2026-08-06): empty states · drop indicator · mobile project
   stage pills · ONE pill anatomy · Quotes + leads-list brought onto the new
   surface language. Appended last so it wins ties against every legacy skin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Teaching empty states (leads + projects boards) ── */
.board-empty {
  max-width: 460px; margin: 8vh auto 0; text-align: center; padding: 32px 24px;
}
.board-empty-ico {
  font-size: 40px; color: var(--mid-muted);
  display: inline-grid; place-items: center;
  width: 76px; height: 76px; border-radius: 9999px;
  background: var(--mid-surface-2); margin-bottom: 18px;
}
.board-empty h3 { margin: 0 0 8px; font-size: var(--t-h); font-weight: var(--w-reg); color: var(--mid-text); }
.board-empty p { margin: 0 0 20px; font-size: var(--t-sm); color: var(--mid-muted); line-height: 1.55; }
.board-empty .button.primary { display: inline-flex; width: auto; }

/* ── Kanban drop indicator: an insertion line, so drops stop feeling
      approximate. The column already highlights via .kb-drop. ── */
:is(#page-leads, #page-projects) .kanban-col.kb-drop .kanban-col-body::after {
  content: ""; display: block; height: 3px; border-radius: 9999px;
  margin: 6px 2px 2px; background: #d9ff5e;
}
:is(#page-leads, #page-projects) .kanban-col.kb-drop {
  outline: 1px dashed color-mix(in srgb, #d9ff5e 55%, transparent); outline-offset: 2px;
}

/* ── Projects board on phones: the stage switcher the Leads board already has.
      renderProjects reuses .leads-stage-nav / .leads-stage-pill markup. ── */

/* ── ONE PILL ANATOMY (audit): two tiers only.
      Tier 1 nav pills (40px): .sales-subtab, .setup-tab.
      Tier 2 chips (32px): .sg-chip, .src-pill, .leads-stage-pill.
      One active style everywhere: lime fill, dark ink. ── */
html:is([data-theme], :not([data-theme])) body :is(.sg-chip, .src-pill, .leads-stage-pill) {
  height: 32px; padding: 0 14px; border-radius: 9999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: var(--w-label);
  border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2);
  cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body :is(.sg-chip-lime, .sg-chip.is-active, .src-pill.is-active, .leads-stage-pill.is-active) {
  background: #d9ff5e !important; border-color: #d9ff5e !important; color: #1a2000 !important;
}
html:is([data-theme], :not([data-theme])) body .leads-stage-pill.is-active .count {
  background: rgba(26, 32, 0, .14); color: #1a2000;
}
/* Desktop only — mobile keeps its icon-over-label tab layout. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body .setup-tab {
    height: 40px; border-radius: 9999px; font-weight: var(--w-label);
  }
}
html:is([data-theme], :not([data-theme])) body .setup-tab.is-active {
  background: #d9ff5e; color: #1a2000;
}
html:is([data-theme], :not([data-theme])) body .setup-tab.is-active .material-symbols-outlined { color: #1a2000; }

/* ── QUOTES PAGE onto the new surface language: cards ride the kb tokens the
      page scope already defines; headings take the audit type scale. ── */
html:is([data-theme], :not([data-theme])) body #page-quotes .qg-card {
  background: var(--kb-panel, var(--mid-surface)); border: 1px solid var(--kb-line-soft, var(--mid-line));
  border-radius: var(--r-card, 20px); box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body #page-quotes .qg-card-head h3 {
  font-size: var(--t-h); font-weight: var(--w-reg); letter-spacing: -.015em;
  color: var(--kb-text, var(--mid-text)); text-transform: none;
}
html:is([data-theme], :not([data-theme])) body #page-quotes .qg-card-head .material-symbols-outlined { color: var(--kb-muted, var(--mid-muted)); }
html:is([data-theme], :not([data-theme])) body #page-quotes :is(input, select, textarea) { border-radius: 10px; }
html:is([data-theme], :not([data-theme])) body #page-quotes .button.primary {
  background: #d9ff5e; color: #1a2000; border: none; border-radius: 9999px; font-weight: var(--w-num);
}

/* ── LEADS LIST VIEW rows: hairline rows, the shared open-arrow, no cyan hover. ── */
html:is([data-theme], :not([data-theme])) body #page-leads .lead-row {
  background: var(--kb-panel); border: 1px solid var(--kb-line-soft);
  border-radius: var(--r-tile, 14px);
}
html:is([data-theme], :not([data-theme])) body #page-leads .lead-row:hover { border-color: var(--kb-line); }

/* ═══ Dashboard load-in (2026-08-06): the reveal system now covers the
   dashboard's cards. They rise IN PLACE (vertical, small travel) rather than
   sliding in from the left like board cards — a dashboard isn't a list. The
   reduced-motion guard in setupCardReveal() bails before any class is added,
   and this block's own guard covers markup rendered before that check. ═══ */
:is(.px-card, #page-dashboard .dash-cards .sg-card, #page-dashboard .today-queue).rv { opacity: 0; }
:is(.px-card, #page-dashboard .dash-cards .sg-card, #page-dashboard .today-queue).rv-in {
  animation: dashCardReveal .44s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--rvd, 0ms);
}
@keyframes dashCardReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  :is(.px-card, #page-dashboard .dash-cards .sg-card, #page-dashboard .today-queue).rv { opacity: 1; }
  :is(.px-card, #page-dashboard .dash-cards .sg-card, #page-dashboard .today-queue).rv-in { animation: none; }
}

/* ═══ 44pt touch targets on coarse pointers (2026-08-06): the small round
   controls keep their 26–34px visuals, but on touch devices their HIT AREA
   expands to ≥44px via an invisible overlay. Buttons that are pointer-events:
   none (decorative arrows inside larger row-buttons) are unaffected. ═══ */
@media (pointer: coarse) {
  :is(.px-open, .px-more, .today-dismiss, .today-do, .sg-done, .adspend-del,
      .proj-pay-del, .proj-cost-del, .proj-plan-del, .proj-deliv-del,
      .dp-yearbtn, .dash-filter-btn, .today-gear) {
    position: relative;
  }
  :is(.px-open, .px-more, .today-dismiss, .today-do, .sg-done, .adspend-del,
      .proj-pay-del, .proj-cost-del, .proj-plan-del, .proj-deliv-del,
      .dp-yearbtn, .dash-filter-btn, .today-gear)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD CONSISTENCY PASS (2026-08-06, owner punch list):
   1) the Gia health line becomes a real CARD (it was a bar-styled strip that
      looked like loose text once it moved into the cards grid);
   2) every operational card leads with ONE BIG NUMBER (.sg-bignum) — same
      emphasis grammar as the KPI row, so "the important number" is always
      34px, everything explanatory is 13px;
   3) card-internal type rhythm normalised;
   4) one control-height scale: 40 nav · 36 inputs/filters · 32 chips/actions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── health line: card chrome, not a floating strip. */
#page-dashboard .dash-health-line {
  background: var(--mid-surface); border: 1px solid var(--mid-line);
  border-radius: var(--r-card); padding: 16px 20px; margin: 0;
  font-size: var(--t-sm); color: var(--mid-text-2);
}

/* 2 ── the one big number per operational card. */
#page-dashboard .sg-bignum {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--t-num); font-weight: var(--w-num); letter-spacing: -.02em;
  line-height: 1.05; color: var(--mid-text); font-variant-numeric: tabular-nums;
  margin: 2px 0 2px;
}
#page-dashboard .sg-bignum-l { font-size: var(--t-sm); font-weight: var(--w-reg); color: var(--mid-muted); letter-spacing: 0; }
/* Money card: the same grammar — revenue is the hero figure, the rest step down. */
#page-dashboard .money-tile .money-val { font-size: 16px; font-weight: var(--w-num); font-variant-numeric: tabular-nums; }
#page-dashboard .money-tile-rev .money-val { font-size: 28px; letter-spacing: -.02em; }
#page-dashboard .money-tile .money-lbl {
  font-size: var(--t-micro); font-weight: var(--w-label);
  letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted);
}

/* 3 ── card-internal rhythm: one head margin, one secondary size, one meta size. */
#page-dashboard .sg-card .sg-card-head { margin-bottom: 14px; }
#page-dashboard .sg-card .sg-big-sub { font-size: var(--t-sm); color: var(--mid-muted); margin: 0 0 12px; }
#page-dashboard .sg-card :is(.sg-trend-total, .dash-mlabel) { font-size: 13px; color: var(--mid-muted); }
#page-dashboard .sg-card :is(.shoot-evt, .datapend-when, .deliv-due, .sg-row-main small) { font-size: 13px; }
#page-dashboard .sg-card :is(.shoot-row, .datapend-row, .deliv-row, .sg-row) { padding-top: 11px; padding-bottom: 11px; }

/* 4 ── control heights (new-language pages): 36px for every input-like control,
   32px for chips and inline action pills. Nav pills stay 40px. */
/* min-height rules (global input=40px, .button.small=34px, the 38px period
   button) were beating a bare `height` — pin BOTH properties, with the
   always-true strong prefix so file order settles it. */
html:is([data-theme], :not([data-theme])) body :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes) :is(select, input[type="date"], input[type="month"]) {
  height: 36px; min-height: 36px; box-sizing: border-box;
}
html:is([data-theme], :not([data-theme])) body:is(.dash-active, :not(.dash-active)) :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes) .dash-filter-btn {
  height: 36px; min-height: 36px; box-sizing: border-box; border-radius: 9999px;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard :is(.today-do, .sg-done) {
  height: 32px; min-height: 32px; box-sizing: border-box;
}
#page-dashboard .dash-mnav { width: 28px; height: 28px; border-radius: 9999px; }

/* ═══ Dashboard card radius 1.5× (20 → 30px; owner 2026-08-07). Token-scoped so
   every card tier on the dashboard follows (px-card, sg-card, Today, health
   line); inner tiles/rows keep --r-tile, and other pages keep 20px. The
   enforcing rule catches two legacy literal-20px sg-card rules. ═══ */
/* (was `#page-dashboard { --r-card: 30px }` — now the global default, kept here as a no-op marker) */
html:is([data-theme], :not([data-theme])) body #page-dashboard :is(.sg-card, .px-card, .today-queue, .dash-health-line) {
  border-radius: var(--r-card);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DE-BOX PASS (2026-08-07, from the CreditKarma-style reference):
   1) bar-less top nav — the clusters float on the canvas; a blurred veil +
      hairline appear only after scroll;
   2) light-mode cards drop their 1px outline for a diffusion shadow (dark mode
      keeps a faint border — shadows barely read on near-black);
   3) more vertical air on the dashboard;
   4) the Gia health line is naked hero text beside the page title;
   5) the round open-arrows become solid ink circles, like the reference.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ── SOLID nav (owner 2026-08-08 — was transparent until scroll, which let the
   hero read straight through it). Opaque always; the shadow still only appears
   once content is actually underneath, so at rest it stays flat and quiet. */
html:is([data-theme], :not([data-theme])) body header.topbar {
  background: var(--shellbar-bg) !important;
  border-bottom: 1px solid transparent !important;
  transition: box-shadow var(--dur) var(--ease);
}
html:is([data-theme], :not([data-theme])) body.bar-scrolled header.topbar {
  background: var(--shellbar-bg) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 10px 28px -22px rgba(17, 17, 17, .22);
}
html[data-theme="dark"] body.bar-scrolled header.topbar {
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .55);
}

/* 2 ── borderless light cards, floated by shadow. */
html:not([data-theme="dark"]) body :is(.px-card, #page-dashboard .dash-cards .sg-card, #page-dashboard .today-queue, .kanban-card, .dlp-card, .ct-card) {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px -14px rgba(17, 17, 17, .12);
}

/* 3 ── vertical air. */
#page-dashboard { --gap-card: 24px; }
#page-dashboard .dashx-main { gap: 24px; }
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-kpis .px-card { padding: 24px; min-height: 170px; }
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards .sg-card { padding: 26px; }
html:is([data-theme], :not([data-theme])) body #page-dashboard #todayQueue.today-queue { padding: 24px 26px; }
/* Lead sources reads as its own section — a bigger break above it. */
/* (Removed 2026-08-08 — this nudge is what made Lead sources start 16px lower
   than Leads beside it. It dated from when sources was a full-width section.) */
#sageDash .sg-headrow { margin-bottom: 10px; }

/* 4 ── hero health line: naked text beside the title, not a card. */
#sageDash .sg-headrow { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
html:is([data-theme], :not([data-theme])) body #sageDash .sg-headrow .dash-health-line {
  background: none; border: none; border-radius: 0; padding: 0; margin: 0;
  font-size: var(--t-sm); color: var(--mid-muted);
}
#sageDash .sg-headrow .page-heading { margin-left: auto; }
/* Sharpen nudge sits where the health line did — last, on its own line under the
   greeting. `order` (not DOM position) decides that, because the nudge arrives from a
   fetch while the refresh/filter controls are adopted in a rAF: whichever landed second
   used to go last, and if that was the controls they wrapped below the nudge.
   The row is a COLUMN flex (#dashHero .sg-headrow), so width comes from align-self,
   NOT flex-basis — basis in a column is height, and setting it to 100% stretched the
   nudge into a tall box instead of a full-width strip. */

/* 5 ── solid ink open-arrows (the hero card gets ink + lime). */
html:is([data-theme], :not([data-theme])) body .px-open {
  background: var(--px-text, var(--kb-text, var(--mid-text)));
  color: var(--px-panel, var(--kb-panel, var(--mid-surface)));
  border-color: transparent;
}
html:is([data-theme], :not([data-theme])) body .px-open:hover {
  background: var(--px-text, var(--kb-text, var(--mid-text))); opacity: .82;
}
html:is([data-theme], :not([data-theme])) body .px-card.is-hero .px-open {
  background: #1a2000; color: #d9ff5e; border-color: transparent;
}
html:is([data-theme], :not([data-theme])) body .px-card.is-hero .px-open:hover { background: #1a2000; opacity: .85; }

/* ═══ Bar breathing room (2026-08-07): the floating clusters sat 0–12px from
   the viewport edge. The bar zone grows 64 → 88px (content stays centred, so
   clusters get ~12px more air top AND bottom), and every layout that pinned to
   the old 64/84 rhythm moves down with it. Desktop only — mobile has its own
   bottom-nav chrome. ═══ */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body:is(.dash-active, :not(.dash-active)) .app-sidebar { height: 112px; }
  html:is([data-theme], :not([data-theme])) body header.topbar { height: 112px; }
  /* Content zones: 84px top padding (64 bar + 20 gap) → 112px (88 + 24). */
  html:is([data-theme], :not([data-theme])) body:is(.dash-active, :not(.dash-active)) .shell {
    padding-top: 136px !important;
  }
  /* Full-page detail views pin under the bar. */
  html:is([data-theme], :not([data-theme])) body .detail-fullpage:not([hidden]) { top: 112px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD HERO (2026-08-07): a contained house-gradient band — greeting left,
   the six KPI cards as a 3×2 bento right. The gradient is OURS (quiet warm
   field + soft lime bloom, static), never louder than the lime hero card
   sitting on it. Section two below stays on the solid canvas.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-dashboard .dash-hero {
  display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  gap: 36px; align-items: center; align-content: center;
  /* FULL-BLEED: the band runs edge to edge (the shell's overflow-x: clip eats
     the scrollbar-width overshoot of the 50vw trick); content keeps the page
     gutter as internal padding. */
  margin-inline: calc(50% - 50vw);
  padding: 36px max(var(--page-gutter), 16px); border-radius: 0;
  background:
    radial-gradient(95% 150% at 8% 0%, color-mix(in srgb, #d9ff5e 22%, transparent), transparent 55%),
    radial-gradient(85% 130% at 96% 100%, color-mix(in srgb, #ffc176 12%, transparent), transparent 60%),
    var(--mid-surface-2);
}
html[data-theme="dark"] #page-dashboard .dash-hero {
  background:
    radial-gradient(95% 150% at 8% 0%, color-mix(in srgb, #d9ff5e 10%, transparent), transparent 55%),
    radial-gradient(85% 130% at 96% 100%, color-mix(in srgb, #ffc176 6%, transparent), transparent 60%),
    var(--mid-surface);
}
/* Greeting column: title → sub → health line → period filter, stacked. */
#dashHero .sg-headrow { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
html:is([data-theme], :not([data-theme])) body #dashHero .sg-hello {
  font-size: clamp(30px, 2.6vw, 40px); font-weight: var(--w-reg); letter-spacing: -.02em; line-height: 1.08;
}
#dashHero .sg-hello-sub { margin: 0; font-size: var(--t-body); color: var(--mid-text-2); }
html:is([data-theme], :not([data-theme])) body #dashHero .sg-headrow .dash-health-line { margin-top: 2px; }
#dashHero .sg-headrow .page-heading { margin: 6px 0 0; }
/* The bento: 3×2, tighter than the old 5-across row. */
html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0;
}
html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis .px-card { min-height: 150px; padding: 22px; }
/* The hero band must never push Today below the fold on short screens. */
@media (max-height: 820px) {
  #page-dashboard .dash-hero { padding: 26px 30px; }
  html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis .px-card { min-height: 128px; padding: 18px; }
}
@media (max-width: 1280px) {
  #page-dashboard .dash-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  #page-dashboard .dash-hero { padding: 22px 20px; }
  html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ Hero v2 (2026-08-07): the first section IS the first screen. Desktop pulls
   the band up under the transparent bar (gradient behind the nav) and sizes it
   to the viewport; section two starts below the fold. All six cards identical.
   The global period filter is retired from the dashboard. ═══ */
@media (min-width: 961px) {
  #page-dashboard .dash-hero {
    margin-top: -136px;                    /* reclaim the shell's top padding   */
    padding-top: 136px;                    /* …and keep content clear of the bar */
    min-height: 100dvh; box-sizing: border-box;
    padding-bottom: 48px;
  }
  html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis .px-card {
    height: 158px; min-height: 0;
  }
}
#page-dashboard .dash-period { display: none !important; }
#page-dashboard .px-more { display: none !important; }

/* ═══ Hero v3 (2026-08-07 owner round): square cards · banner above the bento ·
   health line sinks to match the bento's bottom edge · bigger greeting. ═══ */
#dashHero .dash-hero-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dashHero #heroBannerSlot:empty { display: none; }
#dashHero #heroBannerSlot .setup-banner { margin: 0; }
@media (min-width: 961px) {
  /* Square cards: width decides height, all six identical. */
  html:is([data-theme], :not([data-theme])) body #dashHero .dash-kpis .px-card {
    height: auto; min-height: 0; aspect-ratio: 1 / 1; width: 100%; /* Safari: explicit width or the card shrinks */
  }
  /* Left column stretches with the bento; greeting centres, the health line
     sinks to the column's end so it finishes level with the sixth card. */
  #page-dashboard .dash-hero { align-items: stretch; }
  #dashHero .dash-hero-left { display: flex; }
  #dashHero .dash-hero-left #sageDash { display: flex; width: 100%; }
  #dashHero .sg-headrow { width: 100%; }
  /* Paired auto margins: greeting floats centred, health line sinks to the
     column's end — level with the bento's last row. */
  #dashHero .sg-headrow .sg-hello { margin-top: auto; }
  html:is([data-theme], :not([data-theme])) body #dashHero .sg-headrow .dash-health-line { margin-top: auto; }
}
/* Two IDs: must out-rank the (1,2,2) --t-display page-title rule at ~16346. */
html:is([data-theme], :not([data-theme])) body #page-dashboard #dashHero .sg-hello {
  font-size: clamp(40px, 3.6vw, 58px); font-weight: var(--w-reg); letter-spacing: -.025em; line-height: 1.05;
}
#dashHero .sg-hello-sub { font-size: 16px; }

/* ═══ Hero round 4 (2026-08-07): section grabber + carded health facts. ═══ */

/* Win rate + reply time: two borderless cards, same skin as the bento
   (light: white + diffusion shadow, no outline; dark: surface + faint line). */
#dashHero .dash-health-line { gap: 12px; }
#dashHero .dash-health-line .dash-health-sep { display: none; }
html:is([data-theme], :not([data-theme])) body #dashHero .dash-health-line > span:not(.dash-health-sep) {
  background: #fff; border: 0; border-radius: 22px; padding: 16px 20px;
  font-size: var(--t-sm); color: var(--mid-text-2);
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px -14px rgba(17, 17, 17, .12);
}
html[data-theme="dark"] body:is(.dash-active, :not(.dash-active)) #dashHero .dash-health-line > span:not(.dash-health-sep) {
  background: var(--mid-surface); border: 1px solid var(--mid-line); box-shadow: none;
}

/* Section grabber (from the CreditKarma reference): the canvas below rises
   into the hero as a centred tab — concave welds left and right, a muted
   dash inside. Marks the fold; the hero fills the first screen above it. */
#page-dashboard .dash-hero { position: relative; }
#page-dashboard .hero-sep {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 124px; height: 24px; background: var(--dash-canvas);
  border-radius: 16px 16px 0 0;
  display: flex; align-items: center; justify-content: center;
  /* drop-shadow (not box-shadow) so the halo follows the welded silhouette —
     the only thing that makes the notch read where canvas ≈ hero base. */
  filter: drop-shadow(0 -7px 12px rgba(17, 17, 17, .10));
}
#page-dashboard .hero-sep::before,
#page-dashboard .hero-sep::after {
  content: ""; position: absolute; bottom: 0; width: 16px; height: 16px;
}
#page-dashboard .hero-sep::before {
  left: -16px; background: radial-gradient(circle at 0 0, transparent 15.5px, var(--dash-canvas) 16px);
}
#page-dashboard .hero-sep::after {
  right: -16px; background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--dash-canvas) 16px);
}
#page-dashboard .hero-sep i { width: 38px; height: 4px; border-radius: 2px; background: var(--mid-muted); opacity: .7; }
@media (max-width: 960px) { #page-dashboard .hero-sep { display: none; } }

/* ═══ Round 5 (2026-08-07): popover/menu/Ask-Gia/upgrade skins, glass money
   card, health-line hardening. ═══ */

/* Health line: no strip chrome in ANY state inside the hero, and hold the
   cards' height before first data so the greeting never re-centres. */
html:is([data-theme], :not([data-theme])) body #dashHero .dash-health-line {
  background: none; border: 0; box-shadow: none; padding: 0;
}
#dashHero .dash-health-line:empty { min-height: 53px; visibility: hidden; }

/* ── One popover language: menus + search results ──────────────────────── */
:is(.create-menu-pop, .profile-menu-pop) { border-radius: 20px; padding: 8px; min-width: 212px; }
.global-search-results { border-radius: 20px; padding: 8px; }
html:not([data-theme="dark"]) body :is(.create-menu-pop, .profile-menu-pop, .global-search-results) {
  background: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 24px 56px -18px rgba(17, 17, 17, .22);
}
:is(.create-menu-item, .profile-menu-item) {
  min-height: 44px; border-radius: 14px; gap: 12px; font-size: 14px; font-weight: var(--w-label);
}
.gs-opt { min-height: 44px; border-radius: 14px; }
/* Neutral hover — no blue/red repaint, just a quiet well. */
html:not([data-theme="dark"]) body :is(.create-menu-item, .profile-menu-item):hover {
  background: #f1f1ee; color: var(--ink, #1c1b1a);
}
html:not([data-theme="dark"]) body :is(.create-menu-item, .profile-menu-item):hover .material-symbols-outlined {
  color: var(--ink-tertiary, #9a9994);
}
html[data-theme="dark"] body :is(.create-menu-item, .profile-menu-item):hover {
  background: var(--mid-surface-3); color: var(--mid-text);
}
html[data-theme="dark"] body :is(.create-menu-item, .profile-menu-item):hover .material-symbols-outlined {
  color: var(--mid-text-2);
}

/* ── Ask Gia panel ─────────────────────────────────────────────────────── */
.askgia-panel { border-radius: 28px; }
html:not([data-theme="dark"]) body .askgia-panel {
  background: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 28px 64px -20px rgba(17, 17, 17, .26);
}
.askgia-panel .askgia-panel-head { background: none; border-bottom: 0; padding: 18px 18px 10px; }
.askgia-panel .askgia-avatar { background: #d9ff5e; color: #1a2000; }
.askgia-panel .askgia-msg { border-radius: 18px; padding: 10px 15px; }
.askgia-panel .askgia-msg.me { background: #1a2000; color: #f2ffd9; border-bottom-right-radius: 6px; }
html:not([data-theme="dark"]) body .askgia-panel .askgia-msg.gia { background: #f1f1ee; color: var(--ink, #1c1b1a); border-bottom-left-radius: 6px; }
.askgia-panel .askgia-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 13px;
}
.askgia-panel .askgia-chip:hover { border-color: #1a2000; color: inherit; }
.askgia-panel .askgia-input { border-top: 0; background: none; padding: 10px 16px 16px; }
.askgia-panel .askgia-input input { border-radius: 9999px; padding: 12px 18px; min-height: 44px; }
html:is([data-theme], :not([data-theme])) body .askgia-panel .askgia-send {
  width: 44px; height: 44px; border-radius: 50%; background: #1a2000; color: #f2ffd9;
}
html:is([data-theme], :not([data-theme])) body .askgia-panel .askgia-send:hover { background: #2c3505; }
html:is([data-theme], :not([data-theme])) body .askgia-panel .askgia-send .material-symbols-outlined { color: inherit; }
html[data-theme="dark"] body .askgia-panel .askgia-send { background: #d9ff5e; color: #1a2000; }
html[data-theme="dark"] body .askgia-panel .askgia-send:hover { background: #e4ff85; }
.askgia-bubble {
  background: #d9ff5e; color: #1a2000;
  box-shadow: 0 10px 26px -10px rgba(26, 32, 0, .4);
}

/* ── Upgrade page plan cards ───────────────────────────────────────────── */
/* Centred (owner 2026-08-15). auto-fit packs the tracks to the START of the grid, so
   two cards on a wide screen sat hard against the left edge with a screen of empty
   space beside them. */
#page-upgrade .up-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 360px)); gap: 20px; justify-content: center; }
#page-upgrade #upgradeBody { margin-inline: auto; }
#page-upgrade .up-plans + div { display: flex; justify-content: center; }
.plan-card { background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 24px; padding: 28px; }
html:not([data-theme="dark"]) body .plan-card {
  background: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px -14px rgba(17, 17, 17, .12);
}
.plan-card .plan-name { font-size: var(--t-h); font-weight: var(--w-reg); color: var(--mid-text); }
.plan-card .plan-price { font-size: var(--t-num); font-weight: var(--w-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--mid-text); margin: 6px 0 4px; }
.plan-card .plan-price .muted.small { font-size: var(--t-sm); font-weight: var(--w-reg); color: var(--mid-muted); }
.plan-card .plan-blurb { margin: 0 0 14px; font-size: var(--t-sm); color: var(--mid-text-2); }
.plan-card .plan-feats { list-style: none; margin: 0 0 18px; padding: 0; }
.plan-card .plan-feats li { padding: 7px 0; font-size: var(--t-sm); color: var(--mid-text-2); border-top: 1px solid color-mix(in srgb, var(--mid-line) 45%, transparent); }
.plan-card .plan-feats li:first-child { border-top: 0; }
html:is([data-theme], :not([data-theme])) body .plan-card .plan-cta {
  min-height: 40px; border-radius: 9999px; padding: 0 22px; border: 0;
  background: #d9ff5e; color: #1a2000; font-weight: var(--w-num);
}
html:is([data-theme], :not([data-theme])) body .plan-card .plan-cta:hover { background: #e4ff85; }

/* ── Glass money card ──────────────────────────────────────────────────── */
html:is([data-theme], :not([data-theme])) body #page-dashboard .px-card.is-hero {
  background: color-mix(in srgb, #d9ff5e 55%, rgba(255, 255, 255, .16));
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
    0 1px 2px rgba(17, 17, 17, .04), 0 14px 34px -14px rgba(17, 17, 17, .12);
}
html[data-theme="dark"] body:is(.dash-active, :not(.dash-active)) #page-dashboard .px-card.is-hero {
  background: color-mix(in srgb, #d9ff5e 74%, transparent);
  border-color: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ═══ Knowledge bank (Setup → Company, 2026-08-07) ═══ */
.kb-list { margin: 0 0 18px; }
.kb-list .kb-empty { padding: 14px 0; }
.kb-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px; min-height: 44px;
  border-top: 1px solid color-mix(in srgb, var(--mid-line) 45%, transparent);
}
.kb-row:first-child { border-top: 0; }
.kb-row .kb-ic { font-size: 20px; color: var(--mid-muted); }
.kb-row .kb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kb-row .kb-body strong { font-size: var(--t-body); font-weight: var(--w-label); color: var(--mid-text); }
.kb-row .kb-body small { font-size: var(--t-micro); color: var(--mid-muted); }
.kb-row .kb-del {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: none; color: var(--mid-muted); cursor: pointer;
}
.kb-row .kb-del:hover { background: color-mix(in srgb, var(--mid-danger) 14%, transparent); color: var(--mid-danger); }
.kb-row .kb-del .material-symbols-outlined { font-size: 19px; }
.kb-textlabel { display: block; margin-top: 4px; }
.kb-textlabel textarea { width: 100%; resize: vertical; }
.kb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
#kbHint { margin: 8px 0 0; }

/* ═══ Today band (2026-08-07): out of the card grid, full width of the content
   column, alone on its row with real air above and below. ═══ */
#page-dashboard .dash-today-band { padding: 56px 0; }
#page-dashboard .dash-today-band > #todayCell { min-width: 0; }
/* Taller now that nothing shares the row — more of the queue shows before it scrolls. */
html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-queue {
  max-height: 620px;
}
@media (max-width: 960px) { #page-dashboard .dash-today-band { padding: 32px 0; } }

/* DASHBOARD GRID — the single authoritative placement (owner 2026-08-08):
   row 1 = Lead sources (the bar graph) LEFT | Leads RIGHT
   row 2 = Financial overview, full width.
   Anything earlier in this file with a weaker selector is superseded here. */
@media (min-width: 961px) {
  /* Row 1 = Lead sources | Leads | Financial overview — three across, the same
     shape as the production row below (owner 2026-08-15). */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #sourcesCell {
    grid-column: 1 / span 2; grid-row: 1; align-self: stretch;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #salesCell {
    grid-column: 3 / span 2; grid-row: 1; align-self: stretch;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #finBand {
    grid-column: 5 / span 2; grid-row: 1; align-self: stretch;
  }
  /* Row 2 = Money forecast, the full width. Twelve upright bars need it. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #finForecastCell {
    grid-column: 1 / -1; grid-row: 2; align-self: stretch;
  }
  /* row 3 = Shoots | Data | Deliverables — three across, square, same shape
     and padding as row 1. They were ragged half-width blocks that wrapped. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #shootsCell   { grid-column: 1 / span 2; grid-row: 3; align-self: stretch; }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #datapendCell { grid-column: 3 / span 2; grid-row: 3; align-self: stretch; }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #delivCell    { grid-column: 5 / span 2; grid-row: 3; align-self: stretch; }
  /* Row 4 = Metrics, full width. Each card carries a number, its sample size AND a
     sentence on how to read it — squeezed into a third of the row that sentence is the
     first thing to go, and a metric with no context is just a number. (owner 2026-08-15) */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #metricsCell {
    grid-column: 1 / -1; grid-row: 4; align-self: stretch;
  }
}
/* Phones + portrait tablets: one column, every cell full width, in reading
   order — sales stuff first, then money, then production. The desktop
   placements above are desktop-only, so the plain resets can win here. */
@media (max-width: 960px) {
  #page-dashboard .dash-cards { grid-template-columns: minmax(0, 1fr); }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > .dash-cell {
    grid-column: 1 / -1; grid-row: auto; aspect-ratio: auto;
  }
  #page-dashboard .dash-cards > #salesCell   { order: 1; }
  #page-dashboard .dash-cards > #sourcesCell { order: 2; }
  #page-dashboard .dash-cards > #finBand     { order: 3; }
  #page-dashboard .dash-cards > #finForecastCell { order: 4; }
  #page-dashboard .dash-cards > #shootsCell  { order: 5; }
  #page-dashboard .dash-cards > #datapendCell{ order: 6; }
  #page-dashboard .dash-cards > #delivCell   { order: 7; }
  #page-dashboard .dash-cards > #metricsCell { order: 8; }
}

/* ═══ Today owns its own screen (2026-08-07) ════════════════════════════════
   The band is a full viewport tall and the card fills it, so when Today is in
   view nothing else is. The queue PAGES sideways instead of scrolling: native
   scroll-snap means touch swipe, trackpad and the arrows all share one
   mechanism, and a page never ends mid-row. ═══ */
@media (min-width: 961px) {
  /* Sizes to its content, capped at one screen (minus the 136px the bar already
     pushed the shell down by). A quiet day is a short band, not a screen of
     emptiness; a busy day still stops at the fold and scrolls inside the cards. */
  #page-dashboard .dash-today-band {
    min-height: 0; padding: 48px 0; display: grid; align-content: start;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-queue {
    height: auto; max-height: none;
    display: flex; flex-direction: column; overflow: visible;
  }
  /* The card's name carries the screen. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-head strong {
    font-size: clamp(34px, 3.2vw, 50px); font-weight: var(--w-reg); letter-spacing: -.025em;
  }
  #page-dashboard .today-head { align-items: center; gap: 14px; margin-bottom: 8px; }
  #page-dashboard .today-head > .material-symbols-outlined { font-size: 30px; }
  #page-dashboard .today-head .today-count { font-size: var(--t-sm); padding: 3px 12px; }
}
/* Phones get the same treatment: without an explicit height the paged list
   sizes to its content, so "one page" would mean nothing. The bar is shorter
   here and the tab dock sits at the bottom. */
@media (max-width: 960px) {
  #page-dashboard .dash-today-band { padding: 16px 0; }
  html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-queue {
    height: auto; max-height: none;
    display: flex; flex-direction: column; overflow: visible;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-head strong { font-size: 26px; }
}


/* ═══ Today: ten cards, then the backlog as a list (2026-08-07) ══════════════
   A card per task with its own tick, because a day's work is a countable set of
   things — not a scroll. Everything past the tenth is backlog and reads as rows.
   The card column scrolls only if the ten don't fit the screen. ═══ */
/* BENTO: the most urgent category gets a card twice the size — a 2×2 block —
   and the next four sit beside it in their own 2×2. Four columns, two rows: the
   big card takes columns 1–2 across both rows, the small ones fill 3–4. The extra
   room isn't decoration: the top category is the one most likely to hold several
   tasks, and it's the only card that can show them all without scrolling. */
#page-dashboard .today-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto; gap: 16px; margin-top: 4px;
}
@media (min-width: 1281px) {
  /* SQUARE, exactly. Height is whatever the screen allows; the grid's WIDTH is
     then derived from it (2 rows of side S + one 16px gap tall → 4 columns of S
     + three gaps wide = 2×height + 16px), so every cell is S×S on any screen.
     On a short laptop this narrows the grid instead of squashing the cards —
     owner's call — and it sits centred rather than leaving one-sided dead space. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: min(calc(100dvh - 300px), 46vw);
    width: calc(min(calc(100dvh - 300px), 46vw) * 2 + 16px);
    max-width: 100%;
    margin-inline: auto;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card {
    aspect-ratio: auto; height: 100%; min-height: 0;
  }
}
@media (min-width: 1281px) {
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card:first-child {
    grid-column: span 2; grid-row: span 2;
  }
}
/* Below the bento breakpoint the big card stops being special and everything
   stacks evenly — a 2×2 hero on a narrow screen is just a tall card. */
@media (max-width: 1280px) {
  #page-dashboard .today-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Needs the same long prefix as the ≥961 rule above, or that rule's higher
     specificity keeps the 2×2 span and the "big" card stretches full width.
     EVERY card is a square here, not just the first — the bento is gone, so
     nothing marks one card out for a different shape. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card {
    grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; width: 100%; height: auto; /* Safari */
    padding: 18px 20px; gap: 10px;
  }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card:first-child .today-groupnum { font-size: var(--t-num); }
}
@media (max-width: 560px) { #page-dashboard .today-cards { grid-template-columns: minmax(0, 1fr); } }
#page-dashboard .today-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  /* Same radius as the dashboard's own cards — --r-tile made Today the odd one out. */
  padding: 18px 20px; border-radius: var(--r-card);
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
html:not([data-theme="dark"]) body #page-dashboard .today-card {
  background: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 24px -16px rgba(17, 17, 17, .16);
}
/* The single most urgent thing wears the accent — one per screen, per the rule.
   Needs to out-rank the light-mode borderless-card rule above, which is why the
   selector is this long. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-card.is-top {
  background: #d9ff5e; border-color: transparent;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 24px -16px rgba(17, 17, 17, .16);
}
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-card.is-top :is(.today-title, .today-kind) { color: #1a2000; }
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-card.is-top .today-done {
  border-color: rgba(26, 32, 0, .3); color: #1a2000;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-card.is-top .today-dismiss { color: rgba(26, 32, 0, .5); }
#page-dashboard .today-card.is-top .today-sub { color: rgba(26, 32, 0, .72); }
#page-dashboard .today-card.is-top .today-ico { background: rgba(26, 32, 0, .12); color: #1a2000; }

#page-dashboard .today-card-top { display: flex; align-items: center; gap: 9px; }
#page-dashboard .today-card .today-kind {
  font-size: var(--t-micro); font-weight: var(--w-label); letter-spacing: .04em;
  text-transform: uppercase; color: var(--mid-muted);
  /* One line: a wrapped label shoves the age chip out of the header row. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#page-dashboard .today-card .today-dismiss { margin-left: auto; }
#page-dashboard .today-card-body { flex: 1; min-width: 0; }
#page-dashboard .today-card .today-title {
  font-size: var(--t-body); font-weight: var(--w-label); line-height: 1.35; color: var(--mid-text);
}
#page-dashboard .today-card .today-sub { margin-top: 3px; color: var(--mid-muted); }
#page-dashboard .today-card-foot { display: flex; align-items: center; gap: 8px; }
#page-dashboard .today-card-foot .today-do { margin-left: 0; }

/* How long it has been waiting — the number that makes a stale task uncomfortable. */
#page-dashboard .today-age {
  font-size: var(--t-micro); font-weight: var(--w-label); padding: 2px 8px; border-radius: var(--r-pill);
  background: color-mix(in srgb, #ffc176 26%, transparent); color: #7a4b00;
}
html[data-theme="dark"] #page-dashboard .today-age { background: rgba(255, 193, 118, .16); color: #ffc176; }
#page-dashboard .today-age.is-inline { background: none; padding: 0; color: #a9741f; }
html[data-theme="dark"] #page-dashboard .today-age.is-inline { color: #ffc176; }

/* Mark complete. */
#page-dashboard .today-done {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px;
  border: 1px solid var(--mid-line); border-radius: var(--r-pill); background: none;
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-label); color: var(--mid-text-2); cursor: pointer;
}
#page-dashboard .today-done .material-symbols-outlined { font-size: 17px; }
#page-dashboard .today-done:hover { border-color: #1a2000; color: var(--mid-text); }
html[data-theme="dark"] #page-dashboard .today-done:hover { border-color: #d9ff5e; color: #d9ff5e; }
#page-dashboard .today-item .today-done { padding: 0 10px; }
#page-dashboard .today-item .today-done .material-symbols-outlined { margin: 0; }
/* The tick lands, then the row goes — an instant vanish reads as a glitch. */
#page-dashboard :is(.today-card, .today-item).is-done { opacity: 0; transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  #page-dashboard :is(.today-card, .today-item).is-done { transition: none; }
}

/* The card grid takes the room; the backlog list keeps its own scroll. */
#page-dashboard #todayCell .today-queue > .today-cards { flex: 0 0 auto; }
html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-list {
  flex: 0 0 auto; min-height: 0; max-height: none;
  display: flex; flex-direction: column; overflow: visible;
}

/* ═══ Today: no container card (2026-08-07) ══════════════════════════════════
   The five squares and the pending rows ARE the cards. The panel they used to
   sit inside was a second, larger card behind them — one card too many. ═══ */
html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-queue {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
}
#page-dashboard #todayCell .today-head { padding-left: 2px; }
/* The heading no longer sits on a panel, so it needs its own air below. */
#page-dashboard #todayCell .today-head { margin-bottom: 18px; }

/* Pending items are cards too — full-width rows rather than squares. */
#page-dashboard #todayCell .today-list { gap: 10px; padding-right: 2px; }
/* The list is a scrolling flex column — without this it shrinks rows to fit
   instead of scrolling, which squashed two of them to half height. */
#page-dashboard #todayCell .today-list > * { flex: 0 0 auto; }
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-item {
  padding: 16px 20px; border-radius: var(--r-card);
  background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important;
}
html:not([data-theme="dark"]) body #page-dashboard .today-item {
  background: #fff !important; border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 10px 24px -16px rgba(17, 17, 17, .16) !important;
}
/* Rows are separate cards now — the hairline between them would read as a seam. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-item + .today-item { border-top: 1px solid var(--mid-line) !important; }
html:not([data-theme="dark"]) body #page-dashboard .today-item + .today-item { border-top-color: transparent !important; }
#page-dashboard #todayCell .today-sec { margin: 14px 0 4px; padding-left: 2px; }
#page-dashboard #todayCell .today-sec:first-child { margin-top: 0; }
/* Real air between the five squares and the backlog — and because the backlog is
   the SCROLLING region, the breathing room lives INSIDE it as padding plus a fade
   mask, so rows dissolve at the top edge instead of sliding hard under the cards. */
html:is([data-theme], :not([data-theme])) body #page-dashboard #todayCell .today-list {
  margin-top: 16px; padding-top: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}

/* Square cards: the title takes the middle, the actions sit on the floor. */
#page-dashboard .today-card { justify-content: flex-start; }
#page-dashboard .today-card .today-card-body { display: flex; flex-direction: column; justify-content: center; }
#page-dashboard .today-card .today-title {
  font-size: 16px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
#page-dashboard .today-card .today-sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#page-dashboard .today-card-foot { margin-top: auto; flex-wrap: wrap; }

/* Shared-board signals on a Today item (2026-08-07): whose lead it is, and
   whether a colleague already ticked an earlier version of the same task. */
#page-dashboard .today-flag {
  font-size: var(--t-micro); font-weight: var(--w-label); padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--mid-surface-3); color: var(--mid-muted);
}
#page-dashboard .today-flag.is-inline { background: none; padding: 0; }
#page-dashboard .today-note {
  margin-top: 6px; font-size: var(--t-micro); line-height: 1.4; color: var(--mid-muted);
}
#page-dashboard .today-note.is-inline { margin: 0; display: inline; }

/* ═══ Today: one card per CATEGORY (2026-08-07) ══════════════════════════════
   The count is the headline; the tasks live inside as rows, each keeping its own
   action and tick. Grouping buys a stable board — the same kind of work is always
   in the same place — without putting anything further from the owner's thumb. */
#page-dashboard .today-card.today-group { gap: 12px; }
#page-dashboard .today-group .today-card-body {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; justify-content: flex-start;
}
#page-dashboard .today-groupnum {
  font-size: var(--t-num); font-weight: var(--w-num); line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mid-text);
}
#page-dashboard .today-group.is-top .today-groupnum { color: #1a2000; }
/* The rows scroll inside the square when a category has a long tail. */
#page-dashboard .today-grouplist {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* No rules between rows — the gap separates them, and a card this small reads
   quieter without four hairlines cutting across it. */
#page-dashboard .today-grow { display: flex; align-items: center; gap: 6px; }
#page-dashboard .today-grow-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 3px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: var(--t-sm); color: var(--mid-text-2);
}
#page-dashboard .today-grow-main:hover { color: var(--mid-text); }
#page-dashboard .today-group.is-top .today-grow-main { color: rgba(26, 32, 0, .78); }
#page-dashboard .today-group.is-top .today-grow-main:hover { color: #1a2000; }
#page-dashboard .today-grow-who {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Icon-only tick inside a row — the label would crowd a square card. */
#page-dashboard .today-done.is-icon {
  width: 30px; height: 30px; min-height: 0; padding: 0; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
}
#page-dashboard .today-group.is-top .today-done.is-icon { border-color: rgba(26, 32, 0, .3); color: #1a2000; }
/* A row is a tap target, so it must clear 44px wherever fingers are used. */
@media (pointer: coarse), (max-width: 560px) {
  #page-dashboard .today-grow-main { min-height: 44px; }
  #page-dashboard .today-done.is-icon { width: 40px; height: 40px; }
}
/* Ownership on a narrow row: an icon, not a chip — the chip ate the name. */
#page-dashboard .today-lock { font-size: 14px; flex: 0 0 auto; color: var(--mid-muted); }
#page-dashboard .today-group.is-top .today-lock { color: rgba(26, 32, 0, .5); }

/* The big card has room to breathe: a larger count and more generous rows. */
@media (min-width: 961px) {
  #page-dashboard .today-cards > .today-card:first-child { padding: 24px 26px; gap: 16px; }
  #page-dashboard .today-cards > .today-card:first-child .today-groupnum { font-size: 46px; }
  #page-dashboard .today-cards > .today-card:first-child .today-grouplist { gap: 12px; }
  #page-dashboard .today-cards > .today-card:first-child .today-grow-main { font-size: var(--t-body); padding: 5px 0; }
  #page-dashboard .today-cards > .today-card:first-child .today-kind { font-size: var(--t-sm); }
}

/* ═══ Section seam (2026-08-07) ═══════════════════════════════════════════════
   The landing band and Today were separated only by a few percent of tone
   (dark: #171c20 on #0b0b0b; light: white on #f4f4f2) — a difference the big
   cards sitting on both sides wash out entirely. Colour alone can't carry it,
   so the hero now ENDS like a physical panel: a rounded bottom edge, a shadow
   cast onto the canvas below, and a wider gap before Today starts. That reads
   as "one surface stops, another begins" even when the two tones are close. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-hero {
    border-radius: 0 0 36px 36px;
    /* Light needs far less: on a near-white canvas a .40 shadow reads as a grey
       smear. Dark keeps its weight (below) — there the shadow IS the seam. */
    box-shadow: 0 22px 38px -34px rgba(17, 17, 17, .18);
  }
  html[data-theme="dark"] body #page-dashboard .dash-hero {
    box-shadow: 0 26px 48px -28px rgba(0, 0, 0, .85);
  }
  /* Air after the seam, so Today starts on clean canvas rather than butting up
     against the panel's shadow. */
  #page-dashboard .dash-today-band { padding-top: 72px; }
}
/* A touch more tint in the panel itself — enough to be felt, not seen as colour. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-hero {
  background:
    radial-gradient(95% 150% at 8% 0%, color-mix(in srgb, #d9ff5e 26%, transparent), transparent 55%),
    radial-gradient(85% 130% at 96% 100%, color-mix(in srgb, #ffc176 16%, transparent), transparent 60%),
    #fbfbf7;
}
html[data-theme="dark"] body #page-dashboard .dash-hero {
  background:
    radial-gradient(95% 150% at 8% 0%, color-mix(in srgb, #d9ff5e 12%, transparent), transparent 55%),
    radial-gradient(85% 130% at 96% 100%, color-mix(in srgb, #ffc176 7%, transparent), transparent 60%),
    #1a2025;
}
/* The grabber tab is cut from the canvas, so it only reads when it contrasts
   with the panel — which it now does in both themes. */
#page-dashboard .hero-sep { filter: drop-shadow(0 -8px 14px rgba(17, 17, 17, .16)); }
html[data-theme="dark"] #page-dashboard .hero-sep { filter: drop-shadow(0 -8px 16px rgba(0, 0, 0, .7)); }

/* ═══ NO DECORATIVE ICONS (owner rule, 2026-08-08) ═══════════════════════════
   Leading icons on cards, rows and menu items are gone app-wide. The text label
   is the information; the icon was upholstery. Done in CSS (not by editing ~30
   render templates) so it is one reversible block and automatically covers any
   template that still emits an icon.
   DELIBERATELY KEPT — anything that IS the control, not a label's ornament:
   action circles (px-open, today-done, dismiss, send), the search glass, the
   autopilot gear, carets/chevrons, drag handles, checkbox glyphs, avatars, and
   the mobile dock + mobile setup tabs (there the icon carries the target). */
/* Cards & rows */
#page-dashboard .px-card-label > .material-symbols-outlined,
#page-dashboard .today-ico,
#page-dashboard .today-head > .material-symbols-outlined,
#page-dashboard .today-gia > .material-symbols-outlined,
#page-dashboard .today-ledger-toggle > .material-symbols-outlined:first-child,
#page-dashboard .dash-health-line .material-symbols-outlined,
.lib-card-title > .material-symbols-outlined,
.lib-evt-ico,
.qgm-svc-name > .material-symbols-outlined,
.qd-stat-ic,
.qd-prep-row > .material-symbols-outlined,
.cal-modal-row > .material-symbols-outlined,
.kb-age > .material-symbols-outlined,
.kb-event > .material-symbols-outlined,
.ctc-last > .material-symbols-outlined,
.deal-suggestion-head > .material-symbols-outlined,
.proj-view-ico,
.nx-kpi-icon,
.dlp-tl-dot > .material-symbols-outlined,
.dlp-step-dot > .material-symbols-outlined {
  display: none !important;
}
/* Menu items */
.create-menu-item > .material-symbols-outlined,
.profile-menu-item > .material-symbols-outlined {
  display: none !important;
}
/* Setup tabs: desktop only — the mobile layout is icon-over-label and the icon
   is the tap target's face there. */
@media (min-width: 961px) {
  .setup-tab > .material-symbols-outlined { display: none !important; }
}

/* ═══ ONE PILL, NOT TWO (2026-08-08) ═════════════════════════════════════════
   The top-bar search is two ELEMENTS — a shell (icon + field, and the only thing
   that should look like anything) and the <input> you type into. Successive
   skins each gave the input its own surface, so a second pill kept appearing
   inside the first; I'd been exempting those rules one at a time, which hid the
   boundary without removing the reason it existed.

   This is that reason removed: the field renders NOTHING, in every state. ID
   specificity + !important because the rules it overrides are themselves
   !important, and because `appearance` must beat the UA stylesheet.

   `appearance: none` matters most of all — <input type="search"> carries a NATIVE
   rounded field in Safari/WebKit that no amount of CSS background/border resets
   will remove. That is almost certainly the boundary still visible on Safari
   after the colour fixes, and it would never have shown in a Chromium preview. */
#globalSearch,
#globalSearch:focus,
#globalSearch:focus-visible,
#globalSearch:hover {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}
/* appearance:none also strips WebKit's clear (⊗) button — put it back, since it
   is a real affordance the owner has used. */
#globalSearch::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  appearance: auto;
  cursor: pointer;
}

/* ═══ BIG NUMBERS (2026-08-08, from the owner's references) ══════════════════
   In the reference the numeral IS the card — huge, light-weight, tight tracking,
   with the label small beside it. Ours were 30–34px: a heading, not a headline.
   Sized in vw so they scale with the card rather than fighting it. */
@media (min-width: 961px) {
  /* KPI cards in the landing band. The size is bounded by the CARD, not the
     viewport, and by how many characters the value actually has — "₹13,10,000"
     is eleven glyphs and blew straight out of the card at a fixed 58px.
     100cqi = the card's own width; ÷ character count × 1.62 converts "space per
     character" into a font-size (a digit is ~0.62em at this weight). */
  #page-dashboard .dash-kpis .px-card { container-type: inline-size; }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-kpis .px-card-value {
    font-size: min(58px, 3.1vw + 12px, calc(84cqi / var(--num-ch, 4) * 1.62));
    font-weight: 300; letter-spacing: -.035em; line-height: .95;
    white-space: nowrap;
  }
  /* The lines variant (Leads / Active leads) keeps its table — but the FIRST
     row is the headline figure, so it gets the same treatment at a smaller step. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-kpis .px-line.is-strong dd {
    font-size: clamp(26px, 1.9vw, 36px); font-weight: 300; letter-spacing: -.03em; line-height: 1;
  }
  /* Today category cards: the count is the headline. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-groupnum {
    font-size: clamp(34px, 2.7vw, 50px);
    font-weight: 300; letter-spacing: -.035em; line-height: .95;
  }
  /* …and the 2×2 hero card carries the biggest number on the screen. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card:first-child .today-groupnum {
    font-size: clamp(56px, 5vw, 92px);
  }
}

/* ═══ The Today hero card in glass, matching the Money owed card ═════════════
   Note: unlike the KPI hero (which floats on the landing gradient) this one sits
   on a FLAT canvas, so a backdrop blur alone has nothing to refract. The sheen
   layer below is what makes it read as glass rather than as flat tint. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card.is-top {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 42%),
    color-mix(in srgb, #d9ff5e 58%, rgba(255, 255, 255, .18));
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 2px rgba(17, 17, 17, .04),
    0 14px 34px -16px rgba(17, 17, 17, .18);
}
html[data-theme="dark"] body #page-dashboard .today-cards > .today-card.is-top {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, #d9ff5e 74%, transparent);
  border-color: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* Week stepper in the greeting line — the sub-line already says "the studio's
   week", so the control that changes which week sits with those words. */
#dashHero .dash-weeknav {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 10px;
  vertical-align: baseline;
}
#dashHero .dash-weeknav .dash-mnav {
  width: 26px; height: 26px; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--mid-muted); font-size: 16px; line-height: 1;
}
#dashHero .dash-weeknav .dash-mnav:hover { background: var(--mid-surface-3); color: var(--mid-text); }
#dashHero .dash-weeknav .dash-mlabel {
  min-width: 76px; text-align: center; font-size: var(--t-sm);
  font-weight: var(--w-label); color: var(--mid-text-2);
}
@media (pointer: coarse) { #dashHero .dash-weeknav .dash-mnav { width: 40px; height: 40px; } }

/* No arrow buttons on cards (owner 2026-08-08) — the whole card is the link, so
   the arrow was a second affordance for the same action. What replaces it as the
   "this is clickable" signal: a pointer cursor, a lift on hover, and a real
   focus ring for keyboard users (the card is role="button" now that the only
   <button> inside it is gone). */
#page-dashboard .px-card.is-openable { cursor: pointer; }
#page-dashboard .px-card.is-openable:hover {
  transform: translateY(-2px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#page-dashboard .px-card.is-openable:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(120, 140, 30, .35);
}
@media (prefers-reduced-motion: reduce) {
  #page-dashboard .px-card.is-openable:hover { transform: none; }
}
/* The label is the card's name — make it read as the target. */
#page-dashboard .px-card.is-openable:hover .px-card-label { color: var(--mid-text); }

/* ═══ Lead sources as a bar graph (2026-08-08) ═══════════════════════════════ */
#page-dashboard .src-bars { display: flex; flex-direction: column; gap: 22px; margin-top: 4px; }
#page-dashboard .src-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
#page-dashboard .src-bar-name { font-size: var(--t-body); font-weight: var(--w-label); color: var(--mid-text); }
#page-dashboard .src-bar-name .src-acq { margin-left: 8px; font-size: var(--t-micro); font-weight: var(--w-reg); color: var(--mid-muted); text-transform: uppercase; letter-spacing: .04em; }
#page-dashboard .src-bar-n { font-size: var(--t-sm); color: var(--mid-muted); white-space: nowrap; }
#page-dashboard .src-bar-n b { color: var(--mid-text); font-weight: var(--w-num); }
/* The track is the busiest source, so bar lengths compare directly. */
#page-dashboard .src-bar {
  display: flex; height: 14px; border-radius: 9999px; overflow: hidden;
  background: color-mix(in srgb, var(--mid-line) 45%, transparent);
}
#page-dashboard .src-seg { display: block; height: 100%; }
#page-dashboard .src-seg.is-real { background: #d9ff5e; }
#page-dashboard .src-seg.is-junk { background: var(--mid-muted); opacity: .55; }
html[data-theme="dark"] #page-dashboard .src-seg.is-real { background: #d9ff5e; }
#page-dashboard .src-bar-foot {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px;
  font-size: var(--t-sm); color: var(--mid-muted);
}
#page-dashboard .src-legend { display: flex; gap: 16px; margin-top: 4px; font-size: var(--t-micro); color: var(--mid-muted); }
#page-dashboard .src-legend span { display: inline-flex; align-items: center; gap: 6px; }
#page-dashboard .src-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#page-dashboard .src-key.is-real { background: #d9ff5e; }
#page-dashboard .src-key.is-junk { background: var(--mid-muted); opacity: .55; }

/* ═══ Row-1 cards: same shape and padding as the Today cards ═════════════════
   They were ragged — different heights, different padding, and a stray top
   margin on one of them. Square on desktop like Today's; the inner card fills
   the cell so both sides end level whatever their content. */
@media (min-width: 961px) {
  /* SQUARE lives on the CARD, not the grid cell. Safari resolves aspect-ratio
     on a stretched grid item against the wrong axis and shrinks the card
     (small squares, left-packed, huge gaps — owner's 2026-08-08 screenshot);
     a block child with width from its cell is unambiguous in every engine.
     Row 1 (Lead sources | Leads) and row 3 (Shoots | Data | Deliverables)
     both use it: squares three- or two-across, spanning the full grid, so
     row 3's outer edges match Financial overview / Money forecast above. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > :is(#sourcesCell, #salesCell, #shootsCell, #datapendCell, #delivCell) > * {
    /* The CARD CLIPS; a designated list inside it scrolls (owner 2026-08-15: "the portion
       from real deal junk etc needs to be in fixed position and the lead sources scroll.
       right now the entire card scrolls"). It was `overflow-y: auto`, so on all five the
       heading, pills and totals scrolled away with the rows they are read against — and
       `overscroll-behavior: contain` here was a second place the page scroll got eaten.
       Each has its own scroller: .src-scroll, .hotlead-list, .shoot-list, .datapend-list,
       .deliv-list. */
    aspect-ratio: 1 / 1; width: 100%; height: auto;
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
}
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards .sg-card {
  padding: 18px 20px;          /* matches .today-card */
  border-radius: var(--r-card);
}

/* ═══ Band cards: large titles, no rules, footer pinned (2026-08-08) ═════════ */
/* Titles read as headings, matching the display treatment used everywhere else. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards .sg-card-head h3 {
  font-size: clamp(24px, 1.9vw, 32px);
  font-weight: var(--w-reg); letter-spacing: -.02em; line-height: 1.1;
}
#page-dashboard .dash-cards .sg-card-head { align-items: baseline; margin-bottom: 16px; }

/* No separator rules anywhere in these cards — space does the separating. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .lead-facts {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 18px;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard .hotlead-row + .hotlead-row {
  border-top: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard .hotlead-row { border: 0; }
#page-dashboard #likelyCard .hotlead-row { padding: 10px 0; }

/* The legend and the spend hint belong at the FOOT of the card, not floating
   directly under the last bar with dead space beneath them. */
#page-dashboard #sourcesCell .sg-card { display: flex; flex-direction: column; }
#page-dashboard #sourcesBody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* The card itself must NOT scroll (owner 2026-08-15) — if it does, the period pills and
   the four totals scroll away with the bars, and those are the controls you read the
   bars against. The card clips; one child inside it moves. */
#page-dashboard #sourcesCell > .sg-card { overflow: hidden; }
/* Leads has a wrapper between the cell and the card (#salesBandBody), so the cell rule
   above lands on the WRAPPER. Without passing the height down, the card overflowed a
   clipping wrapper and its rows became unreachable — the list has to be the thing that
   runs out of room, never the card. */
#page-dashboard #salesCell > #salesBandBody { min-height: 0; height: 100%; }
#page-dashboard #salesBandBody > .sg-card {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
#page-dashboard :is(.src-head, #sourcesBody .lead-facts, .src-foot) { flex: 0 0 auto; }
#page-dashboard .src-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: auto;
  scrollbar-width: thin; scrollbar-color: var(--mid-line) transparent;
}
#page-dashboard .src-scroll::-webkit-scrollbar { width: 8px; }
#page-dashboard .src-scroll::-webkit-scrollbar-thumb {
  background: var(--mid-line); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box;
}
#page-dashboard .src-bars { flex: 1; }
#page-dashboard .src-foot { padding-top: 18px; }
#page-dashboard .src-foot .src-legend { margin: 0 0 8px; }
#page-dashboard .src-foot .src-note { margin: 0; }

/* ═══ Finance row matches the Leads row (2026-08-08) ═════════════════════════
   Financial overview and Money forecast were STACKED inside one full-width band, then
   sat side by side inside it. Neither is true now (owner 2026-08-15): the overview is a
   THIRD OF THE TOP ROW beside Lead sources and Leads, and the forecast has a full-width
   row of its own. So #financeBody holds exactly one card and must not divide itself —
   the two-column grid left the overview at half width with its quadrants collapsed on
   top of each other. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #finBand > #financeBody {
    /* padding-top:6px dated from the stacked band and sat the card 6px below its two
       row-mates. Nothing separates a lone card from the top of its own cell. */
    /* !important because `#finBand .fin-body` sets `padding: 6px 0 12px !important`
       for the standalone Finance page; on the dashboard the card is the cell. */
    display: block; height: 100%; padding: 0 !important;
  }
  /* Square, like every other card on that row. aspect-ratio goes on the CARD, never on
     the grid cell — Safari does not honour it there (learned the hard way, 2026-08). */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards > #finBand > #financeBody > .sg-card {
    aspect-ratio: 1 / 1; width: 100%; min-height: 0; overflow-y: auto; /* Safari */
    display: flex; flex-direction: column; margin: 0;
  }
}
/* The 12-month chart sat pinned to the bottom of a tall column; in a square card
   it reads better directly under its own heading block. */
#page-dashboard .dash-cards > #finBand .fin-f12-chart { margin-top: 18px; }

/* ═══ Money forecast: twelve UPRIGHT bars across a full-width row (2026-08-15) ══
   They were laid on their side in Aug because twelve columns used a fifth of a
   square card. The card owns a full row now, so a year reads left to right and the
   overheads reference is a horizontal line the bars are measured against. */
#page-dashboard .fin-f12-chart.is-cols {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px; align-items: end; height: 260px; margin-top: 18px; padding: 0;
}
/* The overheads reference has to be measured against the SAME band the bars grow in,
   not the whole card. The bars live in the middle grid row, between a value label and a
   month label — so the rows are pinned (16 / 1fr / 18, gap 6) and the line is offset by
   the label below it plus its share of the plot band. Percent-of-chart put it 20px low. */
#page-dashboard .fin-f12-chart.is-cols .f12-ohline {
  position: absolute; left: 0; right: 0; height: 0; top: auto;
  bottom: calc(24px + (100% - 46px) * var(--oh, 0));
  border-top: 1px dashed color-mix(in srgb, var(--mid-danger, #ff8a80) 70%, transparent);
  border-left: 0;
}
#page-dashboard .f12-col {
  display: grid; grid-template-rows: 16px 1fr 18px; gap: 6px; height: 100%;
  align-items: end; justify-items: center;
  /* No VERTICAL padding: it shortens the track, and the overheads line above is
     positioned from the chart's own height. 8px of padding put the line 2px out. */
  padding: 0 2px; border: 0; background: none; cursor: pointer; font: inherit;
  border-radius: 10px;
}
#page-dashboard .f12-col:hover, #page-dashboard .f12-col.is-picked { background: var(--mid-surface-3); }
/* The bar itself: a full-height column the two fills grow up inside. */
#page-dashboard .f12-col .f12-track {
  position: relative; width: 100%; max-width: 46px; height: 100%; min-height: 4px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--mid-line) 40%, transparent);
}
#page-dashboard .f12-col .f12-fill { display: block; width: 100%; height: auto; }
#page-dashboard .f12-col .f12-v {
  font-size: var(--t-micro); color: var(--mid-text-2); text-align: center;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#page-dashboard .f12-col .f12-m { font-size: var(--t-sm); color: var(--mid-muted); white-space: nowrap; }
#page-dashboard .f12-col.is-gap .f12-m { color: var(--mid-danger, #ff8a80); }
/* Below ~1100px twelve columns stop being legible — the labels collide. Scroll the
   chart sideways at a readable column width rather than squeezing them. */
@media (max-width: 1100px) {
  #page-dashboard .fin-f12-chart.is-cols {
    grid-template-columns: repeat(12, 56px); overflow-x: auto; height: 220px;
  }
}

#page-dashboard .fin-f12-chart.is-rows {
  position: relative; display: flex; flex-direction: column; gap: 6px; align-items: stretch; justify-content: flex-start;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 0 0; margin-top: 14px; border: 0;
}
#page-dashboard .f12-ohline {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--mid-danger, #ff8a80) 70%, transparent);
  pointer-events: none;
}
#page-dashboard .f12-row {
  flex: 1 1 0; min-height: 34px;
  display: grid; grid-template-columns: 44px 1fr 76px; align-items: center; gap: 12px;
  padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit;
  border-radius: 8px;
}
#page-dashboard .f12-row:hover { background: var(--mid-surface-3); }
#page-dashboard .f12-row.is-picked { background: var(--mid-surface-3); }
#page-dashboard .f12-m { font-size: var(--t-sm); color: var(--mid-muted); white-space: nowrap; }
#page-dashboard .f12-row.is-gap .f12-m { color: var(--mid-danger, #ff8a80); }
#page-dashboard .f12-track {
  position: relative; display: flex; height: 16px; border-radius: 9999px; overflow: hidden;
  background: color-mix(in srgb, var(--mid-line) 40%, transparent);
}
#page-dashboard .f12-fill { display: block; height: 100%; }
#page-dashboard .f12-fill.is-solid { background: #d9ff5e; }
#page-dashboard .f12-fill.is-soft { background: var(--mid-muted); opacity: .45; }
#page-dashboard .f12-v {
  font-size: var(--t-sm); color: var(--mid-text-2); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ═══ Financial overview: four measures, four quadrants, whole card ══════════ */
#page-dashboard .money-quad {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 14px;
}
#page-dashboard .money-quad .money-tile {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 20px; border-radius: var(--r-tile); margin: 0; min-width: 0;
  align-self: stretch; height: auto;
  background: var(--mid-surface-3);
}
#page-dashboard .money-quad .money-tile-rev { background: #d9ff5e; }
#page-dashboard .money-quad .money-tile-rev :is(.money-lbl, .money-val) { color: #1a2000; }
#page-dashboard .money-quad .money-lbl {
  font-size: var(--t-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--mid-muted);
}
/* One big number per quadrant — the card's job is four figures, so they are the card. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .money-quad .money-val {
  font-size: clamp(22px, 2vw, 34px); font-weight: 300; letter-spacing: -.03em; line-height: 1;
}
#page-dashboard .money-quad .money-sub { font-size: var(--t-micro); }
#page-dashboard .money-quad .money-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ═══ Row 3 (Shoots / Data pipeline / Deliverables) matches rows 1–2 ══════════
   Square cell, card fills it, and the LIST scrolls inside rather than the whole
   card — the heading and the big number stay put while you scan the rows. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards
    > :is(#shootsCell, #datapendCell, #delivCell) > * { overflow: hidden; }
  /* salesCell wraps its card in #salesBandBody — the ratio sits on the wrapper,
     so the card inside just fills it. */
  #page-dashboard #salesBandBody > .sg-card { height: 100%; }
  #page-dashboard .dash-cards > :is(#shootsCell, #datapendCell, #delivCell) > .sg-card {
    display: flex; flex-direction: column;
  }
  #page-dashboard :is(.shoot-list, .datapend-list, .deliv-list) {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  }
}
/* The deliverables card was the odd one out — a "wide" variant with its own
   width. In a three-across row it is the same card as its neighbours. */
#page-dashboard .dash-cards .sg-card.dash-card-wide { width: auto; max-width: none; }

/* Deliverables carries a project filter AND a week stepper; at a third of the
   row that pushed its title onto two lines while its neighbours sat on one. */
#page-dashboard .dash-cards > #delivCell .sg-card-head { gap: 12px; }
#page-dashboard .dash-cards > #delivCell .sg-card-head h3 { white-space: nowrap; }
/* The project filter sits on a second line, but it must not PUSH that line —
   otherwise this card's big number starts lower than the two beside it. It is
   lifted out of flow so the head stays one row tall and the count still lines
   up with Shoots and Data pipeline. */
#page-dashboard .dash-cards > #delivCell .sg-card-head { position: relative; }
#page-dashboard .dash-cards > #delivCell .dash-headtools { min-width: 0; }
@media (min-width: 961px) {
  #page-dashboard .dash-cards > #delivCell .dash-filter-sel {
    position: absolute; top: 100%; right: 0; margin-top: 10px; z-index: 1;
  }
}
@media (max-width: 960px) {
  #page-dashboard .dash-cards > #delivCell .dash-headtools { flex-wrap: wrap; justify-content: flex-end; }
}
#page-dashboard .dash-cards > #delivCell .dash-filter-sel { max-width: 130px; }

/* ═══ Row 3 rows are TEXT, not cards (owner 2026-08-08) ══════════════════════
   Shoots / Data pipeline / Deliverables were drawing a filled, bordered tile per
   row, so a card of rows read as a card of cards next to Leads and Lead sources,
   which are plain lists. State that used to be carried by a tinted background is
   carried by the text instead — accent for today, muted for past, danger for
   overdue — so nothing is lost by removing the box. */
html:is([data-theme], :not([data-theme])) body #page-dashboard
  :is(.shoot-row, .datapend-row, .deliv-row) {
  background: none; border: 0; border-radius: 0; padding-left: 0; padding-right: 0;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard
  :is(.shoot-row, .datapend-row, .deliv-row):hover {
  background: none; border: 0;
}
/* Hover still has to read as "this is clickable" — the name brightens. */
#page-dashboard .shoot-row:hover .shoot-name,
#page-dashboard .datapend-row:hover .datapend-what,
#page-dashboard .deliv-row:hover .deliv-name { color: var(--mid-accent-ink); }
#page-dashboard .shoot-row.is-soon .shoot-date b { color: var(--mid-accent-ink); }
#page-dashboard .deliv-row.is-overdue { border-color: transparent; }
/* The group heading in Data pipeline is the only divider these lists need. */
#page-dashboard .datapend-group + .datapend-group { margin-top: 14px; }

/* The project filter is a control like the week stepper beside it, so it wears
   the same pill rather than a squared-off native select box. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-filter-sel {
  border-radius: 9999px; padding: 7px 32px 7px 14px;
  border: 1px solid var(--mid-line); color: var(--mid-text-2);
  font-size: var(--t-sm); appearance: none; -webkit-appearance: none;
  background-color: var(--mid-surface-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2387929a' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
#page-dashboard .dash-filter-sel:hover { background-color: var(--mid-surface-3); color: var(--mid-text); }

/* ═══ BOTTOM NAV, one authoritative block (owner 2026-08-08) ═════════════════
   The pill's rules were smeared across seven SAGE-mobile patch layers; labels
   squeezed the 46px icon disc out of its 52px row, so the lime selector never
   sat on the glyph. This block owns the pill for every phone/tablet width:
   SAME items as the desktop menu minus Setup — Dashboard · Sales · Projects ·
   Calendar · Chat. Contacts and Quotes live inside Sales now, so they left the
   menu on every surface; the More sheet went with them. */
@media (max-width: 960px) {
  .app-sidebar .nav-item[data-page="projects"] { display: flex; }
  .app-sidebar :is(
    .nav-item[data-page="contacts"], .nav-item[data-page="quotes"],
    .nav-item[data-page="setup"], .nav-item[data-page="tickets"],
    .nav-item[data-page="tasks"], .nav-item[data-page="finance"],
    .nav-more-btn) { display: none !important; }
  .nav-more-pop { display: none !important; }

  .app-sidebar .nav-list { display: grid; grid-template-columns: repeat(5, 1fr); }

  /* Icons only — the glyph is the label at this size, and dropping the text is
     what lets the disc centre. */
  .app-sidebar .nav-item {
    font-size: 0; gap: 0; padding: 0; height: 100%; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
  }
  /* The selector IS the icon box: one 44px disc, dead centre of the cell. */
  .app-sidebar .nav-item .material-symbols-outlined {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin: 0; border-radius: 50%;
    font-size: 21px; color: var(--mid-text-2);
  }
  html:is([data-theme], :not([data-theme])) .app-sidebar .nav-item.active {
    background: transparent !important;
  }
  html:is([data-theme], :not([data-theme])) .app-sidebar .nav-item.active .material-symbols-outlined {
    background: #d9ff5e; color: #2a3325; font-variation-settings: 'FILL' 1;
  }

  /* Pill chrome: midnight glass in both themes (the light-glass default read
     as a foreign object on the dark app). */
  body.dash-active .app-sidebar {
    background: rgba(27, 32, 36, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 38px -12px rgba(0, 0, 0, 0.5);
  }
  body.dash-active .app-sidebar .nav-item .material-symbols-outlined { color: #b9c2ab; }
  body.dash-active .app-sidebar .nav-item.active .material-symbols-outlined { color: #2a3325; }
}

/* ═══ COMPACT DESKTOP 961–1280 (iPad portrait is 1024) — owner 2026-08-08 ═════
   The desktop bar was sized for 1400px+: wordmark + roomy nav pill + a fixed
   340px search + four round buttons never fit in 1024, so the search sat UNDER
   the fixed nav. Everything on the bar shrinks together instead of one piece
   silently losing. Card text steps down one notch at this width too. */
@media (min-width: 961px) and (max-width: 1280px) {
  body:is(.dash-active, :not(.dash-active)) .app-sidebar { gap: 14px; padding-left: 14px; }
  .brand-block::before { width: 64px; height: 24px; }
  body:is(.dash-active, :not(.dash-active)) .nav-item { padding: 0 11px; font-size: 13px; }
  /* Search: flexible, never under the nav. The 340px fixed width came from the
     min-961 rule below it in the file — this block is later, so it wins. */
  body:is(.dash-active, :not(.dash-active)) .topbar .search-shell {
    flex: 0 1 190px; width: 190px; min-width: 110px; max-width: 190px;
  }
  .topbar { gap: 10px; }
  .topbar-actions { gap: 6px; }
  /* The topbar must never lay content under the fixed nav: reserve its width
     (consumed by the gutter rule's max()). */
  :root { --bar-nav-clearance: 610px; }
  /* Upgrade keeps its icon, drops its word — the promo text is what didn't fit. */
  .upgrade-chip { padding: 0 12px; font-size: 0; gap: 0; }
  .upgrade-chip .material-symbols-outlined { font-size: 18px; }

  /* Card text one notch down, so titles/counts fit their narrower cells. */
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards .sg-card-head h3 {
    font-size: clamp(19px, 2.2vw, 24px);
  }
  #page-dashboard .sg-bignum { font-size: clamp(30px, 3.4vw, 40px); }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .money-quad .money-val {
    font-size: clamp(18px, 1.9vw, 26px);
  }
  html:is([data-theme], :not([data-theme])) body #dashHero .sg-hello { font-size: clamp(26px, 2.4vw, 32px); }
}

/* Today cards: the header row must never stack its chip on the label — the
   label gives way (ellipsis) and the chip keeps its size. Applies at every
   width; the overlap showed at 1024 where the small cards get narrow. */
#page-dashboard .today-card-top { flex-wrap: nowrap; min-width: 0; }
#page-dashboard .today-card .today-kind { flex: 0 1 auto; }
#page-dashboard .today-age { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1280px) {
  #page-dashboard .today-groupnum { font-size: clamp(26px, 3vw, 38px); }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .today-cards > .today-card:first-child .today-groupnum {
    font-size: clamp(34px, 4vw, 52px);
  }
}

/* Phones: same one-notch-down for the card text. */
@media (max-width: 960px) {
  html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards .sg-card-head h3 {
    font-size: 20px;
  }
  #page-dashboard .sg-bignum { font-size: 30px; }
  html:is([data-theme], :not([data-theme])) body #page-dashboard .money-quad .money-val {
    font-size: clamp(18px, 5.5vw, 26px);
  }
}

/* Row-3 titles: one size smaller than the band cards above, all three the same.
   "Deliverables" at the shared display size collided with its week stepper at a
   third of the row; the trio reads as one set, so they shrink as one. */
html:is([data-theme], :not([data-theme])) body #page-dashboard .dash-cards
  > :is(#shootsCell, #datapendCell, #delivCell) .sg-card-head h3 {
  font-size: clamp(19px, 1.35vw, 24px);
}

/* ═══ Contact cards: five square tiles per row (owner 2026-08-08) ════════════
   Ratio on the CARD, never the grid cell — Safari (see finance cards). The
   content is three short rows, so the middle breathes and the foot pins to
   the floor. Pipeline (kanban) cards stay content-height: they are stacked
   rows inside a column, and squares there would just be padding. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body .ct-card {
    /* width MUST be explicit: without it Safari derives width from content and
       the card shrinks inside its cell (same WebKit trap as the finance cards). */
    aspect-ratio: 1 / 1; width: 100%; height: auto;
    display: flex; flex-direction: column;
  }
  .ct-card .ctc-deal { margin-top: auto; }
}
/* The WhatsApp action is text now (icons left every card). */

/* Quote state is a bare dot — colour carries sent/missing, no glyph. */
.kb-quote { width: 9px; height: 9px; min-width: 9px; padding: 0; border-radius: 50%; }
.kb-quote.is-sent { background: #7a8d23; }
.kb-quote.is-missing { background: #b3422f; }
html:not([data-theme]) .kb-quote.is-sent { background: #6ee7a0; }
html:not([data-theme]) .kb-quote.is-missing { background: #ff7a70; }

/* ═══ LEADS + PROJECTS BOARDS wear the dashboard language (owner 2026-08-08) ════════════
   Columns are dashboard cards — large title, one big count, muted value line —
   and the deals inside are plain text rows, exactly like Shoots/Data/
   Deliverables. Scoped to #page-leads: the Projects board keeps its own skin.
   Drag-and-drop untouched: same elements, same classes, just unboxed. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col:not([data-stage="Hot lead"]) {
  background: var(--kb-col); border: 0;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col {
  padding: 22px 20px;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-title {
  font-size: clamp(19px, 1.35vw, 24px); font-weight: var(--w-reg); letter-spacing: -.02em;
}
:is(#page-leads, #page-projects) .kanban-col-num {
  font-size: var(--t-num); font-weight: var(--w-num); letter-spacing: -.02em;
  line-height: 1; margin-top: 10px; color: var(--mid-text);
  font-variant-numeric: tabular-nums;
}
:is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-col-num { color: inherit; }
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-meta {
  color: var(--mid-muted); font-size: var(--t-sm); margin-top: 4px;
}
/* Deal cards → text rows: no box, no border, space divides. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card {
  background: none; border: 0; border-radius: 0; padding: 11px 0; box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card:hover {
  background: none; border: 0;
}
:is(#page-leads, #page-projects) .kanban-card:hover .kanban-card-title { color: var(--mid-accent-ink); }
:is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-card:hover .kanban-card-title { text-decoration: underline; }
/* Source/age lose their pill wells — plain muted text like dashboard sub-lines. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) :is(.kb-source, .kb-age) {
  background: none; border: 0; padding: 0;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-empty {
  background: none; border: 0;
}

/* Header stacks like a dashboard card: title / big count / value line. The old
   single-row header flex and the stage colour dot go — the dashboard's cards
   carry no dots, the title alone names the stage. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-header {
  display: block; padding: 0 0 14px; border-bottom: 0;
}
:is(#page-leads, #page-projects) .kanban-col-title::before { content: none !important; display: none !important; }
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-num {
  display: block; font-size: 40px; font-weight: var(--w-num); margin-top: 12px;
}

/* No box around the header, and money in the dashboard's quiet tabular style —
   not lime monospace. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-header {
  background: none; border: 0; box-shadow: none; border-radius: 0; margin: 0;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card-amount {
  font-family: inherit; font-variant-numeric: tabular-nums;
  color: var(--mid-text-2); font-weight: var(--w-label);
}

/* ═══ LEADS BOARD round 2 (owner 2026-08-08): tiles, not bare text ═══════════
   The unboxed rows read as one block of prose and nothing looked draggable.
   The dashboard already has the right pattern for interactive pieces — the
   TILE (finance quadrants, Today items): one step lighter than the card,
   rounded, no hard border. Leads wear that. Headers get a tinted strip so a
   column can be scanned by shape, and the count sits ON the title line. */
/* (Round-2 flexible height reverted same day: the board keeps its fixed
   viewport height and each stage scrolls INSIDE its column — owner call.) */
/* Header strip: title left, count right on the SAME line, value line under. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-header {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px;
  background: var(--kb-tile); border-radius: var(--r-tile);
  padding: 14px 16px; margin-bottom: 12px;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-num {
  grid-column: 2; grid-row: 1; margin: 0; font-size: 26px;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-meta {
  grid-column: 1 / -1; margin-top: 2px;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-title {
  font-size: clamp(18px, 1.2vw, 21px);
}
/* Deal TILES: the Today-item treatment — a surface, not a border. */
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card {
  background: var(--kb-card); border: 0; border-radius: var(--r-tile);
  padding: 18px 20px;              /* same tile padding as the Today cards */
  cursor: grab;
}
html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-card:hover {
  background: var(--kb-tile);
}
:is(#page-leads, #page-projects) .kanban-card:active { cursor: grabbing; }
:is(#page-leads, #page-projects) .kanban-col-body { display: flex; flex-direction: column; gap: 10px; }
/* Hot column: its tint stays on the column; tiles inside go one step deeper so
   they still read as tiles against it. */
:is(#page-leads, #page-projects) .kanban-col[data-stage="Hot lead"] .kanban-card { background: color-mix(in srgb, var(--kb-card) 72%, transparent); }

/* A scrolling stage dissolves at its edges instead of slicing a card flush at
   the column's bottom — same mask the Today list uses. The 18px runway at the
   bottom means a mid-scroll tile fades out rather than reading as "cropped". */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) :is(#page-leads, #page-projects) .kanban-col-body {
    padding-bottom: 18px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  }
}

/* ═══ Leads board: exactly FOUR stages in view (owner 2026-08-08) ════════════
   Same rhythm as Projects — columns divide the viewport instead of a fixed
   340px that fit five-and-a-bit. The rest still scroll sideways. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body:is(.leads-active, :not(.leads-active)) #page-leads #crmKanbanBoard .kanban-col {
    flex: 0 0 calc((100% - 48px) / 4);   /* 3 × 16px gaps between 4 columns */
    width: auto; max-width: none;
  }
}

/* 8-across tiles are too narrow for avatar + name + WhatsApp on one line —
   the head stacks: avatar and the WhatsApp pill share the top row, the name
   gets a full-width line of its own underneath. */
@media (min-width: 961px) {
  html:is([data-theme], :not([data-theme])) body .ct-card .ctc-top {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ava wa" "id id";
    align-items: center; row-gap: 10px; column-gap: 8px;
  }
  .ct-card .ctc-top .ct-ava { grid-area: ava; }
  .ct-card .ctc-top .ctc-wa { grid-area: wa; justify-self: end; }
  .ct-card .ctc-top .ctc-id { grid-area: id; min-width: 0; }
  .ct-card .ctc-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══ DEAL PANEL v2 — three columns, dashboard language (owner 2026-08-08) ═══
   WHO (identity + stage + provenance) | BOOKING (events, money, quotes) |
   ACTIVITY (log once; next steps above, history below). Tabs are gone: every
   pane that mattered is a card in its own column. */
:is(:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel)) .dlp-cols3 { display: block; }
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px; align-items: start;
  }
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 > .dlp-card { margin-bottom: 0; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start;
  }
  /* Activity is the working surface — it takes the full width under the other two. */
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 > .dlp-activitycard { grid-column: 1 / -1; }
}

/* Identity card: the deal name IS the card title — same size as a board column
   title, not the old oversized hero line. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-idcard .dlp-deal-name {
  font-size: clamp(19px, 1.35vw, 24px); font-weight: var(--w-reg); letter-spacing: -.02em;
  line-height: 1.2; margin: 0 0 10px;
}
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-idcard .dlp-contact-line { display: flex; align-items: center; gap: 10px; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-idcard .dlp-head-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-idcard .detail-save-hint { margin-left: auto; }

/* Compact stepper: dots only. Labels would never fit a third-width column, and
   the stage name is spelled out on the line underneath anyway. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-stepper-scroll.is-compact { overflow: visible; margin: 2px 0 0; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .is-compact .dlp-step-label { display: none; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .is-compact .dlp-step { gap: 0; padding: 0; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .is-compact .dlp-step-dot { width: 18px; height: 18px; border-width: 2px; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .is-compact .dlp-step-dot .material-symbols-outlined { font-size: 11px; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-stage-now { margin: 10px 0 0; font-size: var(--t-sm); }

/* The deal amount is the booking card's one big number. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount-stat { margin-bottom: 4px; }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount-stat .dlp-amount {
  font-size: clamp(26px, 2.2vw, 36px); font-weight: var(--w-num); letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 6px;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount-stat .dlp-amount input {
  font: inherit; width: 100%; min-width: 0; background: none; border: 0; padding: 0;
  color: var(--mid-text); font-variant-numeric: tabular-nums;
}
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-amount-stat .dlp-stat-label { display: block; margin-bottom: 4px; }

/* Log form: the two halves of one thought read as one block. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-logform { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-logform .task-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-logform .task-form-field { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-logform .task-form-field > span {
  font-size: var(--t-micro); font-weight: var(--w-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid-muted);
}
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-logform textarea { width: 100%; }

/* Section rules off — space separates, as everywhere else. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dl-section {
  border: 0; padding-top: 0; margin-top: 20px;
}

/* ═══ DEAL PANEL v2 round 2 (owner 2026-08-08) ══════════════════════════════
   The panel was still wearing the old --kb-* board skin: different card fill,
   different radius, different field wells from the dashboard cards it now sits
   beside. It uses the SAME tokens and the same radius as every other card. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-scroll { background: var(--kb-canvas); }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-card {
  background: var(--kb-panel); border: 0; border-radius: var(--r-card);
  padding: 26px; box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-card-head h3 {
  font-size: clamp(19px, 1.35vw, 24px); font-weight: var(--w-reg); letter-spacing: -.02em; color: var(--mid-text);
}
/* Fields: input wells and selects match the dashboard's, not the board's. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dl-field input, .dl-field select, .dl-field textarea, .dlp-logform input, .dlp-logform select, .dlp-logform textarea, .deal-evt-row input) {
  background: var(--kb-tile); color: var(--kb-text);
  border: 1px solid transparent; border-radius: var(--r-tile);
  padding: 9px 12px; font: inherit;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-field-static { color: var(--mid-text-2); }
/* Field rows: label left, control right — including Created/Updated, which used
   to be a right-aligned meta strip out of line with everything above it. */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-fields { display: flex; flex-direction: column; gap: 12px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-field {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: center; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dl-field > label {
  font-size: var(--t-micro); font-weight: var(--w-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid-muted); margin: 0;
}

/* Deal name: the biggest thing on the page — it is the page's subject. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-idcard .dlp-deal-name {
  font-size: clamp(26px, 2vw, 34px); font-weight: var(--w-reg); letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 14px; color: var(--mid-text);
}
/* Breathing room between the contact line and its action buttons. */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-idcard .dlp-head-actions { margin-top: 20px; gap: 10px; }

/* Amount: no spinner. It is typed, or it arrives from an accepted quote. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount-stat .dlp-amount input {
  -moz-appearance: textfield; appearance: textfield;
  background: none; border: 0; padding: 0;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount-stat .dlp-amount input::-webkit-outer-spin-button,
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount-stat .dlp-amount input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-amount {
  font-family: inherit; color: var(--mid-text);
}

/* Fixed height, scroll INSIDE each card — the three columns end level and a long
   activity feed no longer runs off the bottom of the page. */
/* Fixed height, scroll INSIDE each card. Structural, not arithmetic: subtracting
   a guessed 190px from the viewport ignored the panel's 58px top offset, the
   scroller's own padding and the back row, so the cards always overran the fold.
   .dlp-scroll is already a flex column filling the panel — the columns take the
   remaining space and each card fills its cell. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-scroll {
    overflow: hidden; padding-bottom: 28px;
  }
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 {
    flex: 1 1 auto; min-height: 0; align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols3 > .dlp-card {
    height: calc(100dvh - 234px); max-height: calc(100dvh - 234px); min-height: 0;
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
}

/* Stage + owner sit under their section label, full width — a second "STAGE"
   inside the row would just repeat the heading above it. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-stage-select, .dlp-assign-slot select) {
  width: 100%; background: var(--kb-tile); color: var(--kb-text);
  border: 1px solid transparent; border-radius: var(--r-tile);
  padding: 9px 12px; font: inherit;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-stage-now { margin: 8px 0 0; }

/* One green. "New quote" / "New event" pills and the primary Log-activity
   button all speak the SAME lime — the pale-olive tint next to lime read as a
   second green on one page. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-q-link, .dlp-new-quote, .dlp-logform .button.primary) {
  background: #d9ff5e !important; color: #1a2000 !important;
  border: 0 !important; border-radius: 9999px; padding: 0 14px;
  height: 32px; line-height: 32px; box-sizing: border-box;
  font-size: var(--t-sm); font-weight: var(--w-label); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-q-link, .dlp-new-quote, .dlp-logform .button.primary):hover {
  background: #e4ff85 !important; color: #1a2000 !important; border: 0 !important;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-pane-hrow .dl-label { margin: 0; }
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .deal-task-cat,
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-rem-badge {
  background: color-mix(in srgb, var(--lime, #d9ff5e) 30%, transparent); color: var(--kb-text);
}

/* Log activity: clear air above it, and it closes the form on the RIGHT edge —
   flush with where the Due field ends. */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-logform .button.primary { margin-top: 10px; align-self: flex-end; }

/* The AI suggestion slot only exists on deals; empty it must not eat a flex
   gap, or the deal cards start one gap lower than the contact cards. */
#dealSuggestionSlot:empty { display: none; }

/* ═══ PROJECT PAGE joins the three-column anatomy (owner 2026-08-08) ═════════
   WHO (identity + badges + value + deal facts) | THE WORK (production over
   post-production) | THE MONEY. Column 2 is a stack of two cards sharing the
   viewport height. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .dlp-cols3 > .dlp-colstack {
    display: flex; flex-direction: column; gap: 16px;
    height: calc(100dvh - 234px); min-height: 0;
  }
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .dlp-colstack > .dlp-card {
    flex: 1 1 0; min-height: 0; height: auto; max-height: none;
    overflow-y: auto; overscroll-behavior: contain; margin: 0;
  }
}
/* Deal facts read as fields in the narrow column, not a wide fact strip. */
#projectDetailPanel .proj-deal-facts { display: flex; flex-direction: column; gap: 12px; }
#projectDetailPanel .proj-deal-fact { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 12px; align-items: baseline; }
#projectDetailPanel .proj-deal-fact .dl-label { margin: 0; }
/* Card-head icons died app-wide; these three had their own. */
#projectDetailPanel .proj-h-ico { display: none !important; }

/* ═══ Project page polish (owner 2026-08-08) ═════════════════════════════════
   1. One button language: every "+ Add …" inside the project page is the same
      lime pill as "+ New event"/"+ New quote" on the deal page. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel
  :is(.proj-add-evt, .proj-add-deliv, .proj-add-pay, .proj-add-cost, .proj-add-extra, .proj-plan-add, .proj-plan-setup) {
  background: #d9ff5e !important; color: #1a2000 !important; border: 0 !important;
  border-radius: 9999px; height: 32px; line-height: 32px; padding: 0 14px;
  font-size: var(--t-sm); font-weight: var(--w-label);
  display: inline-flex; align-items: center; gap: 4px; box-shadow: none;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel
  :is(.proj-add-evt, .proj-add-deliv, .proj-add-pay, .proj-add-cost, .proj-add-extra, .proj-plan-add, .proj-plan-setup):hover {
  background: #e4ff85 !important; color: #1a2000 !important;
}
/* 2. Save is Save — one word, one neon, everywhere in the detail panels. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .button.primary {
  background: #d9ff5e !important; color: #1a2000 !important; border: 0 !important;
  border-radius: 9999px;
}
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .button.primary:hover {
  background: #e4ff85 !important; color: #1a2000 !important;
}
/* 3. The stacked work cards must CONTAIN their content — the stage/deliver-by
   row was escaping the card into the page. */
#projectDetailPanel .dlp-colstack > .dlp-card { overflow-x: hidden; }
#projectDetailPanel .proj-manage-row { flex-wrap: wrap; }
#projectDetailPanel .proj-money .proj-field input { max-width: 100%; }

/* ═══ Contact card == deal card (owner 2026-08-08, one step at a time) ═══════
   The "plain text until Edit" skin stripped the contact fields to bare lines,
   so the same card read completely differently from the deal page beside it.
   Fields keep the SAME wells as deals at all times; Edit still gates typing
   (readonly/disabled attrs), it just no longer changes how the card looks. */
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .dlp-overview-card:not(.editing) .dl-field > :is(input, select) {
  background: var(--kb-tile) !important; border: 1px solid transparent !important;
  padding: 9px 12px !important; color: var(--kb-text) !important;
  pointer-events: auto; -webkit-appearance: auto; appearance: auto;
  border-radius: var(--r-tile);
}
html:is([data-theme], :not([data-theme])) body #contactDetailPanel .dlp-overview-card:not(.editing) .dl-field {
  display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: center;
  gap: 12px; padding: 0; border-bottom: 0;
}
/* Readonly stays visually calm, not ghosted — the wells carry the look. */
#contactDetailPanel .dl-field > input[readonly] { cursor: default; }
#contactDetailPanel .dl-field > select:disabled { opacity: 1; }

/* Project fact rows use the deal card's exact field metrics — same label size,
   same 34% column, same 14px rhythm; and the same spacing between the identity
   pieces (name → contact → badges → actions → big number). */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deal-fact .dl-label {
  font-size: var(--t-micro); font-weight: var(--w-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--kb-muted); margin: 0;
}
#projectDetailPanel .proj-deal-facts { gap: 14px; }
#projectDetailPanel .proj-head-badges { margin-top: 12px; }
#projectDetailPanel .dlp-idcard .dlp-stat.dlp-amount-stat { margin-top: 20px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .dlp-idcard .dlp-amount-static {
  font-size: clamp(26px, 2.2vw, 36px); font-weight: var(--w-num); letter-spacing: -.02em;
  color: var(--kb-text); font-variant-numeric: tabular-nums;
}

/* Stage badge rides the project name's line, baseline-aligned, wrapping under
   it only when the name is long. */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-name-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-name-row .dlp-deal-name { margin: 0 !important; }
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-name-row .proj-head-badges { margin: 0; display: inline-flex; gap: 6px; }
/* One rhythm: name block → contact line is exactly 14px on every panel. */
html:is([data-theme], :not([data-theme])) body :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-idcard .dlp-contact-line { margin: 0; }

#projectDetailPanel .dlp-deal-history-link { margin: 18px 0 0; }
#projectDetailPanel .dlp-amount-stat .dlp-pane-hrow { margin-bottom: 4px; }

/* Every pill centres its text on both axes — one geometry for badges, action
   pills and stage pills alike (owner 2026-08-08: "all text centred everywhere"). */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) :is(.dlp-q-link, .dlp-new-quote, .proj-badge, .stage-pill, .dlp-rem-badge, .deal-task-cat) {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; box-sizing: border-box;
}
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-name-row :is(.proj-badge, .dlp-q-link) { align-self: center; }

/* Project col 1: identity sizes to its content, Finance takes the rest. */
html:is([data-theme], :not([data-theme])) body #projectDetailContent .dlp-colstack > .dlp-card.dlp-idcard {
  flex: 0 0 auto; height: auto; overflow: visible;
}
/* Stage badge on the name row matches its pill neighbours exactly. */
:is(#dealDetailPanel, #projectDetailPanel) .dlp-name-row .proj-badge {
  height: 32px; padding: 0 14px; font-size: var(--t-sm); font-weight: var(--w-label);
}

/* Section-head pills in the project cards: same geometry as the deal page. */
#projectDetailPanel :is(.proj-pay-head, .proj-cost-head) {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#projectDetailPanel .dlp-pane-hrow .proj-eyebrow { margin: 0; }

/* Big number and the collected/balance note share ONE row, baseline-aligned. */
#projectDetailPanel .proj-value-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#projectDetailPanel .proj-value-row .proj-plan-sum { white-space: nowrap; }

/* Installment rows, owner spec: title+pill+X on one line; Due/Amount; then
   Received/On; then Save payment. X wears a circle. */
:is(#finBand, #page-projects) .proj-plan-l1 { flex-wrap: nowrap; }
:is(#finBand, #page-projects) .proj-plan-l1 .proj-plan-label { flex: 1 1 60px; min-width: 0; }
:is(#finBand, #page-projects) .proj-plan-l1 .proj-plan-pill { flex: 0 0 auto; white-space: nowrap; }
:is(#finBand, #page-projects) .proj-plan-del {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--kb-line, var(--mid-line));
  color: var(--kb-muted, var(--mid-muted)); cursor: pointer; padding: 0;
}
:is(#finBand, #page-projects) .proj-plan-del .material-symbols-outlined { font-size: 15px; }
:is(#finBand, #page-projects) .proj-plan-del:hover { border-color: #b3422f; color: #b3422f; }
:is(#finBand, #page-projects) .proj-plan-l4 { display: flex; justify-content: flex-end; }

/* ═══ Installments as CARDS (owner 2026-08-08): each row is a tile like the
   pipeline cards — same fill, radius and 18/20 padding — with labelled fields,
   dates stacked in column 1 and amounts in column 2. ═══ */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-row {
  background: var(--kb-card); border: 0; border-radius: var(--r-tile);
  padding: 18px 20px; gap: 12px;
}
:is(#finBand, #page-projects) .proj-plan-list { display: flex; flex-direction: column; gap: 12px; }
:is(#finBand, #page-projects) .proj-plan-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
:is(#finBand, #page-projects) .proj-plan-f-lbl {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kb-muted, var(--mid-muted));
}
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-label {
  width: 100%; min-width: 0;
}
/* Two fixed columns so Due sits over Received-on, Amount over Received. */
:is(#finBand, #page-projects) :is(.proj-plan-l2, .proj-plan-l3) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex-wrap: nowrap;
}
:is(#finBand, #page-projects) .proj-plan-l4 { display: flex; justify-content: flex-end; gap: 10px; }
/* "Delete payment": quiet text pill, danger on hover — replaces the X disc. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-delbtn {
  width: auto; height: 32px; border-radius: 9999px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--kb-line, var(--mid-line));
  color: var(--kb-muted, var(--mid-muted)); font-size: var(--t-sm); font-weight: var(--w-label);
  cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-delbtn:hover {
  border-color: #b3422f; color: #b3422f;
}

/* Finance card sections breathe: a real break before Additional billing and
   Direct costs (and the plan header), instead of rows running into each other. */
:is(#finBand, #page-projects) .proj-money :is(.proj-pay-head, .proj-cost-head) {
  margin-top: 28px;
}
:is(#finBand, #page-projects) .proj-money .proj-pay-head:first-of-type { margin-top: 18px; }
:is(#finBand, #page-projects) .proj-plan-list { margin-top: 10px; }

/* Billing + cost entries wear the installment card anatomy. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) :is(.proj-extra-row, .proj-cost-row, .proj-deliv-row, .proj-delivpage-link).proj-fin-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--kb-card); border: 0; border-radius: var(--r-tile);
  padding: 18px 20px;
}
:is(#finBand, #page-projects) :is(.proj-extra-list, .proj-cost-list) { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
/* No incremental arrows on ANY amount field, app-wide. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Finance card polish round (owner 2026-08-08):
   1. Cards stack their children FULL-WIDTH — a legacy align-items:center on the
      old row layout was shrinking "What for" and centring the buttons. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) :is(.proj-extra-row, .proj-cost-row, .proj-deliv-row, .proj-delivpage-link).proj-fin-card,
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-row {
  align-items: stretch;
}
/* 2. Save/Delete sit bottom-RIGHT on every finance card, like installments. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-l4 {
  display: flex; justify-content: flex-end; gap: 10px; width: 100%;
}
/* 3. Every field in a finance card wears the same well + radius — the Type
      select had its own smaller radius. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-plan-f :is(input, select) {
  border-radius: var(--r-tile); width: 100%; min-width: 0; box-sizing: border-box;
}
/* 4. The panel-footer Save / Send-payment-update row is retired from view —
      per-card Save and Send receipt drive them programmatically, so the
      buttons stay in the DOM but not on screen. */
:is(#finBand, #page-projects) .proj-money > .proj-manage-actions { display: none; }

/* One 12px gap governs a finance card's stack — stray margins on any child
   (the "What for" field, the button row) made some gaps read wider. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects)
  :is(.proj-plan-row, .proj-fin-card) > * { margin: 0; }

/* .proj-plan-f's flex-basis (120px) means WIDTH inside the l2/l3 rows — but as
   a DIRECT child of the card column it became HEIGHT, reserving a 120px slab
   under "What for". Column-context fields size to content. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects)
  :is(.proj-fin-card, .proj-plan-row) > .proj-plan-f { flex: 0 0 auto; }

/* ═══ Event cards wear the finance-card language (owner 2026-08-08): kb tile,
   shared radius/padding, labelled fields, Save/Delete text pills. ═══ */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-card {
  background: var(--kb-card); border: 0; border-radius: var(--r-tile); padding: 0;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-head { padding: 18px 20px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-card.is-open .proj-evt-body {
  display: flex; flex-direction: column; gap: 12px; padding: 0 20px 18px;
}
#projectDetailPanel .proj-evt-body > * { margin: 0; }
#projectDetailPanel .deal-evt-when.proj-plan-l2 { grid-template-columns: 1fr 1fr 1fr; }
#projectDetailPanel .deal-evt-tdash { display: none; }
#projectDetailPanel .proj-evt-list { display: flex; flex-direction: column; gap: 12px; }

/* Event-card fields: ONE control height (the date well towered over the time
   selects); crew rows follow the two-line card language. */
#projectDetailPanel .proj-evt-card :is(input[type="date"], select, input[type="text"], input[type="number"]) {
  height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
}
#projectDetailPanel .proj-res-row { display: flex; flex-direction: column; gap: 10px; }
#projectDetailPanel .proj-res-l1 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
#projectDetailPanel .proj-res-l1.has-type { grid-template-columns: 1fr 1fr auto; }
#projectDetailPanel .proj-res-grp {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kb-muted, var(--mid-muted)); margin-top: 6px;
}
#projectDetailPanel .proj-res-l2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#projectDetailPanel .proj-res-cost-inp[readonly] { opacity: .85; cursor: default; }

/* The tall date/time wells: an old event-row rule pinned big padding on these
   inputs with !important — match it at the same strength, one 40px height. */
html[data-theme] [id^="projEvtList"] :is(.deal-evt-date, .deal-evt-name, .deal-evt-start, .deal-evt-end),
html[data-theme] #projectsBody .proj-evt-card :is(input[type="date"], select) {
  height: 40px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  box-sizing: border-box;
}
#projectDetailPanel .proj-prod-actions { display: inline-flex; gap: 8px; }
#projectDetailPanel .proj-res-row { background: none; border: 0; border-radius: 0; padding: 0; }
#projectDetailPanel .proj-res-table { display: flex; flex-direction: column; gap: 10px; }
#projectDetailPanel .proj-res-extra { display: flex; justify-content: flex-end; }

/* MEASURED ROOT CAUSE of the tall date/time wells: legacy event-row rules give
   the INPUTS a flex-basis (130/96px) meant as width in the old horizontal
   layout — inside the vertical .proj-plan-f wrappers that basis becomes
   HEIGHT. Neutralise flex on any field inside a labelled wrapper. */
html:is([data-theme], :not([data-theme])) body .proj-plan-f > :is(input, select, textarea) {
  flex: 0 0 auto !important; height: 40px; min-height: 0;
}

#projectDetailPanel .proj-res-l1 { align-items: end; }
#projectDetailPanel .proj-res-c-type { display: block; }
#projectDetailPanel .proj-res-c-type .proj-res-type {
  display: flex; align-items: center; height: 40px; padding: 0 12px;
  background: var(--kb-tile); border-radius: var(--r-tile); box-sizing: border-box;
}
#projectDetailPanel .proj-res-status { height: 40px; border-radius: var(--r-tile); padding: 0 14px; }

/* Fixed (quote-sold) type text: SAME size/weight as every field value — it was
   inheriting an old bold-uppercase treatment and shouting. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-type {
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--kb-text);
}
#projectDetailPanel .proj-res-l2 { align-items: end; }

/* Crew count rows: name left, quantity right, one line each. */
#projectDetailPanel .deal-evt-team { display: flex; flex-direction: column; gap: 8px; }
#projectDetailPanel .deal-evt-role-fld {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#projectDetailPanel .deal-evt-role-fld > span { font-size: 13px; color: var(--kb-text); text-transform: none; font-weight: 400; }
#projectDetailPanel .deal-evt-role-fld .deal-evt-role { width: 76px; flex: 0 0 76px !important; text-align: center; }

/* Role rows inside the resource block: name left, count right; slot rows
   indent slightly beneath their role. */
#projectDetailPanel .proj-res-table .deal-evt-role-fld { margin-top: 8px; }
#projectDetailPanel .proj-res-qty-fixed { font-size: 13px; color: var(--kb-muted); }
#projectDetailPanel .proj-res-table .proj-res-row { margin-left: 0; }

/* ═══ CREW BLOCK — built to the owner's sketch (2026-08-08) ══════════════════
   role name + qty on ONE row; each crew slot = resource select + status pill on
   ONE row, indented under its role. No labels, no wells around the whole row. */
#projectDetailPanel .proj-res-rolerow {
  display: grid; grid-template-columns: 1fr 88px; gap: 10px; align-items: center;
  margin-top: 12px;
}
#projectDetailPanel .proj-res-rolename { font-size: var(--t-sm); color: var(--kb-text); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-rolerow .deal-evt-role {
  width: 100%; height: 40px; text-align: center; flex: 0 0 auto !important;
  background: var(--kb-tile); border: 0; border-radius: var(--r-tile); color: var(--kb-text);
}
#projectDetailPanel .proj-res-qty-fixed {
  height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--kb-tile); border-radius: var(--r-tile); font-size: 13px; color: var(--kb-text);
}
#projectDetailPanel .proj-res-row { margin: 8px 0 0 16px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 {
  display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center;
}
/* Type cell only exists on manual rows; on quote rows it must be gone, not a
   ghost box (a display:block rule was defeating [hidden]). */
#projectDetailPanel .proj-res-c-type.is-hidden { display: none !important; }
#projectDetailPanel .proj-res-l1 > .proj-res-c-type:not(.is-hidden) { display: block; }
#projectDetailPanel .proj-res-l1:has(> .proj-res-c-type:not(.is-hidden)) { grid-template-columns: 1fr 1fr 120px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-status {
  width: 100%; height: 40px; border-radius: var(--r-tile);
}

#projectDetailPanel .proj-res-row { display: block; width: auto; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 { width: 100%; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-sel { width: 100%; min-width: 0; }

/* Crew confirmation state (WhatsApp YES/NO) + the ask action. */
#projectDetailPanel :is(.proj-res-confirm, .proj-res-ask) {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px; border-radius: 9999px;
  font-size: var(--t-micro); font-weight: var(--w-label); line-height: 1;
}
#projectDetailPanel .proj-res-confirm.is-confirmed { background: rgba(56,189,120,.18); color: #2f8f5b; }
#projectDetailPanel .proj-res-confirm.is-asked { background: rgba(255,193,118,.22); color: #8a5a10; }
#projectDetailPanel .proj-res-confirm.is-declined { background: rgba(179,66,47,.16); color: #b3422f; }
html[data-theme="dark"] #projectDetailPanel .proj-res-confirm.is-confirmed { color: #7ee29a; }
html[data-theme="dark"] #projectDetailPanel .proj-res-confirm.is-asked { color: #ffc176; }
html[data-theme="dark"] #projectDetailPanel .proj-res-confirm.is-declined { color: #ff7a70; }
#projectDetailPanel .proj-res-ask {
  background: none; border: 1px solid var(--kb-line, var(--mid-line));
  color: var(--kb-muted, var(--mid-muted)); cursor: pointer;
}
#projectDetailPanel .proj-res-ask:hover { border-color: #d9ff5e; color: var(--kb-text); }
/* The resource select starts on the card's left edge like every other field. */
#projectDetailPanel .proj-res-row { margin-left: 0; }
#projectDetailPanel .proj-res-rolerow + .proj-res-row { margin-top: 8px; }

/* Status + confirmation ride the SAME row as the resource, so a glance says who
   is picked, whether their data is in, and whether they have said yes. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

/* Crew rows and role rows share ONE right-hand geometry so the status column
   lines up with the quantity column above it. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-rolerow {
  grid-template-columns: minmax(0, 1fr) 124px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 {
  grid-template-columns: minmax(0, 1fr) 124px;
  grid-auto-flow: row;
}
/* Confirmation sits under the status, in the same column. */
#projectDetailPanel .proj-res-l1 > :is(.proj-res-confirm, .proj-res-ask) {
  grid-column: 2; justify-self: stretch; margin-top: 6px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-status { width: 100%; }

/* Team head: same row as its action pill. The shared .proj-pay-head baseline
   alignment leaves the pill sitting low against an uppercase label, so this
   pair centres instead. */
#projectDetailPanel .proj-team-head { align-items: center; margin: 14px 0 2px; }
#projectDetailPanel .proj-team-head > span:first-child { color: var(--kb-muted); }

/* ═══ DELIVERABLES — same anatomy as the Team block and the finance cards ═══ */
#projectDetailPanel .proj-deliv-list { display: flex; flex-direction: column; gap: 10px; }
#projectDetailPanel .proj-deliv-row { display: block; }
/* The old flex row rules aimed at .proj-deliv-main are dead now — the row is a card. */
#projectDetailPanel .proj-deliv-row .proj-res-rolerow { margin-top: 0; }
#projectDetailPanel .proj-deliv-row .proj-res-rolename { display: flex; flex-direction: column; gap: 2px; }
#projectDetailPanel .proj-deliv-row .proj-deliv-desc { font-size: var(--t-micro); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-row .proj-deliv-sel { height: 40px; flex: 0 0 auto !important; }
#projectDetailPanel .proj-deliv-row .proj-res-l1 { margin-top: 8px; }
#projectDetailPanel .proj-deliv-row .proj-plan-f { margin-top: 8px; }
#projectDetailPanel .proj-deliv-row.is-done .proj-res-rolename { opacity: .6; }

/* Status: a pill-shaped dropdown, colour tracks the stage. Sized to the same
   124px column as the crew status pill so the right edge lines up. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-pill-sel {
  width: 100%; height: 40px; flex: 0 0 auto !important; min-height: 0;
  border: 0; border-radius: 999px; padding: 0 12px;
  font-size: var(--t-sm); font-weight: var(--w-label); text-align: center;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
#projectDetailPanel .proj-pill-sel.st-none { background: var(--kb-tile); color: var(--kb-muted); }
#projectDetailPanel .proj-pill-sel.st-in_progress { background: rgba(56, 189, 248, .18); color: #38bdf8; }
#projectDetailPanel .proj-pill-sel.st-review { background: rgba(255, 193, 118, .18); color: #ffc176; }
/* Culling comes before editing (cool grey — work not yet begun in earnest); "with client"
   sits between internal review and delivered (warm, waiting on someone else). */
#projectDetailPanel .proj-pill-sel.st-culling { background: var(--mid-surface-3); color: var(--mid-text-2); }
#projectDetailPanel .proj-pill-sel.st-client_review { background: rgba(142, 213, 255, .18); color: #8ed5ff; }
#projectDetailPanel .proj-pill-sel.st-delivered { background: #d9ff5e; color: #1a2000; }
html[data-theme="light"] #projectDetailPanel .proj-pill-sel.st-in_progress { background: rgba(2, 132, 199, .12); color: #0369a1; }
html[data-theme="light"] #projectDetailPanel .proj-pill-sel.st-review { background: rgba(180, 83, 9, .12); color: #b45309; }

/* Delivery-page links reuse the finance card + two-column field pattern. */
#projectDetailPanel .proj-delivpage-links { display: flex; flex-direction: column; gap: 10px; }
#projectDetailPanel .proj-deliv-page { display: flex; flex-direction: column; gap: 10px; }

/* The pill dropdown has to out-specify the generic dark <select> rule (which was
   painting it as an input well at 14px radius) — measured, not assumed. */
html:is([data-theme], :not([data-theme])) body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel {
  border-radius: 999px !important; text-align: center; text-align-last: center;
  background-image: none; padding: 0 12px;
}
html:is([data-theme], :not([data-theme])) body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-none {
  background: var(--kb-tile) !important; color: var(--kb-muted) !important;
  -webkit-text-fill-color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-in_progress {
  background: rgba(56, 189, 248, .18) !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important;
}
html:is([data-theme], :not([data-theme])) body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-review {
  background: rgba(255, 193, 118, .18) !important; color: #ffc176 !important; -webkit-text-fill-color: #ffc176 !important;
}
html:is([data-theme], :not([data-theme])) body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-delivered {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
html[data-theme="light"] body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-in_progress { background: rgba(2,132,199,.12) !important; color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; }
html[data-theme="light"] body :is(#projectDetailPanel, #dealDetailPanel, #finBand) select.proj-pill-sel.st-review { background: rgba(180,83,9,.12) !important; color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }

/* The deliverable's own due date takes the slot the quantity box used to hold —
   quantity is already stated in the deliverable's name/description. A date needs
   more room than a count, so this column is wider than the crew one. */
#projectDetailPanel .proj-deliv-row .proj-res-rolerow { grid-template-columns: minmax(0, 1fr) 150px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-row .proj-res-rolerow > .proj-deliv-due {
  width: 100%; height: 40px; flex: 0 0 auto !important; min-height: 0;
  background: var(--kb-lowest, var(--mid-lowest)); color: var(--kb-text);
  border: 0; border-radius: var(--r-tile); padding: 0 12px; font-size: var(--t-sm);
}
#projectDetailPanel .proj-deliv-row .proj-deliv-qtyf[hidden] { display: none !important; }

/* Autosave tell — quiet by default, fades in while saving/just-saved so the
   operator can see the edit landed without a banner interrupting them. */
#projectDetailPanel .proj-autosave {
  margin-left: 8px; font-size: var(--t-micro); letter-spacing: 0; font-weight: var(--w-label);
  color: var(--kb-muted); opacity: 0; transition: opacity .18s ease;
}
#projectDetailPanel .proj-autosave.is-on { opacity: 1; }
#projectDetailPanel .proj-autosave.is-error { color: #ff9d9d; }

/* ═══ NO GLASS ON THE DASHBOARD (owner 2026-08-08) ═══════════════════════════
   The lime hero / top-priority cards were translucent-with-blur, which read as
   glassmorphism sitting on the canvas. They are flat solid surfaces now: no
   backdrop blur, no white inner highlight, no lifted shadow. */
html:is([data-theme], :not([data-theme])) body #page-dashboard :is(.px-card, .today-card, .sg-card, .dash-card, .dash-stat) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:is([data-theme], :not([data-theme])) body #page-dashboard :is(.px-card.is-hero, .today-cards > .today-card.is-top) {
  background: #d9ff5e !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body #page-dashboard :is(.px-card.is-hero, .today-cards > .today-card.is-top) {
  background: #d9ff5e !important;
}

/* Contact card body: the one number that says whether this person is live work.
   Sits in the middle of the square, big enough to read at a glance. */
.ct-card .ctc-stat { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.ct-card .ctc-stat-n { font-size: var(--t-num); line-height: 1.05; font-weight: var(--w-num); color: var(--kb-muted); }
.ct-card .ctc-stat-n.is-live { color: var(--kb-value, #d9ff5e); }
.ct-card .ctc-stat-l { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--w-label); color: var(--kb-muted); }
.ct-card .ctc-foot { margin-top: 10px; }

/* ═══ QUOTE BUILDER — brought onto the app's card language (owner 2026-08-08) ══
   Measured drift before this pass: cards #333 at 24px radius, inputs #2a2a2a at
   two different heights (42px / 36px), sentence-case heads and labels. Every
   other surface in the app is #141414/#1a1a1a, --r-card, uppercase micro labels
   and 40px controls. This aligns them; it does not move anything around. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes :is(.qg-card, .qg-rail) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
  padding: 18px 20px;
}
/* Section heads read like TEAM / DELIVERABLES / PAYMENT PLAN elsewhere. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-card-head {
  border: 0; padding: 0; margin: 0 0 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-card-head h3 {
  font-size: var(--t-micro); line-height: 16px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: var(--w-label); color: var(--kb-muted); margin: 0;
}
/* Head icons go — no decorative glyphs on cards. */
body.quote-active #page-quotes .qg-card-head > .material-symbols-outlined { display: none; }
/* Field labels: same uppercase micro label as the project/finance cards. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes :is(.qgm-field > span, #quoteDealSection label > span) {
  font-size: var(--t-micro); line-height: 14px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: var(--w-label); color: var(--kb-muted);
}
/* One control height, one radius, one well colour. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(#quoteContactSearch, #manualCoupleNames, #quoteDealSelect, .qgm-field input, .qgm-field select) {
  height: 40px; min-height: 0; flex: 0 0 auto !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 14px; font-size: var(--t-sm);
}
/* The saved-quote action is a text pill like every other inline action. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #loadSavedQuoteBtn {
  height: 32px; border-radius: 999px; background: var(--kb-tile); color: var(--kb-text);
  border: 0; padding: 0 14px; font-size: var(--t-sm);
}
body.quote-active #page-quotes #loadSavedQuoteBtn .material-symbols-outlined { display: none; }
/* Rail head matches the card heads. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-label {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--w-label); color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-state { color: var(--kb-muted); font-size: var(--t-micro); }
/* The package strip is part of the packages card, not a floating bar. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-template-bar {
  background: transparent; border: 0; padding: 0; margin: 0 0 12px;
}

/* ── Packages section ───────────────────────────────────────────────────────
   Was: a decorative ordinal watermark, sentence-case heads, an event row whose
   type/date/city were three different shapes, and a red icon circle for delete.
   Now the same grammar as the project event cards. */
body.quote-active #page-quotes .qgm-ghost { display: none; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .package-card {
  background: var(--kb-card); border: 1px solid var(--kb-line-soft);
  border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-pkg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-pkg-head h3,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-timeline-head > span {
  font-size: var(--t-micro); line-height: 16px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: var(--w-label); color: var(--kb-muted); margin: 0;
}
body.quote-active #page-quotes .qgm-timeline-rule { display: none; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-timeline-head { margin: 16px 0 8px; }

/* Event head: Event | Date | City on one grid, all 40px — the project card rule. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto;
  gap: 10px; align-items: center;
}
body.quote-active #page-quotes .qgm-event-ico { display: none; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-event-type, .qgm-event-date, .qgm-event-city) {
  height: 40px !important; min-height: 0; flex: 0 0 auto !important; width: 100%;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 12px !important; font-size: var(--t-sm) !important; font-weight: var(--w-reg) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event {
  background: var(--kb-panel); border: 1px solid var(--kb-line-soft);
  border-radius: var(--r-tile); padding: 14px 16px; margin-bottom: 10px;
}
/* Service table: uppercase micro column labels, same as every other table head. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-svc-headrow > span {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em; color: var(--kb-muted);
}
body.quote-active #page-quotes .qgm-svc-name .material-symbols-outlined { display: none; }
/* Actions are text pills; delete is the muted text pill used app-wide. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-picker {
  height: 40px !important; flex: 1 1 auto; background: var(--kb-tile) !important;
  color: var(--kb-text) !important; border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 12px !important;
}

/* The old circular icon-button rules still shaped these after the markup became
   text pills — measured a 34px round chip clipping the word "Delete". Reset them
   to the app's text-pill geometry. */
/* These are ICON buttons now (a red trashcan), not the word "Delete" — the pill
   geometry and muted grey below were sized for text and made the icon read as a faint
   smudge. Square tap target, red icon, deeper red on hover. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-event-del, .qgm-del-remove, .qgm-remove-package) {
  width: 34px !important; height: 34px !important; min-width: 0 !important;
  border-radius: 10px !important; background: transparent !important;
  border: 0 !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  color: var(--mid-danger, #b3422f) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-event-del, .qgm-del-remove, .qgm-remove-package) svg {
  width: 18px !important; height: 18px !important; stroke: currentColor;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-event-del, .qgm-del-remove, .qgm-remove-package):hover {
  background: rgba(179,66,47,0.12) !important; color: #b3261e !important;
}
/* Inline add-actions become real pills, not bare lime text. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-add-svc, .qgm-add-event-btn, .qgm-add-package, .duplicate-manual-package) {
  height: 32px !important; border-radius: 999px !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; padding: 0 14px !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  width: auto !important; margin: 0;
}
body.quote-active #page-quotes .qgm-add-svc { margin-top: 10px !important; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-pkg-actions {
  display: flex; align-items: center; gap: 8px;
}

/* Everything else on the page that was never on the scale: one body size for
   values, one micro size for labels, regular weight for headings. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-svc-name, .qgm-svc-price, .qgm-step-val, #qgTemplateBar label, .qg-rail-state, .qgm-empty) {
  font-size: var(--t-sm); font-weight: var(--w-reg);
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-svc-price {
  font-weight: var(--w-num); font-variant-numeric: tabular-nums;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #qgTemplateBar label {
  text-transform: uppercase; letter-spacing: .05em; font-size: var(--t-micro);
  font-weight: var(--w-label); color: var(--kb-muted);
}
body.quote-active #page-quotes #qgTemplateBar .material-symbols-outlined { display: none; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-generate {
  font-size: var(--t-sm); font-weight: var(--w-label);
}

/* Last two off-scale sizes on the page, found by auditing computed styles:
   the service head row sat at 11px and the discount toggle at 14px. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-svc-headrow,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-svc-headrow > span {
  font-size: var(--t-micro) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qg-disc-opt, .qg-rail-discount-label, .cur-sym) {
  font-size: var(--t-sm); font-weight: var(--w-label);
}

/* ═══ SENTENCE CASE ONLY (owner 2026-08-08) ══════════════════════════════════
   Uppercase micro labels are retired app-wide: they read slower, flatten word
   shapes, and mangle apostrophes and proper nouns (COUPLE'S NAMES). Section
   heads and field labels are now plain sentence case at the same size/colour,
   so hierarchy comes from weight and colour instead of shouting.
   One override rather than editing ~118 rules, so it stays reversible. */
html:is([data-theme], :not([data-theme])) body
  :is(#page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes,
      #page-calendar, #page-conversations, #page-setup,
      #dealDetailPanel, #contactDetailPanel, #projectDetailPanel) * {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Heading hierarchy restored (owner 2026-08-08) ───────────────────────────
   The alignment pass flattened the quote page's card heads to micro-label size
   (measured 11.5px vs the project panel's ~23px), so a section title read the
   same weight as the field label under it. Three levels now:
     card head   → --t-h,     regular weight  (Lead & client, Package 01)
     sub-head    → --t-sm,    label weight    (Deliverables, Event timeline)
     field label → --t-micro, label weight    (Package name, Date, What for)  */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qg-card-head h3, .qgm-pkg-head h3) {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important;
  line-height: 1.3 !important; color: var(--kb-text) !important;
  overflow: visible;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-timeline-head > span, .qg-rail-label) {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  line-height: 1.3 !important; color: var(--kb-muted) !important;
}
/* The same three levels inside the project/deal panels, whose sub-heads were
   flattened to 11.5px by the very same pass. */
html:is([data-theme], :not([data-theme])) body
  :is(#projectDetailPanel, #dealDetailPanel, #contactDetailPanel, #finBand)
  :is(.proj-pay-head, .proj-team-head) > span:first-child {
  font-size: var(--t-sm); font-weight: var(--w-label); color: var(--kb-muted);
}

/* Contact name is that card's title, so it takes the card-heading size at the
   system's regular weight — the scale note says headings stay LIGHT and only
   numbers and buttons go heavy. Was 15.5px/650, which is off-scale on both. */
html:is([data-theme], :not([data-theme])) body .ct-card .ctc-name {
  font-size: var(--t-h); font-weight: var(--w-reg); line-height: 1.2;
  white-space: normal; overflow-wrap: anywhere;
}

/* ═══ TABULAR FIGURES ONLY WHERE DIGITS STACK (owner 2026-08-08) ═════════════
   Outfit draws a DIFFERENT "1" for tabular figures — with a foot serif — so a
   standalone stat number read as a different typeface from the same number in
   prose. Tabular earns its place in tables and stacked money rows, where the
   columns have to align; a lone glance number has nothing to align with.
   Kept tabular: finance tables, money columns, payment/installment amounts,
   source + ad-spend tables, calendar times, quote pricing table. */
html:is([data-theme], :not([data-theme])) body :is(
  .ll-val, .dash-kpi-value, .sg-stat-num,
  #page-dashboard .sg-bignum, #page-dashboard .likely-stat-num,
  #page-dashboard .dash-band-stat, #page-dashboard .money-val,
  #page-dashboard .lead-fact-v,
  :is(#page-projects, #page-dashboard) .proj-stat-val,
  #finBand .fin-kpi-num, #finBand .fin-donut-total,
  :is(#page-leads, #page-projects) .kanban-col-meta,
  .px-card-value, .plan-card .plan-price, .ct-card .ctc-stat-n
) {
  font-variant-numeric: normal !important;
}

html:is([data-theme], :not([data-theme])) body :is(
  #page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes,
  #page-calendar, #page-setup, #finBand,
  #dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #chatDetailContent
) *, 
html:is([data-theme], :not([data-theme])) body :is(
  #page-dashboard, #page-leads, #page-projects, #page-contacts, #page-quotes,
  #page-calendar, #page-setup, #finBand,
  #dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #chatDetailContent
) {
  font-variant-numeric: normal !important;
}

/* Quote builder columns at 2:1 — the stack narrows, the live-pricing rail
   widens (owner 2026-08-08). Was minmax(0,1fr) + a fixed --qg-rail-w. */
@media (min-width: 1024px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-shell {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail {
    width: auto !important; max-width: none !important;
  }
}

/* ═══ QUOTE BUILDER — EVERY control normalised (owner 2026-08-08) ════════════
   Audited each control's computed style rather than eyeballing. Found: three
   different well colours (#202020 / #242424 / #2a2a2a), three radii (6 / 12 /
   14), two text colours (#fff / #ededed), two heights (36 / 40), a #4a4a4a
   border nowhere else in the app, and the OLD lime #d9ff5e on the primary CTA
   and the discount toggle. One canonical control below. */

/* Wells: inputs, selects, pickers, steppers, chips. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes :is(
  #quoteContactSearch, #manualCoupleNames, #quoteDealSelect, #qgPackageTemplate,
  .qgm-field input, .qgm-field select, .qgm-event-type, .qgm-event-date,
  .qgm-event-city, .qgm-del-qtyf input, .selected-contact-chip, #manualQuoteText
) {
  height: 40px !important; min-height: 0 !important; flex: 0 0 auto !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 14px !important; font-size: var(--t-sm) !important;
  font-weight: var(--w-reg) !important; box-shadow: none !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(input, select, textarea)::placeholder { color: var(--kb-muted) !important; }

/* The contact-search popover is a card, not a grey slab. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #quoteContactResults {
  background: var(--kb-card) !important; color: var(--kb-text) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-tile) !important; padding: 6px !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  #quoteContactResults > * {
  background: transparent !important; border: 0 !important;
  border-radius: 10px !important; color: var(--kb-text) !important;
  font-size: var(--t-sm) !important; padding: 10px 12px !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  #quoteContactResults > *:hover { background: var(--kb-tile) !important; }

/* Stepper buttons sit on the tile colour like every other small control. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-step-btn {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important;
}

/* THE accent. #d9ff5e is the retired green — the app's lime is #d9ff5e on
   #1a2000 (see the design-system ACCENT RULE). */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qg-generate:not(.is-ghost), .qg-disc-opt.is-active) {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important; border: 0 !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  .qg-disc-opt:not(.is-active) {
  background: var(--kb-tile) !important; color: var(--kb-muted) !important;
  -webkit-text-fill-color: var(--kb-muted) !important; border: 0 !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-generate.is-ghost {
  background: transparent !important; color: var(--kb-muted) !important;
  border: 1px solid var(--kb-line) !important;
}

/* Live pricing is the rail's CARD title — same size as Lead & client. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-head > .qg-rail-label {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important;
  line-height: 1.3 !important; color: var(--kb-text) !important;
}

/* ── Live-pricing rail body ──────────────────────────────────────────────────
   The rail was still on the --mid-* (blue-tinted midnight) tokens while every
   card in the app uses the --kb-* Stitch neutrals: --mid-base #0f1418 vs the
   canonical #202020. The per-package summary also sat on its own grey slab,
   which the production event cards don't do — rows on the card, divided by
   hairlines, no nested tint. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-discount input,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-detail select {
  height: 40px !important; min-height: 0 !important; flex: 1 1 auto !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 14px !important; font-size: var(--t-sm) !important; text-align: right;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-discount-label {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  color: var(--kb-muted) !important;
}
/* No nested grey block for the summary. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgp-pkgcard {
  background: transparent !important; border: 0 !important;
  border-top: 1px solid var(--kb-line-soft) !important;
  border-radius: 0 !important; padding: 12px 0 0 !important; margin-top: 12px !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgp-row, .qgp-math, .qgp-pkgcard .qgp-row) {
  border-top-color: var(--kb-line-soft) !important; border-top-style: solid !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgp-row, .qgp-row-name, .qgp-pkghead) {
  font-size: var(--t-sm) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgp-dim, .qgp-margin-note, .qgp-multinote, .sg-big-sub) {
  color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgp-total, .qgp-pkgtotal) { color: var(--kb-text) !important; }

/* ── Quote builder: geometry corrections found by measuring ──────────────────
   1. The packages wrapper had padding:0 from a `:has(#manualPackageList)` rule
      (its :has() arg carries ID specificity, which is why the card rule lost),
      so the template bar and package cards sat flush at x=0 with no gutter.
   2. .package-card kept `overflow:hidden` — that existed to clip the decorative
      "01" watermark, which is gone. All it did now was crop the Add event row.
   3. Event columns were fixed 150px; on the narrower 2/3 stack they crowd, so
      they scale with the row instead. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-packages-card, .qg-card:has(#manualPackageList)) {
  padding: 18px 20px !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.package-card, .qgm-event, .qgm-timeline) {
  overflow: visible !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-head {
  grid-template-columns: minmax(0, 1.6fr) minmax(120px, .9fr) minmax(100px, .8fr) auto !important;
}
/* The template bar is a row inside the card now, not a full-bleed strip. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-template-bar {
  display: flex; align-items: center; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #qgPackageTemplate {
  flex: 1 1 auto; max-width: 360px;
}
/* Discount input lost to `input:not([type=checkbox]):not([type=radio])`, whose
   two :not() arms out-specify a plain class selector — match that depth. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  .qg-rail-discount input:not([type="checkbox"]):not([type="radio"]) {
  height: 40px !important; background: var(--kb-tile) !important;
  color: var(--kb-text) !important; border: 0 !important;
  border-radius: var(--r-tile) !important; padding: 0 14px !important;
  font-size: var(--t-sm) !important; text-align: right !important;
}

/* ── Field widths + the cropped Add event button ─────────────────────────────
   The stack got wider at 2:1, and nothing inside it was re-proportioned: single
   text fields stretched the full ~1100px (a form field that long is unreadable
   and looks unfinished), and the add-event row overflowed its card because a
   flex item defaults to min-width:auto — the picker refused to shrink below its
   longest option, pushing the button past the edge. */

/* Lead card: two columns, like the project panel's field grids. */
@media (min-width: 900px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-lead-fields {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;
  }
}
/* Standalone text fields stop at a readable measure instead of full-bleed. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(#quoteContactSearch, #manualCoupleNames, #quoteDealSelect) {
  max-width: 520px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  .qgm-field-wide input { max-width: 520px; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #quoteContactResults {
  max-width: 520px;
}
/* Quantity fields share the row evenly rather than stretching. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-qty-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 16px;
}

/* THE CROP: let the picker shrink, never let the button. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 100%; overflow: visible;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-picker {
  flex: 1 1 auto; min-width: 0 !important; max-width: 360px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event-btn {
  flex: 0 0 auto; white-space: nowrap;
}

/* The template bar's label was stretching, throwing the select to the far right
   of the card instead of sitting beside it. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-template-bar {
  justify-content: flex-start;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-template-bar > label {
  flex: 0 0 auto; margin: 0;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #qgPackageTemplate {
  flex: 0 1 320px; margin-right: auto;
}

/* ═══ QUOTE BUILDER: THREE CARDS (owner 2026-08-08) ══════════════════════════
   Contact | Events | Live pricing — the deal/project panel anatomy. Replaces
   the 2:1 stack+rail, where a single wide column forced every field to either
   stretch to ~1100px or be capped with an arbitrary max-width. In three columns
   the fields fill their card naturally, so the caps come off. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start;
    /* No cap: the subnav and topbar above run full-bleed, so a centred 1600px grid
       read as "the cards suddenly got narrower" on a wide screen. */
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail { grid-column: 1 / -1; }
}
/* The width caps existed only because the column was too wide. Off now. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes :is(
  #quoteContactSearch, #manualCoupleNames, #quoteDealSelect, #quoteContactResults,
  .qgm-field-wide input, #qgPackageTemplate, .qgm-event-picker
) { max-width: none; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-qty-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-lead-fields {
  display: block;
}
/* The rail is a normal card in the row now — no sticky drawer behaviour. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail {
  position: static !important; width: auto !important; max-width: none !important;
}
/* Package/event cards nest inside a third-width card: tighter, and the event
   head stacks rather than trying to hold four columns. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 8px;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qgm-event-date, .qgm-event-city) { grid-column: span 1; }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-type { grid-column: 1; }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-del { grid-column: 2; grid-row: 1; }
}

/* Inline new-contact form. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-newcontact {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; padding: 14px; border-radius: var(--r-tile);
  background: var(--kb-card); border: 1px solid var(--kb-line-soft);
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-newcontact-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-sm); font-weight: var(--w-label); color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-newcontact-actions {
  display: flex; justify-content: flex-end; margin-top: 2px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  .qg-newcontact :is(input, select) {
  height: 40px !important; background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important; padding: 0 14px !important;
  font-size: var(--t-sm) !important; width: 100%;
}

/* In a third-width card the template bar can't hold label + select on one line —
   measured the select overflowing the card by 100px. It wraps now. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-template-bar {
  flex-wrap: wrap; gap: 6px 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #qgPackageTemplate {
  flex: 1 1 100%; margin-right: 0; min-width: 0; max-width: none;
}

/* At half width the events card can hold the event head on one row again. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-head {
    grid-template-columns: minmax(0, 1.4fr) minmax(110px, .9fr) minmax(90px, .8fr) auto !important;
    row-gap: 0;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qgm-event-type, .qgm-event-date, .qgm-event-city, .qgm-event-del) {
    grid-column: auto !important; grid-row: auto !important;
  }
  /* The template bar fits on one line again at this width. */
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #qgPackageTemplate {
    flex: 0 1 320px; max-width: 320px;
  }
}

/* The rail head kept its own 18px top padding from when it was a drawer handle,
   stacking on the card's padding and pushing "Live pricing" 18px below the other
   two card titles. It's a card head like the others now. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-head {
  padding: 0 !important; margin: 0 0 12px !important;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}

/* ── Full-height cards that scroll inside (owner 2026-08-08) ─────────────────
   Same geometry the Leads/Projects boards use: the row is pinned to the
   viewport (topbar 58 + shell padding 36 + heading ~64 + breathing room ≈ 200),
   and each card scrolls its own content. Card heads stay pinned at the top of
   their card, and the pricing rail's actions stay pinned at the bottom, so
   "Generate quote" is always reachable without scrolling the column. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 {
    height: calc(100dvh - 200px);
    align-items: stretch !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 > .qg-card {
    height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qg-card-head, .qg-rail-head) {
    position: sticky; top: 0; z-index: 2;
    background: var(--kb-panel); padding-bottom: 10px !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-footer {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--kb-panel); padding-top: 12px;
    margin-top: auto;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail {
    display: flex; flex-direction: column;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-body {
    flex: 1 1 auto; min-height: 0;
  }
}

/* ── Fixed page height (owner 2026-08-08) ────────────────────────────────────
   The quote page never scrolls as a page: the shell is locked to the viewport
   below the sticky 58px topbar, the sub-nav and heading take their natural
   height, and the card row absorbs whatever is left. This replaces the guessed
   `calc(100dvh - 200px)` — that number couldn't know how tall the heading and
   sub-nav actually render. */
@media (min-width: 1100px) {
  body.quote-active .shell {
    height: 100dvh;
    /* Tuned to land 40px below the cards — the same gap the Leads board leaves,
       measured on both pages rather than assumed from the padding value. */
    padding-bottom: 50px;
    display: flex; flex-direction: column; min-height: 0;
    overflow: hidden;
  }
  body.quote-active #page-quotes {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
  }
  body.quote-active #page-quotes .qg-sage-head,
  body.quote-active #page-quotes .sales-subnav { flex: 0 0 auto; }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 {
    flex: 1 1 auto; min-height: 0;
    height: auto !important;   /* supersedes the calc(100dvh - 200px) above */
  }
}

/* The page's 48px bottom padding was breathing room for a scrolling page; in the
   fixed layout it just leaves dead space under the cards. */
@media (min-width: 1100px) {
  body.quote-active #page-quotes { padding-bottom: 0 !important; }
}

@media (min-width: 1100px) {
  body.quote-active #page-quotes { margin-bottom: 0 !important; }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 { margin-bottom: 0 !important; }
}

/* ── Contact card field rhythm ───────────────────────────────────────────────
   Measured against the project/finance cards: they run 12px between fields and
   3px between a label and its input. The quote contact card was on 10px with
   ad-hoc 133/74/42px jumps from inline margin-tops. One rhythm now. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-lead {
  display: flex; flex-direction: column; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-lead > *, .qgm-lead-fields > *, #quoteDealSection > *) { margin: 0; }
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
  :is(.qgm-lead-fields, #quoteDealSection, .qg-newcontact) {
  display: flex; flex-direction: column; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-field {
  display: flex; flex-direction: column; gap: 3px;
}
/* The head keeps its own 12px, not doubled by the card gap. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-lead .qg-card-head {
  margin-bottom: 0 !important;
}

/* ── Two fixes found by measuring (owner 2026-08-08) ─────────────────────────
   1. Generic .dlp-q-link on this page rendered as bare lime text (transparent,
      8px radius, 12px) because the earlier pill rules named specific buttons
      only. Every text-pill action on the page now looks like the ones in the
      project panel: tile background, pill radius, 13px.
   2. The event picker measured 648px inside a 680px row — its max-width was
      cancelled by the `max-width:none` added in the three-column pass — so the
      Add event button had nowhere to sit and wrapped to its own line. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .dlp-q-link {
  height: 32px !important; min-height: 0;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  -webkit-text-fill-color: var(--kb-text) !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 0 14px !important; font-size: var(--t-sm) !important;
  font-weight: var(--w-label) !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  width: auto !important; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .dlp-q-link:hover {
  background: var(--kb-line) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event {
  flex-wrap: nowrap !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-picker,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-del-picker {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event-btn,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-del-btn {
  flex: 0 0 auto !important;
}

/* The picker keeps the canonical well look, minus the flex lock. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event-picker,
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-del-picker {
  height: 40px !important; min-height: 0 !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  padding: 0 14px !important; font-size: var(--t-sm) !important;
}

/* Cancel + Create contact are one action row, bottom-right — same pattern as the
   finance cards' Delete/Save pair. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-newcontact-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 2px;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #quoteNewContactCancel {
  height: 32px; border-radius: 999px; background: transparent; border: 0;
  padding: 0 12px; font-size: var(--t-sm); font-weight: var(--w-label);
  color: var(--kb-muted); cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes #quoteNewContactCancel:hover {
  color: var(--kb-text);
}

/* No box behind the event fields — the wells carry the shape, the container
   was a second grey layer on top of the package card (owner 2026-08-08).
   Events separate with a hairline instead. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin-bottom: 0 !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-event + .qgm-event {
  border-top: 1px solid var(--kb-line-soft) !important;
}
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qgm-add-event {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}

/* Sticky card heads must cover the card's own padding, or content scrolls
   through the strip above them (owner 2026-08-08: "scrolling text behind the
   events card title"). Negative margins pull the head out to the card edges;
   matching padding puts the text back where it was. `background: inherit`
   takes the card's colour, so this holds in light and dark without a second
   set of colour rules. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qg-card-head, .qg-rail-head) {
    margin: -18px -20px 12px !important;
    padding: 18px 20px 10px !important;
    background: inherit !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-footer {
    margin: auto -20px -50px !important;
    padding: 12px 20px 18px !important;
    background: inherit !important;
  }
}

/* A sticky element's `top: 0` anchors to the scroll container's PADDING box, so
   with 18px of card padding the head always parked 18px down and content slid
   through the strip above it. Zero the card's top padding and let the head carry
   it instead — now the head is flush with the card edge and covers everything. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 > .qg-card {
    padding-top: 0 !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qg-card-head, .qg-rail-head) {
    margin: 0 -20px 12px !important;
    padding: 18px 20px 10px !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-cols3 > .qg-card {
    padding-bottom: 0 !important;
  }
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-footer {
    margin: auto -20px 0 !important;
    padding: 12px 20px 18px !important;
  }
}

/* The packages card's padding comes from the `:has(#manualPackageList)` rule,
   which carries ID specificity — match it or the top padding survives. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes
    :is(.qgm-packages-card, .qg-card:has(#manualPackageList)) {
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
}

/* ═══ CALENDAR — onto the app's language (owner 2026-08-08) ══════════════════
   Was: --mid-* blue-tinted greys, wide rectangular cells, uppercase MON/TUE and
   UPCOMING, off-scale type. Now the Stitch neutrals, square date boxes, one type
   ramp, sentence case. */
html:is([data-theme], :not([data-theme])) body #page-calendar :is(.cal-wrap, .cal-main) {
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-agenda {
  background: var(--kb-panel) !important; border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important; padding: 18px 20px !important;
}
/* Square date boxes. aspect-ratio goes on the cell with width:100% and
   align-self:start — on a stretched grid item Safari collapses it (learned on
   the finance cards). */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell {
  aspect-ratio: 1 / 1; width: 100%; height: auto; align-self: start;
  background: var(--kb-card) !important; border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-tile) !important;
  padding: 10px !important; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell.cal-empty {
  background: transparent !important; border-color: transparent !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell.cal-today {
  background: var(--kb-card) !important;
  border: 1px solid #d9ff5e !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-daynum {
  font-size: var(--t-sm); font-weight: var(--w-label); color: var(--kb-text);
  line-height: 1.2; flex: 0 0 auto;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-today .cal-daynum { color: var(--mid-accent-ink); }
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-dow {
  font-size: var(--t-micro); font-weight: var(--w-label); color: var(--kb-muted);
  padding-bottom: 6px;
}
/* Chips: one tile, one size, colour carried by a left bar not a tinted slab. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip {
  background: var(--kb-tile) !important; border: 0 !important;
  border-radius: 8px !important; padding: 4px 8px !important;
  font-size: var(--t-micro) !important; color: var(--kb-text) !important;
  display: flex; gap: 6px; align-items: baseline; min-width: 0;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip-time {
  color: var(--kb-muted) !important; font-size: var(--t-micro) !important; flex: 0 0 auto;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip-txt {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-more {
  font-size: var(--t-micro); color: var(--kb-muted);
}
/* Toolbar: the app's pill language. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-title {
  font-size: var(--t-h); font-weight: var(--w-reg); line-height: 1.3; color: var(--kb-text);
}
html:is([data-theme], :not([data-theme])) body #page-calendar
  :is(.cal-nav-btn, .cal-today-btn, .cal-view-btn) {
  height: 32px; border-radius: 999px; border: 0;
  background: var(--kb-tile); color: var(--kb-text);
  font-size: var(--t-sm); font-weight: var(--w-label); padding: 0 14px; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-nav-btn { width: 32px; padding: 0; }
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-view-btn.is-active {
  background: #d9ff5e; color: #1a2000; -webkit-text-fill-color: #1a2000;
}
html:is([data-theme], :not([data-theme])) body #page-calendar #calAddBtn {
  background: #d9ff5e; color: #1a2000; -webkit-text-fill-color: #1a2000;
}
/* Agenda list. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-agenda-head {
  font-size: var(--t-h); font-weight: var(--w-reg); color: var(--kb-text); margin: 0 0 12px;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-item {
  background: var(--kb-card) !important; border: 0 !important;
  border-radius: var(--r-tile) !important; padding: 10px 12px !important;
  font-size: var(--t-sm) !important; color: var(--kb-text) !important;
  display: flex; gap: 10px; align-items: baseline;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-time {
  color: var(--kb-muted) !important; font-size: var(--t-sm) !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-agenda-list {
  display: flex; flex-direction: column; gap: 8px;
}

/* #page-calendar carried its own --mid-base (#0f1418) panel with a 22px radius —
   no other page wraps itself in a slab, and it was the blue cast behind the
   whole calendar. */
html:is([data-theme], :not([data-theme])) body #page-calendar {
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip {
  font-weight: var(--w-label) !important;
}

/* Agenda rows are text-only now — layout is time + title, no icon column. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-title {
  font-size: var(--t-sm); color: var(--kb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-who {
  font-size: var(--t-micro); color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-ag-time { flex: 0 0 auto; }

/* ── Day cells: a card per booking, scrolling inside the square ──────────────
   Each entry is the project name over its event; the day scrolls rather than
   truncating at three with "+N more" (owner 2026-08-08). The day number stays
   pinned; only the list moves. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell-items {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell-items::-webkit-scrollbar { width: 6px; }
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-cell-items::-webkit-scrollbar-thumb {
  background: var(--kb-line); border-radius: 999px;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip {
  display: flex !important; flex-direction: column !important; gap: 1px !important;
  align-items: stretch !important; flex: 0 0 auto;
  padding: 6px 8px !important; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip-proj {
  font-size: var(--t-micro); font-weight: var(--w-label); color: var(--kb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip-evt {
  font-size: var(--t-micro); font-weight: var(--w-reg); color: var(--kb-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-chip-conflict {
  box-shadow: inset 2px 0 0 #ffc176;
}

/* ═══ CHAT — onto the app's language (owner 2026-08-08) ══════════════════════
   Measured drift: panes #333 at 22px radius, rows #444, search well #3c3c3c at
   8px, bubbles #2a2a2a, the retired green #d9ff5e on the out-bubbles / Take over
   / active filter, and five off-scale sizes (10 / 11 / 12 / 13.5 / 24). */
html:is([data-theme], :not([data-theme])) body #page-conversations
  :is(.inbox-list-pane, .inbox-thread-pane) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-row {
  background: transparent !important; border: 0 !important;
  border-radius: var(--r-tile) !important; padding: 10px 12px !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-row:hover {
  background: var(--kb-card) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-row.is-active {
  background: var(--kb-tile) !important;
  box-shadow: none !important;
  border-left-color: transparent !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-row-name {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations
  :is(.inbox-row-snippet, .inbox-row-time, #inboxThreadMeta) {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-row-unread {
  background: #d9ff5e !important;
}
/* Search: the canonical well. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-search input {
  height: 40px !important; background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important; font-size: var(--t-sm) !important;
}
/* Bubbles: theirs on the tile, ours on the lime. One radius family. */
html:is([data-theme], :not([data-theme])) body #page-conversations .msg .msg-bubble {
  font-size: var(--t-sm) !important; font-weight: var(--w-reg) !important;
  border: 0 !important; padding: 10px 14px !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .msg.in .msg-bubble {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border-radius: 14px 14px 14px 4px !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .msg.out .msg-bubble {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important;
  border-radius: 14px 14px 4px 14px !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .msg-meta {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
/* Thread head + actions on the app's pill language. */
html:is([data-theme], :not([data-theme])) body #page-conversations #inboxThreadName {
  font-size: var(--t-body) !important; font-weight: var(--w-label) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations
  :is(#inboxTakeoverBtn, .inbox-thread-actions .button) {
  height: 32px !important; border-radius: 999px !important; border: 0 !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important; padding: 0 14px !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations #inboxTakeoverBtn {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
/* Channel filter pills. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter button {
  height: 32px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter button.is-active {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter .count {
  font-size: var(--t-micro) !important;
}
/* Composer. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-compose-row input,
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-compose-row textarea {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important; font-size: var(--t-sm) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .sg-display {
  font-size: var(--t-display) !important; font-weight: var(--w-reg) !important;
}

/* Remaining chat strays, found by scanning computed styles: the retired green
   #d9ff5e on avatars, channel badges, counts and inline actions; and three
   off-scale sizes (the hidden legacy page-heading at 10/24, the banner at 12). */
html:is([data-theme], :not([data-theme])) body #page-conversations :is(
  .inbox-row-avatar, .inbox-thread-avatar, .inbox-row-chbadge,
  .inbox-filter .count, .chat-search-fab, .inbox-ai-inline, .button.primary
) {
  color: var(--mid-accent-ink);
}
html:is([data-theme], :not([data-theme])) body #page-conversations
  :is(.inbox-row-avatar, .inbox-thread-avatar) {
  background: var(--kb-tile) !important; color: var(--mid-accent-ink) !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .button.primary {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .chat-search-fab {
  background: #d9ff5e !important; color: #1a2000 !important;
}
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-banner {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
/* The legacy .page-heading is superseded by .sg-chat-head — hide it rather than
   leave two titles at two sizes on the same page. */
body.chat-active #page-conversations > .page-heading { display: none !important; }

/* The count bubble on the active channel pill was the last holdout on the
   retired green. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter .count {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  -webkit-text-fill-color: var(--kb-text) !important;
}

/* ═══ ONE SEGMENTED CONTROL (owner 2026-08-08) ═══════════════════════════════
   Chat's All/WhatsApp/Instagram and the calendar's All/Projects/Follow-ups were
   each doing their own thing. Both now copy .sales-subnav exactly — the
   Leads/Contacts/Quotes control — so every segmented switch in the app is the
   same object: pill container, transparent tabs, lime active. */
html:is([data-theme], :not([data-theme])) body :is(#page-conversations .inbox-filter, #page-calendar .cal-view-toggle) {
  display: inline-flex !important; align-items: center; gap: 2px;
  padding: 4px !important; border-radius: 9999px !important;
  background: var(--kb-panel) !important; border: 1px solid var(--kb-line) !important;
  width: auto !important;
}
html:is([data-theme], :not([data-theme])) body :is(#page-conversations .inbox-filter > button, #page-calendar .cal-view-btn) {
  padding: 7px 24px !important; height: auto !important;
  border-radius: 9999px !important; border: none !important; background: transparent !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: .01em;
  color: var(--kb-muted) !important; -webkit-text-fill-color: var(--kb-muted) !important;
  cursor: pointer; transition: all var(--dur);
  display: inline-flex; align-items: center; gap: 8px;
}
html:is([data-theme], :not([data-theme])) body :is(#page-conversations .inbox-filter > button:hover, #page-calendar .cal-view-btn:hover) {
  color: var(--kb-text) !important; -webkit-text-fill-color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body :is(#page-conversations .inbox-filter > button.is-active, #page-calendar .cal-view-btn.is-active) {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
/* The count rides inside its tab, muted on rest and dark-on-lime when active. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter .count {
  background: transparent !important; color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: var(--t-micro) !important; font-weight: var(--w-label) !important;
  padding: 0 !important; min-width: 0 !important; opacity: .75;
}

html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-filter .count {
  display: inline-flex !important; align-items: center; line-height: 1;
  border: 0 !important; height: auto !important;
}

/* `html[data-theme] body.chat-active #inboxFilter` sets display:flex with ID
   specificity, which is why the segmented control stretched full width. Match
   it by id so the shrink-wrap sticks. */
html:is([data-theme], :not([data-theme])) body.chat-active #inboxFilter,
html:is([data-theme], :not([data-theme])) body #page-calendar #calViewToggle {
  display: inline-flex !important; width: auto !important; max-width: none !important;
  flex: 0 0 auto !important; align-self: flex-start !important;
}
/* Add entry was heavier than every other pill. */
html:is([data-theme], :not([data-theme])) body #page-calendar
  :is(#calAddBtn, #calToday, .cal-today-btn, .cal-nav-btn) {
  font-weight: var(--w-label) !important;
}

/* Upcoming rail retired — the month grid takes the full width. */
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-wrap {
  display: block !important; grid-template-columns: none !important;
}
html:is([data-theme], :not([data-theme])) body #page-calendar .cal-main { width: 100% !important; }

/* ── Chat: full-height shell, Leads-page padding (owner 2026-08-08) ──────────
   Title removed, so the page is just the channel filter + the chat shell. The
   shell is locked to the viewport the same way the quote builder is — flex
   chain rather than a guessed calc — and lands the same 40px below the fold
   that the Leads board does. */
@media (min-width: 901px) {
  body.chat-active .shell {
    height: 100dvh; padding-bottom: 50px;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  body.chat-active #page-conversations {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    padding-bottom: 0 !important; margin-bottom: 0 !important;
  }
  html:is([data-theme], :not([data-theme])) body.chat-active #inboxFilter {
    flex: 0 0 auto; margin: 0 0 16px !important;
  }
  html:is([data-theme], :not([data-theme])) body.chat-active .inbox-shell {
    flex: 1 1 auto; min-height: 0 !important; height: auto !important;
    margin: 0 !important;
  }
}

/* Conversations 1/3, thread 2/3 (owner 2026-08-08). Was a fixed
   minmax(260px, 340px) list against an elastic thread. */
@media (min-width: 901px) {
  html:is([data-theme], :not([data-theme])) body.chat-active .inbox-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    gap: 20px !important;
  }
}

/* The chat shell's height/padding lost to a more specific existing rule
   (measured 942px tall with 20px padding instead of the 100dvh/50px asked for).
   Match the prefix and force it. */
@media (min-width: 901px) {
  html:is([data-theme], :not([data-theme])) body.chat-active .shell {
    height: 100dvh !important; padding-bottom: 50px !important;
    display: flex !important; flex-direction: column; min-height: 0; overflow: hidden;
  }
}

/* Each tab still carried a box-shadow from its old standalone-pill styling,
   which read as a pill drawn inside the pill container. */
html:is([data-theme], :not([data-theme])) body :is(
  #page-conversations .inbox-filter > button,
  #page-calendar .cal-view-btn,
  .sales-subtab
) {
  box-shadow: none !important;
}

/* The search sat in its own bordered slab (#242424 with a #4a4a4a outline) —
   a box around a box. The input's well is the only shape needed. */
html:is([data-theme], :not([data-theme])) body #page-conversations .inbox-search {
  background: transparent !important; border: 0 !important;
  padding: 12px 12px 8px !important; border-radius: 0 !important;
}

/* ═══ SETUP — Company page + sub-menu (owner 2026-08-08) ═════════════════════
   Measured drift: section cards #333 at 24px radius, inputs #2a2a2a at 10px,
   tabs as loose olive pills with no container, section headings painted LIME
   (the design system forbids lime on headings), and five off-scale sizes. */

/* Sub-menu = the app's segmented control, same as Leads/Contacts/Quotes. */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-tabs {
  display: inline-flex !important; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px !important; border-radius: 9999px !important;
  background: var(--kb-panel) !important; border: 1px solid var(--kb-line) !important;
  width: auto !important; margin: 0 0 16px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-tab {
  padding: 7px 20px !important; height: auto !important;
  border-radius: 9999px !important; border: 0 !important; background: transparent !important;
  color: var(--kb-muted) !important; -webkit-text-fill-color: var(--kb-muted) !important;
  font-size: 14px !important; font-weight: 600 !important;
  box-shadow: none !important; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-tab:hover {
  color: var(--kb-text) !important; -webkit-text-fill-color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-tab.is-active {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
/* No decorative glyphs on the tabs. */
body #page-setup .setup-tab .material-symbols-outlined { display: none !important; }

/* Cards on the app's surfaces. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.setup-section, .panel, .gs-strip) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
  padding: 20px 22px !important;
}
/* ACCENT RULE: lime is for values and the one primary action — never headings. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(h1, h2, h3) {
  color: var(--kb-text) !important; -webkit-text-fill-color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-section > h2 {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important;
  line-height: 1.3 !important; margin: 0 0 14px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup h3 {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important; color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .eyebrow {
  font-size: var(--t-micro) !important; font-weight: var(--w-label) !important; color: var(--kb-muted) !important;
  margin: 0 0 2px !important;
}
/* One control: 40px, tile, --r-tile, 13px. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  font-size: var(--t-sm) !important; padding-left: 14px !important; padding-right: 14px !important;
  min-height: 40px !important;
}
/* Single-line fields centre their text, so they take no vertical padding. Stated
   separately from the shorthand above, which used to force 0 on TEXTAREAS too and
   outranked their own rule (owner, 2026-08-13: "text needs some padding on top"). */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  padding-top: 0 !important; padding-bottom: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup textarea {
  padding: 14px !important; min-height: 96px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup label > span,
html:is([data-theme], :not([data-theme])) body #page-setup .form-grid > label {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.muted, .small, .hint) {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
/* Head actions on the pill language. */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-head-actions .button {
  height: 32px !important; border-radius: 999px !important; border: 0 !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important; padding: 0 16px !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-head-actions .button.primary {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}
body #page-setup .setup-head-actions .button .material-symbols-outlined { display: none !important; }
/* One title on the page — the legacy .page-heading duplicates .sg-setup-head. */
body #page-setup > .page-heading > div > h1 { display: none !important; }

/* `html[data-theme] body.setup-active #page-setup .setup-tab.is-active` out-specified
   the tab rules (measured olive #2a3325 surviving). Match its depth. */
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-tab {
  background: transparent !important; color: var(--kb-muted) !important;
  -webkit-text-fill-color: var(--kb-muted) !important; box-shadow: none !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-tab.is-active {
  background: #d9ff5e !important; color: #1a2000 !important; -webkit-text-fill-color: #1a2000 !important;
}

/* The whole Setup page is styled behind `body.setup-active …` selectors, so the
   surface/type rules above lost the same way the tabs did (measured #333 cards,
   #2a2a2a inputs and 27 lime headings surviving). Restated at that depth. */
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
  :is(.setup-section, .panel, .gs-strip, .setup-side .panel) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup :is(h1, h2, h3, h4) {
  color: var(--kb-text) !important; -webkit-text-fill-color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-section > h2,
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .panel > h2 {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important; line-height: 1.3 !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup h3 {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  color: var(--kb-muted) !important; -webkit-text-fill-color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  font-size: var(--t-sm) !important; min-height: 40px !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
  :is(.eyebrow, .muted, .small, .hint, label > span) {
  font-size: var(--t-micro) !important; color: var(--kb-muted) !important;
}
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .sg-display {
  font-size: var(--t-display) !important; font-weight: var(--w-reg) !important;
}

/* Last layer: the surviving rules carry TWO ids (#page-setup #setupForm), which
   outranks every single-id selector no matter how many classes are stacked. */
html:is([data-theme], :not([data-theme])) body #page-setup #setupForm
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 0 !important; border-radius: var(--r-tile) !important;
  font-size: var(--t-sm) !important; min-height: 40px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #setupForm textarea {
  padding: 12px 14px !important; min-height: 96px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #setupForm :is(h1, h2, h3, h4) {
  color: var(--kb-text) !important; -webkit-text-fill-color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #setupForm :is(h2) {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important; line-height: 1.3 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #setupForm h3 {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  color: var(--kb-muted) !important; -webkit-text-fill-color: var(--kb-muted) !important;
}

/* Last off-scale sizes on Setup: buttons/links at 12.5px, small at 12px,
   status pills at 11px, and the JS-rendered section h2 at 18px. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.button, a.button) {
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(small, .status-pill) {
  font-size: var(--t-micro) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup h2 {
  font-size: var(--t-h) !important; font-weight: var(--w-reg) !important; line-height: 1.3 !important;
}

/* Nine elements still painted the retired green #d9ff5e — swap the whole page
   onto the current lime in one place rather than chasing each selector. */
html:is([data-theme], :not([data-theme])) body #page-setup [style*="d9ec4f"],
html:is([data-theme], :not([data-theme])) body #page-setup .setup-side .panel :is(h2, h3, strong),
html:is([data-theme], :not([data-theme])) body #page-setup :is(.gs-step-num, .gs-done, .setup-accent) {
  -webkit-text-fill-color: var(--mid-accent-ink) !important; color: var(--mid-accent-ink) !important;
}

/* ── Setup: two cards per row (owner 2026-08-08) ─────────────────────────────
   Sections were full-width, so a four-field card stretched across 1100px.
   NOTE: only two sections live inside #setupForm — the other 22 are siblings
   under .setup-main, so the grid has to sit there and treat the form as one
   grid item. Top-aligned so a short card doesn't inherit a tall neighbour's
   height. Editor-style sections (catalog, team tables, template gallery) keep
   the full width — they hold tables and previews that break in half a column. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main > * {
    margin: 0 !important; min-width: 0;
  }
  /* The form holds Company + Knowledge bank; it spans and grids its own two. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup #setupForm {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px; align-items: start;
  }
  /* Wide exceptions — ids read off the markup, not guessed.

     #rolesPermsGrid WAS on this list and is not any more (owner 2026-08-16: "i asked you to
     make the permissions card half width and place it next to resources card"). This rule
     is why pinning it to column 2 did nothing: the masonry packer classifies a card as
     full-width by reading its COMPUTED grid-column, so a card spanning 1/-1 here is wide no
     matter which column it is pinned to. The permissions matrix is a fixed, known list —
     it scrolls inside a half card perfectly well, and the team TABLE is the thing that
     actually needs the full width. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main
    > :is(.setup-section, .integration-grid):has(#quoteCatalogEditor,
        #brandsList) {
    grid-column: 1 / -1;
  }
}

/* ── Setup pairing fix (owner 2026-08-08, from live screenshots) ─────────────
   Reproduced: a narrow card followed by a full-width one sat alone in column 1,
   because grid auto-placement never backfills. `dense` lets later narrow cards
   pair up. The form becomes display:contents so its two sections join the same
   grid as everyone else instead of running a private one. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main {
    grid-auto-flow: row dense !important;
  }
  /* Masonry (JS-driven): with plain grid rows, collapsing a card's details left a
     gap the height of its taller row-mate. setupMasonry() sets a fine row unit and
     per-card spans so cards flow up to fill. Class-gated: no JS, no change. */
  /* The channels wrapper was its own row-aligned grid — the collapse gap lived
     INSIDE it where the masonry couldn't reach. Dissolve it at masonry widths so
     each channel card packs as its own item (packSetupMasonry spans them: they
     all carry .setup-section). */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main > .integration-grid {
    display: contents !important;
  }
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup #setupForm {
    display: contents !important;
  }
  /* Wide exceptions re-stated to cover the form's children now that they are
     direct grid items. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main
    :is(.setup-section, .integration-grid):has(#quoteCatalogEditor,
        #brandsList) {
    grid-column: 1 / -1;
  }
  /* The team TABLE is the card that needs the width — six columns and a row per person. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main
    #teamPanel { grid-column: 1 / -1; }
}

/* The .integration-grid wrapper stayed a grid item even with every section
   inside it hidden — an invisible occupant of the very hole dense packing
   should backfill. Flatten it so its sections are placed individually. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main > .integration-grid {
    display: contents !important;
  }
}

/* ── Yes/no switches (owner 2026-08-08) ──────────────────────────────────────
   The Notifications checkboxes rendered as bare 44px squares. Every checkbox in
   Setup toggle rows is a switch now: pill track, sliding knob, lime when on. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.setup-toggle, .toggle-row) > input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 44px; height: 24px; min-height: 24px; flex: 0 0 auto;
  border-radius: 999px; border: 0; cursor: pointer;
  background: var(--kb-line, #d5d5cd); position: relative;
  transition: background var(--dur, .18s) ease; margin: 0;
}
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.setup-toggle, .toggle-row) > input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--dur, .18s) ease;
}
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.setup-toggle, .toggle-row) > input[type="checkbox"]:checked {
  background: #d9ff5e;
}
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.setup-toggle, .toggle-row) > input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}
/* The row itself: switch beside its label, not stacked above it. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.setup-toggle, .toggle-row) {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.setup-toggle, .toggle-row) > span {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--t-sm); color: var(--kb-text);
}

/* THE CATALOGUE WRAPPER MUST DISSOLVE (owner, 2026-08-13). Its five cards sat in a
   private .lib-grid, so the Setup masonry could see them but never place them beside
   the Proposal template — the two grids couldn't interleave. display:contents lifts
   them into the same grid as every other Selling card; column pinning then works. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main .lib-grid,
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main #quoteCatalogEditor,
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main .pricing-editor {
    display: contents !important;
  }
}

/* Masonry base: tiny implicit rows; each card spans by measured height (JS).
   Row gap must be 0 — the 20px lives inside each card's span instead. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main {
    /* 1px rows, not 8px: the packer rounds each card's span UP to a whole row, so an
       8px unit made every gap land anywhere between 20 and 28px — visibly uneven, and
       nothing else in the UI does that (owner, 2026-08-13). At 1px the error is under
       a pixel and every gap is exactly 20. */
    grid-auto-rows: 1px !important;
    row-gap: 0 !important; column-gap: 20px !important;
    /* start, not stretch — stretch inflated each card to fill its span and ate
       the 20px breathing room baked into the span. */
    align-items: start !important;
  }
}

/* ── Proposal template: full width, internals in two columns ─────────────────
   The longest card by far (~1450px tall in a half column of ultrawide fields).
   Full width again, with its four groups (Images / Copy / Deck content / Terms)
   in a 2×2 grid; heading and actions span both columns (owner 2026-08-08). */
@media (min-width: 1100px) {
  /* HALF WIDTH AGAIN (owner, 2026-08-13): it heads the left column, with the five
     catalogue cards stacked down the right. Its four groups drop to one column at
     this width — two columns inside a half-width card squeezed the terms fields to
     about 90px and made the inputs unusable. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-main
    .setup-section:has(#tplGallery) {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 8px 40px; align-content: start;
  }
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    .setup-section:has(#tplGallery) > :is(.eyebrow, h2, p, .tplc-actions) {
    grid-column: 1 / -1;
  }
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    .setup-section:has(#tplGallery) > .tplc-group { min-width: 0; }
}

/* ═══ SETUP — design-language conformance (owner 2026-08-08, task #21) ═══════
   Audited computed styles: primary buttons still on the retired green #d9ff5e,
   ghosts on off-token #444, thumbs/codeboxes on #242424, sidebar panels on
   #333, button heights scattered 34/38/40 with icons inside. One button, one
   well, one card — same grammar as every other screen. */

/* Every button in Setup is the 32px text pill; primary takes the lime. */
html:is([data-theme], :not([data-theme])) body #page-setup button.button,
html:is([data-theme], :not([data-theme])) body #page-setup a.button {
  height: 32px !important; min-height: 0 !important;
  border-radius: 999px !important; border: 0 !important;
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  -webkit-text-fill-color: var(--kb-text) !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
  padding: 0 16px !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center; gap: 6px;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(button.button.primary, a.button.primary) {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important;
}
/* No icons inside buttons — the label is the button. */
body #page-setup .button .material-symbols-outlined,
body #page-setup .setup-head-actions .material-symbols-outlined { display: none !important; }

/* Image slots and code boxes sit on the tile, radius --r-tile. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.tplc-thumb, .codebox, pre, code) {
  background-color: var(--kb-tile) !important; border: 0 !important;
  border-radius: var(--r-tile) !important; color: var(--kb-text) !important;
}
/* Sidebar asides are cards like everything else. */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-sidebar .panel {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}
/* Dividers on the hairline token, not the old midnight line. */
html:is([data-theme], :not([data-theme])) body #page-setup hr {
  border: 0 !important; border-top: 1px solid var(--kb-line-soft) !important;
}
/* Nested list rows (knowledge items, drops, brands, team) ride the card tone. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.kb-item, .drop-item, .brand-row, .team-row, .lib-card) {
  background: var(--kb-card) !important; border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-tile) !important;
}

/* Escalations — these three lost to legacy id-level rules (measured, not
   assumed). The :is() lists carry ids precisely to outrank them. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#kbAddBtn, #teamResAddBtn, #addContentDropBtn, #tplSaveBtn, button.button.primary, a.button.primary) {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important; border: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#instagramWebhookUrl, pre.codebox, .codebox) {
  background: var(--kb-tile) !important; border: 0 !important;
  border-radius: var(--r-tile) !important; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-layout > aside .panel,
html:is([data-theme], :not([data-theme])) body #page-setup .setup-layout > aside section.panel {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}

html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
  :is(.webhook-panel, .checklist-panel, .setup-sidebar .panel) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}

/* Final aside layer: ties rule 4's five class-units so source order decides. */
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
  .setup-layout > .setup-sidebar :is(.panel, .webhook-panel, .checklist-panel) {
  background: var(--kb-panel) !important;
  border: 1px solid var(--kb-line-soft) !important;
  border-radius: var(--r-card) !important;
}

/* Selling-tab strays: the toggle rows carried their own #2a2a2a slab (the
   switch + label reads fine on the card), and the working-hours block sat on a
   #3c3c3c well of its own. Flat on the card, like every other field group. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.toggle-row, #workHoursBlock) {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important;
}

/* Account-tab strays. Status pills become the app's tile chip (colour stays on
   the text/dot, not the slab); the gcal dot keeps its red/green state colours —
   those are functional, only the resting grey moves onto the token. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.status-pill, #waMetaStatus, #igStatus, #waCoexStatus) {
  background: var(--kb-tile) !important; border: 0 !important;
  border-radius: 999px !important; color: var(--kb-text) !important;
  font-size: var(--t-micro) !important; font-weight: var(--w-label) !important;
  padding: 3px 10px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #systemPrompt {
  background: var(--kb-tile) !important; border: 0 !important;
  border-radius: var(--r-tile) !important; color: var(--kb-text) !important;
}
/* Legacy .switch checkboxes (WhatsApp/IG sections) take the same switch as the
   toggle rows. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none;
  width: 62px !important; height: 24px !important; min-width: 0; min-height: 24px !important;
  padding: 0 !important; flex: 0 0 auto;
  border-radius: 999px; border: 0 !important; cursor: pointer;
  background: var(--kb-line) !important; position: relative; margin: 0;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"])::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform var(--dur, .18s) ease;
}
/* State word rides the free side of the track, FULL text, UI font — the old
   button-style ::after ("On"/"Off" centered in a 52px button) was clipping to
   "C…"/"ff" inside the 44px knob pill (owner screenshot 2026-08-11). */
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"])::after {
  content: "Off"; position: absolute; top: 50%; transform: translateY(-50%);
  right: 9px; left: auto; width: auto; height: auto; background: none; border-radius: 0;
  font-family: var(--sans); font-size: 10.5px; font-weight: var(--w-num, 600);
  letter-spacing: 0.04em; color: var(--kb-muted);
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"]):checked { background: #d9ff5e !important; }
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"]):checked::before { transform: translateX(38px); }
html:is([data-theme], :not([data-theme])) body #page-setup :is(input.switch, :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"]):checked::after {
  content: "On"; left: 10px; right: auto; color: #1a2000;
}
html:is([data-theme], :not([data-theme])) body #page-setup #gcalDot:not(.is-on) { background: var(--kb-muted) !important; }

/* ── Growing lists get a fixed viewport (owner 2026-08-08) ───────────────────
   Overheads, crew, work samples and knowledge entries all grow without bound.
   Their cards were sized by content, so adding a row re-flowed the whole
   masonry. Each list now scrolls inside a fixed 208px window — card height is
   constant whether the list holds 0 rows or 50, so the layout never moves.
   The card's heading, add-form and buttons stay put outside the scroll area. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body #page-setup
    :is(#setupOverheads .fin-oh-list, #teamResourcesList, #contentDropsList, #kbList) {
    height: 208px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}
/* Below the masonry breakpoint the page is one column and reflow is harmless,
   so lists grow naturally — a fixed window on a phone just hides content. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#setupOverheads .fin-oh-list, #teamResourcesList, #contentDropsList, #kbList)::-webkit-scrollbar {
  width: 6px;
}
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#setupOverheads .fin-oh-list, #teamResourcesList, #contentDropsList, #kbList)::-webkit-scrollbar-thumb {
  background: var(--kb-line); border-radius: 999px;
}
/* Empty states sit at the top of the window rather than centring in dead space. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#teamResourcesList, #contentDropsList, #kbList) > .muted:only-child,
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(#teamResourcesList, #contentDropsList, #kbList) > p.muted:only-child {
  padding-top: 2px;
}

/* The required marker reads as an accent, not as part of the label text.
   Uses the same literal "Label *" convention already in the app's forms. */
html:is([data-theme], :not([data-theme])) body #page-setup label > span {
  --req: #d9ff5e;
}

/* One-click regional seed, shown only while the event list is empty. */
html:is([data-theme], :not([data-theme])) body #page-setup .qc-state-seed {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 10px; padding: 12px 14px;
  background: var(--kb-tile); border-radius: var(--r-tile);
  font-size: var(--t-sm); color: var(--kb-text);
}
html:is([data-theme], :not([data-theme])) body #page-setup .qc-state-seed .lib-add-btn {
  background: #d9ff5e !important; color: #1a2000 !important;
  -webkit-text-fill-color: #1a2000 !important; border: 0 !important;
  height: 32px !important; border-radius: 999px !important; padding: 0 14px !important;
  font-size: var(--t-sm) !important; font-weight: var(--w-label) !important;
}

/* ── ONBOARDING WIZARD (owner 2026-08-09) ────────────────────────────────────
   Full-screen cards with Back/Next, replacing the chat flow for the data-heavy
   half — a services × half/full grid and a 15-row event table cannot live in a
   chat bubble. Built on the CURRENT app tokens (--kb-* surfaces, the six-size
   --t-* scale, --r-card), NOT the legacy --mid-* set the old onboarding used,
   so the wizard and the app read as one product. Works light and dark. */
.onbw {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--kb-canvas); color: var(--kb-text);
}
.onbw-top { display: flex; align-items: center; gap: 12px; padding: 18px 24px 0; }
.onbw-brand { display: flex; align-items: center; gap: 9px; font-size: var(--t-body); font-weight: var(--w-num); }
.onbw-brand .onbw-mark {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: #d9ff5e; color: #1a2000; font-size: var(--t-sm); font-weight: var(--w-num);
}
.onbw-step { margin-left: auto; font-size: var(--t-micro); color: var(--kb-muted); }
.onbw-later {
  margin-left: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: var(--t-micro); font-weight: var(--w-label);
  background: transparent; border: 1px solid var(--kb-line); color: var(--kb-muted);
}
.onbw-later:hover { color: var(--kb-text); border-color: var(--kb-muted); }
.onbw-prog { height: 3px; margin: 14px 24px 0; border-radius: 999px; background: var(--kb-tile); overflow: hidden; }
.onbw-prog > i { display: block; height: 100%; width: 0; background: #d9ff5e; transition: width .32s ease; }

/* One card, centred, scrolling inside itself so the shell never scrolls. */
/* No card. A full-page question is the page — a boxed card inside an empty
   screen just drew a second frame around the frame (owner 2026-08-09).
   `margin:auto` on a flex child centres short cards BOTH ways and still
   scrolls tall ones from the top; `align-items:center` would clip them. */
.onbw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 24px 24px; display: flex; }
.onbw-card {
  width: 100%; max-width: 660px; margin: auto;
}
/* Table-like cards (services, deliverables, events) need more room than a
   question with two fields — at 660px the event name column was 216px, which
   wrapped both the title and its hint onto three lines. */
.onbw-card.is-wide { max-width: 880px; }
.onbw-card {
  background: none; border: 0; border-radius: 0; padding: 0;
}
.onbw-card h2 { font-size: var(--t-display); font-weight: var(--w-reg, 400); line-height: 1.2; margin: 0 0 10px; letter-spacing: -.01em; text-align: center; }
.onbw-card .onbw-blurb { font-size: var(--t-body); line-height: 1.55; color: var(--kb-muted); margin: 0 auto 26px; white-space: pre-wrap; text-align: center; max-width: 560px; }
.onbw-field { display: block; margin: 0 0 16px; }
.onbw-field > span { display: block; font-size: var(--t-sm); font-weight: var(--w-label); margin-bottom: 6px; }
.onbw-field input, .onbw-field select, .onbw-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: var(--r-tile);
  background: var(--kb-tile); border: 1px solid var(--kb-line); color: var(--kb-text);
  font-size: var(--t-body); font-family: var(--sans);
  /* Inputs inherit a 1.4 line-height from the app; a <select> computes `normal`,
     so the two sat ~1px apart side by side. Pin both. */
  line-height: 1.4;
}
/* Native select chrome varies per browser/OS — draw our own chevron so the
   control matches the text inputs exactly, in every theme. */
.onbw-field select option { font-family: var(--sans); font-size: var(--t-body); }
.onbw-field select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.onbw-field input:focus, .onbw-field select:focus { outline: 2px solid #d9ff5e; outline-offset: -1px; }
.onbw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.onbw-req { color: var(--kb-muted); }

/* Chips (agent name, personality, multi-selects) */
.onbw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.onbw-chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: var(--t-sm);
  font-weight: var(--w-label); background: var(--kb-tile);
  border: 1px solid var(--kb-line); color: var(--kb-muted); transition: all .12s;
}
.onbw-chip.is-on { background: #d9ff5e; border-color: #d9ff5e; color: #1a2000; }

/* A quiet line under a field explaining what the answer changes ("I introduce
   you with this…"). Same muted grey as the optional-field marker. */
.onbw-note { margin: 10px 0 0; font-size: var(--t-sm); color: var(--kb-muted); line-height: 1.5; }

/* Logo / cover preview on the quote-template card. Empty state is the dashed
   well; once uploaded the image fills it (contain for a logo, cover crops). */
.onbw-thumb {
  height: 92px; border-radius: var(--r-tile); margin-bottom: 10px;
  background: var(--kb-tile) center/contain no-repeat;
  border: 1px dashed var(--kb-line);
}
.onbw-thumb.has-img { border-style: solid; background-size: cover; }
/* …but the LOGO well contains rather than crops, and drops its fill so transparency
   reads against the card (owner, 2026-08-13). */
#thumbLogo.has-img { background-color: transparent; background-size: contain; }

/* Setup → Selling: the studio's half/full-day lengths, under the services table.
   Same well as the table so it reads as part of the rate card, not a stray field. */
.lib-shift-hours {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px; border-radius: var(--mid-radius, 12px);
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  color: var(--mid-text-2); font-size: 13px;
}
.lib-shift-hours .lib-shift-label { font-weight: 600; color: var(--mid-text); }
.lib-shift-hours label { display: inline-flex; align-items: center; gap: 6px; }
.lib-shift-hours input {
  width: 64px; padding: 6px 8px; border-radius: 8px; text-align: center;
  background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line);
}
.lib-shift-hours .muted { flex: 1 1 240px; color: var(--mid-muted); }

/* Services + deliverables: a row per item with its half/full or qty inputs. */
.onbw-rows { display: flex; flex-direction: column; gap: 8px; }
.onbw-row {
  /* FIXED control columns, not `auto` — with auto, each row's inputs started
     wherever its label happened to end, so quantity and price staggered down
     the list. Fixed tracks make them line up in a column regardless of how
     long the deliverable is called. */
  display: grid; grid-template-columns: 1fr 116px 116px 116px; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-tile);
  background: var(--kb-card); border: 1px solid var(--kb-line);
}
.onbw-row > :nth-child(2), .onbw-row > :nth-child(3) { justify-self: start; }
.onbw-row.is-off { opacity: .5; }
.onbw-row-name { font-size: var(--t-body); }
.onbw-row input[type="number"], .onbw-row input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; font-size: var(--t-body);
  background: var(--kb-card); border: 1px solid var(--kb-line); color: var(--kb-text);
  font-variant-numeric: normal;
}
.onbw-row-cap { font-size: var(--t-micro); color: var(--kb-muted); }

/* Multi-select circle. It used to reuse .onbw-chip — tile background on a tile
   row, which in dark mode was #202020 on #202020 and effectively invisible.
   Now a real circle with a contrasting outline in both themes. */
.onbw-check {
  width: 22px; height: 22px; flex: 0 0 22px; margin-right: 11px; padding: 0;
  border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center;
  background: transparent; border: 1.5px solid var(--kb-muted); color: transparent;
  font-size: var(--t-sm); line-height: 1; transition: all .12s; vertical-align: -5px;
}
.onbw-check:hover { border-color: var(--kb-text); }
.onbw-check.is-on { background: #d9ff5e; border-color: #d9ff5e; color: #1a2000; }

/* Event table — side badge, half/full switch, expandable crew, live price. */
.onbw-ev { border-radius: var(--r-tile); background: var(--kb-card); border: 1px solid var(--kb-line); overflow: hidden; }
.onbw-ev + .onbw-ev { margin-top: 8px; }
.onbw-ev-head {
  display: grid; grid-template-columns: auto 1fr 74px 186px 96px;
  align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
}
.onbw-ev-head > .onbw-side, .onbw-ev-head > .onbw-shift, .onbw-ev-head > .onbw-ev-price { justify-self: start; }
.onbw-ev-name { font-size: var(--t-body); }
/* One-line plain-English hint for functions whose generic name is not
   self-explanatory ("Pre-wedding prayers", "Home welcome"). */
.onbw-ev-name small { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--kb-muted); }
.onbw-side {
  text-align: center; font-size: var(--t-micro); padding: 3px 9px; border-radius: 999px;
  background: var(--kb-card); border: 1px solid var(--kb-line); color: var(--kb-muted);
}
.onbw-shift { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--kb-card); border: 1px solid var(--kb-line); }
.onbw-shift button {
  border: 0; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: var(--w-label); color: var(--kb-muted);
}
.onbw-shift button.is-on { background: #d9ff5e; color: #1a2000; }
.onbw-ev-price { font-size: var(--t-body); font-weight: var(--w-num); color: var(--kb-value); font-variant-numeric: normal; }
.onbw-ev-body { padding: 0 14px 14px; display: none; }
.onbw-ev.is-open .onbw-ev-body { display: block; }
.onbw-crew { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.onbw-crew-name { font-size: var(--t-body); color: var(--kb-muted); }
.onbw-qty { display: inline-flex; align-items: center; gap: 8px; }
.onbw-qty button {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: var(--t-sm);
  background: var(--kb-card); border: 1px solid var(--kb-line); color: var(--kb-text);
}
.onbw-qty b { min-width: 16px; text-align: center; font-weight: var(--w-num); font-variant-numeric: normal; }

/* Inline "add your own" form — replaces the native prompt()/confirm() dialogs,
   which appeared in the browser's own visual language mid-wizard. */
.onbw-inline {
  margin-top: 14px; padding: 18px 20px; border-radius: var(--r-tile);
  background: var(--kb-card); border: 1px solid var(--kb-line);
}
.onbw-inline h3 { font-size: var(--t-body); font-weight: var(--w-num); margin: 0 0 14px; }
.onbw-inline .onbw-field { margin-bottom: 12px; }
.onbw-inline-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.onbw-inline-foot .onbw-next { margin-left: 0; padding: 9px 22px; }
.onbw-inline-foot .onbw-back { padding: 9px 18px; }

/* Footer: Back / Next, always reachable. */
.onbw-foot {
  display: flex; align-items: center; gap: 12px; padding: 16px 24px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--kb-line); background: var(--kb-panel);
}
.onbw-back {
  padding: 11px 20px; border-radius: 999px; cursor: pointer; font-size: var(--t-sm); font-weight: var(--w-label);
  background: transparent; border: 1px solid var(--kb-line); color: var(--kb-text);
}
.onbw-next {
  margin-left: auto; padding: 11px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: var(--t-sm); font-weight: var(--w-num); background: #d9ff5e; color: #1a2000;
}
.onbw-next:disabled { opacity: .45; cursor: not-allowed; }

/* Ready card — narrates REAL work, one line per completed step. */
.onbw-ready { text-align: center; padding: 40px 0 10px; }
.onbw-steps { display: flex; flex-direction: column; gap: 12px; max-width: 380px; margin: 26px auto 0; text-align: left; }
.onbw-stepline { display: flex; align-items: center; gap: 10px; font-size: var(--t-body); color: var(--kb-muted); opacity: .35; transition: opacity .3s; }
.onbw-stepline.is-doing { opacity: 1; color: var(--kb-text); }
.onbw-stepline.is-done { opacity: 1; color: var(--kb-muted); }
.onbw-stepline .onbw-tick { width: 18px; text-align: center; color: var(--kb-value); }

@media (max-width: 700px) {
  .onbw-card { padding: 22px 18px; border-radius: var(--r-tile); }
  .onbw-card h2 { font-size: var(--t-h); }
  .onbw-grid2 { grid-template-columns: 1fr; }
  .onbw-body { padding: 20px 14px; }
  /* Two tidy rows: name + price on top, side + shift beneath. A bare
     "1fr auto" let the name drift right and stretched the side badge to
     full width, so every event ate three ragged lines. */
  .onbw-ev-head {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "chev name price" "side side shift";
    row-gap: 10px; column-gap: 8px;
  }
  .onbw-ev-head > .material-symbols-outlined { grid-area: chev; }
  .onbw-ev-name  { grid-area: name; text-align: left; }
  .onbw-ev-price { grid-area: price; justify-self: end; }
  .onbw-side     { grid-area: side; justify-self: start; }
  .onbw-shift    { grid-area: shift; justify-self: end; }
  .onbw-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .onbw-row input[type="number"], .onbw-row input[type="text"] { width: 92px; }
}



/* ── `hidden` must actually hide (2026-08-09) ────────────────────────────────
   Both of these carry an author `display` declaration, which OVERRIDES the UA
   sheet's `[hidden] { display: none }`. Consequences seen live:
     • the go-live banner showed its STATIC markup placeholder ("Almost live",
       "0/3") even when renderDashGoLive had never populated it — so it
       disagreed with the Setup page, which reads the same endpoint;
     • its "Later" button sets .hidden = true and nothing happened, so the
       button looked broken.
   Other popovers in this file (.create-menu-pop, .profile-menu-pop,
   .global-search-results, .login-banner, .page) already carry this guard —
   these two were missed. */
.setup-banner[hidden] { display: none !important; }
.today-queue[hidden]  { display: none !important; }

/* Go-live banner sits UNDER the studio's-week sentence (owner 2026-08-09).
   .sg-headrow is a wrapping flex row, so as a plain sibling the banner landed
   BESIDE the sentence. Force it onto its own full-width line. It stays part of
   the greeting block and vanishes the moment setup is complete. */
#sageDash .sg-headrow > .setup-banner {
  flex: 1 0 100%; width: 100%; box-sizing: border-box;
  margin: 4px 0 0; order: 2;
}
#sageDash .sg-headrow > .dash-health-line { order: 3; }

/* Go-live checklist: head row + one row per PENDING step (owner 2026-08-09).
   The banner used to show only the next step, so "connect WhatsApp" was
   invisible behind the two before it. Each row disappears as its step
   completes; the strip itself goes when the last one does. */
.setup-banner { flex-direction: column; align-items: stretch; gap: 10px; }
.setup-banner .sb-head { display: flex; align-items: baseline; gap: 14px; }
.setup-banner .sb-head #sbTitle { font-size: var(--t-body); font-weight: var(--w-num); }
.setup-banner .sb-head .sb-later { margin-left: auto; }
.setup-banner .sb-steps { display: flex; flex-direction: column; gap: 6px; }
.setup-banner .sb-step {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--kb-tile, rgba(255,255,255,.04));
  border: 1px solid var(--kb-line-soft, transparent);
}
.setup-banner .sb-step-ico { font-size: 16px; color: var(--kb-muted); flex: 0 0 auto; }
.setup-banner .sb-step-txt { flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); }
.setup-banner .sb-step-txt b { font-weight: var(--w-label); }
.setup-banner .sb-step-cta {
  flex: 0 0 auto; text-decoration: none; padding: 6px 16px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: var(--w-num);
  background: #d9ff5e; color: #1a2000;
}
.setup-banner .sb-step-cta:hover { filter: brightness(.95); }
@media (max-width: 620px) {
  .setup-banner .sb-step { flex-wrap: wrap; }
  .setup-banner .sb-step-txt { flex-basis: calc(100% - 28px); }
  .setup-banner .sb-step-cta { margin-left: auto; }
}

/* ── CHAT on the CURRENT tokens (owner 2026-08-09) ───────────────────────────
   The chat was the last surface still on the retired --mid-* set plus a pile of
   hardcoded values — glass blur, rgba(255,255,255,.7) bubbles, a #005ab3 blue
   "out" bubble, #956400 tags — from before the app moved to --kb-* and the
   six-size type scale. Appended (not edited in place) so it wins on order and
   the older rules stay as fallbacks for anything I've missed. */
.inbox-messages { background: var(--kb-canvas); padding: 20px; gap: 12px; }
.msg-bubble { font-size: var(--t-body); border-radius: 16px; padding: 10px 14px; }
.msg.in .msg-bubble {
  background: var(--kb-card);
  border: 1px solid var(--kb-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* glass belonged to the old look */
  color: var(--kb-text);
  border-top-left-radius: 4px;
}
.msg.out .msg-bubble {
  background: #d9ff5e;            /* the app's one accent, as everywhere else */
  color: #1a2000;
  box-shadow: none;
  border: 1px solid #d9ff5e;
  border-top-right-radius: 4px;
}
.msg.out .msg-bubble a { color: #1a2000; text-decoration: underline; }
.msg-meta { font-size: var(--t-micro); color: var(--kb-muted); letter-spacing: normal; }
.msg-tag { font-weight: var(--w-label); text-transform: none; letter-spacing: normal; color: var(--kb-muted); }
.msg.out .msg-meta, .msg.out .msg-tag { color: var(--kb-muted); }

/* `.contact-chat .inbox-compose` (0,2,0) out-specifies a bare `.inbox-compose`
   (0,1,0) — the same trap that kept the login canvas on --mid-base. Match it. */
.inbox-compose,
.contact-chat .inbox-compose { border-top: 1px solid var(--kb-line); background: var(--kb-panel); padding: 12px 16px; }
.contact-chat .inbox-messages { background: var(--kb-canvas); }
.contact-chat-bar { border-bottom: 1px solid var(--kb-line); background: var(--kb-panel); }
.contact-chat-bar.is-open .cc-window-text { color: var(--kb-value); }
.contact-chat-bar.is-closed .cc-window-text { color: var(--kb-muted); }
.cc-window-text strong { color: var(--kb-text); }
/* Template send is a SECONDARY action — it was warm-orange, louder than the
   primary. Neutral chip; lime stays reserved for the one primary action. */
.cc-tpl-btn { background: var(--kb-tile); color: var(--kb-text); border: 1px solid var(--kb-line);
  font-size: var(--t-sm); font-weight: var(--w-label); border-radius: 999px; padding: 6px 14px; }
.cc-tpl-btn:hover { border-color: var(--kb-muted); }
.cc-send-btn, .cc-send-btn:hover { background: #d9ff5e; color: #1a2000; border-radius: 12px; }
.cc-send-btn:disabled { background: var(--kb-tile); color: var(--kb-muted); }
.inbox-compose-row textarea {
  border: 1px solid var(--kb-line); border-radius: var(--r-tile);
  background: var(--kb-tile); color: var(--kb-text);
  font-size: var(--t-body); font-family: var(--sans); line-height: 1.4;
}
.inbox-compose-row textarea:focus { outline: 2px solid #d9ff5e; outline-offset: -1px; border-color: #d9ff5e; box-shadow: none; }
.inbox-banner {
  background: var(--kb-tile); border: 1px solid var(--kb-line); color: var(--kb-text);
  font-size: var(--t-sm); border-radius: var(--r-tile);
}
.contact-chat-bar {
  background: var(--kb-panel); border-bottom: 1px solid var(--kb-line);
  color: var(--kb-text); font-size: var(--t-sm);
}
.cc-window-text { color: var(--kb-muted); font-size: var(--t-sm); }
.cc-send-btn { background: #d9ff5e; color: #1a2000; border: 0; }
.cc-send-btn:disabled { opacity: .4; }

/* ── Template modal on the CURRENT tokens (owner 2026-08-09) ─────────────────
   It was still on the retired --mid-* set, so `--mid-surface-3` rendered as the
   old bone/cream card in the light app — a different colour AND a different type
   scale from every other dialog. Appended so it wins on order. */
.tpl-modal-card {
  background: var(--kb-card); color: var(--kb-text);
  border: 1px solid var(--kb-line); border-radius: var(--r-card, 20px);
  box-shadow: none; padding: 24px;
}
.tpl-modal-backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.tpl-modal-head h3 { font-size: var(--t-h); font-weight: var(--w-reg, 400); color: var(--kb-text); }
.tpl-modal-card p.muted, .tpl-modal-head p.muted { color: var(--kb-muted) !important; font-size: var(--t-sm); }
.tpl-modal-head .icon-btn { color: var(--kb-muted); }
.tpl-pick-row {
  border: 1px solid var(--kb-line); border-radius: var(--r-tile, 14px);
  background: var(--kb-tile); color: var(--kb-text);
}
.tpl-pick-row:hover { border-color: var(--kb-muted); background: var(--kb-tile); }
.tpl-pick-head strong { color: var(--kb-text); font-size: var(--t-body); font-weight: var(--w-label); }
.tpl-pick-body { font-size: var(--t-sm); color: var(--kb-muted); }
.tpl-picker-form .tpl-picker-name { font-size: var(--t-body); color: var(--kb-text); }
.tpl-var-row span { font-size: var(--t-sm); color: var(--kb-text); }
.tpl-var-row input {
  border: 1px solid var(--kb-line); border-radius: var(--r-tile, 14px);
  background: var(--kb-tile); color: var(--kb-text); font-size: var(--t-body); padding: 11px 13px;
}
.tpl-var-row input:focus { outline: 2px solid #d9ff5e; outline-offset: -1px; border-color: #d9ff5e; }
.tpl-var-row input::placeholder { color: var(--kb-muted); }
/* The preview is a WhatsApp message — show it as the outgoing bubble, not a
   green info box, so it previews what the couple will actually see. */
.tpl-picker-preview {
  background: #d9ff5e; border: 1px solid #d9ff5e; color: #1a2000;
  border-radius: var(--r-tile, 14px); font-size: var(--t-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE PALETTE FOR EVERY OVERLAY (owner 2026-08-09)
   ───────────────────────────────────────────────────────────────────────────
   The app carries TWO complete palettes. The retired --mid-* set is still used
   by ~2,350 declarations, and in the light theme it is a warm bone/olive scheme:

       page    --mid-base   #edeee4   vs  --kb-canvas #f4f4f2
       raised  --mid-surface-3 #e7e9dc vs --kb-tile   #f0f0ed
       outline --mid-line   #d6d8c9   vs  --kb-line   #e6e6e3
       text    --mid-text   #232920   vs  --kb-text   #121212
       muted   --mid-muted  #646d5c   vs  --kb-muted  #6e6e6e
       ACCENT  --mid-accent #56671f   vs  the house lime #d9ff5e

   So a dialog on --mid-* rendered cream-and-olive next to a card on --kb-*.
   That is what made the template modal look like a different product.

   Rewriting 2,350 declarations would be reckless. Custom properties INHERIT, so
   instead the legacy names are re-pointed at the current palette ON THE OVERLAY
   CONTAINERS. Everything inside them keeps using var(--mid-…) and silently
   resolves to the right colour, in both themes, with no per-rule edits.

   Scoped deliberately to overlays — popups, dialogs, dropdowns, toasts, banners
   — which is where the mismatch is visible and where this was asked for. The
   rest of the app keeps its current appearance. */
.modal, .modal-content, .modal-overlay,
.px-modal, .lib-modal, .lib-modal-overlay, .tpl-modal, .tpl-modal-card,
.cal-modal, .dup-modal, .evo-modal, .qdoc-modal, .uperm-modal, .upg-modal,
.notif-pop, .notif-menu, .create-menu-pop, .profile-menu-pop, .nav-more-pop,
.dash-filter-pop, .chat-search-pop, .sg-combo-pop, .global-search-results,
.stage-menu, .stage-menu-opt, .detail-overlay,
.app-toast, .inbox-banner, .setup-banner {
  --mid-base:      var(--kb-canvas);
  --mid-surface:   var(--kb-panel);
  --mid-surface-2: var(--kb-card);
  --mid-surface-3: var(--kb-tile);
  --mid-lowest:    var(--kb-tile);
  --mid-line:      var(--kb-line);
  --mid-text:      var(--kb-text);
  --mid-text-2:    var(--kb-text);
  --mid-text-3:    var(--kb-muted);
  --mid-muted:     var(--kb-muted);
  --mid-accent:    #d9ff5e;          /* light --mid-accent was OLIVE #56671f */
  --mid-on-accent: #1a2000;
  --mid-primary:   var(--kb-text);
  --mid-shadow:    none;
}

/* Two overlays kept their own private palettes and so ignored the remap above. */

/* TOAST — `html[data-theme] .app-toast` hardcoded a dark-green pill (#2a3325 on
   #edeee4) in BOTH themes, so it never matched anything. Ink surface in light,
   card surface in dark, like every other floating element. */
html[data-theme] .app-toast {
  background: var(--kb-text); color: var(--kb-canvas); border: none;
  box-shadow: none; font-size: var(--t-sm); font-weight: var(--w-label);
}
html[data-theme] .app-toast.is-error { background: #b3422f; color: #fdf3f0; }

/* PX-MODAL — a THIRD design language: its own --pm-* palette, the retired
   #d9ff5e lime, 900-weight headings and 11px uppercase labels. Re-point the
   private names at the app palette rather than rewriting each rule. */
.px-modal {
  --pm-card: var(--kb-card); --pm-ink: var(--kb-text); --pm-mut: var(--kb-muted);
  --pm-line: var(--kb-line); --pm-lime: #d9ff5e; --pm-well: var(--kb-tile);
  border: 1px solid var(--kb-line); border-radius: var(--r-card, 20px);
  box-shadow: none;
}
html[data-theme="dark"] .px-modal {
  --pm-card: var(--kb-card); --pm-ink: var(--kb-text); --pm-mut: var(--kb-muted);
  --pm-line: var(--kb-line); --pm-well: var(--kb-tile);
}
.px-modal h3 { font-weight: var(--w-reg, 400); font-size: var(--t-h); letter-spacing: -.01em; }
.px-modal label { font-size: var(--t-sm); font-weight: var(--w-label);
  letter-spacing: normal; text-transform: none; color: var(--kb-text); }

/* Corner radius, settled: dialogs take the card radius, popovers/dropdowns the
   tile radius. They were mixed 22 / 20 / 12px across families. */
.modal-content, .px-modal, .lib-modal, .tpl-modal-card,
.cal-modal, .dup-modal, .evo-modal, .qdoc-modal, .uperm-modal, .upg-modal {
  border-radius: var(--r-card, 20px);
}
.notif-pop, .create-menu-pop, .profile-menu-pop, .nav-more-pop,
.dash-filter-pop, .chat-search-pop, .sg-combo-pop, .global-search-results, .stage-menu {
  border-radius: var(--r-tile, 14px);
}

/* Field labels inside overlays: sentence case on the type scale. The app moved
   to sentence case everywhere; these dialog labels were still 10–11px uppercase
   with wide tracking, which is what made a modal read as a different product. */
.modal-body label > span,
#ticketDetailContent .ticket-controls label > span,
.gs-group-label {
  font-size: var(--t-sm); font-weight: var(--w-label);
  letter-spacing: normal; text-transform: none; color: var(--kb-text);
}
.gs-group-label { color: var(--kb-muted); }

/* The toast's ink styling lived only under `html[data-theme] …`, so before the
   theme attribute is stamped it fell back to a pale surface. Same look either
   way now. */
.app-toast {
  background: var(--kb-text); color: var(--kb-canvas);
  border: none; box-shadow: none;
  font-size: var(--t-sm); font-weight: var(--w-label);
}

/* ── Crew status chips ────────────────────────────────────────────────────────
   A NAME on a slot is not a confirmation. These make the difference visible at a
   glance: confirmed is quiet, waiting is warm, a conflict is loud. Always-dark
   --mid-* tokens, since these appear in panels outside #page-dashboard. */
.crew-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 18px;
  background: var(--mid-surface-2); color: var(--mid-text-2);
  white-space: nowrap;
}
.crew-chip .material-symbols-outlined { font-size: 14px; line-height: 1; }
.crew-chip.is-confirmed { color: #8ed5ff; }
/* Warm, not red: waiting is normal, it just needs to be visible. */
.crew-chip.is-waiting { color: #ffc176; }
/* The only one that should feel urgent — someone said they can't come. */
.crew-chip.is-conflict { background: rgba(255, 120, 120, 0.14); color: #ff9b9b; }
.crew-chip.is-none { color: var(--mid-muted); }

/* ═══ STATE OVERRIDES — KEEP LAST IN FILE ══════════════════════════════════════
   The themed slabs above set background/display with !important at ID-level
   specificity (e.g. the account-tab pill→tile rule, the #page-setup button
   restyle). These two states must beat them, so they carry equal-or-higher
   specificity AND come last. Verified in a live-markup harness 2026-08-11. */
/* Connected pill = the fluorescent lime accent, both themes. */
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.status-pill, #waMetaStatus, #igStatus, #waCoexStatus).status-ok {
  background: #d9ff5e !important; color: #1a2000 !important;
}
/* hidden must actually hide a button — the setup restyle forces
   display:inline-flex !important on #page-setup buttons, defeating [hidden]. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(button.button, a.button)[hidden],
.button[hidden] { display: none !important; }
/* Greyed comm actions — a missing phone disables the buttons, never removes them. */
.dlp-icon-btn.is-disabled, .ctc-wa.is-disabled { opacity: 0.35; pointer-events: none; cursor: default; }
/* ── Service page — platform ticket pipeline ── */
.svc-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* Phones/tablets: side-scroll the stage columns, exactly like the Leads board —
   never a vertical mile of stacked stages (owner 2026-08-11). */
@media (max-width: 1100px) {
  .svc-board { display: flex; overflow-x: auto; padding-bottom: 20px; align-items: flex-start; -webkit-overflow-scrolling: touch; }
  .svc-board .svc-col { flex: 0 0 300px; min-width: 300px; }
}
.svc-col { background: var(--kb-panel, #141414); border: 1px solid var(--kb-line, #262626); border-radius: var(--r-card, 20px); padding: 14px; }
.svc-col-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm, 13px); font-weight: var(--w-label, 500); color: var(--kb-muted, #6e6e6e); margin-bottom: 8px; }
.svc-col-head b { font-size: var(--t-body, 15px); color: var(--kb-text, #dee3e8); font-weight: var(--w-num, 600); }
.svc-card { background: var(--kb-card, #1a1a1a); border: 1px solid var(--kb-line, #262626); border-radius: var(--r-tile, 14px); padding: 10px 12px; margin-top: 8px; }
.svc-card summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: var(--t-sm, 13px); }
.svc-card .svc-sub { color: var(--kb-muted, #6e6e6e); flex: 1 1 100%; }
.svc-note { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--kb-line, #262626); }
.svc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.svc-actions input { flex: 1; min-width: 140px; }
.svc-empty { padding: 8px 0 2px; }
/* Workspace-kind gating in CSS — instant, non-destructive, driven by the cached
   kind at first paint and corrected by /api/auth/status. Kills the boot flash of
   the other workspace's nav (Service on studios, Quote/Projects on platform). */
body:not(.is-platform) .nav-item[data-page="service"],
body:not(.is-platform) .more-item[data-page="service"] { display: none !important; }
body.is-platform .nav-item[data-page="quotes"], body.is-platform .more-item[data-page="quotes"],
body.is-platform .nav-item[data-page="projects"], body.is-platform .more-item[data-page="projects"],
body.is-platform .sales-subtab[data-page="quotes"] { display: none !important; }
/* ── Merged Calendar card: per-day hours + label-left rows ── */
.wh-week { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.wh-row { display: grid; grid-template-columns: 22px 44px 1fr auto 1fr; gap: 8px; align-items: center; }
/* day toggle = the app's standard knob switch (matches Roles & permissions) */
.wh-row .wh-day-name { font-size: var(--t-sm, 13px); font-weight: var(--w-label, 500); }
.wh-row select { min-width: 0; }
.wh-row .wh-sep { text-align: center; }
.wh-row select:disabled { opacity: 0.4; }
.cal-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cal-row { display: grid !important; grid-template-columns: 1fr 130px; gap: 12px; align-items: center; }
.cal-row > span { display: flex; flex-direction: column; gap: 2px; }
/* Today draft dialog (option A) */
.today-draft-modal-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.today-draft-modal-body textarea { width: 100%; min-height: 150px; resize: vertical; }
.today-draft-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* In-place draft expansion: the row must wrap so the editor takes a FULL line. */
#todayQueue .today-item { flex-wrap: wrap; }
/* Calendar card polish (owner 2026-08-11): full day names, tighter time fields,
   bracketed one-line setting labels, WA/IG-style status pill. */
/* Day rows share ONE right edge with the setting inputs below: name | hours | toggle. */
.wh-row { grid-template-columns: minmax(90px, 1fr) 96px 18px 96px 96px !important; }
.wh-row select { width: 96px; min-width: 0; }
.wh-row .wh-on { justify-self: end; }
.cal-row { grid-template-columns: 1fr 96px !important; }
.cal-row input { width: 96px; }
/* Connected pill + status + Disconnect: one left-aligned line. */
#calendarCard .gcal-connect { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: flex-start; }
#calendarCard .gcal-actions { margin-left: auto; display: flex; gap: 8px; }
/* Toggles sit on the RIGHT of their row — app-wide rule (owner 2026-08-11). */
:is(.toggle-row, .setup-toggle, .switch-row) { display: flex; align-items: flex-start; gap: 12px; }
:is(.toggle-row, .setup-toggle, .switch-row) > input[type="checkbox"] { order: 2; margin-left: auto; flex: 0 0 auto; }
:is(.toggle-row, .setup-toggle, .switch-row) > span { order: 1; }
.cal-row > span { display: block !important; }
/* 13px, not --t-body: these row titles sit beside 13px fields and toggle titles;
   at 15 they were the only body-size text in Setup (owner, 2026-08-13). */
.cal-row-title { font-size: var(--t-sm, 13px); font-weight: var(--w-label, 500); }
/* ── Approved-language sweep (owner 2026-08-11) ──────────────────────────────
   1) No cards inside a card: quote-catalog entries become flat rows divided by
      hairlines, like every other list in Setup. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.qc-evt, .qc-pkg, .qc-svc.cost-card) {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 14px 0 !important; margin-bottom: 0 !important;
  border-bottom: 1px solid var(--kb-line, #262626) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.qc-evt-list, .qc-pkg-list) { gap: 0 !important; }
html:is([data-theme], :not([data-theme])) body #page-setup
  :is(.qc-evt:last-child, .qc-pkg:last-child, .qc-svc.cost-card:last-child) { border-bottom: 0 !important; }
/* 2) Roles & permissions: the list language, not a bordered spreadsheet. The
      Superadmin column was a static ✓ repeated 23 times — the header copy already
      says Superadmin has everything, so the column goes. */
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid .table-wrap {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid :is(table, thead, tbody, tr) {
  background: transparent !important; border: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid :is(th, td) {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--kb-line, #262626) !important; padding: 12px 8px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid tr:last-child :is(th, td) { border-bottom: 0 !important; }
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid :is(th:nth-child(2), td:nth-child(2)) { display: none !important; }
html:is([data-theme], :not([data-theme])) body #page-setup #rolesPermsGrid :is(th:nth-child(3), th:nth-child(4), td:nth-child(3), td:nth-child(4)) { text-align: right !important; width: 120px; }
/* Toggle rows: text grows, switch pins to ONE shared right column (owner
   2026-08-11 audit — a themed input reset was zeroing the auto margin). */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.toggle-row, .setup-toggle, .switch-row) {
  display: flex !important; width: 100% !important; align-items: flex-start; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.toggle-row, .setup-toggle, .switch-row) > span {
  order: 1 !important; flex: 1 1 auto !important; min-width: 0;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.toggle-row, .setup-toggle, .switch-row) input[type="checkbox"] {
  order: 2 !important; margin-left: auto !important; flex: 0 0 auto !important;
}
/* Quote catalog = FIVE first-class cards (owner 2026-08-11): the outer shell and
   its grid dissolve so each .lib-card sits in the setup masonry directly. */
#quoteCatalogPanel.qc-wrap, #quoteCatalogPanel.qc-wrap > #quoteCatalogEditor,
#quoteCatalogPanel.qc-wrap #quoteCatalogEditor > .lib-grid { display: contents !important; }
#quoteCatalogPanel.qc-wrap .dash-loading { grid-column: 1 / -1; }
/* Catalog rows wear the RESOURCES row style — the approved list language
   (owner 2026-08-11): soft tinted pills, 38px icon tile, no borders. */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.lib-evt-row, .lib-svc-row) {
  background: rgba(42,51,37,0.04) !important; border: 0 !important; border-radius: 12px !important;
  padding: 10px 14px !important; cursor: pointer;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.lib-evt-row, .lib-svc-row):hover {
  background: rgba(42,51,37,0.08) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup :is(.lib-evt-list, .lib-svc-table) {
  display: flex; flex-direction: column; gap: 6px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .lib-svc-row {
  display: grid !important; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; align-items: center;
}
html:is([data-theme], :not([data-theme])) body #page-setup .lib-svc-headrow {
  display: grid; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; padding: 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mid-muted);
}
html:is([data-theme], :not([data-theme])) body #page-setup .lib-evt-ico {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: var(--mid-surface-2); color: var(--mid-accent-ink);
}
/* Row names sit at normal weight — bold made every list read as a stack of headings
   (owner, 2026-08-13). */
html:is([data-theme], :not([data-theme])) body #page-setup :is(.lib-evt-name, .lib-svc-name) {
  font-size: 14px; font-weight: 400;
}

/* Hidden setup cards must actually hide (the hidden-vs-display trap). */
.setup-section[hidden] { display: none !important; }
/* Plan options wear the approved tinted-pill row (matches Event Types). */
html:is([data-theme], :not([data-theme])) body #page-setup .plan-opt-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(42,51,37,0.04) !important; border: 0 !important; border-radius: 12px !important;
  padding: 10px 14px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .plan-opt-row:hover { background: rgba(42,51,37,0.08) !important; }
html:is([data-theme], :not([data-theme])) body #page-setup .plan-opt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html:is([data-theme], :not([data-theme])) body #page-setup .plan-opt-name { font-size: 13px; font-weight: 600; }
/* ── Setup polish batch (owner 2026-08-11) ──────────────────────────────────
   4) Templates list gets real height so existing templates are visible. */
html:is([data-theme], :not([data-theme])) body #page-setup #waTplList {
  min-height: 220px; max-height: 340px; overflow-y: auto; scrollbar-width: thin;
}
/* 5) The create form starts collapsed behind its button. */
#waTplCreateWrap > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#waTplCreateWrap > summary::-webkit-details-marker { display: none; }
#waTplCreateWrap[open] > summary { margin-bottom: 10px; }
/* 2) Team members table wears the approved pill rows (like Event Types). */
html:is([data-theme], :not([data-theme])) body #page-setup .team-table {
  border-collapse: separate !important; border-spacing: 0 6px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .team-table th {
  background: transparent !important; border: 0 !important; padding: 0 10px 2px !important;
  font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--kb-muted, #6e6e6e) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .team-table td {
  background: rgba(42,51,37,0.04) !important; border: 0 !important; padding: 12px 10px !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .team-table td:first-child { border-radius: 12px 0 0 12px !important; }
html:is([data-theme], :not([data-theme])) body #page-setup .team-table td:last-child { border-radius: 0 12px 12px 0 !important; }
/* 3) ONE dropdown language: Setup selects match the deal-panel/leads selects
   (kb tile fill, borderless, tile radius). */
html:is([data-theme], :not([data-theme])) body #page-setup select:not([multiple]):not(.never1):not(.never2) {
  background: var(--kb-tile) !important; color: var(--kb-text) !important;
  border: 1px solid transparent !important; border-radius: var(--r-tile, 14px) !important;
  padding: 9px 12px !important; font-family: inherit !important;
  /* NOT `font: inherit` — that pulled the parent LABEL's 11.5px onto the control,
     so dropdowns read smaller than the inputs beside them (owner, 2026-08-13). */
  font-size: var(--t-sm, 13px) !important; height: auto !important; min-height: 38px;
}
/* Inline go-live steps on the setup-tabs row. */
.gl-inline { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.gl-inline .gl-step { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm, 13px);
  color: var(--kb-muted, #6e6e6e); text-decoration: none; }
.gl-inline .gl-step:hover { color: var(--kb-text, #dee3e8); }
.gl-inline .gl-step .material-symbols-outlined { font-size: 17px; color: var(--kb-muted, #6e6e6e) !important; }
.gl-inline .gl-step.is-done { color: var(--kb-text, #dee3e8); }
.gl-inline .gl-step.is-done .material-symbols-outlined { color: var(--mid-accent-ink) !important; }
/* The completed tick: a SOLID lime disc with dark ink, matching the lime checkbox
   circles. Lime is the literal here for the same reason as those — on the setup page in
   light theme var(--mid-accent) resolves to the olive #56671f. Lime is a FILL, so the
   accent-as-ink rule does not apply: the tick on top is #1a2000. */
.gl-inline .gl-step .gl-tick {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%;
  background: #d9ff5e; display: inline-grid; place-items: center;
}
.gl-inline .gl-step .gl-tick::after {
  content: ""; width: 4px; height: 7px; margin-top: -2px;
  border: solid #1a2000; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.setup-tabs-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.setup-tabs-row .gl-inline { margin-left: auto; background: none; border: 0; padding: 0; }
/* Proposal template internals wear the approved row language (owner 2026-08-11). */
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-imgslot {
  background: rgba(42,51,37,0.04) !important; border: 0 !important; border-radius: 12px !important;
  padding: 10px 14px !important; display: flex; align-items: center; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-imgslot:hover { background: rgba(42,51,37,0.08) !important; }
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-thumb {
  border-radius: 10px !important; background-color: var(--mid-surface-2) !important; border: 0 !important;
}
/* A LOGO IS NOT A PHOTO. Once one is set the well goes transparent so a PNG with an
   alpha channel sits on the card itself instead of a grey slab, and it is CONTAINED,
   not cropped to fill — `cover` was slicing the ends off wide logos. */
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-thumb.has-img {
  background-color: transparent !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* …EXCEPT THE TWO LOGO WELLS, which must contrast with the mark they hold or the preview
   reads as empty (owner, 2026-08-13: "it shows the logos as empty"). A transparent well
   sits on a dark card, so the light-mode slot's BLACK mark vanished into it and the
   dark-mode slot's WHITE mark would vanish on any light card. Each well now shows the
   background that mode actually uses, which doubles as a preview of the real thing. */
html:is([data-theme], :not([data-theme])) body #page-setup #companyLogoThumb.has-img {
  background-color: #ffffff !important;      /* light mode → the dark mark on white */
}
html:is([data-theme], :not([data-theme])) body #page-setup #companyLogoLightThumb {
  background-color: #26292b !important;      /* dark mode → the light mark on near-black */
}
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-galhead {
  background: rgba(42,51,37,0.04) !important; border-radius: 12px !important; padding: 10px 14px !important;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-subhead {
  font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em;
  text-transform: uppercase; color: var(--kb-muted, #6e6e6e) !important;
}
/* Team card: the table WRAPPER's border/box goes too — rows are the surface now. */
html:is([data-theme], :not([data-theme])) body #page-setup .table-wrap {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}

/* ═══ Client portal row in the deal panel (2026-08-17) ═══ */
.dlp-portal-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
/* input only — the portal link is an <a> now and must not wear a field's chrome
   (owner 2026-08-17: "dont make the client portal link look like an input field"). */
html:is([data-theme], :not([data-theme])) body input.dlp-portal-url {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--kb-line, var(--mid-line));
  background: var(--kb-well, var(--mid-lowest)); color: var(--kb-text, var(--mid-text));
  font-size: 13px; font-family: var(--sans); text-overflow: ellipsis;
}
.dlp-portal-pin { margin-top: 8px; font-size: 13px; color: var(--kb-muted, var(--mid-muted)); }
.dlp-portal-pin b {
  font-variant-numeric: tabular-nums; letter-spacing: .16em; font-size: 14px;
  color: var(--kb-text, var(--mid-text)); margin-left: 4px;
}

/* "Show price as" is a rail field like markup and discount — it inherits THEIR rules
   (height, tone, radius, type scale) rather than carrying its own; written standalone it
   came out shorter, differently coloured and with clipped text. What it adds is only what
   a select needs — and it must out-specify the shared rule, which sets `background`
   wholesale (killing any chevron) and right-aligns text for number entry. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-rail-detail select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  text-align: left !important; padding-right: 34px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important;
  background-size: 14px !important;
}

/* Quote shell: full width, not shrink-to-fit ────────────────────────────────
   MEASURED, not guessed: the grid computed 1392px inside a 1579px page with
   93.6px auto margins each side. `.qg-shell { margin: 0 auto }` was harmless
   while #page-quotes was a block, but the fixed-height 3-column layout made it
   `display: flex; flex-direction: column`, and an auto CROSS-AXIS margin beats
   `align-items: stretch` — so the grid stopped filling and started centring at
   its max-content width. Kill the auto margin in that context. */
html:is([data-theme], :not([data-theme])) body.quote-active #page-quotes .qg-shell {
  margin-inline: 0;
  width: auto;
}

/* ═══ ULTRAWIDE CEILING (owner 2026-08-13) ═══════════════════════════════════
   Columns are fr-based, so past ~1920 CSS px the cards just keep stretching under
   normal-size type. Done in ONE place: --page-gutter already drives the shell,
   the topbar, the fixed nav and the full-page detail panels (all `!important`),
   so widening it caps every surface on the same line instead of one page alone.
   Below 1920 the 3% term wins and nothing changes; above it, the gutter absorbs
   the excess and the content stays centred at 1920. */
@media (min-width: 1025px) {
  :root { --page-gutter: max(3%, (100vw - 1920px) / 2); }
}

/* Standard-deliverable marker in the quote builder: it tells the operator this line
   arrived from the catalogue rather than being picked, so removing it is a deliberate
   act. Quiet by design — the deliverable's name is the content, this is a footnote. */
body.quote-active #page-quotes .qgm-del-std {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: var(--mid-surface-3); color: var(--mid-muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  vertical-align: middle;
}

/* ── Onboarding: the photo gallery strip ────────────────────────────────────
   The photo-led proposal templates fill their image slots from these in order, so
   the strip is ordered and each tile is removable — a studio should be able to see
   exactly which photos its quotes will carry, and in what sequence. */
.onbw-gal {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px; margin: 8px 0 6px;
}
.onbw-galitem {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px;
  background: var(--kb-tile) center/cover no-repeat;
  border: 1px solid var(--kb-line);
}
.onbw-galx {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer; line-height: 1;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 14px;
}
.onbw-galadd {
  aspect-ratio: 4 / 3; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--kb-line); background: transparent;
  color: var(--kb-muted); font-size: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.onbw-galadd span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.onbw-galadd:hover { border-color: var(--kb-accent); color: var(--kb-text); }

/* Setup card title row — heading left, its one action right. Used by the Company card
   so "Re-run setup with Gia" reads as belonging to the card rather than trailing the
   last form field (owner, 2026-08-13). */
#page-setup .setup-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#page-setup .setup-card-head h2 { margin: 0; }
@media (max-width: 640px) {
  #page-setup .setup-card-head { align-items: flex-start; }
}

/* ── Company: the two logo marks, side by side ───────────────────────────────
   Owner, 2026-08-13: one row, one sentence about transparency and size, and NO grey
   panel behind either slot — the wells themselves already read as the target, and a
   tinted card around them made the whole block look like a disabled state. */
/* Sits at the FOOT of the Company card now (owner, 2026-08-13), below the assistant
   name — so it needs air above it rather than under the heading. */
#page-setup .logo-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 24px; margin: 18px 0 8px;
}
html:is([data-theme], :not([data-theme])) body #page-setup .logo-slot {
  display: flex; align-items: center; gap: 12px;
  background: none !important; border: 0 !important; padding: 0 !important;
}
#page-setup .logo-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#page-setup .logo-meta strong { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
#page-setup .logo-sub { font-size: var(--t-xs, 12px); color: var(--kb-muted); line-height: 1.35; }
#page-setup .logo-meta .tplc-imgbtns { margin-top: 6px; }
#page-setup .logo-hint {
  margin: 0 0 16px; font-size: var(--t-micro, 11.5px); color: var(--kb-muted); line-height: 1.45;
}

/* ── Setup toggles: label and hint must not read as the same line ────────────
   The muted/smaller rule only ever matched `.toggle-row`, so inside `.setup-toggle`
   the <small> inherited the label's size and ink — two identical lines stacked with
   2px between them (owner screenshot, 2026-08-13). */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-toggle > span {
  gap: 3px;
}
/* Explicit sizes, not tokens: --t-sm and --t-xs both resolve to 11.5px on this card,
   so the label and its hint measured identical (verified in the harness). */
/* !important because two earlier rules force var(--t-micro) on every `label > span`
   and every `small` inside #page-setup — that is what flattened the label and its hint
   to the same 11.5px (measured, 2026-08-13). */
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-toggle > span,
html:is([data-theme], :not([data-theme])) body #page-setup .setup-toggle > span {
  font-size: var(--t-sm, 13px) !important; font-weight: 500 !important;
  line-height: 1.35; color: var(--kb-text) !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-toggle > span > small {
  font-size: var(--t-micro, 11.5px) !important;
  line-height: 1.45;
  color: var(--kb-muted) !important;
  font-weight: 400 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-toggle {
  padding: 10px 0;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-toggle + .setup-toggle {
  border-top: 1px solid var(--kb-line, rgba(0,0,0,.06));
}

/* ── Proposal template: tidy the internals (owner, 2026-08-13) ───────────────
   • Cover photo / Portfolio gallery headers carried the same tinted panel as the
     logo slots did — the card is the surface, nothing inside needs its own.
   • Every group's fields share ONE width, so Terms lines up with Deck content
     instead of running short. */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-section:has(#tplGallery) .tplc-imgslot,
html:is([data-theme], :not([data-theme])) body #page-setup .setup-section:has(#tplGallery) .tplc-galhead {
  background: none !important; padding-left: 0 !important; padding-right: 0 !important;
}
html:is([data-theme], :not([data-theme])) body #page-setup .setup-section:has(#tplGallery)
  :is(input[type="text"], input[type="number"], textarea, select) {
  width: 100% !important; max-width: none !important; box-sizing: border-box;
}

/* ── Setup fixes from the owner's screenshots, 2026-08-13 ────────────────────
   1) The payment-plan remove control was a Material "close" glyph in a grey box —
      out of step with the trash affordance used everywhere else a row is deleted. */
#page-setup .lib-plan-del {
  background: none !important; border: 0 !important;
  color: var(--kb-muted); width: 34px; height: 34px;
}
#page-setup .lib-plan-del svg { width: 17px; height: 17px; display: block; }
#page-setup .lib-plan-del:hover { color: #b3261e !important; background: rgba(179,38,30,.08) !important; }

/* 2) Textarea line-height only — padding is set once, on the canonical textarea rule
      above. Two rules with the same specificity meant whichever sat lower in the file
      won, which is how the top padding kept drifting. */
html:is([data-theme], :not([data-theme])) body #page-setup textarea {
  line-height: 1.5;
}

/* 3) Tax & outstation: label + hint wrap to two lines while the control is centred
      on the row, so the rows collided. Give each row real height and top-align the
      control with the first line of its label. */
html:is([data-theme], :not([data-theme])) body #page-setup #chargesPanel .cal-row {
  align-items: start !important;
  padding: 12px 0;
  row-gap: 6px;
}
html:is([data-theme], :not([data-theme])) body #page-setup #chargesPanel .cal-row + .cal-row {
  border-top: 1px solid var(--kb-line, rgba(0,0,0,.06));
}
html:is([data-theme], :not([data-theme])) body #page-setup #chargesPanel .cal-row > span {
  padding-right: 16px; line-height: 1.45;
}

/* ── People: Resources and Team, paired and equal height ────────────────────
   Owner, 2026-08-13: Team sits beside Resources at half width; Resources shows at
   least five crew without the card growing without bound; Team matches its height
   and scrolls inside.

   A resource row is 44px + 16px gap = 60px, so five rows need 300px. The card's own
   heading + hint + add button take roughly 120px, hence the 420px shell. Both cards
   share it, so the pair always lines up whatever each list holds. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    :is(#teamResourcesPanel, #teamPanel) {
    /* 720 = the measured 480 plus half again (owner, 2026-08-13) — roughly eight
       crew visible before the list needs scrolling at all. */
    height: 720px;
    display: flex; flex-direction: column; min-height: 0;
  }
  /* Only the LIST scrolls — heading, hint and the add/invite controls stay put. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    #teamResourcesPanel #teamResourcesList,
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    #teamPanel .table-wrap {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  }
  /* The invite row and banner keep their natural size above the scrolling list. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    #teamPanel :is(.team-invite-row, .banner, .eyebrow, h2, .muted) { flex: 0 0 auto; }
  /* …and so does the Resources heading row. It was left at the flex default (0 1 auto),
     so once the crew list was long enough to fill the card the header SHRANK to make
     room — slicing the "Add resource" button in half and cutting the first row off
     (owner screenshot, 2026-08-13). Only the list may give ground. */
  html:is([data-theme], :not([data-theme])) body.setup-active #page-setup
    #teamResourcesPanel > *:not(#teamResourcesList) { flex: 0 0 auto; }
}

/* ── Proposal template: Terms sits in a 3-up grid built for the full-width card ──
   Since the card went half width (owner, 2026-08-13) that grid gave its single
   remaining field a THIRD of a half column, so Payment schedule rendered far
   narrower than Deck content directly above it. One column here — the other two
   slots have been empty since cancellation and validity moved to their own card. */
#page-setup .setup-section:has(#tplGallery) .tplc-terms {
  grid-template-columns: minmax(0, 1fr) !important;
}
#page-setup .setup-section:has(#tplGallery) .tplc-terms > label { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SETUP TYPOGRAPHY — one size per role. Owner 2026-08-13: "the font sizes in
   all screens of setup are inconsistent."
   A measured sweep of all six tabs found single roles wearing several sizes:
     field labels 11.5 + 12 · fields 11.5/12/13/14 · helper 11.5/12/12.5/13 ·
     toggle title 14 · table headers 11.
   Four of those were fixed at their source above (select `font: inherit`,
   .team-table th, .setup-toggle span + small, .logo-hint's undefined --t-xs).
   What remains here is the per-card label/helper drift, which had no single
   owner: this locks both to the scale (--t-sm 13 / --t-micro 11.5). Lives LAST
   so it wins over the card rules that drifted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The text that names a field. */
#page-setup :is(label, label > span, .field > span, .cal-row, .mm-field, .kb-textlabel) {
  font-size: var(--t-micro, 11.5px);
  font-weight: 500;
}

/* Helper / hint / caption. `.button.small` is a BUTTON size modifier that happens
   to share the class name — excluded, or every small button shrinks with it. */
#page-setup :is(.small, .hint, .muted, .logo-sub, p.note):not(.button):not(button) {
  font-size: var(--t-micro, 11.5px);
  font-weight: 400;
}

/* Controls. Checkboxes and radios carry no text — left alone. */
#page-setup :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-size: var(--t-sm, 13px);
  font-weight: 400;
}

/* Image-slot captions sit at field-title size like every other row title. */
#page-setup :is(.tplc-imgmeta, .tplc-galhead) strong { font-size: var(--t-sm, 13px); }

/* ── Quote row actions are NEUTRAL, not lime ─────────────────────────────────
   Owner 2026-08-13: "keep them all grey. too much green happening. the one quote
   that is approved can be marked green manually or upon acceptance."
   The blanket .dlp-q-link rule above paints every quote control lime, so a row of
   five icon discs read as five primary actions. Lime stays on the ONE primary
   button (New quote); the per-row discs go neutral, and green is reserved for the
   accepted quote's status pill — which is what "approved" should mean at a glance. */
html:is([data-theme], :not([data-theme])) body
  :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #page-quotes) .dlp-q-ico:not(.n1):not(.n2):not(.n3) {
  background: var(--mid-surface-3, #2f363a) !important;
  color: var(--mid-text-2, #bdc8d1) !important;
}
html:is([data-theme], :not([data-theme])) body
  :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #page-quotes) .dlp-q-ico:not(.n1):not(.n2):not(.n3):hover {
  background: var(--mid-surface-4, #3a4247) !important;
  color: var(--mid-text, #dee3e8) !important;
}
/* Delete keeps its meaning on hover only — never a standing red disc. */
html:is([data-theme], :not([data-theme])) body
  :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #page-quotes) .dlp-q-ico.dlp-q-link-delete:not(.n1):not(.n2):hover {
  background: rgba(159,47,45,0.18) !important; color: #ffb4ab !important;
}
/* The accepted quote is the only green thing in the table. */
html:is([data-theme], :not([data-theme])) body
  :is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel, #page-quotes) .dlp-q-status-accepted:not(.n1):not(.n2) {
  background: rgba(48,209,88,0.18) !important; color: var(--mid-ok, #30D158) !important;
}

/* ── sageConfirm / sageChoice dialogs wear the app's card language ───────────
   Owner 2026-08-13: "open quote builder popup in projects card needs the ui update."
   These dialogs still used the pre-redesign --sg-* palette and a 22px radius, so a
   confirm landed on the page looking like a stray alert instead of one of the app's
   cards. Same tokens the cards use (--kb-*), so it recolours with the theme. */
.sg-dialog-veil .sg-dialog {
  background: var(--kb-panel, var(--mid-surface-2, #252b2e));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: var(--r-card, 20px);
  padding: var(--pad-card, 26px);
  max-width: 420px;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.45);
  font-family: var(--sans);
}
.sg-dialog-veil .sg-dialog p {
  margin: 0 0 20px;
  font-size: var(--t-body, 14px); line-height: 1.55;
  color: var(--kb-text, var(--mid-text, #dee3e8));
}
.sg-dialog-veil .sg-dialog-actions { gap: 10px; }
.sg-dialog-veil .sg-dialog-btn {
  height: 38px; font-size: var(--t-sm, 13px); font-weight: var(--w-label, 500);
  background: var(--kb-tile, var(--mid-surface-3, #2f363a));
  color: var(--kb-text, var(--mid-text-2, #bdc8d1));
}
.sg-dialog-veil .sg-dialog-btn:hover { background: var(--kb-tile-hi, var(--mid-surface-4, #3a4247)); }
/* The one affirmative action keeps the accent — everything else stays neutral. */
.sg-dialog-veil .sg-dialog-ok { background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000); font-weight: 600; }
.sg-dialog-veil .sg-dialog-choices .sg-choice { font-size: var(--t-sm, 13px); }

/* A ceremony with no catalogue price adds ₹0 — say so where the money is read. */
.qgp-warn {
  display: flex; gap: 9px; align-items: flex-start;
  background: rgba(255,193,118,0.14); border: 1px solid rgba(255,193,118,0.34);
  border-radius: var(--r-tile, 14px); padding: 11px 13px; margin: 0 0 14px;
  font-size: var(--t-sm, 13px); line-height: 1.45; color: var(--mid-text, #dee3e8);
}
.qgp-warn .material-symbols-outlined { font-size: 18px; color: var(--mid-tertiary, #ffc176); flex: 0 0 auto; }
.qgp-warn b { color: var(--mid-tertiary, #ffc176); }

/* ═══════════════════════════════════════════════════════════════════════════
   ONE FOCUS RING, ONE ACCENT (audit 2026-08-13)
   Clicking into a field showed a different colour depending on the page: the
   Quotes and Setup pages drew the RETIRED CYAN halo (three !important rules),
   while the inbox, template editor and onboarding drew the house lime. Users
   saw two brand colours while typing. Checkboxes on the Quotes page still ticked
   in the old BLUE. This settles all of it in one place, last, so no per-page rule
   can drift again.
   ═══════════════════════════════════════════════════════════════════════════ */
html body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  outline: none !important;
  border-color: var(--mid-accent, #d9ff5e) !important;
  box-shadow: 0 0 0 3px rgba(217, 255, 94, 0.28) !important;
}
/* Ticks and radios wear the accent too — never the retired blue. */
html body :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--mid-accent, #d9ff5e);
}
/* Keyboard users get a visible ring on every control, not just fields. */
html body :is(button, a, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mid-accent, #d9ff5e);
  outline-offset: 2px;
}

/* ── Perpetual glows retired (audit 2026-08-13) ──────────────────────────────
   The + button, the chat search button and even a modal's CLOSE button carried
   an infinite 3.2s pulsing halo (two separate keyframes, one still in the old
   blue). The design language forbids decorative glow, and motion that never
   stops stops meaning anything — the eye is pulled to a close button rather
   than to what changed. Static elevation instead; motion is reserved for
   things that actually happen. */
html body :is(.create-fab, .chat-search-fab, .modal-head button[data-close]) {
  animation: none !important;
}
html body :is(.create-fab, .chat-search-fab, #createFab) {
  box-shadow: 0 2px 8px rgba(16, 21, 26, 0.18) !important;
}
html body .modal-head button[data-close] { box-shadow: none !important; }

/* ── Lime is for actions, not decoration ─────────────────────────────────────
   The accent rule says lime never lands on section icons, headings or data
   text — but ~25 rules put it there (dashboard section icons, the health dot,
   reminder bells, project header icons, the calendar's today number, key lead
   facts), which flattens the one colour that should mean "press this". */
html body :is(#page-dashboard, #page-projects, #page-calendar, #dealDetailPanel)
  :is(.today-head, .money-card, .dash-health-line, .dlp-rem-ico, .proj-h-ico) .material-symbols-outlined {
  color: var(--mid-text-2, #bdc8d1) !important;
}
html body .cal-today .cal-daynum { color: var(--mid-text, #dee3e8) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   THREE ELEVATIONS (audit 2026-08-13)
   The stylesheet held 185 distinct box-shadow recipes — twelve of them differing
   only in alpha — so "how far off the page is this?" had no consistent answer.
   Depth now comes in three steps, and they theme with the surface:
     card    a sheet resting on the page (glance cards, list rows)
     raised  something lifted toward you (popovers, dropdowns, sticky bars)
     overlay something in front of everything (dialogs, drawers, sheets)
   Existing per-component shadows still win where a designer chose one on
   purpose; these are the defaults everything else should reach for.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --elev-card:    0 1px 3px rgba(16, 21, 26, 0.08);
  --elev-raised:  0 8px 24px -12px rgba(16, 21, 26, 0.28);
  --elev-overlay: 0 24px 64px -20px rgba(16, 21, 26, 0.45);
}
html[data-theme="dark"], body.dash-active, body.setup-active {
  --elev-card:    0 1px 3px rgba(0, 0, 0, 0.35);
  --elev-raised:  0 10px 28px -14px rgba(0, 0, 0, 0.55);
  --elev-overlay: 0 28px 70px -22px rgba(0, 0, 0, 0.65);
}
/* The extremes that read as "floaty": a 90px-deep calendar popup and a near-black
   85% dashboard hero, both far heavier than anything else on their own screen. */
html body .cal-modal { box-shadow: var(--elev-overlay) !important; }
html body :is(.sg-dialog, .tpl-modal-card, .px-modal, .modal-content, .lib-modal) {
  box-shadow: var(--elev-overlay);
}

/* ── One card inset ──────────────────────────────────────────────────────────
   --pad-card (26px) was defined but reached for by exactly TWO components, so
   every card and dialog set its own: 18, 20, 22, 24, 26, 28. Text started at a
   different distance from the edge on every surface. Dialogs and cards now share
   one inset; the tighter 16/18 of dense list tiles is left alone on purpose —
   those are rows, not cards. */
html body :is(.tpl-modal-card, .px-modal, .cal-modal, .lib-modal, .evo-modal, .modal-content) {
  padding: var(--pad-card, 26px);
}

/* ── Mobile: nothing important smaller than a fingertip ──────────────────────
   The ergonomics block covers most controls, but a handful slipped through and
   are the ones an operator actually reaches for on a phone: the chat attach
   button, per-row deletes in the deal panel and finance rows, the quote action
   pills, and the tiny × removes in Setup. 40px is the floor. */
@media (max-width: 768px) {
  html body :is(
    .chat-attach-btn, .dlp-evt-del, .fin-row-del, .qgm-del-remove, .qgm-event-del,
    .tplc-gal-x, .qc-x, .kb-del, .res-del, .dlp-q-ico, .lib-modal-x
  ) {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Empty states: a title, one line of plain explanation, one obvious next step.
   Scoped through html body so the page-level typography blocks can't flatten the
   title back to body size. */
html body .board-empty .board-empty-title {
  margin: 12px 0 4px; font-size: var(--t-h, 20px); font-weight: 500; color: var(--mid-text, #dee3e8);
}
html body .board-empty .board-empty-sub {
  margin: 0 0 16px; font-size: var(--t-sm, 13px); line-height: 1.5; color: var(--mid-muted, #87929a);
}
.board-empty .button { margin: 0 auto; }

/* ── One card shape (owner chose the Dashboard's, 2026-08-13) ────────────────
   These families each hardcoded their own rounding — 16, 18 — so Projects,
   Finance, tickets, contacts and the inbox panes read as a different product
   from the Dashboard. They follow the token now. Inner tiles, rows, inputs and
   pills are deliberately NOT touched: a 30px radius on a 40px-tall row looks
   like a capsule, and those already share --r-tile / the pill. */
html body :is(
  .proj-card, #finBand .fin-card, .ticket-card, .contact-card,
  .inbox-list-pane, .inbox-thread-pane, #softphone, .px-card, .sg-card
) {
  border-radius: var(--r-card, 30px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE DIALOG LANGUAGE (audit 2026-08-13)
   The app grew NINE dialog shells — .modal-content, .cal-modal, .sg-dialog,
   .lib-modal, .px-modal, .tpl-modal-card, .evo-modal, .dup-modal, .onbw-card —
   each with its own surface, rounding (12–24px), inset (18–28px) and shadow.
   Opening "Edit deliverable", a calendar event, a quote preview and a plan
   prompt showed four differently-shaped boxes in the same minute.

   Rewriting nine call sites would risk nine working flows, so instead every
   shell now inherits ONE appearance here, last in the cascade. The markup can
   converge later without the user waiting for it.
   ═══════════════════════════════════════════════════════════════════════════ */
/* !important because several of these shells set their own rounding/surface with it —
   .cal-modal at 24px, the older .modal-content pass — and this IS the canonical layer. */
html body :is(.cal-modal, .lib-modal, .px-modal, .tpl-modal-card, .evo-modal,
               .dup-modal, .onbw-card, .sg-dialog, .modal-content) {
  background: var(--kb-panel, var(--mid-surface-2, #252b2e)) !important;
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: var(--r-card, 30px) !important;
  padding: var(--pad-card, 26px) !important;
  box-shadow: var(--elev-overlay);
  color: var(--kb-text, var(--mid-text, #dee3e8));
  font-family: var(--sans);
}
/* The bottom sheet keeps its flat foot — it is anchored to the screen edge. */
html body .modal-content { border-radius: var(--r-card, 30px) var(--r-card, 30px) 0 0 !important; }
@media (min-width: 769px) {
  html body .modal-content { border-radius: var(--r-card, 30px) !important; }
}
/* One veil behind all of them. */
html body :is(.modal, .cal-modal-veil, .lib-modal-veil, .sg-dialog-veil, .px-modal-veil, .dup-modal-veil) {
  background: rgba(12, 15, 18, 0.52);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* One entrance, so a dialog never appears with a different personality. */
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
html body :is(.cal-modal, .lib-modal, .px-modal, .tpl-modal-card, .evo-modal,
               .dup-modal, .sg-dialog, .modal-content) {
  animation: dialogIn var(--dur-2, 200ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.cal-modal, .lib-modal, .px-modal, .tpl-modal-card, .evo-modal,
                 .dup-modal, .sg-dialog, .modal-content) { animation: none; }
}

/* ── Undo toast ──────────────────────────────────────────────────────────────
   Sits above the mobile nav, centred, and holds one action. Deliberately not a
   dialog: it must never block the next thing the owner does. */
.undo-toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 500; display: flex; align-items: center; gap: 14px;
  background: var(--kb-panel, var(--mid-surface-2, #252b2e));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: var(--r-tile, 14px); padding: 12px 14px 12px 18px;
  box-shadow: var(--elev-overlay);
  animation: dialogIn var(--dur-2, 200ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  max-width: min(440px, calc(100vw - 32px));
}
.undo-toast-msg { font-size: var(--t-sm, 13px); color: var(--kb-text, var(--mid-text, #dee3e8)); }
.undo-toast-btn {
  border: none; cursor: pointer; border-radius: 9999px;
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
  font-family: inherit; font-size: var(--t-sm, 13px); font-weight: 600;
  padding: 0 16px; height: 32px; flex: 0 0 auto;
}
@media (min-width: 769px) { .undo-toast { bottom: 28px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR JOINS THE APP (audit 2026-08-13)
   The Calendar was built against a private --px-* palette with 800/900 weights,
   so it read like a different product: headings far heavier than any other page
   (the system allows 400/500/600), its own ink and muted greys, and two nearly
   identical lavenders for two event kinds. Weights and colours come from the
   house tokens now; the layout is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
html body #page-calendar :is(.page-heading h1, .cal-title) {
  font-weight: var(--w-num, 600); color: var(--kb-text, var(--mid-text, #dee3e8));
}
html body #page-calendar :is(.page-heading p.eyebrow, .cal-dow, .cal-agenda-head) {
  font-weight: var(--w-label, 500); color: var(--kb-muted, var(--mid-muted, #87929a));
}
html body #page-calendar :is(.cal-daynum, .cal-agenda-day) {
  font-weight: var(--w-label, 500); color: var(--kb-text, var(--mid-text, #dee3e8));
}
html body #page-calendar #calAddBtn {
  background: var(--lime, #d9ff5e); color: var(--on-lime, #1a2000);
  font-weight: var(--w-num, 600);
}
/* One lavender for calendar-sourced events — the two were a shade apart, which reads
   as a mistake rather than a distinction. The icon and label already say which is which. */
html body :is(#page-calendar, .cal-modal, .cal-modal-badge) :is(.cal-k-meeting, .cal-k-gcal) {
  --cal-lavender: #a78bfa;
}
html body #page-calendar :is(.cal-chip, .cal-ag-item):is(.cal-k-meeting, .cal-k-gcal) { border-left-color: var(--cal-lavender); }
html body #page-calendar .cal-ag-item.cal-k-gcal .cal-ag-ic { color: var(--cal-lavender); }
html body .cal-modal:is(.cal-k-meeting, .cal-k-gcal)::before { background: var(--cal-lavender); }
html body .cal-modal-badge:is(.cal-k-meeting, .cal-k-gcal) { color: var(--cal-lavender); border-color: rgba(167,139,250,0.4); }

/* ── Calendar: the project name is a link ────────────────────────────────────
   Owner 2026-08-13. It only carries the affordance when it actually leads
   somewhere (.is-link is added only when the item knows its project), so a
   name that can't be opened never looks clickable. */
html body #page-calendar .cal-chip-proj.is-link { cursor: pointer; text-decoration-color: transparent; }
html body #page-calendar .cal-chip-proj.is-link:hover,
html body #page-calendar .cal-chip:hover .cal-chip-proj.is-link {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: currentColor;
}
html body .cal-modal-projlink {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--mid-accent-ink, #d9ff5e); text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
}
html body .cal-modal-projlink:hover { filter: brightness(1.1); }

/* ── Calendar popup: readable link, no stray bar ─────────────────────────────
   Owner 2026-08-13. Two problems on the light theme:
   1. The project link was lime on white — the accent is a FILL colour, and as
      text on a pale surface it is barely legible. Links take the ink colour and
      earn their meaning from the underline instead.
   2. A 4px coloured bar ran down the left edge. It was the event-kind indicator
      from an older design, but the popup already says SHOOT DAY in a badge, so
      it read as a rendering artefact — especially once the card gained 30px
      corners and the straight bar stopped following them. */
html body .cal-modal::before { display: none !important; }
html body .cal-modal-projlink {
  color: var(--kb-text, var(--mid-text, #10151A)) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  font-weight: 500;
}
html body .cal-modal-projlink:hover {
  filter: none;
  text-decoration-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING — breathing room, and rows that fit (owner, 2026-08-13)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. QUESTIONS WERE CLUMPED. 16px between fields on a page whose whole job is to
      ask one thing at a time read as a dense form rather than a conversation. */
.onbw-card .onbw-field { margin: 0 0 26px; }
.onbw-card .onbw-field > span { margin-bottom: 9px; }
.onbw-grid2 { gap: 0 20px; }
.onbw-card .onbw-note,
.onbw-card .onbw-sub { margin-top: 18px; }
.onbw-rows { gap: 12px; }

/* 2. THE DELIVERABLE ROW WRAPPED. It renders FIVE controls — name, quantity,
      turnaround, price, and the included/extra dropdown — into a four-column
      grid, so the dropdown fell to a second line and every row looked broken in
      half. Five tracks, and a wider card to hold them. */
/* ONLY the deliverables card. Services and events have three controls per row and were
   being stretched to 1120px around the same content — a wall of empty space to the right
   of every price (owner, 2026-08-13). They keep the reading width. */
.onbw-card.is-wide[data-card="deliverables"] { max-width: 1120px; }
.onbw-card[data-card="deliverables"] .onbw-row {
  grid-template-columns: minmax(200px, 1fr) 104px 116px 132px 196px;
}
@media (max-width: 1180px) {
  .onbw-card[data-card="deliverables"] .onbw-row { grid-template-columns: minmax(160px, 1fr) 92px 104px 116px 172px; gap: 8px; }
}
@media (max-width: 900px) {
  /* Below this the five tracks genuinely don't fit — stack rather than squeeze. */
  .onbw-card[data-card="deliverables"] .onbw-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .onbw-card[data-card="deliverables"] .onbw-row > :first-child { grid-column: 1 / -1; }
  .onbw-card[data-card="deliverables"] .onbw-row > :last-child { grid-column: 1 / -1; }
}
/* Services / events: three controls, so the price columns sit next to the name rather
   than a third of the way across an over-wide card. */
.onbw-card[data-card="services"] .onbw-row,
.onbw-card[data-card="events"] .onbw-row {
  grid-template-columns: minmax(0, 1fr) 132px 132px;
}

/* 3. THE DROPDOWN DIDN'T LOOK LIKE ONE. Inside a row it inherited nothing —
      no border, no chevron — so "Included in the package" read as a label
      somebody had typed, not a control you can change. Same treatment the
      standalone fields already get. */
.onbw-row select,
.onbw-ev select {
  width: 100%; box-sizing: border-box; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding: 8px 32px 8px 10px; border-radius: 10px;
  font-family: inherit; font-size: var(--t-sm);
  background-color: var(--kb-card); color: var(--kb-text);
  border: 1px solid var(--kb-line);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.onbw-row select:hover, .onbw-ev select:hover { border-color: var(--kb-muted); }

/* ── Calendar add-entry: link an existing lead / contact / project ───────────
   Owner 2026-08-13. A search field that becomes a chip once something is
   picked, so the choice is visible rather than sitting invisibly in a box. */
.cal-link-pick { position: relative; }
.cal-link-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  max-height: 240px; overflow-y: auto;
  background: var(--kb-panel, var(--mid-surface-2, #252b2e));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: var(--r-tile, 14px); box-shadow: var(--elev-raised);
  padding: 6px;
}
.cal-link-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; border-radius: 10px; padding: 9px 10px;
  font-family: inherit; font-size: var(--t-sm, 13px); color: var(--kb-text, var(--mid-text, #dee3e8));
}
.cal-link-opt:hover { background: var(--kb-tile, var(--mid-surface-3, #2f363a)); }
.cal-link-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-link-opt-tag {
  flex: 0 0 auto; font-size: var(--t-micro, 11.5px); font-weight: 600;
  color: var(--kb-muted, var(--mid-muted, #87929a));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: 9999px; padding: 2px 9px;
}
.cal-link-none { padding: 10px; font-size: var(--t-sm, 13px); color: var(--kb-muted, #87929a); }
/* `[hidden]` only sets `display:none` at USER-AGENT weight, so ANY author rule that
   sets display beats it — which is why the empty chip with its × sat under the search
   box before anything had been picked (owner screenshot, 2026-08-13). Scoping the
   display to :not([hidden]) is the fix; the same trap has bitten this codebase before. */
.cal-link-chosen[hidden] { display: none !important; }
.cal-link-chosen:not([hidden]) {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kb-tile, var(--mid-surface-3, #2f363a));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: 9999px; padding: 7px 8px 7px 14px;
  font-size: var(--t-sm, 13px); color: var(--kb-text, var(--mid-text, #dee3e8));
}
.cal-link-clear {
  border: none; background: none; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--kb-muted, #87929a); padding: 0 4px;
}
.cal-link-clear:hover { color: var(--kb-text, #dee3e8); }

/* ═══════════════════════════════════════════════════════════════════════════
   UNSAVED-CHANGES BAR (owner, 2026-08-13)
   It was built as a sticky footer for a panel with 16px padding — `margin:
   16px -16px -16px` bleeds it to that panel's edges. But `.detail-content` has
   NO padding, so those negative margins pushed it 16px OUTSIDE the container on
   both sides: "Unsaved changes" ended up flush against the browser edge, and the
   bar spanned the whole window while everything below it sat inside cards.
   `position: sticky` also needs a scrolling ancestor, and that container is
   `overflow: hidden` — so it never stuck anywhere either.

   A floating bar instead: fixed to the bottom, held to the app's own content
   width, clear of the mobile nav. It behaves the same wherever it is used.
   ═══════════════════════════════════════════════════════════════════════════ */
html body .edit-savebar {
  position: fixed;
  /* Centred with auto margins, NOT translateX(-50%): the entrance animation below
     animates `transform`, which would overwrite the centring and leave the bar sitting
     off to one side (measured — it landed 280px right of centre). */
  left: 0; right: 0; margin-inline: auto !important;
  bottom: 24px; top: auto;
  z-index: 60;
  width: min(560px, calc(100vw - 2 * var(--page-gutter, 3%)));
  margin-block: 0 !important;
  padding: 12px 12px 12px 20px;
  display: flex; align-items: center; gap: 12px;
  background: var(--kb-panel, var(--mid-surface-2, #252b2e));
  border: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-top: 1px solid var(--kb-line-soft, var(--mid-line, #3e484f));
  border-radius: var(--r-card, 30px);
  box-shadow: var(--elev-overlay);
  /* Opacity-only entrance. `dialogIn` animates TRANSFORM, and this element was left
     holding that animation's first frame — translateY(8px) scale(0.985) — so the bar sat
     8px low and 1.5% small, permanently. A bar that must line up with the page has no
     business animating its own position. */
  animation: savebarIn var(--dur-2, 200ms) var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  transform: none !important;
}
@keyframes savebarIn { from { opacity: 0; } to { opacity: 1; } }
html body .edit-savebar-msg {
  flex: 1; min-width: 0;
  font-size: var(--t-sm, 13px);
  color: var(--kb-text, var(--mid-text, #dee3e8));
}
html body .edit-savebar .button { min-height: 36px; flex: 0 0 auto; }
/* Above the phone's bottom nav rather than behind it. */
@media (max-width: 960px) {
  html body .edit-savebar { bottom: 88px; width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  html body .edit-savebar { animation: none; }
}

/* ── Centre floating bars with MARGINS, never transform ──────────────────────
   Audit 2026-08-13, after the unsaved-changes bar landed 280px off centre.
   `left: 50%; transform: translateX(-50%)` is the usual way to centre a fixed
   element — but any animation that touches `transform` replaces it wholesale,
   so the element flies to one side for the length of the animation and snaps
   back at the end (and if the animation never settles, it stays there). Both
   toasts do exactly that. Auto margins centre without occupying `transform`,
   leaving it free for the entrance. */
html body :is(.app-toast, .undo-toast) {
  left: 0; right: 0;
  margin-inline: auto !important;
  transform: none !important;
}
/* The dismissal used a compound transform purely to preserve the centring —
   with margins doing that job, it only needs the slide. */
html body .app-toast.is-hiding { transform: translateY(8px) !important; }

/* The first event date on a lead card — the fact that decides how urgent a lead is.
   Text only, like .kb-event and .kb-age beside it: a later rule deliberately hides the
   icons in these compact card rows, so emitting one would just be dead markup. */
.kb-eventdate {
  margin-top: 3px;
  font-size: var(--t-micro, 11.5px);
  color: var(--kb-muted, var(--mid-muted, #87929a));
}

/* ── Date fields: the picker button sits at the EDGE ─────────────────────────
   Owner 2026-08-13: "the calendar icon is placed too much inside the field."
   Chrome lays the native picker button out after the text, not against the
   right edge — so on a wide field it floats in the middle of the empty space
   and reads as part of the value rather than a control. Push it to the end and
   give it a little room. */
html body input[type="date"],
html body input[type="datetime-local"] {
  position: relative;
}
html body input[type="date"]::-webkit-calendar-picker-indicator,
html body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 2px;
  cursor: pointer;
  opacity: 0.65;
}
html body input[type="date"]::-webkit-calendar-picker-indicator:hover,
html body input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Room for it, so a long value never runs underneath the icon. */
html body input[type="date"],
html body input[type="datetime-local"] { padding-right: 38px; }








/* ── Today card tabs (owner 2026-08-14) ─────────────────────────────────────
   Reuses .src-pill, the same control as the Lead sources period picker and the
   Leads card counts — a third bespoke tab style on one dashboard is how the
   design language comes apart. */
#page-dashboard .today-tabs { margin: 2px 0 14px; }
#page-dashboard .today-tabs .src-pill b { font-weight: var(--w-num); font-variant-numeric: tabular-nums; }
/* What Gia did — the counters read as a row of small facts, not a second hero. */
#page-dashboard .today-gstats { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0 0 16px; }
#page-dashboard .today-gstat { display: flex; flex-direction: column; gap: 2px; }
#page-dashboard .today-gstat-n {
  font-size: 22px; font-weight: var(--w-num); letter-spacing: -.02em;
  color: var(--mid-text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
#page-dashboard .today-gstat.is-zero .today-gstat-n { color: var(--mid-muted); }
#page-dashboard .today-gstat-l { font-size: var(--t-sm); color: var(--mid-muted); }
#page-dashboard .today-gsec {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--mid-muted); margin: 0 0 8px;
}

/* ═══ "The page feels stuck" (owner 2026-08-15) ═════════════════════════════
   Cards hold their own scrollers, and nothing said so. Three things were hiding it:
     1. `* { scrollbar-width: none !important }` (line ~6668) removes every scrollbar
        in the app, so a list that scrolls looks exactly like one that doesn't.
     2. `overscroll-behavior: contain` stops scroll CHAINING — reach the end of a
        card's list and the wheel keeps being swallowed instead of moving the page on.
        That is the actual "stuck" feeling, and it is worst on the cards that fit.
     3. No edge treatment, so a clipped row looks like the last row.
   Fixed in that order: a real (thin) scrollbar, chaining restored, and a fade that
   only appears while there IS more below. */
/* #likelyCard .hotlead-list is set with two ids further up and would keep `contain`;
   matching that specificity here is what lets the page carry on past the Leads list. */
#page-dashboard #likelyCard .hotlead-list,
#page-dashboard #todayCell .today-queue,
#page-dashboard :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list, .today-list, .sg-list, .src-scroll, .fin-f12-chart.is-cols) {
  scrollbar-width: thin !important;
  scrollbar-color: var(--mid-line) transparent;
  overscroll-behavior: auto;          /* let the page continue once the list ends */
}
#page-dashboard :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list, .today-list, .sg-list, .src-scroll)::-webkit-scrollbar { width: 8px; }
#page-dashboard :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list, .today-list, .sg-list, .src-scroll)::-webkit-scrollbar-thumb {
  background: var(--mid-line); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box;
}
#page-dashboard :is(.shoot-list, .datapend-list, .deliv-list, .hotlead-list, .today-list, .sg-list, .src-scroll)::-webkit-scrollbar-track { background: transparent; }
/* The fade is CLASS-DRIVEN, not permanent: a permanent one dims the final row of a list
   you have already scrolled to the end of, which reads as "still more" forever.
   It is drawn on the CARD, not as a mask on the list. Some of these lists already carry
   their own mask (Today fades its top edge for paging) and a second mask-image simply
   replaces the first — an overlay composes with whatever the list is already doing. */
#page-dashboard :is(.sg-card, .today-queue):has(.has-more-below) { position: relative; }
#page-dashboard :is(.sg-card, .today-queue):has(.has-more-below)::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 44px;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: linear-gradient(to bottom, transparent, var(--mid-surface) 82%);
  pointer-events: none;
}
/* …and a small chevron so it reads as "there is more", not as a shadow. */
#page-dashboard :is(.sg-card, .today-queue):has(.has-more-below)::before {
  content: "⌄"; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  z-index: 1; font-size: 15px; line-height: 1; color: var(--mid-muted); pointer-events: none;
}

/* ── Who owns a lead (owner 2026-08-15) ─────────────────────────────────────
   Auto-assign is off, so every lead is unowned and nothing on the card said so —
   a lead could sit with nobody responsible for it and look completely normal.
   The owner's first name reads as quiet metadata; "Unassigned" is a warning. */
:is(#page-leads, #page-dashboard) .kb-owner {
  font-size: var(--t-micro); color: var(--mid-muted); white-space: nowrap;
  padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--mid-line);
}
:is(#page-leads, #page-dashboard) .kb-owner.is-unassigned {
  color: var(--mid-tertiary, #ffc176); border-color: color-mix(in srgb, var(--mid-tertiary, #ffc176) 45%, transparent);
  background: color-mix(in srgb, var(--mid-tertiary, #ffc176) 12%, transparent);
}

/* A feature the plan doesn't include: visible, obviously inert, and it explains itself
   on hover. Hiding it entirely reads as a missing feature; leaving it live reads as a
   broken one. (owner 2026-08-15) */
.is-plan-locked {
  opacity: .42; cursor: not-allowed !important; filter: grayscale(1);
}
.is-plan-locked:hover { opacity: .55; }

/* ── Booking card: events READ, not edit (owner 2026-08-15) ─────────────────
   The quote builder sets them and the project's Production card owns them once the
   booking is won. Here they are the record of what was sold. */
#dealEvtRead { display: flex; flex-direction: column; gap: 2px; }
.deal-evt-readrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--mid-line);
}
.deal-evt-readrow:last-child { border-bottom: 0; }
.deal-evt-readname { font-size: var(--t-body); color: var(--mid-text); }
.deal-evt-readdate {
  font-size: var(--t-sm); color: var(--mid-text-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.deal-evt-readdate.is-missing { color: var(--mid-tertiary, #ffc176); }

/* Column headings on the onboarding rows (owner 2026-08-15). They reuse .onbw-row so
   they inherit whichever grid that card is using — 3 tracks for services, 5 for
   deliverables — and stay aligned at every breakpoint including the stacked one.
   Placeholders alone weren't enough: they vanish the moment a value is typed, so a
   completed card was a grid of unlabelled numbers. */
.onbw-row.onbw-rowhead {
  background: none; border: 0; padding: 0 14px 2px; min-height: 0;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--kb-muted); opacity: 1;
}
.onbw-row.onbw-rowhead > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Stacked layout: the row grid collapses to 2 columns and the headings would line up
   with nothing. Hide them and let the placeholders do the work at that width. */
@media (max-width: 900px) { .onbw-row.onbw-rowhead { display: none; } }

/* ── One timeline, with the couple's own requests marked (owner 2026-08-15) ──
   A client request used to read exactly like a note somebody typed, so the one entry
   needing an answer looked like the one that didn't. Filter chips reuse .src-pill —
   the same control as everywhere else. */
.dlp-tl-filter { margin: 0 0 12px; }
.dlp-tl-open {
  margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--mid-tertiary, #ffc176); color: var(--mid-on-accent, #00354a);
  font-size: var(--t-micro); font-weight: var(--w-num);
}
.dlp-tl-item.is-client .dlp-tl-dot { color: var(--mid-tertiary, #ffc176); }
.dlp-tl-item.is-client .dlp-tl-title { color: var(--mid-text); }
.dlp-tl-badge {
  margin-left: 8px; padding: 1px 7px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--mid-tertiary, #ffc176) 55%, transparent);
  color: var(--mid-tertiary, #ffc176); font-size: var(--t-micro); white-space: nowrap;
}
.dlp-tl-item.is-done .dlp-tl-title { color: var(--mid-muted); }
.dlp-tl-item[hidden] { display: none; }

/* Per-quote delivery time, beside the quantity on a deliverable row. Narrow — it holds
   a number of days, and the placeholder shows the studio's usual value so a blank box
   reads as "as normal" rather than as missing. (owner 2026-08-15) */
.qgm-del-daysf { display: inline-flex; }
.qgm-del-daysf input { width: 74px; text-align: right; }

/* Overtime nudge — a shoot that ran longer than the shift the quote sold. Sits directly
   under the "Additional billing" header, above the rows it would create. Deliberately a
   NOTICE, not a card: it is a suggestion the studio accepts or ignores, and dressing it
   as a finance card would read as money already owed. Warm accent because it is money
   the studio is missing, not an error. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-ot-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-top: 10px; padding: 14px 16px;
  background: var(--kb-card); border-radius: var(--r-tile);
  border-left: 3px solid var(--mid-tertiary);
}
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-ot-row .proj-ot-bill { flex: 0 0 auto; }

/* PLANNED vs ACTUAL on an event card. Visually subordinate to the schedule above it —
   a recessed well, not a second card — because it answers a different question ("what
   happened") and must never be mistaken for the times that were sold. Appears only once
   the shoot is behind us. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-actual {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; padding: 14px 16px;
  background: var(--kb-col); border-radius: var(--r-tile);
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-actual-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-actual-over { color: var(--mid-tertiary); }

/* Where an overtime figure came from. A crew clock-in is evidence; a typed time is a
   claim — the studio needs to know which it is holding before it bills a client. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-ot-basis {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 30px;
  font-size: 11px; letter-spacing: .02em; white-space: nowrap;
  background: var(--kb-col); color: var(--mid-muted);
}
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-ot-basis-clock {
  color: var(--mid-tertiary);
}

/* PAYMENT SPLIT, in the quote rail. Sits with markup and discount because it is the
   same kind of decision — a per-quote commercial term, not a studio setting. Dense by
   design: it lives in a narrow rail beside the builder. (owner 2026-08-15) */
.qg-rail-plan { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.qg-rail-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qg-rail-plan-sum { font-size: 11px; color: var(--mid-muted); white-space: nowrap; }
/* A split that does not reach 100% would accept into a schedule that never collects the
   full price — the one state here worth colouring. */
.qg-rail-plan-sum.is-bad { color: var(--mid-danger); }
#manualPlanRows { display: flex; flex-direction: column; gap: 6px; }
/* Two rows, not five columns: at rail width a five-across grid truncated the label to
   "On bookii" and the anchor to "Before/a", which is worse than useless — the studio
   cannot read back the terms it is about to freeze onto a contract. The label gets the
   full width; the three short controls share the row below it. */
.qg-plan-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 56px 24px;
  gap: 6px; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--mid-line);
}
.qg-plan-row:last-child { border-bottom: 0; padding-bottom: 0; }
.qg-plan-label { grid-column: 1 / -1; }
.qg-plan-row :is(input, select) {
  min-width: 0; width: 100%; box-sizing: border-box; padding: 7px 8px; font-size: 12px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px;
}
.qg-plan-pct { position: relative; display: block; }
.qg-plan-pct span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--mid-muted); pointer-events: none; }
.qg-plan-pct input { padding-right: 20px; text-align: right; }
.qg-plan-del {
  background: none; border: 0; cursor: pointer; padding: 0; line-height: 1;
  font-size: 18px; color: var(--mid-muted);
}
.qg-plan-del:hover { color: var(--mid-danger); }
.qg-plan-empty { font-size: 11px; color: var(--mid-muted); }
.qg-rail-plan-cta { display: flex; gap: 10px; }
.qg-rail-plan-add {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11px; color: var(--mid-accent-ink);
}

/* A change the couple asked for, waiting on the studio. Sits at the TOP of the event
   card because it is a decision, not a detail — and the card's own fields still show the
   current plan, which is what the crew is working to until this is accepted. Accent
   border rather than a filled panel: it is a question, not an alarm. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-req {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin: 0 0 12px; padding: 14px 16px;
  background: var(--kb-col); border-radius: var(--r-tile);
  border-left: 3px solid var(--mid-accent);
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-req-cta {
  display: flex; gap: 10px; flex: 0 0 auto; align-items: center;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-req-note { font-style: italic; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-req a { color: var(--mid-accent-ink); }

/* HAS THE FREELANCER AGREED? Shown only when the answer is "not yet" or "no" — an
   in-house row carries no chip, because a tick on every row trains people to stop
   reading them and hides the one that needs a decision. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-confirm {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--r-tile);
  font-size: 12px; background: var(--kb-col);
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-confirm.is-pending { color: var(--mid-tertiary); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-confirm.is-declined { color: var(--mid-danger); }

/* DAYS OF WORK vs DAYS OF WAITING. The due date is the promise to the couple; this is
   what the job costs in someone's time, and start-by is the difference. Sits under the
   assignee because it is about the person doing it, not about the client. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-work {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-workf { flex: 0 0 auto; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-workf input { width: 86px; text-align: right; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-startby {
  flex: 1 1 200px; min-width: 0; font-size: 12px; color: var(--mid-muted);
}
/* A date that cannot be met however hard anyone tries is the one state worth colouring. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-startby.is-late { color: var(--mid-danger); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-startby.is-tight { color: var(--mid-tertiary); }

/* ONE DELIVERABLE, SEVERAL PAIRS OF HANDS. Steps run in sequence, so they are numbered
   and read top-down; the dates under each are worked BACKWARDS from the promise date.
   Indented under the deliverable because they belong to it — they are not siblings of
   the other deliverables. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-steps {
  margin-top: 12px; padding: 12px 14px; background: var(--kb-col); border-radius: var(--r-tile);
  display: flex; flex-direction: column; gap: 10px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-steps-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step {
  display: grid; gap: 8px; align-items: center;
  /* `auto` for the remove button, not a fixed 24px: .proj-plan-delbtn carries its own
     padding, so a hard track narrower than the button made every step row overflow its
     own card by a few pixels. */
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 74px auto;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-del {
  padding: 4px 8px; line-height: 1; font-size: 16px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step.is-done { opacity: .55; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; background: var(--mid-surface-3); color: var(--mid-text-2);
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step :is(input, select) {
  min-width: 0; width: 100%; box-sizing: border-box;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-daysf input { text-align: right; }
/* The dates and the confirmation sit on their own line under the controls. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel :is(.proj-deliv-step-when, .proj-deliv-step-confirm) {
  grid-column: 2 / -1; font-size: 11.5px; color: var(--mid-muted); margin-top: -2px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-when.is-late { color: var(--mid-danger); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-confirm { color: var(--mid-tertiary); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-step-confirm.is-declined { color: var(--mid-danger); }

/* WHAT THEY BOOKED AT ELSEWHERE. Sits under the loss reason, appearing only when the
   reason is a price one — a field that is irrelevant most of the time is a field nobody
   fills in, and half-filled data is worse than none because it looks like a sample.
   (owner 2026-08-15) */
.detail-loss-price { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.detail-loss-price input {
  flex: 1 1 140px; min-width: 0; padding: 7px 10px; font-size: 13px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px;
}
.detail-loss-price .loss-gap-note { flex: 1 1 100%; font-size: 11.5px; color: var(--mid-tertiary); }

/* METRICS BAND. Each card states the QUESTION it answers, then the number, then how many
   things it is built on, then what to do about it. That order is deliberate: a number
   alone gets acted on without anyone checking whether it means anything. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #metricsCell .met-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px;
}
html:is([data-theme], :not([data-theme])) body #metricsCell .met-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--kb-card); border-radius: var(--r-tile); padding: 18px 20px;
}
html:is([data-theme], :not([data-theme])) body #metricsCell .met-q { font-size: 13px; color: var(--mid-text-2); }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-val {
  font-size: 30px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums;
}
html:is([data-theme], :not([data-theme])) body #metricsCell .met-val .met-unit { font-size: 15px; font-weight: 400; color: var(--mid-muted); }
/* Sample size is never optional — "62% from 8 deals" and "from 800" must not look alike. */
html:is([data-theme], :not([data-theme])) body #metricsCell .met-n { font-size: 11.5px; color: var(--mid-muted); }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-read { font-size: 12.5px; color: var(--mid-text-2); line-height: 1.5; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-caveat { font-size: 12px; color: var(--mid-tertiary); line-height: 1.5; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-thin { color: var(--mid-muted); font-size: 13px; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-bar { display: grid; grid-template-columns: 84px 1fr 44px; gap: 8px; align-items: center; font-size: 11.5px; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-bar i { display: block; height: 6px; border-radius: 3px; background: var(--mid-accent); min-width: 2px; }
html:is([data-theme], :not([data-theme])) body #metricsCell .met-bar span:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--mid-muted); }

/* WORK THAT CAME BACK. Stated plainly, without alarm styling: rework is often the studio
   changing its mind or a client revising a brief, and colouring it as a fault would make
   people argue instead of redo. It counts because the time is real. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-deliv-rework {
  margin-top: 10px; font-size: 11.5px; color: var(--mid-muted);
}

/* WHO SENT THEM. Sits with the stage controls because it is attribution, not contact
   detail — and it is a plain text box on purpose: the person who referred a couple is
   very often not in the CRM at all. (owner 2026-08-15) */
.detail-referral { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.detail-referral .referral-inp {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px;
}

/* WHAT THE COUPLE SAID MATTERS, on the card for the day it matters. Directly above the
   crew list because those are the people it is for — and faces first, because a
   photographer needs to recognise someone before they need a note about them.
   (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-brief {
  margin-top: 12px; padding: 14px 16px; background: var(--kb-col);
  border-radius: var(--r-tile); display: flex; flex-direction: column; gap: 12px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-brief-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-evt-brief-row {
  display: flex; gap: 12px; align-items: flex-start; font-size: 13px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .brief-face {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--mid-surface-3); display: grid; place-items: center;
  color: var(--mid-muted); font-size: 14px;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .brief-rel { color: var(--mid-muted); font-size: 12px; margin-left: 8px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .brief-note { color: var(--mid-text-2); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .brief-note a { color: var(--mid-accent-ink); }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .brief-when { color: var(--mid-muted); font-size: 11px; margin-top: 4px; }

/* THE COUPLE'S PORTAL, on the project as well as the lead. The two copy buttons do
   different jobs — "Copy link" is what you paste in a browser, "Copy message" is what you
   send — because one button doing both put a URL with trailing text on the clipboard,
   which an address bar treats as a search. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body .dlp-portal-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px;
}
html:is([data-theme], :not([data-theme])) body .dlp-portal-actions .dlp-portal-pin {
  margin-left: auto; font-size: 12px; color: var(--mid-muted);
}
html:is([data-theme], :not([data-theme])) body .dlp-portal-actions .dlp-portal-pin b {
  color: var(--mid-text); letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
html:is([data-theme], :not([data-theme])) body .dlp-portal-row { display: flex; align-items: center; gap: 10px; }
html:is([data-theme], :not([data-theme])) body .dlp-portal-row input.dlp-portal-url {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; font-size: 12.5px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px;
}

/* THE UPGRADE PAGE. It showed three limit lines — what a studio is bounded BY, not what
   they would be buying — so the pitch lived only on the marketing site. Unlocks read
   first, limits after, and GST is stated rather than folded into the headline.
   (owner 2026-08-15)

   SCOPED UNDER .plan-card AND USING FLEX, both deliberately. `.plan-card .plan-feats li`
   already sets `padding: 7px 0` — the SHORTHAND, at higher specificity — so a bare
   `.plan-feats .plan-unlock { padding-left }` never applied and an absolutely-positioned
   tick landed on top of the first letter. A flex row cannot overlap whatever the padding
   does. */
.plan-card .plan-price .plan-gst { display: block; font-size: 12px; font-weight: 400; color: var(--mid-muted); margin-top: 4px; }
.plan-card .plan-feats :is(.plan-unlock, .plan-limit) { display: flex; gap: 10px; align-items: baseline; }
.plan-card .plan-feats .plan-unlock::before {
  content: "\2713"; flex: 0 0 auto; color: var(--mid-primary, #B8CC2E); font-weight: 600;
}
/* Limits line up with the unlocks above them without claiming a tick they haven't earned. */
.plan-card .plan-feats .plan-limit::before { content: ""; flex: 0 0 auto; width: 0.75em; }
/* Limits are a different KIND of fact from unlocks, so they read as their own block
   rather than as five more things you get. */
.plan-card .plan-feats .plan-sep {
  margin-top: 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid-muted);
}

/* HOW A PAYMENT ARRIVED. Sits between the amount and the note, because it is part of the
   fact rather than a comment on it. Most studios do not collect online, so nearly every
   row on this ledger needs it. (owner 2026-08-15) */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-pay-row .proj-pay-method {
  min-width: 0; padding: 8px 10px; font-size: 12.5px;
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 12px;
}
/* A gateway payment cannot be re-labelled by hand — it means "reconciles against a
   settlement", which is only true because the gateway put it there. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .proj-pay-row .proj-pay-method:disabled {
  opacity: .65; cursor: not-allowed;
}

/* ── MODAL CHROME, three fixes (owner 2026-08-15) ────────────────────────────

   1. `.tpl-modal-close` had NO styles anywhere — the markup used it, the stylesheet
      never defined it, so every dialog using this pattern (Support included) showed a
      raw UA button. It now matches the icon buttons used elsewhere. */
html:is([data-theme], :not([data-theme])) body .tpl-modal-close {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--mid-muted); transition: background 140ms var(--ease), color 140ms var(--ease);
}
html:is([data-theme], :not([data-theme])) body .tpl-modal-close:hover {
  background: var(--mid-surface-4); color: var(--mid-text);
}
html:is([data-theme], :not([data-theme])) body .tpl-modal-close .material-symbols-outlined { font-size: 20px; }

/* 2. `display:flex` on this summary beat the UA's `[hidden]{display:none}`, so the
      "Set up with your own Meta app" row kept showing INSIDE the modal — where the modal
      title already says it and the disclosure has nothing left to disclose. */
html:is([data-theme], :not([data-theme])) body .mm-adv > summary[hidden] { display: none; }

/* 3. EVERY popup blurs what is behind it, not just the ones that happened to ask.
      Eight different overlay classes had grown up across the app with different
      treatments; a person opening a dialog should get the same depth cue each time. */
html:is([data-theme], :not([data-theme])) body :is(
  .tpl-modal-backdrop, .modal-overlay, .lib-modal-overlay, .evo-modal-overlay,
  .dup-modal-overlay, .qdoc-overlay, .detail-overlay, .ae-overlay,
  /* Two more full-screen veils found in the follow-up sweep: the Pixxl-styled dialog
     (calendar Add-entry and friends) and the plan-upgrade dialog. Both dim, neither
     blurred. .onbw is deliberately absent — it is an opaque full-screen page, not a
     dialog, so there is nothing behind it to blur. */
  .px-modal-ov, .upg-modal) {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── ACCENT USED AS TEXT (owner 2026-08-15: "the step by step guide hyperlink in all
      cards uses lime green and isnt legible on light theme") ────────────────────────

   --mid-accent is a FILL colour. Lime is meant to sit BEHIND --mid-on-accent, and it
   reads correctly that way in both themes. It was olive (#56671f) in the light remap
   precisely so it could double as text, and was later set to lime in both — which is
   right for pills and buttons and wrong for every place it is a foreground colour:
   lime type on a white card is close to invisible.

   Rather than flip the fill token back and break every pill, this adds the missing
   companion: an accent for INK. Lime where the ground is dark, olive where it is light.

   SWEEP 2026-08-15: every foreground use in the app now points here — 55 token uses and
   12 hardcoded-lime blocks, done as a mechanical 1:1 swap so dark theme is pixel-identical
   and only light changes. Seven blocks were deliberately left on raw lime: two are scoped
   to dark theme, and five paint their own dark background (#10151A / #3d4d00 / #1a2000),
   where lime is the correct ink in BOTH themes. Backgrounds, borders and accent-color
   were not touched — lime is still the fill everywhere it was.

   The guard against this coming back is in test/settings-modal.test.js, which fails on any
   new `color: var(--mid-accent)` or lime foreground outside those exemptions. */
html:is([data-theme], :not([data-theme])) { --mid-accent-ink: var(--mid-accent); }
html[data-theme="light"] { --mid-accent-ink: #56671f; }

/* ── INTEGRATION CHECKBOXES: LIME CIRCLES (owner 2026-08-15) ──────────────────

   Two problems, one rule.

   1. They rendered as the browser's default control. The setup page tints its inputs
      with `accent-color` under `body.setup-active #page-setup` — but the credential
      popups MOVE their panel into #settingsModalBody at body level, so every one of
      those ~20 setup-scoped rules stops matching the moment the popup opens. The scope
      here covers both homes, so a control looks the same in the page and in the popup.

   2. `accent-color` only tints; it cannot make a square control round, and the checked
      fill it produces is the raw lime with a white tick — a pale box with near-invisible
      ticking in light theme. Drawing the control gives us the lime FILL the owner asked
      for with --mid-on-accent ink on top, which is legible on lime in both themes. */
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input:is([type="checkbox"], [type="radio"]):not(.switch):not(
    :is(.toggle-row, .setup-toggle, .switch-row) > *) {
  appearance: none; -webkit-appearance: none;
  /* min-height too: the global `input, select { min-height: 40px }` otherwise stretches
     an 18px circle into an 18×40 pill, which is what it was doing. */
  width: 18px; height: 18px; min-height: 18px; flex: 0 0 auto; margin: 0; padding: 0;
  border: 1.5px solid var(--mid-line); border-radius: 50%;   /* circles, both kinds */
  /* TRANSPARENT, not --mid-lowest: the light-theme token remap is scoped to overlays
     only, so on the setup PAGE --mid-lowest stays the dark well #0a0f12 and an unchecked
     circle came out as a dark hole punched in a white card. Letting the card show through
     is right on either ground and cannot drift when that scoping changes. */
  background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background 120ms var(--ease, ease), border-color 120ms var(--ease, ease);
}
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input:is([type="checkbox"], [type="radio"]):not(.switch):not(:is(.toggle-row, .setup-toggle, .switch-row) > *):hover { border-color: var(--mid-accent); }
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input:is([type="checkbox"], [type="radio"]):not(.switch):not(:is(.toggle-row, .setup-toggle, .switch-row) > *):checked {
  /* LITERAL LIME, not var(--mid-accent): on the setup page in light theme that token
     resolves to the olive #56671f, so the "lime" fill came out dark olive on screen even
     though the token read lime elsewhere. The .toggle-row switch already hardcodes
     rgb(217,255,94) for exactly this reason — this matches it, so a circle and a switch
     on the same card are the same green. */
  background: #d9ff5e; border-color: #d9ff5e;
}
/* The tick is a rotated corner rather than a glyph, so it needs no icon font — the
   popups render before Material Symbols has necessarily loaded.

   INK IS THE LITERAL, NOT --mid-on-accent: that token resolves to a near-white #f2f6da
   in light theme, which on a lime fill is an invisible tick. #1a2000 is the documented
   ink-on-lime and is legible on lime in both themes. */
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input[type="checkbox"]:not(.switch):not(:is(.toggle-row, .setup-toggle, .switch-row) > *):checked::after {
  content: ""; width: 4px; height: 8px; margin-top: -2px;
  border: solid #1a2000; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input[type="radio"]:not(.switch):not(:is(.toggle-row, .setup-toggle, .switch-row) > *):checked::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1a2000;
}
html:is([data-theme], :not([data-theme])) body :is(#page-setup, #settingsModalBody)
  input:is([type="checkbox"], [type="radio"]):not(.switch):not(:is(.toggle-row, .setup-toggle, .switch-row) > *):focus-visible {
  outline: 2px solid var(--mid-accent); outline-offset: 2px;
}

/* ── Message templates card (owner 2026-08-15: "the card ui is wrong") ────────
   The template count rendered as a full .banner — a bordered, filled box the width of
   the card, for one line of neutral status. .banner is also a LIGHT-theme component
   (--panel-soft / --ink-2), so inside this card it painted a cream slab. A count is not
   news: it reads as a quiet line, and only a real failure earns a box. */
html:is([data-theme], :not([data-theme])) body #page-setup #waTplBanner:not(.error) {
  border: 0; background: none; padding: 0; margin: 0 0 14px;
  font-size: 13px; color: var(--mid-muted);
}
html:is([data-theme], :not([data-theme])) body #page-setup #waTplBanner.error {
  background: color-mix(in srgb, var(--mid-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mid-danger) 40%, transparent);
  color: var(--mid-text); border-radius: 12px;
}

/* ── Setup opens like every other page (owner 2026-08-15) ─────────────────────
   With the "Setup" title gone, the tab row is the page's first row — the same role
   the sort/filter control row plays on Leads. Leads gets its 24px from
   `.page-heading { margin-bottom: 24px }`; the tab row had none of its own, because
   the title above it used to supply the gap. Match it so both pages open with one
   control row, 24px, then cards. */
html:is([data-theme], :not([data-theme])) body.setup-active #page-setup .setup-tabs-row {
  margin-bottom: 24px;
}

/* ── Scroll markers on every card, not just the dashboard's (owner 2026-08-15) ──
   The dashboard already fades its cards and draws a chevron. That treatment paints the
   fade in the CARD's colour, which only works where the card colour is known — so off
   the dashboard the fade is done as a MASK on the scroller itself. A mask dissolves the
   content whatever it sits on, so this needs no colour and cannot go wrong on a card
   whose surface token differs.

   Deliberately NOT applied inside #page-dashboard: those lists keep their existing
   card-drawn fade, and some (Today) already carry a mask of their own that a second
   mask-image would replace rather than compose with. */
html:is([data-theme], :not([data-theme])) body :is(.page, .tpl-modal-card):not(#page-dashboard)
  .has-more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
}
/* …and the same chevron the dashboard uses, so "more below" reads as a cue and not as a
   rendering artefact. On the card, because the scroller itself is being masked — a
   chevron drawn inside it would fade out along with the content. */
html:is([data-theme], :not([data-theme])) body :is(.page, .tpl-modal-card):not(#page-dashboard)
  .panel:has(.has-more-below) { position: relative; }
html:is([data-theme], :not([data-theme])) body :is(.page, .tpl-modal-card):not(#page-dashboard)
  .panel:has(.has-more-below)::after {
  content: "⌄"; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  z-index: 1; font-size: 15px; line-height: 1; color: var(--mid-muted); pointer-events: none;
}

/* ── Template rows wear the house list-row treatment (owner 2026-08-15: "the template
      card doesnt match the dull grey bg we have been using for others") ──────────
   .wa-tpl-row was white with a 1px outline; every other list row in Setup (.team-res-row
   and friends) is a flat grey tile with no border. Same tint and same hover, so the
   templates list reads as the same component as the team list one tab over. */
html:is([data-theme], :not([data-theme])) body #page-setup .wa-tpl-row {
  background: rgba(42,51,37,0.04);
  border: none;
  border-radius: 12px;
}
html[data-theme="dark"] body #page-setup .wa-tpl-row { background: var(--mid-surface-2); }

/* Save/Discard sit IN the tab row now, so the shared absolute positioning that pins
   .page-actions to the page's top-right must not apply here — it is what put them on
   top of the go-live steps once the Setup title was removed. */
html:is([data-theme], :not([data-theme])) body #page-setup .setup-tabs-row .setup-head-actions {
  position: static; inset: auto; margin-left: 16px; flex: 0 0 auto;
}

/* ── Overhead rows (owner 2026-08-15) ────────────────────────────────────────
   Three complaints, one row:

   · "a different bg than the actual ui" — it was var(--mid-lowest) + a 1px outline while
     every other list row in Setup is a flat grey tile with no border.
   · "there is a lot of space on card, everything is moved to right" — the grid was
     `1fr auto auto auto auto`, so the NAME column absorbed all the slack and the
     category, frequency and amount were pushed hard against the right edge with a void
     between. The name and its metadata are one thing and now sit together; only the
     amount and the delete button go right.
   · the amount is handled in app.js — finMoney compacts to "₹30k", which is right on a
     chart and wrong in an editor where you are checking a figure you just typed. */
html:is([data-theme], :not([data-theme])) body :is(#page-setup #setupOverheads, #finBand) .fin-oh-row {
  grid-template-columns: 1fr auto auto;
  background: rgba(42,51,37,0.04);
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
}
html[data-theme="dark"] body :is(#page-setup #setupOverheads, #finBand) .fin-oh-row {
  background: var(--mid-surface-2);
}
html:is([data-theme], :not([data-theme])) body :is(#page-setup #setupOverheads, #finBand) .fin-oh-row-main {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
html:is([data-theme], :not([data-theme])) body :is(#page-setup #setupOverheads, #finBand) .fin-oh-row-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Cover composition control (owner 2026-08-15) ────────────────────────────
   The thumbnail becomes the control: click it and the anchor moves there. A dot marks
   the chosen point so the setting is visible rather than implied, and the thumbnail
   crops with the same background-size/position pair the proposal uses — what the studio
   sees here is what the couple gets. */
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-thumb.is-focusable {
  cursor: crosshair; position: relative;
}
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-thumb.is-focusable::after {
  content: ""; position: absolute;
  left: var(--focus-x, 50%); top: var(--focus-y, 50%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.5);
  pointer-events: none;
}
html:is([data-theme], :not([data-theme])) body #page-setup .tplc-focus-hint {
  display: block; margin-top: 6px; color: var(--mid-muted); font-size: 12px;
}

/* The theme-fallback warning: a real consequence, so it reads as one — not a muted hint
   sitting under the one it contradicts. */
html:is([data-theme], :not([data-theme])) body #page-setup .tpl-theme-warn {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--mid-tertiary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--mid-tertiary) 38%, transparent);
  color: var(--mid-text); font-size: 12.5px; line-height: 1.45;
}

/* ── Quote builder: the deliverable row gained a fourth control (owner 2026-08-15:
      "i see half revelead input field dont know what it is") ─────────────────────
   The per-quote "ready in" field was added to the markup without a column to live in:
   the grid was `1fr 130px 34px` and the row now has four children, so the new input was
   squeezed into the 34px delete slot and showed as a sliver of a box with no label.

   Explicit column placement, not just a fourth track — a row whose deliverable has no
   quantity emits a HIDDEN input, which occupies no grid cell, so implicit placement
   would shift every following control one column left on exactly those rows. */
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-card {
  grid-template-columns: minmax(0, 1fr) 120px 104px 34px;
}
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-main { grid-column: 1; }
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-qtyf { grid-column: 2; }
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-daysf { grid-column: 3; }
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-remove { grid-column: 4; }

/* It is an input like the quantity beside it, and it says what it is — an unlabelled box
   holding "7" next to another box holding "50" is a guessing game. */
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-daysf {
  display: block; position: relative;
}
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-daysf::before {
  content: "ready in"; display: block; margin-bottom: 3px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid-muted); text-align: center;
}
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-daysf input {
  width: 100%; box-sizing: border-box; padding: 8px 9px; border-radius: 8px; text-align: center;
  /* --mid-lowest, NOT --mid-base: the quantity field beside it is re-pointed at
     --mid-lowest by the quote page's own light-theme block, and --mid-base stays the dark
     well off the overlays — copying the wrong token gave this input a black background
     next to a white one. Matching the field it sits beside is the whole point. */
  background: var(--mid-lowest) !important; color: var(--mid-text) !important;
  border: 1px solid var(--mid-line) !important; font-family: var(--sans); font-size: 13px;
}
/* The quantity gains the same caption so the two read as a pair rather than one labelled
   box and one bare one. */
html:is([data-theme], :not([data-theme])) body #page-quotes .qgm-del-qtyf::before {
  content: "quantity"; display: block; margin-bottom: 3px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid-muted); text-align: center;
}

/* ── Live pricing: the event list scrolls (owner 2026-08-16) ──────────────────
   With the bar chart gone the list is the content, and a quote with six ceremonies used
   to push the markup/discount fields and Generate button below the fold. It gets a
   bounded height and scrolls, with the same fade + chevron every other scrollable card in
   the app uses (markScrollables picks it up by measurement, no registration needed). */
html:is([data-theme], :not([data-theme])) body #page-quotes .qgp-rows-scroll {
  max-height: 30vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* ── Kanban columns must not eat the sideways gesture (owner 2026-08-16) ──────
   "when im on a lead stage card i cant scroll the page to see both the ends. i have to be
   in between the stage rows so that i can scroll. its frustrating."

   The column body sets `overflow-y: auto` and nothing else. CSS then computes the OTHER
   axis from `visible` to `auto` — so every column is silently a horizontal scroll
   container with nothing to scroll, and it swallows the trackpad swipe instead of letting
   it chain to the board. Measured: overflow-x resolved to "auto" with no rule setting it.

   Clipping the horizontal axis explicitly hands the gesture back to .kanban-board, which
   is the element that actually scrolls sideways. Cards are full-width in the column, so
   nothing is lost by clipping. */
html:is([data-theme], :not([data-theme])) body :is(#page-leads, #page-projects) .kanban-col-body {
  overflow-x: hidden;
}


/* ── PEOPLE TAB: permissions beside the crew, the team table across the bottom ──────
   Owner 2026-08-16: "swap places of the permissions and team cards. permissions card
   half width with inscroll and users card full width."

   The team table has six columns and a row per teammate — it was the card being squeezed
   into half the width, while the permissions matrix (a fixed, known list) had the room.
   Now the matrix takes the half-width slot and scrolls inside itself, and the table gets
   the full width it actually needs.

   grid-column here is what the masonry packer reads to classify a card as full-width
   (it checks computed gridColumnEnd), so this one declaration both styles and places it. */
body.setup-active #page-setup #teamPanel { grid-column: 1 / -1; }
/* THE PAIR ENDS LEVEL (owner 2026-08-16: "the permissions card height must match
   resources"). A fixed 420px cap could only match the crew card by luck — the crew list
   grows as a studio adds people. Instead both cards stretch to the row's height and the
   permissions MATRIX takes whatever is left inside its card, scrolling within it. The
   app's own scroll marker (fade + chevron) attaches to .has-more-below by itself. */
body.setup-active #page-setup .setup-main > :is(#teamResourcesPanel, #rolesPermsCard) {
  align-self: stretch;
}
body.setup-active #page-setup #rolesPermsCard {
  display: flex; flex-direction: column; min-height: 0;
}
body.setup-active #page-setup #rolesPermsCard #rolesPermsGrid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}


/* ── Team table: contact details, and whether they are proven ────────────────
   Owner 2026-08-16: "how do i know if the email and phone number is verified as brand
   admin?" A tick alone would be ambiguous (verified WHAT?), so each line carries its own
   marker and the title says which fact it is asserting. */
.team-contact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-contact-line { display: flex; align-items: center; gap: 6px; min-width: 0;
  overflow-wrap: anywhere; }
.team-contact-sub { color: var(--mid-muted); font-size: var(--t-sm, 13px); }
.team-contact-none { font-style: italic; opacity: .75; }
/* Green tick and a muted word, not two colours of pill — the unverified state is the
   NORMAL state for a fresh invite and must not read as an error. */
.verif-ok { color: var(--mid-ok, #7ee29a); font-weight: 600; line-height: 1; flex: none; }
.verif-no { color: var(--mid-muted); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; border: 1px solid var(--mid-line); border-radius: 999px;
  padding: 1px 7px; line-height: 1.5; flex: none; white-space: nowrap; }


/* ── Dialog close control (owner 2026-08-17) ────────────────────────────────
   An × in the corner rather than a full-width "Not now": a dismiss is not a peer of the
   action, and giving it equal weight made the dialog read as a two-way choice. */
.sg-dialog-hasx { position: relative; }
.sg-dialog-x {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--mid-muted); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
}
.sg-dialog-x:hover { background: var(--mid-surface-3); color: var(--mid-text); }
.sg-dialog-x:focus-visible { outline: 2px solid var(--mid-accent, #d9ff5e); outline-offset: 2px; }
.sg-dialog-sub { color: var(--mid-muted); font-size: var(--t-sm, 13px); margin: -4px 0 12px; }
.sg-dialog-err { font-size: var(--t-sm, 13px); color: var(--mid-danger, #ff7a70); margin: 8px 0 0; }


/* ── Locked band: present, blurred, and explained (owner 2026-08-17) ────────
   Hiding the finance cards left a gap in the dashboard grid that read as a rendering
   fault. Locked instead: the card keeps its place, its contents are blurred and inert,
   and a plain line says who can unlock it. Nothing is behind the blur — a locked band is
   never loaded and the money endpoints are gated server-side. */
#page-dashboard .dash-cell.is-locked,
#page-dashboard .dash-band.is-locked { position: relative; overflow: hidden; }
#page-dashboard .is-locked > *:not(.band-lock) {
  filter: blur(7px); opacity: .45; pointer-events: none; user-select: none;
}
#page-dashboard .is-locked .band-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center;
  background: color-mix(in srgb, var(--mid-surface-2) 55%, transparent);
  border-radius: inherit;
}
#page-dashboard .is-locked .band-lock .material-symbols-outlined {
  font-size: 26px; color: var(--mid-muted); margin-bottom: 2px;
}
#page-dashboard .is-locked .band-lock b {
  font-size: var(--t-body, 14px); font-weight: var(--w-label, 500); color: var(--mid-text);
}
#page-dashboard .is-locked .band-lock span:last-child {
  font-size: var(--t-sm, 13px); color: var(--mid-muted); max-width: 30ch; line-height: 1.45;
}
/* A locked card must never be the tallest thing on the row just because it is empty. */
#page-dashboard .dash-cell.is-locked { min-height: 180px; }


/* ── Deal panel: every field on one grid (owner 2026-08-17) ─────────────────
   "why is the width of all fields not the same as owner dropdown field?"

   Because the three rows were three different shapes. .dl-field is a flex row whose
   control is width:64% of the row; the Owner row is a label above a slot that fills the
   card; "Referred by" is a full-width input under its label. Three constructions, three
   widths, one column — which reads as sloppiness even though each rule is reasonable on
   its own.

   One grid for all of them: a fixed label track and a control track that takes the rest.
   Now every control shares a left edge AND a right edge, whatever its label says. */
/* SCOPED TO .dlp-idcard, WHICH IS THE DEAL PANEL'S CARD. The first attempt used
   .dlp-overview-card — that class is on the CONTACT panel, so none of this applied and the
   fields stayed as they were (owner 2026-08-17: "the fields have different widths"). */
#dealDetailContent .dlp-idcard {
  --dl-label-w: 150px;   /* fits "How they arrived" without wrapping */
  /* One width for every row, so the label track and the control track are identical in all
     three sections. Without this each section's own container width decides its 1fr, and
     Owner (in a wider section) ended ~145px longer than City. */
  --dl-row-w: 100%;
}
#dealDetailContent .dlp-idcard :is(.dl-field, .dlp-owner-row, .detail-referral) {
  /* !important because the rules this has to beat are id-scoped and set display/flex on
     these same rows; matching specificity by hand would mean re-stating three selectors
     that are free to change. The outcome is what matters: one geometry, whatever else the
     cascade says (owner 2026-08-17, third report of the same misalignment). */
  display: grid !important;
  grid-template-columns: var(--dl-label-w, 150px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}
#dealDetailContent .dlp-idcard :is(.dl-field, .dlp-owner-row, .detail-referral) > :is(label, .dl-label, p.dl-label) {
  flex: none; margin: 0; align-self: center;
}
#dealDetailContent .dlp-idcard :is(.dl-field, .detail-referral) > :is(input, select),
#dealDetailContent .dlp-idcard .dlp-assign-slot,
#dealDetailContent .dlp-idcard .dlp-assign-slot > * {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
/* Static values (Created / Updated) sit on the same grid so their column lines up too —
   they are read, not edited, so they keep their plain type. */
#dealDetailContent .dlp-idcard .dl-field > .dl-field-static { justify-self: start; }
/* On a phone the label track would leave the control barely wider than its own text. */
@media (max-width: 768px) {
  #dealDetailContent .dlp-idcard :is(.dl-field, .dlp-owner-row, .detail-referral) {
    grid-template-columns: 1fr; gap: 6px;
  }
}

/* Each row sits in its own <section>; those sections must not be different widths, or two
   identical grids still produce two different control widths. */
#dealDetailContent .dlp-idcard :is(.dl-section, .dl-fields) { width: 100%; max-width: none; }
/* The old flex rule set the control to 64% of its row; the grid supersedes it, but the
   flex declaration is more specific in places, so state the width on the grid children. */
#dealDetailContent .dlp-idcard :is(.dl-field, .detail-referral) > :is(input, select),
#dealDetailContent .dlp-idcard .dlp-assign-slot,
#dealDetailContent .dlp-idcard .dlp-assign-slot > :is(select, button, div) {
  width: 100% !important; max-width: 100%; box-sizing: border-box;
}


/* ── Locked hero card (owner 2026-08-17) ────────────────────────────────────
   The card keeps its slot in the hero row so the layout does not gap; its value is a
   placeholder, never a blurred real figure — the number is not computed for a seat that
   may not see it, so there is nothing to recover from the DOM. */
.px-card.is-locked-card .px-card-value,
.px-card.is-locked-card h3 { color: var(--mid-muted); letter-spacing: .14em; }
.px-card.is-locked-card .px-card-label .material-symbols-outlined { opacity: .8; }
.px-card.is-locked-card { opacity: .82; }
.px-card.is-locked-card .px-card-caption,
.px-card.is-locked-card .px-card-sub { color: var(--mid-muted); }


/* ── Seats used / seats bought, beside the Team heading (owner 2026-08-17) ──
   Amber when full rather than red: reaching your seat limit is a fact about the plan, not
   an error the studio has made. */
.seat-count {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid var(--mid-line);
  font-size: var(--t-sm, 13px); font-weight: var(--w-reg, 400);
  color: var(--mid-muted); font-variant-numeric: tabular-nums; vertical-align: middle;
}
.seat-count.is-full { color: var(--mid-tertiary, #ffc176); border-color: currentColor; }


/* An automatic template shown behind the toggle: visible so a studio can see what the app
   sends on its behalf, but visibly not a thing to pick (owner 2026-08-17). */
.tpl-pick-row.is-auto { opacity: .6; }
.tpl-pick-row.is-auto .wa-tpl-meta { color: var(--mid-tertiary, #ffc176); }
.tpl-auto-toggle { font-size: var(--t-sm, 13px); color: var(--mid-muted); }


/* ── Client portal row: the link IS the control (owner 2026-08-17) ──────────
   Was a read-only input plus an Open button — two controls doing an anchor's job, and the
   input invited an edit that went nowhere. */
/* A LINK, NOT A FIELD (owner 2026-08-17: "dont make the client portal link look like an
   input field"). The well and the outline were left over from the read-only input this
   replaced — and a bordered box still reads as something you type into. */
.dlp-portal-row .dlp-portal-url {
  display: inline; padding: 0; border: 0; background: none;
  /* --mid-accent-ink, never --mid-accent: the accent is a FILL colour and fails contrast
     as text — the rule this file already enforces. */
  color: var(--mid-accent-ink); text-decoration: underline; text-underline-offset: 3px;
  font-size: var(--t-sm, 13px); overflow-wrap: anywhere; line-height: 1.5;
}
.dlp-portal-row { padding: 2px 0; }
.dlp-portal-row .dlp-portal-url:hover { text-decoration-thickness: 2px; }
.dlp-portal-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* Copy is the fallback for when sending is not possible, so it reads as a quiet aside
   rather than a peer of Send. */
.dlp-portal-actions .dlp-portal-copy { font-size: var(--t-sm, 13px); color: var(--mid-muted); }


/* ── One placeholder treatment across the detail panels (owner 2026-08-17) ──
   "next step field has text that is bolder than the rest of the placeholders."

   Nothing set placeholders in these panels, so each control inherited whatever its own
   rule happened to say — the task form's inputs carry a heavier weight than the .dl-field
   ones, and that weight showed through on the placeholder. A placeholder is a hint, never
   a value: same colour, same weight, everywhere. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent)
  :is(input, textarea)::placeholder {
  color: var(--mid-muted);
  font-weight: var(--w-reg, 400);
  opacity: 1;                    /* Firefox dims placeholders by default; we set the colour */
}


/* ── Contact card: editing must not move anything (owner 2026-08-17) ────────
   "editing fields decreases width, why?"

   Because the two states were two different layouts: read mode is a flex row with a 38%
   label, edit mode stacks label over control. Pressing Edit therefore re-flowed the whole
   card — every field changed width and start point, which reads as the page breaking
   rather than as a mode changing.

   One grid for both states. Only the CHROME differs now: in read mode the control has no
   border or background so a value looks like text; in edit mode it looks like a field. The
   geometry never moves. */
#contactDetailContent .dlp-overview-card { --dl-label-w: 130px; }
#contactDetailContent .dlp-overview-card .dl-field,
#contactDetailContent .dlp-overview-card:not(.editing) .dl-field {
  display: grid;
  grid-template-columns: var(--dl-label-w) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 0;
}
#contactDetailContent .dlp-overview-card .dl-field > label,
#contactDetailContent .dlp-overview-card:not(.editing) .dl-field > label {
  flex: none; max-width: none; width: auto;
  color: var(--mid-muted); font-size: var(--t-sm, 13px);
}
#contactDetailContent .dlp-overview-card .dl-field > :is(input, select, .dl-field-static),
#contactDetailContent .dlp-overview-card:not(.editing) .dl-field > :is(input, select, .dl-field-static) {
  width: 100% !important; max-width: 100%; min-width: 0; box-sizing: border-box;
  justify-self: stretch;
}
/* Read mode keeps its "this is a value, not a field" look — just without moving. */
#contactDetailContent .dlp-overview-card:not(.editing) .dl-field > :is(input, select, .dl-field-static) {
  padding: 0 !important; background: transparent !important; border: none !important;
}





/* ── Follow-up intensity, in the Autonomy card (owner 2026-08-17) ───────────
   Sits among the toggle rows, so it wears the same box: same surface, same border, same
   radius. A bare <select> next to styled toggles reads as something half-finished. */
body.setup-active #page-setup .fu-intensity {
  display: grid; gap: 8px; padding: 12px;
  border: 1px solid var(--mid-line); border-radius: 6px;
  background: var(--mid-base); margin-top: 8px;
}
body.setup-active #page-setup .fu-intensity > span {
  font-size: var(--t-body, 14px); font-weight: var(--w-label, 500); color: var(--mid-text);
}
body.setup-active #page-setup .fu-intensity :is(select, input) {
  width: 100%; max-width: 100%; box-sizing: border-box; min-height: 40px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line);
  font: inherit; font-size: var(--t-body, 14px);
}
body.setup-active #page-setup .fu-intensity small {
  color: var(--mid-muted); font-size: var(--t-sm, 13px); line-height: 1.5;
}

/* ── The follow-up spacing warning (owner 2026-08-17) ───────────────────────
   Amber, then red. Not a toast — it stays on screen while the setting does, because the
   consequence outlives the moment of choosing. */
body.setup-active #page-setup .fu-warn {
  margin: 4px 0 0; padding: 10px 12px; border-radius: 8px;
  font-size: var(--t-sm, 13px); line-height: 1.5;
  border: 1px solid var(--mid-tertiary, #ffc176);
  color: var(--mid-tertiary, #ffc176);
  background: color-mix(in srgb, var(--mid-tertiary, #ffc176) 10%, transparent);
}
body.setup-active #page-setup .fu-warn[data-level="high"] { font-weight: 500; }
body.setup-active #page-setup .fu-warn[data-level="severe"] {
  border-color: var(--mid-danger, #ff7a70); color: var(--mid-danger, #ff7a70); font-weight: 500;
  background: color-mix(in srgb, var(--mid-danger, #ff7a70) 12%, transparent);
}

/* ── A tick beside the field that just saved (owner 2026-08-17) ─────────────
   The single hint sits in the card header, so a save below the fold confirmed itself
   off-screen. This marks the ROW — an <input> cannot carry a ::after, and the row is what
   the eye is already on. Fades on its own; nothing to dismiss. */
:is(#dealDetailContent, #contactDetailContent) :is(.dl-field, .detail-referral, .dlp-owner-row, label).is-saved {
  position: relative;
}
:is(#dealDetailContent, #contactDetailContent) :is(.dl-field, .detail-referral, .dlp-owner-row, label).is-saved::after {
  content: "\2713";
  position: absolute; right: -20px; top: 50%; transform: translateY(-50%);
  color: var(--mid-ok, #7ee29a); font-size: 15px; font-weight: 700; line-height: 1;
  pointer-events: none; animation: savedTick 1.6s ease-out forwards;
}
@keyframes savedTick {
  0%   { opacity: 0; transform: translateY(-50%) scale(.7); }
  15%  { opacity: 1; transform: translateY(-50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#dealDetailContent, #contactDetailContent) .is-saved::after { animation: none; opacity: 1; }
}

/* ── PROJECT PAGE: two rows, not three columns (owner 2026-08-17) ───────────
   Row 1 — overview (with the couple's portal folded in) · activity · finance.
   Row 2 — production and post-production at half the page each: they carry event and
   deliverable tables that a third-width column was squeezing. */
#projectDetailContent .proj-rows { display: flex; flex-direction: column; gap: 16px; }
#projectDetailContent .proj-rows .dlp-card { margin-bottom: 0; }
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .proj-row-top {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start;
  }
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .proj-row-work {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start;
  }
}
@media (min-width: 901px) and (max-width: 1099px) {
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .proj-row-top {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start;
  }
  /* Finance takes the full width under the pair rather than orphaning into a tall third. */
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .proj-row-top > :nth-child(3) { grid-column: 1 / -1; }
  html:is([data-theme], :not([data-theme])) body #projectDetailContent .proj-row-work {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start;
  }
}
/* ── EACH ROW IS A SCREEN (owner 2026-08-17) ────────────────────────────────
   "the cards on projects were supposed to be full screen height and the page should
   scroll down to show the production and post production cards."

   So row 1 fills the viewport and row 2 sits below the fold: production and
   post-production are reached by scrolling, not by squeezing five cards into one screen.
   Cards STRETCH to the row (align-items:stretch, not start) and scroll their own
   contents — a deliverables table taller than the screen scrolls inside its card rather
   than dragging the whole row taller than the viewport it is supposed to match.

   Desktop only: on a phone a viewport-tall card is a card you cannot see past. */
@media (min-width: 901px) {
  html:is([data-theme], :not([data-theme])) body #projectDetailContent :is(.proj-row-top, .proj-row-work) {
    /* 36px scroll padding + the back row + breathing space under the fold. */
    min-height: calc(100vh - 150px);
    align-items: stretch;
  }
  html:is([data-theme], :not([data-theme])) body #projectDetailContent :is(.proj-row-top, .proj-row-work) > .dlp-card {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }
}

/* Below 900 everything stacks — the flex column above already does that. */

/* ── THE HIDDEN ATTRIBUTE MUST ACTUALLY HIDE ────────────────────────────────
   Owner 2026-08-17: "still see two new pin buttons".

   It was not a stale cache. `el.hidden = true` (and a `hidden` attribute in the markup)
   only works because the browser's default sheet says [hidden]{display:none} — and ANY
   author rule setting `display` beats a default. This file gives .dlp-q-link
   `display:inline-flex` in four places, so the hidden New PIN button kept rendering, and
   every other hidden-by-attribute control in these panels had the same problem.

   The same fault was fixed on login.html two days ago and never generalised. One rule,
   last in the file, so `hidden` means hidden everywhere.

   !important is load-bearing here: the rules it has to beat are id-scoped and would
   otherwise win on specificity regardless of order. */
/* ── ACCOUNT HEALTH ON THE LEAD CARD (platform board) ─────────────────────────
   Owner 2026-08-19: green dot = fine, orange = something's off (issue named on the
   card), red = critical (overview on the card). Details live inside the deal.
   Semantic colour only — deliberately NOT the accent cyan, so "needs attention"
   can never be confused with "selected". Midnight tokens throughout. */
.kb-health {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto; margin-right: 2px;
  background: var(--mid-muted);
}
.kb-health.is-ok       { background: var(--kb-health-ok); }
.kb-health.is-warn     { background: var(--kb-health-warn); }
/* Red gets a halo: at 8px, red and orange are close enough that a glance could
   confuse them, and confusing critical with a warning is the expensive mistake. */
.kb-health.is-critical { background: var(--kb-health-crit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kb-health-crit) 20%, transparent); }

.kb-healthline {
  margin: 4px 0 0;
  font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-healthline.is-warn     { color: var(--kb-health-warn-ink); }
.kb-healthline.is-critical { color: var(--kb-health-crit-ink); font-weight: 600; }


/* ── THE CUSTOMER CARD (platform deal panel) ──────────────────────────────────
   Owner 2026-08-19: the studio-shaped column asked all the wrong questions of a
   CUSTOMER. Ordered by what gets acted on: what's broken, what they pay, what they
   use, then the paper trail. Uses the kb-* tokens so it tracks the board's theme. */
.px-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--kb-line-soft);
}
.px-row:last-child { border-bottom: 0; }
.px-row b { font-weight: 600; font-size: 13px; color: var(--kb-text); }
.px-sub { font-size: 12px; color: var(--kb-muted); margin-top: 2px; }
.px-since { font-size: 11px; color: var(--kb-muted); white-space: nowrap; flex: 0 0 auto; }
/* A severity stripe, so a broken account is legible before a word is read. */
.px-row-critical { border-left: 3px solid var(--kb-health-crit); padding-left: 10px; }
.px-row-warn     { border-left: 3px solid var(--kb-health-warn); padding-left: 10px; }
.px-row-ok       { border-left: 3px solid var(--kb-health-ok);   padding-left: 10px; }

.px-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--kb-tile); color: var(--kb-muted); text-transform: capitalize;
}
.px-pill.is-ok       { color: var(--kb-health-ok); }
.px-pill.is-warn     { color: var(--kb-health-warn-ink); }
.px-pill.is-critical { color: var(--kb-health-crit-ink); }

.px-planrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.px-plan-name { font-size: 15px; font-weight: 600; color: var(--kb-text); }
.px-plan-price { font-size: 13px; font-weight: 500; color: var(--kb-muted); margin-left: 6px; }

.px-kv { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; }
.px-kv > div { display: flex; flex-direction: column; gap: 1px; }
.px-kv span { font-size: 11px; color: var(--kb-muted); }
.px-kv b { font-size: 13px; font-weight: 600; color: var(--kb-text); font-variant-numeric: tabular-nums; }
.px-kv-tight { margin-top: 8px; }

.px-meter { margin: 0 0 10px; }
.px-meter-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--kb-muted); }
.px-meter-head b { color: var(--kb-text); font-variant-numeric: tabular-nums; }
.px-meter-track { height: 4px; border-radius: 999px; background: var(--kb-tile); margin-top: 5px; overflow: hidden; }
.px-meter-track > span { display: block; height: 100%; background: var(--kb-health-ok); border-radius: 999px; }
.px-meter.is-near .px-meter-track > span { background: var(--kb-health-warn); }
.px-meter.is-over .px-meter-track > span { background: var(--kb-health-crit); }

.px-extend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.px-extend-label { font-size: 12px; color: var(--kb-muted); }

/* Vertical rhythm: without a divider the section label reads as a caption on the block
   ABOVE it rather than a heading for the block below. */
#pxCustomerCard .dl-section + .dl-section {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--kb-line-soft);
}
#pxCustomerCard .dl-label { margin-bottom: 8px; }


/* ── NO GSM DIALLING ON DESKTOP ───────────────────────────────────────────────
   Owner 2026-08-19: "i also dont need a gsm call feature on desktop."
   A `tel:` link does nothing useful on a machine with no dialler, and it sat next to
   the WhatsApp call button wearing an icon that read as "call" — so it was pressed
   INSTEAD of the softphone, and the click never reached the app at all. Hidden above
   the phone/tablet breakpoint; still there on a device that can actually place the call. */
@media (min-width: 961px) {
  .dlp-icon-btn.dlp-call { display: none; }
}


/* ── AVAILABLE = A GREEN CALL BUTTON ──────────────────────────────────────────
   Owner 2026-08-20: green when calling is available, and no label on it.
   Only the GRANTED state is filled — that is the one moment the control places a call.
   WhatsApp's own green, so the button and the mark inside it say the same thing. */
.call-state-granted {
  background: #25D366;
  border-color: #25D366 !important;
  color: #06210f;
}
.call-state-granted:hover { background: #1eb455; border-color: #1eb455 !important; }


/* The paired WhatsApp marks (call + message). Sized like the icon font they replaced so
   nothing around them shifts, and inheriting `currentColor` so one drawing serves the grey
   idle state and the white-on-green "Call" button alike. */
.wa-mark { width: 18px; height: 18px; display: block; flex: 0 0 auto; }
.call-state-granted .wa-mark { width: 17px; height: 17px; }

/* The chat side panel mounts the SHARED embedded chat, and a side panel gives it the whole
   pane. `.contact-chat` carries a fixed height for the contact/deal panels, where the chat sits
   inside a scrolling column — inside this panel that fixed height clipped the composer off the
   bottom. Let it flex here, and only here. */
.chatpanel-body .contact-chat { height: auto; flex: 1 1 auto; min-height: 0; }

/* Was `.contact-chat #contactChatBanner` — keyed to ONE mount's id, so the deal panel and the
   side panel never got it. The rule is about the banner inside a chat, not about which panel. */
.contact-chat .inbox-banner { margin: 0; border-radius: 0; border-left: none; border-right: none; padding: 8px 12px; }

/* The delivery tick was `.msg-tick { font-size: 13px; color: var(--mid-accent-ink) }` — one class,
   so `.material-symbols-outlined` (defined later, same specificity) won the size and it rendered
   at 24px, and the accent ink measured 1.04:1 against the thread background: a lime tick on
   near-white, invisible. It reads as part of the meta line, so it should simply BE that colour —
   currentColor keeps it correct in both themes and behind any future palette change. */
.msg-meta .msg-tick { font-size: 13px; color: currentColor; opacity: 0.8; vertical-align: -2px; margin-left: 3px; }

/* KNOWN, NOT FIXED HERE: "Window open · 23h 12m left" is a hardcoded dark-theme green (#9fe6b2)
   which measures 1.37:1 against the bar in the LIGHT theme — the countdown is effectively
   invisible there. Pre-existing, and NOT safe to fix with `var(--mid-ok)`: that token is
   redefined in several scopes and resolves to a DARK green (#15672E) under the dark cascade,
   measured at 2.33:1 on the dark bar — trading one theme's bug for the other's. It needs an
   explicit per-theme colour verified against the running app, not a token swap.

   The "connect it" link in the not-connected state had no styling at all, so it rendered as
   the browser's default blue inside a designed bar. It should read as part of the message it
   sits in — inherit the bar's state colour and stay underlined so it is still obviously a link. */
.inbox-window-bar a,
.contact-chat-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── TWO-CARD DETAIL LAYOUT ───────────────────────────────────────────────────
   The person on the left (25%), everything about them on the right (75%) behind tabs.
   Three side-by-side cards meant three narrow columns, only one of which is being read at
   a time. Same breakpoint and the same specificity chain as .dlp-cols3 above, so the two
   behave identically on the way down to mobile (single column, stacked). */
:is(#dealDetailPanel, #contactDetailPanel, #projectDetailPanel) .dlp-cols2 { display: block; }
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 {
    display: grid; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
    gap: 16px;
    align-items: stretch;
    /* FIXED height, not min-height. The two cards are the same size no matter which tab is
       open — a tab with less in it scrolls less, it does not resize the page around it, and
       the operator's eye doesn't have to re-find the tab strip after every click.
       100dvh (not vh) so mobile browser chrome can't cut it off. */
    height: calc(100dvh - 190px);
    padding-bottom: 28px;
  }
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-card { margin-bottom: 0; }
}

/* The tab strip IS the card's header now — no title beside it, so it starts at the left edge
   of the card instead of being pushed right by a heading. */
:is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-tabs-head {
  justify-content: flex-start;
  margin: 0 0 18px;
}

/* Production and Post-Production keep their existing card markup — they carry event and
   deliverable tables with a lot of wired behaviour — but inside a tab they are the pane's whole
   content, so the card shell would draw a box inside a box. Flatten it rather than rewriting
   the markup and risking those handlers. */
:is(#projectDetailContent, #dealDetailContent, #contactDetailContent) .dlp-pane > .dlp-card {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
}

/* The cards fill that fixed row, and whatever is inside them scrolls — the CARD stays put. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-card {
    height: 100%; min-height: 0;
  }
  /* Left card: its own scroll when the details run long. */
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-idcard {
    overflow-y: auto;
  }
  /* Right card: the tab strip stays pinned at the top, the open pane scrolls beneath it. */
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-tabwrap {
    display: flex; flex-direction: column; overflow: hidden;
  }
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-tabwrap > .dlp-pane:not([hidden]) {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
  }
  /* The Messages pane holds the chat, which scrolls itself — let it fill instead of double-scrolling. */
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-cols2 > .dlp-tabwrap > .dlp-pane-flush:not([hidden]) {
    overflow: hidden; display: flex; flex-direction: column;
  }
}

/* THE CHAT MUST FIT ITS PANE, NOT ITS OWN IDEA OF A HEIGHT.
   .contact-chat is `height: min(70vh, 640px)`, which was right when it sat in a page that
   scrolled. Inside a fixed-height card that number is usually TALLER than the pane, so the
   composer was pushed past the bottom edge and clipped (owner 2026-08-20: "chat input field is
   cut at the bottom"). In a pane it takes the pane's height instead, and the messages list —
   which already has its own scroll — absorbs the difference. */
@media (min-width: 1100px) {
  html:is([data-theme], :not([data-theme])) body :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-pane-flush > .contact-chat {
    height: 100%; min-height: 0;
  }
}
/* Below the two-column breakpoint the pane is not height-constrained, so give the chat a
   sensible box rather than letting it collapse to nothing. */
@media (max-width: 1099px) {
  :is(#dealDetailContent, #contactDetailContent, #projectDetailContent) .dlp-pane-flush > .contact-chat {
    height: min(70vh, 560px);
  }
}

/* ── NO CARD INSIDE A CARD ────────────────────────────────────────────────────
   Production and Post-Production are panes of one card now, so the event / deliverable /
   payment rows inside them were boxes drawn inside a box (owner 2026-08-20: "card within card
   looks off"). They keep their internal layout and every handler; they just stop drawing a
   shell, and a hairline separates them instead. */
#projectDetailPanel .dlp-pane :is(.proj-evt-card, .proj-fin-card, .proj-deliv-row, .proj-delivpage-link, .proj-extra-row, .proj-cost-row, .proj-plan-row),
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects) .dlp-pane :is(.proj-extra-row, .proj-cost-row, .proj-deliv-row, .proj-delivpage-link).proj-fin-card,
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .dlp-pane .proj-evt-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--kb-line, var(--mid-line));
  padding: 16px 0;
  box-shadow: none;
}
#projectDetailPanel .dlp-pane :is(.proj-evt-card, .proj-fin-card, .proj-deliv-row, .proj-plan-row):last-child { border-bottom: 0; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .dlp-pane .proj-evt-head { padding: 0 0 8px; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .dlp-pane .proj-evt-card.is-open .proj-evt-body { padding: 0; }

/* ── ONE ROW, ONE ORDER ───────────────────────────────────────────────────────
   Post-Production: what it is · who has it · when it's due · where it's got to. */
#projectDetailPanel .proj-row4 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 150px auto;
  gap: 10px; align-items: center;
}
#projectDetailPanel .proj-row4 > .proj-res-rolename { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Team: type · team member · quantity · data status. The quantity belongs to the ROLE (it is
   how many of that type are needed), so it sits once in the third column on the role's line
   while each crew member below lines up under the same headings. */
/* Same four columns on the role line and on each crew line, so they read as one table.
   The `html:is(...) body` prefix is not decoration — the existing rules for these rows carry
   it, and without it this loses the cascade and the columns stay as they were. */
html:is([data-theme], :not([data-theme])) body #projectDetailPanel :is(.proj-res-rolerow, .proj-res-l1) {
  display: grid;
  /* type · team member · quantity · status. The type column is 1fr, not 2fr: on a quote-seeded
     row it is hidden, and an empty 2fr column pushed the member select two-thirds across. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 88px minmax(92px, auto);
  gap: 10px; align-items: center;
}
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-rolerow > :is(.deal-evt-role, .proj-res-qty-fixed) { grid-column: 3; justify-self: start; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 > .proj-res-sel { grid-column: 2; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 > .proj-res-status { grid-column: 4; }
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 > .proj-res-confirm,
html:is([data-theme], :not([data-theme])) body #projectDetailPanel .proj-res-l1 > .proj-res-ask { grid-column: 4; justify-self: end; }

/* A label is two words; a link is a URL. */
:is(#finBand, #page-projects, #projectDetailPanel) .proj-split-3070 { display: grid; grid-template-columns: 30fr 70fr; gap: 10px; }
:is(#finBand, #page-projects, #projectDetailPanel) .proj-split-3070 > .proj-plan-f { flex: none; }

/* What came in — when, how much, how — is one line. These rows are a wrapping flex whose
   fields have a 120px basis, so a third field simply dropped to the next line. */
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects, #projectDetailPanel) .proj-plan-row .proj-plan-l3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end;
}
html:is([data-theme], :not([data-theme])) body :is(#finBand, #page-projects, #projectDetailPanel) .proj-plan-row .proj-plan-l2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end;
}

/* A derived date is not a field you fill in — it reads as a value, not an input. */
:is(#finBand, #page-projects, #projectDetailPanel) .proj-plan-derived > input {
  background: transparent !important;
  border-color: transparent !important;
  cursor: default;
  padding-left: 0 !important;
}

/* The Production / Post-Production tab bodies. They used to be cards with their own <h3>; the
   tab strip already names them, so all that is left is the content and a status summary on the
   right. No shell, no repeated title. */
:is(#projectDetailPanel, #page-projects) .proj-tabbody { display: flex; flex-direction: column; gap: 12px; }
:is(#projectDetailPanel, #page-projects) .proj-tabsum {
  justify-content: flex-end; min-height: 0; margin: 0 0 2px;
}
:is(#projectDetailPanel, #page-projects) .proj-tabsum > span:first-child { display: none; }

/* The contact's Activity tab: one block per booking. */
#contactDetailContent .contact-deal-group { padding: 14px 0; border-bottom: 1px solid var(--kb-line, var(--mid-line)); }
#contactDetailContent .contact-deal-group:last-child { border-bottom: 0; }
#contactDetailContent .contact-deal-steps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#contactDetailContent .contact-deal-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm, 13px); }

/* Paperwork state. Amber = something is owed, red = nothing is agreed at all. Deliberately the
   same shape as the project-status pill beside it, so it reads as part of the same row rather
   than as an error box. */
.proj-badge.proj-contract-warn { background: rgba(255,193,118,0.16); color: var(--mid-tertiary, #a86b1a); border: 1px solid rgba(255,193,118,0.45); }
.proj-badge.proj-contract-bad { background: rgba(179,38,30,0.10); color: #b3261e; border: 1px solid rgba(179,38,30,0.35); }
html[data-theme="dark"] .proj-badge.proj-contract-bad,
:root:not([data-theme="light"]) .proj-badge.proj-contract-bad { color: #ffb4ab; }


/* Readiness chips — five states a studio can be in, readable without opening the row. */
#page-platform .pf-ready { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#page-platform .pf-chip {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 9999px; white-space: nowrap;
  background: var(--mid-lowest); color: var(--mid-text-2);
  border: 1px solid var(--mid-line);
}
#page-platform .pf-chip.is-on {
  background: rgba(80,200,120,.16); color: #7fe0a0; border-color: rgba(80,200,120,.35);
}

/* The console is hidden by a class, never removed from the DOM — see applyWorkspaceKind.
   Removing it meant a slow or failed /api/auth/status permanently hid it with nothing to
   restore, which is exactly what the owner kept hitting. */
body.no-platform-console :is(.nav-item, .more-item)[data-page="platform"],
body.no-platform-console :is(.nav-item, .more-item)[data-page="service"],
body.no-platform-console #page-platform { display: none !important; }

/* An invite code is read off a screen and typed by hand — give it room and tabular digits. */
#page-platform .pf-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; font-size: 15px; font-variant-numeric: tabular-nums; }
/* ── PLATFORM OPERATIONS (owner 2026-08-21) ──────────────────────────────────
   Studios, plans, trials, routing, talent approval. Platform workspace only.

   ALWAYS-DARK --mid-* TOKENS, never --surface/--ink/--panel/--line: this page sits at
   body level, outside #page-dashboard, where those resolve to the LIGHT theme and would
   paint a cream card onto the dark app (CLAUDE.md, the repeated "white card" bug).
   The sub-tabs reuse .sales-subnav/.sales-subtab above, so they cannot drift. */
#page-platform .pf-body { padding-bottom: 40px; }
#page-platform .pf-count {
  font-size: 13px; font-weight: 600; color: var(--mid-muted);
  margin: 0 0 10px; letter-spacing: .01em;
}
#page-platform .pf-loading,
#page-platform .pf-empty {
  padding: 28px; border-radius: var(--mid-radius, 16px);
  background: var(--mid-surface); color: var(--mid-muted);
  border: 1px solid var(--mid-line); font-size: 14px;
}
#page-platform .pf-list { display: flex; flex-direction: column; gap: 10px; }
#page-platform .pf-row {
  background: var(--mid-surface); border: 1px solid var(--mid-line);
  border-radius: var(--mid-radius, 16px); overflow: hidden;
}
#page-platform .pf-row.is-suspended { opacity: .72; }
#page-platform .pf-row-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--mid-text); font: inherit;
}
#page-platform .pf-row-head.is-static { cursor: default; }
#page-platform .pf-row-head:hover:not(.is-static) { background: var(--mid-surface-3); }
#page-platform .pf-row-name { font-size: 15px; font-weight: 600; color: var(--mid-text); }
#page-platform .pf-row-slug { font-size: 13px; color: var(--mid-muted); flex: 1 1 auto; }
#page-platform .pf-chev { color: var(--mid-muted); font-size: 20px; }
#page-platform .pf-badge {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
  background: var(--mid-surface-3); color: var(--mid-text-2); white-space: nowrap;
}
/* Semantic state, separate from the accent — read at a glance on a long list. */
#page-platform .pf-badge.is-good { background: rgba(80,200,120,.14); color: #7fe0a0; }
#page-platform .pf-badge.is-warn { background: rgba(255,193,118,.16); color: #ffc176; }
#page-platform .pf-badge.is-bad  { background: rgba(255,120,110,.16); color: #ff9d95; }
#page-platform .pf-badge.is-off  { background: var(--mid-lowest); color: var(--mid-text-2); }

#page-platform .pf-row-body { padding: 4px 16px 16px; border-top: 1px solid var(--mid-line); }
#page-platform .pf-grid {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#page-platform .pf-card {
  background: var(--mid-surface-3); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: 14px;
}
#page-platform .pf-card h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mid-text-2);
}
#page-platform .pf-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
#page-platform .pf-field label { font-size: 12px; color: var(--mid-text-2); }
/* Inputs inside a dark surface — the well, not the card (CLAUDE.md rule 5). */
#page-platform .pf-field select,
#page-platform .pf-field input,
#page-platform .pf-reason {
  background: var(--mid-lowest); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 14px; width: 100%;
}
#page-platform .pf-note { font-size: 13px; color: var(--mid-text-2); margin: 0 0 10px; }
#page-platform .pf-note.pf-dim { color: var(--mid-text-2); font-size: 12px; }
#page-platform .pf-btn {
  padding: 8px 16px; border-radius: 9999px; border: 1px solid var(--mid-line);
  background: var(--mid-surface); color: var(--mid-text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
#page-platform .pf-btn:hover { background: var(--mid-surface-4, var(--mid-surface-3)); }
#page-platform .pf-btn:disabled { opacity: .55; cursor: default; }
#page-platform .pf-btn.is-primary { background: #d9ff5e; color: #1a2000; border-color: transparent; }
#page-platform .pf-btn.is-danger { color: #ff9d95; border-color: rgba(255,120,110,.4); }
#page-platform .pf-routes,
#page-platform .pf-users { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
#page-platform .pf-routes li,
#page-platform .pf-users li {
  display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--mid-line);
}
#page-platform .pf-rk, #page-platform .pf-urole { color: var(--mid-text-2); font-size: 12px; }
#page-platform .pf-rv, #page-platform .pf-uemail {
  color: var(--mid-text); flex: 1 1 auto; word-break: break-all;
  font-variant-numeric: tabular-nums;
}
#page-platform .pf-ro { color: var(--mid-text-2); font-size: 11px; }
#page-platform .pf-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 12px; }
#page-platform .pf-actions .pf-reason { flex: 1 1 220px; width: auto; }
@media (max-width: 960px) {
  #page-platform .pf-grid { grid-template-columns: 1fr; }
  #page-platform .pf-row-slug { display: none; }
  /* Measured at 375px: a real studio name ("Zoticus Weddings & Cinematic Films
     Hyderabad") was squeezed into a 79px column by a 200px status badge, wrapping the
     header to 168px tall. The name is what you scan for, so it takes the first line on
     its own and the badge drops beneath it. */
  #page-platform .pf-row-head { flex-wrap: wrap; row-gap: 6px; }
  #page-platform .pf-row-name { flex: 1 1 100%; min-width: 0; order: 1; }
  #page-platform .pf-badge { order: 2; }
  #page-platform .pf-chev { order: 3; margin-left: auto; }
}

[hidden] { display: none !important; }