/* ============================================================
   1. Design tokens (M2 T2.1)
   ============================================================

   Source of truth for visual constants. Every component should
   reference these tokens rather than hex literals — that's what
   lets the theme toggle (T2.12) flip the entire app between dark
   and light without touching component CSS.

   Token naming:
     --color-*      semantic colors (bg / surface / fg / primary / danger ...)
     --space-*      4-based spacing scale (4, 8, 12, 16, 24, 32, 48, 64)
     --radius-*     border radii (sm 4, md 8, lg 12, pill)
     --shadow-*     elevation
     --font-*       typography (family, size, weight, line-height)
     --numerals     tabular-nums + lining-nums for number columns

   Legacy tokens (--bg, --card, --text, --muted, --line, --accent)
   are preserved as aliases pointing at the new semantic tokens so
   existing rules in this file continue to render without change.
   New M2+ rules should reference the semantic names directly.
*/
/* Inter — the design system's single typeface (variable, self-hosted;
   no build step / CDN, matching how ECharts is vendored). Weights 400/500
   are used in the new UI; the variable axis covers the rest for legacy. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 950;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Typography (Inter; design system uses 400/500, others kept for
         legacy components) --- */
  --font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-sans: var(--font-family);
  --font-mono: var(--font-family-mono);
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;
  /* Design-system type scale (A3a) */
  --fs-22: 22px; --fs-18: 18px; --fs-16: 16px; --fs-14: 14px;
  --fs-13: 13px; --fs-12: 12px; --fs-11: 11px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-base: 1.5;
  --numerals: tabular-nums lining-nums;

  /* ============================================================
     Marketing-analytics design system (A3b) — LIGHT (default).
     New components reference these tokens directly. The legacy
     --color-* names further down are var() ALIASES onto them, so
     every existing rule re-skins to this palette for free and
     follows the theme flip in [data-theme="dark"] with no edits.
     ============================================================ */
  /* Surfaces (neutral chrome) */
  --bg-page:    #F7F6F2;
  --bg-surface: #FFFFFF;
  --bg-raised:  #FFFFFF;
  --bg-sunken:  #F0EEE8;
  --bg-inset:   #FBFAF7;
  /* Borders */
  --border-subtle:  rgba(11, 16, 32, 0.07);
  --border-default: rgba(11, 16, 32, 0.12);
  --border-strong:  rgba(11, 16, 32, 0.20);
  /* Text */
  --text-primary:   #0B1020;
  --text-secondary: #5A6178;
  --text-tertiary:  #8A91A6;
  --text-on-color:  #FFFFFF;
  /* Accent (cobalt — single hero/interactive colour) */
  --accent:       #2547FF;
  --accent-hover: #1A38E0;
  --accent-tint:  #E8ECFF;
  --accent-ink:   #FFFFFF;
  /* Semantic ramps — fill / foreground / solid / on-solid */
  --success-bg: #E2F4EB; --success-fg: #0E8E5C; --success-solid: #12A268; --success-on: #FFFFFF;
  --warning-bg: #FAEBC9; --warning-fg: #97640F; --warning-solid: #E0922F; --warning-on: #2A1505;
  --danger-bg:  #FBE5E8; --danger-fg:  #C42B3F; --danger-solid:  #DC3A50; --danger-on:  #FFFFFF;
  --info-bg:    #E8ECFF; --info-fg:    #2547FF; --info-solid:    #2547FF; --info-on:    #FFFFFF;
  /* Delta (period comparison) — intent-based, not arrow-based */
  --pos: #0E8E5C;
  --neg: #C42B3F;
  /* Chart series (6, ordered by visual weight; colour-blind-aware) */
  --series-1: #2547FF; --series-2: #14857B; --series-3: #E0922F;
  --series-4: #7C5CE0; --series-5: #D6418B; --series-6: #4BA3E3;
  --grid-line: rgba(11, 16, 32, 0.08);
  --axis-text: #8A91A6;
  --chart-fill-from: rgba(37, 71, 255, 0.16);
  --chart-fill-to:   rgba(37, 71, 255, 0.00);
  /* Funnel ramp (single deepening hue) */
  --funnel-1: #CECBF6; --funnel-2: #AFA9EC; --funnel-3: #7F77DD; --funnel-4: #534AB7;

  /* Legacy --color-* names, now var() ALIASES onto the tokens above so
     they resolve per-theme automatically (no dark redefinition needed). */
  --color-bg: var(--bg-page);
  --color-surface: var(--bg-surface);
  --color-surface-2: var(--bg-sunken);
  --color-fg: var(--text-primary);
  --color-fg-muted: var(--text-secondary);
  --color-fg-faint: var(--text-tertiary);
  --color-border: var(--border-subtle);
  --color-border-strong: var(--border-strong);
  --color-primary: var(--accent);
  --color-primary-fg: var(--accent-ink);
  --color-success: var(--success-fg);
  --color-warning: var(--warning-fg);
  --color-danger: var(--danger-fg);
  --color-info: var(--info-fg);
  /* Body blob retired (design forbids decorative gradients); aliased flat
     to the page colour so any lingering reference stays neutral. */
  --bg-blob: var(--bg-page);

  /* --- Spacing: legacy --space-* values preserved for layout stability --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Design-system 8-pt scale (A3c) for new components */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* --- Shadow (design-system elevation A3c) --- */
  --shadow-xs: 0 1px 2px rgba(11, 16, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.05), 0 1px 1px rgba(11, 16, 32, 0.04);
  --shadow-md: 0 4px 14px rgba(11, 16, 32, 0.07), 0 1px 3px rgba(11, 16, 32, 0.05);
  --shadow-lg: 0 18px 40px rgba(11, 16, 32, 0.12), 0 4px 10px rgba(11, 16, 32, 0.06);
  --shadow-pop: 0 10px 30px rgba(11, 16, 32, 0.16), 0 2px 6px rgba(11, 16, 32, 0.08);

  /* --- Shell metrics --- */
  --nav-w: 248px;
  --topbar-h: 60px;
  --filterbar-h: 56px;

  /* --- Legacy aliases (preserve existing CSS) --- */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --card2: var(--color-surface-2);
  --text: var(--color-fg);
  --muted: var(--color-fg-muted);
  --line: var(--color-border);
  /* NB: --accent is now a primary design token (cobalt) above; the old
     `--accent: var(--color-primary)` alias is intentionally dropped so
     existing var(--accent) usages resolve to the new accent directly
     (and to avoid a circular --accent → --color-primary → --accent ref). */
}

/* Dark theme. Activated when the JS sets data-theme="dark" (the toggle),
   or via the OS preference below. Only the design tokens are redefined;
   the --color-* aliases reference them with var(), so they flip too. */
[data-theme="dark"] {
  --bg-page:    #0B1020;
  --bg-surface: #141A2E;
  --bg-raised:  #1B2238;
  --bg-sunken:  #10162A;
  --bg-inset:   #11182C;
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.13);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-tertiary:  rgba(255, 255, 255, 0.42);
  --text-on-color:  #FFFFFF;
  --accent:       #5B78FF;
  --accent-hover: #7088FF;
  --accent-tint:  rgba(91, 120, 255, 0.16);
  --accent-ink:   #FFFFFF;
  --success-bg: rgba(18, 162, 104, 0.16); --success-fg: #45C98E; --success-solid: #12A268; --success-on: #04140C;
  --warning-bg: rgba(224, 146, 47, 0.16); --warning-fg: #E6A94E; --warning-solid: #E0922F; --warning-on: #1F1304;
  --danger-bg:  rgba(220, 58, 80, 0.18);  --danger-fg:  #F0697C; --danger-solid:  #DC3A50; --danger-on:  #FFFFFF;
  --info-bg:    rgba(91, 120, 255, 0.16); --info-fg:    #8AA0FF; --info-solid:    #5B78FF; --info-on:    #FFFFFF;
  --pos: #45C98E;
  --neg: #F0697C;
  --series-1: #6E8BFF; --series-2: #2BB6A8; --series-3: #EBA94E;
  --series-4: #9E82F0; --series-5: #E96AAB; --series-6: #67B6F0;
  --grid-line: rgba(255, 255, 255, 0.08);
  --axis-text: rgba(255, 255, 255, 0.42);
  --chart-fill-from: rgba(110, 139, 255, 0.22);
  --chart-fill-to:   rgba(110, 139, 255, 0.00);
  --funnel-1: #3A3F73; --funnel-2: #515795; --funnel-3: #6E72C4; --funnel-4: #8C8FE6;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.40);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* System preference — light is the default now, so we only switch to
   DARK for users whose OS prefers dark and who haven't explicitly chosen
   a theme. An explicit data-theme="light"/"dark" opts out. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-page:    #0B1020;
    --bg-surface: #141A2E;
    --bg-raised:  #1B2238;
    --bg-sunken:  #10162A;
    --bg-inset:   #11182C;
    --border-subtle:  rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.13);
    --border-strong:  rgba(255, 255, 255, 0.24);
    --text-primary:   rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-tertiary:  rgba(255, 255, 255, 0.42);
    --text-on-color:  #FFFFFF;
    --accent:       #5B78FF;
    --accent-hover: #7088FF;
    --accent-tint:  rgba(91, 120, 255, 0.16);
    --accent-ink:   #FFFFFF;
    --success-bg: rgba(18, 162, 104, 0.16); --success-fg: #45C98E; --success-solid: #12A268; --success-on: #04140C;
    --warning-bg: rgba(224, 146, 47, 0.16); --warning-fg: #E6A94E; --warning-solid: #E0922F; --warning-on: #1F1304;
    --danger-bg:  rgba(220, 58, 80, 0.18);  --danger-fg:  #F0697C; --danger-solid:  #DC3A50; --danger-on:  #FFFFFF;
    --info-bg:    rgba(91, 120, 255, 0.16); --info-fg:    #8AA0FF; --info-solid:    #5B78FF; --info-on:    #FFFFFF;
    --pos: #45C98E;
    --neg: #F0697C;
    --series-1: #6E8BFF; --series-2: #2BB6A8; --series-3: #EBA94E;
    --series-4: #9E82F0; --series-5: #E96AAB; --series-6: #67B6F0;
    --grid-line: rgba(255, 255, 255, 0.08);
    --axis-text: rgba(255, 255, 255, 0.42);
    --chart-fill-from: rgba(110, 139, 255, 0.22);
    --chart-fill-to:   rgba(110, 139, 255, 0.00);
    --funnel-1: #3A3F73; --funnel-2: #515795; --funnel-3: #6E72C4; --funnel-4: #8C8FE6;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.40);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  /* Flat page colour — the design system groups with whitespace + borders,
     not decorative gradients. Use background-color (longhand) so the var()
     re-resolves on theme flip in Chromium. */
  background-color: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

.topbar {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; }
.brand a { font-weight: 700; letter-spacing: 0.2px; }
.nav a { margin-left: 16px; }

h1 { margin: 18px 0 8px; font-size: 26px; }
.muted { color: var(--muted); }

/* v2 home tiles (HubSpot-ish) */
.v2-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.v2-tile {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-sunken), var(--bg-sunken));
  border-radius: 12px;
  padding: 14px;
  min-height: 92px;
  text-decoration: none;
}
.v2-tile:hover { text-decoration: none; border-color: rgba(125, 211, 252, 0.5); }
.v2-tile-title { font-weight: 800; margin-bottom: 6px; }
.v2-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg-surface);
}
.v2-tile--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 980px) {
  .v2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v2-tiles { grid-template-columns: 1fr; }
}

/* v2 canvas (journeys) */
.v2-canvas {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 12px;
}
.v2-canvas-graph {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-surface);
  min-height: 380px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-canvas-inspector {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-sunken);
  padding: 12px;
}
.v2-node {
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}
.v2-node:hover { border-color: rgba(125, 211, 252, 0.5); }
.v2-node--selected { outline: 2px solid rgba(125, 211, 252, 0.35); }
.v2-node--dragging { opacity: 0.55; }
.v2-node-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  margin-right: 8px;
  cursor: grab;
  user-select: none;
}
.v2-node-handle:active { cursor: grabbing; }
.v2-node-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.v2-node-meta { margin-left: auto; display: flex; gap: 6px; }
.v2-node-chip {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--bg-surface);
}

/* Simple modal (used for email preview) */
.wl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.wl-modal {
  width: min(1100px, 100%);
  height: min(820px, 92vh);
  border: 1px solid var(--line);
  background: var(--bg-surface);
  border-radius: 14px;
  box-shadow: 0 30px 120px rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wl-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
}
.wl-modal-title { font-weight: 800; }
.wl-modal-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.wl-modal-close {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}
.wl-modal-close:hover { filter: brightness(1.06); }
.wl-modal-body {
  padding: 12px;
  flex: 1;
  overflow: hidden;
}
.wl-modal-body iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-surface);
}
.v2-node-title { font-weight: 800; margin-bottom: 6px; }
@media (max-width: 980px) {
  .v2-canvas { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.field.actions { min-width: 160px; }
label { font-size: 12px; color: var(--muted); }
input, select, button {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  /* Theme-aware surface so inputs are legible in light mode (was a
     hardcoded dark-navy fill that turned into dark-on-dark). surface-2
     gives a touch more contrast so an input on a white card is still
     distinguishable. T2.12 fix. */
  background: var(--color-surface-2);
  color: var(--color-fg);
  padding: 0 12px;
}

/* Date/time inputs: ensure calendar icon + text are visible on dark background */
input[type="date"],
input[type="datetime-local"] {
  color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.85;
  cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--text);
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  color: var(--text);
}
button {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.22), rgba(125, 211, 252, 0.12));
  border-color: rgba(125, 211, 252, 0.35);
  cursor: pointer;
  font-weight: 600;
}
button:hover { filter: brightness(1.06); }

table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 10px;
}
th, td {
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th { color: var(--muted); font-size: 12px; letter-spacing: 0.2px; }
tbody tr:hover { background: var(--card2); }
.clickable { cursor: pointer; }
.clickable:hover { outline: 1px solid rgba(125, 211, 252, 0.25); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
code {
  /* Theme-aware (was white-on-white invisible in light mode). */
  background: var(--color-surface-2);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.table-wrap { overflow: auto; }

.search {
  width: 320px;
  max-width: 100%;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-btn:hover { filter: brightness(1.06); }

.icon-btn--mini {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  margin-left: 8px;
  font-size: 14px;
  line-height: 1;
}

.popover {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: min(520px, 80vh);
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.popover-title { font-weight: 800; }
.popover-body { display: flex; flex-direction: column; gap: 8px; }
.popover-check { display: flex; gap: 10px; align-items: center; }
.popover-check input { height: 16px; width: 16px; }
.popover-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}
.popover-actions select {
  flex: 1;
  min-width: 120px;
}

.btn-secondary {
  background: var(--bg-sunken);
  border-color: var(--border-default);
}

.sortable-th {
  user-select: none;
}
.sortable-th:hover {
  text-decoration: underline;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.pill {
  border: 1px solid var(--line);
  /* Theme-aware (was hardcoded dark-navy -> faint dark-grey in light
     mode). surface-2 is light-grey in light, subtle in dark. */
  background: var(--color-surface-2);
  padding: 8px 10px;
  border-radius: 999px;
}
.links a { margin-left: 10px; }

.footer { padding-top: 10px; padding-bottom: 30px; }

/* Funnel report */
.funnel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.funnel-step {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  border-radius: 14px;
  padding: 12px;
}
.funnel-step--link {
  display: block;
  color: inherit;
}
.funnel-step--link:hover {
  text-decoration: none;
  outline: 1px solid rgba(125, 211, 252, 0.25);
}
.funnel-step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.funnel-step-title { font-weight: 800; }
.funnel-step-key { opacity: 0.9; }
.funnel-step-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}
@media (max-width: 980px) {
  .funnel-step-metrics { grid-template-columns: 1fr; }
}
.funnel-metric {
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  border-radius: 12px;
  padding: 10px;
}
.funnel-metric-value {
  font-size: 20px;
  font-weight: 900;
  margin-top: 4px;
}
.funnel-arrow {
  display: flex;
  justify-content: center;
  padding: 2px 0 8px;
}
.funnel-drop {
  border: 1px dashed var(--border-default);
  background: var(--bg-sunken);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  width: min(520px, 100%);
}
.funnel-drop-value {
  font-size: 18px;
  font-weight: 900;
  margin-top: 4px;
}

/* Generic modal (used for Contacts column picker) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* The `hidden` HTML attribute only sets display:none at UA-stylesheet
   specificity, which the explicit `display: flex` above overrides — so
   a `<div class="modal-overlay" hidden>` would stay visible forever and
   block the page behind it. This attribute selector (higher specificity)
   makes `hidden` actually hide the overlay. Covers the Cmd-K search modal
   (T4.7) and the segment-preview slide-over (T3.5). */
.modal-overlay[hidden] {
  display: none;
}
.modal {
  width: min(1000px, 100%);
  max-height: 92vh;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  border-radius: 14px;
  box-shadow: 0 30px 120px rgba(0,0,0,0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.modal-body { padding: 12px; overflow: auto; }
.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

/* v2 Contacts grid: column picker */
.cols-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cols-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-sunken);
}
.cols-item--selected { user-select: none; }
.drag-handle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity: 0.7;
  cursor: grab;
  padding: 0 4px;
}
.drag-handle:active { cursor: grabbing; }

/* KPI tiles (customer dashboard) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.kpi {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: var(--bg-sunken);
}
/* ============================================================
   Composer wizard step indicator (M3 deferred composer)
   ============================================================ */
.mm-wizard-steps {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.mm-wizard-step {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.mm-wizard-step--active {
  color: var(--color-primary-fg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.mm-wizard-step--done {
  color: var(--color-success);
  border-color: var(--color-success);
}
.checklist-item--blocker { color: var(--color-danger); }

/* ============================================================
   Onboarding tour (M4 T4.6)
   ============================================================ */
.mm-tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-6);
}
.mm-tour-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  max-width: 420px;
  width: 100%;
}
.mm-tour-step {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-fg-faint);
  margin-bottom: var(--space-2);
}
.mm-tour-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
.mm-tour-body {
  font-size: var(--font-size-base);
  color: var(--color-fg-muted);
  line-height: var(--line-height-base);
  margin-bottom: var(--space-4);
}
.mm-tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
/* The highlighted element gets a bright ring that sits above the dim
   backdrop so the user can see what each step refers to. */
.mm-tour-highlight {
  position: relative;
  z-index: 201;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Quick search modal (M4 T4.7)
   ============================================================ */
.mm-search-results {
  max-height: 50vh;
  overflow-y: auto;
}
.mm-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--color-fg);
  border-left: 2px solid transparent;
}
.mm-search-item:hover,
.mm-search-item--active {
  background: var(--color-surface-2);
  border-left-color: var(--color-primary);
  text-decoration: none;
}
.mm-search-item-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}
.mm-search-item-sub {
  font-size: var(--font-size-xs);
}

/* ============================================================
   Segment editor (M3 T3.5)
   ============================================================ */
.segment-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.segment-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.segment-row-handle {
  color: var(--color-fg-faint);
  font-size: var(--font-size-lg);
  cursor: default;
  user-select: none;
}
.segment-row-type {
  min-width: 180px;
}
.segment-row-body {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.segment-row-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.segment-row-sub .input {
  min-width: 80px;
}
.segment-row-remove {
  background: transparent;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  font-size: var(--font-size-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.segment-row-remove:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.kpi-link { display: block; color: inherit; text-decoration: none; }
.kpi-link:hover { text-decoration: none; border-color: rgba(125, 211, 252, 0.5); }
.kpi-label { font-size: 12px; color: var(--text-secondary); }
.kpi-value { font-size: 26px; font-weight: 900; margin-top: 6px; }
.kpi-sub { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }

/* ============================================================
   New app shell (M1 T1.4) — gated by MM_ENABLE_NEW_SHELL env var.
   The existing .topbar / .container / .nav classes above are
   preserved for the legacy layout. These mm-shell-* classes
   live alongside them and only render when the feature flag
   is set in app config. Namespace: every class begins mm-shell-
   so nothing collides with existing styles.
   ============================================================ */

.mm-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  min-height: 100vh;
}
.mm-shell--collapsed {
  grid-template-columns: 56px 1fr;
}

.mm-shell-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mm-shell-topbar__toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-shell-topbar__toggle:hover { border-color: rgba(125, 211, 252, 0.5); }

/* T2.12 theme toggle button. The sun / moon glyphs are
   conditionally shown based on the current theme — dark theme shows
   the sun (click to go light), light shows the moon (click to go
   dark). */
.mm-shell-topbar__theme {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mm-shell-topbar__theme:hover { border-color: var(--color-primary); }
/* Default (no data-theme set = dark): show the sun (to go light). */
.mm-shell-topbar__theme-light { display: none; }
.mm-shell-topbar__theme-dark { display: inline; }
:root[data-theme="light"] .mm-shell-topbar__theme-dark { display: none; }
:root[data-theme="light"] .mm-shell-topbar__theme-light { display: inline; }
.mm-shell-topbar__brand a {
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text);
}
.mm-shell-topbar__spacer { flex: 1; }
.mm-shell-topbar__search {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
}
.mm-shell-topbar__search:hover { color: var(--text); border-color: rgba(125, 211, 252, 0.5); }
.mm-shell-topbar__user-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mm-shell-topbar__user-menu a {
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
}
.mm-shell-topbar__user-menu a:hover { background: var(--bg-sunken); text-decoration: none; }

.mm-shell-sidebar {
  grid-area: sidebar;
  background: var(--bg-surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
  /* Sticky so the sidebar is always visible while scrolling main content. */
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
}
.mm-shell-sidebar__brand-selector {
  padding: 8px 16px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.mm-shell-sidebar__brand-selector-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.mm-shell-sidebar__brand-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.mm-shell-sidebar__brand-single {
  /* Single-brand user: NO dropdown affordance. Brand renders as static text.
     This is the explicit project-owner requirement — the DOM must not signal
     that other brands exist. See docs/brand-isolation-audit.md. */
  display: block;
}
.mm-shell-sidebar__brand-form {
  margin: 0;
}
.mm-shell-sidebar__brand-multi {
  /* Multi-brand user: dropdown shows only their assigned brands. */
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-sunken);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mm-shell-sidebar__brand-multi:hover { border-color: rgba(125, 211, 252, 0.5); }
.mm-shell-sidebar__brand-multi:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.mm-shell-sidebar__group {
  margin-bottom: 12px;
}
.mm-shell-sidebar__group-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  padding: 8px 16px 4px;
}
.mm-shell-sidebar__item {
  display: block;
  padding: 6px 16px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.mm-shell-sidebar__item:hover {
  background: var(--bg-sunken);
  text-decoration: none;
  border-left-color: rgba(125, 211, 252, 0.3);
}
.mm-shell-sidebar__item--active {
  background: rgba(125, 211, 252, 0.08);
  border-left-color: var(--accent);
  font-weight: 600;
}

.mm-shell--collapsed .mm-shell-sidebar__brand-selector,
.mm-shell--collapsed .mm-shell-sidebar__group-title,
.mm-shell--collapsed .mm-shell-sidebar__item {
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mm-shell-main {
  grid-area: main;
  /* Match the existing .container max-width to keep page content layouts
     comfortable. The .container inside still applies, providing legacy
     pages a familiar centered column. */
  min-width: 0;
  padding: 20px;
}
.mm-shell-main .container {
  /* When inside the new shell, the inner .container should not constrain
     width to 1100px — the shell already constrains by giving sidebar its
     fixed column. Let main content fill the available space. */
  max-width: none;
  padding: 0;
}
/* Full-bleed breakout pages (the signups drilldown) use 100vw + negative
   margins to span the viewport. Inside the shell that ignores the 240px
   sidebar and slides the wide table UNDER it. Neutralise the breakout
   here so the wide table stays within the content column and scrolls
   horizontally via its own .table-wrap instead. */
.mm-shell-main .signups-drilldown-wide {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile / narrow viewport — collapse to single column. */
@media (max-width: 800px) {
  .mm-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .mm-shell-sidebar {
    display: none;
  }
}

/* ============================================================
   M2 T2.3 — Component classes for dashboards.

   Every dashboard rendered in M2 T2.5-2.8 uses these. They all
   reference design tokens — no hex literals — so the theme toggle
   (T2.12) flips them automatically.

   Documented in Phase 2 §2d of docs/02-ia-and-ux.md.
   ============================================================ */

/* --- Metric card -------------------------------------------- */

.metric-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-fg);
  text-decoration: none;
  min-width: 0;
}
.metric-card:hover {
  text-decoration: none;
  border-color: var(--color-primary);
}
.metric-card-label {
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.metric-card-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: var(--numerals);
  line-height: var(--line-height-tight);
  margin-top: var(--space-2);
  color: var(--color-fg);
}
.metric-card-delta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-2);
}
.metric-card-delta--up { color: var(--color-success); }
.metric-card-delta--down { color: var(--color-danger); }
.metric-card-delta--flat { color: var(--color-fg-muted); }
.metric-card-compare {
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-normal);
}
.metric-card-sparkline {
  height: 32px;
  margin-top: var(--space-2);
}

/* Large variant — used on executive headline cards. */
.metric-card--large .metric-card-value { font-size: var(--font-size-2xl); }

/* Minimal variant — no sparkline (used on admin dashboard where
   per-card time series isn't meaningful). */
.metric-card--minimal .metric-card-sparkline { display: none; }

/* Grid container for headline cards — 4-6 per row on wide screens,
   wraps responsively. Stripe-style auto-fit pattern. */
.metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* --- Chart panel ------------------------------------------- */

.chart-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.chart-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.chart-panel-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.chart-panel-actions {
  display: inline-flex;
  gap: var(--space-2);
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
}
.chart-panel-body {
  min-height: 200px;
  /* The body element is the ECharts container — its dimensions
     determine the chart size. */
}
.chart-panel-foot {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}

/* --- Insight card (Insights panel on landing dashboards) --- */

.insight {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-2);
}
.insight-direction {
  flex: 0 0 auto;
  font-size: var(--font-size-md);
  line-height: 1;
}
.insight--up .insight-direction { color: var(--color-success); }
.insight--down .insight-direction { color: var(--color-danger); }
.insight--neutral .insight-direction { color: var(--color-info); }
.insight-body {
  flex: 1 1 auto;
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  line-height: var(--line-height-base);
}
.insight-action {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  align-self: flex-end;
}

/* --- Checklist (HubSpot-style Required + Warnings) --------- */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.checklist-section {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.checklist-section-title {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-fg-muted);
}
.checklist-item {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.checklist-item:first-child { border-top: 0; }
.checklist-item--ok { color: var(--color-fg); }
.checklist-item--ok::before {
  content: "\2713";
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}
.checklist-item--warn { color: var(--color-fg); background: rgba(233, 162, 59, 0.06); }
.checklist-item--warn::before {
  content: "\26A0";
  color: var(--color-warning);
}
.checklist-item--blocker { color: var(--color-fg); background: rgba(239, 91, 91, 0.08); }
.checklist-item--blocker::before {
  content: "\2716";
  color: var(--color-danger);
}

/* --- Date range picker ------------------------------------ */

.date-range {
  position: relative;
  display: inline-block;
}
.date-range-trigger {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.date-range-trigger:hover { border-color: var(--color-primary); }
.date-range-popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 30;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
  min-width: 240px;
}
.date-range-presets {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.date-range-presets li {
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-fg);
}
.date-range-presets li:hover { background: var(--color-surface-2); }
.date-range-presets li[aria-selected="true"] {
  background: var(--color-surface-2);
  color: var(--color-primary);
}
.date-range-compare {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}

/* --- Skeleton (loading placeholder) ----------------------- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-2) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
.skeleton-line { height: 14px; margin-bottom: var(--space-2); }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-card { height: 120px; }
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Empty state ------------------------------------------ */

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-fg-muted);
}
.empty-state-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}
.empty-state-body {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}
.empty-state-cta {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-fg);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}
.empty-state-cta:hover { text-decoration: none; opacity: 0.9; }

/* --- Utility classes --------------------------------------

   Small, composable utilities for layouts that don't deserve a
   component of their own. Use sparingly — prefer a real component
   when the same pattern repeats. */

.num {
  font-variant-numeric: var(--numerals);
  font-family: var(--font-family);
}
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- View-as impersonation banner (M2 T2.9) ---
   Renders at top of body when a superadmin is impersonating
   another role. High-contrast warning palette so it's impossible
   to miss; the Restore button is the only POST a viewing-as admin
   can use, so it stays prominent. */
.mm-view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning);
  color: #1a1300;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 60; /* above the topbar's z-index of 50 */
}
.mm-view-as-banner__text {
  flex: 1 1 auto;
}
.mm-view-as-banner__form {
  margin: 0;
}
.mm-view-as-banner__restore {
  background: #1a1300;
  color: var(--color-warning);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}
.mm-view-as-banner__restore:hover { opacity: 0.9; }