/* ─────────────────────────────────────────────────────────
   CRM CONSOLE: TOKENS ("Cupertino light")

   The one place a literal colour, size, radius or duration may appear
   in the console. Everything in base.css, primitives.css and
   screens.css reads these names; a rule with a hex, an rgba() or a bare
   pixel font-size is a bug (components/crm/crm-styles.test.ts checks
   the colours).

   Three blocks, one palette each:
     .crm-body                         light, the default
     .crm-body[data-theme='dark']      dark, chosen explicitly
     @media (prefers-color-scheme: dark) .crm-body:not([data-theme='light'])
                                       dark, when the setter picked
                                       "System" (no attribute)
   The two dark blocks must stay identical (the styles test compares
   them). The theme attribute is set before first paint by the inline
   script in app/layout.tsx; ThemeSwitch writes the same attribute.

   The accent is ONE token. Its tint, hover, pending-bubble and focus
   shades are derived from it with color-mix, so moving the console to
   another blue is a one-line change per theme.

   Light is design A's NOTES (Apple system colours on white); dark is
   design D's (the matching dark system colours, elevation by lighter
   surface, never by shadow).
   ───────────────────────────────────────────────────────── */

.crm-body {
  color-scheme: light;

  /* Surfaces: canvas, then the grouped-list fill, then one step darker
     for controls sitting on that fill. --c-raised is what sits ON a
     surface (a select inside a group, the draft body, the active rail
     tile): white in light, a lighter grey in dark. */
  --c-bg: #ffffff;
  --c-surface: #f5f5f7;
  --c-surface-2: #ededf0;
  --c-raised: #ffffff;
  --c-rail: #f5f5f7;
  --c-separator: rgba(60, 60, 67, 0.1);
  --c-control-edge: rgba(0, 0, 0, 0.12);
  --c-shadow: rgba(0, 0, 0, 0.06);
  /* A floating panel (a suggestions list): soft and wide, no edge; the
     hairline is drawn by the panel itself. */
  --c-shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  /* The dim behind a modal sheet (the ⌘K palette). */
  --c-scrim: rgba(0, 0, 0, 0.18);
  /* The practice tour's dim around the element its coach mark points at. */
  --c-scrim-tour: rgba(0, 0, 0, 0.45);
  /* The near-black behind a photo in the lightbox, and the chrome on it. */
  --c-scrim-viewer: rgba(0, 0, 0, 0.86);
  --c-on-scrim: rgba(255, 255, 255, 0.92);
  --c-bar: rgba(255, 255, 255, 0.78);

  /* Label hierarchy. --c-text-4 is only for hairline glyphs (a task's
     empty check ring, an inactive timeline dot). */
  --c-text: #1d1d1f;
  --c-text-2: #6e6e73;
  --c-text-3: #98989d;
  --c-text-4: #c7c7cc;

  --c-accent: #007aff;
  /* Rep colours on the console calendar (all reps): mid-tone, read on
     the light and the dark ground alike, so the dark themes keep them. */
  --c-rep-0: #4f6bed;
  --c-rep-1: #0f9d8a;
  --c-rep-2: #e0782b;
  --c-rep-3: #c2418f;
  --c-rep-4: #8a5cd6;
  --c-rep-5: #6f9a1e;
  --c-on-accent: #ffffff;
  /* An admin looking through someone else's eyes (the field app's
     "Viewing as"): Apple's indigo, never the accent, so it never reads
     as one of the view's own controls. */
  --c-admin: #5856d6;

  --c-success: #28a745;
  --c-warning: #c76a00;
  --c-danger: #e5383b;
  --c-on-danger: #ffffff;

  --c-bubble-in: #e9e9eb;

  /* Derived. Mixed against --c-bg so they follow the theme. */
  --c-accent-tint: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg));
  --c-admin-tint: color-mix(in srgb, var(--c-admin) 12%, var(--c-bg));
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 86%, var(--c-text));
  --c-success-tint: color-mix(in srgb, var(--c-success) 12%, var(--c-bg));
  --c-warning-tint: color-mix(in srgb, var(--c-warning) 11%, var(--c-bg));
  --c-danger-tint: color-mix(in srgb, var(--c-danger) 11%, var(--c-bg));
  --c-bubble-out: var(--c-accent);
  --c-bubble-pending: color-mix(in srgb, var(--c-accent) 50%, var(--c-bg));
  --c-selection: color-mix(in srgb, var(--c-accent) 22%, transparent);
  --c-focus: color-mix(in srgb, var(--c-accent) 45%, transparent);
  --c-hover: color-mix(in srgb, var(--c-text) 5%, transparent);
  --c-pressed: color-mix(in srgb, var(--c-text) 10%, transparent);

  /* The chosen segment of a Segmented: the raised fill in light; in dark
     --c-raised equals the track, so it takes a lighter grey of its own. */
  --c-segment-on: var(--c-raised);
  /* Reports. --c-flow is the band between two steps of a conversion
     flow; --c-prev is a previous period's mark (the paler column, the
     dotted sparkline); --c-heat is how much accent a heat-map cell takes
     at its column's best (a cell mixes value × this). */
  --c-flow: color-mix(in srgb, var(--c-accent) 22%, var(--c-bg));
  --c-prev: color-mix(in srgb, var(--c-accent) 30%, var(--c-bg));
  --c-heat: 26%;

  /* The sign-in pages (screens.css, "Sign-in"): on a desktop the frame is
     a card raised off the canvas, white on the grouped grey in light and
     the lighter grey on the canvas in dark (elevation by surface). The
     logo has a light and a dark artwork; these show the one that reads. */
  --c-auth-canvas: var(--c-surface);
  --c-auth-card: var(--c-bg);
  --c-show-light: block;
  --c-show-dark: none;

  /* Test mode (db/187, screens.css "Test mode"): amber and striped, so a
     screen of fake homeowners is never taken for the real console. */
  --c-test: #f5a400;
  --c-test-ink: #2b1d00;
  --c-test-dark-stripe: #1c1300;
  --c-test-stripe: repeating-linear-gradient(-45deg, var(--c-test) 0 10px, var(--c-test-dark-stripe) 10px 20px);
  --c-test-tint: color-mix(in srgb, var(--c-test) 16%, var(--c-bg));
}

.crm-body[data-theme='dark'] {
  color-scheme: dark;

  --c-bg: #1c1c1e;
  --c-surface: #2c2c2e;
  --c-surface-2: #3a3a3c;
  --c-raised: #3a3a3c;
  --c-rail: #232325;
  --c-separator: #38383a;
  --c-control-edge: rgba(255, 255, 255, 0.08);
  --c-shadow: rgba(0, 0, 0, 0.3);
  --c-shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --c-scrim: rgba(0, 0, 0, 0.5);
  --c-scrim-tour: rgba(0, 0, 0, 0.6);
  --c-scrim-viewer: rgba(0, 0, 0, 0.9);
  --c-on-scrim: rgba(255, 255, 255, 0.92);
  --c-bar: rgba(28, 28, 30, 0.8);

  --c-text: #f2f2f7;
  --c-text-2: #a1a1a6;
  --c-text-3: #6e6e73;
  --c-text-4: #48484a;

  --c-accent: #0a84ff;
  --c-on-accent: #ffffff;
  --c-admin: #5e5ce6;

  --c-success: #30d158;
  --c-warning: #ff9f0a;
  --c-danger: #ff453a;
  --c-on-danger: #ffffff;

  --c-bubble-in: #3a3a3c;

  --c-accent-tint: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg));
  --c-admin-tint: color-mix(in srgb, var(--c-admin) 22%, var(--c-bg));
  --c-accent-hover: color-mix(in srgb, var(--c-accent) 86%, var(--c-text));
  --c-success-tint: color-mix(in srgb, var(--c-success) 16%, var(--c-bg));
  --c-warning-tint: color-mix(in srgb, var(--c-warning) 16%, var(--c-bg));
  --c-danger-tint: color-mix(in srgb, var(--c-danger) 16%, var(--c-bg));
  --c-bubble-out: var(--c-accent);
  --c-bubble-pending: color-mix(in srgb, var(--c-accent) 60%, var(--c-bg));
  --c-selection: color-mix(in srgb, var(--c-accent) 35%, transparent);
  --c-focus: color-mix(in srgb, var(--c-accent) 55%, transparent);
  --c-hover: color-mix(in srgb, var(--c-text) 7%, transparent);
  --c-pressed: color-mix(in srgb, var(--c-text) 12%, transparent);

  --c-segment-on: #636366;
  --c-flow: color-mix(in srgb, var(--c-accent) 34%, var(--c-bg));
  --c-prev: color-mix(in srgb, var(--c-accent) 38%, var(--c-bg));
  --c-heat: 40%;

  --c-auth-canvas: var(--c-bg);
  --c-auth-card: var(--c-surface);
  --c-show-light: none;
  --c-show-dark: block;

  --c-test: #ffb31a;
  --c-test-ink: #1c1300;
  --c-test-dark-stripe: #1c1300;
  --c-test-stripe: repeating-linear-gradient(-45deg, var(--c-test) 0 10px, var(--c-test-dark-stripe) 10px 20px);
  --c-test-tint: color-mix(in srgb, var(--c-test) 20%, var(--c-bg));
}

@media (prefers-color-scheme: dark) {
  .crm-body:not([data-theme='light']) {
    color-scheme: dark;

    --c-bg: #1c1c1e;
    --c-surface: #2c2c2e;
    --c-surface-2: #3a3a3c;
    --c-raised: #3a3a3c;
    --c-rail: #232325;
    --c-separator: #38383a;
    --c-control-edge: rgba(255, 255, 255, 0.08);
    --c-shadow: rgba(0, 0, 0, 0.3);
    --c-shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --c-scrim: rgba(0, 0, 0, 0.5);
    --c-scrim-tour: rgba(0, 0, 0, 0.6);
    --c-scrim-viewer: rgba(0, 0, 0, 0.9);
    --c-on-scrim: rgba(255, 255, 255, 0.92);
    --c-bar: rgba(28, 28, 30, 0.8);

    --c-text: #f2f2f7;
    --c-text-2: #a1a1a6;
    --c-text-3: #6e6e73;
    --c-text-4: #48484a;

    --c-accent: #0a84ff;
    --c-on-accent: #ffffff;
    --c-admin: #5e5ce6;

    --c-success: #30d158;
    --c-warning: #ff9f0a;
    --c-danger: #ff453a;
    --c-on-danger: #ffffff;

    --c-bubble-in: #3a3a3c;

    --c-accent-tint: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg));
    --c-admin-tint: color-mix(in srgb, var(--c-admin) 22%, var(--c-bg));
    --c-accent-hover: color-mix(in srgb, var(--c-accent) 86%, var(--c-text));
    --c-success-tint: color-mix(in srgb, var(--c-success) 16%, var(--c-bg));
    --c-warning-tint: color-mix(in srgb, var(--c-warning) 16%, var(--c-bg));
    --c-danger-tint: color-mix(in srgb, var(--c-danger) 16%, var(--c-bg));
    --c-bubble-out: var(--c-accent);
    --c-bubble-pending: color-mix(in srgb, var(--c-accent) 60%, var(--c-bg));
    --c-selection: color-mix(in srgb, var(--c-accent) 35%, transparent);
    --c-focus: color-mix(in srgb, var(--c-accent) 55%, transparent);
    --c-hover: color-mix(in srgb, var(--c-text) 7%, transparent);
    --c-pressed: color-mix(in srgb, var(--c-text) 12%, transparent);

    --c-segment-on: #636366;
    --c-flow: color-mix(in srgb, var(--c-accent) 34%, var(--c-bg));
    --c-prev: color-mix(in srgb, var(--c-accent) 38%, var(--c-bg));
    --c-heat: 40%;

    --c-auth-canvas: var(--c-bg);
    --c-auth-card: var(--c-surface);
    --c-show-light: none;
    --c-show-dark: block;

    --c-test: #ffb31a;
    --c-test-ink: #1c1300;
    --c-test-dark-stripe: #1c1300;
    --c-test-stripe: repeating-linear-gradient(-45deg, var(--c-test) 0 10px, var(--c-test-dark-stripe) 10px 20px);
    --c-test-tint: color-mix(in srgb, var(--c-test) 20%, var(--c-bg));
  }
}

/* Theme-independent: shape, type, spacing, layers, motion, layout. */
.crm-body {
  /* Shape. Controls take sm, grouped lists and cards md/lg, the draft
     card xl; bubbles have their own radius with a tighter tail corner.
     Pills and round buttons use full. */
  --c-radius-sm: 6px;
  --c-radius-control: 8px;
  --c-radius-md: 10px;
  --c-radius-lg: 12px;
  /* Mask stop: only its alpha matters (a fully opaque mask keeps content). */
  --c-mask-solid: #000;
  --c-radius-xl: 16px;
  --c-radius-bubble: 18px;
  --c-radius-tail: 6px;
  --c-radius-full: 999px;
  --c-hairline: 0.5px;

  /* Type ladder. Weight (400/500/600) does the hierarchy, not size.
     --c-text-2xs is for rail labels and count badges only; --c-text-message
     is message text (bubbles, the composer), which Messages sets a step
     above body. */
  --c-text-2xs: 10px;
  --c-text-xs: 11px;
  --c-text-sm: 12px;
  --c-text-md: 13px;
  --c-text-message: 14px;
  --c-text-lg: 15px;
  --c-text-xl: 17px;
  --c-text-2xl: 22px;
  /* One display step: a report's headline sentence, once per screen. */
  --c-text-display: 30px;
  --c-leading: 1.4;
  --c-leading-tight: 1.2;

  /* Spacing, 4px base. --c-space-hair is the 2px gap between stacked
     bubbles and segmented buttons. */
  --c-space-hair: 2px;
  --c-space-1: 4px;
  --c-space-2: 8px;
  --c-space-3: 12px;
  --c-space-4: 16px;
  --c-space-5: 20px;
  --c-space-6: 24px;
  --c-space-7: 28px;
  --c-space-8: 32px;

  /* Control heights. */
  --c-control-sm: 24px;
  --c-control-md: 28px;
  --c-control-lg: 36px;
  /* A finger's target: the phone's top bar and drawer rows. */
  --c-tap: 44px;
  /* The sign-in pages' fields and buttons: a size up from --c-tap, for
     owners and reps signing in once in a while, often on a phone. */
  --c-tap-lg: 48px;

  /* A Row's label column (label beside value), and the one line a label
     shares with a small control beside it (the warmth meter). */
  --c-row-label-w: 108px;
  --c-warmth-line: 20px;

  /* Form controls (Input, Select, Textarea) share one fill and one lift.
     On the canvas they take the grouped fill and need no edge; on a grey
     fill (a grouped list, the rail, a filter bar, the composer) the
     context sets them to --c-raised with a hairline lift instead
     (primitives.css, "Controls on a fill"), so a control always reads one
     step off whatever it sits on. */
  --c-control-fill: var(--c-surface);
  --c-control-lift: 0 0 0 0 transparent;

  /* A grouped list's fill. The canvas takes --c-surface; a pane that is
     itself --c-surface (the sandbox inspector) sets it to --c-raised so
     its groups, stat strip and waterfall still read one step off it. */
  --c-group-fill: var(--c-surface);

  /* The Select chevron, as a mask: ChevronDownIcon's path
     (components/crm/icons), so the glyph matches the icon set. The fill
     is only the mask's alpha; the colour is the element's background. */
  --c-glyph-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E");

  /* Layers. */
  --c-z-base: 0;
  --c-z-sticky: 10;
  --c-z-rail: 20;
  --c-z-popover: 40;
  --c-z-overlay: 60;
  --c-z-toast: 80;

  /* Motion. */
  --c-motion-fast: 120ms;
  --c-motion: 200ms;
  --c-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Layout. --c-window-h is the window's height: the dynamic viewport
     where the browser has it, so a phone's collapsing toolbar does not
     push a pinned pane's foot off-screen (a desktop's is the same as
     100vh). --c-screen-h is the height a screen fills: the window, less
     the phone's top bar (below); the dev gallery sets a fixed height to
     frame a screen. */
  --c-window-h: 100vh;
  --c-screen-h: var(--c-window-h);
  --c-topbar-h: 52px;
  /* Where a screen's own sticky bar pins: the window's top, or under
     the phone's top bar. */
  --c-sticky-top: 0px;
  --c-rail-width: 88px;
  --c-side-width: 392px;
  /* The Attention queue's conversation drawer (QueueDrawer.tsx), at most. */
  --c-queue-drawer-w: 460px;
  /* The sign-in frame: the whole card (its width, and its height when the
     window has it), the column Clerk's box takes, and the logo, desktop
     and phone. */
  --c-auth-frame-w: 920px;
  --c-auth-frame-h: 600px;
  --c-auth-column-w: 400px;
  --c-auth-logo-w: 200px;
  --c-auth-logo-w-sm: 168px;
  --c-thread-max: 62%;
}

@supports (height: 100dvh) {
  .crm-body {
    --c-window-h: 100dvh;
  }
}

/* Phones (the console's 720px breakpoint). Controls grow toward a
   finger's size, and a screen fills the window under the top bar
   (ShellNav.tsx), whose height takes the notch's inset too. Fields keep
   16px text here so iOS does not zoom in on focus (base.css). */
@media (max-width: 720px) {
  .crm-body {
    --c-control-sm: 32px;
    --c-control-md: 40px;
    --c-control-lg: 44px;
    --c-text-field: 16px;
    --c-screen-h: calc(var(--c-window-h) - var(--c-topbar-h) - env(safe-area-inset-top));
    --c-sticky-top: calc(var(--c-topbar-h) + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-body {
    --c-motion-fast: 0ms;
    --c-motion: 0ms;
  }
}

/* Fonts. Declared on .crm-app, not .crm-body: next/font puts its
   variables on the element carrying the font classes (the /crm layout's
   wrapper, or the gallery's frames), and a custom property that reads
   another is resolved where it is declared. Inter for everything; the
   mono only for phone numbers, ids and times. */
.crm-app {
  --c-font-ui: var(--c-font-inter), 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --c-font-mono: var(--c-font-jetbrains), ui-monospace, Menlo, Consolas, monospace;
}