/* =========================================================================
   Chameleon Partner Portal — visual demo
   Rebuilt from the WordPress/Bricks export as a static Cloudflare Pages site.
   Brand: navy #192857 + green #61a60e (from the Chameleon logo).
   Contrast ratios noted inline as "x.xx:1" on new/changed color pairs.
   ========================================================================= */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* brand */
  --navy:        #192857;
  --navy-700:    #131f43;
  --navy-800:    #0e1730;
  --green:       #61a60e;   /* reserved: focus rings (rgba), status dots, glows — never text/CTA fill */
  --green-600:   #538f0c;
  --green-700:   #457708;   /* accessible CTA / active-nav / avatar green — 5.39:1 on white */
  --green-800:   #3a6607;   /* primary button hover/active, legend text — 6.81:1 on white */
  --green-soft:  #cceec6;
  --green-ink:   var(--green-700);  /* green TEXT (links, up-delta) — 5.39:1 on white */

  /* neutrals (light theme) */
  --bg:          #f4f6fa;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e5e9f2;
  --text:        #1b2333;
  --muted:       #5b6478;   /* 5.48:1 on --bg, 5.67:1 on --surface-2 */
  --muted-2:     #98a1b3;
  --chrome-hover: #e9edf5;  /* topbar/menu hover fill — --surface-2 is invisible on the 85-90% glass */

  /* status */
  --danger:      #b42318;   /* 6.57:1 on white — .down text + form invalid border */
  --danger-ring: rgba(180,35,24,.16);

  /* stage colors */
  --stage-set-bg:      #e7effe;  --stage-set-fg:      #2563c9;  /* 4.90:1 */
  --stage-follow-bg:   #fff2d9;  --stage-follow-fg:   #8a5a12;  /* 5.34:1 */
  --stage-agree-bg:    #ede7fb;  --stage-agree-fg:    #6d45c8;  /* 5.22:1 */
  --stage-won-bg:      #cceec6;  --stage-won-fg:      #2f6b12;  /* 5.14:1 */
  --stage-lost-bg:     #fde8e6;  --stage-lost-fg:     #b42318;  /* 5.02:1 */
  /* the commercial phase (Proposal / In Contract) — brand navy, the one stage
     hue that carries a rim, so it stays separable from the brighter --stage-set
     blue at pill size where hue alone is a weak signal */
  --stage-deal-bg:     #e3e8f6;  --stage-deal-fg:     #2f4488;  /* 7.44:1 */
  --stage-deal-rim:    rgba(47,68,136,.22);

  /* product hues — visually distinct from the four stage hues (decorative dots beside text) */
  --product-time:  #0ea5e9;
  --product-parts: #0d9488;
  --product-labor: #db2777;
  --product-warranty: #2563eb;
  --product-timeplus: #6366f1;
  --product-insight:  #d97706;
  --product-perfgroup:#9333ea;
  --product-coach:    #65a30d;

  /* type scale (rem, base = 16px) */
  --text-xs:   .6875rem;  /* 11px */
  --text-sm:   .8125rem;  /* 13px (absorbs 12.5/13/13.5) */
  --text-ms:   .875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.625rem;  /* 26px */
  --text-2xl:  1.875rem;  /* 30px */

  /* spacing scale (4px grid) */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;

  /* shape */
  --radius-l:    16px;
  --radius-m:    12px;
  --radius-s:    8px;
  /* padlock glyph, used as a mask so it inherits the text colour it sits in */
  --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -6px rgba(16,24,40,.10);
  --shadow-pop:  rgba(16,24,40,.14) 0 12px 40px -8px;

  /* motion — the only two easings in the shell; no spring/overshoot */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 460ms;

  /* elevation scale (shell chrome) */
  --elev-1: 0 10px 30px -20px rgba(14,23,48,.6);   /* topbar scrolled */
  --elev-2: var(--shadow-pop);                      /* menus */
  --elev-3: rgba(16,24,40,.28) 0 24px 64px -16px;   /* drawer */

  --sidebar-w: 262px;
  --topbar-h: 66px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  accent-color: var(--green);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0b101d;   /* deeper page → cards lift off it without loud edges */
  --surface:   #141b2e;
  --surface-2: #1d2842;   /* recessed wells, table header, hovers */
  /* Borders are NOT the separator in dark — surfaces separate by fill contrast
     (the --bg → --surface → --surface-2 ramp), and outlines are reserved for
     focus/hover. Structure gets near-invisible translucent hairlines; controls
     get a faint rim that only sharpens when engaged. Alpha values compose over
     any fill, so one token works on bg, surface and wells alike. */
  --border:    rgba(159,178,224,.10);   /* structural hairline — barely-there by design */
  --control-border:       rgba(159,178,224,.20);  /* input/ghost rim */
  --control-border-hover: rgba(159,178,224,.38);  /* hover/active edge */
  --field:       #10182b;           /* input wells sit below the card surface */
  --field-focus: #182342;           /* well brightens when engaged */
  --text:      #e7ebf3;
  --muted:     #9aa4bb;             /* 5.9:1 on --surface */
  --muted-2:   #6c768f;
  --chrome-hover: #1d2842;  /* = --surface-2; dark hover pixels unchanged */

  --green-ink: #61a60e;             /* 5.8:1 on --surface — green text on dark */
  --green-bright:   #7ec81a;        /* the ONE bright accent green: focus borders, dark CTA top */
  --green-soft-ink: #9fd980;        /* 9.8:1 on --surface — soft green labels/ticks */
  --danger:    #ff6b6b;      /* 6.03:1 on --surface — .down text + invalid border */
  --danger-ring: rgba(255,107,107,.20);

  /* dim, desaturated fills with lightened foregrounds so dark mode isn't bright pastels */
  --stage-set-bg:    #16233d;  --stage-set-fg:    #8fbdf5;  /* 8.02:1 */
  --stage-follow-bg: #2a2110;  --stage-follow-fg: #e6c67e;  /* 9.63:1 */
  --stage-agree-bg:  #241b3d;  --stage-agree-fg:  #c3a8f5;  /* 7.88:1 */
  --stage-won-bg:    #16290f;  --stage-won-fg:    var(--green-soft-ink);  /* 9.36:1 */
  --stage-lost-bg:   #351713;  --stage-lost-fg:   #f2b8b1;  /* 8.9:1 */
  --stage-deal-bg:   #1a2340;  --stage-deal-fg:   #a9bdf2;  /* 8.28:1 */
  --stage-deal-rim:  rgba(169,189,242,.26);

  /* brighter product hues for the dark surface (decorative dots) */
  --product-time:  #38bdf8;  /* 7.82:1 on --surface */
  --product-parts: #2dd4bf;  /* 8.99:1 on --surface */
  --product-labor: #f472b6;  /* 6.32:1 on --surface */
  --product-warranty: #60a5fa;
  --product-timeplus: #818cf8;  /* 7.02:1 on --surface */
  --product-insight:  #fbbf24;  /* 11.4:1 on --surface */
  --product-perfgroup:#c084fc;  /* 7.55:1 on --surface */
  --product-coach:    #a3e635;  /* 12.3:1 on --surface */

  --shadow-card: rgba(0,0,0,.30) 0 6px 24px 0;   /* dark card/table edges come from an explicit --border, not a ring */
  /* pop = deep drop shadow + faint light ring so elevated surfaces (modal, menu,
     drawer, toast) read as lifted off the dark page instead of blending in */
  --shadow-pop:  rgba(0,0,0,.55) 0 16px 48px -12px, rgba(255,255,255,.06) 0 0 0 1px;

  --elev-1: 0 14px 34px -20px rgba(0,0,0,.85);
  --elev-3: var(--shadow-pop);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-base);   /* 16px — stops iOS focus auto-zoom */
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
img, svg { display: block; }

/* ---- A11y utilities --------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-m);
  background: var(--navy); color: #fff; font-weight: 600; font-size: var(--text-sm);
  box-shadow: var(--shadow-pop); transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: 8px; }

/* ---- App shell -------------------------------------------------------- */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* The sidebar/topbar are injected by JS after parse. Hold the app hidden until
   mountShell marks it .is-ready, so the page reveals fully composed instead of
   reflowing (content jumps left+down) as the chrome injects. On a normal load
   this resolves before first paint and is invisible; only a first, identity-
   fetching load waits on it. Gated on .js-mounting (set synchronously by app.js)
   so a no-JS page — which never mounts a shell — still shows its content. */
/* visibility (not just opacity) so pending, not-yet-composed controls are also
   non-focusable and out of the a11y tree during the brief mount window. */
.js-mounting .app:not(.is-ready) { opacity: 0; visibility: hidden; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  /* leadform-band grammar extended to the shell: green + blue glows over a navy ramp */
  background:
    radial-gradient(140% 34% at 100% 0%, rgba(97,166,14,.16), rgba(97,166,14,0) 60%),
    radial-gradient(120% 30% at 0% 0%, rgba(120,150,220,.20), rgba(120,150,220,0) 55%),
    linear-gradient(180deg, #1d2e63 0%, var(--navy) 38%, var(--navy-800) 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;                 /* footer stays reachable on short/landscape viewports */
  padding: 22px 16px;
  z-index: 30;
  view-transition-name: sidebar;
}
.sidebar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent);
}
[data-theme="dark"] .sidebar {
  background:
    radial-gradient(140% 34% at 100% 0%, rgba(97,166,14,.12), rgba(97,166,14,0) 60%),
    radial-gradient(120% 30% at 0% 0%, rgba(120,150,220,.10), rgba(120,150,220,0) 55%),
    linear-gradient(180deg, #1d2e63 0%, var(--navy) 38%, var(--navy-800) 100%);
}
.sidebar__logo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 26px; }  /* 12px registers the wordmark to the nav-icon column */
.sidebar__logo img { width: 168px; height: auto; }
.sidebar__close {
  display: none; /* mobile-only, shown in the responsive block */
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; margin: -6px -4px -6px 0;
  background: none; border: 0; border-radius: var(--radius-full); cursor: pointer;
  color: rgba(255,255,255,.72);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.sidebar__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar__close svg { width: 20px; height: 20px; }

/* Desktop focus mode: hide the low-frequency rail and let the workspace use the
   full canvas. The topbar burger becomes the persistent restore affordance. */
@media (min-width: 1025px) {
  .sidebar__close { display: inline-flex; }
  .sidebar__logo { gap: 6px; }
  .sidebar__logo img { width: 150px; }
  .sidebar {
    transition: width var(--dur-4) var(--ease-sheet), flex-basis var(--dur-4) var(--ease-sheet),
      padding var(--dur-4) var(--ease-sheet), opacity var(--dur-2) var(--ease-out), visibility var(--dur-4);
  }
  html.sidebar-collapsed .sidebar {
    width: 0; flex-basis: 0; padding-left: 0; padding-right: 0;
    opacity: 0; visibility: hidden; overflow: hidden;
  }
  html.sidebar-collapsed .topbar__burger { display: flex; }
}

/* Backdrop behind the mobile drawer (inert on desktop) */
.nav-scrim {
  display: none;
  position: fixed; inset: 0; z-index: 25;
  background: rgba(15,23,42,.5); backdrop-filter: blur(1px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav__item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius-m);
  color: rgba(255,255,255,.78); font-weight: 500; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.nav__item.is-active {
  background: linear-gradient(180deg, var(--green-700), var(--green-800)); /* #fff = 5.39:1 / 6.81:1 */
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -8px rgba(97,166,14,.55);
}
.nav__item.is-active::before {   /* luminous rail — a half-round tab emerging from the sidebar edge */
  content: ""; position: absolute; left: -16px; top: 50%; translate: 0 -50%;
  width: 3px; height: 22px; border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background: linear-gradient(180deg, #8fd23f, var(--green));
  box-shadow: 0 0 10px 1px rgba(97,166,14,.75);
}
.nav__item svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav__chev { margin-left: auto; width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); opacity: .8; }

.nav__group.is-open > .nav__item .nav__chev { transform: rotate(90deg); }
.nav__sub {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows var(--dur-3) var(--ease-out), visibility var(--dur-3);
}
.nav__group.is-open .nav__sub { grid-template-rows: 1fr; visibility: visible; }
.nav__sub-inner { overflow: hidden; }
.nav__subitem {
  display: block; padding: 9px 12px 9px 44px; margin-top: 2px;
  border-radius: var(--radius-s); color: rgba(255,255,255,.62);  /* 6.34:1 on navy */
  font-size: var(--text-ms); font-weight: 500;
}
.nav__subitem.is-active { color: #fff; background: rgba(97,166,14,.22); }

/* keyboard focus ring for the shell's interactive controls */
.nav__item:focus-visible, .nav__subitem:focus-visible,
.sidebar__close:focus-visible, .topbar__burger:focus-visible, .icon-btn:focus-visible,
.btn:focus-visible, .pill:focus-visible, .acct:focus-visible, .modal__close:focus-visible,
.pw-toggle:focus-visible, .th-sort:focus-visible, .menu__item:focus-visible,
.skip-link:focus-visible, .table-wrap:focus-visible,
.topbar__cta:focus-visible, .sidebar__user:focus-visible,
.sidebar__logout:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
/* green-on-green / green-on-navy rings are invisible — flip to white in the
   sidebar, and to --text on the dark bright-green CTA */
.sidebar .nav__item:focus-visible, .sidebar .nav__subitem:focus-visible,
.sidebar__user:focus-visible, .sidebar__close:focus-visible,
.sidebar__logout:focus-visible { outline-color: #fff; }
[data-theme="dark"] .topbar__cta:focus-visible { outline-color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .nav__item:hover { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .nav__subitem:hover { background: rgba(255,255,255,.06); color: #fff; }
  .sidebar__logout:hover { background: rgba(255,255,255,.07); color: #fff; }
  .sidebar__user:hover {
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  }
}

.sidebar__foot { position: relative; margin-top: auto; padding-top: 16px; }
.sidebar__foot::before {  /* fading divider, echoes the leadform band hairline */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20) 50%, transparent);  /* .20 matches the top hairline's weight on the darker band */
}
.sidebar__user {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 20px -14px rgba(0,0,0,.6);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.sidebar__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--green-700), var(--green-800)); color: #fff;  /* both stops ≥5.39:1 w/ #fff */
  font-weight: 700; font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center;
}
/* ring + lift only in the shell chrome — the class is also a plain monogram on
   light card surfaces (accounts table, edit-profile), where the halo would leak */
.sidebar .sidebar__avatar, .acct .sidebar__avatar, .menu__head .sidebar__avatar {
  box-shadow: 0 0 0 2px rgba(97,166,14,.28), 0 2px 6px rgba(0,0,0,.35);
}
.sidebar__user-meta { min-width: 0; }
.sidebar__user-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { font-size: var(--text-xs); margin-top: 1px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* ≈6.3:1 on navy; 13/11 stack mirrors the account-menu head */

/* Identity placeholders — shown between the shell mounting and /api/me hydrating
   it on a cold load (js: html.identity-pending, span.ident-skel). Each reserves
   its text box so the fill causes no layout shift. The general skeletons (.skel*)
   are tuned for light cards, so the navy chrome gets its own translucent tint;
   the topbar account name sits on the theme-colored bar and takes its hover tint. */
.ident-skel {
  display: inline-block; height: .72em; border-radius: var(--radius-full);
  vertical-align: middle; background: rgba(255,255,255,.16);
}
.topbar .ident-skel { background: var(--chrome-hover); }
/* Pending avatars are neutral discs, not the branded green monogram. Tinted for
   their surface: translucent white on the always-navy sidebar, the theme chrome
   tint on the topbar (where translucent white would vanish on the light bar). */
.identity-pending .sidebar__avatar[data-ident-avatar] {
  background: rgba(255,255,255,.14); box-shadow: none;
}
.identity-pending .topbar .sidebar__avatar[data-ident-avatar] { background: var(--chrome-hover); }

/* Footer utility link — a shrink-wrapped quiet pill, not a nav slab.
   It's a <button> in a POST form (sign-out is state-changing), so it resets the
   native button chrome to read as the quiet link it looks like. */
.sidebar__foot-links { margin-top: 8px; }
.sidebar__logout {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 12px; border-radius: var(--radius-s);
  color: rgba(255,255,255,.62);  /* ≈6.3:1 on navy */
  font-size: var(--text-ms); font-weight: 500;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.sidebar__logout svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.75; }

/* ---- Main ------------------------------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  position: sticky; top: 0; z-index: 20;
  view-transition-name: topbar;
  transition: box-shadow var(--dur-4) var(--ease-out);
}
/* Quiet chrome: the bottom edge is a gradient hairline that only appears once
   the page scrolls — at rest the bar dissolves into the page. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(25,40,87,.04), rgba(25,40,87,.22) 30% 70%, rgba(25,40,87,.04));
  opacity: 0; transition: opacity var(--dur-4) var(--ease-out);
}
.topbar.is-scrolled::after { opacity: 1; }
.topbar.is-scrolled { box-shadow: var(--elev-1); }
[data-theme="dark"] .topbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }  /* Dark Premium edge-light */
[data-theme="dark"] .topbar.is-scrolled { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--elev-1); }
[data-theme="dark"] .topbar::after {
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.16) 30% 70%, rgba(255,255,255,.05));
}
/* Glass fallback lives after the .menu rules — see the @supports block there. */
.topbar__burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: -8px; flex: 0 0 auto;
  background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; color: var(--text);
  transition: background-color var(--dur-2) var(--ease-out);
}
/* Animated hamburger -> X (keys off body.nav-open) */
.burger, .burger::before, .burger::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after  { top: 7px; }
body.nav-open .burger { background: transparent; }
body.nav-open .burger::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .burger::after  { transform: translateY(-7px) rotate(-45deg); }
.topbar__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -.012em; color: var(--text); }  /* one weight below page h1 — wayfinding, not heading */
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topbar__sep {
  width: 1px; height: 22px; margin: 0 10px 0 6px; flex: 0 0 1px;
  background: linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}

/* Primary task, one tap from anywhere — the leadform CTA's actual material. */
.topbar__cta {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px 0 12px; margin-right: 16px; border-radius: 9px;
  /* F-31: starts at --green-700 (not --green, 3.01:1) — the white label must
     clear 4.5:1 at every point of the gradient, not just where it centers. */
  background: linear-gradient(180deg, var(--green-700) 0%, var(--green-800) 100%);
  color: #fff;                 /* 5.39:1 at the lightest (top) stop */
  font: 700 var(--text-sm)/1 var(--font); white-space: nowrap;
  border: 1px solid var(--green-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(58,102,7,.30), 0 10px 20px -8px rgba(58,102,7,.5);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.topbar__cta svg { width: 16px; height: 16px; stroke-width: 2.25; }  /* ~1.5px at 16px — matches the 700-weight label */
[data-theme="dark"] .topbar__cta {   /* Dark Premium flip — matches the dark leadform CTA */
  color: #0c1206;                    /* 6.4:1 on #61a60e, 9.3:1 on #7ec81a */
  background: linear-gradient(180deg, #7ec81a, var(--green));
  border-color: rgba(126,200,26,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -8px rgba(97,166,14,.55);
}

/* Ghost icon buttons — no boxes; a soft round fill on hover/active. */
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 0; background: transparent; position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:active, .acct:active { scale: .95; }

/* Icon stroke pass — one optical weight across the shell chrome
   (.topbar__cta svg carries its own heavier stroke to match its bold label) */
.nav__item svg, .icon-btn svg,
.sidebar__close svg, .acct__chev svg { stroke-width: 1.75; }
.menu__item svg { stroke-width: 1.9; }

/* Account control — avatar-forward, quiet at rest, chevron flips when open. */
.acct {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px 5px 5px; border-radius: var(--radius-full);
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.acct .sidebar__avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: var(--text-xs); }
/* min-width reserves the identity slot so the cold-load skeleton and the hydrated
   name occupy the same width — the right-anchored topbar actions don't reflow. */
.acct__name { min-width: 66px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__chev { display: inline-flex; color: var(--muted-2); transition: transform var(--dur-2) var(--ease-out); }
.acct__chev svg { width: 16px; height: 16px; }
.acct[aria-expanded="true"] .acct__chev { transform: rotate(180deg); }

@media (hover: hover) and (pointer: fine) {
  .topbar__burger:hover { background: var(--chrome-hover); }
  .icon-btn:hover { color: var(--text); background: var(--chrome-hover); }
  .acct:hover { background: var(--chrome-hover); }
  .topbar__cta:hover { filter: brightness(1.04); transform: translateY(-1px); }
  [data-theme="dark"] .topbar__cta:hover { filter: brightness(1.05); background: linear-gradient(180deg, #7ec81a, var(--green)); }
}
/* after the hover rule so the press-down wins during a hovered press */
.topbar__cta:active { transform: translateY(0); }
.icon-btn[aria-expanded="true"], .acct[aria-expanded="true"] { background: var(--chrome-hover); color: var(--text); }

/* ---- Topbar menus (user menu + notifications) ------------------------- */
.notif, .usermenu { position: relative; display: inline-flex; align-items: center; }
.notif__dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 90%, transparent);  /* ring matches the glass, not a solid slab */
}
.notif__badge {
  position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--radius-full); background: var(--danger); color: #fff;  /* 6.57:1 light; dark ink-flips below */
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 90%, transparent);
  animation: badge-pop var(--dur-3) var(--ease-out) .3s backwards;
}
/* dark --danger is a light coral (#ff6b6b) — white text fails there, flip the ink */
[data-theme="dark"] .notif__badge { color: var(--bg); }  /* #0e1424 on #ff6b6b = 6.61:1 */
@keyframes badge-pop { from { scale: 0; } }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: max-content; min-width: 220px; max-width: 320px; padding: 6px;
  /* Solid fill: a dropdown holds content (account, links, sign out), so it must
     stay legible even where backdrop-filter is unsupported, weak, or nested under
     the topbar's own glass (mobile) — a translucent popover reads as broken. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.55);
  transform-origin: top right;
  display: none; opacity: 0; translate: 0 -4px; scale: .98;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out),
              scale var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
}
.menu.is-open { display: block; opacity: 1; translate: 0 0; scale: 1; }
@starting-style {
  .menu.is-open { opacity: 0; translate: 0 -4px; scale: .98; }
}
@media (max-width: 640px) {
  .menu { width: auto; }  /* shrink-to-fit can overflow tiny viewports */
}
[data-theme="dark"] .menu { box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.07); }
/* Browsers missing backdrop-filter or color-mix() get the solid surface.
   Must sit AFTER the .topbar/.menu base rules — @supports adds no specificity,
   so source order decides which background wins. (A same-rule fallback pair
   wouldn't work: color-mix(var(--surface)…) parses as valid and only fails at
   computed-value time, dropping background to transparent, not the fallback.) */
@supports (not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))))
       or (not (background: color-mix(in srgb, red 50%, blue))) {
  .topbar, .menu {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.menu__titlebar { display: flex; align-items: baseline; justify-content: space-between; padding-right: 6px; }
.menu__title { padding: 8px 12px 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu--acct { min-width: 236px; }
.menu__head { display: flex; align-items: center; gap: 11px; padding: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.menu__head .sidebar__avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.menu__head-meta { min-width: 0; }
.menu__head-name { font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.menu__head-mail { font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__head-role { margin-top: 3px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-s);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 500;
}
.menu__item svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 16px; }
.menu__item small { display: block; color: var(--muted); font-weight: 400; font-size: var(--text-xs); }
.menu__item.is-unread { font-weight: 600; }
/* notification rows: one shared 27px rail so read rows, wrapped lines, and
   timestamps all align; the unread dot sits absolutely on the rail */
.menu__notif { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; position: relative; padding-left: 27px; }
.menu__notif-when { color: var(--muted); font-weight: 400; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* unread is weight + dot, never color alone; --green-ink is theme-adaptive
   (#457708 = 5.35:1 on the light glass, #61a60e = 5.56:1 on the dark surface) */
.menu__notif.is-unread .menu__notif-text::before {
  content: ""; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-ink); box-shadow: 0 0 0 3px rgba(97,166,14,.18);
}
.menu__empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 16px; gap: 6px; color: var(--muted);
}
.menu__empty-state svg { width: 28px; height: 28px; color: var(--muted-2); }
.menu__empty-state b { color: var(--text); font-size: var(--text-sm); }
.menu__empty-state span { color: var(--muted); font-size: var(--text-sm); }  /* 5.6:1 on surface */
/* destructive action sits apart via a real separator, so its hover stays a
   normal rounded slab instead of a flat-topped rectangle */
.menu__sep { height: 1px; margin: 6px 0; background: var(--border); }
@media (hover: hover) and (pointer: fine) {
  .menu__item:hover { background: var(--chrome-hover); }
}

.content { padding: 30px; flex: 1; container-type: inline-size; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: var(--text-xl); }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.eyebrow {
  display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}

/* Admin scope is the organizing layer for the whole workspace. Company comes
   first, rep is dependent, and the summary states exactly what every KPI and
   row below represents. */
.admin-scope {
  display: grid; grid-template-columns: minmax(230px, 1fr) auto; align-items: center; gap: 24px;
  margin: -4px 0 18px; padding: 14px 0;
  background: transparent; border-block: 1px solid var(--border);
}
.admin-scope[hidden] { display: none; }
.admin-scope .eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.scope-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green-700); box-shadow: 0 0 0 4px rgba(97,166,14,.12); }
.admin-scope h2 { font-size: var(--text-base); letter-spacing: -.02em; }
.admin-scope__summary p { margin: 5px 0 0; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.admin-scope__notice {
  width: fit-content; padding: 6px 9px; border-radius: 7px;
  background: var(--stage-follow-bg); color: var(--stage-follow-fg) !important; font-weight: 600;
}
.admin-scope__notice[hidden] { display: none; }
.admin-scope__controls { display: flex; align-items: end; justify-content: flex-end; gap: 10px; }
.admin-scope__controls[hidden] { display: none; }
.scope-field { display: grid; gap: 6px; min-width: 220px; }
.scope-field__label { font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.admin-scope__reset {
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--muted);
  font: 600 var(--text-sm)/1 var(--font); cursor: pointer;
}
.admin-scope__reset svg { width: 14px; height: 14px; }
.admin-scope__reset:hover { background: var(--chrome-hover); color: var(--text); }
.admin-scope__reset:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.admin-scope__reset[hidden] { display: none; }
.admin-scope__mobile-toggle { display: none; }
[data-theme="dark"] .admin-scope { background: transparent; }

.admin-zero {
  min-height: 260px; display: grid; justify-items: center; align-content: center; text-align: center;
  padding: 42px 24px; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface);
}
.admin-zero[hidden] { display: none; }
.admin-zero__mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; background: var(--surface-2); color: var(--navy); }
.admin-zero__mark svg { width: 22px; height: 22px; }
.admin-zero .eyebrow { margin-bottom: 6px; }
.admin-zero h2 { font-size: var(--text-lg); }
.admin-zero p { max-width: 430px; margin: 8px 0 0; color: var(--muted); }
[data-theme="dark"] .admin-zero__mark { color: #c7cfe3; }

/* ---- Cards & KPI ------------------------------------------------------ */
.card {
  background: var(--surface); border-radius: var(--radius-l);
  box-shadow: var(--shadow-card); padding: 22px; position: relative;
}
/* Dark mode: --surface barely clears --bg (1.10:1) and the drop shadow is
   invisible on the near-black page, so give elevated panels a real edge. */
[data-theme="dark"] .card,
[data-theme="dark"] .table-wrap { border: 1px solid var(--border); }
/* --border is a divider tone (1.82:1); interactive controls need a 3:1 edge
   (WCAG 1.4.11) or empty inputs vanish. --muted-2 clears it: 3.0:1 on the
   surface-2 field fill, 3.7:1 on the card — and it's already the hover tone. */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .search,
[data-theme="dark"] .pill,
[data-theme="dark"] .btn--ghost { border-color: var(--control-border); }
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 24px;
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat--action {
  appearance: none; width: 100%; border-block: 0; border-left: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1);
}
.stat--action:hover { background: var(--chrome-hover); }
.stat--action:active { transform: translateY(1px); }
.stat--action:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--green-700); outline-offset: -3px; }
.stat--action.is-active {
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--green-700);
}
.stat--action.is-active .stat__label { color: var(--text); }
.stat__label {
  display: flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.stat__tick { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--muted-2); }
.stat__val {
  color: var(--text); font-size: var(--text-2xl); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.stat__delta {
  min-height: 1.2em; color: var(--muted-2); font-size: var(--text-xs); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.tint-green .stat__tick { background: var(--green-700); }
.tint-blue .stat__tick { background: var(--stage-set-fg); }
.tint-amber .stat__tick { background: var(--stage-follow-fg); }
.tint-violet .stat__tick { background: var(--stage-agree-fg); }
/* F-32: a brand-navy tint for the KPI that isn't a status count (Total Leads)
   — same recipe as .drawer__act-type (11.8:1 light / 9.8:1 dark), so the
   fourth hue reads as intentional, not another shade of green. */
.tint-navy .stat__tick { background: var(--navy); }
[data-theme="dark"] .stat-grid { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
[data-theme="dark"] .stat--action.is-active { background: rgba(97,166,14,.10); }
[data-theme="dark"] .tint-green .stat__tick { background: var(--green-soft-ink); }
[data-theme="dark"] .tint-navy .stat__tick { background: #c7cfe3; }
body.is-admin .page-head { margin-bottom: 18px; }
body.is-admin .stat-grid {
  border: 0; border-block: 1px solid var(--border); border-radius: 0;
  margin-bottom: 16px; background: transparent; box-shadow: none;
}
body.is-admin .stat { gap: 3px; padding: 11px 16px; }
body.is-admin .stat__val { font-size: var(--text-xl); }
body.is-admin .stat--action .stat__foot::after {
  content: "Filter"; flex: none; color: var(--muted-2);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
body.is-admin .stat--action.is-active .stat__foot::after { content: "Active"; color: var(--green-ink); }
.up { color: var(--green-ink); }
.down { color: var(--danger); }

/* ---- Toolbar / filters ------------------------------------------------ */
/* Search + product-filter rail for My Leads, in the flat New Lead language.
   Three control classes, three silhouettes: the search is a soft-rectangle
   INPUT, the chips are full-radius STATE pills (quiet at rest, saturating to
   each product's hue when active — reusing the --product-* dots so the filter
   color-matches the table), and the sort is a chromeless text UTILITY. Reflow
   follows the .content container width, so it adapts whether the sidebar is
   docked or drawered. */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.product-filter { display: flex; align-items: center; min-width: 0; }

/* --- Search field --- */
.search {
  position: relative; display: flex; align-items: center; gap: 10px;
  flex: 1 1 280px; min-width: 200px; max-width: 460px;
  padding: 10px 16px; min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: 0 1px 2px rgba(19,31,67,.035);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.search:focus-within {
  border-color: var(--green-700); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(69,119,8,.15);
}
.search__icon { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); transition: color .16s; }
.search__icon svg { width: 17px; height: 17px; }
.search:focus-within .search__icon { color: var(--green-700); }   /* icon tracks the green ring */
.search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }  /* custom clear below */
/* clear (×) — shown only when the field has text */
.search__clear {
  flex: 0 0 auto; display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -4px -6px -4px 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted-2);
  cursor: pointer; transition: color .15s, background .15s;
}
.search__clear svg { width: 15px; height: 15px; }
.search.is-filled .search__clear { display: inline-flex; }
.search__clear:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 16%, transparent); }
.search__clear:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* "/" hint — desktop pointer only, hidden once typing starts (clear takes its slot) */
.search__kbd {
  flex: 0 0 auto; display: none; font: 600 var(--text-xs)/1 var(--font); color: var(--muted);  /* 5.48:1 on the field */
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-2); box-shadow: 0 1px 0 rgba(19,31,67,.04);
}
@media (hover: hover) and (pointer: fine) {
  .search:not(.is-filled) .search__kbd { display: inline-flex; }
}

/* --- Filter pills --- */
/* min-height reserves the row so injecting the JS-rendered pills after /api/leads
   resolves causes no layout shift (the table below never jumps). */
.pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.pill {
  --phue: var(--navy);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border); color: var(--muted);                       /* 5.2:1 rest label on --bg */
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  /* rest chips sit flat on the canvas — the filled active state (below) is the
     only elevated one, so selection reads at a glance */
  background: transparent;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.pill .product-dot { flex: 0 0 8px; transition: box-shadow .15s; }
.pill .product-dot.all {  /* "All Products" → a blend of the three product hues */
  background: conic-gradient(from 210deg, var(--product-time), var(--product-parts), var(--product-labor), var(--product-time));
}
.pill__count {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 var(--text-xs)/1 var(--font); font-variant-numeric: tabular-nums;
  min-width: 18px; padding: 3px 6px; border-radius: var(--radius-full);
  color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent);
}
/* the count pulses when its value changes (JS toggles .is-bump), signalling the
   chips are a live readout of the current search. Neutralised under reduced motion
   both by the JS guard and the global transition/animation reset. */
@keyframes pill-count-bump { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }
.pill__count.is-bump { animation: pill-count-bump .26s var(--ease-out); }
/* zero matches for the current search → mute the dot + count (never hide: stays
   legible and clickable). Active pill keeps its selected styling even at zero. */
.pill--empty:not([aria-pressed="true"]) { color: var(--muted); }
.pill--empty:not([aria-pressed="true"]) .product-dot,
.pill--empty:not([aria-pressed="true"]) .product-dot.all {
  background: var(--muted-2); box-shadow: none;
}
.pill--empty:not([aria-pressed="true"]) .pill__count {
  color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent);
}

/* active product pills saturate to their hue (label stays theme-ink → always AA);
   the "All" master filter has no hue, so it gets a strong solid-navy treatment. */
.pill[aria-pressed="true"] {
  color: var(--text); font-weight: 700;
  border-color: color-mix(in srgb, var(--phue) 45%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--phue) 13%, var(--surface)),
    color-mix(in srgb, var(--phue) 22%, var(--surface)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--phue) 30%, transparent),
    0 6px 15px -8px color-mix(in srgb, var(--phue) 55%, transparent),
    0 1px 0 rgba(255,255,255,.7) inset;
}
.pill[aria-pressed="true"] .product-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--phue) 16%, transparent), 0 0 8px color-mix(in srgb, var(--phue) 55%, transparent);
}
.pill[aria-pressed="true"] .pill__count {
  color: var(--text); background: color-mix(in srgb, var(--phue) 22%, transparent);
}
.pill--time  { --phue: var(--product-time); }
.pill--parts { --phue: var(--product-parts); }
.pill--labor { --phue: var(--product-labor); }
.pill--all[aria-pressed="true"] {
  color: #fff; border-color: var(--navy);                                     /* #fff on navy = 14.6:1 */
  background: var(--navy); box-shadow: inset 0 -2px 0 var(--navy-800);
}
.pill--all[aria-pressed="true"] .product-dot.all { box-shadow: 0 0 0 2px rgba(255,255,255,.28); }
.pill--all[aria-pressed="true"] .pill__count { color: #fff; background: rgba(255,255,255,.18); }
.pill:active { transform: translateY(0) scale(.985); }

.result-count { color: var(--muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Admin-only rep scope. This is a native select because rep names are data,
   not a small fixed taxonomy like the product-family pills. */
.teamfilter {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--border);
  border-radius: var(--radius-full); background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.8) inset;
}
.teamfilter__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.teamfilter select { max-width: 250px; border: 0; outline: 0; background: transparent; color: var(--text); font: 600 var(--text-sm)/1.2 var(--font); }
.teamfilter__chev { position: absolute; right: 14px; display: inline-flex; color: var(--muted-2); pointer-events: none; }
.teamfilter__chev svg { width: 15px; height: 15px; }
.teamfilter:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(69,119,8,.16); }
.teamfilter[hidden] { display: none; }
[data-theme="dark"] .teamfilter { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-color: var(--control-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }

/* --- Mobile sort picker --- */
/* Column-header sorting is unreachable once the thead is hidden (<=640px), so
   the same sortKey/sortDir state is surfaced as a compact native select in the
   toolbar. Native picker = accessible + OS wheel, no custom focus trap.
   Hidden on desktop, where the headers do the sorting (see the <=640 block). */
.sortpick {
  display: none; position: relative; align-items: center; gap: 6px;
  padding: 2px 6px 2px 8px; min-height: 40px;
  border: 0; border-radius: 8px; background: none;
  transition: color .16s, box-shadow .16s;
}
.sortpick__icon { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); transition: color .16s; }
.sortpick__icon svg { width: 16px; height: 16px; }
.sortpick__label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); white-space: nowrap; }
.sortpick__chev { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); margin-left: -2px; }
.sortpick__chev svg { width: 15px; height: 15px; }
/* the accessible control is a transparent native <select> covering the trigger,
   so the closed label stays compact ("Sort" / "Demo ↓") no matter the option text */
.sortpick select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  font: inherit; appearance: none; -webkit-appearance: none;
}
.sortpick:focus-within { box-shadow: 0 0 0 3px rgba(69,119,8,.16); }
.sortpick:focus-within .sortpick__icon { color: var(--green-700); }
/* sort applied → the trigger reads as "on" without changing width */
.sortpick.is-active .sortpick__label { color: var(--text); }
.sortpick.is-active .sortpick__icon { color: var(--green-700); }
@media (hover: hover) and (pointer: fine) {
  .pill:hover { color: var(--text); border-color: #cfd7e8; transform: translateY(-1px);
    box-shadow: 0 5px 12px -6px rgba(19,31,67,.22), 0 1px 0 rgba(255,255,255,.8) inset; }
  .pill[aria-pressed="true"]:hover { color: var(--text); transform: translateY(-1px); }
  .pill--all[aria-pressed="true"]:hover { color: #fff; }
}

/* --- Dark overrides (flat: borders carry the depth, ring-only focus) --- */
[data-theme="dark"] .search { background: var(--field); border-color: var(--control-border); box-shadow: none; }
[data-theme="dark"] .search:hover { border-color: var(--control-border-hover); }
[data-theme="dark"] .search:focus-within {
  border-color: var(--green-bright); background: var(--field-focus);                                 /* ring matches the New Lead inputs */
  box-shadow: 0 0 0 3px rgba(97,166,14,.22);
}
[data-theme="dark"] .search__icon { color: var(--muted); }
[data-theme="dark"] .search:focus-within .search__icon { color: #8fd23f; }
[data-theme="dark"] .search__kbd { background: rgba(0,0,0,.25); border-color: var(--control-border); color: var(--muted); }  /* 6:1 on field */
/* rest chips stay transparent like light mode — a faint rim carries the shape,
   the strong product-hue fill marks the active one */
[data-theme="dark"] .pill { background: transparent; border-color: var(--control-border); box-shadow: none; }
[data-theme="dark"] .sortpick:focus-within { box-shadow: 0 0 0 3px rgba(97,166,14,.25); }
[data-theme="dark"] .sortpick:focus-within .sortpick__icon { color: #8fd23f; }
[data-theme="dark"] .sortpick.is-active .sortpick__icon { color: #8fd23f; }
[data-theme="dark"] .pill__count { background: color-mix(in srgb, var(--muted) 20%, transparent); }
[data-theme="dark"] .pill[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--phue) 60%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--phue) 30%, var(--surface-2)),
    color-mix(in srgb, var(--phue) 14%, var(--surface)));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--phue) 42%, transparent),
    0 8px 22px -10px color-mix(in srgb, var(--phue) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .pill--all[aria-pressed="true"] {
  color: #fff; border-color: color-mix(in srgb, #4a63b8 60%, transparent);
  background: linear-gradient(180deg, #2b3d78, #1c2b57);
  box-shadow: 0 8px 22px -10px rgba(74,99,184,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .pill[aria-pressed="true"] .pill__count { color: var(--text); }
[data-theme="dark"] .pill--all[aria-pressed="true"] .pill__count { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .pill:hover { border-color: var(--control-border-hover);
    box-shadow: 0 6px 14px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
}

/* --- Responsive reflow (container-driven) --- */
/* Below the width where search + all four filter chips comfortably share a row,
   stack: search spans row 1 (fills it — no lonely capped field), chips + count +
   CTA flow onto row 2. Above it, they sit side by side. */
@container (max-width: 1020px) {
  .toolbar .search { flex-basis: 100%; max-width: none; }
  .toolbar .teamfilter { flex: 1 1 280px; }
  .toolbar .product-filter { flex: 1 1 100%; }
  /* pills claim their own full row (reserved by min-height above) → the search /
     filters / actions stack reads clearly and the row is held before pills load. */
  .toolbar .pills { flex-basis: 100%; }
}
@container (max-width: 520px) {
  /* pills → a single-row swipeable rail. The fade appears only on the side that
     actually overflows (data-of is set by JS on scroll/resize), so there's no
     phantom fade at rest; falls back to plain scroll if JS never runs. */
  .toolbar .pills {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* overflow-x forces overflow-y:auto, which would clip the active chip's glow
       and the hover lift. Pad vertically enough to contain them, then pull the row
       back with a matching negative margin so its layout height is unchanged. */
    margin: -14px -6px; padding: 14px 6px;
    min-height: 68px;  /* reserve the padded row (pill 40 + 14+14) → no shift when pills inject */
  }
  .toolbar .pills::-webkit-scrollbar { display: none; }
  .toolbar .pill { scroll-snap-align: start; }
  .toolbar .pills[data-of="start"]  { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
                                              mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .toolbar .pills[data-of="middle"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
                                              mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  .toolbar .pills[data-of="end"]    { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
                                              mask-image: linear-gradient(90deg, transparent, #000 24px); }
}

/* Sortable header button */
.th-sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit;
}
.th-sort svg { width: 14px; height: 14px; }
.th-sort::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor; opacity: .35; transition: opacity .15s, transform .15s;
}
th[aria-sort="ascending"] .th-sort::after { opacity: 1; }
th[aria-sort="descending"] .th-sort::after { opacity: 1; transform: rotate(180deg); }
/* the resting caret is near-invisible on the dark header — lift it so the
   "sortable" affordance reads before a column is actively sorted */
[data-theme="dark"] .th-sort::after { opacity: .62; }
@media (hover: hover) and (pointer: fine) {
  .th-sort:hover { color: var(--text); }
}

/* ---- Table ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-l); box-shadow: var(--shadow-card); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-ms); font-variant-numeric: tabular-nums; }
table.data thead th {
  text-align: left; padding: 15px 20px; font-size: var(--text-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
table.data tbody td { padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .12s; }
@media (hover: hover) and (pointer: fine) {
  table.data tbody tr:hover { background: var(--surface-2); }
}
.cell-strong { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: var(--text-sm); margin-top: 3px; }
.cell-owner { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-top: 3px; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.cell-owner > span:not(.cell-owner__sep) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cell-owner__company { color: var(--text); font-weight: 650; }
.cell-owner > span:not(.cell-owner__company):not(.cell-owner__sep) { flex: 0 0 auto; }
.cell-owner__sep { flex: none; color: var(--muted-2); }
.cell-owner__place { color: var(--muted); }
body.is-admin .table-wrap { border: 1px solid var(--border); box-shadow: 0 14px 34px -30px rgba(14,23,48,.45); }
body.is-admin table.data thead th { padding: 10px 14px; }
body.is-admin table.data tbody td { padding: 10px 14px; }
.product-tag {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; white-space: nowrap;
}
.product-summary { display: flex; align-items: center; gap: 7px 14px; min-width: 0; }
.product-summary .product-tag { min-width: 0; }
.product-tag__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.product-overflow {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin: -4px 0; padding: 4px 7px;
  border: 0; border-radius: 8px; color: var(--text); background: transparent; font: inherit;
  font-size: var(--text-sm); font-weight: 650; white-space: nowrap; cursor: pointer;
}
.product-overflow:hover, .product-overflow[aria-expanded="true"] { color: var(--green-700); background: var(--chrome-hover); }
.product-overflow:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.product-family-dots { display: inline-flex; align-items: center; gap: 3px; }
.product-family-dots .product-dot {
  flex: 0 0 10px; width: 10px; height: 10px; aspect-ratio: 1; margin: 0; border: 0; border-radius: 50%;
}
.product-dot.fam-timeai {
  background: conic-gradient(from 210deg, var(--product-time), var(--product-timeplus), var(--product-time));
}
.product-dot.fam-warrantyai {
  background: conic-gradient(from 210deg, var(--product-parts), var(--product-warranty), var(--product-labor), var(--product-parts));
}
.product-dot.fam-reporting {
  background: conic-gradient(from 210deg, var(--product-insight), var(--product-perfgroup), var(--product-insight));
}
.product-dot.fam-coaching { background: var(--product-coach); }
.product-dot.fam-other { background: var(--muted); }
.product-overflow__chev { color: var(--muted); font-size: 17px; line-height: 1; transition: transform var(--dur-1); }
.product-overflow[aria-expanded="true"] .product-overflow__chev { transform: rotate(90deg); }
.product-popover {
  position: fixed; inset: auto; margin: 0; max-height: min(360px, calc(100vh - 24px)); padding: 0;
  overflow: auto; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface);
  box-shadow: var(--elev-3);
}
.product-popover::backdrop { background: transparent; }
.product-popover__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px 11px; border-bottom: 1px solid var(--border); }
.product-popover__head strong { font-size: var(--text-ms); }
.product-popover__head span { color: var(--muted); font-size: var(--text-xs); }
.product-popover__groups { padding: 4px 16px 12px; }
.product-popover__group { padding: 10px 0; border-bottom: 1px solid var(--border); }
.product-popover__group:last-child { border-bottom: 0; }
.product-popover__group h4 { margin: 0 0 7px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.product-popover__group > div { display: grid; gap: 7px; }
.product-popover__group .product-tag { font-size: var(--text-sm); }
.product-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--green); }
.product-dot.time { background: var(--product-time); }
.product-dot.parts { background: var(--product-parts); }
.product-dot.labor { background: var(--product-labor); }
.product-dot.warranty { background: var(--product-warranty); }
.product-dot.timeplus { background: var(--product-timeplus); }
.product-dot.insight { background: var(--product-insight); }
.product-dot.perfgroup { background: var(--product-perfgroup); }
.product-dot.coach { background: var(--product-coach); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge svg { width: 14px; height: 14px; }
.badge.set    { background: var(--stage-set-bg);    color: var(--stage-set-fg); }
.badge.follow { background: var(--stage-follow-bg); color: var(--stage-follow-fg); }
.badge.agree  { background: var(--stage-agree-bg);  color: var(--stage-agree-fg); }
.badge.won    { background: var(--stage-won-bg);    color: var(--stage-won-fg); }
.badge.lost   { background: var(--stage-lost-bg);   color: var(--stage-lost-fg); }
.badge.neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.deal   { background: var(--stage-deal-bg);  color: var(--stage-deal-fg); box-shadow: inset 0 0 0 1px var(--stage-deal-rim); }
/* On Hold reads as "not moving", so it takes the neutral fill — NOT amber,
   which is In Review. The leading dot becomes two pause bars: the one status
   whose glyph differs is the one that means the pipeline stopped. */
.badge.hold   { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.hold::before {
  width: 7px; height: 8px; border-radius: 1px; background: none; opacity: .75;
  border-left: 2px solid currentColor; border-right: 2px solid currentColor;
}

.when { display: flex; flex-direction: column; gap: 2px; }
.when b { font-weight: 600; }
.when span { color: var(--muted); font-size: var(--text-sm); }
.demo-book { min-height: 36px; }
/* the split-out year rides inside the date it belongs to (b or span) — keep it
   indistinguishable on desktop; the phone layout hides it entirely */
.when .date-yr, td .date-yr { color: inherit; font-size: inherit; font-weight: inherit; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-m); font: inherit; font-weight: 600; font-size: var(--text-ms);
  border: 1px solid transparent; cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn--primary { background: var(--green-700); color: #fff; }   /* #fff on #457708 = 5.39:1 */
.btn--navy { background: var(--navy); color: #fff; }
.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn--sm { padding: 7px 13px; font-size: var(--text-sm); }
.btn--link { background: none; color: var(--green-ink); padding: 0; font-weight: 600; }
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn--primary:active { background: var(--green-800); }   /* #fff on #3a6607 = 6.81:1 */
.btn--navy:active { background: var(--navy-800); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--green-800); }   /* 6.81:1 */
  .btn--navy:hover { background: var(--navy-700); }
  .btn--ghost:hover { border-color: var(--muted-2); }
  .btn--link:hover { color: var(--green-800); text-decoration: underline; }
}

/* ---- Forms ------------------------------------------------------------ */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.col-span { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
/* F-32: green is overloaded (CTA, active-nav, avatar, focus ring, KPI tints) —
   the required asterisk reads clearer off that hue, on the amber "follow"
   ink already used for stage badges (5.34:1 on white / 9.63:1 on dark). */
.field .req { color: var(--stage-follow-fg); }
.field input, .field select, .field textarea {
  padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-2); color: var(--text); font: inherit; outline: none; transition: .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); background: var(--surface); box-shadow: 0 0 0 3px rgba(97,166,14,.14);
}
/* dark: keep the focus fill at --surface-2 — the base :focus goes to --surface,
   which is darker than the resting fill here and merges into the card. The
   green border + ring carry the focus cue. */
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus { background: var(--surface-2); }
/* explicit placeholder color — the UA default is too faint in dark mode and
   varies by browser. Default to the fainter --muted-2 so light-mode
   placeholders don't read like real values; lift to --muted in dark. */
input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: 1; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }
/* on-brand invalid state (only after interaction, never on load) */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring);
}
/* read-only fields read as locked and drop the green editing ring */
.field input[readonly], .field textarea[readonly] {
  background: var(--bg); color: var(--muted); cursor: not-allowed;
}
.field input[readonly]:focus, .field textarea[readonly]:focus {
  border-color: var(--muted-2); background: var(--bg); box-shadow: 0 0 0 3px rgba(91,100,120,.14);
}
/* custom select caret (appearance:none so the border/radius apply cross-browser) */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa4bb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.field textarea { resize: vertical; min-height: 96px; field-sizing: content; max-block-size: 12rem; }
.field .hint { font-size: var(--text-sm); color: var(--muted); }
.form-section { margin-bottom: 26px; }
.form-section h3 { font-size: var(--text-ms); margin-bottom: 4px; }
.desc { color: var(--muted); font-size: var(--text-sm); margin: 0 0 18px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.legend {
  display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-800); background: var(--green-soft); padding: 5px 11px; border-radius: var(--radius-full); margin-bottom: 14px;  /* 5.39:1 on #cceec6 */
}
[data-theme="dark"] .legend { color: var(--green-soft-ink); background: #16290f; }   /* 9.36:1 */

/* ---- Search-and-add combobox ----------------------------------------- */
.combo { position: relative; }
.combo > input { width: 100%; }
.combo__list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  box-shadow: 0 14px 32px -14px rgba(16,24,40,.4); max-height: 264px; overflow-y: auto;
}
.combo__opt {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 11px; border-radius: var(--radius-m);
  cursor: pointer; font-size: var(--text-sm); color: var(--text);
}
.combo__opt.is-active { background: var(--surface-2); }
.combo__meta { color: var(--muted); font-size: var(--text-xs); margin-left: auto; white-space: nowrap; }
.combo__add { color: var(--green-ink); font-weight: 600; }

/* =======================================================================
   New Lead form — "Layered Navy Depth" (light) + "Dark Premium" (dark)
   The whole form IS the elevated card: navy hero band + tinted section
   panels holding crisp inset fields, product cards that saturate to their
   own brand hue, and a glowing green CTA. All scoped under .leadform so the
   shared .field / .form-grid / .form-actions on other pages are untouched.
   ======================================================================= */
.leadwrap { max-width: 720px; margin: 0 auto; }

/* subtly tint the page around the card so it reads as depth, not a flat plane
   (scoped to this page only via :has, so other pages keep the flat --bg) */
.content:has(.leadwrap) {
  background:
    radial-gradient(1000px 520px at 50% -12%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%),
    radial-gradient(760px 460px at 4% 2%, rgba(25,40,87,.06), rgba(25,40,87,0) 55%),
    radial-gradient(820px 540px at 100% 102%, rgba(25,40,87,.07), rgba(25,40,87,0) 55%);
}
[data-theme="dark"] .content:has(.leadwrap) {
  background:
    radial-gradient(880px 460px at 50% -8%, rgba(97,166,14,.09), rgba(97,166,14,0) 55%),
    radial-gradient(700px 460px at 86% 3%, rgba(45,212,191,.05), transparent 60%),
    radial-gradient(620px 440px at 10% 4%, rgba(38,99,201,.06), transparent 60%);
}

/* ---- the form-as-card ------------------------------------------------- */
.leadform {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
  box-shadow:
    0 0 0 1px rgba(19,31,67,.07),
    0 1px 2px rgba(14,23,48,.06),
    0 10px 22px -8px rgba(14,23,48,.16),
    0 34px 60px -24px rgba(14,23,48,.26);
}

/* ---- navy hero band --------------------------------------------------- */
.leadform__band {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(24px,4.5vw,36px) clamp(20px,4.5vw,36px) clamp(26px,4.5vw,34px);
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.20) 0%, rgba(97,166,14,0) 44%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.24) 0%, rgba(120,150,220,0) 48%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 56%, var(--navy-800) 100%);
}
.leadform__band::before {
  content: ""; position: absolute; right: -66px; top: -96px; width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle at 30% 70%, rgba(97,166,14,.55) 0%, rgba(97,166,14,.12) 40%, rgba(97,166,14,0) 70%);
  filter: blur(2px); pointer-events: none;
}
.leadform__band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24) 50%, rgba(255,255,255,0));
}
.leadform__eyebrow {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #b8c2dd; margin-bottom: 14px;
}
.leadform__eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(97,166,14,.24), 0 0 12px 1px rgba(97,166,14,.55);
}
.leadform__band h1 {
  position: relative; z-index: 1; color: #fff;
  font-size: clamp(1.5rem, 4.6vw, 1.875rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1;
}
.leadform__band h1 .accent {
  color: transparent; background: linear-gradient(90deg, #eef7de, #a4d46e);
  -webkit-background-clip: text; background-clip: text;
}
.leadform__sub {
  position: relative; z-index: 1; margin: 10px 0 0; max-width: 54ch;
  font-size: var(--text-ms); color: #cbd3e6;
}
.leadform__stroke {
  position: relative; z-index: 1; margin-top: 18px; height: 3px; width: 64px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--green), #8fd23f); box-shadow: 0 0 16px rgba(97,166,14,.55);
}

/* ---- body + section panels (navy-tinted inset) ------------------------ */
.leadform__body { padding: clamp(18px,3.6vw,26px) clamp(16px,4vw,28px) clamp(20px,4vw,28px); }
.leadform .fsection {
  position: relative; margin: 0; border-radius: var(--radius-m);
  background: linear-gradient(180deg, #f1f4fb 0%, #e8edf7 100%);
  border: 1px solid #c8d1e6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
  padding: clamp(16px,3.2vw,22px);
}
.leadform .fsection + .fsection { margin-top: 16px; border-top: 0; padding-top: clamp(16px,3.2vw,22px); }
.leadform .fsection__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.leadform .fsection__num {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: 700; color: #fff;
  background: linear-gradient(160deg, var(--navy), var(--navy-700));
  box-shadow: 0 2px 6px rgba(14,23,48,.30), 0 0 0 1px rgba(255,255,255,.45) inset;
}
.leadform .fsection__title {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); margin: 0;
}
.leadform .fsection__opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }

/* ---- fields — white inset controls that pop off the tinted panel ------ */
.leadform .field label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.leadform .field input, .leadform .field select, .leadform .field textarea {
  min-height: 46px; padding: 12px 14px; border-radius: 9px;
  background-color: #fff; border: 1px solid #e3e8f2; color: var(--text);
  box-shadow: 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.leadform .field select { padding-right: 40px; }
.leadform .field input:hover, .leadform .field select:hover, .leadform .field textarea:hover { border-color: #cfd7e8; }
.leadform .field input:focus, .leadform .field select:focus, .leadform .field textarea:focus {
  border-color: var(--green-700); background-color: #fff;
  box-shadow: 0 0 0 3px rgba(69,119,8,.18), 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
.leadform .form-grid { gap: 16px; }

/* Secondary dealership data stays available without making every intake
   begin as a wall of fields. Native details preserves keyboard and AT support. */
.leadform .dealership-details { margin-top: 16px; border-top: 1px solid var(--border); }
.leadform .dealership-details > summary {
  min-height: 46px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: var(--text); font-size: var(--text-sm); font-weight: 650; list-style: none;
}
.leadform .dealership-details > summary::-webkit-details-marker { display: none; }
.leadform .dealership-details > summary::before {
  content: "+"; width: 20px; flex: 0 0 20px; color: var(--green-700);
  font-size: 1.25rem; font-weight: 500; line-height: 1; text-align: center;
}
.leadform .dealership-details[open] > summary::before { content: "−"; }
.leadform .dealership-details > summary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; border-radius: 4px; }
.leadform .dealership-details__hint { margin-left: auto; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.leadform .dealership-details__fields { padding-top: 14px; }
[data-theme="dark"] .leadform .dealership-details > summary::before { color: #91cf49; }

/* Familiar DMS brands become a quick one-tap choice. The depth matches the
   form's existing inset material; selection is carried by check, edge and fill. */
.leadform .dms-field { margin-top: 16px; }
.leadform .dms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.leadform .dms-option {
  position: relative; min-width: 0; min-height: 68px; display: grid;
  grid-template-rows: 30px auto; place-items: center; gap: 6px;
  padding: 10px 14px 9px; border: 1px solid #d7deec; border-radius: 10px;
  background: #fff; color: var(--text);
  box-shadow: 0 1px 2px rgba(19,31,67,.05);
  cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.leadform .dms-option__logo {
  width: 100%; height: 30px; display: grid; place-items: center;
  overflow: hidden;
}
.leadform .dms-option__logo img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 24px;
  object-fit: contain;
}
.leadform .dms-option__img--dark { display: none !important; }
.leadform .dms-option__other { color: var(--green-700); font-size: 25px; font-weight: 500; line-height: 1; }
.leadform .dms-option__name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
.leadform .dms-option__check {
  position: absolute; top: 6px; right: 6px; width: 17px; height: 17px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-700); color: #fff; opacity: 0; transform: scale(.72);
  transition: opacity .15s, transform .15s;
}
.leadform .dms-option__check svg { width: 11px; height: 11px; }
.leadform .dms-option[aria-pressed="true"] {
  border-color: #79a944; background: #f4f8ee;
  box-shadow: 0 0 0 2px rgba(97,166,14,.12);
}
.leadform .dms-option[aria-pressed="true"] .dms-option__name { color: var(--green-800); }
.leadform .dms-option[aria-pressed="true"] .dms-option__check { opacity: 1; transform: scale(1); }
.leadform .dms-option:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.leadform .dms-option--cdk-global .dms-option__logo img { width: 28px; max-height: 28px; }
.leadform .dms-option--reynolds-reynolds .dms-option__logo img { max-height: 25px; }
.leadform .dms-option--dealertrack .dms-option__logo img { max-height: 21px; }
.leadform .dms-option--dealerbuilt .dms-option__logo img { max-height: 24px; }
.leadform .dms-option--autosoft .dms-option__logo,
.leadform .dms-option--pbs .dms-option__logo { width: 112px; border-radius: 5px; background: #111d32; }
.leadform .dms-option--autosoft .dms-option__logo { width: 148px; }
.leadform .dms-option--pbs .dms-option__logo img { max-height: 25px; }
.leadform .dms-option--other {
  grid-column: 1 / -1; min-height: 30px; width: max-content; display: flex; gap: 7px;
  padding: 2px; border: 0; background: transparent; box-shadow: none;
}
.leadform .dms-option--other .dms-option__logo { width: auto; height: auto; overflow: visible; }
.leadform .dms-option--other .dms-option__other { font-size: 19px; }
.leadform .dms-option--other .dms-option__name { color: var(--text); font-size: var(--text-xs); }
.leadform .dms-option--other .dms-option__check { display: none; }
.leadform .dms-option--other[aria-pressed="true"] { border: 0; background: transparent; box-shadow: none; }
.leadform .dms-option--other[aria-pressed="true"] .dms-option__other { color: transparent; position: relative; }
.leadform .dms-option--other[aria-pressed="true"] .dms-option__other::after {
  content: "\2713"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--green-700); font-size: 15px; font-weight: 800;
}
.leadform .dms-option--other[aria-pressed="true"] .dms-option__name { color: var(--green-800); }
.leadform .dms-other-field {
  max-width: 440px; margin-top: 14px;
}
.leadform .dms-other-field[hidden] { display: none; }
.leadform .dms-other-field label { display: block; margin-bottom: 7px; }
.leadform .dms-other-field input { width: 100%; }

/* primary dealership field — larger, with a leading search glyph on the combo */
.leadform .field--primary { margin-bottom: 4px; }
.leadform .field--primary .combo::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; opacity: .5; pointer-events: none; z-index: 1;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23192857' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
/* reserve the taller height on the bare input too, so wrapping it in .combo
   (post-JS) doesn't jump the field; the indent/glyph appear only once wrapped */
.leadform .field--primary > input,
.leadform .field--primary .combo > input { min-height: 52px; }
.leadform .field--primary .combo > input {
  font-size: var(--text-base); font-weight: 500; padding-left: 44px; border-color: #cfd7e8;
}

/* ---- product picker — cards that saturate to each brand hue when picked  */
.leadform .prodgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.leadform .prod-card {
  --phue: var(--green-700);
  position: relative; display: flex; flex-direction: column; gap: 12px; align-items: stretch;
  padding: 14px 15px; text-align: left; cursor: pointer; font: inherit;
  border-radius: var(--radius-m); border: 1px solid #e3e8f2;
  background: linear-gradient(180deg, #fff, #f9fbfd);
  box-shadow: 0 1px 2px rgba(19,31,67,.07), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
.leadform .prod-card__top { display: flex; align-items: center; justify-content: space-between; }
.leadform .prodfam__head:has(.prodfam__logo) { min-height: 32px; display: flex; align-items: center; gap: 10px; }
.leadform .prodfam__logo { width: auto; height: 27px; max-width: 145px; object-fit: contain; object-position: left center; }
.leadform .prodfam__logo--dark { display: none; }
.leadform .prodfam__head:has(.prodfam__logo) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.leadform .prod-card__dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--phue); flex: 0 0 11px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--phue) 14%, transparent), 0 0 10px color-mix(in srgb, var(--phue) 45%, transparent);
}
.leadform .prod-card__check {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  border: 1.5px solid #cfd7e8; background: #fff; color: #fff; opacity: 1;
  box-shadow: 0 1px 2px rgba(19,31,67,.06) inset; transition: .16s;
}
.leadform .prod-card__check svg { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.leadform .prod-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leadform .prod-card__name { font-size: var(--text-ms); font-weight: 600; color: var(--text); }
.leadform .prod-card__meta { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.leadform .prod-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--phue) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--phue) 16%, #fff), color-mix(in srgb, var(--phue) 26%, #fff));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--phue) 40%, transparent),
    0 8px 18px -7px color-mix(in srgb, var(--phue) 42%, transparent),
    0 1px 0 rgba(255,255,255,.8) inset;
}
.leadform .prod-card[aria-pressed="true"] .prod-card__check {
  background: var(--phue); border-color: var(--phue);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--phue) 40%, transparent);
}
.leadform .prod-card[aria-pressed="true"] .prod-card__check svg { opacity: 1; }
.leadform .prod-card[aria-pressed="true"] .prod-card__meta { color: color-mix(in srgb, var(--phue) 68%, var(--text)); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .leadform .prod-card:hover { transform: translateY(-1px); border-color: #cfd7e8; box-shadow: 0 6px 14px -5px rgba(19,31,67,.20), 0 1px 0 rgba(255,255,255,.9) inset; }
}

/* ---- repeatable contact cards ----------------------------------------- */
.leadform .contact-card {
  border: 1px solid #e3e8f2; border-radius: var(--radius-m); padding: 16px; margin-bottom: 12px;
  background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 1px 2px rgba(19,31,67,.07), 0 8px 18px -14px rgba(19,31,67,.24), 0 1px 0 rgba(255,255,255,.9) inset;
}
.leadform .contact-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.leadform .contact-card__head b { font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; color: var(--navy); }
/* the dashed "add another" row — shared by Add contact and Attach documents */
.leadform .addcontact,
.leadform .addfile {
  align-self: stretch; width: 100%; justify-content: center; min-height: 46px; margin-top: 2px;
  border: 1.5px dashed #cfd7e8; border-radius: 9px; background: transparent; color: var(--navy);
}
.leadform .addcontact:hover,
.leadform .addfile:hover { border-color: var(--green-700); color: var(--green-700); background: rgba(69,119,8,.06); }

/* ---- actions ---------------------------------------------------------- */
.leadform .form-actions { margin: 16px 0 0; padding-top: 20px; border-top: 1px solid #d8dfee; justify-content: flex-end; }
.leadform .form-actions .btn--primary {
  min-height: 48px; padding: 13px 24px; border-radius: 9px; font-weight: 700;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%);
  border: 1px solid var(--green-800);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 6px rgba(58,102,7,.30), 0 12px 24px -9px rgba(58,102,7,.52);
  transition: transform .14s, box-shadow .14s, filter .14s;
}
.leadform .form-actions .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04); background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%); }

/* ======================= Dark Premium (dark theme) ===================== */
[data-theme="dark"] .leadform {
  background: linear-gradient(180deg, #1b233d 0%, #161d31 46%); border: 1px solid var(--border);
  box-shadow: 0 48px 96px -28px rgba(0,0,0,.7), 0 16px 40px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .leadform__band {
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.16), rgba(97,166,14,0) 46%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.14), rgba(120,150,220,0) 50%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .leadform .fsection {
  background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7)); border: 1px solid var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .leadform .fsection__num {
  color: var(--green-soft); background: rgba(97,166,14,.13); border: 1px solid rgba(97,166,14,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .leadform .fsection__title { color: #c7cfe3; }
[data-theme="dark"] .leadform .field label { color: var(--muted); }
[data-theme="dark"] .leadform .field input, [data-theme="dark"] .leadform .field select, [data-theme="dark"] .leadform .field textarea {
  background-color: var(--field); border: 1px solid var(--control-border); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .leadform .field input:hover, [data-theme="dark"] .leadform .field select:hover, [data-theme="dark"] .leadform .field textarea:hover { border-color: var(--control-border-hover); }
[data-theme="dark"] .leadform .field input:focus, [data-theme="dark"] .leadform .field select:focus, [data-theme="dark"] .leadform .field textarea:focus {
  border-color: var(--green-bright); background-color: var(--field-focus);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(97,166,14,.24), 0 0 24px -4px rgba(97,166,14,.5);
}
[data-theme="dark"] .leadform .field--primary .combo::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237ec81a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  opacity: .9;
}
[data-theme="dark"] .leadform .field--primary .combo > input { border-color: #3f4f74; }
[data-theme="dark"] .leadform .dms-option {
  background: var(--field); border-color: var(--control-border);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.22);
}
[data-theme="dark"] .leadform .dms-option--autosoft .dms-option__logo,
[data-theme="dark"] .leadform .dms-option--pbs .dms-option__logo { background: #111d32; }
[data-theme="dark"] .leadform .dms-option--cdk-global .dms-option__logo {
  width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%;
}
[data-theme="dark"] .leadform .dms-option--cdk-global .dms-option__logo img { width: 28px; max-height: 28px; }
[data-theme="dark"] .leadform .dms-option__img--light { display: none !important; }
[data-theme="dark"] .leadform .dms-option__img--dark { display: block !important; }
[data-theme="dark"] .leadform .dms-option[aria-pressed="true"] {
  border-color: #6c993a; background: rgba(97,166,14,.09);
  box-shadow: 0 0 0 2px rgba(97,166,14,.12);
}
[data-theme="dark"] .leadform .dms-option--other[aria-pressed="true"] {
  border: 0; background: transparent; box-shadow: none;
}
[data-theme="dark"] .leadform .dms-option--other[aria-pressed="true"] .dms-option__name { color: var(--green-soft); }
[data-theme="dark"] .leadform .prodfam__logo--light { display: none; }
[data-theme="dark"] .leadform .prodfam__logo--dark { display: block; }
[data-theme="dark"] .leadform .prod-card {
  background: linear-gradient(180deg, rgba(33,44,73,.45), rgba(22,29,49,.75)); border: 1px solid var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .leadform .prod-card__check { border-color: #46557a; background: rgba(14,20,36,.5); color: #0e1424; }
[data-theme="dark"] .leadform .prod-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--phue) 68%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--phue) 17%, rgba(33,44,73,.55)), rgba(22,29,49,.85));
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--phue) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .leadform .prod-card[aria-pressed="true"] .prod-card__meta { color: color-mix(in srgb, var(--phue) 55%, var(--text)); }
[data-theme="dark"] .leadform .contact-card {
  background: linear-gradient(180deg, rgba(28,37,62,.65), rgba(20,27,46,.8)); border: 1px solid var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .leadform .contact-card__head b { color: #dbe2f0; }
[data-theme="dark"] .leadform .addcontact,
[data-theme="dark"] .leadform .addfile { color: var(--green-soft); border-color: rgba(97,166,14,.42); }
[data-theme="dark"] .leadform .addcontact:hover,
[data-theme="dark"] .leadform .addfile:hover { color: #dff5d6; border-color: rgba(97,166,14,.72); background: rgba(97,166,14,.09); }
[data-theme="dark"] .leadform .form-actions { border-top-color: var(--border); }
[data-theme="dark"] .leadform .form-actions .btn--primary {
  color: #0c1206; background: linear-gradient(180deg, #7ec81a, var(--green)); border: 1px solid rgba(126,200,26,.6);
  box-shadow: 0 12px 28px -6px rgba(97,166,14,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="dark"] .leadform .form-actions .btn--primary:hover { filter: brightness(1.05); background: linear-gradient(180deg, #7ec81a, var(--green)); }

/* ======================= Lead form — polish pass ======================= */
/* keyboard focus + press feedback on the custom product-toggle buttons
   (outline survives Windows High Contrast; box-shadow alone would not) */
.leadform .prod-card:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
[data-theme="dark"] .leadform .prod-card:focus-visible { outline-color: #8fd23f; }
.leadform .prod-card:active { transform: translateY(0); box-shadow: 0 2px 6px -3px rgba(19,31,67,.28), 0 1px 0 rgba(255,255,255,.9) inset; }
[data-theme="dark"] .leadform .prod-card:active { box-shadow: 0 2px 8px -3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }

/* invalid fields must read as invalid even against the scoped input rules
   (higher specificity + later source order than the base :focus rule) */
.leadform .field input:user-invalid, .leadform .field select:user-invalid,
.leadform .field input:user-invalid:focus, .leadform .field select:user-invalid:focus,
.leadform .field input[aria-invalid="true"], .leadform .field input[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-ring), 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}

/* placeholders carry format hints (phone/email masks) → meet 4.5:1 in light */
.leadform .field input::placeholder { color: #6b7488; opacity: 1; }
/* dark pair was missing (pre-existing gap) — same fill (var(--field)) and the same
   --muted token already proven 6.19:1 there for .drawer textarea placeholders.
   No .leadform textareas/selects carry placeholder text, so this is the only pair. */
[data-theme="dark"] .leadform .field input::placeholder { color: var(--muted); opacity: 1; }  /* 6.19:1 on var(--field) */

/* browser autofill must keep the layered fill + themed text, not paint its own */
.leadform .field input:-webkit-autofill,
.leadform .field input:-webkit-autofill:hover,
.leadform .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 1px 2px rgba(19,31,67,.06);
  transition: background-color 9999s ease 0s;
}
[data-theme="dark"] .leadform .field input:-webkit-autofill,
[data-theme="dark"] .leadform .field input:-webkit-autofill:hover,
[data-theme="dark"] .leadform .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
}

/* number field: drop native spinners, use lining/tabular figures */
.leadform .field input[type="number"] { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.leadform .field input[type="number"]::-webkit-outer-spin-button,
.leadform .field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* submitting: keep the CTA luminous, swap the icon for a spinner */
.leadform .form-actions .btn--primary:disabled {
  opacity: 1; filter: saturate(.85) brightness(.96); cursor: progress; box-shadow: none;
}
.leadform .form-actions .btn--primary:disabled::before {
  content: ""; width: 15px; height: 15px; flex: none;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: leadspin .6s linear infinite;
}
[data-theme="dark"] .leadform .form-actions .btn--primary:disabled::before { border-color: rgba(12,18,6,.35); border-top-color: #0c1206; }
@keyframes leadspin { to { transform: rotate(360deg); } }

/* combobox dropdown: mouse-hover feedback + don't scroll-chain into the form */
@media (hover: hover) and (pointer: fine) {
  .leadform .combo__opt:hover { background: var(--surface-2); }
}
.leadform .combo__list { overscroll-behavior: contain; }

/* Remove-contact: a compact corner icon button, not a heavy pill — muted at
   rest, danger on hover; sits flush to the card's inner edge */
.leadform .contact-remove {
  flex: none; width: 36px; height: 36px; padding: 0; margin: -2px -4px -2px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--muted-2); cursor: pointer; font: inherit;
  transition: color .15s, background .15s, border-color .15s;
}
.leadform .contact-remove svg { width: 17px; height: 17px; }
.leadform .contact-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.leadform .contact-remove:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
[data-theme="dark"] .leadform .contact-remove { color: var(--muted); }
[data-theme="dark"] .leadform .contact-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }

/* post-submit booking panel: don't hide the heading under the sticky topbar,
   and give it a green success accent so it matches the form's depth */
#bookRail { scroll-margin-top: calc(var(--topbar-h) + 16px); border-top: 3px solid var(--green-700); }
#bookRail { box-shadow: 0 0 0 1px rgba(97,166,14,.18), 0 10px 22px -8px rgba(14,23,48,.16), 0 34px 60px -24px rgba(14,23,48,.20); }
/* Rises in when JS drops its [hidden] after the lead is filed (display:none →
   block restarts the animation); on load it is hidden, so this never fires early. */
#bookRail { animation: cham-rise var(--dur-4) var(--ease-out) both; }
[data-theme="dark"] #bookRail { border-top-color: #7ec81a; box-shadow: 0 0 0 1px rgba(97,166,14,.28), 0 24px 60px -24px rgba(0,0,0,.6); }

/* print: the navy hero + gradient text would vanish on paper — flatten to ink */
@media print {
  .leadform, .leadform .fsection, .leadform .prod-card, .leadform .contact-card,
  .leadform .warrfields__panel, .leadform .docrow, .leadform .segpill__face,
  .leadform .field input, .leadform .field select {
    background: #fff !important; box-shadow: none !important; border-color: #999 !important;
  }
  .leadform__band { background: #fff !important; color: #000 !important; }
  .leadform__eyebrow, .leadform__sub, .leadform__band h1 { color: #000 !important; }
  .leadform__band h1 .accent { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; }
  .leadform__band::before, .leadform__band::after, .leadform__stroke { display: none !important; }
  .content:has(.leadwrap) { background: #fff !important; }
}

@media (max-width: 640px) {
  .leadform__actions .btn { width: 100%; justify-content: center; }
  .card { padding: 18px; }
}

/* =======================================================================
   New Lead — product families, conditional warranty fields, inline errors
   and the documents picker (client memo §3/§4/§5/§6).
   Everything stays scoped under .leadform and reuses the form's own depth
   language: navy-tinted panels, layered inset controls, hue-saturated
   selection. Both themes are styled; ratios noted as "x.xx:1".
   ======================================================================= */

/* Helper copy that sits under a section head, above its controls. */
.leadform .desc { margin: -4px 0 14px; }

/* ---- product family groups (§3) --------------------------------------- */
.leadform .prodfam + .prodfam { margin-top: 18px; }
.leadform .prodfam__head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);   /* 5.21:1 on the light section panel */
}
/* hairline that runs the sub-head out to the panel edge — the same "fading
   divider" grammar as .sidebar__foot::before and .leadform__band::after */
.leadform .prodfam__head::after {
  content: ""; flex: 1 1 auto; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, #c8d1e6, rgba(200,209,230,0));
}
/* two products per row inside a family; the ≤560px container query further
   down flattens every .prodgrid variant to a single column on phones */
.leadform .prodgrid--fam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-theme="dark"] .leadform .prodfam__head { color: var(--muted); }   /* 6.42:1 on the dark section panel */
[data-theme="dark"] .leadform .prodfam__head::after {
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

/* ---- conditional warranty panel (§6) ---------------------------------- */
/* `hidden` stays authoritative: display:none keeps these inputs out of the tab
   order and off the a11y tree while their product isn't picked. The open/close
   motion rides on top of it (transition-behavior: allow-discrete +
   @starting-style), so engines without that support simply snap — and the
   global prefers-reduced-motion block flattens it everywhere. */
.leadform .warrfields {
  display: grid; grid-template-rows: 1fr; opacity: 1; margin-top: 18px;
  transition:
    grid-template-rows var(--dur-3) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    margin-top var(--dur-3) var(--ease-out),
    display var(--dur-3) allow-discrete;
}
.leadform .warrfields[hidden] { display: none; grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
@starting-style {
  .leadform .warrfields { grid-template-rows: 0fr; opacity: 0; margin-top: 0; }
}
.leadform .warrfields__inner { min-height: 0; overflow: hidden; }   /* the 0fr row needs a clipped child */
/* one step deeper than the .fsection it sits in, so the conditional block reads
   as belonging to the products above it rather than as a new section */
.leadform .warrfields__panel {
  border-radius: var(--radius-m); padding: 16px;
  background: linear-gradient(180deg, #e6ecf8 0%, #dce4f3 100%);
  border: 1px solid #c2cce3;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 8px rgba(19,31,67,.07) inset;
}
.leadform .warrfields__panel .desc { margin: 0 0 14px; }
/* individual fields come and go with their own product — same `hidden`
   contract, fading rather than sliding (they sit in a two-up grid) */
.leadform .warrfield {
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    display var(--dur-2) allow-discrete;
}
.leadform .warrfield[hidden] { display: none; opacity: 0; transform: translateY(-4px); }
@starting-style {
  .leadform .warrfield { opacity: 0; transform: translateY(-4px); }
}
[data-theme="dark"] .leadform .warrfields__panel {
  background: linear-gradient(180deg, rgba(14,20,36,.55), rgba(14,20,36,.75));
  border-color: var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 2px 10px rgba(0,0,0,.35);
}

/* unit affixes ("%", "$ … /hr") — decorative, so they're aria-hidden and the
   unit lives in the visible label text instead */
.leadform .affix { position: relative; display: flex; align-items: center; }
.leadform .affix > input { width: 100%; }
.leadform .affix__lead, .leadform .affix__unit {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--muted);   /* 5.67:1 on the white input */
}
.leadform .affix__lead { left: 14px; }
.leadform .affix__unit { right: 14px; }
.leadform .affix--suffix > input { padding-right: 42px; }
.leadform .affix--both > input { padding-left: 30px; padding-right: 48px; }

/* Segmented radio group — a radio set wearing the shell's filter-pill clothes.
   One component, two use sites: this form's XTime Yes/No and the lead drawer's
   activity types, so the rules are unscoped and each site overrides only its
   true deltas. The visuals live on .segpill__face (an adjacent-sibling
   selector, supported everywhere) rather than :has(), so the checked state can
   never go missing. */
.leadform .warr-radio { display: block; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.leadform .warr-radio > legend {
  float: none; padding: 0; margin: 0 0 8px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
.segpills { display: flex; flex-wrap: wrap; gap: 8px; }
.segpill { position: relative; display: inline-flex; cursor: pointer; }
.segpill input { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; }
.segpill__face {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 15px; border-radius: var(--radius-full);
  border: 1px solid #e3e8f2; color: var(--muted);   /* 5.53:1 at rest */
  background: linear-gradient(180deg, #fff, #f9fbfd);
  box-shadow: 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.segpill input:checked + .segpill__face {
  color: var(--text); font-weight: 700; border-color: var(--green-700);   /* #1b2333 on #dcecc8 = 12.1:1 */
  background: linear-gradient(180deg, rgba(97,166,14,.12), rgba(97,166,14,.22));
  box-shadow: 0 0 0 1px rgba(69,119,8,.30), 0 6px 15px -8px rgba(69,119,8,.55), 0 1px 0 rgba(255,255,255,.7) inset;
}
.segpill input:focus-visible + .segpill__face { outline: 2px solid var(--green-700); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .segpill:hover .segpill__face { border-color: #cfd7e8; color: var(--text); }
}
[data-theme="dark"] .leadform .warr-radio > legend { color: var(--muted); }
[data-theme="dark"] .segpill__face {
  border-color: var(--control-border); color: var(--muted);   /* 5.94:1 at rest */
  background: linear-gradient(180deg, rgba(33,44,73,.55), rgba(22,29,49,.8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .segpill input:checked + .segpill__face {
  color: var(--text); border-color: rgba(126,200,26,.65);   /* #e7ebf3 on the tinted fill = 10.8:1 */
  background: linear-gradient(180deg, rgba(97,166,14,.22), rgba(97,166,14,.10));
  box-shadow: 0 8px 20px -10px rgba(97,166,14,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .segpill input:focus-visible + .segpill__face { outline-color: #8fd23f; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .segpill:hover .segpill__face { border-color: var(--control-border-hover); }
}
/* New Lead's Yes/No pair sits wider, so the two short labels balance. Sets only
   box metrics — disjoint from every property the dark rules above touch. */
.leadform .segpill__face { min-height: 40px; min-width: 74px; padding: 9px 18px; }

/* ---- inline field errors (§5) ----------------------------------------- */
/* Rendered under the field, linked with aria-describedby, cleared on the next
   edit. `hidden` is the on/off switch — restate display:none, because the
   author `display:flex` below would otherwise beat the UA's [hidden] rule. */
.leadform .field__err {
  display: flex; align-items: flex-start; gap: 6px; margin: 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--danger);   /* 6.13:1 on the light section panel */
}
.leadform .field__err[hidden] { display: none; }
.leadform .field__err::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v5M12 16h.01'/></svg>");
}
[data-theme="dark"] .leadform .field__err { color: var(--danger); }   /* 5.32:1 on the dark section panel */
[data-theme="dark"] .leadform .field__err::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v5M12 16h.01'/></svg>");
}
/* the polish-pass invalid rule above only covers inputs — the DMS select needs
   the same treatment, and at the same weight as .leadform's scoped :focus rule */
.leadform .field select[aria-invalid="true"],
.leadform .field select[aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-ring), 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* the required asterisk only shows on the contact card that is currently #1 */
.leadform .req-mark[hidden] { display: none; }

/* ---- documents (§4) ---------------------------------------------------- */
/* One attachment-row component, two use sites: the New Lead picker (removable
   rows) and the lead drawer's read-only "Attached documents" list — so the
   rules are unscoped and each site overrides only its true deltas. */
.doclist { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.doclist[hidden] { display: none; }
.docrow {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 12px; border-radius: 9px;
  border: 1px solid #e3e8f2; background: linear-gradient(180deg, #fff, #fbfcfe);
  box-shadow: 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
/* per-type mini-tag — reuses the stage color pairs, which are already
   contrast-checked in both themes (see the --stage-* tokens) */
.docrow__tag {
  flex: none; padding: 3px 8px; border-radius: 6px;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
  background: var(--surface-2); color: var(--muted);   /* unknown kind falls back to the neutral chip */
}
.docrow__tag[data-kind="PDF"]   { background: var(--stage-lost-bg); color: var(--stage-lost-fg); }
.docrow__tag[data-kind="Word"]  { background: var(--stage-set-bg);  color: var(--stage-set-fg); }
.docrow__tag[data-kind="Excel"] { background: var(--stage-won-bg);  color: var(--stage-won-fg); }
.docrow__name {
  flex: 1 1 auto; min-width: 0; font-size: var(--text-ms); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.docrow__size {
  flex: none; font-size: var(--text-xs); color: var(--muted);   /* 5.67:1 on the row fill */
  font-variant-numeric: tabular-nums;
}
/* the picker's rows carry a remove button, so the right edge tightens */
.leadform .doclist { margin: 12px 0 0; }
.leadform .docrow { padding-right: 8px; }
.leadform .docrow__x { width: 32px; height: 32px; margin: -2px 0 -2px 2px; }
.leadform .docrow__x svg { width: 15px; height: 15px; }
/* rejected pick — a live region, so it must exist in the DOM at all times */
.leadform .docerr {
  display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--danger);   /* 6.13:1 on the light section panel */
}
.leadform .docerr[hidden] { display: none; }
.leadform .docerr::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v5M12 16h.01'/></svg>");
}
[data-theme="dark"] .docrow {
  border-color: var(--control-border);
  background: linear-gradient(180deg, rgba(28,37,62,.65), rgba(20,27,46,.8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .leadform .docerr { color: var(--danger); }   /* 5.32:1 on the dark section panel */
[data-theme="dark"] .leadform .docerr::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v5M12 16h.01'/></svg>");
}

/* Password reveal ------------------------------------------------------- */
.pw-field { position: relative; display: flex; }
.pw-field input { width: 100%; padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-s); cursor: pointer; color: var(--muted); transition: .15s;
}
.pw-toggle svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .pw-toggle:hover { color: var(--text); background: var(--surface-2); }
}

/* ---- Alert / note ----------------------------------------------------- */
.note {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--surface-2); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted);
}
.note.important { background: #fff6e9; border-color: #f3dcae; color: #8a5a12; }  /* 5.30:1 on #fff6e9 */
[data-theme="dark"] .note.important { background: #2a2110; border-color: #4a3a17; color: #e6c67e; }  /* 9.63:1 */
.note svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.note b { color: inherit; }

/* ---- Toast ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 80; max-width: min(92vw, 420px);
  padding: 12px 18px; border-radius: var(--radius-m);
  background: var(--navy-800); color: #fff; font-size: var(--text-sm); font-weight: 500;  /* #fff on #0e1730 = high contrast in both themes */
  box-shadow: var(--shadow-pop); border: 1px solid rgba(255,255,255,.08);  /* hairline for dark-mode elevation */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* An undo offer has to be clickable, so only the actionable toast takes
   pointer events back — a plain status toast stays inert over the page. */
.toast--action { display: flex; align-items: center; gap: 14px; padding-right: 8px; }
/* Only the BUTTON takes pointer events back, never the message around it: the
   toast covers the drawer (z-index 80 over 61), and a click aimed at whatever
   sits beneath the text should reach it rather than being swallowed. */
.toast--action.is-visible { pointer-events: none; }
.toast--action.is-visible .toast__action { pointer-events: auto; }
.toast__action {
  flex: 0 0 auto; padding: 6px 12px; border-radius: var(--radius-s);
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color: #fff; font: 650 var(--text-sm)/1 var(--font); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.toast__action:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.toast__action:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }

/* ---- Empty state ------------------------------------------------------ */
.empty {
  padding: 40px 24px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty__icon { color: var(--muted-2); }
.empty__icon svg { width: 44px; height: 44px; }
.empty__title { font-size: var(--text-md); font-weight: 700; color: var(--text); }
.empty__text { margin: 0; max-width: 44ch; }
.empty .btn { margin-top: 4px; }

/* ---- Skeleton loading ------------------------------------------------- */
/* Placeholders that reserve the real content's box while data loads. The stat
   and row skeletons reuse the real containers (.stat__val, .cell-strong, …) and
   drop a .skel-bar into each, so the line boxes reserve the exact final height —
   data swaps in with zero layout shift. A soft sheen sweeps across; the global
   reduced-motion block drops it to a calm static tint. */
.skel, .skel-bar {
  position: relative; overflow: hidden;
  background: #e8ecf4;                       /* light-gray placeholder on white cards */
}
.skel { border-radius: var(--radius-s); }
.skel-bar {
  display: inline-block; vertical-align: middle;
  width: 100%; height: .7em; border-radius: var(--radius-full);
}
.skel::after, .skel-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: skel-sweep 1.5s var(--ease-out) infinite;
}
[data-theme="dark"] .skel, [data-theme="dark"] .skel-bar { background: #212c49; }  /* = dark --surface-2 */
[data-theme="dark"] .skel::after, [data-theme="dark"] .skel-bar::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
}
@keyframes skel-sweep { to { transform: translateX(100%); } }

/* ---- Calendly frame ----------------------------------------------------
   A plain <iframe> (no widget.js), so its box is ours to size — the height must
   never be written inline. Calendly renders light in both themes, so the frame
   keeps a white plate and only its hairline follows the theme. */
.calframe {
  display: block; width: 100%; min-width: 0; height: 660px; border: 0;
  border-radius: var(--radius-l); background: #fff;
  box-shadow: 0 0 0 1px var(--border);
}
[data-theme="dark"] .calframe { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
@media (max-width: 640px) {
  /* Phone: the scheduler is the conversion moment, so give it room to render
     whole and let the PAGE scroll — a short frame nests a second scroller
     inside the one the rep is already using. */
  .calframe { height: max(1000px, 100dvh); border-radius: var(--radius-m); }
}

/* ---- Modal (native <dialog>) ------------------------------------------ */
dialog.modal {
  border: 0; margin: auto; padding: 26px;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-l); box-shadow: var(--shadow-pop);
  width: min(520px, calc(100% - 48px)); max-width: 520px;
  max-height: 88vh; max-height: 88dvh; overflow: auto;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity .2s ease, transform .2s ease,
              overlay .2s ease allow-discrete, display .2s ease allow-discrete;
}
dialog.modal[open] { opacity: 1; transform: none; }
@starting-style {
  dialog.modal[open] { opacity: 0; transform: translateY(8px) scale(.98); }
}
dialog.modal::backdrop {
  background: rgba(15,23,42,.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s ease, overlay .2s ease allow-discrete, display .2s ease allow-discrete;
}
dialog.modal[open]::backdrop { opacity: 1; }
@starting-style {
  dialog.modal[open]::backdrop { opacity: 0; }
}
/* Dark mode: the surface is near-black like the page, so give the dialog an
   explicit light hairline edge and a deeper backdrop — otherwise it blends into
   the background (most visible on mobile, where the modal is near full-width). */
[data-theme="dark"] dialog.modal { border: 1px solid rgba(255,255,255,.36); }  /* 3.29:1 vs surface — meets WCAG 1.4.11 */
[data-theme="dark"] dialog.modal::backdrop { background: rgba(3,6,15,.66); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.modal__head h3 { font-size: var(--text-md); }
.modal__close {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-m); cursor: pointer; color: var(--muted); transition: .15s;
}
.modal__close svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .modal__close:hover { color: var(--text); background: var(--surface-2); }
}

/* ---- Misc ------------------------------------------------------------- */
.demo-banner {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: linear-gradient(90deg, var(--navy-800), var(--navy-700) 50%, var(--navy-800));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.78); font-size: var(--text-xs); font-weight: 500;  /* ≈11:1 on navy-800 */
  padding: 6px 16px; text-align: center;
}
.demo-banner b { color: #b8c2dd; font-weight: 600; }   /* 9.9:1 on --navy-800 */
.demo-banner__pip {  /* same recipe as the leadform eyebrow pip */
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(97,166,14,.24), 0 0 10px 1px rgba(97,166,14,.45);
}
/* --navy-800 ≈ --bg in dark mode, so the strip loses its edge — give it a
   surface fill + hairline so it reads as a distinct band */
[data-theme="dark"] .demo-banner { background: var(--surface-2); border-bottom: 1px solid var(--border); }
[data-theme="dark"] .demo-banner b { color: var(--green-soft-ink); }  /* 8.36:1 on --surface-2 (was --green, 4.58:1) */
.pageblock { max-width: 860px; }
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.two-col > * { min-width: 0; }

/* Low-opacity brand moment for the light workspace — a faint chameleon in the
   bottom-right gutter of the dashboard (hidden on phones to avoid crowding). */
.brand-watermark {
  position: fixed; right: 24px; bottom: 20px; z-index: 0; width: min(240px, 26vw);
  height: auto; opacity: .05; pointer-events: none; user-select: none;
}
[data-theme="dark"] .brand-watermark { opacity: .07; }
@media (max-width: 640px) { .brand-watermark { display: none; } }

/* =======================================================================
   Motion system
   Three coordinated layers, all governed by the shell's two easings and the
   120/180/240/320/460ms duration scale — no spring, no overshoot:
     1. Cross-document view transitions — the page-to-page swap.
     2. Theme toggle — a same-document circular clip-reveal.
     3. Entrance choreography — content fades in; data atoms stagger-rise.
   The global prefers-reduced-motion block (below) neutralizes every keyframe
   and view-transition animation here; the print block strips VT names.
   ======================================================================= */

/* ---- 1 · Cross-document view transitions ------------------------------ */
@view-transition { navigation: auto; }

/* Persistent chrome: sidebar + topbar (named where they're defined) and the
   demo banner hold their box across a navigation while their contents
   cross-dissolve in place (active nav item A→B, page title old→new). Everything
   else — the content column — is the "root" snapshot. */
.demo-banner { view-transition-name: demo-banner; }

/* The page swap is typed `nav` (set in JS via pageswap/pagereveal) so its root
   drift never leaks into the same-document theme/list transitions, which key
   off their own types and fall back to the browser's default cross-fade. */
:root:active-view-transition-type(nav)::view-transition-old(root) {
  animation: cham-vt-out var(--dur-3) var(--ease-out) both;
}
:root:active-view-transition-type(nav)::view-transition-new(root) {
  animation: cham-vt-in var(--dur-4) var(--ease-out) both;
}
@keyframes cham-vt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes cham-vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Chrome groups settle on the shell easing rather than the UA default. */
:root:active-view-transition-type(nav)::view-transition-group(topbar),
:root:active-view-transition-type(nav)::view-transition-group(sidebar),
:root:active-view-transition-type(nav)::view-transition-group(demo-banner) {
  animation-duration: var(--dur-3); animation-timing-function: var(--ease-out);
}

/* Same-document `list` swap (leads filter/sort via Portal.viewSwap): the named
   chrome holds and only the content root cross-fades — unchanged regions
   (headers, toolbar) are pixel-identical so their cross-fade is invisible;
   only the changed rows read. Tuned to the shell timing. */
:root:active-view-transition-type(list)::view-transition-group(root) {
  animation-duration: var(--dur-3); animation-timing-function: var(--ease-out);
}

/* ---- 2 · Theme toggle — circular clip-reveal -------------------------- */
/* startViewTransition({ types:['theme'] }) fires this. During capture the
   persistent names resolve to none (the type is already active), so the whole
   viewport is a single root snapshot: the OLD theme holds underneath while the
   NEW theme is clipped in from the toggle button. --cham-x/-y/-r set in JS. */
:root:active-view-transition-type(theme) .sidebar,
:root:active-view-transition-type(theme) .topbar,
:root:active-view-transition-type(theme) .demo-banner { view-transition-name: none; }

/* Old theme holds underneath; the new theme is clipped in on top. mix-blend-mode
   normal makes the incoming snapshot paint opaquely (the UA default plus-lighter
   would additively brighten the overlap into a flash). */
:root:active-view-transition-type(theme)::view-transition-old(root) { animation: none; }
:root:active-view-transition-type(theme)::view-transition-new(root) {
  animation: cham-theme-reveal var(--dur-5) var(--ease-out) both;
  mix-blend-mode: normal;
}
@keyframes cham-theme-reveal {
  from { clip-path: circle(0 at var(--cham-x, 50%) var(--cham-y, 0)); }
  to   { clip-path: circle(var(--cham-r, 150vmax) at var(--cham-x, 50%) var(--cham-y, 0)); }
}

/* ---- 3 · Entrance choreography ---------------------------------------- */
@keyframes cham-rise    { from { opacity: 0; transform: translateY(14px); } }
@keyframes cham-rise-sm { from { opacity: 0; transform: translateY(8px);  } }

/* The app itself is revealed composed (the .js-mounting hide, above), and the
   dashboard's stats/table cross-fade from skeletons via Portal.viewSwap — so
   there is no page-level content fade here (it would only fight those). */

/* Login + 404 are single hero blocks with no async data, so they get the rise. */
.login   { animation: cham-rise var(--dur-5) var(--ease-out) both; }
.nf-hero { animation: cham-rise var(--dur-5) var(--ease-out) both; }

/* New Lead's product picker + first contact card render synchronously, so they
   rise on a cold load. Suppressed on a view-transition navigation (html.vt-nav,
   set before first paint) — otherwise their opacity-0 start would be captured by
   the page-swap snapshot and they'd blank out during the transition, popping in
   afterward. On a VT nav the swap's own cross-fade reveals them instead. */
/* Seven cards across four family groups: JS stamps each card's place in the wave
   as --rise, so the stagger keeps flowing group after group without one rule per
   position. The global reduced-motion block neutralises the delay. */
html:not(.vt-nav) .leadform .prodgrid > .prod-card {
  animation: cham-rise-sm var(--dur-4) var(--ease-out) both;
  animation-delay: var(--rise, 0ms);
}
html:not(.vt-nav) .leadform .prodfam__head { animation: cham-rise-sm var(--dur-3) var(--ease-out) both; }
html:not(.vt-nav) .leadform .contact-card { animation: cham-rise-sm var(--dur-3) var(--ease-out) both; }

/* Contact cards added on demand (after load, never in a page-swap snapshot)
   always rise in — even on a view-transition-navigated page. JS adds this class. */
.leadform .contact-card--enter { animation: cham-rise-sm var(--dur-3) var(--ease-out) both; }


/* ---- Responsive ------------------------------------------------------- */
/* Content grids respond to the content column's own width, not the viewport
   (decoupled from the sidebar via container queries). */
@container (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .admin-scope { grid-template-columns: 1fr; align-items: stretch; gap: 16px; }
  .admin-scope__controls { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; justify-content: stretch; }
  .scope-field { min-width: 0; }
  .scope-field .pselect { width: 100%; }
  .two-col { grid-template-columns: 1fr; }
}
@container (max-width: 560px) {
  .form-grid, .leadform .form-grid { grid-template-columns: 1fr; }
  .prodgrid, .leadform .prodgrid { grid-template-columns: 1fr; }
  .admin-scope { padding: 18px; }
  .admin-scope__controls { grid-template-columns: 1fr; }
  .admin-scope__reset { justify-self: start; margin-left: -8px; }
}
@container (max-width: 440px) {
  /* All four KPIs stay on screen as a tightened 2×2 ledger (inherits the
     ≤720 grid above). A snap rail here read as accidental clipping, not a
     gesture cue — four numbers should never need a swipe. */
  .stat { padding: 13px 14px; gap: 4px; }
  .stat__val { font-size: var(--text-xl); }
}

/* Drawer + mobile chrome (raised from 820 → 1024 to cover the tablet band) */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: 0; top: 0;
    width: min(300px, 86vw); overflow-y: auto;
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-4) var(--ease-sheet), visibility var(--dur-4);
    box-shadow: var(--elev-3), inset -1px 0 0 rgba(255,255,255,.07);
    /* off-screen drawer, not persistent chrome — keep it out of page-swap
       snapshots so it doesn't slide across a navigation */
    view-transition-name: none;
  }
  /* sheet physics: settle in, accelerate out */
  body:not(.nav-open) .sidebar { transition-duration: var(--dur-3); transition-timing-function: cubic-bezier(.4,0,1,1); }
  body.nav-open .sidebar { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }              /* lock the page behind the drawer */
  .nav-scrim { display: block; transition: opacity var(--dur-4) var(--ease-out), visibility var(--dur-4); }
  /* scrim exits with the drawer instead of lagging 80ms behind it */
  body:not(.nav-open) .nav-scrim { transition-duration: var(--dur-3); transition-timing-function: cubic-bezier(.4,0,1,1), ease; }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  .sidebar__close { display: inline-flex; }
  .topbar__burger { display: flex; }

  /* CTA collapses to icon-only; the aria-label carries the name. Trimmed to 40px
     and stripped of the desktop bloom glow so it doesn't dominate the compact bar. */
  .topbar__cta {
    width: 40px; height: 40px; flex: 0 0 40px; padding: 0; justify-content: center;
    border-radius: var(--radius-full); margin-right: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(58,102,7,.28);
  }
  .topbar__cta svg { width: 18px; height: 18px; stroke-width: 2; }
  [data-theme="dark"] .topbar__cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 8px rgba(97,166,14,.32); }
  .topbar__cta-label { display: none; }

  /* tighten the header so it stops squishing on small screens */
  .topbar { height: 60px; flex-basis: 60px; padding: 0 8px 0 6px; gap: 4px; }
  .topbar__burger { margin-left: -2px; }  /* desktop's -8px started the box off-screen here */
  .topbar__title {
    font-size: var(--text-base); min-width: 0; flex: 0 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar__actions { gap: 2px; }
  .topbar__sep { display: none; }       /* declutter the compact bar */
  .acct { padding: 7px; }               /* avatar-only account button — 44px in the 44px row */
  .acct__name { display: none; }        /* full name lives in the drawer footer + menu */

  /* 44px touch-comfort targets */
  .topbar__burger, .icon-btn, .sidebar__close { width: 44px; height: 44px; flex: 0 0 44px; }
  .sidebar__logout { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .pill { min-height: 40px; }

  .content { padding: 20px; }
}

/* Phone reflow for data tables. Both #leadRows and #acctRows are laid out
   positionally into dense grid cards below (they suppress the generic
   label:value list). The generic rules that follow are the fallback for any
   future table.data without its own layout; the thead-hide applies to all. */
@media (max-width: 640px) {
  /* display:none, not sr-only clipping: the blockified table keeps no header
     semantics for AT anyway, and a clipped-but-focusable .th-sort button is an
     invisible keyboard stop (no focus ring can render). Every card field
     self-labels below instead. */
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tbody tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
  table.data tbody tr:last-child { border-bottom: 0; }
  table.data tbody td {
    border: 0; padding: 8px 16px;
    display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  }
  table.data tbody td::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto;
  }
  table.data tbody td:empty { display: none; }

  /* ---- Leads → seamed pipeline cards inside the one elevated panel.
     Identity top-left, stage color pinned top-right, and the demo docket
     plaque — the card's only bordered object — anchoring the foot. */
  .table-wrap:has(#leadRows) {
    overflow: visible;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  }
  #leadRows { display: block; }
  #leadRows tr {
    display: grid;
    /* minmax(0,1fr): long names wrap to two lines beside "Demo Completed"
       instead of pushing the badge off-card */
    grid-template-columns: minmax(0, 1fr) auto;
    /* the foot is one spanned area holding both the plaque (left) and the
       Submitted stack (right) — a wide status badge above can't squeeze it */
    grid-template-areas:
      "dealer   status"
      "products products"
      "foot     foot";
    column-gap: 12px;
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--border);
  }
  #leadRows tr:last-child { border-bottom: 0; }
  /* width:auto overrides the generic reflow's td{width:100%}, which would
     otherwise stretch each cell and defeat justify-self:end on the badge. */
  #leadRows td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  #leadRows td::before { content: none; }
  #leadRows td:nth-child(1) { grid-area: dealer; }
  #leadRows td:nth-child(2) {
    grid-area: products; margin-top: 8px;
    display: block;
    justify-content: flex-start; align-items: center;   /* undo the fallback's space-between */
  }
  #leadRows td:nth-child(3) { grid-area: status; justify-self: end; align-self: start; }
  /* plaque and Submitted stack overlap-share the foot area; the margin
     reserves the stack's corner so a long plaque can never underlap it —
     wide enough for the stack's second line ("Updated 22d ago", F-19) */
  #leadRows td:nth-child(4) { grid-area: foot; justify-self: start; margin-top: 12px; margin-right: 104px; }
  #leadRows td:nth-child(5) {
    grid-area: foot; justify-self: end; align-self: center;
    margin-top: 12px; text-align: right;
  }
  #leadRows td[hidden] { display: none !important; }
  #leadRows .cell-strong { font-size: var(--text-base); line-height: 1.3; letter-spacing: -.01em; }
  #leadRows .cell-sub { margin-top: 2px; }
  #leadRows .cell-owner__company { flex: 1 1 auto; }
  #leadRows .cell-owner__rep { max-width: 50%; }
  #leadRows .product-tag { font-size: var(--text-sm); color: var(--muted); }
  #leadRows .product-summary { align-items: flex-start; flex-wrap: wrap; row-gap: 7px; }
  #leadRows .product-summary .product-tag { max-width: calc(100vw - 64px); }
  #leadRows .product-overflow { min-height: 44px; margin-block: -8px; margin-left: -7px; color: var(--muted); }
  #leadRows .date-yr { display: none; }   /* short dates on the phone */

  /* Products/Status keep their field name for AT (the #acctRows technique);
     Demo's caption is visible on the plaque, Submitted's on its eyebrow. */
  #leadRows td:nth-child(2)::before,
  #leadRows td:nth-child(3)::before {
    content: attr(data-label); position: absolute;
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* the demo docket — an inset plaque in the New Lead form's section-panel
     material, "DEMO │ Jul 22 · 1:30 PM". Three data-derived states: navy
     inset = demo happened, green + soft ring = upcoming (your next action),
     dashed = an unfilled slot. */
  #leadRows .when {
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
    max-width: 100%; min-height: 34px; padding: 6px 11px; border-radius: var(--radius-s);
    background: linear-gradient(180deg, #f1f4fb, #e8edf7);
    border: 1px solid #c8d1e6;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(19,31,67,.06) inset;
    font-size: var(--text-sm);
  }
  #leadRows .when::before {
    content: "Demo";
    font: 700 var(--text-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase;
    color: var(--navy);
    padding-right: 8px; border-right: 1px solid rgba(25,40,87,.16);
  }
  #leadRows .when b { font-weight: 600; }
  #leadRows .when b + span::before { content: "·"; margin-right: 6px; color: var(--muted-2); }
  #leadRows .when--soon {
    background: linear-gradient(180deg, #eef7e2, #def0cc);
    border-color: #aed389;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 0 0 3px rgba(97,166,14,.10);
  }
  #leadRows .when--soon::before { color: var(--green-800); border-right-color: rgba(58,102,7,.25); }  /* 5.7:1 on the tint */
  #leadRows .when--tbd { background: transparent; border: 1px dashed #b9c3da; box-shadow: none; }
  #leadRows .when--tbd::before { color: var(--muted); border-right-color: var(--border); }
  #leadRows .when--tbd span { color: var(--muted); }

  /* submitted — eyebrow micro-stack, the smallest voice in the card */
  #leadRows td:nth-child(5)::before {
    content: attr(data-label); display: block;
    font: 600 var(--text-xs)/1 var(--font); text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin-bottom: 2px;
  }
  #leadRows td:nth-child(5) span { font-size: var(--text-sm); font-weight: 500; }

  /* empty / error / loading rows: single full-width cell, no grid */
  #leadRows tr:has(td[colspan]) { display: block; padding: 0; border-bottom: 0; }
  #leadRows td[colspan] { display: block; width: 100%; }

  /* Dark Premium: flat surface + border edge (depth comes from borders, not
     shadow stacks); the plaque quotes the dark form-panel fill verbatim */
  [data-theme="dark"] .table-wrap:has(#leadRows) { background: var(--surface); }
  [data-theme="dark"] #leadRows .when {
    background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7));
    border-color: var(--control-border);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  }
  [data-theme="dark"] #leadRows .when::before { color: #b6c2e0; border-right-color: rgba(182,194,224,.22); }
  [data-theme="dark"] #leadRows .when--soon {
    background: linear-gradient(180deg, #1a2f10, #16290f);
    border-color: #3c5c22;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px -4px rgba(97,166,14,.35);
  }
  [data-theme="dark"] #leadRows .when--soon::before { color: var(--green-soft-ink); border-right-color: rgba(159,217,128,.30); }  /* 9.36:1 */
  [data-theme="dark"] #leadRows .when--tbd { background: transparent; border: 1px dashed var(--border); box-shadow: none; }
  [data-theme="dark"] #leadRows .when--tbd::before { color: var(--muted); }

  /* junction: pull the count row in so it captions the list (scoped to the
     leads page so the legacy Accounts toolbar keeps 18px) */
  .content:has(#leadRows) .toolbar { margin-bottom: 14px; }

  /* the header sort is gone with the thead — surface it as the toolbar picker,
     right-aligned on its own now that the toolbar's New Lead button is gone
     (F-36 — the topbar CTA, still visible icon-only at this width, covers it). */
  .content:has(#leadRows) .sortpick { display: inline-flex; margin-left: auto; }

  /* ---- Accounts → same dense list; DMS chip pinned top-right ---- */
  .table-wrap:has(#acctRows) {
    overflow: visible;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  }
  #acctRows { display: block; }
  #acctRows tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "dealer    dms"
      "contact   contact"
      "location  action"
      "phone     action";
    align-items: center;
    column-gap: 14px; row-gap: 3px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--border);
  }
  #acctRows tr:last-child { border-bottom: 0; }
  #acctRows td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  /* keep the field label (Phone/Location/DMS) for screen readers — hidden
     visually so the card is unchanged, but AT still hears "DMS: CDK Global" */
  #acctRows td::before {
    content: attr(data-label); position: absolute;
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #acctRows td:nth-child(1) { grid-area: dealer; }
  #acctRows td:nth-child(2) { grid-area: contact; margin-top: 7px; }   /* main contact */
  #acctRows td:nth-child(3) { grid-area: phone; margin-top: 3px; }
  #acctRows td:nth-child(4) { grid-area: location; }
  #acctRows td:nth-child(5) { grid-area: dms; justify-self: end; align-self: start; }
  #acctRows td:nth-child(6) { grid-area: action; justify-self: end; align-self: center; text-align: left; }
  #acctRows td:nth-child(1) .cell-strong { font-size: var(--text-base); }
  #acctRows td:nth-child(2) .cell-strong { font-size: var(--text-sm); font-weight: 600; }
  #acctRows td:nth-child(2) .cell-sub { margin-top: 1px; }
  #acctRows td:nth-child(3), #acctRows td:nth-child(4) { font-size: var(--text-sm); color: var(--muted); }

  #acctRows tr:has(td[colspan]) { display: block; padding: 0; border-bottom: 0; }
  #acctRows td[colspan] { display: block; }
}

/* ---- Reduced motion (global) ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: -1ms !important;   /* else a delayed `both`/`backwards` fill holds the start (invisible) frame for the delay, then pops in */
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- Forced colors (Windows High Contrast) ---------------------------- */
@media (forced-colors: active) {
  .btn { border-color: ButtonText; }
  .pill.is-active, .nav__item.is-active {
    forced-color-adjust: none; outline: 2px solid Highlight; outline-offset: -2px;
  }
  .product-dot, .notif__dot,
  .menu__notif.is-unread .menu__notif-text::before { forced-color-adjust: none; }
}

/* ---- Print ------------------------------------------------------------ */
@media print {
  .sidebar, .topbar, .nav-scrim, .toolbar, .demo-banner, .skip-link,
  .btn, .icon-btn, .modal__close, .weekstrip, .drawer, .drawer-scrim { display: none !important; }
  .app, .main, .content { display: block; }
  body, .card, .table-wrap,
  table.data thead th, table.data tbody td {
    background: #fff !important; color: #000 !important; box-shadow: none !important;
  }
  .table-wrap { overflow: visible !important; }
  .sidebar, .topbar { position: static !important; }
  tr { page-break-inside: avoid; }
  * { view-transition-name: none !important; }
}

/* Note: viewport-fit=cover + env(safe-area-inset-*) intentionally omitted —
   this boxed, non-PWA dashboard confines content to the safe area (rank 101). */

/* =======================================================================
   My Leads — demo week strip, family filter chips, lead detail drawer
   (client memo §1/§2/§3).
   Each block is scoped to its own class and quotes the New Lead form's
   "Layered Navy Depth" / "Dark Premium" language: navy-tinted section
   panels, layered inset controls, hue-saturated selection. Both themes are
   styled; contrast ratios noted inline as "x.xx:1".
   ======================================================================= */

/* ---- 1 · Demo week strip (§1) ----------------------------------------- */
/* One compact row of seven day cells — counts + local times only, never who
   the demo is with. Kept under ~110px tall on desktop so the leads table is
   still above the fold. There are deliberately NO navigation controls: this
   is the current week, not a calendar. */
.weekstrip { margin: 0 0 22px; }
.weekstrip__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.weekstrip__head .eyebrow { margin-bottom: 0; }
.weekstrip__hint { font-size: var(--text-sm); color: var(--muted); }        /* 5.48:1 on --bg */
.weekstrip__note { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.weekstrip__note[hidden] { display: none; }

/* The cells share one row and stretch to fill it; when seven of them no longer
   fit (phones), the row becomes a swipeable snap rail with the same directional
   edge-fade the filter chips use (data-of is set by JS on scroll/resize). The
   padding/negative-margin pair contains the today-cell's ring, which the
   overflow would otherwise clip, without changing the row's layout height. */
.weekstrip__days {
  display: flex; gap: 8px; align-items: stretch;
  list-style: none; margin: -5px -5px 0; padding: 5px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.weekstrip__days[hidden] { display: none; }
/* Hide the rail's scrollbar per engine. Chromium must NOT see any standard
   scrollbar-width/color value — that flips it to standard mode and disables
   every ::-webkit-scrollbar rule, including the fine-pointer form below. */
.weekstrip__days::-webkit-scrollbar { display: none; }
@supports (-moz-appearance: none) {
  .weekstrip__days { scrollbar-width: none; }
}
/* Mouse users get the handle the touch rail hides: a slim tinted scrollbar
   whenever the seven days overflow — the edge fade alone says "more" without
   offering fine pointers a way to get there. The extra bottom padding (offset
   by the negative margin, so the strip's height budget is unchanged) reserves
   the lane the thumb draws in, so it never eats into the cells. Chromium uses
   the standard properties and ignores the ::-webkit-* pair; Safari does the
   reverse. */
@media (hover: hover) and (pointer: fine) {
  /* Chromium + Safari: the ::-webkit-* custom form (6px, rounded, no buttons).
     The standard scrollbar-width/color pair must NOT be set here — it switches
     Chromium to its legacy buttons-and-track bar and disables these rules. */
  .weekstrip__days::-webkit-scrollbar { display: block; height: 6px; background: transparent; }
  .weekstrip__days::-webkit-scrollbar-button { display: none; }
  /* the track insets so the thumb floats as a pill clear of the cells'
     rounded corners instead of underlining the full strip */
  .weekstrip__days::-webkit-scrollbar-track { background: transparent; margin: 0 10px; }
  .weekstrip__days::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--navy) 20%, transparent);
    border-radius: var(--radius-full);
  }
  .weekstrip__days::-webkit-scrollbar-thumb:hover  { background: color-mix(in srgb, var(--navy) 42%, transparent); }
  .weekstrip__days::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--navy) 58%, transparent); }
  [data-theme="dark"] .weekstrip__days::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 32%, transparent);
  }
  [data-theme="dark"] .weekstrip__days::-webkit-scrollbar-thumb:hover  { background: color-mix(in srgb, var(--muted) 55%, transparent); }
  [data-theme="dark"] .weekstrip__days::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--muted) 72%, transparent); }
  /* Firefox ignores ::-webkit-*; give it the standard thin form instead,
     scoped so Chromium never sees these properties */
  @supports (-moz-appearance: none) {
    .weekstrip__days {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--navy) 30%, transparent) transparent;
    }
    [data-theme="dark"] .weekstrip__days {
      scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent;
    }
  }
}
.weekstrip__days[data-of="start"]  { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
                                             mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.weekstrip__days[data-of="middle"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
                                             mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.weekstrip__days[data-of="end"]    { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
                                             mask-image: linear-gradient(90deg, transparent, #000 24px); }

/* the cell wears the form's section-panel material (inset navy tint) */
.weekstrip__day {
  flex: 1 0 128px; min-width: 128px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 11px 8px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, #f1f4fb 0%, #e8edf7 100%);
  border: 1px solid #c8d1e6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
}
/* Line-heights are held tight on purpose: seven cells, a head row and (at most)
   a two-line times list have to total well under the ~120px the strip is
   allowed before it starts pushing the table off the fold. */
.weekstrip__top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.3; }
.weekstrip__dow {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--navy);                            /* 13.1:1 on the panel */
}
.weekstrip__date { font-size: var(--text-sm); color: var(--muted); }        /* 5.21:1 on the panel */
.weekstrip__count { font-size: var(--text-ms); font-weight: 700; line-height: 1.35; color: var(--text); }
.weekstrip__count--none { font-weight: 600; color: var(--muted); }
/* the times list wraps rather than truncating mid-clock — three times rarely
   fit one line at this width — but never past two lines */
.weekstrip__times {
  font-size: var(--text-xs); font-weight: 500; line-height: 1.35; color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* today: the same green "this is your next move" grammar as the phone docket
   plaque's .when--soon, plus a named tag so the cue is never color alone */
.weekstrip__day.is-today {
  background: linear-gradient(180deg, #eef7e2, #def0cc);
  border-color: #aed389;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 0 0 3px rgba(97,166,14,.10);
}
.weekstrip__day.is-today .weekstrip__dow { color: var(--green-800); }        /* 5.7:1 on the tint */
/* sits inline after the date (no auto margin) so it only ever takes a second
   line on the narrowest phone cells, where the strip is a scrolling rail */
.weekstrip__tag {
  padding: 0 6px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em;
  color: var(--green-800); background: rgba(97,166,14,.16);                  /* 5.4:1 on the blended fill */
}
/* Dark Premium: depth from borders + an inset shadow, not a shadow stack */
[data-theme="dark"] .weekstrip__day {
  background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7));
  border-color: var(--control-border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
[data-theme="dark"] .weekstrip__dow { color: #b6c2e0; }                      /* 9.7:1 on the dark panel */
[data-theme="dark"] .weekstrip__date,
[data-theme="dark"] .weekstrip__times { color: var(--muted); }               /* 6.42:1 on the dark panel */
[data-theme="dark"] .weekstrip__day.is-today {
  background: linear-gradient(180deg, #1a2f10, #16290f);
  border-color: #3c5c22;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 14px -4px rgba(97,166,14,.35);
}
[data-theme="dark"] .weekstrip__day.is-today .weekstrip__dow { color: var(--green-soft-ink); }   /* 9.36:1 */
[data-theme="dark"] .weekstrip__tag { color: var(--green-soft-ink); background: rgba(97,166,14,.18); }

/* ---- 2 · Family filter chips (§3) ------------------------------------- */
/* The chips now filter by product FAMILY, so each dot blends its members'
   hues the way .product-dot.all always has; a one-product family stays solid.
   --phue (the chip's active saturation) takes the family's lead hue. */
.pill--fam-timeai     { --phue: var(--product-time); }
.pill--fam-warrantyai { --phue: var(--product-parts); }
.pill--fam-reporting  { --phue: var(--product-insight); }
.pill--fam-coaching   { --phue: var(--product-coach); }
.pill .product-dot.fam-timeai {
  background: conic-gradient(from 210deg, var(--product-time), var(--product-timeplus), var(--product-time));
}
.pill .product-dot.fam-warrantyai {
  background: conic-gradient(from 210deg, var(--product-parts), var(--product-warranty), var(--product-labor), var(--product-parts));
}
.pill .product-dot.fam-reporting {
  background: conic-gradient(from 210deg, var(--product-insight), var(--product-perfgroup), var(--product-insight));
}
.pill .product-dot.fam-coaching { background: var(--product-coach); }
/* "All Products" spans every product hue — restated at the same
   selector weight as the original, later in source order so it wins. */
.pill .product-dot.all {
  background: conic-gradient(from 210deg,
    var(--product-time), var(--product-timeplus), var(--product-parts), var(--product-warranty), var(--product-labor),
    var(--product-insight), var(--product-perfgroup), var(--product-coach), var(--product-time));
}
/* zero matches for the current search mutes the dot — the family selectors above
   are later in source order, so the empty state needs the extra attribute step
   to keep outranking them (same trick the original uses for .product-dot.all). */
.pill--empty:not([aria-pressed="true"]) .product-dot[class*="fam-"] {
  background: var(--muted-2); box-shadow: none;
}

/* ---- 3 · Row → drawer affordance (§2) --------------------------------- */
/* The whole lead row opens the detail sheet, so it must read as one: pointer
   cursor and a name that lifts to the brand ink under the existing hover fill.
   The keyboard path is the dealership name — a real <button> stripped of its
   chrome, so the row stays a plain data row for AT — and its focus ring is
   hoisted to the row (inset, because the row's own bottom border sits flush
   against the next one), matching the full-row highlight a click gives. */
table.data tbody tr.row-hover { cursor: pointer; }
.cell-open {
  appearance: none; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit;
  color: inherit; text-align: left; cursor: pointer;
  /* deliberately no `font:` shorthand and no font-weight — .cell-strong's 600
     has to survive, and the shorthand would reset it */
}
.cell-open:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* where :has() lands, the ring moves to the row; without it the button keeps
   its own ring above, so the keyboard path is never left unmarked */
@supports selector(tr:has(button)) {
  .cell-open:focus-visible { outline: none; }
  table.data tbody tr.row-hover:has(.cell-open:focus-visible) {
    outline: 2px solid var(--green); outline-offset: -2px;
  }
}
@media (hover: hover) and (pointer: fine) {
  table.data tbody tr.row-hover:hover .cell-strong { color: var(--green-ink); }   /* 5.10:1 on --surface-2 */
}

/* ---- 4 · Lead detail drawer (§2) -------------------------------------- */
/* A right-hand sheet on desktop, a full-width sheet at ≤720px. `hidden` is the
   single source of truth for open/closed (JS toggles nothing else): the rules
   below restate display:none for it — the author display would otherwise beat
   the UA's [hidden] rule — and the slide rides on transition-behavior:
   allow-discrete + @starting-style, so engines without that support simply
   snap. The global prefers-reduced-motion block flattens the slide everywhere. */
body.drawer-open { overflow: hidden; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,23,42,.5);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  opacity: 1;
  transition: opacity var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete;
}
.drawer-scrim[hidden] { display: none; opacity: 0; }
@starting-style { .drawer-scrim { opacity: 0; } }
[data-theme="dark"] .drawer-scrim { background: rgba(3,6,15,.66); }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 61;
  width: min(460px, 100vw); max-width: 100vw;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: var(--elev-3), 0 0 0 1px rgba(19,31,67,.07);
  transition: transform var(--dur-4) var(--ease-sheet),
              opacity var(--dur-2) var(--ease-out),
              display var(--dur-4) allow-discrete;
}
.drawer[hidden] { display: none; transform: translateX(100%); opacity: 0; }
@starting-style { .drawer { transform: translateX(100%); opacity: 0; } }
.drawer:focus-visible { outline: none; }   /* the dialog takes focus programmatically, not as a stop */
[data-theme="dark"] .drawer {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: 0 0 80px -12px rgba(0,0,0,.75);
}

/* head — the leadform's navy band, compacted to a title bar */
/* overflow stays visible: the lead-status listbox (.statuspick) opens out of
   this head, and the only thing that ever needed clipping here was the inset
   ::after hairline, which cannot overflow. */
.drawer__head {
  position: relative; flex: none; overflow: visible;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 14px 16px 20px; color: #fff; background: var(--navy);
}
.drawer__head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24) 50%, rgba(255,255,255,0));
}
[data-theme="dark"] .drawer__head { border-bottom: 1px solid var(--border); }
.drawer__head-main { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
.drawer__title { font-size: var(--text-md); font-weight: 700; color: #fff; }   /* 14.6:1 on navy */
.drawer__head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.drawer__product-summary { color: #cbd3e6; font-size: var(--text-sm); font-weight: 600; }   /* 9.9:1 on navy */
/* The hold reason, on the navy head beside the badge it explains. Italic and
   quieter than the status itself — it is the footnote, not the state. */
.drawer__hold-note {
  color: #cbd3e6; font-size: var(--text-sm); font-style: italic;   /* 9.9:1 on navy */
  /* The server caps the reason at 300 characters, so a single ellipsised line
     hid most of what the rep wrote. Two lines, then the tooltip. */
  max-width: 46ch; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.drawer__hold-note[hidden] { display: none; }
/* commission stamp — Won leads only. It rides the navy head, which is navy in
   both themes, so one pair of colours is the whole story. */
.drawer__commission {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.22);
  font-size: var(--text-xs); font-weight: 600; color: #e7ecf9; background: rgba(255,255,255,.08);
}
.drawer__commission.is-processing { border-color: rgba(240,180,80,.44); background: rgba(240,180,80,.14); color: #f7d49b; }   /* 9.4:1 on navy */
.drawer__commission.is-paid { border-color: rgba(150,206,96,.44); background: rgba(150,206,96,.16); color: #cbe9a7; }         /* 9.9:1 on navy */
.drawer__close {
  position: relative; z-index: 1; flex: 0 0 40px; color: rgba(255,255,255,.72);   /* 7.6:1 on navy */
}
.drawer__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.drawer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* body — scrolls independently of the page behind it */
.drawer__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 22px 22px;
}

/* One continuous reading flow: section dividers carry hierarchy without
   turning every lead fact into another card. */
.drawer__section {
  position: relative; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; background: transparent; box-shadow: none;
}
.drawer__section:last-of-type { border-bottom: 0; }
.drawer__section--details { padding-block: 12px; }
.drawer__disclosure > summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  list-style: none; color: var(--text); cursor: pointer;
}
.drawer__disclosure > summary::-webkit-details-marker { display: none; }
.drawer__disclosure-copy { min-width: 0; display: grid; gap: 3px; }
.drawer__disclosure-copy strong { color: var(--navy); font-size: var(--text-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.drawer__disclosure-copy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); }
.drawer__disclosure-chev { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--muted); transition: transform var(--dur-1), background var(--dur-1); }
.drawer__disclosure-chev svg { width: 17px; height: 17px; }
.drawer__disclosure[open] .drawer__disclosure-chev { transform: rotate(180deg); }
.drawer__disclosure > summary:hover .drawer__disclosure-chev { background: var(--chrome-hover); color: var(--text); }
.drawer__disclosure > summary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; border-radius: 6px; }
.drawer__disclosure-body { padding: 12px 0 8px; }
[data-theme="dark"] .drawer__disclosure-copy strong { color: #c7cfe3; }
.drawer__head3 {
  margin: 0 0 10px; font-size: var(--text-sm); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--navy);      /* 13.1:1 on the panel */
}
.drawer__subhead {
  margin: 16px 0 8px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);     /* 5.21:1 on the panel */
}
.drawer__hint { margin: -4px 0 12px; font-size: var(--text-sm); color: var(--muted); }
.drawer__opt { font-weight: 500; color: var(--muted); }
.drawer__empty { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.drawer__meta { margin: 0; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.drawer__link {
  color: var(--green-ink); font-size: var(--text-sm); font-weight: 600;   /* 5.39:1 light / 5.56:1 dark */
  text-decoration: underline; text-underline-offset: 2px;   /* not color-alone against the dl text */
}
.drawer__link:hover { text-decoration-thickness: 2px; }
.drawer__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

/* Reschedule — brand-outlined so the booked state's one action reads as its own
   affordance instead of a muted ghost. Text is --green-ink (5.39:1 light /
   5.56:1 dark, same pair as .drawer__link). */
.drawer .btn--resched {
  color: var(--green-ink);
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 8%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .drawer .btn--resched:hover {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 15%, transparent);
    transform: translateY(-1px);
  }
}
[data-theme="dark"] .drawer .btn--resched {
  border-color: color-mix(in srgb, var(--green) 62%, transparent);
  background: color-mix(in srgb, var(--green) 13%, transparent);
}
[data-theme="dark"] .drawer__section {
  background: transparent; border-color: var(--border); box-shadow: none;
}
[data-theme="dark"] .drawer__head3 { color: #c7cfe3; }                        /* 10.4:1 on the dark panel */
[data-theme="dark"] .drawer__subhead,
[data-theme="dark"] .drawer__hint,
[data-theme="dark"] .drawer__empty,
[data-theme="dark"] .drawer__meta { color: var(--muted); }                     /* 6.42:1 on the dark panel */

/* demo row */
.drawer__demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.drawer__demo-when { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.drawer__demo-when b { font-size: var(--text-ms); font-weight: 700; color: var(--text); }
.drawer__demo-when span { font-size: var(--text-sm); color: var(--muted); }
.drawer__demo-when.is-tbd span { font-weight: 600; }

/* threads: updates, notes to Chameleon, activities, contacts */
.drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.drawer__update, .drawer__note, .drawer__act, .drawer__contact {
  padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none;
}
.drawer__list > :last-child { border-bottom: 0; padding-bottom: 0; }
.drawer__list > :first-child { padding-top: 0; }
.drawer__update-text, .drawer__note-text { margin: 4px 0 0; font-size: var(--text-ms); color: var(--text); }
.drawer__note-text { margin: 0 0 4px; }
.drawer__act { display: flex; align-items: flex-start; gap: 10px; }
.drawer__act-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.drawer__act-note { font-size: var(--text-ms); color: var(--text); }
.drawer__act-type {
  flex: none; padding: 3px 9px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
  color: var(--navy); background: rgba(25,40,87,.09);                          /* 11.8:1 on the tinted chip */
}
.drawer__contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 12px; }
.drawer__contact-name { font-size: var(--text-ms); font-weight: 600; color: var(--text); }
.drawer__contacts { margin-top: 0; }
.drawer__contact-actions { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 5px; }
[data-theme="dark"] .drawer__update,
[data-theme="dark"] .drawer__note,
[data-theme="dark"] .drawer__act,
[data-theme="dark"] .drawer__contact {
  border-color: var(--border); background: transparent; box-shadow: none;
}
[data-theme="dark"] .drawer__act-type { color: #c7cfe3; background: rgba(255,255,255,.08); }   /* 9.8:1 on the chip */

/* lead-details grid */
.drawer__dl {
  margin: 0; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 6px 14px; font-size: var(--text-sm);
}
.drawer__dt { color: var(--muted); }                                           /* 5.21:1 on the panel */
.drawer__dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* composer fields — white inset controls that pop off the tinted panel,
   exactly as the New Lead form's inputs do */
.drawer__field { margin-top: 12px; }
.drawer .field label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.drawer .field textarea {
  padding: 11px 13px; border-radius: 9px; min-height: 78px;
  background-color: #fff; border: 1px solid #e3e8f2; color: var(--text);
  box-shadow: 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.drawer .field textarea:hover { border-color: #cfd7e8; }
.drawer .field textarea:focus {
  border-color: var(--green-700); background-color: #fff;
  box-shadow: 0 0 0 3px rgba(69,119,8,.18), 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
[data-theme="dark"] .drawer .field label { color: var(--muted); }
[data-theme="dark"] .drawer .field textarea {
  background-color: var(--field); border-color: var(--control-border); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .drawer .field textarea:hover { border-color: var(--control-border-hover); }
[data-theme="dark"] .drawer .field textarea:focus {
  border-color: var(--green-bright); background-color: var(--field-focus);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(97,166,14,.24), 0 0 24px -4px rgba(97,166,14,.5);
}
/* composer placeholders prompt what to write → meet 4.5:1 on the white inset
   fill; the base --muted-2 is only 2.60:1 there. The dark pair is required:
   this selector (0,2,1) outranks [data-theme="dark"] textarea::placeholder. */
.drawer .field textarea::placeholder { color: #6b7488; opacity: 1; }               /* 4.69:1 on #fff */
[data-theme="dark"] .drawer .field textarea::placeholder { color: var(--muted); }  /* 6.19:1 on var(--field) */

/* activity type — a real radio group in the shared .segpill component (defined
   once beside the New Lead form's XTime pair); only the fieldset chrome is
   drawer-specific */
.drawer__seg { display: block; border: 0; margin: 14px 0 0; padding: 0; min-inline-size: 0; }
.drawer__seg > legend {
  float: none; padding: 0; margin: 0 0 8px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
[data-theme="dark"] .drawer__seg > legend { color: var(--muted); }

/* composer actions — the form CTA's material, at button-sm scale */
.drawer__actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.drawer__actions .btn--primary {
  min-height: 40px; border-radius: 9px; font-weight: 700;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%);
  border: 1px solid var(--green-800);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 6px rgba(58,102,7,.30), 0 8px 18px -8px rgba(58,102,7,.5);
}
.drawer__actions .btn--primary[aria-busy="true"] { opacity: 1; filter: saturate(.85) brightness(.96); cursor: progress; }
[data-theme="dark"] .drawer__actions .btn--primary {
  color: #0c1206;                                                              /* 6.4:1 on #61a60e, 9.3:1 on #7ec81a */
  background: linear-gradient(180deg, #7ec81a, var(--green));
  border-color: rgba(126,200,26,.6);
  box-shadow: 0 10px 24px -8px rgba(97,166,14,.55), inset 0 1px 0 rgba(255,255,255,.4);
}

/* A single docked composer keeps writing available without letting two forms
   outrank the record. It expands in place, shrinking the scroll body above. */
.drawer__composer {
  flex: none; padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 -10px 26px -24px rgba(14,23,48,.55);
}
.drawer__composer-bar { display: flex; align-items: center; gap: 8px; }
.drawer__compose-trigger {
  flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 9px;
  padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font: 500 var(--text-sm)/1.2 var(--font); text-align: left; cursor: text;
}
.drawer__compose-plus { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--green-700); }
.drawer__compose-plus svg { width: 17px; height: 17px; }
.drawer__compose-secondary {
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--green-ink); font: 700 var(--text-sm)/1 var(--font); cursor: pointer; white-space: nowrap;
}
.drawer__compose-trigger:hover, .drawer__compose-secondary:hover { background: var(--chrome-hover); }
.drawer__compose-trigger:focus-visible, .drawer__compose-secondary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.drawer__composer-panel { padding: 2px; }
.drawer__composer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.drawer__composer-modes { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.drawer__composer-modes button {
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font: 650 var(--text-xs)/1 var(--font); cursor: pointer;
}
.drawer__composer-modes button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(14,23,48,.10); }
.drawer__composer-modes button:focus-visible, .drawer__composer-close:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }
.drawer__composer-close { width: 40px; height: 40px; color: var(--muted); }
.drawer__composer-hint { margin: 10px 0 0; color: var(--muted); font-size: var(--text-xs); }
.drawer__composer-panel .drawer__field { margin-top: 10px; }
.drawer__composer-panel .field textarea { min-height: 68px; resize: vertical; }
.drawer__composer-panel .drawer__seg { margin-top: 10px; }
.drawer__composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.drawer__composer-actions .btn { min-height: 40px; }
[data-theme="dark"] .drawer__composer { background: color-mix(in srgb, var(--surface) 96%, transparent); }
[data-theme="dark"] .drawer__compose-trigger { background: var(--field); border-color: var(--control-border); }
[data-theme="dark"] .drawer__composer-modes { background: var(--field); }
[data-theme="dark"] .drawer__composer-modes button[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }

/* attached documents reuse the shared .doclist/.docrow component verbatim —
   the drawer's list is read-only (mock: metadata only, nothing to download),
   so it needs none of the picker's remove-button overrides. */

/* footer — who filed the lead and when */
.drawer__foot {
  margin: 4px 0 0; padding-top: 14px; border-top: 1px solid #d8dfee;
  font-size: var(--text-sm); color: var(--muted);                              /* 5.48:1 on the sheet */
}
[data-theme="dark"] .drawer__foot { border-top-color: var(--border); color: var(--muted); }

/* phone: the sheet goes full-width (same right-edge slide as desktop) */
@media (max-width: 720px) {
  .drawer { width: 100%; }
  .drawer__head { padding: 14px 10px 14px 16px; }
  .drawer__body { padding: 0 16px 18px; }
  .drawer__section { padding: 18px 0; }
  .drawer__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .drawer__dt { margin-top: 8px; }
  .drawer__actions .btn { width: 100%; }
  .drawer__contact { grid-template-columns: 1fr; }
  .drawer__contact-actions { grid-column: 1; grid-row: auto; display: flex; justify-items: start; flex-wrap: wrap; gap: 6px 14px; }
  .drawer__composer { padding-inline: 10px; }
}

/* =======================================================================
   Trust layer — freshness on the leads table, the zero-leads invitation
   and the submission receipt (audit F-19 / F-17 / F-18).
   All three quote the New Lead form's "Layered Navy Depth" / "Dark Premium"
   language — navy hero band, tinted inset panels, layered controls — and are
   scoped to their own class. Both themes; ratios noted inline as "x.xx:1".
   ======================================================================= */

/* ---- Freshness (F-19) -------------------------------------------------- */
/* "Updated 2d ago" is the single freshness signal. */
.subm { display: flex; flex-direction: column; gap: 2px; }
.subm__date { color: var(--muted); }                       /* 5.67:1 on --surface-2 */
.subm__fresh {
  font-size: var(--text-xs); font-weight: 500; color: var(--muted);   /* 5.9:1 light / 6.4:1 dark */
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The same update stamp in the drawer head, which is navy in both themes. */
.drawer__fresh {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.20);
  font-size: var(--text-xs); font-weight: 600; color: #cbd3e6;        /* 9.9:1 on navy */
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 640px) {
  /* Phone cards keep status aligned to the right. */
  #leadRows td:nth-child(3) { text-align: right; }
  #leadRows .subm { align-items: flex-end; }
  #leadRows .subm__fresh { font-size: var(--text-xs); font-weight: 500; }
  #leadRows .demo-book { min-height: 44px; }

  /* On the compact card, company is enough ownership context. Updated age
     already communicates inactivity, so avoid repeating it as a second pill. */
  #leadRows .cell-owner__sep,
  #leadRows .cell-owner__rep { display: none; }

  /* Give the two quiet metadata items one shared footer instead of making
     either of them another pill. Separate grid areas remove the old overlap
     and its hard-coded clearance, keeping the card balanced at every width. */
  #leadRows tr {
    grid-template-areas:
      "dealer   status"
      "products products"
      "demo     updated";
  }
  #leadRows td:nth-child(4),
  #leadRows td:nth-child(5) {
    margin-top: 12px; padding-top: 11px;
  }
  #leadRows td:nth-child(4) {
    grid-area: demo; margin-right: 0;
    align-self: end;
  }
  #leadRows td:nth-child(5) {
    grid-area: updated;
    align-self: end;
  }

  /* An empty demo slot is information, not a control. */
  #leadRows .when--tbd {
    min-height: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  #leadRows .when--tbd::before {
    padding-right: 7px; border-right: 0;
  }

  /* Two-level timestamp: quiet eyebrow, then one compact readable line. */
  #leadRows td:nth-child(5)::before {
    margin-bottom: 4px; font-size: 10px; color: var(--muted-2);
  }
  #leadRows .subm {
    flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 5px;
  }
  #leadRows .subm__date {
    color: var(--text); font-size: var(--text-sm); font-weight: 600;
  }
  #leadRows .subm__fresh {
    color: var(--muted); font-size: var(--text-xs); font-weight: 400;
  }
  #leadRows .subm__fresh::before { content: "·"; margin-right: 5px; color: var(--muted-2); }
}
.drawer__product-groups { display: grid; gap: 16px; }
.drawer-product__group h4 { margin: 0 0 8px; color: var(--muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.drawer-product__group > div { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.drawer-product__group .product-tag { color: var(--text); font-size: var(--text-sm); }

/* ---- First run — the zero-leads invitation (F-17) ---------------------- */
/* Shown instead of the KPI row, week strip, toolbar and table. One panel, one
   thing to do; the reassurance is the three steps, so a rep filing her first
   lead knows what happens to it before she starts typing. */
.toolbar[hidden] { display: none; }   /* .toolbar's own display:flex outranks the UA's [hidden] rule */
.firstrun {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  max-width: 720px; margin: 0 auto 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
  box-shadow:
    0 0 0 1px rgba(19,31,67,.07),
    0 1px 2px rgba(14,23,48,.06),
    0 10px 22px -8px rgba(14,23,48,.16),
    0 34px 60px -24px rgba(14,23,48,.26);
  animation: cham-rise var(--dur-4) var(--ease-out) both;
}
.firstrun__band {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(22px,4.5vw,32px) clamp(20px,4.5vw,32px) clamp(24px,4.5vw,30px);
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.20) 0%, rgba(97,166,14,0) 44%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.24) 0%, rgba(120,150,220,0) 48%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 56%, var(--navy-800) 100%);
}
.firstrun__band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.24) 50%, rgba(255,255,255,0));
}
.firstrun__eyebrow {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #b8c2dd; margin-bottom: 12px;                                 /* 7.9:1 on navy */
}
.firstrun__eyebrow .pip, .receipt__eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(97,166,14,.24), 0 0 12px 1px rgba(97,166,14,.55);
}
.firstrun__title {
  position: relative; z-index: 1; color: #fff;                         /* 14.6:1 on navy */
  font-size: clamp(1.375rem, 4.2vw, 1.625rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.15;
}
.firstrun__sub {
  position: relative; z-index: 1; margin: 10px 0 0; max-width: 48ch;
  font-size: var(--text-ms); color: #cbd3e6;                           /* 9.9:1 on navy */
}
.firstrun__body { padding: clamp(18px,3.6vw,24px) clamp(16px,4vw,26px) clamp(20px,4vw,26px); }
.firstrun__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.firstrun__step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, #f1f4fb 0%, #e8edf7 100%);
  border: 1px solid #c8d1e6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
}
.firstrun__num {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: 700; color: #fff;
  background: linear-gradient(160deg, var(--navy), var(--navy-700));
  box-shadow: 0 2px 6px rgba(14,23,48,.30), 0 0 0 1px rgba(255,255,255,.45) inset;
}
.firstrun__step-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.firstrun__step-text b { font-size: var(--text-ms); font-weight: 700; color: var(--text); }
.firstrun__step-text span { font-size: var(--text-sm); color: var(--muted); }   /* 5.21:1 on the panel */
.firstrun__credit {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #d8dfee;
  font-size: var(--text-sm); color: var(--muted);
}
.firstrun__cta {
  margin-top: 16px; width: 100%; min-height: 48px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%);
  border: 1px solid var(--green-800);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 3px 8px rgba(58,102,7,.30), 0 12px 26px -10px rgba(58,102,7,.55);
}
@media (hover: hover) and (pointer: fine) {
  .firstrun__cta:hover {
    transform: translateY(-1px); filter: brightness(1.04);
    background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%);
  }
}
[data-theme="dark"] .firstrun {
  background: linear-gradient(180deg, #1b233d 0%, #161d31 46%); border: 1px solid var(--border);
  box-shadow: 0 48px 96px -28px rgba(0,0,0,.7), 0 16px 40px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .firstrun__band {
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.16), rgba(97,166,14,0) 46%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.14), rgba(120,150,220,0) 50%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .firstrun__step {
  background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7)); border-color: var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .firstrun__num {
  color: var(--green-soft); background: rgba(97,166,14,.13); border: 1px solid rgba(97,166,14,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .firstrun__credit { border-top-color: var(--border); }
[data-theme="dark"] .firstrun__cta {
  color: #0c1206;                                                      /* 9.3:1 on #7ec81a */
  background: linear-gradient(180deg, #7ec81a, var(--green));
  border-color: rgba(126,200,26,.6);
  box-shadow: 0 12px 28px -6px rgba(97,166,14,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="dark"] .firstrun__cta:hover { background: linear-gradient(180deg, #7ec81a, var(--green)); }

/* ---- Submission receipt (F-18) ----------------------------------------- */
/* The credit stamp, in the form's own material so it reads as the same object
   the rep just filled in — a certificate, not a toast. The reference plaque is
   the one thing here a rep will photograph, so it is the largest and most
   contrasted element in the body. */
.receipt {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
  box-shadow:
    0 0 0 1px rgba(97,166,14,.20),
    0 1px 2px rgba(14,23,48,.06),
    0 10px 22px -8px rgba(14,23,48,.16),
    0 34px 60px -24px rgba(14,23,48,.26);
  animation: cham-rise var(--dur-4) var(--ease-out) both;
}
.receipt__band {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(24px,4.5vw,34px) clamp(20px,4.5vw,34px) clamp(24px,4.5vw,32px);
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.26) 0%, rgba(97,166,14,0) 46%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.24) 0%, rgba(120,150,220,0) 48%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 56%, var(--navy-800) 100%);
}
.receipt__band::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, rgba(97,166,14,0), var(--green) 50%, rgba(97,166,14,0));
}
.receipt__eyebrow {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #b8c2dd; margin-bottom: 12px;                                 /* 7.9:1 on navy */
}
.receipt__title {
  position: relative; z-index: 1; color: #fff;                         /* 14.6:1 on navy */
  font-size: clamp(1.5rem, 4.6vw, 1.875rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.1;
}
/* focused programmatically once the lead is filed; the ring renders only when
   the submit came from the keyboard, which is exactly when it's wanted */
.receipt__title:focus { outline: none; }
.receipt__title:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 5px; border-radius: 4px; }
.receipt__sub {
  position: relative; z-index: 1; margin: 10px 0 0;
  font-size: var(--text-ms); font-weight: 600; color: #cbe9a7;         /* 9.9:1 on navy */
}
.receipt__body { padding: clamp(18px,3.6vw,26px) clamp(16px,4vw,28px) clamp(20px,4vw,28px); }
.receipt__refwrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, #f1f4fb 0%, #e8edf7 100%);
  border: 1px solid #c8d1e6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
}
.receipt__reflabel {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);                                                 /* 5.21:1 on the panel */
}
.receipt__ref {
  font-size: clamp(1.5rem, 6vw, 1.875rem); font-weight: 800; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--navy);              /* 13.1:1 on the panel */
}
.receipt__dl {
  margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 8px 16px; font-size: var(--text-ms);
}
.receipt__dl dt { font-size: var(--text-sm); color: var(--muted); }
.receipt__dl dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.receipt__note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #d8dfee;
  font-size: var(--text-sm); color: var(--muted);
}
/* the booking step's honest exit — the demo can still be booked from the lead
   later (the drawer's persistent link), so this is a destination, not a skip */
.bookrail__foot { flex-wrap: wrap; align-items: center; }
.bookrail__note { font-size: var(--text-sm); color: var(--muted); }
[data-theme="dark"] .receipt {
  background: linear-gradient(180deg, #1b233d 0%, #161d31 46%); border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(97,166,14,.28), 0 48px 96px -28px rgba(0,0,0,.7), 0 16px 40px -16px rgba(0,0,0,.55);
}
[data-theme="dark"] .receipt__band {
  background:
    radial-gradient(130% 150% at 90% -24%, rgba(97,166,14,.20), rgba(97,166,14,0) 46%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.14), rgba(120,150,220,0) 50%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .receipt__refwrap {
  background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7)); border-color: var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .receipt__ref { color: #dbe4f6; }                  /* 12.2:1 on the dark panel */
[data-theme="dark"] .receipt__note { border-top-color: var(--border); }

/* ---- Profile ----------------------------------------------------------- */
/* A single, continuous account sheet: section dividers carry hierarchy so
   settings remain easy to scan without turning into a card mosaic. */
.profile-wrap { max-width: 760px; margin: 0 auto; }
.profile-sheet {
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-sheet__intro {
  padding: clamp(24px, 5vw, 38px) clamp(18px, 5vw, 38px) 30px; color: #fff;
  background:
    radial-gradient(120% 150% at 92% -28%, rgba(97,166,14,.24), transparent 48%),
    linear-gradient(135deg, var(--navy), var(--navy-700));
}
.profile-sheet__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: #cbd3e6; font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.profile-sheet__eyebrow .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(97,166,14,.2); }
.profile-sheet__intro h1 { margin: 0; color: #fff; font-size: clamp(1.75rem, 5vw, 2.15rem); letter-spacing: -.03em; }
.profile-sheet__intro > p:last-child { max-width: 53ch; margin: 9px 0 0; color: #d9e0ef; font-size: var(--text-ms); }
.profile-sheet__body { padding: 0 clamp(16px, 4vw, 32px) 22px; }
.profile-identity { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0 18px; }
.profile-avatar {
  position: relative; display: grid; width: 64px; height: 64px; flex: 0 0 64px;
  place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 50%;
  background: var(--green-soft); color: var(--green-800); font-size: var(--text-lg); font-weight: 800;
}
.profile-avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: var(--surface-2); }
.profile-avatar img[hidden] { display: none; }
.profile-identity__details { min-width: 0; flex: 1 1 auto; }
.profile-identity p { margin: 0; }
.profile-identity__name { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
.profile-identity__name + p { margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profile-photo-actions .btn { min-height: 36px; padding: 7px 12px; font-size: var(--text-sm); }
.profile-photo-actions .btn[hidden] { display: none; }
.profile-photo-remove { color: var(--danger); }
.profile-picture-hint { margin-top: 7px !important; color: var(--muted); font-size: var(--text-xs); }
.profile-identity .profile-field-error { display: block; margin-top: 3px; }
.profile-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.profile-status[data-state="error"] { color: var(--danger); font-weight: 600; }
.profile-status[data-state="success"] { color: var(--green-800); font-weight: 600; }
.profile-section { padding: 24px 0; border-top: 1px solid var(--border); }
.profile-section__head { margin-bottom: 18px; }
.profile-section__head h2 { margin: 0; font-size: var(--text-base); letter-spacing: -.01em; }
.profile-section__head p { max-width: 57ch; margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
.profile-sheet .form-grid { gap: 16px; }
.profile-sheet .field input, .profile-sheet .field select { min-height: 44px; }
.profile-field-error { min-height: 1.2em; color: var(--danger); font-size: var(--text-xs); font-weight: 600; }
.profile-sheet .field input[aria-invalid="true"], .profile-sheet .field select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring); }
.profile-email-current { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.profile-verified { padding: 3px 7px; border-radius: var(--radius-full); color: var(--green-800); background: var(--green-soft); font-size: var(--text-xs); }
.profile-readonly { margin-top: 12px; color: var(--muted); font-size: var(--text-sm); }
.profile-email-field { max-width: 460px; margin-top: 16px; }
.profile-inline-actions { margin-top: 4px; }
.profile-email-confirm { display: flex; align-items: end; gap: 12px; max-width: 460px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.profile-email-confirm[hidden] { display: none; }
.profile-email-confirm .field { flex: 1 1 auto; }
.profile-email-confirm .btn { flex: 0 0 auto; margin-bottom: 1.2em; }
.profile-notifications { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; border: 0; }
.profile-notifications legend { margin-bottom: 10px; color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.profile-notifications label { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: var(--text-sm); }
.profile-notifications input { width: 16px; height: 16px; accent-color: var(--green-700); }
.profile-form-actions { display: flex; align-items: center; gap: 12px; padding: 20px 0 24px; border-top: 1px solid var(--border); }
.profile-persistence { flex: 1 1 260px; margin: 0 auto 0 0; color: var(--muted); font-size: var(--text-sm); }
.profile-details { display: grid; grid-template-columns: minmax(105px, .36fr) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.profile-details dt { color: var(--muted); font-size: var(--text-sm); }
.profile-details dd { margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.profile-security { padding-bottom: 8px; }
.profile-security__item { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); }
.profile-security__item:first-child { border-top: 0; padding-top: 0; }
.profile-noscript { padding: 14px 16px; color: #8a5a12; background: #fff6e9; font: 600 14px/1.5 system-ui,sans-serif; text-align: center; }
[data-theme="dark"] .profile-sheet { border-color: var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-card); }
[data-theme="dark"] .profile-avatar { color: var(--green-soft-ink); background: #16290f; }
[data-theme="dark"] .profile-status[data-state="success"], [data-theme="dark"] .profile-verified { color: var(--green-soft-ink); }
@media (max-width: 540px) {
  .profile-form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .profile-persistence { grid-column: 1 / -1; }
  .profile-form-actions .btn { width: 100%; }
  .profile-email-confirm { display: grid; max-width: none; }
  .profile-email-confirm .btn { margin-bottom: 0; }
}
@media (max-width: 360px) {
  .profile-sheet { border-right: 0; border-left: 0; border-radius: 0; }
  .profile-sheet__body { padding-right: 14px; padding-left: 14px; }
  .profile-details { grid-template-columns: 1fr; gap: 2px; }
  .profile-details dd { margin-bottom: 10px; }
  .profile-avatar { width: 56px; height: 56px; flex-basis: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-sheet *, .profile-sheet *::before, .profile-sheet *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Help & Support --------------------------------------------------- */
.support__choices { display: grid; gap: 14px; }
.support-choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, #f1f4fb 0%, #e8edf7 100%);
  border: 1px solid #c8d1e6;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
}
.support-choice__icon {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  color: var(--green-ink); background: rgba(97,166,14,.12); border: 1px solid rgba(97,166,14,.28);
}
.support-choice__icon svg { width: 21px; height: 21px; }
.support-choice h2 { margin: 0; font-size: var(--text-base); color: var(--text); }
.support-choice p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted); }
.support-choice .btn { white-space: nowrap; }
.support__note { margin-top: 2px; }
[data-theme="dark"] .support-choice {
  background: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7));
  border-color: var(--control-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .support-choice__icon { color: var(--green-soft); }

@media (max-width: 640px) {
  .leadform .dms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .receipt__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .receipt__dl dt { margin-top: 10px; }
  .bookrail__foot .btn { width: 100%; justify-content: center; }
  .support-choice { grid-template-columns: auto minmax(0, 1fr); }
  .support-choice .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* print: the receipt IS the record — flatten the navy hero to ink and drop the
   scheduler, which is not part of it */
@media print {
  .receipt { box-shadow: none !important; border: 1px solid #999 !important; }
  .receipt__band { background: #fff !important; color: #000 !important; border-bottom: 1px solid #999 !important; }
  .receipt__band::after, .receipt__eyebrow .pip { display: none !important; }
  .receipt__eyebrow, .receipt__sub, .receipt__title, .receipt__ref { color: #000 !important; }
  .receipt__refwrap { background: #fff !important; box-shadow: none !important; border-color: #999 !important; }
  #bookRail { display: none !important; }
}

/* =======================================================================
   2026 interaction pass — calm intake surface + first-class select menus.
   Native selects remain the form source of truth; select.js supplies the
   visible listbox so open menus are as deliberate as their closed controls.
   ======================================================================= */

/* ---- Select / listbox ------------------------------------------------- */
.pselect { position: relative; min-width: 0; width: 100%; }
.pselect__native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important;
}
.pselect__trigger {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); cursor: pointer;
  font: 500 var(--text-ms)/1.3 var(--font); text-align: left;
  box-shadow: 0 1px 2px rgba(19,31,67,.04);
  transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1);
}
.pselect__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pselect.is-placeholder .pselect__value { color: var(--muted); font-weight: 400; }
.pselect__chev { flex: 0 0 auto; color: var(--muted); transition: rotate var(--dur-2) var(--ease-out), color var(--dur-1); }
.pselect__chev svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pselect.is-open .pselect__chev { rotate: 180deg; color: var(--green-700); }
.pselect__trigger:hover { border-color: color-mix(in srgb, var(--muted-2) 78%, var(--border)); background: var(--surface-2); }
.pselect__trigger:focus-visible,
.pselect.is-open .pselect__trigger {
  outline: 0; border-color: var(--green-700); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(69,119,8,.15), 0 1px 2px rgba(19,31,67,.05);
}
.pselect.is-invalid .pselect__trigger {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring);
}
.pselect__popover {
  position: absolute; z-index: 80; inset: calc(100% + 7px) 0 auto;
  min-width: max(100%, 260px);
}
.pselect__popover[hidden] { display: none; }
.pselect__backdrop, .pselect__sheethead { display: none; }
.pselect__panel {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--muted-2)); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 48px -18px rgba(14,23,48,.34), 0 2px 8px rgba(14,23,48,.08);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transform-origin: top center;
  animation: pselect-in var(--dur-2) var(--ease-out) both;
}
.pselect__search {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  margin: 7px 7px 3px; padding: 0 10px; min-height: 40px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted);
}
.pselect__search:focus-within { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(69,119,8,.13); background: var(--surface); }
.pselect__search svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.pselect__search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 var(--text-sm)/1.2 var(--font); }
.pselect__search input::placeholder { color: var(--muted); }
.pselect__list {
  max-height: 300px; overflow: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; outline: 0;
}
.pselect__option {
  min-height: 40px; display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px; color: var(--text); cursor: pointer;
  font-size: var(--text-sm); font-weight: 500; line-height: 1.3;
}
.pselect__option.is-active { background: var(--chrome-hover); }
.pselect__option.is-selected { font-weight: 650; }
.pselect__option[aria-disabled="true"] { color: var(--muted-2); cursor: not-allowed; }
.pselect__option-copy { min-width: 0; display: grid; gap: 2px; }
.pselect__option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pselect__option-meta { color: var(--muted); font-size: var(--text-xs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pselect__option-mark {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border-radius: 8px; background: color-mix(in srgb, var(--navy) 8%, var(--surface-2)); color: var(--navy);
  font: 750 9px/1 var(--font); letter-spacing: .03em;
}
.pselect__empty { margin: 0; padding: 18px 14px 20px; color: var(--muted); text-align: center; font-size: var(--text-sm); }
.pselect__check { width: 18px; height: 18px; margin-left: auto; display: grid; place-items: center; color: var(--green-700); opacity: 0; }
.pselect__check svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pselect__option.is-selected .pselect__check { opacity: 1; }
@keyframes pselect-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
[data-theme="dark"] .pselect__trigger { background: var(--field); border-color: var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
[data-theme="dark"] .pselect__trigger:hover { background: var(--field-focus); border-color: #53617f; }
[data-theme="dark"] .pselect__trigger:focus-visible,
[data-theme="dark"] .pselect.is-open .pselect__trigger {
  background: var(--field-focus); border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(97,166,14,.22);
}
[data-theme="dark"] .pselect__panel {
  background: rgba(22,29,49,.96); border-color: #465473;
  box-shadow: 0 22px 56px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .pselect__option.is-active { background: #263251; }
[data-theme="dark"] .pselect__check { color: #9ad653; }
[data-theme="dark"] .pselect__option-mark { background: #263251; color: #cbd5ec; }
[data-theme="dark"] .pselect__search { background: rgba(0,0,0,.18); border-color: var(--border); }
[data-theme="dark"] .pselect__search:focus-within { background: var(--field-focus); border-color: var(--green-bright); }

/* Admin scope controls are roomy enough for company names, while their menus
   carry counts and secondary identity text for fast scanning at scale. */
.scope-field .pselect { width: 260px; }
.scope-field .pselect__trigger { min-height: 44px; background: var(--surface-2); font-size: var(--text-sm); font-weight: 650; }
.scope-field .pselect__popover { left: auto; right: 0; width: min(360px, calc(100vw - 32px)); }
.scope-field:first-child .pselect__popover { left: 0; right: auto; }
[data-theme="dark"] .scope-field .pselect__trigger { background: var(--surface-2); }

/* The phone sort control uses the same menu instead of an invisible native
   select laid over decorative text. */
.sortpick:has(.pselect) { padding-right: 5px; }
.sortpick:has(.pselect) .sortpick__label,
.sortpick:has(.pselect) > .sortpick__chev { display: none; }
.sortpick .pselect { width: auto; }
.sortpick .pselect__trigger { min-height: 32px; padding: 0 8px; border: 0; background: transparent; box-shadow: none; font-size: var(--text-sm); font-weight: 650; }
.sortpick .pselect__popover { left: auto; right: 0; width: min(250px, calc(100vw - 32px)); }
[data-theme="dark"] .sortpick .pselect__trigger { background: transparent; }

/* ---- New Lead: remove the nested-gradient/card stack ----------------- */
.leadwrap { max-width: 980px; }
.content:has(.leadwrap),
[data-theme="dark"] .content:has(.leadwrap) { background: var(--bg); }
.leadform,
[data-theme="dark"] .leadform {
  overflow: visible; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); box-shadow: 0 18px 52px -36px rgba(14,23,48,.38);
}
.leadform__band,
[data-theme="dark"] .leadform__band {
  padding: clamp(26px,4vw,38px) clamp(22px,4vw,40px) 26px;
  background: transparent; color: var(--text); border-bottom: 1px solid var(--border);
}
.leadform__band::before,
.leadform__band::after { display: none; }
.leadform__eyebrow { margin-bottom: 10px; color: var(--muted); letter-spacing: .12em; }
.leadform__eyebrow .pip { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(97,166,14,.12); }
.leadform__band h1,
[data-theme="dark"] .leadform__band h1 { color: var(--text); font-size: clamp(1.75rem,4vw,2.25rem); letter-spacing: -.035em; }
.leadform__band h1 .accent { background: none; color: var(--green-700); -webkit-text-fill-color: currentColor; }
[data-theme="dark"] .leadform__band h1 .accent { color: #91cf49; }
.leadform__sub { margin-top: 8px; color: var(--muted); }
.leadform__stroke { width: 36px; height: 2px; margin-top: 18px; background: var(--green-700); box-shadow: none; }
.leadform__body { padding: 0 clamp(22px,4vw,40px) clamp(28px,4vw,40px); }
.leadform .fsection,
[data-theme="dark"] .leadform .fsection {
  margin: 0; padding: 30px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; box-shadow: none;
}
.leadform .fsection + .fsection { margin-top: 0; padding-top: 30px; border-top: 0; }
.leadform .fsection__head { margin-bottom: 20px; }
.leadform .fsection__num,
[data-theme="dark"] .leadform .fsection__num {
  width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--green-700) 25%, var(--border)); border-radius: 50%;
  background: color-mix(in srgb, var(--green) 9%, var(--surface)); color: var(--green-800); box-shadow: none;
}
[data-theme="dark"] .leadform .fsection__num { color: #a8dc6c; background: rgba(97,166,14,.10); }
.leadform .fsection__title,
[data-theme="dark"] .leadform .fsection__title { color: var(--text); font-size: var(--text-base); letter-spacing: -.01em; text-transform: none; }
.leadform .fsection__opt { font-size: var(--text-sm); color: var(--muted); }
.leadform .field input,
.leadform .field textarea,
[data-theme="dark"] .leadform .field input,
[data-theme="dark"] .leadform .field textarea {
  min-height: 46px; border-color: var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(19,31,67,.035);
}
[data-theme="dark"] .leadform .field input,
[data-theme="dark"] .leadform .field textarea { background: var(--field); }
.leadform .field input:focus,
.leadform .field textarea:focus,
[data-theme="dark"] .leadform .field input:focus,
[data-theme="dark"] .leadform .field textarea:focus {
  border-color: var(--green-700); background: var(--surface); box-shadow: 0 0 0 3px rgba(69,119,8,.15);
}
[data-theme="dark"] .leadform .field input:focus,
[data-theme="dark"] .leadform .field textarea:focus { background: var(--field-focus); border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(97,166,14,.22); }
.leadform .field--primary .combo > input { border-color: var(--border); }
.leadform .contact-card,
[data-theme="dark"] .leadform .contact-card {
  padding: 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); box-shadow: none;
}
.leadform .contact-card__head b,
[data-theme="dark"] .leadform .contact-card__head b { color: var(--text); }
.leadform .prod-card,
[data-theme="dark"] .leadform .prod-card {
  min-height: 84px; padding: 16px 48px 15px 16px; border-color: var(--border); border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 5px 14px -10px rgba(19,31,67,.38);
  transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms, background 170ms, box-shadow 170ms;
}
.leadform .prod-card__top {
  position: absolute; top: 14px; right: 14px; width: 24px; height: 24px;
}
.leadform .prod-card__dot { display: none; }
.leadform .prod-card__check {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--navy) 24%, var(--border));
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: #fff; box-shadow: none;
  transition: background 170ms, border-color 170ms, transform 170ms cubic-bezier(.2,.8,.2,1), box-shadow 170ms;
}
.leadform .prod-card__check::before {
  content: "+"; color: var(--muted); font-size: 17px; font-weight: 500; line-height: 1;
  transition: opacity 120ms, transform 170ms cubic-bezier(.2,.8,.2,1);
}
.leadform .prod-card__check svg {
  position: absolute; width: 14px; height: 14px; opacity: 0; transform: scale(.7) rotate(-8deg);
  transition: opacity 120ms, transform 170ms cubic-bezier(.2,.8,.2,1);
}
.leadform .prod-card__name { font-size: 14px; font-weight: 650; }
.leadform .prod-card__meta { font-size: 12px; font-weight: 500; }
.leadform .prod-card[aria-pressed="true"],
[data-theme="dark"] .leadform .prod-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--green-700) 62%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--green-700) 7%, var(--surface)), color-mix(in srgb, var(--green-700) 9%, var(--surface-2)));
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 9px 20px -15px rgba(69,119,8,.58);
}
.leadform .prod-card[aria-pressed="true"] .prod-card__check {
  border-color: var(--green-700); background: var(--green-700);
  box-shadow: 0 3px 8px -4px rgba(69,119,8,.75); transform: scale(1.03);
}
.leadform .prod-card[aria-pressed="true"] .prod-card__check::before { opacity: 0; transform: rotate(45deg) scale(.7); }
.leadform .prod-card[aria-pressed="true"] .prod-card__check svg { opacity: 1; transform: scale(1) rotate(0); }
.leadform .prod-card[aria-pressed="true"] .prod-card__meta,
[data-theme="dark"] .leadform .prod-card[aria-pressed="true"] .prod-card__meta { color: var(--muted); font-weight: 500; }
[data-theme="dark"] .leadform .prod-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, #25304b), var(--surface));
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 8px 18px -13px #000;
}
[data-theme="dark"] .leadform .prod-card__check { background: rgba(8,14,27,.34); border-color: #52617f; }
@media (hover: hover) and (pointer: fine) {
  .leadform .prod-card:hover {
    transform: translateY(-1px); border-color: color-mix(in srgb, var(--green-700) 32%, var(--border));
    box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 10px 22px -15px rgba(19,31,67,.52);
  }
  .leadform .prod-card:hover .prod-card__check { border-color: var(--green-700); }
  .leadform .prod-card:hover .prod-card__check::before { color: var(--green-700); }
}
.leadform .prod-card:active { transform: scale(.992); }
.leadform .prod-card:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(97,166,14,.16); }
@media (prefers-reduced-motion: reduce) {
  .leadform .prod-card, .leadform .prod-card__check, .leadform .prod-card__check::before, .leadform .prod-card__check svg { transition: none; }
}
@media (forced-colors: active) {
  .leadform .prod-card[aria-pressed="true"] { outline: 2px solid Highlight; }
  .leadform .prod-card__check { forced-color-adjust: none; }
}
.leadform .prodfam__head::after,
[data-theme="dark"] .leadform .prodfam__head::after { background: var(--border); }
.leadform .warrfields__panel,
[data-theme="dark"] .leadform .warrfields__panel {
  padding: 18px; border-color: var(--border); background: var(--surface-2); box-shadow: none;
}
.leadform .addcontact,
.leadform .addfile,
[data-theme="dark"] .leadform .addcontact,
[data-theme="dark"] .leadform .addfile { border-style: solid; border-color: var(--border); color: var(--text); background: var(--surface); }
.leadform .form-actions { margin-top: 0; padding-top: 26px; border-top: 0; }
.leadform .form-actions .btn--primary,
[data-theme="dark"] .leadform .form-actions .btn--primary {
  min-height: 46px; border-color: var(--green-800); background: var(--green-700); color: #fff;
  box-shadow: 0 8px 18px -12px rgba(58,102,7,.65); filter: none;
}
.leadform .form-actions .btn--primary:hover,
[data-theme="dark"] .leadform .form-actions .btn--primary:hover { background: var(--green-800); filter: none; }

@media (max-width: 640px) {
  body.select-open { overflow: hidden; }
  body.is-admin .page-head { margin-bottom: 12px; }
  body.is-admin .page-head p { display: none; }
  body.is-admin #pipelineEyebrow { display: none; }
  body.is-admin .stat-grid { margin-bottom: 12px; }
  .admin-scope { align-items: stretch; gap: 0; margin-bottom: 14px; padding: 12px 0; }
  .admin-scope__summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
    column-gap: 12px; row-gap: 3px;
  }
  .admin-scope__summary .eyebrow { grid-column: 1; grid-row: 1; }
  .admin-scope__summary h2 { grid-column: 1; grid-row: 2; }
  .admin-scope__summary p { grid-column: 1 / -1; grid-row: 3; }
  .admin-scope__mobile-toggle {
    display: inline-flex; grid-column: 2; grid-row: 1 / span 2; align-self: start; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface-2); color: var(--text); font: 650 var(--text-sm)/1 var(--font); cursor: pointer;
  }
  .admin-scope__mobile-toggle:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
  .admin-scope__mobile-toggle[hidden] { display: none; }
  .admin-scope:not(.is-editing) .admin-scope__controls { display: none; }
  .admin-scope.is-editing .admin-scope__controls { display: grid; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
  .content:has(#leadRows) .toolbar {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 8px 10px; margin-bottom: 10px;
  }
  .content:has(#leadRows) .toolbar .search {
    grid-column: 1 / -1; grid-row: 1; min-width: 0; max-width: none; width: 100%; flex-basis: auto;
  }
  .toolbar .product-filter {
    display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; overflow: hidden; flex: none;
  }
  .toolbar .product-filter .pills {
    position: static; width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    /* Keep the rail clipped horizontally, but give active/hover shadows their
       own vertical breathing room. Without this, the rail's overflow clip
       shears the glow under the selected chip. The negative margin preserves
       the toolbar's layout height. */
    margin: -14px -1px; padding: 14px 1px; min-height: 68px; gap: 8px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 1px; scrollbar-width: none;
  }
  .toolbar .product-filter .pills::-webkit-scrollbar { display: none; }
  .toolbar .product-filter .pill { min-height: 40px; scroll-snap-align: start; }
  .content:has(#leadRows) .result-count { grid-column: 1; grid-row: 3; }
  .content:has(#leadRows) .sortpick { grid-column: 2; grid-row: 3; justify-self: end; margin-left: 0; }
  .leadform, [data-theme="dark"] .leadform { border-radius: 14px; }
  .leadform__band, [data-theme="dark"] .leadform__band { padding: 24px 20px 22px; }
  .leadform__body { padding-inline: 20px; }
  .leadform .fsection, .leadform .fsection + .fsection { padding-block: 24px; }
  .pselect__popover { position: fixed; z-index: 120; inset: 0; min-width: 0; display: grid; align-items: end; }
  .pselect__popover[hidden] { display: none; }
  .pselect__backdrop { display: block; position: absolute; inset: 0; background: rgba(7,12,24,.52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .pselect__panel {
    position: relative; width: calc(100% - 20px); max-height: min(72dvh, 560px); margin: 0 10px 10px;
    border-radius: 18px; transform-origin: bottom center; animation-name: pselect-sheet-in;
  }
  .pselect__sheethead { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 8px 10px 6px 16px; border-bottom: 1px solid var(--border); }
  .pselect__sheettitle { color: var(--text); font-size: var(--text-base); font-weight: 700; letter-spacing: -.01em; }
  .pselect__close { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
  .pselect__close:hover { background: var(--chrome-hover); color: var(--text); }
  .pselect__close:focus-visible { outline: 2px solid var(--green-700); outline-offset: 1px; }
  .pselect__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .pselect__search { margin: 10px 12px 4px; min-height: 44px; }
  .pselect__list { max-height: calc(min(72dvh, 560px) - 64px); padding: 7px 8px 12px; }
  .pselect__search + .pselect__list { max-height: calc(min(72dvh, 560px) - 118px); }
  .pselect__option { min-height: 48px; padding: 9px 10px; }
  .sortpick .pselect__trigger { min-height: 44px; }
  .search__clear { width: 44px; height: 44px; margin: -10px -12px -10px 0; }
  @keyframes pselect-sheet-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }
}

@media (prefers-reduced-motion: reduce) {
  .pselect__panel { animation: none; }
  .pselect__chev { transition: none; }
}

/* Narrow phones cannot safely overlap Demo and Updated in one footer area.
   Give each signal its own row so 320px remains readable at text zoom. */
@media (max-width: 390px) {
  #leadRows tr {
    grid-template-areas:
      "dealer   status"
      "products products"
      "demo     demo"
      "updated  updated";
  }
  #leadRows td:nth-child(4) { grid-area: demo; justify-self: start; margin: 12px 0 0; }
  #leadRows td:nth-child(5) {
    grid-area: updated; justify-self: start; margin-top: 8px;
    padding-top: 0; text-align: left;
  }
  #leadRows .subm { align-items: flex-start; }
}

/* ---- Lead status picker (drawer head) --------------------------------- */
/* The badge IS the trigger: same pill geometry and the same --stage-* fill as
   the read-only .badge, plus a chevron. That chevron is the entire affordance
   delta between "this is the status" and "you can change it", which is why the
   read-only badge must never grow one. */
.statuspick { position: relative; display: inline-flex; }
.statuspick .pselect { width: auto; }
.statuspick .pselect__trigger {
  min-height: 30px; padding: 4px 8px 4px 11px; gap: 4px;
  border: 0; border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600;
  background: var(--surface-2); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
/* The dot that every .badge carries, restated on the trigger so the pill reads
   as the same object whether or not it happens to be editable. */
.statuspick .pselect__value::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin-right: 7px; margin-top: -2px;
  border-radius: 50%; background: currentColor; opacity: .9;
}
.statuspick .pselect__chev { color: inherit; opacity: .7; }
.statuspick .pselect__chev svg { width: 14px; height: 14px; }
.statuspick[data-stage="follow"] .pselect__trigger { background: var(--stage-follow-bg); color: var(--stage-follow-fg); box-shadow: none; }
.statuspick[data-stage="agree"]  .pselect__trigger { background: var(--stage-agree-bg);  color: var(--stage-agree-fg);  box-shadow: none; }
.statuspick[data-stage="set"]    .pselect__trigger { background: var(--stage-set-bg);    color: var(--stage-set-fg);    box-shadow: none; }
.statuspick[data-stage="deal"]   .pselect__trigger { background: var(--stage-deal-bg);   color: var(--stage-deal-fg);   box-shadow: inset 0 0 0 1px var(--stage-deal-rim); }
/* On Hold: the pause bars replace the dot, the one glyph change in the set. */
.statuspick[data-stage="hold"] .pselect__value::before {
  width: 7px; height: 8px; border-radius: 1px; background: none; opacity: .75;
  border-left: 2px solid currentColor; border-right: 2px solid currentColor;
}
.statuspick .pselect__trigger:hover { filter: brightness(.96); }
[data-theme="dark"] .statuspick .pselect__trigger:hover { filter: brightness(1.14); }
/* The head is navy in both themes, so the ring is white — the green ring the
   rest of the app uses disappears against it. */
.statuspick .pselect__trigger:focus-visible,
.statuspick .pselect.is-open .pselect__trigger {
  outline: 2px solid #fff; outline-offset: 2px; box-shadow: none;
}
.statuspick.is-busy .pselect__trigger { opacity: .6; pointer-events: none; }
/* Left-anchored to the pill (which is far narrower than the list) and tall
   enough for all nine statuses, so the two Chameleon-owned ones are visible
   without a scroll — being visible is the entire point of listing them. */
.statuspick .pselect__popover { inset: calc(100% + 7px) auto auto 0; min-width: 264px; }
.statuspick .pselect__list { max-height: min(500px, 70vh); }
.statuspick .pselect__option-meta { white-space: normal; }
/* Won/Lost stay in the list, dimmed, with "Set by Chameleon…" as their
   descriptor. Showing them is the point: hiding them would make the pipeline
   look like it ends at In Contract instead of belonging to someone else. */
.statuspick .pselect__option[aria-disabled="true"] { opacity: .8; }
.statuspick .pselect__option[aria-disabled="true"] .pselect__option-label::after {
  content: ""; display: inline-block; vertical-align: -1px;
  width: 11px; height: 11px; margin-left: 7px; background: currentColor;
  -webkit-mask: var(--lock-mask) center/contain no-repeat;
  mask: var(--lock-mask) center/contain no-repeat;
}

/* ---- Hold reason panel ------------------------------------------------- */
/* Slides in under the head, above the body: parking a lead is the one status
   move that costs Chameleon something (a demo slot), so it is the one that
   asks a question first instead of committing optimistically. */
.statushold {
  flex: none; padding: 14px 20px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  animation: statushold-in var(--dur-2) var(--ease-out) both;
}
@keyframes statushold-in { from { opacity: 0; transform: translateY(-6px); } }
.statushold__lead { margin: 0 0 10px; font-size: var(--text-sm); font-weight: 700; color: var(--text); }
.statushold__picks { display: flex; flex-wrap: wrap; gap: 8px; }
.statushold__pick {
  min-height: 34px; padding: 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font: 600 var(--text-sm)/1 var(--font); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.statushold__pick:hover { border-color: var(--muted-2); color: var(--text); }
.statushold__pick[aria-checked="true"] {
  border-color: var(--green-700); color: var(--green-700);
  background: color-mix(in srgb, var(--green-700) 9%, var(--surface));
}
[data-theme="dark"] .statushold__pick[aria-checked="true"] { border-color: var(--green-bright); color: var(--green-soft-ink); }
.statushold__pick:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
[data-theme="dark"] .statushold__pick:focus-visible { outline-color: var(--green-bright); }
.statushold__detail { display: block; margin-top: 10px; }
.statushold__detail textarea {
  width: 100%; padding: 9px 11px; border-radius: var(--radius-m);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: 500 var(--text-sm)/1.45 var(--font); resize: vertical; transition: .15s;
}
.statushold__detail textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(97,166,14,.14); }
[data-theme="dark"] .statushold__detail textarea { background: var(--field); border-color: var(--control-border); }
[data-theme="dark"] .statushold__detail textarea:focus { background: var(--field-focus); }
.statushold__hint { margin: 8px 0 0; color: var(--muted); font-size: var(--text-xs); }
.statushold__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 640px) {
  /* Thumb-sized target on the one control that writes to the lead. pselect
     already swaps its listbox for the modal sheet below this width, so the
     panel, its close button and the option rows come mobile-ready — only the
     trigger's phone geometry is ours to set. */
  .statuspick .pselect__trigger { min-height: 44px; padding: 0 12px 0 14px; }
  /* The head wraps at this width; give the pill its own line rather than
     letting it fight the freshness stamp for the last 40px. */
  .drawer__head-meta { gap: 8px; }
  .statushold { padding: 14px 16px 16px; }
  .statushold__actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}


/* ── Deal pricing panel (drawer) ─────────────────────────────────────────────
   docs/proposal-pricing.md §7. The drawer's ONE tinted inset panel, so the
   money section reads as different in kind from the flat sections around it
   without inventing a parallel style: --stage-deal-* is the commercial-phase
   accent already used by the status badge, and the depth recipe is the
   .leadform .fsection reference (the project's stated design reference).
   data-mode: context | edit | locked. */
.pricecard {
  margin: 0; padding: 16px;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stage-deal-bg) 55%, var(--surface)) 0%,
    color-mix(in srgb, var(--stage-deal-bg) 80%, var(--surface)) 100%);
  border: 1px solid var(--stage-deal-rim);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(19,31,67,.06) inset;
}
/* Before Proposal the tint is not yet earned — the price is context, not an act. */
.pricecard[data-mode="context"] { background: var(--surface-2); border-color: var(--border); }
.pricecard[data-mode="edit"] { animation: statushold-in var(--dur-2) var(--ease-out) both; }

.pricecard__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.pricecard__rows { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pricefee { display: grid; gap: 6px; min-width: 0; align-content: start; }
.pricefee__label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }

/* The leadform field recipe, with $ and the cadence as chrome rather than as
   part of the value — so the caret never has to skip a currency symbol and a
   pasted "$1,495.00" sanitizes. Light theme has no --field/--control-border
   tokens (they exist only in the dark block), so these are the leadform's own
   literals, reused rather than minting new tokens. */
.pricefee__control {
  display: flex; align-items: center; min-height: 46px; border-radius: 9px;
  background-color: #fff; border: 1px solid #e3e8f2;
  box-shadow: 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.pricefee__control:hover { border-color: #cfd7e8; }
.pricefee__control:focus-within {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(69,119,8,.18), 0 1px 2px rgba(19,31,67,.06), 0 1px 0 rgba(255,255,255,.9) inset;
}
.pricefee__control input {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; outline: none;
  padding: 12px 4px; color: var(--text);
  font: 600 var(--text-base)/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pricefee__affix { flex: none; padding-left: 13px; color: var(--muted); font-size: var(--text-ms); font-weight: 600; }
.pricefee__unit { flex: none; padding: 0 12px 0 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.pricefee__control:focus-within .pricefee__affix,
.pricefee__control:focus-within .pricefee__unit { color: var(--text); }

.pricefee__control:has(input[aria-invalid="true"]) {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring);
}
.pricefee__err { margin: 0; font-size: var(--text-xs); color: var(--danger); }
.pricefee__err[hidden] { display: none; }

/* context / locked: the same figures, as facts rather than controls. Disabled
   inputs would imply a nearly-available action and are noise to a screen reader. */
.pricefee__fact { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.pricefee__fact b { font-size: var(--text-md); font-weight: 700; color: var(--stage-deal-fg); }
.pricefee__cad { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.pricefee__off {
  padding: 1px 6px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700;
  background: var(--stage-deal-bg); color: var(--stage-deal-fg);
  box-shadow: inset 0 0 0 1px var(--stage-deal-rim);
}

.pricecard__term { margin: 14px 0 0; }
.pricecard__cap { margin: 12px 0 0; font-size: var(--text-xs); color: var(--muted); }
.pricecard__cap b { color: var(--text); font-variant-numeric: tabular-nums; }

/* The cadence readback: the sentence that keeps a per-rooftop rate from being
   read as the whole quote. */
.pricecard__read { margin: 6px 0 0; font-size: var(--text-sm); color: var(--muted); }
.pricecard__read b { color: var(--text); font-variant-numeric: tabular-nums; }

.pricecard__offlive {
  margin: 6px 0 0; font-size: var(--text-xs); font-weight: 700; color: var(--stage-deal-fg);
}
.pricecard__offlive[hidden] { display: none; }
.pricecard__addons, .pricecard__note, .pricecard__term-fact {
  margin: 8px 0 0; font-size: var(--text-xs); color: var(--muted);
}
.pricecard__note { font-style: italic; }

/* The standard build-up, per product. Collapsed by default: the quote is the
   headline, the breakdown is the answer to "what am I paying for" when a dealer
   asks — which is a question, not the default state. */
.pricelines { margin: 10px 0 0; }
.pricelines__summary {
  cursor: pointer; list-style: none; font-size: var(--text-xs); font-weight: 600;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.pricelines__summary::-webkit-details-marker { display: none; }
.pricelines__summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .16s var(--ease-out);
}
.pricelines[open] > .pricelines__summary::before { transform: rotate(90deg); }
.pricelines__summary:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; border-radius: 4px; }
[data-theme="dark"] .pricelines__summary:focus-visible { outline-color: var(--green-bright); }
.pricelines__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.priceline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--text-xs); color: var(--muted);
}
.priceline__name { color: var(--text); }
.priceline__amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pricecard__error { margin: 10px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--danger); }
.pricecard__error[hidden] { display: none; }

.pricecard__meta { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 0; font-size: var(--text-xs); color: var(--muted); }
/* The same lock glyph .statuspick uses for Chameleon-owned statuses — reps have
   already learned it means "not yours to change here". */
.pricecard__lock {
  flex: none; align-self: center; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--lock-mask) center/contain no-repeat;
  mask: var(--lock-mask) center/contain no-repeat;
}

.pricecard__actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ── dark: the Dark Premium flip, deal-accented ───────────────────────────── */
[data-theme="dark"] .pricecard {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stage-deal-bg) 72%, transparent),
    color-mix(in srgb, var(--stage-deal-bg) 45%, transparent));
  border-color: var(--stage-deal-rim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .pricecard[data-mode="context"] { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .pricefee__label { color: var(--muted); }
[data-theme="dark"] .pricefee__control {
  background-color: var(--field); border-color: var(--control-border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .pricefee__control:hover { border-color: var(--control-border-hover); }
[data-theme="dark"] .pricefee__control:focus-within {
  border-color: var(--green-bright); background-color: var(--field-focus);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 0 0 3px rgba(97,166,14,.24), 0 0 24px -4px rgba(97,166,14,.5);
}
[data-theme="dark"] .pricefee__control:has(input[aria-invalid="true"]) {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-ring);
}

/* ── phone: one column, thumb-height wells ────────────────────────────────── */
@media (max-width: 640px) {
  .pricecard__rows { grid-template-columns: 1fr; }
  .pricefee__control { min-height: 48px; }
  .pricecard__actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}


/* ── Status gates: the hold panel's two new tenants ────────────────────────
   The panel sits between the drawer head and the scrolling body and is
   `flex: none` in that column, so it stays on screen on a phone sheet too —
   which is the whole reason the price question lives here and not in the body
   section several sections down. */
.statushold--price {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stage-deal-bg) 45%, var(--surface)) 0%,
    color-mix(in srgb, var(--stage-deal-bg) 70%, var(--surface)) 100%);
  /* A short landscape viewport must never let head + panel swallow the body. */
  max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain;
}
/* The editor inside the gate is the shipped .pricecard with its card shell
   stripped — the panel is already the surface, and the entrance animation has
   already played on the panel, so the card must not play it a second time. */
.pricecard[data-in-gate] {
  padding: 0; background: none; border: 0; box-shadow: none; animation: none;
}
.pricecard[data-in-gate] .statushold__actions {
  position: sticky; bottom: 0; margin-top: 14px; padding: 10px 0 2px;
  /* Fades to the panel's own bottom tint rather than to --surface, or the
     sticky bar reads as a pale band laid over the tinted card. */
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--stage-deal-bg) 80%, var(--surface)) 42%);
}


/* The acceptance gate stays on the quiet statushold surface: it asks a yes/no,
   it does not open a ledger. Only the quote restatement is new — and it is
   there because this move freezes those two numbers under paperwork. */
.statushold__quote { margin: 0 0 10px; font-size: var(--text-sm); color: var(--muted); }
.statushold__quote b { color: var(--stage-deal-fg); font-variant-numeric: tabular-nums; }


/* ── Signed proposal (docs/signed-proposal.md) ───────────────────────────────
   Two surfaces, one record: a slot in the acceptance gate and a row inside the
   locked pricing card. Deliberately NOT styled like .docrow — those intake
   rows are metadata-only and NOT downloadable, and two rows that look alike
   while behaving differently is the worst outcome available here. So: a full
   inset well with a document glyph and a real action, against .docrow's flat
   tag-and-name strip. */
.sigdoc {
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--stage-deal-rim);
}
/* In the gate the panel is already the surface, so the block needs its own
   edges rather than a divider borrowed from a card that isn't there. */
.sigdoc--gate {
  margin: 12px 0; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: var(--surface-2);
}
.sigdoc__head {
  margin: 0 0 8px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}

.sigdoc__file {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}
/* Staged but not sent — a dashed rim says "this isn't stored yet" without a
   second colour that would compete with the failure state below it. */
.sigdoc__file--staged { border-style: dashed; background: none; box-shadow: none; }
.sigdoc__glyph { flex: none; display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
.sigdoc__glyph svg { width: 100%; height: 100%; }
.sigdoc__body { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sigdoc__name {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sigdoc__meta { font-size: var(--text-xs); color: var(--muted); }
.sigdoc__get { flex: none; }

/* The nag: amber, because it is a task with a consequence ("Chameleon needs it
   to send the contract"), not an error the rep made. Never rendered on Won or
   Lost — absence on a closed lead is history, not a task. */
.sigdoc__nag {
  margin: 0; padding: 10px; border-radius: 10px;
  font-size: var(--text-sm); font-weight: 600;
  background: var(--stage-follow-bg); color: var(--stage-follow-fg);
}
.sigdoc__note { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.sigdoc__note--gate { margin: 12px 0; }

.sigdoc__actions { display: flex; gap: 8px; margin: 10px 0 0; }
.sigdoc__hint { margin: 8px 0 0; font-size: var(--text-xs); color: var(--muted); }
/* The shared-login caveat. Same amber as the nag on purpose: both are "true
   right now, and it changes what you should do". It is rendered from the
   server's answer, so it disappears on its own when per-partner auth lands. */
.sigdoc__caveat {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  font-size: var(--text-xs); line-height: 1.45;
  background: var(--stage-follow-bg); color: var(--stage-follow-fg);
}
.sigdoc__caveat:empty { display: none; }
.sigdoc__error { margin: 10px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--danger); }

[data-theme="dark"] .sigdoc__file {
  background: var(--surface-2); border-color: var(--control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .sigdoc__file--staged { background: none; }
[data-theme="dark"] .sigdoc--gate { background: var(--surface-2); border-color: var(--border); }

@media (max-width: 640px) {
  /* The name has to keep its line; the action drops below rather than
     squeezing a 44px target against an ellipsis. */
  .sigdoc__file { flex-wrap: wrap; }
  .sigdoc__body { flex: 1 1 60%; }
  .sigdoc__get, .sigdoc__file .btn { flex: 1 1 100%; min-height: 44px; justify-content: center; }
  .sigdoc__actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
}

[data-theme="dark"] .statushold--price {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stage-deal-bg) 72%, transparent),
    color-mix(in srgb, var(--stage-deal-bg) 45%, transparent));
}

@media (max-width: 640px) {
  .statushold--price { max-height: 55dvh; }
}