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

  /* product hues — visually distinct from the four stage hues (decorative dots beside text) */
  --product-time:  #0ea5e9;
  --product-parts: #0d9488;
  --product-labor: #db2777;
  --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;
  --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:        #0e1424;
  --surface:   #161d31;
  --surface-2: #212c49;   /* clearer step above --surface (was #1b2338, only 1.07:1) — table headers, hovers, field/note fills now read */
  --border:    #3a4767;   /* visible edge on the dark surfaces (was #26304a, ~1.28:1) — defines inputs, dividers, ghost buttons, pills */
  --text:      #e7ebf3;
  --muted:     #9aa4bb;
  --muted-2:   #6c768f;
  --chrome-hover: #212c49;  /* = --surface-2; dark hover pixels unchanged */

  --green-ink: #61a60e;      /* 5.56:1 on --surface — green text on dark */
  --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:    #9fd980;  /* 9.36:1 */
  --stage-lost-bg:   #351713;  --stage-lost-fg:   #f2b8b1;  /* 8.9:1 */

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

/* 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, .menu__mark: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;
  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;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%);
  color: #fff;                 /* label centers on the green-700 band = 5.39:1 */
  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__mark {
  background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-s);
  font: 600 var(--text-xs)/1 var(--font); color: var(--green-ink);  /* 5.39:1 light / 5.56:1 dark */
}
.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); }
  .menu__mark:hover { text-decoration: underline; }
}

.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;
}

/* ---- 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(--muted-2); }
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px;
}
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__top { display: flex; align-items: center; justify-content: space-between; }
.stat__icon {
  width: 40px; height: 40px; border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: center;
}
.stat__icon svg { width: 20px; height: 20px; }
.stat__val { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.stat__label { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.stat__delta { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.tint-green  { background: var(--green-soft); color: var(--green-700); }
.tint-blue   { background: var(--stage-set-bg); color: var(--stage-set-fg); }
.tint-amber  { background: var(--stage-follow-bg); color: var(--stage-follow-fg); }
.tint-violet { background: var(--stage-agree-bg); color: var(--stage-agree-fg); }
[data-theme="dark"] .tint-green { background: #16290f; color: #9fd980; }  /* 9.36:1 */
.up { color: var(--green-ink); }
.down { color: var(--danger); }

/* ---- Toolbar / filters ------------------------------------------------ */
/* Search + product-filter rail for My Leads. Matches the New Lead form's
   "Layered Navy Depth" language: inset-lit surfaces, a green focus glow, and
   filter chips that saturate to each product's hue when active (reusing the
   --product-* dots so the filter color-matches the table). 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;
}

/* --- 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: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-full);
  box-shadow: 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.9) inset;
  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,.16), 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.9) inset;
}
.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.48:1 rest label */
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  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;
  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: linear-gradient(180deg, #22336e, var(--navy) 58%, var(--navy-800));
  box-shadow: 0 6px 16px -7px rgba(19,31,67,.55), 0 1px 0 rgba(255,255,255,.14) inset;
}
.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; }

/* --- 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: 7px;
  padding: 0 12px; min-height: 40px;
  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;
  transition: border-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 {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(69,119,8,.16), 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.9) inset;
}
.sortpick:focus-within .sortpick__icon { color: var(--green-700); }
/* sort applied → the trigger reads as "on" without changing width */
.sortpick.is-active { border-color: color-mix(in srgb, var(--navy) 40%, var(--border)); }
.sortpick.is-active .sortpick__label { color: var(--text); }
.sortpick.is-active .sortpick__icon { color: var(--green-700); }
/* New Lead hugs the right of its toolbar row (was an inline margin; lifted to a
   class so the mobile sort picker can regroup with it — see the <=640 block) */
.toolbar .toolbar__cta-new { margin-left: auto; }

@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 (Dark Premium) overrides --- */
[data-theme="dark"] .search {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
[data-theme="dark"] .search:hover { border-color: #465877; }
[data-theme="dark"] .search:focus-within {
  border-color: rgba(126,200,26,.8); background: #1a2340;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 3px rgba(97,166,14,.22), 0 0 20px -6px rgba(97,166,14,.45);
}
[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(--muted-2); color: var(--muted); }  /* 6:1 on field */
[data-theme="dark"] .pill {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .sortpick {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: var(--muted-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .sortpick:focus-within {
  border-color: rgba(126,200,26,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 3px rgba(97,166,14,.22), 0 0 18px -6px rgba(97,166,14,.45);
}
[data-theme="dark"] .sortpick:focus-within .sortpick__icon { color: #8fd23f; }
[data-theme="dark"] .sortpick.is-active { border-color: color-mix(in srgb, #4a63b8 55%, var(--border)); }
[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: #465877;
    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; }
  /* 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; }
.product-tag {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
}
.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.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); }

.when { display: flex; flex-direction: column; gap: 2px; }
.when b { font-weight: 600; }
.when span { color: var(--muted); font-size: var(--text-sm); }
/* 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); }
.field .req { color: var(--green-ink); }   /* 5.39:1 on white */
.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: #9fd980; 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 {
  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 { border-color: #cfd7e8; }
.leadform .field input:focus, .leadform .field select: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; }

/* 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 .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 #33405f;
  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 {
  background-color: #1a2340; border: 1px solid #33405f; 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 { border-color: #465877; }
[data-theme="dark"] .leadform .field input:focus, [data-theme="dark"] .leadform .field select:focus {
  border-color: rgba(126,200,26,.8); background-color: #22304f;
  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 .prod-card {
  background: linear-gradient(180deg, rgba(33,44,73,.45), rgba(22,29,49,.75)); border: 1px solid #33405f;
  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 #33405f;
  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; }

/* 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 #1a2340 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: #33405f;
  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: #33405f; 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: #465877; }
}
/* 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: #33405f;
  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); }

/* ---- 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 --------------------------------------------------- */
.calendly-inline-widget { min-width: min(320px, 100%); height: 660px; border-radius: var(--radius-l); overflow: hidden; }
@media (max-width: 640px) {
  .calendly-inline-widget { height: 1000px; }
}

/* ---- 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: #9fd980; }  /* 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); }
  .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; }
}
@container (max-width: 440px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* 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; }
  .menu__mark { min-height: 44px; padding: 4px 10px; }
  .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: flex; flex-wrap: wrap; gap: 6px 14px;
    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 */
  #leadRows td:nth-child(4) { grid-area: foot; justify-self: start; margin-top: 12px; margin-right: 86px; }
  #leadRows td:nth-child(5) {
    grid-area: foot; justify-self: end; align-self: center;
    margin-top: 12px; text-align: right;
  }
  #leadRows .cell-strong { font-size: var(--text-base); line-height: 1.3; letter-spacing: -.01em; }
  #leadRows .cell-sub { margin-top: 2px; }
  #leadRows .product-tag { font-size: var(--text-sm); 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: #33405f;
    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: #9fd980; 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 + New Lead 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.
     Sort takes the auto-margin so it groups with New Lead on the right of the
     count row (count left, "Sort · New Lead" right), wrapping together if tight. */
  .content:has(#leadRows) .sortpick { display: inline-flex; margin-left: auto; }
  .content:has(#leadRows) .toolbar .toolbar__cta-new { margin-left: 10px; }

  /* ---- 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: #33405f;
  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: #9fd980; }   /* 9.36:1 */
[data-theme="dark"] .weekstrip__tag { color: #9fd980; 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-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 all seven hues now, not three — 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-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: linear-gradient(180deg, #ffffff 0%, #fafbfe 100%);
  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: linear-gradient(180deg, #1b233d 0%, #161d31 46%);
  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 */
.drawer__head {
  position: relative; flex: none; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 14px 16px 20px; color: #fff;
  background:
    radial-gradient(120% 160% at 92% -30%, rgba(97,166,14,.22) 0%, rgba(97,166,14,0) 46%),
    radial-gradient(96% 130% at 4% -8%, rgba(120,150,220,.22) 0%, rgba(120,150,220,0) 50%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 60%, var(--navy-800) 100%);
}
.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__products { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--text-sm); color: #cbd3e6; }   /* 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: 18px 18px 22px;
}

/* section panels — the .fsection recipe, one step in from the sheet */
.drawer__section {
  position: relative; margin: 0 0 14px; 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: 16px;
}
.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: linear-gradient(180deg, rgba(33,44,73,.5), rgba(22,29,49,.7));
  border-color: #33405f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
[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, private notes, 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 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;
}
.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: flex; flex-direction: column; gap: 2px; }
.drawer__contact-name { font-size: var(--text-ms); font-weight: 600; color: var(--text); }
.drawer__contacts { margin-top: 0; }
[data-theme="dark"] .drawer__update,
[data-theme="dark"] .drawer__note,
[data-theme="dark"] .drawer__act,
[data-theme="dark"] .drawer__contact {
  border-color: #33405f;
  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"] .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: #1a2340; border-color: #33405f; color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
[data-theme="dark"] .drawer .field textarea:hover { border-color: #465877; }
[data-theme="dark"] .drawer .field textarea:focus {
  border-color: rgba(126,200,26,.8); background-color: #22304f;
  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 #1a2340 */

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

/* 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: 14px 14px 20px; }
  .drawer__section { padding: 14px; }
  .drawer__dl { grid-template-columns: 1fr; gap: 2px 0; }
  .drawer__dt { margin-top: 8px; }
  .drawer__actions .btn { width: 100%; }
}