/* =================================================================================================
   SalesOne command center · Floor design system (Oct 6, 2026; replaced Showroom)
   Built for a manager on the sales floor with a phone: near-black ink and controls on a cool white
   canvas, white cards whose whole surface carries status (green, amber, red, blue tints), big bold
   numerals, large rounded touch targets, one cobalt accent and the SalesOne S1 logo. On phones the
   tab bar floats as a dark pill. Avenir Next with system
   fallbacks. Hyundai Blue remains only on the sign-in showroom wall.
   Reference mock (unchanged): apps/salesone/dev/directions/floor.css.

   1. Tokens       tier 1 palette and scales · tier 2 semantic colours (light on :root, dark on
                   :root[data-theme="dark"]) · tier 3 the app's long-standing names
   2. Base         root, type, focus, selection, scrollbars, utilities, status scopes
   3. Shell        loading, sign-in and access screens, sidebar, topbar, page hero, mobile navigation
   4. Components   buttons, badges, fields, tabs, cards and panels, stat tiles, notices,
                   list rows, tables, empty states, modals, drawers, toasts, skeletons
   5. Pages        Morning brief, Sales Team, Inventory, Reports, One-on-ones, Settings and the dated
                   feature sections (Sales Team channels, Inventory management, Overview actions …)
   Responsive rules sit next to the rules they adjust. Reduced motion is handled through the
   duration tokens; forced-colour fallbacks close the sections that need them.

   Status vocabulary (markup): data-status="ok | warn | crit | info | neutral" on badges, stat
   tiles, notices and the sidebar status. Colour is never the only cue: every status carrier also
   has text.
   ================================================================================================= */

/* 1. TOKENS ======================================================================================= */

/* Montserrat (SIL OFL, assets/fonts/OFL.txt; @fontsource/montserrat 5.3.0, latin subset), self-hosted because
   the CSP allows font-src 'self' only. Used by the reporting kit (--rp-font) on report pages, the floating
   page and the Claude panel; everything else keeps --font-sans. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
}

/* Tier 1: literal palette and scales. Theme-independent; never use these in components directly
   when a tier 2 token exists. */
:root {
  /* Hyundai Blue */
  --hy-blue-950: #00224a;
  --hy-blue-925: #00264f;
  --hy-blue-900: #002c5f;
  --hy-blue-875: #003169;
  --hy-blue-800: #0a3b77;
  /* Hyundai Active Blue */
  --hy-active-300: #7fdcf2;
  --hy-active-400: #33c3e6;
  --hy-active-500: #00aad2;
  --hy-active-600: #0090b5;   /* 3.2:1 or more on white, sand and navy: focus rings */
  --hy-active-700: #00708f;   /* 5.1:1 on sand: accent text and links */
  --hy-active-800: #00597a;
  /* Light neutrals: Hyundai Sand */
  --white: #ffffff;
  --paper: #fbf9f7;
  --sand-50: #f6f3f2;
  --sand-100: #f1ece7;
  --sand-200: #ede6df;
  --sand-300: #e4dcd3;
  --sky-50: #f3f8fb;
  --ink-900: #0b1b2e;
  --slate-700: #44505f;       /* 7.4:1 on sand */
  --slate-600: #5e6878;       /* 5.1:1 on sand, 4.8:1 on sand-100 */
  /* Dark neutrals: navy ink */
  --navy-1000: #040a15;
  --navy-975: #06101f;
  --navy-950: #07111f;
  --navy-900: #0e1a2c;
  --navy-875: #112036;
  --navy-850: #132238;
  --navy-845: #13243b;
  --navy-800: #1a2d48;
  --mist-100: #e9eef5;
  --mist-300: #a8b5c7;        /* 8.4:1 on navy-900 */
  --mist-400: #8b9ab0;        /* 5.6:1 on navy-850 */
  --ice-100: #cbf1fb;
  --ice-200: #cfe6f7;
  /* Status families */
  --green-100: #e7f4ed;
  --green-300: #5fd6a6;
  --green-500: #1e9a62;
  --green-700: #11734a;
  --green-950: #10302a;
  --amber-100: #fbf0db;
  --amber-300: #f2c06d;
  --amber-500: #e0a126;
  --amber-700: #875300;
  --amber-950: #3a2c14;
  --red-100: #fbebec;
  --red-300: #ff8e96;
  --red-500: #d9434e;
  --red-700: #a82b35;
  --red-950: #3e1f27;
  --info-100: #e3f4f9;
  --info-300: #5cd3f0;
  --info-950: #0b2e42;

  /* Floor: ink and cool greys (light), night surfaces (dark), cobalt accent, status families.
     Contrast on white: ink-700 8.9:1, ink-600 6.0:1 (5.3:1 on the canvas), cobalt-700 7.2:1,
     green-700 6.6:1, amber-700 7.3:1, red-700 7.4:1; each *-700 clears 5.7:1 on its own *-100 tint. */
  --floor-ink-950: #101114;
  --floor-ink-800: #2b2e35;
  --floor-ink-700: #464a52;
  --floor-ink-600: #5f646d;
  --floor-grey-50: #f7f8f9;
  --floor-grey-100: #f1f2f4;
  --floor-grey-200: #eceef1;
  --floor-night-950: #0d0e11;
  --floor-night-900: #17191d;
  --floor-night-850: #1d2025;
  --floor-night-800: #24272d;
  --floor-paper-50: #f5f6f8;
  --floor-cobalt-100: #e3e9ff;
  --floor-cobalt-200: #9db4ff;
  --floor-cobalt-300: #7c9bff;
  --floor-cobalt-500: #2b59ff;
  --floor-cobalt-700: #1f47d6;
  --floor-green-100: #dcf5e7;
  --floor-green-500: #19a463;
  --floor-green-700: #0d6b3f;
  --floor-amber-100: #fff0cc;
  --floor-amber-500: #f0a417;
  --floor-amber-700: #7a4d00;
  --floor-red-100: #ffe1e3;
  --floor-red-500: #e5384a;
  --floor-red-700: #a8182a;

  /* Type (rem, so it honours the browser's font-size preference; the root stays at 100%). */
  /* Avenir Next ships on Macs, iPhones and iPads; Windows PCs (the CDK machines) fall back to Segoe UI. */
  --font-sans: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-2xs: 0.625rem;   /* 10px  micro caps */
  --font-size-xs: 0.6875rem;   /* 11px  caps labels, badges */
  --font-size-sm: 0.75rem;     /* 12px  meta, footnotes */
  --font-size-md: 0.8125rem;   /* 13px  row copy, table cells, controls */
  --font-size-body: 0.875rem;  /* 14px  body */
  --font-size-lg: 1rem;        /* 16px  panel titles */
  --font-size-xl: 1.125rem;    /* 18px  topbar title */
  --font-size-2xl: 1.375rem;   /* 22px  hero and drawer titles */
  --font-size-stat: 1.75rem;   /* 28px  stat tiles */
  --font-size-kpi: 2.25rem;    /* 36px  KPI numerals */
  --font-size-display: clamp(2rem, 1.35rem + 2.2vw, 3rem); /* sign-in and brief headlines */
  --font-weight-regular: 400;
  --font-weight-medium: 540;
  /* Avenir Next weights: 540 resolves to Demi Bold, 600 Demi Bold, 700 Bold, 800 Heavy. */
  --font-weight-strong: 600;
  --font-weight-heading: 700;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.45;
  --leading-relaxed: 1.55;
  --tracking-caps: 0.08em;
  --tracking-micro: 0.14em;
  --tracking-tight: -0.02em;

  /* Space (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Shape */
  --radius-xs: 8px;
  --radius-control: 14px;
  --radius-inner: 16px;
  --radius-card: 24px;
  --radius-overlay: 28px;
  --radius-pill: 999px;

  /* Motion. prefers-reduced-motion sets the durations to 0, so every transition and entry
     animation that uses them stops without a global !important override. */
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 220ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout and targets */
  --sidebar-width: 232px;
  --topbar-height: 70px;
  --content-max: 1500px;
  --content-gutter: 32px;
  --target-min: 24px;
  --target-touch: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-base: 0s;
    --duration-slow: 0s;
  }
}

/* Tier 2: semantic colours, light. theme-boot.js resolves the saved or system theme and sets
   data-theme (and color-scheme) on <html> before the first paint; app.js keeps it in step.
   Floor: cool white canvas, white cards, near-black ink and controls, one cobalt accent; status is
   carried by whole-card tints (*-bg) and always by words as well. */
:root {
  color-scheme: light;
  --color-canvas: var(--floor-grey-100);     /* page background (keep in step with theme-boot.js) */
  --color-surface-1: var(--white);           /* cards, panels, inputs, modals, sidebar */
  --color-surface-2: var(--floor-grey-50);   /* table header band, inner tiles, modal footer */
  --color-surface-3: var(--floor-grey-200);  /* tab tracks, neutral badges, quiet fills */
  --color-ink-1: var(--floor-ink-950);       /* primary text */
  --color-ink-2: var(--floor-ink-700);       /* secondary text, labels */
  --color-ink-3: var(--floor-ink-600);       /* tertiary text: meta, ranks, placeholders */
  --color-hairline: rgb(16 17 20 / 0.08);
  --color-hairline-strong: rgb(16 17 20 / 0.16);
  --color-control-border: rgb(16 17 20 / 0.18);
  --color-control-border-strong: rgb(16 17 20 / 0.5);
  --color-brand: var(--floor-ink-950);       /* primary buttons, active tabs and nav, banner */
  --color-brand-hover: var(--floor-ink-800);
  --color-on-brand: var(--white);
  --color-accent: var(--floor-cobalt-500);   /* decorative accent: eyebrow dot, focus */
  --color-accent-text: var(--floor-cobalt-700); /* accent used as text: links, panel actions */
  --color-focus: var(--floor-cobalt-500);
  --color-selection: rgb(43 89 255 / 0.2);
  --color-ok-fg: var(--floor-green-700);
  --color-ok-bg: var(--floor-green-100);
  --color-ok-strong: var(--floor-green-500);
  --color-warn-fg: var(--floor-amber-700);
  --color-warn-bg: var(--floor-amber-100);
  --color-warn-strong: var(--floor-amber-500);
  --color-crit-fg: var(--floor-red-700);
  --color-crit-bg: var(--floor-red-100);
  --color-crit-strong: var(--floor-red-500);
  --color-info-fg: var(--floor-cobalt-700);
  --color-info-bg: var(--floor-cobalt-100);
  --color-info-strong: var(--floor-cobalt-500);
  --color-neutral-fg: var(--floor-ink-700);
  --color-neutral-bg: var(--floor-grey-200);
  --color-row-hover: #f4f6ff;
  --color-avatar-bg: var(--floor-cobalt-100);
  --color-avatar-fg: var(--floor-cobalt-700);
  --color-tab-track: #e4e6ea;
  --color-tab-active-bg: var(--floor-ink-950);
  --color-tab-active-fg: var(--white);
  --color-tab-active-ring: transparent;
  --color-tab-secondary-active-bg: var(--white);
  --color-tab-secondary-active-ring: transparent;
  --color-scrollbar-thumb: rgb(16 17 20 / 0.26);
  --color-scrim: rgb(16 17 20 / 0.4);
  --color-scrim-strong: rgb(16 17 20 / 0.45);  /* behind the floating detail page */
  --color-skeleton: #e4e6ea;
  --color-skeleton-shine: var(--floor-grey-50);
  --color-topbar-bg: color-mix(in oklab, var(--color-canvas) 88%, transparent);
  /* Categorical channel colours (dots beside channel names; never a status). */
  --color-channel-internet: var(--floor-cobalt-500);
  --color-channel-phone: var(--floor-green-500);
  --color-channel-showroom: var(--floor-ink-950);
  --color-channel-results: var(--floor-amber-500);
  /* Sidebar: a light surface with a black pill for the current page. */
  --color-sidebar-bg: var(--white);
  --color-sidebar-gradient: none;
  --color-sidebar-edge: rgb(16 17 20 / 0.06);
  /* Floating phone tab bar: dark dock with a light pill (inverted in dark mode). */
  --floor-dock: var(--floor-ink-950);
  --floor-dock-ink: rgb(255 255 255 / 0.78);
  --floor-dock-active: var(--white);
  --floor-dock-active-ink: var(--floor-ink-950);

  /* Elevation (light): nearly flat; tints and spacing separate objects. */
  --shadow-card: 0 1px 2px rgb(16 17 20 / 0.04);
  --shadow-control: none;
  --shadow-raised: 0 1px 3px rgb(16 17 20 / 0.12);
  --shadow-primary: 0 8px 20px -10px rgb(16 17 20 / 0.6);
  --shadow-overlay: 0 30px 70px -20px rgb(16 17 20 / 0.4);
}

/* Tier 2: semantic colours, dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--floor-night-950);
  --color-surface-1: var(--floor-night-900);
  --color-surface-2: var(--floor-night-850);
  --color-surface-3: var(--floor-night-800);
  --color-ink-1: var(--floor-paper-50);
  --color-ink-2: #b4b9c2;
  --color-ink-3: #959ba5;
  --color-hairline: rgb(255 255 255 / 0.07);
  --color-hairline-strong: rgb(255 255 255 / 0.16);
  --color-control-border: rgb(255 255 255 / 0.18);
  --color-control-border-strong: rgb(255 255 255 / 0.5);
  --color-brand: var(--floor-paper-50);
  --color-brand-hover: var(--white);
  --color-on-brand: var(--floor-night-950);
  --color-accent: var(--floor-cobalt-300);
  --color-accent-text: var(--floor-cobalt-200);
  --color-focus: var(--floor-cobalt-200);
  --color-selection: rgb(124 155 255 / 0.3);
  --color-ok-fg: #7ee3ad;
  --color-ok-bg: #11291d;
  --color-ok-strong: #3fcf86;
  --color-warn-fg: #ffd27a;
  --color-warn-bg: #2e2410;
  --color-warn-strong: #f5b53d;
  --color-crit-fg: #ffa0a8;
  --color-crit-bg: #33161a;
  --color-crit-strong: #ff5d6c;
  --color-info-fg: var(--floor-cobalt-200);
  --color-info-bg: #1a2140;
  --color-info-strong: var(--floor-cobalt-300);
  --color-neutral-fg: #b4b9c2;
  --color-neutral-bg: var(--floor-night-800);
  --color-row-hover: #1d2232;
  --color-avatar-bg: #1a2140;
  --color-avatar-fg: #c9d5ff;
  --color-tab-track: var(--floor-night-850);
  --color-tab-active-bg: var(--floor-paper-50);
  --color-tab-active-fg: var(--floor-night-950);
  --color-tab-active-ring: transparent;
  --color-tab-secondary-active-bg: #2c3037;
  --color-tab-secondary-active-ring: transparent;
  --color-scrollbar-thumb: rgb(255 255 255 / 0.26);
  --color-scrim: rgb(0 0 0 / 0.6);
  --color-scrim-strong: rgb(10 10 14 / 0.6);
  --color-skeleton: var(--floor-night-800);
  --color-skeleton-shine: #2c3037;
  --color-topbar-bg: color-mix(in oklab, var(--color-canvas) 88%, transparent);
  --color-channel-internet: var(--floor-cobalt-300);
  --color-channel-phone: #3fcf86;
  --color-channel-showroom: var(--floor-paper-50);
  --color-channel-results: #f5b53d;
  --color-sidebar-bg: #121317;
  --color-sidebar-gradient: none;
  --color-sidebar-edge: rgb(255 255 255 / 0.06);
  --floor-dock: var(--floor-paper-50);
  --floor-dock-ink: rgb(13 14 17 / 0.72);
  --floor-dock-active: var(--floor-night-950);
  --floor-dock-active-ink: var(--floor-paper-50);

  /* Elevation (dark): flat; surfaces step up in lightness instead. */
  --shadow-card: none;
  --shadow-control: none;
  --shadow-raised: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-primary: none;
  --shadow-overlay: 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 70px -20px rgb(0 0 0 / 0.8);
}

/* Reporting kit tokens (reporting redesign, Oct 13, 2026): the DriveCentric Agent Hub look in the SalesOne
   logo's sky blue. Scoped to the report page roots, the floating detail page and the Claude panel so no other
   page changes. Light here, dark below; the kit's rules live in "Reporting kit (Agent Hub look)" (section 5).
   --rp-bar (neutral bars and segments) and --rp-accent-ink (accent used as text: 4.5:1 or more on --rp-card
   and --rp-inset) are kit additions beside the spec's table. --rp-series-1 / --rp-series-2 are the one validated
   pair every chart, line and rank bar draws its data in (sold / arrived on Corridor Home); the dark pair was
   checked on the dark card, the light pair on white. */
:root .report-page,
:root .drawer--float,
:root .claude-panel {
  --rp-surface: #f6f7f9;
  --rp-card: #ffffff;
  --rp-inset: #f0f2f5;
  --rp-line: #e3e6ea;
  --rp-ink: #16181c;
  --rp-ink-2: #555a63;
  --rp-ink-3: #8a9099;
  --rp-accent: #0a8fc2;
  --rp-accent-2: #2bb3e6;
  --rp-accent-deep: #1257bd;
  --rp-accent-ink: #08739c;
  --rp-bar: #c3c8d0;
  --rp-good-bg: #e7f7ef;
  --rp-good-line: #9fd9bd;
  --rp-good-ink: #0f7a4d;
  --rp-series-1: #0a8fc2;
  --rp-series-2: #c2416f;
  --rp-font: "Montserrat", var(--font-sans);
}

:root[data-theme="dark"] .report-page,
:root[data-theme="dark"] .drawer--float,
:root[data-theme="dark"] .claude-panel {
  --rp-surface: #18191c;
  --rp-card: #26272b;
  --rp-inset: #303136;
  --rp-line: #37383d;
  --rp-ink: #ececee;
  --rp-ink-2: #a3a4aa;
  --rp-ink-3: #74757b;
  --rp-accent: #12aee8;
  --rp-accent-2: #4cc9f5;
  --rp-accent-deep: #1463d6;
  --rp-accent-ink: #4cc9f5;
  --rp-bar: #55565c;
  --rp-good-bg: #0d3b2c;
  --rp-good-line: #1d7a58;
  --rp-good-ink: #6ee7b7;
  --rp-series-1: #1a9ad3;
  --rp-series-2: #d55181;
  --rp-font: "Montserrat", var(--font-sans);
}

/* Tier 3: the app's long-standing names. styles.css, commissions.css and corridor.css read these,
   so they follow the theme without knowing about tiers 1 and 2. Prefer tier 2 in new code. */
:root {
  --bg: var(--color-canvas);
  --surface: var(--color-surface-1);
  --surface-primary: var(--color-surface-1);
  --surface-subtle: var(--color-surface-2);
  --surface-secondary: var(--color-surface-2);
  --surface-muted: var(--color-surface-3);
  --text: var(--color-ink-1);
  --text-primary: var(--color-ink-1);
  --text-secondary: var(--color-ink-2);
  --text-tertiary: var(--color-ink-3);
  --line: var(--color-hairline);
  --line-strong: var(--color-hairline-strong);
  --border-subtle: var(--color-hairline);
  --blue: var(--color-brand);
  --blue-hover: var(--color-brand-hover);
  --accent: var(--color-accent-text);
  --focus: var(--color-focus);
  --green: var(--color-ok-fg);
  --green-bg: var(--color-ok-bg);
  --amber: var(--color-warn-fg);
  --amber-bg: var(--color-warn-bg);
  --red: var(--color-crit-fg);
  --red-bg: var(--color-crit-bg);
  --warning: var(--color-warn-fg);
  --danger: var(--color-crit-fg);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-overlay);
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-inner);
  --radius-lg: var(--radius-card);
  --sidebar: var(--color-sidebar-bg);
  --sidebar-raised: rgb(255 255 255 / 0.08);
  --sidebar-selected: rgb(255 255 255 / 0.13);
  --font: var(--font-sans);
}

/* 2. BASE ========================================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--color-canvas);
  accent-color: var(--color-brand);
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
  scrollbar-width: auto;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
  background-color: var(--color-canvas);
  color: var(--color-ink-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.overlay-open {
  overflow: hidden;
}

:where(button, input, select, textarea) {
  font: inherit;
  letter-spacing: inherit;
}

:where(button, a) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:where(button) {
  color: inherit;
}

::selection {
  background-color: var(--color-selection);
}

/* Focus: one Active Blue ring for every interactive element (zero specificity, so components can
   move it inside clipped containers). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Headings and landmarks that receive focus from script (route changes, skip link) do not show a
   ring: the move is for assistive technology, not a control. */
:is(h1, h2, h3, main)[tabindex="-1"]:focus {
  outline: none;
}

:where(h1, h2, h3, h4, p, figure, blockquote) {
  margin-top: 0;
}

:where(h1, h2, h3, h4) {
  color: var(--color-ink-1);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  margin-bottom: 8px;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
}

h2 {
  margin-bottom: 4px;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

h3 {
  margin-bottom: 4px;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

p {
  margin-bottom: 0;
}

.muted {
  color: var(--color-ink-2);
}

.tertiary {
  color: var(--color-ink-3);
}

.mono,
.metric-number,
.table-number,
.updated-label {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
}

/* Visually hidden, still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden from everyone. Prefer the hidden attribute in new markup. */
.hidden {
  display: none;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  min-height: var(--target-touch);
  padding: 0 16px;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  translate: 0 calc(-100% - 20px);
  transition: translate var(--duration-base) var(--ease-standard);
}

.skip-link:focus-visible {
  translate: 0 0;
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-block;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Status scopes. Any element with data-status exposes its tone as --status-fg (text on a tint),
   --status-bg (tint) and --status-strong (dots, edges, accent bars). Components that consume them
   set neutral defaults on themselves, so a tone never leaks into a nested neutral component. The
   :root prefix gives these (0,2,0) specificity, above any single-class component default. */
:root [data-status="ok"] {
  --status-fg: var(--color-ok-fg);
  --status-bg: var(--color-ok-bg);
  --status-strong: var(--color-ok-strong);
}

:root [data-status="warn"] {
  --status-fg: var(--color-warn-fg);
  --status-bg: var(--color-warn-bg);
  --status-strong: var(--color-warn-strong);
}

:root [data-status="crit"] {
  --status-fg: var(--color-crit-fg);
  --status-bg: var(--color-crit-bg);
  --status-strong: var(--color-crit-strong);
}

:root [data-status="info"] {
  --status-fg: var(--color-info-fg);
  --status-bg: var(--color-info-bg);
  --status-strong: var(--color-info-strong);
}

:root [data-status="neutral"] {
  --status-fg: var(--color-neutral-fg);
  --status-bg: var(--color-neutral-bg);
  --status-strong: transparent;
}

/* Text tones (values, deltas). */
.rate-good,
.positive-value,
.trend-positive {
  color: var(--color-ok-fg);
}

.rate-watch,
.trend-negative {
  color: var(--color-warn-fg);
}

.rate-low {
  color: var(--color-crit-fg);
}

.rate-good,
.rate-watch,
.rate-low {
  font-weight: var(--font-weight-heading);
}

.trend-neutral {
  color: var(--color-ink-2);
}

@keyframes spin {
  to { rotate: 360deg; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(28px); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes skeleton-sweep {
  to { background-position: -100% 0; }
}

/* 3. SHELL ======================================================================================== */

/* SalesOne logo (sidebar, sign-in, invite, loading and access screens): the S1 mark beside the
   wordmark, with an optional tagline under the wordmark. app.js renders a light and a dark file of
   each; only the pair that matches html[data-theme] is displayed, so the wordmark's alt text
   ("SalesOne") is read once. */
.brand-lockup {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-logo-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
}

.brand-lockup-text {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 3px;
}

.brand-logo-wordmark {
  display: block;
  width: auto;
  height: 22px;
}

.brand-lockup-tagline {
  color: var(--color-ink-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

:root:not([data-theme="dark"]) [data-theme-only="dark"],
:root[data-theme="dark"] [data-theme-only="light"] {
  display: none;
}

.spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--color-hairline-strong);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}

/* Loading */
.loading-screen {
  min-height: 100dvh;
  padding: 24px;
  display: grid;
  place-items: center;
  background: var(--color-canvas);
}

.loading-lockup {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-card);
  color: var(--color-ink-2);
}

.loading-lockup .brand-lockup {
  margin-bottom: 6px;
}

.loading-lockup p {
  font-size: var(--font-size-sm);
}

/* Sign-in and invite screens: form panel beside the Hyundai Blue showroom wall. */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(520px, 1.08fr);
  background: var(--color-surface-1);
}

.auth-panel {
  min-height: 100dvh;
  padding: clamp(32px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand .brand-logo-mark {
  width: 46px;
  height: 46px;
}

.auth-brand .brand-logo-wordmark {
  height: 26px;
}

.auth-form-wrap {
  width: 100%;
  max-width: 400px;
  margin: auto 0;
  padding: 48px 0 72px;
}

.auth-form-wrap .eyebrow {
  color: var(--color-accent-text);
}

.auth-form-wrap h1 {
  margin-bottom: 8px;
  font-size: var(--font-size-display);
  letter-spacing: -0.035em;
}

.auth-subtitle {
  margin-bottom: 28px;
  color: var(--color-ink-2);
  font-size: var(--font-size-body);
  text-wrap: pretty;
}

.auth-security-note {
  margin-top: 18px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.auth-security-note .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--color-accent-text);
}

.auth-form-wrap .auth-security-note + .button {
  margin-top: 12px;
}

.auth-help {
  margin-top: 14px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.auth-form-wrap > a.button-block {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.auth-form-wrap .auth-subtitle + .button,
.auth-form-wrap .inline-message + .auth-retry {
  margin-top: 4px;
}

.auth-form-wrap #join-message:empty {
  display: none;
}

.auth-footer {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.auth-aside {
  min-height: 100dvh;
  padding: clamp(48px, 7vw, 100px);
  display: grid;
  place-items: center;
  color-scheme: dark;
  background-color: var(--hy-blue-900);
  background-image:
    radial-gradient(120% 90% at 85% 0%, rgb(0 170 210 / 0.22) 0%, transparent 55%),
    linear-gradient(180deg, var(--hy-blue-875) 0%, var(--hy-blue-900) 45%, var(--hy-blue-950) 100%);
  color: var(--white);
}

.auth-aside-inner {
  width: min(720px, 100%);
}

.auth-aside .eyebrow {
  color: var(--hy-active-300);
}

.auth-aside h2 {
  max-width: 650px;
  margin: 20px 0 44px;
  color: var(--white);
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.06);
}

.auth-stat {
  min-height: 118px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.auth-stat:not(:last-child) {
  border-right: 1px solid rgb(255 255 255 / 0.16);
}

.auth-stat span {
  color: rgb(255 255 255 / 0.74);
  font-size: var(--font-size-sm);
}

.auth-stat strong {
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.035em;
}

/* Access denied, access check failed */
.access-shell {
  min-height: 100dvh;
  padding: 28px 16px;
  display: grid;
  place-items: center;
  background: var(--color-canvas);
}

.access-card {
  width: min(460px, 100%);
  padding: 32px;
  text-align: center;
}

.access-card .brand-lockup {
  margin: 0 0 22px;
  display: flex;
  justify-content: center;
}

.access-card .brand-logo-mark {
  width: 56px;
  height: 56px;
}

.access-card h1 {
  font-size: var(--font-size-2xl);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}

.access-card p:not(.eyebrow) {
  margin: 10px 0 22px;
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.access-card .button {
  margin: 4px;
}

/* App frame */
.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.workspace {
  min-width: 0;
  grid-column: 2;
}

.content {
  width: min(100%, calc(var(--content-max) + var(--content-gutter) * 2));
  margin: 0 auto;
  padding: 18px var(--content-gutter) 48px;
}

/* Wraps the data-refresh alert above the page content (outside #page-content). */
.content.content-alert {
  padding-bottom: 0;
}

/* View as (Oct 19, 2026): who James is previewing, above the topbar on every page, with Exit. Wraps on phones. */
.view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px var(--content-gutter);
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border-bottom: 1px solid currentColor;
  font-size: var(--font-size-sm);
}

.view-as-banner-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.view-as-banner .view-as-exit {
  min-height: 32px;
  padding: 0 14px;
}

/* View as in the Access box header, beside the page count. */
.access-view-as {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--font-size-sm);
}

/* Sidebar: a light surface (near-black in dark mode) with the SalesOne logo, grouped sections and a
   black pill (white in dark mode) for the current page. */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--color-sidebar-bg);
  box-shadow: inset -1px 0 0 var(--color-sidebar-edge);
  color: var(--color-ink-1);
}

.sidebar-brand {
  margin: 0 0 26px;
  padding: 0 6px;
  display: grid;
  gap: 14px;
}

.sidebar-store {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-control);
  background: var(--color-surface-3);
  color: var(--color-ink-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  line-height: 1.3;
}

.nav-list {
  display: block;
}

.nav-group + .nav-group {
  margin-top: 18px;
}

.nav-section-label {
  margin: 0;
  padding: 0 14px 8px;
  color: var(--color-ink-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.02em;
}

.nav-button {
  position: relative;
  width: 100%;
  min-height: 46px;
  margin-bottom: 2px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-strong);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.nav-button .icon {
  color: var(--color-ink-3);
}

.nav-button:hover {
  background: var(--color-surface-3);
  color: var(--color-ink-1);
}

.nav-button:hover .icon {
  color: var(--color-ink-1);
}

.nav-button:is(.active, [aria-current="page"]) {
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--font-weight-bold);
}

.nav-button:is(.active, [aria-current="page"]) .icon {
  color: var(--color-on-brand);
}

.nav-caret {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.8;
}

.nav-subnav {
  margin: 2px 0 6px 20px;
  padding-left: 18px;
  border-left: 1px solid var(--color-hairline-strong);
  display: grid;
  gap: 1px;
}

.nav-subitem {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--color-ink-3);
  font-size: 0.8125rem;
  font-weight: 540;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.nav-subitem:hover,
.nav-subitem[aria-current="page"] {
  color: var(--color-ink-1);
}

.nav-subitem[aria-current="page"] {
  background: var(--color-surface-2);
}

.nav-subitem:focus-visible {
  outline-offset: -2px;
}

.nav-subitem-count {
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}

.nav-subitem-count[data-tone="warn"] {
  color: var(--color-warn-fg);
}

.nav-button:focus-visible {
  outline-offset: -2px;
}

/* The inset focus ring on the current-page pill uses the pill's own ink: the accent ring on a light
   pill (dark mode) measured 1.87:1. */
.nav-button:is(.active, [aria-current="page"]) {
  --color-focus: var(--color-on-brand);
}

.sidebar-spacer {
  flex: 1;
  min-height: 24px;
}

.sidebar-system-nav {
  margin-bottom: 8px;
}

/* Data status card: tinted by the same source health as the Overview (data-status scope). */
.connection-card {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--status-bg);
}

.connection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--status-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.connection-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--status-strong);
}

.connection-card p {
  margin-top: 6px;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--leading-body);
}

.account-strip {
  min-height: 52px;
  padding: 10px 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--color-hairline);
}

.account-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  color: var(--color-avatar-fg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.account-copy {
  min-width: 0;
  flex: 1;
}

.account-copy strong {
  display: block;
  overflow: hidden;
  color: var(--color-ink-1);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy span {
  display: block;
  color: var(--color-ink-3);
  font-size: var(--font-size-xs);
}

.sidebar-signout {
  width: var(--target-touch);
  height: var(--target-touch);
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.sidebar-signout:hover {
  background: var(--color-surface-3);
  color: var(--color-ink-1);
}

/* Topbar: the page title (the one heading every route focuses) and data freshness. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-height);
  padding: 0 var(--content-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-topbar-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.topbar-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 4px;
}

.topbar-title h1 {
  margin: 0;
  color: var(--color-ink-1);
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.topbar-title span {
  color: var(--color-ink-3);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.updated-label {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.mobile-menu-button,
.mobile-bottom-nav,
.mobile-more-backdrop {
  display: none;
}

.mobile-more-sheet {
  overscroll-behavior: contain;
}

/* Page hero: eyebrow, an optional contextual title (never a repeat of the page title in the
   topbar) and a context line, with the page's primary actions on the right. */
.page-hero {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.page-hero-copy {
  min-width: 0;
  flex: 1 1 18rem;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
}

.page-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  text-transform: none;
}

.page-hero .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
}

.page-context-title {
  margin: 0 0 2px;
  color: var(--color-ink-1);
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page-hero-context {
  max-width: 90ch;
  color: var(--color-ink-2);
  font-size: var(--font-size-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.hero-actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.hero-actions .button {
  min-height: 48px;
  padding: 0 22px;
}

/* Shell, tablet and narrow desktop */
@media (max-width: 980px) {
  :root {
    --content-gutter: 20px;
  }

  .auth-shell {
    grid-template-columns: minmax(380px, 1fr) minmax(380px, 1.1fr);
  }

  .auth-aside {
    padding: 48px;
  }

  .auth-stat {
    padding: 20px 16px;
  }
}

/* Collapsed sidebar: icons only. */
/* Tablet (821-1080px): a narrower sidebar that keeps its words; tappable labels beat bare icons. */
@media (min-width: 821px) and (max-width: 1080px) {
  :root {
    --sidebar-width: 196px;
    --content-gutter: 20px;
  }

  .sidebar {
    padding: 18px 12px 14px;
  }

  .sidebar-brand {
    margin-bottom: 20px;
    padding: 0 4px;
  }

  .sidebar .brand-logo-mark {
    width: 34px;
    height: 34px;
  }

  .sidebar .brand-logo-wordmark {
    height: 19px;
  }

  .nav-button {
    min-height: var(--target-touch);
    padding: 0 12px;
  }

  .nav-group + .nav-group {
    margin-top: 14px;
  }

  /* About 76px is left for the member's name beside the avatar and sign-out: wrap, don't cut. */
  .account-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Phone and small tablet: bottom navigation replaces the sidebar. */
@media (max-width: 820px) {
  :root {
    --topbar-height: 58px;
    --content-gutter: 16px;
  }

  .auth-shell {
    display: block;
  }

  .auth-panel {
    min-height: 100dvh;
    padding: 28px max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left));
  }

  .auth-form-wrap {
    max-width: none;
    padding: 56px 0 72px;
  }

  .auth-aside {
    display: none;
  }

  .app-shell {
    display: block;
    min-height: 100dvh;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .sidebar {
    display: none;
  }

  .topbar {
    min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(var(--content-gutter), env(safe-area-inset-right)) 0 max(var(--content-gutter), env(safe-area-inset-left));
    background: var(--color-canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar-title h1 {
    font-size: 1.5rem;
  }

  .topbar-title {
    display: block;
  }

  .topbar-title span {
    display: block;
    margin-top: 1px;
    padding-left: 0;
    border-left: 0;
    font-size: var(--font-size-sm);
  }

  .updated-label {
    display: none;
  }

  .content {
    padding: 14px var(--content-gutter) 28px;
  }

  .page-hero {
    align-items: center;
  }

  .page-context-title {
    font-size: 1.75rem;
  }

  /* The page's primary actions span the width: one thumb, one target. */
  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    flex: 1 1 auto;
    min-height: 52px;
    font-size: 1rem;
  }

  /* Floating dock: a dark pill (light in dark mode) clear of the screen edges and the home bar. */
  .mobile-bottom-nav {
    position: fixed;
    inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    z-index: 60;
    min-height: 66px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border-radius: 26px;
    /* Focus rings inside the dock contrast with the dock itself (light in dark mode). */
    --color-focus: var(--floor-dock-active);
    background: var(--floor-dock);
    box-shadow: 0 18px 40px -14px rgb(0 0 0 / 0.55);
  }

  .mobile-nav-item {
    position: relative;
    isolation: isolate;
    min-width: var(--target-touch);
    min-height: 54px;
    padding: 4px 2px;
    border: 0;
    border-radius: 20px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    background: transparent;
    color: var(--floor-dock-ink);
    font-size: 0.75rem;
    font-weight: var(--font-weight-strong);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-nav-item .icon {
    width: 20px;
    height: 20px;
  }

  .mobile-nav-item:is(.active, [aria-current="page"]) {
    --color-focus: var(--floor-dock-active-ink);
    background: var(--floor-dock-active);
    color: var(--floor-dock-active-ink);
  }

  .mobile-nav-item:focus-visible {
    outline-offset: -2px;
  }

  .mobile-more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    display: grid;
    align-items: end;
    background: var(--color-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fade-in var(--duration-base) var(--ease-standard);
  }

  .mobile-more-sheet {
    max-height: min(680px, calc(100dvh - 24px - env(safe-area-inset-top)));
    overflow-y: auto;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-overlay);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-overlay);
    animation: modal-in var(--duration-slow) var(--ease-standard);
  }

  .mobile-more-header {
    min-height: 64px;
    padding: 12px 14px 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--color-hairline);
  }

  .mobile-more-header h2,
  .mobile-more-header .eyebrow {
    margin-bottom: 0;
  }

  .mobile-more-header h2 {
    font-size: var(--font-size-xl);
  }

  .mobile-more-links {
    padding: 8px;
  }

  .mobile-more-link {
    min-height: 58px;
    padding: 8px 10px;
    border-radius: var(--radius-inner);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    color: var(--color-ink-1);
    text-decoration: none;
  }

  .mobile-more-link > .icon:first-child {
    color: var(--color-accent-text);
  }

  .mobile-more-link > .icon:last-child {
    width: 16px;
    height: 16px;
    color: var(--color-ink-3);
  }

  .mobile-more-link:hover,
  .mobile-more-link:is(.active, [aria-current="page"]) {
    background: var(--color-surface-3);
  }

  .mobile-more-link:focus-visible {
    outline-offset: -2px;
  }

  .mobile-more-link > span {
    min-width: 0;
  }

  .mobile-more-link strong,
  .mobile-more-link small {
    display: block;
  }

  .mobile-more-link strong {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-strong);
  }

  .mobile-more-link small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-account {
    min-height: 66px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--color-hairline);
  }

  .mobile-more-account .account-avatar {
    background: var(--color-avatar-bg);
    box-shadow: inset 0 0 0 1px var(--color-hairline);
    color: var(--color-avatar-fg);
  }

  .mobile-more-account > span:nth-child(2) {
    min-width: 0;
  }

  .mobile-more-account strong,
  .mobile-more-account small {
    display: block;
  }

  .mobile-more-account strong {
    font-size: var(--font-size-md);
  }

  .mobile-more-account small {
    color: var(--color-ink-2);
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 480px) {
  .page-hero {
    display: block;
  }

  .hero-actions {
    margin-top: 14px;
    justify-content: flex-start;
  }
}

@media (forced-colors: active) {
  .nav-button:is(.active, [aria-current="page"]),
  .mobile-nav-item:is(.active, [aria-current="page"]) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .nav-button:is(.active, [aria-current="page"]) .icon {
    color: HighlightText;
  }

  .connection-dot {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

/* 4. COMPONENTS =================================================================================== */

/* Buttons. .button-quiet is the ghost variant (.button-ghost is accepted as an alias). */
.button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    scale var(--duration-fast) var(--ease-standard);
}

.button .icon {
  width: 16px;
  height: 16px;
}

.button:active:not(:disabled) {
  scale: 0.985;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button-primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-primary);
}

.button-primary:hover:not(:disabled) {
  background: var(--color-brand-hover);
}

.button-secondary {
  border-color: transparent;
  background: var(--color-surface-3);
  color: var(--color-ink-1);
  box-shadow: var(--shadow-control);
}

.button-secondary:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-accent) 55%, var(--color-control-border));
  background: var(--color-surface-2);
}

:is(.button-quiet, .button-ghost) {
  min-height: 34px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  color: var(--color-accent-text);
}

:is(.button-quiet, .button-ghost):hover:not(:disabled) {
  background: color-mix(in oklab, var(--color-accent) 10%, transparent);
  color: var(--color-accent-text);
}

.button-danger {
  border-color: color-mix(in oklab, var(--color-crit-strong) 34%, transparent);
  background: var(--color-crit-bg);
  color: var(--color-crit-fg);
}

.button-danger:hover:not(:disabled) {
  border-color: var(--color-crit-strong);
  background: color-mix(in oklab, var(--color-crit-strong) 14%, var(--color-crit-bg));
}

.button-block {
  width: 100%;
}

.icon-button {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  background: var(--color-surface-1);
  color: var(--color-ink-2);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    scale var(--duration-fast) var(--ease-standard);
}

.icon-button:hover {
  border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-control-border));
  color: var(--color-accent-text);
}

.icon-button:active {
  scale: 0.96;
}

/* Text actions in panel headers. A link gets a decorative arrow. */
.panel-action {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  display: inline-flex;
  align-items: center;
  background: var(--color-info-bg);
  color: var(--color-accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.panel-action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.panel-action::after {
  content: "→" / "";
  margin-left: 6px;
}

/* Badges: soft tint, strong text and, for ok, warn and crit, a status dot. Tone comes from
   data-status (toneBadge() in app.js) or the legacy colour classes. */
.badge {
  --status-fg: var(--color-neutral-fg);
  --status-bg: var(--color-neutral-bg);
  --status-strong: transparent;
  min-height: 26px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  background: var(--status-bg);
  color: var(--status-fg);
  box-shadow: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.badge.green {
  --status-fg: var(--color-ok-fg);
  --status-bg: var(--color-ok-bg);
}

.badge.amber {
  --status-fg: var(--color-warn-fg);
  --status-bg: var(--color-warn-bg);
}

.badge.red {
  --status-fg: var(--color-crit-fg);
  --status-bg: var(--color-crit-bg);
}

.badge.blue {
  --status-fg: var(--color-info-fg);
  --status-bg: var(--color-info-bg);
}

.badge:is([data-status="ok"], [data-status="warn"], [data-status="crit"], .green, .amber, .red)::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* Small inline age badge after a title or detail line. */
.rolling-source-age {
  min-height: 18px;
  margin-left: 6px;
  padding: 0 7px;
  vertical-align: middle;
}

/* Form fields */
.form-stack {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label,
.field-label,
.form-stack > label {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heading);
}

/* A bare label directly followed by its control keeps them together inside .form-stack. */
.form-stack > label + :is(.input, .select, .textarea) {
  margin-top: -10px;
}

:is(.input, .select, .textarea) {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background-color: var(--color-surface-1);
  color: var(--color-ink-1);
  box-shadow: none;
  font-size: var(--font-size-md);
  line-height: 1.35;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

:is(.input, .select, .textarea):hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-control-border));
}

:is(.input, .select, .textarea):focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

:is(.input, .textarea)::placeholder {
  color: var(--color-ink-3);
  opacity: 1;
}

:is(.input, .select, .textarea):disabled {
  background-color: var(--color-surface-3);
  color: var(--color-ink-2);
  cursor: not-allowed;
}

/* Only after the person has interacted with the field. */
:is(.input, .select, .textarea):user-invalid {
  border-color: var(--color-crit-strong);
}

/* Select: native control, custom chevron drawn with gradients in the secondary ink colour, so it
   follows the theme (forced colours restore the native arrow below). */
.select {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%),
    linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%);
  background-position: right 19px center, right 14px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.select:disabled {
  cursor: not-allowed;
}

/* File inputs (VinCue and DriveCentric uploads). */
.input[type="file"] {
  padding: 6px;
}

.input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface-3);
  color: var(--color-ink-1);
  font: inherit;
  font-weight: var(--font-weight-heading);
  cursor: pointer;
}

/* Checkbox-style task toggle: 24px box, 44px hit area. */
.check-button {
  position: relative;
  width: var(--target-min);
  height: var(--target-min);
  flex: none;
  padding: 0;
  border: 1.5px solid var(--color-control-border-strong);
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  background: var(--color-surface-1);
  color: transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.check-button::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.check-button .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.check-button:hover {
  border-color: var(--color-accent);
}

.check-button.checked {
  border-color: var(--color-ok-strong);
  background: var(--color-ok-strong);
  color: var(--white);
}

/* Tabs. The sign-in switch is a two-up grid; inside pages, tab lists are compact pills. A
   .tab-row wrapper holds a page's tab list (the Sales Team report row on phones). */
.segmented {
  margin-bottom: 24px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  border-radius: var(--radius-inner);
  background: var(--color-tab-track);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}

.segmented button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.segmented button:hover:not(.active) {
  background: color-mix(in oklab, var(--color-surface-1) 70%, transparent);
  color: var(--color-ink-1);
}

.segmented button.active {
  background: var(--color-tab-secondary-active-bg);
  box-shadow: inset 0 0 0 1px var(--color-tab-secondary-active-ring), var(--shadow-raised);
  color: var(--color-ink-1);
}

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

.content .segmented {
  width: auto;
  max-width: 100%;
  margin: 0 0 16px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  vertical-align: top;
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: none;
}

.tab-row > .segmented {
  margin: 0;
}

.content .segmented button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-strong);
}

/* Primary level: brand fill. */
.content .segmented button.active {
  background: var(--color-tab-active-bg);
  box-shadow: inset 0 0 0 1px var(--color-tab-active-ring), 0 1px 2px rgb(0 20 50 / 0.2);
  color: var(--color-tab-active-fg);
}

/* Sliding period switch in the page header (Oct 12, 2026; after 21st.dev's segmented control):
   equal-width options, one raised thumb that slides under the selected one. */
.content .sliding-segmented {
  position: relative;
  isolation: isolate;
  margin: 0;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  flex-wrap: nowrap;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}

.content .sliding-segmented .segmented-thumb {
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--segment-count));
  border-radius: var(--radius-pill);
  background: var(--color-tab-secondary-active-bg);
  box-shadow: inset 0 0 0 1px var(--color-tab-secondary-active-ring), var(--shadow-raised);
  transform: translateX(calc(100% * var(--segment-index)));
  pointer-events: none;
}

.content .sliding-segmented button {
  min-width: 104px;
  color: var(--color-ink-2);
}

.content .sliding-segmented button.active,
.content .sliding-segmented button.active:hover {
  background: transparent;
  box-shadow: none;
  color: var(--color-ink-1);
}

.content .sliding-segmented button:hover:not(.active) {
  background: transparent;
  color: var(--color-ink-1);
}

/* Wider screens pick the report from the sidebar; phones (sidebar hidden) keep the row. */
@media (min-width: 821px) {
  .team-channel-row {
    display: none;
  }
}

/* Phones: full width, still a pill with equal options (beats the phone grid for .content .segmented). In the Sales Team
   search / roster row (Oct 13, 2026) it takes its own line above the buttons. */
@media (max-width: 820px) {
  .content :is(.hero-actions, .toolbar) .sliding-segmented {
    width: 100%;
    grid-template-columns: none;
    border-radius: var(--radius-pill);
  }

  .content :is(.hero-actions, .toolbar) .sliding-segmented button {
    min-width: 0;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .content :is(.hero-actions, .toolbar) .sliding-segmented button.active {
    box-shadow: none;
  }
}

/* High contrast: the thumb's tint is dropped, so the selected option is marked with system colours. */
@media (forced-colors: active) {
  .content .sliding-segmented .segmented-thumb {
    forced-color-adjust: none;
    background: Highlight;
  }

  .content .sliding-segmented button.active,
  .content :is(.hero-actions, .toolbar) .sliding-segmented button.active {
    forced-color-adjust: none;
    color: HighlightText;
  }
}

/* Cards and panels */
.card,
.panel {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-card);
}

.panel {
  overflow: hidden;
}

.inventory-rules-card > p {
  margin: 0;
  padding: 0 24px 20px;
  color: var(--color-ink-2);
  line-height: 1.5;
}

.panel-header {
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--color-hairline);
}

.panel-title {
  min-width: 0;
}

.panel-title h2 {
  margin: 0 0 2px;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
}

.panel-title p {
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.stat-label-row > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.stat-label-row > .badge {
  flex: none;
}

/* Stat tiles (Sales Team, Inventory, Daily Activity, Sales Results, One-on-ones summaries):
   caps label, numeral, footnote. A tile with a status adds a badge in a .stat-label-row or a
   text cue in its footnote; data-status draws the top accent. */
:is(.summary-card, .inventory-card) {
  --status-strong: transparent;
  position: relative;
  min-width: 0;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  container-type: inline-size;
}

/* Status tiles: the whole tile carries the status tint; the badge or footnote carries the words. */
:is(.summary-card, .inventory-card):is([data-status="ok"], [data-status="warn"], [data-status="crit"], [data-status="info"]) {
  background: var(--status-bg);
}

:is(.summary-card, .inventory-card):is([data-status="ok"], [data-status="warn"], [data-status="crit"], [data-status="info"]) .badge {
  background: var(--color-surface-1);
}

:is(.summary-card, .inventory-card) > span,
.stat-label-row > span:first-child {
  display: block;
  margin-bottom: 8px;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.02em;
  text-transform: none;
}

.stat-label-row {
  min-height: 22px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}

.stat-label-row > span:first-child {
  margin-bottom: 0;
}

:is(.summary-card, .inventory-card) > strong {
  display: block;
  color: var(--color-ink-1);
  font-size: clamp(1.375rem, 19cqi, 2.25rem);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

:is(.summary-card, .inventory-card) > strong:is(.rate-good, .positive-value) {
  color: var(--color-ok-fg);
}

:is(.summary-card, .inventory-card) > strong.rate-watch {
  color: var(--color-warn-fg);
}

:is(.summary-card, .inventory-card) > strong.rate-low {
  color: var(--color-crit-fg);
}

:is(.summary-card, .inventory-card) > small {
  display: block;
  margin-top: 6px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-wrap: pretty;
}

/* A date range or other words in place of a numeral: smaller, on the numeral's line box. */
.stat-text {
  min-height: calc(var(--font-size-stat) * 1.1);
  margin: 0;
  display: flex;
  align-items: flex-end;
  color: var(--color-ink-1);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-strong);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* A trend delta nested in a numeral keeps the numeral's size. */
:is(.summary-card, .inventory-card) > strong .activity-delta {
  display: inline-flex;
  margin: 0;
  font-size: inherit;
}

/* Inner tiles (drawer KPIs, write-down accounting). */
.drawer-kpi {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
}

.drawer-kpi > span {
  display: block;
  margin-bottom: 8px;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.drawer-kpi > strong {
  display: block;
  color: var(--color-ink-1);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.drawer-kpi > strong.rate-good,
.drawer-kpi > strong.positive-value {
  color: var(--color-ok-fg);
}

.drawer-kpi > small {
  display: block;
  margin-top: 4px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

/* Notices and inline messages: plain surface or soft tint with a 3px status edge. */
.inline-message {
  --status-fg: var(--color-info-fg);
  --status-bg: var(--color-info-bg);
  --status-strong: var(--color-info-strong);
  padding: 10px 12px 10px 14px;
  border: 1px solid color-mix(in oklab, var(--status-strong) 30%, var(--color-hairline));
  border-left: 3px solid var(--status-strong);
  border-radius: var(--radius-control);
  background: var(--status-bg);
  color: var(--status-fg);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.inline-message.error {
  --status-fg: var(--color-crit-fg);
  --status-bg: var(--color-crit-bg);
  --status-strong: var(--color-crit-strong);
}

.inline-message.success {
  --status-fg: var(--color-ok-fg);
  --status-bg: var(--color-ok-bg);
  --status-strong: var(--color-ok-strong);
}

.inline-message strong {
  font-weight: var(--font-weight-bold);
}

.inline-message:focus-visible {
  outline-offset: 2px;
}

/* Data-refresh alert: sits above the page, keeps the last good data visible, offers Retry. */
.data-refresh-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  font-size: var(--font-size-md);
}

.data-refresh-alert > span {
  flex: 1 1 24rem;
}

.data-refresh-alert .button {
  min-height: 36px;
  flex: none;
}

/* Status messages written by forms inside modals (Desk Log backfill, DriveCentric capture). */
.modal-body p[role="status"]:not(:empty) {
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-control);
  background: var(--color-surface-2);
  color: var(--color-ink-1);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.modal-body p[role="status"]:empty {
  display: none;
}

/* Notices inside pages. Inline notices keep a coloured leading edge; the page-level notes (data
   quality, sales results, inventory policy, drawer notes) are tinted cards like the status tiles.
   The colour follows the note's meaning and data-status overrides it when present. */
.notice {
  --status-strong: var(--color-warn-strong);
  border-left: 3px solid var(--status-strong);
}

:is(.data-quality-note, .sales-results-note, .drawer-quality-note) {
  --note-bg: var(--color-warn-bg);
  background: var(--note-bg);
  box-shadow: none;
}

:is(.rolling-average-note, .performance-period-source) {
  --note-bg: var(--color-info-bg);
}

:is(.performance-period-fallback, .performance-period-unavailable) {
  --note-bg: var(--color-warn-bg);
}

.sales-results-note {
  --note-bg: var(--color-ok-bg);
}

:is(.data-quality-note, .sales-results-note, .drawer-quality-note)[data-status] {
  --note-bg: var(--status-bg);
}

.notice {
  padding: 12px 16px;
  border: 1px solid var(--color-hairline);
  border-left-width: 3px;
  border-radius: var(--radius-inner);
  background: var(--color-surface-1);
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
}

/* List rows inside panels */
.status-row {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.status-row:not(:last-child) {
  border-bottom: 1px solid var(--color-hairline);
}

.status-copy {
  min-width: 0;
}

.status-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.status-copy span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

/* Toolbars: a filter row above a panel, not another card. */
.toolbar {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.content .toolbar.card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.toolbar :is(.input, .select) {
  min-height: 40px;
}

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

.search-field .input {
  padding-left: 38px;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--color-ink-3);
  translate: 0 -50%;
  pointer-events: none;
}

.compact-select {
  width: auto;
  min-width: 210px;
  min-height: 40px;
}

/* Sales Results › Month (Oct 20, 2026): sized to "Sep 2026"; on phones the .compact-select rule below lets it share the
   row (min-width 0, flex 1). */
.team-month-select {
  min-width: 132px;
}

.team-month-select.active {
  border-color: var(--color-brand);
  font-weight: var(--font-weight-strong);
}

/* Tables: caps header band, tabular right-aligned numbers, row hover, muted rank, avatar chips.
   .table-wrap scrolls sideways on narrow screens; the first column stays put there. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
}

.data-table th {
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-hairline);
  background: transparent;
  color: var(--color-ink-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.data-table td {
  height: 64px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: middle;
  font-size: var(--font-size-body);
}

.data-table :is(th, td):first-child {
  padding-left: 20px;
}

.data-table :is(th, td):last-child {
  padding-right: 20px;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr.clickable {
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard);
}

.data-table tbody tr.clickable:hover {
  background: var(--color-row-hover);
}

/* Full-bleed rows sit inside clipped panels: keep their ring inside the row. */
.data-table tbody tr.clickable:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.data-table .right {
  text-align: right;
}

.data-table .center {
  text-align: center;
}

.data-table .tertiary {
  font-size: var(--font-size-sm);
}

.rep-cell {
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-number {
  width: 20px;
  flex: none;
  color: var(--color-ink-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
}

.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-avatar-bg);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  color: var(--color-avatar-fg);
  font-size: var(--font-size-xs);
  font-weight: 750;
  letter-spacing: 0.02em;
}

.rep-name {
  min-width: 0;
}

.rep-name strong {
  display: block;
  margin-bottom: 1px;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.rep-name span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.vin {
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
}

/* Empty states */
.empty-state {
  min-height: 240px;
  padding: 40px 24px;
  display: grid;
  place-items: center;
  text-align: center;
}

.empty-state-inner {
  max-width: 440px;
}

.empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-accent-text);
}

.empty-state h2 {
  margin-bottom: 6px;
  font-size: var(--font-size-xl);
}

.empty-state p {
  margin: 0 auto 18px;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  text-wrap: pretty;
}

/* Skeletons and busy regions (for loaders that keep the layout). */
.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--color-skeleton) 0 35%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 65% 100%) 0 0 / 300% 100%;
  animation: skeleton-sweep 1.4s var(--ease-standard) infinite;
}

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

[aria-busy="true"] {
  cursor: progress;
}

/* Modals (inside #overlay-root): scrim, rounded sheet, scrolling body, footer always visible. */
.modal-backdrop,
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-scrim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in var(--duration-base) var(--ease-standard);
}

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 110;
  padding: 24px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.modal {
  width: min(560px, 100%);
  max-height: min(calc(100dvh - 48px), 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-overlay);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
  animation: modal-in var(--duration-slow) var(--ease-standard);
}

.modal > form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.modal-header {
  min-height: 64px;
  flex: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--color-hairline);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.modal-header .eyebrow {
  margin-bottom: 3px;
}

.modal-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.modal-body > p:not([class]) {
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.modal-footer {
  flex: none;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-surface-2);
}

/* Drawers (rep coaching plan, inventory vehicle): full-height sheet from the right. */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 110;
  width: min(480px, 94vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-left: 0;
  background: var(--color-surface-1);
  box-shadow: var(--shadow-overlay);
  animation: drawer-in var(--duration-slow) var(--ease-standard);
}

.drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 68px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--color-hairline);
  background: color-mix(in oklab, var(--color-surface-1) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.drawer-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.drawer-header .eyebrow {
  margin-bottom: 3px;
}

.drawer-body {
  padding: 22px;
}

/* Floating detail page (detail-page.js FLOAT_CLASS): the rep and vehicle drawers as a centered page that
   grows out of the row that opened it (Element.animate, on open only) instead of sliding in from the right.
   Every rule names .drawer--float, so the Claude side panel (.drawer.claude-panel) is untouched. Centered
   with inset + the translate property, so the grow animation's transform composes with it. */
.drawer-backdrop:has(> .drawer--float) {
  background: var(--color-scrim-strong);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: none;
}

.drawer-backdrop.is-entering:has(> .drawer--float) {
  animation: fade-in var(--duration-base) var(--ease-standard);
}

.drawer.drawer--float {
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: min(560px, calc(100vw - 32px));
  height: auto;
  max-height: min(80vh, 720px);
  padding: 0;
  border: 1px solid var(--color-hairline-strong);
  /* Accent-tinted edge and a faint accent ring (Agent Hub look); the hairline above is the fallback. */
  border-color: color-mix(in oklab, var(--rp-accent) 45%, var(--color-hairline-strong));
  border-radius: 18px;
  box-shadow: var(--shadow-overlay);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--rp-accent) 16%, transparent), var(--shadow-overlay);
  animation: none;
  transition:
    width var(--duration-slow) var(--ease-standard),
    height var(--duration-slow) var(--ease-standard),
    max-height var(--duration-slow) var(--ease-standard);
}

.drawer.drawer--float.is-expanded {
  width: min(1100px, calc(100vw - 48px));
  height: min(88vh, 900px);
  max-height: none;
}

.drawer--float.is-expanded .drawer-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rp-float-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.rp-float-tool {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-surface-2);
  box-shadow: none;
  color: var(--color-ink-1);
  font-size: 15px;
  line-height: 1;
}

.rp-float-tool:hover {
  background: color-mix(in oklab, var(--rp-accent) 22%, var(--color-surface-2));
}

@media (max-width: 640px) {
  .drawer.drawer--float,
  .drawer.drawer--float.is-expanded {
    width: calc(100vw - 32px);
    height: auto;
    max-height: calc(100dvh - 32px);
  }

  .drawer--float .rp-float-tool[aria-label="Expand"],
  .drawer--float .rp-float-tool[aria-label="Shrink"] {
    display: none;
  }
}

.drawer-profile {
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--color-hairline);
}

.drawer-profile .avatar {
  width: 52px;
  height: 52px;
  font-size: var(--font-size-lg);
}

.drawer-profile h2 {
  margin-bottom: 3px;
  font-size: var(--font-size-2xl);
}

.drawer-profile .muted {
  font-size: var(--font-size-sm);
}

.drawer-kpis {
  margin: 18px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-list {
  border-top: 1px solid var(--color-hairline);
}

.detail-row {
  min-height: 48px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-hairline);
}

.detail-row > span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.detail-row strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.detail-row strong .badge {
  vertical-align: middle;
}

/* Toasts */
.toast-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  width: min(360px, calc(100vw - 36px));
  min-height: 48px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  background: var(--color-surface-1);
  box-shadow: var(--shadow-overlay);
  pointer-events: auto;
  animation: toast-in var(--duration-slow) var(--ease-standard);
}

.toast-dot {
  --dot: var(--color-accent);
  width: 8px;
  height: 8px;
  margin-top: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--dot) 18%, transparent);
}

.toast .toast-close {
  margin: -6px -6px -6px auto;
  flex: none;
}

.toast.error .toast-dot {
  --dot: var(--color-crit-strong);
}

.toast.success .toast-dot {
  --dot: var(--color-ok-strong);
}

.toast strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
}

.toast p {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

/* Components, responsive */
@media (max-width: 820px) {
  :is(.summary-card, .inventory-card, .drawer-kpi) > span,
  .stat-label-row > span:first-child {
    letter-spacing: 0.04em;
  }

  /* Pill tabs become an even grid of soft rectangles so every option stays visible. */
  .content .segmented {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.25rem), 1fr));
    border-radius: 14px;
  }

  .content .segmented button {
    padding: 0 10px;
    border-radius: var(--radius-control);
  }

  .content .segmented button.active {
    box-shadow: inset 0 0 0 1px var(--color-tab-active-ring);
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar-group {
    width: 100%;
  }

  .search-field {
    width: 100%;
    min-width: 0;
  }

  .compact-select {
    min-width: 0;
    flex: 1;
  }

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

  /* First table column stays visible while the rest scrolls. */
  .table-wrap .data-table :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface-1);
    box-shadow: 1px 0 0 var(--color-hairline);
  }

  .table-wrap .data-table th:first-child {
    z-index: 2;
    background: var(--color-surface-2);
  }

  .data-table :is(th, td):first-child {
    padding-left: 14px;
  }

  .data-table :is(th, td):last-child {
    padding-right: 14px;
  }

  .modal-wrap {
    padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    place-items: end center;
  }

  .modal {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top));
    border-radius: var(--radius-overlay) var(--radius-overlay) 14px 14px;
  }

  .modal-footer .button {
    flex: 1 1 auto;
  }

  .drawer {
    width: 100vw;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    border-left: 0;
  }

  .drawer-header {
    padding-right: max(20px, env(safe-area-inset-right));
    padding-left: max(20px, env(safe-area-inset-left));
  }

  .drawer-body {
    padding: 20px max(18px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  .toast-root {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .drawer-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .stat-label-row {
    align-items: flex-start;
    flex-direction: column;
  }

  :is(.summary-card, .inventory-card) {
    padding: 13px 14px 14px;
  }

  :is(.summary-card, .inventory-card) > strong {
    font-size: 1.375rem;
  }

  .stat-text {
    min-height: calc(1.375rem * 1.1);
    font-size: var(--font-size-md);
  }

  .toast-root {
    right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

/* Touch: 44px targets on coarse pointers and on phone layouts. */
@media (pointer: coarse), (max-width: 820px) {
  .button,
  .segmented button,
  .content .segmented button,
  .panel-action,
  .hero-actions .button,
  .team-sort-button {
    min-height: var(--target-touch);
  }

  .icon-button {
    width: var(--target-touch);
    height: var(--target-touch);
  }

  .check-button::after {
    inset: -11px;
  }

  :is(.input, .select),
  .toolbar :is(.input, .select) {
    min-height: var(--target-touch);
  }

  /* 16px text in fields stops iOS from zooming the page on focus. */
  :is(.input, .select, .textarea) {
    font-size: var(--font-size-lg);
  }
}

@media (forced-colors: active) {
  .badge,
  .segmented {
    border: 1px solid CanvasText;
  }

  .badge::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .segmented button.active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  /* Tints and shadows disappear in forced colours: cards, overlays and toasts get an outline and
     status tiles a heavy top edge. */
  :is(.card, .panel, .modal, .drawer, .toast) {
    border: 1px solid;
  }

  :is(.summary-card, .inventory-card):is([data-status="ok"], [data-status="warn"], [data-status="crit"], [data-status="info"]) {
    border-top-width: 3px;
  }

  .select {
    appearance: auto;
    padding-right: 12px;
    background-image: none;
  }

  :is(.input, .select, .textarea):focus {
    outline: 2px solid Highlight;
  }

  .toast-dot {
    forced-color-adjust: none;
    background: CanvasText;
    box-shadow: none;
  }

  .data-table tbody tr.clickable:hover {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}

/* 5. PAGES ======================================================================================== */

.column-stack {
  display: grid;
  gap: 20px;
}

/* Metric boxes: caps label, numeral and footnote. */
.metric-box > span {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

/* Sales Team and Inventory summary grids (tiles are .summary-card / .inventory-card components). */
.team-summary-grid {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.inventory-summary {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* Reports */
.report-rejections {
  margin-bottom: var(--space-4);
}

.report-rejection-row .status-copy span {
  display: block;
}

/* Settings › Admin › Reports (Oct 13, 2026): the former Reports page, stacked inside the Admin card. The one column
   is minmax(0, 1fr), so no item's content (the report library's horizontal scroller on phones) can widen the stack
   past the card and scroll the page sideways. */
.reports-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* On phones each source or rejected-file row stacks: the copy takes the full width and long messages wrap, with
   the status badge under it. */
@media (max-width: 700px) {
  .reports-admin .status-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 14px;
    padding: 12px 16px;
  }

  .reports-admin .status-copy {
    flex: 1 1 100%;
    overflow-wrap: anywhere;
  }
}

.reports-admin .reports-admin-actions {
  justify-content: flex-start;
  margin-top: 0;
}

.reports-console {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.report-library {
  overflow: hidden;
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-4));
}

.report-library-header {
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.report-library-header span {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.report-library-header strong {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
}

.report-library-header .report-library-health {
  color: var(--color-ok-fg);
  font-size: var(--font-size-sm);
  letter-spacing: 0;
  text-transform: none;
}

.report-list {
  max-height: min(68vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.report-row {
  width: 100%;
  min-height: 76px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  color: var(--color-ink-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.report-row:last-child {
  border-bottom: 0;
}

.report-row:hover {
  background: var(--color-row-hover);
}

.report-row.selected {
  background: color-mix(in oklab, var(--color-brand) 8%, var(--color-surface-1));
  box-shadow: inset 3px 0 var(--color-brand);
}

/* Rows sit inside a clipped panel: keep the ring inside. */
.report-row:focus-visible {
  outline-offset: -2px;
}

.report-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  background: var(--color-surface-3);
  color: var(--color-ink-2);
}

.report-row-icon .icon {
  width: 16px;
  height: 16px;
}

.report-row-copy,
.report-row-copy strong,
.report-row-copy span,
.report-row-copy small {
  min-width: 0;
  display: block;
}

.report-row-copy strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.report-row-copy span {
  margin-top: 2px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

/* The source filename is supporting detail; the full name is in its title attribute. */
.report-row-copy small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-ink-3);
  font-size: var(--font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-detail-column {
  min-width: 0;
}

.report-detail-column > .panel {
  overflow: hidden;
}

.report-detail-column .empty-state {
  min-height: 180px;
  padding: 28px 20px;
}

.report-detail-column .vincue-report-scope {
  margin: var(--space-4) var(--space-5) var(--space-5);
}

.report-detail-table {
  border-top: 1px solid var(--color-hairline);
}

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

.metric-box {
  min-height: 88px;
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.metric-box:nth-child(4n) {
  border-right: 0;
}

.metric-box span {
  margin-bottom: var(--space-2);
}

.metric-box strong {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* Report modals (VinCue validation, rolling report capture, Desk Log history, salesperson and
   historical-sale review). */
.vincue-preview-modal,
.review-modal {
  width: min(640px, 100%);
}

.modal-lede {
  color: var(--color-ink-2);
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.vincue-preview-safety {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-info-strong);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
}

.vincue-preview-safety strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
}

.vincue-preview-safety strong .icon {
  width: 16px;
  height: 16px;
  color: var(--color-info-fg);
}

.vincue-preview-safety p,
.vincue-file-help,
.vincue-preview-confirmation {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.vincue-preview-safety p {
  margin-top: var(--space-1);
}

.vincue-file-input {
  min-height: 48px;
  padding: var(--space-2);
}

.vincue-file-input::file-selector-button {
  min-height: 32px;
  margin-right: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  color: var(--color-ink-1);
  font: inherit;
  font-weight: var(--font-weight-heading);
  cursor: pointer;
}

.vincue-preview-result {
  padding: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
}

.vincue-preview-result-header,
.vincue-preview-warnings > div,
.vincue-preview-warnings li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.vincue-preview-result-header h3,
.vincue-preview-result-title {
  margin-top: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
}

.vincue-preview-summary {
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-2);
}

.vincue-preview-summary > :is(span, div) {
  padding: var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-1);
}

.vincue-preview-summary :is(small, dt) {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.vincue-preview-summary :is(strong, dd) {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
}

.vincue-preview-warnings {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-hairline);
}

.vincue-preview-warnings > div strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-sm);
}

.vincue-preview-warnings > div span,
.vincue-preview-warnings p {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.vincue-preview-warnings ul {
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  list-style: none;
}

.vincue-preview-warnings li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--color-surface-3);
}

.vincue-preview-warnings code {
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.vincue-preview-warnings li strong {
  font-size: var(--font-size-sm);
}

.vincue-preview-confirmation {
  margin-top: var(--space-3);
}

.review-card {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-1);
  display: grid;
  gap: var(--space-2);
}

.review-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-card-head h3 {
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

.review-card-meta {
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
}

.review-card-note {
  color: var(--color-warn-fg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.review-card-actions {
  margin-top: var(--space-2);
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.review-card-actions .field {
  flex: 1 1 220px;
}

.review-empty {
  color: var(--color-ink-2);
  font-size: var(--font-size-body);
}

/* One-on-ones */
.commitment-list {
  display: grid;
  gap: var(--space-3);
}

.commitment-card {
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: start;
}

/* Completed commitments recede through a quieter surface and secondary ink, not opacity, so
   every line keeps AA contrast. */
.commitment-card.done {
  background: var(--color-surface-2);
  box-shadow: none;
}

.commitment-card.done .commitment-title {
  color: var(--color-ink-2);
  font-weight: var(--font-weight-strong);
  text-decoration: line-through;
  text-decoration-color: var(--color-ink-3);
}

.commitment-title {
  margin-bottom: var(--space-2);
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

.commitment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.commitment-note {
  margin-top: var(--space-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
}

.commitment-side {
  min-width: 96px;
  text-align: right;
}

.commitment-side strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
}

.commitment-side span {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
}

/* Settings */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.settings-section {
  padding: var(--space-6);
}

/* The left column may shrink below its widest content (the Claude usage table scrolls inside its card). */
.settings-layout > div:not(.column-stack) {
  min-width: 0;
}

/* The right column is a .column-stack (grid gap); the left column stacks by margin. */
.settings-layout > div:not(.column-stack) > .settings-section + .settings-section {
  margin-top: 20px;
}

.settings-section-header {
  margin-bottom: var(--space-5);
}

.settings-section-header h2 {
  color: var(--color-ink-1);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
}

.settings-section-header p {
  margin-top: 2px;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
}

.settings-note {
  margin-top: var(--space-5);
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
}

.settings-signout {
  margin-top: var(--space-5);
}

.drawer-roster-action {
  margin-top: var(--space-5);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.setting-row {
  min-height: 60px;
  padding: var(--space-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-hairline);
}

.setting-row:last-child {
  border-bottom: 0;
}

.settings-section-header + .setting-row {
  padding-top: 0;
}

.setting-copy {
  min-width: 0;
}

.setting-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.setting-copy span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.theme-option {
  min-height: 56px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  display: grid;
  place-items: center;
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.theme-option:hover {
  border-color: var(--color-control-border-strong);
  color: var(--color-ink-1);
}

.theme-option.active {
  border-color: var(--color-brand);
  background: var(--color-surface-1);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  color: var(--color-ink-1);
}

.code-block {
  margin-top: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  overflow-x: auto;
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

/* Pages above, responsive (shell and component breakpoints live with those sections). */
@media (max-width: 1180px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-layout > .column-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric-box:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 820px) {
  .column-stack,
  .settings-layout {
    gap: 14px;
  }

  .auth-stats {
    grid-template-columns: 1fr;
  }

  .auth-stat {
    min-height: 75px;
    border-right: 0;
    border-bottom: 1px solid var(--color-hairline);
  }

  .auth-stat:last-child {
    border-bottom: 0;
  }

  .team-summary-grid,
  .inventory-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .reports-console {
    display: block;
  }

  .report-library {
    position: static;
    margin-bottom: 14px;
  }

  .report-list {
    max-height: none;
    padding: 8px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .report-row {
    min-width: min(78vw, 300px);
    min-height: 70px;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-control);
    scroll-snap-align: start;
  }

  .report-row:last-child {
    border-bottom: 1px solid var(--color-hairline);
  }

  .report-row.selected {
    border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-hairline));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 30%, transparent);
  }

  .settings-layout > .column-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .team-summary-grid,
  .inventory-summary {
    grid-template-columns: 1fr 1fr;
  }

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

  .metric-box,
  .metric-box:nth-child(2n),
  .metric-box:nth-child(4n) {
    border-right: 0;
  }

  .report-detail-column .metric-box:nth-child(odd) {
    border-right: 1px solid var(--color-hairline);
  }

  .report-detail-column .metric-box:nth-child(even) {
    border-right: 0;
  }

  .commitment-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .commitment-side {
    grid-column: 2;
    text-align: left;
  }

  .theme-options {
    grid-template-columns: 1fr;
  }
}

/* Sales Team channel views */

/* Notices on the Sales Team page: plain surface, hairline border and a 3px status edge (the
   edge colour comes from the notice family rules in Components). Copy-only notices span the full
   width; notices with figures (attribution, VinCue scope) put the figures beside the copy. */
.data-quality-note {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4) var(--space-5);
}

.data-quality-note:has(> .attribution-grid) {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.35fr);
}

/* Attribution notices carry four or five reconciliation figures: copy above, figures in one row. */
.data-quality-note.attribution-notice {
  grid-template-columns: minmax(0, 1fr);
}

.attribution-notice .attribution-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.data-quality-copy {
  max-width: 72rem;
}

.data-quality-copy strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

.data-quality-copy p {
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.data-quality-copy p + p {
  margin-top: var(--space-1);
}

.attribution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.attribution-metric {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
}

.attribution-metric span,
.attribution-metric small {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--leading-snug);
}

.attribution-metric > span {
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.attribution-metric > strong {
  display: block;
  margin: var(--space-1) 0 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Sortable Sales Team table */
.team-channel-table th,
.team-channel-table td {
  white-space: nowrap;
}

.team-channel-table th.sortable-team-column {
  padding: 0;
}

.team-sort-button {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard);
}

/* Sales -> Sources: vendor names open their detailed DriveCentric sources. */
.source-vendor-toggle,
.source-assign-button {
  min-height: 32px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.source-vendor-toggle::before {
  content: "\25B8";
  color: var(--color-ink-3);
}

.source-vendor-toggle[aria-expanded="true"]::before {
  content: "\25BE";
}

.source-vendor-toggle:hover,
.source-assign-button:hover {
  color: var(--color-ink-1);
}

.source-assign-button {
  margin-left: 10px;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.source-store-row th,
.source-store-row td {
  font-weight: 700;
}

.source-detail-row th {
  padding-left: 34px;
  font-weight: 400;
  color: var(--color-ink-2);
}

.source-unattributed-row th {
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink-2);
}

.sortable-team-column:first-child .team-sort-button {
  justify-content: flex-start;
  padding-left: 20px;
}

.team-sort-button:hover,
.team-sort-button.active {
  color: var(--color-ink-1);
}

/* Header cells sit inside a clipped panel: keep the ring inside. */
.team-sort-button:focus-visible {
  position: relative;
  z-index: 2;
  outline-offset: -2px;
}

.team-sort-indicator {
  width: 10px;
  display: inline-flex;
  justify-content: center;
  color: var(--color-ink-3);
  font-size: var(--font-size-xs);
  line-height: 1;
}

.team-sort-button.active .team-sort-indicator {
  color: var(--color-accent-text);
}

@media (pointer: coarse), (max-width: 820px) {
  .team-sort-button {
    min-height: var(--target-touch);
  }

  .sortable-team-column:first-child .team-sort-button {
    padding-left: 14px;
  }
}

/* Drawer sections (rep coaching plan, inventory vehicle) */
.drawer-channel-section {
  margin-top: 22px;
}

.drawer-section-heading {
  min-height: 30px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.drawer-section-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-section-heading strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
}

.drawer-section-heading small {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Channel dots are categorical (always next to the channel name). */
.channel-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-channel-internet);
}

.channel-dot.phone {
  background: var(--color-channel-phone);
}

.channel-dot.showroom {
  background: var(--color-channel-showroom);
}

.channel-dot.sales-results {
  background: var(--color-channel-results);
}

.drawer-quality-note {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--color-hairline);
  border-left-width: 3px;
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

@media (max-width: 820px) {
  .data-quality-note,
  .data-quality-note:has(> .attribution-grid) {
    padding: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .attribution-grid,
  .attribution-notice .attribution-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .attribution-metric {
    padding: var(--space-2) var(--space-3);
  }

  .attribution-metric > span {
    letter-spacing: 0.04em;
  }
}

/* Inventory management 0.3.4 */

/* Source freshness card: scope tiles carry status (white, bordered); input files are quieter
   sand-tinted siblings. */
.inventory-source-health {
  margin-bottom: 14px;
  padding: 16px 18px;
  overflow: hidden;
}

.inventory-source-health.has-warning {
  border-color: color-mix(in oklab, var(--color-warn-strong) 34%, var(--color-hairline));
  background: color-mix(in oklab, var(--color-warn-bg) 45%, var(--color-surface-1));
}

.inventory-source-health-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inventory-source-health .eyebrow {
  margin-bottom: 3px;
}

.inventory-source-health-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
}

.inventory-source-scope-grid,
.inventory-source-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.inventory-source-scope-grid {
  margin-top: 12px;
}

.inventory-source-scope {
  min-height: 0;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-1);
}

.inventory-source-scope strong,
.inventory-source-inputs strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.inventory-source-scope span:not(.badge),
.inventory-source-inputs span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.inventory-source-scope > .badge {
  flex: none;
}

.inventory-source-inputs {
  margin-top: 8px;
}

.inventory-source-inputs > span {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-inner);
  background: color-mix(in oklab, var(--color-surface-3) 75%, var(--color-surface-1));
}

.inventory-source-rule {
  margin-top: 10px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

/* Write-down accounting: a three-up stat row above the owed ledger. */
.inventory-accounting-panel {
  margin-bottom: 16px;
}

.inventory-accounting-summary {
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-bottom: 1px solid var(--color-hairline);
}

.inventory-accounting-summary .drawer-kpi > strong {
  margin-top: 2px;
  font-size: var(--font-size-2xl);
}

.inventory-accounting-panel > .inventory-disposition-callout {
  margin: 16px 20px 20px;
}

.inventory-management-table td:first-child {
  min-width: 220px;
}

.inventory-management-table .inventory-badge-row {
  margin-top: 7px;
}

.inventory-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-src-badge {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

.inventory-manage-button {
  min-width: 68px;
}

.inventory-drawer {
  width: min(520px, 96vw);
}

.inventory-drawer-profile {
  align-items: flex-start;
}

.inventory-vehicle-mark {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface-1));
  color: var(--color-accent-text);
}

.inventory-vehicle-mark .icon {
  width: 24px;
  height: 24px;
}

/* Drawer callouts: plain inner tile; SRC, active and sold add a 3px status edge. */
.inventory-src-callout,
.inventory-disposition-callout {
  --status-strong: var(--color-hairline-strong);
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--status-strong);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
}

.inventory-src-callout {
  --status-strong: var(--color-info-strong);
  background: color-mix(in oklab, var(--color-info-bg) 55%, var(--color-surface-1));
}

.inventory-disposition-callout.active {
  --status-strong: var(--color-ok-strong);
}

.inventory-disposition-callout.sold {
  --status-strong: var(--color-crit-strong);
}

.inventory-src-callout > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-src-callout strong,
.inventory-disposition-callout strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
}

.inventory-src-callout p,
.inventory-disposition-callout p,
.inventory-section-note {
  margin-top: 6px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
}

.inventory-action-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.disposition-actions {
  grid-template-columns: minmax(120px, 0.8fr) minmax(190px, 1.2fr);
}

@media (max-width: 820px) {
  .inventory-management-table th:nth-child(5),
  .inventory-management-table td:nth-child(5) {
    display: none;
  }

  .inventory-action-grid,
  .disposition-actions {
    grid-template-columns: 1fr;
  }

  .inventory-accounting-summary {
    padding: 14px;
    grid-template-columns: 1fr;
  }

  .inventory-accounting-panel > .inventory-disposition-callout {
    margin: 14px;
  }

}

@media (max-width: 480px) {
  .vincue-preview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inventory-source-health {
    padding: 14px;
  }

  .inventory-source-scope-grid,
  .inventory-source-inputs {
    grid-template-columns: 1fr;
  }

}

/* Inventory SRC controls 0.3.5 */
.inventory-src-callout + .button,
.inventory-disposition-callout + .button,
.inventory-section-note + .button {
  margin-top: 12px;
}

/* Data-backed coaching and roster management 0.3.9 */
.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Caps labels inside coaching cards, drawer sections and the strips below. */
.commitment-status-grid span {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.coaching-weakness-detail p,
.coaching-weakness-detail small,
.commitment-status-grid small {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
}

.coaching-bullet-list,
.coaching-question-list,
.roster-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Small figure tiles inside a coaching card: one quiet surface, hairline, caps label. */
:is(.activity-trend-strip > div, .channel-close-metric, .commitment-status-grid > div, .coaching-weakness-detail) {
  min-width: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  background: var(--color-surface-2);
}

.roster-columns {
  padding: var(--space-2) var(--space-5) var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.roster-columns h4 {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.roster-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.roster-list > .roster-row:last-child {
  border-bottom: 0;
}

.roster-person {
  min-width: 0;
  min-height: var(--target-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.roster-person span:last-child {
  min-width: 0;
}

.roster-person strong,
.roster-person small {
  display: block;
}

.roster-person strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.roster-person small {
  max-width: 320px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-person:hover strong {
  color: var(--color-accent-text);
}

.coaching-drawer {
  width: min(620px, 100%);
}

.coaching-plan-section {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-hairline-strong);
}

.coaching-bullet {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.coaching-bullet > span {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-ok-strong);
}

.coaching-bullet p,
.coaching-question-list p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
  line-height: var(--leading-relaxed);
}

.coaching-weakness-detail {
  padding: var(--space-3);
}

.coaching-weakness-detail > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.coaching-question-list > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.coaching-question-list > div > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 50%;
  color: var(--color-ink-1);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.commitment-status-grid {
  margin-bottom: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.commitment-status-grid > div {
  padding: var(--space-3);
}

.commitment-status-grid strong {
  display: block;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  line-height: var(--leading-body);
}

@media (max-width: 860px) {
  .roster-columns,
  .commitment-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .roster-row {
    align-items: flex-start;
  }

  .roster-columns {
    padding: var(--space-1) var(--space-4) var(--space-3);
  }
}

/* Channel closing 0.4.0 */
.channel-close-metric {
  padding: var(--space-3);
  display: grid;
  gap: 2px;
}

.channel-close-metric > span {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.channel-close-metric > strong {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.channel-close-metric > small {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--leading-snug);
}

/* Daily Activity trend monitoring 0.4.1 */
.activity-summary-grid {
  margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.activity-trend-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.activity-trend-strip > div {
  padding: var(--space-3);
}

.activity-trend-strip > div > span:first-child,
.activity-trend-strip > div > small {
  display: block;
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  line-height: var(--leading-snug);
}

.activity-trend-strip > div > strong,
.activity-trend-strip .activity-delta {
  display: block;
  margin: var(--space-1) 0 2px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.activity-delta {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.activity-delta small {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

/* In the strip tiles the delta's label sits on its own line under the figure. */
.activity-trend-strip .activity-delta small {
  display: block;
  margin-top: 2px;
  line-height: var(--leading-snug);
}

.activity-sparkline {
  width: 100%;
  height: 34px;
  color: var(--color-brand);
  overflow: visible;
}

.activity-sparkline-baseline {
  fill: none;
  stroke: var(--color-hairline);
  stroke-width: 1;
}

.activity-sparkline-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.drawer-activity-trend {
  margin-top: var(--space-3);
}

.activity-history-heading {
  margin: var(--space-4) 0 var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.activity-history-heading strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
}

.activity-history-heading small,
.activity-history-empty {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.activity-history-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
}

.activity-history-table {
  width: 100%;
  min-width: 430px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.activity-history-table th,
.activity-history-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-hairline);
  font-size: var(--font-size-sm);
  text-align: left;
}

.activity-history-table th {
  background: var(--color-surface-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.activity-history-table tr:last-child td {
  border-bottom: 0;
}

.activity-history-table .right {
  text-align: right;
}

.daily-trend-explorer {
  margin: 0 0 20px;
  overflow: hidden;
}

.daily-trend-header {
  padding: var(--space-5) var(--space-5) var(--space-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.daily-trend-header h2 {
  margin: var(--space-1) 0 2px;
  color: var(--color-ink-1);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-tight);
}

.daily-trend-header p,
.daily-trend-footnote {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.daily-trend-controls {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.daily-trend-controls label {
  display: grid;
  gap: var(--space-1);
}

.daily-trend-controls label > span {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.daily-trend-controls .select {
  min-width: 132px;
}

.daily-export-button {
  min-height: 40px;
  white-space: nowrap;
}

.daily-export-button svg {
  width: 16px;
  height: 16px;
}

.daily-trend-legend {
  padding: var(--space-1) var(--space-5) 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
}

.daily-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.daily-trend-bar-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--color-brand) 82%, transparent);
}

.daily-trend-line-swatch {
  width: 14px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-ok-strong);
}

.daily-trend-chart-wrap {
  padding: 0 var(--space-3) 2px;
  overflow-x: auto;
}

.daily-trend-chart {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.daily-trend-axis line {
  stroke: var(--color-hairline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.daily-trend-axis text,
.daily-trend-date {
  fill: var(--color-ink-2);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.daily-trend-bar {
  fill: color-mix(in oklab, var(--color-brand) 82%, transparent);
}

.daily-trend-average-dot {
  fill: var(--color-ok-strong);
}

.daily-trend-average-line {
  fill: none;
  stroke: var(--color-ok-strong);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.daily-trend-footnote {
  padding: var(--space-2) var(--space-5) var(--space-4);
}

@media (max-width: 900px) {
  .activity-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-trend-header {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-trend-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .activity-trend-strip {
    grid-template-columns: 1fr;
  }

  .daily-trend-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
  }

  .daily-trend-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-trend-controls label:first-child {
    grid-column: 1 / -1;
  }

  .daily-trend-controls .select {
    width: 100%;
    min-width: 0;
  }

  .daily-export-button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .daily-trend-legend {
    padding: var(--space-1) var(--space-4) 0;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }

  .daily-trend-footnote {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
}

/* Desk Log sales results and coaching 0.4.2 */
.sales-results-summary-grid {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* DealerOps sales history (Oct 20, 2026): the units no salesperson row shows (names not on the roster, inactive, none). */
.sales-results-other {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sales-results-note {
  margin-bottom: 14px;
  padding: 14px 16px 14px 20px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 20px;
  background: var(--color-surface-1);
}

.sales-results-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
}

.sales-results-note p,
.sales-results-rules span {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.sales-results-rules {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.sales-results-rules span {
  padding: 5px 10px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
}

.table-delta {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
}

.sales-sparkline {
  color: var(--color-channel-results);
}

@media (max-width: 1180px) {
  .sales-results-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .sales-results-note {
    padding: 14px 14px 14px 16px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sales-results-rules {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .sales-results-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* SalesOne admin portal and view-only access 0.6.0 */
.admin-portal-card {
  margin-bottom: 20px;
}

.admin-portal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.admin-portal-header .eyebrow {
  margin-bottom: var(--space-2);
}

.admin-portal-count {
  min-width: 120px;
  flex: none;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  background: var(--color-surface-2);
  text-align: center;
}

.admin-portal-count strong,
.admin-portal-count span {
  display: block;
}

.admin-portal-count strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-stat);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.admin-portal-count span {
  margin-top: var(--space-1);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.admin-portal-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.6fr);
  gap: var(--space-6);
}

.admin-invite-form,
.admin-member-list-section {
  min-width: 0;
}

.admin-invite-form {
  padding: var(--space-5);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  display: grid;
  align-content: start;
  gap: var(--space-4);
  background: var(--color-surface-2);
}

/* Invite / reset link box (Oct 14, 2026): sits above the access list until it is closed. */
.admin-invite-box {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  display: grid;
  gap: var(--space-3);
  background: var(--color-surface-2);
}

.admin-invite-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
}

.admin-invite-box .input {
  width: 100%;
  min-width: 0;
}

.admin-invite-box-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Section titles stack: title, then its description on its own line. */
.admin-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.admin-invite-form .admin-section-title {
  display: block;
}

.admin-section-title h3 {
  margin: 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
}

.admin-section-title p {
  margin: 2px 0 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.admin-checkbox {
  padding: var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-control);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface-1);
  cursor: pointer;
}

/* Native checkbox at the 24px minimum target, in the brand colour. */
.checkbox-input {
  width: var(--target-min);
  height: var(--target-min);
  margin: 0;
  flex: none;
  accent-color: var(--color-brand);
  cursor: pointer;
}

.admin-checkbox span,
.admin-checkbox strong,
.admin-checkbox small {
  display: block;
}

.admin-checkbox strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  line-height: var(--target-min);
}

.admin-checkbox small {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.admin-member-list-title {
  margin-bottom: var(--space-3);
}

/* Settings -> Admin menu: Access | Sales roster, one section open at a time (0.10.x). */
.content .admin-menu-tabs {
  margin: 0 0 var(--space-5);
}

.admin-roster {
  min-width: 0;
}

.admin-roster .roster-columns {
  padding: 0;
}

.admin-roster-state.inline-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Sales roster -> New names from imports: DriveCentric / Desk Log names with no salesperson. */
.unmatched-names {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  display: grid;
  gap: var(--space-3);
}

.unmatched-names > .admin-section-title .button {
  flex: none;
  white-space: nowrap;
}

.unmatched-names .admin-portal-state {
  min-height: 64px;
}

.unmatched-empty {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.unmatched-name-list {
  display: grid;
  gap: var(--space-2);
}

.unmatched-name-row {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
}

.unmatched-name-main {
  min-width: 0;
}

.unmatched-name-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.unmatched-name-title strong {
  min-width: 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.unmatched-name-meta,
.unmatched-name-note {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.unmatched-name-note {
  max-width: 62ch;
  text-wrap: pretty;
}

.unmatched-name-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.admin-tab-count {
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.unmatched-source-line {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.unmatched-source-line strong {
  color: var(--color-ink-1);
}

.source-name-modal .field-help {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.source-name-status:empty {
  display: none;
}

.source-name-status {
  margin: 0;
  color: var(--color-crit-fg);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

@media (max-width: 620px) {
  .unmatched-name-row {
    flex-direction: column;
    align-items: stretch;
  }

  .unmatched-name-actions {
    justify-content: flex-start;
  }

  .unmatched-name-actions .button {
    flex: 1 1 auto;
  }
}

.admin-member-list {
  display: grid;
  gap: var(--space-2);
}

/* Member row: identity above its badges and last sign-in; actions on the right. */
.admin-member-row {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  display: grid;
  /* The actions wrap onto a second line past 55% of the row, so four buttons never squeeze the name and badges. */
  grid-template-columns: minmax(0, 1fr) fit-content(55%);
  grid-template-areas:
    "identity actions"
    "details actions";
  align-items: center;
  gap: var(--space-2) var(--space-4);
  background: var(--color-surface-1);
}

/* A pending invite (no member row yet): same layout, dashed edge. */
.admin-pending-row {
  border-style: dashed;
}

.admin-member-identity {
  grid-area: identity;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin-member-identity > span:last-child,
.admin-member-identity strong,
.admin-member-identity small {
  min-width: 0;
  display: block;
}

.admin-member-identity strong,
.admin-member-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-member-identity strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.admin-member-identity small,
.admin-member-meta,
.admin-member-self {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.admin-member-details {
  grid-area: details;
  min-width: 0;
  padding-left: calc(32px + var(--space-3));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.admin-member-badges,
.admin-member-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-member-actions {
  grid-area: actions;
  justify-content: flex-end;
}

.admin-portal-state {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-ink-2);
  font-size: var(--font-size-md);
}

@media (max-width: 1180px) {
  .admin-portal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-member-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "identity"
      "details"
      "actions";
  }

  .admin-member-details {
    padding-left: 0;
  }

  .admin-member-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .settings-section {
    padding: var(--space-5) var(--space-4);
  }

  .admin-portal-header {
    flex-direction: column;
    gap: var(--space-3);
  }

  .admin-portal-count {
    width: 100%;
  }

  .admin-invite-form {
    padding: var(--space-4);
  }

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

/* Page access (Oct 14, 2026; spec "Access tab design"; a floating box since Oct 15). Settings -> Admin -> Access: the
   person list, then the Add someone form, in one column. Clicking a person opens their box (the shared modal) with
   the page switches, TOOLS, the account actions and Discard / Save. Patterns adapted from 21st.dev (shadcnspace
   field rows, cnippet user list, halaska spring switch), rebuilt on the Floor tokens. */
.access-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.access-list {
  min-width: 0;
}

/* The whole identity block is the row's select button: same layout as before, no button chrome. */
.access-member-select {
  width: 100%;
  min-height: var(--target-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.access-member-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The box: the shared modal at 560px, never wider than the screen less a 16px gutter each side. */
.access-modal {
  width: min(560px, calc(100vw - 32px));
}

/* The body scrolls between the fixed header and footer. */
.access-modal .modal-body {
  min-width: 0;
  max-height: min(80vh, 720px);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.access-panel-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

.access-panel-head .icon-button {
  flex: none;
}

.access-avatar {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-sm);
}

.access-panel-identity {
  min-width: 0;
  flex: 1 1 auto;
}

.access-panel-identity h3 {
  margin: 0;
  overflow: hidden;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-panel-identity p,
.access-count {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.access-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.access-panel-kicker {
  margin: 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
}

.access-admin-note,
.access-unavailable,
.access-pending-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
}

.access-admin-note {
  background: var(--color-ok-bg);
  color: var(--color-ok-fg);
}

.access-unavailable,
.access-pending-note {
  background: var(--color-surface-2);
  color: var(--color-ink-2);
}

.access-salesperson-field .select {
  width: 100%;
  min-width: 0;
}

.access-groups {
  display: grid;
  gap: var(--space-4);
}

.access-group-title {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
}

.access-group-rows {
  border-top: 1px solid var(--color-hairline);
}

.access-row {
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* See everyone's commissions sits under Commissions, indented. */
.access-row-sub {
  padding-left: var(--space-5);
}

.access-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.access-row-title {
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.access-row-note,
.access-row-hint {
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}

.access-row-hint {
  color: var(--color-warn-fg);
}

.access-lock {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.access-lock-icon {
  width: 14px;
  height: 14px;
}

/* The switch: a 40x22 track, neutral grey off and the cobalt accent on (never a success green). The thumb springs
   across on the duration tokens, which prefers-reduced-motion sets to 0. A native button, so Space and Enter toggle. */
.access-switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 999px;
  background: var(--color-surface-3);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

/* A 40x22 track would miss the 24px minimum target; the hit area grows without changing the look. */
.access-switch::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.access-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface-1);
  box-shadow: 0 1px 2px rgb(16 17 20 / 0.24);
  transition: translate var(--duration-slow) cubic-bezier(.34, 1.56, .64, 1), background-color var(--duration-base) var(--ease-standard);
}

.access-switch[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.access-switch[aria-checked="true"]::after {
  translate: 18px 0;
  background: var(--color-on-brand);
}

.access-switch:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.access-switch[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Footer: account actions on the left, Discard / Save on the right, with the save status on its own line above them
   (the save bar's wrapper steps aside so its two parts lay out in the footer). Wraps on phones. */
.access-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.access-save-bar {
  display: contents;
}

.access-footer-account,
.access-save-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The account actions are the quieter pair. */
.access-footer-account .button {
  min-height: 36px;
  padding: 0 14px;
  font-size: var(--font-size-sm);
}

.access-save-actions,
.access-close {
  margin-left: auto;
}

.access-save-status {
  order: -1;
  flex: 1 1 100%;
  min-width: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.access-save-bar[data-state="dirty"] .access-save-status {
  color: var(--color-warn-fg);
  font-weight: var(--font-weight-strong);
}

.access-save-bar[data-state="saved"] .access-save-status {
  color: var(--color-ok-fg);
}

.access-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.access-save-error {
  margin: 0;
}

@media (max-width: 620px) {
  /* On a phone each footer group takes its own full-width line. */
  .access-footer-account,
  .access-save-actions {
    width: 100%;
  }
}

@media (forced-colors: active) {
  .access-switch[aria-checked="true"] {
    background: Highlight;
  }
}

/* View-only members never see write controls. (0,3,0) specificity outranks every component
   display rule, so no !important is needed. */
.app-shell.read-only :is(
  [data-action="open-task-modal"],
  [data-action="toggle-task"],
  [data-action="open-commitment-modal"],
  [data-action="new-commitment-for-rep"],
  [data-action="toggle-commitment"],
  [data-action="set-inventory-src"],
  [data-action="set-inventory-disposition"],
  [data-action="set-writedown-status"],
  [data-action="set-writedown-recovery-status"],
  [data-action="set-salesperson-active"],
  .form-actions,
  .check-button
) {
  display: none;
}

/* Without the checkbox, task and commitment rows drop their leading column; otherwise the copy
   lands in the narrow auto column and the side value is pushed past the card (phone overflow). */
.app-shell.read-only .commitment-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 480px) {
  .app-shell.read-only .commitment-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.read-only .commitment-side {
    grid-column: 1;
  }
}

/* Settings -> Admin -> Lead source vendors (rules that roll DriveCentric sources up to vendors). */
.admin-lead-sources {
  display: grid;
  gap: var(--space-5);
}

.lead-source-unassigned,
.lead-source-rules {
  display: grid;
  gap: var(--space-2);
}

.lead-source-unassigned-row,
.lead-source-rule-row {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-inner);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  background: var(--color-surface-1);
}

.lead-source-unassigned-row > div,
.lead-source-rule-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lead-source-unassigned-row strong,
.lead-source-rule-row strong {
  color: var(--color-ink-1);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.lead-source-unassigned-row small,
.lead-source-rule-row small {
  color: var(--color-ink-2);
  font-size: var(--font-size-xs);
}

.lead-source-rule-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.lead-source-rule-form .input {
  min-width: 0;
  width: 200px;
}

.lead-source-add {
  padding-bottom: var(--space-2);
}

.lead-source-add .input[name="pattern"] {
  width: 300px;
}

.lead-source-add .select {
  width: auto;
  flex: 0 0 auto;
}

.lead-source-rule-row .lead-source-rule-form {
  margin-left: auto;
}

@media (max-width: 620px) {
  .lead-source-unassigned-row,
  .lead-source-rule-row {
    flex-direction: column;
    align-items: stretch;
  }

  .lead-source-rule-row .lead-source-rule-form {
    margin-left: 0;
  }

  .lead-source-rule-form .input,
  .lead-source-add .input[name="pattern"] {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Four Admin tabs: on phones two to a row (four across, or 3 + 1 from the shared auto-fit grid, crushed
   "Used-inventory feed" into three lines); a long label still wraps inside its tab. */
@media (max-width: 820px) {
  .content .admin-menu-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content .admin-menu-tabs button {
    min-width: 0;
    padding: 6px 8px;
    white-space: normal;
    line-height: 1.2;
  }
}

/* Settings -> Claude card spacing: air between the switch, the limits, Save and the usage table. */
#settings-claude .admin-checkbox + .form-grid {
  margin-top: var(--space-4);
}

#settings-claude form + .settings-section-header {
  margin-top: var(--space-6);
}

/* Ask Claude: topbar button and side panel (claude-panel.js). The panel is a drawer variant: ~420px on
   desktop, the whole screen at 820px and below (the media query alone decides, so resizing back works). */
.claude-open-button {
  min-height: 40px;
  padding: 0 14px;
  gap: 6px;
}

.drawer.claude-panel {
  width: min(420px, 94vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rp-surface);
  color: var(--rp-ink);
  border-left: 1px solid var(--rp-line);
}

/* Top glow and left accent edge sit behind the content (pointer-events off). */
.drawer.claude-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in oklab, var(--rp-accent) 26%, transparent), transparent 60%),
    radial-gradient(90% 70% at 0% -20%, color-mix(in oklab, var(--rp-accent-deep) 22%, transparent), transparent 60%);
  pointer-events: none;
}

.drawer.claude-panel::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--rp-accent), var(--rp-accent-deep) 50%, transparent);
  pointer-events: none;
}

.claude-panel > * {
  position: relative;
}

.claude-panel .drawer-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 0;
  background: transparent;
}

.claude-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.claude-heading h2 {
  margin: 2px 0 0;
  color: var(--rp-ink);
  font-size: 16px;
  font-weight: 600;
}

.claude-heading .eyebrow {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.claude-mark {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rp-accent-2), var(--rp-accent-deep));
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in oklab, var(--rp-accent) 35%, transparent);
}

.claude-mark .icon {
  width: 22px;
  height: 22px;
}

.claude-panel .icon-button {
  border: 1px solid var(--rp-line);
  border-radius: 10px;
  background: var(--rp-card);
  color: var(--rp-ink-2);
}

.claude-context {
  flex: none;
  margin: 0 18px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rp-ink-2);
  font-size: 12px;
}

.claude-context-pill {
  padding: 3px 9px;
  border: 1px solid color-mix(in oklab, var(--rp-accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--rp-accent) 10%, transparent);
  color: var(--rp-accent-ink);
  font-weight: 600;
}

.claude-panel-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 8px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.claude-allowance {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--rp-inset);
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.claude-allowance:empty {
  display: none;
}

.claude-suggestions:empty {
  display: none;
}

.claude-section-label {
  margin: 0 0 8px;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.claude-suggestion-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@container (min-width: 380px) {
  .claude-suggestion-list {
    grid-template-columns: 1fr 1fr;
  }
}

.claude-panel-body {
  container-type: inline-size;
}

.claude-suggestion {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background: var(--rp-card);
  color: var(--rp-ink);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard);
}

.claude-suggestion::before {
  content: "\2726";
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in oklab, var(--rp-accent) 12%, transparent);
  color: var(--rp-accent-ink);
  font-size: 12px;
}

.claude-suggestion:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 45%, var(--rp-line));
  background: color-mix(in oklab, var(--rp-accent) 8%, var(--rp-card));
}

.claude-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.claude-thread:empty {
  display: none;
}

.claude-turn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* White text on this gradient. The end stop is 80% deep + 20% accent (sRGB), not the full accent: the full
   accent fails 4.5:1 with white in both themes (3.7 light, 2.6 dark). Worst case with the mix: >= 4.5:1. */
.claude-question-text {
  margin: 0;
  align-self: flex-end;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, var(--rp-accent-deep), color-mix(in srgb, var(--rp-accent-deep) 80%, var(--rp-accent)));
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.claude-answer {
  padding: 12px 14px;
  border: 1px solid var(--rp-line);
  border-radius: 4px 16px 16px 16px;
  background: var(--rp-card);
  color: var(--rp-ink);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.claude-answer ul {
  margin: 6px 0;
  padding-left: 20px;
}

.claude-answer li + li {
  margin-top: 3px;
}

.claude-checked {
  margin: 0;
  color: var(--rp-ink-3);
  font-size: 11px;
  line-height: 1.4;
}

.claude-working {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-md);
}

.claude-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.claude-composer {
  flex: none;
  padding: 10px 18px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rp-line);
  background: var(--rp-surface);
}

/* 1px gradient border: the gradient shows through a transparent border around a padding-box fill. */
.claude-question-box {
  min-height: 84px;
  max-height: 200px;
  resize: vertical;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(var(--rp-card), var(--rp-card)) padding-box,
    linear-gradient(135deg, var(--rp-accent), color-mix(in oklab, var(--rp-accent-deep) 60%, transparent) 40%, var(--rp-line) 70%) border-box;
  color: var(--rp-ink);
  font: inherit;
  font-size: 13.5px;
}

.claude-composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.claude-composer .button-primary {
  border: 0;
  background: linear-gradient(135deg, var(--rp-accent-deep), color-mix(in srgb, var(--rp-accent-deep) 80%, var(--rp-accent)));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--rp-accent) 30%, transparent);
}

.claude-composer .button-primary:disabled {
  box-shadow: none;
  opacity: 0.55;
}

.claude-hint {
  margin-right: auto;
  color: var(--rp-ink-3);
  font-size: 11px;
}

.claude-privacy-hint {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: 11px;
  line-height: 1.4;
}

.claude-limit-note {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-md);
}

@media (max-width: 820px) {
  .drawer.claude-panel {
    width: 100vw;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
  }

  .claude-panel-body {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-left: max(18px, env(safe-area-inset-left));
  }

  .claude-composer {
    padding-right: max(20px, env(safe-area-inset-right));
    padding-left: max(20px, env(safe-area-inset-left));
  }

  .claude-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .claude-open-button {
    width: 40px;
    padding: 0;
  }

  .claude-open-label {
    display: none;
  }
}

/* =================================================================================================
   Reporting kit (Agent Hub look) · reporting redesign Release 1 (Oct 13, 2026)
   The DriveCentric Agent Hub style in the SalesOne logo's sky blue, for the markup that report-ui.js,
   report-charts.js and detail-page.js emit (.rp-*). Colours come only from the --rp-* tokens (section 1,
   light and dark) and the status tokens (--color-ok-*, --color-warn-*, --color-crit-*), so both themes work.
   Radii: cards 16px, tiles 14px, insets 12px. Page-specific placement (Corridor Home's rows)
   stays in corridor.css.
     Roots · cards and headers · featured card · number tiles · rank bars · charts · grids · phones ·
     forced colours
   ================================================================================================= */

/* Roots: the report page, the floating detail page and the Claude panel read the kit font. */
.report-page,
.drawer--float,
.claude-panel {
  font-family: var(--rp-font);
  font-variant-numeric: tabular-nums;
}

.report-page {
  min-width: 0;
  color: var(--rp-ink);
}

.rp-section-title {
  margin: 26px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-snug);
}

/* The section number ("01") in the accent, as plain bold text. */
.rp-section-title > span {
  flex: none;
  color: var(--rp-accent-ink);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* A heading with a short context note beside it ("Competitor used units · last 7 days"); wraps under on phones. */
.rp-section-head {
  margin: 26px 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

.rp-section-head > .rp-section-title {
  margin: 0;
}

.rp-section-note {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

/* Range switch (7 days / 30 days / All): a segmented control of real buttons. Not the chart's .rp-seg rects. */
.rp-range {
  padding: 3px;
  display: inline-flex;
  flex: none;
  gap: 2px;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-1);
}

.rp-range button {
  min-width: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: calc(var(--radius-control) - 3px);
  background: transparent;
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
  white-space: nowrap;
  cursor: pointer;
}

.rp-range button:hover {
  color: var(--color-ink-1);
}

.rp-range button[aria-pressed="true"] {
  /* A quiet fill plus a 2px ink ring: clearly visible (above 3:1) on the surface-1 frame in light and dark. */
  background: var(--color-surface-3);
  box-shadow: inset 0 0 0 2px var(--color-ink-2);
  color: var(--color-ink-1);
}

.rp-range button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.rp-callout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--rp-inset);
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

.rp-callout b {
  color: var(--rp-ink);
  font-weight: 600;
}

/* Cards and headers. A card is a size container so its charts can size their text to the card (below). */
.rp-card {
  min-width: 0;
  container: rp-card / inline-size;
  padding: 18px;
  border: 1px solid var(--rp-line);
  border-radius: 16px;
  background: var(--rp-card);
  color: var(--rp-ink);
}

.rp-card-head {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.rp-card-head h3 {
  min-width: 0;
  margin: 0;
  color: var(--rp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.rp-card-head p {
  flex-basis: 100%;
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

/* The (i) info tip: a 20px round button that opens a panel under it. The panel never leaves the viewport: it is at
   most 340px and 32px short of the screen, and a tip in the right half (.rp-info--end) opens toward the left. */
.rp-info {
  position: relative;
  flex: none;
  display: inline-flex;
  vertical-align: middle;
}

/* .rp-card is a size container, so it is its own stacking context: the card holding an open panel is raised above its
   neighbours (bindInfoTips toggles .rp-info-open), or the next card would paint over the panel. */
.rp-card.rp-info-open {
  position: relative;
  z-index: 10;
}

.rp-card-head > .rp-info {
  margin-right: auto;
}

.rp-info-btn {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rp-line);
  border-radius: 50%;
  background: var(--rp-inset);
  color: var(--rp-ink-2);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.rp-info-btn:hover,
.rp-info-btn[aria-expanded="true"] {
  border-color: var(--rp-accent);
  color: var(--rp-accent-ink);
}

.rp-info-btn:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.rp-info-pop {
  position: absolute;
  top: 28px;
  left: -10px;
  z-index: 10;
  width: max-content;
  max-width: min(340px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background: var(--rp-card);
  box-shadow: var(--shadow-overlay);
  color: var(--rp-ink-2);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.rp-info-pop[hidden] {
  display: none;
}

.rp-info-pop b {
  color: var(--rp-ink);
}

.rp-info-pop ol {
  margin: 6px 0 0;
  padding-left: 18px;
}

.rp-info--end .rp-info-pop {
  left: auto;
  right: -10px;
}

/* On phones a card head's panel opens from the head's left edge, not from the (i) after the title: reportCard cannot
   know where its card sits. bindInfoTips() still pins any panel that would leave the viewport. */
@media (max-width: 700px) {
  .rp-card-head {
    position: relative;
  }

  .rp-card-head > .rp-info {
    position: static;
  }

  .rp-card-head .rp-info-pop {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
  }
}

.rp-card-link {
  flex: none;
  border-radius: 6px;
  color: var(--rp-accent-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}

.rp-card-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Clickable tiles, insets and rank rows are real buttons: drop the button look, keep the component's own.
   (Background and border come from .rp-tile / .rp-inset / .rp-rank, which follow this rule.) */
.rp-click {
  margin: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.rp-click:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

/* Featured card: accent border, soft accent glow, gradient top wash, gradient icon badge. */
.rp-featured {
  border-color: var(--rp-accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--rp-accent) 12%, var(--rp-card)) 0%, var(--rp-card) 70%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--rp-accent) 25%, transparent),
    0 0 28px color-mix(in oklab, var(--rp-accent) 18%, transparent);
}

.rp-featured-head {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.rp-featured-head > div:not(.rp-featured-icon):not(.rp-featured-aside) {
  min-width: 0;
  flex: 1 1 12rem;
}

.rp-featured-head h3 {
  margin: 0;
  color: var(--rp-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.rp-featured-head p {
  margin: 2px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

/* Trusted caller markup at the right of the head (Home puts the day-clock chip here); wraps under on phones. */
.rp-featured-aside {
  min-width: 0;
  flex: 0 1 auto;
  margin-left: auto;
}

.rp-featured-icon {
  width: 40px;
  height: 40px;
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rp-accent-2), var(--rp-accent-deep));
  color: #ffffff;
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

/* Optional caller markup between the head and the insets (Overview's units and New / Used mix). */
.rp-featured-body {
  min-width: 0;
  margin-bottom: 18px;
}

.rp-insets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.rp-inset {
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--rp-inset);
  color: var(--rp-ink);
  font: inherit;
  text-align: left;
}

.rp-inset strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.1;
}

.rp-inset-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.rp-inset-note {
  display: block;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

/* A second note line (come-back money math on the Store gross goal tile): quieter than the first. */
.rp-inset-subnote {
  margin-top: 2px;
  opacity: 0.8;
}

/* The status dot is a second cue beside the colored value, so tone is not carried by color alone. */
.rp-inset-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: none;
  border-radius: 50%;
  background: var(--rp-ink-3);
}

.rp-inset.warn .rp-inset-dot {
  background: var(--color-warn-strong);
}

.rp-inset.crit .rp-inset-dot {
  background: var(--color-crit-strong);
}

.rp-inset.good .rp-inset-dot {
  background: var(--rp-good-ink);
}

.rp-inset.warn strong {
  color: var(--color-warn-fg);
}

.rp-inset.crit strong {
  color: var(--color-crit-fg);
}

.rp-inset.good strong {
  color: var(--rp-good-ink);
}

.rp-inset.rp-click:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 50%, transparent);
  background: color-mix(in oklab, var(--rp-accent) 8%, var(--rp-inset));
}

.drawer--float .rp-insets .rp-inset strong {
  font-size: 1.25rem;
}

/* Number tiles: label, value, optional delta, round badge or sparkline top-right, optional note. */
.rp-tile {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border: 1px solid var(--rp-line);
  border-radius: 14px;
  background: var(--rp-card);
  color: var(--rp-ink);
}

.rp-tile.is-headline {
  border-color: var(--rp-good-line);
  background: var(--rp-good-bg);
}

.rp-tile.rp-click:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
  box-shadow: 0 0 18px color-mix(in oklab, var(--rp-accent) 14%, transparent);
}

.rp-tile.is-headline.rp-click:hover {
  border-color: color-mix(in oklab, var(--rp-good-ink) 60%, var(--rp-good-line));
}

.rp-tile-label {
  display: block;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* Room for the badge or sparkline in the corner (tiles only; the rank list title reuses the label). */
.rp-tile:has(> .rp-badge) > .rp-tile-label {
  padding-right: 40px;
}

.rp-tile:has(> .rp-spark) > .rp-tile-label {
  padding-right: 68px;
}

.rp-tile-value {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: var(--rp-ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* Names (top seller, best dealer): one 18px line that ends in an ellipsis instead of wrapping the tile taller. */
.rp-tile-value.is-compact {
  margin-top: 10px;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: nowrap;
}

.rp-delta {
  display: block;
  margin-top: 4px;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.rp-delta.flat {
  color: var(--rp-ink-2);
}

.rp-delta.good {
  color: var(--color-ok-fg);
}

.rp-delta.bad {
  color: var(--color-crit-fg);
}

.rp-tile.is-headline .rp-delta.flat,
.rp-tile.is-headline .rp-tile-note {
  color: var(--rp-good-ink);
}

.rp-tile-note {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rp-line);
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

.rp-tile.is-headline .rp-tile-note {
  border-top-color: var(--rp-good-line);
}

.rp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rp-inset);
  color: var(--rp-ink-2);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1;
}

.rp-badge.tone-good,
.rp-badge.tone-ok {
  background: color-mix(in oklab, var(--color-ok-strong) 22%, var(--rp-card));
  color: var(--color-ok-fg);
}

.rp-badge.tone-info {
  background: color-mix(in oklab, var(--rp-accent-deep) 24%, var(--rp-card));
  color: var(--rp-accent-ink);
}

.rp-badge.tone-accent {
  background: linear-gradient(135deg, var(--rp-accent-2), var(--rp-accent-deep));
  color: #ffffff;
}

.rp-badge.tone-warn {
  background: color-mix(in oklab, var(--color-warn-strong) 24%, var(--rp-card));
  color: var(--color-warn-fg);
}

.rp-badge.tone-crit {
  background: color-mix(in oklab, var(--color-crit-strong) 22%, var(--rp-card));
  color: var(--color-crit-fg);
}

.rp-badge.tone-neutral {
  background: var(--rp-inset);
  color: var(--rp-ink-2);
}

.rp-tile .rp-spark {
  position: absolute;
  top: 16px;
  right: 14px;
  display: block;
  line-height: 0;
}

/* Rank bars: label, track, value. Every bar is the series color (warn color for a warn list); the leader only gets a bold label. */
.rp-rank-list {
  min-width: 0;
}

.rp-rank-list > .rp-tile-label {
  margin: 14px 0 4px;
}

.rp-rank {
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr) minmax(2.5rem, auto);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--rp-ink);
  font-size: var(--font-size-md);
}

.rp-rank.rp-click:hover {
  background: var(--rp-inset);
}

.rp-rank.rp-click:hover .rp-rank-track {
  background: color-mix(in oklab, var(--rp-ink) 10%, var(--rp-inset));
}

.rp-rank-label {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-rank.is-lead .rp-rank-label {
  font-weight: 600;
}

.rp-rank-track {
  position: relative;
  height: 10px;
  display: block;
  border-radius: 6px;
  background: var(--rp-inset);
}

.rp-rank-fill {
  height: 100%;
  min-width: 2px;
  display: block;
  border-radius: 6px;
  background: var(--rp-series-1);
}

.rp-rank-fill.warn {
  background: var(--color-warn-strong);
}

/* Goal marker: a green tick across the track at goal/max. */
.rp-goal {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--color-ok-strong);
}

.rp-rank-value {
  color: var(--rp-ink);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Charts (report-charts.js): inline SVG with no fills or strokes in the markup, so every colour is a token. */
.rp-chart {
  min-width: 0;
  margin: 0;
}

.rp-chart > svg {
  width: 100%;
  height: auto;
  max-height: 240px; /* safety cap only: the 480 x 170 viewBox reaches it on cards wider than ~680px */
  display: block;
  overflow: visible;
}

.rp-chart.rp-spark > svg {
  width: 60px;
  height: 24px;
}

.rp-chart text {
  font-family: var(--rp-font, var(--font-sans));
}

.rp-chart .rp-axis {
  fill: var(--rp-ink-2); /* ink-3 is 3.2:1, under 4.5:1 for 10-11px text */
}

/* Value labels sit on the last bar/point; a card-coloured halo keeps them readable over bars and the line. */
.rp-chart .rp-value {
  fill: var(--rp-ink);
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--rp-card);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.rp-chart .rp-grid {
  stroke: var(--rp-line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.rp-chart .rp-zero {
  stroke: color-mix(in oklab, var(--rp-ink-3) 70%, var(--rp-line));
  stroke-dasharray: none;
}

.rp-chart .rp-bar {
  fill: var(--rp-bar);
  transition: filter var(--duration-fast) var(--ease-standard);
}

.rp-chart .rp-bar.alt {
  fill: var(--rp-accent-deep);
}

/* The series pair: name series-1 / series-2 on a bar, a grouped series or its legend swatch. */
.rp-chart .rp-bar.series-1 {
  fill: var(--rp-series-1);
}

.rp-chart .rp-bar.series-2 {
  fill: var(--rp-series-2);
}

/* Grouped bars (a chart with an .alt series): the first series wears the accent, as in the approved Home. */
.rp-chart:has(.rp-bar.alt) .rp-bar:not(.alt):not(.warn):not(.crit):not(.series-1):not(.series-2) {
  fill: var(--rp-accent);
}

.rp-chart .rp-bar.warn {
  fill: var(--color-warn-strong);
}

.rp-chart .rp-bar.crit {
  fill: var(--color-crit-strong);
}

.rp-line {
  fill: none;
  stroke: var(--rp-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rp-line.series-1 {
  stroke: var(--rp-series-1);
}

.rp-area.series-1 {
  fill: var(--rp-series-1);
  fill-opacity: 0.12;
  stroke: none;
}

/* Pace chart comparison (last month): a dashed grey line under the solid accent line, no area. */
.rp-line.is-dashed {
  stroke: var(--rp-ink-3);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}

.rp-swatch .rp-bar.is-dashed {
  fill: none;
  stroke: var(--rp-ink-3);
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.rp-dot {
  fill: var(--rp-accent);
  stroke: var(--rp-card);
  stroke-width: 1.5;
}

.rp-dot.series-1 {
  fill: var(--rp-series-1);
  stroke-width: 2;
}

.rp-spark .rp-line {
  stroke: var(--rp-ink-2);
  stroke-width: 2;
}

.rp-spark .rp-dot {
  fill: var(--rp-ink-2);
  stroke: none;
}

.rp-seg.good {
  fill: var(--color-ok-strong);
}

.rp-seg.neutral {
  fill: var(--rp-bar);
}

.rp-seg.warn {
  fill: var(--color-warn-strong);
}

/* Series tones: New / Used from the validated pair; CPO is Used at reduced opacity (and is always labelled). */
.rp-seg.series-1 {
  fill: var(--rp-series-1);
}

.rp-seg.series-2,
.rp-seg.series-2-soft {
  fill: var(--rp-series-2);
}

.rp-seg.series-2-soft {
  opacity: 0.55;
}

/* Hit targets: every bar, point and segment is a focusable <g role="button">. Outlines on an SVG <g> are
   unreliable, so the ring is a stroke on the shape inside (the dot's ring is its larger hit circle). */
.rp-hit {
  cursor: pointer;
  outline: none;
}

/* A mark with no detail draws the same shapes but is not a target: no pointer cursor, no hover or focus ring. */
.rp-mark {
  cursor: default;
}

.rp-hit-area {
  fill: none;
  stroke: none;
}

.rp-hit:hover .rp-bar,
.rp-hit:hover .rp-seg {
  filter: brightness(1.18);
}

.rp-hit:hover .rp-dot {
  r: 5px;
}

.rp-hit:focus-visible .rp-bar,
.rp-hit:focus-visible .rp-seg {
  stroke: var(--rp-ink);
  stroke-width: 2.5px;
}

.rp-hit:focus-visible .rp-hit-area {
  stroke: var(--rp-ink);
  stroke-width: 2px;
}

/* Chart text size per card width. The SVG scales with the card (viewBox 480 wide), so a font-size in viewBox
   units shows at font-size x cardWidth / 480. These steps keep axis labels about 10-11px and value labels about
   11-12px on screen for cards from ~300px (phones) to ~700px; CSS beats the font-size attribute, which remains
   the fallback where container queries are unsupported or a chart sits outside a card. */
@container rp-card (max-width: 279.98px) {
  .rp-chart .rp-axis { font-size: 19px; }
  .rp-chart .rp-value { font-size: 21px; }
}

@container rp-card (min-width: 280px) and (max-width: 339.98px) {
  .rp-chart .rp-axis { font-size: 16px; }
  .rp-chart .rp-value { font-size: 17.5px; }
}

@container rp-card (min-width: 340px) and (max-width: 419.98px) {
  .rp-chart .rp-axis { font-size: 13px; }
  .rp-chart .rp-value { font-size: 14.5px; }
}

@container rp-card (min-width: 420px) and (max-width: 519.98px) {
  .rp-chart .rp-axis { font-size: 11px; }
  .rp-chart .rp-value { font-size: 12px; }
}

@container rp-card (min-width: 520px) and (max-width: 619.98px) {
  .rp-chart .rp-axis { font-size: 9px; }
  .rp-chart .rp-value { font-size: 10px; }
}

@container rp-card (min-width: 620px) {
  .rp-chart .rp-axis { font-size: 7.5px; }
  .rp-chart .rp-value { font-size: 8.25px; }
}

.rp-chart-note {
  margin: 8px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

.rp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.rp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rp-swatch {
  width: 10px;
  height: 10px;
  flex: none;
  display: inline-block;
  overflow: hidden;
  border-radius: 3px;
}

/* The segment bar's key row: a dot in the segment's tone, the label and its count. */
.rp-legend-dot {
  width: 8px;
  height: 8px;
  flex: none;
  display: inline-block;
  border-radius: 50%;
  background: var(--rp-bar);
}

.rp-legend-dot.good {
  background: var(--color-ok-strong);
}

.rp-legend-dot.warn {
  background: var(--color-warn-strong);
}

.rp-legend-dot.series-1 {
  background: var(--rp-series-1);
}

.rp-legend-dot.series-2,
.rp-legend-dot.series-2-soft {
  background: var(--rp-series-2);
}

.rp-legend-dot.series-2-soft {
  opacity: 0.55;
}

.rp-legend-item b {
  color: var(--rp-ink);
  font-weight: 600;
}

/* Report table (Home's dealer size and price): name, a units bar in the series colour, then right-aligned numbers.
   The dealer name is a button that fills its cell and alone opens the detail (a row-wide overlay is unreliable on
   WebKit, which does not make a <tr> a containing block). */
.rp-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--rp-ink);
  font-size: var(--font-size-md);
}

.rp-table th,
.rp-table td {
  padding: 7px 0;
  border-top: 1px solid var(--rp-line);
  text-align: left;
  vertical-align: middle;
}

.rp-table thead th {
  padding: 0 0 8px;
  border-top: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rp-table tbody tr:hover {
  background: var(--rp-inset);
}

.rp-table tbody th {
  max-width: 0;
  width: 40%;
  font-weight: 500;
}

.rp-table .rp-num {
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
}

.rp-table-link {
  width: 100%;
  min-width: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ring sits inside the button: the wrap's overflow-x would clip an outside ring on the left edge. */
.rp-table-link:focus-visible {
  outline-offset: -2px;
}

.rp-table-bar {
  width: 34%;
  padding-inline: 14px;
}

.rp-table-track {
  height: 10px;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--rp-inset);
}

.rp-table tbody tr:hover .rp-table-track {
  background: color-mix(in oklab, var(--rp-ink) 10%, var(--rp-inset));
}

.rp-table-fill {
  height: 100%;
  min-width: 2px;
  display: block;
  border-radius: 0 6px 6px 0;
  background: var(--rp-series-1);
}

.rp-chart-empty {
  min-height: 120px;
  padding: 16px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rp-line);
  border-radius: 12px;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  text-align: center;
  text-wrap: pretty;
}

/* Grids: four tiles and two cards per row on desktop. */
.rp-grid-2,
.rp-grid-4 {
  min-width: 0;
  display: grid;
}

.rp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rp-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .rp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: grids stack, the featured insets go two by two. */
@media (max-width: 820px) {
  .rp-grid-2,
  .rp-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-insets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rp-card {
    padding: 16px;
  }

  .rp-inset strong {
    font-size: 1.375rem;
  }
}

/* Overview (app declutter, Oct 13, 2026): the numbers only, on the kit. Head row (greeting + (i), a source chip only
   when a source is not Ready, "<n> actions today"), the featured "Delivered this month" card beside "Close rate vs
   target", three neutral tiles, then the coaching watchlist. Status colour is only a dot with a label, a tag or the
   3px crit left edge (.is-due); no tile is tinted. */
.overview-head {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* The greeting's (i) panel is anchored to this block on phones (below), so it opens inside the viewport. */
.overview-title {
  position: relative;
  min-width: 0;
}

.overview-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-greeting h2 {
  margin: 0;
  color: var(--rp-ink);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.overview-sub {
  margin: 4px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.overview-tools {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.overview-chip {
  min-height: 32px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius-pill);
  background: var(--rp-card);
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
}

.overview-chip b {
  color: var(--rp-ink);
  font-weight: 600;
}

a.overview-chip:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
}

a.overview-chip:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.overview-actions-link {
  color: var(--rp-accent-ink);
  font-weight: 600;
}

/* Status dot: always next to words that say the same thing. */
.overview-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: none;
  border-radius: 50%;
  background: var(--rp-ink-3);
}

.overview-dot.is-crit {
  background: var(--color-crit-strong);
}

.overview-dot.is-warn {
  background: var(--color-warn-strong);
}

.overview-dot.is-good {
  background: var(--rp-good-ink);
}

/* Customizable Home (Oct 15, 2026): the member's widgets in one grid, in their order. Desktop (>=1100px) has 6
   columns so the default Home fills its rows exactly: Small = 2, Medium = 3, Wide = the whole row. Tablet (640-1099px)
   has 2: Small = 1, Medium and Wide = the whole row. Phone: 1 column. No dense packing: order is the member's. */
.home-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.home-widget {
  min-width: 0;
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}

.home-widget > * {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 640px) and (max-width: 1099.98px) {
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-widget[data-size="s"] {
    grid-column: span 1;
  }

  .home-widget[data-size="m"],
  .home-widget[data-size="w"] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-widget[data-size="s"] {
    grid-column: span 2;
  }

  .home-widget[data-size="m"] {
    grid-column: span 3;
  }

  .home-widget[data-size="w"] {
    grid-column: 1 / -1;
  }
}

.home-empty {
  grid-column: 1 / -1;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border: 1px dashed var(--rp-line);
  border-radius: var(--radius-lg, 14px);
  color: var(--rp-ink-2);
  text-align: center;
}

.home-empty p {
  margin: 0;
}

.home-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Customize mode (Release 1): a dashed outline per widget, a chrome row on top (handle, name, sizes, hide), the box
   itself inert, and a sticky footer with Reset to default / Cancel / Done. Only the handle starts a drag, so the page
   still scrolls normally on a phone. */
.home-grid[data-editing="true"] .home-widget {
  gap: 8px;
  padding: 8px;
  border: 1px dashed color-mix(in oklab, var(--rp-accent) 45%, var(--rp-line));
  border-radius: var(--radius-lg, 14px);
}

.home-widget > .home-widget-chrome {
  flex: 0 0 auto;
}

.home-widget-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.home-widget-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-widget-handle,
.home-widget-hide {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rp-line);
  border-radius: 8px;
  background: var(--color-surface-1);
  color: var(--rp-ink-2);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.home-widget-handle {
  cursor: grab;
  touch-action: none;
  letter-spacing: -2px;
}

.home-widget-handle:active {
  cursor: grabbing;
}

.home-widget-hide {
  font-size: 18px;
}

.home-widget-handle:hover,
.home-widget-hide:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
  color: var(--color-ink-1);
}

.home-widget-sizes {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 8px;
  background: var(--color-tab-track);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}

.home-widget-sizes button {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.home-widget-sizes button[aria-pressed="true"] {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.home-widget-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-widget-body > * {
  flex: 1 1 auto;
  min-width: 0;
}

.home-widget.sortable-ghost {
  opacity: 0.4;
}

.home-edit-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  margin-top: 16px;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-raised);
}

.home-edit-error {
  margin: 0;
  flex: 1 1 200px;
  color: var(--color-crit-fg);
  font-size: var(--font-size-sm);
}

.home-edit-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* Customize mode on phone/tablet widths (<=820px): the floating dock (66px tall, max(12px, safe-area) off the bottom)
   covers the bottom of the screen, so the edit bar sits just above it. While editing, the grid keeps a little room
   below its last widget, and focus scrolling stops short of the bar. */
.home-grid[data-editing="true"] {
  padding-bottom: 12px;
}

:root:has(.home-grid[data-editing="true"]) {
  scroll-padding-bottom: 96px;
}

@media (max-width: 820px) {
  .home-edit-bar {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px + 10px);
  }

  .home-grid[data-editing="true"] {
    padding-bottom: 16px;
  }

  :root:has(.home-grid[data-editing="true"]) {
    scroll-padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px + 96px);
  }
}

/* Numbers never break mid-digit on Home ("$125,5" / "22"). Each widget is a size container; the big values stay on
   one line and shrink with the widget, and the Delivered insets wrap whole tiles when three no longer fit. */
.home-widget {
  container-type: inline-size;
}

/* container-type makes each widget a stacking context, which traps the info tip's z-index guard on .rp-card. */
.home-widget:has(.rp-info-open) {
  position: relative;
  z-index: 10;
}

.home-widget :is(.rp-inset strong, .rp-tile-value, .overview-units-value, .overview-rate-value) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.home-widget .rp-inset strong {
  font-size: clamp(1rem, 4.2cqi, 1.625rem);
}

.home-widget .overview-tile .rp-tile-value {
  font-size: clamp(1.375rem, 9cqi, 2.125rem);
}

.home-widget .overview-delivered .rp-insets {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

/* Release 2's B1 number card (homeNumberCard): label, one big number that never breaks mid-digit, the change/target
   line; M adds the trend bars and the note, W the detail rows. */
.home-number-figure {
  margin-top: 8px;
}

.home-number-value {
  display: block;
  color: var(--rp-ink);
  font-size: clamp(1.375rem, 9cqi, 2.125rem);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
}

.home-number-line {
  margin: 8px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.home-number-note {
  margin: 10px 0 0;
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
}

.home-number-rows {
  margin-top: 12px;
}

/* A widget still loading its own data (Corridor market, My commissions): "Loading…" in quiet type, not a number. */
.home-number.is-loading .home-number-value {
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Release 2 Sales Team widgets. The close widgets' track is the Close rate card's (fill + target tick) on its own line;
   list widgets (leaderboard, top lead sources) keep each name to one line with an ellipsis so the value never wraps. */
.home-close-track {
  margin-top: 14px;
}

.home-list .rp-rank {
  grid-template-columns: minmax(0, 40%) minmax(2rem, 1fr) auto;
}

.home-list-empty {
  margin: 10px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.home-list-note {
  margin: 10px 0 0;
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
}

/* Brief actions: severity word + title per row (the severity dot is never the only cue); W adds a detail line. */
.home-brief-row {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--rp-line, rgba(0, 0, 0, 0.08));
}

.home-brief-row:first-child {
  border-top: 0;
}

.home-brief-sev {
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.home-brief-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-brief-detail {
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
}

.home-brief-more {
  font-weight: 600;
}

.home-aging .rp-rank {
  grid-template-columns: minmax(0, 30%) minmax(2rem, 1fr) auto;
}

/* The B1 trend bars: the card's full width, 48px tall, never wider than the card. */
.home-mini-bars {
  margin-top: 14px;
  max-width: 100%;
  min-width: 0;
}

.home-mini-bars > svg {
  width: 100%;
  height: 48px;
  max-height: none;
  overflow: hidden;
}

button.overview-chip {
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
}

button.overview-chip:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
}

button.overview-chip:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

/* Featured card: units large, the New / Used / CPO bar and its key, then three insets. */
.overview-units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.overview-units-value {
  color: var(--rp-ink);
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
}

.overview-units-label {
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.overview-mix {
  margin-top: 14px;
}

/* The segment bar's own key repeats the counts; this card's key reads "Used 18 (12 used + 6 CPO)" instead. */
.overview-mix .rp-chart-note {
  display: none;
}

/* A 10px strip at any card width (segmentBar's thin form stretches to this box). */
.overview-mix-bar .rp-chart > svg {
  height: 10px;
}

.overview-mix-key {
  margin: 8px 0 0;
  gap: 6px 18px;
}

.overview-mix-key small {
  color: var(--rp-ink-3);
  font-size: inherit;
}

.overview-mix-gap {
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.overview-delivered .rp-insets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Close rate vs target: one neutral bar per channel on a shared scale; the 2px ink tick is the target. */
.overview-close .rp-card-head > .rp-info {
  margin-right: 0;
  margin-left: auto;
}

.overview-rate {
  padding: 9px 0;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--rp-line);
}

/* The first channel row follows the card head: no rule above it. */
.rp-card-head + .overview-rate {
  border-top: 0;
}

.overview-rate-label {
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.overview-rate-track {
  position: relative;
  height: 12px;
  border-radius: 4px;
  background: var(--rp-inset);
}

.overview-rate-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 0 4px 4px 0;
  background: var(--rp-bar);
}

.overview-rate-tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--rp-ink);
}

.overview-rate-figure {
  min-width: 0;
  text-align: right;
}

.overview-rate-value {
  color: var(--rp-ink);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.overview-rate-note {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  color: var(--rp-ink-3);
  font-size: 11.5px;
}

.overview-rate-key {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  color: var(--rp-ink-3);
  font-size: 11.5px;
}

.overview-rate-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.overview-key-bar {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: var(--rp-bar);
}

.overview-key-tick {
  width: 2px;
  height: 12px;
  background: var(--rp-ink);
}

.overview-info-line {
  display: block;
}

/* Three neutral tiles; the write-down tile gets a 3px crit left edge and a "<n> due" tag only when some are due. */
.overview-tile {
  min-height: 112px;
}

.overview-tile.is-due {
  box-shadow: inset 3px 0 0 var(--color-crit-strong);
}

.overview-tile .rp-tile-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-ink);
  font-size: 11.5px;
  font-weight: 600;
}

.overview-tile .rp-tile-value {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.05;
}

.overview-tile .rp-tile-note {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
  color: var(--rp-ink-3);
}

.overview-up {
  color: var(--rp-good-ink);
  font-weight: 600;
}

/* Coaching watchlist: name and the top weak point; each row opens the salesperson. */
.overview-watchlist-rows {
  display: flex;
  flex-direction: column;
}

.overview-watch-row {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--rp-line);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
}

.overview-watch-row:first-child {
  border-top: 0;
}

.overview-watch-row:hover .overview-watch-name {
  color: var(--rp-accent-ink);
}

.overview-watch-row:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.overview-watch-name {
  min-width: 140px;
  color: var(--rp-ink);
  font-weight: 600;
}

.overview-watch-what {
  min-width: 0;
  flex: 1;
  color: var(--rp-ink-2);
}

.overview-empty {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

@media (max-width: 700px) {
  .overview-tools {
    margin-left: 0;
  }

  .overview-chip {
    white-space: normal;
  }

  /* The greeting's panel opens from the left edge of the head block, not from the (i) late in the line. */
  .overview-greeting .rp-info {
    position: static;
  }

  .overview-greeting .rp-info-pop {
    top: calc(100% + 6px);
    left: 0;
  }

  .overview-units-value {
    font-size: 3rem;
  }

  .overview-delivered .rp-insets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Each channel: name and figure on one line, the bar full width under them. */
  .overview-rate {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label figure"
      "track track";
    gap: 6px 10px;
  }

  .overview-rate-label {
    grid-area: label;
  }

  .overview-rate-track {
    grid-area: track;
  }

  .overview-rate-figure {
    grid-area: figure;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .overview-rate-note {
    white-space: nowrap;
  }

  .overview-watch-row {
    flex-wrap: wrap;
    gap: 2px 12px;
  }

  .overview-watch-name {
    min-width: 0;
  }
}

@media (forced-colors: active) {
  .overview-chip {
    border-color: CanvasText;
  }

  .overview-dot,
  .overview-rate-fill,
  .overview-rate-tick,
  .overview-key-bar,
  .overview-key-tick {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .overview-rate-track {
    border: 1px solid CanvasText;
  }

  .overview-tile.is-due {
    border-left: 3px solid CanvasText;
  }
}

/* Morning Brief (app declutter, Oct 13, 2026): today's actions only. The head (date, the headline sentence with its (i),
   "+ Add task"), "Today's actions" (four rows, then "Show <n> more"), "Your tasks" and one Win line. Severity is a dot
   beside its word; no row or card is tinted. */
.brief-head {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
}

/* The headline's (i) panel is anchored to this block (below), so it opens inside the viewport. */
.brief-title {
  position: relative;
  min-width: 0;
  flex: 1 1 420px;
}

.brief-date {
  margin: 0;
  color: var(--rp-ink-3);
  font-size: 12.5px;
}

.brief-headline {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The headline's panel opens from the left edge of the head block (.brief-title), not from the (i) at the end of the
   line, at every width: a long headline puts the (i) near the right edge. */
.brief-headline .rp-info {
  position: static;
}

.brief-headline .rp-info-pop {
  top: calc(100% + 6px);
  left: 0;
}

.brief-headline h2 {
  min-width: 0;
  margin: 0;
  color: var(--rp-ink);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
}

.brief-tools {
  flex: none;
}

.brief-actions-card + .brief-tasks-card {
  margin-top: 14px;
}

.brief-action {
  padding: 16px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--rp-line);
}

.brief-action:first-child {
  padding-top: 4px;
  border-top: 0;
}

.brief-action:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.brief-action-num {
  color: var(--rp-ink-3);
  font-size: 13px;
  font-weight: 700;
}

.brief-action-sev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brief-action-copy h4 {
  margin: 4px 0 3px;
  color: var(--rp-ink);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.brief-action-copy p {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: 12.5px;
}

.brief-action-link {
  min-height: 32px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius-pill);
  background: var(--rp-inset);
  color: var(--rp-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.brief-action-link:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
}

.brief-action-link:focus-visible,
.brief-more:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.brief-more {
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--rp-accent-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.brief-empty {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.brief-empty b {
  color: var(--rp-ink);
}

.brief-task {
  padding: 12px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rp-line);
}

.brief-task:first-child {
  padding-top: 2px;
  border-top: 0;
}

.brief-task-copy strong {
  display: block;
  color: var(--rp-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.brief-task-copy span {
  color: var(--rp-ink-2);
  font-size: 12.5px;
}

.brief-win {
  margin: 14px 0 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rp-good-line);
  border-radius: 12px;
  background: var(--rp-good-bg);
  color: var(--rp-ink);
  font-size: var(--font-size-sm);
}

.brief-win b {
  color: var(--rp-good-ink);
}

@media (max-width: 700px) {
  .brief-headline h2 {
    font-size: 1.375rem;
  }

  /* Number and copy on one row, the button under the copy. */
  .brief-action {
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 12px;
  }

  .brief-action-link {
    grid-column: 2;
    justify-self: start;
    min-height: var(--target-touch);
  }

  .brief-task {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .brief-task > .brief-action-sev {
    grid-column: 2;
  }
}

@media (forced-colors: active) {
  .brief-action-link,
  .brief-win {
    border-color: CanvasText;
  }
}

/* One-on-Ones (app declutter, Oct 13, 2026): the coaching queue. The head ("Coaching queue" + (i) holding the cadence and
   the queue help, the people and data-through line, two chips and "+ New commitment"), one table row per rostered
   salesperson that expands in place (.coach-detail, one at a time), then Store activity (the trend chart, its four tiles
   now one head line) and Commitments (Open · Done · All). Status colour is only a dot beside a number or word. */
.coach-head {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

/* The head's (i) panel is anchored to this block on phones (below), so it opens inside the viewport. */
.coach-title {
  position: relative;
  min-width: 0;
}

.coach-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coach-heading h2 {
  margin: 0;
  color: var(--rp-ink);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: var(--leading-snug);
}

.coach-sub {
  margin: 4px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.coach-tools {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.coach-steps {
  margin: 6px 0 0;
  padding-left: 20px;
}

.coach-steps + p {
  margin: 8px 0 0;
}

/* The queue: a plain table when the card is wide enough (stacked rows below, in the container rule further down), with
   a safety scroll inside the card, never the page. */
.coach-queue {
  padding: 6px 18px;
  overflow-x: auto;
}

.coach-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md);
}

.coach-queue-table th {
  padding: 10px 10px 10px 0;
  color: var(--rp-ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.coach-queue-table td {
  padding: 10px 10px 10px 0;
  border-top: 1px solid var(--rp-line);
  vertical-align: middle;
}

.coach-queue-table .coach-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coach-row {
  cursor: pointer;
}

.coach-row:hover,
.coach-row.is-open,
.coach-detail {
  background: var(--rp-inset);
}

.coach-toggle {
  padding: 4px 6px 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--rp-ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.coach-toggle:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

.coach-toggle .avatar {
  width: 30px;
  height: 30px;
}

.coach-name {
  white-space: nowrap;
}

.coach-pri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rp-ink-2);
  white-space: nowrap;
}

.coach-pri b {
  color: var(--rp-ink);
  font-weight: 600;
}

.coach-weak b {
  display: block;
  color: var(--rp-ink);
  font-weight: 600;
}

/* One short evidence line; the full text is in its title. */
.coach-weak b + span {
  max-width: 40ch;
  display: block;
  overflow: hidden;
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-none {
  color: var(--rp-ink-2);
}

.coach-also {
  color: var(--rp-ink-3);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Column names repeated inside the stacked rows on phones; the table head names them on wider screens. */
.coach-cell-label {
  display: none;
}

.coach-known {
  color: var(--rp-ink-3);
  font-size: 11px;
}

.coach-plan-cell {
  text-align: right;
}

.coach-plan {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--rp-line);
  border-radius: var(--radius-pill);
  background: var(--rp-card);
  color: var(--rp-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.coach-plan:hover {
  border-color: color-mix(in oklab, var(--rp-accent) 55%, var(--rp-line));
}

.coach-plan:focus-visible {
  outline: 2px solid var(--rp-accent);
  outline-offset: 2px;
}

/* The expanded row: four groups in one bordered box under the row. */
.coach-queue-table .coach-detail > td {
  padding: 0 0 14px;
  border-top: 0;
}

.coach-detail-grid {
  margin: 0 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  border: 1px solid color-mix(in oklab, var(--rp-accent) 40%, var(--rp-line));
  border-radius: 12px;
  background: var(--rp-card);
  cursor: auto;
}

.coach-group {
  min-width: 0;
}

.coach-group h4 {
  margin: 0 0 6px;
  color: var(--rp-ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coach-group p {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.coach-group b {
  color: var(--rp-ink);
  font-weight: 600;
}

.coach-activity-date {
  color: var(--rp-ink-3);
}

.coach-flags {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--rp-ink-2);
  font-size: 12.5px;
  line-height: 1.45;
  list-style: none;
}

.coach-flags li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.coach-pairs {
  margin-top: 8px;
  display: grid;
  gap: 4px;
}

/* Label and value on one line, any note or tag under them; the old tile frames and caps labels are dropped here. */
.coach-pair,
.coach-detail .channel-close-metric {
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rp-ink-2);
  font-size: 12.5px;
}

.coach-pair > span:first-child,
.coach-detail .channel-close-metric > span {
  color: var(--rp-ink-2);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.coach-pair > strong,
.coach-detail .channel-close-metric > strong,
.coach-detail .activity-delta {
  color: var(--rp-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}

.coach-detail .activity-delta.trend-positive {
  color: var(--rp-good-ink);
}

.coach-pair small,
.coach-detail .channel-close-metric > small,
.coach-detail .activity-delta small {
  color: var(--rp-ink-3);
  font-size: 11.5px;
  font-weight: 400;
}

.coach-pair > small,
.coach-pair > .badge,
.coach-detail .channel-close-metric > small {
  grid-column: 1 / -1;
  justify-self: start;
}

.coach-detail .activity-delta {
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
}

.coach-channels {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rp-line);
}

.coach-muted,
.coach-empty {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

/* Store activity and Commitments: side by side when there is room for the trend chart. */
.coach-lower {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* The trend explorer sits inside the card: no frame, eyebrow or padding of its own. */
.coach-activity .daily-trend-explorer {
  margin: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.coach-activity .daily-trend-header {
  padding: 0 0 8px;
}

.coach-activity .daily-trend-header .eyebrow {
  display: none;
}

.coach-activity .daily-trend-header h2 {
  margin: 0 0 2px;
  font-size: var(--font-size-md);
}

.coach-activity .daily-trend-legend {
  padding: 4px 0 0;
}

.coach-activity .daily-trend-chart-wrap {
  padding: 0 0 2px;
}

.coach-commitments .rp-card-head {
  align-items: center;
}

.coach-filter button {
  min-height: 32px;
  font-size: var(--font-size-sm);
}

/* The commitment rows sit in the card as plain rows, not cards in a card. */
.coach-commitments .commitment-list {
  gap: 0;
}

.coach-commitments .commitment-card,
.coach-commitments .commitment-card.done {
  padding: 12px 0;
  border-top: 1px solid var(--rp-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.coach-commitments .commitment-card:first-child {
  padding-top: 2px;
  border-top: 0;
}

@media (min-width: 1280px) {
  .coach-lower {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

@media (max-width: 1100px) {
  .coach-queue-table .coach-also {
    display: none;
  }

  .coach-weak b + span {
    max-width: 24ch;
  }

  .coach-name {
    white-space: normal;
  }

  .coach-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .coach-tools {
    margin-left: 0;
  }

  /* The head's panel opens from the left edge of the head block, not from the (i) after the title. */
  .coach-heading .rp-info {
    position: static;
  }

  .coach-heading .rp-info-pop {
    top: calc(100% + 6px);
    left: 0;
  }

  .coach-queue {
    padding: 4px 14px;
  }

  .coach-plan {
    min-height: var(--target-touch);
  }

  .coach-commitments .rp-card-head {
    gap: 10px;
  }
}

/* Each row stacks as a block (name + priority, the weak point, units · gross and the button) whenever the queue card is
   too narrow for the table: every phone (≤700px) and tablets beside the sidebar. No horizontal scroll. Unnamed, so it
   queries the nearest size container (the queue's .rp-card) and stays out of the kit's named rp-card chart steps. */
@container (max-width: 720px) {
  .coach-queue-table,
  .coach-queue-table tbody {
    display: block;
  }

  .coach-queue-table thead {
    display: none;
  }

  .coach-queue-table tr {
    display: block;
  }

  .coach-queue-table tr.coach-row {
    padding: 12px 6px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "name name pri"
      "weak weak weak"
      "units gross plan";
    align-items: center;
    gap: 6px 8px;
    border-top: 1px solid var(--rp-line);
  }

  .coach-queue-table tr.coach-row:first-child {
    border-top: 0;
  }

  .coach-queue-table .coach-row > td {
    padding: 0;
    display: block;
    border-top: 0;
  }

  .coach-name-cell {
    grid-area: name;
    min-width: 0;
  }

  .coach-pri-cell {
    grid-area: pri;
    justify-self: end;
  }

  .coach-weak {
    grid-area: weak;
  }

  .coach-weak b + span {
    max-width: none;
    white-space: normal;
  }

  .coach-queue-table .coach-row > .coach-also {
    display: none;
  }

  .coach-queue-table .coach-units {
    grid-area: units;
    text-align: left;
  }

  .coach-queue-table .coach-gross {
    grid-area: gross;
    text-align: left;
  }

  .coach-gross::before {
    margin-right: 8px;
    color: var(--rp-ink-3);
    content: "·";
  }

  .coach-cell-label {
    display: inline;
    color: var(--rp-ink-3);
    font-size: var(--font-size-sm);
  }

  .coach-plan-cell {
    grid-area: plan;
    justify-self: end;
  }

  .coach-name {
    white-space: normal;
  }

  .coach-queue-table .coach-detail > td {
    padding: 0 0 12px;
    display: block;
  }

  .coach-detail-grid {
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .coach-plan,
  .coach-detail-grid {
    border-color: CanvasText;
  }

  .coach-row.is-open {
    outline: 2px solid CanvasText;
  }
}

/* Forced colours: tokens are replaced by system colours, so bars, segments and tiles keep explicit edges. */
@media (forced-colors: active) {
  .rp-range button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .rp-card,
  .rp-tile,
  .rp-inset,
  .rp-callout,
  .rp-badge,
  .rp-rank-track,
  .rp-table-track,
  .rp-chart-empty {
    border: 1px solid CanvasText;
  }

  .rp-featured,
  .rp-tile.is-headline {
    border-width: 2px;
  }

  .rp-rank-fill,
  .rp-rank-fill.warn,
  .rp-table-fill,
  .rp-legend-dot,
  .rp-goal {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .rp-chart .rp-bar,
  .rp-chart .rp-seg,
  .rp-dot {
    forced-color-adjust: none;
    fill: CanvasText;
    stroke: Canvas;
    stroke-width: 1px;
  }

  .rp-chart .rp-bar.alt,
  .rp-chart .rp-bar.series-2 {
    fill: GrayText;
  }

  .rp-chart .rp-bar.series-1,
  .rp-dot.series-1 {
    fill: CanvasText;
  }

  .rp-line,
  .rp-line.series-1 {
    stroke: CanvasText;
  }

  .rp-inset-dot {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .rp-info-btn {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .rp-info-pop {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .rp-chart .rp-seg.series-2-soft {
    opacity: 1;
    fill: GrayText;
  }

  .rp-chart text {
    fill: CanvasText;
    stroke: none;
  }

  .rp-chart .rp-grid {
    stroke: GrayText;
  }

  .rp-hit:focus-visible .rp-bar,
  .rp-hit:focus-visible .rp-seg,
  .rp-hit:focus-visible .rp-hit-area {
    stroke: Highlight;
    stroke-width: 3px;
  }

  .rp-click:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Add widgets panel (Customizable Home): the Access box's rows and blue switches, narrower, one list grouped by
   area. The body scrolls between the fixed header and the edge of the box. */
.home-widgets-modal {
  width: min(480px, calc(100vw - 32px));
}

.home-widgets-body {
  min-width: 0;
  max-height: min(80vh, 640px);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.home-widgets-group {
  display: grid;
}

.home-widgets-group .access-row:last-child {
  border-bottom: 0;
}

/* My goals (Release 3, Oct 15, 2026): number goals are C2 cards (measure, progress text, bar, through line), checklist
   goals are tick rows, and the add/edit form sits inline in the widget. M stacks; W is two columns (one on a phone).
   Progress text wraps only at spaces, so a number never breaks mid-digit at 375px. */
.home-goals .rp-card-head {
  align-items: center;
}

.goal-add,
.goal-edit {
  flex: none;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rp-accent-ink);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.goal-add:hover,
.goal-edit:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.goal-cards {
  display: grid;
  gap: 10px;
}

.goal-cards.is-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 639px) {
  .goal-cards.is-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.goal-card,
.goal-tick,
.goal-form {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background: var(--rp-inset);
}

.goal-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.goal-metric {
  min-width: 0;
  margin-right: auto;
  color: var(--rp-ink);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.goal-tag {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rp-card);
  color: var(--rp-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
}

.goal-progress {
  margin: 6px 0 0;
  color: var(--rp-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: keep-all;
}

.goal-bar {
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--rp-card);
}

.goal-bar > i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--rp-bar);
}

.goal-through {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-sm);
}

.goal-tick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.goal-check {
  display: flex;
  flex: 1 1 10rem;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rp-ink);
  font: inherit;
  font-size: var(--font-size-md);
  text-align: left;
  cursor: pointer;
}

.goal-check:disabled {
  cursor: default;
}

.goal-check-box {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--rp-ink-3);
  border-radius: 6px;
  background: var(--rp-card);
  color: var(--color-on-brand);
  font-size: 0.8125rem;
  line-height: 1;
}

.goal-check.is-done .goal-check-box {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--color-on-brand);
}

.goal-check.is-done .goal-check-label {
  color: var(--rp-ink-2);
  text-decoration: line-through;
}

.goal-check-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.goal-check:focus-visible,
.goal-add:focus-visible,
.goal-edit:focus-visible,
.goal-kind button:focus-visible {
  outline: 2px solid var(--rp-accent-ink);
  outline-offset: 2px;
}

.goal-form {
  display: grid;
  gap: 12px;
}

.goal-form h4 {
  margin: 0;
  color: var(--rp-ink);
  font-size: var(--font-size-md);
}

.goal-form-note,
.goal-error {
  margin: 0;
  font-size: var(--font-size-sm);
}

.goal-form-note {
  color: var(--rp-ink-2);
}

.goal-error {
  color: var(--color-crit-strong);
  font-weight: 600;
}

.goal-kind {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--rp-card);
}

.goal-kind button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rp-ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.goal-kind button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--color-on-brand);
}

.goal-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-list-empty + .goal-add {
  margin-left: -8px;
}

/* My notes and My One-on-One (Release 3). Note text keeps its line breaks; long words wrap inside the box. */
.home-notes .rp-card-head,
.home-oneonone .rp-card-head {
  align-items: center;
}

.note-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rp-line);
  border-radius: 12px;
  background: var(--rp-inset);
}

.note-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 4px 0 0;
  color: var(--rp-muted, var(--color-text-muted));
  font-size: var(--font-size-sm);
}

.note-controls {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.note-more {
  margin-top: 6px;
}

.note-input {
  width: 100%;
  resize: vertical;
}

.note-count {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--rp-muted, var(--color-text-muted));
}

.note-count.is-full {
  color: var(--rp-warn, inherit);
}

.oneonone-section + .oneonone-section {
  margin-top: 14px;
}

.oneonone-section h4 {
  margin: 0 0 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* One-on-Ones Goals and Notes (Release 3): the Coaching plan's Goals (Month select, cards, + Add goal) and Notes
   (the person's own notes, read only; James's notes for them) sections, the Managers card and Team goals rows. */
.plan-goals .drawer-section-heading,
.plan-notes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.plan-notes-head h4 {
  margin: 0;
}

.plan-month {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--rp-muted, var(--color-text-muted));
}

.plan-month .select {
  width: auto;
  min-height: 32px;
}

.plan-add {
  margin-top: 8px;
}

.plan-empty,
.plan-readonly {
  margin: 0 0 6px;
  font-size: var(--font-size-sm);
}

.plan-readonly {
  color: var(--rp-muted, var(--color-text-muted));
}

.plan-notes .oneonone-section + .oneonone-section {
  margin-top: 16px;
}

.coach-managers {
  margin-top: 14px;
}

.coach-manager-rows,
.team-goal-rows {
  display: flex;
  flex-direction: column;
}

.team-goal-row,
.coach-manager-row {
  gap: 0;
  flex-wrap: wrap;
}

div.team-goal-row {
  cursor: default;
}

.team-goal-row .overview-watch-name,
.coach-manager-row .overview-watch-name {
  min-width: 0;
}

.coach-manager-row .muted {
  margin-left: 8px;
}

.coach-manager-sub {
  margin: 12px 0 4px;
  font-size: 12px;
  color: var(--color-ink-2);
}

/* Sales Team report (Release 3): pace chart, rep bars with goal ticks, floats, and the planner's unit goal field.
   Colours come from the --rp-* tokens and the shared ok / warn tokens only. */
.sales-team-report {
  min-width: 0;
  max-width: 100%;
}

.sales-team-report .team-featured {
  margin-bottom: 14px;
}

.sales-team-report .team-featured .rp-insets {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.sales-team-report .team-pace,
.sales-team-report .team-rolling,
.sales-team-report .team-rep-bars,
.sales-team-report .team-vendors,
.team-detail .team-rep-pace {
  min-width: 0;
}

/* Bars and rows are touch targets: 44px tall. The goal tick is dark ink so it reads over the fill in both themes;
   a 1px card-coloured halo gives it an edge where it crosses the fill (dark: ink over sky blue alone is 2.7:1). */
.sales-team-report .rp-rank,
.team-detail .rp-rank {
  min-height: 44px;
}

.sales-team-report .rp-goal,
.team-detail .rp-goal {
  background: var(--rp-ink);
  box-shadow: 0 0 0 1px var(--rp-card);
}

.team-rep-pace .rp-chart {
  margin-top: 4px;
}

/* Floating pages */
.team-detail-body {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.team-detail-info {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

.team-detail-lines {
  display: grid;
  gap: 6px;
}

.team-detail-line {
  margin: 0;
  color: var(--rp-ink-2);
  font-size: var(--font-size-md);
}

.team-detail-line strong {
  color: var(--rp-ink);
  font-weight: 600;
}

.team-detail-metrics .detail-row {
  min-height: 44px;
  align-items: center;
}

.team-detail-table th,
.team-detail-table td,
.team-deal-rows th,
.team-deal-rows td {
  overflow-wrap: anywhere;
}

.team-deal-rows tbody tr {
  min-height: 44px;
}

.team-deal-rows td {
  vertical-align: middle;
}

.team-deal-empty {
  margin: 0;
  padding: 12px 0;
  font-size: var(--font-size-sm);
}

/* Sales Results › Set store goal (Oct 17): the button sits beside the info tip on the Store this month card; the box
   reuses the modal shell. Outside the report scope inside the modal, so ok / warn / ink tokens. */
.team-featured .rp-featured-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Sales Team featured tiles: a number never breaks mid-digit ("$350,00" / "0"). It stays on one line and shrinks to
   fit its own tile: tile width (cqi; each tile is its own size container) ÷ its character count (--inset-chars, set by
   featuredCard) × 0.68em (this font measured 0.57–0.64em per character for money and units; 0.70 for bare digits, which are short enough to hit the cap). */
.team-featured .rp-inset {
  container-type: inline-size;
}

.team-featured .rp-inset strong {
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: clamp(0.875rem, calc(100cqi / (var(--inset-chars, 8) * 0.68)), 1.625rem);
}

/* At 820px and below keep the kit's smaller cap (.rp-inset strong is 1.375rem there). */
@media (max-width: 820px) {
  .team-featured .rp-inset strong {
    font-size: clamp(0.875rem, calc(100cqi / (var(--inset-chars, 8) * 0.68)), 1.375rem);
  }
}

.store-goal-open {
  min-height: 44px;
}

.store-goal-modal .form-grid .input {
  min-height: 44px;
}

.store-goal-note {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

.store-goal-error {
  margin: 0;
  color: var(--color-crit-fg);
  font-size: var(--font-size-sm);
}

.store-goal-confirm {
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-warn-strong);
  border-radius: 12px;
  background: var(--color-surface-2);
}

.store-goal-confirm p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
}

.store-goal-confirm .button,
.store-goal-modal .modal-footer .button {
  min-height: 44px;
}

.store-goal-modal .store-goal-clear {
  margin-right: auto;
}

/* Planner: Monthly unit goal field (rep drawer, outside the report scope, so ok / warn / ink tokens). */
.unit-goal {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.unit-goal-form {
  display: grid;
  gap: 6px;
}

.unit-goal-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.unit-goal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.unit-goal-row .input {
  flex: 1 1 100px;
  min-width: 0;
  min-height: 44px;
}

.unit-goal-row .button,
.unit-goal-confirm .button {
  min-height: 44px;
}

.unit-goal-error {
  margin: 0;
  color: var(--color-crit-fg);
  font-size: var(--font-size-sm);
}

.unit-goal-confirm {
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-warn-strong);
  border-radius: 12px;
  background: var(--color-surface-2);
}

.unit-goal-confirm p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--color-ink-1);
  font-size: var(--font-size-md);
}

.unit-goal-status {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-3);
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.unit-goal-status.tone-good {
  background: color-mix(in oklab, var(--color-ok-strong) 22%, var(--color-surface-1));
  color: var(--color-ok-fg);
}

.unit-goal-status.tone-warn {
  background: color-mix(in oklab, var(--color-warn-strong) 24%, var(--color-surface-1));
  color: var(--color-warn-fg);
}

.unit-goal-carry,
.unit-goal-saved,
.unit-goal-view {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--font-size-sm);
}

@media (max-width: 640px) {
  .sales-team-report .team-featured .rp-insets,
  .team-detail .rp-insets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Deal rows stack as blocks (phone-tables.css turns each into a card; this is the same shape without it). */
  .team-deal-rows,
  .team-deal-rows tbody,
  .team-deal-rows tr,
  .team-deal-rows td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .team-detail-table {
    min-width: 0;
  }

  /* The float's own detail table (Advertising vendor sub-sources) as phone cards: 2 columns, so a label like
     "Appointments" fits whole instead of breaking mid-word in the 3-column phone card. Specific enough to win over
     phone-tables.css, which loads later. */
  .drawer--float.team-detail .data-table.team-detail-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* A card cell is a grid item, so the table's sticky first-column z-index (2) would paint it over the float's sticky
     header (also 2, earlier in the page) when the float is scrolled. */
  .drawer--float.team-detail .data-table.team-detail-table tbody tr :is(td, th) {
    z-index: auto;
  }
}

/* Settings › Days closed (Oct 19): one row per marked holiday, Remove on the right. */
.closed-days-list {
  list-style: none;
  margin: 0 0 var(--space-3, 12px);
  padding: 0;
  display: grid;
  gap: 8px;
}

.closed-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Manager results (Oct 20, 2026): the section under the Sales Results rep table. Tables are plain .data-table, so the
   phone cards (phone-tables.css) apply on phones. */
.manager-results-block {
  padding: 0 16px 16px;
}
.manager-results-title {
  margin: 8px 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.manager-results-none,
.manager-results-note,
.manager-results-empty,
.manager-trend-empty {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 0.85rem;
}
.manager-results-block .manager-results-empty,
.manager-results-block .manager-trend-empty {
  padding: 0;
}
.manager-trend-table small {
  display: block;
}